/* thursdai site — built on Brand Guide v1.0 tokens.
   Layout: chalk pages broken by full-bleed anvil bands for the moments to remember
   (hero, the single claim, the close). 2px radius, flat fills, no gradients. */

:root {
  /* ground + ink */
  --anvil:#12100F; --chalk:#F5F2EC; --chalk-2:#EAE6DD; --white:#FFFFFF;
  --graphite:#6E6B66; --ash:#9C9790; --rule:#D9D4C9; --rule-dark:#2A2724;
  /* brand */
  --madder:#A63D2F; --madder-hover:#8E3428; --madder-press:#7E2E23;
  --madder-light:#B9675C; --madder-tint:#EEE3DC;
  --indigo:#2E4159; --indigo-hover:#27374C; --indigo-tint:#E5E3E0;
  --brass:#E0BA6B; --brass-hover:#C9A760; --brass-press:#B79857; --brass-deep:#816B3E; --brass-tint:#F3EDE1;
  --green:#1F5D45; --green-tint:#E3E6DE;
  /* semantic */
  --bg:var(--chalk); --bg-raised:var(--white); --border:var(--rule);
  --text:var(--anvil); --text-muted:var(--graphite);
  --action:var(--madder); --action-hover:var(--madder-hover); --action-ink:var(--chalk);
  --focus:var(--anvil); --label:var(--madder);
  /* type */
  --font-display:"Bitter", Georgia, "Times New Roman", serif;
  --font-text:"Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-display:clamp(2.75rem, 6vw, 4.5rem);
  --fs-h1:clamp(2rem, 4vw, 3rem);
  --fs-h2:clamp(1.5rem, 3vw, 2.125rem);
  --fs-h3:1.25rem; --fs-lead:1.1875rem; --fs-body:1.0625rem; --fs-small:0.9375rem; --fs-label:0.75rem;
  --lh-display:1.04; --lh-heading:1.14; --lh-body:1.62;
  --track-display:-0.02em; --track-label:0.16em;
  /* space + form */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:72px; --space-9:112px;
  --radius:2px; --container:1200px; --measure:42rem;
  --dur-fast:120ms; --dur-base:180ms; --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme: light;
}

/* Dark bands invert the semantic layer — components need no changes. */
.band-dark {
  --bg:var(--anvil); --bg-raised:#1D1A17; --border:var(--rule-dark);
  --text:var(--chalk); --text-muted:var(--ash);
  --action:var(--brass); --action-hover:var(--brass-hover); --action-ink:var(--anvil);
  --focus:var(--brass); --label:var(--brass);
  background:var(--bg); color:var(--text);
}
.band-indigo {
  --bg:var(--indigo); --bg-raised:var(--indigo-hover); --border:#3E5270;
  --text:var(--chalk); --text-muted:#C9CED6;
  --action:var(--brass); --action-hover:var(--brass-hover); --action-ink:var(--anvil);
  --focus:var(--brass); --label:var(--brass);
  background:var(--bg); color:var(--text);
}

*, *::before, *::after { box-sizing:border-box; }
html { font-size:16px; scroll-behavior:auto; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-text); font-size:var(--fs-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img, svg { max-width:100%; }
h1, h2, h3 { font-family:var(--font-display); letter-spacing:var(--track-display); text-wrap:balance; margin:0; color:var(--text); }
h1 { font-size:var(--fs-h1); line-height:1.08; font-weight:700; }
h2 { font-size:var(--fs-h2); line-height:var(--lh-heading); font-weight:600; }
h3 { font-size:var(--fs-h3); line-height:1.3; font-weight:600; }
p { margin:0; max-width:var(--measure); text-wrap:pretty; }
ul, ol { margin:0; padding:0; }
a { color:var(--action); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover { text-decoration-thickness:2px; }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }

.skip { position:absolute; left:-9999px; top:0; background:var(--brass); color:var(--anvil); padding:10px 16px; z-index:100; }
.skip:focus { left:16px; top:16px; }

.container { max-width:var(--container); margin-inline:auto; padding-inline:var(--space-5); }
@media (max-width:640px) { .container { padding-inline:var(--space-4); } }

.section { padding-block:var(--space-9); }
.section--tight { padding-block:var(--space-8); }
@media (max-width:900px) { .section { padding-block:var(--space-8); } }

.label {
  display:block; font-family:var(--font-mono); font-size:var(--fs-label); font-weight:500;
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--label);
}
.lead { font-size:var(--fs-lead); line-height:1.55; color:var(--text-muted); }
.band-dark .lead, .band-indigo .lead { color:var(--text-muted); }
.muted { color:var(--text-muted); }
.small { font-size:var(--fs-small); line-height:1.5; }
.source { font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:0.04em; color:var(--text-muted); }

