/* ══════════════════════════════════════════════════════════════
   hyperactful.com
   Aileron by dot colon — public domain. See /assets/fonts/FONT-LICENSE.txt
   ══════════════════════════════════════════════════════════════ */

@font-face{
  font-family:"Aileron";
  src:url("/assets/fonts/aileron-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Aileron";
  src:url("/assets/fonts/aileron-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}

:root{
  --bg:      #0d0e0c;
  --bg-2:    #121410;
  --bg-3:    #171a14;
  --ink:     #e9e7dd;
  --ink-2:   #9fa197;
  --ink-3:   #6b6d63;
  --line:    #262820;
  --line-2:  #34372c;
  --moss:    #9dc06a;
  --amber:   #d9a24a;
  --rust:    #c0674a;

  --shell: 1180px;
  --pad: clamp(20px, 5vw, 64px);

  --f-display: "Aileron", -apple-system, "Segoe UI", sans-serif;
  --f-sans: "Aileron", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --ease: cubic-bezier(.16,1,.3,1);
}

/* The site is designed to be read at 125%. zoom scales every length and
   reflows as though the viewport were narrower - the same thing the browser
   zoom control does, so nothing has to be re-tuned per breakpoint.

   Caveat: viewport units are NOT affected by zoom. 100svh resolves against the
   real viewport and is then scaled up, overflowing by exactly the zoom factor.
   Anything meant to be exactly one screen tall must divide by --zoom. */
:root{--zoom:1.25; zoom:var(--zoom)}

/* Phones already render at an effective 125%+ thanks to their device pixel
   ratio — zooming again just wastes screen width. Desktop keeps the 1.25. */
@media (max-width:700px){ :root{--zoom:1; zoom:1} }
@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
::selection{background:var(--moss);color:#0d0e0c}

.shell{width:100%;max-width:var(--shell);margin:0 auto;padding-inline:var(--pad)}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--moss);color:#000;padding:10px 16px}
.skip:focus{left:8px;top:8px}

/* ── texture + progress ─────────────────────────────────────── */
/* Static grain. It used to shift on a 6s loop, which read as shimmering static
   rather than texture — a fixed pattern sits still and just breaks up the flat black. */
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── masthead ───────────────────────────────────────────────── */
.masthead{
  position:fixed;top:0;left:0;right:0;z-index:50;
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.masthead.is-stuck{
  background:rgba(13,14,12,.82); backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line);
}
.masthead__in{display:flex;align-items:center;gap:28px;height:66px;transition:height .4s var(--ease)}
.masthead.is-stuck .masthead__in{height:56px}

.wordmark{
  display:flex;align-items:center;gap:9px;text-decoration:none;
  font-family:var(--f-sans);font-size:16px;letter-spacing:-.01em;font-weight:400;
  margin-right:auto;
}
.wordmark__dot{width:7px;height:7px;background:var(--moss);border-radius:50%;flex:none;transition:background .3s}
.wordmark:hover .wordmark__dot{background:var(--amber)}



/* ── hero ───────────────────────────────────────────────────── */
.hero{padding-top:min(24vh,190px);position:relative}
.eyebrow{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 clamp(24px,4vw,44px);overflow:hidden;
}
.eyebrow b{color:var(--moss);font-weight:400}

.hero__title{
  font-family:var(--f-sans);font-weight:400;
  font-size:clamp(46px,10.5vw,148px);line-height:.94;letter-spacing:-.035em;
  margin:0; max-width:11ch;
}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero__title .line > *{display:inline-block;will-change:transform}
.hero__title .accent{color:var(--moss)}

.hero__foot{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,5vw,80px);
  align-items:end;margin-top:clamp(44px,7vw,96px);
  padding-bottom:clamp(48px,7vw,90px);
}
.hero__lede{
  margin:0;max-width:54ch;font-size:clamp(15px,1.35vw,17px);
  color:var(--ink-2);line-height:1.65;
}
.stats{list-style:none;margin:0;padding:0;display:flex;gap:clamp(24px,3.5vw,52px)}
.stats li{border-top:1px solid var(--line-2);padding-top:11px;min-width:76px}
.stats .n{
  display:block;font-family:var(--f-mono);font-size:clamp(20px,2.4vw,30px);
  font-weight:500;letter-spacing:-.02em;line-height:1;
}
.stats .n span{color:var(--ink-3);font-size:.6em}
.stats .l{
  display:block;margin-top:7px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-family:var(--f-mono);
}

/* ── bands / section marks ──────────────────────────────────── */
.band{padding-block:clamp(72px,11vw,150px);border-top:1px solid var(--line);position:relative}
.sectionmark{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);margin:0 0 clamp(22px,3vw,34px);display:flex;align-items:baseline;gap:14px;
}
.sectionmark i{
  font-style:normal;color:var(--moss);
  border:1px solid var(--line-2);padding:2px 7px;font-size:11px;letter-spacing:.05em;
}
.h2{
  font-family:var(--f-sans);font-weight:400;letter-spacing:-.03em;
  font-size:clamp(30px,4.6vw,58px);line-height:1.02;margin:0;max-width:16ch;
}

/* ── about ──────────────────────────────────────────────────── */
.about__grid{display:grid;grid-template-columns:minmax(190px,255px) minmax(0,1fr);gap:clamp(32px,6vw,110px)}
.about__meta{position:sticky;top:110px;align-self:start}
.deflist{margin:0 0 30px;display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:13px}
.deflist dt{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);padding-top:2px;
}
.deflist dd{margin:0;color:var(--ink)}
.links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.links a{
  display:flex;align-items:center;justify-content:space-between;
  text-decoration:none;font-family:var(--f-mono);font-size:12.5px;
  padding:8px 0;border-bottom:1px solid var(--line);color:var(--ink-2);
  transition:color .25s,padding-left .35s var(--ease),border-color .25s;
}
.links a::after{content:"\2197";opacity:0;transform:translate(-4px,3px);transition:.35s var(--ease)}
.links a:hover{color:var(--moss);padding-left:8px;border-color:var(--line-2)}
.links a:hover::after{opacity:1;transform:none}

