/* Truscaling v2. Direction approved by Kenny 2026-08-27 from the v2 board
   (research/design-direction-v2.html): warm black and cream, antique gold.
   References: photographytoprofits.com, thehighrollersclub.io.

   TYPE, changed 2026-08-27 after Kenny rejected Playfair as inelegant and
   picked Cinzel from research/logo-typefaces.html. Three faces, three jobs:

     Cinzel      the ceremonial voice. Roman inscriptional capitals, so it is
                 used where the firm speaks formally: the mark, big headlines,
                 proof figures, small labels. It has no italic and its
                 lowercase are small capitals, which is the point.
     Cormorant   the reading voice. Everything that needs mixed case and an
                 italic: client words, stories, questions, article headings.
     Inter       body copy, buttons, navigation.

   Because Cinzel has no italic, the gold accent inside a headline is now
   carried by color alone rather than by slanting it.

   One deliberate look, colors painted explicitly, holds on any host theme.
   Gold in three cuts: base for accents on dark, highlight for accents and
   gradient tops, deep for small text on cream so contrast holds. */

:root {
  --char: #14110C;          /* warm black, the ground */
  --char-lift: #1C1812;     /* raised surfaces on dark */
  --cream: #F4F1EA;         /* warm white, never pure white */
  --cream-sunk: #ECE7DC;    /* sunk surfaces on cream */
  --ink: #171410;           /* text on cream */
  --ink-soft: #5C564B;
  --paper: #F4F1EA;         /* text on dark */
  --paper-soft: #A39B8B;
  --rule-d: #2A251C;        /* rules on dark */
  --rule-c: #DDD6C8;        /* rules on cream */
  --gold: #B59638;          /* antique gold, the working accent */
  --gold-hi: #D4B45C;       /* highlight cut */
  --gold-deep: #8A701F;     /* deep cut for cream */

  --display: "Cinzel", "Trajan Pro", Palatino, Georgia, serif;
  --serif: "Cormorant Garamond", "Iowan Old Style", "Hoefler Text", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --gut: clamp(22px, 5vw, 64px);
  --max: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--char);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }
