/* FWOGAMI — "SHEET 1 OF 1: HOW TO FOLD A POND"
   CANON: face never animates · all copy lowercase · every viewport shows dashed blue linework
   · teal is artwork-only (canonical pond color) — ui accents stay drafting blue + rationed coral
   · one verb: fold. */

:root{
  --desk:#F1ECDF;
  --sheet:#FBF9F2;
  --kraft:#E7DCC4;
  --ink:#22315E;
  --blue:#3B5BDB;
  --blue-faint:#C9D4F2;
  --pond-light:#63D3C9;
  --pond-mid:#3FBFB4;
  --pond-deep:#2A9E93;
  --fwog:#79AC41;
  --fwog-shade:#5E8F33;
  --coral:#F0876B;
  --coral-deep:#D96A4E;
  --shadow-tight:0 2px 4px rgba(60,40,20,.18);
  --shadow-wide:0 10px 30px rgba(60,40,20,.10);
  --ease:cubic-bezier(.4,0,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --maxw:1180px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  background:
    repeating-linear-gradient(0deg, rgba(34,49,94,.022) 0 .5px, transparent .5px 3px),
    repeating-linear-gradient(90deg, rgba(34,49,94,.022) 0 .5px, transparent .5px 3px),
    var(--desk);
  color:var(--ink);
  font-family:'Jost',sans-serif;
  font-weight:400;
  font-size:17.5px;
  line-height:1.65;
  overflow-x:clip;
}
body.booting{overflow:hidden}
.mono{font-family:'IBM Plex Mono',monospace}
img{max-width:100%}
a{color:var(--blue)}
::selection{background:var(--blue-faint);color:var(--ink)}
html{scrollbar-color:var(--blue-faint) var(--desk)}
:focus-visible{outline:2.5px dashed var(--blue);outline-offset:3px;border-radius:2px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
section{scroll-margin-top:84px}

h1,h2,h3{font-weight:700;line-height:1.12;letter-spacing:-.01em}
h2{font-size:clamp(1.7rem,3.6vw,2.5rem);margin-bottom:.4em;display:flex;align-items:baseline;gap:.6em;flex-wrap:wrap}
.h2-fig{font-size:.5em;font-weight:500;color:var(--blue);border:1.4px solid var(--blue);border-radius:99px;padding:.15em .8em;white-space:nowrap}

/* every content section sits on the sheet rhythm */
.figures,.bench,.specs,.assembly,.map,.join{max-width:var(--maxw);margin:0 auto;padding:5.5rem 1.4rem 2rem}

/* paper surface */
.sheet{
  background:var(--sheet);
  border:1.4px solid rgba(34,49,94,.28);
  box-shadow:var(--shadow-tight),var(--shadow-wide);
  position:relative;
}
/* dog-eared corner */
.fig::after,.partslist::after,.join-sheet::after{
  content:"";position:absolute;top:0;right:0;width:26px;height:26px;
  background:linear-gradient(225deg, var(--desk) 0 49%, var(--kraft) 50%, #DDD0B2 100%);
  border-left:1px solid rgba(34,49,94,.18);border-bottom:1px solid rgba(34,49,94,.18);
}

.margin-note{
  font-family:'Architects Daughter',cursive;
  color:rgba(34,49,94,.72);
  font-size:.95rem;
  display:inline-block;
  transform:rotate(-1.2deg);
}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:1rem;
  padding:.55rem 1.2rem;
  background:var(--desk);
  border-bottom:1.6px dashed var(--blue);
}
.brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--ink);font-weight:700;font-size:1.15rem}
.brand-sheet{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:.68rem;color:var(--blue);border:1px solid var(--blue-faint);padding:.1em .5em;border-radius:2px}
.topnav{margin-left:auto;display:flex;gap:1.4rem;align-items:center}
.topnav a{
  color:var(--ink);text-decoration:none;font-weight:500;font-size:.95rem;
  background-image:linear-gradient(var(--coral),var(--coral));
  background-repeat:no-repeat;background-size:0% 2px;background-position:0 100%;
  transition:background-size .3s var(--ease);
  padding-bottom:2px;
}
.topnav a:hover{background-size:100% 2px}
.topnav a.nav-buy{
  color:var(--ink);background:var(--fwog);border:1.4px solid rgba(34,49,94,.4);
  padding:.32em .9em;box-shadow:var(--shadow-tight);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.topnav a.nav-buy:hover{transform:translateY(-3px) rotate(-.5deg);box-shadow:0 6px 14px rgba(60,40,20,.18)}
.burger{display:none;margin-left:auto;background:none;border:1.4px solid var(--blue);width:40px;height:36px;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;align-items:center;border-radius:2px}
.burger span{display:block;width:20px;height:2px;background:var(--blue);transition:transform .3s var(--ease),opacity .3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{max-width:var(--maxw);margin:0 auto;padding:3.2rem 1.4rem 3rem}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:3rem;align-items:center}
.kicker{color:var(--blue);font-size:.78rem;letter-spacing:.04em;margin-bottom:1.1rem}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem)}
.hero-so{font-size:clamp(1.5rem,3.2vw,2.3rem);font-weight:700;margin:.35em 0 .6em}
.draw-underline{
  background-image:linear-gradient(var(--blue),var(--blue));
  background-repeat:no-repeat;background-size:0% 3px;background-position:0 96%;
  transition:background-size 1.1s var(--ease) .2s;
  padding-bottom:.08em;
}
.loaded .draw-underline{background-size:100% 3px}
.hero-sub{max-width:34em;color:rgba(34,49,94,.85)}
.stepline{display:flex;align-items:baseline;gap:1em;margin-top:1.6rem;min-height:1.8em}
.stepnum{color:var(--blue);font-size:.95rem;border:1.4px solid var(--blue);border-radius:99px;padding:.1em .75em;white-space:nowrap}
.stepcap{font-weight:500}
.plotpct{color:rgba(34,49,94,.6);font-size:.8rem;margin-top:.5rem;min-height:1.4em}
.hop-hint{display:flex;gap:1.2em;align-items:baseline;margin-top:.5rem;font-size:.92rem;color:rgba(34,49,94,.75)}
.hop-hint .mono{color:var(--blue)}
.hero-ctas{display:flex;gap:1rem;margin-top:1.6rem;flex-wrap:wrap}
.cta{
  display:inline-block;text-decoration:none;font-weight:700;font-size:1.02rem;
  padding:.62em 1.5em;border:1.6px solid rgba(34,49,94,.45);color:var(--ink);
  box-shadow:var(--shadow-tight);position:relative;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
  background:var(--sheet);
}
.cta-buy{background:var(--fwog)}
.cta:hover{transform:translateY(-4px) rotate(-.5deg);box-shadow:0 8px 18px rgba(60,40,20,.16)}
.cta:active{transform:scale(.97) rotate(1deg)}

