/* lotus.fromelelectronics.com. Fromel type (Peignot headings, never a serif; IBM Plex for text
   and maths), the panel's palette: matte black board, exposed copper, bare-FR4 maths.
   Fonts self-hosted; Peignot is the store theme's bundled digitisation. No third-party requests. */
@font-face{font-family:'Peignot';font-weight:400;font-display:swap;size-adjust:112%;src:url(/assets/fonts/peignot.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');}

:root{
  --board:#0f0e0d;          /* matte black mask */
  --board-2:#181614;
  --line:#2c2824;
  --text:#e9e4dc;
  --muted:#a59d92;          /* 7.3:1 on --board */
  --copper:#d08a55;         /* 6.6:1 on --board, text-safe */
  --copper-hi:#e8a674;
  --fr4:#b9ae84;            /* bare-board tone, for the maths layer */
  --display:'Peignot','Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --measure:40rem;
  --gutter:clamp(1rem,4vw,2.5rem);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--board);color:var(--text);font:1.0625rem/1.65 var(--body);overflow-x:hidden}

/* The frame: fixed with the window, like the sleeve around a record. Only the content scrolls.
   Masthead pinned at the top and a thin bar pinned at the bottom (John, 2026-10-28). On the home page the
   frame holds the render; on every page it carries the panel's maths, faint as bare board. */
.frame{position:fixed;inset:0;z-index:-1;background:var(--board);overflow:hidden}
.frame .hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.home .frame::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(15,14,13,.95) 0,rgba(15,14,13,.8) 38%,rgba(15,14,13,0) 60%),
             linear-gradient(180deg,transparent 70%,var(--board) 100%)}
@media (min-width:60.01rem){.frame .hero-img img{left:34%;width:66%;object-position:50% 45%}.intro{max-width:34rem}}
@media (max-width:60rem){
  .frame .hero-img img{height:58svh;object-position:50% 45%}
  .home .frame::after{background:linear-gradient(180deg,transparent 0,transparent 38svh,var(--board) 58svh)}
  .home .intro{padding-top:50svh}}
.maths{position:absolute;inset:auto -4rem 6vh -4rem;font:clamp(.8rem,1.6vw,1.15rem)/2.6 var(--mono);
  color:var(--fr4);opacity:.045;white-space:nowrap;transform:rotate(-4deg);pointer-events:none}
.maths p{margin:0}
.home .maths{display:none}

.skip{position:absolute;left:-999px;top:0;background:var(--copper);color:var(--board);padding:.5rem 1rem;z-index:10}
.skip:focus{left:var(--gutter)}

a{color:var(--copper);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--copper-hi)}
:focus-visible{outline:2px solid var(--copper-hi);outline-offset:3px}

.masthead{display:flex;flex-wrap:wrap;gap:.75rem 2rem;align-items:center;justify-content:space-between;
  padding:1.25rem var(--gutter);border-bottom:1px solid var(--line)}
/* The Fromel Electronics logo leads the masthead, prominent (John, 2026-10-28); the product name sits beside it. */
.masthead .mark{display:flex;align-items:center;gap:clamp(.9rem,3vw,1.6rem);font-family:var(--display);font-size:clamp(1.4rem,4vw,2rem);color:var(--text);text-decoration:none;letter-spacing:.02em;padding:0}
.masthead .mark:hover{color:var(--text)}
.mark-logo{display:block;width:clamp(140px,24vw,240px);height:auto}
.mark-product{display:flex;align-items:center;flex-wrap:wrap;gap:0 .35em;border-left:1px solid var(--line);padding-left:clamp(.9rem,3vw,1.6rem);line-height:1.1}
.mark-lotus{display:block;height:1.5em;width:auto;margin-right:.3em}  /* lotus outline, no yin-yang (John, 2026-10-28) */
.mark-model{color:var(--copper)}
.masthead ul{display:flex;flex-wrap:wrap;gap:.25rem 1.1rem;list-style:none;margin:0;padding:0;font-size:.95rem}
.masthead a{text-decoration:none;color:var(--muted);padding:.35rem 0;display:inline-block}
.masthead a:hover,.masthead a[aria-current=page]{color:var(--copper)}
.masthead li:first-child{display:none}   /* the mark already links home */

main{max-width:calc(var(--measure) + 2*var(--gutter));margin:0 auto;padding:2.5rem var(--gutter) 3rem}
.home main{max-width:calc(72rem + 2*var(--gutter));padding-top:0}

