/* Fluidic Frontiers, shared styles for every page.
   Layout: a print magazine's nameplate on a Dutch-orange field; inner pages open on cool paper with an
   orange rule. The house instrument is the qPCR amplification plot (cycle vs fluorescence, a threshold line).
   Single look, light: the orange field is the brand, so there is no dark variant. */
:root{
  color-scheme: light;
  --oranje:#F26A1B;      /* brand field: nameplate, covers, invite bands */
  --oranje-deep:#A9440A; /* orange as small text on paper, 5.2:1 */
  --ink:#0C2233;         /* deep water: type on orange and on paper */
  --ink-2:#1B3A52;       /* ink hover */
  --paper:#F2F5F4;       /* cool page, slight blue-green bias */
  --sheet:#FFFFFF;       /* raised: forms, the sample issue, the cover builder */
  --tide:#1D5A69;        /* links, annotations, 7.1:1 on paper */
  --rule:#C3CDCE;        /* hairlines that carry no meaning */
  --rule-ui:#5E7075;     /* borders on controls, 4.9:1 on paper */
  --mist:#C9D6D9;        /* body text on ink, 10:1 */

  --display:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;
  --body:'Source Serif 4',Georgia,'Times New Roman',serif;
  --mono:'Martian Mono',ui-monospace,Menlo,Consolas,monospace;

  /* type scale, ratio 1.25 from 17px body */
  --t-0:.75rem; --t-1:1.0625rem; --t-2:1.33rem; --t-3:1.66rem; --t-4:2.07rem; --t-5:2.6rem; --t-6:3.24rem;

  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:72px;--s9:112px;
  --r:3px;

  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --dur-press:140ms;--dur-ui:200ms;--dur-reveal:480ms;

  --gut:clamp(16px,4vw,56px);
  --max:1240px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--s5)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--t-1)/1.6 var(--body);-webkit-font-smoothing:antialiased;caret-color:var(--oranje-deep);accent-color:var(--ink)}
::selection{background:var(--oranje);color:var(--ink)}
img,svg{max-width:100%}
a{color:var(--tide);text-underline-offset:3px;text-decoration-thickness:1px}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:var(--r)}
.on-ink a:focus-visible,.on-ink button:focus-visible,.on-ink input:focus-visible{outline-color:var(--oranje)}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;line-height:1.04;letter-spacing:-0.02em;font-weight:700}
p{text-wrap:pretty;margin:0}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.mono{font-family:var(--mono);font-size:var(--t-0);letter-spacing:.02em;line-height:1.55}
.nowrap{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--s4);top:-60px;background:var(--ink);color:var(--paper);padding:var(--s3) var(--s4);z-index:10;border-radius:var(--r)}
.skip:focus{top:var(--s4)}

/* ---------- nav ---------- */
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s2) var(--s4);padding-block:var(--s3);flex-wrap:wrap}
.brand{font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:-.01em;color:var(--ink);text-decoration:none;display:inline-flex;gap:var(--s2);align-items:center;min-height:44px}
.brand svg{width:24px;height:24px;flex:none}
.links{display:flex;gap:0 var(--s5);flex-wrap:wrap;list-style:none;margin:0;padding:0}
.links a{color:var(--ink);text-decoration:none;font-family:var(--display);font-weight:500;font-size:.98rem;display:inline-flex;align-items:center;min-height:44px}
.links a[aria-current]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px}
@media (hover:hover) and (pointer:fine){.links a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding:0 var(--s5);border-radius:var(--r);border:2px solid transparent;font-family:var(--display);font-weight:700;font-size:1rem;line-height:1.1;text-decoration:none;cursor:pointer;transition:transform var(--dur-press) var(--ease-out),background-color var(--dur-ui) var(--ease-out),color var(--dur-ui) var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn-ink{background:var(--ink);color:var(--oranje)}
.btn-line{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-orange{background:var(--oranje);color:var(--ink)}
.btn[disabled]{opacity:.55;cursor:progress}
@media (hover:hover) and (pointer:fine){
  .btn-ink:hover{color:var(--paper)}
  .btn-line:hover{background:rgba(12,34,51,.08)}
  .btn-orange:hover{background:#FF7A2B}
}
.acts{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}

/* ---------- home hero ---------- */
.hero{background:var(--oranje);color:var(--ink);position:relative;overflow:hidden}
.plate{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.035em;line-height:.84;font-size:clamp(3.1rem,9.7vw,8.8rem);margin:var(--s4) 0 0;font-variation-settings:"opsz" 96;display:flex;flex-wrap:wrap;column-gap:.22em}
.plate .word{display:inline-flex;white-space:nowrap}
.plate .ch{display:inline-block;will-change:transform}
.issue{display:flex;justify-content:space-between;gap:var(--s1) var(--s4);flex-wrap:wrap;border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);padding-block:var(--s3);margin-top:var(--s4)}
.hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s6);align-items:end;padding-block:var(--s6) var(--s8)}
.tag{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,2.7vw,2.4rem);line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
.lede{margin-top:var(--s4);max-width:46ch;font-size:1.125rem}

