/* ─────────────────────────────────────────────────────────────────────
   Kuro_Labs — black & red gothic.
   Everything on the site resolves from the tokens below. Change these and
   the whole site re-skins; no raw colour appears anywhere else.
   ───────────────────────────────────────────────────────────────────── */
:root{
  --blood: 175 47 44;      /* deep crimson — borders, rules, structure   */
  --ember: 214 48 40;      /* brighter red — links, hover, live accents  */
  --coal:  #070506;        /* page ground, near-black with a red bias    */
  --crypt: #100a0b;        /* raised surfaces                            */
  --ash:   #e6dedb;        /* body text                                  */
  --dust:  #8e8280;        /* secondary text                             */
  --rule:  rgb(var(--blood) / .38);

  /* The display face. Swap this one line to change the whole identity —
     candidates that pair with this palette, roughly most to least gothic:
       'UnifrakturMaguntia'  true blackletter, heavy, hard to read at size
       'Pirata One'          blackletter but legible — the safe gothic pick
       'Metal Mania'         rough, horror-leaning
       'Cinzel Decorative'   sharp Roman capitals, gothic without the metal
     Whatever you pick must also be added to the <link> in each page head. */
  --display: 'Pirata One', 'UnifrakturMaguntia', 'Cinzel Decorative', Georgia, serif;
  --head: 'Cinzel', Georgia, 'Times New Roman', serif;
  --wrap: 1080px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--coal); color:var(--ash);
  font:16px/1.7 ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* Film grain + a red bloom from above. Two pseudo-elements, no images —
   this is most of what stops flat black looking like an unstyled page. */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(120% 70% at 50% -15%, rgb(var(--blood) / .30), transparent 62%),
    radial-gradient(80% 50% at 50% 105%, rgb(var(--blood) / .12), transparent 70%);
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.32;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
  mix-blend-mode:overlay;
}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px; position:relative; z-index:1}

h1,h2,h3{font-family:var(--head); font-weight:600; letter-spacing:.03em; line-height:1.2; margin:0}
a{color:rgb(var(--ember)); text-decoration:none}
a:hover{color:#ff6a58}
.muted{color:var(--dust)}

/* ── header ───────────────────────────────────────────────────────── */
header.site{position:sticky; top:0; z-index:5; border-bottom:1px solid var(--rule);
  background:rgb(7 5 6 / .88); backdrop-filter:blur(9px)}
header.site .wrap{display:flex; align-items:center; gap:26px; height:62px}
.brand{font-family:var(--head); font-size:17px; letter-spacing:.16em; color:var(--ash)}
.brand:hover{color:rgb(var(--ember))}
nav.site{margin-left:auto; display:flex; gap:26px}
nav.site a{color:var(--dust); font-size:12px; letter-spacing:.16em; text-transform:uppercase}
nav.site a:hover,nav.site a[aria-current]{color:rgb(var(--ember))}

/* ── hero ─────────────────────────────────────────────────────────── */
.hero{padding:96px 0 30px; text-align:center}
.hero .kicker{font-family:var(--head); font-size:12.5px; letter-spacing:.42em;
  text-transform:uppercase; color:rgb(var(--ember)); margin:0 0 22px}
.hero h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(52px,11vw,132px); line-height:.95; letter-spacing:.01em;
  color:#f3e9e7; margin:0;
  text-shadow:0 0 44px rgb(var(--blood) / .85), 0 0 110px rgb(var(--blood) / .45);
}
/* ornamental rule — a hairline with a diamond punched through the middle */
.rule{display:flex; align-items:center; gap:16px; justify-content:center; margin:30px auto 0; max-width:420px}
.rule::before,.rule::after{content:""; height:1px; flex:1; background:linear-gradient(90deg,transparent,var(--rule),transparent)}
.rule span{width:7px; height:7px; transform:rotate(45deg); background:rgb(var(--ember)); box-shadow:0 0 12px rgb(var(--ember) / .8)}