.hero-sheetwrap{position:relative}
.titleblock{
  position:absolute;top:-14px;right:-6px;z-index:3;
  background:var(--sheet);border:1.4px solid rgba(34,49,94,.4);
  font-size:.6rem;line-height:1.7;padding:.45em .8em;
  box-shadow:var(--shadow-tight);color:rgba(34,49,94,.85);
}
.titleblock div:first-child{font-weight:500;color:var(--blue)}
.sheet-scene{position:relative;perspective:1000px;filter:drop-shadow(0 14px 30px rgba(60,40,20,.13))}
.sheet-scene svg{display:block;width:100%;height:auto}
.hstate,.bstate{opacity:0;transition:opacity .45s var(--ease)}
.hstate.cur,.bstate.cur{opacity:1}
/* crease plotting: lines sweep in left-to-right */
#hs1 .plotlines,#bs1 g{clip-path:inset(0 100% 0 0);transition:clip-path 1.9s var(--ease) .2s}
#hs1.cur .plotlines,#bs1.cur g{clip-path:inset(0 0 0 0)}
html.shot #hs1 .plotlines,html.shot #bs1 g{clip-path:none}
.svg-label{font-size:13px;fill:var(--ink);opacity:.85;font-family:'IBM Plex Mono',monospace}
.rail-label{font-size:9px;fill:var(--blue);font-family:'IBM Plex Mono',monospace;opacity:.8}

