/* SALAMANDER Society, /full/ (2026-10-09; Dawn's revisions 2026-10-19, v14). Joe's dark system, rebuilt around Elisabeth's video:
   one sticky full-screen stage of her word-free scenes, the type scrolls over it. */
@font-face{font-family:'Sora';font-style:normal;font-weight:100 800;font-display:swap;src:url(fonts/sora-latin.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:200 900;font-display:swap;src:url(fonts/sourceserif4-normal-latin.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/sourceserif4-italic-latin.woff2) format('woff2')}

:root{
  --plate:#050707; --paper:#FFFFFF;
  --ink:#101828; --body:#364153; --teal:#00786F; --teal-deep:#005F5A;
  --flood:linear-gradient(to right,#00786F,#193CB8);
  --pad:clamp(20px,calc(7.24vw - 8.25px),96px);
  --measure:1248px;
  --sans:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --ease:cubic-bezier(.2,0,0,1);
  --w80:rgba(255,255,255,.8); --w72:rgba(255,255,255,.72); --w32:rgba(255,255,255,.32);
  --vh:100vh;
}
@supports (height:100svh){:root{--vh:100svh}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--plate)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);-webkit-font-smoothing:antialiased;font-optical-sizing:auto}
h1,h2,p,blockquote{margin:0}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
.nb{white-space:nowrap}
:focus{outline:none}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.film :focus-visible,.bar :focus-visible,.ft :focus-visible,.fm :focus-visible{outline-color:#fff}
.skip{position:absolute;left:12px;top:-64px;z-index:100;font:500 15px/1 var(--sans);background:#fff;color:var(--ink);padding:12px 14px;text-decoration:none}
.skip:focus{top:12px}

/* ---------- bar: sits on the first screen only ---------- */
.bar{position:absolute;top:0;left:0;right:0;z-index:5;height:72px;display:flex;align-items:center;
  max-width:calc(var(--measure) + 2 * var(--pad));margin:0 auto;padding:0 var(--pad)}
.bar__stamp,.bar__stamp img{display:block;width:32px;height:32px}

/* ---------- the film ---------- */
.film{position:relative;background:var(--plate);color:#fff}
.stage{position:sticky;top:0;height:var(--vh);overflow:hidden;z-index:0;background:var(--plate)}
/* the beats slide up under the stage's own height; a negative margin on the stage itself would let the sticky box overhang the paper */
.stage + .beat{margin-top:calc(-1 * var(--vh))}
.layer{position:absolute;inset:0;opacity:0;transition:opacity 1100ms var(--ease)}
.layer.is-on{opacity:1}
.stage.is-close .layer:not([data-scene=close]){transition:none}
.layer[data-scene=close]{transition-duration:900ms}
/* Nonlinear Dynamics: push in to the pebbles (Maya S2). Unused since 2026-10-19: Nonlinear Dynamics now sits on the tree and lungs. */
.layer[data-scene=river] video{transition:transform 1600ms var(--ease);transform-origin:78% 82%}
.stage[data-beat=nd] .layer[data-scene=river] video{transform:scale(1.18)}
.layer video,.layer .held{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.layer video{background:var(--plate)}
/* legibility: a fixed dark wash on the reading side, deeper when a quote is up */
.scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right,rgba(5,7,7,.80) 0,rgba(5,7,7,.55) 32%,rgba(5,7,7,.12) 62%,rgba(5,7,7,0) 80%),
    linear-gradient(to top,rgba(5,7,7,.55) 0,rgba(5,7,7,0) 35%);
  transition:background-color 900ms var(--ease)}
.stage.is-dim .scrim{background-color:rgba(5,7,7,.58)}
.stage.is-hero .scrim{background:
    linear-gradient(to bottom,rgba(5,7,7,.62) 0,rgba(5,7,7,.10) 26%,rgba(5,7,7,0) 46%,rgba(5,7,7,.45) 66%,rgba(5,7,7,.88) 100%)}
.stage.is-close .scrim{opacity:.35}
.scrim{transition:opacity 900ms var(--ease),background-color 900ms var(--ease)}

/* no script: each beat carries its own still */
html:not(.js) .layer[data-scene=crack]{background:url(v/crack-crossing-end-1920.jpg) center/cover}

.beat{position:relative;z-index:1;min-height:calc(1.15 * var(--vh));display:flex;align-items:center}
.beat__in{width:100%;max-width:calc(var(--measure) + 2 * var(--pad));margin:0 auto;padding:0 var(--pad);will-change:opacity,transform}
.blk{max-width:760px}
.idx{display:flex;font:500 15px/1 var(--sans);letter-spacing:.38em;text-transform:uppercase;color:rgba(255,255,255,.40);text-shadow:0 1px 12px rgba(0,0,0,.5)}
.idx span{transition:color 600ms var(--ease)}
.idx .on{color:#fff;font-weight:600}
.blk h2{font:400 64px/1.1 var(--serif);margin-top:20px;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.blk .def{font:400 22px/1.5 var(--serif);color:var(--w80);margin-top:16px;text-shadow:0 1px 16px rgba(0,0,0,.5)}
.q{max-width:22em;font:400 36px/1.38 var(--serif);text-shadow:0 2px 24px rgba(0,0,0,.5)}
.q--s{font-size:44px;line-height:1.3}
.beat--q{min-height:calc(1.6 * var(--vh))}
.beat--ql{min-height:var(--vh)}

/* hero */
.beat--hero{min-height:var(--vh);align-items:stretch}
.hero{display:flex;flex-direction:column;justify-content:space-between;padding-top:120px;padding-bottom:clamp(48px,8vh,88px);min-height:var(--vh)}
.name{font:300 calc(min(var(--measure),100vw - 2 * var(--pad)) / 10.19)/1 var(--sans);letter-spacing:.32em;white-space:nowrap;color:#fff;display:flex;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.name span{display:block}
.name span:last-child{margin-right:-.32em}
.decode{font:400 clamp(21px,calc(1.4vw + 6px),30px)/1.45 var(--serif);max-width:34em;text-shadow:0 1px 16px rgba(0,0,0,.6)}
.status,.aicap{font:400 clamp(17px,calc(.6vw + 10px),20px)/1.5 var(--serif);color:var(--w80);margin-top:14px;text-shadow:0 1px 16px rgba(0,0,0,.6)}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px 32px;margin-top:32px}

.btn{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:12px;height:48px;padding:0 24px;border-radius:6px;font:500 15px/1 var(--sans);cursor:pointer;transition:background-color 180ms var(--ease);white-space:nowrap}
.btn--w{background:#fff;color:var(--ink)}
.btn--w:hover{background:#F0FDFA}
.btn--w:focus-visible{outline:2px solid #fff;outline-offset:3px}
.btn__tri{width:10px;height:10px}
.btn--t{background:var(--teal);color:#fff}
.btn--t:hover{background:var(--teal-deep)}
.btn--t:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.tl{font:500 15px/1.4 var(--sans);color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:rgba(255,255,255,.5);transition:text-decoration-color 180ms var(--ease),color 180ms var(--ease);text-shadow:0 1px 12px rgba(0,0,0,.6)}
.tl:hover{text-decoration-color:#fff}
.tl--p{color:var(--teal);text-decoration-color:currentColor;text-shadow:none}
.tl--p:hover{color:var(--teal-deep);text-decoration-color:currentColor}
.tl--p:focus-visible{outline-color:var(--teal)}

/* ---------- the paper ---------- */
.paper{position:relative;z-index:1;background:var(--paper);padding:clamp(64px,9vh,104px) var(--pad) 0}
.mark,.ev{max-width:var(--measure);margin:0 auto}
.mark__stamp{width:40px;height:40px}
.purpose{font:400 32px/1.4 var(--serif);color:var(--ink);max-width:30em;margin-top:32px}
.sig{display:flex;align-items:center;gap:16px;margin-top:32px}
.sig__ph{width:48px;height:48px;border-radius:50%;object-fit:cover}
.sig__n{font:500 15px/1 var(--sans);color:var(--ink)}

.ev{margin-top:96px;border-top:1px solid rgba(16,24,40,.12);border-bottom:1px solid rgba(16,24,40,.12);padding:40px 0;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:64px}
.ev__k{font:500 12px/1 var(--sans);text-transform:uppercase;letter-spacing:.12em;color:var(--teal);padding-top:8px}
.ev__h{font:500 28px/1.25 var(--sans);color:var(--ink);max-width:22em}
.ev__dk{font:400 15px/1.3 var(--serif);color:var(--body);margin-top:24px}
.ev__dv{font:500 22px/1.3 var(--sans);color:var(--ink);margin-top:4px}
.ev__a{display:flex;align-items:center;flex-wrap:wrap;gap:16px 32px;margin-top:32px}
.ev__l{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 12px}
.ev__lk{font:500 12px/1 var(--sans);text-transform:uppercase;letter-spacing:.12em;color:var(--teal)}
.paper::after{content:"";display:block;height:96px}

/* ---------- footer: the closing flood ---------- */
.ft{background:var(--flood);color:#fff;padding:72px var(--pad) 56px}
.ft__in{max-width:var(--measure);margin:0 auto}
.ft__brand{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.ft__soc{height:40px;width:auto}
.ft__div{width:1px;height:36px;background:rgba(255,255,255,.55)}
.ft__ev{display:flex;flex-direction:column;gap:6px}
.ft__ev img{height:30px;width:auto}
.ft__cap{font:400 13px/1 var(--serif)}
.ft__stand{font:400 14px/1.5 var(--sans);color:rgba(255,255,255,.9);margin-top:40px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.4)}
.ft__ai{font:400 14px/1.5 var(--sans);color:rgba(255,255,255,.9);margin-top:16px;min-height:0}
.ft__ai:empty{margin-top:0}

/* ---------- the video modal ---------- */
.fm{padding:0;border:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;margin:0}
.fm::backdrop{background:rgba(5,6,7,.94)}
.fm[open]{display:flex;align-items:center;justify-content:center}
.fm__box{position:relative;width:min(92vw,1280px,calc((100svh - 160px) * 16 / 9))}
.fm__v{width:100%;aspect-ratio:16/9;background:#000;display:block;border-radius:8px}
.fm__cap{font:400 14px/1.5 var(--sans);color:var(--w72);margin-top:12px}
.fm__x{all:unset;box-sizing:border-box;position:absolute;right:0;bottom:calc(100% + 16px);width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);color:var(--w72);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color 180ms var(--ease),color 180ms var(--ease)}
.fm__x:hover{background:rgba(255,255,255,.22);color:#fff}
.fm__x:focus-visible{outline:2px solid #fff;outline-offset:3px}
html.fm-open{overflow:hidden}
.ft__copy{font:400 14px/1.5 var(--sans);color:rgba(255,255,255,.9);margin-top:16px}

/* ---------- motion (JS writes opacity/transform per frame; these are the entry pieces) ---------- */
@keyframes fadein{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:no-preference){
  html.js:not(.lite) .name span{opacity:0;animation:fadein 700ms ease-out forwards}
  html.js:not(.lite) .name span:nth-child(2){animation-delay:80ms}
  html.js:not(.lite) .name span:nth-child(3){animation-delay:160ms}
  html.js:not(.lite) .name span:nth-child(4){animation-delay:240ms}
  html.js:not(.lite) .name span:nth-child(5){animation-delay:320ms}
  html.js:not(.lite) .name span:nth-child(6){animation-delay:400ms}
  html.js:not(.lite) .name span:nth-child(7){animation-delay:480ms}
  html.js:not(.lite) .name span:nth-child(8){animation-delay:560ms}
  html.js:not(.lite) .name span:nth-child(9){animation-delay:640ms}
  html.js:not(.lite) .name span:nth-child(10){animation-delay:720ms}
  html.js:not(.lite) .fx-a{opacity:0;animation:fadein 500ms var(--ease) 700ms forwards}
  html.js:not(.lite) .fx-b{opacity:0;animation:fadein 500ms var(--ease) 1000ms forwards}
  html.js:not(.lite) .beat:not(.beat--hero) .idx .on{color:rgba(255,255,255,.40)}
  html.js:not(.lite) .beat.is-lit .idx .on{color:#fff}
}
@media (prefers-reduced-motion:no-preference){
  html.js:not(.lite) .mark{opacity:0;transform:translateY(24px);transition:opacity 700ms var(--ease),transform 700ms var(--ease)}
  html.js:not(.lite) .mark.is-in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .layer,.scrim,.idx span,.btn,.tl,.fm__x,.layer video{transition:none}
  .stage[data-beat=nd] .layer[data-scene=river] video{transform:none}
}
html.lite .stage[data-beat=nd] .layer[data-scene=river] video{transform:none}
@media (min-width:820px){
  .beat--q .q{max-width:calc(50vw - var(--pad) - 48px)}
  /* the long quote sits on plain black, no seam to respect: use the headings' column */
  .beat--ql .q{max-width:min(20em,760px)}
  .stage.is-dim .scrim{background:linear-gradient(to right,rgba(5,7,7,.85) 0,rgba(5,7,7,.70) 40%,rgba(5,7,7,.20) 60%,rgba(5,7,7,0) 75%);background-color:rgba(5,7,7,.30)}
}
@media (min-width:1100px){
  .actions .btn{height:56px;padding:0 28px;font-size:17px}
  .actions .btn__tri{width:11px;height:11px}
  .actions .tl{font-size:17px}
  .actions{margin-top:40px}
}

/* ---------- widths ---------- */
@media (max-width:1099.98px) and (min-width:820px){
  .blk h2{font-size:52px}
  .q{font-size:30px;line-height:1.4}.q--s{font-size:34px;line-height:1.3}
}
@media (max-width:819.98px){
  .bar{height:56px}
  .bar__stamp,.bar__stamp img{width:28px;height:28px}
  .scrim{background:linear-gradient(to top,rgba(5,7,7,.9) 0,rgba(5,7,7,.62) 34%,rgba(5,7,7,.08) 62%,rgba(5,7,7,0) 100%)}
  .stage.is-hero .scrim{background:linear-gradient(to bottom,rgba(5,7,7,.7) 0,rgba(5,7,7,.1) 20%,rgba(5,7,7,0) 34%,rgba(5,7,7,.6) 52%,rgba(5,7,7,.92) 100%)}
  .beat{align-items:flex-end}
  .beat:not(.beat--hero) .beat__in{padding-bottom:calc(14vh + env(safe-area-inset-bottom))}
  .beat--q{align-items:center}
  .beat--q .beat__in{padding-bottom:0}
  .hero{padding-top:84px;padding-bottom:calc(40px + env(safe-area-inset-bottom))}
  .name{font-weight:400;letter-spacing:.28em;font-size:calc((100vw - 2 * var(--pad)) / 9.881)}
  .name span:last-child{margin-right:-.28em}
  .decode{font-size:17px}
  .status{font-size:15px;margin-top:10px}
  .beat--q .beat__in{display:flex;justify-content:center}
  .layer[data-scene=river] video{transform-origin:60% 85%}
  .actions{flex-direction:column;align-items:flex-start;gap:16px;margin-top:24px}
  .idx{font-size:13px;letter-spacing:.32em}
  .blk h2{font-size:min(34px,calc((100vw - 2 * var(--pad)) / 11.6));line-height:1.15;margin-top:12px}
  .blk .def{font-size:18px;margin-top:10px}
  .q,.q--s{font-size:min(26px,7vw);line-height:1.35}
  /* where each scene sits in a tall phone frame */
  .layer[data-scene=fern]{--pos:50% 50%}
  .layer[data-scene=tree]{--pos:50% 50%}
  .layer[data-scene=roots]{--pos:52% 50%}
  .layer[data-scene=river]{--pos:45% 50%}
  .layer[data-scene=vortex]{--pos:58% 50%}
  .layer[data-scene=close]{--pos:64% 50%}
  .layer[data-scene=crack]{--pos:74% 50%}
  .stage.is-portrait .layer{--pos:50% 50%}
  .paper{padding-top:44px}
  .mark__stamp{width:32px;height:32px}
  .purpose{font-size:23px}
  .sig__ph{width:40px;height:40px}
  .sig__n{font-size:14px}
  .ev{margin-top:72px;display:block}
  .ev__k{padding-top:0;margin-bottom:16px}
  .ev__h{font-size:22px}
  .ev__dv{font-size:20px}
  .ev__a{flex-direction:column;align-items:flex-start;gap:16px}
  .paper::after{height:72px}
  .ft{padding:56px var(--pad) 48px}
  .ft__brand{flex-direction:column;align-items:flex-start;gap:20px}
  .ft__soc{height:32px}
  .ft__div{display:none}
  .fm__box{width:100%}
  .fm__v{border-radius:0}
  .fm__x{right:12px}
}
@media (max-width:359.98px){
  .ev__l{gap:6px 8px}
  .ev__lk{letter-spacing:.06em}
  .ev__l .tl{font-size:14px}
}

/* ---------- fix pass 2 (2026-10-09): Maya after-review, Quinn F1 to F3 ---------- */
/* Quinn F1: the closing scene cuts to black when it is left (no fade), so the heart can never share a frame with it */
.layer[data-scene=close]:not(.is-on){transition:none}
.layer .seq{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* Maya P1: the decode, status and caption scale with the screen */
@media (min-width:820px){
  .decode{font-size:clamp(21px,calc(2vw - 2.4px),38px)}
  .status{font-size:clamp(17px,calc(1vw + 4px),24px)}
}
@media (min-width:1600px){
  /* the film and bar use the whole screen width from 1600px; the paper keeps 1248px */
  .film,.bar{--measure:calc(100vw - 2 * var(--pad))}
  .actions .btn{height:60px;padding:0 32px;font-size:19px}
  .actions .btn__tri{width:12px;height:12px}
  .actions .tl{font-size:19px}
  .actions{margin-top:48px}
  .blk{max-width:900px}
  .blk h2{font-size:clamp(64px,4.17vw,80px)}
  .blk .def{font-size:26px}
  .idx{font-size:17px}
  .q{font-size:42px}
  .q--s{font-size:54px}
  .beat--ql .q{max-width:min(20em,900px)}
  /* Maya P5: a gentler push at large widths, where the 1080 source is already magnified */
  .stage[data-beat=nd] .layer[data-scene=river] video{transform:scale(1.10)}
}
/* Quinn F3: background video play/pause (Joe's pp pattern), fixed bottom right while the film is on screen */
.pp{all:unset;box-sizing:border-box;position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:6;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--w80);background:rgba(5,7,7,.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);cursor:pointer;transition:color 180ms var(--ease),opacity 300ms var(--ease)}
.pp:hover{color:#fff}
.pp:focus-visible{outline:2px solid #fff;outline-offset:3px}
.pp[hidden]{display:none}
.pp.is-off{opacity:0;pointer-events:none;visibility:hidden}
.pp .pp__pause,.fm__pp .pp__pause{display:none}
.pp.is-playing .pp__pause,.fm__pp.is-playing .pp__pause{display:block}
.pp.is-playing .pp__play,.fm__pp.is-playing .pp__play{display:none}
.fm__row{display:flex;align-items:center;gap:12px;margin-top:12px}
.fm__row .fm__cap{margin-top:0}
.fm__pp{all:unset;box-sizing:border-box;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--w80);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);cursor:pointer;flex:none}
.fm__pp:hover{color:#fff}
.fm__pp:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:819.98px){
  /* Maya P3: no type on the closing panel, so no wash over it */
  .stage.is-close .scrim{opacity:0}
  .fm__row{padding:0 var(--pad)}
}

/* fix pass 3: entering the black plate cuts every scene out at once (no heart fading under the quote, Quinn F2b) */
.stage.is-plate .layer{transition:none}
/* the Watch backdrop is fully opaque at every size (Quinn re-verify) */
.fm::backdrop{background:#050707}

/* ---------- 2026-10-10: long quote held in place; faster hand-off to the paper ---------- */
/* The quote panel is one screen plus a 0.65-screen hold; it overlaps Energetics Research by 0.62 screen, so only
   the hold takes scroll. Its frame is sticky (still on screen); full.js shows the quote only inside the hold.
   2026-10-24: it is the last beat of the film (the empty closing-scene replay after it is gone), so no bottom overlap:
   the film ends at the panel's foot and the paper's edge enters the bottom of the screen as the hold ends. */
html.js .beat--ql{display:block;min-height:0;height:calc(1.65 * var(--vh));margin-top:calc(-.62 * var(--vh));margin-bottom:0;pointer-events:none}
html.js .beat--ql .beat__in{position:sticky;top:0;height:var(--vh);display:flex;align-items:center;padding-bottom:0;will-change:auto}
html.js .beat--ql .q{visibility:hidden;will-change:opacity,transform}
/* The paper starts half a screen up, over the black plate; full.js holds it back with a transform so its edge rises at twice the scroll speed. */
html.js .tail{position:relative;z-index:1;margin-top:calc(-.5 * var(--vh));overflow:hidden;overflow:clip}
html.js .paper,html.js .ft{will-change:transform}
html.js .film.is-quote .beat:not(.beat--ql) .beat__in{visibility:hidden}

/* 2026-10-19 always-playing pass: no CSS change; the closing scene now plays as video on phones too (same 500x1080 letterboxed comp as the old frame sequence, same object-fit and position). */

/* ---------- 2026-10-19 Dawn's revisions (v13) ---------- */
/* Energetics Research reads over the closing-scene loop (Sal and the regrowing limb): it needs the reading wash,
   on phones too, unlike the type-free closing panel */
.stage.is-close[data-beat=er] .scrim{opacity:1}
.beat--er .def{max-width:34em}
/* the non-profit line under the "single method" quote */
.q__more{font-size:.5em;line-height:1.5;color:var(--w80);margin-top:24px;max-width:32em}
/* the mark under the mission paragraph, same form as the footer line */
.q__c{font:400 15px/1.5 var(--sans);color:var(--w72);margin-top:28px;text-shadow:none}
/* slot for Dawn's stairs photo (empty until Elisabeth supplies it; see the comment in index.html) */
.mark__ph{margin:32px 0 0;max-width:min(100%,480px)}
.mark__ph img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:4px}
.mark--ph .sig__ph{display:none}
@media (min-width:1024px){
  .mark--ph{display:grid;grid-template-columns:minmax(0,1fr) clamp(320px,30vw,440px);grid-template-rows:auto auto 1fr;column-gap:clamp(48px,5vw,80px);align-items:start}
  .mark--ph>:not(.mark__ph){grid-column:1}
  .mark--ph .mark__ph{grid-column:2;grid-row:1/span 3;margin:0;max-width:none}
  .mark--ph .purpose{max-width:none}
  .mark--ph .sig{align-self:start}
}
@media (max-width:819.98px){
  .q__more{font-size:16px;margin-top:18px}
  .q__c{font-size:13px;margin-top:20px}
}
@media (min-width:1600px){ .q__c{font-size:16px} }
/* her longer lines stay on the reading side of each scene's seam (desktop); Energetics gets a deeper wash instead */
@media (min-width:820px){
  .blk .def{max-width:calc(50vw - var(--pad) - 48px)}
  .beat--er .def{max-width:min(34em,calc(58vw - var(--pad)))}
  .stage.is-close[data-beat=er] .scrim{background-color:rgba(5,7,7,.15)}
}

/* ---------- fix pass 2026-10-19f (Quinn open point 1) ---------- */
/* Phones: Dawn's second line "Nonlinear Dynamics and Energetics Research" stays one line. The decode scales so that
   line fits the column (its width is about 21 x the font size); 17px is the ceiling, 13px the floor (below ~330px wide
   it wraps after "and", never a lone word). Line 1 wraps after "(sciences)" because "Advancing Medicine Aisthesis" is one unit. */
@media (max-width:819.98px){
  .decode{font-size:clamp(13px,calc((100vw - 2 * var(--pad)) / 21.6),17px)}
}

/* ---------- call actions (2026-10-19): Events list, footer summit link, imprint ---------- */
.ev__k{margin:0}
.ev__h{margin:0}
.ev__list{display:grid;gap:40px}
.ev__c--rec{border-top:1px solid rgba(16,24,40,.12);padding-top:40px}
.ev__t{font:500 12px/1 var(--sans);text-transform:uppercase;letter-spacing:.12em;color:var(--body);margin-bottom:12px}
.ev__c--rec .ev__dv{margin-top:16px}
.ev__note{font:400 15px/1.4 var(--serif);color:var(--body);margin-top:8px}
a.ft__ev{color:#fff;text-decoration:none}
a.ft__ev:hover .ft__cap{text-decoration:underline;text-underline-offset:4px}
.ft__imp{margin-top:24px}
.ft__imph{font:500 12px/1 var(--sans);text-transform:uppercase;letter-spacing:.12em;color:#fff;margin:0}
.ft__impl{display:flex;flex-wrap:wrap;gap:12px 40px;margin:14px 0 0;font:400 14px/1.4 var(--sans)}
.ft__impl div{display:flex;gap:8px}
.ft__impl dt{color:rgba(255,255,255,.7)}
.ft__impl dd{margin:0;color:#fff}
@media (max-width:819.98px){
  .ev__list{gap:32px}
  .ev__c--rec{padding-top:32px}
  .ft__impl{flex-direction:column;gap:8px}
}
/* cookie notice: small bar at the bottom, never over the video modal (the dialog sits in the top layer) */
.ck{position:fixed;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:7;max-width:720px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:12px 12px 12px 18px;border-radius:10px;background:rgba(5,7,7,.96);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 8px 32px rgba(0,0,0,.35);color:rgba(255,255,255,.92)}
.ck[hidden]{display:none}
.ck__t{font:400 13px/1.45 var(--sans);margin:0}
.ck__l{color:#fff;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.ck__b{all:unset;box-sizing:border-box;flex:none;min-width:56px;height:40px;padding:0 16px;border-radius:999px;background:#fff;color:var(--ink);font:500 14px/40px var(--sans);text-align:center;cursor:pointer}
.ck__b:hover{background:#e6f2f1}
.ck__b:focus-visible{outline:2px solid #fff;outline-offset:3px}
html.has-ck .pp{bottom:calc(max(16px,env(safe-area-inset-bottom)) + var(--ckh,72px) + 12px)}
@media (max-width:819.98px){ .ck{gap:12px;padding:10px 10px 10px 14px} .ck__t{font-size:12.5px}}
/* while the notice shows, the hero's lower block sits above it, so the Watch button and the register link stay clear */
html.has-ck .hero{padding-bottom:calc(var(--ckh,72px) + 32px + env(safe-area-inset-bottom))}
/* Maya 2026-10-19 (MAYA-SOCIETY.md): M1 to M4, O1 to O7 */
html.has-ck .ft{padding-bottom:calc(var(--ckh,72px) + 32px + env(safe-area-inset-bottom))}
@media (max-height:500px) and (orientation:landscape){
  .ck{left:auto;right:max(16px,env(safe-area-inset-right));max-width:min(440px,calc(100% - 340px))}
  html.has-ck .hero{padding-bottom:clamp(48px,8vh,88px)}
}
.ft__impl dt{color:rgba(255,255,255,.9)}
.ft__impl dd{font-weight:500}
.ck{max-width:840px}
.ck__b{height:44px;line-height:44px;min-width:64px}
.ev__k{padding-top:0}
.ev__c--rec .ev__h{font-size:22px}
.ev__c--rec .ev__dv{font-size:18px}
.ft__cap{text-decoration:underline;text-decoration-color:rgba(255,255,255,.5);text-underline-offset:4px}
a.ft__ev:hover .ft__cap{text-decoration-color:#fff}
.ft__imp{margin-bottom:24px}
.hero__low{margin-top:24px}
@media (max-width:819.98px){
  .ev__k{margin-bottom:24px}
  .ev__c--rec .ev__h{font-size:20px}
  .ev__c--rec .ev__dv{font-size:17px}
  .ft__impl div{display:grid;grid-template-columns:5.25em 1fr;gap:8px}
}
@media (max-width:400px){
  .ck{left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));gap:10px;padding:10px 8px 10px 12px}
  .ck__t{font-size:12px}
}
/* landscape phones: dock the notice right, clear of the left-aligned buttons (after the 840px rule so it wins) */
@media (max-height:500px) and (orientation:landscape){
  .ck{left:auto;margin:0;max-width:min(440px,calc(100% - 340px))}
}

/* ---------- membership (2026-10-19, Reid): block before Events, bar link, footer link ---------- */
.mb{max-width:var(--measure);margin:clamp(56px,8vh,96px) auto 0;padding-top:40px;border-top:1px solid rgba(16,24,40,.12)}
.mb__k{font:500 12px/1 var(--sans);text-transform:uppercase;letter-spacing:.12em;color:var(--teal);margin-bottom:24px}
.mb__l{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:560px}
.mb__l li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 24px;font:400 20px/1.4 var(--serif);color:var(--ink);padding-bottom:12px;border-bottom:1px solid #eef0f3}
.mb__f{font:500 17px/1.4 var(--sans);color:var(--teal);white-space:nowrap}
@media (max-width:639.98px){.mb__l li{flex-direction:column;gap:2px}}
.mb__a{margin-top:28px}
@media (min-width:820px){.mb{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:64px}.mb__k{padding-top:8px;margin:0}}
.bar__join{margin:-14px 0 -14px auto;padding:14px 0;font:500 15px/1 var(--sans);color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:rgba(255,255,255,.5);text-shadow:0 1px 12px rgba(0,0,0,.6)}
.bar__join:hover{text-decoration-color:#fff}
.ft__mem{margin-top:24px}
.ft__mem .tl{text-shadow:none}

/* ---------- 2026-10-21c (Dawn E3/E5/E6) ----------
   E3: the Society quote is back to its 10/20 wrapping; the one-line rule and the wider dim of this morning are removed (this file = v25 + the rules below).
   E5: the salamander sentence is italic (real Source Serif 4 italic above, not a synthesized slant).
   E6: the signature can now wrap to two lines on phones, so it gets a line height. */
.blk .def em{font-style:italic}
.sig__n{line-height:1.35}
/* 2026-10-21e (Dawn round 3): both attributions are now two lines, "Dawn Daniel MD FAASM FMCP-M" / "SALAMANDER Society Founder, President".
   At 14px the second line is 298px and the signature has 294px beside the photo at 390, so it split into three. 13px (the size of the
   quote attribution on phones) keeps it on one line down to 375px; below that it breaks at "Society" / "Founder, President", never a lone word. */
@media (max-width:419.98px){ .sig__n{font-size:13px} }
/* 2026-10-23a hero AI label as the image caption at the foot of the hero (Maya H1) */
.hero .aicap{margin-top:28px;font:400 12px/1.4 var(--sans);letter-spacing:.02em;color:var(--w72)}
@media (min-width:820px){ .hero .aicap{margin-top:36px;font-size:13px} }
@media (max-width:819.98px) and (max-height:600px){ .hero .aicap{margin-top:16px} }

/* ---------- 2026-10-23e (Reid): imprint as a stacked block (Regan's adopted-statutes wording, Dawn's email 21:27 UTC),
   privacy link beside Membership, privacy link in the cookie notice ---------- */
.ft__impb{margin:14px 0 0;font:400 14px/1.5 var(--sans);color:#fff;display:grid;gap:4px;max-width:44em}
.ft__impb p{margin:0}
.ft__impn{font-weight:500}
.ft__k{color:rgba(255,255,255,.9)}
.ft__impb a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.5);text-underline-offset:3px}
.ft__impb a:hover{text-decoration-color:#fff}
.ft__mem{display:flex;flex-wrap:wrap;gap:8px 28px}
.ck__l{color:#fff;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
@media (max-width:819.98px){
  .ft__impb{gap:6px}
}

/* ---------- 2026-10-23g (Reid, Round 12; Maya MAYA-IMPRINT.md S1 to S5, N1) ---------- */
/* S1 name line heads the block; S2 labels at 500 (values 400), no tint; S4 block gap 10px phones / 8px desktop */
.ft__impb .ft__impn{font-weight:600;font-size:15px;margin-bottom:4px}
.ft__k{font-weight:500;color:#fff}
.ft__impb{gap:8px}
@media (max-width:819.98px){ .ft__impb{gap:10px} }
/* S3 hosting: "DigitalOcean, LLC (United States)," is one unit; "server in" starts its own line below 1024; below 480 the label stands alone */
.ft__hu{white-space:nowrap}
@media (max-width:1023.98px){ .ft__hs{display:block} }
@media (max-width:479.98px){ .ft__hu{display:block} }
/* S5 wider imprint at desktop so each row is one line */
@media (min-width:1024px){ .ft__impb{max-width:800px} }
/* N1 44px tap area on the Membership / Privacy policy pair, layout unchanged */
.ft__mem .tl{padding-block:12px;margin-block:-12px}
/* S7 (2026-10-23g): on phones the status line is never larger than the decode lines above it (0.92 x the decode size, 15px ceiling) */
@media (max-width:819.98px){ .status{font-size:min(15px,calc(.92 * clamp(13px,calc((100vw - 2 * var(--pad)) / 21.6),17px)))} }