/* ============================================================================
   Bad Crawler — badcrawler.com

   DESIGN DIRECTION: BROADCAST. Chosen 24 Sep 2026 from three options.

   The thing people forget about the dungeon is that it is a televised
   entertainment product with sponsors and a viewing public. The System is the
   broadcaster's automated graphics package, and this page is its scoreboard:
   lower-third bars, an on-air rail, rank numerals set large, contestant rows.

   What that rules OUT, deliberately, because the previous design did all four
   and they are the commonest marks of a generated page:
     · no monospace face for data labels — Archivo's tabular figures instead
     · no meta strings joined with middle dots
     · no soft uniform card kit; radius varies by role and earns its place
     · no fade-and-slide on every card forever — ONE staggered arrival, once

   Capitals survive, but as broadcast furniture (badges, group heads, buttons),
   because that is genuinely what on-air graphics look like. They are the
   subject's vernacular here, not a default reached for.
   ========================================================================== */

/* ---------- the faces, served from this origin ----------
   Self-hosted rather than fetched from Google: the footer promises nothing is sent anywhere,
   and a third-party font request sends the reader's IP to a third party. SIL OFL, /fonts/OFL.txt.
   `swap` so the page is readable before they arrive; the fallback stack is a heavy grotesque so
   the shift when they land is a shift in character, not in layout. */