/* the plot */
.plot{margin:0;min-width:0}
.plot-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);margin-bottom:var(--s2)}
.readout{font-variant-numeric:tabular-nums;white-space:nowrap}
.rerun{font:inherit;background:none;border:1.5px solid var(--ink);color:var(--ink);border-radius:var(--r);min-height:44px;min-width:44px;padding:0 var(--s3);cursor:pointer;transition:transform var(--dur-press) var(--ease-out),background-color var(--dur-ui) var(--ease-out)}
.rerun:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.rerun:hover{background:rgba(12,34,51,.1)}}
.plot-svg{display:block;width:100%;height:auto;overflow:visible}
.plot-narrow{display:none}
.ax{stroke:var(--ink);stroke-width:1.5}
.tick,.cl{fill:var(--ink);font-family:var(--mono)}
.thr{stroke:var(--ink);stroke-width:2;stroke-dasharray:7 5}
.cursor{stroke:var(--ink);stroke-width:1;opacity:0}
.cv{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.ct{fill:var(--oranje);stroke:var(--ink);stroke-width:2;transition:fill var(--dur-ui) var(--ease-out)}
.cl{font-weight:500;transition:opacity var(--dur-ui) var(--ease-out)}
.hit.on .ct{fill:var(--ink)}
.js .hit:not(.on) .cl{opacity:0}
.running .cursor{opacity:.6}
.plot figcaption{margin-top:var(--s2)}
.detected{min-height:1.55em}

/* the ambient water line along the foot of the orange band */
.swell{position:absolute;left:0;right:0;bottom:-1px;height:22px;overflow:hidden;pointer-events:none}
.swell svg{display:block;width:120%;transform-origin:50% 100%;height:22px;max-width:none}
.swell path{fill:var(--paper)}
.live .swell svg{animation:swell 7s var(--ease-in-out) infinite alternate}
@keyframes swell{from{transform:translateX(0) scaleY(.8)}to{transform:translateX(-6%) scaleY(1.15)}}

/* ---------- inner page hero ---------- */
.phead{background:var(--paper);border-bottom:2px solid var(--ink);position:relative}
.phead::before{content:"";display:block;height:10px;background:var(--oranje)}
.phead-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--s7);align-items:center;padding-block:var(--s6) var(--s8)}
.phead h1{font-size:clamp(2.6rem,6.2vw,5.4rem);letter-spacing:-.03em;line-height:.98}
.phead .lede{font-size:1.2rem;max-width:48ch;margin-top:var(--s5)}
.kicker{font-family:var(--mono);font-size:var(--t-0);letter-spacing:.02em;margin-bottom:var(--s4);color:var(--oranje-deep)}

/* ---------- sections ---------- */
.band{padding-block:var(--s8)}
.band.tight{padding-top:0}
.shead{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2) var(--s4);flex-wrap:wrap;border-top:2px solid var(--ink);padding-top:var(--s3);margin-bottom:var(--s6)}
.shead h2{font-size:clamp(1.9rem,3.6vw,3rem)}
.prose{max-width:66ch;display:grid;gap:var(--s4)}
.prose h3{font-size:var(--t-3);margin-top:var(--s4)}

.toc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s7);list-style:none;margin:0;padding:0}
.toc li{display:grid;grid-template-columns:minmax(0,15ch) minmax(0,1fr);gap:var(--s4);padding-block:var(--s4);border-bottom:1px solid var(--rule)}
.toc b{font-family:var(--display);font-weight:700;font-size:1.15rem;line-height:1.3}
.toc p{max-width:52ch}

