/* =====================================================================
   SPICY AUTOCOMPLETE — theme
   Visual foundation: the-monospace-web (MIT, Oskar Wickström) —
   monospace brutalism, ch-based rhythm, ASCII dividers, text-first UI.
   Reskinned: spicy red/orange palette + loud display serif headlines.
   (The brand joke: the BODY is a terminal. The HEADLINES scream.)
   ===================================================================== */
:root{
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --red: #D9381E;
  --red-dark: #A82412;
  --ember: #F5A623;
  --ink: #221206;
  --ink-soft: #5b4632;
  --paper: #FFFBF2;
  --cream: #FFF6E9;
  --sand: #F3E4C8;
  --sand-dark: #E8D3AC;
  --term-bg: #1c1008;
  --term-green: #7CFC00;
  --lh: 1.65;
  --bw: 3px; /* brutalist border weight */
  --foot-line: #4a3520;
}
*{box-sizing:border-box}
html{margin:0;padding:0;background:var(--paper);color:var(--ink);scroll-behavior:smooth}
body{
  margin:0 auto;padding:0;
  max-width:calc(min(88ch, 100% - 2rem));
  font-family:var(--mono);font-size:16px;line-height:var(--lh);
  font-variant-numeric:tabular-nums lining-nums;
  overflow-x:hidden;
}
::selection{background:var(--red);color:var(--cream)}

/* ---------- display serif headlines (the scream) ---------- */
h1,h2,h3{
  font-family:var(--display);font-weight:900;letter-spacing:-0.02em;
  line-height:1.05;color:var(--ink);
  margin:2.2rem 0 1rem;
}
h1{font-size:clamp(2.4rem,6vw,4.2rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem)}
h3{font-size:1.25rem;letter-spacing:-0.01em}
p{margin:0 0 1.1rem;word-break:break-word}
a{color:var(--red-dark);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--red)}
strong{font-weight:800}
code{font-family:var(--mono);font-weight:600;background:var(--sand);padding:0 .35em;border:1px solid var(--sand-dark)}
ul{list-style-type:square;padding-left:2ch;margin:0 0 1.1rem}
ol{padding-left:2ch;margin:0 0 1.1rem}
li{margin-bottom:.35rem}
li::marker{color:var(--red)}
blockquote{
  margin:1.5rem 0;padding:.6rem 1.2rem;border-left:var(--bw) solid var(--red);
  background:var(--cream);font-style:italic;color:var(--ink-soft);
}
blockquote p{margin:.4rem 0}

/* ASCII-rule dividers (the-monospace-web's double rule, spicier) */
hr{border:none;margin:2.5rem 0;position:relative;height:1.2rem}
hr::after{
  content:"";display:block;position:absolute;top:.45rem;left:0;width:100%;height:0;
  border-top:6px double var(--red);
}

/* ---------- reading progress (PaperMod steal) ---------- */
.progress{
  position:fixed;top:0;left:0;height:4px;width:0;z-index:99;
  background:linear-gradient(90deg,var(--red),var(--ember));
}

/* ---------- header ---------- */
.site-head{border-bottom:var(--bw) solid var(--ink);background:var(--paper);padding:.9rem 0}
.head-in{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink)}
.brand-name{font-family:var(--mono);font-weight:800;font-size:1.05rem;letter-spacing:-.02em;text-transform:uppercase}
.brand-name::before{content:"> ";color:var(--red)}
.brand-name span{color:var(--red)}
.brand-tag{font-size:.72rem;color:var(--ink-soft)}
.nav{display:flex;gap:1.2rem;align-items:center;font-size:.9rem}
.nav a{color:var(--ink);text-decoration:none;font-weight:600}
.nav a:hover{color:var(--red);text-decoration:underline;text-decoration-thickness:2px}
.nav a.cta{
  border:var(--bw) solid var(--ink);background:var(--red);color:var(--cream);
  padding:.35rem .9rem;box-shadow:4px 4px 0 var(--ink);text-transform:uppercase;font-size:.8rem;
}
.nav a.cta:hover{background:var(--red-dark);color:var(--cream);text-decoration:none}
.nav a.cta:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}

