/* sentinel.army — civic security · open intelligence · accountable record
   Aesthetic: a forensic field-station ledger. Slate paper, signal-amber accent,
   monospace rubrics over a grotesque/serif body. Distinct from the warm-serif,
   mono-spec-sheet and gradient-band exemplars in the constellation. */

:root{
  color-scheme: light dark;
  --paper:#f4f3ee;        /* cool bone */
  --panel:#eceae2;
  --ink:#191b1c;          /* near-black slate */
  --muted:#5f6164;
  --faint:#8a8c8e;
  --rule:#d7d5cb;
  --rule-strong:#c2c0b4;
  --signal:#b8541a;       /* civic amber — alert, not military */
  --signal-ink:#7e3a12;
  --dark:#121516;         /* the ledger band */
  --dark-ink:#eef0ef;
  --dark-muted:#9aa0a1;
  --dark-rule:#2a2f30;
  --measure:64rem;
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --grot: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#121415;
    --panel:#171a1b;
    --ink:#eceeec;
    --muted:#a3a7a7;
    --faint:#777b7b;
    --rule:#262a2b;
    --rule-strong:#33393a;
    --signal:#e08a4e;
    --signal-ink:#e8a06c;
    --dark:#0c0e0f;
    --dark-ink:#eceeec;
    --dark-muted:#9aa0a1;
    --dark-rule:#272c2d;
  }
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:clamp(17px,1.05vw + 14px,19px); line-height:1.62;
  font-synthesis:none; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
.wrap, main, .masthead, .colophon{ }

/* ── Page frame & shared rhythm ─────────────────────────── */
.masthead, main > section, .colophon{
  padding-inline: max(clamp(1.25rem,5vw,4.5rem), env(safe-area-inset-left));
  padding-right: max(clamp(1.25rem,5vw,4.5rem), env(safe-area-inset-right));
}
.masthead > *, main > section > *, .colophon > *{ max-width:var(--measure); margin-inline:auto; }
main > section{ padding-block: clamp(3.5rem,8vw,7rem); }

a{ color:inherit; }
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:var(--paper); padding:.6rem 1rem;
  font-family:var(--mono); font-size:.85rem; border-radius:0 0 .35rem 0;
}
.skip-link:focus{ left:0; }
:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; border-radius:1px; }

/* ── Rubric / kicker typography ─────────────────────────── */
.rubric, .kicker, .col-h, .status, .mast-nav a, .step-n, .entry-time, .mark-k, .entry-hash{
  font-family:var(--mono);
}
.rubric{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--signal-ink); margin:0 0 1.4rem; display:flex; align-items:center; gap:.7rem;
}
.rubric.on-dark{ color:var(--signal); }
.rubric::after{ content:""; flex:1; height:1px; background:var(--rule-strong); }
.rubric.on-dark::after{ background:var(--dark-rule); }

/* ── Masthead ───────────────────────────────────────────── */
.masthead{ padding-top:clamp(1.4rem,3vw,2.2rem); padding-bottom:1rem; border-bottom:1px solid var(--rule); }
.mast-inner{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:1rem 2rem;
}
.wordmark{
  font-family:var(--grot); font-weight:680; font-size:clamp(1.4rem,3.6vw,2rem);
  letter-spacing:-0.02em; margin:0; line-height:1;
}
.wordmark .dot{ color:var(--signal); }
.mast-nav{ display:flex; gap:clamp(.9rem,2.5vw,1.8rem); }
.mast-nav a{
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  color:var(--muted); padding-bottom:.2rem; border-bottom:1px solid transparent;
}
.mast-nav a:hover{ color:var(--ink); border-bottom-color:var(--signal); }
.status{
  font-size:.7rem; letter-spacing:.08em; color:var(--faint); margin:.9rem 0 0;
  display:flex; align-items:center; gap:.55rem;
}
.dot-live{
  width:.5rem; height:.5rem; border-radius:50%; background:var(--signal); flex:none;
  box-shadow:0 0 0 0 color-mix(in srgb, var(--signal) 55%, transparent);
  animation:pulse 2.6s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--signal) 55%, transparent); }
  70%{ box-shadow:0 0 0 .55rem transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}

