/* Aurre, pre-launch. Tokens and rules from DESIGN.md. */

@font-face{font-family:"TAY Birdie";src:url("../fonts/birdie.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Quiet Attempt";src:url("../fonts/quiet-attempt.woff2") format("woff2");font-display:swap}
@font-face{font-family:"PT Sans Narrow";src:url("../fonts/pt-sans-narrow-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"PT Sans Narrow";src:url("../fonts/pt-sans-narrow-700.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --screen:calc(100svh + var(--gap,0px));   /* the film's screen: what she sees above Safari's toolbar (--gap, main.js) */
  --cream:#FCFAF1;--blush:#F3CFC7;--blush-soft:#F8E4DE;--blush-deep:#D5ACA5;--rose:#BF7C88;
  --espresso:#332721;--espresso-thread:#18110F;--charcoal:#3A3A3B;--rose-ink:#944154;--cream-on-espresso:#F4F0E3;
  --line:rgba(58,58,59,.18);--line-strong:rgba(58,58,59,.38);
  --display:"TAY Birdie","PT Sans Narrow",sans-serif;--script:"Quiet Attempt",cursive;--body:"PT Sans Narrow","Arial Narrow",sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);
  --gutter:clamp(16px,5vw,72px);--nav:64px;--wide:1240px;
  --s-xs:8px;--s-sm:12px;--s-md:20px;--s-lg:32px;--s-xl:56px;--s-2xl:96px;--s-3xl:clamp(104px,13vw,160px);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{color-scheme:light only;background:var(--cream);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--charcoal);font:400 1.125rem/1.55 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
p,li,dd,figcaption{text-wrap:pretty}                  /* no word left alone on a paragraph's last line */
img,svg,canvas{display:block;max-width:100%}
a{color:var(--rose-ink);text-decoration:underline dashed 1px;text-underline-offset:.25em}
p{margin:0}
h1,h2,h3{margin:0;font-weight:400}
fieldset{border:0;margin:0;padding:0;min-width:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--charcoal);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:var(--s-md);top:var(--s-md);z-index:100;background:var(--espresso);color:var(--cream);padding:12px 18px;border-radius:6px;transform:translateY(-200%);text-decoration:none}
.skip:focus{transform:none}

/* type */
.display{font:400 clamp(2.25rem,5vw,3.75rem)/1.05 var(--display);letter-spacing:-.07em;text-wrap:balance}
.headline{font:400 clamp(1.625rem,3vw,2.25rem)/1.1 var(--display);letter-spacing:-.06em;text-wrap:balance}
.script{font:400 clamp(1.75rem,3.5vw,2.75rem)/1.25 var(--script)}
.label{font:700 .875rem/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase}
.lead{font-size:clamp(1.1875rem,1.6vw,1.3125rem);line-height:1.5;max-width:36em;text-wrap:pretty}
.help{font-size:.9375rem;line-height:1.45}
/* placeholder copy, until confirmed */
.ph{text-decoration:underline dotted 1.5px var(--rose-ink);text-underline-offset:.22em;cursor:help}

/* buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 32px;border:0;border-radius:6px;cursor:pointer;
  font:700 .875rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  transition:transform 160ms var(--ease-out),background-color 200ms ease;touch-action:manipulation}
.btn:active{transform:scale(.97) translateY(1px)}
.btn-primary{background:var(--espresso);color:var(--cream)}
@media (hover:hover) and (pointer:fine){.btn-primary:hover{background:var(--espresso-thread)}}
.btn-sm{height:44px;padding:0 20px}
.btn[disabled]{opacity:.55;cursor:progress}
.link-quiet{display:inline-flex;align-items:center;min-height:44px;color:var(--charcoal);font:700 .875rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;text-decoration:underline dashed 1px;text-underline-offset:.45em}

/* the cursor (a trial): Suha's four-point star, small and charcoal; the hand and the text cursor stay where they belong */
@media (pointer:fine){
  html.js body{cursor:url("../img/north-star.svg") 15 15,auto}
  html.js :is(a,button,summary,label,.chip,.look,.note-toggle,[type=submit]){cursor:pointer}
  html.js :is(input:not([type=submit]),textarea,select){cursor:text}
  html.js select{cursor:pointer}
}

/* nav: appears once the opening has played */
.nav{position:fixed;inset:0 0 auto;z-index:40;height:var(--nav);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);pointer-events:none;
  background:transparent;transition:background-color .35s ease}
.nav>*{pointer-events:auto;transition:opacity .35s var(--ease-out),transform .35s var(--ease-out)}
.nav-mark{color:var(--charcoal);width:96px}
.nav[data-state="open"]>*{opacity:0;transform:translateY(-6px);pointer-events:none}
.nav[data-state="film"]>*{opacity:0;transform:translateY(-6px);pointer-events:none}
.nav[data-state="page"]{background:var(--cream);pointer-events:auto}

/* ---------- 1. the film ---------- */
.film{position:relative}
/* the frame: as wide as the photograph allows (16:10), as large as the screen allows once the words have their room */
.film-stage{position:relative;background:transparent;color:var(--charcoal);--frame-w:min(100%,calc((100svh - 330px) * 1.6),1320px)}
.film-gl,.film-video{display:none}
.film-open{display:grid;justify-items:center;align-content:center;gap:clamp(14px,2.2svh,24px);padding:calc(var(--nav) - 8px) var(--gutter) var(--s-xl)}
/* the name at the top, and under it, like the line under a magazine's title, the way into the rest of Aurre: the
   three pages in one quiet line, a small rose star between each */
.hero-copy{display:grid;justify-items:center}
.hero-copy .wm{width:clamp(150px,14vw,230px);color:var(--charcoal)}
.hero-index{display:flex;justify-content:center;gap:0 34px;margin-top:clamp(6px,1.2svh,12px)}
.hero-index a{position:relative;display:inline-flex;align-items:center;min-height:36px;color:var(--charcoal);text-decoration:none;
  font:700 .75rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;touch-action:manipulation}
.hero-index a+a::before{content:"";position:absolute;left:-21px;top:50%;width:8px;height:8px;margin-top:-4.5px;background:var(--rose);pointer-events:none;
  -webkit-mask:url("../img/north-star.svg") center/contain no-repeat;mask:url("../img/north-star.svg") center/contain no-repeat}
.hero-index a::after{content:"";position:absolute;left:0;right:.2em;bottom:7px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
.hero-index a:hover::after,.hero-index a:focus-visible::after{transform:scaleX(1);transform-origin:left}
@media (max-width:699px){
  .hero-index{gap:0 22px;margin-top:4px}
  .hero-index a{min-height:44px;font-size:.6875rem;letter-spacing:.14em}
  .hero-index a+a::before{left:-15px;width:7px;height:7px;margin-top:-4px}
}
.film-still{position:relative;margin:0;width:var(--frame-w);aspect-ratio:1.6}
.film-still img{display:block;width:100%;height:100%;object-fit:cover;object-position:52% 48%}
/* under the frame, set to its edges: what Aurre is on the left, the invitation on the right */
.hero-foot{width:var(--frame-w);display:grid;gap:var(--s-md) var(--s-xl);align-items:start}
.hero-line{display:grid;gap:.15rem;justify-items:start;text-align:left}
.hero-line .caps{font:700 .875rem/1.3 var(--body);letter-spacing:.22em;text-transform:uppercase}
.hero-line .script{font:400 clamp(1.875rem,2.5vw,2.5rem)/1 var(--script);margin-left:-.04em}
.hero-act{display:grid;gap:12px;justify-items:end;text-align:right}
.film-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--s-sm) var(--s-lg)}
.film-when{font-size:1rem;max-width:30em;text-wrap:balance}
@media (min-width:900px){.hero-foot{grid-template-columns:minmax(0,1fr) auto}}
@media (max-width:899px){
  .hero-foot,.hero-line,.hero-act{justify-items:center;text-align:center}
  .film-cta{justify-content:center}
}
@media (max-width:699px){
  .film-still{width:calc(100% + 2 * var(--gutter));margin:0 calc(-1 * var(--gutter));aspect-ratio:4/5}
  .hero-foot{width:100%}
}
.film-cue{display:none}
/* the North Star: one of Suha's stars, holding its place above her while everything else moves (a trial) */
.north{position:absolute;left:50%;top:clamp(14px,2.2svh,24px);z-index:2;width:18px;height:18px;margin-left:-9px;color:var(--rose);pointer-events:none}
.north svg{display:block;width:100%;height:100%;fill:currentColor;overflow:visible;animation:north 6.5s ease-in-out 2.5s infinite}
@keyframes north{0%,100%{transform:scale(1)}12%{transform:scale(1.22)}24%{transform:scale(1)}}
/* sound: a speaker, the word, and (until the music can play) a quiet "Turn on sound" beside it. In the bottom corner,
   never in the middle; the colour follows the film (charcoal on cream, cream in the dark) */
.sound-bar{position:absolute;right:var(--gutter);bottom:12px;z-index:3;display:flex;flex-direction:row-reverse;align-items:center;gap:12px;color:var(--charcoal)}
.sound{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 2px;border:0;background:none;cursor:pointer;color:inherit;
  font:700 .8125rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;touch-action:manipulation}
