@import '../css/tokens.css';

/* ————————————————————————————————————————————————————————————
   Rafa & Nicky — the catalogue edition
   An experimental, self-contained page. It borrows the studio's
   tokens (spacing, motion) and typefaces, then prints itself in
   its subject's own inks: paper, ink, and a coral held in reserve.

   Two registers only:
     essay  — Suisse Int'l (Light 300 / Book 450 / Semi Bold 600)
     record — Suisse Int'l Mono 400, 12/20, the annotation layer
   ———————————————————————————————————————————————————————————— */

@font-face {
  font-family: "Suisse Int'l Light";
  src: url('../css/fonts/SuisseIntl-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Int'l Book";
  src: url('../css/fonts/SuisseIntl-Book.otf') format('opentype');
  font-weight: 450;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Int'l Semi Bold";
  src: url('../css/fonts/SuisseIntl-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Int'l Mono";
  src: url('../css/fonts/SuisseIntlMono-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* The subject's palette — page-scoped by design */
  --x-paper: #faf9f6;
  --x-ink:   #252525;
  --x-coral: #ff8282;
  /* Record register: recessive but WCAG AA on paper (≥4.5:1) */
  --x-ink-soft: color-mix(in srgb, var(--x-ink) 65%, var(--x-paper));
  /* Hairlines recede like printed 0.25pt rules */
  --x-rule: color-mix(in srgb, var(--x-ink) 18%, var(--x-paper));

  /* Closed set of type settings — nothing else exists on this page */
  --x-font-title:   300 96px/100px "Suisse Int'l Light", Inter, sans-serif;
  --x-font-chapter: 450 31px/40px "Suisse Int'l Book", Inter, sans-serif;
  --x-font-lede:    300 23px/32px "Suisse Int'l Light", Inter, sans-serif;
  --x-font-body:    450 17px/28px "Suisse Int'l Book", Inter, sans-serif;
  --x-font-mono:    400 12px/20px "Suisse Int'l Mono", monospace;
}

/* ── Base ─────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--x-paper);
  color-scheme: light; /* one edition, printed on paper */
  scroll-behavior: auto; /* turning to a page is not an animation */
  scroll-padding-top: 96px;
}

body {
  background: var(--x-paper);
  color: var(--x-ink);
  font: var(--x-font-body);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--x-ink); color: var(--x-paper); }

img, video, svg { display: block; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness 80ms var(--ease-out);
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 1px solid var(--x-ink);
  outline-offset: 4px;
}

strong {
  font-family: "Suisse Int'l Semi Bold", Inter, sans-serif;
  font-weight: 600;
}

.x-mono {
  font: var(--x-font-mono);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--x-ink-soft);
}

/* ── Frame + grid ─────────────────────────────────────────── */

.x-frame {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-16);
}

.x-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-6);
}

.x-note  { grid-column: 1 / 4; }
.x-prose { grid-column: 4 / 10; }
.x-wide  { grid-column: 4 / 13; }

.x-note p + p { margin-top: var(--space-2); }

.x-prose p + p,
.x-prose p + ul { margin-top: 28px; }

.x-block { margin-top: var(--space-16); }

/* ── Running header — painted white, blended; it inverts
      itself as it crosses the films. One paint, two grounds. ── */

.x-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  color: #ffffff;
  mix-blend-mode: difference;
  pointer-events: none;
}
.x-header a { pointer-events: auto; }

.js .x-header { opacity: 0; }
.js .x-header.is-docked { opacity: 1; }

.x-header-mark {
  width: 30px;
  color: #ffffff;
  text-decoration: none;
}
.x-header-mark svg { width: 100%; height: auto; fill: currentColor; }

.x-header-title {
  font: var(--x-font-mono);
  letter-spacing: 0.01em;
  color: #ffffff;
}

.x-header-folio {
  margin-left: auto;
  font: var(--x-font-mono);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
}
.x-header-folio span { transition: opacity 150ms var(--ease-out); display: inline-block; }
.x-header-folio span.is-fading { opacity: 0; }

/* ── Cover ────────────────────────────────────────────────── */

.x-cover {
  position: relative;
  height: 100svh;
  display: grid;
  place-items: center;
}

.x-cover-sig {
  width: min(480px, 56vw);
  color: var(--x-ink);
}
.x-cover-sig svg { width: 100%; height: auto; fill: currentColor; }

/* Pre-draw state: an outline waiting for ink. JS animates
   dashoffset (the pen), then fill (the ink arriving). */
