/* =====================================================================================
   yoggin. — THE SYSTEM. One file, every page. 2026-10-09.
   Direction (my call, as the designer): dark, quiet, exact. Structure comes from space and
   hairline rules, not boxes. Two faces: Architects Daughter for the words with a name
   (headlines, hills, products), Space Mono for every label, number and control. One accent:
   amber on the dot, on live numbers, on one button per page. Pictures are single-line
   drawings and real product photos. Corners are 4px; only pills are round.
   Nothing here inherits from the live site.css — this is the replacement, not a patch.
   ===================================================================================== */
:root{
  --void:#0d1117;--navy:#141b25;--navy2:#1c2530;--line:#2a333f;--hair:rgba(241,239,232,.10);
  --cream:#F1EFE8;--read:#cfd2cc;--muted:#9e9b94;--dim:#6d6b66;--faint:#838179;
  --amber:#E0A45E;--ice:#FBEFDB;--up:#6FC48C;--down:#E07A5F;
  --display:'Architects Daughter','Comic Sans MS',cursive;
  --mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --tick:2rem;--bar:4rem;--r:4px;--w:1180px;--gut:clamp(1.2rem,4vw,3rem)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (min-width:1700px){html{zoom:1.2}}
body{margin:0;background:var(--void);color:var(--cream);font-family:var(--display);font-size:1rem;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:2.4rem}
a{color:inherit}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
[hidden]{display:none!important}
a:focus-visible,button:focus-visible{outline:1px solid var(--amber);outline-offset:3px}
::selection{background:var(--amber);color:var(--void)}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--gut)}
.mono{font-family:var(--display);font-size:.84rem;color:var(--muted)}
.amb,.dot{color:var(--amber)}
.wm{font-family:var(--display);text-decoration:none;color:var(--cream)}
.k,.eyebrow{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin:0 0 .6rem}

/* ---- pills: the only round thing ---- */
.pill{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--cream);background:transparent;border:1px solid var(--line);border-radius:999px;padding:.6rem 1.2rem;cursor:pointer;transition:border-color .2s,background .2s,color .2s;white-space:nowrap}
.pill:hover{border-color:var(--cream)}
.pill--ghost{border-color:var(--hair)}
.pill.one{background:var(--amber);border-color:var(--amber);color:var(--void)}
.pill.one:hover{background:var(--ice);border-color:var(--ice)}

