/* ──────────────────────────────────────────────────────────
   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. The stacks fall through to
   self-hosted Author (display), self-hosted Azeret Mono (mono), and
   Hanken Grotesk (loaded per page) for running text. Colour tokens are
   written by palette.js before first paint; the :root values here are
   the static "Platinum" 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; }

/* ── 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;
}

/* ── Azeret Mono — self-hosted variable face; carries all monospace
   labels, specs, and document-control marks. ─ */
@font-face {
  font-family: "Azeret Mono";
  src: url("fonts/azeret-mono-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Static "Platinum" fallback — palette.js overwrites these at load. */
  --bg: #ebebeb;        /* Platinum     */
  --bg-deeper: #3f88c5; /* Steel Blue   */
  --ink: #0c0f0a;       /* Onyx         */
  --ink-soft: #004e98;  /* Steel Azure  */
  --rule: #004e98;      /* Steel Azure  */
  --accent: #ff6700;    /* Pumpkin Spice */

  /* 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:    "Azeret Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }
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);
}
.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; }