/*
 * Design system — "Ruled sheet" (v3) — standalone build for explorations/.
 * Identical to site/src/styles/system.css except fonts are self-hosted here
 * (no Vite/Fontsource pipeline). Canonical spec: DESIGN.md at project root.
 */

/* ============ fonts (self-hosted, latin + latin-ext, variable wght) ============ */
@font-face {
  font-family: 'Big Shoulders Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('./fonts/big-shoulders-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Big Shoulders Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('./fonts/big-shoulders-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Franklin Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('./fonts/libre-franklin-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Franklin Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('./fonts/libre-franklin-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============ tokens ============ */
:root {
  /* surfaces */
  --paper: oklch(0.965 0.003 85); /* primer white */
  --paper-lift: oklch(0.99 0.002 85); /* polaroid mats, row hover */
  --graphite: oklch(0.245 0.01 75); /* dark field, tabs */
  --graphite-2: oklch(0.29 0.012 75); /* raised cell on graphite */
  --kraft: oklch(0.77 0.062 78); /* kraft field + plywood tint */

  /* ink */
  --ink: oklch(0.225 0.012 75); /* text on light fields */
  --muted: oklch(0.44 0.015 75); /* secondary on light */
  --ink-inv: oklch(0.955 0.004 85); /* text on graphite */
  --muted-inv: oklch(0.76 0.02 78); /* secondary on graphite */

  /* keel red — the working accent; marks only, never decoration */
  --keel: oklch(0.55 0.19 28); /* display marks, rects, dots */
  --keel-deep: oklch(0.46 0.165 28); /* small text on light (≥4.5:1) */
  --keel-lift: oklch(0.7 0.16 32); /* text on graphite (≥4.5:1) */

  /* hairlines per field */
  --rule: oklch(0.86 0.01 80);
  --rule-dark: oklch(0.37 0.012 75);
  --rule-kraft: oklch(0.665 0.05 78);

  /* sheet geometry */
  --gutter: clamp(1.25rem, 4vw, 5rem);
  --gutter-max: 13rem; /* margins never exceed this; past it the main columns absorb the width */
  --main: 78rem; /* width at which margins begin growing past --gutter */
  --pad: clamp(1rem, 1.8vw, 1.75rem);

  /* motion */
  --eo: cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* ============ base ============ */
* {
  box-sizing: border-box;
  margin: 0;
}
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Libre Franklin Variable', 'Franklin Gothic Medium', Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img {
  display: block;
  width: 100%;
  height: auto;
}
a {
  color: inherit;
}

/* ============ type roles ============ */
.display,
.display-2 {
  font-family: 'Big Shoulders Variable', 'Arial Narrow', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.008em;
  line-height: 0.94;
  display: block;
  text-wrap: balance;
}
.display {
  font-size: clamp(3rem, 8.2vw, 6rem);
}
.display-2 {
  font-size: clamp(2rem, 4.6vw, 3.5rem);
}

/* outline = drawn, fill = built
 * (standalone divergence from system.css: stroke color must be explicit —
 * with color:transparent, a currentColor stroke is transparent too; the live
 * site patches this per-scope in index.astro. Here the base class carries
 * the per-field stroke itself.) */
.hollow {
  color: transparent;
  -webkit-text-stroke: 1px var(--ink);
}
.field-graphite .hollow {
  -webkit-text-stroke: 0.75px var(--ink-inv);
}
@supports not (-webkit-text-stroke: 1px black) {
  .hollow {
    color: inherit;
  }
}

/* the keel period — one red mark ends the built line */
.tick {
  color: var(--keel);
}

.label {
  font-weight: 640;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.085em;
  line-height: 1.3;
}
.data {
  font-size: 0.875rem;
  font-weight: 460;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  line-height: 1.45;
}

/* ============ the ruled sheet ============ */
.row {
  position: relative;
  display: grid;
  /* margins run --gutter -> --gutter-max, growing only once the main
     columns reach --main; past the max the main columns absorb the rest.
     At 1440 this resolves identically to the old minmax()/capped-main grid. */
  --_margin: clamp(var(--gutter), calc((100% - var(--main)) / 2), var(--gutter-max));
  grid-template-columns:
    [full-start] var(--_margin)
    [main-start] repeat(12, [c] minmax(0, 1fr))
    [main-end] var(--_margin)
    [full-end];
  --_rule: var(--rule);
  border-top: 1px solid var(--_rule);
}
.row:first-child {
  border-top: 0;
}
/* continuous vertical rails at the main-column boundaries */
.row::before,
.row::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--_rule);
  pointer-events: none;
}
.row::before {
  left: var(--_margin);
}
.row::after {
  right: var(--_margin);
}

/* fields: full-bleed shop materials; rules adapt */
.field-graphite {
  background: var(--graphite);
  color: var(--ink-inv);
  --_rule: var(--rule-dark);
}
.field-graphite .data {
  color: var(--muted-inv);
}
.field-kraft {
  background: var(--kraft);
  --_rule: var(--rule-kraft);
}

/* drafting cross for intentionally-blank cells */
.cross {
  pointer-events: none;
  background:
    linear-gradient(to top right, transparent calc(50% - 0.5px), var(--_rule) calc(50% - 0.5px), var(--_rule) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.5px), var(--_rule) calc(50% - 0.5px), var(--_rule) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}
@media (max-width: 1099px) {
  .cross {
    display: none;
  }
}

/* ============ reveals ============ */
html.js [data-rise] {
  opacity: 0;
  translate: 0 14px;
  transition: opacity 0.55s var(--eo), translate 0.55s var(--eo);
  transition-delay: calc(var(--i, 0) * 80ms);
}
html.js [data-rise].in {
  opacity: 1;
  translate: 0 0;
}
@media (prefers-reduced-motion: reduce) {
  html.js [data-rise] {
    opacity: 1;
    translate: 0 0;
    transition: none;
  }
}

/* ============ mobile sheet ============ */
@media (max-width: 899px) {
  .row {
    grid-template-columns: [full-start] var(--gutter) [main-start c] repeat(1, 1fr) [main-end] var(--gutter) [full-end];
  }
}

/* ============ sheet head — site navigation ============ */
.x-head {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  row-gap: 0.15rem;
  align-items: baseline;
  padding: 0.5rem var(--gutter);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.x-head .x-id {
  color: var(--keel-deep);
}
.x-head a {
  text-decoration: none;
  margin-left: auto;
}
.x-head a:hover {
  color: var(--keel-deep);
}
.x-nav {
  margin-left: auto;
  display: flex;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: baseline;
}
.x-nav a { margin-left: 0; }
.x-nav a[aria-current="page"] { color: var(--keel-deep); }
/* anchored jumps land clear of the sticky head */
[id] { scroll-margin-top: calc(var(--xh, 2.5rem) + 0.75rem); }