/* nacre.work — the site's own stylesheet.
   Colors, sizes, and the three faces come from /brand/, which is a mirror of
   the private brand repository. Nothing here invents a hex value: every color
   below resolves to a token, and a change to the palette lands there first.

   What this file does add is the two things a static site needs and the design
   system deliberately leaves to the application:

   1. A prefers-color-scheme mapping. tokens.css exposes [data-theme] only,
      which assumes something sets it. There is no JavaScript on this page and
      there will not be one just to pick a theme, so the media query drives it —
      and the [data-theme] blocks stay, so a toggle can be added later without
      touching anything else.

   2. --n-s1 to --n-s6: the strata as this page uses them. The dense row on
      light because the lower primary strata sit at 2.1-2.6 against pearl, under
      the 3:1 floor for graphical objects; the ink row on dark because the
      darkest stratum nearly vanishes there. Components read these six and never
      reach for a row directly, so the rule is applied in one place instead of
      remembered at every use. */

/* ─── Theme, mapped from the brand tokens ─────────────────────────────── */
:root{
  --n-bg:var(--n-pearl-100);
  --n-surface:var(--n-pearl-000);
  --n-surface-sunk:var(--n-pearl-050);
  --n-border-color:var(--n-pearl-200);
  --n-rule:var(--n-pearl-300);
  --n-text:var(--n-ink-900);
  --n-text-muted:var(--n-ink-500);
  /* tokens.css calls --n-ink-300 "muted text, captions". On pearl it lands at
     3.16:1, which clears the 3:1 floor for graphical objects but not the 4.5:1
     one for text — and every use of it here is 11px type: eyebrows, scores,
     counts. Darkened toward ink-500 until it does. On ink it already reads at
     5.5:1 and is left alone. */
  --n-text-faint:color-mix(in srgb,var(--n-ink-300) 55%,var(--n-ink-500));
  --n-link:var(--n-strata-2);
  --n-link-hover:var(--n-strata-3-dense);
  --n-s1:var(--n-strata-1-dense); --n-s2:var(--n-strata-2-dense); --n-s3:var(--n-strata-3-dense);
  --n-s4:var(--n-strata-4-dense); --n-s5:var(--n-strata-5-dense); --n-s6:var(--n-strata-6-dense);
}

@media (prefers-color-scheme:dark){
  :root{
    --n-bg:var(--n-ink-900);
    --n-surface:var(--n-ink-800);
    --n-surface-sunk:var(--n-ink-900);
    --n-border-color:var(--n-ink-700);
    --n-rule:color-mix(in srgb,var(--n-ink-700) 62%,var(--n-ink-500));
    --n-text:var(--n-pearl-100);
    --n-text-muted:color-mix(in srgb,var(--n-ink-300) 78%,var(--n-pearl-100));
    --n-text-faint:var(--n-ink-300);
    --n-link:var(--n-strata-3-on-dark);
    --n-link-hover:var(--n-strata-4-on-dark);
    --n-s1:var(--n-strata-1-on-dark); --n-s2:var(--n-strata-2-on-dark); --n-s3:var(--n-strata-3-on-dark);
    --n-s4:var(--n-strata-4-on-dark); --n-s5:var(--n-strata-5-on-dark); --n-s6:var(--n-strata-6-on-dark);
    /* read and admin shift with the ramp; deny does not, and is not used here. */
    --n-read:var(--n-strata-2-on-dark); --n-admin:var(--n-strata-5-on-dark);
  }
}

