:root{
  --stock:#EDEAE3; --stock-2:#E4E0D7; --ink:#14120F; --soft:#56514A; --faint:#948D81;
  --rule:rgba(20,18,15,.16); --hard:#14120F; --hot:#C1272D; --pola:#FDFDFB;
  --ease:cubic-bezier(.16,1,.3,1);
}
@media (prefers-color-scheme:dark){:root{
  --stock:#121110; --stock-2:#1A1918; --ink:#E9E5DC; --soft:#A9A296; --faint:#6B655B;
  --rule:rgba(233,229,220,.17); --hard:#E9E5DC; --hot:#E8453C; --pola:#1F1D1B;}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--stock);color:var(--ink);
  font-family:Newsreader,Georgia,serif;font-weight:300;font-size:20px;line-height:1.66;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
body.locked{overflow:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.m{font-family:"Courier Prime",monospace;font-size:.64rem;letter-spacing:.13em;text-transform:uppercase}
.sans{font-family:Archivo,system-ui,sans-serif}

/* ══ FIXED CHROME — the only two things on screen ══ */
.corner{position:fixed;top:0;z-index:120;padding:1.5rem 1.7rem;
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.corner.hide{opacity:0;transform:translateY(-12px);pointer-events:none}
.wm{left:0;font-family:Archivo,sans-serif;font-weight:900;text-transform:uppercase;
  font-size:.78rem;letter-spacing:-.01em;line-height:.92;cursor:pointer;
  text-decoration:none;color:var(--ink)}
.wm span{display:block}
.wm::after{content:"";display:block;width:0;height:3px;background:var(--hot);margin-top:.3rem;
  transition:width .45s var(--ease)}
.wm:hover::after{width:100%}
.menu-btn{right:0;background:none;border:0;cursor:pointer;color:var(--ink);
  display:flex;align-items:center;gap:.7rem;font-family:"Courier Prime",monospace;
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;padding:1.5rem 1.7rem}
.bars{display:grid;gap:3px;width:20px}
.bars i{height:2px;background:var(--ink);display:block;transform-origin:right;
  transition:transform .45s var(--ease),width .45s var(--ease),background .3s}
.bars i:nth-child(2){width:70%;margin-left:30%}
.menu-btn:hover .bars i:nth-child(2){width:100%;margin-left:0}
.menu-btn:hover .bars i{background:var(--hot)}

/* ══ PROGRESS SPINE — right edge ══ */
.spine{position:fixed;right:.85rem;top:26vh;bottom:26vh;width:1px;background:var(--rule);z-index:110;
  transition:opacity .5s}
.spine i{position:absolute;left:-1px;top:0;width:3px;background:var(--hot);height:0;transition:height .12s linear}
.spine .pct{position:absolute;right:12px;top:0;transform:translateY(-50%);white-space:nowrap;
  font-family:"Courier Prime",monospace;font-size:.52rem;letter-spacing:.1em;color:var(--faint);
  opacity:0;transition:opacity .4s}
.spine:hover .pct{opacity:1}
@media(max-width:900px){.spine{display:none}}

/* ══ THE BOOK — wide broadsheet ══ */
.sheet{max-width:1560px;margin:0 auto;padding:0 clamp(1.2rem,4vw,3.5rem)}
article{padding-top:clamp(5rem,13vh,9rem)}

/* headline block spans full width */
.head{border-bottom:3px solid var(--hard);padding-bottom:1.6rem;margin-bottom:0}
.kicker{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:center;margin-bottom:1.6rem;color:var(--faint)}
.chip{background:var(--hot);color:#fff;padding:.24rem .55rem;transform:rotate(-1.2deg);
  display:inline-block;font-weight:700}
h1.title{font-family:Archivo,sans-serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(2.6rem,9.5vw,9rem);line-height:.86;letter-spacing:-.045em;margin:0;
  text-wrap:balance}
h1.title .lt{display:block}
.sub{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;flex-wrap:wrap;
  border-bottom:1px solid var(--rule);padding:.85rem 0 .9rem;color:var(--soft)}
.sub .dek{font-style:italic;font-size:1.05rem;max-width:46ch;line-height:1.5}

/* 3-column broadsheet: rail · text · rail */
.grid{display:grid;grid-template-columns:15rem minmax(0,40rem) 1fr;gap:clamp(2rem,4vw,4.5rem);
  padding:3.2rem 0 0;align-items:start}
@media(max-width:1180px){.grid{grid-template-columns:12rem minmax(0,38rem);}
  .rail-r{grid-column:1/-1;}}
@media(max-width:820px){.grid{grid-template-columns:1fr;gap:2rem}
  .rail-l{order:-1}}

.rail-l{position:sticky;top:6rem;font-family:"Courier Prime",monospace;font-size:.68rem;line-height:1.75}
.rail-l dl{margin:0;border-top:1px solid var(--rule)}
.rail-l dl div{padding:.6rem 0;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;gap:.6rem}
.rail-l dt{color:var(--faint);font-size:.52rem;letter-spacing:.14em;text-transform:uppercase}
.rail-l dd{margin:0;font-weight:700;text-align:right}
.rail-l .why{margin-top:1.3rem;color:var(--faint);font-size:.58rem;line-height:1.8;letter-spacing:.06em}
@media(max-width:820px){.rail-l{position:static}
  .rail-l dl{display:grid;grid-template-columns:1fr 1fr}
  .rail-l dl div{border-right:1px solid var(--rule);padding-right:.6rem}}

.body{font-size:1.05rem}
.body p{margin:0 0 1.5rem}
.body .lede{font-size:1.42rem;line-height:1.45;font-weight:400}
.body .lede::first-letter{font-family:Archivo,sans-serif;font-weight:900;float:left;
  font-size:4.1rem;line-height:.78;padding:.1rem .5rem 0 0;color:var(--hot)}
mark{background:var(--hot);color:#fff;padding:.04em .16em;cursor:pointer}
.body h2{font-family:Archivo,sans-serif;font-weight:800;text-transform:uppercase;font-size:1rem;
  letter-spacing:.01em;margin:3rem 0 1.1rem}

.rail-r{font-family:"Courier Prime",monospace}
.pola{background:var(--pola);padding:.6rem .6rem 0;border:1px solid var(--hard);
  box-shadow:4px 5px 0 var(--hard);margin-bottom:2.2rem;transition:transform .5s var(--ease)}
.pola:nth-child(odd){transform:rotate(-1.8deg)}
.pola:nth-child(even){transform:rotate(1.4deg)}
.pola:hover{transform:rotate(0) scale(1.02)}
.pola img{width:100%;height:13rem;object-fit:cover;display:block;filter:grayscale(1) contrast(1.4)}
.pola .cap{font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;padding:.6rem .1rem .75rem;color:var(--ink)}
.pola .tag{background:var(--hard);color:var(--stock);padding:.12rem .32rem;margin-right:.4rem}
@media(max-width:1180px){.rail-r{display:flex;gap:1.4rem;overflow-x:auto;padding-bottom:1rem;scrollbar-width:none}
  .rail-r::-webkit-scrollbar{display:none}
  .pola{flex:none;width:14rem;margin-bottom:0}}

/* full-bleed photo break */
.bleed{margin:4rem calc(50% - 50vw) 4rem;width:100vw;position:relative}
.bleed img{width:100%;height:min(58vh,520px);object-fit:cover;display:block;filter:grayscale(1) contrast(1.25)}
.bleed figcaption{position:absolute;bottom:0;left:0;background:var(--hard);color:var(--stock);
  padding:.5rem .9rem;font-family:"Courier Prime",monospace;font-size:.55rem;letter-spacing:.12em;text-transform:uppercase}

.recipe{border:1px solid var(--hard);border-left:7px solid var(--hot);padding:1.7rem 1.8rem;
  margin:2.8rem 0;background:var(--stock-2)}
.recipe h3{font-family:Archivo,sans-serif;font-weight:900;text-transform:uppercase;font-size:.88rem;margin:0 0 1.1rem}
.recipe ul{margin:0;padding-left:1.1rem;font-family:"Courier Prime",monospace;font-size:.8rem;line-height:1.95}
.after{margin:5rem 0 0;border-top:3px solid var(--hard);padding:1.2rem 0 7rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--faint)}
.after a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--hot);padding-bottom:2px}

/* ══ DOCK — hidden until you reach for it ══ */
.dock{position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,150%);z-index:130;
  display:flex;background:var(--hard);color:var(--stock);border-radius:2px;
  box-shadow:0 10px 34px rgba(0,0,0,.3);transition:transform .55s var(--ease)}
.dock.up{transform:translate(-50%,0)}
.dock button{background:none;border:0;border-right:1px solid rgba(128,128,128,.35);
  color:var(--stock);font-family:"Courier Prime",monospace;font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;padding:.85rem 1.1rem;cursor:pointer;white-space:nowrap;transition:background .25s}
.dock button:last-child{border-right:0}
.dock button:hover{background:var(--hot)}
.dock button[aria-pressed="true"]{background:var(--hot)}
@media(max-width:600px){.dock button{padding:.8rem .7rem;font-size:.52rem}}

.prior{max-width:40rem;margin:1.6rem 0 0;border:1px dashed var(--rule);padding:1.3rem 1.5rem;
  font-family:"Courier Prime",monospace;font-size:.76rem;line-height:1.85;
  max-height:0;overflow:hidden;opacity:0;padding-top:0;padding-bottom:0;border-width:0 0 0 0;
  transition:max-height .55s var(--ease),opacity .4s,padding .55s var(--ease)}
.prior.on{max-height:22rem;opacity:1;padding:1.3rem 1.5rem;border-width:1px}
.prior del{opacity:.45}
.prior ins{text-decoration:none;background:var(--hot);color:#fff}
.prior .lb{display:block;font-size:.53rem;letter-spacing:.15em;color:var(--faint);margin-bottom:.8rem}

/* ══ CONTENTS OVERLAY ══ */
.veil{position:fixed;inset:0;z-index:150;background:var(--hard);color:var(--stock);
  clip-path:inset(0 0 100% 0);transition:clip-path .72s var(--ease);
  display:flex;flex-direction:column;overflow-y:auto}
.veil.open{clip-path:inset(0 0 0 0)}
.veil .vtop{display:flex;justify-content:space-between;align-items:flex-start;
  padding:1.5rem clamp(1.2rem,4vw,3.5rem);flex:none}
.veil .vlogo{font-family:Archivo,sans-serif;font-weight:900;text-transform:uppercase;
  font-size:.78rem;line-height:.92}
.veil .x{background:none;border:0;color:var(--stock);cursor:pointer;
  font-family:"Courier Prime",monospace;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  display:flex;align-items:center;gap:.7rem}
.veil .x i{width:18px;height:2px;background:var(--stock);display:block;position:absolute;transition:.4s var(--ease)}
.veil .x .xw{position:relative;width:18px;height:18px;display:grid;place-items:center}
.veil .x i:first-child{transform:rotate(45deg)}
.veil .x i:last-child{transform:rotate(-45deg)}
.veil .x:hover i{background:var(--hot);transform:rotate(0)}
.veil .vbody{flex:1;padding:clamp(1rem,5vh,3rem) clamp(1.2rem,4vw,3.5rem) 4rem;
  max-width:1560px;margin:0 auto;width:100%}
.vlbl{font-family:"Courier Prime",monospace;font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;opacity:.5;margin-bottom:1.6rem}
.vrow{display:grid;grid-template-columns:3.4rem 1fr auto;gap:1.4rem;align-items:baseline;
  padding:1.15rem 0;border-bottom:1px solid rgba(255,255,255,.14);text-decoration:none;
  color:var(--stock);opacity:0;transform:translateY(22px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),padding .35s var(--ease),background .35s}
.veil.open .vrow{opacity:1;transform:none}
.vrow:hover{padding-left:.9rem;background:rgba(255,255,255,.05)}
.vrow:hover .vt{color:var(--hot)}
.vrow .vn{font-family:"Courier Prime",monospace;font-size:.6rem;opacity:.5;letter-spacing:.1em}
.vrow .vt{font-family:Archivo,sans-serif;font-weight:800;text-transform:uppercase;
  font-size:clamp(1.1rem,3.3vw,2.1rem);line-height:1.04;letter-spacing:-.025em;transition:color .3s}
.vrow .vw{display:block;font-family:Newsreader,serif;font-weight:300;font-style:italic;
  text-transform:none;letter-spacing:0;font-size:.9rem;opacity:.55;margin-top:.4rem}
.vrow .vs{font-family:"Courier Prime",monospace;font-size:.54rem;letter-spacing:.13em;
  text-transform:uppercase;opacity:.55;white-space:nowrap;text-align:right}
.vrow .vs b{color:var(--hot);font-weight:700}
.vfoot{display:flex;gap:2rem;flex-wrap:wrap;margin-top:3rem;font-family:"Courier Prime",monospace;
  font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;opacity:0;transition:opacity .7s .5s}
.veil.open .vfoot{opacity:.65}
.vfoot a{color:var(--stock);text-decoration:none;border-bottom:1px solid var(--hot);padding-bottom:2px}
.vstat{margin-top:2.6rem;font-family:"Courier Prime",monospace;font-size:.58rem;letter-spacing:.13em;
  text-transform:uppercase;opacity:0;transition:opacity .7s .4s}
.veil.open .vstat{opacity:.45}
.hint{position:fixed;bottom:1.6rem;right:1.6rem;z-index:118;font-family:"Courier Prime",monospace;
  font-size:.52rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  opacity:0;transition:opacity .8s}
.hint.show{opacity:.7}

/* ══ SUBSCRIBE — the end-of-passage moment, never a popup ══ */
.sub-block{margin:4.5rem calc(50% - 50vw) 0;width:100vw;background:var(--hard);color:var(--stock);
  padding:clamp(2.4rem,6vw,4rem) clamp(1.2rem,4vw,3.5rem)}
.sub-inner{max-width:1560px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
@media(max-width:900px){.sub-inner{grid-template-columns:1fr;gap:2.2rem}}
.sub-block h2{font-family:Archivo,sans-serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(1.7rem,4.6vw,3.1rem);line-height:.94;letter-spacing:-.035em;margin:0 0 1rem}
.sub-block h2 em{font-style:normal;color:var(--hot)}
.sub-block .p{font-family:Newsreader,serif;font-weight:300;font-size:1.02rem;line-height:1.6;
  opacity:.72;margin:0;max-width:34ch}
.cad{display:flex;flex-direction:column;gap:0;border:1px solid rgba(255,255,255,.22);margin-bottom:1.1rem}
.cad label{display:flex;gap:.85rem;align-items:flex-start;padding:.85rem 1rem;cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.14);transition:background .3s var(--ease)}
.cad label:last-child{border-bottom:0}
.cad label:hover{background:rgba(255,255,255,.06)}
.cad input{appearance:none;width:13px;height:13px;border:1px solid rgba(255,255,255,.5);
  border-radius:50%;margin:.32rem 0 0;flex:none;transition:.3s var(--ease)}
.cad input:checked{background:var(--hot);border-color:var(--hot);box-shadow:inset 0 0 0 3px var(--hard)}
.cad .t{font-family:"Courier Prime",monospace;font-size:.63rem;letter-spacing:.12em;text-transform:uppercase}
.cad .d{display:block;font-family:Newsreader,serif;font-size:.88rem;letter-spacing:0;
  text-transform:none;opacity:.55;margin-top:.25rem;line-height:1.45}
.cad label:has(input:checked) .t{color:var(--hot)}
.form{display:flex;border:1px solid var(--stock);background:transparent}
.form input[type=email]{flex:1;min-width:0;background:transparent;border:0;color:var(--stock);
  font-family:"Courier Prime",monospace;font-size:.78rem;letter-spacing:.06em;padding:.95rem 1rem}
.form input[type=email]::placeholder{color:rgba(233,229,220,.42)}
.form input[type=email]:focus{outline:0;background:rgba(255,255,255,.05)}
.form button{background:var(--hot);color:#fff;border:0;font-family:Archivo,sans-serif;font-weight:800;
  text-transform:uppercase;font-size:.72rem;letter-spacing:.06em;padding:0 1.5rem;cursor:pointer;
  transition:transform .35s var(--ease)}
.form button:hover{transform:scale(1.04)}
.fine{font-family:"Courier Prime",monospace;font-size:.55rem;letter-spacing:.11em;text-transform:uppercase;
  opacity:.42;margin-top:.9rem;line-height:1.9}
.done{display:none;border:1px solid var(--hot);padding:1.2rem 1.3rem;
  font-family:"Courier Prime",monospace;font-size:.7rem;letter-spacing:.1em;line-height:1.8}
.done.on{display:block;animation:fi .6s var(--ease)}
@keyframes fi{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sub-block.sent .form,.sub-block.sent .cad,.sub-block.sent .fine{display:none}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation:none!important}}

/* ══ additions beyond the mockup ══ */
.body a{color:inherit;text-decoration:none;border-bottom:1px solid var(--hot)}
.body hr{border:0;border-top:1px solid var(--rule);margin:2.6rem 0}
.body strong{font-weight:400;font-family:Archivo,sans-serif;font-size:.92em}
.empty{max-width:40rem;margin:0 auto;padding:22vh 1.5rem;text-align:center}
.empty h1{font-family:Archivo,sans-serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(2rem,7vw,4rem);line-height:.9;letter-spacing:-.04em;margin:0 0 1.4rem}
.empty p{color:var(--soft);font-style:italic}
.flash{position:fixed;left:50%;bottom:5.5rem;transform:translate(-50%,180%);z-index:140;
  opacity:0;visibility:hidden;pointer-events:none;
  background:var(--hot);color:#fff;font-family:"Courier Prime",monospace;font-size:.62rem;
  letter-spacing:.12em;text-transform:uppercase;padding:.8rem 1.2rem;
  transition:transform .5s var(--ease)}
.flash.on{transform:translate(-50%,0);opacity:1;visibility:visible}
/* note composer */
.noter{position:fixed;z-index:135;background:var(--hard);color:var(--stock);padding:.5rem;
  display:none;box-shadow:0 8px 26px rgba(0,0,0,.35)}
.noter.on{display:block}
.noter textarea{width:17rem;height:4.5rem;background:transparent;border:1px solid rgba(255,255,255,.3);
  color:var(--stock);font-family:"Courier Prime",monospace;font-size:.72rem;padding:.5rem;resize:none}
.noter textarea:focus{outline:0;border-color:var(--hot)}
.noter .row{display:flex;gap:.4rem;margin-top:.4rem}
.noter button{flex:1;background:rgba(255,255,255,.1);color:var(--stock);border:0;cursor:pointer;
  font-family:"Courier Prime",monospace;font-size:.55rem;letter-spacing:.11em;text-transform:uppercase;padding:.5rem}
.noter button.go{background:var(--hot)}
.mynote{background:linear-gradient(transparent 64%,rgba(193,39,45,.3) 64%);cursor:pointer}
@media print{
  .corner,.spine,.dock,.veil,.hint,.sub-block,.prior,.noter,.flash{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  body::before{display:none}
  .grid{display:block}.rail-l,.rail-r{display:none}
  .bleed{margin:1.5rem 0;width:auto}.bleed img{height:auto;max-height:9cm}
  article{page-break-after:always;padding-top:0}
  h1.title{font-size:30pt}
}

/* ════════════════════════════════════════════════════════════
   READING VIEW v2 — the words are the page.
   No headline block; identity lives in the left rail.
   ════════════════════════════════════════════════════════════ */
article{padding-top:clamp(2.2rem,6vh,4.4rem)}
.sheet{max-width:none;padding:0 clamp(1.2rem,4vw,3rem)}

/* centred three-track grid: rail · text · mirror.
   the right track exists even when empty so the prose sits optically centred */
.grid{display:grid;grid-template-columns:14rem minmax(0,50rem) 14rem;
  justify-content:center;gap:clamp(1.8rem,3.4vw,4rem);padding:0;align-items:start}
@media(max-width:1500px){.grid{grid-template-columns:13rem minmax(0,46rem) 13rem}}
@media(max-width:1240px){.grid{grid-template-columns:13rem minmax(0,44rem);justify-content:center}
  .rail-r{grid-column:2}}
@media(max-width:900px){.grid{grid-template-columns:minmax(0,42rem);justify-content:center;gap:2.2rem}
  .rail-l{order:-1}.rail-r{grid-column:1}}

/* identity block, top of the rail */
.rail-l{position:sticky;top:5.5rem}
.ident{display:block;margin-bottom:1.8rem;border:0;padding:0}
.ident>*{display:block}
.chno{font-family:"Courier Prime",monospace;font-size:.55rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--hot);margin-bottom:.6rem}
h1.rtitle{font-family:Archivo,sans-serif!important;font-weight:800;text-transform:uppercase;
  font-size:1.16rem;line-height:1.1;letter-spacing:-.018em;margin:0;color:var(--ink);
  text-align:left;width:100%}
.rdek{font-family:Newsreader,serif!important;font-weight:300;font-style:italic;font-size:.92rem;
  line-height:1.5;color:var(--soft);margin:.7rem 0 0}
.rmeta{font-family:"Courier Prime",monospace;font-size:.56rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--soft);line-height:1.9;margin:1.1rem 0 0}
.rail-l .why{margin-top:1.1rem}
@media(max-width:900px){
  .rail-l{position:static;border-bottom:1px solid var(--rule);padding-bottom:1.4rem}
  .ident{margin-bottom:1.2rem}
  h1.rtitle{font-size:1.5rem}
  .rail-l dl{display:grid;grid-template-columns:1fr 1fr}
  .rail-l .why{display:none}
}