.prose p{
  font-size:clamp(17px,2.1vw,23px);line-height:1.58;letter-spacing:-.011em;
  margin:0 0 1.05em;max-width:38ch;
}
.prose p:first-child::first-letter{
  font-family:var(--f-display);font-size:2.7em;float:left;line-height:.82;
  padding:.06em .1em 0 0;color:var(--moss);
}
.prose p:last-child{margin-bottom:0}
.now{
  margin:clamp(30px,4vw,46px) 0 0;padding-top:20px;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:13px;line-height:1.7;color:var(--ink-2);max-width:50ch;
}
.now__tag{
  display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);margin-bottom:8px;
}

/* ── toolbar ────────────────────────────────────────────────── */
.index__head{margin-bottom:clamp(34px,5vw,60px)}
.toolbar{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  padding-bottom:16px;border-bottom:1px solid var(--line);
}
.field{position:relative;flex:1 1 340px;display:flex;align-items:center}
.field__icon{
  position:absolute;left:0;width:15px;height:15px;fill:none;stroke:var(--ink-3);
  stroke-width:1.4;pointer-events:none;transition:stroke .25s;
}
.field:focus-within .field__icon{stroke:var(--moss)}
#q{
  width:100%;background:none;border:0;
  padding:8px 30px 8px 26px;color:var(--ink);font-family:var(--f-mono);font-size:14.5px;
  outline:none;
}
#q::placeholder{color:var(--ink-3)}
#q::-webkit-search-cancel-button{display:none}
.field__clear{position:absolute;right:2px;font-size:20px;color:var(--ink-3);line-height:1;padding:2px 6px}
.field__clear:hover{color:var(--rust)}

.toolbar__right{display:flex;gap:16px;align-items:center}
.select{display:flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:12px}
.select > span{color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;font-size:11px}
.select select{
  background:var(--bg-2);border:1px solid var(--line);color:var(--ink);
  font-family:var(--f-mono);font-size:12.5px;padding:6px 9px;outline:none;cursor:pointer;
}
.select select:focus-visible{border-color:var(--moss)}

/* ── dropdown facet filters ─────────────────────────────────── */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.dd{position:relative}
.dd__btn{
  display:flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;
  border:1px solid var(--line);padding:7px 11px;color:var(--ink-2);
  transition:border-color .22s,color .22s;
}
.dd__btn:hover{border-color:var(--line-2);color:var(--ink)}
.dd.is-open .dd__btn{border-color:var(--line-2);color:var(--ink)}
.dd.is-active .dd__btn{border-color:var(--moss);color:var(--moss)}
.dd__count{
  background:var(--moss);color:#0d0e0c;border-radius:9px;
  padding:0 6px;font-size:10.5px;line-height:16px;min-width:16px;text-align:center;
}
.dd__caret{width:9px;height:6px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .25s var(--ease)}
.dd.is-open .dd__caret{transform:rotate(180deg)}

