/* ============================================================
   Theme: slate-broadsheet — utility archetype stylesheet.

   press.html and privacy.html borrow 100 percent of their chrome from this
   file (49 of its 50 selectors reach press.html; the pages' own <style>
   overlaps it by exactly zero), so it carries the full token vocabulary
   AND the element dress. Consumed via a <link> scripts/render-hub.py keeps
   pointed at the ACTIVE theme.

   Token half: all 47 archetypes.REQUIRED_TOKENS in slate plus the --sb-*
   treatment block, identical to tokens.css. This file is its own
   resolution group, so nothing here may read a name tokens.css defines.

   Dress half: the Slate Broadsheet, below the token block. press.html and
   privacy.html as inside pages of the paper: the nameplate small in the
   nav with the section index and the door, the page title as a section
   head with a reversed folio tab and the accent word in the serif italic,
   the eyebrow as the ears (meta label and the printer's color bar), the
   page-meta as the dateline, the body on the inside-page measure, links
   in cyan with a pale underline, the footer under the heavy rule with the
   color bar. What the seed
   carried and this dress removed: the `.page-hero-bg .grid` drafting grid
   and `.glow` blur, the `.nav-cta` and `.eyebrow .pulse` glow box-shadows,
   the navy-glass sticky nav, and `h1.page-title .accent` painting
   --brand-gradient as text (2.64:1 at the magenta end). Matte now.

   AA CONTRAST, computed with scripts/theme-doctor.py's own WCAG 2.1 math
   (the numbers the gate will grade). The 4.5:1 body floor applies to every
   pair, including sizes that would qualify as large text.

   ink / surface             --bg-0 #3A4350  --bg-1 #3E4754  --bg-2 #414A58
   --fg-1 #F7F5F0                    9.18:1          8.63:1          8.22:1
   --fg-2 #D9D6CF                    6.90:1          6.48:1          6.17:1
   --fg-3 #C3C1BA                    5.55:1          5.22:1          4.97:1
   --fg-muted #BCBBB4                5.20:1          4.88:1          4.65:1
   --cyan #17D4FA                    5.64:1          5.30:1          5.05:1
   --cyan-pale #5CE6FF               6.77:1          6.36:1          6.06:1
   --magenta-pale #FFA3CC            5.41:1          5.09:1          4.85:1
   --ok #2BD99A                      5.48:1          5.14:1          4.90:1

   COMPOSITED UNDER THE GRAIN. --sb-grain is painted fixed at z-index 5 over
   everything, panels included, and the sheet's contract is graded under it:
   worst case 3.5 percent paper over each surface. Same inks, grained surfaces:

   ink / surface+grain       --bg-0 #414956  --bg-1 #444D59  --bg-2 #47505D
   --fg-1 #F7F5F0                    8.34:1          7.86:1          7.49:1
   --fg-2 #D9D6CF                    6.26:1          5.90:1          5.62:1
   --fg-3 #C3C1BA                    5.04:1          4.76:1          4.53:1
   --fg-muted #BCBBB4                4.72:1          4.45:1          4.24:1
   --cyan #17D4FA                    5.12:1          4.83:1          4.60:1
   --cyan-pale #5CE6FF               6.15:1          5.80:1          5.52:1
   --magenta-pale #FFA3CC            4.91:1          4.63:1          4.42:1
   --ok #2BD99A                      4.97:1          4.69:1          4.47:1

   THE RULE THAT FOLLOWS: under grain, --fg-muted, --magenta-pale and --ok are
   --bg-0 INKS ONLY. None of the three clears 4.5:1 on a grained --bg-1 or
   --bg-2, and --fg-3 on a grained --bg-2 is a hair over. A dress that sets a
   folio in --fg-muted on a --bg-2 rail ships under AA with every gate green,
   because the doctor grades flat colors. theme.json gates the flat ceiling
   (--fg-muted/--bg-2, --magenta-pale/--bg-2); the grained one is this rule.

   SHORTHANDS: --sb-hair, --sb-rule and --sb-heavy are BORDER SHORTHANDS
   (width + style + color), exactly as the remix sheet declares them. Spend
   them on border-* and column-rule only. The bare colors are --sb-hair-color
   and --sb-rule-color, which --border-1 and --border-2 read.

   Reversed folio tab, ground-colored type on the ink field
   (#3A4350 on #F7F5F0): 9.18:1. Ground on the plate mat
   (#3A4350 on #EFEBE2): 8.41:1. No text sits on the mat.

   NEVER TEXT on slate, with the ratios that rule them out on --bg-0:
   --magenta #F22F89 2.64:1 (the color bar and the underline
   swatch only); the brand's pale magenta #FF5AA3 3.45:1, which is why
   --magenta-pale here is the sheet's declared hover tint #FFA3CC instead;
   --ed-link #0FA8C9 3.56:1; --ink-950 and the navy trio are field
   constants for the brand and are not inks on this theme.
   ============================================================ */
