/* ==========================================================================
   Chipira — Editorial Luxury stylesheet
   Pure CSS3. No frameworks. Composed entirely from /css/tokens.css.

   Structural law of this system:
   Sections are separated by WHITESPACE + PAPER TONE + TYPE HIERARCHY.
   There are no borders, rules or <hr> between sections — anywhere.
   Editorial hairlines live INSIDE compositions only (kickers, index rows,
   FAQ rows, footers, quotes).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--space-8));
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga" 1, "kern" 1;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
svg { fill: currentColor; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--ink);
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.015em;
}
h1 { font-size: var(--fs-h1); line-height: 1.06; font-weight: 450; }
h2 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.01em; }
h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.005em; }
h4 { font-size: var(--fs-h4); line-height: 1.3; letter-spacing: 0; }
h5, h6 { font-size: var(--fs-body-lg); line-height: 1.35; letter-spacing: 0; }

p { margin: 0; max-width: 68ch; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }

a {
  color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--accent-hover); }

::selection { background: var(--accent-soft); color: var(--ink); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 200;
  background: var(--ink);
  color: var(--text-on-ink);
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius-sm);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   2. Layout primitives — containers, sections, editorial grid
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--margin);
}
.container--text { max-width: calc(var(--container-text) + var(--margin) * 2); }
.container--md   { max-width: calc(var(--container-md) + var(--margin) * 2); }
.container--lg   { max-width: calc(var(--container-lg) + var(--margin) * 2); }
.container--wide { max-width: calc(var(--container-2xl) + var(--margin) * 2); }

/* No borders between sections. Ever — and no change of paper either: the
   bone, warm and ink variants are kept as class names but every one of them
   now resolves to the single canvas, in ink on paper. Two stacked sections
   share one gap rather than doubling it. */
.section { padding-block: var(--section-y); border: 0; position: relative; background: var(--paper); }
.section + .section { border-top: 0; padding-top: 0; }
.section + .section.section--keep-top { padding-top: var(--section-y); }
.section--opener { padding-block: var(--section-y-lg); }
.section--tight  { padding-block: clamp(56px, 7vw, 104px); }
.section--bone,
.section--warm,
.section--ink {
  background: var(--paper);
  color: var(--text-secondary);
}
.section--ink h1, .section--ink h2, .section--ink h3,
.section--ink h4, .section--ink h5, .section--ink h6 { color: var(--ink); }
.section--ink .kicker { color: var(--text-muted); }
.section--ink .kicker::after { background: var(--rule-default); }
.section--ink .deck,
.section--ink p { color: var(--text-secondary); }
.section--ink .muted, .section--ink figcaption { color: var(--text-muted); }
.section--ink a { color: var(--accent-press); }
.section--ink .link-underline { color: var(--text-primary); border-bottom-color: var(--rule-default); }
.section--ink .link-underline:hover { border-bottom-color: var(--text-primary); }

.grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
}
.col-text  { grid-column: 2 / 8; }
.col-wide  { grid-column: 2 / 12; }
.col-left  { grid-column: 1 / 7; }
.col-right { grid-column: 7 / 13; }
.col-lead  { grid-column: 1 / 6; }
.col-body  { grid-column: 6 / 13; }
.col-aside { grid-column: 9 / 12; }
.col-full  { grid-column: 1 / -1; }

.stack > * + * { margin-top: var(--stack); }
.stack-sm > * + * { margin-top: var(--space-3); }
.stack-lg > * + * { margin-top: var(--space-10); }

.bleed { width: 100vw; margin-inline: calc(50% - 50vw); }

/* --------------------------------------------------------------------------
   3. Editorial typographic primitives
   -------------------------------------------------------------------------- */
.kicker {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}
.kicker::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: var(--rule-default);
  margin-top: var(--space-3);
}
.kicker--plain::after { display: none; }

.display {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

.deck {
  font-size: var(--fs-deck);
  line-height: 1.45;
  color: var(--text-secondary);
  max-width: 56ch;
  font-weight: 300;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 62ch;
}

.prose { max-width: 68ch; }
.prose p + p { margin-top: var(--space-6); }
.prose h3 { margin-top: var(--space-12); margin-bottom: var(--space-4); }
.prose h4 { margin-top: var(--space-10); margin-bottom: var(--space-3); }
.prose ul, .prose ol { margin-top: var(--space-5); padding-left: 1.2em; }
.prose li { margin-bottom: var(--space-3); }
.prose ul { list-style: none; padding-left: 0; }
.prose ul > li { position: relative; padding-left: var(--space-6); }
.prose ul > li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 12px; height: 1px;
  background: var(--rule-strong);
}