.narrow { max-width: 56ch; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:where(a, button, summary):focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- bands ---------- */

.band { padding: clamp(80px, 11vw, 150px) 0; }
.band.on-dark { background: var(--char); color: var(--paper); }
.band.on-cream { background: var(--cream); color: var(--ink); }
.band.tight { padding: clamp(60px, 8vw, 104px) 0; }
.on-cream + .on-cream { border-top: 1px solid var(--rule-c); }
.on-dark + .on-dark { border-top: 1px solid var(--rule-d); }

/* Hero wash until real Canva imagery lands. Reads as depth, not decoration. */
.band.hero {
  background:
    linear-gradient(115deg, rgba(20,17,12,.97) 38%, rgba(20,17,12,.78) 64%, rgba(20,17,12,.55)),
    radial-gradient(ellipse at 80% 38%, #373026 0%, #241F18 48%, #14110C 100%);
  color: var(--paper);
}

/* ---------- type ---------- */

.eyebrow {
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  margin: 0 0 26px;
}
.on-dark .eyebrow, .hero .eyebrow { color: var(--gold); }
.on-cream .eyebrow { color: var(--gold-deep); }

/* Cinzel sets smaller than a lowercase face at the same optical size, because
   capitals fill their line. It also needs positive tracking and an open line
   height or the words lock together. */
.display {
  font-family: var(--display);
  font-size: clamp(29px, 4.2vw, 55px);
  line-height: 1.2;
  letter-spacing: 0.035em;
  font-weight: 500;
  margin: 0 0 32px;
  text-wrap: balance;
  max-width: 21ch;
}
/* No italic exists in Cinzel, so the accent is carried by color alone. */
.display em, h2 em { font-style: normal; font-weight: 500; }
.on-dark .display em, .hero .display em, .on-dark h2 em, .hero h2 em { color: var(--gold-hi); }
.on-cream .display em, .on-cream h2 em { color: var(--gold-deep); }

h2 {
  font-family: var(--display);
  font-size: clamp(21px, 2.9vw, 34px);
  line-height: 1.26;
  letter-spacing: 0.045em;
  font-weight: 500;
  margin: 0 0 26px;
  text-wrap: balance;
  max-width: 26ch;
}

h3 { font-size: 18px; line-height: 1.35; letter-spacing: -0.01em; font-weight: 650; margin: 0 0 8px; }

p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }

.lede { font-size: clamp(17px, 2vw, 20px); line-height: 1.65; }
.on-dark .lede, .hero .lede { color: var(--paper-soft); }
.on-cream .lede { color: var(--ink-soft); }
.on-dark .body-copy, .hero .body-copy { color: var(--paper-soft); }
.on-cream .body-copy { color: var(--ink-soft); }
.body-copy { font-size: 17px; max-width: 58ch; }
.body-copy strong { font-weight: 650; }
.on-dark .body-copy strong { color: var(--paper); }
.on-cream .body-copy strong { color: var(--ink); }

.under-btn { font-size: 13px; letter-spacing: 0.06em; margin-top: 18px; }
.on-dark .under-btn, .hero .under-btn { color: var(--paper-soft); }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  background: linear-gradient(165deg, var(--gold-hi), var(--gold) 55%, #9A7D2C);
  color: #14110C;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 18px 36px;
  text-decoration: none;
  border: 0;
}
.btn:hover { background: linear-gradient(165deg, #E2C670, var(--gold-hi) 55%, var(--gold)); }

.btn-ghost {
  display: inline-block;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 17px 35px;
  text-decoration: none;
}
.on-dark .btn-ghost, .hero .btn-ghost { color: var(--gold-hi); border: 1px solid var(--gold); }
.on-cream .btn-ghost { color: var(--gold-deep); border: 1px solid var(--gold-deep); }

/* ---------- nav ---------- */

.nav { background: var(--char); border-bottom: 1px solid var(--rule-d); position: relative; z-index: 10; }
.nav-in { display: flex; align-items: center; justify-content: space-between; padding-top: 22px; padding-bottom: 22px; }
/* The mark: Cinzel caps, letterspaced. No period, per Kenny 2026-08-27.
   Matches the outlined files in assets/brand/. */
.mark { font-family: var(--display); font-weight: 500; font-size: 17px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper); text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: clamp(16px, 2.6vw, 34px); }
.nav-links > a {
  color: var(--paper-soft); text-decoration: none;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
}
.nav-links > a:hover { color: var(--paper); }
.nav-links > a.btn { color: #14110C; font-size: 12px; padding: 13px 24px; }

.navdrop { position: relative; }
.navdrop summary {
  list-style: none; cursor: pointer;
  color: var(--paper-soft);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
}
.navdrop summary::-webkit-details-marker { display: none; }
.navdrop summary::after { content: " ▾"; font-size: 9px; color: var(--gold); }
.navdrop summary:hover { color: var(--paper); }
.navdrop[open] > .drop {
  position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + 18px);
  background: var(--char-lift); border: 1px solid var(--rule-d);
  min-width: 300px; padding: 10px; z-index: 20;
}
.drop a { display: block; padding: 14px 16px; text-decoration: none; }
.drop a:hover { background: var(--char); }
.drop b { display: block; color: var(--paper); font-size: 14px; font-weight: 650; letter-spacing: 0.01em; }
.drop span { display: block; color: var(--paper-soft); font-size: 12.5px; margin-top: 2px; }

@media (max-width: 860px) {
  .nav-in { flex-wrap: wrap; gap: 14px; }
  .nav-links { flex-wrap: wrap; row-gap: 12px; }
  .navdrop[open] > .drop { position: static; transform: none; min-width: 0; }
}

/* ---------- the index band, concept A ---------- */

.index-band { text-align: center; }
.index-band .line {
  font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--paper-soft); line-height: 2.5;
  max-width: 60ch; margin: 0 auto;
}
.index-band .line i { color: var(--gold); font-style: normal; padding: 0 0.45em; }

/* ---------- tombstones, concept B ---------- */

.stones { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border: 1px solid var(--rule-d); }
.stone { padding: clamp(32px, 4vw, 48px) 30px; border-right: 1px solid var(--rule-d); border-bottom: 1px solid var(--rule-d); text-align: center; }
.stone .cat { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 18px; }
.stone .fig { font-family: var(--serif); font-size: clamp(30px, 3.2vw, 39px); font-weight: 500; color: var(--paper); line-height: 1.15; margin-bottom: 14px; }
.stone .fig i { font-style: italic; }
.stone .note { font-size: 13.5px; color: var(--paper-soft); line-height: 1.6; max-width: 26ch; margin: 0 auto; }

/* ---------- the roster, concept C ---------- */

.roster { max-width: 680px; }
.roster .row { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 22px 4px; border-bottom: 1px solid; }
.on-dark .roster .row { border-color: var(--rule-d); }
.on-cream .roster .row { border-color: var(--rule-c); }
.roster .row:first-child { border-top: 1px solid; }
.on-dark .roster .row:first-child { border-top-color: var(--rule-d); }
.on-cream .roster .row:first-child { border-top-color: var(--rule-c); }
.roster .cat { font-family: var(--serif); font-size: clamp(21px, 2.4vw, 26px); font-weight: 500; }
.on-dark .roster .cat { color: var(--paper); }
.on-cream .roster .cat { color: var(--ink); }
.roster .cat a { text-decoration: none; }
.roster .cat a:hover { color: var(--gold-hi); }
.on-cream .roster .cat a:hover { color: var(--gold-deep); }
/* Row level links: the whole row is the tap target, not just the name.
   A 75px text link in a 375px row misses most mobile taps, which read as
   the link being broken. Found on Kenny's iPhone 2026-08-28. */
a.row { text-decoration: none; color: inherit; }
a.row:hover .cat { color: var(--gold-hi); }
.on-cream a.row:hover .cat { color: var(--gold-deep); }
.roster .out { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; text-align: right; flex-shrink: 0; }
.on-dark .roster .out { color: var(--paper-soft); }
.on-cream .roster .out { color: var(--ink-soft); }
.roster .out i { font-style: normal; }
.on-dark .roster .out i { color: var(--gold-hi); }
.on-cream .roster .out i { color: var(--gold-deep); }

/* ---------- proof figures ---------- */

.figure-xl { font-family: var(--display); font-weight: 500; font-size: clamp(42px, 5.6vw, 72px); letter-spacing: 0.02em; line-height: 1.05; color: var(--paper); margin: 0 0 14px; }
.figure-xl small { display: block; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-soft); margin-top: 14px; }