/* 626 Labs Design System — see ~/.claude-personal/skills/626labs-design + /Design */
@import url('/fonts/fonts.css');

:root {
  /* Brand constants. The navy trio and --ink-950 are the 626 Labs field
     colors every theme carries; on slate they are values a dress may spend
     on a plate raster or a reversed swatch, never a surface text sits on. */
  --navy-deep: #0f1f31;
  --navy-mid:  #192e44;
  --navy-hi:   #223a54;
  --navy-line: #2a3a5c;
  --cyan:      #17d4fa;
  --cyan-pale: #5ce6ff;
  --cyan-dim:  #0fa8c9;
  --magenta:   #f22f89;
  --magenta-pale: #FFA3CC;
  --ink-0:     #ffffff;
  --ink-950:   #050c18;
  --ok:        #2bd99a;
  --warn:      #ffb454;

  /* The ink ramp: the editorial paper tones, inverted. */
  --text:      #F7F5F0;
  --text-sec:  #D9D6CF;
  --text-dim:  #C3C1BA;
  --text-mute: #BCBBB4;

  /* The slate. One ground, two steps lighter for mats and rails. */
  --bg-0: var(--sb-ground);
  --bg-1: #3E4754;
  --bg-2: #414A58;
  --fg-1: var(--text);
  --fg-2: var(--text-sec);
  --fg-3: var(--text-dim);
  --fg-muted: var(--text-mute);

  /* Rules are paper at low alpha: hairline, mid rule, and the heavy rule
     a dress draws in ink itself. Cyan hairline for the accent border. */
  --border-1: var(--sb-hair-color);
  --border-2: var(--sb-rule-color);
  --border-strong: rgba(247,245,240,.42);
  --border-accent: rgba(23,212,250,.45);

  /* The printer's color bar. A swatch recipe, never a text fill. */
  --brand-gradient: linear-gradient(135deg, var(--cyan) 0%, var(--magenta) 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(23,212,250,.18) 0%, rgba(242,47,137,.18) 100%);
  --inner-stroke: inset 0 0 0 1px rgba(247,245,240,.06);

  /* Matte drop shadows for anything lifted off the page. No glow tokens:
     this theme defines none, so a dress cannot spend one by accident. */
  --shadow-2: 0 4px 16px rgba(0,0,0,.28);
  --shadow-3: 0 12px 32px rgba(0,0,0,.36);

  --ease-out: cubic-bezier(.2,.7,.2,1);
  --dur-fast: 120ms;
  --dur-med: 220ms;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px;
  --r-pill: 999px;

  /* The Field Manual's type system: Space Grotesk on every head, the
     serif on body and decks, JetBrains Mono on every piece of furniture.
     Source Serif 4 is self-hosted in /fonts/fonts.css (roman + italic). */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:    'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* The Slate Broadsheet — treatment layer (--sb-*). Same block as tokens.css. */
:root {
  /* The slate and the inks. --sb-ground is the ONLY place the ground is
     declared; --bg-0 reads it. */
  --sb-ground:      #3A4350;
  --sb-ink:         #F7F5F0;   /* primary ink: masthead, heads, body copy */
  --sb-ink-2:       #D9D6CF;   /* secondary ink: decks, descriptions, the imprint */
  --sb-ink-3:       #C3C1BA;   /* caption ink: folios, datelines, plate captions */
  --sb-ink-muted:   #BCBBB4;   /* the fourth step the contract's --fg-muted needs */
  --sb-link-hover:  #FFA3CC;   /* hover and focus ink; magenta as a tint, 5.41:1 */

  /* Rule colors: paper at low alpha. Decorative, never text. */
  --sb-hair-color:  rgba(247,245,240,.14);  /* hairlines, column rules */
  --sb-rule-color:  rgba(247,245,240,.28);  /* the mid rule */
  --sb-screen:      rgba(247,245,240,.14);  /* halftone dot screen over a raster */
  --sb-impression:  rgba(15,31,49,.55);     /* letterpress impression under display heads */

  /* The three rules, as the remix sheet declares them: BORDER SHORTHANDS,
     width + style + color. Spend them on border-* and column-rule ONLY
     (`border-top: var(--sb-hair)`, `column-rule: var(--sb-hair)`,
     `border-top: var(--sb-heavy)`); never as a color. A bare color spent
     as a shorthand parses with border-style none and the rule vanishes
     silently. For a color, read --sb-hair-color / --sb-rule-color. */
  --sb-hair:        1px solid var(--sb-hair-color);
  --sb-rule:        1px solid var(--sb-rule-color);
  --sb-heavy:       3px solid var(--sb-ink);

  /* The mounted plate: a pale mat carries a dark raster so a photo reads
     as pasted onto the slate, not as a hole in it. No text on the mat. */
  --sb-mat:         #EFEBE2;   /* the editorial paper-deep tone */
  --sb-raster:      #0F1F31;   /* the plate placeholder, brand navy */

  /* The reversed folio tab: a pale tab with slate type, and the skip link. */
  --sb-tab-bg:      var(--sb-ink);
  --sb-tab-fg:      var(--sb-ground);

  /* Broadsheet measures. */
  --sb-page:        1280px;
  --sb-gutter:      32px;

  /* Stone grain: fractal noise, white at half alpha, laid at 7 percent.
     Matte tooth, not scanlines, not a grid. No color literal in the SVG. */
  --sb-grain:         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E");
  --sb-grain-opacity: .07;

  /* Role aliases the remix sheet's rules read. */
  --sb-serif:       var(--font-body);
  --sb-display:     var(--font-display);
  --sb-mono:        var(--font-mono);
}

/* ============================================================
   THE DRESS: press.html and privacy.html as inside pages of the paper.

   Everything below spends only names the token block above defines. This
   file is its own resolution group (the two pages link nothing else), so
   a read of anything tokens.css alone declares would be an unresolved
   var() on a live page. Matte throughout: no glow, no bloom, no grid, no
   scanline, no gradient field, no gradient-as-text. The brand pair floods
   a shape in exactly two places, the printer's color bar (three 9px
   squares, drawn with zero-blur offset box-shadows: copies, not glow) and
   the 2px rule under the door link (--brand-gradient as a swatch). The
   three rules --sb-hair / --sb-rule / --sb-heavy are border shorthands
   and are spent on border-* only; hairline COLOR reads --sb-hair-color.

   Under the grain, --sb-link-hover (--magenta-pale) is a --bg-0 ink only.
   It is the hover ink of the nav, the door and the footer, all of which
   sit on the ground. a.inline-link is the exception: press.html places
   inline links inside --bg-1 contact cards, so its hover ink is
   --cyan-pale (5.80:1 on grained --bg-1) and the magenta arrives as the
   underline swatch instead. That is the one place this dress departs from
   the sheet's anchor hover, and the grained-contrast rule is why.

   No imprint. press.html and privacy.html own their footer markup and a
   theme cannot add an element to them; generated content cannot carry a
   link, so a `.footer-inner::after` imprint here could only name the
   gallery URL in prose. These two pages carry no imprint rather than a
   fake one. The real imprint, with its link, is page markup: the home
   shell's `.imprint` and the line render-plugin-pages.py emits on every
   generated plugin page, both reading the theme's name.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg-0); }
body {
  margin: 0;
  padding: 0;
  position: relative;
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--sb-serif);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "liga", "onum";
}
/* Stone grain: fractal noise, white at half alpha, laid at 7 percent.
   Matte tooth, not scanlines, not a grid. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: var(--sb-grain-opacity);
  background-image: var(--sb-grain);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--sb-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--sb-ink);
}
p { color: inherit; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--sb-link-hover); outline-offset: 2px; }
img, svg { max-width: 100%; }
.ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Links in the running text: cyan ink, a pale cyan underline. */
a.inline-link {
  color: var(--cyan);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-accent);
  transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
}
a.inline-link:hover, a.inline-link:focus-visible {
  color: var(--cyan-pale);
  text-decoration-color: var(--magenta);
}