.stack { display:flex; flex-direction:column; gap:var(--space-4); }
.stack-lg { display:flex; flex-direction:column; gap:var(--space-6); }
.section-head { display:flex; flex-direction:column; gap:var(--space-3); margin-bottom:var(--space-7); max-width:48rem; }
.section-head p { color:var(--text-muted); }

/* ---- buttons ---- */
.actions { display:flex; flex-wrap:wrap; gap:var(--space-3); }
.btn {
  display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  font-family:var(--font-text); font-weight:600; font-size:.94rem; line-height:1.2;
  padding:10px 18px; border-radius:var(--radius); border:1px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:background var(--dur-fast) ease-out, color var(--dur-fast) ease-out, border-color var(--dur-fast) ease-out;
}
.btn--lg { padding:14px 24px; }
.btn--primary { background:var(--action); color:var(--action-ink); }
.btn--primary:hover { background:var(--action-hover); text-decoration:none; }
.btn--secondary { background:transparent; color:var(--text); border-color:var(--text); }
.btn--secondary:hover { background:var(--text); color:var(--bg); text-decoration:none; }

/* ---- header ---- */
.site-header {
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:50;
  background:var(--anvil); color:var(--chalk); border-bottom:1px solid var(--rule-dark);
}
.site-header .container { display:flex; align-items:center; justify-content:space-between; gap:var(--space-5); height:64px; }
.brand { display:inline-flex; align-items:center; line-height:0; }
.brand svg { height:30px; width:auto; }
.site-nav { display:flex; align-items:center; gap:var(--space-6); }
.site-nav ul { list-style:none; display:flex; gap:var(--space-5); }
.site-nav a.nav-link { color:var(--ash); text-decoration:none; font-size:var(--fs-small); font-weight:500; padding-block:var(--space-2); }
.site-nav a.nav-link:hover, .site-nav a.nav-link[aria-current="page"] { color:var(--chalk); }
.site-nav a.nav-link[aria-current="page"] { box-shadow:inset 0 -2px 0 var(--brass); }
.site-nav .btn--primary { background:var(--brass); color:var(--anvil); }
.site-nav .btn--primary:hover { background:var(--brass-hover); }
.site-header :focus-visible { outline-color:var(--brass); }
.menu-toggle {
  display:none; background:transparent; color:var(--chalk); border:1px solid var(--rule-dark);
  border-radius:var(--radius); min-height:44px; min-width:44px; padding:0 14px;
  font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:var(--track-label); text-transform:uppercase; cursor:pointer;
}
@media (max-width:900px) {
  .site-header .container { height:56px; }
  .brand svg { height:26px; }
  .menu-toggle { display:inline-flex; align-items:center; }
  .site-nav {
    display:none; position:absolute; left:0; right:0; top:56px;
    background:var(--anvil); border-bottom:1px solid var(--rule-dark);
    flex-direction:column; align-items:stretch; gap:var(--space-4); padding:var(--space-5);
  }
  .site-nav.is-open { display:flex; }
  .site-nav ul { flex-direction:column; gap:0; }
  .site-nav a.nav-link { display:block; padding-block:var(--space-3); font-size:var(--fs-body); border-bottom:1px solid var(--rule-dark); }
  .site-nav a.nav-link[aria-current="page"] { box-shadow:none; color:var(--brass); }
}