.js:not(.x-reduced) .x-cover-sig svg {
  fill-opacity: 0;
  stroke: currentColor;
  stroke-width: 1.25px;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.js:not(.x-reduced) .x-cover-sig.is-drawn svg {
  fill-opacity: 1;
  stroke: none;
}
.x-cover-sig.is-docked { visibility: hidden; }

.x-cover-lines { display: contents; }

.x-cover-line {
  position: absolute;
  bottom: var(--space-5);
  max-width: 44ch;
}
.x-cover-line--left  { left: var(--space-6); }
.x-cover-line--right { right: var(--space-6); text-align: right; }

/* ── Front matter — title + contents ──────────────────────── */

.x-frontmatter { padding-top: var(--space-24); }

.x-title {
  font: var(--x-font-title);
  letter-spacing: -0.03em;
  color: var(--x-ink);
}

.x-lede {
  font: var(--x-font-lede);
  letter-spacing: -0.01em;
  margin-top: var(--space-10);
  max-width: 30em;
}

.x-meta { margin-top: var(--space-2); }
.x-meta div { display: flex; gap: var(--space-3); }
.x-meta dt { min-width: 64px; }
.x-meta dd { color: var(--x-ink); }

.x-contents { margin-top: var(--space-24); }

.x-contents-list { list-style: none; }
.x-contents-list a {
  display: flex;
  align-items: baseline;
  gap: var(--space-6);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--x-rule);
  text-decoration: none;
}
.x-contents-list li:last-child a { border-bottom: 1px solid var(--x-rule); }
.x-contents-list a span:last-child { color: var(--x-ink); }
.x-contents-list a:hover span:last-child {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ── Chapters ─────────────────────────────────────────────── */

.x-chapter { margin-top: var(--space-40); }

.x-chapter-head {
  border-top: 1px solid var(--x-rule);
  padding-top: var(--space-5);
}

.x-chapter-title {
  font: var(--x-font-chapter);
  letter-spacing: -0.02em;
}

/* ── Figures ──────────────────────────────────────────────── */

.x-fig figcaption { margin-top: var(--space-2); }

.x-fig--framed { border: 1px solid var(--x-rule); }
.x-fig--framed figcaption {
  border-top: 1px solid var(--x-rule);
  padding: var(--space-3) var(--space-4);
  margin-top: 0;
}
.x-fig--framed img,
.x-fig--framed video { width: 100%; height: auto; }

.x-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}
.x-pair img { width: 100%; height: auto; filter: grayscale(1); }

/* Full-bleed plate — one of exactly two frame-breaks */
.x-plate {
  position: relative;
  margin-top: var(--space-16);
}
.x-plate img {
  width: 100%;
  height: 100svh;
  object-fit: cover;
  filter: grayscale(1);
}
.x-plate-label {
  position: absolute;
  right: var(--space-6);
  bottom: var(--space-5);
  color: #ffffff;
  mix-blend-mode: difference;
}

/* Full-bleed film — the second frame-break */
.x-bleed { margin-top: var(--space-16); }
.x-bleed video { width: 100%; height: auto; }

.x-frieze { margin-top: var(--space-16); }
.x-frieze img { width: 100%; height: auto; }

/* ── Chapter 1 — three tensions ───────────────────────────── */

.x-tensions { border-bottom: 1px solid var(--x-rule); }
.x-tension {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 96px;
  border-top: 1px solid var(--x-rule);
  font: var(--x-font-lede);
  letter-spacing: -0.01em;
}
/* The rule sits nearer the word that won. */
.x-tension::after {
  content: "";
  position: absolute;
  left: var(--rule-x, 50%);
  top: var(--space-4);
  bottom: var(--space-4);
  width: 1px;
  background: var(--x-rule);
}

/* ── Chapter 2 — personas, pull quote ─────────────────────── */

.x-personas { list-style: none; border-bottom: 1px solid var(--x-rule); }
.x-personas li {
  display: grid;
  grid-template-columns: 40px 236px 1fr auto;
  column-gap: var(--space-6);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--x-rule);
}
.x-personas-q { color: var(--x-ink-soft); }
.x-personas-role { text-align: right; }

.x-quoteblock { margin-top: var(--space-16); }
.x-quote {
  grid-column: 4 / 11;
  font: var(--x-font-lede);
  letter-spacing: -0.01em;
  padding-bottom: var(--space-6);
  /* Coral appears here, and nowhere else. */
  border-bottom: 2px solid var(--x-coral);
}

/* ── Chapter 3 — the four states ──────────────────────────── */

.x-states {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.x-state-box {
  border: 1px solid var(--x-rule);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: var(--space-6);
}
.x-state-box img {
  max-width: 72%;
  max-height: 104px;
  width: auto;
  height: auto;
}
.x-state figcaption { margin-top: var(--space-2); }

/* ── Chapter 5 — the ledger ───────────────────────────────── */

.x-ledger { list-style: none; border-bottom: 1px solid var(--x-rule); }
.x-ledger li {
  display: grid;
  grid-template-columns: 128px 1fr 232px;
  column-gap: var(--space-6);
  align-items: baseline;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--x-rule);
}
.x-ledger-delta { text-align: right; }