/* The inside page's measure. The nav and footer run the full broadsheet
   measure (--sb-page); the text column is narrower. */
.wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
  min-width: 0;
}

/* ========== Nav: the nameplate, small, with the section index ========== */
nav.nav {
  position: relative;
  background: var(--bg-0);
  border-bottom: var(--sb-heavy);
}
nav.nav::after {
  /* the second line of the double rule, hairline under the heavy one */
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;
  border-bottom: var(--sb-hair);
}
.nav-inner {
  max-width: var(--sb-page);
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sb-display);
  font-weight: 300;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--sb-ink);
  text-shadow: 0 1px 0 var(--sb-impression);
}
.nav-brand .brand-626 { font-weight: 500; color: var(--sb-ink); }
.nav-brand .brand-labs { font-weight: 300; color: var(--sb-ink); margin-left: 0.22em; }
.nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.nav-links a {
  position: relative;
  display: block;
  padding: 10px 16px;
  font-family: var(--sb-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sb-ink);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-links a + a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  border-left: var(--sb-hair);
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--sb-link-hover); }
/* The door: mono, cyan, the brand pair as a 2px rule underneath. */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sb-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  padding: 0 0 3px;
  border: 0;
  border-radius: 0;
  background-image: var(--brand-gradient);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-cta:hover, .nav-cta:focus-visible { color: var(--sb-link-hover); }