/* ---------- hero ---------- */
.hero{border-bottom:var(--bw) solid var(--ink);padding:3.2rem 0;background:var(--cream)}
.hero-in{display:grid;grid-template-columns:1.4fr .8fr;gap:2.5rem;align-items:center}
.kicker{
  display:inline-block;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  border:2px solid var(--ink);background:var(--paper);padding:.25rem .7rem;margin-bottom:1.2rem;
  box-shadow:3px 3px 0 var(--ink);
}
.kicker::before{content:"[ ";color:var(--red)}
.kicker::after{content:" ]";color:var(--red)}
.hero h1{margin:0 0 1.2rem}
.hero h1 .hot{color:var(--red);font-style:italic}
.lede{font-size:1.02rem;color:var(--ink-soft);max-width:56ch}
.hero-art{
  border:var(--bw) solid var(--ink);background:var(--paper);
  box-shadow:8px 8px 0 var(--red);padding:1.5rem;display:flex;justify-content:center;
}

/* ---------- newsletter form (terminal style) ---------- */
.nl-form{display:flex;gap:.6rem;margin:1.2rem 0 .4rem;flex-wrap:wrap;align-items:stretch}
.nl-form input[type=email]{
  font:inherit;flex:1;min-width:220px;border:var(--bw) solid var(--ink);
  background:var(--paper);color:var(--ink);padding:.6rem .9rem;
}
.nl-form input[type=email]:focus{outline:3px solid var(--ember);outline-offset:1px}
.nl-form button{
  font:inherit;font-weight:800;text-transform:uppercase;font-size:.85rem;letter-spacing:.06em;
  border:var(--bw) solid var(--ink);background:var(--red);color:var(--cream);
  padding:.6rem 1.3rem;cursor:pointer;box-shadow:4px 4px 0 var(--ink);
}
.nl-form button:hover{background:var(--red-dark)}
.nl-form button:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.nl-msg{font-size:.85rem;font-weight:700;margin:.5rem 0}
.nl-msg.ok{color:#1d7a2f}.nl-msg.ok::before{content:"[ok] "}
.nl-msg.err{color:var(--red-dark)}.nl-msg.err::before{content:"[err] "}
.nl-note{font-size:.75rem;color:var(--ink-soft)}

/* ---------- sections / cards ---------- */
.section{padding:2.8rem 0}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1.6rem;flex-wrap:wrap}
.sec-head h2{margin:0}
.sec-head h2::before{content:"> ";color:var(--red)}
.sec-head .dot{color:var(--red)}
.more{font-size:.85rem;font-weight:700;white-space:nowrap}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.4rem}
.card{
  display:flex;flex-direction:column;text-decoration:none;color:var(--ink);
  border:var(--bw) solid var(--ink);background:var(--paper);box-shadow:5px 5px 0 var(--ink);
  transition:transform .12s ease, box-shadow .12s ease;
}
.card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--red)}
.card-art{border-bottom:var(--bw) solid var(--ink)}
.card-art svg{display:block;width:100%;height:auto}
.card-body{padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.card-kw{
  align-self:flex-start;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;
  background:var(--ink);color:var(--cream);padding:.2rem .6rem;
}
.card-body h3{margin:0;font-size:1.3rem;line-height:1.15}
.card-body p{font-size:.86rem;color:var(--ink-soft);margin:0}
.card-meta{font-size:.72rem;color:var(--ink-soft);margin-top:auto;padding-top:.6rem}

/* ---------- pillar strip ---------- */
.strip{border-top:var(--bw) solid var(--ink);border-bottom:var(--bw) solid var(--ink);background:var(--ink);color:var(--cream)}
.strip-in{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  max-width:calc(min(88ch, 100% - 2rem));margin:0 auto;
}
.strip-in>div{padding:1.6rem 1.4rem;border-left:2px solid var(--foot-line)}
.strip-in>div:first-child{border-left:none}
.strip h3{color:var(--ember);font-family:var(--mono);font-size:.85rem;text-transform:uppercase;letter-spacing:.12em;margin:0 0 .6rem}
.strip h3::before{content:"// "}
.strip p{font-size:.82rem;color:#d9c9ae;margin:0}

/* ---------- big CTA ---------- */
.big-cta{
  border:var(--bw) solid var(--ink);background:var(--cream);
  box-shadow:8px 8px 0 var(--red);padding:2.4rem;margin:3rem 0;
}
.big-cta h2{margin-top:0}
.big-cta h2::before{content:"$ ";color:var(--red)}

/* ---------- article ---------- */
.article-hero{border-bottom:var(--bw) solid var(--ink);padding:2.6rem 0;background:var(--cream)}
.article-hero-in{max-width:70ch}
.article-hero h1{margin:.8rem 0 1rem}
.desc{font-size:1.05rem;color:var(--ink-soft)}
.byline{display:flex;gap:.6rem;align-items:center;font-size:.8rem;color:var(--ink-soft);margin-top:1.2rem;flex-wrap:wrap}
.byline .pep{font-size:1.1rem}
.prose{max-width:70ch;margin:0 auto;padding:2rem 0}
.hero-svg{border:var(--bw) solid var(--ink);box-shadow:6px 6px 0 var(--ink);margin:0 0 .6rem}
.hero-svg svg{display:block;width:100%;height:auto}
.hero-cap{font-size:.75rem;color:var(--ink-soft);font-style:italic;margin-bottom:2rem}
.prose h2{scroll-margin-top:1rem}
.prose h2::before{content:"## ";color:var(--red);font-family:var(--mono);font-size:.7em}
.prose h3::before{content:"### ";color:var(--red);font-family:var(--mono);font-size:.7em}

/* table of contents (PaperMod steal) */
.toc{
  border:var(--bw) solid var(--ink);background:var(--paper);
  box-shadow:5px 5px 0 var(--ink);padding:1.1rem 1.3rem;margin:0 0 2.2rem;
}
.toc strong{font-size:.75rem;text-transform:uppercase;letter-spacing:.14em}
.toc strong::before{content:"[ ";color:var(--red)}
.toc strong::after{content:" ]";color:var(--red)}
.toc ul{margin:.8rem 0 0}
.toc a{color:var(--ink);text-decoration:none;font-size:.88rem}
.toc a:hover{color:var(--red);text-decoration:underline}

/* terminal chrome (hugo-theme-terminal steal) — for ``` fenced blocks */
.terminal{
  border:var(--bw) solid var(--ink);margin:1.8rem 0;
  box-shadow:6px 6px 0 var(--ink);background:var(--term-bg);
}
.term-bar{
  display:flex;align-items:center;gap:.7rem;padding:.45rem .9rem;
  border-bottom:2px solid #000;background:#2a1a0e;color:#d9c9ae;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;
}
.term-bar .dots{color:var(--red);letter-spacing:.25em}
.terminal pre{
  margin:0;padding:1.1rem 1.2rem;overflow-x:auto;
  color:var(--term-green);font-size:.85rem;line-height:1.6;white-space:pre;
}
.terminal code{background:none;border:none;padding:0;color:inherit;font-weight:400}

/* tools mentioned (affiliate box) */
.tools-box{
  border:var(--bw) solid var(--ink);background:var(--cream);
  box-shadow:5px 5px 0 var(--ember);padding:1.3rem 1.4rem;margin:2.2rem 0;
}
.tools-box h3{margin-top:0;font-family:var(--mono);font-size:.85rem;text-transform:uppercase;letter-spacing:.12em}
.tools-box h3::before{content:"[ ";color:var(--red)}
.tools-box h3::after{content:" ]";color:var(--red)}
.tools-box .disc{font-size:.78rem;color:var(--ink-soft)}
.tools-box ul{margin-bottom:0}
.tools-box a{font-weight:700}

/* in-article newsletter CTA */
.inarticle-cta{
  border:var(--bw) dashed var(--red);background:var(--paper);
  padding:1.6rem;margin:2.5rem 0;
}
.inarticle-cta h3{margin-top:0}
.inarticle-cta h3::before{content:"> ";color:var(--red);font-family:var(--mono)}
.tag-row{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.5rem 0}
.tag{font-size:.72rem;border:2px solid var(--ink);padding:.2rem .6rem;background:var(--sand)}
.tag::before{content:"#";color:var(--red);font-weight:800}

.related{border-top:var(--bw) solid var(--ink);padding:2.5rem 0}
.related h2{margin-top:0}
.related h2::before{content:"> ";color:var(--red)}

/* ---------- static pages ---------- */
.page-hero{border-bottom:var(--bw) solid var(--ink);background:var(--cream);padding:2.6rem 0}
.page-hero h1{margin:.8rem 0 1rem}
.wrap-narrow{max-width:70ch}
.page-body{max-width:70ch;padding:2rem 0 3rem}
.checklist{list-style:none;padding:0}
.checklist li{border:2px solid var(--ink);background:var(--paper);padding:.8rem 1rem;margin-bottom:.7rem;box-shadow:3px 3px 0 var(--sand-dark)}
.checklist li::before{content:"[x] ";color:var(--red);font-weight:800}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:var(--cream);border-top:6px solid var(--red);margin-top:3rem}
.foot-in{
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;
  max-width:calc(min(88ch, 100% - 2rem));margin:0 auto;padding:2.5rem 0;
}
.foot-brand{font-family:var(--mono);font-weight:800;text-transform:uppercase;font-size:1.1rem}
.foot-brand::before{content:"> ";color:var(--red)}
.foot-brand span{color:var(--ember)}
.site-foot p{font-size:.82rem;color:#d9c9ae}
.site-foot h4{font-family:var(--mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ember);margin:0 0 .8rem}
.site-foot h4::before{content:"// "}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{margin-bottom:.4rem}
.site-foot a{color:var(--cream);text-decoration:none;font-size:.85rem}
.site-foot a:hover{color:var(--ember);text-decoration:underline}
.foot-base{
  max-width:calc(min(88ch, 100% - 2rem));margin:0 auto;padding:1rem 0 1.6rem;
  border-top:2px solid var(--foot-line);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.72rem;color:#a08b6d;
}

/* ---------- 404 ---------- */
.fourohfour{text-align:center;padding:4rem 0}
.fourohfour .big{
  font-family:var(--display);font-weight:900;font-size:clamp(5rem,18vw,10rem);
  color:var(--red);line-height:1;letter-spacing:-.04em;
}
.fourohfour h1{font-size:1.8rem}

/* ---------- ad slot placeholders (commented out until an ad network is ready) ---------- */
.ad-slot{
  border:3px dashed var(--ink-soft);background:var(--sand);min-height:90px;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-soft);font-size:.8rem;margin:1.5rem 0;
}
.ad-slot::before{content:"[ ad slot — uncomment when ready ]"}
.ad-leaderboard{min-height:110px}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .hero-in{grid-template-columns:1fr}
  .hero-art{order:-1;padding:1rem}
  .foot-in{grid-template-columns:1fr}
  .strip-in>div{border-left:none;border-top:2px solid var(--foot-line)}
  .strip-in>div:first-child{border-top:none}
  body{font-size:15px}
}