/* ---- the chrome ---- */
.top{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--void)}
.ticker{height:var(--tick);display:flex;align-items:center;border-bottom:1px solid var(--hair);overflow:hidden;white-space:nowrap}
.ticker__track{display:inline-block;padding-left:100%;animation:ticker 28s linear infinite;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1}
.ticker__track span{margin-right:4rem}
.ticker__track span b{color:var(--amber);font-weight:400}
@keyframes ticker{to{transform:translateX(-100%)}}
.bar{height:var(--bar);display:flex;align-items:center;gap:1rem;padding:0 var(--gut);border-bottom:1px solid var(--line)}
.bar__left{display:flex;align-items:center;gap:.7rem}
.burger{width:36px;height:36px;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;flex:none;margin-left:-.5rem}
.burger span{display:block;width:16px;height:1px;background:var(--cream);box-shadow:0 -5px 0 var(--cream),0 5px 0 var(--cream)}
.mark{display:grid;place-items:center;width:2rem;height:2rem;color:var(--cream);font-family:var(--display);font-size:1.25rem;line-height:1;position:relative;text-decoration:none}
.mark i{position:absolute;left:58%;bottom:26%;width:.3rem;height:.3rem;border-radius:50%;background:var(--amber);transition:transform .14s cubic-bezier(.22,.61,.36,1)}
.bar__wm{font-size:1.4rem;line-height:1}
.search{display:flex;align-items:stretch;border:1px solid var(--line);height:36px;border-radius:999px;flex:1;max-width:420px;margin:0 auto}
.search{position:relative;overflow:visible}
.sugg{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--navy);border:1px solid var(--line);border-radius:var(--r);padding:.3rem 0;z-index:60;display:flex;flex-direction:column}
.sugg[hidden]{display:none}
.search .sugg button{border:0;background:transparent;color:var(--read);font-family:var(--mono);font-size:.74rem;letter-spacing:.03em;text-transform:none;text-align:left;padding:.5rem 1.1rem;cursor:pointer}
.search .sugg button:hover,.search .sugg button.on{color:var(--cream);background:rgba(241,239,232,.05)}
.search input{flex:1;background:transparent;border:0;color:var(--cream);font-family:var(--mono);font-size:.78rem;padding:0 1.1rem;outline:none;min-width:0}
.search input::placeholder{color:var(--faint)}
.search button{border:0;background:transparent;color:var(--amber);font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;padding:0 1rem;cursor:pointer}
.bar__nav{display:flex;align-items:center;gap:1.4rem;margin-left:auto}
.bar__nav a{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-decoration:none;white-space:nowrap;transition:color .2s}
.bar__nav a:hover{color:var(--cream)}
.bar__nav a.go{color:var(--amber)}
.bar__nav a.go:hover{color:var(--cream)}
.plate{display:inline-flex;gap:1rem;margin:0 0 1rem}
.plate button{border:0;background:transparent;padding:0 0 .15rem;color:var(--muted);font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;border-bottom:1px solid transparent}
.plate button:hover{color:var(--cream)}
.plate button.on{color:var(--cream);border-bottom-color:var(--amber)}
@media (max-width:900px){.bar .search{display:none}}
.drawer .search{flex:none;max-width:none;margin:.9rem 1rem .4rem}
.from .search{display:none}
@media (max-width:900px){.from .search{display:flex;flex-basis:100%;max-width:none;margin:.2rem 0 0}}
@media (max-width:720px){.bar__nav{gap:.9rem}.bar__nav a{display:none}.bar__nav a.m-keep{display:inline-block}.bar__nav a.go{padding:.45rem .8rem}.bar__wm{font-size:1.25rem}}
.rail{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;gap:1rem;padding:.9rem .6rem;border:1px solid var(--line);border-left:0;border-radius:0 var(--r) var(--r) 0;background:var(--void)}
.rail a{display:grid;place-items:center;width:1.8rem;height:1.8rem;color:var(--muted);transition:color .2s}
.rail a:hover{color:var(--amber)}
.rail svg{width:1.05rem;height:1.05rem;fill:currentColor}
@media (max-width:900px){.rail{display:none}}
.drawer{position:fixed;top:calc(var(--tick) + var(--bar));left:0;bottom:0;width:280px;z-index:60;background:var(--void);border-right:1px solid var(--line);transform:translateX(-281px);transition:transform .25s cubic-bezier(.16,1,.3,1);overflow-y:auto;display:flex;flex-direction:column}
.drawer.open{transform:none}
.scrim{position:fixed;inset:0;z-index:55;display:none;background:rgba(13,17,23,.5)}
.scrim.on{display:block}
.sec{border-bottom:1px solid var(--hair)}
.sec>button{width:100%;height:56px;display:flex;align-items:center;gap:.9rem;padding:0 1.1rem;background:transparent;border:0;color:var(--cream);font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;text-align:left}
.sec.here>button{color:var(--amber)}
.sec>button img{width:24px;height:24px;object-fit:contain;flex:none}
.sec>button .car{margin-left:auto;color:var(--faint);transition:transform .2s}
.sec.open>button .car{transform:rotate(180deg)}
.sec .sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s;overflow:hidden}
.sec.open .sub{grid-template-rows:1fr}
.sec .sub>div{min-height:0;padding-bottom:.5rem}
.sec .sub a{display:block;padding:.45rem 1rem .45rem 60px;color:var(--read);font-size:.95rem;text-decoration:none}
.sec .sub a:hover{color:var(--amber)}
.sec .sub a.soon::after,.soon{content:'soon';font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-left:.6rem;vertical-align:middle}
.disc{margin-top:auto;padding:1rem 1.1rem;border-top:1px solid var(--line);display:flex;align-items:center;gap:.7rem;text-decoration:none;font-family:var(--display);font-size:.84rem;color:var(--muted)}
.lamp{width:7px;height:7px;border-radius:50%;background:var(--up);box-shadow:0 0 8px var(--up);flex:none}
.pad{padding-top:calc(var(--tick) + var(--bar))}