/* ---- hero ---- */
.hero { padding-block:var(--space-9) var(--space-8); position:relative; overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:var(--space-8); align-items:center; }
.hero h1 { font-size:var(--fs-display); line-height:var(--lh-display); }
.hero .stack-lg { min-width:0; }
.hero-mark {
  position:absolute; right:-260px; bottom:-300px; width:560px; height:560px; opacity:.08; pointer-events:none;
}
@media (max-width:1000px) { .hero-grid { grid-template-columns:minmax(0, 1fr); gap:var(--space-7); } .hero-mark { display:none; } }
.hero h1 span { display:block; }

.page-hero { padding-block:var(--space-8) var(--space-8); }
.page-hero .stack-lg { max-width:52rem; }
.page-hero h1 { font-size:var(--fs-display); line-height:var(--lh-display); }

/* ---- OS diagram (hero) ---- */
.os-diagram { display:flex; flex-direction:column; gap:var(--space-3); min-width:0; }
.os-row-label { font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ash); }
.chips { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.chip {
  font-family:var(--font-mono); font-size:.8125rem; padding:6px 10px; border:1px solid var(--rule-dark);
  border-radius:var(--radius); color:var(--chalk); background:#1D1A17;
}
.os-layer { background:var(--chalk); color:var(--anvil); border-radius:var(--radius); padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-4); }
.os-layer-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; }
.os-layer-head strong { font-family:var(--font-display); font-size:1.375rem; font-weight:700; letter-spacing:var(--track-display); }
.os-layer-head span { font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--madder); }
.os-cells { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.os-cells div {
  background:var(--white); padding:10px 12px; font-family:var(--font-mono); font-size:.75rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--indigo);
}
.os-connector { display:flex; justify-content:center; }
.os-connector span { display:block; width:2px; height:20px; background:var(--brass); }
.stages { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--space-2); }
.stage {
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--rule-dark); border-radius:var(--radius); padding:8px 10px; color:var(--ash);
  display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0;
  transition:border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.stage em { font-style:normal; color:transparent; font-size:.6875rem; letter-spacing:.1em; line-height:1.3; transition:color var(--dur-base) var(--ease); }
.stage.is-checked { border-color:var(--brass); color:var(--chalk); }
.stage.is-checked em { color:var(--brass); }
@media (max-width:480px) { .os-cells { grid-template-columns:repeat(2, minmax(0, 1fr)); } .stages { grid-template-columns:repeat(2, minmax(0, 1fr)); } }

/* ---- equation ---- */
.equation { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); gap:var(--space-4); align-items:stretch; }
.eq-box { background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-3); min-width:0; }
.eq-box--result { background:var(--madder); border-color:var(--madder); color:var(--chalk); justify-content:center; }
.eq-box--result .label { color:var(--chalk); }
.eq-box--result p { font-family:var(--font-display); font-size:clamp(1.5rem, 2.6vw, 2rem); font-weight:700; line-height:1.15; letter-spacing:var(--track-display); }
.eq-op { display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:2.5rem; font-weight:700; color:var(--madder); }
@media (max-width:900px) {
  .equation { grid-template-columns:minmax(0,1fr); }
  .eq-op { font-size:2rem; line-height:1; }
}

/* ---- statement band ---- */
.statement { font-family:var(--font-display); font-size:var(--fs-h1); line-height:1.12; font-weight:700; letter-spacing:var(--track-display); max-width:26ch; text-wrap:balance; }
.statement-body { font-size:var(--fs-lead); line-height:1.6; color:var(--text-muted); max-width:44rem; }

/* ---- grids & cards ---- */
.grid { display:grid; gap:var(--space-5); }
.grid-2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns:repeat(4, minmax(0, 1fr)); }
@media (max-width:1100px) { .grid-4 { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:900px) { .grid-3 { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns:minmax(0, 1fr); } }

.card { background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-3); min-width:0; }
.card p { color:var(--text-muted); }
.card--top { border-top:3px solid var(--brass); }
.card a.card-link { text-decoration:none; color:inherit; }
a.card { text-decoration:none; color:inherit; }
a.card:hover h3 { text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px; }
.card .num { font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:var(--track-label); color:var(--madder); }
.card .outcome { font-family:var(--font-display); font-weight:600; color:var(--madder); font-size:1.0625rem; line-height:1.35; margin-top:auto; }
.band-dark .card .outcome, .band-indigo .card .outcome { color:var(--brass); }
.band-dark .card .num { color:var(--brass); }

