/* abusethecompute — THE SUITE, in TheCatch.AI's design language proper (ruled 2026-08-07):
   same style, layout, and colors as the broadsheet — with a slight dystopian variation.
   LIGHT = the TheCatch paper face (default). DARK = the dystopian face (the ruled "opportunity").
   Type discipline: Oswald display · Archivo body · JetBrains Mono for data. One pulse accent. */
:root{
  --display:"Oswald","Arial Narrow",sans-serif;
  --serif:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  /* the TheCatch palette, as it actually is */
  --paper:#ffffff; --cream:#f6f4ef; --mist:#e4e0d8; --ash:#cfcabe;
  --ink:#0c0b0a; --body:#2c2a26; --slate:#6b6459; --faint:#9a948a;
  --pulse:#0097a7; --alert:#c13a0e;
  --hd:#c13a0e; --ad:#0097a7;   /* the two voices ride the house palette: HD=alert red · AD=pulse teal */
  --panel:#ffffff; --line:var(--mist);
}
:root[data-theme="dark"]{
  --paper:#0e0d10; --cream:#131216; --mist:#2a2830; --ash:#3a3742;
  --ink:#eae8e2; --body:#c9c6be; --slate:#8a877e; --faint:#6a675f;
  --pulse:#2ec9d8; --alert:#ff5c33;
  --hd:#ff5c33; --ad:#2ec9d8;
  --panel:#131216; --line:#26242b;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ color-scheme:light; }
:root[data-theme="dark"]{ color-scheme:dark; }
body{ background:var(--cream); color:var(--body); font-family:var(--serif); font-size:15.5px; line-height:1.65; }
.wrap{ max-width:980px; margin:0 auto; padding:0 22px 70px; }
a{ color:inherit; }

/* dateline — the house stamp */
.dateline{ font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); text-align:right; padding:12px 0 0; }

/* masthead: logo left · brand · nav · the dystopian tape */
header.m{ padding:16px 0 0; border-bottom:2px solid var(--ink); }
.mrow{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.logo{ flex:none; width:46px; height:46px; display:block; }
.brand{ font-family:var(--display); font-weight:500; font-size:clamp(28px,6vw,46px);
  letter-spacing:.02em; text-transform:uppercase; line-height:1; color:var(--ink); }
.brand .c{ color:var(--pulse); }
.mode{ margin-left:auto; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--slate); background:none; border:1px solid var(--mist); border-radius:999px; padding:5px 13px; cursor:pointer; }
.mode:hover{ color:var(--ink); border-color:var(--slate); }
.mission{ margin:10px 0 0; font-size:13.5px; color:var(--slate); max-width:64ch; }
nav.top{ display:flex; gap:4px 24px; flex-wrap:wrap; margin:14px 0 12px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; }
nav.top a{ color:var(--slate); text-decoration:none; padding:2px 0; }
nav.top a:hover{ color:var(--ink); }
nav.top a.on{ color:var(--pulse); font-weight:700; }
/* the slight dystopian variation: the grid-authority tape under the masthead */
.tape{ font-family:var(--mono); font-size:8.5px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--faint); border-top:1px dashed var(--ash); padding:6px 0 8px;
  white-space:nowrap; overflow:hidden; }
.tape b{ color:var(--alert); font-weight:400; }

/* section kickers */
.kick{ font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--pulse); margin:32px 0 12px; }
.kick.q{ color:var(--faint); }

/* the voice chips */
.who{ font-family:var(--mono); font-weight:700; font-size:9.5px; letter-spacing:.14em;
  padding:2px 9px; border-radius:3px; }
.who.hd{ color:var(--hd); border:1px solid var(--hd); }
.who.ad{ color:var(--ad); border:1px solid var(--ad); }
.meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--mono); font-size:10.5px; color:var(--slate); }

/* panels — the broadsheet card */
.panel{ background:var(--panel); border:1px solid var(--line); padding:24px 26px 22px; }

/* hero */
.hero h1{ font-family:var(--display); font-weight:500; font-size:clamp(24px,4.4vw,36px);
  letter-spacing:.01em; margin:10px 0 10px; color:var(--ink); line-height:1.15; }
.hero h1 a{ text-decoration:none; }
.hero h1 a:hover{ color:var(--pulse); }
.hero .lede{ max-width:70ch; }
.hero .counter{ margin-top:14px; border-left:3px solid var(--ad); padding:3px 0 3px 14px;
  color:var(--slate); font-size:13.5px; }
.more{ display:inline-block; margin-top:14px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--pulse); text-decoration:none; font-weight:700; }
.more:hover{ text-decoration:underline; }

/* department strips */
.depts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; }
.dept{ display:flex; flex-direction:column; }
.dept.opening{ border-style:dashed; opacity:.75; }
.dept .name{ font-family:var(--display); font-weight:500; font-size:20px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink); }
.dept .name a{ text-decoration:none; }
.dept .name a:hover{ color:var(--pulse); }
.dept .tell{ font-size:12.5px; color:var(--slate); margin:4px 0 12px; }
.dept ul{ list-style:none; flex:1; }
.dept li{ font-family:var(--mono); font-size:11.5px; color:var(--body);
  padding:7px 0; border-top:1px solid var(--line); display:flex; gap:8px; align-items:baseline; }
.dept li .w{ flex:none; font-family:var(--mono); font-weight:700; font-size:8.5px; letter-spacing:.1em;
  padding:1px 6px; border-radius:3px; }
.dept li .w.hd{ color:var(--hd); border:1px solid var(--hd); }
.dept li .w.ad{ color:var(--ad); border:1px solid var(--ad); }
.dept li .s{ margin-left:auto; color:var(--faint); font-size:9.5px; white-space:nowrap; }
.dept .held{ margin-top:12px; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); }

/* articles (blog + shelves) */
article.post{ border-bottom:1px solid var(--line); padding:26px 0; }
article.post h2{ font-family:var(--display); font-weight:500; font-size:clamp(19px,3.2vw,25px);
  margin:9px 0 10px; color:var(--ink); }
article.post p{ margin:0 0 12px; }
article.post p:last-child{ margin-bottom:0; }
article.post .aside{ color:var(--slate); font-size:13px; border-left:3px solid var(--mist); padding-left:12px; }
article.post a{ color:var(--pulse); text-decoration:none; }
article.post a:hover{ text-decoration:underline; }
.track{ border-bottom:1px solid var(--line); padding:22px 0; }
.track h2{ font-family:var(--display); font-weight:500; font-size:20px; color:var(--ink); margin:6px 0 4px; }
.track .d{ color:var(--slate); font-size:12.5px; margin-bottom:12px; }
audio{ width:100%; height:34px; }

/* the plate */
.plate{ margin-top:40px; border-top:1px solid var(--line); padding-top:18px;
  font-size:11px; color:var(--faint); line-height:1.8; }
.plate b{ color:var(--slate); font-weight:400; }

/* DEV FURNITURE — the logo picker (comes off after Michael's pick) */
.logopick{ margin-top:26px; border:1px dashed var(--ash); padding:14px 16px; }
.logopick .k{ font-family:var(--mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin-bottom:10px; }
.logopick .row{ display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.logopick figure{ text-align:center; }
.logopick svg{ width:44px; height:44px; display:block; margin:0 auto 6px; }
.logopick figcaption{ font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); }