.has-dropcap::first-letter {
  font-family: var(--font-serif);
  float: left;
  font-size: 3.4em;
  line-height: 0.8;
  padding-right: 0.08em;
  padding-top: 0.06em;
  font-weight: 400;
  color: var(--ink);
}

.muted { color: var(--text-muted); }
.small { font-size: var(--fs-small); }
.serif { font-family: var(--font-serif); }
.mono  { font-family: var(--font-mono); font-size: 0.9em; letter-spacing: -0.01em; }
.tnum  { font-variant-numeric: tabular-nums; }

.section-number {
  font-family: var(--font-mono);
  font-size: var(--fs-kicker);
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.accent-word { color: var(--accent); font-style: italic; }

/* --------------------------------------------------------------------------
   4. Buttons & links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  line-height: 1;
  min-height: 44px;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn-primary { background: var(--ink); color: var(--text-on-ink); }
.btn-primary:hover { background: var(--accent); color: var(--text-on-accent); }
.btn-primary:active { background: var(--accent-press); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn-outline:hover { border-color: var(--ink); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); padding-inline: var(--space-2); }
.btn-ghost:hover { color: var(--accent); }

.link-underline {
  display: inline-block;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--rule-default);
  transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.link-underline:hover { border-bottom-color: var(--ink); color: var(--ink); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
}
.link-arrow .arw { transition: transform var(--dur-base) var(--ease-out); }
.link-arrow:hover { color: var(--accent); }
.link-arrow:hover .arw { transform: translateX(5px); }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
}

/* --------------------------------------------------------------------------
   5. Navbar
   -------------------------------------------------------------------------- */
/* The header is the paper itself: solid, unblurred, and it never grows a
   rule under it. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
}
.site-header.is-stuck { background: var(--paper); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  min-height: var(--nav-h);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
}
.wordmark .mark { width: 22px; height: 22px; color: var(--accent); flex: none; }
.wordmark:hover { color: var(--ink); }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  list-style: none;
}
.nav-links > li { position: relative; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  text-decoration: none;
  background: none;
  border: 0;
  padding: var(--space-3) 0;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-link:hover { color: var(--ink); }
.nav-link[aria-current="page"] { color: var(--ink); }
.nav-link .chev { width: 9px; height: 9px; transition: transform var(--dur-fast) var(--ease-out); }
.nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }

.nav-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, -6px);
  min-width: 520px;
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-10);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
              visibility var(--dur-base);
}
.nav-panel[data-open="true"] {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
}
.nav-panel a {
  display: block;
  text-decoration: none;
  padding: var(--space-3) 0;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--rule-subtle); /* hairline INSIDE a composition */
}
.nav-panel a:last-child { border-bottom: 0; }
.nav-panel a strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.nav-panel a span { font-size: var(--fs-small); color: var(--text-muted); }
.nav-panel a:hover strong { color: var(--accent); }

.nav-cta { display: flex; align-items: center; gap: var(--space-5); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-right: -10px;
  background: none; border: 0; cursor: pointer; color: var(--ink);
}
.nav-toggle .bar {
  display: block; width: 22px; height: 1px; background: currentColor;
  position: relative;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) linear;
}
.nav-toggle .bar::before, .nav-toggle .bar::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 1px; background: currentColor;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav-toggle .bar::before { top: -7px; }
.nav-toggle .bar::after  { top: 7px; }
.nav-toggle[aria-expanded="true"] .bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .bar::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar::after  { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--paper);
  padding: calc(var(--nav-h) + var(--space-10)) var(--margin) var(--space-16);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
              visibility var(--dur-base);
}
.mobile-menu[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
.mobile-menu ul { list-style: none; }
.mobile-menu .m-group + .m-group { margin-top: var(--space-10); }
.mobile-menu .m-label {
  font-size: var(--fs-kicker); font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--rule-default);
  display: block;
  margin-bottom: var(--space-4);
}
.mobile-menu a {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  padding: var(--space-2) 0;
  letter-spacing: -0.01em;
}
.mobile-menu a:hover { color: var(--accent); }
.mobile-menu .m-actions { margin-top: var(--space-12); display: grid; gap: var(--space-4); }