/* ── Headings ───────────────────────────────────────────── */
h2{
  font-family:var(--serif); font-weight:600; line-height:1.12;
  font-size:clamp(1.7rem,4.4vw,2.9rem); letter-spacing:-0.01em; margin:0 0 1.6rem;
  max-width:24ch;
}
h3{
  font-family:var(--grot); font-weight:640; font-size:1.06rem; letter-spacing:-0.005em;
  margin:0 0 .55rem;
}

/* ── Hero ───────────────────────────────────────────────── */
.hero{
  display:grid; gap:clamp(2rem,5vw,4rem); align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  border-bottom:1px solid var(--rule);
}
.hero-grid{ order:2; display:flex; justify-content:center; }
.hero-text{ order:1; }
.watch{ width:min(100%,22rem); height:auto; color:var(--ink); }
@media (prefers-reduced-motion: no-preference){
  .watch{ animation:breathe 7s ease-in-out infinite; }
}
@keyframes breathe{ 0%,100%{ opacity:.92; } 50%{ opacity:1; } }
.kicker{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--signal-ink);
  margin:0 0 1.4rem;
}
.lede{
  font-size:clamp(1.4rem,3vw,2.05rem); line-height:1.28; letter-spacing:-0.01em;
  margin:0 0 1.4rem; font-weight:500;
}
.lede strong{ color:var(--signal-ink); font-weight:600; }
.sub{ color:var(--muted); margin:0; max-width:42ch; }

/* ── Thesis ─────────────────────────────────────────────── */
.thesis-grid{
  display:grid; gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); margin-top:1rem;
}
.thesis-grid article{ border-top:2px solid var(--signal); padding-top:1rem; }
.thesis-grid p{ color:var(--muted); margin:0; }

/* ── Ledger band (full-bleed, dark) ─────────────────────── */
.ledger-band{
  background:var(--dark); color:var(--dark-ink);
  max-width:none !important; margin-inline:0 !important;
  position:relative;
  background-image:
    linear-gradient(180deg, color-mix(in srgb,var(--signal) 10%, transparent), transparent 30%),
    repeating-linear-gradient(0deg, transparent, transparent 39px, var(--dark-rule) 39px, var(--dark-rule) 40px);
}
.ledger-band > .band-inner{ max-width:var(--measure); margin-inline:auto; }
.ledger-band h2{ color:var(--dark-ink); }
.band-lede{ color:var(--dark-muted); max-width:50ch; margin:0 0 2.4rem; }
.band-foot{ font-family:var(--mono); font-size:.7rem; color:var(--faint); margin:1.4rem 0 0; letter-spacing:.04em; }

.ledger{ list-style:none; margin:0; padding:0; border-top:1px solid var(--dark-rule); }
.ledger li{
  display:grid; grid-template-columns:max-content 1fr; gap:1.4rem; align-items:start;
  padding:1.1rem 0; border-bottom:1px solid var(--dark-rule);
}
.entry-hash{
  font-size:.8rem; color:var(--signal); letter-spacing:.04em; padding-top:.15rem;
  white-space:nowrap;
}
.entry-body{ display:block; }
.entry-time{ display:block; font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; color:var(--faint); margin-bottom:.3rem; }
.entry-claim{ display:block; color:var(--dark-ink); }

/* ── Method steps ───────────────────────────────────────── */
.steps{
  list-style:none; margin:1rem 0 0; padding:0;
  display:grid; gap:1px; background:var(--rule);
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  border:1px solid var(--rule);
}
.steps li{ background:var(--paper); padding:clamp(1.4rem,2.6vw,2rem); }
.step-n{
  font-size:.95rem; color:var(--signal); margin:0 0 1.1rem; letter-spacing:.1em;
  text-transform:uppercase;
}
.steps p:last-child{ color:var(--muted); margin:0; }

