/* ==========================================================================
   Oliver Camponovo — Sovereign Wealth Architecture

   Composed against oc-tokens.css. Nothing here invents a number: sizes,
   spaces, hairlines, shadows and timings all come from the token layer, so
   the page reads as one object rather than as a set of sections that were
   each styled on their own day.
   ========================================================================== */

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

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--paper-100);
  color: var(--ink-800);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  margin: 0;
  font-weight: 300;
  letter-spacing: var(--track-snug);
  line-height: var(--lh-title);
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* German runs 20–30% longer than English and builds compounds no column can
   hold unbroken — Drei-Schichten-Architektur is 26 characters in a heading
   set at 40px on a 390px screen. Hyphenation is ordinary practice in German
   typesetting and is what keeps the display sizes inside their measure. */
:lang(de) h1, :lang(de) h2, :lang(de) h3,
:lang(de) .hub__name, :lang(de) .manifesto__body,
:lang(de) .layer__desc, :lang(de) .archetype__focus { hyphens: auto; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; color: inherit; }
img { max-width: 100%; display: block; }
::selection { background: rgba(197, 160, 89, 0.28); }

section[id] { scroll-margin-top: calc(var(--nav-h-condensed) + var(--s-5)); }

/* The focus ring is an interface component, so SC 1.4.11 asks it for 3:1
   against what surrounds it. The bright gold gives 7.1:1 on the dark
   sections but only 2.2:1 on paper, which is a fail everywhere the page is
   light — so the ring resolves through a token like everything else, and a
   halo behind it keeps it visible over the hero photograph too. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--focus-halo);
}

.gold { color: var(--gold-text); }
em.gold { font-style: italic; font-weight: 300; }

/* ── Icons ───────────────────────────────────────────────────────────────
   Every glyph on the page is a 24-unit lucide outline drawn at sizes from
   10px to 48px. With stroke-width given in user units that produced actual
   stroke weights from 1.0px to 3.0px — a threefold spread, which is why the
   set never read as one family. non-scaling-stroke evaluates the width after
   the viewBox transform, so a single declaration gives every icon the same
   weight at every size. */

svg { stroke-width: 1.5; }
svg path, svg circle, svg rect, svg line,
svg polyline, svg polygon, svg ellipse { vector-effect: non-scaling-stroke; }

/* The one exception: a tick inside an 18px disc needs the extra weight to
   register at all. */
.book__tick svg, .done__check svg { stroke-width: 2; }

/* ── Shell ───────────────────────────────────────────────────────────────
   One container, one left edge. Every section's inner wrapper resolves to
   the same measured column, so the margin down the left of the document
   never moves. Blocks that want a narrower measure keep the shared left
   edge and give the width back on the right, rather than re-centring and
   introducing a second margin. */

.heritage__inner, .philosophy__inner, .archetypes__inner, .expertise__inner,
.global__inner, .book__inner, .insights__inner, .pedigree__inner,
.vindication__inner, .contact__inner, .pullquote__inner, .credstrip__inner,
.legal__inner {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  position: relative;
  z-index: 10;
}

.heritage, .philosophy, .archetypes, .expertise, .global, .book,
.insights, .pedigree, .vindication, .contact, .pullquote {
  padding-inline: var(--gutter);
  position: relative;
  overflow: hidden;
  padding-block: var(--section);
}

.insights { padding-block: var(--section-tight); }
.pullquote { padding-block: var(--section-loose); }

/* ── Surface tone ────────────────────────────────────────────────────────
   The page alternates dark and light in pairs. Within each run the tone
   steps very slightly so two adjacent sections of the same family do not
   read as one undifferentiated slab — the join is felt rather than seen. */

.heritage    { background: var(--paper-100); }
.philosophy  { background: var(--paper-200); }
.archetypes  { background: var(--ink-700); color: var(--paper-100); }
.expertise   { background: var(--ink-600); color: var(--paper-100); }
.global      { background: var(--paper-100); }
.book        { background: var(--paper-200); }
.insights    { background: var(--paper-100); }
.pedigree    { background: var(--ink-700); color: var(--paper-100); }
.pullquote   { background: var(--paper-100); text-align: center; }
.vindication { background: var(--paper-200); }
.contact     { background: var(--ink-900); color: var(--paper-100); }

/* ── Seams ───────────────────────────────────────────────────────────────
   Where the page changes register it used to butt one flat colour against
   another, so the document read as a stack of unrelated blocks. Each dark
   run now opens with a hairline of gold and a wide, very low ambient light
   that lifts the top edge, and closes with the light falling away. The
   effect is a dissolve rather than a cut, and it costs one gradient. */

.archetypes::before,
.pedigree::before,
.contact::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(to right,
    transparent, var(--line-gold) 22%, var(--line-gold) 78%, transparent);
  z-index: 1;
}

.archetypes::after,
.pedigree::after,
.contact::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 340px;
  background: radial-gradient(120% 100% at 50% 0%,
    rgba(197, 160, 89, 0.07), rgba(197, 160, 89, 0.02) 45%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}

/* Light sections closing into a dark one get the reciprocal: the paper
   deepens fractionally at the foot so the transition is prepared. */
.philosophy::after,
.insights::after,
.book::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 200px;
  background: linear-gradient(to bottom, transparent, rgba(19, 18, 16, 0.035));
  pointer-events: none;
  z-index: 0;
}

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

@media (max-width: 1023px) { .u-lg-up { display: none !important; } }
@media (min-width: 1024px) { .u-lg-down { display: none !important; } }
@media (max-width: 767px) { .u-md-up { display: none !important; } }

/* ── Motion ──────────────────────────────────────────────────────────────
   Reveals travel a short distance quickly. The old set moved 40–50px over
   1.0–1.4s, which announces itself as a scroll animation; a premium reveal
   is one you register as the page settling rather than as an effect. */