/* ---- the page head: crumb · eyebrow · headline · one live line · tabs. a drawing on the right ---- */
.ph{padding-top:clamp(2rem,5vw,3.6rem);padding-bottom:1rem;display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center}
.ph__pic{width:clamp(110px,13vw,170px);aspect-ratio:1}
.ph__pic img{width:100%;height:100%;object-fit:contain}
@media (max-width:760px){.ph{grid-template-columns:1fr}.ph__pic{display:none}}
.crumb{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:0 0 1rem}
.crumb a{color:var(--muted);text-decoration:none}
.crumb b{font-weight:400;color:var(--amber)}
.crumb span{margin:0 .5rem}
.crumb i{font-style:normal;color:var(--muted)}
.ttl{font-family:var(--display);font-size:clamp(2.2rem,5.4vw,4rem);line-height:.98;font-weight:400;max-width:16ch;margin:0 0 .7rem}
.lede{color:var(--muted);font-size:1.02rem;max-width:46ch;line-height:1.5;margin:0 0 1.2rem}
.lede b{font-weight:400;color:var(--cream)}
.lede .n{font-family:var(--mono);color:var(--amber);font-size:.9em}
.lede a{color:var(--amber);text-decoration:none}
.from{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;font-family:var(--display);font-size:.82rem;color:var(--faint);margin:0 0 1rem}
.from a{color:var(--amber);text-decoration:none}
.wiz{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;border-top:1px solid var(--hair);padding-top:.8rem}
.wiz__p,.wiz__s{display:contents}
.wiz a{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:.45rem .9rem;border-radius:999px;border:1px solid transparent;transition:color .2s}
.wiz a:hover{color:var(--cream)}
.wiz a.on{color:var(--void);background:var(--ice)}
.filt{grid-column:1/-1;display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;font-family:var(--mono);font-size:.7rem;color:var(--muted);letter-spacing:.06em;padding:.6rem 0 0}
.filt .k{margin:0;display:inline}
.filt .dd{color:var(--cream)}
.filt .more{margin-left:auto;color:var(--amber);text-decoration:none;text-transform:uppercase;letter-spacing:.14em}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.seg button{border:0;background:transparent;color:var(--muted);font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding:.4rem .8rem;cursor:pointer}
.seg button.on{color:var(--void);background:var(--ice)}
.pane{display:none}.pane.on{display:block}
.fold{display:none}

/* ---- sections: a hairline, a name, space. no boxes ---- */
.sect{padding:clamp(1.8rem,4vw,3rem) 0 0}
.sect__h,.mod__h{display:flex;align-items:baseline;gap:1rem;margin:0 0 1rem;flex-wrap:wrap;padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.sect__h h2,.mod__h h2{font-family:var(--display);font-size:1.35rem;font-weight:400;color:var(--cream)}
.sect__h .mono,.mod__h .mono{flex:1}
.sect__h a,.mod__h a{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);text-decoration:none}
.mod{min-width:0}
.card{padding:.4rem 0 0}
.card p{color:var(--muted);max-width:44ch;margin:0 0 1rem}
.empty{font-family:var(--display);font-size:.84rem;color:var(--faint);padding:.9rem 0}
.fin{padding:1rem 0 0;font-family:var(--display);font-size:.84rem;color:var(--muted)}
.fin .big{display:block;font:2.6rem/1 var(--display);color:var(--cream);margin-bottom:.3rem}
.fin a{color:var(--amber);text-decoration:none}
.feat,.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,4vw,3rem)}
.feat{grid-template-columns:7fr 5fr}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,4vw,3rem)}
@media (max-width:880px){.feat{grid-template-columns:1fr}}
@media (max-width:760px){.two,.three{grid-template-columns:1fr}}
.hub{display:flex;flex-direction:column;gap:.3rem;padding:1.1rem 0 1.2rem;border-top:1px solid var(--line);text-decoration:none;color:var(--cream);transition:border-color .2s}
.hub:hover{border-top-color:var(--amber)}
.hub h3{font-family:var(--display);font-size:1.25rem;font-weight:400}
.hub p{color:var(--muted);max-width:26ch;font-size:.95rem}
.hub .mono{margin-top:auto;padding-top:.9rem;color:var(--amber)}