/* Kept so a theme toggle can be added later without touching a component. */
:root[data-theme="dark"]{
  --n-bg:var(--n-ink-900); --n-surface:var(--n-ink-800); --n-surface-sunk:var(--n-ink-900);
  --n-border-color:var(--n-ink-700);
  --n-rule:color-mix(in srgb,var(--n-ink-700) 62%,var(--n-ink-500));
  --n-text:var(--n-pearl-100);
  --n-text-muted:color-mix(in srgb,var(--n-ink-300) 78%,var(--n-pearl-100));
  --n-text-faint:var(--n-ink-300);
  --n-link:var(--n-strata-3-on-dark); --n-link-hover:var(--n-strata-4-on-dark);
  --n-s1:var(--n-strata-1-on-dark); --n-s2:var(--n-strata-2-on-dark); --n-s3:var(--n-strata-3-on-dark);
  --n-s4:var(--n-strata-4-on-dark); --n-s5:var(--n-strata-5-on-dark); --n-s6:var(--n-strata-6-on-dark);
  --n-read:var(--n-strata-2-on-dark); --n-admin:var(--n-strata-5-on-dark);
}
:root[data-theme="light"]{
  --n-bg:var(--n-pearl-100); --n-surface:var(--n-pearl-000); --n-surface-sunk:var(--n-pearl-050);
  --n-border-color:var(--n-pearl-200); --n-rule:var(--n-pearl-300);
  --n-text:var(--n-ink-900); --n-text-muted:var(--n-ink-500);
  --n-text-faint:color-mix(in srgb,var(--n-ink-300) 55%,var(--n-ink-500));
  --n-link:var(--n-strata-2); --n-link-hover:var(--n-strata-3-dense);
  --n-s1:var(--n-strata-1-dense); --n-s2:var(--n-strata-2-dense); --n-s3:var(--n-strata-3-dense);
  --n-s4:var(--n-strata-4-dense); --n-s5:var(--n-strata-5-dense); --n-s6:var(--n-strata-6-dense);
  --n-read:var(--n-strata-3-dense); --n-admin:var(--n-strata-6-dense);
}

/* ─── Components ──────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--n-bg);color:var(--n-text);
  font-family:var(--n-font-body);font-size:var(--n-text-md);
  line-height:var(--n-leading-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
:focus-visible{outline:2px solid var(--n-s3);outline-offset:2px;border-radius:2px}
a{color:var(--n-link);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--n-link) 35%,transparent)}
a:hover{color:var(--n-link-hover);border-bottom-color:currentColor}

.wrap{max-width:1080px;margin:0 auto;padding:0 var(--n-space-5)}

h1,h2,h3{font-family:var(--n-font-display);letter-spacing:var(--n-track-display);
  line-height:var(--n-leading-tight);margin:0;text-wrap:balance;font-weight:700}
p{margin:0}

.label{
  font-family:var(--n-font-mono);font-size:var(--n-text-2xs);
  letter-spacing:var(--n-track-label);text-transform:uppercase;
  color:var(--n-text-faint);
}

/* ─── The strata rule: the mark's structure as a horizontal element ─── */
.strata{display:flex;height:var(--n-lamella);width:100%;overflow:hidden}
.strata i{flex:1;display:block}
.strata i:nth-child(1){background:var(--n-s1)}
.strata i:nth-child(2){background:var(--n-s2)}
.strata i:nth-child(3){background:var(--n-s3)}
.strata i:nth-child(4){background:var(--n-s4)}
.strata i:nth-child(5){background:var(--n-s5)}
.strata i:nth-child(6){background:var(--n-s6)}

/* ─── Header ─── */
.masthead{border-bottom:var(--n-border) solid var(--n-border-color);
  background:color-mix(in srgb,var(--n-bg) 85%,transparent);
  backdrop-filter:blur(8px);position:sticky;top:0;z-index:20}
.masthead .wrap{display:flex;align-items:center;gap:var(--n-space-5);
  justify-content:space-between;padding-top:var(--n-space-3);padding-bottom:var(--n-space-3)}
.brand{display:flex;align-items:center;gap:10px;border:0}
.brand:hover{border:0}
.brand svg{display:block;width:26px;height:26px}
.brand span{font-family:var(--n-font-display);font-weight:700;font-size:var(--n-text-lg);
  letter-spacing:var(--n-track-display);color:var(--n-text)}
.masthead nav{display:flex;gap:var(--n-space-5);align-items:center}
.masthead nav a{font-size:var(--n-text-sm);color:var(--n-text-muted);border:0}
.masthead nav a:hover{color:var(--n-text)}
/* Below 620px the four links push the page 21px sideways. The three in-page
   anchors are a convenience for scanning a long page on a wide screen; on a
   phone you scroll anyway. The link that leaves the site stays. */
@media (max-width:620px){
  .masthead nav a[href^="#"]{display:none}
  .masthead .wrap{gap:var(--n-space-3)}
}