@keyframes ocPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes ocSpin { to { transform: rotate(360deg); } }
@keyframes revealUp { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
@keyframes revealLeft { from { opacity: 0; transform: translate3d(-24px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes revealRight { from { opacity: 0; transform: translate3d(24px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes revealScale { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes heroRise { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }
@keyframes markDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Content may only start hidden where something can be relied on to reveal
   it. That used to be a .has-js class set by an inline script, which the
   public CSP blocked — so on the live site the class was never set and the
   reveals never ran at all. The browser is asked directly instead: where the
   feature is unsupported the query does not match, the content is simply
   visible, and the page loses an animation rather than its text.
   oc-site.js adds .is-in via IntersectionObserver; `animation-timeline`
   still only ships in Chromium. */
@media (scripting: enabled) {
  .reveal { opacity: 0; will-change: opacity, transform; }
}
.reveal.is-in { opacity: 1; animation-fill-mode: both; }
.reveal--up.is-in    { animation: revealUp 0.75s var(--ease) both; }
.reveal--left.is-in  { animation: revealLeft 0.8s var(--ease) both; }
.reveal--right.is-in { animation: revealRight 0.8s var(--ease) both; }
.reveal--scale.is-in { animation: revealScale 0.9s var(--ease) both; }

body[data-no-motion] .reveal { opacity: 1 !important; }
body[data-no-motion] *,
body[data-no-motion] *::before,
body[data-no-motion] *::after { animation: none !important; transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ── Shared atoms ────────────────────────────────────────────────────── */

/* fixed, not absolute. Absolutely positioned it was placed against the
   document, so it only appeared on screen while the page happened to be
   scrolled to the top — which is where it is first reached, and not where a
   reader who has tabbed back to it is. The offsets are the same; what changes
   is which box they are measured from. */
.skip-link {
  position: fixed;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink-900);
  color: var(--gold);
  padding: var(--s-3) var(--s-5);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 600;
  border: 1px solid var(--line-gold);
}
.skip-link:focus { left: var(--s-4); top: var(--s-4); }

/* Text for the accessibility tree only. Not `display: none` and not
   `visibility: hidden`: both remove the node from that tree as well, which is
   the one place this text is supposed to exist. */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The eyebrow is the page's most repeated device, so it carries a rule as
   well as a colour: a mark the eye can find at a glance when scanning, and
   one that survives being set in a script with no uppercase. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 600;
  font-family: var(--sans);
  margin-bottom: var(--s-5);
  color: var(--on-surface-faint);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  flex-shrink: 0;
}
.eyebrow--gold { color: var(--gold-text); }

.rule { height: 1px; width: 100%; background: var(--line-gold); border: 0; }
.rule--short { width: 72px; margin-top: var(--s-2); }
.rule--center { margin-inline: auto; }

/* Ambient light, not decoration: these sit behind content to stop large
   flat areas reading as empty. Kept far below the threshold of notice. */
.orb {
  position: absolute;
  width: min(46vw, 620px);
  aspect-ratio: 1;
  border-radius: var(--r-full);
  background: radial-gradient(circle, rgba(197, 160, 89, 0.055), transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.orb--tr { right: -8%; top: -12%; }
.orb--bl { left: -12%; bottom: -10%; }
.orb--br { right: -10%; bottom: -12%; }
.orb--r  { right: -14%; top: 34%; }

/* Crop marks. Two corners, not four — a printer's registration reference
   reads as craft; a full box drawn in dotted corners reads as a widget. */
.corner {
  position: absolute;
  width: 14px;
  height: 14px;
  --corner-color: var(--line-gold);
  pointer-events: none;
}
.corner--gold { --corner-color: var(--line-gold); }
.corner--tl { top: 0; left: 0; border-top: 1px solid var(--corner-color); border-left: 1px solid var(--corner-color); }
.corner--br { bottom: 0; right: 0; border-bottom: 1px solid var(--corner-color); border-right: 1px solid var(--corner-color); }
.corner--tr, .corner--bl { display: none; }

.dot {
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  display: inline-block;
  flex-shrink: 0;
  animation: ocPulse 2.6s ease-in-out infinite;
}
.dot--gold { background: var(--gold); }
.dot--alliance { background: var(--alliance); }

/* ── Group-hover primitives ──────────────────────────────────────────────
   The design's [data-group] / [data-gh-*] pairs. :focus-within is paired
   with :hover throughout so keyboard users get the same affordances —
   without it the "Access Report" cue on the article cards is permanently
   invisible to anyone not using a mouse. */

[data-gh] { transition: all var(--dur) var(--ease); }

.group:hover [data-gh~="accent"],
.group:focus-within [data-gh~="accent"]  { color: var(--gold-text); }
.group:hover [data-gh~="num"],
.group:focus-within [data-gh~="num"]     { color: var(--line-gold); }
.group:hover [data-gh~="ring"],
.group:focus-within [data-gh~="ring"]    { transform: scale(1); border-color: var(--line-gold); opacity: 1; }
.group:hover [data-gh~="icon"],
.group:focus-within [data-gh~="icon"]    { opacity: 1; color: var(--gold); border-color: var(--line-gold); }
.group:hover [data-gh~="grow"],
.group:focus-within [data-gh~="grow"]    { transform: scale(1.06); border-color: var(--line-gold); }
.group:hover [data-gh~="unscale"],
.group:focus-within [data-gh~="unscale"] { transform: scale(1); }
.group:hover [data-gh~="color"],
.group:focus-within [data-gh~="color"]   { filter: grayscale(0); }
.group:hover [data-gh~="fade"],
.group:focus-within [data-gh~="fade"]    { opacity: 0; }
.group:hover [data-gh~="border"],
.group:focus-within [data-gh~="border"]  { border-color: var(--gold); }
.group:hover [data-gh~="circle"],
.group:focus-within [data-gh~="circle"]  { border-color: var(--gold); color: var(--gold); }
.group:hover [data-gh~="reveal"],
.group:focus-within [data-gh~="reveal"]  { opacity: 1; transform: none; }
.group:hover [data-gh~="wipe"],
.group:focus-within [data-gh~="wipe"]    { transform: scaleX(1); }
.group:hover [data-gh~="onink"],
.group:focus-within [data-gh~="onink"]   { color: var(--paper-100); }
.group:hover [data-gh~="hoverbar"],
.group:focus-within [data-gh~="hoverbar"]{ transform: scaleX(1); }

/* The preloader's three rules and its sealPulse keyframe were removed on
   2026-08-29. The Django edition renders its text on the server, so there is
   nothing to wait for and no template has ever carried the markup — the CSS
   was styling an element that does not exist in this codebase. It survived the
   port because dead CSS is silent: it costs bytes on every request and reads,
   to the next person, as a feature that must be somewhere. */

/* ── Scroll progress ─────────────────────────────────────────────────────
   Reduced from 4px to a hairline. A thick progress bar is a reading-app
   affordance; at 2px it registers as a detail of the chrome. */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--gold-dim), var(--gold), var(--gold-bright));
  transform-origin: left;
  transform: scaleX(0);
  z-index: 70;
  pointer-events: none;
}

/* ── Navigation ──────────────────────────────────────────────────────────
   Over the hero the bar is transparent and lets the photograph run to the
   top of the window; on the first scroll it condenses — shorter, blurred,
   hairline-ruled. That transformation is the whole navigation "effect":
   nothing slides, nothing bounces, the chrome simply takes up less room
   once the reader has committed to the page. */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  height: var(--nav-h);
  padding-inline: var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-6);
  color: #fff;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: height var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              backdrop-filter var(--dur) var(--ease);
}
.nav::before {
  /* A short scrim under the transparent state so white type stays legible
     against whatever part of the photograph happens to sit behind it. */
  content: "";
  position: absolute;
  inset: 0 0 -40px 0;
  background: linear-gradient(to bottom, rgba(13, 12, 10, 0.55), transparent);
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--dur) var(--ease);
  z-index: -1;
}
.nav.is-condensed {
  height: var(--nav-h-condensed);
  background: rgba(13, 12, 10, 0.86);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: var(--line);
}
.nav.is-condensed::before { opacity: 0; }

/* A document with no hero behind it has nothing to be transparent over, so
   the legal pages carry the condensed treatment from the first paint. */
.nav--solid {
  height: var(--nav-h-condensed);
  background: rgba(13, 12, 10, 0.92);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: var(--line);
}
.nav--solid::before { opacity: 0; }

.nav__brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: #fff;
  flex-shrink: 0;
  min-height: 44px;
}
.nav__seal {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  flex-shrink: 0;
}
.nav__name {
  font-family: var(--serif);
  font-size: 1.0625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 300;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.nav__brand:hover .nav__name { color: var(--gold); }

.nav__menu {
  display: flex;
  gap: clamp(var(--s-5), 2.4vw, var(--s-7));
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-nav);
  font-weight: 500;
  margin-inline: auto;
}
.nav__menu a {
  position: relative;
  padding: var(--s-3) 0;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
/* The underline is drawn from the left rather than faded in, so the cue
   reads as a mark being made and not as an element appearing. */
.nav__menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__menu a:hover { color: #fff; }
.nav__menu a:hover::after { transform: scaleX(1); }
.nav__menu a.is-active { color: var(--gold); }
.nav__menu a.is-active::after { transform: scaleX(1); }

.nav__right { display: flex; align-items: center; gap: var(--s-4); flex-shrink: 0; }

.langbar {
  display: flex;
  align-items: center;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-nav);
  font-weight: 500;
  border: 1px solid var(--line);
  padding: 3px;
}
.langbar a {
  padding: 6px 9px;
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  line-height: 1;
}
.langbar a:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.langbar a[aria-current="true"] {
  color: var(--ink-900);
  background: var(--gold);
  font-weight: 600;
}

.nav__burger {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 44x44 minimum touch target (WCAG 2.5.5) — this is the only way into the
     menu on mobile, so it should not be a 40px squeeze. */
  width: 44px;
  height: 44px;
  margin-right: -10px;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
}
.nav__burger .icon-close { display: none; }
.nav__burger[aria-expanded="true"] .icon-close { display: block; }
.nav__burger[aria-expanded="true"] .icon-burger { display: none; }

/* ── Mobile menu ─────────────────────────────────────────────────────── */

.mobilemenu {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--ink-900);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--nav-h) + var(--s-8)) var(--gutter) var(--s-8);
  color: #fff;
  overflow-y: auto;
  animation: fadeIn var(--dur) var(--ease) both;
}
.mobilemenu[hidden] { display: none; }
.mobilemenu__top { display: flex; flex-direction: column; gap: var(--s-6); }
.mobilemenu__protocol {
  color: var(--gold);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-family: var(--sans);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--s-3);
}
.mobilemenu__links { display: flex; flex-direction: column; }
.mobilemenu__links a {
  font-size: clamp(1.5rem, 6vw, 2rem);
  font-family: var(--serif);
  font-weight: 300;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 56px;
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--line-soft);
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.mobilemenu__links a:hover,
.mobilemenu__links a:focus-visible { color: var(--gold); padding-left: var(--s-2); }
.mobilemenu__links svg { color: var(--gold); opacity: 0.5; flex-shrink: 0; transition: transform var(--dur) var(--ease); }
.mobilemenu__links a:hover svg { transform: translateX(4px); }

.mobilemenu__bottom {
  border-top: 1px solid var(--line);
  padding-top: var(--s-7);
  margin-top: var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.mobilemenu__langs { display: flex; flex-direction: column; gap: var(--s-3); }
.mobilemenu__langlabel {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--on-surface-faint);
  font-weight: 600;
}
.mobilemenu__langrow { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.mobilemenu__langrow a {
  padding: var(--s-3) var(--s-4);
  min-height: 44px;
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  color: var(--on-surface-muted);
  font-size: var(--t-micro);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  font-weight: 500;
  transition: all var(--dur) var(--ease);
}
.mobilemenu__langrow a[aria-current="true"] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink-900);
  font-weight: 600;
}
.mobilemenu__colophon {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--on-surface-faint);
}

/* ── Hero ────────────────────────────────────────────────────────────────
   Left-aligned on the shell grid rather than centred. A centred stack is
   the default arrangement of every landing page ever built; anchoring the
   headline to the same left margin the rest of the document uses makes the
   first screen part of the composition instead of a title card in front of
   it. The photograph is graded so the darkest part of the frame falls under
   the type, which is why the text needs no box behind it. */

.hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ink-800);
  color: var(--paper-100);
  padding: calc(var(--nav-h) + var(--s-9)) var(--gutter) var(--s-8);
  isolation: isolate;
}
/* Auto margins above and below, so the type block is centred in whatever the
   foot leaves it rather than pinned to the bottom of the frame.
   The hero used to be justify-content: flex-end with everything stacked at the
   floor and the top third empty. An auto margin does the centring without a
   number, and — because .hero__foot is in flow — it centres in the space that
   is actually free, which is the part that no fixed padding can track. */
.hero__inner { margin-block: auto; }
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  transform: scale(1.06);
  will-change: transform, opacity;
}
/* <picture> sits between .hero__bg and the image now. Left at its default
   inline display it has no height for the image's height: 100% to resolve
   against, and the hero photograph collapses. Given the box explicitly rather
   than through display: contents, which would do the same thing but stop
   working in any browser old enough to lack it — the same browsers that need
   the JPEG fallback the <picture> exists for. */
.hero__bg picture {
  display: block;
  width: 100%;
  height: 100%;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  filter: grayscale(1) brightness(0.42) contrast(1.2);
}
/* Two overlaid gradients: one vertical to seat the foot of the section into
   the strip below it, one horizontal so the left column — where the type
   sits — is reliably the darkest part of the frame whatever the crop. */