.dd__panel{
  position:absolute;top:calc(100% + 6px);left:0;z-index:40;min-width:216px;max-width:280px;
  background:var(--bg-2);border:1px solid var(--line-2);
  box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.dd__list{
  list-style:none;margin:0;padding:5px;max-height:290px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
}
.opt{
  display:flex;align-items:center;gap:9px;padding:6px 8px;cursor:pointer;
  font-family:var(--f-mono);font-size:12px;color:var(--ink-2);
}
.opt:hover{background:var(--bg-3);color:var(--ink)}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt__box{
  width:13px;height:13px;border:1px solid var(--line-2);flex:none;position:relative;
  transition:background .18s,border-color .18s;
}
.opt__box::after{
  content:"";position:absolute;left:3px;top:.5px;width:4px;height:8px;
  border:solid #0d0e0c;border-width:0 1.5px 1.5px 0;transform:rotate(45deg) scale(0);
  transition:transform .18s var(--ease);
}
.opt input:checked + .opt__box{background:var(--moss);border-color:var(--moss)}
.opt input:checked + .opt__box::after{transform:rotate(45deg) scale(1)}
.opt input:focus-visible + .opt__box{outline:2px solid var(--moss);outline-offset:2px}
.opt__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opt__n{color:var(--ink-3);font-size:10.5px}
.dd__clear{
  display:block;width:100%;text-align:left;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);padding:9px 13px;border-top:1px solid var(--line);
}
.dd__clear:hover{color:var(--rust)}

/* ── player roster in the drawer ────────────────────────────── */
/* names read as a list of people, not a grid of identical buttons */
.roster{margin-top:30px;padding-top:16px;border-top:1px solid var(--line)}
.roster__head{
  margin:0 0 10px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
}
.roster__head span{color:var(--ink-2);margin-left:6px}
.roster__names{margin:0;font-family:var(--f-mono);font-size:12.5px;line-height:2}
.roster__names i{font-style:normal;color:var(--line-2);padding:0 6px}
.roster__names button{
  font:inherit;color:var(--ink-2);
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.roster__names button:hover{color:var(--moss);border-bottom-color:rgba(157,192,106,.5)}

.resultline{
  display:flex;align-items:baseline;gap:16px;margin:26px 0 0;
  font-family:var(--f-mono);font-size:12px;color:var(--ink-3);letter-spacing:.06em;
}
.linkbtn{
  font-family:var(--f-mono);font-size:12px;color:var(--moss);
  border-bottom:1px solid rgba(157,192,106,.35);padding-bottom:1px;
}
.linkbtn:hover{border-bottom-color:var(--moss)}

/* ── the table ──────────────────────────────────────────────── */
.table{margin-top:14px;border-top:1px solid var(--line)}
.row{
  display:grid;grid-template-columns:104px minmax(0,1fr) 108px 96px;
  align-items:center;gap:20px;width:100%;text-align:left;
  padding:20px 10px 20px 6px;
  border-bottom:1px solid var(--line);position:relative;
  transition:background .35s,padding .5s var(--ease);
}
.row::before{
  content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:2px;
  background:var(--moss);transform:scaleY(0);transform-origin:top;
  transition:transform .45s var(--ease);
}
.row:hover,.row:focus-visible{background:var(--bg-2);outline:none;padding-left:18px;padding-right:0}
.row:hover::before,.row:focus-visible::before{transform:scaleY(1)}

.row__n{font-family:var(--f-mono);font-size:12px;color:var(--ink-3);letter-spacing:.03em;white-space:nowrap}
.row__main{min-width:0}
.row__title{
  font-size:19px;letter-spacing:-.015em;line-height:1.25;margin:0;font-weight:400;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;transition:color .3s;
}
.row:hover .row__title{color:var(--moss)}
.pill{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  border:1px solid var(--line-2);padding:2px 6px;color:var(--ink-3);
}
.pill--mod{border-color:var(--amber);color:var(--amber)}
.row__meta{font-family:var(--f-mono);font-size:12.5px;color:var(--ink-2);letter-spacing:.02em;white-space:nowrap}
.row__meta.dim{color:var(--ink-3)}

/* ── empty ──────────────────────────────────────────────────── */
.empty{padding:70px 0 40px;border-bottom:1px solid var(--line)}
.empty__big{font-family:var(--f-display);font-size:clamp(30px,5vw,50px);margin:0 0 10px;color:var(--ink-2)}
.empty__sub{margin:0;font-family:var(--f-mono);font-size:13px;color:var(--ink-3)}

/* ── notes ──────────────────────────────────────────────────── */
.notes__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1px;background:var(--line)}
.notes__grid article{background:var(--bg);padding:clamp(24px,3vw,36px) clamp(20px,2.5vw,32px)}
.notes__grid h3{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--amber);font-weight:500;margin:0 0 14px;
}
.notes__grid p{margin:0;font-size:14.5px;line-height:1.7;color:var(--ink-2)}
code{
  font-family:var(--f-mono);font-size:.88em;background:var(--bg-3);
  border:1px solid var(--line);padding:1px 5px;color:var(--ink);white-space:nowrap;
}