/* ---- rows: hairlines, a mood on the left edge, a word in a pill ---- */
.row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:1.2rem;padding:.9rem 0 .9rem .9rem;border-top:1px solid var(--hair);border-left:2px solid transparent;position:relative;overflow:hidden;text-decoration:none;color:var(--cream)}
.row:first-child{border-top:0}
.row>*{position:relative;z-index:1}
.row::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
.row__b{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.hill{display:flex;flex-direction:column;min-width:70px}
.hill b{font-weight:400;color:var(--cream);font-size:1.05rem;line-height:1.15}
.hill small{font-family:var(--display);font-size:.76rem;color:var(--muted)}
.row__line{flex-basis:100%;font-size:.9rem;color:var(--muted)}
.row__line .n{font-family:var(--mono);font-size:.8rem;color:var(--amber)}
.row__go{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);white-space:nowrap;text-decoration:none}
.row__v{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding:.3rem .7rem;border-radius:999px;border:1px solid var(--line);color:var(--muted);min-width:5.4rem;text-align:center;white-space:nowrap}
.row--go{border-left-color:var(--amber)}.row--go .row__v{border-color:var(--amber);color:var(--amber)}
.row--solid{border-left-color:var(--cream)}.row--solid .row__v{border-color:var(--cream);color:var(--cream)}
.row--spring{border-left-color:var(--hair)}
.row--waiting{border-left-color:var(--dim)}
.row--dont{border-left-color:var(--hair)}.row--dont .row__v{border-color:transparent;color:var(--faint);min-width:0;padding-right:0}
.row--live{border-left-color:var(--hair)}.row--live .row__v{color:var(--cream)}
.row--final{border-left-color:var(--cream)}.row--final .row__v{color:var(--cream);border-color:var(--cream)}
.row--soon,.row--june{border-left-color:var(--dim)}
.row--free{border-left-color:var(--hair)}.row--free .row__v{color:var(--cream)}
.row--on{border-left-color:var(--amber)}
.ev{display:flex;gap:1rem;flex-wrap:wrap;font-family:var(--display);font-size:.8rem;color:var(--muted)}
.ev b{font-weight:400;color:var(--amber)}
.ev a{color:var(--amber);text-decoration:none}
.g{display:flex;align-items:center;gap:.8rem;width:100%}
.g .tm{font-family:var(--display);font-size:1.05rem;color:var(--cream);min-width:3.4rem}
.g .tm .mono{font-size:.7rem}
.g .sc{font-family:var(--mono);font-size:1rem;color:var(--amber);min-width:2.2rem;text-align:right}
.g .st{margin-left:auto;font-family:var(--mono);font-size:.7rem;color:var(--muted);text-align:right}
.g .win{color:var(--amber)}
.skymark{position:relative;width:14px;height:14px;flex:none;border-radius:50%}
.sky--sun .skymark{background:var(--amber);box-shadow:0 0 12px 3px rgba(224,164,94,.45)}
.sky--mix .skymark,.sky--cld .skymark,.sky--fog .skymark{width:20px;height:15px;border-radius:0;background-color:transparent;background-repeat:no-repeat;background-size:contain;background-position:center}
.sky--mix .skymark{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'><circle cx='16' cy='6' r='4.5' fill='%23E0A45E'/><path fill='%239a978f' d='M6 17h9.5a4 4 0 0 0 .3-8A5.8 5.8 0 0 0 4.8 11.2 3 3 0 0 0 6 17z'/></svg>")}
.sky--cld .skymark{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'><path fill='%239a978f' d='M7 16h10.5a4.5 4.5 0 0 0 .4-9A6.5 6.5 0 0 0 5.6 9.2 3.5 3.5 0 0 0 7 16z'/></svg>")}
.sky--fog .skymark{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'><path fill='%239a978f' d='M7 11h10.5a4.5 4.5 0 0 0 .4-9A6.5 6.5 0 0 0 5.6 4.2 3.5 3.5 0 0 0 7 11z'/><path stroke='%239a978f' stroke-width='1.4' stroke-linecap='round' d='M4 14h15M7 17h10'/></svg>")}
.sky--rain .skymark{width:11px;height:11px;border-radius:0 50% 50% 50%;transform:rotate(45deg);background:var(--ice)}
.sky--snow .skymark{background:none;border-radius:0}
.sky--snow .skymark::after{content:"\2744";position:absolute;inset:0;display:grid;place-items:center;color:var(--cream);font-size:14px;line-height:1}
.sky--sun::before{background:radial-gradient(70% 110% at 100% 0%,rgba(224,164,94,.12),transparent 60%)}
/* cloudy: the cloud shape itself, big and faint, drifting across the row at two depths */
.sky--cld::before,.sky--mix::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='90' viewBox='0 0 260 90'><path fill='%239a978f' opacity='.14' d='M40 70h120a26 26 0 0 0 2-52A38 38 0 0 0 90 32a30 30 0 0 0-54 18 20 20 0 0 0 4 20z'/><path fill='%239a978f' opacity='.09' d='M170 84h70a16 16 0 0 0 1-32 24 24 0 0 0-46 6 18 18 0 0 0-25 26z'/></svg>"),url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='70' viewBox='0 0 200 70'><path fill='%239a978f' opacity='.07' d='M30 56h100a20 20 0 0 0 2-40 30 30 0 0 0-56 6 22 22 0 0 0-46 34z'/></svg>");background-repeat:repeat-x;background-position:0 -10px,120px 6px;background-size:260px 90px,200px 70px;animation:drift 90s linear infinite}
.sky--mix::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='70' viewBox='0 0 200 70'><path fill='%239a978f' opacity='.07' d='M30 56h100a20 20 0 0 0 2-40 30 30 0 0 0-56 6 22 22 0 0 0-46 34z'/></svg>"),radial-gradient(60% 120% at 100% 0%,rgba(224,164,94,.1),transparent 60%);background-size:200px 70px,100% 100%;background-position:0 4px,0 0;background-repeat:repeat-x,no-repeat;animation:drift1 120s linear infinite}
/* fog: soft bands, barely moving */
.sky--fog::before{background:repeating-linear-gradient(180deg,transparent 0 10px,rgba(154,151,143,.07) 10px 16px,transparent 16px 26px),linear-gradient(180deg,rgba(109,107,102,.14),transparent 80%);background-size:100% 100%;animation:fogdrift 40s ease-in-out infinite alternate}
/* snow: round flakes at two depths, falling with a sway */
.sky--snow::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='200' viewBox='0 0 280 200'><g fill='%23F1EFE8'><circle cx='22' cy='18' r='2.6' opacity='0.8'/><circle cx='131' cy='61' r='2.2' opacity='0.7'/><circle cx='241' cy='33' r='2.9' opacity='0.85'/><circle cx='76' cy='122' r='2.4' opacity='0.75'/><circle cx='199' cy='151' r='2.1' opacity='0.7'/><circle cx='258' cy='109' r='2.7' opacity='0.8'/><circle cx='14' cy='176' r='2.3' opacity='0.7'/></g></svg>"),url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='160' viewBox='0 0 220 160'><g fill='%23F1EFE8'><circle cx='37' cy='12' r='1.6' opacity='0.55'/><circle cx='104' cy='41' r='1.4' opacity='0.5'/><circle cx='181' cy='22' r='1.7' opacity='0.6'/><circle cx='61' cy='78' r='1.5' opacity='0.55'/><circle cx='149' cy='97' r='1.3' opacity='0.45'/><circle cx='205' cy='131' r='1.6' opacity='0.55'/><circle cx='16' cy='139' r='1.4' opacity='0.5'/><circle cx='118' cy='150' r='1.5' opacity='0.5'/></g></svg>"),url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='170' height='120' viewBox='0 0 170 120'><g fill='%23F1EFE8'><circle cx='9' cy='21' r='0.9' opacity='0.35'/><circle cx='52' cy='8' r='1' opacity='0.3'/><circle cx='97' cy='33' r='0.8' opacity='0.3'/><circle cx='141' cy='15' r='1' opacity='0.35'/><circle cx='31' cy='62' r='0.9' opacity='0.3'/><circle cx='79' cy='71' r='1' opacity='0.32'/><circle cx='126' cy='58' r='0.8' opacity='0.3'/><circle cx='160' cy='91' r='0.9' opacity='0.3'/><circle cx='60' cy='106' r='1' opacity='0.33'/><circle cx='112' cy='112' r='0.8' opacity='0.3'/></g></svg>");background-size:280px 200px,220px 160px,170px 120px;background-position:0 0,40px 30px,20px 60px;animation:flurry 18s linear infinite;opacity:.85}
.sky--rain::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><g stroke='%239a978f' stroke-width='1' stroke-linecap='round' opacity='.55'><path d='M13 4l-3 9M37 15l-3 9M20 27l-3 9M42 33l-3 9M7 35l-2 6'/></g></svg>"),url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><g stroke='%239a978f' stroke-width='1' stroke-linecap='round' opacity='.3'><path d='M9 3l-2 6M26 12l-2 6M15 21l-2 6'/></g></svg>");background-size:48px 48px,32px 32px;animation:rain 2.4s linear infinite;opacity:.7}
@keyframes flurry{0%{background-position:0 0,40px 30px,20px 60px}25%{background-position:-22px 50px,52px 110px,14px 150px}50%{background-position:10px 100px,26px 190px,30px 240px}75%{background-position:-14px 150px,58px 270px,12px 330px}100%{background-position:0 200px,40px 350px,20px 420px}}
@keyframes rain{from{background-position:0 0,16px 8px}to{background-position:-48px 144px,-16px 104px}}
@keyframes drift{from{background-position:0 -10px,120px 6px}to{background-position:-520px -10px,-280px 6px}}
@keyframes drift1{from{background-position:0 4px,0 0}to{background-position:-400px 4px,0 0}}
@keyframes fogdrift{from{background-position:0 0,0 0}to{background-position:0 6px,0 0}}