.hero__scrim {
  position: absolute;
  inset: 0;
  /* No z-index. It carried -1 until 2026-08-29 and therefore painted nothing:
     its parent .hero__bg has transform: scale(1.06), which makes .hero__bg a
     stacking context, and a negative-z-index child of a stacking context is
     painted before that context's in-flow and inline content — so the veil
     went behind the <img>, which is opaque and covers the whole box.

     Nothing about the page looked broken; the type simply sat on whatever the
     photograph happened to be, and on this crop that is the bright sky. It was
     measured, not noticed: the first gradient stop is rgba(13,12,10,.92), which
     would cap luminance near the left edge at about 32/255, and the rendered
     page read 62 there — brighter, in fact, than the right-hand edge the
     gradient is meant to leave light.

     With z-index auto it paints as a positioned descendant, i.e. after the
     image, which is where a veil belongs. */
  background:
    linear-gradient(to right, rgba(13, 12, 10, 0.92) 0%, rgba(13, 12, 10, 0.55) 42%, rgba(13, 12, 10, 0.25) 100%),
    linear-gradient(to top, var(--ink-800) 2%, rgba(19, 18, 16, 0.1) 45%, rgba(13, 12, 10, 0.6) 100%);
  pointer-events: none;
}
/* The monogram is cropped by the right edge of the window rather than
   floated in the middle. Held at the boundary of visibility, it reads as
   watermarked stock; centred and complete it read as a background image. */
.hero__watermark {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;
  overflow: hidden;
  /* The visibility lives here, on the container, and not on the span with the
     rest of the type — because the span is animated, and an animation beats a
     normal declaration in the cascade. `animation: fadeIn ... both` holds the
     final keyframe after the run, fadeIn ends at opacity: 1, and fill-mode
     `both` made that 1 stick: the monogram rendered fully opaque instead of at
     0.045, over the headline. On a phone it covered "is a choice." and the
     pull quote outright.
     prefers-reduced-motion did not save anyone either — that block sets
     animation-duration to 0.001ms rather than none, so a reader who asks for
     less motion simply arrives at the broken state immediately.
     Multiplied through the container, 0.045 x the span's animated 1 is 0.045,
     and there is only one place that number is written. */
  opacity: 0.045;
}
.hero__watermark span {
  font-size: min(52vw, 46rem);
  font-family: var(--serif);
  font-weight: 300;
  color: var(--paper-100);
  user-select: none;
  letter-spacing: -0.06em;
  line-height: 0.74;
  transform: translate(14%, 16%);
  animation: fadeIn 2s var(--ease) both;
}

.hero__inner {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
}
.hero__stack { display: flex; flex-direction: column; align-items: flex-start; }
.hero__stack > * { animation: heroRise 1s var(--ease) both; }
.hero__stack > *:nth-child(1) { animation-delay: 0.05s; }
.hero__stack > *:nth-child(2) { animation-delay: 0.16s; }
.hero__stack > *:nth-child(3) { animation-delay: 0.28s; }

.hero__tagline {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--gold);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 600;
  margin-bottom: var(--s-6);
}
.hero__tagline::before {
  content: "";
  width: 40px;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  animation: markDraw 1.1s var(--ease) 0.5s both;
}
.hero__title {
  font-size: var(--t-display);
  font-family: var(--serif);
  line-height: var(--lh-display);
  letter-spacing: var(--track-tight);
  color: #fff;
  font-weight: 300;
  /* Constrained in characters, not pixels: German sets far longer than
     English at the same point size and was breaking in the wrong places. */
  max-width: 15ch;
  text-wrap: balance;
  margin-bottom: var(--s-6);
}
.hero__subtitle {
  font-size: var(--t-lead);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  color: rgba(246, 243, 238, 0.78);
  max-width: 46ch;
  line-height: var(--lh-lead);
}

/* Set upright, at body size, at 11.5:1 against the scrim's darkest column.
   A disclaimer that has to be squinted at is not a disclaimer, so this is
   quieter than the subtitle by rhythm and width, never by fading it out. */
/* The foot of the frame: the disclaimer, then a measured rail — place on the
   left, scroll cue on the right, a hairline between them. It gives the hero a
   base to stand on, which is what a floating centred chevron never does.

   All of it in normal flow. The rail was absolute until 2026-08-29 and the
   type had no way to know it was there; the fix at the time was to reserve
   padding for it, which is a number kept in step with a box it cannot see, and
   which had already been got right once in 0610bd6 and lost again. Laid out
   normally there is nothing to keep in step. */
.hero__foot {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
}
.hero__caveat {
  /* Fine print at the foot, not a third paragraph under the quote. It sat in
     the stack at nearly the weight of the pull quote and directly beneath it,
     so the one moment the page has to land was shared with its own
     qualification. Quieter here, and still in the first screen — and still
     outside .u-lg-up, because a compliance line that vanishes on a phone is
     worse than one that is merely quiet. */
  margin: 0 0 var(--s-5);
  font-size: var(--t-micro);
  line-height: var(--lh-body);
  color: rgba(246, 243, 238, 0.62);
  max-width: 74ch;
}
.hero__rail {
  display: flex;
  align-items: flex-end;
  gap: var(--s-5);
}
.hero__location {
  display: flex;
  justify-content: flex-start;
  pointer-events: none;
}
.hero__location span {
  display: block;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--gold);
  font-weight: 500;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-gold);
  min-width: min(340px, 42vw);
}
.hero__chevron {
  /* margin-left: auto rather than the rail spacing its two children apart:
     .hero__location carries u-lg-up and the chevron itself goes at 767px, so
     between 768 and 1023 the rail holds this and nothing else. With
     space-between a lone child sits at the left; with an auto margin it is at
     the right whatever stands beside it. */
  margin-left: auto;
  color: var(--gold);
  opacity: 0.75;
  animation: ocPulse 3s ease-in-out infinite;
}
.hero__chevron svg { stroke: currentColor; display: block; }
@media (max-width: 767px) {
  .hero { min-height: 92svh; }
  .hero__title { max-width: 100%; }
  .hero__chevron { display: none; }
}

/* ── Credentials strip ───────────────────────────────────────────────────
   An index rail, not a caption: the four credentials are the first factual
   claim the page makes, so they are set at a legible size with a rule above
   and below rather than at 10px in the gap between two sections. */

.credstrip {
  background: var(--ink-900);
  color: var(--on-surface-muted);
  padding: var(--s-6) var(--gutter);
  border-top: 1px solid var(--line-gold);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.credstrip__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 180% at 50% 100%, rgba(197, 160, 89, 0.07), transparent 70%);
  pointer-events: none;
}
.credstrip__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: clamp(var(--s-5), 4vw, var(--s-9));
  row-gap: var(--s-3);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 500;
  text-align: center;
}
/* The separator belongs to the credential that follows it, not to the row.

   As its own flex item it wrapped as its own flex item, and with four
   credentials on a 1200px shell the fourth goes to a second line — so the
   first line ended "… | CIIA® |" with a rule separating nothing, and the
   second line began with the phrase it should have been introducing. Attached
   here it cannot be orphaned: wherever the break falls, the mark travels with
   the words it divides.

   The spacing is unchanged, and deliberately so. Between two credentials the
   eye used to cross gap + mark + gap, because the separator was an item and
   took a flex gap on each side; it now crosses gap + mark + margin, with the
   margin set to the same clamp. Measured on the live page before the change:
   58px, 6px, 58px at a 1440px viewport, and the same three numbers after. */
.credstrip__item + .credstrip__item::before {
  content: "|";
  color: var(--line-gold);
  margin-right: clamp(var(--s-5), 4vw, var(--s-9));
}
@media (max-width: 767px) {
  /* One credential per line at this width, so every mark would be a leading
     one. This is what the separator's u-md-up class used to do. */
  .credstrip__item + .credstrip__item::before { content: none; }
}

/* ── Heritage ────────────────────────────────────────────────────────────
   The personal statement was inside a bordered, blurred, shadowed panel
   with four corner marks — five separate devices competing to frame three
   paragraphs. It is now the page itself: a gold spine down the left, a drop
   cap, and a measure that stops at 62 characters. Nothing to look at except
   the words, which is the point of a manifesto. */

/* The manifesto carries its own gold rule down the left of the text, which
   is the one that means something — it marks the measure. A second vertical
   rule at the edge of the window was decoration competing with it. */
.heritage__spine { display: none; }

.heritage__inner { max-width: var(--shell); }
.heritage__head { margin-bottom: var(--s-8); }
/* The eyebrow already draws a rule before its label; the standalone one
   underneath it was the same mark made twice. */
.heritage__head .rule { display: none; }

.manifesto {
  position: relative;
  max-width: 62ch;
  padding-left: clamp(var(--s-5), 3vw, var(--s-8));
  border-left: 1px solid var(--line-gold);
}
/* Crop marks belong on a plate, not on a column of running text — they were
   framing a box that no longer exists. They stay on .designations. */
.manifesto .corner { display: none; }
.manifesto__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  font-size: clamp(1.1875rem, 1.7vw, 1.4375rem);
  font-family: var(--serif);
  line-height: 1.6;
  color: var(--on-surface);
  font-weight: 300;
}
.dropcap {
  font-size: 4.25em;
  font-family: var(--serif);
  font-weight: 300;
  color: var(--gold-text);
  margin-right: 0.08em;
  float: left;
  line-height: 0.78;
  padding-top: 0.06em;
}
.manifesto__lead { text-wrap: pretty; }
.manifesto__quote {
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  color: var(--on-surface-muted);
  font-style: italic;
  font-weight: 300;
  padding-left: var(--s-5);
  border-left: 1px solid var(--line-gold);
}
.manifesto__close {
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  color: var(--on-surface-muted);
  font-weight: 300;
}
.manifesto__foot {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-5);
}
.manifesto__sig { display: flex; align-items: center; gap: var(--s-4); }
.manifesto__sigline { width: 44px; height: 1px; background: var(--gold); flex-shrink: 0; }
.manifesto__signame {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 600;
  color: var(--on-surface);
}

