/* ============================================================================
   format.css — LAYER 1: STRUCTURE ONLY
   ----------------------------------------------------------------------------
   Layout, measure, grid, nav, slot scaffolding, and the role-class -> variable
   MAPPINGS. Contains NO colour / font-family / size / spacing LITERALS — every
   such value is read from a custom property (var(--hd-*)). Those properties are
   defined in round-tokens.css (:root, locked) and concept-XX.css (per concept).

   This file is identical for every concept and SAFE to share, because it holds
   no concept-varying value — only the structural contract. (S3b Part A: the
   system is identical across all five; only sequence/emphasis/centre-of-gravity
   vary, and those are expressed through the per-concept variables this file
   consumes.)
   ============================================================================ */

/* ---- reset-ish ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body.hd-concept { margin: 0; font-family: var(--hd-font); color: var(--hd-ink);
  background: var(--hd-ground); font-size: var(--hd-body); line-height: var(--hd-body-lh);
  -webkit-font-smoothing: antialiased; }
body.hd-concept img { max-width: 100%; display: block; }

/* ---- measures (A3: three designed widths + container) ------------------- */
.hd-container { max-width: var(--hd-container); margin-inline: auto; padding-inline: var(--hd-gutter); width: 100%; }
.hd-measure-narrow   { max-width: var(--hd-measure-narrow); }
.hd-measure-standard { max-width: var(--hd-measure-standard); }
.hd-measure-wide     { max-width: var(--hd-measure-wide); }
.hd-measure-narrow, .hd-measure-standard, .hd-measure-wide { margin-inline: auto; width: 100%; }

/* ---- section rhythm (A2) ------------------------------------------------ */
.hd-section { padding-block: var(--hd-section-pad); }      /* standard 96px band */
.hd-hero    { padding-block: var(--hd-hero-pad); }          /* >=120px gate floor */
.hd-cog     { padding-block: var(--hd-cog-pad); }           /* 128px centre-of-gravity */
.hd-band-near  { background: var(--hd-near-white); }
.hd-band-surface { background: var(--hd-surface); }
/* a structural-partner pairing (C1 founder+security): kill the gap between two bands */
.hd-pair-top    { padding-bottom: var(--hd-space-3); }      /* 24px internal seam */
.hd-pair-bottom { padding-top: var(--hd-space-3); }

/* ---- type roles (A1) — sizes/weights/leading all from vars -------------- */
.hd-eyebrow { font-size: var(--hd-small); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--hd-muted); margin: 0 0 var(--hd-space-2); }
.hd-display { font-size: var(--hd-display); font-weight: 700; line-height: var(--hd-display-lh);
  letter-spacing: -0.02em; margin: 0 0 var(--hd-space-4); color: var(--hd-ink); }
.hd-h1 { font-size: var(--hd-h1); font-weight: 600; line-height: var(--hd-h1-lh); margin: 0 0 var(--hd-space-4); }
.hd-h2 { font-size: var(--hd-h2); font-weight: 600; line-height: var(--hd-h2-lh); margin: 0 0 var(--hd-space-3); letter-spacing: -0.01em; }
.hd-h3 { font-size: var(--hd-h3); font-weight: 600; line-height: var(--hd-h3-lh); margin: 0 0 var(--hd-space-2); }
.hd-lead { font-size: var(--hd-lead); font-weight: 400; line-height: var(--hd-lead-lh); color: var(--hd-ink); margin: 0 0 var(--hd-space-4); }
.hd-body { font-size: var(--hd-body); line-height: var(--hd-body-lh); margin: 0 0 var(--hd-space-3); }
.hd-body:last-child { margin-bottom: 0; }
.hd-muted { color: var(--hd-muted); }

/* ---- grids (A4) --------------------------------------------------------- */
.hd-grid { display: grid; gap: var(--hd-space-4); align-items: start; }
.hd-grid--75 { grid-template-columns: 7fr 5fr; }          /* asymmetric explanation+support */
.hd-grid--66 { grid-template-columns: 1fr 1fr; }          /* symmetric comparison */
.hd-grid--3  { grid-template-columns: repeat(3, 1fr); }   /* equal-cell inventory / team / tiers */
.hd-grid--4  { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 820px) {
  .hd-grid--75, .hd-grid--66, .hd-grid--3, .hd-grid--4 { grid-template-columns: 1fr; }
}

/* ---- components (A6): flat, hairline, no shadow ------------------------- */
.hd-card { border: 1px solid var(--hd-hairline); background: var(--hd-ground); padding: var(--hd-space-4); }
.hd-card--surface { background: var(--hd-surface); border: none; }
.hd-divider { border: 0; border-top: 1px solid var(--hd-hairline); margin: 0; }
.hd-rule-v { border-left: 1px solid var(--hd-hairline); }

/* CTA — restrained affordance, never urgency (A6) */
.hd-cta { display: inline-block; font-size: var(--hd-body); font-weight: 600;
  padding: var(--hd-space-2) var(--hd-space-4); border: 1px solid var(--hd-ink);
  color: var(--hd-ink); text-decoration: none; background: transparent; }
