/* ──────────────────────────────────────────────────────────
   Shared site styles — technical register.

   The house aesthetic is a Bell Labs / IBM technical memorandum,
   run through a contemporary lens: exposed structure, ruled
   frames, monospace metadata, document control marks. Not a
   portfolio chrome — a point of view set as a printed artifact.

   Three type roles (a Mono / Sans / Serif trio, in the IBM Plex
   register but vendor-neutral):
     --display : serif display — masthead + titles
     --text    : grotesque sans — running body copy
     --mono    : monospace — labels, specs, document control

   Custom faces drop into the SLOTS below. Until you add them the
   stacks fall through to self-hosted Author (display) and the
   Google fallbacks loaded per page (JetBrains Mono, Hanken
   Grotesk). Colour tokens are written by palette.js before first
   paint; the :root values here are the static "Paper" fallback so
   a JS-off render still lands on the page, never on default white.
   ────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────
   CUSTOM FACE SLOTS — drop your .woff2 files into assets/fonts/ and
   uncomment the matching block. The family names are already first
   in the stacks below, so activation needs no other change. Until
   then the rules stay commented to avoid 404s, and the fallbacks
   render the register faithfully.

   @font-face { font-family:"RB Display"; src:url("fonts/rb-display.woff2") format("woff2"); font-weight:400 700; font-style:normal; font-display:swap; }
   @font-face { font-family:"RB Sans";    src:url("fonts/rb-sans.woff2")    format("woff2"); font-weight:400 700; font-style:normal; font-display:swap; }
   @font-face { font-family:"RB Mono";    src:url("fonts/rb-mono.woff2")    format("woff2"); font-weight:400 600; font-style:normal; font-display:swap; }
   ───────────────────────────────────────────────────────────────── */

/* ── Author (display) — free Fontshare/ITF face, self-hosted.
   Carried over as the display fallback: the lens, in the register. ─ */
@font-face { font-family: "Author"; src: url("fonts/author-extralight.woff")        format("woff"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Author"; src: url("fonts/author-extralight-italic.woff") format("woff"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Author"; src: url("fonts/author-regular.woff")           format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Author"; src: url("fonts/author-italic.woff")            format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Author"; src: url("fonts/author-semibold.woff")          format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Author"; src: url("fonts/author-semibold-italic.woff")   format("woff"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Author"; src: url("fonts/author-bold.woff")              format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Author"; src: url("fonts/author-bold-italic.woff")       format("woff"); font-weight: 700; font-style: italic; font-display: swap; }

/* ── RX100 (mono face) — self-hosted; carries labels, specs, the
   document-control register and small mono text. ─ */
@font-face {
  font-family: "RX100";
  src: url("fonts/rx100-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── Switzer (deck face) — free Fontshare/ITF grotesque, self-hosted.
   SemiBold (600) carries the masthead deck; italic is here if needed. ─ */
@font-face {
  font-family: "Switzer";
  src: url("fonts/switzer-semibold.woff2") format("woff2"),
       url("fonts/switzer-semibold.woff")  format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("fonts/switzer-semibold-italic.woff2") format("woff2"),
       url("fonts/switzer-semibold-italic.woff")  format("woff");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Static "Paper" fallback — palette.js overwrites these at load. */
  --bg: #f1faee;        /* Honeydew     */
  --bg-deeper: #a8dadc; /* Frosted Blue */
  --ink: #1d3557;       /* Oxford Navy  */
  --ink-soft: #457b9d;  /* Cerulean     */
  --rule: #457b9d;      /* Cerulean     */
  --accent: #e63946;    /* Punch Red    */

  /* Structure */
  --frame: 2px;         /* essential grid frame, drawn in --ink */
  --hair: 1px;          /* decorative hairline, drawn in --rule */
  --gutter: clamp(20px, 4vw, 56px);

  --display: "RB Display", "Author", "Times New Roman", Georgia, serif;
  --text:    "RB Sans", "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans:    "RB Sans", "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:    "RX100", "RB Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--ink); text-decoration: none; }
::selection { background: var(--accent); color: var(--bg); }
:focus-visible {
  outline: var(--frame) solid var(--accent);
  outline-offset: 3px;
  border-radius: 0;
}

/* ── Layout shell ─────────────────────────────────── */
.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(16px, 2.4vw, 28px) var(--gutter) clamp(40px, 6vw, 80px);
}

/* ── Masthead ─────────────────────────────────────── */
header.masthead {
  padding: clamp(20px, 3.4vw, 44px) 0 clamp(16px, 2vw, 22px);
  margin-bottom: clamp(28px, 5vw, 56px);
  border-bottom: var(--frame) solid var(--ink);
}
.masthead .name {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 8vw, 92px);
  letter-spacing: -0.03em;
  line-height: 0.92;
  color: var(--ink);
}
.masthead .name:hover { color: var(--accent); }

/* ── Footer ───────────────────────────────────────── */
footer.foot {
  margin-top: clamp(72px, 12vw, 160px);
  padding: clamp(16px, 2vw, 24px) 0 0;
  display: grid;
  gap: clamp(16px, 2.2vw, 26px);
  font-family: var(--text);
  font-size: 14px;
  color: var(--ink-soft);
  border-top: var(--frame) solid var(--ink);
}
.foot a {
  color: var(--ink);
  border-bottom: var(--frame) solid var(--accent);
  padding-bottom: 1px;
}
.foot a:hover { color: var(--accent); }
.foot__contact { margin: 0; }

/* ── Colophon ─────────────────────────────────────── */
.colophon {
  max-width: 78ch;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
}
.colophon h2 {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.colophon p { margin: 0; }
.colophon p + p { margin-top: 0.7em; }
.colophon b { color: var(--ink); font-weight: 600; }

/* ── Mono reference link ──────────────────────────── */
.live-link {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink);
  border-bottom: var(--frame) solid var(--accent);
  padding-bottom: 1px;
  white-space: nowrap;
}
.live-link:hover { color: var(--accent); }

/* ── Palette dock — square, ruled ─────────────────── */
.palette-dock {
  position: fixed;
  bottom: clamp(14px, 2vw, 24px);
  right: clamp(14px, 2vw, 24px);
  z-index: 80;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 7px 9px;
  background: var(--bg);
  border: var(--frame) solid var(--ink);
  border-radius: 0;
}
.palette-dock__tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}
.palette-swatch {
  width: 15px;
  height: 15px;
  border-radius: 0;
  border: var(--hair) solid var(--ink);
  background: var(--sw-bg);
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: transform .1s ease;
}
.palette-swatch::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--sw-accent);
  transform: scale(0);
  transition: transform .12s ease;
}
.palette-swatch:hover { transform: translateY(-2px); }
.palette-swatch:focus-visible { outline: var(--frame) solid var(--accent); outline-offset: 2px; }
.palette-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent); }
.palette-swatch[aria-pressed="true"]::after { transform: scale(1); }

/* ── Hatch defs sit invisibly in markup ───────────── */
.ph-defs { position: absolute; width: 0; height: 0; pointer-events: none; }