/* ---------- sources consulted ---------- */
.sources-box{
  border:var(--bw) solid var(--ink);background:var(--paper);
  box-shadow:5px 5px 0 var(--ink);padding:1.3rem 1.4rem;margin:2.2rem 0;
}
.sources-box h3{margin-top:0;font-family:var(--mono);font-size:.85rem;text-transform:uppercase;letter-spacing:.12em}
.sources-box h3::before{content:"[ ";color:var(--red)}
.sources-box h3::after{content:" ]";color:var(--red)}
.sources-box .disc{font-size:.78rem;color:var(--ink-soft)}
.sources-box ul{margin-bottom:0;font-size:.85rem}
.sources-box li{word-break:break-all}

/* ---------- try-this-prompt box (copied from The Rundown's tutorial slot) ---------- */
.try-prompt{
  border:var(--bw) solid var(--red);background:#FFF7ED;
  box-shadow:5px 5px 0 var(--red);padding:1.3rem 1.4rem;margin:2.2rem 0;
}
.try-prompt h3{margin-top:0}
.try-prompt-text{
  font-family:var(--mono);font-size:.88rem;background:var(--paper);
  border:1px dashed var(--ink-soft);padding:.9rem 1rem;white-space:pre-wrap;
}
.try-prompt-copy{
  font-family:var(--mono);font-size:.8rem;cursor:pointer;
  border:var(--bw) solid var(--ink);background:var(--paper);
  padding:.45rem .9rem;box-shadow:3px 3px 0 var(--ink);
}
.try-prompt-copy:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}

