:root {
  --pf-ground: #F3E7FB;
  --pf-ink: #241C2C;
  --pf-violet: #57317D;
  --pf-cloth: #E2CEC1;
  --pf-white: #FFFFFF;
  --pf-margin: max(7vw, calc((100vw - 1240px) / 2));
  color-scheme: light;
  font-family: 'Amiko', sans-serif;
  font-synthesis: none;
  color: var(--pf-ink);
  background: var(--pf-ground);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 32px; }
body { margin: 0; font-size: 18px; line-height: 1.8; overflow-wrap: break-word; }
a { color: var(--pf-violet); text-decoration-thickness: 1px; text-underline-offset: .23em; transition: color .18s, background-color .18s; }
a:hover { text-decoration-thickness: 3px; }
a:focus-visible { outline: 3px solid var(--pf-violet); outline-offset: 6px; }
::selection { color: var(--pf-white); background: var(--pf-violet); }
.pf-icon { display: inline-block; width: 20px; height: 20px; flex: 0 0 auto; vertical-align: middle; }
.pf-icon svg { display: block; width: 100%; height: 100%; }
.pf-jump { position: absolute; left: 20px; top: -100px; background: var(--pf-white); padding: 12px 20px; z-index: 10; }
.pf-jump:focus { top: 12px; }
.pf-mast { position: relative; height: 168px; display: flex; justify-content: center; align-items: flex-end; padding-bottom: 30px; }
.pf-name { font-family: 'Castoro Titling', Georgia, serif; font-size: 76px; line-height: 1; letter-spacing: -.065em; color: var(--pf-ink); text-decoration: none; }
.pf-name:hover { color: var(--pf-violet); }
.pf-corner { position: absolute; z-index: 4; top: 0; right: 0; width: 244px; height: 184px; background: var(--pf-violet); color: var(--pf-white); clip-path: polygon(0 0,100% 0,100% 100%,28% 100%,0 63%); }
.pf-corner::after { content: ''; position: absolute; width: 69px; height: 69px; bottom: 0; left: 0; background: var(--pf-cloth); clip-path: polygon(0 0,100% 100%,100% 0); }
.pf-corner nav { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; margin: 22px 12px 0 34px; }
.pf-corner a { display: flex; align-items: center; gap: 9px; color: var(--pf-white); font-size: 15px; line-height: 1.4; text-decoration: none; padding: 2px 4px; }
.pf-corner .pf-icon { width: 17px; height: 17px; }
.pf-corner a:hover { background: var(--pf-white); color: var(--pf-violet); }
.pf-corner a:focus-visible { outline-color: var(--pf-white); outline-offset: 2px; }
h1,h2 { font-family: 'Castoro Titling', Georgia, serif; font-weight: 400; line-height: 1.15; letter-spacing: -.035em; text-wrap: balance; }
h1 { font-size: 44px; margin: 0 0 28px; }
h2 { font-size: 40px; margin: 0; }
h3 { font-size: 19px; line-height: 1.5; margin: 0 0 12px; }
p { margin: 0 0 24px; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; }
/* A folded folio laid across the laundry, open at the photographic edge. */
.pf-opening { position: relative; isolation: isolate; min-height: calc(100svh - 168px); padding: 36px 0 64px; }
.pf-opening-photo { position: absolute; z-index: 0; inset: 0; margin: 0; }
.pf-opening-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 56% 48%; }
.pf-opening-sheet { position: relative; z-index: 2; width: min(68%, 980px); padding: 40px 84px 56px var(--pf-margin); border-top: 8px solid var(--pf-violet); background: var(--pf-cloth); clip-path: polygon(0 0,calc(100% - 60px) 0,100% 60px,100% calc(100% - 72px),calc(100% - 72px) 100%,0 100%); }
.pf-opening h1 { font-size: 50px; line-height: 1.12; max-width: 700px; margin-bottom: 22px; }
.pf-welcome { max-width: 600px; font-size: 18px; line-height: 1.6; margin-bottom: 26px; }
.pf-care { max-width: 650px; }
.pf-impression { width: 156px; height: 17px; margin: 0 0 16px; background: transparent; box-shadow: inset 2px 3px 5px #bba596, inset -2px -2px 3px #FFFFFF; }
.pf-care p { font-size: 16px; line-height: 1.65; margin: 0; }
.pf-cloth-lift { position: absolute; z-index: 3; top: 8px; right: 28%; width: 156px; height: 178px; background: var(--pf-cloth) url('/pureform-fold-c600eda0d479/cloth-lift.webp') center 28% / cover; clip-path: polygon(17% 0,92% 9%,100% 70%,71% 100%,0 76%); transform: rotate(-8deg); }
/* Each question gets a full folio, a large number and a calm reading column. */
.pf-folio { position: relative; min-height: 100svh; padding: 110px var(--pf-margin); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 100px; align-content: center; background: var(--pf-white); }
.pf-folio:nth-of-type(odd) { background: var(--pf-cloth); }
.pf-question { position: sticky; top: 65px; align-self: start; max-width: 440px; }
.pf-leaf-mark { display: flex; align-items: center; gap: 27px; margin: 0 0 32px -7px; color: var(--pf-violet); }
.pf-count { display: block; font-family: 'Castoro Titling', Georgia, serif; font-size: 106px; line-height: 1; letter-spacing: -.08em; }
.pf-leaf-mark > .pf-icon { width: 30px; height: 30px; }
.pf-answer { position: relative; max-width: 625px; align-self: center; }
.pf-answer::before { content: ''; display: block; width: 64px; height: 6px; margin-bottom: 30px; background: var(--pf-violet); }
.pf-answer > p:first-of-type { font-size: 21px; line-height: 1.7; }
.pf-forward { display: inline-flex; align-items: center; gap: 13px; margin-top: 22px; padding: 8px 0; font-size: 16px; font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--pf-violet); }
.pf-forward > .pf-icon { transition: transform .18s; }
.pf-forward:hover > .pf-icon,.pf-forward:focus-visible > .pf-icon { transform: translate(3px, -3px); }
.pf-space-outline { display: block; width: 320px; max-width: 100%; height: auto; aspect-ratio: 1; margin: 48px 0 -30px -28px; transform: rotate(8deg); }
.pf-breadcrumb { font-size: 14px; margin: 0 var(--pf-margin) 24px; }
.pf-breadcrumb ol { margin: 0; padding: 0; list-style: none; display: flex; gap: 10px; flex-wrap: wrap; }
.pf-breadcrumb li + li::before { content: '/'; padding-right: 10px; }
.pf-article-head { padding: 18px 0 50px; }
.pf-article-stage { position: relative; isolation: isolate; background: var(--pf-cloth); }
.pf-article-title { position: relative; z-index: 2; padding: 44px var(--pf-margin) 48px; border-top: 7px solid var(--pf-violet); }
.pf-article-title h1 { max-width: 1000px; margin-bottom: 22px; }
.pf-deck { max-width: 710px; font-size: 19px; line-height: 1.75; }
.pf-illustrated-head .pf-article-stage { min-height: 370px; }
.pf-illustrated-head .pf-article-title { width: min(68%, 980px); min-height: 370px; padding-right: 80px; background: var(--pf-ground); clip-path: polygon(0 0,calc(100% - 54px) 0,100% 54px,100% calc(100% - 54px),calc(100% - 54px) 100%,0 100%); }
.pf-header-photo { position: absolute; z-index: 0; inset: 0; margin: 0; }
.pf-header-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.pf-header-photo figcaption { position: absolute; right: var(--pf-margin); bottom: -19px; width: min(25%, 340px); padding: 16px 20px; background: var(--pf-cloth); font-size: 16px; line-height: 1.6; box-shadow: 9px 9px 0 var(--pf-violet); }
.pf-contents { display: flex; gap: 8px 30px; flex-wrap: wrap; margin: 40px var(--pf-margin) 0; }
.pf-contents a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 15px; text-decoration: none; border-bottom: 1px solid var(--pf-violet); }
.pf-contents a:hover { border-bottom-width: 3px; padding-bottom: 4px; }
.pf-contents .pf-icon { width: 17px; height: 17px; }
.pf-ending { position: relative; padding: 85px var(--pf-margin) 95px; background: var(--pf-violet); color: var(--pf-white); }
.pf-ending::before { content: ''; position: absolute; right: 0; top: 0; width: 66px; height: 66px; background: var(--pf-cloth); clip-path: polygon(0 0,100% 100%,100% 0); }
.pf-ending h2 { max-width: 850px; margin-bottom: 28px; font-size: 36px; }
.pf-ending p { max-width: 740px; }
.pf-ending a { color: var(--pf-white); }
.pf-ending a:focus-visible { outline-color: var(--pf-white); }
.pf-reference-entry { margin-bottom: 40px; padding-top: 24px; border-top: 1px solid var(--pf-violet); }
.pf-reference-entry h3 { font-size: 19px; font-weight: 600; }
.pf-reference-entry p { font-size: 16px; line-height: 1.75; }
.pf-reference-entry .pf-byline { font-size: 15px; margin-bottom: 10px; }
.pf-bottom { padding: 64px var(--pf-margin) 42px; font-size: 16px; background: var(--pf-ground); border-top: 10px solid var(--pf-violet); }
.pf-bottom p { max-width: 740px; margin-bottom: 18px; }
.pf-bottom nav { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-bottom: 34px; }
.pf-bottom small { font-size: 14px; }
.pf-missing { min-height: 60svh; padding: 65px var(--pf-margin) 100px; background: var(--pf-cloth); }
.pf-missing p { max-width: 620px; }
@media (max-width: 1100px) and (min-width: 701px) {
  .pf-name { font-size: 62px; }
  .pf-corner { width: 214px; height: 174px; }
  .pf-corner nav { margin: 25px 10px 0 20px; }
  .pf-corner a { font-size: 14px; }
  .pf-opening-sheet { width: 78%; padding-right: 72px; }
  .pf-opening h1 { font-size: 40px; }
  .pf-cloth-lift { right: 13%; width: 110px; height: 128px; }
  .pf-folio { gap: 48px; padding-top: 85px; padding-bottom: 85px; }
  h2 { font-size: 32px; }
  .pf-count { font-size: 88px; }
  .pf-illustrated-head .pf-article-title { width: 70%; padding-right: 54px; }
  .pf-article-title h1 { font-size: 36px; }
  .pf-header-photo figcaption { right: 30px; width: 25%; font-size: 14px; padding: 12px; }
}
@media (max-width: 700px) {
  :root { --pf-margin: 24px; }
  html { scroll-padding-top: 20px; }
  body { font-size: 16px; line-height: 1.8; }
  .pf-mast { height: 85px; padding: 0 24px 14px; justify-content: flex-start; }
  .pf-name { font-size: 35px; }
  .pf-corner { width: 110px; height: 80px; clip-path: polygon(0 0,100% 0,100% 100%,18% 100%,0 78%); }
  .pf-corner::after { width: 20px; height: 18px; }
  .pf-corner nav { margin: 4px 0 0 8px; gap: 1px; align-items: center; }
  .pf-corner a { max-width: 100%; font-size: 12px; line-height: 1.5; padding: 0 1px; white-space: normal; overflow-wrap: anywhere; }
  .pf-corner .pf-icon { display: none; }
  h1 { font-size: 28px; margin-bottom: 22px; line-height: 1.25; }
  h2 { font-size: 28px; line-height: 1.3; }
  h3 { font-size: 18px; }
  p { margin-bottom: 24px; }
  .pf-opening { min-height: 0; padding: 0; }
  .pf-opening-sheet { width: 100%; padding: 25px 24px 36px; border-top-width: 6px; clip-path: polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%); }
  .pf-opening h1 { font-size: 26px; line-height: 1.18; margin-bottom: 18px; }
  .pf-welcome { max-width: 100%; font-size: 16px; line-height: 1.55; margin-bottom: 20px; }
  .pf-care { max-width: 100%; }
  .pf-impression { width: 135px; height: 14px; margin-bottom: 16px; }
  .pf-care p { font-size: 16px; line-height: 1.55; }
  .pf-opening-photo { position: relative; inset: auto; height: 198px; margin-top: -24px; }
  .pf-opening-photo img { object-position: center 40%; }
  .pf-cloth-lift { top: auto; right: 24px; bottom: 116px; width: 75px; height: 85px; }
  .pf-folio { min-height: 0; padding: 64px 24px 70px; display: block; }
  .pf-question { position: relative; top: auto; max-width: 100%; margin-bottom: 34px; }
  .pf-leaf-mark { gap: 24px; margin: 0 0 24px -3px; }
  .pf-count { font-size: 76px; }
  .pf-leaf-mark > .pf-icon { width: 25px; height: 25px; }
  .pf-answer::before { width: 45px; height: 5px; margin-bottom: 24px; }
  .pf-answer > p:first-of-type { font-size: 18px; line-height: 1.75; }
  .pf-forward { line-height: 1.65; }
  .pf-space-outline { width: 190px; height: 190px; margin: 30px 0 0 auto; }
  .pf-breadcrumb { font-size: 14px; margin-bottom: 22px; }
  .pf-article-head { padding: 20px 0 30px; }
  .pf-article-title { padding: 28px 24px 34px; }
  .pf-article-title h1 { font-size: 28px; }
  .pf-deck { font-size: 16px; line-height: 1.75; }
  .pf-illustrated-head .pf-article-stage { min-height: 0; }
  .pf-illustrated-head .pf-article-title { width: 100%; min-height: 0; padding: 28px 24px 40px; clip-path: polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%); }
  .pf-header-photo { position: relative; inset: auto; margin-top: -24px; }
  .pf-header-photo img { height: 220px; object-position: center; }
  .pf-header-photo figcaption { position: relative; right: auto; bottom: auto; width: calc(100% - 72px); margin: -24px 24px 0 48px; padding: 16px; font-size: 16px; box-shadow: 6px 6px 0 var(--pf-violet); }
  .pf-contents { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 32px; }
  .pf-contents a { font-size: 16px; line-height: 1.7; }
  .pf-ending { padding: 60px 24px 65px; }
  .pf-ending h2 { font-size: 28px; }
  .pf-ending::before { width: 36px; height: 36px; }
  .pf-reference-entry h3 { font-size: 18px; }
  .pf-bottom { padding: 45px 24px 35px; }
  .pf-bottom nav { gap: 14px 25px; }
  .pf-bottom p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  a,.pf-forward > .pf-icon { transition: none; }
  .pf-forward:hover > .pf-icon,.pf-forward:focus-visible > .pf-icon { transform: none; }
}