body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   6. Breadcrumbs
   -------------------------------------------------------------------------- */
.breadcrumb { padding-top: var(--space-8); }
.breadcrumb ol {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2); list-style: none;
  font-size: var(--fs-small); color: var(--text-muted);
}
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .sep { color: var(--text-faint); }
.breadcrumb [aria-current="page"] { color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero { padding-block: clamp(56px, 8vw, 120px) var(--section-y); border: 0; }
.hero .hero-grid { align-items: end; }
.hero-copy { grid-column: 1 / 8; }
.hero-plate { grid-column: 8 / 13; }
.hero .display { margin-top: var(--space-8); }
.hero .deck { margin-top: var(--space-8); }
.hero .actions { margin-top: var(--space-10); }
.hero-meta {
  margin-top: var(--space-16);
  display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-12);
  font-size: var(--fs-small); color: var(--text-muted);
}
.hero-meta div { max-width: 22ch; }
.hero-meta strong {
  display: block; font-family: var(--font-serif); font-size: 1.5rem;
  font-weight: 500; color: var(--ink); letter-spacing: -0.01em; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.hero--center { text-align: center; }
.hero--center .deck, .hero--center p { margin-inline: auto; }
.hero--center .actions { justify-content: center; }
.hero--center .kicker::after { margin-inline: auto; }

/* Cover hero (image behind type) */
.hero-cover {
  position: relative;
  min-height: clamp(440px, 62vh, 680px);
  display: grid;
  align-items: end;
  overflow: hidden;
  border: 0;
}
.hero-cover .cover-art { position: absolute; inset: 0; }
.hero-cover .cover-art img,
.hero-cover .cover-art svg { width: 100%; height: 100%; object-fit: cover; }
/* A cover scrim is a single flat value over the art, not a fade. */
.hero-cover .scrim {
  position: absolute; inset: 0;
  background: rgba(26,25,21,.58);
}
.hero-cover .cover-copy { position: relative; padding-block: var(--space-20); }
.hero-cover .cover-copy h1, .hero-cover .cover-copy .display { color: #f7f3ea; }
.hero-cover .cover-copy .deck { color: #ece7da; }
.hero-cover .cover-copy .kicker { color: #cfc7b4; }
.hero-cover .cover-copy .kicker::after { background: rgba(240,236,226,.34); }
.hero-cover .link-underline { color: #f7f3ea; border-bottom-color: rgba(240,236,226,.4); }
.hero-cover .link-underline:hover { border-bottom-color: #f7f3ea; }

/* --------------------------------------------------------------------------
   8. Plates (art-directed figures)
   -------------------------------------------------------------------------- */
.plate figure, figure.plate-fig { margin: 0; }
.plate-img {
  display: block;
  width: 100%;
  background: var(--surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--dur-slow) var(--ease-out);
}
a.plate-link:hover .plate-img { transform: translateY(-3px); }
figcaption {
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 46ch;
}
figcaption .credit { font-style: italic; }

/* --------------------------------------------------------------------------
   9. Alternating plates (F-B)
   -------------------------------------------------------------------------- */
.plates { display: grid; gap: var(--space-32); }
.plate-row { align-items: center; }
.plate-row .p-copy { grid-column: 1 / 6; }
.plate-row .p-art  { grid-column: 7 / 13; }
.plate-row.is-flipped .p-copy { grid-column: 8 / 13; }
.plate-row.is-flipped .p-art  { grid-column: 1 / 7; }
.plate-row h3 { margin-top: var(--space-5); }
.plate-row p { margin-top: var(--space-5); }
.plate-row .link-arrow { margin-top: var(--space-8); }

/* --------------------------------------------------------------------------
   10. Index list (F-C) — hairlines INSIDE the list
   -------------------------------------------------------------------------- */
.index-list { list-style: none; margin-top: var(--space-12); }
.index-list > li { border-top: 1px solid var(--rule-default); }
.index-list > li:last-child { border-bottom: 1px solid var(--rule-default); }
.index-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--space-6);
  padding-block: var(--space-8);
  align-items: start;
  text-decoration: none;
  color: inherit;
}
@media (min-width: 901px) {
  .index-row { grid-template-columns: 72px minmax(0, 4fr) minmax(0, 6fr) auto; gap: var(--space-8); }
}
.index-row .num {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--text-muted);
  padding-top: 0.45em;
  font-variant-numeric: tabular-nums;
}
.index-row h3, .index-row .idx-title {
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  transition: color var(--dur-fast) var(--ease-out);
}
.index-row p { color: var(--text-secondary); max-width: 56ch; }
.index-row .arw-cell { color: var(--text-muted); padding-top: 0.4em; }
a.index-row:hover h3, a.index-row:hover .idx-title { color: var(--accent); }
a.index-row:hover .arw-cell { color: var(--accent); transform: translateX(4px); }
.index-row .arw-cell { transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.section--ink .index-list > li { border-color: var(--rule-on-ink); }
.section--ink .index-row h3, .section--ink .index-row .idx-title { color: #f7f3ea; }
.section--ink .index-row .num, .section--ink .index-row p { color: var(--text-on-ink-muted); }

/* --------------------------------------------------------------------------
   11. Pull quote (C-5)
   -------------------------------------------------------------------------- */
.pull-quote { margin: 0; }
.pull-quote .q {
  font-family: var(--font-serif);
  font-size: var(--fs-quote);
  font-style: italic;
  font-weight: 400;
  line-height: 1.24;
  color: var(--ink);
  letter-spacing: -0.01em;
  max-width: 26ch;
  padding-top: var(--space-8);
  border-top: 1px solid var(--rule-default); /* hairline INSIDE the quote composition */
}
.pull-quote .q p { max-width: none; }
.pull-quote cite {
  display: block;
  margin-top: var(--space-8);
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.8;
}
.pull-quote cite span { display: block; letter-spacing: 0.08em; font-weight: 400; text-transform: none; font-size: var(--fs-small); }
.section--ink .pull-quote .q { color: #f7f3ea; border-top-color: var(--rule-on-ink); }
.section--ink .pull-quote cite { color: var(--text-on-ink-muted); }

.quote-columns { display: grid; gap: var(--space-16); }
@media (min-width: 901px) { .quote-columns { grid-template-columns: repeat(3, 1fr); gap: var(--space-12); } }
.quote-columns .pull-quote .q { font-size: var(--fs-h4); font-style: italic; max-width: none; }

/* --------------------------------------------------------------------------
   12. Editorial figures (statistics)
   -------------------------------------------------------------------------- */
.figures { list-style: none; display: grid; gap: 0; margin-top: var(--space-12); }
@media (min-width: 720px) { .figures { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-12); } }
@media (min-width: 1024px) { .figures { grid-template-columns: repeat(4, 1fr); } }
.figures > li { border-top: 1px solid var(--rule-default); padding-block: var(--space-8); }
.fig-num {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fs-figure);
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.fig-label {
  display: block;
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  color: var(--text-muted);
  max-width: 26ch;
}
.figures > li.is-accent .fig-num { color: var(--accent); }
.section--ink .figures > li { border-color: var(--rule-on-ink); }
.section--ink .fig-num { color: #f7f3ea; }
.section--ink .figures > li.is-accent .fig-num { color: var(--accent-on-ink); }
.section--ink .fig-label { color: var(--text-on-ink-muted); }

/* --------------------------------------------------------------------------
   13. Logos / trust row
   -------------------------------------------------------------------------- */
.logo-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-10) var(--space-16);
  margin-top: var(--space-10);
}
.logo-row li {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
  opacity: 0.68;
  transition: opacity var(--dur-base) var(--ease-out);
}
.logo-row li:hover { opacity: 1; }
.section--ink .logo-row li { color: #f7f3ea; }

/* --------------------------------------------------------------------------
   14. Agent / process sequence (numbered)
   -------------------------------------------------------------------------- */
.sequence { list-style: none; counter-reset: step; margin-top: var(--space-12); }
.sequence > li {
  border-top: 1px solid var(--rule-default);
  padding-block: var(--space-10);
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 901px) {
  .sequence > li { grid-template-columns: 88px minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-8); align-items: start; }
}
.sequence > li:last-child { border-bottom: 1px solid var(--rule-default); }
.sequence .step-no {
  counter-increment: step;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  padding-top: 0.35em;
}
.sequence .step-no::before { content: "0" counter(step); }
.sequence h3 { font-size: var(--fs-h4); }
.sequence .step-body { color: var(--text-secondary); }
.section--ink .sequence > li { border-color: var(--rule-on-ink); }
.section--ink .sequence .step-no { color: var(--accent-on-ink); }

/* --------------------------------------------------------------------------
   15. Spec / definition lists
   -------------------------------------------------------------------------- */
.spec-list { margin-top: var(--space-10); }
.spec-list div {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-6);
  border-top: 1px solid var(--rule-default);
}
@media (min-width: 901px) {
  .spec-list div { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-10); align-items: baseline; }
}
.spec-list div:last-child { border-bottom: 1px solid var(--rule-default); }
.spec-list dt {
  font-family: var(--font-sans);
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.spec-list dd { margin: 0; color: var(--text-secondary); }
.spec-list dd strong { color: var(--ink); font-weight: 600; }
.section--ink .spec-list div { border-color: var(--rule-on-ink); }
.section--ink .spec-list dt { color: var(--text-on-ink-muted); }
.section--ink .spec-list dd { color: var(--text-on-ink); }

/* --------------------------------------------------------------------------
   16. Editorial columns (feature triads, personas, cards-without-cards)
   -------------------------------------------------------------------------- */
.columns { display: grid; gap: var(--space-12); margin-top: var(--space-12); }
@media (min-width: 760px)  { .columns--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .columns--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .columns--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 760px)  { .columns--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .columns--4 { grid-template-columns: repeat(4, 1fr); } }

.col-item { padding-top: var(--space-6); border-top: 1px solid var(--rule-default); }
.col-item h3 { font-size: var(--fs-h4); margin-bottom: var(--space-4); }
.col-item p { color: var(--text-secondary); }
.col-item .kicker { margin-bottom: var(--space-4); }
.col-item .kicker::after { display: none; }
.col-item ul { list-style: none; margin-top: var(--space-5); }
.col-item ul li { position: relative; padding-left: var(--space-6); margin-bottom: var(--space-2); font-size: var(--fs-small); color: var(--text-secondary); }
.col-item ul li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 10px; height: 1px; background: var(--rule-strong); }
.section--ink .col-item { border-color: var(--rule-on-ink); }
.section--ink .col-item p, .section--ink .col-item ul li { color: var(--text-on-ink); }
.section--ink .col-item ul li::before { background: var(--rule-on-ink-strong); }

/* --------------------------------------------------------------------------
   17. Pricing (P-A) — quiet typographic columns
   -------------------------------------------------------------------------- */
.tiers { display: grid; gap: var(--space-12); margin-top: var(--space-16); }
@media (min-width: 900px) { .tiers { grid-template-columns: repeat(3, 1fr); gap: var(--space-10); } }
.tier { padding-top: var(--space-6); border-top: 1px solid var(--rule-strong); display: flex; flex-direction: column; }
.tier .tier-name {
  font-family: var(--font-sans); font-size: var(--fs-kicker); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted);
}
.tier .tier-rec { color: var(--accent); }
.tier .amount {
  display: block; margin-top: var(--space-6);
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 2rem + 2vw, 3.75rem);
  font-weight: 400; line-height: 1; letter-spacing: -0.02em; color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.tier .unit { display: block; margin-top: var(--space-3); font-size: var(--fs-small); color: var(--text-muted); }
.tier .tier-desc { margin-top: var(--space-6); color: var(--text-secondary); font-size: var(--fs-small); }
.tier ul { list-style: none; margin-top: var(--space-8); }
.tier ul li {
  padding-block: var(--space-4);
  border-top: 1px solid var(--rule-subtle);
  font-size: var(--fs-small);
  color: var(--text-secondary);
}
.tier .tier-cta { margin-top: var(--space-8); }
.tier-toggle {
  display: inline-flex; align-items: center; gap: var(--space-4);
  margin-top: var(--space-10); font-size: var(--fs-small); color: var(--text-muted);
}
.switch {
  position: relative; width: 52px; height: 28px; border-radius: var(--radius-pill);
  background: transparent; border: 1px solid var(--rule-strong); cursor: pointer; padding: 0;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--ink);
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.switch[aria-checked="true"] { background: var(--accent-soft); border-color: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(24px); background: var(--accent); }

/* --------------------------------------------------------------------------
   18. FAQ (Q-A)
   -------------------------------------------------------------------------- */
.faq { list-style: none; margin-top: var(--space-12); counter-reset: q; }
.faq > li { border-top: 1px solid var(--rule-default); }
.faq > li:last-child { border-bottom: 1px solid var(--rule-default); }
.faq-q {
  width: 100%;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 24px;
  gap: var(--space-4);
  align-items: start;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  padding-block: var(--space-8);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.faq-q .qn {
  counter-increment: q;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--text-muted);
  padding-top: 0.4em;
  font-variant-numeric: tabular-nums;
}
.faq-q .qn::before { content: "0" counter(q); }
.faq-q:hover { color: var(--accent); }
.faq-q .sign { position: relative; width: 14px; height: 14px; margin-top: 0.55em; justify-self: end; }
.faq-q .sign::before, .faq-q .sign::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 1px; background: currentColor;
}
.faq-q .sign::after { transform: rotate(90deg); transition: transform var(--dur-base) var(--ease-out); }
.faq-q[aria-expanded="true"] .sign::after { transform: rotate(0deg); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-editorial);
}
.faq-a > div { overflow: hidden; }
.faq-a[data-open="true"] { grid-template-rows: 1fr; }
.faq-a p {
  padding: 0 var(--space-10) var(--space-10) 64px;
  color: var(--text-secondary);
  max-width: 68ch;
}
@media (max-width: 640px) { .faq-a p { padding-left: 0; padding-right: 0; } }