.hd-cta:hover { background: var(--hd-ink); color: var(--hd-ground); }
.hd-cta--ghost { border-color: var(--hd-hairline); }

/* comparison table (A6) — structural, never savings-flash */
.hd-compare { width: 100%; border-collapse: collapse; font-size: var(--hd-body); }
.hd-compare th, .hd-compare td { text-align: left; padding: var(--hd-space-2) var(--hd-space-3);
  border-bottom: 1px solid var(--hd-hairline); vertical-align: top; }
.hd-compare th { font-weight: 600; }
.hd-figure { font-size: var(--hd-h2); font-weight: 700; line-height: 1.1; }
.hd-figure-label { font-size: var(--hd-small); color: var(--hd-muted); }

/* ---- photo-slot convention (A7): a designed reservation, NEVER a grey box */
.hd-slot { border: 1px solid var(--hd-hairline); background: var(--hd-near-white);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--hd-space-1); padding: var(--hd-space-4);
  aspect-ratio: var(--hd-slot-ar, 4 / 5); width: 100%; max-width: var(--hd-slot-max, 480px); }
.hd-slot__label { font-size: var(--hd-small); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--hd-muted); }
.hd-slot__role { font-size: var(--hd-small); color: var(--hd-ink); }
.hd-slot__status { font-size: var(--hd-small); color: var(--hd-muted); font-style: normal; }
.hd-slot--founder    { --hd-slot-ar: 4 / 5; --hd-slot-max: 480px; }
.hd-slot--support    { --hd-slot-ar: 4 / 5; --hd-slot-max: 360px; }
.hd-slot--team       { --hd-slot-ar: 4 / 5; --hd-slot-max: 280px; }
.hd-slot--cue        { --hd-slot-ar: 1 / 1; --hd-slot-max: 96px; padding: var(--hd-space-1); }
.hd-slot--cue .hd-slot__label { font-size: 9px; }

/* a NO-IMAGE band is just a normal content band — no slot at all (omit-don't-stub) */

/* ---- header / footer chrome (concept-aware, rendered by header.php) ----- */
.hd-siteheader { border-bottom: 1px solid var(--hd-hairline); background: var(--hd-ground); }
.hd-siteheader__row { display: flex; align-items: center; justify-content: space-between;
  padding-block: var(--hd-space-3); gap: var(--hd-space-4); }
.hd-logo { font-weight: 700; font-size: var(--hd-h3); letter-spacing: -0.01em; text-decoration: none; color: var(--hd-ink); }
.hd-logo img { height: 32px; width: auto; }
.hd-nav ul { list-style: none; display: flex; gap: var(--hd-space-4); margin: 0; padding: 0; align-items: center; }
.hd-nav a { text-decoration: none; color: var(--hd-ink); font-size: var(--hd-body); }
.hd-nav a:hover { color: var(--hd-muted); }
.hd-nav .hd-cta { padding: var(--hd-space-1) var(--hd-space-3); }
.hd-sitefooter { border-top: 1px solid var(--hd-hairline); background: var(--hd-near-white);
  padding-block: var(--hd-section-pad); margin-top: var(--hd-cog-pad); }
.hd-sitefooter__row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--hd-space-3);
  font-size: var(--hd-small); color: var(--hd-muted); }
.hd-sitefooter a { color: var(--hd-muted); text-decoration: none; }

/* concept ribbon — legacy dev affordance (superseded by .hd-banner) */
.hd-ribbon { font-size: var(--hd-small); color: var(--hd-muted); padding: var(--hd-space-1) 0;
  border-bottom: 1px solid var(--hd-hairline); background: var(--hd-near-white); text-align: center; }

/* ---- LOUD strategy-selection banner (director ruling A) -----------------
   Frames the meaning-bearing placeholder as deliberate scaffolding: judge the
   information ORDER, not the words. Rendered on every concept page above the
   site header. Uses the ink neutral token as ground (a system-annotation layer
   set apart from the white concept canvas) — NOT a brand treatment; the
   petrol-teal anchor stays withheld this round. Unmissable by weight + contrast,
   not by colour. */
.hd-banner { background: var(--hd-ink); color: var(--hd-ground);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--hd-space-1) var(--hd-space-3);
  padding: var(--hd-space-2) var(--hd-gutter); line-height: 1.45; }
.hd-banner__lead { font-size: var(--hd-body); font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; white-space: nowrap; }
.hd-banner__body { font-size: var(--hd-body); font-weight: 400; flex: 1 1 320px; }
.hd-banner__body strong { font-weight: 700; }
.hd-banner__tag { font-size: var(--hd-small); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; opacity: .72; white-space: nowrap; }

/* ---- switcher (front page; no concept scope) ---------------------------- */
.hd-switch { font-family: var(--hd-font); }
.hd-switch__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hd-space-4); }
@media (max-width: 820px) { .hd-switch__grid { grid-template-columns: 1fr; } }