/* ============================================================
   njk. — style.css
   Tokens below are PINNED (13 July 2026) — copied verbatim from
   the design handoff (handoff/tokens.css). Do not edit values;
   the Brand Book is the law.
   ============================================================ */

/* ---- fonts: Plex tier ships until the Berkeley web license
   lands. When purchased, add the Berkeley Mono Variable form
   @font-face ABOVE these — the stack degrades correctly. ---- */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/IBMPlexMono-Light.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
}

/* ============================================================
   njk. — design tokens (PINNED · 13 July 2026)
   The public sibling of form_. One room, dark-first.
   Law: the njk Brand Book. Lineage: form_/handoff/tokens.css.

   The roll: each visit, one accent is chosen from the six
   tempers and applied via --acc / --acc-word. Color never
   travels without a word (the footer names the day).

   Light theme: PINNED 13 July 2026 — same six meanings,
   darkened accents. Dark is default; light via
   [data-mode="light"] (wire to prefers-color-scheme +
   manual override at build).
   ============================================================ */

:root {
  /* ---- type ------------------------------------------------ */
  --font-mono: "Berkeley Mono Variable form", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* Plex tier ships until the Berkeley web license lands.
     Weight = attention: wordmark 300 · dot/labels 600 · body 400 */

  --fs-wordmark: 3.625rem;   --fw-wordmark: 300;  --ls-wordmark: -0.02em;
  --fs-motto: 0.75rem;       --ls-motto: 0.22em;      /* caps */
  --fs-body: 0.97rem;        --lh-body: 2.0;
  --fs-link: 0.875rem;       --ls-link: 0.02em;
  --fs-breadcrumb: 0.75rem;  --fw-breadcrumb: 600; --ls-breadcrumb: 0.15em; /* caps */
  --fs-label: 0.6875rem;     --fw-label: 600;      --ls-label: 0.15em;      /* :: now */
  --fs-folio: 0.625rem;      --ls-folio: 0.1em;
  --fs-colophon: 0.656rem;   --ls-colophon: 0.1em;

  /* ---- ground & ink (dark, default) ------------------------ */
  --ground: #232320;
  --paper: #262623;          /* raised panel, brand book cards */
  --spine: #56534a;          /* the 2px top rule */
  --ink-display: #f6f2ec;
  --ink-body: #d9d6cf;
  --ink-muted: #928d84;
  --ink-faint: #6a6760;      /* slashes, arrows, folios */
  --ink-colophon: #4f4d47;
  --hairline: #343330;

  /* ---- the six tempers (accent + word, inseparable) --------- */
  --t-gold: #e8c14e;     /* dwell     · the hearth · daily driver */
  --t-orange: #fd9353;   /* spark     · the forge */
  --t-teal: #5ad4e6;     /* reference · the study */
  --t-violet: #948ae3;   /* reading   · vespers */
  --t-green: #7bd88f;    /* project   · the field */
  --t-gray: #928d84;     /* log       · the fast · 404 is always this */

  /* the day's roll lands here (set by the roll script): */
  --acc: var(--t-gold);
  /* --acc-word is set as text content, not CSS — the word must
     exist in the document for the law to hold. */

  /* ---- creed (fixed semantics, never rolled) ---------------- */
  --creed-faith: var(--t-gold);    /* creed  */
  --creed-unix: var(--t-orange);   /* choice */
  --creed-tech: var(--t-green);    /* habit  */

  /* ---- structure -------------------------------------------- */
  --measure: 620px;          /* page column, incl. 40px side pads */
  --rule-spine: 2px;         /* 4px on 1200px+ static surfaces */
}

/* ============================================================
   MODE · LIGHT — true neutral, not cream (the cream was
   heyn8k's). The spine goes ink-dark: the page's one strong
   line reads STRONGER on light. Meaning never moves between
   modes — 404 is gray in both.
   ============================================================ */
[data-mode="light"] {
  --ground: #f3f1ea;
  --paper: #f5f3ed;
  --spine: #26251f;
  --ink-display: #1d1c17;
  --ink-body: #35332c;
  --ink-muted: #8a8578;
  --ink-faint: #b9b4a6;
  --ink-colophon: #b9b4a6;
  --hairline: #e3dfd3;

  --t-gold: #b98f1c;     /* dwell     */
  --t-orange: #e0761c;   /* spark     */
  --t-teal: #11a3b8;     /* reference */
  --t-violet: #6d5ad6;   /* reading   */
  --t-green: #2ba459;    /* project   */
  --t-gray: #8a8578;     /* log       */
  /* prism hovers follow: n gold · j teal · k green (light values) */
}