/* the one parameterized flap component (hero + bench share it) */
.flap{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(135deg, #F3EFE3 0%, #E9E3D0 55%, #DCD2B8 100%);
  clip-path:var(--clip, polygon(0 0,100% 0,100% 100%,0 100%));
  transform-origin:var(--origin,50% 0);
  backface-visibility:hidden;
  border:1px solid rgba(34,49,94,.2);
}
.flap.folding{
  opacity:1;
  animation:flapfold var(--dur,.75s) var(--ease) forwards;
}
@keyframes flapfold{
  from{transform:rotate3d(var(--fx,1),var(--fy,0),0,var(--fa,179deg))}
  to{transform:rotate3d(var(--fx,1),var(--fy,0),0,0deg)}
}
.eyes{opacity:0}
.eyes.stamped{opacity:1;animation:stamp .35s var(--spring)}
@keyframes stamp{0%{transform:scale(1.6);opacity:0}60%{transform:scale(.94);opacity:1}100%{transform:scale(1)}}
.eyes,.hat,.perch{transform-box:fill-box;transform-origin:center}
.hat{opacity:0;transform:translateY(-14px) rotate(-8deg);transition:opacity .5s var(--ease),transform .5s var(--spring)}
.hat.on{opacity:1;transform:translateY(0) rotate(0)}
#hopWrap,#bHopWrap{transform-box:fill-box;transform-origin:center bottom}
#hopScale,#bHopScale{transform-box:fill-box;transform-origin:center bottom}
.perch{transition:opacity .6s var(--ease)}
#heroArrow{transition:opacity .4s var(--ease)}
.margin-note#heroNote{opacity:0;transition:opacity .8s var(--ease);margin-top:.6rem}
#heroNote.on{opacity:1}
.fold-again{
  margin-top:.5rem;background:none;border:none;color:var(--blue);cursor:pointer;
  font-size:.85rem;padding:.2em .4em;border-bottom:1.4px dashed var(--blue);
}
.fold-again:hover{color:var(--coral-deep);border-color:var(--coral-deep)}

/* part no. strip */
.partno{
  display:flex;align-items:center;gap:0;margin-top:3rem;
  border:1.6px solid rgba(34,49,94,.5);background:var(--sheet);
  box-shadow:var(--shadow-tight);max-width:640px;
}
.partno-label{
  background:var(--ink);color:var(--sheet);font-size:.78rem;
  padding:.7em 1em;letter-spacing:.06em;white-space:nowrap;
}
.ca-value{flex:1;padding:.7em 1em;font-size:.85rem;overflow-wrap:anywhere;color:var(--ink)}
.copy-tab{
  position:relative;border:none;border-left:1.6px solid rgba(34,49,94,.5);
  background:var(--blue-faint);cursor:pointer;font-size:.8rem;
  padding:.7em 1.1em;perspective:300px;color:var(--ink);min-width:86px;
}
.copy-face{display:block;transition:transform .4s var(--ease),opacity .3s}
.copy-back{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--coral);color:#fff;transform:rotateX(179deg);backface-visibility:hidden;transform-origin:50% 0}
.copy-front{backface-visibility:hidden}
.copy-tab.copied .copy-back{transform:rotateX(0)}
.copy-tab.copied .copy-front{opacity:0}

/* ---------- crease ticker ---------- */
.ticker{
  position:relative;margin:3.5rem 0 0;height:64px;overflow:clip;
  border-top:1.4px dashed var(--blue);border-bottom:1.4px dashed var(--blue);
  background:var(--sheet);perspective:600px;
}
.ticker-half{position:absolute;left:0;right:0;height:32px;overflow:clip}
.ticker-top{top:0;transform:rotateX(7deg);transform-origin:50% 100%;background:linear-gradient(180deg,var(--sheet),#F0EBDC)}
.ticker-bottom{bottom:0;transform:rotateX(-7deg);transform-origin:50% 0;background:linear-gradient(0deg,var(--sheet),#EAE4D2)}
.ticker-crease{position:absolute;top:50%;left:0;right:0;height:1px;background:rgba(34,49,94,.25)}
.ticker-track{
  position:absolute;white-space:nowrap;font-size:.82rem;color:var(--ink);letter-spacing:.03em;
  animation:tick 42s linear infinite;will-change:transform;
}
.ticker-top .ticker-track{bottom:2px}
.ticker-bottom .ticker-track{top:2px}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track .vf{color:var(--blue)}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- figures ---------- */
.figgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem;margin-top:1.4rem}
.fig{padding:1.2rem 1.3rem 1.4rem;margin:0}
.fig svg{width:100%;height:auto;max-height:190px}
.fignum{color:var(--blue);font-size:.78rem;border:1px solid var(--blue-faint);padding:.05em .5em;border-radius:2px;margin-right:.5em}
figcaption{font-size:.98rem;color:rgba(34,49,94,.88)}
.fig .margin-note{position:absolute;right:1rem;bottom:.5rem;font-size:.85rem}
.closing-line{
  text-align:center;font-size:clamp(1.15rem,2.4vw,1.5rem);font-weight:500;
  margin:4.5rem auto 1rem;max-width:27em;
}
.fig-photo img{display:block;width:100%;max-width:340px;height:auto;margin:0 auto .8rem;border:1.4px solid rgba(34,49,94,.25)}

/* ---------- panorama (the banner, taped to the desk) ---------- */
.panorama{max-width:var(--maxw);margin:0 auto;padding:4.5rem 1.4rem 0}
.pano-sheet{padding:1rem 1rem 1.1rem;margin:0;transform:rotate(-.4deg)}
.pano-sheet img{display:block;width:100%;height:auto;border:1.4px solid rgba(34,49,94,.25)}
.pano-sheet figcaption{font-size:.92rem;color:rgba(34,49,94,.85);margin-top:.8rem}
.tape{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(1.5deg);
  width:110px;height:26px;background:rgba(231,220,196,.85);
  border-left:1px dashed rgba(34,49,94,.25);border-right:1px dashed rgba(34,49,94,.25);
  z-index:2;
}

/* reveal = paper unfold */
[data-reveal]{opacity:0;transform:perspective(900px) rotateX(-42deg);transform-origin:50% 0;transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal]:nth-child(even){transform-origin:50% 100%;transform:perspective(900px) rotateX(42deg)}
[data-reveal].open{opacity:1;transform:perspective(900px) rotateX(0)}

/* ---------- bench ---------- */
.bench-sub{color:rgba(34,49,94,.8);margin-bottom:1.6rem}
.bench-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:2rem;align-items:start}
.bench-sheetwrap .sheet-scene{max-width:560px}
.bench-arrow{
  position:absolute;background:none;border:none;cursor:pointer;padding:6px;
  opacity:0;transition:opacity .4s var(--ease),transform .4s var(--ease);
  filter:drop-shadow(0 2px 3px rgba(60,40,20,.25));
}
.bench-arrow.show{opacity:1}
.bench-arrow:hover{transform:scale(1.08)}
.ghost-hand{
  position:absolute;font-size:1.6rem;opacity:0;pointer-events:none;
  filter:grayscale(1) opacity(.7);
}
.ghost-hand.hinting{animation:ghost 1.6s var(--ease) infinite}
@keyframes ghost{0%{opacity:0;transform:translate(0,0)}25%{opacity:.8}70%{opacity:.8;transform:translate(var(--gx,60px),var(--gy,60px))}100%{opacity:0;transform:translate(var(--gx,60px),var(--gy,60px))}}
#benchScene.misfold{animation:crumple .2s var(--ease)}
@keyframes crumple{25%{transform:rotate(.8deg) scale(.99)}75%{transform:rotate(-.8deg) scale(1.005)}}
.paper-burst{position:absolute;inset:0;pointer-events:none;overflow:visible}
.ptri{
  position:absolute;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;
  border-bottom:10px solid var(--fwog);opacity:.9;
  animation:drift 1.4s var(--ease) forwards;
}
.ptri.blue{border-bottom-color:var(--pond-mid)}
.ptri.cream{border-bottom-color:var(--kraft)}
@keyframes drift{
  0%{transform:translate(0,0) rotate(0)}
  100%{transform:translate(var(--dx,30px),var(--dy,70px)) rotate(var(--dr,220deg));opacity:0}
}
.bench-cap{margin-top:1rem;font-size:.95rem}
.bench-cap .mono{color:var(--blue);margin-right:.7em}
.bench-panel{padding:1.4rem 1.5rem}
.bench-panel h3{font-size:1rem;color:var(--blue);font-weight:500;letter-spacing:.05em;margin-bottom:.8rem}
.bench-stats{list-style:none;font-size:.9rem;line-height:2.1}
.bench-stats span{color:var(--blue)}
.stat-note{margin-left:.6em;color:rgba(34,49,94,.55) !important;font-size:.8rem}
.bench-help{font-size:.9rem;color:rgba(34,49,94,.75);margin:1rem 0}
.refold{
  background:none;border:1.4px dashed var(--blue);color:var(--blue);cursor:pointer;
  padding:.4em 1.1em;font-size:.85rem;border-radius:2px;
  transition:background .25s var(--ease);
}
.refold:hover{background:var(--blue-faint)}
.bench-panel .margin-note{display:block;margin-top:1.2rem}

/* ---------- specs ---------- */
.specs-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:start;margin-top:1.2rem}
.cutsheet{padding:1.3rem}
.cutsheet svg{width:100%;height:auto;display:block}
.cutsheet .margin-note{position:absolute;bottom:.6rem;right:1.1rem}
.partslist{padding:1.4rem 1.6rem}
.partslist h3{font-size:.95rem;color:var(--blue);font-weight:500;letter-spacing:.06em;margin-bottom:.9rem}
.checklist{list-style:none;font-size:.88rem;line-height:2.2}
.checkbox{width:16px;height:16px;vertical-align:-3px;margin-right:.5em}
.tick{stroke-dasharray:20;stroke-dashoffset:20}
.open .tick{transition:stroke-dashoffset .5s var(--ease) var(--tickdelay,.2s);stroke-dashoffset:0}
.count{color:var(--blue)}
.gauge-title{margin-top:1.6rem}
.gauge{list-style:none;font-size:.82rem;line-height:2;border-top:1px dashed var(--blue-faint);padding-top:.6rem}
.gauge li{display:flex;justify-content:space-between;gap:1em}
.gauge span{color:rgba(34,49,94,.55)}
.gauge.live span{color:var(--blue)}
.gauge span.up{color:#4C8A3F}
.gauge span.downv{color:var(--coral-deep)}
.dexlink{display:inline-flex;align-items:center;gap:.5em;font-size:.78rem;color:rgba(34,49,94,.6);text-decoration:none;margin-top:1rem;border-bottom:1px dashed rgba(34,49,94,.35);padding-bottom:2px}
.dexlink:hover{color:var(--blue);border-color:var(--blue)}
.dexlink img{opacity:.55}

/* ---------- assembly ---------- */
.assembly-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.3rem;margin-top:1.4rem;perspective:1400px}
.panel{transform-style:preserve-3d}
.panel .panel-paper{height:100%;padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.6rem}
.panel svg{width:100%;height:auto;max-height:110px}
/* fold open: paper rotates, copy fades after (text never folds) */
.panel .panel-paper{opacity:0;transform:rotateY(-88deg);transform-origin:0 50%;transition:transform .8s var(--ease) var(--pdelay,0s),opacity .5s var(--ease) var(--pdelay,0s)}
.panel:nth-child(even) .panel-paper{transform:rotateY(88deg);transform-origin:100% 50%}
.panel.open .panel-paper{opacity:1;transform:rotateY(0)}
.panel .panel-copy{opacity:0;transition:opacity .5s var(--ease) calc(var(--pdelay,0s) + .55s)}
.panel.open .panel-copy{opacity:1}
.pstep{color:var(--blue);font-size:.75rem;border:1px solid var(--blue-faint);padding:.05em .5em;border-radius:2px;align-self:flex-start}
.panel h3{font-size:1.12rem;margin:.2em 0}
.panel p{font-size:.9rem;color:rgba(34,49,94,.82)}
.plink{display:inline-flex;align-items:center;gap:.45em;font-size:.78rem;color:var(--blue);text-decoration:none;border-bottom:1px dashed var(--blue);padding-bottom:1px;margin-right:.9em;margin-top:.4rem}
.plink:hover{color:var(--coral-deep);border-color:var(--coral-deep)}
#ca2{margin:2.6rem auto 0}

/* ---------- map ---------- */
.mapline{position:relative;margin-top:2.2rem;padding-left:44px}
.map-path{position:absolute;left:18px;top:0;width:8px;height:100%}
.milestones{list-style:none;display:flex;flex-direction:column;gap:2.4rem;max-width:640px}
.milestone{display:flex;gap:1.3rem;padding:1.1rem 1.3rem;align-items:center}
.milestone svg{width:76px;flex:none}
.mnum{color:var(--blue);font-size:.75rem;letter-spacing:.05em}
.milestone h3{font-size:1.15rem;margin:.15em 0 .2em}
.milestone p{font-size:.92rem;color:rgba(34,49,94,.82)}
.done-tag{font-size:.72rem;color:var(--sheet);background:var(--fwog-shade);padding:.12em .6em;border-radius:99px;margin-left:.5em;white-space:nowrap}
.blank-square{background:none;border:none;cursor:pointer;padding:0;flex:none;width:76px}
.blank-square svg{width:76px}
.blank-square.jiggle{animation:jiggle .45s var(--spring)}
@keyframes jiggle{25%{transform:perspective(500px) rotateY(14deg)}70%{transform:perspective(500px) rotateY(-9deg)}}
.not-yet{font-size:1rem}

/* ---------- join / cta ---------- */
.join{padding-bottom:5rem}
.join-sheet{padding:3rem 2.4rem;text-align:center;max-width:720px;margin:0 auto;
  background-image:
    repeating-linear-gradient(0deg, rgba(59,91,219,.05) 0 1px, transparent 1px 26px);
}
.join-sheet h2{justify-content:center}
.join-sheet p{max-width:32em;margin:0 auto}
.join-sheet .hero-ctas{justify-content:center;margin-top:1.8rem}

/* ---------- legend (footer) ---------- */
.legend{
  background:var(--kraft);
  border-top:2px solid rgba(34,49,94,.45);
  padding:3rem 1.4rem 2.4rem;
}
.legend-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.4rem}
.legend h3{font-size:.8rem;font-weight:500;letter-spacing:.1em;color:var(--blue);margin-bottom:1rem}
.foldkey{list-style:none;font-size:.88rem;line-height:2.2}
.foldkey svg{vertical-align:middle;margin-right:.5em}
.mute{margin-top:1.2rem;background:none;border:1.4px solid rgba(34,49,94,.4);color:var(--ink);cursor:pointer;padding:.35em 1em;font-size:.8rem;border-radius:2px}
.mute:hover{background:var(--sheet)}
.mute[aria-pressed="true"]{background:var(--blue-faint)}
.revtable{border-collapse:collapse;font-size:.8rem;width:100%}
.revtable td{border:1px solid rgba(34,49,94,.35);padding:.4em .8em}
.revtable td:first-child{color:var(--blue);white-space:nowrap}
.partno-footer{margin-top:1.4rem;max-width:none}
.social-tabs{display:flex;gap:.8rem;flex-wrap:wrap}
.stab{
  display:inline-flex;align-items:center;gap:.5em;text-decoration:none;color:var(--ink);
  background:var(--sheet);border:1.4px solid rgba(34,49,94,.4);padding:.4em 1em;font-size:.9rem;
  box-shadow:var(--shadow-tight);position:relative;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.stab::after{content:"";position:absolute;top:0;right:0;width:12px;height:12px;background:linear-gradient(225deg,var(--kraft) 0 49%,#DDD0B2 50%,#D0C3A2 100%)}
.stab:hover{transform:translateY(-4px) rotate(-.5deg);box-shadow:0 6px 14px rgba(60,40,20,.16)}
.fineprint{font-size:.66rem;line-height:1.8;color:rgba(34,49,94,.65);margin-top:1.3rem}
.signoff{font-family:'Architects Daughter',cursive;margin-top:1.4rem;font-size:1.05rem;transform:rotate(-1.4deg)}

/* ---------- rail pond + dragonfly ---------- */
#railPond{position:fixed;left:14px;top:50%;transform:translateY(-50%);width:90px;z-index:5;display:none}
@media (min-width:1100px){#railPond{display:block}}
#railFacets polygon{opacity:0;transition:opacity .8s var(--ease)}
#railFacets polygon.on{opacity:1}
#dfly{position:absolute;z-index:40;pointer-events:none;opacity:0;transition:opacity .5s var(--ease);will-change:transform}
#dfly.on{opacity:1}
#dfly.clickable{pointer-events:auto;cursor:pointer}
.df-w2{opacity:0}
.dfly-flap .df-w1{animation:wingA .18s steps(2) infinite}
.dfly-flap .df-w2{animation:wingB .18s steps(2) infinite}
@keyframes wingA{50%{opacity:0}}
@keyframes wingB{50%{opacity:1}}

/* click garnish */
.crease-tick{
  position:fixed;width:34px;height:2px;background:none;pointer-events:none;z-index:60;
  border-top:2px dashed var(--blue);opacity:.8;
  animation:tickfade .6s var(--ease) forwards;
}
@keyframes tickfade{to{opacity:0;transform:scaleX(1.6)}}
.click-tri{position:fixed;pointer-events:none;z-index:60;width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:9px solid var(--pond-mid);
  animation:drift 1.1s var(--ease) forwards;
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:2.2rem}
  .hero-sheetwrap{max-width:480px;margin:0 auto;width:100%}
  .specs-grid{grid-template-columns:1fr}
  .bench-grid{grid-template-columns:1fr}
  .assembly-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .legend-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .topnav{
    position:absolute;top:100%;left:0;right:0;
    background:var(--desk);border-bottom:1.6px dashed var(--blue);
    flex-direction:column;align-items:flex-start;gap:0;
    display:none;padding:.4rem 0;
  }
  .topnav.openmenu{display:flex}
  .topnav a{padding:.7rem 1.4rem;width:100%}
  .topnav a.nav-buy{margin:.5rem 1.4rem .6rem;width:auto;text-align:center}
  .burger{display:flex}
  .figgrid{grid-template-columns:1fr}
  /* vertical spine: re-hinge on rotateX */
  .assembly-strip{grid-template-columns:1fr;perspective:1000px}
  .panel .panel-paper,.panel:nth-child(even) .panel-paper{transform:rotateX(-70deg);transform-origin:50% 0}
  .panel.open .panel-paper{transform:rotateX(0)}
  .legend-grid{grid-template-columns:1fr}
  .milestone{flex-direction:row;align-items:flex-start}
  .milestone svg,.blank-square{width:58px}
  .mapline{padding-left:34px}
  .map-path{left:12px}
  .partno{flex-wrap:wrap}
  .partno-label{flex:1 1 100%;padding:.5em 1em}
  .ca-value{flex:1 1 auto;font-size:.78rem}
  h2{gap:.45em}
}
@media (max-width:420px){
  body{font-size:16.5px}
  .titleblock{display:none}
}

/* ---------- ?shot= capture mode ---------- */
html.shot *,html.shot *::before,html.shot *::after{animation:none !important;transition:none !important}
html.shot [data-reveal],html.shot .panel .panel-paper,html.shot .panel .panel-copy{opacity:1 !important;transform:none !important}
html.shot .bstate,html.shot .hstate{opacity:0}
html.shot #hs7,html.shot #bs7{opacity:1}
html.shot .eyes{opacity:1}
html.shot .tick{stroke-dashoffset:0}
html.shot .plotpct{display:none}
html.shot #dfly{display:none}

/* ---------- tier 0: reduced motion floor ---------- */
@media (prefers-reduced-motion: reduce){
  html:not(.force-motion) *,html:not(.force-motion) *::before,html:not(.force-motion) *::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.22s !important;
  }
  html:not(.force-motion) [data-reveal]{transform:none;transition:opacity .22s var(--ease)}
  html:not(.force-motion) .panel .panel-paper,html:not(.force-motion) .panel:nth-child(even) .panel-paper{transform:none;transition:opacity .22s var(--ease)}
  html:not(.force-motion) .ticker-track{animation:none;transform:none}
  html:not(.force-motion) #dfly{display:none}
  html:not(.force-motion) .ghost-hand{display:none}
}