/* Blog Collapse — Swiss / strategic direction, inherited from artifactcollapse.com
   cool white · near-black ink · single vermillion accent · grotesk + mono · no serif */
:root{
  --paper:#f7f7f5;
  --paper-2:#ffffff;
  --ink:#16181d;
  --ink-2:#3a3d44;
  --ink-3:#6b6f78;
  --line:#e2e2dd;
  --line-2:#cfcfc8;
  --accent:#e23b1e;        /* vermillion */
  --accent-ink:#b62c12;
  --good:#1f7a4d;
  --warn:#b0641a;
  --bad:#c0392b;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --measure:68ch;
  --r:4px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{width:100%;max-width:1040px;margin:0 auto;padding:0 24px}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline}
em{font-style:italic}
strong{font-weight:600}

/* header */
header.site{position:sticky;top:0;z-index:20;background:rgba(247,247,245,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:62px}
.brand{font-weight:700;letter-spacing:.08em;color:var(--ink);font-size:15px}
header nav{display:flex;gap:22px;align-items:center}
header nav a{color:var(--ink-2);font-size:14px;font-weight:500}
header nav a:hover{color:var(--ink);text-decoration:none}
.cta-link{color:var(--accent-ink)!important}

/* hero */
.hero{padding:84px 24px 64px}
.kicker{font-family:var(--mono);font-size:13px;color:var(--accent-ink);letter-spacing:.02em;margin:0 0 22px}
.hero h1{font-size:clamp(34px,5.2vw,58px);line-height:1.04;letter-spacing:-.02em;font-weight:700;margin:0 0 26px}
.lede{font-size:clamp(18px,2.2vw,22px);line-height:1.5;color:var(--ink-2);max-width:760px;margin:0 0 32px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.micro{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);line-height:1.5}

/* buttons */
.btn{display:inline-block;font-family:var(--sans);font-weight:600;font-size:15px;padding:13px 22px;border-radius:var(--r);border:1px solid transparent;cursor:pointer;transition:transform .04s ease}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.primary:hover{background:var(--accent-ink)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--ink-3)}

/* bands */
.band{padding:70px 0;border-top:1px solid var(--line)}
.band.alt{background:var(--paper-2)}
.band h2{font-size:clamp(26px,3.4vw,38px);line-height:1.1;letter-spacing:-.015em;margin:0 0 20px}
.band p{max-width:var(--measure)}
.band .sub{color:var(--ink-2);font-size:18px;max-width:760px;margin:0 0 34px}

/* tests grid */
.tests{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:30px}
.test{background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:var(--r);padding:16px 18px}
.test.fail{border-left-color:var(--bad)}
.test.cond{border-left-color:var(--warn)}
.test .t{display:block;font-family:var(--mono);font-size:12px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.test .v{display:block;font-weight:600;font-size:16px;margin:4px 0 8px}
.test.fail .v{color:var(--bad)}
.test.cond .v{color:var(--warn)}
.test p{font-size:14px;color:var(--ink-2);margin:0;max-width:none}

/* phases */
.phases{list-style:none;counter-reset:p;padding:0;margin:10px 0 0;display:grid;gap:2px}
.phases li{display:flex;gap:20px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);padding:22px 24px}
.band.alt .phases li{background:var(--paper)}
.phases .n{font-family:var(--mono);font-size:30px;font-weight:500;color:var(--accent);min-width:42px;line-height:1}
.phases h3{margin:0 0 6px;font-size:19px}
.phases p{margin:0;color:var(--ink-2);font-size:15.5px}

/* moats table */
.moats{width:100%;border-collapse:collapse;margin-top:10px;font-size:15.5px}
.moats th,.moats td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.moats thead th{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);border-bottom:1px solid var(--line-2)}
.moats td:last-child{font-family:var(--mono);font-size:13px;color:var(--ink-2);white-space:nowrap}
.moats tr.dead td{color:var(--ink-3)}
.moats tr.dead td:last-child{color:var(--bad)}

/* twist */
.twist{margin-top:40px;background:var(--ink);color:#f0f0ec;border-radius:var(--r);padding:30px 32px}
.twist h3{margin:0 0 14px;font-size:21px;color:#fff}
.twist p{margin:0;color:#cfcfc8;max-width:760px}
.twist strong{color:#fff}
.twist em{color:#f0c9c0}

/* tool band */
.tool-band{background:var(--paper-2)}
.badge{font-family:var(--mono);font-size:13px;background:var(--ink);color:#fff;padding:3px 9px;border-radius:var(--r);vertical-align:middle;margin-left:6px}

/* gate */
.gate{max-width:520px;margin:34px auto 0;background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r);padding:34px 32px;text-align:center}
.gate .lock{font-size:30px;margin-bottom:10px}
.gate h3{margin:0 0 8px;font-size:21px}
.gate>p{color:var(--ink-2);font-size:15px;margin:0 auto 22px;max-width:none}
#gate-form{display:flex;flex-direction:column;gap:12px;align-items:stretch;text-align:left}
#gate-form label{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
#code{font-family:var(--mono);font-size:18px;letter-spacing:.12em;text-align:center;text-transform:uppercase;padding:14px;border:1px solid var(--line-2);border-radius:var(--r);background:#fff;color:var(--ink)}
#code:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.gate-msg{font-family:var(--mono);font-size:13px;min-height:18px;margin:2px 0 0;text-align:center}
.gate-msg.err{color:var(--bad)}
.gate-msg.ok{color:var(--good)}
.gate .micro{margin-top:18px;text-align:center}

/* tool app */
.tool-app{max-width:760px;margin:30px auto 0}
.unlocked-note{font-family:var(--mono);font-size:13px;color:var(--good);margin:0 0 22px;text-align:center}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.field label{font-weight:600;font-size:15px}
.field small{color:var(--ink-3);font-size:13px}
.field .req{color:var(--accent)}
.field input[type=text],.field select{font-family:var(--sans);font-size:15px;padding:11px 13px;border:1px solid var(--line-2);border-radius:var(--r);background:#fff;color:var(--ink)}
.field input:focus,.field select:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field.check{flex-direction:row;align-items:center;gap:10px}
.field.check label{font-weight:400;font-size:14px;display:flex;gap:8px;align-items:flex-start}

/* result */
.result{margin-top:30px}
.result .verdicts{display:grid;gap:10px;margin:18px 0}
.result .vrow{display:grid;grid-template-columns:160px 110px 1fr;gap:14px;align-items:start;padding:12px 16px;background:var(--paper);border:1px solid var(--line)}
.result .vname{font-family:var(--mono);font-size:13px;color:var(--ink-2)}
.result .vverdict{font-weight:600;font-size:14px}
.result .vverdict.Fail{color:var(--bad)}
.result .vverdict.Conditional{color:var(--warn)}
.result .vverdict.Pass{color:var(--good)}
.result .vwhy{font-size:14px;color:var(--ink-2)}
.result h3{margin:26px 0 12px}
.bif{display:grid;gap:8px}
.bif .pile{padding:12px 16px;border:1px solid var(--line);border-left:3px solid var(--good)}
.bif .pile.dead{border-left-color:var(--bad)}
.bif .pile .moat{font-family:var(--mono);font-size:12px;color:var(--ink-3)}

/* footer */
footer.site{border-top:1px solid var(--line);padding:40px 0;color:var(--ink-2)}
footer.site p{max-width:var(--measure);font-size:14.5px}

@media(max-width:640px){
  .row{grid-template-columns:1fr}
  .result .vrow{grid-template-columns:1fr}
  header nav a:not(.cta-link){display:none}
}