/* The Water Question, rotating */
.question{background:var(--ink);color:var(--paper)}
.question .wrap{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:var(--s6)}
.question .mono{color:var(--oranje)}
.q-stage{display:grid}
.q-stage blockquote{grid-area:1/1;margin:0;font-family:var(--display);font-weight:700;font-size:clamp(2rem,4.8vw,4.2rem);line-height:1.02;letter-spacing:-.025em;text-wrap:balance;transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
.q-stage blockquote[aria-hidden="true"]{opacity:0;transform:translateY(10px);pointer-events:none}
.q-stage blockquote.leaving{opacity:0;transform:translateY(-8px);transition-duration:360ms}
.question p{margin-top:var(--s5);max-width:56ch;color:var(--mist)}
.q-controls{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s5);flex-wrap:wrap}
.q-dots{display:flex;gap:var(--s1)}
.q-dot{width:44px;height:44px;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center}
.q-dot::before{content:"";width:22px;height:4px;border-radius:2px;background:var(--rule-ui);transition:background-color var(--dur-ui) var(--ease-out)}
.q-dot[aria-current="true"]::before{background:var(--oranje)}
.q-pause{font:500 var(--t-0)/1 var(--mono);color:var(--paper);background:none;border:1.5px solid var(--rule-ui);border-radius:var(--r);min-height:44px;padding:0 var(--s3);cursor:pointer}
.no-js .q-controls{display:none}

/* the beat */
.beat{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);list-style:none;margin:0;padding:0;font-family:var(--display);font-weight:500;font-size:clamp(1.3rem,2.4vw,2rem);line-height:1.2}
.beat li::after{content:"·";margin-left:var(--s5);color:var(--oranje-deep)}
.beat li:last-child::after{content:none}

/* host */
.host{background:var(--ink);color:var(--paper);overflow:hidden}
.host .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5)}
.host-row{display:flex;justify-content:space-between;align-items:end;gap:var(--s5) var(--s7);flex-wrap:wrap;border-top:1px solid #29475D;padding-top:var(--s5)}
.host-row .acts{margin-top:0}
.host .label{display:flex;align-items:center;gap:var(--s3);color:var(--oranje)}
.host h2{font-size:clamp(2.5rem,10.4vw,9.4rem);}
@media (max-width:600px){.host h2{font-size:12vw}}
.host h2{font-weight:800;text-transform:uppercase;letter-spacing:-.035em;line-height:.86;margin-top:var(--s4);font-variation-settings:"opsz" 96}
.host h2 span{display:block;color:var(--oranje)}
.host p{color:var(--mist);max-width:44ch;font-size:1.125rem}
.host .acts .btn-line{border-color:var(--paper);color:var(--paper)}
@media (hover:hover) and (pointer:fine){.host .acts .btn-line:hover{background:rgba(242,245,244,.1)}}
.meter{display:inline-flex;align-items:flex-end;gap:3px;height:18px}
.meter i{display:block;width:4px;height:100%;background:var(--oranje);transform-origin:bottom;transform:scaleY(.35)}
.live .meter i{animation:level 1.1s var(--ease-in-out) infinite alternate}
.meter i:nth-child(2){animation-delay:-.3s!important;animation-duration:.8s!important}
.meter i:nth-child(3){animation-delay:-.7s!important;animation-duration:1.3s!important}
.meter i:nth-child(4){animation-delay:-.15s!important;animation-duration:.95s!important}
.meter i:nth-child(5){animation-delay:-.5s!important}
@keyframes level{0%{transform:scaleY(.25)}60%{transform:scaleY(.9)}100%{transform:scaleY(.5)}}

/* newsletter */
.weekly{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s7);align-items:start}
.weekly h2{font-size:clamp(2rem,4vw,3.3rem)}
.sample{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r);padding:var(--s5)}
.sample header{display:flex;justify-content:space-between;gap:var(--s3);border-bottom:2px solid var(--ink);padding-bottom:var(--s2);margin-bottom:var(--s2)}
.sample dl{margin:0;display:grid;grid-template-columns:minmax(0,11ch) minmax(0,1fr)}
.sample dt,.sample dd{padding-block:var(--s3);border-bottom:1px solid var(--rule);margin:0}
.sample dt{font-family:var(--display);font-weight:700;color:var(--oranje-deep)}