h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.2;letter-spacing:.01em}
h1{font-size:clamp(2rem,6vw,3rem);margin:0 0 1rem}
h2{font-size:1.45rem;margin:2.5rem 0 .75rem;color:var(--copper)}
h3{font-size:1.15rem;margin:1.75rem 0 .5rem}
p,ul,ol{margin:0 0 1.1rem}
.eyebrow{font-family:var(--body);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--copper);margin:0 0 .5rem}
.lede{font-size:1.2rem;color:var(--text)}
.muted{color:var(--muted)}

/* The maths, set like the panel's bare-board layer */
.formula{font-family:var(--mono);font-size:1.05rem;color:var(--fr4);background:var(--board-2);
  border-left:2px solid var(--copper);padding:.9rem 1.1rem;margin:0 0 1.25rem;overflow-x:auto;white-space:pre;line-height:1.9}
.formula sup{font-size:.7em}
code{font-family:var(--mono);color:var(--fr4);font-size:.95em}

/* Status notes: what isn't published yet, said plainly */
.status{border:1px dashed var(--line);padding:1rem 1.1rem;color:var(--muted);margin:0 0 1.5rem}
.status strong{color:var(--text)}

.table-wrap{overflow-x:auto;margin:0 0 1.5rem;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.95rem}
.caption{color:var(--muted);font-size:.85rem;margin:0 0 .6rem}
th,td{padding:.4rem .6rem;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap}
thead th{font-weight:600;color:var(--copper);font-family:var(--body)}
tbody th{text-align:left;font-weight:400;color:var(--text)}
td.num{font-family:var(--mono);text-align:right;color:var(--fr4)}
.off{color:var(--line)}

.rooms{list-style:none;padding:0;margin:2rem 0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.rooms li{background:rgba(15,14,13,.92);padding:1rem 1.1rem}
.rooms a{font-family:var(--display);font-size:1.15rem;text-decoration:none}
.rooms p{margin:.2rem 0 0;color:var(--muted);font-size:.95rem}
@media (min-width:40rem){.rooms{grid-template-columns:1fr 1fr}}

.next{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.next a{font-family:var(--display);font-size:1.35rem;text-decoration:none}
.next p:last-child{color:var(--muted);margin:.25rem 0 0}

.foot{border-top:1px solid var(--line);padding:2rem var(--gutter) 2.5rem;color:var(--muted);font-size:.9rem;text-align:center}
.foot p{max-width:40rem;margin:0 auto .6rem}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--copper)}
.cast{font-size:.78rem;margin-top:1.25rem!important}
.cast a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:.5em}
/* Neuronic Foundry mark: the logo as a mask, so it takes the text colour */
.nf-mark{flex:none;width:1.4em;height:1.75em;background:currentColor;-webkit-mask:url(/assets/nf-mark.webp) center/contain no-repeat;mask:url(/assets/nf-mark.webp) center/contain no-repeat}

/* Home */
.intro{min-height:calc(100svh - 4.5rem);display:flex;flex-direction:column;justify-content:flex-end;padding:0 0 3rem;max-width:40rem}
.intro h1{font-size:clamp(3rem,10vw,5.5rem);margin:0 0 .5rem;color:var(--text);text-shadow:0 2px 24px rgba(0,0,0,.6)}
.intro .lede{font-size:clamp(1.15rem,2.4vw,1.4rem)}
.upgrade{list-style:none;padding:0;margin:0 0 1.5rem;display:grid;gap:.55rem}
.upgrade li{padding-left:1.4rem;position:relative}
.upgrade li::before,.drop{content:"";position:absolute;left:.15rem;top:.55em;width:.55rem;height:.55rem;
  background:var(--copper);border-radius:0 50% 50% 50%;transform:rotate(45deg)}
.upgrade strong{color:var(--copper-hi);font-weight:600}
.price{font-family:var(--mono);font-size:.92rem;color:var(--fr4);border-top:1px solid var(--line);padding-top:1rem}
/* The price, up front (John, 2026-10-28: "This is an ad to sell something and the price has got to be there"). */
.buybox{margin:1.25rem 0 1.75rem;padding:1.1rem 1.25rem 1.2rem;border:1px solid var(--copper);border-radius:10px;
  background:rgba(15,14,13,.82);box-shadow:0 0 30px rgba(208,138,85,.12)}