/* ─── Hero ─── */
.hero{padding:var(--n-space-8) 0 var(--n-space-7)}
.hero-grid{display:grid;gap:var(--n-space-7);grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.hero-grid{grid-template-columns:minmax(0,0.86fr) minmax(0,1fr);gap:var(--n-space-8);align-items:start}}
.hero h1{font-size:clamp(38px,7vw,var(--n-text-4xl));margin-bottom:var(--n-space-4)}
.hero .sub{font-size:var(--n-text-lg);color:var(--n-text-muted);max-width:34ch}
.hero .eyebrow{margin-bottom:var(--n-space-4)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--n-space-3);margin-top:var(--n-space-6)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;
  border-radius:var(--n-radius);font-size:var(--n-text-sm);font-weight:700;
  border:var(--n-border) solid transparent;cursor:pointer;
  transition:background var(--n-motion-fast) var(--n-ease),color var(--n-motion-fast) var(--n-ease)}
.btn-primary{background:var(--n-s1);color:var(--n-pearl-050);border-color:var(--n-s1)}
.btn-primary:hover{background:var(--n-s2);border-color:var(--n-s2);color:var(--n-pearl-050)}
.btn-ghost{background:transparent;color:var(--n-text);border-color:var(--n-border-color)}
.btn-ghost:hover{border-color:var(--n-s3);color:var(--n-text)}
a.btn{border-bottom-width:1px}

.metaphor{margin-top:var(--n-space-7);padding-top:var(--n-space-5);
  border-top:var(--n-border) solid var(--n-border-color);
  font-size:var(--n-text-sm);color:var(--n-text-muted);max-width:44ch}
.metaphor b{color:var(--n-text);font-weight:700}

/* ─── The demo: a cross-section ─── */
.scope{border:var(--n-border) solid var(--n-border-color);border-radius:var(--n-radius);
  background:var(--n-surface);overflow:hidden}
.scope-head{padding:var(--n-space-4) var(--n-space-5);
  border-bottom:var(--n-border) solid var(--n-border-color);
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--n-space-4);flex-wrap:wrap}
.scope-body{padding:var(--n-space-5)}
.scope-title{font-size:var(--n-text-lg);margin-top:6px}
/* A short rule, not a full-width one: at this size the six strata read as the
   mark's cross-section rather than as a divider. */
.strata-tick{width:34px}
.query{font-family:var(--n-font-mono);font-size:var(--n-text-xs);
  background:var(--n-surface-sunk);border:var(--n-border) solid var(--n-border-color);
  border-radius:var(--n-radius);padding:10px 12px;color:var(--n-text);
  display:flex;gap:10px;align-items:center;overflow-x:auto;white-space:nowrap}
.query .prompt{color:var(--n-text-faint);flex:none}

fieldset{border:0;padding:0;margin:var(--n-space-5) 0 0;min-width:0}
legend{padding:0}
.viewers{display:flex;flex-wrap:wrap;gap:var(--n-space-2);margin-top:var(--n-space-3)}
.viewer{position:relative}
.viewer input{position:absolute;opacity:0;width:0;height:0}
.viewer span{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  padding:7px 12px;border-radius:var(--n-radius);
  border:var(--n-border) solid var(--n-border-color);
  font-size:var(--n-text-xs);color:var(--n-text-muted);background:var(--n-surface);
  transition:border-color var(--n-motion-fast) var(--n-ease),color var(--n-motion-fast) var(--n-ease)}
.viewer span::before{content:"";width:7px;height:7px;border-radius:var(--n-radius-pill);
  background:currentColor;opacity:.5;flex:none}
.viewer:hover span{border-color:var(--n-rule);color:var(--n-text)}
.viewer input:checked + span{border-color:var(--n-s3);color:var(--n-text);
  background:color-mix(in srgb,var(--n-s3) 7%,var(--n-surface))}
.viewer input:checked + span::before{opacity:1;background:var(--n-s3)}
.viewer input:focus-visible + span{outline:2px solid var(--n-s3);outline-offset:2px}