.signup{margin-top:var(--s5);display:grid;gap:var(--s3);max-width:520px}
.field{display:grid;gap:var(--s1)}
.field label{font-family:var(--display);font-weight:500;font-size:.95rem}
.field input{font:400 1rem/1.3 var(--body);color:var(--ink);background:var(--sheet);border:1.5px solid var(--rule-ui);border-radius:var(--r);min-height:48px;padding:0 var(--s3);width:100%;transition:border-color var(--dur-ui) var(--ease-out)}
.field input:focus-visible{outline:3px solid var(--oranje);outline-offset:0;border-color:var(--ink)}
.field input[aria-invalid="true"]{border-color:#B3261E}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:.95rem}
.status{min-height:1.6em;font-family:var(--display);font-weight:500}
.status[data-state="ok"]{color:var(--tide)}
.status[data-state="error"]{color:#B3261E}
.signup.done .field,.signup.done .row2,.signup.done .btn{display:none}

/* print teaser + covers */
.print{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--s7);align-items:center}
.print h2{font-size:clamp(2rem,4vw,3.3rem)}
.print ul{margin:var(--s5) 0 0;padding-left:1.1em;display:grid;gap:var(--s2)}
.cover{aspect-ratio:3/4;width:100%;max-width:420px;background:var(--oranje);border-radius:2px;padding:6%;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 1px 0 var(--rule),0 22px 44px -26px rgba(12,34,51,.55);position:relative;overflow:hidden;container-type:inline-size}
.cover .cplate{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.84;letter-spacing:-.035em;font-size:17cqi;position:relative;z-index:1}
.cover .cmeta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:max(12px,3.2cqi);border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);padding-block:1.5cqi;margin-top:3cqi;position:relative;z-index:1}
.cover .portrait{position:absolute;inset:36% 10% 0 10%;background:radial-gradient(circle at 50% 30%,var(--ink) 0 16%,transparent 16.4%),radial-gradient(ellipse at 50% 100%,var(--ink) 0 47%,transparent 47.4%)}
.cover .who{position:relative;background:var(--paper);padding:4cqi;border-radius:2px;display:grid;gap:1.5cqi}
.cover .who b{font-family:var(--display);font-size:max(15px,7.4cqi);line-height:1;letter-spacing:-.02em;overflow-wrap:anywhere}
.cover .who span{font-family:var(--display);font-size:max(13px,4.4cqi);line-height:1.15;overflow-wrap:anywhere}
.cover .who small{font-family:var(--mono);font-size:max(12px,3cqi);color:var(--oranje-deep)}

/* invite band */
.invite{background:var(--oranje)}
.invite .wrap{display:flex;justify-content:space-between;align-items:end;gap:var(--s6);flex-wrap:wrap}
.invite h2{font-size:clamp(2rem,4.6vw,3.8rem);max-width:18ch}
.addr{font-family:var(--mono);font-size:.9rem;user-select:all;color:var(--ink)}
.contact{display:flex;gap:var(--s3) var(--s4);flex-wrap:wrap;align-items:center;margin-top:var(--s5)}

/* ---------- be featured ---------- */
.mult{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s6);align-items:stretch}
.source{background:var(--ink);color:var(--paper);border-radius:var(--r);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4)}
.source .clock{font-family:var(--display);font-weight:800;font-size:clamp(3rem,5.4vw,4.4rem);line-height:.9;color:var(--oranje);font-variant-numeric:tabular-nums;white-space:nowrap}
.wave{display:flex;align-items:center;gap:2px;height:64px;position:relative}
.wave i{flex:1;background:var(--mist);border-radius:1px;min-width:2px;transition:background-color var(--dur-ui) var(--ease-out)}
.wave i.past{background:var(--oranje)}
.src-controls{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;margin-top:auto}
.src-controls button{font:500 var(--t-0)/1 var(--mono);color:var(--paper);background:none;border:1.5px solid var(--rule-ui);border-radius:var(--r);min-height:44px;padding:0 var(--s3);cursor:pointer}
.no-js .src-controls{display:none}
.outs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--s5);list-style:none;margin:0;padding:0;counter-reset:o}
.outs li{border-top:2px solid var(--rule);padding-block:var(--s4);transition:border-color var(--dur-ui) var(--ease-out)}
.outs b{display:flex;justify-content:space-between;gap:var(--s2);font-family:var(--display);font-size:1.15rem;line-height:1.2;margin-bottom:var(--s1)}
.outs b small{font:500 var(--t-0)/1.4 var(--mono);color:var(--oranje-deep);white-space:nowrap}
.outs li.lit{border-top-color:var(--oranje)}
.js .outs li:not(.lit) b small{visibility:hidden}