/* ── Philosophy ──────────────────────────────────────────────────────────
   Asymmetric: the text column is deliberately narrower than the image
   column, and the portrait is offset downward so the two do not sit in a
   symmetrical pair. The old radial-mask vignette on the portrait has gone —
   a soft-edged ellipse is a photo-frame effect from a decade ago. It is now
   a hard editorial crop with an offset hairline behind it. */

.philosophy__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-9);
  align-items: center;
}
@media (min-width: 900px) {
  .philosophy__inner--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(var(--s-8), 7vw, 120px); }

  /* With no portrait uploaded the section would be a 56ch column of text in a
     1200px shell — a third of the page used and the rest silent. The heading
     and the copy then take a column each, which is a composition rather than
     a layout waiting for an asset that has not been supplied. */
  .philosophy__inner:not(.philosophy__inner--split) > .reveal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(var(--s-8), 6vw, 104px);
    align-items: start;
  }
  .philosophy__inner:not(.philosophy__inner--split) .eyebrow { grid-column: 1; grid-row: 1; }
  .philosophy__inner:not(.philosophy__inner--split) .philosophy__title { grid-column: 1; grid-row: 2; margin-bottom: 0; }
  .philosophy__inner:not(.philosophy__inner--split) .philosophy__copy { grid-column: 2; grid-row: 1 / span 2; max-width: 52ch; }
}
.philosophy__title {
  font-size: var(--t-h1);
  margin-bottom: var(--s-7);
  line-height: var(--lh-title);
  font-weight: 300;
  letter-spacing: var(--track-tight);
  color: var(--on-surface);
  max-width: 16ch;
}
.philosophy__copy {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  max-width: 56ch;
}
.philosophy__p1 {
  font-size: var(--t-lead);
  font-family: var(--serif);
  font-weight: 300;
  line-height: var(--lh-lead);
  color: var(--on-surface);
  border-left: 1px solid var(--line-gold);
  padding-left: var(--s-5);
}
.philosophy__p2 {
  font-size: var(--t-small);
  color: var(--on-surface-muted);
  font-family: var(--sans);
  line-height: var(--lh-body);
  padding-left: calc(var(--s-5) + 1px);
}

.portrait { position: relative; max-width: 460px; margin-inline: auto; width: 100%; }
/* The hairline sits behind and offset, so the photograph looks mounted
   rather than outlined. */
.portrait__halo {
  position: absolute;
  inset: 0;
  border: 1px solid var(--line-gold);
  transform: translate(20px, 20px);
  pointer-events: none;
  z-index: 0;
  transition: transform var(--dur-slow) var(--ease);
}
.portrait:hover .portrait__halo { transform: translate(14px, 14px); }
.portrait__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  z-index: 10;
  background: var(--paper-200);
  box-shadow: var(--shadow-lg);
}
.portrait__fade {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: linear-gradient(to top, rgba(13, 12, 10, 0.45), rgba(13, 12, 10, 0.05));
  transition: opacity var(--dur-image) var(--ease);
  pointer-events: none;
}
.portrait__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transform: scale(1.06);
  transition: transform var(--dur-image) var(--ease), filter var(--dur-image) var(--ease);
}
.portrait__frame:hover img,
.portrait__frame:focus-within img { filter: grayscale(0) contrast(1); }

/* ── Archetypes ──────────────────────────────────────────────────────────
   Three cards that were three outlined boxes. The border has gone: each is
   a tonal surface with a rule across the top that draws on hover, and the
   ordinal is a large ghost figure rather than a small label. Removing the
   outline is what lets the three read as one row instead of three widgets. */

.archetypes__head { margin-bottom: var(--s-9); max-width: 62ch; }
.archetypes__title {
  font-size: var(--t-h1);
  font-weight: 300;
  line-height: var(--lh-title);
  letter-spacing: var(--track-tight);
  max-width: 18ch;
}
.archetypes__intro {
  margin-top: var(--s-5);
  color: var(--on-surface-muted);
  max-width: 58ch;
  font-size: var(--t-body);
  line-height: var(--lh-body);
}
.archetypes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1px;
  background: var(--line-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* One step lighter than the section it sits on. Painting the card the same
   colour as its ground and separating it with a 6%-white hairline made the
   three panels invisible until hovered — a layered surface has to be doing
   something at rest, or it is not a surface. */
.archetype {
  padding: var(--pad-panel);
  background: var(--ink-600);
  transition: background-color var(--dur-slow) var(--ease);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.archetype::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
}
.archetype:hover { background: var(--ink-500); }
.archetype:hover::before, .archetype:focus-within::before { transform: scaleX(1); }
.archetype__num {
  font-family: var(--serif);
  color: rgba(246, 243, 238, 0.07);
  position: absolute;
  top: var(--s-4);
  right: var(--s-5);
  font-size: 5.5rem;
  font-weight: 300;
  line-height: 1;
  z-index: -1;
  transition: color var(--dur-slow) var(--ease);
  user-select: none;
}
.archetype__badge {
  margin-bottom: var(--s-8);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.archetype__ring {
  position: absolute;
  inset: -10px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-gold);
  transform: scale(0.85);
  opacity: 0;
  transition: all var(--dur-slow) var(--ease);
  pointer-events: none;
}
.archetype__icon {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-surface-faint);
  opacity: 0.9;
  transition: all var(--dur-slow) var(--ease);
}
.archetype__profile {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 600;
  color: var(--gold-text);
  margin-bottom: var(--s-3);
  display: block;
}
.archetype__title {
  font-size: var(--t-h3);
  margin-bottom: var(--s-4);
  color: #fff;
  font-weight: 400;
}
.archetype__focus {
  font-size: var(--t-small);
  color: var(--on-surface-muted);
  line-height: var(--lh-body);
  max-width: 40ch;
}

/* ── Expertise timeline ──────────────────────────────────────────────────
   The three layer cards were 48px-padded outlined boxes carrying paragraphs
   768px wide — 116 characters on a line, half again past the point where
   the eye reliably finds the next one. They are now hairline-separated rows
   on the section's own ground, with the copy capped at 66 characters. */

.expertise__head { margin-bottom: var(--s-9); max-width: 60ch; }
.expertise__inner > .expertise__head { text-align: left; }
.expertise__title {
  font-size: var(--t-h1);
  margin-bottom: var(--s-4);
  font-weight: 300;
  line-height: var(--lh-title);
  letter-spacing: var(--track-tight);
  max-width: 16ch;
}
.expertise__tagline {
  color: var(--on-surface-faint);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-size: var(--t-micro);
  font-weight: 500;
  margin-bottom: var(--s-4);
}
.expertise__head .rule--center { margin-inline: 0; }

.timeline { position: relative; }
.timeline__spine {
  position: absolute;
  left: 5px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line-gold) 12%, var(--line-gold) 88%, transparent);
}
.timeline__items { display: flex; flex-direction: column; }
.layer { position: relative; }
.layer__marker {
  position: absolute;
  left: 0;
  top: calc(var(--s-7) + 4px);
  width: 12px;
  align-items: center;
  z-index: 20;
  display: flex;
}
.layer__num {
  position: absolute;
  left: 34px;
  top: -3px;
  color: var(--gold-text);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.05em;
}
.layer__dash { display: none; }
.layer__node {
  width: 11px;
  height: 11px;
  border-radius: var(--r-full);
  background: var(--ink-600);
  border: 1px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: box-shadow var(--dur-slow) var(--ease);
}
.layer__node::after { content: ""; width: 3px; height: 3px; border-radius: var(--r-full); background: var(--gold); }
.layer:hover .layer__node { box-shadow: 0 0 0 5px rgba(197, 160, 89, 0.12); }

.layer__card {
  padding: var(--s-7) 0;
  border-top: 1px solid var(--line-soft);
  transition: background-color var(--dur-slow) var(--ease);
  position: relative;
}
.layer:first-child .layer__card { border-top: 0; }
.layer__row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-6); }
.layer__icon {
  color: var(--gold);
  width: 60px;
  height: 60px;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  transition: all var(--dur-slow) var(--ease);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.layer__text { flex: 1 1 320px; }
.layer__title {
  font-size: var(--t-h3);
  margin-bottom: var(--s-3);
  color: #fff;
  font-weight: 400;
}
.layer__desc {
  font-size: var(--t-small);
  color: var(--on-surface-muted);
  line-height: var(--lh-body);
  max-width: 66ch;
}
@media (min-width: 768px) {
  .layer__card { margin-left: 104px; }
}
@media (max-width: 767px) {
  .timeline__spine, .layer__marker { display: none; }
}

/* ── Global footprint ────────────────────────────────────────────────────
   Eight identical bordered cards in a grid was the most generic element on
   the page. The hubs are now an index — hairline rows, ordinal, place,
   status — which is how a firm that operates in eight jurisdictions would
   actually list them, and which reads as a register rather than as tiles. */

.global__map {
  position: absolute;
  inset: 0;
  opacity: 0.16;
  pointer-events: none;
  overflow: hidden;
  user-select: none;
  color: var(--gold);
  z-index: 0;
  mask-image: radial-gradient(120% 100% at 50% 40%, #000 40%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 40%, transparent 78%);
}
.global__map svg { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.global__map g[data-hub] { transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.global__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--s-8);
  gap: var(--s-7);
}
.global__title {
  font-size: var(--t-h1);
  font-weight: 300;
  line-height: var(--lh-title);
  letter-spacing: var(--track-tight);
  color: var(--on-surface);
  max-width: 14ch;
}
.global__aside {
  font-size: var(--t-small);
  color: var(--on-surface-muted);
  max-width: 34ch;
  line-height: var(--lh-body);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.global__aside p { font-style: italic; font-family: var(--serif); font-size: var(--t-body); }
.global__legend {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 500;
  font-style: normal;
}
.global__legenditem { display: flex; align-items: center; gap: var(--s-2); }

.global__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  column-gap: var(--s-9);
  border-top: 1px solid var(--line);
}
.hub {
  cursor: default;
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--s-4);
  position: relative;
  transition: padding-left var(--dur) var(--ease);
}
.hub::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
}
.hub:hover { padding-left: var(--s-3); }
.hub:hover::after { transform: scaleX(1); }
/* display:contents lifts the label and the tag out of their wrapper so all
   three cells sit on the row's own grid; each is then placed explicitly,
   because the source order (label, tag, name) is not the reading order. */