/* ============================================================
   PAGE — one room: spine rule, 620px column, footer at rest
   ============================================================ */

* { box-sizing: border-box; }

/* tell the browser which scheme is active — native UI (scrollbars,
   form controls) follows the page, not the OS */
:root { color-scheme: dark; }
[data-mode="light"] { color-scheme: light; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ground);
  font-family: var(--font-mono);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh; /* mobile URL bars: keep the footer truly at rest */
}

.spine {
  height: var(--rule-spine);
  background: var(--spine);
  flex-shrink: 0;
}

.page {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 56px 40px 64px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* ---- running head ------------------------------------------ */
.running-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 88px;
}

.breadcrumb {
  font-size: var(--fs-breadcrumb);
  font-weight: var(--fw-breadcrumb);
  letter-spacing: var(--ls-breadcrumb);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.crumb-sep { color: var(--ink-faint); }
.crumb-leaf { color: var(--acc); }
.crumb-lost { color: var(--t-gray); }

.folio {
  font-size: var(--fs-folio);
  letter-spacing: var(--ls-folio);
  color: var(--ink-faint);
}

/* ---- wordmark & prism --------------------------------------- */
.wordmark {
  margin: 0;
  font-size: var(--fs-wordmark);
  font-weight: var(--fw-wordmark);
  letter-spacing: var(--ls-wordmark);
  line-height: 1;
  color: var(--ink-display);
}

/* prism: n gold · j orange · k green — owner's revision (July 2026),
   matching the creed order (creed · choice · habit); supersedes the
   token comment's "n gold · j teal · k green" */
.wm { transition: color 0.45s ease; }
.wm-n:hover { color: var(--t-gold); transition-duration: 0.1s; }
.wm-j:hover { color: var(--t-orange); transition-duration: 0.1s; }
.wm-k:hover { color: var(--t-green); transition-duration: 0.1s; }

.wm-dot {
  font-weight: 600;
  color: var(--acc);
}
.dot-gray { color: var(--t-gray); }

/* ---- motto --------------------------------------------------- */
.motto {
  margin: 18px 0 0;
  font-size: var(--fs-motto);
  letter-spacing: var(--ls-motto);
  text-transform: uppercase;
  color: var(--acc);
}
.motto-gray { color: var(--t-gray); }

/* ---- creed --------------------------------------------------- */
.creed {
  margin: 52px 0 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-body);
}

.creed-faith { color: var(--creed-faith); font-weight: 600; }
.creed-unix { color: var(--creed-unix); font-weight: 600; cursor: default; }
.creed-tech { color: var(--creed-tech); font-weight: 600; }

.lost-note { max-width: 440px; }
.lost-aside { color: var(--ink-muted); }

/* ---- :: now -------------------------------------------------- */
.now {
  margin-top: 52px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.now-label {
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--acc);
}

.now-items {
  font-size: 0.84375rem; /* 13.5px, per the landing design */
  line-height: 1.8;
  color: var(--ink-muted);
}

.now-items a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.now-items a:hover { color: var(--acc); }

/* ---- arrow links --------------------------------------------- */
.links {
  margin-top: 52px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.links a {
  font-size: var(--fs-link);
  letter-spacing: var(--ls-link);
  color: var(--ink-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.links a:hover { color: var(--acc); }
.links-404 a:hover { color: var(--t-gold); }

.arrow { color: var(--ink-faint); }

/* ---- footer --------------------------------------------------- */
.footer {
  margin-top: auto;
  padding-top: 64px;
}

.footer-inner {
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.mark {
  width: 46px;
  height: 68px;
  -webkit-mask: url("/jackalope.png") center / contain no-repeat;
  mask: url("/jackalope.png") center / contain no-repeat;
}

/* only paint the tint where masking can shape it — never a bare rectangle */
@supports ((mask: url("")) or (-webkit-mask: url(""))) {
  .mark { background-color: var(--acc); }
}

.mark-ghost {
  background-color: var(--t-gray);
  opacity: 0.35;
}

.colophon {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.day-line {
  font-size: var(--fs-colophon);
  letter-spacing: var(--ls-colophon);
  color: var(--ink-faint);
}

.day-name { color: var(--acc); }
.word-gray { color: var(--t-gray); }

/* the moon/sun phrase — the manual mode override, inline in the day line */
.mode-toggle {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
  transition: color 0.15s ease;
}

.mode-toggle:hover { color: var(--ink-muted); }

/* ---- focus ----------------------------------------------------- */
a:focus-visible,
.mode-toggle:focus-visible {
  outline: 1px solid var(--acc);
  outline-offset: 3px;
}