.grant-line{display:flex;align-items:center;gap:var(--n-space-3);flex-wrap:wrap;
  margin-top:var(--n-space-4);padding-top:var(--n-space-4);
  border-top:var(--n-border) solid var(--n-border-color);
  font-size:var(--n-text-xs);color:var(--n-text-muted)}
.chip{display:inline-flex;align-items:center;gap:6px;
  font-family:var(--n-font-mono);font-size:var(--n-text-2xs);
  letter-spacing:.04em;padding:3px 9px;border-radius:var(--n-radius-pill);
  border:var(--n-border) solid currentColor;background:transparent}
.chip-read{color:var(--n-read)}
.chip-none{color:var(--n-text-faint)}
.chip-admin{color:var(--n-admin)}

.results{margin-top:var(--n-space-5);display:flex;flex-direction:column;gap:var(--n-space-2)}
.result{display:grid;grid-template-columns:var(--n-lamella) minmax(0,1fr);
  border:var(--n-border) solid var(--n-border-color);border-radius:var(--n-radius);
  background:var(--n-surface-sunk);overflow:hidden;
  animation:settle var(--n-motion-base) var(--n-ease) both;animation-delay:var(--stagger,0ms)}
@keyframes settle{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.result .seam{background:var(--n-s3)}
.result[data-layer="salaries"] .seam{background:var(--n-s5)}
.result[data-layer="contracts"] .seam{background:var(--n-s6)}
.result-in{padding:11px 14px;display:flex;flex-direction:column;gap:5px;min-width:0}
.result-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.result-layer{font-family:var(--n-font-mono);font-size:var(--n-text-2xs);
  letter-spacing:var(--n-track-label);text-transform:uppercase;color:var(--n-s3)}
.result[data-layer="salaries"] .result-layer{color:var(--n-s5)}
.result[data-layer="contracts"] .result-layer{color:var(--n-s6)}
.result-score{font-family:var(--n-font-mono);font-size:var(--n-text-2xs);
  color:var(--n-text-faint);font-variant-numeric:tabular-nums}
.result-text{font-size:var(--n-text-sm);color:var(--n-text);line-height:1.45}
.empty{border:var(--n-border) dashed var(--n-border-color);border-radius:var(--n-radius);
  padding:var(--n-space-5);text-align:center;color:var(--n-text-muted);font-size:var(--n-text-sm)}
.empty code{font-family:var(--n-font-mono);font-size:var(--n-text-xs);color:var(--n-text)}
.count{font-family:var(--n-font-mono);font-size:var(--n-text-2xs);
  letter-spacing:var(--n-track-label);text-transform:uppercase;color:var(--n-text-faint);
  font-variant-numeric:tabular-nums}

/* ─── Sections ─── */
/* Direct children of main only. `.scope` is a <section> too — it is a real
   region with a heading — and a bare `section` selector was giving the demo
   card 72px of dead space below its own padding. A type selector fighting a
   class selector over spacing is the quiet kind of layout bug. */
main > section{padding:var(--n-space-8) 0}
.section-head{max-width:56ch;margin-bottom:var(--n-space-6)}
.section-head h2{font-size:var(--n-text-2xl);margin:var(--n-space-3) 0 var(--n-space-3)}
.section-head p{color:var(--n-text-muted)}
.divider{height:var(--n-border);background:var(--n-border-color);border:0;margin:0}

/* ─── Invariants ─── */
.rules{display:grid;gap:0;border:var(--n-border) solid var(--n-border-color);
  border-radius:var(--n-radius);overflow:hidden;background:var(--n-surface);counter-reset:rule}
.rule{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--n-space-4);
  padding:var(--n-space-4) var(--n-space-5);
  border-bottom:var(--n-border) solid var(--n-border-color)}
.rule:last-child{border-bottom:0}
.rule-n{font-family:var(--n-font-mono);font-size:var(--n-text-xs);
  color:var(--n-text-faint);padding-top:2px;font-variant-numeric:tabular-nums}
.rule b{display:block;font-weight:700;font-size:var(--n-text-md);margin-bottom:2px}
.rule span{color:var(--n-text-muted);font-size:var(--n-text-sm)}
@media (min-width:760px){.rules{grid-template-columns:1fr 1fr}
  .rule:nth-child(odd){border-right:var(--n-border) solid var(--n-border-color)}
  .rule:nth-last-child(2){border-bottom:0}}