.hub__head { display: contents; }
.hub__label {
  grid-column: 1;
  grid-row: 1;
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  color: var(--on-surface-faint);
  font-family: var(--mono);
}
.hub__name {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--t-h3);
  font-family: var(--serif);
  font-weight: 300;
  transition: color var(--dur) var(--ease);
  line-height: var(--lh-tight);
  color: var(--on-surface);
}
.hub__tag {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-nav);
  font-weight: 500;
  white-space: nowrap;
}
.hub__bar { display: none; }

@media (max-width: 479px) {
  /* Three columns will not hold at 375px without the place name breaking.
     The status moves under the name rather than being truncated. */
  .hub { grid-template-columns: auto 1fr; row-gap: var(--s-1); }
  .hub__tag { grid-column: 2; grid-row: 2; justify-self: start; }
}

.hub--neutral .hub__tag { color: var(--gold-text); }
.hub--neutral::after { background: var(--gold); }
.hub--neutral:hover .hub__name { color: var(--gold-text); }

.hub--alliance .hub__tag { color: var(--alliance-text); }
.hub--alliance::after { background: var(--alliance); }
.hub--alliance:hover .hub__name { color: var(--alliance-text); }

/* ── The Book ────────────────────────────────────────────────────────── */

.book__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-9);
  align-items: center;
}
@media (min-width: 900px) {
  .book__inner--split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(var(--s-8), 7vw, 112px); }

  /* Same problem, same answer: with no cover the pitch splits into a stated
     half and a supporting half, so the section still occupies the page. */
  .book__inner:not(.book__inner--split) > .reveal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(var(--s-8), 6vw, 104px);
    align-items: start;
  }
  .book__inner:not(.book__inner--split) .eyebrow      { grid-column: 1; grid-row: 1; }
  .book__inner:not(.book__inner--split) .book__title  { grid-column: 1; grid-row: 2; }
  .book__inner:not(.book__inner--split) .book__lead   { grid-column: 1; grid-row: 3; margin-bottom: 0; }
  .book__inner:not(.book__inner--split) .book__features { grid-column: 2; grid-row: 1 / span 2; margin-bottom: var(--s-6); align-self: end; }
  .book__inner:not(.book__inner--split) .authorcard   { grid-column: 2; grid-row: 3; margin-bottom: var(--s-6); }
  .book__inner:not(.book__inner--split) .btn-wipe     { grid-column: 2; grid-row: 4; justify-self: start; }
}
.book__coverwrap { position: relative; perspective: 1600px; }
.book__glow {
  position: absolute;
  inset: -6%;
  background: radial-gradient(ellipse at 50% 60%, rgba(197, 160, 89, 0.16), transparent 68%);
  filter: blur(28px);
  pointer-events: none;
}
.book__stage {
  position: relative;
  aspect-ratio: 3 / 4.2;
  max-width: 360px;
  margin-inline: auto;
  transform-style: preserve-3d;
}
.book__cover {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: rotateY(-6deg) rotateX(1.5deg);
  transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
  background: var(--ink-700);
}
.book__cover:hover {
  transform: rotateY(-1deg) rotateX(0deg) translateY(-8px);
  box-shadow: 0 8px 16px rgba(19, 18, 16, 0.1), 0 50px 90px -30px rgba(19, 18, 16, 0.4);
}
/* Board thickness, plus a light sweep across the face — the two cues that
   make a flat rectangle read as a physical object. */
.book__spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  background: linear-gradient(to right, rgba(13, 12, 10, 0.55), rgba(197, 160, 89, 0.35) 60%, rgba(13, 12, 10, 0.25));
  z-index: 20;
}
.book__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 15;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.16) 46%, transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
}
.book__cover:hover::after { opacity: 1; }
.book__cover img { width: 100%; height: 100%; object-fit: cover; }

.book__title {
  font-size: var(--t-h1);
  margin-bottom: var(--s-5);
  line-height: var(--lh-title);
  letter-spacing: var(--track-tight);
  color: var(--on-surface);
  font-weight: 300;
  max-width: 15ch;
}
.book__lead {
  font-size: var(--t-lead);
  font-family: var(--serif);
  font-weight: 300;
  color: var(--on-surface-muted);
  margin-bottom: var(--s-7);
  line-height: var(--lh-lead);
  max-width: 50ch;
}
/* Sentence case on a hairline grid. Set as 12px bold uppercase with 0.18em
   tracking, four short phrases read as system labels rather than as the
   contents of a book. */
.book__features {
  display: flex;
  flex-direction: column;
  margin: 0 0 var(--s-7);
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-soft);
  max-width: 46ch;
}
.book__features li {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-small);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--on-surface-muted);
}
.book__tick {
  width: 18px;
  height: 18px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-gold);
  color: var(--gold-text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--dur) var(--ease);
}
.book__features li:hover .book__tick { background: var(--gold); border-color: var(--gold); color: var(--paper-000); }
.book__features span { transition: color var(--dur) var(--ease); }

.authorcard {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  margin-bottom: var(--s-7);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  max-width: 46ch;
}
.authorcard__avatar {
  width: 60px;
  height: 60px;
  border-radius: var(--r-full);
  overflow: hidden;
  filter: grayscale(1);
  transition: filter var(--dur-image) var(--ease);
  flex-shrink: 0;
}
.authorcard__avatar img { width: 100%; height: 100%; object-fit: cover; }
.authorcard__label {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 600;
  color: var(--gold-text);
  margin-bottom: var(--s-1);
}
.authorcard__quote {
  font-size: var(--t-body);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  color: var(--on-surface);
  line-height: var(--lh-lead);
}

/* The primary call to action. The ink wipes in from the left on a scale
   transform rather than an animated width, so it composites on the GPU. */
.btn-wipe {
  position: relative;
  padding: var(--s-5) var(--s-7);
  overflow: hidden;
  border: 1px solid var(--ink-800);
  background: transparent;
  color: var(--ink-800);
  font-weight: 600;
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
  min-height: 52px;
}
.btn-wipe__ink {
  position: absolute;
  inset: 0;
  background: var(--ink-800);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
  display: block;
  z-index: 0;
}
.btn-wipe__label {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  transition: color var(--dur-slow) var(--ease);
}
.btn-wipe:hover .btn-wipe__label svg { transform: translateX(4px); }
.btn-wipe__label svg { transition: transform var(--dur) var(--ease); }

/* ── The Briefing ────────────────────────────────────────────────────── */

.insights__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--s-8);
  gap: var(--s-7);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--line);
}
.insights__title {
  font-size: var(--t-h1);
  line-height: var(--lh-title);
  letter-spacing: var(--track-tight);
  font-weight: 300;
}
.insights__aside { text-align: right; max-width: 34ch; }
.insights__aside p {
  font-size: var(--t-small);
  color: var(--on-surface-muted);
  line-height: var(--lh-body);
  font-style: italic;
  font-family: var(--serif);
  margin-bottom: var(--s-4);
}
.insights__all {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--gold-text);
  min-height: 44px;
  transition: gap var(--dur) var(--ease);
}
.insights__aside .insights__all { justify-content: flex-end; margin-left: auto; }
.insights__all:hover { gap: var(--s-3); }
/* Two columns, stated rather than derived from a minimum width.

   `auto-fit` with a 280px floor resolved to four columns at the 1200px shell,
   so the six briefings laid out 4 + 2 — and the two empty cells in the second
   row painted the container background as a solid rectangle, which is the
   beige block that was showing under the grid. The background is only meant
   to be seen through the 1px gaps, as hairlines.

   Four columns also cost the headlines their meaning: at 299px a card clamped
   "The Paper Passport Is Already Dead. I Don't Need to Invent the Date — It's
   in the Court Records." down to "...I Don't Need to Invent the…". Two columns
   fit six pieces exactly and give the titles room to finish. */
.insights__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line-soft);
  border-bottom: 1px solid var(--line);
}

/* An odd number of pieces would leave one cell empty, and an empty cell is
   exactly how the beige rectangle happened. The last one spans the row
   instead, so the band closes cleanly at five, six or seven briefings rather
   than only at even counts. In the single-column layout below 900px this
   resolves to the full width and changes nothing. */
.insights__grid > .article:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* With nothing to list, the header's bottom rule is a grid line with no grid.
   The band closes itself instead: rules top and bottom, no dangling edge. */
.insights__inner--bare {
  border-block: 1px solid var(--line);
  padding-block: var(--s-7);
}
.insights__inner--bare .insights__head {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
  align-items: center;
}
.article {
  padding: var(--pad-panel) var(--pad-card) var(--pad-card);
  /* Lifts towards white rather than being outlined — the same reason the
     archetype panels lift towards light on the dark sections. */
  background: var(--paper-000);
  transition: background-color var(--dur-slow) var(--ease);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  position: relative;
  overflow: hidden;
  color: var(--on-surface);
}
/* The hover cue is the gold rule drawing across the top, the title taking
   the accent and the access line rising into place. A background change on
   top of those would be a fourth signal for one gesture. */