.sound-icon{width:26px;height:20px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sound-icon .spk{fill:currentColor;stroke:none}
.sound-icon .wave{stroke-dasharray:2.4 2;transition:opacity .4s ease}
.sound-icon .slash{opacity:0;transition:opacity .3s ease}
.sound-bar[data-state="on"] .w1{animation:wave 1.6s ease-in-out infinite}
.sound-bar[data-state="on"] .w2{animation:wave 1.6s ease-in-out .2s infinite}
.sound-bar[data-state="off"] .wave{opacity:0}
.sound-bar[data-state="off"] .slash{opacity:1}
.sound-bar[data-state="off"] .sound-label{opacity:.7}
/* waiting: the waves breathe, and a ring opens round the speaker now and then */
.sound-bar[data-state="idle"] .wave{animation:breathe 2.4s ease-in-out infinite}
.sound-bar[data-state="idle"] .sound::before{content:"";position:absolute;left:-7px;top:50%;width:40px;height:40px;margin-top:-20px;border-radius:50%;border:1px solid currentColor;opacity:0;animation:ring 3.2s var(--ease-out) 2.6s infinite}
.sound-hint{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;border:1px solid color-mix(in srgb,currentColor 35%,transparent);cursor:pointer;
  font:400 .9375rem/1 var(--body);white-space:nowrap;opacity:0;transform:translateX(10px);pointer-events:none;transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.sound-hint.in{opacity:1;transform:none;pointer-events:auto}
.sound-hint .eq{display:inline-flex;align-items:flex-end;gap:2px;height:11px;margin-right:8px}
.sound-hint .eq i{width:2px;height:100%;border-radius:1px;background:var(--rose);transform-origin:50% 100%;animation:eq 1.1s ease-in-out infinite}
.sound-hint .eq i:nth-child(2){animation-delay:-.45s}
.sound-hint .eq i:nth-child(3){animation-delay:-.8s}
@keyframes eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.sound-hint .eq i{animation:none;transform:scaleY(.7)}}
@keyframes wave{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes breathe{50%{opacity:.35}}
@keyframes ring{0%{transform:scale(.6);opacity:.55}70%,100%{transform:scale(1.25);opacity:0}}
.beats{display:grid;gap:var(--s-sm);justify-items:center;text-align:center;padding:var(--s-2xl) var(--gutter)}
.beat{font:400 clamp(2.25rem,5vw,3.75rem)/1.05 var(--display);letter-spacing:-.07em}
/* the end card: the name, and her line under it */
.endcard{display:grid;justify-items:center;gap:clamp(10px,1.4vw,18px);margin-top:var(--s-lg)}
.endcard .wm{width:min(62vw,420px);color:var(--charcoal)}
.endcard-line{font:400 clamp(2rem,3.4vw,3rem)/1.1 var(--script)}
/* "Launching", as the photograph comes back: the one word set large in Birdie, and under it the date, small and
   tracked, its two hairlines running out to the word's own width, so the two read as one mark: Launching, Ramadan 2027 */
.soon-card{display:grid;justify-items:center;margin-top:var(--s-xl);text-align:center}
.soon-in{display:grid;gap:clamp(14px,1.9vw,24px)}
.soon-title{font:400 clamp(3.4rem,8.4vw,7.5rem)/.95 var(--display);letter-spacing:-.06em;color:var(--espresso);padding-bottom:.06em}
.soon-date{display:flex;align-items:center;gap:14px;font:700 clamp(.875rem,1vw,1rem)/1 var(--body);letter-spacing:.3em;text-transform:uppercase;color:var(--espresso);padding-left:.3em}
.soon-date::before,.soon-date::after{content:"";flex:1 1 0;min-width:24px;height:1px;background:currentColor;opacity:.5}
.soon-date .ph{text-decoration-color:var(--rose-ink)}

/* cinema: the stage holds while the scroll plays the film (JS adds .cinema when WebGL and motion are available) */
.cinema .film{--film-base:480;height:calc(100svh + (var(--film-base) * .96 + 220) * 1svh)}
.cinema .film-stage{position:sticky;top:0;height:var(--screen);overflow:hidden}
/* once the photograph has dissolved, the stage is Suha's paper, held still with the collection's opening; its grain is
   lined up with the page's own paper for the moment the two let go, so it carries on without a seam */
.cinema .film-stage{background:var(--cream) url("../img/paper-cream.webp") 0 calc(var(--screen) - 100svh - 1svh * (var(--film-base) * .96 + 220))/512px 512px}
.cinema .film-gl{display:block;position:absolute;inset:0;width:100%;height:100%}
.cinema .film-video{display:block;position:absolute;left:0;top:0;width:2px;height:2px;opacity:0;pointer-events:none}
.cinema .film-open{position:absolute;inset:0;padding:clamp(46px,6.4svh,62px) var(--gutter) clamp(20px,3.2svh,32px)}
.cinema .film-still img{visibility:hidden}
.cinema .beats{position:absolute;left:var(--gutter);right:var(--gutter);bottom:13svh;display:block;padding:0;text-align:left;pointer-events:none}
.cinema .beat{position:absolute;left:0;bottom:0;color:var(--cream-on-espresso);opacity:0;max-width:12em;will-change:transform,opacity}
/* in the film the name is drawn in light (film.js); the page only holds its place, centred, with her line beneath */
.cinema .endcard{position:fixed;inset:0;margin:0;display:grid;place-content:center;justify-items:center;gap:clamp(12px,2svh,22px);padding-top:4svh}
.cinema .endcard .wm{width:min(58vw,880px);visibility:hidden}
.cinema .endcard-line{color:var(--cream-on-espresso);opacity:0;font-size:clamp(2.1rem,3.6vw,3.4rem);will-change:transform,opacity}
/* in the film: centred over the photograph as it comes back, a faint wash of light behind the words */
.cinema .soon-card{position:fixed;inset:0;margin:0;place-content:center;padding-bottom:2svh;opacity:0;will-change:opacity;
  background:radial-gradient(ellipse 42% 30% at 50% 49%,rgba(252,250,241,.5),rgba(252,250,241,0))}
.cinema .soon-title,.cinema .soon-date{will-change:transform,clip-path}
/* the nudge to begin: the words, and beside them a running stitch with a small rose star gliding down it, over and
   over, gently (it's a film, and there is more below). On a laptop in the bottom left corner, across from the sound;
   on a phone small and on one line, in the page's bottom margin under the invitation. */
.cinema .film-cue{--run:30px;display:flex;align-items:center;gap:12px;color:var(--charcoal);font:700 .75rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase}
.cue-thread{position:relative;flex:none;width:11px;height:calc(var(--run) + 10px);background:repeating-linear-gradient(to bottom,rgba(58,58,59,.5) 0 4px,transparent 4px 8px) 50% 0/1px 100% no-repeat}
.cue-thread i{position:absolute;left:0;top:0;width:11px;height:11px;background:var(--rose);animation:cue-star 2.8s var(--ease-in-out) 2.4s infinite both;
  -webkit-mask:url("../img/north-star.svg") center/contain no-repeat;mask:url("../img/north-star.svg") center/contain no-repeat}
@keyframes cue-star{0%{transform:translateY(-6px) scale(.5) rotate(0deg);opacity:0}18%{opacity:1;transform:translateY(0) scale(1) rotate(0deg)}76%{opacity:1}100%{transform:translateY(var(--run)) scale(.7) rotate(45deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.cue-thread i{animation:none}}
@media (min-width:900px){.cinema .film-cue{position:absolute;left:var(--gutter);bottom:20px}}
@media (max-width:899px){.cinema .film-cue{--run:20px;flex-direction:column;gap:6px;justify-self:center}}
@media (max-width:699px){
  .cinema .film{--film-base:420}
  /* the name sits a little way down, with air above it (and the North Star with it); the nudge keeps to the bottom margin */
  .cinema .film-open{grid-template-rows:auto minmax(0,1fr) auto;align-content:stretch;padding-top:clamp(60px,8.6svh,78px);padding-bottom:54px}
  .cinema .north{top:calc(clamp(60px,8.6svh,78px) - 32px)}
  .cinema .film-cue{position:absolute;left:50%;bottom:12px;translate:-50% 0;--run:16px;flex-direction:row;gap:10px;font-size:.6875rem;letter-spacing:.16em;white-space:nowrap}
  .cinema .film-still{height:100%;aspect-ratio:auto}
  .cinema .hero-copy{padding-bottom:0}
  .cinema .hero-line{position:relative;z-index:1;justify-self:stretch;margin:calc(-1 * clamp(104px,15.5svh,136px)) calc(-1 * var(--gutter)) 0;padding:clamp(44px,7svh,66px) var(--gutter) 4px;
    background:linear-gradient(to bottom,rgba(252,250,241,0),rgba(252,250,241,.8) 46%,var(--cream) 80%)}
  .cinema .beats{bottom:22svh}                                       /* well up from the foot of the screen, where they were missed */
  .cinema .beat{max-width:none;right:0}
  .cinema .endcard .wm{width:78vw}
  /* the name and her line hold to the film's own screen (--screen), laid out by the width, never by the browser's bars
     or the fonts: the gap under the name is the same in every browser, and a little closer than on a laptop */
  .cinema .endcard{inset:0 0 auto;height:var(--screen);display:block;padding:0}
  .cinema .endcard .wm{position:absolute;left:11vw;top:calc(var(--screen) * .46 - 7.95vw)}
  .cinema .endcard-line{position:absolute;left:0;right:0;top:calc(var(--screen) * .46 + 7.95vw + 13px);text-align:center}
  .cinema .soon-card{inset:0 0 auto;height:var(--screen)}
  .sound-bar{top:6px;bottom:auto;right:auto;left:calc(var(--gutter) - 6px);flex-direction:row;gap:8px}
  .sound-hint{transform:translateX(-10px);height:30px;padding:0 12px;font-size:.875rem}
  .sound-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}   /* the speaker alone; the word stays for screen readers */
}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* the opening arrives in order while the photograph develops: the name set, the words beneath */
.cinema .hero-copy .wm{animation:set 1.6s var(--ease-out) .3s both}
.cinema .hero-index{animation:rise 1.2s var(--ease-out) 1s both}
.cinema .hero-line .caps,.cinema .hero-line .script,.cinema .film-cta,.cinema .film-when,.cinema .film-cue{animation:rise 1.2s var(--ease-out) both}
.cinema .hero-line .caps{animation-delay:1.2s}
.cinema .hero-line .script{animation-delay:1.35s}
.cinema .film-cta{animation-delay:1.5s}
.cinema .film-when,.cinema .film-cue{animation-delay:1.7s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
@keyframes set{from{clip-path:inset(0 0 100% 0);transform:translateY(40%)}}
@keyframes draw{from{transform:scaleX(0)}}


/* her signature */
.sign{margin-top:var(--s-lg);font:400 clamp(2.25rem,3.5vw,2.75rem)/1 var(--script)}
.sign-role{margin-top:.35em;font:700 .8125rem/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase}


.card-colour,.design-colour{font:400 clamp(1.0625rem,1.3vw,1.375rem)/1.2 var(--display);letter-spacing:-.02em;opacity:.8;margin-bottom:calc(-1 * clamp(4px,.7vw,10px))}
/* questions */
.q{display:grid;gap:10px;margin-top:var(--s-md)}
.q-title{font:700 1.125rem/1.3 var(--body)}
.q .help{margin-top:-4px}
/* the input itself is never what's tapped: her finger always lands on the label. (On an iPhone the press made the label
   rise over its input part-way through the tap, and Safari drops a tap whose target changes, so some taps did nothing.) */
.seg input,.chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.seg label,.chip{cursor:pointer;-webkit-tap-highlight-color:transparent}
/* would you wear it: four in a row */
.seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule-strong,var(--line-strong));border:1px solid var(--ink,var(--charcoal));border-radius:6px;overflow:hidden}
.seg label{position:relative;display:flex}
.seg span{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;min-height:56px;padding:8px 10px;background:var(--chip,var(--cream));font-size:1.0625rem;line-height:1.15;user-select:none;
  transition:background-color .2s ease,color .2s ease}
.seg input:checked+span{background:var(--pick,var(--espresso));color:var(--pick-ink,var(--cream))}
@media (hover:hover) and (pointer:fine){.seg input:not(:checked)+span:hover{background:var(--chip-hover,var(--blush-soft))}}
.seg label:active span{transform:scale(.98)}
.seg label:has(input:focus-visible){outline:2px solid var(--ink,var(--charcoal));outline-offset:-5px;z-index:1}
@media (max-width:520px){.seg{grid-template-columns:1fr 1fr}}
/* in a design's questions the four go two by two whenever their column is narrow (a tablet on its side, beside the
   photographs), so "I'd consider it" keeps to one line */
.step-design .step-body{container-type:inline-size}
@container (max-width:520px){.seg{grid-template-columns:1fr 1fr}}
/* a note, if she'd like to add one */
.note{margin-top:var(--s-sm);display:grid;gap:10px}
.note-toggle{justify-self:start;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0;border:0;background:none;cursor:pointer;
  font:700 .8125rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:inherit}
.note-toggle::before{content:"";width:14px;height:14px;flex:none;transition:background-size .3s var(--ease-out);
  background:linear-gradient(currentColor,currentColor) center/14px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 14px no-repeat}
.note.open .note-toggle::before{background-size:14px 1.5px,1.5px 0}
textarea,.other input{width:100%;border:1px solid var(--field-line,var(--charcoal));border-radius:6px;background:var(--cream);color:var(--charcoal);font:400 1.0625rem/1.5 var(--body);padding:12px 16px}
textarea{min-height:104px;resize:vertical}
.other input{height:50px}
textarea:focus,.other input:focus{outline:none;box-shadow:inset 0 0 0 1px var(--charcoal)}
::placeholder{color:rgba(58,58,59,.6)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex}
.chip span{position:relative;display:inline-flex;align-items:center;min-height:46px;padding:10px 16px 10px 42px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--rule-strong,var(--line-strong));
  background:var(--chip,var(--cream));font-size:1.0625rem;line-height:1.2;user-select:none;transition:box-shadow .18s ease,background-color .18s ease,transform .14s var(--ease-out)}
.chip span::before{content:"";position:absolute;left:15px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;box-shadow:inset 0 0 0 1.25px var(--rule-strong,var(--line-strong));transition:box-shadow .22s var(--ease-out),background-color .22s ease}
.chip.multi span::before{border-radius:4px}
.chip:active span{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.chip:hover span{box-shadow:inset 0 0 0 1px var(--ink,var(--charcoal))}}
.chip:has(input:focus-visible) span{outline:2px solid var(--ink,var(--charcoal));outline-offset:2px}
.chip input:checked+span{background:var(--chip-on,var(--blush-soft));box-shadow:inset 0 0 0 1.5px var(--ink,var(--charcoal))}
/* chosen: the ring closes to a pearl (one choice), or the box is ticked (any) */
.chip input:checked+span::before{box-shadow:inset 0 0 0 5px var(--pearl,var(--rose-ink))}
.chip.multi input:checked+span::before{box-shadow:none;background:var(--pearl,var(--rose-ink))}
.chip.multi input:checked+span::after{content:"";position:absolute;left:20.5px;top:50%;width:5px;height:9px;margin-top:-6.5px;border:solid var(--pearl-ink,var(--cream));border-width:0 2px 2px 0;transform:rotate(45deg)}

.form-status{font-size:1rem}
.form-status.error{color:var(--rose-ink)}

/* fields */
.field{display:grid;gap:8px;align-content:start}
.field label{font:700 .875rem/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase}
.field .optional{font-weight:400;letter-spacing:.04em;text-transform:none}
.field input,.field select{height:52px;width:100%;-webkit-appearance:none;appearance:none;padding:0 16px;border-radius:6px;border:1px solid var(--charcoal);background:var(--cream);color:var(--charcoal);font:400 1.125rem/1 var(--body)}
.field input:focus,.field select:focus{outline:none;box-shadow:inset 0 0 0 1px var(--charcoal)}
.field select{padding-right:44px;background:var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233A3A3B' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 18px center}
.field input[type=date]{display:flex;align-items:center;text-align:left}
.field input[type=date]::-webkit-date-and-time-value{text-align:left}
.field-help{font-size:.9375rem;margin-top:-2px}
.field [aria-invalid="true"]{border-color:var(--rose-ink);box-shadow:inset 0 0 0 1px var(--rose-ink)}
.field-error{font-size:1rem;color:var(--rose-ink)}


/* ---------- 6. honest answers ---------- */
.faq{max-width:calc(var(--wide) + 2 * var(--gutter));margin:0 auto;padding:var(--s-3xl) var(--gutter);display:grid;gap:var(--s-xl)}
.faq-side{display:grid;gap:var(--s-md);justify-items:start;align-content:start}
.faq-side p:not(.script){max-width:24em}
.faq-list{display:grid;border-top:1px solid var(--charcoal)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s-md);min-height:80px;padding:20px 0;cursor:pointer;
  font:400 clamp(1.25rem,1.8vw,1.5rem)/1.2 var(--display);letter-spacing:-.05em}
.faq summary::-webkit-details-marker{display:none}
/* a plus that becomes a minus when open */
.faq summary::after{content:"";flex:none;width:18px;height:18px;transition:background-size .3s var(--ease-out);
  background:linear-gradient(var(--charcoal),var(--charcoal)) center/18px 1.5px no-repeat,linear-gradient(var(--charcoal),var(--charcoal)) center/1.5px 18px no-repeat}
.faq details[open] summary::after{background-size:18px 1.5px,1.5px 0}
.faq details p{padding:0 0 28px;max-width:36em;font-size:1.0625rem}
@media (min-width:900px){
  .faq{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);column-gap:clamp(56px,8vw,140px);align-items:start}
  .faq-side{position:sticky;top:calc(var(--nav) + 48px)}
}

/* ---------- footer: night ---------- */
.footer{position:relative;isolation:isolate;background:var(--espresso);color:var(--cream-on-espresso);padding:var(--s-2xl) var(--gutter) var(--s-xl);display:grid;gap:var(--s-lg);align-content:center;overflow:hidden;min-height:clamp(360px,24vw,460px)}
.footer-stars{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.js .footer::before{display:none}
.footer::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--espresso-thread);
  -webkit-mask:url("../img/floral-tile.svg") 0 0/724px 181px repeat,linear-gradient(to bottom,#000,transparent 75%);mask:url("../img/floral-tile.svg") 0 0/724px 181px repeat,linear-gradient(to bottom,#000,transparent 75%);-webkit-mask-composite:source-in;mask-composite:intersect}
.footer>*:not(canvas){justify-self:start}
.footer .wm{width:150px;color:var(--cream-on-espresso)}
.footer-links{display:flex;flex-wrap:wrap;gap:var(--s-sm) var(--s-lg);margin:0;padding:0;list-style:none}
.footer a{color:var(--cream-on-espresso);display:inline-flex;min-height:44px;align-items:center}
.footer .ph{text-decoration-color:var(--blush)}
.footer-small{font-size:.9375rem;max-width:44em;opacity:.85}

/* reveals: a short rise, on arrival */
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.js [data-reveal].in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js [data-reveal]{opacity:1;transform:none}
}


/* =====================================================================================================================
   After the film (25 September): the home page, Our story, The first five and the Circle share what follows.
   ===================================================================================================================== */

/* type on the golden ratio: each step is 1.618 times the one below it, from an 18px body */
:root{
  --t1:clamp(1.375rem,1.9vw,1.8125rem);   /* 29px */
  --t2:clamp(1.875rem,3.3vw,2.9375rem);   /* 47px */
  --t3:clamp(2.5rem,5.4vw,4.75rem);       /* 76px */
  --t4:clamp(3.25rem,8.6vw,7.6875rem);    /* 123px */
  --plum:#3B2733;
}
.t-1{font:400 var(--t1)/1.25 var(--display);letter-spacing:-.05em}
.t-2{font:400 var(--t2)/1.08 var(--display);letter-spacing:-.06em;text-wrap:balance}
.t-3{font:400 var(--t3)/1.02 var(--display);letter-spacing:-.065em;text-wrap:balance}
.t-4{font:400 var(--t4)/.94 var(--display);letter-spacing:-.07em;text-wrap:balance}
/* a lead-in in Suha's hand, tucked onto what it introduces; site.js (tuckLeadIns) sets the gap so it is the same everywhere */
.lead-in{justify-self:start;margin:-.2em -.45em -.28em .08em;padding:.2em .45em 0 0;font:400 clamp(1.9rem,2.9vw,2.6rem)/1 var(--script);color:var(--rose-ink);
  transform:rotate(-2.5deg);transform-origin:left bottom;text-wrap:balance}      /* room for the flourishes, given back in the margins */
.night .lead-in,.ch-gets .lead-in{color:#E7B7BE}
/* paper: Suha's card stock, a faint grain on cream */
.paper{background:var(--cream) url("../img/paper-cream.webp") 0 0/512px 512px}
/* words that come up to full strength as they are read (JS adds .split) */
.words.split .word{opacity:.14;transition:none;text-indent:0}

/* nav: the name, three pages and the one invitation; on phones, a menu */
.nav-links{display:none}
.nav-menu{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;margin-left:14px;border:0;background:none;color:var(--charcoal);cursor:pointer;
  font:700 .8125rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase}
.nav-menu::before{content:"";width:20px;height:7px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor}
.nav-join{margin-left:auto}
@media (max-width:380px){.nav-mark{width:84px}.nav-join{padding:0 14px;letter-spacing:.12em}.nav-menu{margin-left:10px;gap:8px}}   /* the narrowest phones: room between the name and the button */
@media (min-width:900px){
  .nav-links{display:flex;gap:clamp(22px,2.4vw,40px);margin-left:auto;margin-right:clamp(22px,2.4vw,36px)}
  .nav-links a{position:relative;padding:14px 0;color:var(--charcoal);text-decoration:none;font:700 .8125rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase}
  .nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
  .nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
  .nav-join{margin-left:0}
  .nav-menu{display:none}
}
.menu{position:fixed;inset:0;z-index:60;display:grid;align-content:center;align-content:safe center;gap:var(--s-xl);padding:calc(var(--nav) + 24px) var(--gutter) var(--s-xl);
  overflow-y:auto;background:var(--cream) url("../img/paper-cream.webp") 0 0/512px 512px}
.menu nav{display:grid;gap:8px}
.menu nav a{font:400 var(--t3)/1.1 var(--display);letter-spacing:-.065em;color:var(--charcoal);text-decoration:none}
.menu-act{display:grid;gap:12px;justify-self:start;justify-items:stretch}
.menu-act .btn{padding-inline:24px}
.btn-secondary{background:transparent;color:var(--charcoal);box-shadow:inset 0 0 0 1px var(--charcoal)}
@media (hover:hover) and (pointer:fine){.btn-secondary:hover{background:rgba(58,58,59,.06)}}
.menu-open .nav{z-index:70}

/* ---------- home: the first five, stacking ---------- */
.five-home{position:relative;z-index:2}
/* The collection's opening holds with the film's last screen: it is sticky, as the film's stage is, over the film's
   last 80svh of scroll (the dissolve), and both let go at the same moment. The paper, the words and the stars stay
   still together while the photograph dissolves, then move off together, and nothing rises underneath. */
.cinema .five-home{--hold:80svh;margin-top:calc(-1 * var(--screen) - var(--hold))}
.cinema .five-hold{height:calc(var(--screen) + var(--hold))}
.cinema:not(.film-late) .five-home{pointer-events:none}
.five-intro-in{max-width:calc(var(--wide) + 2 * var(--gutter));margin:0 auto;padding:calc(var(--nav) + 10svh) var(--gutter) clamp(72px,9vw,128px);display:grid;gap:var(--s-lg);align-content:center}
.five-intro{position:relative}
.five-intro-in{position:relative;z-index:1}
.five-flowers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cinema .five-intro{position:sticky;top:0;height:var(--screen)}
.cinema .five-intro-in{min-height:var(--screen);padding-block:var(--nav) 4svh;opacity:0}
/* on a phone the opening sits at the top, the rose above it, and the first card follows close behind */
@media (max-width:699px){
  .five-intro-in{padding-top:calc(var(--nav) + 124px);padding-bottom:48px}
  .cinema .five-intro-in{min-height:0;align-content:start;padding-block:calc(var(--nav) + 124px) 48px}
}
.five-intro .t-4{max-width:9em;font-size:min(var(--t4),12.6vw)}          /* on the narrowest phones still two lines, never 2027. alone */
/* once the film has landed here, a quiet nudge to carry on: the same stitch and star as the opening's, at the foot */
.five-cue{display:none}
.cinema .five-cue{--run:16px;position:absolute;left:50%;bottom:max(14px,2.6svh);z-index:1;display:flex;align-items:center;gap:10px;translate:-50% 0;
  color:var(--charcoal);font:700 .6875rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;opacity:0;transition:opacity .5s var(--ease-out)}
.cinema.film-done .five-cue{opacity:.85;transition:opacity 1.2s var(--ease-out) .5s}
.five-say{display:grid;gap:var(--s-md);max-width:31em;justify-self:end}
.five-sub{font-size:var(--t1);line-height:1.3;text-wrap:pretty}
.five-detail{font-size:1.1875rem;line-height:1.6;text-wrap:pretty}
.stack{padding:0 var(--gutter)}
.card{position:sticky;top:calc(var(--nav) + 12px);height:calc(100svh - var(--nav) - 28px);min-height:520px;max-width:calc(var(--wide) + 120px);margin:0 auto 7svh;
  display:grid;grid-template-columns:auto minmax(0,1fr);background:var(--card);color:var(--ink);border-radius:8px;overflow:hidden;transform-origin:50% 0;
  box-shadow:0 1px 2px rgba(24,17,15,.06),0 30px 60px -40px rgba(24,17,15,.45)}
.card-dim{position:absolute;inset:0;z-index:3;background:#18110F;opacity:0;pointer-events:none;will-change:opacity}
.card:last-child{margin-bottom:0}
.card-img{position:relative;margin:0;height:100%;aspect-ratio:1200/1595;overflow:hidden;cursor:pointer}
.card-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);will-change:transform}
.card-text{display:grid;align-content:center;gap:clamp(12px,1.6vw,20px);padding:clamp(32px,5vw,88px)}
.card-name{font:400 var(--t4)/.9 var(--display);letter-spacing:-.07em;margin-left:-.05em}
.card-means{font-size:1.125rem}
.card-means span{font:400 clamp(1.9rem,2.8vw,2.5rem)/1 var(--script);margin-left:.15em}
.card-story{font-size:var(--t1);line-height:1.3;max-width:15em;text-wrap:pretty}
.card-spec{font-size:1.0625rem;line-height:1.5;max-width:25em;opacity:.84;text-wrap:pretty}
.card-link{justify-self:start;display:inline-flex;align-items:center;gap:12px;margin-top:var(--s-sm);min-height:44px;color:inherit;text-decoration:none;
  font:700 .8125rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid color-mix(in srgb,currentColor 45%,transparent)}