.story { font-family: var(--serif); font-size: clamp(23px, 3vw, 33px); line-height: 1.5; font-weight: 500; color: var(--paper); max-width: 30em; margin: 0 0 24px; }
.story-close { font-size: clamp(17px, 2vw, 20px); color: var(--paper-soft); max-width: 56ch; }
.story-close span { color: var(--gold-hi); font-weight: 650; }

/* Serif italic is reserved for a client's own words, verbatim. */
.client-quote { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.8vw, 30px); line-height: 1.5; max-width: 36ch; color: var(--paper); }

/* ---------- service cards ---------- */

.svc3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 44px; border: 1px solid var(--rule-d); }
.svc3 a { display: block; padding: clamp(30px, 3.6vw, 44px) 30px; text-decoration: none; border-right: 1px solid var(--rule-d); border-bottom: 1px solid var(--rule-d); background: var(--char); }
.svc3 a:hover { background: var(--char-lift); }
.svc3 .k { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.svc3 h3 { font-family: var(--serif); font-size: 25px; font-weight: 500; color: var(--paper); }
.svc3 p { color: var(--paper-soft); font-size: 14.5px; line-height: 1.65; margin: 10px 0 20px; }
.svc3 .go { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-hi); }

/* ---------- stats ---------- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0; margin-top: 48px; border: 1px solid var(--rule-d); }
.stat { padding: 28px 26px; border-right: 1px solid var(--rule-d); border-bottom: 1px solid var(--rule-d); }
.stat .n { font-family: var(--display); font-size: clamp(21px, 2.5vw, 28px); letter-spacing: 0.03em; font-weight: 500; color: var(--gold-hi); line-height: 1.1; margin-bottom: 8px; }
.stat .l { font-size: 13.5px; color: var(--paper-soft); line-height: 1.6; }

/* ---------- steps ---------- */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 44px; border: 1px solid var(--rule-d); }
.step { padding: clamp(28px, 3.4vw, 40px) 28px; border-right: 1px solid var(--rule-d); border-bottom: 1px solid var(--rule-d); }
.on-cream .steps, .on-cream .step { border-color: var(--rule-c); }
.step-n { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 14px; }
.on-dark .step-n { color: var(--gold); }
.on-cream .step-n { color: var(--gold-deep); }
.step h3 { font-family: var(--serif); font-size: 23px; font-weight: 500; }
.on-dark .step h3 { color: var(--paper); }
.on-cream .step h3 { color: var(--ink); }
.step p { font-size: 14.5px; line-height: 1.65; margin: 8px 0 0; }
.on-dark .step p { color: var(--paper-soft); }
.on-cream .step p { color: var(--ink-soft); }