.buy-h{font-family:var(--body);font-size:.95rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-hi);margin:0 0 .6rem}
.prices{display:grid;grid-template-columns:1fr 1fr;gap:.75rem 1.5rem}
.prices p{margin:0;display:flex;flex-direction:column;line-height:1.15}
.prices .model{font-size:1.2rem;color:var(--muted)}
.prices .amt{font-family:var(--display);font-size:clamp(2.6rem,7vw,3.4rem);color:var(--text);line-height:1}
.prices .later{font-size:1.1rem;color:var(--muted);margin-top:.2rem}
.buybox .terms{font-size:1.05rem;color:var(--text);margin:.9rem 0 1rem}
.buy-row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin:0}
.buy{display:inline-block;background:var(--copper);color:#14110e;font-weight:600;text-decoration:none;padding:.65rem 1.3rem;border-radius:6px}
.buy:hover{background:var(--copper-hi);color:#14110e}
.cutoff{font-size:.95rem;color:var(--muted)}
/* Portrait buy box, left, clear of the hero render (John, 2026-10-28: "move this to the left and make
   portrait layout so it doesn't block the Hero"). */
.buybox{width:100%;max-width:17.5rem;margin-left:0;margin-right:auto}
.prices{grid-template-columns:1fr;gap:.9rem}
.prices p+p{border-top:1px solid var(--line);padding-top:.8rem}
.buy-row{flex-direction:column;align-items:stretch}
.buy{text-align:center}
.slab{background:rgba(15,14,13,.96);border:1px solid var(--line);padding:clamp(1.25rem,4vw,2.5rem);margin:0 0 1.5rem}
.split{display:grid;gap:1.5rem;align-items:center}
.split h2{margin-top:0}
.split-img img{display:block;width:100%;height:auto}
.go{font-family:var(--display);font-size:1.15rem;text-decoration:none}
.go::after{content:" →"}
@media (min-width:50rem){.split{grid-template-columns:1.1fr 1fr}.split.flip .split-img{order:2}}
picture img{max-width:100%;height:auto;display:block}

/* The playable panel */
.play{--level:.78}
.play-h{margin-top:0}
.play-hint,.play-note{color:var(--muted);font-size:.95rem}
.play-note{font-size:.85rem;margin:.75rem 0 0}
.board{position:relative;background:linear-gradient(180deg,#1c1d20,#141517);border:1px solid #2b2c30;border-radius:18px;
  padding:clamp(1rem,3vw,2rem) clamp(.75rem,3vw,2rem) 1.25rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 20px 50px rgba(0,0,0,.45)}
.lotus{position:relative;width:min(86%,32rem);margin:0 auto -.5rem;aspect-ratio:64.18/21.41}
.lotus img{position:relative;width:100%;height:100%;filter:brightness(calc(.5 + .65*var(--level)));transition:filter .35s}
.glow{position:absolute;inset:10% 18% 0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,170,90,.95),rgba(232,120,40,.45) 55%,transparent);
  opacity:var(--level);filter:blur(10px);transition:opacity .35s}
.toggles{display:grid;grid-template-columns:repeat(5,1fr);gap:.25rem;max-width:34rem;margin:0 auto;position:relative}
.tg{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:.4rem 0;border-radius:10px}
.tg:focus-visible{outline:2px solid var(--copper-hi);outline-offset:2px}
/* With the first stage at 3½ only the 1¾ stage counts; 14, 7 and 3½ still flip, dimmed, and wait for 7 (John, 2026-10-28). */
.tg.idle .ring,.tg.idle .lab{opacity:.4;transition:opacity .2s}
.ring{position:relative;width:clamp(2.6rem,9vw,3.6rem);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#2a2b2e 0 52%,#c98652 54% 66%,#8e5a33 70%,#1a1b1d 72%)}
/* The bat as on the real switch (YUEN FUNG MT-0 series): a plain chrome cylinder with a domed end,
   out of a round chrome bushing. No ball (John, 2026-10-28). */
.ring::before{content:"";position:absolute;inset:28%;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#eef0f2,#a3a8ad 55%,#62666b 85%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.5)}
.lever{position:absolute;left:50%;top:50%;width:19%;height:54%;margin-left:-9.5%;border-radius:3px 3px 999px 999px;
  background:linear-gradient(90deg,#74787d,#eef1f4 38%,#c7cbd0 58%,#666a6f);box-shadow:0 2px 3px rgba(0,0,0,.55);
  transform-origin:50% 0;transform:scaleY(-1);transition:transform .16s ease-out}   /* up: bat points up */
.lever::after{content:"";position:absolute;left:10%;right:10%;bottom:4%;height:30%;border-radius:50%;
  background:radial-gradient(ellipse at 45% 40%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%)}
/* Lever moves straight up and down, as a bat toggle seen from the front (John, 2026-10-28): no rotation. */
.tg[aria-checked=true] .lever{transform:scaleY(1)}
.lab{font-family:var(--display);font-size:clamp(1.05rem,3vw,1.5rem);color:var(--copper);line-height:1}
.lab.up{order:-1}
/* Every toggle gets a top label slot, so all five rings sit on one line (John, 2026-10-28). */
.tg:not(.first)::before{content:"\a0";font-family:var(--display);font-size:clamp(1.05rem,3vw,1.5rem);line-height:1}
.tg.first .lab{color:var(--muted)}
.tg.first[aria-checked=false] .lab.up,.tg.first[aria-checked=true] .lab:not(.up){color:var(--copper-hi)}
/* John's logo on the panel face, in copper, prominent (John, 2026-10-28). */
.brand{text-align:center;margin:1.1rem 0 0;line-height:0}
.brand img{width:min(62%,17rem);height:auto}
/* Side graphics, subtle, as on the real panel: watts (60 W input) left, dB right; the live row brightens. */
.board{display:grid;grid-template-columns:1fr;align-items:center}
.side{display:none;list-style:none;margin:0;padding:0;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;font-size:.62rem;line-height:1.55;color:var(--fr4)}
.side-w{text-align:right}
.side li{opacity:.32;transition:color .2s,opacity .2s}
.side .side-h{color:var(--copper);opacity:.5;margin-bottom:.3rem}
.side li.on{color:var(--copper-hi);opacity:1}
@media (min-width:40rem){
  /* fixed side columns, so typing a new wattage never resizes the panel */
  .board{grid-template-columns:8ch 1fr 8ch;column-gap:clamp(.75rem,2vw,1.5rem)}
  .side{display:block}
}
.readout{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1.5rem;margin:1.25rem 0 .5rem}
.db{margin:0;font-family:var(--display);line-height:1}
.db-n{font-size:clamp(2.6rem,8vw,3.8rem);color:var(--text)}
.db-u{font-size:1.2rem;color:var(--copper)}
.w{margin:0;color:var(--muted)}
.w input{width:4.5rem;font:inherit;font-family:var(--mono);color:var(--text);background:var(--board-2);border:1px solid var(--line);
  border-radius:4px;padding:.2rem .4rem;text-align:right}
.w output{font-family:var(--mono);color:var(--copper-hi);font-size:1.2rem}
.ladder{list-style:none;padding:0;margin:.5rem 0 0;position:relative;padding-bottom:.9rem;--pos:calc(1/18);display:grid;grid-template-columns:repeat(18,1fr);gap:2px;align-items:end}
/* The dB reading as a meter: a copper line under the 18 levels grows as attenuation increases (John, 2026-10-28). */
.ladder::before,.ladder::after{content:"";position:absolute;left:0;bottom:0;height:5px;border-radius:3px}
.ladder::before{right:0;background:var(--line)}
.ladder::after{width:calc(var(--pos) * 100%);background:linear-gradient(90deg,#8e5a33,var(--copper) 60%,var(--copper-hi));
  box-shadow:0 0 10px rgba(232,166,116,.45);transition:width .25s ease-out}
.ladder li.lit::before{background:var(--copper)}
.ladder li{position:relative;height:2.6rem;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.ladder li::before{content:"";width:.5rem;height:.5rem;border-radius:0 50% 50% 50%;transform:rotate(45deg);
  background:var(--line);margin-bottom:.45rem;transition:background .2s}
.ladder li.on::before{background:var(--copper-hi);box-shadow:0 0 10px rgba(232,166,116,.8)}
.ladder span{font-family:var(--mono);font-size:.6rem;color:var(--muted);writing-mode:vertical-rl;transform:rotate(180deg);height:1.6rem;text-align:right}
.ladder li.on span{color:var(--copper-hi)}
@media (max-width:30rem){.ladder span{display:none}.ladder li{height:1.2rem}}
tr.here td,tr.here th{background:rgba(208,138,85,.14);color:var(--text)}

/* Seven layers */
.layers{margin:2rem 0 2.5rem}
.layer-list{list-style:none;padding:0;margin:0;display:grid;gap:2rem}
.layer figure{margin:0}
.layer img{width:100%;height:auto;border:1px solid var(--line);background:#1a1918}
figcaption{color:var(--muted);font-size:.95rem;margin-top:.6rem}
figcaption strong{color:var(--text);font-weight:600}
figcaption .n{font-family:var(--mono);color:var(--copper)}
.layer-ctl{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-bottom:1rem}
.layer-ctl[hidden]{display:none}
.layer-ctl button{font:inherit;cursor:pointer;color:var(--text);background:var(--board-2);border:1px solid var(--line);border-radius:999px}
.play-btn{padding:.45rem 1.1rem;font-family:var(--display)!important;color:var(--copper)!important;border-color:var(--copper)!important}
.layer-nums{display:flex;gap:.35rem}
.layer-nums button{width:2.2rem;height:2.2rem;font-family:var(--mono);font-size:.85rem}
.layer-nums button.past{border-color:#6b4a30}
.layer-nums button[aria-pressed=true]{background:var(--copper);color:var(--board);border-color:var(--copper)}
/* Layers stacked in one cell and cross-faded: the old one fades out as the new one fades in (John, 2026-10-28). */
.stepped .layer-list{display:grid;gap:0}
.stepped .layer{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
.stepped .layer.shown{opacity:1;visibility:visible;transition:opacity .6s ease,visibility 0s}
@media (prefers-reduced-motion:reduce){.stepped .layer,.stepped .layer.shown{transition:none}.lever,.lotus img,.glow,.ladder li::before,.ladder::after{transition:none}}
.home main .slab:first-of-type{margin-top:0}

/* Views: masonry + lightbox */
.masonry{list-style:none;padding:0;margin:0 0 .75rem;columns:2 16rem;column-gap:.75rem}
.masonry li{break-inside:avoid;margin:0 0 .75rem}
.masonry a{display:block;border:1px solid var(--line)}
.masonry a:hover{border-color:var(--copper)}
.lightbox{max-width:min(96vw,110rem);max-height:94vh;padding:0;border:1px solid var(--line);background:var(--board);color:var(--text)}
.lightbox::backdrop{background:rgba(0,0,0,.88)}
.lightbox img{display:block;max-width:100%;max-height:84vh;width:auto;height:auto;margin:0 auto}
.lb-cap{margin:.5rem 1rem .75rem;color:var(--muted);font-size:.9rem}
.lb-close{position:absolute;top:.4rem;right:.4rem;width:2.4rem;height:2.4rem;font-size:1.5rem;line-height:1;cursor:pointer;
  color:var(--text);background:rgba(15,14,13,.8);border:1px solid var(--line);border-radius:50%}

.footnav ul{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem 1.25rem;list-style:none;padding:0;margin:1rem 0 0}

@media print{
  :root{color-scheme:light}
  body{background:#fff;color:#000}
  .frame,.masthead nav,.skip,.next,.play,.layer-ctl,.footnav{display:none}
  a{color:#000}
  .formula,td.num,code{color:#000;background:none}
}

/* The play panel at the real switch panel's proportions (John, 2026-10-28). Numbers from the Fusion
   60 W CAD model, board 108.48 × 58.80 mm: every position below is that panel's, in % of
   the board and cqw (1 cqw = 1 % of the board's width). */
.board{display:block;position:relative;container-type:inline-size;aspect-ratio:108.48/58.8;padding:0;overflow:hidden;
  border-radius:4.89% / 9.01%}
.face{position:static}
.lotus{position:absolute;margin:0;top:3.76%;height:36.41%;width:auto;aspect-ratio:64.18/21.41;
  left:50.70%;transform:translateX(-50%)}
.toggles{display:block;position:static;max-width:none;margin:0}
.tg{position:absolute;top:56.41%;transform:translate(-50%,-50%);width:11.98cqw;gap:1.38cqw;padding:0}
.tg:nth-child(1){left:21.91%}
.tg:nth-child(2){left:35.97%}
.tg:nth-child(3){left:50.02%}
.tg:nth-child(4){left:64.07%}
.tg:nth-child(5){left:78.10%}

.ring{width:7.91cqw}
.lab,.tg:not(.first)::before{font-size:2.77cqw}
.brand{position:absolute;margin:0;left:50%;top:74.27%;width:17.98cqw;transform:translateX(-50%)}
.brand img{width:100%}
.side{display:block;position:absolute;top:4.13%;width:13.83cqw;font-size:1.38cqw;line-height:2.12cqw}
.side-w{left:1.92%}
.side-db{right:1.99%;left:auto}
.side .side-h{margin-bottom:0.55cqw}

/* Back panel page */
.art-fig{margin:0 0 2rem}
.art-fig img{display:block;width:100%;height:auto;border-radius:10px}
.art-fig figcaption{color:var(--muted);font-size:.85rem;margin-top:.5rem}
.jacks{margin:0 0 2rem;display:grid;grid-template-columns:minmax(8rem,auto) 1fr;gap:.6rem 1.25rem}
.jacks dt{font-family:var(--display);color:var(--copper-hi);font-size:1.1rem}
.jacks dd{margin:0}
@media (max-width:30rem){.jacks{grid-template-columns:1fr;gap:.2rem}.jacks dd{margin-bottom:.8rem}}
.zpick{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin:0 0 1.5rem}
.zpick[hidden]{display:none}
.zpick-l{font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-hi)}
.zpick-b{display:inline-flex;border:1px solid var(--copper);border-radius:8px;overflow:hidden}
.zpick-b button{all:unset;cursor:pointer;padding:.5rem .95rem;font-family:var(--display);font-size:1.1rem;color:var(--text);border-left:1px solid var(--line)}
.zpick-b button:first-child{border-left:0}
.zpick-b button[aria-pressed=true]{background:var(--copper);color:#14110e}
.zpick-b button:focus-visible{outline:2px solid var(--copper-hi);outline-offset:-3px}
.zpick-n{font-size:.85rem;color:var(--muted)}

/* Order now, in the top banner (John, 2026-10-28) */
.masthead .order{display:inline-block;background:var(--copper);color:#14110e;font-weight:600;font-size:.9rem;
  padding:.45rem 1rem;border-radius:6px;text-decoration:none;white-space:nowrap}
.masthead .order:hover{background:var(--copper-hi);color:#14110e}
.mast-right{display:flex;flex-direction:column;align-items:flex-end;gap:.55rem}
@media (max-width:40rem){
  .mast-right{flex-direction:row-reverse;flex-wrap:wrap-reverse;justify-content:flex-end;align-items:center;gap:.3rem .9rem;width:100%}
  .masthead .order{padding:.3rem .75rem;font-size:.8rem}
}

/* Pinned banners (John, 2026-10-28: "Pin the banners top and bottom, make bottom banner thin"). */
html{scroll-padding-top:9rem}
body{padding-bottom:2.4rem}
.masthead{position:sticky;top:0;z-index:30;background:rgba(15,14,13,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.foot{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;gap:1.25rem;
  height:2.4rem;padding:0 var(--gutter);margin:0;text-align:left;font-size:.78rem;white-space:nowrap;
  overflow-x:auto;scrollbar-width:none;background:rgba(15,14,13,.96);border-top:1px solid var(--line)}
.foot::-webkit-scrollbar{display:none}
.foot p{margin:0;max-width:none}
.foot .footnav ul{margin:0;flex-wrap:nowrap;gap:1.1rem}
.foot .cast{margin:0 0 0 auto!important;font-size:.82rem}
@media (max-width:40rem){
  html{scroll-padding-top:7.5rem}
  .masthead{padding-top:.6rem;padding-bottom:.6rem;gap:.35rem 1.5rem}
  .mark-logo{width:105px}
  .masthead .mark{font-size:1.25rem}
  .masthead ul{font-size:.85rem;gap:0 .9rem}
  .masthead a{padding:.2rem 0}
}
@media print{.masthead,.foot{position:static}body{padding-bottom:0}}

/* Front panel: the whole player fits one screen (John, 2026-10-28: "make all the graphics a bit smaller so the
   whole player fits in the screen"). Its width follows the window height; the board keeps its aspect ratio. */
.play .board,.play .ladder{width:min(100%,38rem,max(21rem,calc((100svh - 32rem) * 1.845)))}
.play .board{box-sizing:border-box}
.play .db-n{font-size:clamp(2.1rem,5vw,2.8rem)}
.play .readout{margin:.8rem 0 .25rem}
.play .ladder li{height:2.1rem}
.play .ladder span{height:1.25rem}
.play-hint{font-size:.9rem;margin-bottom:.9rem}

/* 3D model on the Inside page ("Spin for the win", John, 2026-10-28). The captions stay; only the pictures give way. */
.spin-btn{margin-left:auto}
.spin{position:relative;aspect-ratio:4/3;background:#1a1918;border:1px solid var(--line);margin-bottom:.6rem}
.spin[hidden]{display:none}
.spin-canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.spin-canvas:active{cursor:grabbing}
.spin-canvas:focus-visible{outline:2px solid var(--copper-hi);outline-offset:2px}
.layers.loading .spin::after{content:"Loading the 3D model…";position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:.9rem}
.layers.spinning .layer figure > :not(figcaption){display:none}