/* ── Chapter 6 — swatches, token table ────────────────────── */

.x-swatches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.x-swatch-chip {
  height: 112px;
  border-radius: var(--radius-sharp);
  display: grid;
  place-items: center;
}
.x-swatch-chip--paper { background: var(--x-paper); border: 1px solid var(--x-rule); }
.x-swatch-chip--ink   { background: var(--x-ink); }
/* Coral, held in reserve — the chip performs the restraint. */
.x-swatch-chip--coral { background: var(--x-paper); border: 1px solid var(--x-rule); }
.x-swatch figcaption { margin-top: var(--space-2); }

.x-tokentable { border-bottom: 1px solid var(--x-rule); }
.x-tokentable div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-6);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--x-rule);
}

.x-footnote { margin-top: var(--space-6); max-width: 58ch; }

/* ── Chapter 7 — steps, standalone line ───────────────────── */

.x-steps { list-style: none; border-bottom: 1px solid var(--x-rule); }
.x-steps li {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: var(--space-6);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--x-rule);
}

.x-standalone {
  font: var(--x-font-lede);
  letter-spacing: -0.01em;
}

/* ── Chapter 8 — lessons, credits ─────────────────────────── */

.x-lessons { list-style: none; border-bottom: 1px solid var(--x-rule); }
.x-lessons li {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: var(--space-6);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--x-rule);
}

.x-credits { border-bottom: 1px solid var(--x-rule); }
.x-credits div {
  display: grid;
  grid-template-columns: 236px 1fr;
  column-gap: var(--space-6);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--x-rule);
}
.x-credits dd { color: var(--x-ink); font: var(--x-font-body); }

/* ── Colophon ─────────────────────────────────────────────── */

.x-colophon {
  margin-top: 240px;
  padding-bottom: var(--space-48);
}

.x-inventory { border-bottom: 1px solid var(--x-rule); }
.x-inventory div {
  display: grid;
  grid-template-columns: 236px 1fr;
  column-gap: var(--space-6);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--x-rule);
}

.x-colophon-set { margin-top: var(--space-8); max-width: 58ch; }
.x-colophon-links { margin-top: var(--space-6); }

.x-colophon-mark {
  width: 44px;
  margin-top: var(--space-16);
  color: var(--x-ink);
}
.x-colophon-mark svg { width: 100%; height: auto; fill: currentColor; }

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 1024px) {
  .x-frame { padding-inline: var(--space-12); }
  /* Marginalia fold inline, above their block */
  .x-note  { grid-column: 1 / -1; margin-bottom: var(--space-4); }
  .x-prose { grid-column: 1 / -1; max-width: 640px; }
  .x-wide  { grid-column: 1 / -1; }
  .x-quote { grid-column: 1 / -1; max-width: 640px; }
  .x-personas li { grid-template-columns: 40px 1fr auto; }
  .x-personas-q { grid-column: 2 / 4; grid-row: 2; margin-top: var(--space-1); }
}

@media (max-width: 640px) {
  .x-frame { padding-inline: var(--space-6); }
  :root {
    --x-font-title: 300 44px/48px "Suisse Int'l Light", Inter, sans-serif;
  }
  .x-cover-sig { width: 72vw; }
  .x-cover-line { position: static; max-width: none; }
  .x-cover-line--right { text-align: left; margin-top: var(--space-2); }
  .x-cover {
    grid-template-rows: 1fr auto;
    place-items: center start;
    padding: var(--space-6);
  }
  .x-cover-sig { align-self: center; justify-self: center; }
  .x-cover-lines { display: block; align-self: end; }
  .x-chapter { margin-top: var(--space-32); }
  .x-states { grid-template-columns: 1fr 1fr; }
  .x-pair { grid-template-columns: 1fr; }
  .x-tension { min-height: 72px; }
  .x-personas li { grid-template-columns: 40px 1fr; }
  .x-personas-role { grid-column: 2; text-align: left; margin-top: var(--space-1); }
  .x-personas-q { grid-column: 2; }
  .x-ledger li { grid-template-columns: 1fr; row-gap: var(--space-2); }
  .x-ledger-delta { text-align: left; }
  .x-swatches { grid-template-columns: 1fr; }
  .x-tokentable div { grid-template-columns: 1fr; row-gap: var(--space-1); }
  .x-credits div, .x-inventory div { grid-template-columns: 1fr; row-gap: var(--space-1); }
  .x-colophon { margin-top: var(--space-32); }
}

/* ── Reduced motion — the catalogue arrives already set ───── */

@media (prefers-reduced-motion: reduce) {
  a { transition: none; }
  .x-header-folio span { transition: none; }
}