/* ---------- numbered points and phase heads ---------- */

.phase-head { display: flex; align-items: baseline; gap: 16px; margin: 56px 0 8px; }
.phase-head .n { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); }
.phase-head h3 { font-family: var(--serif); font-size: 27px; font-weight: 500; margin: 0; }

ul.pts { list-style: none; margin: 20px 0 0; padding: 0; max-width: 66ch; }
ul.pts li { display: grid; grid-template-columns: 44px 1fr; gap: 0 14px; padding: 18px 0; border-bottom: 1px solid var(--rule-c); }
ul.pts .i { font-family: var(--display); font-size: 16px; letter-spacing: 0.02em; color: var(--gold-deep); grid-row: span 2; }
ul.pts b { font-weight: 650; color: var(--ink); }
ul.pts p { grid-column: 2; color: var(--ink-soft); font-size: 15px; line-height: 1.65; margin: 4px 0 0; }

/* ---------- said plainly ---------- */

.straight { margin-top: 56px; padding: clamp(28px, 3.6vw, 44px); max-width: 70ch; }
.on-cream .straight { background: var(--cream-sunk); border-left: 2px solid var(--gold-deep); }
.on-dark .straight { background: var(--char-lift); border-left: 2px solid var(--gold); }
.straight .t { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 14px; }
.on-cream .straight .t { color: var(--gold-deep); }
.on-dark .straight .t { color: var(--gold); }
.straight p { margin: 0; }
.on-cream .straight p { color: var(--ink-soft); }
.on-dark .straight p { color: var(--paper-soft); }
.on-cream .straight strong { color: var(--ink); }
.on-dark .straight strong { color: var(--paper); }

/* ---------- fit grid ---------- */

.fit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0; border: 1px solid var(--rule-c); }
.fit-col { padding: clamp(30px, 4vw, 46px); }
.fit-col + .fit-col { border-left: 1px solid var(--rule-c); }
.fit-col h3 { font-family: var(--serif); font-size: 25px; font-weight: 500; margin-bottom: 18px; }
.fit-col.yes h3 { color: var(--gold-deep); }
.fit-col.no h3 { color: var(--ink-soft); }
.fit-col ul { list-style: none; margin: 0; padding: 0; }
.fit-col li { padding: 10px 0 10px 26px; position: relative; color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; }
.fit-col.yes li::before { content: "·"; position: absolute; left: 4px; color: var(--gold-deep); font-weight: 700; font-size: 22px; line-height: 1.1; }
.fit-col.no li::before { content: "·"; position: absolute; left: 4px; color: var(--rule-c); font-weight: 700; font-size: 22px; line-height: 1.1; }

/* ---------- verticals ---------- */

.verts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; margin-top: 44px; }
.vert { padding: clamp(28px, 3.4vw, 42px); border: 1px solid var(--rule-c); background: var(--cream); }
.vert.lead { background: var(--cream-sunk); }
.vert .k { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 14px; }
.vert h3 { font-family: var(--serif); font-size: 26px; font-weight: 500; color: var(--ink); }
.vert p { color: var(--ink-soft); font-size: 15px; line-height: 1.68; margin: 10px 0 0; }
.vert .num { font-family: var(--display); font-size: 33px; letter-spacing: 0.02em; font-weight: 500; color: var(--gold-deep); margin-top: 24px; line-height: 1; }
.vert .num-l { font-size: 12.5px; letter-spacing: 0.06em; color: var(--ink-soft); margin-top: 8px; }

/* ---------- case study receipts ---------- */

.case { border: 1px solid var(--rule-d); background: var(--char-lift); }
.case img { width: 100%; height: auto; display: block; }
.case figcaption { padding: 14px 16px 16px; font-size: 13px; line-height: 1.55; color: var(--paper-soft); }
.case .k { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
figure.case { margin: 0; }

/* ---------- team media ---------- */

.team-photo { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 30%; margin-bottom: 18px; }
/* Monogram avatar for a team member with no headshot yet. A branded
   placeholder, never a fake face. */
.avatar-mono { width: 100%; aspect-ratio: 4/5; margin-bottom: 18px; background: var(--char); display: flex; align-items: center; justify-content: center; }
.avatar-mono span { font-family: var(--display); font-weight: 500; font-size: clamp(30px, 3vw, 42px); color: var(--gold-hi); letter-spacing: 0.1em; text-indent: 0.1em; border: 1px solid var(--gold); padding: 20px 24px; }

/* ---------- FAQ ---------- */

.faq { max-width: 66ch; margin-top: 36px; border-top: 1px solid var(--rule-c); }
.faq details { border-bottom: 1px solid var(--rule-c); }
.faq summary { cursor: pointer; padding: 22px 0; font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--ink); list-style: none; position: relative; padding-right: 40px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 20px; color: var(--gold-deep); font-family: var(--sans); font-size: 22px; font-weight: 300; }
.faq details[open] summary::after { content: "×"; }
.faq .a { padding: 0 0 24px; color: var(--ink-soft); max-width: 58ch; }