.article:hover .article__title { color: var(--gold-text); }
.article__bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
}
.article__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-5);
  gap: var(--s-3);
}
.article__date {
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: var(--on-surface-faint);
  font-family: var(--mono);
}
.article__class {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-nav);
  font-weight: 500;
  color: var(--on-surface-faint);
  white-space: nowrap;
}
.article__title {
  font-size: var(--t-h3);
  margin-bottom: var(--s-4);
  font-weight: 400;
  transition: color var(--dur) var(--ease);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article__snippet {
  font-size: var(--t-small);
  color: var(--on-surface-muted);
  line-height: var(--lh-body);
  margin-bottom: var(--s-6);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article__access {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 600;
  color: var(--gold-text);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* ── Pedigree ────────────────────────────────────────────────────────── */

.pedigree__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-9);
}
@media (min-width: 900px) {
  .pedigree__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(var(--s-8), 6vw, 104px); }
}
.pedigree__col--center { display: flex; flex-direction: column; justify-content: center; }
.pedigree__title {
  font-size: var(--t-h1);
  margin-bottom: var(--s-8);
  line-height: var(--lh-display);
  letter-spacing: var(--track-tight);
  font-weight: 300;
  max-width: 12ch;
}
.pedigree__blocks { display: flex; flex-direction: column; gap: var(--s-8); }
.pedigree__blocktitle {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--gold-text);
  margin-bottom: var(--s-5);
  font-weight: 600;
}
.pedigree__entry { display: flex; flex-direction: column; gap: var(--s-3); }
.pedigree__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: var(--s-3);
  gap: var(--s-4);
  transition: border-color var(--dur-slow) var(--ease);
}
.pedigree__entry:hover .pedigree__row { border-color: var(--line-gold); }
.pedigree__role { font-size: var(--t-h3); font-family: var(--serif); font-weight: 300; color: #fff; }
.pedigree__meta {
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: var(--gold-text);
  font-family: var(--mono);
  white-space: nowrap;
}
.pedigree__meta--dim { color: var(--on-surface-faint); }
.pedigree__desc {
  font-size: var(--t-small);
  color: var(--on-surface-muted);
  line-height: var(--lh-body);
  max-width: 58ch;
}
.pedigree__schools { display: flex; flex-direction: column; gap: var(--s-5); }
.pedigree__school {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  border-left: 1px solid var(--line);
  padding-left: var(--s-5);
  transition: border-color var(--dur-slow) var(--ease);
}
.pedigree__school:hover { border-color: var(--gold); }
.pedigree__uni { font-size: var(--t-h3); font-family: var(--serif); font-weight: 300; color: #fff; line-height: var(--lh-tight); }
.pedigree__degree {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-nav);
  color: var(--on-surface-faint);
  font-weight: 500;
}

/* The one genuinely raised surface on the page, and the only place a heavy
   shadow is justified: it is a plate, and it should look set into the page. */
.designations {
  padding: var(--pad-panel);
  background: var(--ink-900);
  border: 1px solid var(--line-gold);
  position: relative;
  box-shadow: var(--shadow-lg);
}
.designations__title {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 600;
  color: var(--gold);
  margin-bottom: var(--s-5);
}
.designations__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.designations__list li {
  font-size: var(--t-small);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  color: var(--on-surface-muted);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line-soft);
}
.designations__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.designations__bullet {
  width: 4px;
  height: 4px;
  background: var(--gold);
  border-radius: var(--r-full);
  flex-shrink: 0;
}

/* ── Pull quote ──────────────────────────────────────────────────────────
   The page's one moment of pure breath, and the only section that is
   centred — which is what makes centring mean something here. */

.pullquote__bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}
.pullquote__bg span {
  font-size: 22vw;
  font-family: var(--serif);
  font-weight: 300;
  color: rgba(19, 18, 16, 0.035);
  user-select: none;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: -0.03em;
}
.pullquote__inner { max-width: var(--shell-narrow); }
/* <figure> around the quote and its attribution, because that is the pairing
   figure/figcaption exists for: without it the name under the quotation was a
   sibling div that nothing tied to it, and a screen reader reading the
   blockquote had no way to say whose words they were. The UA margin has to go
   — figure ships with 1em 40px, which would indent a centred pull quote by
   40px on one axis and break the section's rhythm on the other. */
.pullquote__figure { margin: 0; }
.pullquote__mark {
  color: var(--gold);
  margin-bottom: var(--s-7);
  display: flex;
  justify-content: center;
  opacity: 0.5;
}
.pullquote__mark svg { width: 32px; height: 32px; }
.pullquote__text {
  font-size: clamp(1.875rem, 4.2vw, 3.25rem);
  font-family: var(--serif);
  line-height: 1.18;
  letter-spacing: var(--track-snug);
  font-style: italic;
  font-weight: 300;
  position: relative;
  z-index: 10;
  margin: 0;
  color: var(--on-surface);
  text-wrap: balance;
}
.pullquote__attr {
  margin-top: var(--s-7);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 500;
  color: var(--on-surface-faint);
}

/* ── Vindication ─────────────────────────────────────────────────────── */

.vindication__inner { max-width: var(--shell); }
.vindication__ghost {
  position: absolute;
  left: -0.06em;
  top: -0.28em;
  font-size: clamp(120px, 16vw, 210px);
  font-family: var(--serif);
  font-weight: 300;
  color: rgba(19, 18, 16, 0.04);
  user-select: none;
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: -0.04em;
  line-height: 1;
}
.vindication__content { position: relative; z-index: 10; }
.vindication__title {
  font-size: var(--t-h1);
  margin-bottom: var(--s-8);
  line-height: var(--lh-title);
  letter-spacing: var(--track-tight);
  color: var(--on-surface);
  font-weight: 300;
  max-width: 16ch;
}
.vindication__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
}
@media (min-width: 900px) {
  .vindication__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-9); }
}
.vindication__copy {
  font-size: var(--t-lead);
  color: var(--on-surface);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  font-weight: 300;
  font-family: var(--serif);
  line-height: var(--lh-lead);
  max-width: 56ch;
}
.vindication__p2 { font-size: var(--t-small); color: var(--on-surface-muted); font-family: var(--sans); line-height: var(--lh-body); }
/* A <figure> for the same reason as the pull quote above: the citation under
   the quotation is its caption, not the paragraph that happens to follow it.
   `margin` is written in full because figure carries a UA margin on all four
   sides and only the top one is wanted. */
.vindication__pull {
  padding-top: var(--s-6);
  margin: var(--s-2) 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.vindication__quote {
  font-size: var(--t-lead);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  color: var(--gold-text);
  line-height: var(--lh-lead);
  padding-left: var(--s-5);
  border-left: 1px solid var(--line-gold);
  margin: 0;
}
.vindication__source {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  /* Explicit colour rather than opacity: this sits inside .vindication__copy,
     whose own alpha would compound and fail AA. */
  color: rgba(19, 18, 16, 0.7);
  font-weight: 500;
  padding-left: var(--s-5);
}

.dossier { position: relative; }
.dossier__glow {
  position: absolute;
  inset: -5%;
  background: radial-gradient(ellipse at 50% 50%, rgba(197, 160, 89, 0.12), transparent 70%);
  filter: blur(24px);
  pointer-events: none;
}
.dossier__card {
  background: var(--paper-000);
  padding: var(--pad-panel);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line-soft);
  position: relative;
  overflow: hidden;
  transform: rotate(0.6deg);
  transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
}
.dossier__card:hover { transform: rotate(0deg); }
.dossier__inner-rule {
  position: absolute;
  inset: 7px;
  border: 1px solid var(--line-gold);
  opacity: 0.5;
  pointer-events: none;
}
.dossier__corner {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle at 30% 70%, rgba(197, 160, 89, 0.1), transparent 70%);
  pointer-events: none;
}
.dossier__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-4);
  margin-bottom: var(--s-7);
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: var(--s-5);
  position: relative;
  z-index: 10;
}
.dossier__court {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 600;
  color: var(--on-surface);
  margin-bottom: var(--s-1);
}
.dossier__courtsub { font-size: var(--t-small); font-family: var(--serif); font-style: italic; color: var(--on-surface-faint); }
.dossier__refs {
  text-align: right;
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--on-surface-faint);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.dossier__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  font-family: var(--serif);
  font-size: var(--t-body);
  color: var(--on-surface);
  line-height: var(--lh-lead);
  margin-bottom: var(--s-6);
  position: relative;
  z-index: 10;
}
.dossier__veil {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  background: linear-gradient(to top, var(--paper-000), rgba(253, 252, 250, 0.5), transparent);
  z-index: 10;
  pointer-events: none;
}
.dossier__line1 { font-style: italic; color: var(--on-surface-muted); }
.dossier__line2 { padding-top: var(--s-3); font-weight: 400; color: var(--on-surface); font-family: var(--serif); }
.dossier__redaction { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-1); }
.dossier__redaction span { height: 11px; background: rgba(19, 18, 16, 0.06); display: block; }
.dossier__stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-9deg);
  z-index: 20;
  pointer-events: none;
  user-select: none;
}
.dossier__stamp span {
  display: block;
  border: 2px double rgba(197, 160, 89, 0.75);
  color: rgba(197, 160, 89, 0.75);
  padding: var(--s-3) var(--s-6);
  font-size: clamp(1.5rem, 4vw, 2.75rem);
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.5;
  white-space: nowrap;
}
.dossier__foot { display: flex; justify-content: flex-end; margin-top: var(--s-5); position: relative; z-index: 20; }
.dossier__foot a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 600;
  color: var(--on-surface-faint);
  min-height: 44px;
  transition: color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.dossier__foot a:hover { color: var(--gold-text); gap: var(--s-4); }

/* ── Contact ─────────────────────────────────────────────────────────── */

/* Given up to .sitefoot, which now closes the band from outside <main>. */
.contact { padding-bottom: 0; }

.contact__head { margin-bottom: var(--s-9); max-width: 30ch; }
.contact__title {
  font-size: var(--t-h1);
  margin-bottom: var(--s-5);
  font-style: italic;
  font-weight: 300;
  letter-spacing: var(--track-tight);
}
.contact__lead {
  font-size: var(--t-lead);
  font-family: var(--serif);
  font-weight: 300;
  color: var(--on-surface-muted);
  max-width: 44ch;
  line-height: var(--lh-lead);
}
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-8);
  align-items: stretch;
  margin-bottom: var(--s-10);
}
@media (min-width: 900px) {
  .contact__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-9); }
}