.bio{max-width:62ch; margin:34px auto 0; text-align:left; color:#cfc6c3; font-size:16.5px}
.bio p{margin:0 0 15px}
.bio p:first-of-type::first-letter{
  font-family:var(--display); font-size:3.4em; line-height:.82; float:left;
  padding:4px 12px 0 0; color:rgb(var(--ember))}

/* ── section headings ─────────────────────────────────────────────── */
.eyebrow{font-family:var(--head); font-size:12px; letter-spacing:.34em; text-transform:uppercase;
  color:rgb(var(--ember)); text-align:center; margin:0 0 8px}
.sec-title{font-family:var(--head); font-size:clamp(24px,3.6vw,34px); text-align:center; margin:0 0 40px; color:var(--ash)}

/* ── cards ────────────────────────────────────────────────────────── */
/* Hairlines are drawn as a 1px box-shadow on each card rather than as a red
   background showing through the grid gaps. With the gap-background trick an
   orphan row (4 cards in a 3-wide grid) leaves the empty tracks glowing red. */
.cards{display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); margin:0 0 74px}
.cards.four{grid-template-columns:repeat(4,1fr)}
.cards.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){ .cards.four{grid-template-columns:repeat(2,1fr)} }
@media (max-width:860px){ .cards.three{grid-template-columns:1fr} }
@media (max-width:560px){ .cards.four{grid-template-columns:1fr} }
.card{display:block; background:var(--crypt); color:inherit; padding:32px 28px 30px;
  position:relative; box-shadow:0 0 0 1px var(--rule); transition:background .2s, color .2s}