/* ── landing page ───────────────────────────────────────────── */
.landing{min-height:calc(100svh / var(--zoom));display:flex;flex-direction:column}
.gate{flex:1;display:flex;align-items:center}
.gate__in{width:100%}
.gate__mark{
  display:flex;align-items:center;gap:10px;margin:0 0 clamp(36px,7vw,68px);
  font-family:var(--f-sans);font-size:16px;letter-spacing:-.01em;font-weight:400;color:var(--ink);
}
.gate__dot{width:7px;height:7px;background:var(--moss);border-radius:50%;flex:none}

.gate__links{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.gate__link{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:clamp(22px,3.4vw,32px) 4px;border-bottom:1px solid var(--line);
  text-decoration:none;color:var(--ink);position:relative;
  transition:padding .45s var(--ease),color .3s;
}
.gate__link::before{
  content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:2px;background:var(--moss);
  transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease);
}
.gate__link:hover{padding-left:18px;color:var(--moss)}
.gate__link:hover::before{transform:scaleY(1)}
.gate__link-name{
  font-family:var(--f-sans);font-weight:400;letter-spacing:-.03em;
  font-size:clamp(34px,6vw,68px);line-height:1;
}
.gate__arrow{
  width:clamp(28px,3.4vw,40px);height:auto;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.4;
  opacity:.35;transform:translateX(-8px);transition:.45s var(--ease);
}
.gate__link:hover .gate__arrow{opacity:1;transform:none}

/* secondary link — mirrored, and roughly half the height of the Archive row */
.gate__link--sm{padding-block:clamp(10px,1.6vw,15px)}
.gate__link--sm .gate__link-name{font-size:clamp(17px,3vw,34px)}
.gate__link--sm .gate__arrow{width:clamp(20px,2.4vw,30px);transform:translateX(8px)}
.gate__link--sm::before{left:auto;right:0;background:var(--moss)}
.gate__link--sm:hover{padding-left:4px;padding-right:18px}
.gate__link--sm:hover .gate__arrow{transform:none}

.gate__foot{padding-block:30px}
.gate__foot .foot__meta{justify-content:flex-start}

/* ── footer ─────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);padding-block:36px}
.foot__in{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
.foot__note{margin:0;font-size:13px;color:var(--ink-3)}
.foot__meta{margin:0;display:flex;gap:20px;font-family:var(--f-sans);font-size:13px;color:var(--ink-3)}

/* ── drawer ─────────────────────────────────────────────────── */
.scrim{
  position:fixed;inset:0;z-index:80;background:rgba(6,7,5,.65);
  backdrop-filter:blur(3px);opacity:0;transition:opacity .45s var(--ease);
}
.scrim.is-open{opacity:1}
.sheet{
  position:fixed;top:0;right:0;bottom:0;z-index:90;width:min(560px,100%);
  background:var(--bg-2);border-left:1px solid var(--line-2);
  transform:translateX(101%);transition:transform .55s var(--ease);
  display:flex;flex-direction:column;
}
.sheet.is-open{transform:none}
.sheet__scroll{overflow-y:auto;flex:1}
.sheet__pad{padding:clamp(24px,3.4vw,36px)}
.sheet__close{
  position:absolute;top:14px;right:16px;z-index:2;font-size:26px;line-height:1;
  color:var(--ink-3);padding:4px 10px;
}
.sheet__close:hover{color:var(--rust)}

/* map runs edge to edge at the top of the panel rather than sitting in a box */
.sheet__map{
  width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  background:var(--bg-3);border-bottom:1px solid var(--line-2);
  image-rendering:pixelated;   /* it's a block map — keep the edges crisp */
}
.sheet__title{
  font-size:clamp(30px,4.4vw,44px);letter-spacing:-.035em;line-height:1;
  margin:0 0 10px;font-weight:400;
}
.sheet__strip{
  margin:0 0 20px;font-family:var(--f-mono);font-size:12px;
  letter-spacing:.04em;color:var(--ink-2);
}
.sheet__strip i{font-style:normal;color:var(--ink-3);padding:0 7px}
.sheet__blurb{font-size:15.5px;line-height:1.6;color:var(--ink-2);margin:0 0 24px;max-width:44ch}