.advisory {
  background: linear-gradient(160deg, rgba(246, 243, 238, 0.055), rgba(246, 243, 238, 0.015));
  border: 1px solid var(--line);
  padding: var(--pad-panel);
  transition: border-color var(--dur-slow) var(--ease), background-color var(--dur-slow) var(--ease);
  display: flex;
  flex-direction: column;
}
.advisory:hover { border-color: var(--line-gold); }
.advisory__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-5); gap: var(--s-4); }
.advisory__eyebrow {
  color: var(--gold-text);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 600;
}
.advisory__title { font-size: var(--t-h2); margin-bottom: var(--s-4); font-weight: 300; }
.advisory__desc {
  font-size: var(--t-small);
  color: var(--on-surface-muted);
  line-height: var(--lh-body);
  margin-bottom: var(--s-6);
  max-width: 46ch;
}
.advisory__features {
  display: flex;
  flex-direction: column;
  margin: 0 0 var(--s-7);
  padding: 0;
  list-style: none;
  font-size: var(--t-small);
  color: var(--on-surface-muted);
  border-top: 1px solid var(--line-soft);
}
.advisory__features li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line-soft);
}
.advisory__features li::before {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--gold);
  border-radius: var(--r-full);
  flex-shrink: 0;
}
/* Same size and colour as the description it qualifies (9.4:1 on --ink-900),
   not a shrunken footnote under it. */
.advisory__caveat {
  font-size: var(--t-small);
  line-height: var(--lh-body);
  color: var(--on-surface-muted);
  margin: 0 0 var(--s-6);
  max-width: 46ch;
}
.advisory__cta {
  margin-top: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  background: var(--paper-100);
  color: var(--ink-900);
  min-height: 56px;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.advisory__cta:hover { background: var(--gold); }
.advisory__cta svg { transition: transform var(--dur) var(--ease); }
.advisory__cta:hover svg { transform: translateX(4px); }
.advisory__cta span { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--track-label); font-weight: 600; }

.channels { display: flex; flex-direction: column; gap: var(--s-8); justify-content: center; }
.channels__block { display: flex; flex-direction: column; gap: var(--s-4); }
.channels__label {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--on-surface-faint);
  font-weight: 600;
  font-family: var(--sans);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line-soft);
  margin: 0;
}
.channels__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--s-4); }
.channel {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  transition: color var(--dur) var(--ease);
  min-height: 48px;
  color: var(--on-surface-muted);
}
.channel:hover { color: var(--gold); }
.channel__icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  transition: all var(--dur) var(--ease);
  flex-shrink: 0;
}
.channel--lg .channel__icon { width: 48px; height: 48px; }
.channel__name {
  font-size: var(--t-small);
  letter-spacing: 0.01em;
  font-weight: 400;
  overflow-wrap: anywhere;
}
.channel--lg .channel__name { font-size: var(--t-body); }

/* The footer is its own band now, outside <main>.

   It used to be the last child of .contact__inner, which put it inside <main>
   — and a <footer> nested in main, article, aside or section is scoped to that
   ancestor, so it is not the document's contentinfo landmark. The one element
   on the page whose job is to be reachable from anywhere, carrying the imprint
   link that Art. 3(1)(s) UWG requires, was not reachable by the shortcut every
   screen reader offers for exactly that. It was also inside {% if
   shown.contact %}: emptying the contact section in Wagtail would have taken
   the legal notice with it.

   The vertical rhythm is reproduced exactly rather than re-tuned. .contact
   gives up its bottom padding and this band takes it, so what stands between
   the contact grid and the footer rule is still the grid's --s-10 margin plus
   this inner's --s-7, and what stands below the disclaimer is still one
   --section. Nothing moves; only the ancestry changes. */
.sitefoot {
  background: var(--ink-900);
  color: var(--paper-100);
  padding: 0 var(--gutter) var(--section);
}
.sitefoot__inner {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-top: var(--s-7);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.sitefoot__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--on-surface-faint);
  gap: var(--s-4);
}
.sitefoot__row a { color: var(--on-surface-muted); transition: color var(--dur) var(--ease); position: relative; }
.sitefoot__row a:hover { color: var(--gold); }
/* The privacy link sits mid-sentence, so it cannot be given a 44px box
   without breaking the line. The hit area is extended instead — WCAG 2.5.5
   is about the target, not the ink. */
.sitefoot__row a::after { content: ""; position: absolute; inset: -13px -8px; }
.sitefoot__disclaimer {
  max-width: 78ch;
  font-size: var(--t-micro);
  color: rgba(246, 243, 238, 0.5);
  line-height: 1.75;
  text-transform: none;
  letter-spacing: 0;
}

/* ── Back to top ─────────────────────────────────────────────────────── */

.totop {
  position: fixed;
  bottom: var(--s-6);
  right: var(--s-6);
  z-index: 50;
  width: 48px;
  height: 48px;
  background: rgba(13, 12, 10, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--paper-100);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-md);
  transition: all var(--dur) var(--ease);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn var(--dur) var(--ease) both;
}
.totop[hidden] { display: none; }
.totop:hover { background: var(--gold); border-color: var(--gold); color: var(--ink-900); }
.totop svg { transition: transform var(--dur) var(--ease); }
.totop:hover svg { transform: translateY(-2px); }

/* ── Waitlist modal ──────────────────────────────────────────────────── */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
}
.modal[hidden] { display: none; }
.modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(13, 12, 10, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: fadeIn var(--dur) var(--ease) both;
}
.modal__dialog {
  position: relative;
  width: 100%;
  max-width: 540px;
  background: var(--paper-000);
  padding: clamp(var(--s-6), 4vw, var(--s-8));
  box-shadow: var(--shadow-lg);
  border-top: 2px solid var(--gold);
  max-height: 90vh;
  overflow-y: auto;
  animation: revealUp var(--dur-slow) var(--ease) both;
}
.modal__close {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  color: var(--on-surface-faint);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding-inline: var(--s-2);
}
.modal__close:hover { color: var(--gold-text); }
.modal__close span { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--track-label); font-weight: 600; }

.quiz[hidden], .enrol[hidden], .done[hidden] { display: none; }

.quiz__head { margin-bottom: var(--s-7); }
.quiz__headrow { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--s-4); gap: var(--s-4); }
.quiz__labels { display: flex; flex-direction: column; gap: var(--s-1); }
.quiz__audit { color: var(--gold-text); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--track-label); font-weight: 600; }
.quiz__protocol {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-nav);
  color: var(--on-surface-faint);
  font-family: var(--mono);
}
.quiz__step { font-size: var(--t-micro); font-family: var(--mono); color: var(--on-surface-faint); white-space: nowrap; }
.quiz__track { height: 2px; width: 100%; background: var(--line-soft); position: relative; overflow: hidden; }
.quiz__bar { position: absolute; top: 0; left: 0; height: 100%; background: var(--gold); transition: width var(--dur) var(--ease); width: 0; }
.quiz__q { font-size: clamp(1.375rem, 3vw, 1.75rem); margin-bottom: var(--s-6); line-height: var(--lh-tight); font-weight: 300; }
.quiz__options { display: flex; flex-direction: column; gap: var(--s-2); }
.quiz__options button {
  width: 100%;
  text-align: left;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line);
  background: transparent;
  transition: all var(--dur) var(--ease);
  font-size: var(--t-small);
  font-weight: 400;
  cursor: pointer;
  color: var(--on-surface);
  min-height: 52px;
  position: relative;
}
.quiz__options button:hover {
  border-color: var(--gold);
  background: rgba(197, 160, 89, 0.06);
  padding-left: var(--s-6);
}
.quiz__skip {
  margin-top: var(--s-6);
  display: flex;
  justify-content: center;
  border-top: 1px solid var(--line-soft);
  padding-top: var(--s-3);
}
.quiz__skip button {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--on-surface-faint);
  font-weight: 600;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
  min-height: 44px;
}
.quiz__skip button:hover { color: var(--gold-text); }

.enrol__eyebrow {
  color: var(--gold-text);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 600;
  margin-bottom: var(--s-3);
  display: block;
}
.enrol__title { font-size: var(--t-h2); margin-bottom: var(--s-5); line-height: var(--lh-tight); font-weight: 300; }
.enrol__score {
  padding: var(--s-5);
  background: var(--paper-200);
  margin-bottom: var(--s-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  border-left: 2px solid var(--gold);
}
.enrol__scorelabel { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--track-label); font-weight: 600; color: var(--on-surface-muted); }
.enrol__scorevalue { font-size: var(--t-h4); font-family: var(--serif); font-weight: 400; text-align: right; }
/* Directly under the verdict, not muted and not shrunk into the smallest step
   on the scale: a qualification the reader has to squint at is not one. */