/* ─── Revocation timeline ─── */
.timeline{display:grid;gap:0;position:relative;margin-top:var(--n-space-5)}
.step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--n-space-4);
  padding:0 0 var(--n-space-5) 0}
.step:last-child{padding-bottom:0}
.tick{width:var(--n-lamella);background:var(--n-border-color);position:relative;border-radius:1px}
.step:first-child .tick{background:linear-gradient(to bottom,transparent 0 10px,var(--n-border-color) 10px)}
.step:last-child .tick{background:linear-gradient(to bottom,var(--n-border-color) 0 10px,transparent 10px)}
.tick::after{content:"";position:absolute;left:50%;top:7px;transform:translateX(-50%);
  width:7px;height:7px;border-radius:var(--n-radius-pill);background:var(--n-s3);
  box-shadow:0 0 0 3px var(--n-bg)}
.step-in{min-width:0;padding-top:0}
.step-when{font-family:var(--n-font-mono);font-size:var(--n-text-2xs);
  letter-spacing:var(--n-track-label);text-transform:uppercase;color:var(--n-text-faint)}
.step b{display:block;font-size:var(--n-text-md);margin:3px 0 3px}
.step p{color:var(--n-text-muted);font-size:var(--n-text-sm);max-width:62ch}
.step code{font-family:var(--n-font-mono);font-size:.92em;color:var(--n-text)}

/* ─── Surfaces ─── */
.surfaces{display:grid;gap:var(--n-space-5)}
@media (min-width:860px){.surfaces{grid-template-columns:1fr 1fr}}
.surface{border:var(--n-border) solid var(--n-border-color);border-radius:var(--n-radius);
  background:var(--n-surface);display:flex;flex-direction:column;overflow:hidden}
.surface-head{padding:var(--n-space-4) var(--n-space-5) var(--n-space-3)}
.surface-head h3{font-size:var(--n-text-lg);margin:var(--n-space-2) 0 4px}
.surface-head p{font-size:var(--n-text-sm);color:var(--n-text-muted)}
pre{margin:0;padding:var(--n-space-4) var(--n-space-5);background:var(--n-surface-sunk);
  border-top:var(--n-border) solid var(--n-border-color);
  overflow-x:auto;font-family:var(--n-font-mono);font-size:var(--n-text-xs);
  line-height:1.65;flex:1;color:var(--n-text)}
code{font-family:var(--n-font-mono)}
.tk{color:var(--n-text-faint)}
.tk-s{color:var(--n-s3)}
.tk-k{color:var(--n-s5)}

/* ─── Deploy strip ─── */
.deploy{display:grid;gap:var(--n-space-5)}
@media (min-width:760px){.deploy{grid-template-columns:repeat(3,1fr)}}
.deploy-spaced{margin-bottom:var(--n-space-7)}
.fact b{display:block;font-family:var(--n-font-display);font-size:var(--n-text-xl);
  letter-spacing:var(--n-track-display);margin:var(--n-space-2) 0 var(--n-space-2)}
.fact p{font-size:var(--n-text-sm);color:var(--n-text-muted)}

/* ─── State note ─── */
.state{border:var(--n-border) solid var(--n-border-color);border-left:var(--n-lamella) solid var(--n-s4);
  border-radius:var(--n-radius);background:var(--n-surface);padding:var(--n-space-5)}
.state p{font-size:var(--n-text-sm);color:var(--n-text-muted);max-width:70ch}
.state p + p{margin-top:var(--n-space-3)}
.state .state-lead{margin-top:var(--n-space-3)}
.state b{color:var(--n-text)}

/* ─── Footer ─── */
footer{border-top:var(--n-border) solid var(--n-border-color);padding:var(--n-space-6) 0 var(--n-space-7)}
.foot{display:flex;justify-content:space-between;gap:var(--n-space-5);flex-wrap:wrap;align-items:center}
.foot p{font-size:var(--n-text-xs);color:var(--n-text-faint)}
.foot nav{display:flex;gap:var(--n-space-5)}
.foot nav a{font-size:var(--n-text-xs);color:var(--n-text-muted);border:0}
.foot nav a:hover{color:var(--n-text)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}