/* ---- stats ---- */
.stat { display:flex; flex-direction:column; gap:var(--space-2); padding-top:var(--space-5); border-top:1px solid var(--border); min-width:0; }
.stat-figure { font-family:var(--font-display); font-weight:700; font-size:clamp(3rem, 6vw, 4.5rem); line-height:1; letter-spacing:var(--track-display); color:var(--madder); font-variant-numeric:tabular-nums; }
.stat-claim { font-weight:600; font-size:var(--fs-lead); line-height:1.4; }

/* ---- steps (brief/check/prove) ---- */
.steps { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0; border:1px solid var(--border); border-radius:var(--radius); }
.step { padding:var(--space-6) var(--space-5); display:flex; flex-direction:column; gap:var(--space-3); min-width:0; }
.step + .step { border-left:1px solid var(--border); }
.step h3 { font-size:1.5rem; }
.step p { color:var(--text-muted); }
@media (max-width:900px) {
  .steps { grid-template-columns:minmax(0,1fr); }
  .step + .step { border-left:none; border-top:1px solid var(--border); }
}

/* ---- loop (modernization) ---- */
.loop { list-style:none; display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:var(--space-2); counter-reset:loop; }
.loop li {
  counter-increment:loop; background:var(--bg-raised); border:1px solid var(--border); border-top:3px solid var(--brass);
  border-radius:var(--radius); padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-2); min-width:0;
}
.loop li::before { content:counter(loop, decimal-leading-zero); font-family:var(--font-mono); font-size:var(--fs-label); color:var(--text-muted); }
.loop strong { font-family:var(--font-mono); font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase; color:var(--indigo); }
.loop span { font-size:var(--fs-small); line-height:1.45; color:var(--text-muted); }
@media (max-width:1100px) { .loop { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
@media (max-width:640px) { .loop { grid-template-columns:minmax(0, 1fr); } }

.package { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.4fr); gap:var(--space-7); align-items:start; }
@media (max-width:900px) { .package { grid-template-columns:minmax(0,1fr); gap:var(--space-5); } }
.facts { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.fact { font-family:var(--font-mono); font-size:.8125rem; padding:6px 10px; border:1px solid var(--border); border-radius:var(--radius); }
.ticks { list-style:none; display:flex; flex-direction:column; gap:var(--space-3); }
.ticks li { display:grid; grid-template-columns:20px minmax(0,1fr); gap:var(--space-3); align-items:start; }
.ticks li::before { content:""; width:12px; height:12px; margin-top:7px; background:var(--brass); border-radius:1px; }

/* ---- lists with rules ---- */
.ruled { list-style:none; border-top:1px solid var(--border); }
.ruled li { display:grid; grid-template-columns:minmax(0, 14rem) minmax(0, 1fr); gap:var(--space-5); padding-block:var(--space-5); border-bottom:1px solid var(--border); }
.ruled li strong { font-family:var(--font-display); font-weight:600; font-size:var(--fs-h3); line-height:1.3; letter-spacing:var(--track-display); }
.ruled li p { color:var(--text-muted); }
@media (max-width:640px) { .ruled li { grid-template-columns:minmax(0,1fr); gap:var(--space-2); } }

/* ---- use case detail ---- */
.usecase { display:grid; grid-template-columns:minmax(0, 18rem) minmax(0, 1fr); gap:var(--space-7); padding-block:var(--space-7); border-top:1px solid var(--border); scroll-margin-top:80px; }
.usecase:last-child { border-bottom:1px solid var(--border); }
.usecase-body { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--space-5); }
.usecase-body > div { display:flex; flex-direction:column; gap:var(--space-2); min-width:0; }
.usecase-body p { color:var(--text-muted); }
.usecase .outcome { font-family:var(--font-display); font-weight:600; color:var(--madder); font-size:1.125rem; line-height:1.35; }
.workflow { grid-column:1 / -1; background:var(--chalk-2); border-radius:var(--radius); padding:var(--space-4) var(--space-5); display:flex; flex-direction:column; gap:var(--space-2); }
.workflow ol { list-style:none; display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-3); counter-reset:wf; }
.workflow li { counter-increment:wf; font-size:var(--fs-small); display:inline-flex; gap:6px; align-items:baseline; }
.workflow li::before { content:counter(wf) "."; font-family:var(--font-mono); font-size:.75rem; color:var(--madder); }
@media (max-width:1000px) { .usecase { grid-template-columns:minmax(0,1fr); gap:var(--space-5); } }
@media (max-width:760px) { .usecase-body { grid-template-columns:minmax(0,1fr); } }