/* --------------------------------------------------------------------------
   19. Code & terminal previews
   -------------------------------------------------------------------------- */
.code-block {
  background: var(--paper-ink);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.code-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--rule-on-ink); /* hairline INSIDE the component */
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--text-on-ink-muted);
}
.code-block pre {
  margin: 0;
  padding: var(--space-6);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--text-on-ink);
  -webkit-overflow-scrolling: touch;
}
.code-block .c-key { color: #c9a961; }
.code-block .c-str { color: #a8bf9a; }
.code-block .c-com { color: #857d6c; font-style: italic; }
.code-block .c-fn  { color: #d9cdb2; }
.copy-btn {
  background: none; border: 1px solid var(--rule-on-ink); color: var(--text-on-ink-muted);
  font-family: var(--font-mono); font-size: var(--fs-kicker); letter-spacing: 0.06em;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.copy-btn:hover { color: var(--text-on-ink); border-color: var(--rule-on-ink-strong); }

.terminal { background: var(--paper-ink); border-radius: var(--radius-md); overflow: hidden; }
.terminal pre {
  margin: 0; padding: var(--space-6); overflow-x: auto;
  font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.9; color: var(--text-on-ink);
}
.terminal .prompt { color: var(--accent-on-ink); }
.terminal .dim { color: var(--text-on-ink-muted); }
.terminal .ok { color: #8fae82; }

/* --------------------------------------------------------------------------
   20. Editorial table
   -------------------------------------------------------------------------- */
.table-wrap { margin-top: var(--space-12); overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.editorial {
  width: 100%; border-collapse: collapse; min-width: 640px;
  font-size: var(--fs-small);
}
table.editorial caption {
  text-align: left; color: var(--text-muted); font-size: var(--fs-small);
  padding-bottom: var(--space-4);
}
table.editorial th, table.editorial td {
  text-align: left; padding: var(--space-5) var(--space-6) var(--space-5) 0;
  border-top: 1px solid var(--rule-default); vertical-align: top;
}
table.editorial thead th {
  border-top: 0;
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--font-sans); font-size: var(--fs-kicker); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
  padding-bottom: var(--space-4);
}
table.editorial tbody th {
  font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 500; color: var(--ink);
}
table.editorial td { color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   21. Notes / asides / callouts (quiet)
   -------------------------------------------------------------------------- */
.aside-note {
  padding-left: var(--space-6);
  border-left: 1px solid var(--rule-strong); /* hairline INSIDE a composition */
  color: var(--text-muted);
  font-size: var(--fs-small);
  max-width: 34ch;
}
.aside-note .label {
  display: block; font-size: var(--fs-kicker); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-kicker); font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--rule-default);
  border-radius: var(--radius-pill);
}
.badge--accent { color: var(--accent); border-color: var(--accent); }

/* --------------------------------------------------------------------------
   22. Forms
   -------------------------------------------------------------------------- */
.form { margin-top: var(--space-12); display: grid; gap: var(--space-8); max-width: 620px; }
.field { display: grid; gap: var(--space-3); }
.field label {
  font-size: var(--fs-kicker); font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted);
}
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: var(--fs-body);
  color: var(--text-primary);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  padding: var(--space-3) 0;
  min-height: 44px;
  border-radius: 0;
  transition: border-color var(--dur-base) var(--ease-out);
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.7; }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--accent); }
.field .hint { font-size: var(--fs-small); color: var(--text-muted); text-transform: none; letter-spacing: 0; font-weight: 400; }
.form-grid { display: grid; gap: var(--space-8); }
@media (min-width: 720px) { .form-grid { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------------------------
   23. Footer (FT-A)
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--paper-ink);
  color: var(--text-on-ink);
  padding-block: var(--space-24) var(--space-12);
  border: 0;
}
.footer-top { display: grid; gap: var(--space-16); }
@media (min-width: 1000px) { .footer-top { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: var(--space-20); } }
.footer-brand .wordmark { color: #f7f3ea; font-size: 1.625rem; }
.footer-brand .wordmark .mark { color: var(--accent-on-ink); width: 26px; height: 26px; }
.footer-brand p { margin-top: var(--space-6); color: var(--text-on-ink-muted); font-size: var(--fs-small); max-width: 34ch; }
.footer-cols { display: grid; gap: var(--space-12); }
@media (min-width: 620px) { .footer-cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .footer-cols { grid-template-columns: repeat(4, 1fr); gap: var(--space-8); } }
.footer-cols h2, .footer-cols .f-label {
  font-family: var(--font-sans); font-size: var(--fs-kicker); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-on-ink-muted);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--rule-on-ink); /* hairline INSIDE the footer */
  margin-bottom: var(--space-5);
}
.footer-cols ul { list-style: none; display: grid; gap: var(--space-3); }
.footer-cols a { color: var(--text-on-ink); text-decoration: none; font-size: var(--fs-small); }
.footer-cols a:hover { color: var(--accent-on-ink); }
.footer-base {
  margin-top: var(--space-20);
  padding-top: var(--space-8);
  border-top: 1px solid var(--rule-on-ink); /* hairline INSIDE the footer */
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-5);
  font-size: var(--fs-small); color: var(--text-on-ink-muted);
}
.footer-base p { margin: 0; font-variant-numeric: oldstyle-nums; }
.footer-base ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-6); }
.footer-base a { color: var(--text-on-ink-muted); text-decoration: none; }
.footer-base a:hover { color: var(--text-on-ink); }