.qs{list-style:none;margin:0;padding:0;columns:2;column-gap:var(--s7)}
.qs li{break-inside:avoid;font-family:var(--display);font-weight:500;font-size:1.35rem;line-height:1.3;padding-block:var(--s3);border-bottom:1px solid var(--rule)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5);counter-reset:s}
.steps li{counter-increment:s;border-top:2px solid var(--ink);padding-top:var(--s3)}
.steps li::before{content:counter(s);font-family:var(--mono);font-size:var(--t-0);display:block;margin-bottom:var(--s2);color:var(--oranje-deep)}
.steps b{font-family:var(--display);font-size:1.15rem;display:block;margin-bottom:var(--s1)}

.builder{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s7);align-items:center}
.builder form{display:grid;gap:var(--s4);max-width:520px}
.builder h2{font-size:clamp(2rem,4vw,3.3rem)}
.gets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);list-style:none;margin:0;padding:0}
.gets li{border-top:2px solid var(--ink);padding-top:var(--s3)}
.gets b{font-family:var(--display);font-size:1.15rem;display:block;margin-bottom:var(--s1)}

/* ---------- partner / about / magazine ---------- */
.aud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6) var(--s5);list-style:none;margin:0;padding:0}
.aud li{border-top:1px solid var(--rule);padding-top:var(--s3)}
.aud b{font-family:var(--display);font-size:1.2rem;display:block;margin-bottom:var(--s1)}
.formats{display:grid;gap:0;list-style:none;margin:0;padding:0}
.formats li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s5);padding-block:var(--s5);border-bottom:1px solid var(--rule)}
.formats b{font-family:var(--display);font-size:var(--t-3);line-height:1.1}
.rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s7);list-style:none;margin:0;padding:0}
.rules li{display:grid;gap:var(--s1)}
.rules b{font-family:var(--display);font-size:1.2rem}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s7);align-items:start}
.split h2{font-size:clamp(2rem,4vw,3.3rem)}
.cadence{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
.cadence > div{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r);padding:var(--s5);display:grid;gap:var(--s2);align-content:start}
.cadence b{font-family:var(--display);font-size:var(--t-3);line-height:1.1}

/* ---------- footer ---------- */
footer.site{background:var(--ink);color:var(--paper);padding-block:var(--s7) var(--s6)}
footer.site .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s5) var(--s7)}
footer.site a{color:var(--paper)}
footer.site .brand{color:var(--paper)}
footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 var(--s5)}
footer.site ul a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--display)}
footer.site .fine{grid-column:1/-1;color:var(--mist);font-size:.92rem;border-top:1px solid #29475D;padding-top:var(--s4);display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}

/* ---------- motion: page-load nameplate settle (once) ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .plate .ch{animation:settle 620ms var(--ease-out) both;animation-delay:calc(var(--n)*32ms)}
  @keyframes settle{from{transform:translateY(.18em);opacity:0}}
}
@media (prefers-reduced-motion:reduce){
  .live .swell svg,.live .meter i{animation:none}
  .q-stage blockquote{transition:opacity 200ms linear}
  .q-stage blockquote[aria-hidden="true"],.q-stage blockquote.leaving{transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero-grid,.weekly,.print,.phead-grid,.mult,.question .wrap,.builder,.split{grid-template-columns:minmax(0,1fr)}
  .toc,.rules{grid-template-columns:minmax(0,1fr)}
  .outs,.aud,.gets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qs{columns:1}
  .cover{max-width:340px}
  .phead-grid{gap:var(--s6)}
}
@media (max-width:600px){
  .plot-wide{display:none}.plot-narrow{display:block}
  .toc li,.formats li{grid-template-columns:minmax(0,1fr);gap:var(--s1)}
  .outs,.steps,.aud,.gets,.cadence,.row2{grid-template-columns:minmax(0,1fr)}
  .links{gap:0 var(--s3)}.links a{font-size:.92rem}
  .nav .btn{display:none}
  .issue{flex-direction:column}
  .plate{font-size:clamp(3rem,17vw,5rem)}
  footer.site .wrap{grid-template-columns:minmax(0,1fr)}
  .band{padding-block:var(--s7)}
}

/* guest FAQ */
.faq{display:grid;border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{font-family:var(--display);font-weight:700;font-size:1.2rem;line-height:1.25;min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);cursor:pointer;list-style:none;padding-block:var(--s3)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-weight:400;font-size:1.2rem;color:var(--oranje-deep);transition:transform var(--dur-ui) var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:var(--s4);max-width:60ch}