/* ── Field ──────────────────────────────────────────────── */
.field-grid{ display:grid; gap:clamp(2rem,5vw,3.5rem); grid-template-columns:1.3fr 1fr; align-items:center; }
.field-text p{ color:var(--muted); }
.field-text p:first-of-type{ color:var(--ink); }
.field-marks{ list-style:none; margin:1.8rem 0 0; padding:0; border-top:1px solid var(--rule); }
.field-marks li{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:.75rem 0; border-bottom:1px solid var(--rule);
}
.mark-k{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.mark-v{ color:var(--ink); }
.field-card{
  background:var(--panel); border:1px solid var(--rule); padding:clamp(1.5rem,3vw,2.5rem);
  color:var(--ink); border-radius:2px;
}
.field-card svg{ width:100%; height:auto; display:block; }

/* ── Who ────────────────────────────────────────────────── */
.who-grid{
  display:grid; gap:clamp(1.5rem,3vw,2.4rem); margin-top:1rem;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
}
.who-grid article{ padding-left:1.1rem; border-left:2px solid var(--rule-strong); }
.who-grid article:hover{ border-left-color:var(--signal); }
.who-grid p{ color:var(--muted); margin:0; }

/* ── Standing quote ─────────────────────────────────────── */
.standing{ border-top:1px solid var(--rule); }
.standing blockquote{
  margin:0; font-family:var(--serif); font-style:italic;
  font-size:clamp(1.5rem,3.6vw,2.4rem); line-height:1.3; letter-spacing:-0.01em;
  max-width:30ch;
}
.standing blockquote::before{ content:"“"; color:var(--signal); }
.standing blockquote::after{ content:"”"; color:var(--signal); }

/* ── Colophon ───────────────────────────────────────────── */
.colophon{ background:var(--panel); border-top:1px solid var(--rule); padding-block:clamp(2.5rem,5vw,4rem); }
.col-inner{
  display:grid; gap:clamp(1.5rem,4vw,3rem);
  grid-template-columns:1.6fr 1fr 1fr;
}
.wordmark-sm{ font-family:var(--grot); font-weight:680; font-size:1.25rem; letter-spacing:-0.02em; margin:0 0 .8rem; }
.wordmark-sm .dot{ color:var(--signal); }
.col-note{ color:var(--muted); font-size:.92rem; margin:0; max-width:38ch; }
.col-h{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin:0 0 1rem; }
.col-links ul{ list-style:none; margin:0; padding:0; }
.col-links li{ margin-bottom:.55rem; }
.col-links a{ text-decoration:none; color:var(--ink); font-size:.92rem; }
.col-links a span{ color:var(--faint); font-size:.82rem; }
.col-links a:hover{ color:var(--signal-ink); }
.col-links a:hover span{ color:var(--muted); }
.col-base{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.05em; color:var(--faint);
  margin:clamp(2rem,4vw,3rem) 0 0; padding-top:1.4rem; border-top:1px solid var(--rule);
  max-width:var(--measure); margin-inline:auto;
}

/* ── Reveals (scroll-driven, visible by default) ────────── */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .thesis-grid article, .steps li, .who-grid article, .field-text, .field-card, .ledger li{
      animation:rise linear both; animation-timeline:view();
      animation-range:entry 0% cover 26%;
    }
    @keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
  }
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:860px){
  .hero{ grid-template-columns:1fr; }
  .hero-grid{ order:1; }
  .hero-text{ order:2; }
  .watch{ width:min(70%,16rem); }
  .field-grid{ grid-template-columns:1fr; }
  .col-inner{ grid-template-columns:1fr 1fr; }
  .col-brand{ grid-column:1 / -1; }
}
@media (max-width:560px){
  .mast-nav{ display:none; }
  .col-inner{ grid-template-columns:1fr; }
  .ledger li{ grid-template-columns:1fr; gap:.4rem; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}