.card-link::after{content:"";width:22px;height:1px;background:currentColor;transition:width .45s var(--ease-out)}
.card-link:hover::after{width:40px}
@media (max-width:899px){
  /* each card fits the screen while it holds; the photograph takes what the words leave, never less than 180px */
  .card{grid-template-columns:1fr;grid-template-rows:minmax(180px,1fr) auto;height:calc(100svh - var(--nav) - 16px);max-height:900px;min-height:min-content;top:calc(var(--nav) + 8px)}
  .card-img{width:100%;height:100%;aspect-ratio:auto;justify-self:stretch;border-radius:0}
  .card-img img{object-fit:cover;object-position:50% 42%;transform:scale(1.04)}
  /* where the screen is too short for that, the cards follow one another instead of stacking, each photograph whole */
  .stack.flow .card{position:relative;top:auto;height:auto;max-height:none;grid-template-rows:auto auto}
  .stack.flow .card-img{height:auto;aspect-ratio:1200/1595}
  .card-text{padding:22px 24px 28px;align-content:start;gap:10px}
  .card-name{font-size:clamp(3rem,15vw,4.5rem)}
  .card-story{font-size:1.1875rem}
  .card-spec{font-size:.9375rem;line-height:1.45}
  .card-link{margin-top:2px}
}
.say{max-width:calc(900px + 2 * var(--gutter));margin:0 auto;padding:clamp(110px,14vw,200px) var(--gutter) clamp(120px,15vw,210px);display:grid;justify-items:center;text-align:center;gap:var(--s-lg)}
.say .t-3{max-width:12em}
.say-sub{font-size:1.1875rem;line-height:1.6;max-width:34em}
.say-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s-sm) var(--s-lg)}

/* the pointer's label over the pictures, and buttons that lean towards the pointer */
.cursor-label{position:fixed;left:0;top:0;z-index:80;pointer-events:none;padding:11px 16px;border-radius:999px;background:var(--cream);color:var(--espresso);
  font:700 .75rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translate(-50%,-50%) scale(.8);
  transition:opacity .25s ease,scale .25s var(--ease-out);box-shadow:0 8px 24px -10px rgba(24,17,15,.4)}
.cursor-label.on{opacity:1}