/* ---------- slots, dashed until the real asset arrives ---------- */

.slot {
  border: 1px dashed; min-height: 220px;
  display: flex; align-items: center; justify-content: center;
  padding: 26px; text-align: center;
}
.on-dark .slot, .hero .slot { border-color: var(--rule-d); background: var(--char-lift); }
.on-cream .slot { border-color: var(--rule-c); background: var(--cream-sunk); }
.slot span { font-size: 12.5px; line-height: 1.7; max-width: 40ch; }
.on-dark .slot span, .hero .slot span { color: var(--paper-soft); }
.on-cream .slot span { color: var(--ink-soft); }
.slot b { display: block; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; margin-bottom: 8px; }
.slot code { font-size: 11px; opacity: 0.8; }

.shots-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; margin-top: 44px; }

.embed-slot { margin: 44px 0; max-width: 720px; }
.embed-slot .slot { min-height: 380px; }
/* The form column tracks the body text measure rather than the full band, so
   the embed sits on the same left edge as the copy above it. */
.embed-slot.form-col { max-width: 620px; }
.embed-slot iframe { display: block; width: 100%; border: 0; }

/* ---------- about ---------- */

.about-grid { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 760px) { .about-grid { grid-template-columns: 1fr; } }
.about-quote { font-family: var(--serif); font-size: clamp(22px, 2.7vw, 29px); line-height: 1.5; font-weight: 500; color: var(--paper); max-width: 30em; }
.sig { margin-top: 26px; }
.sig b { display: block; color: var(--paper); font-weight: 650; }
.sig span { color: var(--paper-soft); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- AEO query demo ---------- */

.query-demo {
  margin-top: 52px; max-width: 560px;
  border: 1px solid var(--rule-d); background: var(--char-lift);
  padding: clamp(24px, 3vw, 36px); line-height: 2.1; font-size: 15px;
}
.query-demo .q { color: var(--paper); font-weight: 600; display: block; margin-bottom: 10px; }
.query-demo .hit { color: var(--paper-soft); }
.query-demo .miss { color: var(--gold-hi); font-weight: 600; }

/* ---------- blog ---------- */

.post-list { max-width: 720px; margin-top: 20px; }
.post-list article { padding: 34px 0; border-bottom: 1px solid var(--rule-c); }
.post-list .meta { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 12px; }
.post-list h3 { font-family: var(--serif); font-size: clamp(25px, 3vw, 32px); font-weight: 500; margin-bottom: 10px; }
.post-list h3 a { text-decoration: none; color: var(--ink); }
.post-list h3 a:hover { color: var(--gold-deep); }
.post-list p { color: var(--ink-soft); max-width: 60ch; }
.post-list .go { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); text-decoration: none; }

.article { max-width: 70ch; }
.article .meta { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 20px; }
.article h2 { font-size: clamp(25px, 3vw, 33px); margin-top: 52px; }
.article p, .article li { color: var(--ink-soft); font-size: 17px; line-height: 1.75; }
.article strong { color: var(--ink); font-weight: 650; }
.article .defn { background: var(--cream-sunk); border-left: 2px solid var(--gold-deep); padding: clamp(24px, 3vw, 36px); margin: 36px 0; }
.article .defn p { margin: 0; color: var(--ink); }

/* ---------- footer ---------- */

.foot { background: var(--char); color: var(--paper-soft); border-top: 1px solid var(--rule-d); padding: clamp(56px, 7vw, 88px) 0 40px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); }
@media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.foot-brand p { font-size: 14px; line-height: 1.7; max-width: 34ch; margin-top: 16px; }
.foot-h { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 10px; }
.foot a { color: var(--paper-soft); text-decoration: none; font-size: 14px; }
.foot a:hover { color: var(--paper); }
.foot .mark { font-size: 19px; }
.foot-legal { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--rule-d); display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 12px; letter-spacing: 0.04em; }