/* ---- the table ---- */
.tblwrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:.95rem}
.tbl th{font-family:var(--mono);font-weight:400;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-align:left;padding:.5rem .8rem .6rem 0}
.tbl td{padding:.7rem .8rem .7rem 0;border-top:1px solid var(--hair);vertical-align:middle}
.tbl .n{font-family:var(--mono);font-size:.8rem;color:var(--amber);white-space:nowrap}
.tbl .q{font-family:var(--display);font-size:.82rem;color:var(--muted)}
.tbl .nm{color:var(--cream)}
.tbl .nm a{color:var(--cream);text-decoration:none}
.tbl .nm a:hover{color:var(--amber)}
.tbl .nm small{display:block;font-family:var(--display);font-size:.76rem;color:var(--muted)}
.badge{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:var(--r);font-family:var(--mono);font-size:.74rem;color:var(--void);background:var(--cream)}
.badge.s{background:var(--amber)}.badge.b{background:var(--muted)}
.b7{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap}
.b7 i{display:inline-block;width:80px;height:3px;background:var(--line);position:relative;overflow:hidden}
.b7 i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w,0%);background:var(--amber)}
.b7.up i::after{background:var(--up)}.b7.down i::after{background:var(--down)}

/* ---- the shelf: headless, centered, a quiet well behind each picture ---- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2rem 1.4rem}
.pgrid--slaps{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1.6rem 1rem}
.pc{display:flex;flex-direction:column;align-items:center;text-align:center}
.pc__img{width:100%;aspect-ratio:4/5;display:grid;place-items:center;padding:4%;background:var(--navy);border-radius:var(--r)}
.pc__img img{width:100%;height:100%;object-fit:contain}
.pc--slap .pc__img{aspect-ratio:1;padding:8%;background:transparent}
.pc__b{padding:.7rem 0 0;display:flex;flex-direction:column;align-items:center;gap:.3rem}
.pc__n{color:var(--cream);font-size:1.02rem;line-height:1.2}
.pc__n sup{font-family:var(--mono);font-size:.7rem;color:var(--muted);margin-left:.25rem}
.pc__p{font-family:var(--mono);font-size:.78rem;color:var(--amber)}
.pc__v{display:flex;gap:.3rem;flex-wrap:wrap;justify-content:center}
.pc__v span{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--muted);border:1px solid var(--hair);border-radius:999px;padding:.18rem .45rem}
.pc .go{margin-top:.5rem;display:inline-block;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream);border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem;text-decoration:none;transition:border-color .2s}
.pc .go:hover{border-color:var(--cream)}
.pc--slap .go{display:none}
.flip{display:inline-flex;gap:.9rem}
.flip button{border:0;background:none;padding:0;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);cursor:pointer}
.flip button.on{color:var(--amber);text-decoration:underline;text-underline-offset:4px}

/* ---- forms: underlines, not boxes ---- */
.form{display:grid;gap:1.2rem;max-width:560px}
.form label{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:.2rem}
.form input,.form textarea,.form select{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;color:var(--cream);padding:.55rem 0;outline:none;font-family:var(--display);font-size:1rem}
.form select{appearance:none;-webkit-appearance:none;background:transparent}
.form select option{background:var(--navy)}
.form input:focus,.form textarea:focus,.form select:focus{border-bottom-color:var(--amber)}
.form textarea{min-height:96px;resize:vertical}
.form .two{gap:1.2rem}
.join{display:flex;gap:.6rem;max-width:520px;align-items:center}
.join input{flex:1;background:transparent;border:1px solid var(--line);border-radius:999px;color:var(--cream);padding:.65rem 1.1rem;font-family:var(--mono);font-size:.82rem;outline:none;min-width:0}
.join input:focus{border-color:var(--amber)}
.cta{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.cta .alt{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cta .alt a{color:var(--amber);text-decoration:none}

/* ---- reading, the fork, the plays ---- */
.col{max-width:52ch;font-size:1.15rem;line-height:1.7;color:var(--read)}
.col p{margin:0 0 1.2rem}
.col .big{font-family:var(--display);font-size:clamp(1.8rem,3.6vw,2.6rem);line-height:1.08;color:var(--cream);margin:0 0 1.4rem}
.fork{width:100%;height:auto;display:block}
.fork text{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;fill:var(--muted)}
.fork text.me{fill:var(--amber)}
.fork .y{font-family:var(--display);font-size:54px;letter-spacing:0;text-transform:none;fill:var(--cream)}
.fork .yd{fill:var(--amber)}
.plays .play{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;padding:.8rem 0 .8rem .9rem;border-top:1px solid var(--hair);border-left:2px solid transparent}
.plays .play:first-child{border-top:0}
.play--td{border-left-color:var(--amber)!important}
.play__t{font-family:var(--mono);font-size:.7rem;color:var(--muted);line-height:1.5;min-width:5rem}
.play__t b{display:block;font-weight:400;color:var(--cream);letter-spacing:.12em;text-transform:uppercase}
.play--td .play__t b{color:var(--amber)}
.play__b{font-size:.95rem;color:var(--read)}
.play__b small{display:block;font-family:var(--mono);font-size:.7rem;color:var(--muted);margin-top:.2rem}

/* ---- the footer: the mark, big; one line of links; the legal ---- */
.foot{margin-top:clamp(3rem,7vw,5rem);border-top:1px solid var(--line);padding:2.4rem 0 2rem}
.foot__in{max-width:var(--w);margin:0 auto;padding:0 var(--gut)}
.foot__mark{display:block;line-height:1;margin:0 0 2.2rem}
.foot__wm,.foot__dot{font-family:var(--display);font-size:clamp(3.4rem,12vw,8rem);line-height:1;color:var(--cream);text-decoration:none;display:inline}
.foot__dot{color:var(--amber)}
.foot__row{display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:start}
@media (max-width:760px){.foot__row{grid-template-columns:1fr}}
.foot__strip{display:flex;flex-wrap:wrap;gap:.4rem .6rem;align-items:baseline;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.5rem}
.foot__k{font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:0;text-transform:none;color:var(--cream);min-width:7rem}
.foot__strip a{color:var(--muted);text-decoration:none}
.foot__strip a:hover{color:var(--cream)}
.foot__strip a + a::before{content:"\00B7";color:var(--amber);margin-right:.6rem}
.foot__tag{color:var(--muted);font-size:.95rem;max-width:28ch;text-align:right}
@media (max-width:760px){.foot__tag{text-align:left}}
.foot__legal{margin-top:1.6rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--faint)}
.foot__legal a{color:var(--faint);text-decoration:none}
.foot__legal a:hover{color:var(--cream)}

/* ---- the mockup's own strip ---- */
.note{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--amber);color:var(--void);font:.66rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:.4rem 1rem}
.note a{color:var(--void);text-decoration:underline;margin:0 .45rem}

/* ---- phone ---- */
@media (max-width:760px){
  .row{grid-template-columns:1fr;gap:.5rem;padding:.9rem 0 .9rem .8rem}
  .row__v,.row__go{justify-self:start}
  .hill{min-width:0}
  .g{flex-wrap:wrap}
  .g .st{margin-left:0;flex-basis:100%;text-align:left}
  .filt .more{margin-left:0}
}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none;padding-left:1.3rem}.row::before{animation:none!important}}