/* ---------- home: the Circle, at night ---------- */
.night{position:relative;display:grid;align-items:center;gap:var(--s-xl) clamp(40px,6vw,110px);min-height:100svh;padding:var(--s-3xl) max(var(--gutter),calc((100vw - var(--wide)) / 2));
  background:radial-gradient(ellipse 70% 60% at 25% 45%,#3d2f28 0%,var(--espresso) 55%,#221a16 100%);color:var(--cream-on-espresso);overflow:hidden;overflow:clip}
.night-art{position:relative;width:min(100%,620px);aspect-ratio:1;justify-self:center}
.night-art canvas{position:absolute;inset:-6%;width:112%;height:112%}
.night-body{display:grid;gap:var(--s-lg);max-width:36em}
.night-logo{margin:0;color:var(--cream-on-espresso)}
.night-logo svg{display:block;width:clamp(190px,19vw,250px);height:auto}
/* the Circle's perks: stars on one thread. Each star lights, in the rose of the Circle's own stars, as she reaches it,
   and the thread runs on to the next */
.star-list{--lit:#BF7C88;--gap:var(--s-md);--star-top:5px;list-style:none;margin:var(--s-xs) 0;padding:0 0 0 38px;display:grid;gap:var(--gap)}
.star-list-lg{--gap:var(--s-lg)}
.star-list li{position:relative;display:grid;gap:4px}
.star-list li::before{content:"";position:absolute;left:-38px;top:var(--star-top);width:17px;height:17px;background:currentColor;opacity:.4;transform:scale(.72);
  -webkit-mask:url("../img/north-star.svg") center/contain no-repeat;mask:url("../img/north-star.svg") center/contain no-repeat;
  transition:opacity .7s var(--ease-out),background-color .7s ease,transform .7s var(--ease-out)}
.star-list li:not(:last-child)::after{content:"";position:absolute;left:-30px;top:calc(var(--star-top) + 21px);bottom:calc(4px - var(--gap) - var(--star-top));width:1px;
  background:currentColor;opacity:.3;transform-origin:top;transform:scaleY(0);transition:transform 1.2s var(--ease-out) .2s}
.star-list li.lit::before,html:not(.js) .star-list li::before{opacity:1;transform:scale(1);background:var(--lit);animation:starlit 1s var(--ease-out)}
.star-list li.lit::after,html:not(.js) .star-list li::after{transform:scaleY(1)}
@keyframes starlit{0%{transform:scale(.72)}35%{transform:scale(1.45)}100%{transform:scale(1)}}
.star-list-lg{--star-top:10px}
.star-list-lg b{font-size:clamp(1.625rem,2.5vw,2.25rem)!important;line-height:1.05!important;letter-spacing:-.06em}
.star-list-lg span{font-size:1.125rem}
.star-list b{font:400 clamp(1.25rem,1.6vw,1.5rem)/1.15 var(--display);letter-spacing:-.05em}
.star-list span{font-size:1.0625rem;line-height:1.5;opacity:.86;max-width:30em}
.night-lead{font-size:1.1875rem;line-height:1.6;max-width:32em}
@media (min-width:1000px){.night{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}}
/* joining in a moment: a first name, an email, 16 or over */
.quick{display:grid;gap:var(--s-md);margin-top:var(--s-sm)}
.quick-fields{display:grid;gap:var(--s-md)}
@media (min-width:600px){.quick-fields{grid-template-columns:1fr 1fr}.quick-fields :is(.field-email,.field-dob){grid-column:1 / -1}.quick-fields .field-dob input{max-width:calc(50% - var(--s-md) / 2)}}
.tick{display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;font-size:1.0625rem}
.tick input{width:22px;height:22px;margin:0;padding:0;border:0;border-radius:0;background:none;-webkit-appearance:auto;appearance:auto;accent-color:var(--rose-ink);flex:none}
.field .tick input:focus{box-shadow:none}
.tick input:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.quick .btn{justify-self:start}
.quick .help{max-width:34em}
.night .field label{color:var(--cream-on-espresso)}
.night .field input,.night .field select{background:var(--cream);color:var(--charcoal);border-color:var(--cream)}
.night .field input:focus,.night .field select:focus{box-shadow:0 0 0 2px var(--rose)}
.night .field-error,.night .form-status.error{color:#F2B9C2}
.night .btn-primary{background:var(--cream-on-espresso);color:var(--espresso)}
@media (hover:hover) and (pointer:fine){.night .btn-primary:hover{background:#fff8ec}}
.night a:not(.btn){color:var(--cream-on-espresso)}
.night :focus-visible{outline-color:var(--cream-on-espresso)}
.night .help{color:rgba(244,240,227,.8)}

/* The home page's Circle, under the night sky (main.js, nightsky.js). The sky turns round the North Star at the heart
   of the Circle's name. It is held on screen while the section passes (the stage), and inside it the sky rises with the
   name as she scrolls, then slows and settles, its centre above the screen, behind what's hers and the joining. The
   name, the promise and a line; then, straight on, the perks beside the joining (or, once she's in, her card), one
   above the other on a phone. Behind every block of words, a soft dusk. */
.night.cn{display:block;min-height:0;padding:0 0 clamp(170px,24svh,260px);background:#1f1814;overflow:clip}
.cn-stage{position:sticky;top:0;z-index:0;height:100vh;height:100lvh;margin-bottom:-100vh;margin-bottom:-100lvh;overflow:hidden}
.cn-sky{bottom:auto;height:calc(100% + var(--lift,40vh))}
.cn-sky .nsky-north{--ns:calc(var(--mk,64px) * .5)}
.cn-sky .nsky-north i{display:none}                               /* the name's own star is the North Star */
.cn-star{transform-box:fill-box;transform-origin:center;animation:nsky-glint 8s ease-in-out 2s infinite}
@media (prefers-reduced-motion:reduce){.cn-star{animation:none}}
.cn-crest{position:relative;z-index:1;display:grid;justify-items:center;padding:calc(var(--nav) + clamp(48px,10svh,112px)) var(--gutter) 0;text-align:center}
.cn-lockup{width:clamp(300px,36vw,540px);color:var(--cream-on-espresso)}
.cn-lockup svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 0 14px rgba(22,16,13,.55))}
.cn-say{position:relative;isolation:isolate;display:grid;justify-items:center;gap:var(--s-md);margin-top:clamp(32px,5svh,56px)}
.cn-title span{display:block}
.cn-lead{font-size:clamp(1.1875rem,1.5vw,1.3125rem);line-height:1.6;max-width:31em;color:rgba(244,240,227,.88);text-wrap:balance}
/* what's hers and the joining: a thread runs down from the promise to a rose star, and there a field of deeper night
   settles behind them, soft at its edges, so the words hold the eye while the stars still turn faintly through it and
   brightly round it. It fades in as she reaches it (main.js), and holds her card just the same once she's in. */
.cn-join{--ky:clamp(40px,4.5vw,64px);--th:clamp(44px,6svh,68px);position:relative;z-index:1;display:grid;gap:var(--s-xl);
  margin-top:calc(var(--ky) + var(--th) + clamp(28px,4svh,44px));padding:0 max(var(--gutter),calc((100vw - var(--wide)) / 2))}
/* the calm's outline is drawn by main.js: a soft oblong round the words that wanders a little along its edges and rises
   under the rose star, blurred so that it has no edge at all. It reaches full strength just outside the words; its box
   is simply big enough to hold the blur. Until it's drawn, a plain soft oval. */
.calm{position:absolute;z-index:-1;pointer-events:none;background:rgba(24,17,15,.88);
  -webkit-mask:var(--calm,radial-gradient(closest-side,#000 62%,transparent)) 0 0/100% 100% no-repeat;mask:var(--calm,radial-gradient(closest-side,#000 62%,transparent)) 0 0/100% 100% no-repeat}
.cn-field{--ex:340px;--et:390px;--eb:340px;top:calc(-1 * var(--et));bottom:calc(-1 * var(--eb));
  left:calc(max(var(--gutter),(100vw - var(--wide)) / 2) - var(--ex));right:calc(max(var(--gutter),(100vw - var(--wide)) / 2) - var(--ex))}
.ch-calm{--ex:320px;--et:340px;--eb:320px;background:rgba(24,17,15,.6);left:calc(-1 * var(--ex));right:calc(-1 * var(--ex));top:calc(-1 * var(--et));bottom:calc(-1 * var(--eb))}
@media (max-width:699px){.cn-field,.ch-calm{--ex:180px;--et:210px;--eb:180px}}
.cn-thread{position:absolute;left:50%;top:calc(-1 * var(--ky) - 10px - var(--th));width:1px;height:var(--th);margin-left:-.5px;pointer-events:none;
  background:linear-gradient(rgba(244,240,227,0),rgba(244,240,227,.5));transform-origin:50% 100%}
.cn-knot{position:absolute;left:50%;top:calc(-1 * var(--ky));width:17px;height:17px;margin:-8.5px 0 0 -8.5px;pointer-events:none;background:#BF7C88;
  -webkit-mask:url("../img/north-star.svg") center/contain no-repeat;mask:url("../img/north-star.svg") center/contain no-repeat}
.cn-knot.lit{animation:starlit 1s var(--ease-out)}
.cn-perks,.cn-act{position:relative}
.cn-now{display:grid;gap:var(--s-sm)}
/* the promise above still sits in a soft dusk: a round shadow that fades to nothing at its edges */
.cn-say::before{content:"";position:absolute;z-index:-1;inset:-18% -16% -22%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(28,21,17,.72),rgba(28,21,17,.5) 52%,rgba(28,21,17,.18) 80%,rgba(28,21,17,0))}
.cn :is(.cn-lead,.cn-perks b,.cn-perks span,.cn-act label,.cn-act .help,.cn-act .field-help){text-shadow:0 1px 10px rgba(22,16,13,.9),0 0 2px rgba(22,16,13,.5)}
.cn :is(.cn-title,.mc-hello){text-shadow:0 2px 22px rgba(22,16,13,.7)}
.cn .star-list li.lit::before{filter:drop-shadow(0 0 6px rgba(231,183,190,.65))}
.cn :is(.cn-perks span,.field-help){text-wrap:pretty}
@media (min-width:1000px){
  .cn-join{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(64px,8vw,140px);align-items:center}
}
@media (max-width:699px){.cn-join{--ky:36px}}
/* still (reduced motion, or without the scroll scenes): the sky stays with the name, fading out below it */
.cn-still .cn-stage{position:absolute;left:0;right:0;top:0;margin:0;-webkit-mask:linear-gradient(#000 72%,transparent);mask:linear-gradient(#000 72%,transparent)}

/* ---------- home: Suha, in one line ---------- */
.hook{display:grid;align-items:center;gap:var(--s-xl) clamp(48px,8vw,140px);padding:var(--s-3xl) max(var(--gutter),calc((100vw - var(--wide)) / 2))}
.hook-art{display:grid;justify-items:center}
/* Suha's diary. A plum linen cover (the name, *diary* in her hand, a rose elastic); inside, her front page, then five
   spreads: a sketch in ink on the left, its words on the right, written on the ruled lines. Then her last page, 12,
   the way on to her story, across from the inside of the back cover. Every page is a leaf that turns (--t, 0 to 1,
   from main.js), so nothing inside shows before the cover opens.
   On a laptop the pages are side by side and turn right to left; on a phone the diary is a top-bound notebook, the
   pages stacked and turning upwards, so the words stay readable. */
.diary{--pw:min(310px,21.5vw,33svh);--ph:calc(var(--pw) * 1.38);--open:0;--rx:0deg;--ry:0deg;
  position:relative;width:calc(var(--pw) * 2);height:var(--ph);margin:0 auto;perspective:2400px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.diary-book{position:absolute;inset:0;transform-style:preserve-3d;
  transform:translateX(calc((1 - var(--open)) * var(--pw) * -.5)) rotateX(var(--rx)) rotateY(var(--ry))}
.leaf,.diary-back,.diary-block,.diary-base{position:absolute;left:50%;top:0;width:var(--pw);height:var(--ph);transform-style:preserve-3d}
/* each leaf turns about the spine; its depth keeps the stack in order on either side */
.leaf{--t:0;--shade:0;--draw:0;transform-origin:left center;transform:rotateY(calc(var(--t) * -178deg)) translateZ(calc(var(--i) * -.7px))}
.diary-base{transform:translateZ(-4.9px);border-radius:0 4px 4px 0;background:#FBF8F0;overflow:hidden;container-type:size}
.diary-block{transform:translateZ(-5.6px);border-radius:0 4px 4px 0;background:#F6F1E6;
  box-shadow:inset -2px 0 0 #E7DFCF,inset -4px 0 0 #F6F1E6,inset -6px 0 0 #E7DFCF,inset -8px 0 0 #F6F1E6}
.diary-back{left:calc(50% - 3px);top:-5px;width:calc(var(--pw) + 8px);height:calc(var(--ph) + 10px);border-radius:3px 8px 8px 3px;transform:translateZ(-8px);
  background:#3B2733 url("../img/paper-plum.webp") 0 0/380px 380px;box-shadow:0 46px 60px -34px rgba(40,26,33,.6),0 6px 14px rgba(40,26,33,.22)}
.face{position:absolute;inset:0;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;container-type:size;background:#FBF8F0}
.face.front{border-radius:0 4px 4px 0}
.face.back{border-radius:4px 0 0 4px;transform:rotateY(180deg)}
/* a turning page catches less light as it stands up, and the spine side of every page is a little shaded */
.face::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:#332721;opacity:var(--shade)}
.leaf-cover{top:-5px;width:calc(var(--pw) + 5px);height:calc(var(--ph) + 10px)}
/* on the left, once open: the same shadow the back cover casts on the right */
.diary-shade{position:absolute;top:-5px;left:calc(50% - var(--pw) - 5px);width:calc(var(--pw) + 5px);height:calc(var(--ph) + 10px);border-radius:8px 3px 3px 8px;
  transform:translateZ(-8px);box-shadow:0 46px 60px -34px rgba(40,26,33,.6),0 6px 14px rgba(40,26,33,.22);opacity:var(--open);pointer-events:none}
.face.front::before,.diary-base::before{content:"";position:absolute;inset:0 auto 0 0;width:16%;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(51,39,33,.12),rgba(51,39,33,0))}
.face.back::before{content:"";position:absolute;inset:0 0 0 auto;width:16%;z-index:2;pointer-events:none;background:linear-gradient(270deg,rgba(51,39,33,.14),rgba(51,39,33,0))}
/* the cover, and the inside of the cover */
.cover-front{display:grid;place-content:center;justify-items:center;gap:calc(var(--ph) * .015);border-radius:0 7px 7px 0!important;
  background:#3B2733 url("../img/paper-plum.webp") 0 0/380px 380px;box-shadow:inset 7px 0 12px -8px rgba(0,0,0,.45)}
.cover-wm{width:60cqw;color:#F4F0E3}
.cover-script{font:400 min(15cqw,19cqh)/1 var(--script);color:#E7B7BE;margin-top:-1cqh}
.cover-band{position:absolute;top:0;bottom:0;right:12%;width:max(7px,3cqw);background:linear-gradient(90deg,#7c3f4b,#BF7C88 55%,#7c3f4b);box-shadow:-1px 0 3px rgba(0,0,0,.3)}
.cover-back{display:grid;place-content:center;justify-items:center;gap:calc(var(--ph) * .04);border-radius:7px 0 0 7px!important;background:var(--blush) url("../img/paper-blush.webp") 0 0/380px 380px;
  box-shadow:inset 5px 0 0 #3B2733,inset 0 5px 0 #3B2733,inset 0 -5px 0 #3B2733,inset 8px 0 6px -3px rgba(0,0,0,.18)}   /* the board's plum edge round the endpaper */
.dp-star{display:block;width:min(6.5cqw,8cqh);aspect-ratio:1;background:var(--rose-ink);
  -webkit-mask:url("../img/north-star.svg") center/contain no-repeat;mask:url("../img/north-star.svg") center/contain no-repeat}
.dp-hand{font:400 min(12cqw,16cqh)/1.05 var(--script);color:var(--rose-ink);text-align:center}
/* her front page: a printed line, and her name written on it */
.dp-first{display:grid;align-content:center;justify-items:center;text-align:center;gap:calc(var(--ph) * .034);padding:0 12%}
.fp-belongs{font:400 min(4.9cqw,6.4cqh)/1.2 var(--body);letter-spacing:.03em;color:rgba(58,58,59,.72)}
.fp-name{margin-top:-1.4cqh;padding:0 13cqw .4em;border-bottom:1px solid rgba(58,58,59,.34);font:400 min(19cqw,25cqh)/1 var(--script);color:var(--rose-ink)}
.fp-sub{max-width:13em;font:400 min(4.7cqw,6.2cqh)/1.45 var(--body);color:rgba(58,58,59,.8)}
.fp-wm{position:absolute;left:50%;bottom:12%;width:min(22cqw,28cqh);transform:translateX(-50%);color:var(--rose-ink);opacity:.72}
@container (aspect-ratio > 1){.fp-wm{display:none}}
/* the words: written on the ruled lines, the heading in rose, the rest in ink */
.dp-words .dp-lines,.dp-words .dp-text{--R:min(9.4cqw,10.6cqh)}
.dp-lines{position:absolute;inset:0 7%;background:repeating-linear-gradient(to bottom,transparent 0 calc(var(--R) * .78),rgba(58,58,59,.12) calc(var(--R) * .78) calc(var(--R) * .78 + 1px),transparent calc(var(--R) * .78 + 1px) var(--R))}
.dp-text{position:absolute;inset:0;padding:calc(var(--R) * 2) 13% 0}
.dp-title{position:relative;top:var(--title-drop,0px);font:400 calc(var(--R) * 1.1)/var(--R) var(--script);color:var(--rose-ink);text-wrap:balance}
.dp-body{position:relative;top:var(--body-drop,0px);margin-top:var(--R);font:400 calc(var(--R) * .74)/var(--R) var(--script);color:#34261F;text-wrap:pretty}
/* her last page, 12: the way on to her story, in her hand (the one handwritten link on the site). The whole page is
   the link; its line is underlined like every link here, and its arrow draws itself in as the page lands (--draw, as
   the sketches do), then leans on, now and then */
.dp-more{display:flex;align-items:center;gap:.3em;width:fit-content;margin-top:var(--R);font:400 calc(var(--R) * .74)/var(--R) var(--script);color:var(--rose-ink);
  text-decoration:underline dashed 1px;text-underline-offset:.28em;touch-action:manipulation;transition:opacity .2s ease}
.dp-more::after{content:"";position:absolute;inset:0}
.dp-more:active{opacity:.7}
.dp-more svg{flex:none;width:1.25em;height:.55em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible;
  transition:transform .45s var(--ease-out);animation:lean-on 3.2s var(--ease-in-out) 1s infinite}
.dp-more path{stroke-dasharray:1;stroke-dashoffset:clamp(0,1 - var(--draw) / .7,1)}
.dp-more path+path{stroke-dashoffset:clamp(0,(1 - var(--draw)) / .3,1)}
@keyframes lean-on{0%,46%,100%{translate:0}22%{translate:4px 0}}
@media (prefers-reduced-motion:reduce){.dp-more svg{animation:none}}
@media (hover:hover) and (pointer:fine){.dp-more:hover svg{transform:translateX(4px)}}
/* the inside of the back cover: the blush endpaper again, her star and the line Aurre is made for (across the book from
   "Ahead, together." inside the front) */
.diary-base.cover-end{display:grid;place-content:center;justify-items:center;gap:calc(var(--ph) * .04);background:var(--blush) url("../img/paper-blush.webp") 0 0/380px 380px}
.cover-end .dp-hand{font-size:min(8cqw,10.5cqh)}          /* quieter than her page across from it, which is the way on */
@container (aspect-ratio > 1){.dp-text{padding-top:var(--R);padding-inline:8%}}
/* the sketches, in ink on the page's paper, drawing themselves in from the top corner as the page lands */
.dp-sketch{display:grid;place-items:center}
.sketch{position:absolute;inset:9% 9% 13%;width:82%;height:78%;object-fit:contain;
  -webkit-mask:linear-gradient(128deg,#000 42%,transparent 58%) calc(13% + (1 - var(--draw)) * 74%) calc(13% + (1 - var(--draw)) * 74%)/300% 300% no-repeat;
  mask:linear-gradient(128deg,#000 42%,transparent 58%) calc(13% + (1 - var(--draw)) * 74%) calc(13% + (1 - var(--draw)) * 74%)/300% 300% no-repeat}
@container (aspect-ratio > 1){.sketch{inset:8% 12% 12%;width:76%;height:80%}}
.dp-num{position:absolute;bottom:4.5%;font:400 min(5.4cqw,7cqh)/1 var(--script);color:rgba(148,65,84,.75)}
.face.front .dp-num,.diary-base .dp-num{right:9%}
.face.back .dp-num{left:9%}
/* turning by hand, for keyboards (they show when focused) and a word for touch screens */
.diary-turns{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.diary-turns:focus-within{position:static;width:auto;height:auto;overflow:visible;clip:auto;display:flex;gap:var(--s-md);justify-content:center;margin-top:var(--s-md)}
.diary-turn{min-height:44px;padding:0 4px;border:0;background:none;cursor:pointer;color:var(--rose-ink);font:700 .8125rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;text-decoration:underline dashed 1px;text-underline-offset:6px}
.diary-stars{display:none}
@media (max-width:899px){.hook-art{position:relative}.hook-art.pinned-paper .diary-stars{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.hook-art .diary,.hook-art .diary-hint{position:relative;z-index:1}}
.diary-hint{display:none;margin-top:var(--s-md);font-size:.9375rem;text-align:center;opacity:.75;transition:opacity .6s ease}
@media (hover:none){.diary-hint{display:block}}
.diary-hint.gone{opacity:0}
/* on her last page, the hint says where it leads */
.diary-hint span+span,.diary-hint.end span:first-child{display:none}
.diary-hint.end span+span{display:inline}
.diary-hint.end{opacity:.75}
/* a phone: a top-bound notebook, landscape pages stacked, turning upwards */
@media (max-width:899px) and (min-height:501px){
  .diary{--pw:min(calc(100vw - 2 * var(--gutter)),420px);--ph:calc(var(--pw) * .72);width:var(--pw);height:calc(var(--ph) * 2)}
  .diary-book{transform:translateY(calc((1 - var(--open)) * var(--ph) * -.5)) rotateX(var(--rx)) rotateY(var(--ry))}
  .leaf,.diary-block,.diary-base{left:0;top:50%}
  .leaf{transform-origin:center top;transform:rotateX(calc(var(--t) * 178deg)) translateZ(calc(var(--i) * -.7px))}
  .leaf-cover{left:-4px;top:50%;width:calc(var(--pw) + 8px);height:calc(var(--ph) + 5px)}
  .diary-shade{left:-4px;top:calc(50% - var(--ph) - 5px);width:calc(var(--pw) + 8px);height:calc(var(--ph) + 5px);border-radius:8px 8px 3px 3px}
  .face.front,.diary-base{border-radius:0 0 4px 4px}
  .face.back{border-radius:4px 4px 0 0;transform:rotateX(180deg)}
  .cover-front{border-radius:0 0 7px 7px!important;box-shadow:inset 0 7px 12px -8px rgba(0,0,0,.45)}
  .cover-back{border-radius:7px 7px 0 0!important;box-shadow:inset 0 5px 0 #3B2733,inset 4px 0 0 #3B2733,inset -4px 0 0 #3B2733,inset 0 8px 6px -3px rgba(0,0,0,.18)}
  .diary-block{box-shadow:inset 0 -2px 0 #E7DFCF,inset 0 -4px 0 #F6F1E6,inset 0 -6px 0 #E7DFCF,inset 0 -8px 0 #F6F1E6;border-radius:0 0 4px 4px}
  .diary-back{left:-4px;top:calc(50% - 3px);width:calc(var(--pw) + 8px);height:calc(var(--ph) + 8px);border-radius:3px 3px 8px 8px}
  .face.front::before,.diary-base::before{inset:0 0 auto 0;width:auto;height:16%;background:linear-gradient(180deg,rgba(51,39,33,.12),rgba(51,39,33,0))}
  .face.back::before{inset:auto 0 0 0;width:auto;height:16%;background:linear-gradient(0deg,rgba(51,39,33,.14),rgba(51,39,33,0))}
}
.hook-sign{margin-top:calc(-1 * var(--s-sm));font:400 clamp(2rem,3vw,2.6rem)/1 var(--script);color:var(--rose-ink)}
.hook-body{display:grid;gap:var(--s-lg);justify-items:start}
.hook-quote{max-width:14em;font-size:min(var(--t3),7.6svh)}
.hook-sub{font-size:1.1875rem;line-height:1.6;max-width:32em}
@media (min-width:900px){.hook{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);min-height:100svh;padding-block:calc(var(--nav) + 3svh) 3svh}}
/* while the diary holds on screen, it carries its own paper, its grain lined up with the page's (main.js) */
.pinned-paper{background:var(--cream) url("../img/paper-cream.webp") 0 var(--paper-y,0px)/512px 512px}
@media (max-width:899px),(max-height:500px){.hook-art.pinned-paper{min-height:100lvh;align-content:center;padding:var(--nav) var(--gutter) 0;margin-inline:calc(-1 * var(--gutter))}}
.answers{padding-top:var(--s-2xl)}
.faq-more{display:grid}
.faq-toggle{justify-self:start;display:inline-flex;align-items:center;gap:12px;min-height:48px;margin-top:var(--s-md);padding:0;border:0;background:none;cursor:pointer;color:var(--charcoal);
  font:700 .8125rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase}
.faq-toggle::after{content:"";width:12px;height:12px;transition:background-size .3s var(--ease-out);
  background:linear-gradient(var(--charcoal),var(--charcoal)) center/12px 1.5px no-repeat,linear-gradient(var(--charcoal),var(--charcoal)) center/1.5px 12px no-repeat}
.faq-toggle[aria-expanded="true"]::after{background-size:12px 1.5px,1.5px 0}


/* ---------- the inner pages ---------- */
.page main{padding-top:var(--nav)}
/* Our story sits on Suha's paper from edge to edge (one sheet, so the grain never meets a seam) */
.page-story main,.page-five main{background:var(--cream) url("../img/paper-cream.webp") 0 0/512px 512px}
.page .nav{background:var(--cream);pointer-events:auto}

/* ---------- Our story ---------- */
/* 1. Ahead, together. Three women walk on through the grass by the sea, each in her own colour, together. The page's
   paper is their sky, and only a few words stand in it: this is Aurre, what the word means and how we took it, and
   "Ahead, together." in rose. From just below their feet the grass goes out of focus and fades into the page. The photograph is always wider than the screen, so its edges never show, and never so wide that any of the
   three is cut: they fill the middle 46% of it.
   Measured on the photograph (women-in-motion-*.webp, 3005 wide before resizing), as fractions of its width from its top:
   the tops of their heads .037, the horizon .123, the end of the photograph .276; the fade goes .077 beyond it. */
/* upright screens (phones, tablets held upright): the words at the top, then sky, then the three walking along the foot
   of the screen, the grass reaching the bottom; the photograph as wide as the three allow. Wide screens: the words just
   above them, the tops of their heads crossing the foot of "Ahead, together."; the photograph as wide as the height allows */
.so-open{--iw:190vw;position:relative;overflow-x:clip;padding-bottom:calc(var(--iw) * .0765)}
@media (orientation:landscape){.so-open{--iw:max(104vw,min(150vw,calc((100svh - var(--nav)) * 2.5)));--bite:calc(var(--iw) * .02)}}
/* (upright: the words a little above the middle of the sky, more of it below them than above) */
.so-scene{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto minmax(0,1.6fr) auto;justify-items:center;
  min-height:calc(100lvh - var(--nav));padding-top:16px}
.so-scene>.so-head{grid-row:2}.so-scene>.so-walk{grid-row:4}
@media (orientation:landscape){
  .so-scene{grid-template-rows:none;align-content:end;min-height:max(380px,calc(100svh - var(--nav)));padding-top:clamp(40px,12svh,180px)}
  .so-scene>.so-head,.so-scene>.so-walk{grid-row:auto}
}
.so-head{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(12px,2svh,20px);width:100%;padding:0 var(--gutter);text-align:center}
.so-head .lead-in{justify-self:center;margin:-.2em -.45em -.15em 0;font-size:clamp(1.9rem,5.2vw,3rem);transform:rotate(-2.5deg)}
/* what the word means, and how we took it: a sentence to a line */
.so-small{font:400 clamp(1.25rem,5.2vw,2.3rem)/1.18 var(--display);letter-spacing:-.05em;color:var(--charcoal);text-wrap:balance}
.so-small>span{display:block}
/* Ahead, together: rose, as large as the screen allows; on an upright screen two lines, each kept whole and sized so the
   longer ("together.") always fits with room to spare */
.so-big{margin:.02em 0 0;font:400 min(13rem,calc((100vw - 2 * var(--gutter)) / 4))/.86 var(--display);letter-spacing:-.075em;color:var(--rose)}
.so-big>span{display:block;white-space:nowrap}
/* short upright screens (a small phone): a little smaller and closer, so the three still walk along the foot of the screen */
@media (orientation:portrait) and (max-height:780px){
  .so-scene{padding-top:16px}
  .so-head{gap:10px}
  .so-head .lead-in{font-size:1.7rem}
  .so-small{font-size:1.2rem}
  .so-big{font-size:min(10.5svh,calc((100vw - 2 * var(--gutter)) / 4))}
}
.so-walk{position:relative;z-index:2;justify-self:start;align-self:end;width:var(--iw);max-width:none;margin:0 0 calc(var(--iw) * -.0765) calc(50% - var(--iw) / 2);pointer-events:none}
.so-walk img{display:block;width:100%;height:auto}
@media (orientation:landscape){
  .so-head{max-width:calc(var(--wide) + 2 * var(--gutter))}
  .so-head .lead-in{font-size:clamp(1.9rem,2.9vw,2.6rem)}
  .so-small{font-size:clamp(1.4rem,2.2vw,2.3rem)}
  .so-big{font-size:min(11.4vw,calc(min(100vw - 2 * var(--gutter),var(--wide)) / 6.8));line-height:.8;white-space:nowrap}
  .so-big>span{display:inline}
  .so-walk{margin-top:calc(var(--iw) * -.037 - var(--bite))}
}
/* the line they love, as a quotation, lit word by word as it's read */
.so-quote{display:grid;justify-items:center;padding:clamp(24px,4vw,64px) var(--gutter) clamp(104px,11vw,160px)}
/* who Aurre is for, said to her in one line, lit word by word as it's read */
.so-quote-in{margin:0;max-width:16em;text-align:center;font:400 var(--t3)/1.08 var(--display);letter-spacing:-.065em;text-wrap:balance}

/* 2. Why the North Star. A night sky fills the screen and turns round the North Star (nightsky.js); three thoughts
   arrive beneath it in turn. Without motion they simply follow one another over a still sky. */
.so-star{position:relative;margin-top:-1px;background:var(--espresso);color:var(--cream-on-espresso)}
/* the sky's top edge comes up softly, so the stars come out as it arrives (the veil belongs to the section's top, not the
   held sky, so nothing stays dimmed) */
.so-star::before{content:"";position:absolute;z-index:2;left:0;right:0;top:0;height:min(36svh,320px);pointer-events:none;
  background:linear-gradient(#2a211b,rgba(42,33,27,.85) 30%,rgba(42,33,27,0))}
.so-stage{position:relative;overflow:hidden}
.so-sky{--cx:50%;--cy:33svh}
.so-says{position:relative;z-index:1;display:grid;justify-items:center;gap:clamp(96px,14svh,160px);padding:calc(33svh + 110px) var(--gutter) var(--s-3xl);text-align:center}
.so-say{position:relative;isolation:isolate;display:grid;gap:var(--s-md);justify-items:center;max-width:36em}
.so-say::before{content:"";position:absolute;z-index:-1;inset:-16% -16% -34%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side at 50% 58%,rgba(28,21,17,.66),rgba(28,21,17,.46) 50%,rgba(28,21,17,.16) 80%,rgba(28,21,17,0))}
.so-say p:not(.lead-in),.ch-join-in :is(p,li,label,span):not(.lead-in):not(.sign){text-shadow:0 1px 10px rgba(22,16,13,.9),0 0 2px rgba(22,16,13,.5)}
.so-say :is(h2,h3),.ch-join-in :is(h2,h3){text-shadow:0 2px 22px rgba(22,16,13,.7)}
.so-say .lead-in{justify-self:center;margin-bottom:-.2em}
.so-say .t-3{max-width:13em;font-size:min(var(--t3),7svh)}
.so-say p:not(.lead-in):not(.so-tag){font-size:clamp(1.125rem,1.45vw,1.3125rem);line-height:1.6;max-width:31em;color:rgba(244,240,227,.86);text-wrap:pretty}
.so-star .lead-in{color:#E7B7BE}
.so-tag{margin-top:var(--s-xs);font:400 clamp(2rem,3vw,2.6rem)/1 var(--script);color:#E7B7BE}
.so-star.play{height:320svh}
.so-star.play .so-stage{position:sticky;top:0;height:100svh}
.so-star.play .so-says{position:absolute;inset:0;padding:0;display:block}
.so-star.play .so-say{position:absolute;left:0;right:0;top:calc(33svh + clamp(64px,9svh,104px));margin:0 auto;padding:0 var(--gutter);max-width:calc(36em + 2 * var(--gutter))}
@media (max-width:699px){.so-sky{--cy:27svh}.so-star.play .so-say{top:calc(27svh + 72px)}.so-says{padding-top:calc(27svh + 90px)}}

/* the night sky itself (nightsky.js): the trails turn about the North Star, which never moves */
.nsky{position:absolute;inset:0;overflow:hidden;
  background:radial-gradient(ellipse 75% 65% at var(--cx,50%) var(--cy,50%),#43332b 0%,#2e241e 45%,#1f1814 100%)}
.nsky-turn{position:absolute;left:var(--cx,50%);top:var(--cy,50%);width:0;height:0}
.nsky-spin{position:absolute;animation:nsky-turn 240s linear infinite}
.nsky-spin canvas{position:absolute;left:0;top:0}
@keyframes nsky-turn{to{transform:rotate(-1turn)}}
/* the North Star: still, in cream, with a warm light round it that breathes, and now and then a glint */
.nsky-north{--ns:clamp(30px,3vw,44px);position:absolute;left:var(--cx,50%);top:var(--cy,50%);width:var(--ns);height:var(--ns);margin:calc(var(--ns) / -2) 0 0 calc(var(--ns) / -2);pointer-events:none}
.nsky-north::before{content:"";position:absolute;inset:-300%;border-radius:50%;
  background:radial-gradient(circle,rgba(243,207,199,.34) 0%,rgba(243,207,199,.14) 18%,rgba(243,207,199,.05) 36%,rgba(243,207,199,0) 62%);animation:nsky-breathe 7s ease-in-out infinite}
.nsky-north i{position:absolute;inset:0;background:var(--cream-on-espresso);animation:nsky-glint 8s ease-in-out 2s infinite;
  -webkit-mask:url("../img/north-star.svg") center/contain no-repeat;mask:url("../img/north-star.svg") center/contain no-repeat;filter:drop-shadow(0 0 6px rgba(252,250,241,.6))}
@keyframes nsky-breathe{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.14)}}
@keyframes nsky-glint{0%,100%{transform:scale(1) rotate(0deg)}9%{transform:scale(1.28) rotate(12deg)}20%{transform:scale(1) rotate(0deg)}}
/* stars that shine, each in its own time */
.nsky-shine{position:absolute;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);opacity:0;animation:nsky-shine var(--d) ease-in-out var(--w) infinite}
.nsky-shine::before{content:"";position:absolute;inset:-140%;border-radius:50%;background:radial-gradient(circle,rgba(243,207,199,.42),rgba(243,207,199,0) 62%)}
.nsky-shine::after{content:"";position:absolute;inset:0;background:var(--c);
  -webkit-mask:url("../img/north-star.svg") center/contain no-repeat;mask:url("../img/north-star.svg") center/contain no-repeat}
@keyframes nsky-shine{0%,62%,100%{opacity:0;transform:scale(.3) rotate(0deg)}76%{opacity:1;transform:scale(1.15) rotate(18deg)}88%{opacity:.4;transform:scale(.72) rotate(30deg)}}
/* her own star (the Circle page): rose, lit, and a ring opens round it the moment it arrives */
.nsky-mine{--s:22px;position:absolute;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2)}
.nsky-mine::before{content:"";position:absolute;inset:-160%;border-radius:50%;background:radial-gradient(circle,rgba(216,149,159,.55),rgba(216,149,159,0) 62%);animation:nsky-breathe 5s ease-in-out infinite}
.nsky-mine::after{content:"";position:absolute;inset:0;background:#E7B7BE;
  -webkit-mask:url("../img/north-star.svg") center/contain no-repeat;mask:url("../img/north-star.svg") center/contain no-repeat}
.nsky-mine.arrive{animation:nsky-arrive 2.4s var(--ease-out) both}
.nsky-mine.arrive::before{animation:nsky-ring 2.4s var(--ease-out) both,nsky-breathe 5s ease-in-out 2.4s infinite}
@keyframes nsky-arrive{0%{opacity:0;transform:scale(3.2) rotate(-40deg)}40%{opacity:1}100%{opacity:1;transform:scale(1) rotate(0deg)}}
@keyframes nsky-ring{0%{transform:scale(.2);opacity:0}30%{opacity:1}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.nsky-spin,.nsky-north::before,.nsky-north i,.nsky-mine::before{animation:none}}

/* 3. Her note, as a letter. On a laptop her diary sits beside it, held in the middle of the screen, turning to the
   matching page as each part begins; anywhere narrower, a page from it follows each part instead. */
.letter{display:grid;gap:clamp(56px,6vw,88px);padding:var(--s-3xl) max(var(--gutter),calc((100vw - var(--wide)) / 2))}
.letter-head{display:grid;gap:var(--s-lg)}
.letter-head .t-3{max-width:15em;text-indent:-.4em}
.letter-body{--pw:min(296px,20.5vw,36svh);display:grid}
.letter-flow{display:grid;gap:clamp(56px,6vw,92px);align-content:start}
.letter-diary{display:none}
.letter .diary{--pw:inherit}
@media (min-width:1100px){
  .letter-body{grid-template-columns:minmax(0,1fr) calc(var(--pw) * 2);column-gap:clamp(56px,6vw,104px);align-items:start}
  .letter-diary{display:block;position:sticky;top:calc(50svh - var(--pw) * .69 + var(--nav) / 2)}
  .dpage{display:none}
}
.note-part{display:grid;gap:var(--s-sm);justify-items:start}
/* her chapter labels in her hand; room round the words for the flourishes (Safari cuts off ink that reaches outside a
   text's box), given back in the margins so nothing moves; a label that runs to two lines breaks evenly */
.note-label{font:400 clamp(1.9rem,2.6vw,2.4rem)/1.1 var(--script);color:var(--rose-ink);transform:rotate(-1.5deg);transform-origin:left bottom;
  padding:.2em .45em .25em 0;margin:-.2em -.45em -.25em 0;text-wrap:balance}
.note-text{display:grid;gap:1.1em;max-width:35em}
.note-text p{font-size:1.1875rem;line-height:1.62;text-wrap:pretty}
.note-text .note-open{font:400 var(--t1)/1.3 var(--display);letter-spacing:-.04em}
.note-text .note-name{font:400 1.06em/1 var(--display);letter-spacing:-.04em;color:var(--rose-ink);white-space:nowrap}   /* the name of her first shop */
.note-text .note-last{font:400 clamp(1.3rem,1.8vw,1.5rem)/1.45 var(--body)}
.note-text .sign{margin-top:var(--s-md);font-size:clamp(2.25rem,3.5vw,2.75rem);line-height:1}
.note-text .sign-role{margin-top:-.4em;font-size:.8125rem;line-height:1.3}
/* her pull quotes, in speech marks: the opening mark hangs in the margin so the words keep their line */
.pull{margin:0}
.pull p{max-width:13em;font:400 var(--t2)/1.12 var(--display);letter-spacing:-.06em;text-wrap:balance;text-indent:-.42em}
.pull-script p{max-width:16em;font:400 clamp(2.1rem,3.3vw,3rem)/1.2 var(--script);letter-spacing:0;text-indent:-.3em}
.pull-two span{display:block;text-indent:0;margin-top:.3em;font:400 clamp(2.1rem,3.3vw,3rem)/1.15 var(--script);letter-spacing:0;color:var(--rose-ink)}
/* a page from her diary: the sketch, and her line under it in her hand */
.dpage{margin:var(--s-md) 0 0;width:min(84%,340px);padding:12px 12px 16px;background:#FBF8F0;border-radius:3px;transform:rotate(-1.3deg);
  box-shadow:0 1px 2px rgba(51,39,33,.08),0 26px 40px -28px rgba(51,39,33,.5)}
.dpage img{width:100%;height:auto}
.dpage figcaption{margin-top:4px;font:400 1.7rem/1.1 var(--script);color:var(--rose-ink);text-align:center;text-wrap:balance}
.note-part:nth-of-type(even) .dpage{justify-self:end;transform:rotate(1.4deg)}
/* the moodboards for the first five, stacked like prints on her desk; a click sends the top one to the back */
.boards{margin:0;display:grid;gap:var(--s-md)}
.boards-stack{position:relative;aspect-ratio:1600/1064;margin:0 6% 5% 0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.board{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:3px;background:#E9E4DD;
  box-shadow:0 1px 2px rgba(51,39,33,.1),0 26px 44px -26px rgba(51,39,33,.55);
  transform:translate(calc(var(--k,0) * 1.5%),calc(var(--k,0) * 1.8%)) rotate(var(--r,0deg));transition:transform .7s var(--ease-out)}
.board.away{transform:translate(3%,-34%) rotate(-5deg);transition:transform .3s var(--ease-in-out)}   /* lifted off the top, then tucked behind */
.boards-say{display:grid;gap:8px;justify-items:start}
.boards-lead{font:400 clamp(1.6rem,2.3vw,2.1rem)/1.15 var(--script);color:var(--rose-ink);max-width:20em;text-wrap:balance}
.boards-now{display:flex;align-items:center;gap:var(--s-md)}
.boards-now b{font:400 var(--t1)/1 var(--display);letter-spacing:-.05em}
.boards-next{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;cursor:pointer;color:var(--rose-ink);
  font:700 .8125rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;text-decoration:underline dashed 1px;text-underline-offset:6px}
.boards-note{font-size:.9375rem;opacity:.72}

/* 4. Ahead, together: at night, the Circle gathering from the stars, and the night running on into the footer */
.story-join{margin-bottom:-1px;background:radial-gradient(ellipse 70% 60% at 25% 45%,#3d2f28 0%,var(--espresso) 60%)}   /* a pixel over the footer, so no seam of paper shows */
.story-join-line{font-size:var(--t1);line-height:1.35;max-width:21em;text-wrap:pretty}
.story-join .night-body{container-type:inline-size}
.story-join-title{margin:-.1em 0 -.15em;font:400 min(6.75rem,15cqi)/1 var(--script);color:#F3CFC7;white-space:nowrap}
.story-join-now{display:grid;gap:var(--s-lg);justify-items:start}

/* the Circle's mark (its arcs turning slowly round the still North Star) beside joining, and at the welcome */
.cmark{display:block;width:100%;height:auto;overflow:visible}
.cmark-arcs{animation:turn 48s linear infinite}
@keyframes turn{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){.cmark-arcs{animation:none}}

/* ---------- The Circle ---------- */
/* the opening, at night: the mark gathers from the stars; the art sits to the right of her words */
.ch-hero{min-height:calc(100svh - var(--nav));align-items:center;padding-top:clamp(24px,5vw,var(--s-3xl));background:radial-gradient(ellipse 70% 60% at 72% 45%,#3d2f28 0%,var(--espresso) 55%,#221a16 100%)}
.ch-hero .t-3{max-width:9em}
.ch-lead{font-size:1.1875rem;line-height:1.6;max-width:31em}
.ch-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-sm) var(--s-lg)}
.ch-free{font-size:1rem;opacity:.8}
@media (min-width:1000px){.ch-hero{align-items:center}.ch-hero .night-art{order:2;position:relative;top:auto}}
/* why a circle: the women joined into a circle round the North Star, drawn in ink on paper */
.ch-why{display:grid;align-items:center;gap:var(--s-xl) clamp(48px,8vw,140px);padding:var(--s-3xl) max(var(--gutter),calc((100vw - var(--wide)) / 2))}
.ch-why-art{width:min(100%,560px);aspect-ratio:1;justify-self:center}
.ch-why-art canvas{width:100%;height:100%}
.ch-why-text{display:grid;gap:var(--s-md);max-width:33em}
.ch-why-text .t-3{margin-bottom:var(--s-xs)}
.ch-why-text p:not(.lead-in){font-size:1.1875rem;line-height:1.62;text-wrap:pretty}
@media (min-width:900px){.ch-why{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* what we're building: the sisterhood, and what we'll do together through the year, beside two of the five in motion */
/* what we're building: the intro; then the gathering, wide across the page, easing back a little in its frame as it
   arrives (circle.js); then the year in a row, and passing it on */
.ch-together{display:grid;padding:0 0 var(--s-3xl)}
.ch-together-say,.ch-together-more{padding:0 max(var(--gutter),calc((100vw - var(--wide)) / 2))}
.ch-together-say{display:grid;gap:var(--s-lg);justify-items:center;text-align:center}
.ch-together-head{display:grid;justify-items:center}
.ch-together-head .lead-in{justify-self:center}
.ch-together-say .t-3{max-width:10em}
/* between why a circle and what we're building: Suha's lace edge in her stars, across the paper, at the lead-ins' tilt */
.page-circle .paper{overflow-x:clip}                            /* the lace runs past both edges; the page never widens for it */
.ch-lace{--P:13px;height:calc(5 * var(--P));margin:0 -8vw var(--s-2xl);transform:rotate(-2.5deg)}
.ch-lace canvas{display:block;width:100%;height:100%}
@media (max-width:699px){.ch-lace{--P:10px;margin-bottom:var(--s-xl)}}
/* the gathering, seen between two old trees; the women sit in its lower middle, so that's where the view eases back to */
.ch-gather{--at:54% 72%;position:relative;margin:var(--s-2xl) auto;width:min(100%,1600px);height:clamp(420px,56vw,86svh);overflow:hidden;background:#2a2118}
.ch-gather img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--at);transform-origin:var(--at)}
@media (max-width:699px){.ch-gather{height:110vw;margin:var(--s-xl) 0}}
.ch-together-more{display:grid;gap:var(--s-lg);justify-items:start}
.ch-together-lead{font-size:var(--t1);line-height:1.38;max-width:26em;text-wrap:balance}
.ch-year{display:grid;gap:var(--s-lg) var(--s-xl);margin:var(--s-xs) 0 0;width:100%}
.ch-year div{display:grid;gap:8px;align-content:start}
.ch-year dt{display:flex;align-items:center;gap:12px;font:400 clamp(1.375rem,1.9vw,1.75rem)/1.1 var(--display);letter-spacing:-.05em}
.ch-year dt::before{content:"";flex:none;width:16px;height:16px;background:var(--rose-ink);
  -webkit-mask:url("../img/north-star.svg") center/contain no-repeat;mask:url("../img/north-star.svg") center/contain no-repeat}
.ch-year dd{margin:0;padding-left:28px;font-size:1.0625rem;line-height:1.55;max-width:24em;text-wrap:pretty}
@media (min-width:700px){.ch-year{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.ch-year{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ch-together-note{font-size:1rem;line-height:1.55;max-width:34em;opacity:.85}
.ch-bring{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-xs) var(--s-md);padding-top:var(--s-md);border-top:1px solid var(--line);width:100%}
.ch-bring p{font:400 clamp(1.25rem,1.6vw,1.5rem)/1.25 var(--display);letter-spacing:-.05em}
.ch-share{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;cursor:pointer;color:var(--rose-ink);
  font:700 .875rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;text-decoration:underline dashed 1px;text-underline-offset:6px}
.ch-share:focus-visible{outline:2px solid var(--charcoal);outline-offset:4px}
/* what you get, on Layali's aubergine: the heading, centred; then what's hers beside the lace medallion (rosette.js), held
   in view on a laptop while the list passes, with the founding line and joining under it. Each of the six comes up to
   full strength as its star lights, and the medallion gains a ring. On a phone the medallion follows the list. */
.ch-gets{display:grid;gap:var(--s-2xl) clamp(48px,7vw,120px);padding:var(--s-3xl) max(var(--gutter),calc((100vw - var(--wide)) / 2));background:var(--plum);color:var(--cream-on-espresso)}
.ch-gets-head{display:grid;justify-items:center;text-align:center}
.ch-gets-head .lead-in{justify-self:center}
.ch-gets .btn-primary{background:var(--cream-on-espresso);color:var(--espresso)}
@media (hover:hover) and (pointer:fine){.ch-gets .btn-primary:hover{background:#fff8ec}}
.ch-gets :focus-visible{outline-color:var(--cream-on-espresso)}
html.js .ch-perks li :is(b,span){transition:opacity .8s var(--ease-out)}
html.js .ch-perks li:not(.lit) :is(b,span){opacity:.42}
.ch-seal{display:grid;justify-items:center;gap:var(--s-lg);text-align:center}
.ch-rosette{--sz:min(clamp(260px,32vw,440px),calc(100svh - var(--nav) - 300px));position:relative;width:max(240px,var(--sz));aspect-ratio:1;cursor:pointer}
.rs-ring{position:absolute;inset:0;width:100%;height:100%;animation:rs-turn var(--d) linear infinite;animation-direction:var(--dir)}
@keyframes rs-turn{to{rotate:1turn}}
.rs-star{position:absolute;left:50%;top:50%;width:14%;aspect-ratio:1;translate:-50% -50%;background:var(--cream-on-espresso);
  -webkit-mask:url("../img/north-star.svg") center/contain no-repeat;mask:url("../img/north-star.svg") center/contain no-repeat;
  filter:drop-shadow(0 0 10px rgba(252,250,241,.55));animation:nsky-glint 8s ease-in-out 2s infinite}
.ch-rosette::before{content:"";position:absolute;inset:30%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(243,207,199,.2),rgba(243,207,199,0) 70%);opacity:.5;transition:opacity 1.2s var(--ease-out),transform 1.2s var(--ease-out)}
.ch-rosette.whole::before{opacity:1;transform:scale(1.25)}
/* a soft light where the pointer is, across the thread */
.ch-rosette::after{content:"";position:absolute;inset:-6%;border-radius:50%;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(circle at var(--mx,50%) var(--my,40%),rgba(255,236,230,.2),rgba(255,236,230,0) 42%)}
.ch-rosette.lit::after{opacity:1}
@media (prefers-reduced-motion:reduce){.rs-ring,.rs-star{animation:none}}
.ch-founding{max-width:17em;font:400 var(--t1)/1.3 var(--display);letter-spacing:-.05em;text-wrap:balance}
.ch-founding b{font-weight:400;color:#F3CFC7}
@media (min-width:1000px){
  .ch-gets{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:start}
  .ch-gets-head{grid-column:1 / -1}
  .ch-seal{grid-column:1;grid-row:2;position:sticky;top:calc(var(--nav) + 32px)}
  .ch-perks{grid-column:2;grid-row:2}
}
/* in the light, between the aubergine and the night: the studio, edge to edge, a screen tall below the nav (on a phone
   too), Layali in the middle of it, her head and hem always in view. It's held under the nav while the page runs on
   through the hold below it (circle.js): she comes into focus, then the studio dissolves into soft light (the haze: the
   photograph softened, and the cream's light over it, strongest behind the words) and Suha's words appear in it; then
   the night rises over it, dimming it as it goes. */
.ch-look{position:sticky;top:var(--nav);z-index:0;height:calc(100svh - var(--nav));overflow:hidden;background:#d8d1ca}
.ch-look-scene{position:absolute;inset:0;scale:1.03}
.ch-look img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:51% 50%;transform-origin:51% 55%}
.ch-look-soft{opacity:0;pointer-events:none}
.ch-look-haze{position:absolute;inset:0;background:url("../img/first-look-soft.webp") 51% 50%/cover no-repeat}
.ch-look-haze::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 62% 68% at 50% 50%,rgba(252,250,241,.8),rgba(252,250,241,.62) 55%,rgba(252,250,241,.34) 100%)}
.ch-look-say{position:absolute;inset:0;z-index:1;margin:0;display:grid;justify-items:center;align-content:center;gap:var(--s-md);padding:var(--s-lg) var(--gutter);text-align:center;color:var(--charcoal)}
.ch-look-quote{margin:0;display:grid;justify-items:center;gap:var(--s-md)}
.ch-look-quote .t-2{max-width:15em;text-shadow:0 0 22px rgba(252,250,241,.75)}
.ch-look-more{font-size:clamp(1.125rem,1.45vw,1.3125rem);line-height:1.6;max-width:31em;text-wrap:balance;text-shadow:0 0 16px rgba(252,250,241,.8)}
.ch-look-say .sign{margin:var(--s-xs) 0 0;color:var(--rose-ink)}
/* the page runs on through the hold while the light is held; the night comes after it */
.ch-look-hold{height:150svh;pointer-events:none}
@media (max-width:699px){.ch-look-hold{height:140svh}}
.ch-look::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--espresso-thread);opacity:var(--dim,0)}
/* take your place, at night, the last thing before the footer. A screen of its own first: the sky turning round the
   North Star (nightsky.js) on the left, her words and joining (or, once she's in, her card) on the right. Then, across
   the whole width, what's hers as a founding member, and Suha's name. On a phone the North Star sits above the words
   and the sky fades out behind them. */
.ch-join{z-index:1;align-items:center;background:var(--espresso);margin-bottom:-1px}
.ch-sky{--cx:50%;--cy:150px;bottom:auto;height:min(100%,125svh);-webkit-mask:linear-gradient(to bottom,#000 65%,transparent);mask:linear-gradient(to bottom,#000 65%,transparent)}
.ch-join-in{position:relative;z-index:1;isolation:isolate;display:grid;gap:var(--s-md);justify-items:start;max-width:38em;padding-top:190px}
.ch-join-now{display:grid;gap:var(--s-md);justify-items:start;width:100%}
.mcard,.mcard *{text-shadow:none!important}
.ch-join-in .t-3{margin-top:calc(-1 * var(--s-xs))}
.ch-join-lead{font-size:var(--t1);line-height:1.35;max-width:22em;text-wrap:pretty}
.ch-join-then{font-size:1.0625rem;line-height:1.55;max-width:32em;color:rgba(244,240,227,.8)}
.ch-hair{position:relative;width:min(520px,72%);height:1px;margin-bottom:var(--s-xs);transform-origin:50% 50%;
  background:linear-gradient(to right,rgba(58,58,59,0),rgba(58,58,59,.34) 36%,rgba(58,58,59,0) calc(50% - 18px),rgba(58,58,59,0) calc(50% + 18px),rgba(58,58,59,.34) 64%,rgba(58,58,59,0))}
.ch-hair::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;background:var(--rose-ink);
  -webkit-mask:url("../img/north-star.svg") center/contain no-repeat;mask:url("../img/north-star.svg") center/contain no-repeat}
@media (min-width:1000px){
  /* the first screen is the North Star's: it sits in the middle of the left half, the words centred beside it */
  .ch-join{grid-template-rows:auto auto;align-items:start;padding-top:0}
  .ch-sky{--cx:25%;--cy:50svh;height:auto;bottom:0;-webkit-mask:linear-gradient(to bottom,#000 70%,transparent);mask:linear-gradient(to bottom,#000 70%,transparent)}
  .ch-join-in{grid-column:2;grid-row:1;min-height:100svh;align-content:center;padding:calc(var(--nav) + var(--s-lg)) 0 var(--s-lg)}
}

/* ---------- On a phone the film plays itself (main.js, selfPlaying) ---------- */
/* a hairline of progress along the foot of the film, a word ("Hold to pause", "Paused") above it, and Skip */
.cine{position:absolute;left:var(--gutter);right:var(--gutter);bottom:max(10px,env(safe-area-inset-bottom));z-index:4;display:flex;align-items:center;gap:16px;
  color:var(--charcoal);opacity:0;pointer-events:none;transition:opacity .6s var(--ease-out)}
.cine.on{opacity:1}
.cine.on.late{opacity:0;transition-duration:.35s}
.cine.on .cine-skip{pointer-events:auto}
.cine-line{position:relative;flex:1;height:1px;overflow:hidden;background:color-mix(in srgb,currentColor 24%,transparent)}
.cine-line i{position:absolute;inset:0;background:currentColor;transform-origin:left;transform:scaleX(0);opacity:.8}
.cine-hint{position:absolute;left:0;bottom:100%;margin-bottom:2px;font:700 .6875rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  opacity:0;transition:opacity .5s var(--ease-out)}
.cine-hint.in{opacity:.85}
.cine-skip,.cine-toggle{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;border:0;background:none;color:inherit;cursor:pointer;
  font:700 .75rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase}
.cine-skip:focus-visible,.cine-toggle:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.cine-toggle{display:none;min-width:3.4em}
/* on a laptop: Pause or Play, the hairline and Skip, centred at the foot, under the film's own centre line (the North
   Star above, the name in the middle); the sound sits on the right */
@media (min-width:900px){
  .cine{left:50%;right:auto;width:min(520px,40vw);bottom:22px;transform:translateX(-50%)}
  .cine-hint{left:50%;transform:translateX(-50%)}
  .cine-toggle{display:inline-flex}
  .cine.on .cine-toggle{pointer-events:auto}
  .cinema .film-cue{transition:opacity .4s}
  .cine.on ~ .film-open .film-cue{opacity:0}
}
/* while it plays: nothing to select or call out under a held finger */
.cine-play .film-stage{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html.cine-play{overscroll-behavior:none}
/* the soft veil of paper, for a jump across the film */
/* what Safari's bars read (site.js): a strip at each edge, 12px, mostly off the screen, at 12%, never in the way of a tap */
.edge{position:fixed;left:0;right:0;z-index:2147483647;height:12px;opacity:.12;pointer-events:none}
.edge-t{top:-6px}
.edge-b{bottom:-6px}
.cine-veil{position:fixed;inset:0;z-index:90;background:var(--cream) url("../img/paper-cream.webp") 0 0/512px 512px;opacity:0;pointer-events:none;transition:opacity .45s var(--ease-out)}
.cine-veil.on{opacity:1;pointer-events:auto}

/* ---------- once she's in the Circle (member.js) ---------- */
/* what only visitors see, and what only members see; the class is set in the page's head, before anything is drawn */
html.is-member [data-visitor]{display:none!important}
html:not(.is-member) [data-member]{display:none!important}
/* her card: cream card stock, on any ground. Her name in her own hand, what's next for her, and what she has told us */
[data-member-card]{display:grid;gap:var(--s-md);justify-items:start;width:100%;container-type:inline-size}
.mc-hello{font:400 var(--t2)/1.08 var(--display);letter-spacing:-.06em;text-wrap:balance}
.mc-hello:focus{outline:none}
.mc-glad{margin-top:-.35em;font:400 clamp(1.9rem,3vw,2.5rem)/1.1 var(--script);color:#F3CFC7}
.mc-lead{font-size:1.1875rem;line-height:1.6;max-width:31em;text-wrap:pretty}
.mcard{position:relative;display:grid;gap:14px;width:100%;max-width:31rem;margin-top:var(--s-xs);padding:clamp(22px,3vw,32px) clamp(22px,3vw,34px) clamp(20px,2.6vw,28px);
  border-radius:10px;background:var(--cream) url("../img/paper-cream.webp") 0 0/512px 512px;color:var(--charcoal);text-align:left;
  box-shadow:0 2px 4px rgba(0,0,0,.18),0 44px 70px -36px rgba(0,0,0,.72)}
.mcard.fresh{animation:mc-in 1.2s var(--ease-out) both}
@keyframes mc-in{from{opacity:0;transform:translateY(28px) rotate(-1.2deg)}}
.mc-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-md)}
.mc-lockup{display:block;width:clamp(128px,14vw,160px);color:var(--rose-ink)}
.mc-lockup svg{display:block;width:100%;height:auto}
.mc-star,.nav-me-star{flex:none;width:22px;height:22px;background:#BF7C88;
  -webkit-mask:url("../img/north-star.svg") center/contain no-repeat;mask:url("../img/north-star.svg") center/contain no-repeat}
.mc-star{animation:nsky-glint 7s ease-in-out 1s infinite}
.mc-name{margin-top:8px;font:400 clamp(2.5rem,4vw,3.25rem)/1 var(--script);color:var(--rose-ink)}
.mc-since{margin-top:-4px;font-size:.9375rem;line-height:1.4;opacity:.75}
.mc-next{display:grid;gap:8px;justify-items:start;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mc-title{font:400 var(--t1)/1.2 var(--display);letter-spacing:-.05em;text-wrap:balance}
.mc-next p:not(.mc-title){font-size:1.0625rem;line-height:1.5;text-wrap:pretty}
.mc-next .btn{margin-top:6px}
.mc-link,.me-card,.mc-change,.mc-forget{display:inline-flex;align-items:center;min-height:36px;padding:0;border:0;background:none;cursor:pointer;color:var(--rose-ink);
  font:700 .8125rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;text-decoration:underline dashed 1px;text-underline-offset:6px}
.mc-about{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px var(--s-md)}
.mc-details{display:grid;gap:6px;margin:0}
.mc-details div{display:flex;align-items:baseline;gap:12px}
.mc-details dt{min-width:7.5em;font-size:.9375rem;opacity:.72}
.mc-details dd{margin:0;font-size:1.0625rem}
.mc-edit{display:grid;gap:14px var(--s-md);padding-top:4px}
.mc-edit .btn{justify-self:start}
@container (min-width:33rem){
  .mcard{max-width:none;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:clamp(20px,4cqi,34px);row-gap:12px}
  .mc-head,.mc-name,.mc-since,.mc-edit,.mc-soon,.mc-foot{grid-column:1 / -1}
  .mc-since{padding-bottom:16px;border-bottom:1px solid var(--line)}
  .mc-next{grid-column:1;padding:4px 0 0;border:0}
  .mc-about{grid-column:2;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:12px;padding:6px 0 0 clamp(16px,3cqi,26px);border-left:1px solid var(--line)}
  .mc-details{gap:12px}
  .mc-details div{display:grid;gap:2px}
  .mc-details dt{min-width:0}
  .mc-soon{margin-top:4px;padding-top:16px;border-top:1px solid var(--line)}
  .mc-edit{grid-template-columns:1fr 1fr;align-items:start}
  .mc-edit .mc-why,.mc-edit .btn{grid-column:1 / -1}
}
.mc-why{font-size:1.0625rem}
.mc-soon{font-size:.9375rem;line-height:1.5;opacity:.8;text-wrap:pretty}
.mc-foot{font-size:.9375rem;opacity:.85}
.mc-foot .mc-forget{min-height:0;font:400 .9375rem/1.4 var(--body);letter-spacing:0;text-transform:none;text-underline-offset:4px}
/* on the night grounds, the card keeps its own ink */
.night .mcard a:not(.btn),.night .mcard .mc-change,.night .mcard .mc-forget{color:var(--rose-ink)}
.night .mcard .btn-primary{background:var(--espresso);color:var(--cream)}
@media (hover:hover) and (pointer:fine){.night .mcard .btn-primary:hover{background:var(--espresso-thread)}}
.night .mcard .field label{color:var(--charcoal)}
.night .mcard .field input,.night .mcard .field select{border-color:var(--charcoal)}
.night .mcard .field-help{color:var(--charcoal);opacity:.8}
.night .mcard :focus-visible{outline-color:var(--charcoal)}
/* the nav: her star and her name where "Join the Circle" was, and a small card under it */
.nav-me{display:inline-flex;align-items:center;gap:9px;height:44px;margin-left:auto;padding:0 18px 0 13px;border:1px solid var(--line-strong);border-radius:999px;
  background:var(--cream);color:var(--charcoal);cursor:pointer;font:400 1.0625rem/1 var(--body);white-space:nowrap;transition:background-color .25s ease,color .25s ease}
.nav-me-star{width:17px;height:17px}
.nav-me[aria-expanded="true"]{background:var(--espresso);border-color:var(--espresso);color:var(--cream)}
.nav-me-name{max-width:9em;overflow:hidden;text-overflow:ellipsis}
@media (min-width:900px){.nav-me{margin-left:0}}
.me{position:absolute;top:calc(100% + 6px);right:var(--gutter);display:grid;gap:10px;justify-items:start;width:min(340px,calc(100vw - 2 * var(--gutter)));padding:22px 24px 18px;
  border-radius:10px;background:var(--cream) url("../img/paper-cream.webp") 0 0/512px 512px;color:var(--charcoal);
  box-shadow:0 1px 2px rgba(24,17,15,.12),0 34px 60px -30px rgba(24,17,15,.6);animation:rise .45s var(--ease-out)}
.me-name{font:400 2.5rem/1 var(--script);color:var(--rose-ink)}
.me .mc-since{margin-top:-6px}
.me .mc-next{width:100%;padding:12px 0}
.me .mc-title{font-size:1.25rem}

/* ---------- Our first collection: a welcome, then the fitting, one design at a time (survey.js) ---------- */
/* the welcome. Often the first page she sees, from a link a friend sent: what this is, why her opinion matters, how long
   it takes; then the five, any of which she can begin with */
/* (no double-tap zoom here, so quick taps from one answer to the next each count) */
.ff{padding-top:clamp(20px,3vw,44px);touch-action:manipulation}
.ff-hero{max-width:calc(var(--wide) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter) clamp(56px,7vw,104px);display:grid;gap:clamp(40px,5vw,72px)}
.ff-hero-text{display:grid;gap:var(--s-lg);justify-items:start}
.ff-hero .t-4{font-size:clamp(3.25rem,7.4vw,6.75rem);margin-top:-.1em}
.ff-hero .t-4 .line{display:block}
.ff-lead{font-size:var(--t1);line-height:1.36;max-width:23em;text-wrap:pretty}
.ff-facts{margin:0;max-width:30em}
.ff-facts b{font:400 clamp(1.2rem,1.5vw,1.4rem)/1.15 var(--display);letter-spacing:-.05em}
@media (min-width:1000px){
  .ff-hero-text{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-rows:auto auto 1fr;column-gap:clamp(48px,6vw,110px);align-items:start}
  .ff-hero-text .lead-in{grid-area:1 / 1}
  .ff-hero .t-4{grid-area:2 / 1}
  .ff-begin{grid-area:3 / 1;margin-top:var(--s-sm)}
  .ff-lead{grid-area:1 / 2 / 3;margin-top:.4em}
  .ff-facts{grid-area:3 / 2}
}
/* the five, side by side: a touch widens one; any of them begins the fitting there */
.ff-five{--h:min(66svh,640px);display:flex;gap:10px;height:var(--h)}
.ff-look{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:4px;background:var(--tint);color:var(--cream-on-espresso);text-decoration:none;
  transition:flex-grow .8s var(--ease-out)}
.ff-look img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transition:transform 1.2s var(--ease-out)}
.ff-look::after{content:"";position:absolute;inset:55% 0 0;background:linear-gradient(to top,rgba(24,17,15,.55),rgba(24,17,15,0))}
.ff-look-text{position:absolute;left:16px;right:12px;bottom:16px;z-index:1;display:grid;gap:4px}
.ff-look-colour{font-size:.9375rem;line-height:1.2;white-space:nowrap;opacity:.92}
.ff-look-name{font:400 clamp(1.6rem,2.3vw,2.4rem)/1 var(--display);letter-spacing:-.06em;white-space:nowrap}
.ff-look:focus-visible{outline-offset:4px}
.ff-look:active{transform:scale(.99)}
@media (hover:hover) and (pointer:fine){.ff-five:hover .ff-look{flex-grow:.82}.ff-five .ff-look:hover{flex-grow:1.8}.ff-look:hover img{transform:scale(1.03)}}
@media (max-width:699px){
  /* a row to swipe through, sideways only (as the five rise into place they reach below it, which let a finger move
     the whole row up and down) */
  .ff-five{height:auto;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--gutter));padding:0 var(--gutter) 6px;scrollbar-width:none}
  .ff-five::-webkit-scrollbar{display:none}
  .ff-look{flex:0 0 62vw;aspect-ratio:3/5;scroll-snap-align:center}
}

/* the fitting: one screen at a time. Each design is a card in its own colour on the cream page, as on the home page, so its
   colour never runs into what's round it (the welcome above, the footer below) */
.survey{position:relative;overflow-anchor:none;color:var(--charcoal);
  --rule:var(--line);--rule-strong:var(--line-strong);--chip:var(--cream);--chip-hover:var(--blush-soft);--chip-on:var(--blush-soft);--pick:var(--espresso);--pick-ink:var(--cream);
  --pearl:var(--rose-ink);--pearl-ink:var(--cream);--field-line:var(--charcoal)}
/* the darker designs (Layali, Tamr, Kohl): the same answers, drawn in cream */
.step[data-ground="dark"]{--rule:rgba(244,240,227,.2);--rule-strong:rgba(244,240,227,.42);--chip:rgba(244,240,227,.05);--chip-hover:rgba(244,240,227,.12);
  --chip-on:rgba(244,240,227,.14);--pick:var(--cream-on-espresso);--pick-ink:var(--espresso);--pearl:#F3CFC7;--pearl-ink:var(--espresso);--field-line:var(--cream-on-espresso)}
/* (the four in a row are drawn on the ground itself, so the lines between them show) */
.step[data-ground="dark"] .seg input:not(:checked)+span{background:var(--tint)}
@media (hover:hover) and (pointer:fine){.step[data-ground="dark"] .seg input:not(:checked)+span:hover{box-shadow:inset 0 0 0 100vmax rgba(244,240,227,.1)}}
.step[data-ground="dark"] .btn-primary{background:var(--cream-on-espresso);color:var(--espresso)}
@media (hover:hover) and (pointer:fine){.step[data-ground="dark"] .btn-primary:hover{background:#fff8ec}}
.step[data-ground="dark"] .help{color:rgba(244,240,227,.8)}
.step[data-ground="dark"] :focus-visible{outline-color:var(--cream-on-espresso)}
.step[data-ground="dark"] ::placeholder{color:rgba(58,58,59,.6)}
/* where she is: the five, then her, then sending. A star for each, rose once answered */
.fit-bar{position:sticky;top:var(--nav);z-index:20;background:var(--cream) url("../img/paper-cream.webp") 0 0/512px 512px;border-bottom:1px solid var(--line)}
/* on a phone, in the fitting (survey.js), the nav steps away and her progress takes the top of the screen */
@media (max-width:699px),(orientation:landscape) and (max-height:500px){
  .nav{transition:background-color .35s ease,transform .45s var(--ease-out)}
  .in-fit .nav{transform:translateY(-100%)}
  .in-fit .fit-bar{top:0}
}
.fit-steps{display:flex;justify-content:center;gap:clamp(12px,2.6vw,38px);margin:0 auto;padding:10px var(--gutter);list-style:none;overflow-x:auto;scrollbar-width:none}
.fit-steps::-webkit-scrollbar{display:none}
.fit-steps a{display:flex;align-items:center;gap:8px;min-height:40px;color:inherit;text-decoration:none;white-space:nowrap;
  font:700 .75rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;opacity:.55;transition:opacity .3s ease}
.fit-steps a:hover,.fit-steps a[aria-current="step"]{opacity:1}
.fs-star{flex:none;width:13px;height:13px;background:currentColor;opacity:.4;transform:scale(.8);transition:transform .5s var(--ease-out),opacity .5s ease,background-color .5s ease;
  -webkit-mask:url("../img/north-star.svg") center/contain no-repeat;mask:url("../img/north-star.svg") center/contain no-repeat}
.fit-steps a.done .fs-star{background:var(--rose);opacity:1;transform:scale(1)}
.fit-steps a[aria-current="step"] .fs-star{background:var(--pearl);opacity:1;transform:scale(1.25)}
@media (max-width:699px){.fit-steps{justify-content:space-between;gap:6px}.fit-steps a:not([aria-current="step"]) .fs-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
.steps{max-width:calc(var(--wide) + 120px + 2 * var(--gutter));margin:0 auto;padding:clamp(24px,3.4vw,48px) var(--gutter) clamp(48px,6vw,88px)}
.step:focus-within :is(h2):focus{outline:none}
.step h2:focus{outline:none}
/* one design: its card, the photographs held while the questions pass on a laptop; on a phone, the photographs first,
   and the card a little wider than the page's margins allow */
.step-design{--pad:clamp(18px,4.4vw,64px);display:grid;gap:var(--s-lg);padding:var(--pad);border-radius:8px;background:var(--tint);color:var(--ink);
  box-shadow:0 1px 2px rgba(24,17,15,.06),0 30px 60px -40px rgba(24,17,15,.45)}
@media (min-width:1000px){.step-design{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(40px,5vw,84px);align-items:start}}
@media (max-width:999px){.step-design .step-body{max-width:none}}
@media (max-width:699px){.step-design{margin-inline:calc(10px - var(--gutter))}}
/* one design's photographs: the whole of her, large, and beside it the others, small, with the moodboard pinned last.
   Each at its own shape, never cropped, straight onto the design's colour; a tap on any of them opens it large */
.gal{container-type:inline-size;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(12px,2vw,28px)}
.gal-hero,.gal-print{position:relative;display:block;width:100%;padding:0;border:0;border-radius:4px;background:none;color:inherit;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
/* the whole of her as large as the screen's height allows; the others a little over half her width, whatever the screen */
.gal>*{--hw:min(62cqw,max(200px,calc((100svh - var(--nav) - 170px) * .6)))}
.gal-hero{align-self:start;width:var(--hw)}
/* each lifts off the card a little (a hairline at its edge, a soft warm shadow), so a pale photograph never melts into a pale card */
.gal-hero img,.gal-print img{display:block;width:100%;height:auto;border-radius:4px;background:rgba(24,17,15,.06);
  box-shadow:0 0 0 1px rgba(51,39,33,.07),0 3px 8px -2px rgba(51,39,33,.2),0 28px 52px -24px rgba(51,39,33,.6);transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.gal-hero:active img,.gal-print:active img{transform:scale(.985);transition-duration:.15s}
@media (hover:hover) and (pointer:fine){.gal-hero:hover img,.gal-print:hover img{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(51,39,33,.07),0 5px 12px -3px rgba(51,39,33,.22),0 36px 60px -26px rgba(51,39,33,.65)}}
.gal-zoom{position:absolute;right:10px;bottom:10px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(252,250,241,.92);color:var(--charcoal);
  box-shadow:0 6px 16px -8px rgba(24,17,15,.5)}
.gal-zoom svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.gal-prints{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(10px,1.4vw,18px);max-width:calc(var(--hw) * .56);margin:0;padding:0;list-style:none}
/* the moodboard: pinned at a slant with a strip of tape, and named in Suha's hand */
.gal-board{display:grid;gap:2px;justify-items:start}
.gal-board .gal-print{transform:rotate(-2deg);margin-top:6px}
.gal-board .gal-print::before{content:"";position:absolute;z-index:1;left:30%;top:-7px;width:40%;height:14px;background:rgba(244,240,227,.7);
  box-shadow:0 1px 2px rgba(24,17,15,.14);transform:rotate(3deg)}
.gal-note{margin:2px 0 0 .1em;font:400 clamp(1.35rem,2vw,1.7rem)/1 var(--script);color:var(--pearl);transform:rotate(-3deg);transform-origin:left center}
@media (min-width:1000px){.step-design .gal{position:sticky;top:calc(var(--nav) + 84px)}}
.step-body{display:grid;gap:var(--s-lg);align-content:start;max-width:36em}
.step-head{display:grid;gap:8px}
.design-name{font:400 clamp(3rem,6vw,5.25rem)/.92 var(--display);letter-spacing:-.07em;margin-left:-.04em}
.design-story{font-size:var(--t1);line-height:1.32;max-width:19em;text-wrap:pretty}
/* the details, as on a garment's tag, folded away until she wants them */
.design-more{margin-top:4px}
.design-more summary{display:inline-flex;align-items:center;gap:10px;min-height:40px;cursor:pointer;list-style:none;font:700 .8125rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase}
.design-more summary::-webkit-details-marker{display:none}
.design-more summary::before{content:"";width:12px;height:12px;flex:none;transition:background-size .3s var(--ease-out);
  background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 12px no-repeat}
.design-more[open] summary::before{background-size:12px 1.5px,1.5px 0}
.design-more:not([open]) .when-open,.design-more[open] .when-shut{display:none}
.spec{display:grid;margin:8px 0 0;border-top:1px solid var(--rule)}
.spec div{display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:var(--s-md);padding:11px 0;border-bottom:1px solid var(--rule)}
.spec dt{padding-top:.3em;font:700 .75rem/1.3 var(--body);letter-spacing:.16em;text-transform:uppercase}
.spec dd{margin:0;font-size:1.0625rem;line-height:1.45;text-wrap:pretty}
.spec dd i{font-style:normal;font-weight:700}
/* her answers: plain, quick, and large enough for a thumb */
.q{display:grid;gap:12px;margin:0;padding:0;border:0}
.q-title{padding:0;font:400 clamp(1.3rem,1.8vw,1.55rem)/1.2 var(--display);letter-spacing:-.045em}
.q .help{margin-top:-6px}
.chips-price .chip span{padding-right:18px;font-variant-numeric:tabular-nums}
.note-wrap{display:grid;gap:10px}
.note-wrap label{font-size:1.0625rem}
.starters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.9375rem}
.starters span{opacity:.75}
.starter{min-height:36px;padding:0 14px;border:1px dashed var(--rule-strong);border-radius:999px;background:transparent;cursor:pointer;font:italic 400 .9375rem/1 var(--body);color:inherit}
@media (hover:hover) and (pointer:fine){.starter:hover{border-style:solid;border-color:currentColor}}
.starter:active{transform:scale(.97)}
/* Back, and the way on (it names what comes next); on a phone it stays at the foot of the screen */
.step-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s-md);padding-top:var(--s-md);border-top:1px solid var(--rule)}
.step-back{min-height:44px;padding:0;border:0;background:none;cursor:pointer;color:inherit;font:700 .8125rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;
  text-decoration:underline dashed 1px;text-underline-offset:6px}
@media (max-width:999px){
  .step-design .step-nav,.step-about .step-nav{position:sticky;bottom:0;z-index:5;box-shadow:0 -1px 0 var(--rule)}
  .step-about .step-nav{margin:0 calc(-1 * var(--gutter));padding:6px var(--gutter) calc(6px + env(safe-area-inset-bottom));background:var(--cream) url("../img/paper-cream.webp") 0 0/512px 512px}
  /* on a design's card it runs to the card's edges, and settles into its foot */
  .step-design .step-nav{margin:0 calc(-1 * var(--pad)) calc(-1 * var(--pad));padding:6px var(--pad) calc(6px + env(safe-area-inset-bottom));border-radius:0 0 8px 8px;background:var(--tint)}
}
/* a little about her: a screen of questions at a time, each numbered in Suha's hand */
.step-about{display:grid;gap:var(--s-xl);max-width:860px;margin:0 auto}
.about-head{display:grid;gap:var(--s-sm);justify-items:start}
.about-intro{font-size:1.1875rem;line-height:1.55;max-width:34em;text-wrap:pretty}
.about-qs{display:grid;gap:clamp(44px,6vw,64px)}
.aq{display:grid;gap:12px;margin:0;padding:0;border:0}
.aq-q{display:grid;gap:0;padding:0;font:400 clamp(1.45rem,2.2vw,1.9rem)/1.18 var(--display);letter-spacing:-.05em;text-wrap:balance}
.aq-n{justify-self:start;display:flex;align-items:baseline;gap:.3em;margin-bottom:.12em;font:400 clamp(2.3rem,3.4vw,2.9rem)/1 var(--display);letter-spacing:-.04em;color:var(--rose-ink)}
.aq-n small{font:400 1rem/1 var(--body);letter-spacing:.01em;color:var(--charcoal);opacity:.62}
.aq-group{margin-top:6px;font:700 .75rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.aq-names{display:grid;gap:var(--s-sm) var(--s-md)}
@media (min-width:700px){.aq-names{grid-template-columns:1fr 1fr}}
.about-note label{font:400 clamp(1.3rem,1.8vw,1.55rem)/1.2 var(--display);letter-spacing:-.045em;text-transform:none}
.about-note .optional{font:400 1rem/1 var(--body)}
/* sending it all: at night, under the North Star, where her star arrives when she does */
.step-send{margin:calc(-1 * clamp(24px,3.4vw,48px)) calc(50% - 50vw) calc(-1 * clamp(48px,6vw,88px) - 1px);min-height:calc(100svh - var(--nav) - 60px);
  align-items:center;background:var(--espresso)}
.send-sky{--cx:50%;--cy:120px;bottom:auto;height:min(100%,125svh);-webkit-mask:linear-gradient(to bottom,#000 65%,transparent);mask:linear-gradient(to bottom,#000 65%,transparent)}
.send-in{position:relative;z-index:1;isolation:isolate;display:grid;max-width:38em;padding-top:150px}
.send-in::before{content:"";position:absolute;z-index:-1;inset:-6% -14% -4%;top:110px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side at 50% 58%,rgba(28,21,17,.66),rgba(28,21,17,.46) 50%,rgba(28,21,17,.16) 80%,rgba(28,21,17,0))}
.send-in :is(p,label,span):not(.lead-in){text-shadow:0 1px 10px rgba(22,16,13,.9),0 0 2px rgba(22,16,13,.5)}
.send-now,.welcome{display:grid;gap:var(--s-md);justify-items:start}
.send-lead{font-size:1.1875rem;line-height:1.55;max-width:32em;text-wrap:pretty}
.details{display:grid;gap:var(--s-md);width:100%;margin-top:var(--s-xs)}
.details-fields{display:grid;gap:var(--s-lg) var(--s-md)}
@media (min-width:700px){.details-fields{grid-template-columns:1fr 1fr}}
.send-who{font-size:1.125rem}
.send-edit{padding:0;border:0;background:none;cursor:pointer;color:inherit;font:inherit;text-decoration:underline dashed 1px;text-underline-offset:4px}
.survey-end{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-md)}
.send-help{max-width:34em}
.step-send .step-nav{width:100%;border-top-color:rgba(244,240,227,.16)}
.step-send .link-quiet{color:var(--cream-on-espresso)}
.welcome:focus{outline:none}
.welcome-title{font:400 var(--t3)/1 var(--display);letter-spacing:-.065em;text-wrap:balance}
.welcome-glad{margin-top:-.3em;font:400 clamp(1.9rem,3vw,2.5rem)/1.1 var(--script);color:#F3CFC7}
.welcome-body{font-size:1.1875rem;line-height:1.55;max-width:32em}
.welcome-sign{font:400 2.25rem/1 var(--script)}
.welcome-more{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-sm) var(--s-lg);margin-top:var(--s-xs)}
.welcome-more .link-quiet{padding:0;border:0;background:none;cursor:pointer}
.welcome-shared{font-size:1rem}
@media (min-width:1000px){
  .step-send{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .send-sky{--cx:25%;--cy:50%;height:auto;bottom:0;-webkit-mask:linear-gradient(to bottom,#000 70%,transparent);mask:linear-gradient(to bottom,#000 70%,transparent)}
  .send-in{grid-column:2;padding-top:0}
  .send-in::before{inset:0 -12% 0}
}

/* a photograph, large (survey.js): over everything, one at a time. Swipe, the arrows or the keys move between them; Close,
   Esc or a tap beside the photograph puts it away */
html.lb-open{overflow:hidden}
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;overscroll-behavior:contain;
  background:#18110F;color:var(--cream-on-espresso)}
.lb::backdrop{background:transparent}
.lb:focus{outline:none}
.lb-track{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior:contain;scrollbar-width:none}
.lb-track::-webkit-scrollbar{display:none}
.lb-slide{--t:max(64px,calc(env(safe-area-inset-top) + 56px));--b:max(40px,calc(env(safe-area-inset-bottom) + 24px));--x:clamp(12px,6vw,120px);
  position:relative;flex:0 0 100%;height:100%;margin:0;scroll-snap-align:center;scroll-snap-stop:always}
/* the whole photograph, as large as the screen allows, never cropped */
.lb-slide img{position:absolute;inset:var(--t) var(--x) var(--b);margin:auto;width:auto;height:auto;max-width:calc(100% - 2 * var(--x));max-height:calc(100% - var(--t) - var(--b));
  border-radius:3px;background:center/100% 100% no-repeat}
.lb-bar{position:absolute;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--s-md);
  padding:max(8px,env(safe-area-inset-top)) clamp(16px,3vw,40px) 8px}
.lb-count{font:400 clamp(1.3rem,2vw,1.6rem)/1 var(--display);letter-spacing:-.05em}
.lb-count span{margin-left:.5em;font:400 1rem/1 var(--body);letter-spacing:.02em;font-variant-numeric:tabular-nums;opacity:.75}
.lb-close{min-height:44px;padding:0 2px;border:0;background:none;color:inherit;cursor:pointer;font:700 .8125rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;
  text-decoration:underline dashed 1px;text-underline-offset:6px}
.lb-btn{position:absolute;top:50%;width:52px;height:52px;margin-top:-26px;border:0;border-radius:50%;background:rgba(244,240,227,.12);color:inherit;cursor:pointer;transition:background-color .25s ease}
.lb-btn::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -7px;border:solid currentColor;border-width:1.5px 1.5px 0 0;transform:rotate(45deg)}
.lb-prev{left:clamp(12px,2vw,32px)}.lb-prev::before{margin-left:-3px;transform:rotate(-135deg)}
.lb-next{right:clamp(12px,2vw,32px)}
.lb-btn{display:none}
@media (hover:hover) and (pointer:fine){.lb-btn{display:block}.lb-btn[hidden]{display:none}.lb-btn:hover{background:rgba(244,240,227,.22)}}

/* her thanks, once her answers are in: it rises from the foot of the screen with her star, and goes after a while */
.toast{position:fixed;left:50%;bottom:max(16px,calc(env(safe-area-inset-bottom) + 8px));z-index:70;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  column-gap:14px;width:min(430px,calc(100vw - 24px));padding:16px 6px 18px 18px;border-radius:12px;overflow:hidden;
  background:var(--cream) url("../img/paper-cream.webp") 0 0/512px 512px;color:var(--charcoal);box-shadow:0 1px 2px rgba(24,17,15,.14),0 30px 60px -28px rgba(24,17,15,.7);
  opacity:0;visibility:hidden;transform:translate(-50%,calc(100% + 32px));transition:transform .5s var(--ease-out),opacity .3s ease,visibility 0s .5s}
.toast.on{opacity:1;visibility:visible;transform:translate(-50%,0);transition:transform .9s var(--ease-out),opacity .4s ease}
.toast-star{grid-row:1 / 3;width:30px;height:30px;background:var(--rose-ink);
  -webkit-mask:url("../img/north-star.svg") center/contain no-repeat;mask:url("../img/north-star.svg") center/contain no-repeat}
.toast.on .toast-star{animation:toast-star 1.4s var(--ease-out) .2s both}
@keyframes toast-star{0%{opacity:0;transform:scale(.2) rotate(-150deg)}55%{opacity:1;transform:scale(1.18) rotate(8deg)}100%{opacity:1;transform:none}}
.toast-title{font:400 1.375rem/1.1 var(--display);letter-spacing:-.05em}
.toast-body{grid-column:2;margin-top:3px;font-size:1.0625rem;line-height:1.35}
.toast-close{grid-row:1 / 3;grid-column:3;position:relative;width:44px;height:44px;border:0;background:none;cursor:pointer;color:inherit}
.toast-close::before,.toast-close::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;margin:-.75px 0 0 -7px;background:currentColor;transform:rotate(45deg)}
.toast-close::after{transform:rotate(-45deg)}
/* the time it has left, as a thread shortening along its foot */
.toast-time{position:absolute;left:18px;right:18px;bottom:0;height:2px;border-radius:2px;background:var(--rose);transform-origin:left center;transform:scaleX(0)}
.toast.on .toast-time{animation:toast-time 7s linear both}
@keyframes toast-time{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){
  .toast,.toast.on{transform:translate(-50%,0);transition:opacity .3s ease,visibility 0s .3s}
  .toast.on{transition:opacity .3s ease}
  .toast.on .toast-star,.toast.on .toast-time{animation:none}
}

/* the cookie choice (consent.js): a card of paper that rises at the foot of the screen, bottom left, clear of the chat
   button (above it on a phone). Two answers of equal weight; opened again from Cookie settings, the one she gave is
   filled. It steps aside for the film and the menu, and comes back after */
.consent{position:fixed;left:var(--gutter);bottom:max(16px,calc(env(safe-area-inset-bottom) + 8px));z-index:75;
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:6px;width:min(420px,calc(100vw - 2 * var(--gutter)));
  padding:18px 20px 20px 18px;border-radius:12px;background:var(--cream) url("../img/paper-cream.webp") 0 0/512px 512px;color:var(--charcoal);
  box-shadow:0 1px 2px rgba(24,17,15,.14),0 30px 60px -28px rgba(24,17,15,.7);
  opacity:0;visibility:hidden;transform:translateY(calc(100% + 32px));transition:transform .5s var(--ease-out),opacity .3s ease,visibility 0s .5s}
.consent.on{opacity:1;visibility:visible;transform:none;transition:transform .9s var(--ease-out),opacity .4s ease}
html.cinema:not(.film-done) .consent.on,html.menu-open .consent.on{opacity:0;visibility:hidden;transform:translateY(calc(100% + 32px));transition:transform .5s var(--ease-out),opacity .3s ease,visibility 0s .5s}
@media (max-width:560px){.consent{bottom:calc(max(16px,env(safe-area-inset-bottom)) + 60px)}}
.consent-star{width:22px;height:22px;margin-top:1px;background:var(--rose-ink);
  -webkit-mask:url("../img/north-star.svg") center/contain no-repeat;mask:url("../img/north-star.svg") center/contain no-repeat}
.consent-body{font-size:1rem;line-height:1.45}
.consent-act{grid-column:1 / -1;display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px;margin-top:10px}
.consent-act .btn{padding:0 12px}
.consent-act .btn[aria-pressed="true"]{background:var(--espresso);color:var(--cream)}
@media (prefers-reduced-motion:reduce){
  .consent,.consent.on,html.cinema:not(.film-done) .consent.on{transform:none}
}

/* Zoho SalesIQ's chat button, on every page from the start: a hairline of cream so its espresso still shows on the
   night sky and the footer, and, on the home page, a lift clear of the film's controls while they share its corner:
   the Skip bar once the film plays, and the sound wherever it sits at the foot (between 700 and 900px wide, wide
   screens, phones on their side) */
#zsiq_float{box-shadow:0 0 0 1px rgba(244,240,227,.32),0 12px 28px -12px rgba(24,17,15,.7);transition:translate .5s var(--ease-out)}
html.cinema:not(.film-done):has(.cine.on:not(.late)) #zsiq_float{translate:0 -58px}
@media (min-width:700px) and (max-width:899px),(min-width:900px) and (min-aspect-ratio:33/20){
  html.cinema:not(.film-done) #zsiq_float{translate:0 -58px}
}
.footer-cookies{display:inline-flex;min-height:44px;align-items:center;padding:0;border:0;background:none;cursor:pointer;color:var(--cream-on-espresso);
  text-decoration:underline dashed 1px;text-underline-offset:.25em}

/* ---------- a tablet held upright ----------
   Tall enough for the photograph's own shape (about 5:4) rather than the wide frame, so the opening fills the screen.
   Under 900px the words stack under the photograph, so they are given more of the height */
@media (min-width:700px) and (orientation:portrait){
  .film-stage{--frame-w:min(100%,calc((100svh - 500px) * 1.25))}
  .film-still{aspect-ratio:1.25}
}
@media (min-width:900px) and (orientation:portrait){
  .film-stage{--frame-w:min(100%,calc((100svh - 330px) * 1.25),1320px)}
}

/* ---------- a wide screen that is short (a tablet on its side, a 768px laptop) ----------
   The opening keeps its shape, drawn a little tighter so it all fits: the words under the photograph each keep their
   line, the sound goes to the top corner, and the nudge to begin keeps clear of the words. */
@media (min-width:900px) and (max-height:860px) and (min-height:501px){
  .film-stage{--frame-w:min(100%,calc((100svh - 350px) * 1.6),1320px)}
  .cinema .film-open{padding-top:40px;padding-bottom:16px;gap:14px}
  .hero-foot{column-gap:32px}
  .hero-line .caps{font-size:.8125rem;letter-spacing:.18em;white-space:nowrap}
  .hero-line .script{font-size:1.75rem;white-space:nowrap}
  .film-when{max-width:21em;font-size:.9375rem}
  .sound-bar{top:12px;bottom:auto}
  .cinema .film-cue{bottom:14px;--run:18px}
}
/* a screen no wider than the frame's own shape (16:10 or squarer): the photograph fills the height and the words under
   it reach the bottom corners, so the sound goes to the top corner here too */
@media (min-width:900px) and (max-aspect-ratio:33/20){
  .sound-bar{top:12px;bottom:auto}
}

/* ---------- a phone on its side (or any screen this low) ----------
   Wide and low: her photograph goes beside the words rather than above them, each card is a photograph and its words
   side by side, the diary opens as a spread, and every screen that holds fits the height. */
@media (orientation:landscape) and (max-height:500px){
  /* the opening: her photograph down the left, whole, and beside it the name, the way in and the invitation */
  .cinema .film-open{--still:calc((var(--screen) - 28px) * .66);grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);
    grid-template-areas:"still copy" "still foot";justify-items:start;align-content:stretch;gap:10px clamp(24px,4.5vw,56px);padding:14px var(--gutter)}
  .cinema .film-still{grid-area:still;width:var(--still);height:calc(var(--screen) - 28px);aspect-ratio:auto;margin:0}
  .cinema .hero-copy{grid-area:copy;justify-items:start;padding:6px 0 0}
  .cinema .hero-copy .wm{width:clamp(120px,17vw,170px)}
  .cinema .hero-index{justify-content:flex-start;margin-top:2px}
  .cinema .hero-index a{min-height:40px}
  .cinema .hero-foot{grid-area:foot;align-self:end;width:100%;grid-template-columns:none;justify-items:start;text-align:left;gap:14px;padding-bottom:32px}
  .cinema .hero-line{justify-items:start;text-align:left;margin:0;padding:0;background:none}
  .cinema .hero-act{justify-items:start;text-align:left}
  .cinema .film-cta{justify-content:flex-start}
  .cinema .film-cue{position:absolute;left:calc(var(--gutter) + var(--still) + clamp(24px,4.5vw,56px));right:auto;bottom:12px;translate:none;--run:16px;flex-direction:row;gap:10px;font-size:.6875rem}
  .cinema .north{top:26px}                                    /* over her photograph; film.js brings it to the middle as the film opens */
  .sound-bar{top:auto;bottom:8px;left:auto;right:calc(var(--gutter) - 6px)}
  /* the film's hairline and Skip: along the foot as when upright, stopping short of the sound's corner (room for
     "Tap for sound" beside it) */
  .cine{left:var(--gutter);right:calc(var(--gutter) + 228px);width:auto;transform:none}
  .cine-hint{left:0;transform:none}
  .cinema .beats{bottom:calc(max(10px,env(safe-area-inset-bottom)) + 70px)}   /* just above the hairline and its word */
  /* the first collection's opening: its heading on the left, what it is on the right, the two held on one screen */
  .five-intro-in,.cinema .five-intro-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"lead say" "head say";gap:0 clamp(28px,5vw,64px);
    align-content:center;align-items:start;min-height:var(--screen);padding:calc(var(--nav) + 8px) var(--gutter) 44px}
  .five-intro .lead-in{grid-area:lead;align-self:end}
  .five-intro .t-4{grid-area:head;font-size:clamp(2.1rem,10svh,3.1rem);max-width:none}
  .five-say{grid-area:say;align-self:center;justify-self:stretch;gap:10px}
  .five-sub{font-size:1.125rem}
  .five-detail{font-size:.9375rem;line-height:1.5}
  /* each card: the photograph, whole, beside its words, and the card as tall as the screen allows */
  .card{--ch:calc(var(--screen) - var(--nav) - 20px);grid-template-columns:calc(var(--ch) * 1200 / 1595) minmax(0,1fr);grid-template-rows:none;
    height:var(--ch);min-height:0;max-height:none;top:calc(var(--nav) + 10px);margin-bottom:5svh}
  .card-img{width:100%;height:100%;aspect-ratio:auto}
  .card-text{padding:12px clamp(20px,4vw,44px);align-content:center;gap:6px}
  .card-name{font-size:clamp(2.2rem,11svh,3.4rem)}
  .card-means span{font-size:1.5rem}
  .card-story{font-size:1.0625rem;max-width:24em}
  .card-spec{font-size:.875rem;line-height:1.4;max-width:36em}
  .card-link{margin-top:2px}
  /* Suha's note and her diary: one after the other, and the diary opened as a spread on a screen of its own */
  .hook{grid-template-columns:none;min-height:0;padding:var(--s-2xl) 0}             /* edge to edge, so the diary's held screen is too */
  .hook-body{padding-inline:var(--gutter)}
  .hook-art.pinned-paper{margin-inline:0}
  .diary{--pw:min(310px,30vw,calc((var(--screen) - var(--nav) - 84px) / 1.38))}
  /* the survey: each design's photographs held on the left, sized to the screen, and its questions beside them */
  .step-design{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:clamp(24px,4vw,48px);align-items:start}
  .step-design .gal{position:sticky;top:76px}
  .step-design .gal>*{--hw:calc((var(--screen) - 112px) * .6)}
  .step-design .step-nav{position:static;margin:0;padding:var(--s-md) 0 0;border-radius:0;background:none;box-shadow:none}
  /* the menu: the pages on the left and the invitation beside them, so the whole of it is on the screen */
  .menu{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:clamp(24px,4vw,56px);padding:calc(var(--nav) + 12px) var(--gutter) 16px}
  .menu nav{gap:2px}
  .menu nav a{font-size:min(var(--t3),10.5svh,5.4vw)}
}

/* ---------- the privacy notice ----------
   Long reading, kept calm: the four promises on blush paper, then the contents beside the text on a wide screen, the
   text at a reading measure, and tables that become labelled rows on a phone */
.page-privacy main{background:var(--cream) url("../img/paper-cream.webp") 0 0/512px 512px}
.lg-head{max-width:calc(var(--wide) + 2 * var(--gutter));margin:0 auto;padding:calc(var(--nav) + clamp(56px,9vw,120px)) var(--gutter) var(--s-xl);display:grid;gap:var(--s-md)}
.lg-intro{max-width:32em;font-size:clamp(1.1875rem,1.5vw,1.375rem);line-height:1.5}
.lg-updated{font-size:.9375rem;opacity:.75}
.lg-note{max-width:40em;padding:14px 18px;border-radius:10px;background:var(--blush-soft);font-size:1.0625rem;line-height:1.5}
.lg-note b{color:var(--rose-ink)}
.lg-short{background:var(--blush) url("../img/paper-blush.webp") 0 0/380px 380px;padding:clamp(56px,8vw,96px) var(--gutter)}
.lg-short-in{max-width:var(--wide);margin:0 auto;display:grid;gap:var(--s-lg)}
.lg-short .star-list{--lit:var(--rose-ink);max-width:40em;margin:0}
.lg-short .star-list b{font:400 clamp(1.375rem,2vw,1.75rem)/1.1 var(--display);letter-spacing:-.05em}
.lg-h2{margin:0;font:400 clamp(1.875rem,3vw,2.625rem)/1.05 var(--display);letter-spacing:-.06em;text-wrap:balance}
.lg-h3{margin:var(--s-md) 0 0;font:700 1.1875rem/1.3 var(--body)}
.lg-body{max-width:calc(var(--wide) + 2 * var(--gutter));margin:0 auto;padding:var(--s-2xl) var(--gutter) var(--s-3xl);display:grid;gap:var(--s-xl)}
.lg-toc-title{margin:0 0 6px;font:400 1.75rem/1 var(--script);color:var(--rose-ink);transform:rotate(-2.5deg);transform-origin:left bottom}
.lg-toc ol{list-style:none;margin:0;padding:0;display:grid}
.lg-toc a{display:flex;align-items:center;min-height:44px;color:var(--charcoal);text-decoration:none}
.lg-toc a:hover,.lg-toc a:focus-visible{text-decoration:underline dashed 1px;text-underline-offset:.25em}
.lg-text{display:grid;gap:clamp(56px,7vw,88px);min-width:0}
.lg-text section{display:grid;gap:var(--s-sm);align-content:start;scroll-margin-top:calc(var(--nav) + 24px)}
.lg-text p,.lg-list li{max-width:36em;margin:0}
.lg-text p b{font-weight:700}
.lg-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.lg-list li{position:relative;padding-left:26px}
.lg-list li::before{content:"";position:absolute;left:2px;top:.55em;width:10px;height:10px;background:var(--rose);
  -webkit-mask:url("../img/north-star.svg") center/contain no-repeat;mask:url("../img/north-star.svg") center/contain no-repeat}
.lg-table{width:100%;margin:var(--s-xs) 0;border-collapse:collapse;font-size:1rem;line-height:1.45}
.lg-table th{padding:0 18px 10px 0;border-bottom:1px solid var(--charcoal);text-align:left;vertical-align:bottom;font:700 .9375rem/1.3 var(--body)}
.lg-table td{padding:14px 18px 14px 0;border-bottom:1px solid var(--line);vertical-align:top}
.lg-table :is(th,td):last-child{padding-right:0}
.lg-table td:first-child{font-weight:700}
.lg-table code{font:600 .875em/1 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;opacity:.85}
@media (min-width:700px){.lg-table-2 th:first-child{width:32%}.lg-table-3 th:first-child{width:24%}.lg-table-3 th:last-child{width:17%}}
/* on a wide screen the contents stay beside the text as she reads */
@media (min-width:1000px){
  .lg-short-in,.lg-body{grid-template-columns:220px minmax(0,1fr);column-gap:clamp(48px,6vw,112px);align-items:start}
  .lg-short .lg-h2{padding-top:4px}
  .lg-toc{position:sticky;top:calc(var(--nav) + 32px)}
  .lg-text{max-width:48em}
}
@media (max-width:999px){
  .lg-toc ol{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));column-gap:16px}
  .lg-toc{padding-bottom:var(--s-lg);border-bottom:1px solid var(--line)}
}
/* on a phone each row of a table is a small block of its own, each part labelled */
@media (max-width:699px){
  .lg-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .lg-table,.lg-table tbody,.lg-table tr,.lg-table td{display:block}
  .lg-table tr{padding:16px 0;border-bottom:1px solid var(--line)}
  .lg-table tr:first-child{border-top:1px solid var(--charcoal)}
  .lg-table td{padding:2px 0 8px;border:0}
  .lg-table td:last-child{padding-bottom:0}
  .lg-table td:not(:first-child)::before{content:attr(data-label);display:block;margin-bottom:2px;font:700 .8125rem/1.3 var(--body);opacity:.7}
  .lg-table code{white-space:normal}
}

/* ---------- the page that isn't there (404) ----------
   Her North Star over a wrong turn, and the way back, in the same quiet line as the opening's */
.page-lost main{background:var(--cream) url("../img/paper-cream.webp") 0 0/512px 512px}
.lost{min-height:calc(100svh - 40px);display:grid;align-content:center;justify-items:center;gap:var(--s-md);padding:calc(var(--nav) + var(--s-xl)) var(--gutter) var(--s-2xl);text-align:center}
.lost-star{width:30px;height:30px;margin-bottom:var(--s-sm);background:var(--rose);animation:north 6.5s ease-in-out 1.5s infinite;
  -webkit-mask:url("../img/north-star.svg") center/contain no-repeat;mask:url("../img/north-star.svg") center/contain no-repeat}
.lost .lead-in{justify-self:center;margin-left:0}
.lost-text{max-width:24em;margin:0 0 var(--s-sm);font-size:clamp(1.125rem,1.4vw,1.3125rem);text-wrap:balance}
.lost-ways{margin-top:var(--s-sm);flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){.lost-star{animation:none}}