@media (max-width: 720px) {
  .nav-inner { padding: 12px 18px 0; }
  .nav-links {
    order: 3;
    flex-basis: 100%;
    margin-top: 4px;
    border-top: var(--sb-hair);
  }
  .nav-links a { padding: 11px 10px; font-size: 11px; letter-spacing: 0.1em; }
}

/* ========== Page header: the section head ========== */
header.page-hero {
  position: relative;
  padding: 36px 0 0;
  border-bottom: var(--sb-heavy);
}
header.page-hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;
  border-bottom: var(--sb-hair);
}
/* The page ships .grid and .glow inside this wrapper. Nothing on this
   theme paints them. */
.page-hero-bg { display: none; }
.page-hero-inner { position: relative; }
/* The ears: the meta label left, the printer's color bar right. */
.eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 22px;
  padding: 0 0 8px;
  border-bottom: var(--sb-hair);
  font-family: var(--sb-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sb-ink-3);
}
.eyebrow .pulse {
  order: 2;
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 26px;
  border-radius: 0;
  background: var(--cyan);
  box-shadow: 13px 0 0 var(--magenta), 26px 0 0 var(--sb-ink);
}
h1.page-title {
  margin: 0 0 16px;
  font-family: var(--sb-display);
  font-weight: 500;
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--sb-ink);
  text-shadow: 0 1px 0 var(--sb-impression);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
/* The folio tab, reversed: ink field, slate type, the section sign. */
h1.page-title::before {
  content: '\00A7';
  display: inline-block;
  position: relative;
  top: -0.1em;
  vertical-align: middle;
  margin-right: 14px;
  padding: 4px 8px 3px;
  background: var(--sb-tab-bg);
  color: var(--sb-tab-fg);
  font-family: var(--sb-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  text-shadow: none;
}
/* The accent word in the serif italic. Ink, never a gradient. */
h1.page-title .accent {
  font-family: var(--sb-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--sb-ink);
  background: none;
}
.page-lead {
  margin: 0 0 22px;
  font-family: var(--sb-serif);
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.5;
  color: var(--sb-ink-2);
  max-width: 38em;
  text-wrap: pretty;
}
.page-lead::first-letter {
  /* newspaper lead: the first letter of the deck set big and dropped */
  float: left;
  font-size: 3.4em;
  line-height: 0.8;
  padding: 6px 8px 0 0;
  font-weight: 700;
  color: var(--sb-ink);
}
/* The dateline row. */
.page-meta {
  clear: both;
  margin: 0;
  padding: 10px 0;
  border-top: var(--sb-rule);
  font-family: var(--sb-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sb-ink-3);
  font-variant-numeric: tabular-nums;
}
.page-meta .sep { margin: 0 10px; color: var(--sb-ink-3); }

/* ========== Main: the page's own content, on the paper's type ========== */
main {
  display: block;
  font-family: var(--sb-serif);
  color: var(--sb-ink);
}
main h2 {
  padding-bottom: 8px;
  border-bottom: var(--sb-hair);
  text-shadow: 0 1px 0 var(--sb-impression);
  text-wrap: balance;
}

/* ========== Footer: the heavy rule, the color bar ========== */
footer {
  position: relative;
  margin-top: 24px;
  background: var(--bg-0);
  border-top: var(--sb-heavy);
}
footer::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 5px;
  border-top: var(--sb-hair);
}
.footer-inner {
  max-width: var(--sb-page);
  margin: 0 auto;
  padding: 28px 24px 44px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 24px;
}
.footer-meta {
  font-family: var(--sb-mono);
  font-size: 12.5px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--sb-ink-2);
}
.footer-meta .brand-tagline {
  font-family: var(--sb-serif);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0;
  color: var(--sb-ink);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.footer-links a {
  position: relative;
  display: block;
  padding: 6px 14px;
  font-family: var(--sb-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sb-ink);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-links a:first-child { padding-left: 0; }
.footer-links a + a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  border-left: var(--sb-hair);
}
.footer-links a:hover, .footer-links a:focus-visible { color: var(--sb-link-hover); }
/* The printer's color bar closes the link row. */
.footer-links::after {
  content: '';
  flex: none;
  align-self: center;
  width: 9px;
  height: 9px;
  margin: 0 26px 0 14px;
  background: var(--cyan);
  box-shadow: 13px 0 0 var(--magenta), 26px 0 0 var(--sb-ink);
}
/* ========== 390 ========== */
@media (max-width: 600px) {
  .wrap { padding: 0 18px; }
  header.page-hero { padding-top: 26px; }
  .footer-inner { padding: 22px 18px 36px; }
  .footer-links a { padding: 6px 10px; }
}