/* ============================================================
   CIRCUL8R · Editorial cut
   A theme layer on top of circul8r.css, after the Gemini draft:
   paper + ink + hot red + cyan, square corners, hard offset
   shadows, mono "//" kickers. Same markup, one cached file,
   no inline styles.
   ============================================================ */
:root{
  --paper:#f4f4f0; --white:#fff; --ink:#111; --ink-2:#2b2b2b; --steel:#555;
  --red:#d8232a;          /* small text on paper passes AA; #ff3333 does not */
  --red-hot:#ff3333;      /* fills and big type only */
  --cyan:#00e5ff;         /* backgrounds behind ink text only */
  --blue:var(--ink); --navy:var(--ink); --sky:#e8e8e1; --hair:var(--ink);
  --red-dk:var(--red); --bg-2:var(--sky);
  --r:0;
  --shadow:6px 6px 0 var(--ink);
  --shadow-hot:9px 9px 0 var(--red-hot);
}
body{background:var(--paper);color:var(--ink)}
section+section{border-top:2px solid var(--ink)}
a{text-decoration-color:var(--red-hot)}
a:hover{color:var(--red)}
:focus-visible{outline:3px solid var(--red-hot);outline-offset:3px}

/* ---------- header ---------- */
.site-top{background:#fff;border-bottom:4px solid var(--ink);box-shadow:none}
.logo{color:var(--ink);font-size:clamp(26px,3vw,34px);letter-spacing:-.01em}
.logo:hover{color:var(--ink)}
.logo small{border:0;padding:4px 7px;background:var(--ink);color:var(--red-hot);letter-spacing:.04em}
.mark{border-radius:0}
nav.links::before{background:var(--ink);height:4px;margin-top:-2px;border-radius:0}
.line-tag{border-radius:0;background:var(--ink)}
nav.links a{border-radius:0}
nav.links a i{border-color:var(--ink)}
nav.links a[aria-current]{color:var(--red)}
nav.links a[aria-current] i{background:var(--red-hot);border-color:var(--red-hot);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ink)}
.nav-toggle{border-radius:0;border-color:var(--ink)}