/* facts: tight two-column rows, dotted leaders instead of full-width hairlines */
.facts{display:grid;grid-template-columns:auto 1fr;gap:0 16px;margin:26px 0 0}
.facts dt,.facts dd{font-family:var(--f-mono);font-size:12.5px;padding:5px 0}
.facts dt{
  color:var(--ink-3);letter-spacing:.09em;text-transform:uppercase;font-size:10.5px;
  align-self:center;
}
.facts dd{margin:0;color:var(--ink);text-align:right;word-break:break-word}
.facts dd a{color:var(--moss);text-decoration:none;border-bottom:1px solid rgba(157,192,106,.4)}

.dl{
  display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;
  background:var(--moss);color:#0c0e0a;padding:16px 20px;
  font-family:var(--f-mono);font-size:14px;font-weight:500;letter-spacing:.02em;
  text-decoration:none;transition:background .3s,transform .3s var(--ease);
}
.dl:hover{background:#b0d47a;transform:translateY(-2px)}
.dl--alt{
  margin-top:8px;background:none;color:var(--ink);
  border:1px solid var(--line-2);
}
.dl--alt:hover{background:var(--bg-3);border-color:var(--amber);color:var(--amber)}
.dl--alt span{opacity:.55}
.dl b{font-weight:500}
.dl span{opacity:.62;font-size:12.5px}

.alt{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.alt a{
  display:inline-block;font-family:var(--f-mono);font-size:12px;text-decoration:none;
  border:1px solid var(--line-2);padding:7px 12px;color:var(--ink-2);transition:.25s;
}
.alt a:hover{border-color:var(--moss);color:var(--moss)}

/* checksum demoted to a footnote — needed rarely, shouldn't shout */
.hashline{
  display:flex;align-items:baseline;gap:8px;margin:30px 0 0;padding-top:16px;
  border-top:1px solid var(--line);font-family:var(--f-mono);font-size:10.5px;
}
.hashline > span{color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;flex:none}
.hashline code{
  flex:1;min-width:0;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hashline button{color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;flex:none;transition:color .2s}
.hashline button:hover,.hashline button.is-done{color:var(--moss)}

.warn{
  margin-top:22px;padding:14px 16px;border:1px solid var(--line);border-left:2px solid var(--amber);
  font-family:var(--f-mono);font-size:12px;line-height:1.65;color:var(--ink-2);background:var(--bg-3);
}
.sheet__note{margin:22px 0 0;font-size:14px;line-height:1.7;color:var(--ink-2)}

/* ── scroll reveals ─────────────────────────────────────────── */
.anim [data-reveal]{
  opacity:0;transform:translateY(22px);
  transition:opacity .95s var(--ease) var(--d,0s),transform .95s var(--ease) var(--d,0s);
}
.anim [data-reveal].is-in{opacity:1;transform:none}
.reveal-line span{display:inline-block}
.anim .reveal-line span{transform:translateY(110%);transition:transform 1s var(--ease) .1s}
.anim .reveal-line.is-in span{transform:none}
.anim .row{opacity:0;transform:translateY(16px)}
.anim .row.is-in{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease) var(--d,0s),transform .7s var(--ease) var(--d,0s),
             background .35s,padding .5s var(--ease);
}

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width:1175px){  /* 940 layout px x 1.25 zoom */
  .about__grid{grid-template-columns:1fr;gap:40px}
  .about__meta{position:static}
  .hero__foot{grid-template-columns:1fr;align-items:start}
  .row{grid-template-columns:auto minmax(0,1fr) auto;gap:14px}
  .row__meta.opt{display:none}
}
@media (max-width:875px){  /* 700 layout px x 1.25 zoom */
  .hero{padding-top:130px}
  .stats{flex-wrap:wrap;gap:20px 28px}
  .prose p:first-child::first-letter{font-size:2.2em}
  .toolbar__right{width:100%}
  .row{padding-block:17px}
  .row__title{font-size:16.5px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-reveal],.row,.hero__title .line > *{opacity:1!important;transform:none!important}
  .reveal-line span{transform:none!important}
  .grain{animation:none}
}