/* --------------------------------------------------------------------------
   24. Motion — quiet, unhurried reveals
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
[data-reveal].in { opacity: 1; transform: none; }

[data-lines] .line {
  display: block;
  opacity: 0;
  transform: translateY(0.42em);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
[data-lines].in .line { opacity: 1; transform: none; }

.plate .plate-img, .plate-img[data-curtain] {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.04);
  transition: clip-path var(--dur-slower) var(--ease-editorial),
              transform var(--dur-slower) var(--ease-editorial);
}
.plate.in .plate-img, .plate-img[data-curtain].in { clip-path: inset(0 0 0 0); transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-lines] .line { opacity: 1 !important; transform: none !important; }
  .plate .plate-img, .plate-img[data-curtain] { clip-path: none !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   25. Responsive — asymmetric grid collapses to one well-spaced column
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .nav-panel { min-width: 460px; }
}

@media (max-width: 980px) {
  .nav-links, .nav-cta .btn { display: none; }
  .nav-toggle { display: inline-flex; }
  .hero-copy, .hero-plate { grid-column: 1 / -1; }
  .hero-plate { margin-top: var(--space-12); }
}

@media (max-width: 900px) {
  .col-text, .col-wide, .col-left, .col-right,
  .col-lead, .col-body, .col-aside, .col-full { grid-column: 1 / -1; }
  .plate-row .p-copy, .plate-row .p-art,
  .plate-row.is-flipped .p-copy, .plate-row.is-flipped .p-art { grid-column: 1 / -1; }
  .plate-row .p-art { margin-top: var(--space-10); order: 2; }
  .plates { gap: var(--space-24); }
  .aside-note { max-width: none; margin-top: var(--space-8); }
}

@media (max-width: 640px) {
  .actions .btn { width: 100%; }
  .hero-meta { gap: var(--space-8); }
  .figures { gap: 0; }
}

@media print {
  .site-header, .mobile-menu, .site-footer { display: none; }
  body { background: #fff; color: #000; }
}