/* ---------- ticker ---------- */
.tick{background:var(--ink);border-bottom:4px solid var(--red-hot);font-size:13px;text-transform:uppercase}
.tick__tag{background:var(--red-hot)}
.tick li b{background:#fff;color:var(--ink);padding:2px 5px;margin-right:10px;font-weight:600}
.tick li::after{border-radius:0;background:var(--cyan)}
.tick a:hover{color:var(--cyan)}

/* ---------- type ---------- */
.kicker{color:var(--ink);border-bottom:2px solid var(--ink);padding-bottom:.5rem;display:inline-block}
.kicker b{border-radius:0;background:var(--ink);color:#fff}
.hero{background:#fff;border-bottom:6px solid var(--ink)}
.hero h1{font-size:clamp(3rem,8vw,6.2rem);letter-spacing:-.01em}
.hero h1 em{color:#fff;background:var(--red-hot);padding:0 .12em;display:inline-block;transform:skew(-5deg);margin-top:.06em}
.hero h1>span,.phead h1>span{color:var(--red-hot)}
.lede{border-left:4px solid var(--red-hot);padding-left:1rem;color:var(--ink-2)}
.shead{border-bottom:3px solid var(--ink)}
.shead h2 .sq{border-radius:0;box-shadow:3px 3px 0 var(--ink)}
.src a{color:var(--ink)}
.src a:hover{color:var(--red)}

/* ---------- the Line 808 graphic: ink line, red lit stop ---------- */
.ring path{stroke:var(--ink)}
.ring .roundel rect{fill:var(--ink)}
.ring .roundel circle{stroke:var(--red-hot)}
.ring .step{stroke:var(--ink)}
.ring .step.on{fill:var(--red-hot);stroke:var(--red-hot)}
@media (max-width:860px){.hero{background:#fff}}
.hero{background:#fff}

/* ---------- page heads ---------- */
.phead{background:var(--ink)}
.phead::after{background:var(--red-hot)}
.phead .kicker{color:#ddd;border-bottom-color:#555}
.phead .kicker b{background:var(--red-hot);color:#fff}
.phead .lede{color:#e6e6e6;border-left-color:var(--cyan)}

/* ---------- cards: one rule for every boxed thing ---------- */
.story,.sec,.card,.rv,.ch,.fest,.tmn,.tmf,.pc,.vg,.tk,.ln,.tk-side,.fy-strip a,.c8-rubric li,.leafs,.screen,.rule-box{
  border:2px solid var(--ink);border-radius:0;box-shadow:var(--shadow);background:#fff;
  transition:transform .1s ease,box-shadow .1s ease}
.story:hover,.sec:hover,.card:hover,.rv:hover,.ch:hover,.fest:hover,.tmn:hover,.vg:hover,.tk:hover,.fy-strip a:hover,
.story:focus-within,.card:focus-within,.rv:focus-within,.fy-strip a:focus-visible{
  transform:translate(-3px,-3px);box-shadow:var(--shadow-hot);border-color:var(--ink)}
@media (prefers-reduced-motion:reduce){.story:hover,.sec:hover,.card:hover,.rv:hover,.ch:hover,.fest:hover,.tmn:hover,.vg:hover,.tk:hover,.fy-strip a:hover{transform:none}}
.rv,.card,.ch,.tmn,.fy-strip a{border-top-width:2px}
.rv{border-top:8px solid var(--c,var(--ink))}
.rv.fy{border-top-color:var(--red-hot)}
.story--lead,.lead{background:var(--ink);color:#fff;border:2px solid var(--ink);border-left:12px solid var(--red-hot);box-shadow:var(--shadow-hot);border-radius:0}
.story--lead h3,.lead h3{color:#fff}
.lead .kicker,.story--lead .kicker{color:var(--cyan);border-bottom-color:#444}
.lead p,.story--lead p{color:#ddd}
.lead .src,.lead .src a,.story--lead .src,.story--lead .src a{color:#bbb}
.rule-box{background:var(--ink);border-top:8px solid var(--red-hot)}
.rule-box .tip{background:#2a2a2a;border-radius:0}
.leafs b,.screen>b{border-radius:0}
.leafs span.dt{border-radius:0;border-color:var(--ink);color:var(--ink)}

/* ---------- chips, filters, tags, badges ---------- */
.chip,.filters button{border-radius:0;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);color:var(--ink);background:#fff;font-family:var(--font-mono);font-weight:600}
.chip:hover,.filters button:hover{background:var(--red-hot);color:#fff}
.chip--ink,.filters button[aria-pressed="true"]{background:var(--ink);color:#fff}
.chip--sig{background:var(--red-hot);border-color:var(--ink);color:#fff}
.chip:active,.filters button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.tag{border-radius:0;border:1px solid var(--ink)}
.tag::before{border-radius:0}
.score,.tmn-tag,.ch-status,.star,.sec__n{border-radius:0}
.score{background:var(--ink)}
.ch-red,.star{background:var(--red-hot)}
.ch-blue,.tmn-tag{background:var(--ink)}
.price,.card .price{display:inline-block;background:var(--cyan);color:var(--ink);border:2px solid var(--ink);padding:3px 8px;font-size:1.25rem;width:max-content}
.price.muted{background:var(--sky);color:var(--steel)}
.tk .p{color:var(--ink)}
.bar,.c8-bar{border-radius:0;border:1px solid var(--ink);background:#fff}
.bar i,.c8-bar i{border-radius:0;background:var(--red-hot)}

/* ---------- home ---------- */
.sec__head{background:var(--c)}
.sec__list::before{background:var(--ink);opacity:1;width:3px}
.sec__list a::before{border-radius:0;border-color:var(--ink)}
.sec__list a:hover::before{background:var(--red-hot);border-color:var(--red-hot)}
.play-banner{background:var(--cyan);color:var(--ink);border:4px solid var(--ink);border-left:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);border-radius:0}
.play-banner:hover{background:var(--cyan);color:var(--ink);transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--red-hot)}
.pb-copy span{color:var(--ink)}
.pb-tiles i{border:2px solid var(--ink);border-radius:0}
.pb-tiles i[data-s="g"]{background:var(--ink);color:#fff}
.pb-go{background:#fff;border:2px solid var(--ink);padding:10px 14px;box-shadow:3px 3px 0 var(--ink)}

/* ---------- reviews / c8 ---------- */
.c8{border-color:var(--ink);border-radius:0}
.c8-head{background:var(--ink)}
.c8-lab small{color:var(--cyan)}
.c8-lab small a{color:var(--cyan)}
.c8 summary{color:var(--ink)}
.c8 li b{color:var(--ink)}
.why{background:var(--paper);border-left:4px solid var(--red-hot);border-radius:0}
.why b{color:var(--red)}
.tuned span{border-radius:0;border-color:var(--ink)}
.tuned b{color:var(--ink)}
.proven span{border-radius:0;border-color:var(--ink);color:var(--ink)}
.rv blockquote{border-left-color:var(--red-hot);background:var(--paper);font-style:italic}

/* ---------- events / ticketmaster ---------- */
.fest-date{background:var(--ink)}
.fest-price{color:var(--red)}
.tm-cta{background:var(--cyan);color:var(--ink);border:2px solid var(--ink);border-left:12px solid var(--red-hot);box-shadow:8px 8px 0 var(--ink);border-radius:0}
.tm-cta:hover{background:var(--cyan);color:var(--ink)}
.tm-cta span{color:var(--ink)}
.tms{background:var(--ink);border-radius:0;box-shadow:6px 6px 0 var(--red-hot)}
.tms span{color:#ddd}
.tmf b{color:var(--red)}
.tmf{border-left:8px solid var(--red-hot)}
.tm-table thead th{background:var(--ink)}
.tm-table td b{color:var(--ink);background:var(--cyan);padding:2px 6px}
.pc-bar path{fill:var(--ink)}
.pc-bar:hover path{fill:var(--red-hot)}
.ch-side{border-radius:0;background:var(--paper)}
.ch-side+.ch-side{border-left-color:var(--red-hot)}
.ch-tl li::before{background:var(--ink)}
.ch-tl li::after{border-radius:0;border-color:var(--ink)}
.ch-tl li:last-child::after{background:var(--red-hot);border-color:var(--red-hot)}
.ch-tl li span{color:var(--red)}

/* ---------- token keeps its real colours (the legend says blue/red/grey) ---------- */
.tk-tile{border-radius:0;border-color:#bbb}
.tk-tile.filled{border-color:var(--ink)}
.tk-tile[data-s="g"],.tk-key[data-s="g"]{background:#274490}
.tk-tile[data-s="y"],.tk-key[data-s="y"]{background:#e31b23}
.tk-key{border-radius:0;background:#e3e3dc}
.tk-stop{border-color:var(--ink);color:var(--ink)}
.tk-msg{color:var(--ink)}
.tk-stats span{border-radius:0;background:var(--paper);border:1px solid var(--ink)}
.tk-stats b{color:var(--ink)}

/* ---------- footer: light, ruled ---------- */
footer{background:#fff;color:var(--ink);border-top:6px solid var(--ink)}
footer h4{color:var(--ink);font-family:var(--font-mono);font-size:13px;border-bottom:2px solid var(--ink);padding-bottom:.5rem}
footer p,footer li{color:var(--ink-2)}
footer a{color:var(--ink)}
footer a:hover{color:var(--red)}
footer .small{color:var(--steel);border-top:1px solid #ccc;padding-top:1rem}

/* small white-on-red text uses the darker red (5:1); the hot red stays for big type, fills and shadows */
.tick__tag,.chip--sig,.chip:hover,.filters button:hover,.ch-red,.star,.phead .kicker b,.rv.fy .tag,.tm-hero .kicker b{background:var(--red)}
.chip--sig{color:#fff}
.hero h1 em{display:inline;transform:none;padding:0 .1em;-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:1.08}
.hero h1>span{color:var(--ink)}

/* ============================================================
   TORONTO PALETTE — the editorial structure in flag colours:
   blue does the work black did, white is the paper, red is the
   accent. No cyan.
   ============================================================ */
:root{
  --ink:#274490;          /* Toronto blue: rules, borders, shadows, bands */
  --text:#0e1b3d;         /* deep navy for long-form reading */
  --paper:#fff; --white:#fff; --sky:#eef2fb;
  --ink-2:#2c3a5e; --steel:#4f5b7a;
  --red:#c8102e;          /* small text and labels on white/red: 5.9:1 */
  --red-hot:#e31b23;      /* flag red for fills, big type, shadows */
  --cyan:#eef2fb;         /* old cyan slots become a pale blue tint */
  --blue:var(--ink); --navy:#16285a; --hair:var(--ink); --bg-2:var(--sky);
}
body{background:#fff;color:var(--text)}
p,.lede,.story p,.rv p,.card p,.fest p,.tmn p,.ch-sum{color:var(--ink-2)}
h1,h2,h3,.logo{color:var(--ink)}
.hero h1{color:var(--ink)}
.hero h1>span{color:var(--red-hot)}
.lede{border-left-color:var(--red-hot)}
.tick{background:var(--ink)}
.tick li::after{background:var(--red-hot)}
.tick li b{color:var(--ink)}
.tick a:hover{color:#ffd4d6}
.logo small{background:var(--red);color:#fff}
.lead .kicker,.story--lead .kicker{color:#c9d4f2;border-bottom-color:rgba(255,255,255,.25)}
.lead,.story--lead{background:var(--ink)}
.lead p,.story--lead p{color:#e3e9f8}
.lead .src,.lead .src a,.story--lead .src,.story--lead .src a{color:#c9d4f2}
.c8-lab small,.c8-lab small a{color:#c9d4f2}
.phead .lede{border-left-color:var(--red-hot);color:#e3e9f8}
.phead .kicker{color:#c9d4f2;border-bottom-color:rgba(255,255,255,.3)}
.rule-box .tip{background:var(--navy)}
.tms span{color:#e3e9f8}
/* the old cyan blocks: white or tint, blue frame, red shadow on hover */
.play-banner{background:#fff;color:var(--ink);border-color:var(--ink);box-shadow:8px 8px 0 var(--ink)}
.play-banner:hover{background:var(--sky);color:var(--ink)}
.pb-copy b{color:var(--ink)}
.pb-copy span{color:var(--ink-2)}
.pb-tiles i[data-s="g"]{background:var(--ink)}
.pb-tiles i[data-s="y"]{background:var(--red-hot)}
.pb-go{color:var(--ink)}
.tm-cta{background:#fff;color:var(--ink)}
.tm-cta:hover{background:var(--sky);color:var(--ink)}
.tm-cta b{color:var(--ink)}
.tm-cta span{color:var(--ink-2)}
.price,.card .price{background:var(--sky);color:var(--ink);border-color:var(--ink)}
.tm-table td b{background:var(--sky);color:var(--ink)}
.chip:hover,.filters button:hover{background:var(--red);color:#fff}
footer{border-top-color:var(--ink)}
footer h4{color:var(--ink);border-bottom-color:var(--ink)}
footer .small{border-top-color:#d5dcef}
.kicker{color:var(--ink);border-bottom-color:var(--ink)}
.kicker b{background:var(--ink)}
/* headings sitting on blue/red bands stay white */
.sec__head h2,.phead h1,.lead h3,.story--lead h3,.tm-hero h1,.rule-box h3,.fest-date b,.tms b,.c8-num,.c8-lab{color:#fff}
.tm-cta b{color:var(--ink)}

/* ============================================================
   SPLASH — circul8r.the808.org landing
   Sequence (first visit): grid → skyline draws → letters drop →
   the 8 flips into a red token → tagline → next-stop feed → CTA.
   The Line 808 train runs 16 stops in TR-808 steps, forever.
   ============================================================ */
body[data-page="home"] .tick{display:none}
.splash{position:relative;min-height:calc(100svh - 70px);display:flex;flex-direction:column;justify-content:center;overflow:hidden;
  background:var(--ink);color:#fff;padding:3rem 0 0;border-top:0;border-bottom:8px solid var(--red-hot)}
.sp-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:48px 48px;
  mask-image:linear-gradient(#000 30%,transparent 95%);-webkit-mask-image:linear-gradient(#000 30%,transparent 95%)}
.sp-sky{position:absolute;left:-20px;right:-20px;bottom:56px;width:calc(100% + 40px);height:42%;pointer-events:none;transition:transform .3s ease-out}
.sp-sky path{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.55);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:0;vector-effect:non-scaling-stroke}
.sp-center{position:relative;z-index:2;padding-bottom:7rem}
.sp-kick{font:600 13px/1.4 var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:#c9d4f2;margin:0 0 1rem}
.sp-kick i{font-style:normal;color:var(--red-hot)}
.sp-word{display:flex;flex-wrap:wrap;gap:0 .02em;margin:0;font:800 clamp(3.6rem,15vw,11.5rem)/.86 var(--font-display);letter-spacing:-.01em;color:#fff;text-shadow:.06em .06em 0 var(--navy)}
.sp-l{display:inline-block}
.sp-8{display:inline-grid;place-items:center;width:.86em;height:.86em;align-self:center;margin:0 .04em;border-radius:50%;background:var(--red-hot);color:#fff;text-shadow:none;font-size:.78em;box-shadow:.07em .07em 0 var(--navy)}
.sp-tag{font:800 clamp(1.6rem,4.5vw,3.2rem)/1 var(--font-display);text-transform:uppercase;margin:1.2rem 0 .6rem;color:#fff}
.sp-tag em{font-style:normal;background:var(--red-hot);padding:0 .15em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sp-tag span{color:var(--red-hot)}
.sp-sub{max-width:52ch;color:#e3e9f8;font-size:clamp(1rem,1.6vw,1.2rem);margin:0 0 1.4rem}
.sp-next{display:flex;align-items:stretch;max-width:640px;border:2px solid #fff;box-shadow:6px 6px 0 var(--red-hot);background:#fff;color:var(--ink);margin-bottom:1.4rem}
.sp-next-tag{flex:none;display:flex;align-items:center;padding:0 12px;background:var(--red);color:#fff;font:700 13px/1 var(--font-display);text-transform:uppercase;letter-spacing:.1em}
#sp-feed{list-style:none;margin:0;padding:0;position:relative;flex:1;min-height:46px}
#sp-feed li{position:absolute;inset:0;display:flex;align-items:center;gap:8px;padding:0 12px;font:600 15px/1.2 var(--font-body);opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sp-feed li.on{opacity:1;transform:none}
#sp-feed li b{font:600 11px/1 var(--font-mono);text-transform:uppercase;color:var(--steel)}
.cd{font:600 12px/1 var(--font-mono);text-transform:uppercase;color:var(--ink);background:var(--sky);padding:4px 6px;margin-left:auto}
.cd:empty{display:none}
.cd.soon{background:var(--red);color:#fff}
.sp-cta{display:flex;gap:12px;flex-wrap:wrap}
.splash .chip{border-color:#fff;box-shadow:4px 4px 0 var(--navy)}
.splash #sp-skip{background:transparent;color:#fff}
.splash #sp-skip:hover{background:#fff;color:var(--ink)}
.sp-line{position:absolute;left:0;right:0;bottom:0;width:100%;height:56px;background:var(--navy);z-index:2}
.sp-line line{stroke:#fff;stroke-width:6}
.sp-stop{fill:var(--navy);stroke:#fff;stroke-width:4}
.sp-train rect{fill:var(--red-hot);stroke:#fff;stroke-width:3}
.sp-train text{font:800 15px var(--font-display);fill:#fff;letter-spacing:.06em}
.sp-train{transform:translateX(60px)}
.sp-scroll{position:absolute;z-index:3;right:clamp(1rem,4vw,3rem);bottom:76px;width:34px;height:54px;border:2px solid #fff;display:grid;justify-items:center;padding-top:8px}
.sp-scroll span{width:6px;height:12px;background:var(--red-hot)}

@media (prefers-reduced-motion:no-preference){
  .sp-grid{animation:spFade 1s ease both}
  .sp-sky path{stroke-dashoffset:1;animation:spDraw 2.2s .2s cubic-bezier(.6,.1,.3,1) forwards}
  .sp-kick{animation:spUp .5s .2s both}
  .sp-l{animation:spDrop .6s calc(.35s + var(--i) * .08s) cubic-bezier(.2,1.4,.4,1) both}
  .sp-8{animation:spDrop .6s calc(.35s + var(--i) * .08s) cubic-bezier(.2,1.4,.4,1) both,spFlip .7s 1.25s ease-in-out both}
  .sp-tag{animation:spUp .5s 1.4s both}
  .sp-sub{animation:spUp .5s 1.6s both}
  .sp-next{animation:spUp .5s 1.85s both}
  .sp-cta{animation:spUp .5s 2.05s both}
  .sp-scroll{animation:spUp .5s 2.3s both}
  .sp-scroll span{animation:spNudge 1.4s 2.8s ease-in-out infinite}
  .sp-train{animation:spRun 4.8s 1s steps(15,end) infinite}
  .sp-stop{animation:spLit 4.8s calc(1s + var(--i) * .3s) step-end infinite}
  .splash.settled .sp-grid,.splash.settled .sp-sky path,.splash.settled .sp-kick,.splash.settled .sp-l,.splash.settled .sp-8,
  .splash.settled .sp-tag,.splash.settled .sp-sub,.splash.settled .sp-next,.splash.settled .sp-cta,.splash.settled .sp-scroll{animation:none;opacity:1;transform:none;stroke-dashoffset:0}
}
@keyframes spFade{from{opacity:0}}
@keyframes spDraw{to{stroke-dashoffset:0}}
@keyframes spUp{from{opacity:0;transform:translateY(14px)}}
@keyframes spDrop{0%{opacity:0;transform:translateY(-.6em) rotate(-6deg)}100%{opacity:1;transform:none}}
@keyframes spFlip{0%{transform:rotateY(0)}50%{transform:rotateY(90deg);background:#fff}100%{transform:rotateY(360deg)}}
@keyframes spNudge{50%{transform:translateY(14px)}}
@keyframes spRun{0%{transform:translateX(60px)}93.75%{transform:translateX(1140px)}100%{transform:translateX(1140px)}}
@keyframes spLit{0%{fill:var(--red-hot)}6.25%{fill:var(--navy)}}
@media (max-width:640px){
  .splash{min-height:calc(100svh - 64px);padding-top:2rem}
  .sp-center{padding-bottom:6rem}
  .sp-sky{height:30%}
  .sp-scroll{display:none}
  #sp-feed li{font-size:14px}
}

/* ---------- What's hot ---------- */
.hot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hot{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:16px;border:2px solid var(--ink);background:#fff;box-shadow:var(--shadow);text-decoration:none;color:var(--text);transition:transform .1s,box-shadow .1s}
.hot:hover,.hot:focus-visible{transform:translate(-3px,-3px);box-shadow:var(--shadow-hot);color:var(--text)}
.hot:first-child{grid-column:span 2;background:var(--ink);color:#fff;border-left:12px solid var(--red-hot)}
.hot:first-child .hot-n{color:#fff;-webkit-text-stroke:0}
.hot:first-child b{color:#fff;font-size:clamp(2rem,4vw,3rem)}
.hot:first-child .hot-what{color:#e3e9f8;font-size:17px}
.hot:first-child .mono{color:#c9d4f2}
.hot-n{font:800 clamp(2.4rem,4vw,3.4rem)/.9 var(--font-display);color:#fff;-webkit-text-stroke:2px var(--ink)}
.hot-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.hot-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.hot-when{display:flex;align-items:center;gap:6px}
.hot-when .mono{font-size:12px;text-transform:uppercase;color:var(--steel)}
.hot b{font:800 1.5rem/1.02 var(--font-display);text-transform:uppercase;color:var(--ink)}
.hot-what{font-size:15px;color:var(--ink-2)}
.hot[hidden]{display:none}
@media (max-width:980px){.hot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.hot-grid{grid-template-columns:1fr}.hot:first-child{grid-column:auto}}

/* ---------- The line at a glance ---------- */
.gl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;position:relative}
.gl{position:relative;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;padding:16px 16px 14px;border:2px solid var(--ink);border-top:8px solid var(--c);background:#fff;box-shadow:var(--shadow);text-decoration:none;color:var(--text);transition:transform .1s,box-shadow .1s}
.gl:hover,.gl:focus-visible{transform:translate(-3px,-3px);box-shadow:var(--shadow-hot);color:var(--text)}
.gl-dot{grid-row:1/3;width:22px;height:22px;margin-top:4px;border:4px solid var(--ink);background:#fff}
.gl:hover .gl-dot{background:var(--red-hot);border-color:var(--red-hot)}
.gl-name{font:800 1.7rem/1 var(--font-display);text-transform:uppercase;color:var(--ink)}
.gl-count{font:600 12px/1.3 var(--font-mono);text-transform:uppercase;color:var(--steel)}
.gl-count b{font:800 1.1rem/1 var(--font-display);color:var(--red)}
.gl-blurb{grid-column:1/-1;font-size:15px;color:var(--ink-2);margin-top:6px}
.gl-top{grid-column:1/-1;font:600 13px/1.4 var(--font-mono);color:var(--ink);background:var(--sky);padding:6px 8px}
.gl-go{grid-column:1/-1;font:800 14px/1 var(--font-display);text-transform:uppercase;letter-spacing:.08em;color:var(--red);margin-top:6px}
.sp-sky{height:34%}
.sp-sky path{fill:rgba(255,255,255,0);stroke:rgba(255,255,255,.45)}
@media (prefers-reduced-motion:no-preference){
  .sp-sky path{animation:spDraw 2.2s .2s cubic-bezier(.6,.1,.3,1) forwards,spFill 1s 2.2s forwards}
  .splash.settled .sp-sky path{fill:rgba(255,255,255,.05)}
}
@media (prefers-reduced-motion:reduce){.sp-sky path{fill:rgba(255,255,255,.05)}}
@keyframes spFill{to{fill:rgba(255,255,255,.05)}}
@media (max-width:640px){.sp-line{height:44px}.sp-sky{height:26%}}
.my-card{border-color:var(--ink);box-shadow:var(--shadow);border-radius:0}.mys{border-radius:0}.my-inc li{border:1px solid var(--ink)}
.hit,.hw-card,.wl{border-color:var(--ink);box-shadow:var(--shadow);border-radius:0}.lf{box-shadow:8px 8px 0 var(--ink)}