.card:hover{background:#1a0f10; color:inherit}
.card .num{font-family:var(--head); font-size:11px; letter-spacing:.3em; color:rgb(var(--blood)); display:block; margin-bottom:14px}
.card h2,.card h3{font-size:20px; margin:0 0 10px; color:var(--ash); letter-spacing:.04em}
.card:hover h2,.card:hover h3{color:rgb(var(--ember))}
.card p{margin:0; color:var(--dust); font-size:14.8px; line-height:1.65}
.card .go{display:inline-block; margin-top:18px; font-size:11.5px; letter-spacing:.2em;
  text-transform:uppercase; color:rgb(var(--ember))}
.card::after{content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:rgb(var(--ember)); transition:width .28s ease}
.card:hover::after{width:100%}

/* ── generic page ─────────────────────────────────────────────────── */
main{position:relative; z-index:1}
main.wrap{padding-top:56px; padding-bottom:90px}
main h1{font-family:var(--head); font-size:clamp(30px,5vw,46px); margin:0 0 12px; color:var(--ash)}
main .lede{color:var(--dust); max-width:62ch; margin:0 0 40px; font-size:16.5px}
section{margin:0 0 52px}
section > h2{font-family:var(--head); font-size:15px; letter-spacing:.24em; text-transform:uppercase;
  margin:0 0 20px; padding-bottom:12px; border-bottom:1px solid var(--rule); color:rgb(var(--ember))}

/* ── buttons ──────────────────────────────────────────────────────── */
.btn{display:inline-block; padding:12px 24px; font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; border:1px solid var(--rule); color:var(--ash); background:transparent; cursor:pointer}
.btn:hover{border-color:rgb(var(--ember)); color:rgb(var(--ember)); background:rgb(var(--blood) / .12)}
.btn.primary{border-color:rgb(var(--ember) / .8); color:rgb(var(--ember))}
.btn.primary:hover{background:rgb(var(--ember) / .16); color:#ffd9d2}
.btn-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:20px}

/* ── badges ───────────────────────────────────────────────────────── */
.badge{display:inline-block; font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  padding:3px 9px; border:1px solid var(--rule); color:var(--dust); vertical-align:middle; margin-left:6px}
.badge.live{color:#ff5b48; border-color:rgb(var(--ember) / .55)}
.badge.wip{color:var(--dust)}

/* Unfinished content is marked as unfinished, visibly. Never let a draft
   read as finished copy. Delete the block when the real content lands. */
.todo{display:none}          /* notes to self — see ?draft=1 below */
body.draft .todo{display:block}
.todo{border:1px dashed rgb(var(--ember) / .55); background:rgb(var(--blood) / .10);
  padding:14px 16px; color:#ff8a78; font-size:14px; margin:16px 0}
.todo b{letter-spacing:.16em; text-transform:uppercase; font-size:11px}

/* ── footer ───────────────────────────────────────────────────────── */
footer.site{border-top:1px solid var(--rule); padding:30px 0 46px; color:var(--dust); font-size:13px}
footer.site .wrap{display:flex; gap:20px; flex-wrap:wrap; align-items:center}
footer.site nav{margin-left:auto; display:flex; gap:20px}
footer.site a{color:var(--dust)}
footer.site a:hover{color:rgb(var(--ember))}

table{width:100%; border-collapse:collapse; font-size:15px}
th,td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--rule)}
th{font-family:var(--head); color:rgb(var(--ember)); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase}

@media (max-width:600px){ .hero{padding:64px 0 22px} nav.site{gap:16px} .bio{font-size:16px} }


/* ═══════════════════════════════════════════════════════════════════
   HERO — the hall. Art is three images; everything else is code, so it
   stays sharp at any DPI, is selectable, and can be translated later.
   ═══════════════════════════════════════════════════════════════════ */
.hall{position:relative; min-height:100svh; display:flex; flex-direction:column;
  overflow:hidden; isolation:isolate}
.hall__bg{position:absolute; inset:0; z-index:-2}
.hall__bg img{width:100%; height:100%; object-fit:cover; object-position:center 42%;
  /* a 104-byte inline thumbnail so the frame is never an empty rectangle */
  background:#050303 url("data:image/webp;base64,UklGRkYAAABXRUJQVlA4IDoAAABQAwCdASoYAA4APt1apkyopSOiMAgBEBuJZwDKAC0HunwgAAD+8aCtetmTwhtLWmLtIfE3u/vWUgAA") center/cover no-repeat}
/* candlelight — a slow, irregular breath over the whole hall */
.hall__flicker{position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 45% at 50% 78%, rgb(var(--ember) / .16), transparent 70%);
  animation:flicker 5.5s ease-in-out infinite}
@keyframes flicker{
  0%,100%{opacity:.55} 12%{opacity:.85} 23%{opacity:.45} 41%{opacity:.95}
  55%{opacity:.6}  68%{opacity:.88} 82%{opacity:.5} }

/* ornamental frame — geometry, so CSS rather than pixels */
.frame{position:absolute; inset:14px; z-index:3; pointer-events:none;
  border:1px solid rgb(var(--blood) / .38)}
.frame i{position:absolute; width:34px; height:34px; border:1px solid rgb(var(--ember) / .75)}
.frame i:nth-child(1){top:-1px; left:-1px; border-width:2px 0 0 2px}
.frame i:nth-child(2){top:-1px; right:-1px; border-width:2px 2px 0 0}
.frame i:nth-child(3){bottom:-1px; left:-1px; border-width:0 0 2px 2px}
.frame i:nth-child(4){bottom:-1px; right:-1px; border-width:0 2px 2px 0}

/* top ribbon */
.ribbon{position:relative; z-index:4; text-align:center; padding:20px 0 6px;
  font-family:var(--display); font-size:clamp(15px,2vw,21px); color:#efe4e2;
  letter-spacing:.06em; text-shadow:0 0 18px rgb(var(--blood) / .8)}
.ribbon b{color:rgb(var(--ember)); font-weight:inherit}

/* nav, split around the emblem */
.hallnav{position:relative; z-index:4; display:flex; align-items:center; justify-content:center;
  gap:clamp(14px,3.4vw,46px); padding:6px 26px 0;
  border-bottom:1px solid rgb(var(--blood) / .3)}
.hallnav a{font-family:var(--head); font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  color:#cfc3c1; padding:14px 2px; position:relative}
.hallnav a:hover{color:rgb(var(--ember))}
.hallnav a[aria-current]{color:rgb(var(--ember))}
.hallnav a[aria-current]::after{content:""; position:absolute; left:0; right:0; bottom:8px;
  height:1px; background:rgb(var(--ember)); box-shadow:0 0 8px rgb(var(--ember))}
.sigilwrap{display:flex; justify-content:center; flex:0 0 auto}
.hallnav .sigil{width:clamp(44px,5vw,64px); height:auto; margin:0 clamp(4px,1.4vw,22px) -14px;
  filter:drop-shadow(0 0 14px rgb(var(--ember) / .55)); animation:sigil 6s ease-in-out infinite}
@keyframes sigil{0%,100%{filter:drop-shadow(0 0 12px rgb(var(--ember) / .45))}
                 50%{filter:drop-shadow(0 0 26px rgb(var(--ember) / .8))}}

/* centre stage */
.hall__mid{position:relative; z-index:4; flex:1; min-height:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:20px 24px 0}
.mark{position:relative; width:min(58vw,720px); max-height:34svh; display:flex; justify-content:center; animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
.mark img{width:100%; height:auto; max-height:34svh; object-fit:contain; display:block; position:relative; z-index:1}
/* the glow is a separate layer, not a filter on the image — cheap to animate */
.mark::before{content:""; position:absolute; inset:-22% -12%; z-index:0;
  background:radial-gradient(52% 46% at 50% 50%, rgb(var(--ember) / .34), transparent 68%);
  animation:bloom 6s ease-in-out infinite}
@keyframes bloom{0%,100%{opacity:.7; transform:scale(1)} 50%{opacity:1; transform:scale(1.06)}}
@keyframes rise{from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none}}

.tagline{margin:30px 0 0; font-family:var(--head); font-size:clamp(11px,1.5vw,15px);
  letter-spacing:.3em; text-transform:uppercase; color:#d8cdcb;
  animation:rise 1.1s .25s cubic-bezier(.2,.7,.2,1) both}
.tagline em{color:rgb(var(--ember)); font-style:normal}

/* angular CTA — clip-path, no image */
.enter{margin-top:34px; display:inline-block; position:relative;
  animation:rise 1.1s .45s cubic-bezier(.2,.7,.2,1) both}
.enter a{display:block; padding:19px 62px; font-family:var(--head); font-size:13px;
  letter-spacing:.28em; text-transform:uppercase; color:#f0e6e4;
  /* near-opaque so the red layer beneath reads as a 1px rim, not a slab */
  background:linear-gradient(rgb(18 8 9 / .93), rgb(9 5 6 / .96));
  clip-path:polygon(26px 0,calc(100% - 26px) 0,100% 50%,calc(100% - 26px) 100%,26px 100%,0 50%);
  transition:background .25s, color .25s, letter-spacing .25s}
.enter a:hover{background:linear-gradient(rgb(48 12 12 / .95), rgb(22 7 8 / .96)); color:#fff; letter-spacing:.34em}
.enter::before{content:""; position:absolute; inset:-1px; z-index:-1; background:rgb(var(--ember) / .8);
  clip-path:polygon(26px 0,calc(100% - 26px) 0,100% 50%,calc(100% - 26px) 100%,26px 100%,0 50%)}

.scrollcue{position:relative; z-index:4; text-align:center; padding:0 0 26px;
  font-family:var(--head); font-size:10.5px; letter-spacing:.42em; text-transform:uppercase; color:#8a7c7a}
.scrollcue span{display:block; margin:10px auto 0; width:1px; height:32px;
  background:linear-gradient(rgb(var(--ember)),transparent); animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0); opacity:.5} 50%{transform:translateY(9px); opacity:1}}

@media (max-width:820px){
  .hallnav{gap:10px; flex-wrap:wrap; padding-bottom:6px}
  /* 6 links at this width orphan the last one onto its own row; force an
     even 3 + 3 instead */
  .hallnav a{font-size:10.5px; letter-spacing:.14em; padding:9px 1px; flex:0 0 30%; text-align:center}
  /* the wrapper takes the whole row so the emblem can sit above the links
     without flex-basis stretching the image itself */
  .sigilwrap{order:-1; flex:0 0 100%; margin:6px 0 0}
  .hallnav .sigil{width:52px; margin:0}
  .mark{width:86vw; max-height:22svh}
  .mark img{max-height:22svh}
  .ribbon{padding:14px 0 2px}
  .hall__mid{padding-top:6px}
  .tagline{margin-top:22px; font-size:10.5px}
  .enter{margin-top:26px}
  .scrollcue{padding-bottom:18px}
  .enter a{padding:16px 34px; letter-spacing:.2em}
  .tagline{letter-spacing:.22em; line-height:2}
}
/* Anyone who has asked their OS to stop moving things gets a still hall. */
@media (prefers-reduced-motion:reduce){
  .hall__flicker,.mark::before,.hallnav .sigil,.scrollcue span{animation:none}
  .mark,.tagline,.enter{animation:none}
}

/* ── inner-page bar ──────────────────────────────────────────────── */
.bar{position:sticky; top:0; z-index:20; border-bottom:1px solid rgb(var(--blood) / .34);
  background:linear-gradient(rgb(10 6 7 / .96), rgb(7 5 6 / .92)); backdrop-filter:blur(9px)}
.bar .wrap{display:flex; align-items:center; gap:22px; min-height:66px; flex-wrap:wrap}
.barbrand{display:flex; align-items:center; gap:11px; color:var(--ash)}
.barbrand img{width:26px; height:auto; filter:drop-shadow(0 0 8px rgb(var(--ember) / .6))}
.barbrand span{font-family:var(--head); font-size:15px; letter-spacing:.2em; text-transform:uppercase}
.barbrand:hover span{color:rgb(var(--ember))}
.bar nav{margin-left:auto; display:flex; gap:22px; flex-wrap:wrap}
.bar nav a{font-family:var(--head); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:#b3a6a4}
.bar nav a:hover,.bar nav a[aria-current]{color:rgb(var(--ember))}

.pagetitle{font-family:var(--display); font-weight:400; font-size:clamp(40px,7vw,74px);
  color:#f0e6e4; margin:0 0 14px; text-shadow:0 0 34px rgb(var(--blood) / .6)}
.eyebrow{margin-top:8px}

/* ── project cards (repo-style) ──────────────────────────────────── */
.repos{display:flex; flex-direction:column; gap:1px; background:rgb(var(--blood) / .3);
  border:1px solid rgb(var(--blood) / .3); margin:34px 0 40px}
.repo{display:grid; grid-template-columns:minmax(0,420px) 1fr; background:var(--crypt)}
/* These are wide UI screenshots. `cover` in a narrow column crops them into an
   unreadable slice, so contain them and let the dark ground letterbox. */
.repo__shot{background:#0a0607; border-right:1px solid rgb(var(--blood) / .22);
  min-height:190px; padding:18px; display:flex; align-items:center; justify-content:center; overflow:hidden}
.repo__shot img{max-width:100%; max-height:280px; width:auto; height:auto;
  object-fit:contain; border:1px solid rgb(var(--blood) / .3)}
.repo__shot span{font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:#5c5150}
.repo__body{padding:26px 28px 28px}
.repo__body h2{font-family:var(--head); font-size:22px; color:var(--ash); margin:0 0 4px}
.repo__tag{margin:0 0 12px; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:rgb(var(--ember))}
.repo__what{margin:0 0 14px; color:#cfc4c2}
.repo__body ul{margin:0 0 16px; padding-left:18px; color:var(--dust); font-size:14.6px}
.repo__body li{margin:0 0 5px}
.repo__stack{display:flex; gap:7px; flex-wrap:wrap; margin:0 0 16px}
.repo__stack span{font-size:11px; letter-spacing:.1em; padding:4px 10px;
  border:1px solid rgb(var(--blood) / .45); color:#a89b99}
@media (max-width:760px){ .repo{grid-template-columns:1fr} .repo__shot{border-right:0;
  border-bottom:1px solid rgb(var(--blood) / .22); min-height:150px} }

/* ── product detail sheet ────────────────────────────────────────── */
button.card{border:0; text-align:left; font:inherit; cursor:pointer; width:100%}
/* A class that sets `display` beats the `hidden` attribute's UA display:none,
   so [hidden] has to be re-asserted or the panel shows on load. */
.sheet[hidden]{display:none}
.sheet{position:fixed; inset:0; z-index:60; background:rgb(4 2 3 / .84);
  display:flex; align-items:center; justify-content:center; padding:24px; overflow:auto}
.sheet__panel{position:relative; background:var(--crypt); border:1px solid rgb(var(--ember) / .45);
  max-width:640px; width:100%; padding:34px 32px 30px; box-shadow:0 0 90px rgb(var(--blood) / .5)}
.sheet__x{position:absolute; top:10px; right:14px; background:none; border:0; color:var(--dust);
  font-size:28px; line-height:1; cursor:pointer}
.sheet__x:hover{color:rgb(var(--ember))}
.sheet__shot{background:#0a0607; min-height:170px; margin-bottom:22px;
  display:flex; align-items:center; justify-content:center; border:1px solid rgb(var(--blood) / .25)}
.sheet__shot img{width:100%; display:block}
.sheet__shot span{font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:#5c5150}
.sheet__panel h2{font-family:var(--head); font-size:26px; color:var(--ash); margin:0 0 4px}
.sheet__price{margin:0 0 16px; color:rgb(var(--ember)); font-size:19px; font-family:var(--head)}
.sheet__panel table{margin:18px 0 4px}
.sheet__panel th{width:38%}

/* ── project detail ──────────────────────────────────────────────── */
.repo--open{cursor:pointer; transition:background .2s}
.repo--open:hover{background:#180e0f}
.repo--open:focus-visible{outline:2px solid rgb(var(--ember)); outline-offset:-2px}
.repo--open:hover .repo__body h2{color:rgb(var(--ember))}
.repo .go{display:inline-block; font-size:11.5px; letter-spacing:.2em;
  text-transform:uppercase; color:rgb(var(--ember))}
.sheet__panel--wide{max-width:760px; max-height:88vh; overflow:auto}
.dtag{margin:0 0 4px; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:rgb(var(--ember))}
.dintro{color:#cfc4c2; margin:14px 0 4px}
.dsec{margin:26px 0 0}
.dsec h3{font-family:var(--head); font-size:15px; letter-spacing:.16em; text-transform:uppercase;
  color:rgb(var(--ember)); margin:0 0 8px; padding-bottom:8px; border-bottom:1px solid var(--rule)}
.dsec p{margin:0 0 10px; color:#cfc4c2}
.dsec ul{margin:0; padding-left:18px; color:var(--dust); font-size:14.6px}
.dsec li{margin:0 0 5px}
.dshot{margin:22px 0 0; padding:0}
.dshot img{width:100%; display:block; border:1px solid var(--rule)}
.dshot figcaption{margin-top:8px; font-size:13px; color:var(--dust)}

/* an aside that is information, not an unfinished-content marker */
.note{border-left:2px solid rgb(var(--ember) / .7); background:rgb(var(--blood) / .08);
  padding:16px 20px; margin:26px 0 0}
.note b{display:block; font-family:var(--head); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:rgb(var(--ember)); margin-bottom:8px}
.note p{margin:0; color:#cfc4c2; max-width:64ch}
.card .num{white-space:nowrap}
.joinline{margin:14px 0 0 !important; font-size:13px}
.joinline a{color:var(--dust); border-bottom:1px solid rgb(var(--blood) / .5); padding-bottom:1px}
.joinline a:hover{color:rgb(var(--ember)); border-color:rgb(var(--ember))}
.card--go{cursor:pointer}
.card--go:focus-visible{outline:2px solid rgb(var(--ember)); outline-offset:-2px}