@font-face{font-family:'TJSign';src:url('/fonts/tjsign.woff2') format('woff2');font-weight:400 700;font-display:swap}
  :root{--cream:#F2EBDE;--tide:#403528;--ink:#0d0d0c;--amber:#E3A833;--gold-muted:#B79A63;--lilac:#E2DCE0;--ease:cubic-bezier(.22,.61,.36,1)}
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:'Fraunces',Georgia,serif;background:var(--ink);color:var(--cream);overflow:hidden}

  .sleeve{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden}
  .face{position:absolute;inset:0;width:100%;height:100%;
    transition:transform 1.05s var(--ease);will-change:transform}
  .front{transform:translateX(0)}
  .back{transform:translateX(100%)}
  .sleeve.flipped .front{transform:translateX(-100%)}
  .sleeve.flipped .back{transform:translateX(0)}

  /* FRONT */
  .hero{position:relative;height:100%;width:100%;overflow:hidden;display:flex;flex-direction:column}
  .hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%}
  .hero__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,13,12,.32) 0%,rgba(13,13,12,0) 22%,rgba(13,13,12,0) 50%,rgba(13,13,12,.5) 100%)}
  nav.front-nav{position:relative;z-index:3;display:flex;justify-content:center;flex-wrap:wrap;
    gap:clamp(18px,3.4vw,46px);padding:clamp(22px,3.6vh,40px) 6vw 0}
  nav.front-nav a{color:var(--cream);text-decoration:none;font-weight:300;letter-spacing:.04em;
    font-size:clamp(15px,1.5vw,18px);opacity:.82;transition:opacity .5s var(--ease);
    text-shadow:0 1px 14px rgba(13,13,12,.45);position:relative;padding-bottom:3px}
  nav.front-nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
    background:var(--cream);transform:scaleX(0);transform-origin:center;
    transition:transform .55s var(--ease);opacity:.7}
  nav.front-nav a:hover{opacity:1}
  nav.front-nav a:hover::after{transform:scaleX(0)}
  .inner{position:relative;z-index:2;margin:auto 0 13vh auto;padding:0 clamp(20px,5vw,48px);
    display:flex;align-items:center;gap:clamp(10px,1vw,15px);width:auto;max-width:90vw}
  @supports(height:100dvh){.inner{margin-bottom:11dvh}}
  .lockup-logo img{display:block;width:min(118px,22vw);filter:drop-shadow(0 2px 24px rgba(13,13,12,.4))}
  .divider{width:1px;align-self:stretch;min-height:64px;
    background:linear-gradient(180deg,rgba(242,235,222,0),rgba(242,235,222,.55),rgba(242,235,222,0))}
  .copy{font-weight:300;font-style:italic;line-height:1.32;letter-spacing:.005em;text-wrap:balance;
    font-size:clamp(17px,1.9vw,24px);max-width:18ch;color:var(--cream);opacity:.94;
    text-shadow:0 1px 18px rgba(13,13,12,.5);text-align:left}
  .base{position:absolute;left:0;right:0;bottom:0;z-index:3;
    display:flex;justify-content:space-between;align-items:center;
    padding:0 clamp(20px,5vw,48px) clamp(16px,3vh,26px);
    font-weight:300;font-size:13px;letter-spacing:.05em;
    color:var(--cream);opacity:0;animation:fade 1.4s var(--ease) 1.5s forwards}
  .base .c{opacity:.55;text-shadow:0 1px 12px rgba(13,13,12,.6)}
  .base a{color:var(--cream);text-decoration:none;opacity:.6;letter-spacing:.05em;
    text-shadow:0 1px 12px rgba(13,13,12,.6);transition:opacity .5s var(--ease)}
  .base a:hover{opacity:1}

  /* the split footer: left = copyright + "the finer details"; right = "in a
     crisis" + faq. "in a crisis" stays a touch more present (never buried), and
     all footer links sit on the muted footer style. on narrow screens the two
     groups wrap and stack cleanly with a small gap, so nothing collides and
     every link stays easily tappable. */
  .crisis-link{color:var(--cream);text-decoration:none;opacity:.6;
    transition:opacity .5s var(--ease)}
  .crisis-link:hover{opacity:1}
  .crisis-link--strong{opacity:.92}
  .crisis-link--strong:hover{opacity:1}
  .base,.credits,.lining__foot,.event-foot{flex-wrap:wrap;gap:6px 16px}
  @media (max-width:560px){
    .base,.credits,.lining__foot,.event-foot{
      justify-content:center;text-align:center;gap:7px 14px;line-height:1.5}
    .base .c,.credits .c,.lining__foot .c,.event-foot .c{width:auto}
    .foot-right{order:-1}  /* keep "in a crisis · faq" easy to reach near the top of the stack */
  }

  /* flip control; front: center-right vertical edge */
  .flip{position:absolute;z-index:6;background:none;border:none;cursor:pointer;color:var(--cream);
    display:flex;align-items:center;gap:9px;font-family:inherit;font-weight:300;
    font-style:italic;font-size:14px;letter-spacing:.04em;
    text-shadow:0 1px 12px rgba(13,13,12,.6);transition:opacity .5s var(--ease)}
  .flip:hover{opacity:1 !important}
  .flip svg{width:30px;height:14px;overflow:visible}
  .flip svg path,.flip svg line{stroke:var(--cream);stroke-width:1;fill:none;
    stroke-linecap:round;stroke-linejoin:round}
  .flip .arrowhead{transition:transform .5s var(--ease)}
  .flip:hover .arrowhead{transform:translateX(4px)}
  .flip.to-back{right:clamp(20px,3vw,40px);top:50%;transform:translateY(-50%);
    opacity:0;animation:fade 1.4s var(--ease) 2.0s forwards}
  .flip.to-front{top:50%;bottom:auto;left:clamp(24px,3vw,46px);transform:translateY(-50%);opacity:.7;color:var(--cream)}
  .flip.to-front svg{transform:scaleX(-1)}
  .flip.to-front svg path,.flip.to-front svg line{stroke:var(--cream)}
  .flip.to-front .arrowhead{transition:transform .5s var(--ease)}
  .flip.to-front:hover .arrowhead{transform:translateX(-4px)}

  /* BACK */
  .back{position:relative;color:var(--cream);overflow-y:auto}
  .back__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;z-index:0}
  .back__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,20,18,.52),rgba(20,20,18,.34) 40%,rgba(20,20,18,.62));z-index:1}
  .back__inner{position:relative;z-index:2;min-height:100%;width:100%}

  .menupanel{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
    z-index:5;width:min(96vw,clamp(720px,58vw,1280px));
    display:flex;flex-direction:column;justify-content:center;
    gap:clamp(14px,2.2vh,28px);
    padding:clamp(28px,4.5vh,66px) clamp(44px,4vw,78px) clamp(54px,7.5vh,92px);overflow:visible;
    background:linear-gradient(90deg,rgba(22,22,20,.62),rgba(22,22,20,.78) 30%,rgba(22,22,20,.78) 70%,rgba(22,22,20,.4));
    box-shadow:0 0 80px 30px rgba(22,22,20,.4)}

  /* back-cover header: wordmark · divider · greeting, centred as a group */
  .backhead{display:flex;align-items:center;justify-content:center;gap:clamp(14px,1.4vw,22px);margin-bottom:clamp(18px,3.4vh,40px)}
  .backhead img{display:block;width:min(150px,20vw);filter:none}
  .backhead .divider{width:1px;align-self:stretch;min-height:46px;
    background:linear-gradient(180deg,rgba(242,235,222,0),rgba(242,235,222,.55),rgba(242,235,222,0))}
  .backhead .copy{font-weight:300;font-style:italic;line-height:1.3;letter-spacing:.005em;
    font-size:clamp(16px,1.7vw,22px);max-width:20ch;opacity:.92;color:var(--cream)}

  .tracks{display:flex;flex-direction:column;width:100%;max-width:760px;margin:0 auto;align-items:stretch}
  /* number+header stay LEFT-aligned; the dot divider lines up with the header
     divider (between the wordmark and the greeting), so a single quiet spine
     runs down the page. The header divider sits a touch left of centre, so the
     left column is ~45% (measured to match it across widths), not a symmetric
     half. Description follows just right of the dot. */
  .track{display:grid;width:100%;align-items:center;
    grid-template-columns:45% auto 1fr;
    column-gap:0;
    padding:clamp(16px,1.9vh,26px) 0;border-bottom:1px solid rgba(242,235,222,.16);
    text-decoration:none;color:var(--cream);
    transition:padding-left .5s var(--ease),background .5s var(--ease)}
  .track:first-child{border-top:1px solid rgba(242,235,222,.16)}
  .track:hover{padding-left:10px;background:rgba(242,235,222,.05)}
  /* left cell: number + header, LEFT-aligned so every name (and number) starts
     at the same x; lined up with where the longest name "gathering" begins.
     The shared left start is set so gathering still ends ~30px from the dot;
     shorter names then sit further from the divider, which is expected. */
  .thead{grid-column:1;justify-self:start;display:flex;align-items:center;
    gap:clamp(22px,2.2vw,38px);min-width:0;padding-left:clamp(92px,7.1vw,124px)}
  /* quiet track-listing numbers; the record/album whisper; words lead */
  .tnum{font-feature-settings:"tnum" 1;font-weight:300;font-size:clamp(11px,0.95vw,13px);
    letter-spacing:.14em;opacity:.4;color:var(--cream);
    align-self:center;transform:translateY(1px)}
  .track .name{font-size:clamp(22px,2.2vw,30px);font-weight:300;letter-spacing:.01em;white-space:nowrap}
  /* the divider; a small circle, sitting on the page's centre line */
  .tdiv{grid-column:2;width:5px;height:5px;border-radius:50%;background:var(--cream);opacity:.34;
    justify-self:center;align-self:center}
  .track:hover .tdiv{opacity:.6;background:var(--amber)}
  /* description: just right of the centred divider */
  .track .tag{grid-column:3;justify-self:start;font-style:italic;font-weight:300;opacity:.66;color:var(--cream);
    font-size:clamp(16px,1.5vw,19px);line-height:1.5;min-width:0;text-wrap:balance;
    padding-left:clamp(20px,2vw,30px)}

  .signoff{margin-top:clamp(18px,2.6vh,32px);margin-bottom:clamp(14px,2vh,28px);display:flex;flex-direction:column;gap:clamp(10px,1.6vh,18px)}
  .signoff .guide{text-align:center;font-style:italic;font-weight:300;opacity:.82;font-size:clamp(18px,1.5vw,24px);letter-spacing:.01em}
  .signoff .sig{align-self:flex-end;margin-right:clamp(20px,4vw,90px);font-family:'TJSign',cursive;font-weight:700;color:#E3A833;opacity:.95;line-height:.92;transform:rotate(-7deg);transform-origin:right center}
  .signoff .sig .l1{display:block;text-align:right;color:#E3A833;font-size:clamp(20px,1.5vw,28px)}
  .signoff .sig .l2{display:block;text-align:right;color:#E3A833;font-size:clamp(32px,2.6vw,48px);margin-top:6px}
  /* ---------- polaroid strip (back cover) ---------- */
  /* Six photos whose front words read "let love poetry nature guide us".
     The strip is a NON-WRAPPING, fixed-order flex row so the sentence can
     never reflow or reorder, at any screen size. They sit a little apart now
     (gentle overlap, not a tight stack) so every photo and word is legible. */
  .signoff--cover{position:relative}
  .signoff--cover .polaroids{position:relative;display:flex;flex-wrap:nowrap;
    align-items:flex-end;justify-content:center;z-index:4;pointer-events:none;
    margin-top:clamp(20px,3vh,40px)}
  .polaroid{pointer-events:auto;position:relative;flex:0 0 auto;margin-right:clamp(4px,0.8vw,12px);
    padding:0;border:none;background:none;
    cursor:pointer;-webkit-tap-highlight-color:transparent;
    transform:rotate(var(--r,0deg)) translateY(0);
    transition:transform .65s var(--ease),filter .65s var(--ease);
    filter:drop-shadow(0 6px 14px rgba(13,13,12,.5))}
  .polaroid:last-child{margin-right:0}
  .polaroid:hover,.polaroid:focus-visible{transform:rotate(0deg) translateY(-14px);z-index:9;
    filter:drop-shadow(0 16px 26px rgba(13,13,12,.6));outline:none}
  .polaroid:focus-visible .polaroid__front{box-shadow:0 0 0 2px var(--amber),0 8px 18px rgba(13,13,12,.5)}
  .polaroid__inner{display:block;width:clamp(74px,7vw,108px)}
  .polaroid__face{display:flex;flex-direction:column;background:var(--cream);
    padding:7px 7px 0;border-radius:2px;box-shadow:0 2px 8px rgba(13,13,12,.4)}
  .polaroid__photo{display:block;width:100%;aspect-ratio:1/1;
    background:var(--ph,#403528);background-size:cover;background-position:center;border-radius:1px}
  .polaroid__photo img{width:100%;height:100%;object-fit:cover;display:block;border-radius:1px}
  /* front word: the handwritten amber hand of the signature, spelling the sentence */
  .polaroid__caption{font-family:'TJSign',cursive;color:var(--amber);opacity:.95;
    font-size:clamp(15px,1.5vw,20px);text-align:center;padding:6px 2px 9px;line-height:1;white-space:nowrap}
  /* strip shows fronts only; the back face is for the enlarged/flip view */
  .polaroids .polaroid__back{display:none}

  /* ---------- enlarged overlay + flip ---------- */
  .polaroid-overlay{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
    background:rgba(13,13,12,0);backdrop-filter:blur(0);opacity:0;visibility:hidden;
    transition:opacity .55s var(--ease),background .55s var(--ease),backdrop-filter .55s var(--ease);
    cursor:zoom-out}
  .polaroid-overlay.is-open{opacity:1;visibility:visible;background:rgba(13,13,12,.74);backdrop-filter:blur(3px)}
  .polaroid-overlay .big{width:min(74vw,330px);cursor:pointer;
    transform:scale(.9) translateY(8px);transition:transform .55s var(--ease);
    transform-style:preserve-3d;position:relative}
  .polaroid-overlay.is-open .big{transform:scale(1) translateY(0)}
  .polaroid-overlay.is-flipped .big{transform:scale(1) rotateY(180deg)}
  .big .polaroid__face{position:relative;backface-visibility:hidden;-webkit-backface-visibility:hidden;
    padding:14px 14px 0;border-radius:3px;box-shadow:0 26px 60px rgba(13,13,12,.6)}
  .big .polaroid__front{display:flex;flex-direction:column}
  .big .polaroid__back{position:absolute;inset:0;transform:rotateY(180deg);
    display:flex;align-items:center;justify-content:center;text-align:center;
    padding:18px;border-radius:3px}
  .big .polaroid__photo{aspect-ratio:1/1}
  .big .polaroid__caption{font-family:'TJSign',cursive;color:var(--ink);opacity:.8;
    font-size:clamp(18px,2vw,24px);padding:12px 4px 16px;text-align:center}
  .big .polaroid__note{font-family:'TJSign',cursive;color:var(--amber);
    font-size:clamp(20px,2.4vw,30px);line-height:1.5;transform:rotate(-3deg)}
  .big .polaroid__back{flex-direction:column;gap:clamp(16px,3vh,28px)}
  .polaroid__link{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;
    color:var(--cream);opacity:.6;font-size:clamp(13px,1.3vw,15px);text-decoration:none;
    border-bottom:1px solid rgba(242,235,222,.3);padding-bottom:1px;transition:opacity .4s var(--ease)}
  .polaroid__link:hover{opacity:.95}
  .big .flip-hint{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);
    font-family:'TJSign',cursive;color:var(--cream);opacity:.6;font-size:15px;white-space:nowrap;
    transition:opacity .4s var(--ease)}
  .polaroid-overlay.is-flipped .flip-hint{opacity:0}
  @media(prefers-reduced-motion:reduce){
    .polaroid,.polaroid-overlay,.polaroid-overlay .big{transition:none}
  }
  .credits{position:absolute;left:0;right:0;bottom:0;z-index:6;
    display:flex;justify-content:space-between;align-items:center;
    padding:0 clamp(20px,5vw,48px) clamp(16px,3vh,26px);
    font-weight:300;font-size:13px;letter-spacing:.05em;color:var(--cream)}
  .credits .c{opacity:.55;text-shadow:0 1px 12px rgba(13,13,12,.6)}
  .credits a{color:var(--cream);text-decoration:none;opacity:.6;letter-spacing:.05em;
    text-shadow:0 1px 12px rgba(13,13,12,.6);transition:opacity .5s var(--ease)}
  .credits a:hover{opacity:1}



  /* amber hand-drawn circle on hover around menu items */
  .front-nav a{position:relative;overflow:visible;display:inline-block}
  .track .name{position:relative;display:inline-block;overflow:visible}
  .hovercircle{position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%) rotate(-4deg);
    pointer-events:none;overflow:visible;opacity:0}
  .front-nav a .hovercircle{width:calc(100% + 34px);height:42px}
  .track .name .hovercircle{width:calc(100% + 40px);height:54px}
  .hovercircle path{fill:none;stroke:#E3A833 !important;stroke-width:2.4;stroke-linecap:round;
    stroke-dasharray:560;stroke-dashoffset:560;transition:stroke-dashoffset .7s var(--ease)}
  .front-nav a:hover .hovercircle,.track:hover .name .hovercircle{opacity:1}
  .front-nav a:hover .hovercircle path,.track:hover .name .hovercircle path{stroke-dashoffset:0}
  @media(prefers-reduced-motion:reduce){.hovercircle path{transition:none}}

  /* hand-drawn biro circle around the flip prompts */
  .flip{overflow:visible;font-family:'TJSign',cursive;font-style:normal;font-size:clamp(17px,1.7vw,21px);letter-spacing:.01em}
  .flip .label{position:relative;z-index:1}
  .flip .circle{position:absolute;left:50%;top:50%;width:150%;height:200%;
    transform:translate(-50%,-52%) rotate(-4deg);pointer-events:none;overflow:visible;z-index:0}
  .flip .circle path{fill:none;stroke:#E3A833 !important;stroke-width:2.4;stroke-linecap:round;
    stroke-dasharray:560;stroke-dashoffset:560;
    animation:scribble 4.6s var(--ease) infinite}
  @keyframes scribble{
    0%{stroke-dashoffset:560;opacity:0}
    10%{opacity:.95}
    42%{stroke-dashoffset:0;opacity:.95}
    74%{stroke-dashoffset:0;opacity:.95}
    92%{stroke-dashoffset:0;opacity:0}
    100%{stroke-dashoffset:560;opacity:0}}
  .flip:hover .circle path{opacity:1;animation-play-state:paused;stroke-dashoffset:0}
  @media(prefers-reduced-motion:reduce){.flip .circle path{animation:none;stroke-dashoffset:0;opacity:.95}}
  .flip.to-front{align-items:center}
  .flip.to-back .circle{top:50%;left:46%;width:140%;height:190%;transform:translate(-50%,-52%) rotate(-4deg)}

  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes fade{from{opacity:0}to{opacity:.82}}
  .rise{opacity:0;animation:rise 1.5s var(--ease) forwards}
  nav.front-nav a{opacity:0;animation:fade 1.4s var(--ease) forwards}
  nav.front-nav a:nth-child(1){animation-delay:.9s}nav.front-nav a:nth-child(2){animation-delay:1.0s}
  nav.front-nav a:nth-child(3){animation-delay:1.1s}nav.front-nav a:nth-child(4){animation-delay:1.2s}
  nav.front-nav a:nth-child(5){animation-delay:1.3s}
  .d1{animation-delay:.25s}.d2{animation-delay:.7s}
  @media(prefers-reduced-motion:reduce){.rise,nav.front-nav a,.flip.to-back,.base{animation:none;opacity:1}
    nav.front-nav a{opacity:.82}.flip.to-back{opacity:.55}.face{transition:none}}

  @media (max-height:760px){
    .backhead img{width:min(132px,16vw)}
    .backhead .copy{font-size:clamp(16px,1.4vw,20px)}
    .track{padding:clamp(9px,1.3vh,16px) 0}
    .track .name{font-size:clamp(22px,1.9vw,30px)}
    .track .tag{font-size:clamp(14px,1.2vw,17px)}
    .signoff{margin-top:clamp(12px,2vh,22px)}
    .signoff .sig .l1{font-size:clamp(16px,1.5vw,24px)}
    .signoff .sig .l2{font-size:clamp(26px,2.6vw,40px)}
  }

  /* ---- mobile / narrow ---- */
  @media (max-width:560px){
    /* front: drop the top nav; the biro "turn me over" moves to where the nav sat; top-right */
    nav.front-nav{display:none}
    .flip.to-back{right:30px;left:auto;top:clamp(24px,4.4vh,40px);bottom:auto;
      transform:none;font-size:clamp(18px,5vw,22px);opacity:0;
      animation:fade 1.4s var(--ease) 1.0s forwards}
    .flip.to-back .circle{width:135%;height:185%}
    /* lift the lockup so it doesn't crowd the centred prompt */
    .inner{margin-bottom:18vh}
    /* back: let the panel fit the screen instead of a 720px floor */
    .back{overflow-y:auto}
    .menupanel{position:relative;top:auto;bottom:auto;left:auto;transform:none;
      width:100%;min-height:100%;justify-content:flex-start;
      gap:clamp(12px,2vh,20px);
      padding:clamp(64px,9vh,88px) 24px clamp(72px,10vh,96px);
      box-shadow:none;
      background:linear-gradient(90deg,rgba(22,22,20,.74),rgba(22,22,20,.74))}
    .backhead{flex-direction:column;gap:14px;margin:0 auto clamp(22px,4vh,34px);text-align:center;align-items:center}
    .backhead .divider{width:54px;height:1px;min-height:0;align-self:center;
      background:linear-gradient(90deg,rgba(242,235,222,0),rgba(242,235,222,.55),rgba(242,235,222,0))}
    .backhead img{width:128px}
    .backhead .copy{text-align:center;max-width:22ch;font-size:18px}
    /* tracks on mobile: number + name on the top row, description beneath.
       the divider is a desktop alignment device, so hide it here. */
    .tracks{align-self:center;width:100%;max-width:340px;margin:0 auto}
    .track{display:grid;grid-template-columns:auto 1fr;align-items:baseline;
      column-gap:clamp(12px,3.5vw,18px);row-gap:6px;text-align:left;padding:16px 0}
    .track:hover{padding-left:0}
    .thead{flex:0 0 auto;padding-left:0;justify-self:start}
    .track .name{font-size:clamp(20px,5.6vw,25px);line-height:1.05}
    .tdiv{display:none}
    .track .tag{grid-column:2;min-width:0;font-size:clamp(12.5px,3.6vw,14.5px);opacity:.72;
      line-height:1.45;text-wrap:balance}
    /* let the descriptions wrap naturally to the narrow column instead of the
       desktop's fixed two-line break */
    .track .tag br{display:none}
    /* signature back on-screen, centred under the guide line */
    .signoff{margin-top:clamp(20px,4vh,32px);gap:clamp(26px,5vh,42px)}
    .signoff .sig{align-self:center;margin-right:0;transform:rotate(-5deg);text-align:center}
    .signoff .sig .l1,.signoff .sig .l2{text-align:center}
    .signoff .sig .l2{font-size:clamp(40px,12vw,56px)}
    /* polaroids: stay a single, fixed-order, NON-WRAPPING row so the sentence
       "let love poetry nature guide us" never breaks. Sized to fit six across a
       phone, with a slight overlap; the words remain readable. */
    .signoff--cover{padding-bottom:0}
    .signoff--cover .polaroids{order:1;position:static;left:auto;bottom:auto;
      align-self:center;justify-content:center;flex-wrap:nowrap;
      gap:0;margin:clamp(18px,3.5vh,30px) 0 0}
    .polaroid{margin-right:clamp(2px,1vw,6px)}
    .polaroid__inner{width:clamp(46px,14.5vw,62px)}
    .polaroid__caption{font-size:clamp(12px,3.7vw,15px);padding:4px 1px 6px}
    .polaroid__face{padding:4px 4px 0}
    /* back control: tuck top-left, clear of the tracks */
    .flip.to-front{top:clamp(20px,3.4vh,30px);bottom:auto;left:22px;transform:none}
    .credits{padding:0 20px clamp(14px,3vh,22px);font-size:12px}
  }

  /* ============ INNER SLEEVE; held lining (slides up from inside) ============ */
  .lining{position:absolute;inset:0;z-index:8;background-color:var(--p3,#211c14);color:var(--cream);
    transform:translateY(100%);transition:transform 1.05s var(--ease);will-change:transform;
    overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
  .sleeve.lining-open .front{transform:translateY(-100%)}
  .sleeve.lining-open .back{transform:translateY(-100%)}
  .sleeve.lining-open .lining.is-open{transform:translateY(0)}
  /* while open, freeze the underlying horizontal-flip transitions so they don't fight the vertical slide */
  .sleeve.lining-open .front,.sleeve.lining-open .back{transition:transform 1.05s var(--ease)}

  /* the background is a sticky layer, exactly one viewport tall, sized to the
     viewport (never to the content). because its height is fixed in viewport
     units, swapping which list shows can't make the image grow or shrink; and
     because it is sticky it follows the scroll, so it always covers the visible
     area however long the lining is. the negative margin (also in viewport
     units) keeps it from taking up layout space, so the inner panel centres and
     scrolls exactly as before. */
  .lining__bg{display:block;position:sticky;top:0;z-index:0;pointer-events:none;
    width:100%;height:100vh;margin-bottom:-100vh;
    background-image:
      linear-gradient(180deg,rgba(20,20,18,.52),rgba(20,20,18,.34) 40%,rgba(20,20,18,.62)),
      var(--img,linear-gradient(transparent,transparent)),
      radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--p1,#4f4a3e) 60%, transparent) 0%, transparent 60%),
      linear-gradient(180deg, var(--p1,#4f4a3e) 0%, var(--p2,#3a352a) 55%, var(--p3,#211c14) 100%);
    background-size:cover, cover, cover, cover;
    background-position:center, center 30%, center, center;
    background-repeat:no-repeat;background-attachment:scroll}
  .lining__veil{display:none}
  /* per-page tones, drawn from the coastal palette so each chapter feels its own
     but they all belong to the same family as the cover (no more foreign green) */
  .lining[data-lining="about"]   {--p1:#4f4a3e;--p2:#3a352a;--p3:#211c14;
    --img:url('/images/coast-about.webp')}  /* olive→espresso; coming home; boardwalk path */
  .lining[data-lining="poetry"]  {--p1:#595547;--p2:#403528;--p3:#241d14;
    --img:url('/images/coast-poetry.webp')}  /* olive into espresso; warm earth; surf-edge coastline */
  .lining[data-lining="practice"] {--p1:#5a6468;--p2:#3f474a;--p3:#222729;
    --img:url('/images/coast-practice.webp')}  /* sage→slate; held (#878C89); foggy hills */
  .lining[data-lining="mentor"] {--p1:#7a848a;--p2:#4e565b;--p3:#272d30;
    --img:url('/images/coast-mentor-snow.webp')}  /* two on a snowy shore; cool pale winter coast */
  .lining[data-lining="gather"]  {--p1:#7a807c;--p2:#535854;--p3:#2c302d;
    --img:url('/images/coast-gather.webp')}  /* warm stone grey, sociable; cliff group */
  /* the support ("in a crisis") lining lives in the same coastal-dusk world, but
     leans a touch warmer and clearer, because legibility matters most here. it
     reuses the calm about coast (the coming-home boardwalk). */
  .lining[data-lining="support"] {--p1:#4f4a3e;--p2:#39342a;--p3:#1f1a13;
    --img:url('/images/coast-about.webp')}
  /* the faq lining; the same calm coastal-dusk world */
  .lining[data-lining="faq"] {--p1:#595547;--p2:#403528;--p3:#241d14;
    --img:url('/images/coast-poetry.webp')}
  /* the 404 lining; coastal dusk, the tide-took-it page */
  .lining[data-lining="notfound"] {--p1:#5a6468;--p2:#3f474a;--p3:#222729;
    --img:url('/images/coast-practice.webp')}
  /* the legal linings (privacy, terms); the same calm world, kept plain inside */
  .lining[data-lining="privacy"],
  .lining[data-lining="terms"] {--p1:#4f4a3e;--p2:#39342a;--p3:#1f1a13;
    --img:url('/images/coast-about.webp')}
  /* the finer-details index lining; the same quiet coastal world */
  .lining[data-lining="finer"] {--p1:#595547;--p2:#403528;--p3:#241d14;
    --img:url('/images/coast-gather.webp')}
  .lining__inner{position:relative;z-index:5;min-height:100%;
    width:min(96vw,clamp(720px,58vw,1280px));margin:0 auto;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:clamp(64px,9vh,104px) clamp(44px,4vw,78px) clamp(64px,8vh,90px);
    background:linear-gradient(90deg,rgba(22,22,20,.62),rgba(22,22,20,.78) 30%,rgba(22,22,20,.78) 70%,rgba(22,22,20,.4));
    box-shadow:0 0 80px 30px rgba(22,22,20,.4)}

  /* the lining footer sits at the screen edges, exactly like the cover/back
     footer (.base): far left and far right. it is a direct child of .lining
     (not the centered .lining__inner), pinned to the lining edges with the same
     edge padding as .base. */
  /* the lining footer sits at the screen edges, exactly like the cover/back
     footer (.base): far left and far right. NOTE: the lining is the scroll
     container AND it carries a transform (the slide) + will-change, which makes
     it a containing block; so position:fixed here anchors to the lining's
     scrollable content (riding to the content bottom) rather than the viewport.
     position:sticky pins it to the bottom of the lining's visible area instead,
     staying put while the lining scrolls. it is the last child of .lining. */
  .lining__foot{position:sticky;bottom:0;left:0;right:0;z-index:6;
    display:flex;justify-content:space-between;align-items:center;
    padding:clamp(16px,3vh,26px) clamp(20px,5vw,48px);
    width:auto;margin-top:auto;
    font-weight:300;font-size:13px;letter-spacing:.05em;color:var(--cream)}
  .lining__foot .c{opacity:.55;text-shadow:0 1px 12px rgba(13,13,12,.6)}
  .lining__foot a{color:var(--cream);text-decoration:none;opacity:.6;
    letter-spacing:.05em;text-shadow:0 1px 12px rgba(13,13,12,.6);transition:opacity .5s var(--ease)}
  .lining__foot a:hover{opacity:1}

  /* close prompt; top, mirrors "turn me over": a down arrow + biro circle */
  .lining .close{position:absolute;z-index:9;top:clamp(20px,3.4vh,40px);right:clamp(20px,4vw,56px);
    background:none;border:none;cursor:pointer;color:var(--cream);
    display:flex;flex-direction:column;align-items:center;gap:6px;
    font-family:'TJSign',cursive;font-weight:700;font-size:clamp(16px,1.6vw,20px);letter-spacing:.01em;
    opacity:.78;transition:opacity .5s var(--ease);overflow:visible}
  .lining .close:hover{opacity:1}
  .lining .close .label{position:relative;z-index:1}
  .lining .close svg.arrow{width:14px;height:26px;overflow:visible}
  .lining .close svg.arrow line,.lining .close svg.arrow path{stroke:var(--cream);stroke-width:1;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .lining .close .arrowhead{transition:transform .5s var(--ease)}
  .lining .close:hover .arrowhead{transform:translateY(-4px)}
  .lining .close .circle{position:absolute;left:50%;top:34%;width:150%;height:150%;
    transform:translate(-50%,-50%) rotate(-4deg);pointer-events:none;overflow:visible;z-index:0}
  .lining .close .circle path{fill:none;stroke:var(--amber) !important;stroke-width:2.4;stroke-linecap:round;
    stroke-dasharray:560;stroke-dashoffset:560;animation:scribble 4.6s var(--ease) infinite}
  .lining .close:hover .circle path{opacity:1;animation-play-state:paused;stroke-dashoffset:0}

  /* held head: wordmark + rule + line; same grammar as .backhead */
  .heldhead{display:flex;align-items:center;justify-content:center;gap:clamp(14px,1.4vw,22px);
    margin-bottom:clamp(26px,4.4vh,52px);text-align:center}
  .heldhead .word{font-weight:300;line-height:1;font-size:clamp(44px,6.4vw,92px);letter-spacing:.01em}
  .heldhead .rule{width:1px;align-self:stretch;min-height:52px;
    background:linear-gradient(180deg,rgba(242,235,222,0),rgba(242,235,222,.55),rgba(242,235,222,0))}
  .heldhead .line{font-weight:300;font-style:italic;line-height:1.3;letter-spacing:.005em;
    font-size:clamp(16px,1.7vw,22px);max-width:22ch;opacity:.92}

  /* two doors split by the lit seam; same as standalone */
  .doors{display:grid;grid-template-columns:1fr 1px 1fr;align-items:stretch;width:100%;max-width:1040px;margin:0 auto}
  .seam{background:linear-gradient(180deg,rgba(242,235,222,0),rgba(242,235,222,.32) 18%,rgba(242,235,222,.32) 82%,rgba(242,235,222,0))}
  .door{position:relative;display:flex;flex-direction:column;text-decoration:none;color:var(--cream);
    padding:clamp(20px,3.2vh,44px) clamp(20px,3vw,52px);transition:background .55s var(--ease),transform .55s var(--ease)}
  .door:hover{background:rgba(242,235,222,.05);transform:translateY(-3px)}
  .door .kicker{font-style:italic;font-weight:300;opacity:.6;letter-spacing:.14em;text-transform:lowercase;
    font-size:clamp(12px,1vw,14px);margin-bottom:clamp(10px,1.6vh,16px)}
  .door .name{position:relative;display:inline-block;align-self:flex-start;overflow:visible;
    font-weight:300;line-height:1.02;letter-spacing:.01em;font-size:clamp(28px,3.2vw,46px);margin-bottom:clamp(12px,1.8vh,20px)}
  .door .dbody{font-weight:300;font-style:italic;opacity:.74;line-height:1.5;
    font-size:clamp(15px,1.4vw,18px);max-width:30ch;margin-bottom:clamp(16px,2.4vh,26px)}
  .door .enter{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
    font-weight:300;font-style:italic;opacity:.78;font-size:clamp(14px,1.3vw,16px);letter-spacing:.02em;transition:opacity .5s var(--ease)}
  .door:hover .enter{opacity:1}
  .door .enter svg{width:28px;height:13px;overflow:visible}
  .door .enter svg line,.door .enter svg path{stroke:var(--cream);stroke-width:1;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .door .enter .arrowhead{transition:transform .5s var(--ease)}
  .door:hover .enter .arrowhead{transform:translateX(4px)}
  .door .hovercircle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-4deg);
    pointer-events:none;overflow:visible;opacity:0;width:calc(100% + 44px);height:58px}
  .door .hovercircle path{fill:none;stroke:var(--amber) !important;stroke-width:2.4;stroke-linecap:round;
    stroke-dasharray:560;stroke-dashoffset:560;transition:stroke-dashoffset .7s var(--ease)}
  .door:hover .hovercircle{opacity:1}
  .door:hover .hovercircle path{stroke-dashoffset:0}

  .lining .signoff{margin-top:clamp(24px,3.6vh,44px);width:100%;max-width:1040px;display:flex;flex-direction:column;gap:clamp(10px,1.6vh,18px)}
  .lining .signoff .guide{text-align:center;font-style:italic;font-weight:300;opacity:.82;font-size:clamp(18px,1.5vw,24px);letter-spacing:.01em}
  .lining .signoff .sig{align-self:flex-end;margin-right:clamp(20px,4vw,90px);font-family:'TJSign',cursive;font-weight:700;
    color:var(--amber);opacity:.95;line-height:.92;transform:rotate(-7deg);transform-origin:right center}
  .lining .signoff .sig .l1{display:block;text-align:right;font-size:clamp(22px,1.8vw,34px)}
  .lining .signoff .sig .l2{display:block;text-align:right;font-size:clamp(36px,3.2vw,60px);margin-top:6px}

  @media(prefers-reduced-motion:reduce){
    .lining{transition:none}
    .sleeve.lining-open .front,.sleeve.lining-open .back{transition:none}
    .lining .close .circle path{animation:none;stroke-dashoffset:0;opacity:.95}
    .door .hovercircle path{transition:none}
  }
  @media (max-width:560px){
    .lining__inner{width:100%;margin:0;padding:clamp(72px,10vh,96px) 22px clamp(58px,8vh,72px);
      justify-content:flex-start;
      background:linear-gradient(90deg,rgba(22,22,20,.74),rgba(22,22,20,.74));box-shadow:none}
    .heldhead{flex-direction:column;gap:14px;margin-bottom:clamp(22px,4vh,34px)}
    .heldhead .rule{width:54px;height:1px;min-height:0;align-self:center;
      background:linear-gradient(90deg,rgba(242,235,222,0),rgba(242,235,222,.55),rgba(242,235,222,0))}
    .heldhead .word{font-size:clamp(40px,12vw,64px)}
    .heldhead .line{max-width:24ch;font-size:17px}
    .doors{grid-template-columns:1fr;max-width:380px}
    .seam{height:1px;width:60%;justify-self:center;margin:4px 0;
      background:linear-gradient(90deg,rgba(242,235,222,0),rgba(242,235,222,.3),rgba(242,235,222,0))}
    .door{padding:clamp(22px,4vh,34px) 6px;align-items:flex-start}
    .door:hover{transform:none}
    .door .name{font-size:clamp(28px,8vw,38px)}
    .door .dbody{max-width:34ch;font-size:15px}
    .lining .signoff .sig{margin-right:6px}
  }


  /* ============ per-section lining shapes ============ */
  /* shared narrow column for the text-led sections */
  .colwrap{width:100%;max-width:760px;margin:0 auto}

  /* about; a letter */
  .about-prose{font-weight:300;line-height:1.7;letter-spacing:.005em;font-size:clamp(16px,1.55vw,19px);
    opacity:.9;max-width:60ch;margin:0 auto}
  /* the portrait: a warm human anchor near the top; the opening lines wrap
     beside it. kept modest (not a hero shot), with a soft feathered edge and a
     faint warm wash so it reads as part of the dusky coastal world rather than
     a sharp portrait dropped in. */
  .about-portrait{float:left;width:clamp(150px,24%,220px);margin:6px clamp(20px,2.4vw,30px) 14px 0;
    shape-outside:inset(0 round 3px);position:relative}
  .about-portrait img{display:block;width:100%;height:auto;border-radius:3px;
    filter:saturate(.95) contrast(1.01);
    box-shadow:0 8px 30px rgba(13,12,10,.4)}
  /* a faint warm feather at the lower edge only, marrying the photo into the
     dusk without darkening the face */
  .about-portrait::after{content:"";position:absolute;inset:0;border-radius:3px;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(31,26,19,0) 72%,rgba(31,26,19,.22));
    box-shadow:inset 0 0 22px rgba(31,26,19,.18)}
  @media (max-width:640px){
    .about-portrait{float:none;width:min(72%,260px);margin:0 auto clamp(22px,3.5vh,32px)}
  }
  .about-prose p{margin-bottom:clamp(16px,2.2vh,26px);text-wrap:pretty}
  .about-prose p.lead-drop{font-style:italic;font-size:clamp(17px,1.65vw,20px);opacity:.94}
  .about-prose .lead-drop::first-letter{font-size:1.0em}
  /* the soft lineage transition: the four poem icons (feather, leaf, tide, the
     invite-the-darkness candle) in a small, quiet, centred row, in muted gold;
     a delicate constellation marking the turn from "who i became" to "where i
     come from", quietly tying his roots to his poems. silent; the prose carries
     the meaning. not a heading, not a hard divider. */
  .lineage-break{display:flex;align-items:center;justify-content:center;
    margin:clamp(34px,6vh,64px) auto clamp(30px,5vh,52px)}
  .lineage-icons{display:flex;align-items:center;justify-content:center;
    gap:clamp(20px,2.6vw,34px);color:var(--gold-muted);opacity:.62}
  .lineage-icon{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
    height:clamp(17px,1.7vw,21px)}
  .lineage-icon svg{height:100%;width:auto;overflow:visible}
  .lineage-icon--tide{height:clamp(11px,1.1vw,14px)}
  /* the closing block matches body voice (not the italic lead), and the page's
     last "come in" sits a touch warmer */
  .about-prose--close{margin-top:clamp(20px,3vh,32px)}
  .about-prose--close p:first-child{font-style:normal;font-size:clamp(16px,1.55vw,19px);opacity:.9}
  /* the onward invitation links sit inline within the closing "come in" line,
     one warm flowing sentence; quiet amber, in keeping with the rest of the
     prose links. */
  .about-prose--close a{color:var(--amber);text-decoration:none;
    border-bottom:1px solid color-mix(in srgb,var(--amber) 40%,transparent);
    transition:border-color .5s var(--ease),opacity .5s var(--ease)}
  .about-prose--close a:hover{border-bottom-color:var(--amber)}
  /* the onward invitation; a soft warm lead-in that opens into the rest of the
     site, sitting just under "come in". quieter and italic, with the three
     destinations as gentle amber links. */
  .about-onward{margin-top:clamp(14px,2.2vh,22px);font-style:italic;
    font-size:clamp(15px,1.5vw,18px);opacity:.82;line-height:1.7}
  .about-onward a{color:var(--amber);text-decoration:none;font-style:italic;
    border-bottom:1px solid color-mix(in srgb,var(--amber) 38%,transparent);
    transition:border-color .5s var(--ease),opacity .5s var(--ease)}
  .about-onward a:hover{border-bottom-color:var(--amber)}
  /* the festival link, quiet amber, in the prose */
  .about-link{color:var(--amber);text-decoration:none;
    border-bottom:1px solid color-mix(in srgb,var(--amber) 42%,transparent);
    transition:border-color .5s var(--ease),opacity .5s var(--ease)}
  .about-link:hover{border-bottom-color:var(--amber)}

  /* witness; other people's words, set apart as testimony. centred, italic,
     spaced, visually distinct from Tim's first-person prose so they read as
     others' voices, not self-praise. */
  /* "as seen in"; the press validation row, in the same family as the witness
     block: a quiet centred sub-label, then a single tidy row of faint cream
     logos at a consistent height. understated, recognisable on a look; sits as
     calm proof above the warm close. a touch more present than it would have
     been on the cover, but still part of the palette. */
  .press{display:flex;flex-direction:column;align-items:center;text-align:center;
    width:100%;max-width:52ch;margin:clamp(34px,5.5vh,58px) auto 0}
  .press__label{font-style:italic;font-weight:300;opacity:.5;letter-spacing:.14em;
    text-transform:lowercase;font-size:clamp(12px,1.05vw,14px);color:var(--cream);
    margin-bottom:clamp(14px,2.2vh,22px)}
  .press__row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
    gap:clamp(16px,2.4vw,30px);row-gap:clamp(12px,1.8vh,18px)}
  .press__logo{height:clamp(13px,1.35vw,17px);max-height:19px;width:auto;max-width:120px;
    display:block;opacity:.5;filter:drop-shadow(0 1px 6px rgba(13,13,12,.5))}
  /* the squarer marks (ANA, BBC) read large at a shared height, so trim them so
     the row stays visually even */
  .press__logo--ana{height:clamp(17px,1.75vw,23px);max-height:25px;max-width:74px}
  .press__logo--bbc{height:clamp(17px,1.8vw,24px);max-height:26px;max-width:48px}

  .witness{display:flex;flex-direction:column;align-items:center;text-align:center;
    gap:clamp(14px,2.2vh,22px);width:100%;max-width:46ch;margin:clamp(34px,5.5vh,60px) auto;
    padding:clamp(26px,4vh,40px) 0;
    border-top:1px solid rgba(242,235,222,.16);border-bottom:1px solid rgba(242,235,222,.16)}
  .witness__label{font-style:italic;font-weight:300;opacity:.55;letter-spacing:.14em;
    text-transform:lowercase;font-size:clamp(12px,1.05vw,14px);color:var(--cream);
    margin-bottom:clamp(2px,0.8vh,8px)}
  .witness__quote{margin:0;font-style:italic;font-weight:300;line-height:1.4;
    font-size:clamp(18px,1.9vw,24px);opacity:.9;color:var(--cream);text-wrap:balance;
    text-shadow:0 1px 16px rgba(13,12,10,.4)}

  /* a quiet, understated support line for the suicide reference; present but
     never breaking the page's tone */
  .about-support{text-align:center;margin:clamp(26px,4vh,40px) auto 0;max-width:46ch;
    font-weight:300;font-style:italic;opacity:.58;font-size:clamp(13px,1.2vw,15px);
    letter-spacing:.01em;color:var(--cream)}
  .about-support a{color:var(--cream);text-decoration:none;
    border-bottom:1px solid rgba(242,235,222,.32);transition:opacity .5s var(--ease)}
  .about-support a:hover{opacity:.95}

  /* poetry; a quiet list of titles, each a door to the poem */
  .poemlist{display:flex;flex-direction:column;width:100%;max-width:720px;margin:0 auto}
  /* per-poem colour: --pc tints the icon + edge; --pcard / --ptext theme the open card */
  .poem--feather{--pc:#A4B8BF;--pcard:#eef2f3;--ptext:#2c3a3f;--pverse:#3a4c52}  /* dusty blue */
  .poem--leaf   {--pc:#595547;--pcard:#f1f0ea;--ptext:#2f2c22;--pverse:#403b2e}  /* olive */
  .poem--tide   {--pc:#878C89;--pcard:#eef0ef;--ptext:#2d322f;--pverse:#3c413e}  /* sage grey */
  .poem--candle {--pc:#E3A833;--pcard:#f4eee3;--ptext:#3a3322;--pverse:#4a3f29}  /* gold (palette addition) */
  .poem{position:relative;display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--cream);
    padding:clamp(15px,2vh,24px) 0 clamp(15px,2vh,24px) clamp(14px,1.6vw,22px);
    border-bottom:1px solid rgba(242,235,222,.16);
    border-left:3px solid transparent;
    transition:padding-left .5s var(--ease),background .5s var(--ease),border-color .5s var(--ease)}
  .poem:first-child{border-top:1px solid rgba(242,235,222,.16)}
  /* the clear coloured edge band per poem */
  .poem--feather,.poem--leaf,.poem--tide,.poem--candle{border-left-color:var(--pc)}
  .poem:hover{background:rgba(242,235,222,.05)}
  .poem .ptitle{position:relative;display:inline-block;align-self:flex-start;overflow:visible;
    font-weight:300;font-size:clamp(22px,2.3vw,32px);letter-spacing:.01em;line-height:1.1}
  .poem .pbreath{font-style:italic;font-weight:300;opacity:.62;font-size:clamp(15px,1.4vw,18px);line-height:1.45}
  .poem .hovercircle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-4deg);
    pointer-events:none;overflow:visible;opacity:0;width:calc(100% + 40px);height:50px}
  .poem .hovercircle path{fill:none;stroke:var(--amber) !important;stroke-width:2.4;stroke-linecap:round;
    stroke-dasharray:560;stroke-dashoffset:560;transition:stroke-dashoffset .7s var(--ease)}

  /* head is icon (left) + text column */
  .poemhead{display:flex;flex-direction:row;align-items:flex-start;gap:clamp(12px,1.4vw,18px);
    width:100%;background:none;border:none;padding:0;margin:0;cursor:pointer;color:var(--cream);
    text-align:left;font:inherit;-webkit-tap-highlight-color:transparent}
  .phead-text{display:flex;flex-direction:column;gap:6px;min-width:0}
  .picon{flex:0 0 auto;color:var(--pc);width:clamp(26px,2.4vw,34px);display:flex;align-items:center;
    justify-content:center;margin-top:clamp(4px,0.6vh,8px);
    transition:transform .6s var(--ease)}
  .picon svg{width:100%;height:auto;overflow:visible}
  .poemhead:hover .picon{transform:translateY(-2px) rotate(-4deg)}
  .poemhead:focus-visible{outline:none}
  .poemhead:focus-visible .ptitle{outline:2px solid var(--pc);outline-offset:6px;border-radius:3px}
  .poem .ptitle .pen{opacity:.5;font-style:italic;font-size:.62em;letter-spacing:.02em}
  @media (hover:hover){
    .poemhead:hover .hovercircle{opacity:1}
    .poemhead:hover .hovercircle path{stroke-dashoffset:0}
  }
  /* expanding body: smooth grid open; the verse card goes LIGHT with dark text */
  .poembody{display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .7s var(--ease),opacity .6s var(--ease),margin .6s var(--ease);
    opacity:0;overflow:hidden}
  .poembody>*{min-height:0;overflow:hidden}
  .poem.is-open{border-left-color:var(--pc)}
  .poem.is-open .poembody{grid-template-rows:1fr;opacity:1;margin-top:clamp(14px,2vh,22px)}
  .poembody[hidden]{display:grid}
  .verse{background:var(--pcard);color:var(--ptext);border-radius:6px;
    border-top:4px solid var(--pc);
    padding:clamp(22px,3.2vh,40px) clamp(22px,3vw,44px);
    box-shadow:0 16px 40px rgba(13,13,12,.42)}
  .verse p{font-style:italic;font-weight:300;line-height:1.7;color:var(--pverse);opacity:1;
    font-size:clamp(16px,1.5vw,19px);margin:0 0 clamp(14px,1.8vh,20px)}
  .verse p:last-child{margin-bottom:0}
  /* archive row: not expandable; carries an outward arrow and leaves the record */
  .poem--archive{cursor:pointer;border-left-color:transparent}
  .poem--archive .arrowout{width:30px;height:14px;margin-left:12px;vertical-align:middle;overflow:visible}
  .poem--archive .arrowout line,.poem--archive .arrowout .arrowhead{stroke:var(--amber);stroke-width:2;
    fill:none;stroke-linecap:round;stroke-linejoin:round;
    transition:transform .5s var(--ease)}
  .poem--archive:hover .arrowout{transform:translateX(4px)}

  /* gather; experience cards with a season/place meta */
  .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
    gap:clamp(18px,2.4vw,32px);width:100%;max-width:1000px;margin:0 auto}
  .card{position:relative;display:flex;flex-direction:column;text-decoration:none;color:var(--cream);
    border:1px solid rgba(242,235,222,.18);padding:clamp(22px,3vh,34px) clamp(20px,2.4vw,30px);
    transition:background .55s var(--ease),transform .55s var(--ease),border-color .55s var(--ease)}
  .card:hover{background:rgba(242,235,222,.05);transform:translateY(-4px);border-color:rgba(242,235,222,.36)}
  .card .meta{font-style:italic;font-weight:300;opacity:.6;letter-spacing:.1em;text-transform:lowercase;
    font-size:clamp(12px,1vw,13.5px);margin-bottom:clamp(10px,1.6vh,16px)}
  .card .ctitle{position:relative;display:inline-block;align-self:flex-start;overflow:visible;
    font-weight:300;font-size:clamp(24px,2.4vw,34px);line-height:1.05;margin-bottom:clamp(10px,1.6vh,16px)}
  .card .cbody{font-weight:300;font-style:italic;opacity:.74;line-height:1.5;
    font-size:clamp(15px,1.35vw,17.5px);margin-bottom:clamp(14px,2vh,22px)}
  .card .enter{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;margin-top:auto;
    font-weight:300;font-style:italic;opacity:.78;font-size:clamp(14px,1.3vw,16px);transition:opacity .5s var(--ease)}
  .card:hover .enter{opacity:1}
  .card .enter svg{width:28px;height:13px;overflow:visible}
  .card .enter svg line,.card .enter svg path{stroke:var(--cream);stroke-width:1;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .card .enter .arrowhead{transition:transform .5s var(--ease)}
  .card:hover .enter .arrowhead{transform:translateX(4px)}
  .card .hovercircle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-4deg);
    pointer-events:none;overflow:visible;opacity:0;width:calc(100% + 36px);height:52px}
  .card .hovercircle path{fill:none;stroke:var(--amber) !important;stroke-width:2.4;stroke-linecap:round;
    stroke-dasharray:560;stroke-dashoffset:560;transition:stroke-dashoffset .7s var(--ease)}
  .card:hover .hovercircle{opacity:1}
  .card:hover .hovercircle path{stroke-dashoffset:0}

  /* spoken; a media list with format tag + listen */
  .medialist{display:flex;flex-direction:column;width:100%;max-width:760px;margin:0 auto}
  .media{display:flex;align-items:center;gap:clamp(18px,2vw,30px);text-decoration:none;color:var(--cream);
    padding:clamp(16px,2vh,26px) 0;border-bottom:1px solid rgba(242,235,222,.16);
    transition:padding-left .5s var(--ease),background .5s var(--ease)}
  .media:first-child{border-top:1px solid rgba(242,235,222,.16)}
  .media:hover{padding-left:10px;background:rgba(242,235,222,.05)}
  .media .fmt{flex:0 0 auto;width:clamp(92px,11vw,128px);font-style:italic;font-weight:300;opacity:.6;
    letter-spacing:.08em;text-transform:lowercase;font-size:clamp(13px,1.1vw,15px)}
  .media .mmid{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
  .media .mtitle{position:relative;display:inline-block;align-self:flex-start;overflow:visible;
    font-weight:300;font-size:clamp(20px,2.1vw,28px);line-height:1.1}
  .media .msub{font-style:italic;font-weight:300;opacity:.62;font-size:clamp(14px,1.3vw,17px);line-height:1.4}
  .media .listen{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;opacity:.7;
    font-style:italic;font-weight:300;font-size:clamp(13px,1.2vw,15px);transition:opacity .5s var(--ease)}
  .media:hover .listen{opacity:1}
  .media .listen svg{width:22px;height:22px;overflow:visible}
  .media .listen svg *{stroke:var(--cream);stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .media .hovercircle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-4deg);
    pointer-events:none;overflow:visible;opacity:0;width:calc(100% + 36px);height:46px}
  .media .hovercircle path{fill:none;stroke:var(--amber) !important;stroke-width:2.4;stroke-linecap:round;
    stroke-dasharray:560;stroke-dashoffset:560;transition:stroke-dashoffset .7s var(--ease)}
  .media:hover .hovercircle{opacity:1}
  .media:hover .hovercircle path{stroke-dashoffset:0}

  /* a small replaceable-content hint, only visible to you in source */
  @media (max-width:560px){
    .media{gap:12px}.media .fmt{width:auto;flex:0 0 76px;font-size:12px}
    .media .listen span{display:none}
    .about-prose{font-size:16.5px}
  }
  /* men & coaches; single prose block, given room */
  .single{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(16px,2.4vh,26px);width:100%}
  .single .kicker{font-style:italic;font-weight:300;opacity:.6;letter-spacing:.12em;text-transform:lowercase;
    font-size:clamp(13px,1.2vw,16px)}
  .single .prose{font-weight:300;line-height:1.62;opacity:.9;font-size:clamp(18px,1.7vw,23px);max-width:60ch}
  .enter--block{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--cream);
    font-style:italic;font-weight:300;font-size:clamp(15px,1.4vw,18px);opacity:.82;margin-top:clamp(6px,1vh,12px);
    transition:opacity .5s var(--ease),gap .5s var(--ease)}
  .enter--block:hover{opacity:1;gap:16px}
  .enter--block svg{width:30px;height:14px;overflow:visible}
  .enter--block svg line,.enter--block svg path{stroke:var(--cream);stroke-width:1;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .enter--block .arrowhead{transition:transform .5s var(--ease)}
  .enter--block:hover .arrowhead{transform:translateX(4px)}

  /* gather; one chronological list: date stacked over kind on the left, place on the right */
  /* the category control: a single pill track with a sliding amber thumb behind
     the active label; a premium segmented control in the brand palette. */
  .gather-toggle{position:relative;display:inline-flex;align-items:stretch;
    margin:0 auto clamp(30px,4.6vh,50px);
    background:rgba(18,18,16,.42);border:1px solid rgba(242,235,222,.16);
    border-radius:999px;padding:5px;gap:2px;
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    box-shadow:inset 0 1px 0 rgba(242,235,222,.06),0 10px 30px -12px rgba(10,9,7,.6)}
  /* the sliding thumb sits behind the labels; JS sets its width/offset */
  .gt-thumb{position:absolute;top:5px;bottom:5px;left:5px;width:0;
    background:linear-gradient(180deg,#ecb34a,#dca22f);
    border-radius:999px;z-index:0;
    box-shadow:0 2px 10px -2px rgba(227,168,51,.5),inset 0 1px 0 rgba(255,255,255,.25);
    transition:transform .5s var(--ease),width .5s var(--ease)}
  .gt-tab{position:relative;z-index:1;background:none;border:none;cursor:pointer;
    color:var(--cream);white-space:nowrap;
    font-family:'Fraunces',Georgia,serif;font-style:normal;font-weight:400;
    font-size:clamp(13px,1.25vw,15.5px);letter-spacing:.03em;
    padding:clamp(9px,1.2vh,12px) clamp(16px,2vw,28px);border-radius:999px;opacity:.7;
    transition:opacity .4s var(--ease),color .4s var(--ease),font-weight .2s linear}
  .gt-tab:hover{opacity:.95}
  .gt-tab.is-active{opacity:1;color:var(--ink);font-weight:600}
  /* wrap the toggle so it can center as an inline-flex pill */
  .gather-toggle-wrap{display:flex;justify-content:center;width:100%}

  /* the panels share one stage. the active panel sits in normal flow and
     defines the stage's height; the others are absolutely positioned on top of
     it (same place) so they can cross-fade in and out without adding their own
     height. switching simply fades one list out and the next in, in place.
     the lining reserves its scrollbar gutter, so a fade never nudges the list
     sideways. height differences between lists are absorbed by the lining's
     own scroll, with no snap because only one panel is ever in flow. */
  .gather-stage{position:relative;width:100%}
  .gatherlist.gather-panel{display:flex;opacity:0;visibility:hidden;
    position:absolute;top:0;left:0;right:0;pointer-events:none;
    transition:opacity .5s var(--ease),visibility 0s linear .5s}
  /* no-JS fallback: show the one panel that isn't [hidden], plainly, in flow. */
  html.no-js .gatherlist.gather-panel{position:static;opacity:1;visibility:visible;pointer-events:auto}
  html.no-js .gatherlist.gather-panel[hidden]{display:none}
  .gatherlist.gather-panel.is-active{position:relative;opacity:1;visibility:visible;
    pointer-events:auto;transition:opacity .5s var(--ease)}
  @keyframes gatherFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  /* a quiet count line under the control, so a switch always shows feedback */
  .gather-count{width:100%;text-align:center;font-family:'Fraunces',Georgia,serif;
    font-style:italic;font-weight:300;opacity:.5;font-size:clamp(12px,1.1vw,14px);
    letter-spacing:.04em;margin:0 auto clamp(20px,3vh,30px)}

  /* the quiet "nothing scheduled right now" note, shown when a list is empty */
  .gather-empty{width:100%;max-width:46ch;margin:clamp(20px,4vh,44px) auto;
    text-align:center;font-family:'Fraunces',Georgia,serif;font-weight:300;
    font-style:italic;line-height:1.6;opacity:.7;color:var(--cream);
    font-size:clamp(15px,1.5vw,18px)}
  .gather-empty__link{color:var(--amber);text-decoration:none;font-style:italic;
    border-bottom:1px solid color-mix(in srgb,var(--amber) 40%,transparent);
    transition:border-color .5s var(--ease)}
  .gather-empty__link:hover{border-bottom-color:var(--amber)}

  .gatherlist .fmt{display:flex;flex-direction:column;gap:3px;width:clamp(104px,12vw,140px)}
  .gatherlist .fmt .when{font-style:normal;letter-spacing:.04em;opacity:.92;font-size:clamp(13px,1.15vw,15px)}
  .gatherlist .fmt .kind{font-size:clamp(11px,1vw,13px);opacity:.55;letter-spacing:.1em}
  .gatherlist .where{flex:0 0 auto;align-self:center;text-align:right;font-style:italic;font-weight:300;
    opacity:.6;letter-spacing:.04em;text-transform:lowercase;font-size:clamp(13px,1.2vw,15px);
    min-width:clamp(96px,11vw,150px);transition:opacity .5s var(--ease)}
  .gatherlist .media:hover .where{opacity:.85}

  @media (max-width:560px){
    .gatherlist .where{display:none}
    .gatherlist .fmt{flex:0 0 86px;width:86px}
    .single .prose{font-size:17px}
  }

  /* ============================================================
     SEND WORD; words in the dusk (the final exhale)
     No card, no paper, no box. The same dark, still coastal-dusk
     space as the rest of the site, with a few honest words placed
     in it. Write → the words lift and drift into the night → it's
     on its way.
     ============================================================ */

  /* same shore the site opened on: the homepage coastal causeway photo ; 
     pale sky, sea, the lone figure; darkened just enough that light text
     reads clearly, never murked into fog. Returning to the same coast. */
  .lining[data-lining="send"]{--p1:#3a4148;--p2:#262b30;--p3:#171a1d;
    --img:url('/images/hero.webp')}
  .lining[data-lining="send"] .lining__bg{
    background-image:
      linear-gradient(180deg,rgba(14,16,18,.62),rgba(14,16,18,.46) 26%,rgba(14,16,18,.40) 46%,rgba(14,16,18,.52) 66%,rgba(14,16,18,.74)),
      var(--img),
      linear-gradient(180deg, var(--p1) 0%, var(--p2) 55%, var(--p3) 100%);
    background-size:cover,cover,cover;
    background-position:center,center 32%,center;
    background-repeat:no-repeat}
  /* no inner panel tint; let the photograph carry the space; words sit in it */
  .lining[data-lining="send"] .lining__inner{
    background:none;box-shadow:none;
    justify-content:center}

  /* the lead: one handwritten line in the site's amber hand */
  .sendlead{font-family:'TJSign',cursive;font-weight:700;color:var(--amber);
    opacity:.82;line-height:1.14;letter-spacing:.01em;
    font-size:clamp(24px,3vw,38px);transform:rotate(-2deg);
    max-width:22ch;margin:0 auto clamp(18px,2.6vh,28px);text-wrap:balance}

  /* Tim's disclosure; his own experience, in warm serif; readable, intimate.
     sits between the handwritten heading and the open writing field. */
  .senddisclosure{font-family:'Fraunces',Georgia,serif;font-weight:300;font-style:italic;
    color:var(--cream);opacity:.86;line-height:1.62;letter-spacing:.005em;
    font-size:clamp(15px,1.45vw,18px);max-width:46ch;
    margin:0 auto clamp(26px,4vh,44px);text-wrap:pretty;
    text-shadow:0 1px 16px rgba(13,12,10,.7),0 0 30px rgba(13,12,10,.4)}

  /* the note + fields: a bare form, no box. words as light text on the dark. */
  .note-form{width:100%;display:flex;flex-direction:column;align-items:center}

  /* the message: light cream text floating directly on the dusk, centred,
     readable. no border, no rule, no background; just words in the space. */
  .note{display:block;width:100%;min-height:clamp(120px,20vh,200px);resize:none;
    border:none;outline:none;background:transparent;color:var(--cream);
    font-family:'Fraunces',Georgia,serif;font-weight:300;font-style:italic;
    font-size:clamp(19px,2vw,26px);line-height:1.6;letter-spacing:.005em;
    text-align:center;overflow:hidden;
    text-shadow:0 1px 20px rgba(13,12,10,.6)}
  .note::placeholder{color:var(--cream);opacity:.42;font-style:italic}
  .note:focus{outline:none}
  .note:focus::placeholder{opacity:.3}

  /* name + email: quiet but clearly present and legible (quiet ≠ faint).
     two small labelled lines, centred under the message, on the dark. */
  .ps{width:100%;max-width:460px;margin:clamp(22px,3.4vh,38px) auto 0;
    display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,2.2vw,30px)}
  .ps-field{flex:1 1 180px;min-width:0;display:flex;flex-direction:column;
    align-items:center;gap:6px}
  .ps-field label{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;
    font-size:clamp(12px,1.1vw,13.5px);letter-spacing:.04em;
    color:var(--cream);opacity:.6}
  .ps-field input{width:100%;border:none;outline:none;background:transparent;
    color:var(--cream);font-family:'Fraunces',Georgia,serif;font-weight:300;
    font-size:clamp(16px,1.5vw,18px);text-align:center;
    padding:5px 4px 8px;border-bottom:1px solid rgba(242,235,222,.34);
    transition:border-color .5s var(--ease)}
  .ps-field input::placeholder{color:var(--cream);opacity:.4;font-style:italic}
  .ps-field input:focus{border-bottom-color:var(--amber)}
  .ps-field input:-webkit-autofill{-webkit-text-fill-color:#F2EBDE;
    caret-color:#F2EBDE;transition:background-color 9999s ease-out}

  /* the release control; unmistakably the way to send, in the biro hand */
  .release-row{display:flex;flex-direction:column;align-items:center;
    gap:clamp(10px,1.6vh,16px);margin-top:clamp(30px,4.4vh,52px)}
  .release{position:relative;background:none;border:none;cursor:pointer;color:var(--cream);
    font-family:'TJSign',cursive;font-weight:700;font-size:clamp(24px,2.6vw,32px);
    letter-spacing:.01em;line-height:1;display:inline-flex;align-items:center;gap:12px;
    padding:8px 14px;opacity:.96;overflow:visible;transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .release:hover{opacity:1;transform:translateY(-2px)}
  .release .feather{width:24px;height:40px;overflow:visible;color:var(--amber);transition:transform .6s var(--ease)}
  .release .feather svg{width:100%;height:100%;overflow:visible}
  .release:hover .feather{transform:translateY(-4px) rotate(-8deg)}
  /* the hand-drawn biro circle around the words, as elsewhere on the site */
  .release .circle{position:absolute;left:50%;top:50%;width:150%;height:200%;
    transform:translate(-50%,-50%) rotate(-3deg);pointer-events:none;overflow:visible;z-index:0}
  .release .circle path{fill:none;stroke:var(--amber)!important;stroke-width:2.4;stroke-linecap:round;
    stroke-dasharray:560;stroke-dashoffset:560;animation:scribble 4.6s var(--ease) infinite}
  .release:hover .circle path{animation-play-state:paused;stroke-dashoffset:0}
  .release[disabled]{cursor:default;opacity:.5}
  .release-hint{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;
    opacity:.6;font-size:clamp(13px,1.2vw,15px);letter-spacing:.02em;text-align:center}

  /* a small, in-voice error line (kept hidden until needed); readable, not murky */
  .send-error{margin-top:clamp(12px,1.8vh,18px);text-align:center;
    font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;
    color:#f0c987;opacity:0;font-size:clamp(15px,1.4vw,18px);
    transition:opacity .5s var(--ease)}
  .send-error.show{opacity:.95}

  /* ----- the RELEASE: a slide, the same motion as every page ----------------
     The whole site moves one way: a full surface parked off-screen slides on a
     translateY with 1.05s var(--ease). The send page now does exactly that.
     The writing column and the confirmation are two layers stacked in the
     sendwrap "stage"; on send the writing slides up and out, and the
     confirmation slides up into the space behind it. Same transform, same
     duration, same easing as the lining slides. ------------------------------ */

  /* the stage: a fixed box the two layers slide within. min-height holds the
     space so nothing reflows as one layer leaves and the other arrives, and it
     clips the sliding layers so neither spills into the scrolling lining. */
  .sendwrap{width:100%;max-width:620px;margin:0 auto;position:relative;
    min-height:clamp(360px,52vh,520px);overflow:hidden}

  /* layer 1; the writing column; slides up and out on send */
  .send-stage{display:flex;flex-direction:column;align-items:center;text-align:center;
    transform:translateY(0);opacity:1;
    transition:transform 1.05s var(--ease),opacity 1.05s var(--ease);
    will-change:transform}
  .sendwrap.is-sending .send-stage,
  .sendwrap.is-sent .send-stage{transform:translateY(-110%);opacity:0;pointer-events:none}

  /* layer 2; the confirmation; parked just below, slides up into the same
     space the writing left. It is also visibility:hidden + opacity:0 while
     parked so it can never be seen or reached (by scroll, tab, or screen
     reader) until the note is actually sent; overflow clipping alone proved
     fragile across viewport sizes. Same translateY + 1.05s var(--ease) slide. */
  .sent-note{position:absolute;inset:0;z-index:2;
    display:flex;align-items:center;justify-content:center;text-align:center;
    color:var(--cream);
    transform:translateY(110%);opacity:0;visibility:hidden;
    transition:transform 1.05s var(--ease),opacity 1.05s var(--ease),visibility 0s linear 1.05s;
    will-change:transform;pointer-events:none}
  .sendwrap.is-sent .sent-note{transform:translateY(0);opacity:1;visibility:visible;
    pointer-events:auto;
    transition:transform 1.05s var(--ease),opacity 1.05s var(--ease),visibility 0s}
  .sent-note__inner{width:100%;max-width:520px;margin:0 auto}
  .sent-note .sealmark{display:block;width:22px;height:36px;margin:0 auto clamp(18px,2.6vh,26px);
    color:var(--amber);opacity:.82;transform:rotate(-8deg);line-height:0}
  .sent-note .sealmark svg{display:block;width:22px;height:36px;margin:0 auto;overflow:visible}
  .sent-note p{font-family:'Fraunces',Georgia,serif;font-weight:300;font-style:italic;
    line-height:1.6;font-size:clamp(20px,2.1vw,27px);opacity:.95;max-width:24ch;margin:0 auto;
    color:var(--cream);text-shadow:0 1px 20px rgba(13,12,10,.6);text-wrap:balance}
  .sent-note .again{display:inline-block;margin-top:clamp(22px,3.2vh,32px);
    font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;
    font-size:clamp(14px,1.3vw,16px);opacity:.62;color:var(--cream);text-decoration:none;
    border-bottom:1px solid rgba(242,235,222,.3);padding-bottom:2px;
    transition:opacity .5s var(--ease)}
  .sent-note .again:hover{opacity:.95}

  /* the soft, conditional invitation that ends every inner page,
     and the quiet footer "send word" door on every page */
  .invite{width:100%;max-width:760px;margin:clamp(30px,5vh,56px) auto 0;text-align:center}
  .invite .inv-line{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;
    opacity:.8;font-size:clamp(17px,1.6vw,22px);letter-spacing:.005em;margin-bottom:clamp(12px,1.8vh,18px)}
  .invite .inv-link{position:relative;display:inline-flex;align-items:center;gap:10px;
    text-decoration:none;color:var(--cream);font-family:'TJSign',cursive;font-weight:700;
    font-size:clamp(20px,2vw,26px);letter-spacing:.01em;opacity:.92;overflow:visible;
    transition:opacity .5s var(--ease),gap .5s var(--ease)}
  .invite .inv-link:hover{opacity:1;gap:16px}
  .invite .inv-link svg.arrow{width:30px;height:14px;overflow:visible}
  .invite .inv-link svg.arrow line,.invite .inv-link svg.arrow path{stroke:var(--amber);
    stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .invite .inv-link:hover svg.arrow .arrowhead{transform:translateX(4px)}
  .invite .inv-link svg.arrow .arrowhead{transition:transform .5s var(--ease)}

  /* footer send-word link sits beside linkedin in the cover .base + .credits */
  .base a.sendword,.credits a.sendword{color:var(--amber)!important;opacity:.78;
    border-bottom:1px solid color-mix(in srgb,var(--amber) 40%,transparent)}
  .base a.sendword:hover,.credits a.sendword:hover{opacity:1}

  @media(prefers-reduced-motion:reduce){
    /* no slide; swap instantly */
    .send-stage,.sent-note{transition:none}
    .sendwrap.is-sent .send-stage{opacity:0;transform:none}
    .sendwrap.is-sent .sent-note{transform:none}
    .release .circle path{animation:none;stroke-dashoffset:0;opacity:.95}
  }
  @media (max-width:560px){
    .sendwrap{min-height:clamp(420px,72vh,560px)}
    .sendlead{font-size:clamp(22px,7vw,30px)}
    .note{min-height:150px;font-size:20px}
    .ps{flex-direction:column;gap:18px;max-width:300px}
    .ps-field{flex:1 1 auto;width:100%}
    .release{font-size:26px}
  }

  /* ============================================================
     PRACTICE & MENTOR; the clear register (decision pages)
     Same coastal world, but plain warm copy: a kind person
     explaining their work. Quiet scannable sub-headers, a clean
     list, one action (send word). No em dashes anywhere.
     ============================================================ */
  .clear{display:flex;flex-direction:column;align-items:center;text-align:center;
    gap:clamp(20px,3vh,32px);width:100%;max-width:680px;margin:0 auto}
  /* the lighter, breathing variant: short lines with air around them. more
     space between blocks; the sub-labels carry the structure so lines stay spare */
  .clear--light{gap:clamp(28px,4.6vh,52px)}
  /* the warm opening line sits in the heldhead .line; this is the plain lead
     paragraph just beneath it */
  .clear .lead{font-weight:300;line-height:1.62;opacity:.92;
    font-size:clamp(17px,1.7vw,21px);max-width:58ch;text-wrap:pretty}
  .clear--light .lead{line-height:1.7;max-width:none}
  /* the quieter second lead (the "for when..." line) sits a touch softer */
  .clear--light .lead--soft{opacity:.74;font-style:italic;
    font-size:clamp(16px,1.55vw,19px);margin-top:clamp(-8px,-1vh,-4px)}
  /* a labelled block: small quiet header + its plain copy, left-read but centred
     as a column so it stays calm and spacious like the rest of the page */
  .clear .block{display:flex;flex-direction:column;gap:clamp(8px,1.2vh,12px);
    width:100%;max-width:56ch}
  .clear--light .block{gap:clamp(10px,1.6vh,16px);align-items:center}
  .clear .block .qhead{font-style:italic;font-weight:300;opacity:.6;
    letter-spacing:.12em;text-transform:lowercase;font-size:clamp(13px,1.15vw,15px);
    color:var(--cream)}
  .clear .block p{font-weight:300;line-height:1.6;opacity:.9;
    font-size:clamp(16px,1.55vw,19px);text-wrap:pretty}
  .clear--light .block p{line-height:1.7;opacity:.86}
  /* the plain list under "what we work with" */
  .clear .worklist{list-style:none;margin:0;padding:0;width:100%;
    display:flex;flex-direction:column;gap:clamp(8px,1.3vh,12px);text-align:left}
  .clear .worklist li{position:relative;padding-left:22px;font-weight:300;
    line-height:1.55;opacity:.88;font-size:clamp(15px,1.45vw,18px);text-wrap:pretty}
  /* a small amber mark instead of a bullet, in the site's hand */
  .clear .worklist li::before{content:"";position:absolute;left:2px;top:.7em;
    width:7px;height:7px;border-radius:50%;background:var(--amber);opacity:.62}
  /* the light fragment list: short fragments, centred, more air, no left rag */
  .clear .worklist--fragments{align-items:center;text-align:center;
    gap:clamp(10px,1.7vh,16px);max-width:48ch;margin:0 auto}
  .clear .worklist--fragments li{padding-left:0;opacity:.86;line-height:1.5}
  .clear .worklist--fragments li::before{display:none}
  /* the single closing action line: warm, in the handwritten register, the only
     action on the page */
  .clear .send-line{margin-top:clamp(6px,1.4vh,16px)}
  .clear .send-line .inv-link{position:relative;display:inline-flex;align-items:center;
    gap:10px;text-decoration:none;color:var(--cream);font-family:'TJSign',cursive;
    font-weight:700;font-size:clamp(20px,2vw,27px);letter-spacing:.01em;opacity:.92;
    overflow:visible;transition:opacity .5s var(--ease),gap .5s var(--ease)}
  .clear .send-line .inv-link:hover{opacity:1;gap:16px}
  .clear .send-line .inv-link svg.arrow{width:30px;height:14px;overflow:visible}
  .clear .send-line .inv-link svg.arrow line,
  .clear .send-line .inv-link svg.arrow path{stroke:var(--amber);stroke-width:1.4;
    fill:none;stroke-linecap:round;stroke-linejoin:round}
  .clear .send-line .inv-link svg.arrow .arrowhead{transition:transform .5s var(--ease)}
  .clear .send-line .inv-link:hover svg.arrow .arrowhead{transform:translateX(4px)}

  @media (max-width:560px){
    .clear{gap:22px}
    .clear--light{gap:30px}
    .clear .block,.clear .worklist{text-align:center}
    /* let the breathing lines reflow rather than break mid-phrase on narrow screens */
    .clear--light .lead br,.clear--light .block p br{display:none}
  }

  /* =====================================================================
     EVENT PAGES; individual gather events (/gather/<slug>/)
     Same materials as the rest of the site; two moods:
     .event--future = a handwritten invitation; .event--past = a journal page.
     ===================================================================== */
  /* event pages have no sleeve, so they must scroll normally; the global
     body{overflow:hidden} (set for the sleeve mechanism) would otherwise trap
     the page and cut off content like the polaroid gallery. */
  body.event-body-scroll{overflow:auto;overflow-x:hidden}
  .eventpage{position:relative;min-height:100vh;color:var(--cream);
    background:#171a1d}
  /* the photograph + veil sit on a fixed layer pinned to the viewport, so the
     page can grow (e.g. the RSVP unfolding) and scroll without the image
     parallax-scaling or "zooming"; it simply stays still behind the words.
     using a fixed pseudo-element rather than background-attachment:fixed avoids
     the scroll-scaling artefact that attachment:fixed produced. */
  .eventpage::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
    background-image:
      linear-gradient(180deg,rgba(14,16,18,.66),rgba(14,16,18,.42) 30%,rgba(14,16,18,.5) 60%,rgba(14,16,18,.78)),
      var(--event-img,none),
      linear-gradient(180deg,#3a4148 0%,#262b30 55%,#171a1d 100%);
    background-size:cover,cover,cover;background-position:center,var(--event-pos,center 32%),center;
    background-repeat:no-repeat}
  .eventpage__inner{position:relative;z-index:2;max-width:680px;margin:0 auto;
    min-height:100vh;display:flex;flex-direction:column;
    padding:clamp(80px,12vh,140px) clamp(24px,5vw,48px) clamp(72px,9vh,104px);
    view-transition-name:event-content}
  /* back to gather; mirrors the lining close control */
  .event-back{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
    color:var(--cream);text-decoration:none;font-family:'TJSign','Fraunces',cursive;
    font-size:clamp(17px,1.7vw,21px);opacity:.62;margin-bottom:clamp(40px,7vh,80px);
    transition:opacity .5s var(--ease)}
  .event-back:hover{opacity:1}
  .event-back svg{width:30px;height:14px;overflow:visible}
  .event-back svg line,.event-back svg path{stroke:var(--cream);stroke-width:1;fill:none;
    stroke-linecap:round;stroke-linejoin:round}
  .event-back .arrowhead{transition:transform .5s var(--ease)}
  .event-back:hover .arrowhead{transform:translateX(-4px)}

  /* the quiet kicker: when / where, in the handwritten-caption register */
  .event-meta{font-family:'TJSign','Fraunces',cursive;font-size:clamp(15px,1.5vw,19px);
    color:var(--amber);opacity:.85;letter-spacing:.02em;margin-bottom:clamp(14px,2vh,20px)}
  .event-meta .dot{opacity:.5;margin:0 .5em}
  /* the name, large in the serif */
  .event-title{font-family:'Fraunces',Georgia,serif;font-weight:300;line-height:1.04;
    font-size:clamp(38px,6.5vw,76px);letter-spacing:-.01em;margin:0 0 clamp(26px,4vh,40px);
    text-wrap:balance;view-transition-name:event-title}
  /* the body, in Tim's voice; spare and breathing */
  .event-body{font-weight:300;line-height:1.7;font-size:clamp(17px,1.7vw,21px);
    opacity:.92;max-width:60ch;text-wrap:pretty}
  .event-body p{margin:0 0 clamp(18px,2.6vh,28px)}
  .event-body p:first-child{font-style:italic;font-size:clamp(19px,1.9vw,24px);opacity:.96}

  /* FUTURE; the single soft action */
  .event-action{margin-top:clamp(34px,5.5vh,64px)}
  /* the practice page's "the finer details..." expander: a single quiet trigger
     that softly unfolds the depth in place (same grid-row reveal as the poems),
     with the content present in the DOM while collapsed so it stays crawlable.
     calm register; not a hard accordion snap. */
  .finer{margin:0}
  .finer-trigger{display:inline-flex;align-items:center;gap:10px;background:none;border:0;
    cursor:pointer;padding:4px 0;color:var(--cream);opacity:.6;
    font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;
    font-size:clamp(15px,1.5vw,18px);letter-spacing:.01em;
    transition:opacity .5s var(--ease)}
  .finer-trigger:hover{opacity:.92}
  .finer-trigger .chev{width:13px;height:13px;overflow:visible;
    transition:transform .6s var(--ease)}
  .finer-trigger .chev path{stroke:var(--gold-muted);stroke-width:1.4;fill:none;
    stroke-linecap:round;stroke-linejoin:round}
  .finer.is-open .finer-trigger .chev{transform:rotate(90deg)}
  .finer-body{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;
    transition:grid-template-rows .7s var(--ease),opacity .6s var(--ease),margin .6s var(--ease)}
  .finer-inner{min-height:0;overflow:hidden}
  .finer.is-open .finer-body{grid-template-rows:1fr;opacity:1;margin-top:clamp(16px,2.4vh,26px)}
  .finer-body[hidden]{display:grid}
  .finer-body .block{margin-top:clamp(18px,2.6vh,30px)}
  /* the three "ways to work together" options: quiet serif labels (a touch more
     present than the small "finer details" trigger), each unfolding a short
     line in place. they sit in a calm centred stack. */
  .optionlist{display:flex;flex-direction:column;align-items:center;gap:clamp(4px,1vh,10px);
    margin:0;width:100%}
  .finer--option{margin:0;width:100%;max-width:520px;text-align:center}
  .finer-trigger--option{justify-content:center;width:100%;opacity:.92;
    font-style:normal;font-size:clamp(18px,1.9vw,23px);
    font-family:'Fraunces',Georgia,serif;letter-spacing:.005em;
    padding:clamp(8px,1.4vh,14px) 0}
  .finer-trigger--option:hover{opacity:1}
  .finer--option .finer-body{text-align:center}
  .finer--option .finer-inner p{margin:0 auto;max-width:48ch;font-weight:300;
    line-height:1.7;opacity:.82;font-size:clamp(15px,1.5vw,18px)}
  .finer--option.is-open .finer-body{margin-top:clamp(8px,1.4vh,16px);
    margin-bottom:clamp(8px,1.6vh,18px)}
  /* the warm line that closes the practice action, beneath "let's begin" */
  .begin-close{margin:clamp(16px,2.4vh,24px) 0 0;font-weight:300;font-style:italic;
    line-height:1.6;opacity:.78;font-size:clamp(15px,1.5vw,18px);
    font-family:'Fraunces',Georgia,serif;color:var(--cream)}

  /* ---- the support ("in a crisis") lining: calm and in-world, but the most
     legible page on the site. resources read clearly; the Samaritans number is
     woven in as a warm amber line (click-to-call), larger than the body and
     unmissable, yet not a loud clinical button. ---- */
  .support-block{align-items:center;gap:clamp(14px,2.2vh,20px);
    width:100%;max-width:60ch}
  .support-block .qhead{margin-bottom:clamp(4px,1vh,10px)}
  /* the urgent group sits a touch brighter/closer, so it reads first; a soft
     warm frame, not a hard card */
  .support-block--now{padding:clamp(20px,3.4vh,30px) clamp(20px,3.4vw,34px);
    border:1px solid rgba(227,168,51,.34);border-radius:14px;
    background:rgba(20,16,11,.30)}
  .support-block--ongoing{padding:clamp(16px,2.6vh,24px) clamp(20px,3.4vw,34px);
    border:1px solid rgba(242,235,222,.14);border-radius:14px}
  .support-res{padding:clamp(11px,1.8vh,16px) 0;width:100%;text-align:center;
    border-top:1px solid rgba(242,235,222,.12)}
  .support-res:first-of-type{border-top:0;padding-top:0}
  .support-res__name{display:block;font-weight:400;
    font-size:clamp(18px,2vw,21px);color:var(--cream);opacity:.96}
  .support-res__name a{color:var(--amber);text-decoration:none;
    border-bottom:1px solid rgba(227,168,51,.4);padding-bottom:1px;
    transition:border-color .4s var(--ease),opacity .4s var(--ease)}
  .support-res__name a:hover{border-bottom-color:var(--amber)}
  .support-res__desc{margin-top:clamp(4px,1vh,7px);font-weight:300;
    line-height:1.6;opacity:.84;font-size:clamp(15px,1.55vw,17px);
    max-width:48ch;margin-left:auto;margin-right:auto}
  /* the Samaritans line: the clearest thing on the page, but warm */
  .support-res--samaritans{padding-bottom:clamp(14px,2.2vh,20px)}
  .crisis-call{display:inline-flex;align-items:baseline;gap:.4em;
    margin:clamp(8px,1.4vh,12px) 0 clamp(10px,1.6vh,14px);
    text-decoration:none;color:var(--amber);
    font-family:'Fraunces',Georgia,serif;transition:opacity .4s var(--ease)}
  .crisis-call:hover{opacity:.86}
  .crisis-call:focus-visible{outline:2px solid var(--amber);outline-offset:6px;border-radius:4px}
  .crisis-call__say{font-style:italic;font-weight:300;opacity:.8;
    font-size:clamp(16px,1.7vw,19px);align-self:center}
  .crisis-call__num{font-weight:400;line-height:1;letter-spacing:.02em;
    font-size:clamp(34px,5.2vw,52px)}
  .support-close{margin-top:clamp(26px,4vh,40px);text-align:center}
  .support-emergency{margin-top:clamp(14px,2.2vh,20px);text-align:center;
    font-weight:300;font-size:clamp(13px,1.3vw,15px);opacity:.6;
    letter-spacing:.02em;color:var(--cream)}

  /* the faq lining: calm question/answer pairs, breathing, not dense. the
     question in the warm serif, the answer plain and quiet beneath it. */
  .faqlist{display:flex;flex-direction:column;align-items:center;text-align:center;
    width:100%;gap:clamp(28px,4.6vh,48px)}
  .faqitem{width:100%;max-width:60ch;display:flex;flex-direction:column;
    gap:clamp(8px,1.4vh,14px)}
  .faq-q{font-weight:400;font-style:italic;line-height:1.4;color:var(--cream);
    opacity:.96;font-size:clamp(18px,1.9vw,22px);text-wrap:balance}
  .faq-a{font-weight:300;line-height:1.7;opacity:.84;
    font-size:clamp(15px,1.55vw,18px);max-width:54ch;margin:0 auto;text-wrap:pretty}
  .faq-link{color:var(--amber);text-decoration:none;
    border-bottom:1px solid color-mix(in srgb,var(--amber) 40%,transparent);
    transition:border-color .5s var(--ease)}
  .faq-link:hover{border-bottom-color:var(--amber)}

  /* the 404 lining: fully in voice, centred over the coastal world. */
  .notfound{display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;min-height:72vh;gap:clamp(8px,1.4vh,14px);
    max-width:40ch;margin:0 auto;padding:0 clamp(20px,5vw,40px)}
  .notfound__line{font-weight:300;font-style:italic;line-height:1.4;color:var(--cream);
    opacity:.96;font-size:clamp(22px,3vw,34px);text-wrap:balance;
    text-shadow:0 1px 18px rgba(13,12,10,.5)}
  .notfound__sub{font-weight:300;line-height:1.5;color:var(--cream);opacity:.8;
    font-size:clamp(16px,1.7vw,20px);margin-top:clamp(6px,1.2vh,12px)}
  .notfound__home{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
    color:var(--amber);font-family:'TJSign','Fraunces',cursive;
    font-size:clamp(24px,3vw,34px);margin-top:clamp(20px,3.4vh,34px);
    transition:opacity .4s var(--ease)}
  .notfound__home:hover{opacity:.82}
  .notfound__home .arrow{width:34px;height:auto;overflow:visible}
  .notfound__home .arrow line,.notfound__home .arrow path{stroke:var(--amber);
    stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .notfound__crisis{margin-top:clamp(28px,5vh,52px);font-weight:300;
    font-size:clamp(14px,1.4vw,16px);opacity:.66;color:var(--cream)}
  .notfound__crisis a{color:var(--cream);text-decoration:none;
    border-bottom:1px solid rgba(242,235,222,.4);transition:border-color .4s var(--ease)}
  .notfound__crisis a:hover{border-bottom-color:var(--cream)}

  /* the legal linings (privacy, terms): plain and calm, a readable document in
     the site's palette. left-aligned prose, quiet sub-headings; warmth only at
     the opening line (the strapline) and the opening paragraph. */
  .legal{max-width:64ch;margin:0 auto;text-align:left;
    font-weight:300;line-height:1.72;color:var(--cream);opacity:.9;
    font-size:clamp(15px,1.5vw,17px)}
  .legal-open{font-size:clamp(16px,1.6vw,19px);opacity:.94;font-style:italic;
    margin-bottom:clamp(22px,3.4vh,34px);line-height:1.65}
  .legal-h{font-weight:400;font-style:italic;color:var(--cream);opacity:.92;
    letter-spacing:.01em;font-size:clamp(16px,1.6vw,19px);
    margin:clamp(24px,3.6vh,38px) 0 clamp(7px,1.2vh,12px)}
  .legal p{margin-bottom:clamp(12px,1.8vh,18px);text-wrap:pretty}
  .legal-list{list-style:none;margin:clamp(6px,1vh,10px) 0 clamp(14px,2vh,20px);
    padding:0;display:flex;flex-direction:column;gap:clamp(5px,0.9vh,9px)}
  .legal-list li{padding-left:1.1em;position:relative;opacity:.88}
  .legal-list li::before{content:"\\00B7";position:absolute;left:0;opacity:.6;
    color:var(--gold-muted)}
  .legal-link{color:var(--amber);text-decoration:none;
    border-bottom:1px solid color-mix(in srgb,var(--amber) 40%,transparent);
    transition:border-color .5s var(--ease)}
  .legal-link:hover{border-bottom-color:var(--amber)}

  /* the finer-details index: a small, calm, centred list of the admin pages;
     quiet, minimal, not a busy page. */
  .finer-index{display:flex;flex-direction:column;align-items:center;
    gap:clamp(16px,2.6vh,28px);margin:clamp(20px,4vh,44px) auto 0}
  .finer-index__link{font-family:'Fraunces',Georgia,serif;font-weight:300;
    font-style:italic;color:var(--cream);text-decoration:none;opacity:.86;
    font-size:clamp(20px,2.4vw,28px);letter-spacing:.01em;
    border-bottom:1px solid rgba(242,235,222,0);padding-bottom:2px;
    transition:opacity .5s var(--ease),border-color .5s var(--ease)}
  .finer-index__link:hover{opacity:1;border-bottom-color:rgba(242,235,222,.4)}
  /* the mentor/practice "let's begin" doorway sits inside a (centered) lining,
     so its warm lead-in and the handwritten action centre with the rest of the
     lining content. the form below it (.begin) reuses the .rsvp look. */
  .begin-action{display:flex;flex-direction:column;align-items:center;text-align:center}
  .begin-line{margin:0 0 clamp(14px,2.2vh,22px);font-weight:300;font-style:italic;
    line-height:1.6;opacity:.82;font-size:clamp(17px,1.7vw,21px);
    font-family:'Fraunces',Georgia,serif;color:var(--cream)}
  .begin .rsvp__field,.begin .rsvp__promise,.begin .rsvp__aside{text-align:left}
  .event-cta{display:inline-flex;align-items:center;gap:12px;position:relative;
    font-family:'TJSign','Fraunces',cursive;font-size:clamp(22px,2.6vw,32px);
    color:var(--amber);text-decoration:none;padding:6px 4px;
    transition:transform .5s var(--ease)}
  .event-cta:hover{transform:translateY(-1px)}
  .event-cta .arrow{width:34px;height:14px;overflow:visible}
  .event-cta .arrow line{stroke:var(--amber);stroke-width:1.5;fill:none;stroke-linecap:round}
  .event-cta .arrow .arrowhead{stroke:var(--amber);stroke-width:1.5;fill:none;
    stroke-linejoin:round;transition:transform .5s var(--ease)}
  .event-cta:hover .arrow .arrowhead{transform:translateX(5px)}
  .event-aside{margin-top:clamp(20px,3vh,30px);font-style:italic;font-weight:300;
    opacity:.6;font-size:clamp(14px,1.4vw,17px)}
  /* the "turn" on an invite page: a quiet serif line that hands the gesture
     back to the reader ("tell me about yours"), sitting just above the one warm
     handwritten action. muted, never amber, never handwriting; the CTA below
     carries the only warm mark. */
  .event-turn{margin:0 0 clamp(16px,2.4vh,24px);font-weight:300;
    font-style:italic;line-height:1.6;opacity:.82;
    font-size:clamp(17px,1.7vw,21px);max-width:54ch}

  /* PAST; polaroid gallery; reuses the polaroid-flip interaction */
  .event-gallery{display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,34px);
    margin:clamp(34px,5vh,56px) 0 clamp(10px,2vh,20px);align-items:flex-start}
  /* the footer should sit at the screen edges, exactly like the cover/back
     footer (.base): far left and far right, not tucked inside the centered
     reading column. and like the page's fixed background, it stays pinned to
     the bottom of the viewport as the content scrolls, rather than scrolling
     away with it. so it is position:fixed at the page edges with the same edge
     padding as .base. */
  .event-foot{position:fixed;left:0;right:0;bottom:0;z-index:3;
    display:flex;justify-content:space-between;align-items:center;
    padding:0 clamp(20px,5vw,48px) clamp(16px,3vh,26px);
    font-weight:300;font-size:13px;letter-spacing:.05em}
  .event-foot .c{opacity:.55;text-shadow:0 1px 12px rgba(13,13,12,.6)}
  .event-foot a{color:var(--cream);text-decoration:none;opacity:.6;
    text-shadow:0 1px 12px rgba(13,13,12,.6);transition:opacity .5s var(--ease)}
  .event-foot a:hover{opacity:1}
  .event-foot a.sendword{color:var(--amber)!important;opacity:.78}

  /* NOTE: opening an event is handled by soft-nav.js, which slides the event up
     from the bottom over the gather page (the same motion as the .lining panels)
     and updates the URL. The event remains a real, crawlable page for direct
     visits and as the no-JS fallback. */

  @media (max-width:560px){
    .eventpage__inner{padding:clamp(64px,10vh,90px) 22px clamp(30px,5vh,44px)}
    .event-gallery{gap:16px;justify-content:center}
  }

  /* OPTIONAL VIDEO on an event page. Click-to-play: a still poster (in the
     coastal world) loads the player only on intent, so the page stays light
     and fast for SEO. Works for an embedded provider (YouTube/Vimeo) or a
     self-hosted <video>. Captioned in the hand, like the polaroids. */
  .event-video{position:relative;width:100%;max-width:620px;margin:clamp(34px,5vh,56px) 0 0;
    border-radius:3px;overflow:hidden;background:#0c0d0e;
    box-shadow:0 18px 50px -18px rgba(10,9,7,.7)}
  .event-video__frame{position:relative;width:100%;aspect-ratio:16/9}
  .event-video__frame iframe,.event-video__frame video,.event-video__poster{
    position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
  .event-video__poster{cursor:pointer;padding:0;display:block}
  .event-video__poster img{width:100%;height:100%;object-fit:cover;
    filter:saturate(.92) brightness(.82);transition:filter .6s var(--ease),transform .8s var(--ease)}
  .event-video__poster:hover img{filter:saturate(1) brightness(.9);transform:scale(1.02)}
  /* soft veil + play glyph */
  .event-video__poster::before{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(14,16,18,.25),rgba(14,16,18,.55))}
  .event-video__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:clamp(58px,8vw,76px);height:clamp(58px,8vw,76px);border-radius:50%;
    background:rgba(227,168,51,.92);display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 24px -6px rgba(227,168,51,.6);transition:transform .5s var(--ease)}
  .event-video__poster:hover .event-video__play{transform:translate(-50%,-50%) scale(1.08)}
  .event-video__play svg{width:38%;height:38%;margin-left:8%}
  .event-video__play svg path{fill:var(--ink)}
  .event-video__cap{font-family:'TJSign','Fraunces',cursive;font-size:clamp(14px,1.4vw,17px);
    color:var(--cream);opacity:.6;margin:clamp(10px,1.6vh,14px) 0 0;text-align:center}

  /* a fact emphasised inside the flowing invitation sentence; the
     handwritten amber accent, so cost/essentials are catchable at a glance
     while the sentence still reads as a letter. ONE quiet highlight per page:
     amber COLOUR within the serif; never the handwriting font, never enlarged.
     Colour-only emphasis stays calm; font-swapping shouts. */
  .event-body .fact{color:var(--amber);font-style:inherit;opacity:.95}

  /* the at-a-glance facts header: when · what · where. Reference data, so it
     reads as a calm muted serif (small-caps), NOT a handwritten flourish, so it
     stops competing with the title. */
  .event-facts{font-family:'Fraunces',Georgia,serif;font-weight:400;
    font-variant:small-caps;letter-spacing:.12em;color:var(--amber);opacity:.92;
    font-size:clamp(13px,1.25vw,15px);margin:0 0 clamp(16px,2.2vh,22px)}
  .event-facts .dot{opacity:.55;margin:0 .5em}

  /* location line: reference, not a flourish. the three words can carry a quiet
     amber COLOUR (a key fact + a little poetry) but stay in the serif; the
     label and Maps fallback are plain and muted. */
  .event-where{margin:clamp(20px,3vh,30px) 0 0;font-weight:300;
    font-family:'Fraunces',Georgia,serif;font-size:clamp(15px,1.45vw,17px);opacity:.7}
  .event-where .w3w{color:var(--amber);opacity:.9;text-decoration:none;
    border-bottom:1px solid color-mix(in srgb,var(--amber) 32%,transparent);
    transition:border-color .4s var(--ease)}
  .event-where .w3w:hover{border-bottom-color:var(--amber)}
  .event-where .maps{color:var(--cream);opacity:.58;text-decoration:none;
    border-bottom:1px solid rgba(242,235,222,.24);transition:opacity .4s var(--ease)}
  .event-where .maps:hover{opacity:.9}
  .event-where .sep{opacity:.4;margin:0 .5em}

  /* the RSVP; not a form; the first moment of being personally received.
     it leads with the human promise, collects names not numbers, and keeps all
     machinery (payment, capacity) off-page in the hands of a real person. */
  /* the RSVP stays in the DOM (so it works with no JS and is crawlable) but is
     collapsed until someone chooses "tell me you're coming". the CTA adds
     .is-open, and it unfolds with the site's soft easing; cleaner than showing
     the whole form up front. without JS it is simply shown (can't be expanded),
     and the deep link (#rsvp) still reveals it via :target as a fallback. */
  .rsvp{margin:clamp(40px,6.5vh,80px) 0 0;padding-top:clamp(34px,5vh,54px);
    border-top:1px solid rgba(242,235,222,.14)}
  .rsvp.is-collapsible{margin-top:0;padding-top:0;border-top:0;
    overflow:hidden;max-height:0;opacity:0;
    transform:translateY(6px);pointer-events:none;
    transition:max-height .85s var(--ease),opacity .6s var(--ease),
      transform .6s var(--ease),margin-top .6s var(--ease),padding-top .6s var(--ease)}
  .rsvp.is-collapsible.is-open{max-height:1400px;opacity:1;transform:none;
    pointer-events:auto;margin-top:clamp(34px,5vh,60px);
    padding-top:clamp(34px,5vh,54px);border-top:1px solid rgba(242,235,222,.14)}
  /* deep-link fallback: /…/#rsvp opens it even before the JS toggle runs */
  .rsvp.is-collapsible:target{max-height:1400px;opacity:1;transform:none;
    pointer-events:auto;margin-top:clamp(34px,5vh,60px);
    padding-top:clamp(34px,5vh,54px);border-top:1px solid rgba(242,235,222,.14)}
  /* the invite-page enquiry ("tell me about yours") reuses the whole RSVP look
     and behaviour; it differs only in wording and direction. it opens at its own
     #enquiry deep link, so it needs the same :target fallback. */
  .rsvp.is-collapsible#enquiry:target{max-height:1600px;opacity:1;transform:none;
    pointer-events:auto;margin-top:clamp(34px,5vh,60px);
    padding-top:clamp(34px,5vh,54px);border-top:1px solid rgba(242,235,222,.14)}
  .rsvp#enquiry.is-collapsible.is-open{max-height:1600px}
  /* the arriving heading; a light handwriting touch, warm but small */
  .rsvp__lead{font-family:'TJSign','Fraunces',cursive;color:var(--amber);
    opacity:.88;font-size:clamp(21px,2.3vw,28px);line-height:1.2;
    margin:0 0 clamp(12px,1.8vh,18px)}
  /* the whole promise, said once: leads with their ease (a real person does it). */
  .rsvp__promise{font-family:'Fraunces',Georgia,serif;font-weight:300;font-style:italic;
    line-height:1.7;font-size:clamp(17px,1.8vw,22px);color:var(--cream);opacity:.92;
    max-width:50ch;margin:0 0 clamp(28px,4vh,42px);text-wrap:pretty}
  .rsvp__field{display:flex;flex-direction:column;gap:7px;margin:0 0 clamp(18px,2.6vh,24px);max-width:440px}
  .rsvp__field label{font-style:italic;font-weight:300;font-size:clamp(13px,1.2vw,15px);
    opacity:.62;letter-spacing:.02em}
  .rsvp input,.rsvp textarea{background:none;border:none;
    border-bottom:1px solid rgba(242,235,222,.28);color:var(--cream);
    font-family:'Fraunces',Georgia,serif;font-weight:300;font-size:clamp(16px,1.6vw,19px);
    padding:7px 2px;width:100%;transition:border-color .4s var(--ease)}
  .rsvp input::placeholder,.rsvp textarea::placeholder{color:var(--cream);opacity:.36;font-style:italic}
  .rsvp input:focus,.rsvp textarea:focus{outline:none;border-bottom-color:var(--amber)}
  .rsvp textarea{resize:none;min-height:60px;line-height:1.6}

  /* bringing others: collapsed by default (a solo guest sees a clean note); a
     group organiser opens it to name everyone. names, never a headcount. */
  .rsvp__guests{max-width:440px;margin:0 0 clamp(18px,2.6vh,24px)}
  .rsvp__guests-toggle{background:none;border:none;cursor:pointer;padding:4px 0;
    font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;
    color:var(--cream);opacity:.6;font-size:clamp(14px,1.4vw,16px);letter-spacing:.01em;
    transition:opacity .4s var(--ease)}
  .rsvp__guests-toggle:hover{opacity:.9}
  .rsvp__guests-toggle .pm{color:var(--gold-muted);margin-right:8px;font-style:normal}
  .rsvp__guests-list{display:none;margin-top:clamp(12px,1.8vh,18px)}
  .rsvp__guests.is-open .rsvp__guests-list{display:block;animation:gatherFade .5s var(--ease)}
  .rsvp__guests.is-open .rsvp__guests-toggle{display:none}
  .rsvp__guest-row{margin:0 0 clamp(10px,1.4vh,14px)}
  .rsvp__guest-row input{font-size:clamp(15px,1.5vw,18px)}
  .rsvp__addguest{background:none;border:none;cursor:pointer;padding:4px 0;margin-top:4px;
    font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;
    color:var(--gold-muted);opacity:.85;font-size:clamp(13px,1.3vw,15px);
    transition:opacity .4s var(--ease)}
  .rsvp__addguest:hover{opacity:1}

  .rsvp__send{display:inline-flex;align-items:center;gap:12px;background:none;border:none;
    cursor:pointer;font-family:'TJSign','Fraunces',cursive;color:var(--amber);
    font-size:clamp(20px,2.4vw,28px);padding:6px 4px;margin-top:clamp(8px,1.4vh,14px);
    transition:transform .5s var(--ease)}
  .rsvp__send:hover{transform:translateY(-1px)}
  .rsvp__send .arrow{width:32px;height:13px;overflow:visible}
  .rsvp__send .arrow line{stroke:var(--amber);stroke-width:1.5;fill:none;stroke-linecap:round}
  .rsvp__send .arrow .arrowhead{stroke:var(--amber);stroke-width:1.5;fill:none;stroke-linejoin:round;
    transition:transform .5s var(--ease)}
  .rsvp__send:hover .arrow .arrowhead{transform:translateX(5px)}
  /* the reassurance, given presence; the "a real person will be in touch"
     promise, felt not buried. "confirm your place" signals it isn't auto-guaranteed. */
  .rsvp__aside{font-style:italic;font-weight:300;opacity:.72;font-size:clamp(15px,1.5vw,18px);
    line-height:1.6;max-width:46ch;margin:clamp(18px,2.6vh,26px) 0 0}
  .rsvp__error{color:#e7a98c;font-style:italic;opacity:0;min-height:1.2em;
    font-size:clamp(14px,1.3vw,16px);margin-top:10px;transition:opacity .4s var(--ease)}
  .rsvp__error.show{opacity:.95}
  /* the warm acknowledgement that replaces the form once sent */
  .rsvp__sent{display:none;animation:gatherFade .7s var(--ease)}
  .rsvp.is-sent .rsvp__form{display:none}
  .rsvp.is-sent .rsvp__sent{display:block}
  /* once they've responded, the sign-up call to action above is no longer
     relevant; hide it so the page reads purely as confirmation. */
  .event-action.is-hidden{display:none}
  /* the success seal: a feather settling into a hand-drawn circle, in amber.
     echoes the biro-circle + feather motifs elsewhere on the site; draws itself
     in gently, then a soft check confirms. not a generic tick. */
  .rsvp__seal{display:block;width:clamp(74px,9vw,96px);height:clamp(74px,9vw,96px);
    margin:0 0 clamp(18px,2.6vh,28px)}
  .rsvp__seal svg{width:100%;height:100%;overflow:visible}
  .rsvp__seal path{fill:none;stroke:var(--amber);stroke-linecap:round;stroke-linejoin:round}
  .rsvp__seal .seal-circle{stroke-width:2;opacity:.85;
    stroke-dasharray:300;stroke-dashoffset:300}
  .rsvp__seal .seal-feather{stroke-width:1.6;fill:color-mix(in srgb,var(--amber) 16%,transparent);
    opacity:0}
  .rsvp__seal .seal-spine{stroke-width:1.2;opacity:0}
  .rsvp__seal .seal-check{stroke-width:2.4;opacity:0;
    stroke-dasharray:70;stroke-dashoffset:70}
  .rsvp.is-sent .rsvp__seal .seal-circle{animation:sealDraw 1.1s var(--ease) .1s forwards}
  .rsvp.is-sent .rsvp__seal .seal-feather{animation:sealFade .7s var(--ease) .65s forwards}
  .rsvp.is-sent .rsvp__seal .seal-spine{animation:sealFade .6s var(--ease) .8s forwards}
  .rsvp.is-sent .rsvp__seal .seal-check{animation:sealDrawCheck .55s var(--ease) 1s forwards}
  @keyframes sealDraw{to{stroke-dashoffset:0}}
  @keyframes sealDrawCheck{from{opacity:.95;stroke-dashoffset:70}to{opacity:.95;stroke-dashoffset:0}}
  @keyframes sealFade{to{opacity:.9}}
  @media(prefers-reduced-motion:reduce){
    .rsvp__seal .seal-circle,.rsvp__seal .seal-feather,.rsvp__seal .seal-spine,.rsvp__seal .seal-check{
      animation:none;stroke-dashoffset:0;opacity:.9}
  }
  .rsvp__sent p{font-weight:300;line-height:1.7;font-size:clamp(17px,1.7vw,21px);opacity:.92;max-width:46ch}
  .rsvp__sent p:first-of-type{font-family:'TJSign','Fraunces',cursive;color:var(--amber);
    font-size:clamp(22px,2.5vw,30px);opacity:.95;margin-bottom:clamp(12px,1.8vh,18px);font-weight:400;line-height:1.3}

  /* a pulled quote from the room (past events): a remembered voice, set apart
     in calm serif with a quiet amber rule. warmth, not a flourish. */
  .event-quote{margin:clamp(34px,5vh,56px) 0 0;padding:0 0 0 clamp(18px,2.4vw,28px);
    border-left:2px solid color-mix(in srgb,var(--amber) 45%,transparent);max-width:48ch}
  .event-quote p{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;
    line-height:1.5;font-size:clamp(20px,2.4vw,29px);color:var(--cream);opacity:.95;margin:0 0 12px;text-wrap:balance}
  .event-quote cite{font-style:normal;font-weight:300;font-size:clamp(13px,1.3vw,15px);
    letter-spacing:.04em;color:var(--gold-muted);opacity:.85}

  /* a quiet section label (past-event journal sections) */
  .event-label{font-family:'Fraunces',Georgia,serif;font-variant:small-caps;
    letter-spacing:.14em;font-size:clamp(12px,1.15vw,14px);color:var(--gold-muted);
    opacity:.7;margin:clamp(40px,6vh,68px) 0 clamp(14px,2vh,20px)}
  .event-gallery-label{font-family:'Fraunces',Georgia,serif;font-variant:small-caps;
    letter-spacing:.14em;font-size:clamp(12px,1.15vw,14px);color:var(--gold-muted);
    opacity:.7;margin:clamp(40px,6vh,68px) 0 0}

  /* the reflective summary written afterwards: same calm serif as the body, set
     a little apart so it reads as a looking-back, not the in-the-moment note. */
  .event-reflection{margin:clamp(34px,5vh,56px) 0 0;max-width:60ch}
  .event-reflection p{font-weight:300;line-height:1.75;font-size:clamp(17px,1.7vw,21px);
    opacity:.9;margin:0 0 clamp(16px,2.4vh,26px);text-wrap:pretty}
  .event-reflection p:first-of-type{font-style:italic}

  /* testimonials: a few voices from the room, stacked. each a quiet card with an
     amber-colour quotation mark; warm, scannable, never a wall. */
  .event-voices{margin:clamp(20px,3vh,32px) 0 0;display:flex;flex-direction:column;
    gap:clamp(20px,3vh,30px);max-width:56ch}
  .event-voice{position:relative;padding:0 0 0 clamp(26px,3vw,38px)}
  .event-voice::before{content:"\201C";position:absolute;left:0;top:-6px;
    font-family:'Fraunces',Georgia,serif;font-size:clamp(34px,4vw,48px);
    color:var(--amber);opacity:.5;line-height:1}
  .event-voice p{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;
    line-height:1.6;font-size:clamp(17px,1.8vw,22px);color:var(--cream);opacity:.94;
    margin:0 0 8px;text-wrap:pretty}
  .event-voice cite{font-style:normal;font-weight:300;font-size:clamp(12px,1.25vw,14px);
    letter-spacing:.04em;color:var(--gold-muted);opacity:.85}

  /* the gathering, in numbers: a few resonant facts, the last one human and
     quiet (the heart, not a metric). calm serif; figures in muted gold, never
     a dashboard. */
  .event-stats{margin:clamp(20px,3vh,32px) 0 0;display:flex;flex-wrap:wrap;
    gap:clamp(22px,3.5vw,52px);max-width:60ch}
  .event-stat{flex:0 0 auto}
  .event-stat .fig{display:block;font-family:'Fraunces',Georgia,serif;font-weight:300;
    color:var(--gold-muted);font-size:clamp(30px,4.4vw,52px);line-height:1;letter-spacing:-.01em}
  .event-stat .cap{display:block;font-style:italic;font-weight:300;opacity:.7;
    font-size:clamp(13px,1.35vw,16px);margin-top:8px;max-width:18ch;line-height:1.4}
  /* the closing, human line under the numbers: full width, set apart, warm */
  .event-stats__coda{width:100%;margin:clamp(18px,2.6vh,28px) 0 0;
    font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;
    font-size:clamp(18px,2vw,24px);line-height:1.5;color:var(--cream);opacity:.92;
    max-width:44ch;text-wrap:balance}

  /* go deeper: an optional link out to the event's own world (some events have
     a dedicated site; many won't). a single quiet amber-hand gesture. */
  .event-deeper{margin:clamp(40px,6vh,68px) 0 0}
  .event-deeper a{display:inline-flex;align-items:center;gap:11px;
    font-family:'TJSign','Fraunces',cursive;color:var(--amber);text-decoration:none;
    font-size:clamp(20px,2.3vw,27px);transition:transform .5s var(--ease)}
  .event-deeper a:hover{transform:translateY(-1px)}
  .event-deeper .arrow{width:30px;height:13px;overflow:visible}
  .event-deeper .arrow line{stroke:var(--amber);stroke-width:1.5;fill:none;stroke-linecap:round}
  .event-deeper .arrow .arrowhead{stroke:var(--amber);stroke-width:1.5;fill:none;stroke-linejoin:round;
    transition:transform .5s var(--ease)}
  .event-deeper a:hover .arrow .arrowhead{transform:translateX(5px)}
     line on the back (the past-event "memory" gesture). Self-contained; does
     not use the gather index's overlay system. */
  .event-gallery .polaroid{margin:0;cursor:pointer;perspective:1200px;
    transform:rotate(var(--r,0deg));transition:transform .5s var(--ease)}
  .event-gallery .polaroid:hover{transform:rotate(0deg) translateY(-3px)}
  .event-gallery .polaroid__inner{position:relative;width:clamp(150px,20vw,210px);
    transform-style:preserve-3d;transition:transform .7s var(--ease)}
  .event-gallery .polaroid.is-flipped .polaroid__inner{transform:rotateY(180deg)}
  .event-gallery .polaroid__face{position:relative;backface-visibility:hidden;
    -webkit-backface-visibility:hidden}
  /* override the index rule that hides backs in the strip */
  .event-gallery .polaroid__back{display:flex;position:absolute;inset:0;
    transform:rotateY(180deg);align-items:center;justify-content:center;text-align:center}
  .event-gallery .polaroid__note{font-family:'TJSign','Fraunces',cursive;
    color:var(--tide);font-size:clamp(15px,1.5vw,18px);line-height:1.4;padding:14px}
  /* a quiet "turn me over" hint under each, in the hand */
  .event-gallery .polaroid::after{content:"turn me over";position:absolute;
    left:0;right:0;bottom:-22px;text-align:center;font-family:'TJSign','Fraunces',cursive;
    font-size:13px;color:var(--cream);opacity:.4;transition:opacity .4s var(--ease)}
  .event-gallery .polaroid.is-flipped::after{opacity:0}