@font-face{font-family:Archivo;src:url(fonts/archivo-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(fonts/archivo-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(fonts/archivo-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(fonts/archivo-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(fonts/archivo-latin-800-normal.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}

:root{
  color-scheme: dark;

  /* the studio */
  --ground:#150a2c;
  --panel:#221247;
  --panel-lift:#2d1860;
  --line:#3d2273;
  --line-soft:#31195c;

  /* the graphics package */
  --on-air:#ffd400;        /* the System's own colour: recommendations, rails */
  --on-air-deep:#8f7400;
  --live:#ff5277;          /* negatives, the wordmark stop */
  --go:#22e6a0;            /* the action that advances you */

  --ink:#f6f1ff;
  --ink-dim:#c3b2e4;
  --ink-faint:#9483bd;

  --display:"Bricolage Grotesque","Archivo",system-ui,sans-serif;
  --ui:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --maxw:56rem;
  --rail:.5rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font:400 16px/1.6 var(--ui);
  padding:0 16px 5rem;
}
.wrap{max-width:var(--maxw);margin:0 auto}
a{color:var(--on-air)}
:focus-visible{outline:3px solid var(--on-air);outline-offset:3px;border-radius:2px}
[hidden]{display:none !important}

/* ---------- the wordmark ---------- */
header{padding:3.25rem 0 1.5rem}
h1{
  margin:0 0 .6rem;
  font:800 clamp(2.8rem,11vw,5.5rem)/.88 var(--display);
  letter-spacing:-.045em;text-wrap:balance;
}
h1 a{color:inherit;text-decoration:none;display:inline-block}
h1 a:hover{color:#fff}
h1 .dot{color:var(--live)}
h1 a:hover .dot{color:var(--on-air)}
.tagline{
  margin:0 0 1.1rem;color:var(--ink-dim);
  font-size:1.15rem;max-width:36ch;text-wrap:pretty;
}

/* pills, as separate objects — never one string joined by middle dots */
.badge-row{display:flex;flex-wrap:wrap;gap:.4rem;margin:0}
.badge{
  font:700 .68rem/1 var(--ui);letter-spacing:.09em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:.45rem .8rem;
  color:var(--ink-faint);background:var(--panel);
}
.badge.warn{background:var(--live);border-color:var(--live);color:#2a0009}

/* ---------- the three questions ---------- */
form{margin:2rem 0 0;border-top:1px solid var(--line);padding-top:1.75rem}
fieldset{border:0;padding:0;margin:0 0 1.35rem}
legend{
  font:700 .72rem/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-dim);padding:0;margin-bottom:.5rem;
}
legend .n{color:var(--on-air);margin-right:.55rem;font-variant-numeric:tabular-nums}
input[type=text],select{
  width:100%;background:var(--panel);color:var(--ink);
  border:1px solid var(--line);border-radius:4px;padding:.85rem .85rem;
  font:500 1.05rem/1.3 var(--ui);
}
input[type=text]::placeholder{color:var(--ink-faint)}
select{
  appearance:none;padding-right:2.6rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-faint) 50%),
                   linear-gradient(135deg,var(--ink-faint) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.hint{margin:.45rem 0 0;font-size:.88rem;color:var(--ink-faint)}
.controls{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:1.5rem 0 0}

/* ---------- buttons: the one that advances you is filled, the rest are not --- */
.btn{
  display:inline-block;cursor:pointer;
  background:var(--on-air);color:#251c00;border:1px solid var(--on-air);
  border-radius:999px;padding:.85rem 1.5rem;
  font:800 .82rem/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;
}
.btn:hover{background:#ffe04d;border-color:#ffe04d}
.btn.ghost{background:transparent;color:var(--ink-dim);border-color:var(--line)}
.btn.ghost:hover{background:var(--panel);color:var(--ink);border-color:var(--ink-faint)}
.btn.small{padding:.55rem 1rem;font-size:.7rem}
.btn.take{background:var(--go);border-color:var(--go);color:#032a1d}
.btn.take:hover{background:#4df0b6;border-color:#4df0b6}
.linkish{
  background:none;border:0;padding:0;margin:0;cursor:pointer;
  color:var(--on-air);font:600 .85rem/1 var(--ui);text-decoration:underline;
}

/* ---------- the lower third: who is on screen ---------- */
#out{margin-top:2.5rem}
.sysbar{
  border-left:var(--rail) solid var(--on-air);
  background:var(--panel);border-radius:0 5px 5px 0;
  padding:1.1rem 1.2rem;margin-bottom:1.5rem;
}
.sysbar h2{
  margin:0 0 .75rem;color:var(--on-air);
  font:800 .8rem/1.2 var(--ui);letter-spacing:.13em;text-transform:uppercase;
}
.sysbar dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.3rem .9rem;font-size:.95rem}
.sysbar dt{
  color:var(--ink-faint);font:700 .68rem/1.7 var(--ui);
  letter-spacing:.09em;text-transform:uppercase;
}
.sysbar dd{margin:0;color:var(--ink)}
.sysbar .note{margin:.9rem 0 0;font-size:.9rem;color:var(--ink-dim)}
.reassigned{color:var(--live);font-size:.82rem;font-weight:600}

/* ---------- a contestant row ---------- */
.offers{display:flex;flex-direction:column;gap:.85rem}
.offer{
  margin:0;background:var(--panel);
  border:0;border-left:var(--rail) solid var(--line);
  border-radius:0 5px 5px 0;
  padding:.95rem 1.15rem 1.05rem;
}
.offer.rec{border-left-color:var(--on-air);background:var(--panel-lift)}

.offer>summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:1rem;
  position:relative;padding-right:2.2rem;
}
.offer>summary::-webkit-details-marker{display:none}
.offer>summary::after{
  content:"";position:absolute;right:.2rem;top:1.05rem;width:.6rem;height:.6rem;
  border-right:2.5px solid var(--ink-faint);border-bottom:2.5px solid var(--ink-faint);
  transform:rotate(45deg);
}
.offer[open]>summary::after{transform:rotate(-135deg);top:1.35rem}
.offer>summary:hover::after{border-color:var(--on-air)}
.offer[open]>summary{margin-bottom:.9rem}
.sum-head{flex:1 1 auto;min-width:0}
.offer>summary .btn.take{flex:0 0 auto;margin-top:.2rem;white-space:nowrap}

.rec-flag{
  display:inline-block;margin:0 0 .5rem;
  background:var(--on-air);color:#251c00;border-radius:3px;padding:.32rem .55rem;
  font:800 .64rem/1 var(--ui);letter-spacing:.13em;text-transform:uppercase;
}
.offer h3{
  margin:0;display:flex;align-items:baseline;gap:.55rem;
  font:800 clamp(1.2rem,3.9vw,1.75rem)/1.08 var(--display);
  letter-spacing:-.032em;color:var(--ink);text-wrap:balance;
}
/* the rank is the one big typographic moment in each row */
.offer h3 .num{
  font:800 1.85rem/1 var(--display);color:var(--ink-faint);
  font-variant-numeric:tabular-nums;flex:0 0 auto;
}
.offer.rec h3 .num{color:var(--on-air-deep)}

.prose{margin:0 0 .4rem;color:var(--ink-dim);font-size:.96rem;max-width:64ch}
.prose:last-of-type{margin-bottom:.9rem}

/* ---------- the sheet ---------- */
.group{margin:0 0 .8rem}
.group+.group,.prose+.group{margin-top:.95rem}
.group-head{
  margin:0 0 .35rem;color:var(--ink-faint);
  font:700 .66rem/1 var(--ui);letter-spacing:.15em;text-transform:uppercase;
}
.lines{list-style:none;margin:0;padding:0;font-size:.93rem}
.lines li{position:relative;padding:.14rem 0 .14rem 1.75rem}
.lines li>span:first-child{
  position:absolute;left:0;width:1.5rem;text-align:right;
  font-weight:700;font-variant-numeric:tabular-nums;font-size:.9rem;
}
.lines .up{color:var(--go)}
.lines .down{color:var(--live)}
.lines li.trait.neg{color:#e5a3b4}
.lines .joke{color:var(--ink-dim);font-size:.95em}
.lines .desc{color:var(--ink-faint)}

.combined{
  margin:0;display:flex;flex-wrap:wrap;gap:1rem;
  padding:.55rem .75rem;border-radius:4px;background:var(--ground);
  font-weight:700;font-variant-numeric:tabular-nums;font-size:.92rem;
}

/* the System's remark, set as an on-air caption */
.barb{
  margin:1rem 0 .9rem;padding:.75rem .95rem;
  border-left:3px solid var(--on-air);border-radius:0 4px 4px 0;
  background:rgba(255,212,0,.08);color:var(--ink);font-size:.98rem;
}
.offer-actions{display:flex;gap:.55rem;flex-wrap:wrap;margin:.9rem 0 0}

/* ---------- the finished crawler ---------- */
.crawler-card{
  background:var(--panel-lift);border:0;border-left:var(--rail) solid var(--go);
  border-radius:0 6px 6px 0;padding:1.3rem 1.35rem 1.2rem;
}
.crawler-card h3{
  display:block;margin:0 0 .8rem;
  font:800 clamp(1.5rem,5.2vw,2.35rem)/1.03 var(--display);letter-spacing:-.038em;
}
.card-preview{margin:1rem 0 0;padding:0}
.card-preview img{display:block;width:100%;height:auto;border-radius:5px;border:1px solid var(--line)}
.card-preview figcaption{margin:.45rem 0 0;font-size:.8rem;color:var(--ink-faint)}

/* ---------- the rest of the list ---------- */
.more-wrap{margin:2rem 0 1.5rem;text-align:center}
.more-wrap .btn{min-width:14rem}
.exhausted{
  margin:0;padding:1rem 1.1rem;border:1px dashed var(--line);border-radius:5px;
  color:var(--ink-faint);font-size:.92rem;
}
.closer{
  margin:1.75rem 0 0;padding:1rem 1.15rem;
  border:1px solid var(--line);border-radius:5px;
  color:var(--ink-dim);font-size:.97rem;
}

/* ---------- the small print ---------- */
footer{margin-top:4.5rem;padding-top:1.75rem;border-top:1px solid var(--line);
  font-size:.9rem;color:var(--ink-faint)}
footer h2{
  margin:0 0 .85rem;color:var(--ink-dim);
  font:700 .7rem/1 var(--ui);letter-spacing:.13em;text-transform:uppercase;
}
footer p{margin:0 0 .8rem;max-width:64ch}
footer strong{color:var(--ink-dim)}
.build{margin:1.4rem 0 0;font-size:.74rem;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.build code{color:var(--ink-dim);font-family:inherit}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#shot{display:none}

/* ---------- ONE orchestrated moment ----------
   The offering arrives the way results come in on air: rows land in sequence,
   once, over about 400ms. Nothing else on the page animates by itself. */
@media (prefers-reduced-motion:no-preference){
  .offers .offer{animation:land .34s cubic-bezier(.22,.9,.3,1) both}
  .offers .offer:nth-child(1){animation-delay:0ms}
  .offers .offer:nth-child(2){animation-delay:60ms}
  .offers .offer:nth-child(3){animation-delay:120ms}
  .offers .offer:nth-child(4){animation-delay:180ms}
  .offers .offer:nth-child(5){animation-delay:240ms}
  @keyframes land{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
  .offer>summary::after{transition:transform .18s ease,border-color .18s ease}
  .btn{transition:background .15s ease,border-color .15s ease}
}

/* ---------- phone ---------- */
@media (max-width:34rem){
  .offer>summary{flex-wrap:wrap}
  .offer>summary .btn.take{width:100%;margin-top:.65rem}
  .offer h3 .num{font-size:1.45rem}
  .sysbar dl{grid-template-columns:1fr;gap:.05rem .5rem}
  .sysbar dt{margin-top:.5rem}
  .combined{gap:.65rem;font-size:.86rem}
}

/* The mark sits in the wordmark lockup, sized off the heading so it tracks the clamp.
   The words live in their own span: as bare text nodes they became flex children and the
   full stop drifted a whole gap away from "Crawler". */
h1 a{display:inline-flex;align-items:center;gap:.34em}
h1 .wm{display:block}
h1 .mark{
  width:.92em;height:.92em;flex:0 0 auto;display:block;
  margin-top:-.06em;   /* optical: the skull's mass sits low in its box */
}
@media (max-width:34rem){ h1 a{gap:.32em} }