/* ---- capability detail ---- */
.cap { display:flex; flex-direction:column; gap:var(--space-3); }
.cap .label { color:var(--indigo); }
.cap-example { margin-top:auto; padding-top:var(--space-3); border-top:1px solid var(--border); font-size:var(--fs-small); line-height:1.5; color:var(--text-muted); }
.cap-example b { font-family:var(--font-mono); font-size:.6875rem; letter-spacing:var(--track-label); text-transform:uppercase; font-weight:500; color:var(--text); display:block; margin-bottom:4px; }

/* ---- demo compare ---- */
.compare { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--space-5); }
@media (max-width:900px) { .compare { grid-template-columns:minmax(0,1fr); } }
.badge { display:inline-block; align-self:flex-start; font-family:var(--font-mono); font-size:.6875rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; padding:4px 8px; border-radius:var(--radius); }
.badge--fail { background:var(--madder-tint); color:var(--madder-press); }
.badge--pass { background:var(--green-tint); color:var(--green); }
.run { display:flex; flex-direction:column; gap:var(--space-2); padding-block:var(--space-3); border-top:1px solid var(--border); }
.plain-list { list-style:none; display:flex; flex-direction:column; gap:6px; font-size:var(--fs-small); }
.plain-list li { padding-left:14px; position:relative; }
.plain-list li::before { content:""; position:absolute; left:0; top:.65em; width:6px; height:6px; background:var(--indigo); }

/* ---- note ---- */
.note { background:var(--brass-tint); border-left:3px solid var(--brass-deep); padding:var(--space-4) var(--space-5); border-radius:var(--radius); font-size:var(--fs-small); }

/* ---- contact ---- */
.email-box { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); }
.email-text { font-family:var(--font-mono); font-size:clamp(1.125rem, 2.4vw, 1.5rem); font-weight:500; user-select:all; color:var(--text); overflow-wrap:anywhere; }
.copy-status { font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.08em; color:var(--text-muted); min-height:1em; }

/* ---- footer ---- */
.site-footer { background:var(--anvil); color:var(--ash); padding-block:var(--space-8) var(--space-6); }
.site-footer .container { display:flex; flex-direction:column; gap:var(--space-7); }
.footer-top { display:grid; grid-template-columns:minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap:var(--space-6); }
.footer-top svg { height:30px; width:auto; }
.footer-top p { color:var(--ash); font-size:var(--fs-small); margin-top:var(--space-4); max-width:26rem; }
.footer-col { display:flex; flex-direction:column; gap:var(--space-3); }
.footer-col .label { color:var(--brass); }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:var(--space-2); }
.footer-col a { color:var(--chalk); text-decoration:none; font-size:var(--fs-small); }
.footer-col a:hover { text-decoration:underline; }
.footer-bottom { border-top:1px solid var(--rule-dark); padding-top:var(--space-5); display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3); font-size:var(--fs-small); }
.site-footer :focus-visible { outline-color:var(--brass); }
@media (max-width:760px) { .footer-top { grid-template-columns:minmax(0,1fr); } }

/* ---- entrance motion: visible at rest; only enhances when motion is allowed ---- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity:1; transform:none; }
  .js .reveal.is-pending { opacity:0; transform:translateY(8px); }
  .js .reveal.is-in { opacity:1; transform:none; transition:opacity 240ms ease-out, transform 240ms ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}