/* the prose — bigger, calmer, the only thing that matters */
.body{font-size:1.19rem;line-height:1.72}
.body p{margin:0 0 1.55rem}
.body .lede{font-size:1.19rem;line-height:1.72;font-weight:300}
.body .lede::first-letter{font-family:Archivo,sans-serif;font-weight:900;float:left;
  font-size:4.6rem;line-height:.74;padding:.12rem .55rem 0 0;color:var(--hot)}
.body h2{margin:3.2rem 0 1.2rem}
@media(max-width:900px){.body{font-size:1.1rem}}

/* right rail sits quiet until there's something in it */
.rail-r:empty{display:block}
@media(max-width:1340px){.rail-r{display:flex;gap:1.4rem;overflow-x:auto;padding:1rem 0 0}
  .rail-r:empty{display:none}}

/* end matter breathes */
.after{margin-top:4rem;padding-bottom:6rem}

/* ── no floating chrome: the dock is gone; its one useful control lives in the rail ── */
.dock,.hint{display:none!important}
button.raillink{background:none;border:0;padding:0;margin-top:.5rem;cursor:pointer;
  font-family:"Courier Prime",monospace;font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--soft);border-bottom:1px solid var(--hot);transition:color .25s}
button.raillink:hover{color:var(--ink)}
button.raillink[aria-pressed="true"]{color:var(--hot)}

/* ── video, in the rail and full-bleed ── */
.pola video{width:100%;height:9rem;object-fit:cover;display:block;background:#000}
.pola.vid video{height:auto;max-height:16rem}
.bleed video{width:100%;height:auto;max-height:min(70vh,640px);display:block;background:#000}