.enrol__caveat { font-size: var(--t-small); line-height: var(--lh-body); margin: 0 0 var(--s-6); }
.enrol__lead { font-size: var(--t-small); color: var(--on-surface-muted); margin-bottom: var(--s-6); line-height: var(--lh-body); }
.enrol__form { display: flex; flex-direction: column; gap: var(--s-5); }
.enrol__error {
  padding: var(--s-4);
  background: rgba(239, 68, 68, 0.08);
  border-left: 2px solid var(--danger);
  color: #b91c1c;
  font-size: var(--t-micro);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  font-weight: 600;
}
.enrol__error[hidden] { display: none; }
.enrol__field { display: flex; flex-direction: column; gap: var(--s-2); }
.enrol__label { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--on-surface-faint); font-weight: 600; }
.enrol__input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: var(--s-3) 0;
  outline: none;
  transition: border-color var(--dur) var(--ease);
  font-size: var(--t-body);
  font-family: var(--sans);
  color: var(--on-surface);
  border-radius: 0;
  min-height: 44px;
}
/* A placeholder is text, and the same 4.5:1 floor applies to it. */
.enrol__input::placeholder { color: var(--on-surface-faint); }
.enrol__input:focus { border-bottom-color: var(--gold); border-bottom-width: 2px; padding-bottom: calc(var(--s-3) - 1px); }
.enrol__submit {
  width: 100%;
  padding: var(--s-5);
  background: var(--ink-800);
  color: var(--paper-100);
  text-transform: uppercase;
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  font-weight: 600;
  transition: background-color var(--dur) var(--ease);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  min-height: 56px;
}
.enrol__submit:hover { background: var(--gold); color: var(--ink-900); }
.enrol__submitlabel { display: flex; align-items: center; gap: var(--s-3); }
.enrol__submit svg { transition: transform var(--dur) var(--ease); }
.enrol__submit:hover svg { transform: translateX(4px); }
.enrol__spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(246, 243, 238, 0.3);
  border-top-color: var(--paper-100);
  border-radius: var(--r-full);
  animation: ocSpin 0.8s linear infinite;
}
.enrol__submit.is-loading { opacity: 0.6; cursor: default; }
.enrol__submit.is-loading .enrol__spinner { display: block; }
.enrol__submit.is-loading .enrol__submitlabel { display: none; }
.enrol__privacy {
  font-size: var(--t-micro);
  line-height: 1.65;
  color: var(--on-surface-faint);
  margin: calc(var(--s-2) * -1) 0 0;
}
.enrol__privacy a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 2px; }

.done { text-align: center; padding: var(--s-7) 0; }
.done__check {
  width: 56px;
  height: 56px;
  border: 1px solid var(--line-gold);
  border-radius: var(--r-full);
  color: var(--gold-text);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--s-6);
}
.done__title { font-size: var(--t-h2); margin-bottom: var(--s-3); font-style: italic; font-weight: 300; }
.done__text {
  font-size: var(--t-small);
  color: var(--on-surface-muted);
  line-height: var(--lh-body);
  text-transform: none;
  letter-spacing: 0;
  max-width: 42ch;
  margin-inline: auto;
}

/* ── Narrow-viewport trims ───────────────────────────────────────────────
   Mobile is not the desktop layout compressed. The gutter, the section
   rhythm and the type scale are all fluid, so what is left here is the
   handful of places where the arrangement itself has to change. */

@media (max-width: 899px) {
  /* 900px is this sheet's desktop boundary. Below it two columns would put the
     headlines back where four columns had them. */
  .insights__grid { grid-template-columns: 1fr; }
  .insights__aside { text-align: left; max-width: 100%; }
  .insights__aside .insights__all { justify-content: flex-start; margin-left: 0; }
  .insights__head { align-items: flex-start; }
  .global__head { align-items: flex-start; }
  .global__aside { max-width: 100%; }
}

/* ── The primary bar, sized to what it actually holds ───────────────────
   The desktop bar switched on at 1024px (.u-lg-up) and needed 1865px to fit:
   nine items, the wordmark and the language bar. Between those two numbers it
   did not wrap or scroll — .nav has no overflow to give — it simply ran past
   the right edge, and what went off first was .nav__right. On a 1440px laptop,
   the most common size there is, a reader of a four-language site could not
   see the language switcher at all, and nothing on screen suggested one
   existed.

   Measured on the live page, in German because German is the longest of the
   four (en 1859, it 1856, de 1865, zh-hans 1202):

       as it was ........................... 1865
       gap and tracking tightened .......... 1559
       ... and the wordmark dropped ........ 1321

   Hence the two thresholds below, each with about 4% of margin over its
   measurement. Under the lower one the bar cannot be made to fit without
   shrinking the type past reading size, so the burger takes over — and the
   menu behind it carries its own language row, which is why that is a
   retreat and not a loss.

   One threshold for all four languages, set by the worst. Chinese would fit
   from 1202 and gets the burger until 1380 anyway: a rule that varies by
   language is a rule that is right in the language you tested. */
@media (min-width: 1024px) {
  .nav__menu { gap: var(--s-4); letter-spacing: 0.08em; }
}
@media (min-width: 1024px) and (max-width: 1619.98px) {
  .nav__name { display: none; }
}
@media (min-width: 1024px) and (max-width: 1379.98px) {
  /* !important because the utilities these override carry it. */
  .nav__menu.u-lg-up { display: none !important; }
  .nav__burger.u-lg-down { display: flex !important; }
}

@media (max-width: 767px) {
  .archetypes__grid, .insights__grid { gap: 1px; }
  .global__grid { column-gap: 0; }
  .vindication__ghost { font-size: clamp(96px, 26vw, 150px); }
  .dossier__card { transform: none; }
  .dossier__stamp span { letter-spacing: 0.16em; padding: var(--s-2) var(--s-4); }
  .totop { bottom: var(--s-4); right: var(--s-4); width: 44px; height: 44px; }
  .contact__grid { margin-bottom: var(--s-8); }
  .manifesto { padding-left: var(--s-5); }
  .dropcap { font-size: 3.4em; }
  .hero__watermark span { font-size: 86vw; }
}

/* ── Print ───────────────────────────────────────────────────────────────
   A credentials page gets printed and PDF'd. Drop the chrome, flatten the
   dark sections to ink-on-white, and expose link targets. */

@media print {
  .nav, .mobilemenu, .scroll-progress, .totop, .modal,
  .hero__bg, .hero__watermark, .hero__chevron, .hero__location,
  .global__map, .orb, .pullquote__bg, .vindication__ghost,
  .dossier__redaction, .dossier__veil, .book__glow, .dossier__glow,
  .credstrip__glow, .heritage__spine, .portrait__halo { display: none !important; }

  html, body { background: #fff !important; color: #000 !important; }

  .hero, .credstrip, .archetypes, .expertise, .pedigree, .contact,
  .designations, .heritage, .philosophy, .global, .book, .insights,
  .vindication, .pullquote, .archetype, .article {
    background: #fff !important;
    color: #000 !important;
    padding: 18pt 0 !important;
    border-color: #ccc !important;
  }

  .archetypes::before, .archetypes::after, .pedigree::before, .pedigree::after,
  .contact::before, .contact::after, .philosophy::after, .insights::after,
  .book::after { display: none !important; }

  .hero { min-height: 0 !important; page-break-after: avoid; }
  .hero__title, .hero__subtitle, .hero__tagline { color: #000 !important; }
  .hero__scrim { display: none !important; }

  * { box-shadow: none !important; text-shadow: none !important; filter: none !important; }
  .reveal { opacity: 1 !important; animation: none !important; }

  [class*="__desc"], [class*="__lead"], [class*="__intro"], [class*="__snippet"],
  [class*="__meta"], [class*="__degree"], p, li, span, div { opacity: 1 !important; }
  .eyebrow, .gold, em.gold, .dropcap, .vindication__quote,
  .authorcard__label, .designations__title { color: #6b4f1d !important; }

  section, .manifesto, .archetype, .layer, .dossier__card { page-break-inside: avoid; }
  h1, h2, h3 { page-break-after: avoid; }

  /* Print the destination of real links, but not of in-page anchors. */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
  a[href^="mailto:"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
  a[href^="#"]::after { content: ""; }

  @page { margin: 16mm; }
}

/* ── Legal documents ─────────────────────────────────────────────────────
   Deliberately plain. A privacy notice that is hard to read is a privacy
   notice nobody reads — but plain is not the same as unconsidered, so it
   still uses the document's measure, scale and rhythm. */

.legal {
  background: var(--paper-100);
  color: var(--ink-800);
  padding: calc(var(--nav-h) + var(--s-9)) var(--gutter) var(--s-9);
}
.legal__inner { max-width: 74ch; }
.legal__title {
  font-size: var(--t-h1);
  font-weight: 300;
  line-height: var(--lh-title);
  letter-spacing: var(--track-tight);
  margin: var(--s-2) 0 var(--s-8);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--line);
}
.legal__body { font-size: var(--t-body); line-height: 1.8; color: var(--on-surface-muted); }
.legal__body h2 {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--gold-text);
  margin: var(--s-8) 0 var(--s-4);
}
.legal__body p { margin-bottom: var(--s-4); max-width: var(--measure); }
.legal__body ul, .legal__body ol { margin: 0 0 var(--s-5); padding-left: var(--s-5); max-width: var(--measure); }
.legal__body li { margin-bottom: var(--s-3); }
.legal__body a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }
.legal__body code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: var(--paper-200);
  padding: 2px 6px;
}
.legal__back {
  margin-top: var(--s-9);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 600;
}
.legal__back a { color: var(--on-surface-faint); transition: color var(--dur) var(--ease); display: inline-flex; min-height: 44px; align-items: center; }
.legal__back a:hover { color: var(--gold-text); }

/* The unsubscribe confirmation. Borrows the enrolment button's treatment but
   not its width: the modal button fills a narrow column, and stretched across
   a 74ch document the same rule reads as a banner rather than a control. */
.legal__form { margin-top: var(--s-6); }
.legal__submit {
  padding: var(--s-4) var(--s-7);
  background: var(--ink-800);
  color: var(--paper-100);
  text-transform: uppercase;
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  font-weight: 600;
  transition: background-color var(--dur) var(--ease);
  border: none;
  cursor: pointer;
  min-height: 56px;
}
.legal__submit:hover { background: var(--gold); color: var(--ink-900); }

/* The legal pages carry no mobile menu, so the language bar is the only way
   to switch there. u-md-up would hide it below 768px and strand a phone
   visitor on whichever language they happened to land in. */
.langbar--always { display: flex; }
@media (max-width: 420px) {
  .langbar--always a { padding: 6px 6px; }
}