/* ---------- slop checker ---------- */
.slop-samples{display:flex;gap:.6rem;flex-wrap:wrap;margin:0 0 1rem}
.slop-samples button{
  font-family:var(--mono);font-size:.82rem;cursor:pointer;
  border:var(--bw) solid var(--ink);background:var(--cream);
  padding:.45rem .9rem;box-shadow:3px 3px 0 var(--ink);
}
.slop-samples button:hover{background:var(--sand)}
.slop-samples button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.slop-input{
  width:100%;font-family:var(--mono);font-size:.95rem;line-height:var(--lh);
  background:var(--term-bg);color:var(--term-green);
  border:var(--bw) solid var(--ink);padding:1rem;resize:vertical;min-height:12rem;
}
.slop-input::placeholder{color:#4a7c2f}
.slop-input:focus{outline:3px solid var(--ember);outline-offset:1px}
.slop-check{
  font-family:var(--mono);font-weight:800;font-size:1.05rem;cursor:pointer;
  border:var(--bw) solid var(--ink);background:var(--red);color:var(--cream);
  padding:.7rem 1.6rem;margin:1rem 0;box-shadow:5px 5px 0 var(--ink);
}
.slop-check:hover{background:var(--red-dark)}
.slop-check:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.slop-result{margin:2rem 0}
.slop-scorecard{
  display:flex;gap:1.6rem;align-items:flex-start;
  border:var(--bw) solid var(--ink);background:var(--cream);
  box-shadow:5px 5px 0 var(--ink);padding:1.4rem;margin-bottom:1.6rem;
}
.slop-grade{
  font-family:var(--display);font-weight:900;font-size:4rem;line-height:1;
  border:var(--bw) solid var(--ink);min-width:5.5rem;text-align:center;
  padding:.6rem .4rem;background:var(--paper);
}
.grade-A{background:#D6F5D6}.grade-B{background:#FFF3B0}.grade-C{background:#FFE3C2}
.grade-D{background:#FFC9B0}.grade-F{background:var(--red);color:var(--cream)}
.slop-num{font-size:2rem;font-weight:800}
.slop-num span{font-size:1rem;font-weight:400;color:var(--ink-soft)}
.slop-blurb{font-style:italic;margin:.4rem 0}
.slop-meta{font-size:.82rem;color:var(--ink-soft)}
.slop-gate{
  border:var(--bw) solid var(--red);background:#FFF7ED;
  box-shadow:5px 5px 0 var(--red);padding:1.3rem 1.4rem;margin:1.6rem 0;
}
.slop-gate h3{margin-top:0}
.slop-text{
  border:var(--bw) solid var(--ink);background:var(--paper);
  padding:1.2rem 1.4rem;margin:1rem 0;line-height:1.9;
}
mark.slop-hit{background:var(--ember);padding:0 .15em;border:1px solid var(--red-dark);cursor:help}
.slop-tells{list-style:none;padding-left:0}
.slop-tells li{
  border-left:var(--bw) solid var(--red);background:var(--cream);
  padding:.7rem 1rem;margin-bottom:.7rem;
}
.slop-fix{display:block;font-size:.85rem;color:var(--ink-soft);font-style:italic;margin-top:.2rem}
@media (max-width:760px){.slop-scorecard{flex-direction:column}}