/* ============================================================================
   FORT STYLE — the design system as a service (served by the fort-style worker)
   ONE file. TOKENS + COMPONENTS + THEMES. This is the spine: every spoke links
   it and uses the .fort-* classes; spokes carry (almost) no style of their own.
   A theme = a different set of values for the same tokens.
   Switch instantly with: document.documentElement.dataset.theme = 'noir'
   Default (no attribute) = Prism.
   When a page needs a new kind of component, add it HERE, named — not on the page.
   ========================================================================== */

:root,
[data-theme="prism"] {
  --fort-page: radial-gradient(900px 600px at 12% -8%,#ffe1f6 0,transparent 60%),
               radial-gradient(900px 600px at 92% 4%,#ddeaff 0,transparent 60%), #fff6fc;
  --fort-bg:#fff6fc; --fort-surface:#ffffff; --fort-border:#f0e3fb;
  --fort-ink:#2c1450; --fort-soft:#5b3d86; --fort-faint:#8f78b5;
  --fort-accent:#ff48cf; --fort-accent-ink:#c20098; --fort-link:#9d4dff;
  --fort-rainbow:linear-gradient(90deg,#ff48cf,#ff7a45,#ffd23f,#7ee84a,#2fe3d8,#5b8cff,#c07bff);
  --fort-shadow:0 10px 30px rgba(157,77,255,.18);
  --fort-shadow-hot:0 8px 24px rgba(255,72,207,.28);
  /* feature-panel ground: a deliberately dark band, per theme (so its light text stays readable) */
  --fort-panel:#2c1450; --fort-on-panel:#ffffff; --fort-on-panel-soft:rgba(255,255,255,.7);
}

/* Dark theme. */
[data-theme="noir"] {
  --fort-page: radial-gradient(circle at center,#1a100a 0%,#0b0705 55%,#000 100%);
  --fort-bg:#0a0705; --fort-surface:#1b120e; --fort-border:#32261e;
  --fort-ink:#f8e7c4; --fort-soft:#e6c48a; --fort-faint:#a98c63;
  --fort-accent:#d46a2e; --fort-accent-ink:#e6c48a; --fort-link:#e6c48a;
  --fort-rainbow:linear-gradient(90deg,#ff8a4d,#ffb24a,#ffd45e,#ffb24a,#ff8a4d);
  --fort-shadow:0 10px 30px rgba(0,0,0,.6);
  --fort-shadow-hot:0 0 28px rgba(212,106,46,.4);
  --fort-panel:#120c08; --fort-on-panel:#f8e7c4; --fort-on-panel-soft:rgba(248,231,196,.7);
}

/* Clean neutral theme. */
[data-theme="classic"] {
  --fort-page:#faf9f5;
  --fort-bg:#faf9f5; --fort-surface:#ffffff; --fort-border:#e6e2d8;
  --fort-ink:#181818; --fort-soft:#3d3d3a; --fort-faint:#73706a;
  --fort-accent:#d97757; --fort-accent-ink:#b85a3c; --fort-link:#b85a3c;
  --fort-rainbow:linear-gradient(90deg,#e08a5a,#e0a04a,#d98a4e,#c8744a,#e08a5a);
  --fort-shadow:0 10px 30px rgba(0,0,0,.10);
  --fort-shadow-hot:0 8px 24px rgba(217,119,87,.28);
  --fort-panel:#1b1b1b; --fort-on-panel:#ffffff; --fort-on-panel-soft:rgba(255,255,255,.72);
}

/* Papers theme — the dark palette for papers.thefortthatholds.com. It is a THEME
   (a palette), one of prism/noir/classic/papers — selectable by the header switcher
   like any other. It sets ONLY palette tokens; the paper LAYOUT is theme-independent
   (see the .fort-paper template below), so switching the theme recolors a paper page
   without changing its layout. */
[data-theme="papers"] {
  --fort-page:#0c0f18;
  --fort-bg:#0c0f18; --fort-surface:#131826; --fort-border:#2a3146;
  --fort-ink:#e8ecf6; --fort-soft:#aeb8cc; --fort-faint:#8b94a8;
  --fort-accent:#ffb454; --fort-accent-ink:#ffb454; --fort-link:#4fc3f7;
  --fort-rainbow:linear-gradient(90deg,#4fc3f7,#ffb454,#9ccc65);
  --fort-panel:#0c0f18; --fort-on-panel:#e8ecf6;
}

/* Theme-independent sizing + aliases. The papers layout uses --fort-dim/-line/-card
   and the --pp-* index aliases; deriving them from base tokens here (not per-theme)
   means they resolve in EVERY theme, so a paper page recolors correctly under
   prism/noir/classic/papers alike. */
:root {
  --fort-radius:18px; --fort-radius-sm:12px;
  --fort-ring:0 0 0 3px rgba(255,72,207,.35);
  --fort-shadow-pink:var(--fort-shadow-hot); /* legacy alias spokes used */
  --fort-font: "Poppins","Quicksand",ui-rounded,"Segoe UI",system-ui,sans-serif;
  --fort-mono: "JetBrains Mono",ui-monospace,monospace;
  --fort-display: "Archivo Black",var(--fort-font);
  /* papers layout aliases — theme-adaptive via the base tokens */
  --fort-dim:var(--fort-faint); --fort-line:var(--fort-border); --fort-card:var(--fort-surface);
  --pp-power:var(--fort-accent); --pp-water:var(--fort-link); --pp-land:#9ccc65;
  --pp-ink:var(--fort-ink); --pp-dim:var(--fort-faint); --pp-line:var(--fort-border);
  --pp-card:var(--fort-surface); --pp-bg:var(--fort-bg);
}

/* ============================================================================
   BASE — opt in by putting class="fort" on <body> (or use the components alone)
   ========================================================================== */
.fort{background:var(--fort-page);color:var(--fort-ink);font-family:var(--fort-font);
  -webkit-font-smoothing:antialiased;line-height:1.6;}

/* ============================================================================
   RAINBOW — the Prism signature. A prism makes a rainbow, so the accent IS the
   rainbow. As TEXT it's gradient-clipped; as a FILL it's the gradient itself.
   In Noir/Classic --fort-rainbow becomes that theme's gradient automatically.
   ========================================================================== */
.fort-rainbow-text{background:var(--fort-rainbow);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.fort-rainbow-fill{background:var(--fort-rainbow);color:var(--fort-ink);}
.fort-rule{border:0;height:3px;background:var(--fort-rainbow);}        /* rainbow bar */
.fort-divider{border:0;height:1px;background:var(--fort-border);width:100%;}

/* ============================================================================
   TYPOGRAPHY
   ========================================================================== */
.fort-h1{font-family:var(--fort-display);font-size:clamp(2.5rem,7vw,5.5rem);
  font-weight:800;line-height:1.05;letter-spacing:-.02em;color:var(--fort-ink);margin:0 0 .5em;}
.fort-h2{font-family:var(--fort-display);font-size:clamp(1.5rem,3vw,2rem);
  font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:1.2;color:var(--fort-ink);margin:0 0 2rem;}
.fort-h3{font-family:var(--fort-display);font-size:1.15rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--fort-ink);margin:0 0 .5em;}
.fort-lead{color:var(--fort-soft);font-size:1.1rem;line-height:1.75;}
.fort-muted{color:var(--fort-faint);}

/* Eyebrow / kicker / section label — small mono, uppercase, RAINBOW by default. */
.fort-eyebrow,.fort-label{font-family:var(--fort-mono);font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.22em;display:inline-block;margin-bottom:1rem;
  background:var(--fort-rainbow);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;}

/* ============================================================================
   CARD
   ========================================================================== */
.fort-card{background:var(--fort-surface);border:1px solid var(--fort-border);
  border-radius:var(--fort-radius);padding:24px;box-shadow:var(--fort-shadow);
  transition:transform .15s ease,box-shadow .15s ease;}
.fort-card:hover{transform:translateY(-2px);box-shadow:var(--fort-shadow-hot);}
.fort-card h3,.fort-card .fort-card-title{font-family:var(--fort-display);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:.5rem;color:var(--fort-ink);}
.fort-card p{color:var(--fort-soft);}

/* ============================================================================
   BUTTON — pill, rainbow fill.
   ========================================================================== */
.fort-btn{display:inline-block;padding:.85em 1.8em;border-radius:999px;border:0;
  font-family:var(--fort-display);font-size:.8rem;text-transform:uppercase;
  letter-spacing:.08em;color:#fff;background:var(--fort-rainbow);
  box-shadow:var(--fort-shadow-hot);cursor:pointer;text-decoration:none;
  transition:transform .12s ease,box-shadow .12s ease;}
.fort-btn:hover{transform:translateY(-2px);}
.fort-btn:focus-visible{outline:0;box-shadow:var(--fort-ring);}
.fort-btn-ghost{background:transparent;color:var(--fort-accent-ink);
  border:1px solid var(--fort-accent-ink);box-shadow:none;}

/* ============================================================================
   PILL / BADGE — rainbow fill, readable ink.
   ========================================================================== */
.fort-pill,.fort-badge{display:inline-block;font-family:var(--fort-mono);
  font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;
  padding:.25em .8em;border-radius:999px;background:var(--fort-rainbow);
  color:var(--fort-ink);}

/* ============================================================================
   HERO
   ========================================================================== */
.fort-hero{min-height:80vh;display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;padding:5rem 2rem;position:relative;overflow:hidden;}
.fort-hero-eyebrow{font-family:var(--fort-mono);font-size:.7rem;text-transform:uppercase;
  letter-spacing:.25em;color:var(--fort-faint);margin-bottom:1.5rem;}
.fort-hero-title{font-family:var(--fort-display);font-size:clamp(2.5rem,7vw,5.5rem);
  line-height:1.05;letter-spacing:-.02em;color:var(--fort-ink);margin-bottom:1.5rem;max-width:14ch;}
.fort-hero-title .accent{background:var(--fort-rainbow);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.fort-hero-subtitle{font-size:1.15rem;color:var(--fort-soft);max-width:600px;
  margin-bottom:2.5rem;line-height:1.7;}

/* ============================================================================
   FEATURE PANEL — a deliberately dark band (themed dark), light text on it.
   ========================================================================== */
.fort-panel{background:var(--fort-panel);color:var(--fort-on-panel);
  border-bottom:4px solid;border-image:var(--fort-rainbow) 1;}
.fort-panel .fort-muted,.fort-panel-soft{color:var(--fort-on-panel-soft);}

/* ============================================================================
   LAYOUT — container, grids, section.
   ========================================================================== */
.fort-container{max-width:1100px;margin:0 auto;padding:0 22px;}
.fort-section{padding:5rem 2rem;}
.fort-section-label{font-family:var(--fort-mono);font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.25em;margin-bottom:1rem;
  background:var(--fort-rainbow);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;}
.fort-grid{display:grid;gap:2rem;}
.fort-grid-2{grid-template-columns:repeat(2,1fr);}
.fort-grid-3{grid-template-columns:repeat(3,1fr);}
.fort-grid-auto{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
@media (max-width:1024px){.fort-grid-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.fort-grid-2,.fort-grid-3{grid-template-columns:1fr;}}

/* ============================================================================
   PAPERS TEMPLATE — the standard paper chrome for papers.thefortthatholds.com.
   Both page types (index grid + article page) live here so every paper is the
   SAME across the mesh. Scoped to the page marker class .fort-paper (NOT to a
   theme) so it is theme-independent: switching prism/noir/classic/papers recolors
   the page (palette tokens) but keeps this layout. Pages carry no palette or layout
   of their own — they add class="fort-paper" (+ data-theme="papers" for the default
   dark palette) and use these classes. Page-unique bits may still live on that page.
   ========================================================================== */
.fort-paper{ background:var(--fort-bg); }
.fort-paper *{ box-sizing:border-box; }
.fort-paper body{ background:var(--fort-bg); color:var(--fort-ink); margin:0; font-family:var(--fort-font); }
.fort-paper a{ color:var(--fort-link); }

/* --- index grid (the landing page) --- */
.fort-paper .wrap{ max-width:900px; margin:0 auto; padding:0 22px 90px; }
.fort-paper .hero{ text-align:center; padding:70px 0 26px; }
.fort-paper .hero .kick{ font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; color:var(--pp-power); font-weight:800; }
.fort-paper .hero h1{ font-size:clamp(2.4rem,7vw,4rem); line-height:1.02; margin:.28em 0 .3em;
  background:linear-gradient(120deg,var(--pp-ink),var(--pp-water) 60%,var(--pp-land));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.fort-paper .hero .sub{ color:var(--pp-dim); max-width:600px; margin:0 auto; font-size:1.08rem; line-height:1.55; }
.fort-paper .reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s ease,transform .6s ease; }
.fort-paper .reveal.in{ opacity:1; transform:none; }
.fort-paper .papers{ display:grid; gap:20px; margin:44px 0 0; }
.fort-paper .paper-card{ display:block; text-decoration:none; color:inherit; position:relative; overflow:hidden;
  background:var(--pp-card); border:1px solid var(--pp-line); border-radius:18px; padding:26px 26px 22px;
  transition:transform .16s,border-color .16s,box-shadow .16s; }
.fort-paper .paper-card:hover{ transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--accent,var(--pp-power)) 60%,var(--pp-line));
  box-shadow:0 16px 40px -22px var(--accent,var(--pp-power)); }
.fort-paper .paper-card::before{ content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--accent,var(--pp-power)); }
.fort-paper .paper-card.feature{ padding:34px 30px 28px;
  background:linear-gradient(150deg,color-mix(in srgb,var(--accent,var(--pp-power)) 9%,var(--pp-card)),var(--pp-card)); }
.fort-paper .row-top{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.fort-paper .badge{ font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 11px; border-radius:999px; color:var(--accent,var(--pp-power));
  background:color-mix(in srgb,var(--accent,var(--pp-power)) 16%,transparent); }
.fort-paper .meta{ font-size:.8rem; color:var(--pp-dim); letter-spacing:.02em; }
.fort-paper .paper-card h2{ margin:0 0 .3em; line-height:1.12; font-size:clamp(1.4rem,3.6vw,2rem); }
.fort-paper .paper-card.feature h2{ font-size:clamp(1.7rem,4.4vw,2.5rem); }
.fort-paper .paper-card .desc{ color:var(--pp-dim); line-height:1.6; margin:0 0 20px; max-width:640px; }
.fort-paper .actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.fort-paper .btn{ display:inline-flex; align-items:center; gap:7px; font-size:.9rem; font-weight:700; text-decoration:none;
  padding:9px 16px; border-radius:10px; transition:transform .12s; }
.fort-paper .btn.read{ background:var(--accent,var(--pp-power)); color:#14100a; }
.fort-paper .btn.read:hover{ transform:translateX(2px); }
.fort-paper .btn.pdf{ background:transparent; color:var(--pp-ink); border:1.5px solid var(--pp-line); }
.fort-paper .btn.pdf:hover{ border-color:var(--accent,var(--pp-power)); }
.fort-paper .btn.soon{ color:var(--pp-dim); border:1px dashed var(--pp-line); cursor:default; }
.fort-paper footer.foot{ margin-top:64px; padding-top:24px; border-top:1px solid var(--pp-line);
  color:var(--pp-dim); font-size:.85rem; text-align:center; line-height:1.7; }
.fort-paper footer.foot a{ color:var(--pp-water); text-decoration:none; }

/* --- article page --- */
.fort-paper .paper-wrap{ max-width:780px; margin:0 auto; padding:48px 22px 80px; }
.fort-paper .paper-hero{ text-align:center; margin-bottom:34px; }
.fort-paper .paper-hero .kick{ font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fort-accent); font-weight:700; }
.fort-paper .paper-hero h1{ font-size:clamp(1.9rem,5vw,2.8rem); line-height:1.12; margin:.4em 0 .3em; }
.fort-paper .paper-hero .sub{ color:var(--fort-dim); max-width:620px; margin:0 auto 22px; }
.fort-paper .dl-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.fort-paper .dl-btn{ display:inline-block; padding:12px 22px; border-radius:12px; font-weight:700; text-decoration:none;
  background:var(--fort-accent); color:#14100a; }
.fort-paper .dl-btn.ghost{ background:transparent; color:inherit; border:1.5px solid var(--fort-accent); }
.fort-paper .toc{ background:var(--fort-card); border:1px solid var(--fort-line); border-radius:14px;
  padding:18px 22px; margin:0 0 40px; font-size:.9rem; }
.fort-paper .toc-h{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--fort-accent); font-weight:700; margin:0 0 10px; }
.fort-paper .toc ol{ margin:0; padding:0; list-style:none; columns:2; column-gap:28px; }
.fort-paper .toc li{ break-inside:avoid; margin:.28em 0; }
.fort-paper .toc a{ color:var(--fort-soft); text-decoration:none; }
.fort-paper .toc a:hover{ color:var(--fort-link); text-decoration:underline; }
.fort-paper article.paper{ line-height:1.68; }
.fort-paper article.paper h1{ font-size:clamp(1.4rem,3.4vw,1.85rem); line-height:1.22; margin:.2em 0 .15em; }
.fort-paper article.paper .paper-meta{ color:var(--fort-dim); font-size:.85rem; margin:.2em 0 1.4em; }
.fort-paper article.paper h2{ margin-top:2.2em; padding-bottom:.25em; border-bottom:1px solid var(--fort-line); scroll-margin-top:20px; }
.fort-paper article.paper h3{ margin-top:1.6em; scroll-margin-top:20px; }
.fort-paper article.paper p{ margin:.8em 0; }
.fort-paper article.paper ul, .fort-paper article.paper ol{ margin:.7em 0; padding-left:1.4em; }
.fort-paper article.paper li{ margin:.4em 0; }
.fort-paper article.paper blockquote{ margin:1.2em 0; padding:2px 18px; border-left:3px solid var(--fort-accent); color:var(--fort-soft); font-style:italic; }
.fort-paper .table-wrap{ overflow-x:auto; margin:1.1em 0; -webkit-overflow-scrolling:touch; }
.fort-paper article.paper table{ border-collapse:collapse; width:100%; font-size:.86em; display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.fort-paper article.paper th, .fort-paper article.paper td{ border:1px solid var(--fort-line); padding:7px 10px; text-align:left; vertical-align:top; }
.fort-paper article.paper thead th{ background:var(--fort-card); color:var(--fort-ink); }
.fort-paper article.paper pre{ background:var(--fort-card); border:1px solid var(--fort-line); border-radius:10px; padding:14px; overflow-x:auto; font-size:.82em; line-height:1.5; }
.fort-paper article.paper code{ font-size:.9em; }
.fort-paper article.paper h2 code, .fort-paper article.paper h3 code{ font-size:.82em; }
.fort-paper article.paper hr{ border:none; border-top:1px solid var(--fort-line); margin:2.2em 0; }
.fort-paper .swatch{ display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:5px; vertical-align:middle; border:1px solid rgba(255,255,255,.15); }
.fort-paper .callout{ background:color-mix(in srgb,var(--fort-accent) 8%,var(--fort-card));
  border:1px solid color-mix(in srgb,var(--fort-accent) 35%,var(--fort-line)); border-radius:12px; padding:4px 20px; margin:1.4em 0; }
@media (max-width:560px){ .fort-paper .toc ol{ columns:1; } }

/* --- flow diagram (used by some article papers) --- */
.fort-paper .flowfig{ margin:1.4em 0; }
.fort-paper .flowfig figcaption{ color:var(--fort-dim); font-size:.82rem; margin-top:12px; line-height:1.5; }
.fort-paper .flowdiagram{ display:flex; flex-direction:column; align-items:stretch; gap:6px;
  background:#0a0d15; border:1px solid var(--fort-line); border-radius:16px; padding:20px 18px; }
.fort-paper .fl-band{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fort-accent); font-weight:700; margin:14px 0 4px; text-align:center; }
.fort-paper .fl-band:first-child{ margin-top:0; }
.fort-paper .fl-box{ background:var(--fort-card); border:1px solid var(--fort-border); border-radius:10px; padding:10px 14px; text-align:center; font-weight:700; font-size:.9rem; }
.fort-paper .fl-box span{ display:block; font-weight:400; font-size:.78rem; color:var(--fort-soft); margin-top:3px; line-height:1.4; }
.fort-paper .fl-box em{ font-style:normal; color:var(--fort-faint); font-weight:400; }
.fort-paper .fl-box.fl-key{ border-color:var(--fort-accent); }
.fort-paper .fl-arrow{ text-align:center; color:var(--fort-faint); font-size:1rem; line-height:1; }
.fort-paper .fl-arrow em{ font-style:normal; font-size:.76rem; }
.fort-paper .fl-loop{ border:1.5px dashed var(--fort-accent); border-radius:14px; padding:12px 12px 8px; display:flex; flex-direction:column; gap:6px; margin:4px 0; }
.fort-paper .fl-loop-title{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fort-accent); font-weight:700; text-align:center; margin-bottom:2px; }
.fort-paper .fl-diamond{ align-self:center; background:rgba(255,180,84,.10); border:1px solid var(--fort-accent); border-radius:999px; padding:8px 20px; font-weight:700; font-size:.86rem; }
.fort-paper .fl-loopback{ text-align:center; color:var(--fort-accent); font-size:.78rem; font-weight:600; margin-top:2px; }
.fort-paper .fl-split{ display:flex; gap:10px; flex-wrap:wrap; }
.fort-paper .fl-split .fl-box{ flex:1 1 220px; }

/* --- PDF / print: papers print on a clean light theme (web page stays dark) --- */
@media print {
  .fort-paper{
    --fort-bg:#ffffff; --fort-surface:#f4f6fa; --fort-card:#f4f6fa; --fort-line:#d3d9e4;
    --fort-ink:#14171f; --fort-soft:#39404f; --fort-dim:#5a6274; --fort-faint:#6b7280;
    --fort-link:#12489f; --fort-accent:#b26a00; --fort-accent-ink:#b26a00; --fort-border:#d3d9e4;
  }
  .fort-paper *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .fort-paper, .fort-paper body{ background:#ffffff; color:#14171f; }
  .fort-paper .dl-row{ display:none; }
  .fort-paper article.paper h2, .fort-paper article.paper h3{ break-after:avoid; }
  .fort-paper .toc, .fort-paper .table-wrap, .fort-paper blockquote{ break-inside:avoid; }
  .fort-paper a{ color:#12489f; text-decoration:none; }
}