/* ============================================================
   KLEAR INVESTMENTS — plat-map editorial
   White paper, hairline rules, serif authority, surveyor mono.
   ============================================================ */

/* ---------- fonts (self-hosted) — v3: General Sans (Swiss neutral) ---------- */
@font-face {
  font-family: 'General Sans';
  src: url('../assets/fonts/general-sans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../assets/fonts/general-sans-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../assets/fonts/general-sans-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../assets/fonts/general-sans-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('../assets/fonts/ibm-plex-mono-v20-latin-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --paper: #ffffff;
  --wash: #f7f9f9;          /* faint cool wash for figures/panels */
  --band: #eef3f3;          /* deeper cool paper — news band on home */
  --ink: #12181a;           /* cool near-black, biased to the brand teal */
  --ink-soft: #4a5658;      /* metadata — 7.6:1 on white */
  --rule: #e2e8e8;          /* hairline */
  --rule-mid: #bfcaca;
  --derrick: #208c8d;
  --derrick-text: #17696a;  /* AA-safe teal for small text; #208c8d measures 4.04:1 */
  --navy: #0b3b5e;          /* darker blue from the logo — header, stat band, buttons */
  --grid-blue: #d7e6ea;     /* pale blue for the hero survey grid */
  --navy-nav: #9db4c6;      /* inactive nav on the navy bar — 5.4:1 */
  --teal-lift: #2f9fa8;     /* teal reads too close to navy at 1.5:1; lifted for dark grounds */

  --serif: 'General Sans', 'Helvetica Neue', system-ui, sans-serif;  /* display face (kept var name for reuse) */
  --sans: 'General Sans', 'Helvetica Neue', system-ui, sans-serif;
  --mono: 'Plex Mono', 'SFMono-Regular', Consolas, monospace;

  --measure: 34em;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --shell: 76rem;

  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
}

/* ---------- reset-ish ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; overflow-x: clip; } /* hero grid bleeds past the shell on purpose; never scroll sideways */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

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

/* ---------- type ---------- */
.display {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1.display { font-size: clamp(2.9rem, 7vw, 5.75rem); font-weight: 600; }
h2.display { font-size: clamp(2rem, 3.6vw, 3.05rem); }
/* Clash has no italic — emphasis reads in rust with a touch more weight */
.display em { font-style: normal; font-weight: 700; color: var(--derrick); }

.standfirst {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.55;
  max-width: var(--measure);
  margin: 0 auto;
  color: var(--ink);
}

/* surveyor label — the site's smallest, hardest-working component */
.label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.label .co { color: var(--derrick); }

/* leader line: label ————————— */
.label.leader { display: flex; align-items: center; gap: 1.25rem; text-align: center; }
.label.leader::before, .label.leader::after { content: ''; flex: 1; height: 1px; background: var(--rule); }

/* ---------- shell ---------- */
.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- header: sticky, inked to match the stat band ---------- */
header.site {
  position: sticky; top: 0; z-index: 1100;
  background: var(--navy);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.site-bar {
  max-width: var(--shell); margin: 0 auto; padding: 1.1rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  flex-wrap: wrap;
}
.wordmark {
  font-family: var(--serif); font-weight: 600; font-size: 1.5rem;
  text-decoration: none; display: inline-flex; align-items: center; gap: 0.6rem;
  letter-spacing: -0.02em; color: var(--paper);
}
.wordmark small {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 400; letter-spacing: 0.18em;
  text-transform: uppercase; color: #ffffff; align-self: center; padding-top: 0.15em;
}
.wordmark .mark {   /* shield-and-arrow mark, light variant for the dark bar */
  width: auto; height: 1.65em; align-self: center; flex: none;
}
/* horizontal lockup: mark and wordmark in one asset, white variant for the dark bar */
.wordmark .lockup { width: auto; height: 1.5em; display: block; flex: none; }
nav.primary { display: flex; gap: 1.75rem; }
nav.primary a {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none; color: var(--navy-nav);
  padding-bottom: 0.2rem;
}
nav.primary a:hover { color: var(--paper); }
nav.primary a.active { color: var(--paper); border-bottom: 1px solid var(--teal-lift); }

/* hamburger toggle (mobile only) */
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; align-items: flex-end;
  gap: 5px;
  width: 30px; height: 24px; padding: 0; background: none; border: 0; cursor: pointer;
}
.nav-toggle span {
  /* the bars are sized independently of the button: the button stays a 44px tap
     target on phones, the bars stay the width they should look */
  display: block; width: 22px; height: 2px; background: var(--paper);
  transition: transform 0.28s var(--ease-out), opacity 0.2s var(--ease-out);
}
.site-bar.open .nav-toggle span:nth-child(1) { width: 19px; transform: translateY(6px) rotate(45deg); }
.site-bar.open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-bar.open .nav-toggle span:nth-child(3) { width: 19px; transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 760px) {
  /* ~10% shorter bar on phones. The 44px tap target on the menu button — not the
     lockup — is what sets the bar's height, so the trim comes out of the padding. */
  .site-bar { align-items: center; flex-wrap: nowrap; padding-block: 0.8rem; }
  .nav-toggle { display: flex; }
  nav.primary {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; background: var(--navy);
    padding: 0.25rem var(--gutter) 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .site-bar.open nav.primary { display: flex; }
  nav.primary a {
    padding: 0.9rem 0; font-size: 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  nav.primary a.active { border-bottom: 1px solid var(--teal-lift); }
}

/* ---------- hero: plat sheet ---------- */
.hero {
  position: relative; z-index: 0;
  padding: clamp(3.5rem, 9vh, 7rem) 0 clamp(2.5rem, 6vh, 4.5rem);
  display: grid; gap: 1.4rem;
  text-align: center; justify-items: center;
}
/* hover-reveal background: two layers crossfade so cycling between quarters is smooth */
.hero-bg {
  position: absolute; inset: 0 calc(50% - 50vw); z-index: -1;
  /* fade only below the dark header; run full-bleed to the stat band */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 100%);
}
/* home hero carries the ambient video: extra depth so it meets the stat band */
.hero:has(.hero-bg) { padding-bottom: clamp(4rem, 9vh, 6.5rem); align-content: center; }
/* where a country strip follows the title, the hero's full bottom padding plus the
   drawn rule's own margin left the strip floating away from the heading it belongs to */
.hero:has(+ .footprint) { padding-bottom: clamp(1rem, 2.5vh, 1.75rem); }
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* wide short box crops a 16:9 clip hard; weight the crop low so the subject
     (rows, decks, machinery) survives and the sky takes the loss */
  object-position: center 72%;
  opacity: 0.45;
}
/* wherever the video is skipped (phones, reduced motion, data-saver) the poster
   frame stands in, so the hero never renders as a blank band */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero-bg { background: url('../assets/video/klear-hero-poster.jpg') center 72% / cover no-repeat; opacity: 0.45; }
}
/* faint survey grid behind the hero — white stays white, the grid is a whisper */
.hero::before {
  content: ''; position: absolute; inset: 0 -100vmax 0 -100vmax; z-index: -1;
  background-image:
    linear-gradient(var(--grid-blue) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-blue) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: 0.45;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 72%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 18%, #000 72%, transparent);
}
.hero .display { max-width: 12em; margin: 0 auto; position: relative; }
/* spice: a rust surveyor's rule that draws in under the headline */
.hero h1.display::after {
  content: ''; display: block; width: 3.5rem; height: 3px; background: var(--derrick);
  margin: 1.5rem auto 0; transform: scaleX(0); transform-origin: center;
  animation: ruleIn 0.85s var(--ease-out) 0.7s forwards;
}
@keyframes ruleIn { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .hero h1.display::after { transform: none; animation: none; } }

/* ---------- icons (Phosphor Light, one set, inked to tokens) ---------- */
.ico { width: 1.5rem; height: 1.5rem; color: var(--derrick); flex: none; }
.ledger-row h3 { display: flex; align-items: center; gap: 0.7rem; }
.ledger-row h3 .ico { width: 1.35em; height: 1.35em; color: var(--ink-soft); transition: color 0.3s var(--ease-out); }
a.ledger-row:hover h3 .ico { color: var(--derrick); }
.ruled-cols .ico { display: block; margin: 0 auto 0.85rem; width: 1.8rem; height: 1.8rem; }
.hero .kicker-ico { width: 1.1rem; height: 1.1rem; vertical-align: -0.25em; margin-right: 0.3rem; }

/* ---------- emblem (quartered section crest, the holding co as one mark) ---------- */
/* The animation and the still logo must land on the same size or the hand-off reads as
   a jump. One variable drives both: the emblem is the mark, and the video frame is
   1100/459 = 2.3965x the width of the mark inside it, so the multiplier keeps the two
   locked at every viewport. At 1200px this puts the animated wordmark at 700px, which
   is exactly the width of the h1 it hands over to. */
/* --mark-w is the width of the shield mark. The lockup around it is a fixed multiple
   of that (see below), so this one number sizes the animation and the still together.
   Set so the whole lockup lands at ~360px wide, the size signed off on 2 Aug. */
.hero { --mark-w: clamp(4.2rem, 13.16vw, 9.86rem); }
.emblem { width: var(--mark-w, clamp(7rem, 13vw, 9.5rem)); height: auto; margin: 0 auto; display: block; }
.emblem .frame { stroke: var(--ink); stroke-width: 2; fill: none; }
.emblem .cross { stroke: var(--ink); stroke-width: 1.25; }
.emblem .q-fill { fill: var(--derrick); }
.emblem .q-ico-ink { color: var(--ink); }
.emblem .q-ico-paper { color: var(--paper); }
.emblem .q-letter { font-family: var(--serif); font-weight: 400; font-size: 58px; fill: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .emblem .frame { stroke-dasharray: 800; stroke-dashoffset: 800; animation: draw 1.4s var(--ease-out) 0.1s forwards; }
  .emblem .cross { stroke-dasharray: 200; stroke-dashoffset: 200; animation: draw 1s var(--ease-out) 0.7s forwards; }
  /* fade only — a transform keyframe would override the quarters' SVG positioning */
  .emblem .q { opacity: 0; animation: fadeq 0.8s var(--ease-out) forwards; }
  .emblem .q:nth-of-type(1) { animation-delay: 1.0s; }
  .emblem .q:nth-of-type(2) { animation-delay: 1.15s; }
  .emblem .q:nth-of-type(3) { animation-delay: 1.3s; }
  .emblem .q:nth-of-type(4) { animation-delay: 1.45s; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadeq { to { opacity: 1; } }

/* ---------- page-load indicator ---------- */
/* Sits above everything, including the header. Hidden until js/site.js decides a
   navigation is slow enough to warrant it, and always removed again — the failsafe
   in site.js means a stalled request can never strand the visitor behind this. */
.pageload {
  position: fixed; inset: 0; z-index: 1200;   /* above the sticky header (1100) */
  display: grid; place-items: center;
  background: var(--paper);
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s var(--ease-out), visibility 0s linear 0.25s;
}
.pageload.on { opacity: 1; visibility: visible; transition-delay: 0s, 0s; }
.pageload-mark { width: 5.25rem; height: auto; display: block; }
@media (prefers-reduced-motion: reduce) { .pageload { display: none; } }

/* ---------- hero: brand animation on first load ---------- */
/* No scrim: the hero footage already sits at opacity 0.45 against white, so the ground
   is light and the navy-and-teal mark reads on it exactly as the still logo does.
   Darkening it only fought the design. */
.hero-intro {
  position: absolute; inset: 0 calc(50% - 50vw); z-index: 2;
  display: grid; place-items: center;
}
.hero-intro.out { opacity: 0; pointer-events: none; }
/* No transition on the way out. Cross-fading two identical images stacked on each
   other dips the combined opacity in the middle (0.5 over 0.5 composites to 0.75,
   not 1), which reads as a flash. Since the still is the animation's own last frame,
   a hard cut is genuinely invisible and a fade is not. */
/* The video and the still lockup are the same artwork at the same framing, so driving
   both off --mark-w puts them pixel-for-pixel on top of each other and the hand-off has
   nothing to jump between. The multiplier is the frame width divided by the width of
   the mark inside it — re-exporting the animation can change it, so it is reported by
   tools/logo-intro.py and must be updated here when it does. */
.hero-intro video,
.hero-lockup img { width: calc(var(--mark-w) * 3.4188); height: auto; display: block; }
.hero-lockup { margin: 0; line-height: 0; }

/* Hold the still logo and headline back while the animation runs. */
.hero.intro-pending .emblem,
.hero.intro-pending h1 { opacity: 0; animation: none; }
/* Hand-off: reveal instantly, underneath the video, before the video is removed. The
   usual .rise entrance lifts 14px and fades, both of which would show now that the
   two images are pixel-identical. */
.hero.intro-handoff .emblem,
.hero.intro-handoff h1 {
  opacity: 1; animation: none; transform: none; transition: none;
}

/* ---------- home about section (the group, at a glance) ---------- */
.about-home { padding-block: clamp(3.5rem, 8vh, 6rem); }
.about-home .about-copy { max-width: 42rem; margin: 1.9rem auto 0; text-align: center; }
.about-home .display {
  font-size: clamp(2.1rem, 4vw, 3.3rem); max-width: 15em; margin: 0 auto;
}
.about-home .lead {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.28rem, 2.1vw, 1.7rem); line-height: 1.4;
  color: var(--ink); margin-top: 1.5rem; letter-spacing: -0.005em;
}
.about-home .sub { color: var(--ink-soft); margin-top: 1.25rem; max-width: 36rem; margin-inline: auto; }
.about-principles {
  margin-top: clamp(2.75rem, 6vh, 4.5rem);
  padding-top: clamp(2.25rem, 5vh, 3.5rem); border-top: 1px solid var(--rule);
}
.about-cta { text-align: center; margin-top: clamp(2.5rem, 5vh, 3.5rem); }

/* ---------- trade-routes map (Food) ---------- */
.routemap {
  position: relative; margin-top: 2.25rem;
  aspect-ratio: 3600 / 1280; width: 100%;
  background: transparent; /* blends with the white page — no frame */
}
.routemap-bg, .routemap-fx { position: absolute; inset: 0; width: 100%; height: 100%; }
.routemap-bg { object-fit: contain; opacity: 1; }

/* routes draw in when the map enters view */
.route {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: drawRoute 1.7s var(--ease-out) forwards paused;
}
.routemap.play .route { animation-play-state: running; }
.route:nth-of-type(1) { animation-delay: 0.15s; }
.route:nth-of-type(2) { animation-delay: 0.5s; }
.route:nth-of-type(3) { animation-delay: 0.85s; }
.route:nth-of-type(4) { animation-delay: 1.1s; }
@keyframes drawRoute { to { stroke-dashoffset: 0; } }

/* nodes: rust dots that pulse a ring outward */
.node { fill: var(--derrick); opacity: 0; }
.routemap.play .node { animation: nodeIn 0.5s var(--ease-out) forwards; }
.node.hub { fill: var(--ink); }
.node.src:nth-of-type(1) { animation-delay: 0.15s; }
.node.src:nth-of-type(2) { animation-delay: 0.5s; }
.node.src:nth-of-type(3) { animation-delay: 0.85s; }
.node.src:nth-of-type(4) { animation-delay: 1.1s; }
.node.hub { animation-delay: 1.4s; }
@keyframes nodeIn { from { opacity: 0; } to { opacity: 1; } }
/* pulsing halo on the hub */
.routemap.play .node.hub { transform-box: fill-box; transform-origin: center; }
.node.hub { paint-order: stroke; }

.routemap-legend {
  position: absolute; left: 0; bottom: 0; right: 0;
  display: flex; gap: 1.5rem; flex-wrap: wrap;
  padding: 0.7rem 0; background: transparent;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft);
}
.routemap-legend .key { display: inline-flex; align-items: center; gap: 0.5rem; }
.routemap-legend .dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; display: inline-block; }
.routemap-legend .dot.hub { background: var(--ink); }
.routemap-legend .dot.src { background: var(--derrick); }

@media (prefers-reduced-motion: reduce) {
  .route { animation: none; stroke-dashoffset: 0; }
  .node { opacity: 1; animation: none; }
  .ship { display: none; }
}

/* ---------- newsletter signup ---------- */
.newsletter .nl-inner { max-width: 40rem; margin: 0 auto; text-align: center; }
.newsletter .display { margin: 1.6rem auto 0; max-width: 16em; }
.newsletter .nl-blurb { color: var(--ink-soft); margin: 1rem auto 0; max-width: 32rem; }
.nl-form {
  display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap;
  margin-top: 1.9rem;
}
.nl-form input {
  font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.01em;
  padding: 0.9rem 1.1rem; border: 1px solid var(--rule-mid); background: var(--paper);
  color: var(--ink); min-width: min(20rem, 78vw);
  transition: border-color 0.2s var(--ease-out);
}
.nl-form input:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-color: var(--ink); }
.nl-form input::placeholder { color: var(--rule-mid); }
.nl-form .btn { cursor: pointer; }
.nl-msg {
  min-height: 1.3em; margin-top: 1.1rem;
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.02em;
}
.nl-msg.ok { color: var(--derrick); }
.nl-msg.err { color: #a1121f; }
.nl-fine {
  margin-top: 0.6rem; font-family: var(--mono); font-size: 0.64rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
}

/* ---------- exhibit (framed archival/aerial figure) ---------- */
.exhibit { margin: 0; border: 1px solid var(--ink); background: var(--wash); }
.exhibit-media { overflow: hidden; display: block; }
.exhibit-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.82) sepia(0.14) contrast(1.03);
}
.exhibit.wide .exhibit-media { aspect-ratio: 21 / 9; }
.exhibit.tall .exhibit-media { aspect-ratio: 16 / 10; }
.exhibit figcaption {
  display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  padding: 0.65rem 1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--ink-soft);
}
.exhibit figcaption .no { color: var(--derrick); }
/* slow drift on the hero exhibit */
.kenburns .exhibit-media img { animation: drift 45s ease-in-out infinite alternate; }
@keyframes drift {
  from { transform: scale(1) translateY(0); }
  to   { transform: scale(1.07) translateY(-1.5%); }
}
@media (prefers-reduced-motion: reduce) {
  .kenburns .exhibit-media img { animation: none; }
}

/* ---------- blocks ---------- */
.block { padding: clamp(2.75rem, 7vh, 5rem) 0; border-top: 1px solid var(--rule); }
.block-head { display: grid; gap: 0.9rem; margin: 0 auto 2.25rem; max-width: var(--measure); text-align: center; }
.block-head > p:not(.label) { color: var(--ink-soft); }

/* ---------- ledger rows (the signature primitive) ---------- */
.ledger { border-top: 1px solid var(--ink); }
.ledger-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr 2.5rem;
  grid-template-areas: 'no name go' 'no gist go';
  align-items: baseline;
  column-gap: clamp(1rem, 3vw, 2.5rem);
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  transition: background 0.3s var(--ease-out);
}
a.ledger-row:hover { background: var(--wash); }
.ledger-row .no {
  grid-area: no;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1;
  color: var(--rule-mid);
  font-variant-numeric: tabular-nums;
}
a.ledger-row:hover .no { color: var(--derrick); }
.ledger-row h3 {
  grid-area: name;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.15;
}
.ledger-row .gist { grid-area: gist; color: var(--ink-soft); max-width: var(--measure); margin-top: 0.4rem; }
.ledger-row .go {
  grid-area: go; justify-self: end;
  font-family: var(--mono); font-size: 0.9rem; color: var(--ink-soft);
  transition: transform 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
a.ledger-row:hover .go { transform: translateX(0.35rem); color: var(--derrick); }
.ledger-row .flag {
  grid-area: go; justify-self: end;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--derrick);
}

/* ---------- ruled columns (principles) ---------- */
.ruled-cols { display: grid; grid-template-columns: repeat(3, 1fr); }
.ruled-cols article { padding: 0 clamp(1.25rem, 2.5vw, 2.25rem); border-left: 1px solid var(--rule); text-align: center; }
.ruled-cols article:first-child { padding-left: 0; border-left: 0; }
.ruled-cols h3 {
  font-family: var(--serif); font-weight: 400; font-size: 1.25rem;
  margin-bottom: 0.6rem; line-height: 1.2;
}
.ruled-cols p { color: var(--ink-soft); font-size: 0.98rem; }

/* ---------- entities (operating companies) ---------- */
.entities { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.entity {
  padding: 1.4rem clamp(1rem, 2vw, 1.75rem) 1.6rem 0;
  border-bottom: 1px solid var(--rule);
}
.entity .where {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--derrick); display: block; margin-bottom: 0.55rem;
}
.entity h3 { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; margin-bottom: 0.4rem; }
.entity p { color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- gaming: split vignette — copy beside an animated canvas ---------- */
.split-viz {
  display: grid; grid-template-columns: minmax(16rem, 1fr) 1.3fr;
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
.split-copy h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-bottom: 0.8rem; }
.split-copy p { color: var(--ink-soft); font-size: 0.98rem; max-width: 32em; }
.viz-note {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--rule-mid); margin-left: 0.5rem;
}
.split-viz canvas { display: block; width: 100%; }
.split-viz.flip .split-copy { order: 2; }
.split-viz.flip canvas { order: 1; }
@media (max-width: 760px) {
  .split-viz { grid-template-columns: 1fr; }
  /* stacked: copy first, visual under it, both panels */
  .split-viz.flip .split-copy { order: 1; }
  .split-viz.flip canvas { order: 2; }
}

/* ---------- gaming: the pipeline, drawn light on the page ---------- */
.pipeline-wrap { padding: 0; }
.pipeline-wrap canvas { display: block; width: 100%; }
.pipe-desc a { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--rule-mid); }
.pipe-desc a:hover { border-bottom-color: var(--navy); }
.pipe-desc {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft); line-height: 1.8;
  text-align: center; max-width: 46em; margin: 0.75rem auto 0;
  min-height: 3.6em; /* two lines reserved so stage descriptions don't shift the page */
}

/* entity cards that link to company pages */
a.entity { text-decoration: none; display: block; position: relative; transition: background 0.25s var(--ease-out); }
a.entity:hover { background: var(--wash); }
a.entity .go {
  position: absolute; right: 1rem; bottom: 1.2rem; color: var(--derrick);
  opacity: 0; transform: translateX(-4px); transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
a.entity:hover .go { opacity: 1; transform: none; }

/* ---------- footprint strip ---------- */
/* one line, always: spacing and type scale with the viewport instead of wrapping */
.footprint {
  display: flex; flex-wrap: nowrap; justify-content: center;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule);
}
.footprint .cabbr { display: none; }
.footprint span {
  font-family: var(--mono); font-size: clamp(0.58rem, 0.8vw, 0.72rem);
  letter-spacing: 0.13em; white-space: nowrap;
  text-transform: uppercase; color: var(--ink-soft);
  padding: 0.85rem 0; margin: 0 clamp(0.5rem, 1.2vw, 1.4rem);
  position: relative;
}
/* direct children only: each item holds a full-name span and a code span, and the
   bare `span + span` selector was giving the visible code a leading dot on phones */
.footprint > span + span::before {
  content: ''; position: absolute; left: clamp(-1.4rem, -1.2vw, -0.5rem); top: 50%;
  width: 3px; height: 3px; background: var(--derrick); transform: translate(-50%, -50%);
}
@media (max-width: 760px) {
  /* phones get the two-letter codes, centred, one tidy row */
  .footprint { justify-content: center; text-align: center; }
  .footprint .cname { display: none; }
  .footprint .cabbr { display: inline; }
  .footprint span { padding: 0.7rem 0; margin: 0 0.42rem; font-size: 0.64rem; }
  .footprint > span + span::before { left: -0.42rem; width: 2px; height: 2px; }
}

/* map-first routes block: even air around the pieces that follow the map */
.routes-block .routemap:first-child { margin-top: 0; }
.routes-block .footprint { margin-top: clamp(2.5rem, 6vh, 4rem); }
.routes-block .statement { margin-top: clamp(2.5rem, 6vh, 4rem); }

/* ---------- statement ---------- */
.statement {
  font-family: var(--serif); font-weight: 400; font-style: normal;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1.25;
  max-width: 22em; letter-spacing: -0.01em;
  margin: 0 auto; text-align: center;
}
.statement em { color: var(--derrick); }
/* attribution for the founder quote — a real person, quoted from a real publication,
   so the source is named rather than left as an unsourced house line */
blockquote.statement { display: grid; gap: 1.5rem; justify-items: center; }
blockquote.statement p { font: inherit; }
blockquote.statement cite {
  font-family: var(--mono); font-style: normal;
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft);
}
blockquote.statement cite .src { color: var(--rule-mid); }

.discreet { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-soft); margin: 2rem auto 0; max-width: 46em; line-height: 1.7; text-align: center; }

/* ---------- map (energy) ---------- */
/* The frame reads as a card, not a bordered figure: continuous corner radius, a
   hairline of navy at 12%, and a two-layer shadow doing the work the border used
   to do. The view switcher is a segmented control — resting segments are quiet,
   the selected one lifts onto a white pill. */
.map-frame {
  background: var(--paper);
  border: 1px solid rgba(11, 59, 94, 0.12);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(11, 59, 94, 0.06), 0 12px 32px rgba(11, 59, 94, 0.08);
}
.map-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.65rem 0.75rem; flex-wrap: wrap;
}
.map-toolbar .views {
  display: flex; gap: 2px;
  background: #eef1f4; border-radius: 10px; padding: 3px;
}
.map-toolbar button {
  font-family: var(--sans); font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--ink-soft);
  background: none; border: 0; border-radius: 8px; padding: 0.4rem 0.95rem;
  cursor: pointer; transition: all 0.2s var(--ease-out);
}
.map-toolbar button:hover { color: var(--navy); }
.map-toolbar button.on {
  background: var(--navy); color: #ffffff;
  box-shadow: 0 1px 3px rgba(11, 59, 94, 0.28);
}
.map-note { font-family: var(--sans); font-size: 0.76rem; color: var(--ink-soft); padding-right: 0.35rem; }
#sections-map { height: clamp(22rem, 58vh, 34rem); background: #eef2f4; }
/* the basemap is a third-party CDN; a dropped tile shows this instead of white */
.leaflet-container { background: #eef2f4; }
/* touch: the map does not pan until tapped, so say so */
#sections-map.map-locked::after, #co-map.map-locked::after {
  content: 'Tap to interact'; position: absolute; z-index: 500;
  left: 50%; bottom: 0.75rem; transform: translateX(-50%);
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--navy);
  background: rgba(255,255,255,0.92); padding: 0.35rem 0.7rem; border-radius: 999px;
  box-shadow: 0 1px 3px rgba(11,59,94,0.18); pointer-events: none;
}
#sections-map, #co-map { position: relative; }
#sections-map:focus-visible { outline: 2px solid var(--derrick); outline-offset: -2px; }

/* leaflet chrome, matched to the card */
.map-frame .leaflet-control-zoom { border: 0; border-radius: 10px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(11, 59, 94, 0.18); }
.map-frame .leaflet-control-zoom a {
  width: 2rem; height: 2rem; line-height: 2rem;
  color: var(--navy); border: 0; background: var(--paper);
}
.map-frame .leaflet-control-zoom a:hover { background: var(--wash); }
.map-frame .leaflet-control-attribution { font-size: 0.6rem; background: rgba(255,255,255,0.75); }

.map-legend {
  display: flex; gap: 1.5rem; padding: 0.65rem 1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans); font-size: 0.78rem;
  color: var(--ink-soft); flex-wrap: wrap;
}
.map-legend .key { display: inline-flex; align-items: center; gap: 0.5rem; }
.map-legend .sw { width: 0.85rem; height: 0.85rem; display: inline-block; }
.sw.grid-sw { border: 1.5px solid #4a7ba6; background: rgba(74,123,166,0.12); border-radius: 4px; }
.sw.tract-sw { background: var(--derrick); opacity: 0.85; border-radius: 4px; }
/* Leaflet chrome, muted to match */
.leaflet-container { font-family: var(--mono) !important; font-size: 0.65rem !important; background: var(--wash) !important; }
.leaflet-control-attribution { background: rgba(255,255,255,0.85) !important; color: var(--ink-soft) !important; }
.leaflet-bar a { color: var(--ink) !important; border-radius: 0 !important; }
.klear-tract-tip {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em;
  background: var(--ink); color: var(--paper); border: 0; border-radius: 0;
  padding: 0.35rem 0.6rem;
}
.klear-tract-tip::before { display: none; }

/* ---------- company pages (food operating companies) ---------- */
/* factsheet: the company record, set like the entities grid */
.factsheet { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.factsheet > div { padding: 1.2rem clamp(1rem, 2vw, 1.75rem) 1.3rem 0; border-bottom: 1px solid var(--rule); }
.factsheet dt {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--derrick); margin-bottom: 0.45rem;
}
.factsheet dd { font-size: 0.98rem; color: var(--ink); }
.factsheet dd small { display: block; color: var(--ink-soft); font-size: 0.85rem; margin-top: 0.2rem; }

/* people: leadership cards */
.people { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.1rem, 2.2vw, 1.75rem); }
.person {
  border: 1px solid var(--rule); background: var(--paper);
  padding: 1.5rem 1.4rem 1.4rem;
  transition: border-color 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
.person:hover { border-color: var(--ink); background: var(--wash); }
.person .role {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--derrick); display: block; margin-bottom: 0.5rem;
}
.person h3 { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; margin-bottom: 0.35rem; }
.person p { color: var(--ink-soft); font-size: 0.9rem; }

/* company map */
#co-map { height: clamp(20rem, 50vh, 28rem); }
#co-map:focus-visible { outline: 2px solid var(--derrick); outline-offset: -2px; }

/* ---------- company contact card: map left, record right ---------- */
.co-card { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2rem; align-items: stretch; }
@media (max-width: 900px) { .co-card { grid-template-columns: 1fr; } }
.co-card-panel {
  border: 1px solid var(--rule); background: var(--paper);
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(26, 25, 20, 0.04), 0 10px 30px rgba(26, 25, 20, 0.05);
  display: flex; flex-direction: column;
}
.co-card-maphead {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.95rem 1.25rem; border-bottom: 1px solid var(--rule); background: var(--wash);
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft);
}
.co-card-maphead b { color: var(--ink); font-weight: 500; }
.co-card .map-frame { border: 0; margin: 0; flex: 1; display: flex; flex-direction: column; }
.co-card #co-map { flex: 1; min-height: 24rem; height: auto; }
/* record column floats on the page, no box — only the map is framed */
.co-card-info {
  border: 0; border-radius: 0; box-shadow: none; background: transparent;
  padding: 0.35rem 0 0;
}
.co-status {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: #4b8a63; margin: 0 0 0.5rem;
}
.co-status::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #4b8a63; margin-right: 0.55rem;
}
.co-kicker {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft);
  margin: 1.6rem 0 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--rule);
}
.co-rows { margin: 0; }
.co-rows > div { display: flex; align-items: baseline; gap: 0.7rem; padding: 0.65rem 0; }
.co-rows dt { font-weight: 500; font-size: 0.92rem; white-space: nowrap; color: var(--ink); }
.co-rows .dots { flex: 1; border-bottom: 1px dotted var(--rule); transform: translateY(-0.28em); min-width: 1.5rem; }
.co-rows dd { margin: 0; text-align: right; font-size: 0.92rem; color: var(--ink); }
.co-rows dd small { display: block; color: var(--ink-soft); font-size: 0.78rem; margin-top: 0.15rem; font-weight: 400; }
.co-address { margin: 0.4rem 0 0; font-size: 0.95rem; color: var(--ink); }

/* entity cards become doors when linked */
a.entity { display: block; text-decoration: none; position: relative; transition: background 0.3s var(--ease-out); }
a.entity:hover { background: var(--wash); }
a.entity .go {
  position: absolute; right: clamp(1rem, 2vw, 1.75rem); top: 1.35rem;
  font-family: var(--mono); font-size: 0.9rem; color: var(--ink-soft);
  transition: transform 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
a.entity:hover .go { transform: translateX(0.35rem); color: var(--derrick); }

/* keyboard focus on the emblem quarters mirrors hover */
.emblem a:focus-visible { outline: none; }
.emblem a:focus-visible .qhot { fill: var(--derrick); }
.emblem a.q1:focus-visible .qhot { fill: var(--ink); }
.emblem a:focus-visible .q-ico-ink { color: var(--paper); }
.emblem a:focus-visible .q-letter { fill: var(--paper); }

@media (max-width: 860px) {
  .factsheet { grid-template-columns: 1fr 1fr; }
  .people { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .factsheet { grid-template-columns: 1fr; }
  .people { grid-template-columns: 1fr; }
}

/* ---------- news index ---------- */
/* Laid out after the TasteBueno news page: left-aligned masthead with a story count,
   a full-bleed lead story, then a filter rail beside a dense card grid, and paging at
   the foot. Rendered in Klear's own type and teal rather than TasteBueno's condensed
   uppercase and red — the structure is the borrowed part, not the identity. */
/* story count sits at the head of the filter rail, so the masthead stays the same
   centred title-plus-rule the other pages use */
.news-count {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft);
  padding-bottom: 0.9rem; border-bottom: 1px solid var(--rule); margin-bottom: 0.4rem;
}

/* lead story */
.news-hero {
  position: relative; display: block;
  text-decoration: none; overflow: hidden; background: var(--ink);
}
.news-hero img {
  width: 100%; height: clamp(15rem, 42vh, 26rem);
  object-fit: cover; display: block; opacity: 0.62;
  transition: transform 0.7s var(--ease-out), opacity 0.4s var(--ease-out);
}
.news-hero:hover img { transform: scale(1.03); opacity: 0.7; }
.news-hero-body {
  position: absolute; inset: auto 0 0 0;
  display: grid; gap: 0.7rem; justify-items: start;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  background: linear-gradient(to top, rgba(9,12,13,0.86), rgba(9,12,13,0));
}
.news-badge {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--paper);
  background: var(--derrick); padding: 0.3rem 0.6rem;
}
.news-hero h2 {
  color: var(--paper); max-width: 20em;
  font-size: clamp(1.4rem, 3.2vw, 2.4rem); line-height: 1.12;
}
.news-hero p { color: rgba(255,255,255,0.82); max-width: 46em; font-size: 0.95rem; }
.news-hero time {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.66);
}

/* filter rail + grid */
.news-layout {
  display: grid; grid-template-columns: 11rem 1fr;
  gap: clamp(1.5rem, 3vw, 2.75rem); margin-top: 2.25rem;
}
.news-side { align-self: start; position: sticky; top: 5.5rem; display: grid; gap: 0.4rem; }
.side-search input {
  width: 100%; padding: 0.55rem 0.7rem; margin-bottom: 1.1rem;
  border: 1px solid var(--rule-mid); background: var(--paper); color: var(--ink);
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em;
}
.side-search input:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.side-label {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft); margin-top: 0.9rem;
}
.side-list { display: grid; justify-items: start; gap: 0.1rem; }
.side-list button {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft);
  background: none; border: 0; padding: 0.25rem 0; cursor: pointer; text-align: left;
}
.side-list button:hover { color: var(--ink); }
.side-list button.on { color: var(--derrick); }

/* Zero gap with shared hairlines, so the cards read as one block the way the
   reference page's do, rather than as separate floating tiles. */
.news-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
}
.ncard {
  display: flex; flex-direction: column; text-decoration: none;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  background: var(--paper); transition: background 0.25s var(--ease-out);
}
.ncard:hover { background: var(--wash); box-shadow: inset 0 0 0 1px var(--derrick); }
.ncard-media { height: 9.5rem; overflow: hidden; margin: 0.85rem 0.85rem 0; }
.ncard-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.82) sepia(0.14) contrast(1.03);
  transition: transform 0.6s var(--ease-out);
}
.ncard:hover .ncard-media img { transform: scale(1.04); }
.ncard-body { display: grid; gap: 0.5rem; align-content: start; padding: 1rem 1.1rem 1.25rem; }
.ncard-topic, .ncard time {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ncard-topic { color: var(--derrick); }
.ncard time { color: var(--ink-soft); }
.ncard h3 { font-size: 0.98rem; line-height: 1.25; font-weight: 600; }
.ncard p {
  color: var(--ink-soft); font-size: 0.84rem; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.news-empty { text-align: center; padding: 3rem 0; color: var(--ink-soft); }
.news-pager {
  display: flex; align-items: center; justify-content: center; gap: 1.25rem;
  padding: 2rem 0 0;
}
.news-pager button {
  background: none; border: 1px solid var(--rule-mid); color: var(--ink);
  width: 2rem; height: 2rem; cursor: pointer; line-height: 1;
}
.news-pager button:hover:not(:disabled) { border-color: var(--navy); }
.news-pager button:disabled { opacity: 0.3; cursor: default; }
.news-pager span {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft);
}

@media (max-width: 900px) {
  .news-layout { grid-template-columns: 1fr; }
  .news-side { position: static; }
  .side-list { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .news-grid { grid-template-columns: 1fr; }
}

/* ---------- photography: the Apple treatment, site-wide ---------- */
.ncard-media, .news-hero, .card-media, .exhibit,
.article-body figure, .article-hero {
  border-radius: 12px; overflow: hidden;
}
/* the division exhibits carry a seafoam edge, matching the card hover cue */
.exhibit { border: 1px solid var(--derrick); }
.news-hero, .exhibit { border-radius: 16px; }
.ncard-media, .card-media, .exhibit, .article-body figure {
  box-shadow: 0 1px 2px rgba(11, 59, 94, 0.06), 0 8px 24px rgba(11, 59, 94, 0.08);
}
.news-hero { box-shadow: 0 1px 2px rgba(11, 59, 94, 0.08), 0 12px 32px rgba(11, 59, 94, 0.12); }
.article-body figure img { border-radius: 0; } /* the figure clips; double-rounding halos the caption bar */

/* Links inside the prose. Underlined with an offset rather than a border so a link
   that wraps across two lines is still marked on both, and kept quiet enough that a
   paragraph with three of them still reads as a paragraph. */
.article-body p a {
  color: inherit; text-decoration: underline;
  text-decoration-color: var(--derrick);
  text-decoration-thickness: 1px; text-underline-offset: 0.18em;
  transition: color 0.18s var(--ease-out), text-decoration-color 0.18s var(--ease-out);
}
.article-body p a:hover { color: var(--derrick-text); text-decoration-color: var(--derrick-text); }
.article-body p a:focus-visible { outline: 2px solid var(--derrick-text); outline-offset: 2px; border-radius: 2px; }

/* References: where the piece goes next, and who publishes the underlying data. */
.article-refs {
  margin-top: clamp(2.25rem, 6vh, 3.5rem); padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  display: grid; gap: 1.75rem;
}
.article-refs h2 {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-soft);
  margin: 0 0 0.7rem; font-weight: 600;
}
.article-refs .ref-note {
  font-size: 0.82rem; color: var(--ink-soft); margin: -0.35rem 0 0.75rem; max-width: 46ch;
}
.ref-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.ref-list li { font-size: 0.9rem; line-height: 1.45; }
/* the source name leads, its description sits under it in the quieter tone, so the
   list scans as a column of institutions rather than a paragraph of link text */
.ref-list li span { display: block; font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.1rem; }
.ref-list a {
  color: var(--navy); text-decoration: none;
  border-bottom: 1px solid var(--rule-mid); transition: border-color 0.18s var(--ease-out);
}
.ref-list a:hover { border-bottom-color: var(--derrick); }
.ref-internal a { font-weight: 500; }
@media (max-width: 640px) {
  .article-refs { gap: 1.4rem; }
  .ref-list li { font-size: 0.86rem; }
}

/* ---------- article ---------- */
.backlink {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-top: 1.75rem;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none; color: var(--ink-soft);
}
.backlink:hover { color: var(--navy); }
.backlink svg { width: 0.9rem; height: 0.9rem; }
.article-head { padding: clamp(2rem, 5vh, 3.5rem) 0 2rem; display: grid; gap: 1.2rem; text-align: center; justify-items: center; }
.article-head h1 { max-width: 14em; margin: 0 auto; }
.article-meta { display: flex; gap: 1.5rem; justify-content: center; }
.article-body { padding-bottom: clamp(3rem, 8vh, 5rem); }
.article-body > * { max-width: 36rem; margin-left: auto; margin-right: auto; }
.article-body p { margin-bottom: 1.35rem; }
.article-body h2 {
  font-family: var(--serif); font-weight: 500; font-size: 1.5rem;
  margin: 2.75rem auto 1rem; line-height: 1.2;
}
.article-body h2 .no {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em;
  color: var(--derrick); display: block; margin-bottom: 0.45rem; font-weight: 400;
}
.article-body ul { padding-left: 1.2rem; margin-bottom: 1.35rem; color: var(--ink); }
.article-body li { margin-bottom: 0.5rem; }
.article-body a { color: var(--derrick); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- footer ---------- */
footer.site { border-top: 1px solid var(--ink); margin-top: clamp(3rem, 8vh, 5rem); }
.foot-inner { max-width: var(--shell); margin: 0 auto; padding: 2.5rem var(--gutter) 2rem; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; margin-bottom: 2.5rem; }
.foot-grid .fm { font-family: var(--serif); font-size: 1.2rem; }
.foot-grid h4 {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-soft); font-weight: 400; margin-bottom: 0.7rem;
}
.foot-grid a { display: block; text-decoration: none; color: var(--ink); font-size: 0.95rem; padding: 0.15rem 0; }
.foot-grid a:hover, .foot-sub a:hover { color: var(--derrick-text); text-decoration: underline; }
.foot-grid p { font-size: 0.95rem; color: var(--ink-soft); }
.colophon {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid var(--rule); padding-top: 1.2rem;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft);
}

/* ---------- motion: one orchestrated entrance ---------- */
.rise { opacity: 0; transform: translateY(14px); animation: rise 0.9s var(--ease-out) forwards; }
.d1 { animation-delay: 0.05s; } .d2 { animation-delay: 0.15s; }
.d3 { animation-delay: 0.28s; } .d4 { animation-delay: 0.4s; }
@keyframes rise { to { opacity: 1; transform: none; } }

html.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
html.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .reveal { opacity: 1; transform: none; animation: none; transition: none; }
}

/* ---------- stat band: the one dark moment on the page ---------- */
.statband {
  background: var(--navy); color: var(--paper);
  margin: 0 calc(50% - 50vw) 0;  /* hero bg runs flush into the band */
  padding: clamp(2.25rem, 5vh, 3.5rem) var(--gutter);
}
.statband-inner {
  max-width: var(--shell); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2rem; text-align: center;
}
.stat .num {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat .num sup { font-size: 0.5em; color: #4fb3b8; }
.stat .lbl {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: #a3adae; margin-top: 0.5rem;
}

/* phones: one compact row — equal columns, every numeral on a single line at one
   size, labels hanging from a shared top line */
@media (max-width: 760px) {
  /* the band itself is slimmer here; the type inside is deliberately unchanged */
  .statband { padding-block: 1.1rem; }
  .statband-inner { grid-template-columns: repeat(4, 1fr); gap: 0.5rem; align-items: start; }
  .stat .num { font-size: clamp(0.92rem, 4vw, 1.35rem); white-space: nowrap; line-height: 1.2; }
  .stat .num sup { font-size: 0.6em; }
  .stat .lbl { font-size: 0.48rem; letter-spacing: 0.07em; margin-top: 0.3rem; }

  /* header lockup 25% smaller, hero mark (and therefore the animation, which is
     driven off the same variable) 20% bigger — phones only */
  .wordmark .lockup { height: 1.125em; }              /* 1.5em x 0.75 */
  .hero { --mark-w: clamp(5.04rem, 15.79vw, 11.83rem); } /* base x 1.2 */
}
.statband .fine {
  max-width: var(--shell); margin: 1.75rem auto 0; text-align: center;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: #74807f;
}

/* ---------- news band (home) ---------- */
.band-news {
  background: var(--band);
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding-left: var(--gutter); padding-right: var(--gutter);
  padding-block: clamp(2rem, 4.5vh, 3rem);
}
/* Keep the whole news band inside one screen. The card art is capped in vh rather
   than trimmed to a fixed size so it holds on short laptops as well as tall ones;
   object-fit: cover on the images means a shorter box crops instead of squashing.
   Both columns need capping — two side cards stacked, not the feature, were what
   set the mosaic's height. */
   Set an explicit height rather than aspect-ratio + max-height: capping the height of
   a ratio-sized box shrinks its width to match, which leaves the picture floating in
   a half-empty card. A fixed height with auto width fills the card and lets
   object-fit: cover do the cropping. */
.band-news .block-head { margin-bottom: 1.4rem; }
.band-news .card.feature .card-media {
  aspect-ratio: auto; height: clamp(11rem, 32vh, 20rem);
}
.band-news .mosaic-side .card-media {
  aspect-ratio: auto; height: clamp(7rem, 17vh, 11rem);
}
.band-news .about-cta { margin-top: 1.5rem; }
.band-news > * {
  width: 100%; max-width: calc(var(--shell) - 2 * var(--gutter));
  margin-left: auto; margin-right: auto;
}

/* ---------- button ---------- */
.btn {
  display: inline-block; padding: 0.85rem 1.9rem;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none; color: #ffffff;
  border: 0; border-radius: 10px; background: var(--navy);
  box-shadow: 0 1px 2px rgba(11, 59, 94, 0.2);
  transition: background 0.25s var(--ease-out), transform 0.15s var(--ease-out);
}
.btn:hover { background: #0d4a75; }
.btn:active { transform: scale(0.97); }

/* ---------- newsroom grid: feature left, 2x2 tiles right (the Sixth Street shape) ---------- */
.newsgrid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: clamp(1.1rem, 2.2vw, 1.75rem);
}
.newsgrid .card.feature { grid-row: 1 / 3; grid-column: 1; }
.newsgrid .card.feature .card-media { aspect-ratio: 4 / 3; }
.newsgrid .card:not(.feature) .card-media { aspect-ratio: 16 / 9; }
.newsgrid .card:not(.feature) h3 { font-size: 1.02rem; }
.newsgrid .card:not(.feature) .card-body { padding: 0.8rem 0.9rem 1rem; gap: 0.35rem; }

/* ---------- news carousel: pages of three, arrows + dots ---------- */
.carousel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; margin-bottom: 2rem; flex-wrap: wrap; text-align: left;
}
.carousel-head h2 { max-width: 16em; }
.car-viewport { overflow: hidden; }
.car-track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * clamp(1.1rem, 2.2vw, 1.75rem)) / 3);
  gap: clamp(1.1rem, 2.2vw, 1.75rem);
  transition: transform 0.55s var(--ease-out);
}
.car-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 1.75rem; }
.car-dots { display: flex; gap: 0.55rem; }
.car-dots button {
  width: 7px; height: 7px; padding: 0; border-radius: 50%;
  border: 0; background: var(--rule-mid); cursor: pointer;
  transition: background 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.car-dots button.on { background: var(--derrick); transform: scale(1.25); }
.car-nav { display: flex; gap: 0.6rem; }
.car-nav button {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 1px solid var(--rule-mid); background: transparent; color: var(--ink);
  font-size: 1rem; cursor: pointer; line-height: 1;
  transition: all 0.25s var(--ease-out);
}
.car-nav button:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.car-nav button:disabled { opacity: 0.3; cursor: default; }
.car-nav button:disabled:hover { background: transparent; color: var(--ink); border-color: var(--rule-mid); }

/* ---------- footer secondary menu ---------- */
.foot-sub { margin-top: 0.9rem; }
.foot-sub a { display: block; text-decoration: none; color: var(--ink-soft); font-size: 0.88rem; padding: 0.12rem 0; }
.foot-sub a:hover { color: var(--derrick-text); text-decoration: underline; }

/* ---------- newsroom mosaic: one feature, tiles beside it ---------- */
.mosaic { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(1.25rem, 2.5vw, 2rem); }
.mosaic-side { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); align-content: start; }
.card {
  display: block; text-decoration: none; text-align: left;
  border: 1px solid var(--rule); background: var(--paper);
  /* the card itself rounds and clips, so the border follows the corners the
     media's Apple treatment introduced instead of boxing around them */
  border-radius: 12px; overflow: hidden;
  transition: border-color 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
.card:hover { border-color: var(--derrick); background: var(--wash); }
.card .card-media { overflow: hidden; aspect-ratio: 16 / 9; border-bottom: 1px solid var(--rule); }
.card.feature .card-media { aspect-ratio: 16 / 10; }
.card .card-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.82) sepia(0.14) contrast(1.03);
  transition: transform 0.6s var(--ease-out);
}
.card:hover .card-media img { transform: scale(1.04); }
.card .card-body { padding: 1rem 1.1rem 1.2rem; display: grid; gap: 0.45rem; }
.card .card-kicker {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--derrick);
}
.card h3 { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; line-height: 1.25; }
.card.feature h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.card p { color: var(--ink-soft); font-size: 0.92rem; }
.card time { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- client marquee (As Seen On) ---------- */
.marquee {
  overflow: hidden; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule);
  padding: 1.4rem 0; position: relative;
}
.marquee-track {
  display: flex; align-items: center; gap: clamp(2.5rem, 5vw, 4.5rem);
  width: max-content; animation: marquee 38s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee img {
  height: 3.4rem; width: auto; display: block;
  filter: grayscale(1) contrast(0.92); opacity: 0.7;
  transition: filter 0.3s var(--ease-out), opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.marquee img:hover { filter: none; opacity: 1; transform: scale(1.08); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .marquee-track > *:nth-child(n+15) { display: none; } /* hide the duplicate set */
}

/* ---------- peek: image that follows the cursor over the ledger ---------- */
@media (max-width: 620px) {
  .newsgrid { grid-template-columns: 1fr; }
  .newsgrid .card.feature { grid-column: 1; }
  .car-track { grid-auto-columns: 100%; }
  .ledger-row { grid-template-columns: 3rem 1fr; grid-template-areas: 'no name' 'no gist'; }
  .ledger-row .go, .ledger-row .flag { display: none; }
  .entities { grid-template-columns: 1fr; }
  .news-item, .news-item.lead { grid-template-columns: 1fr; grid-template-areas: 'thumb' 'time' 'h3' 'topic' 'p'; }
  .news-item .topic { justify-self: start; }
  .news-item .thumb { aspect-ratio: 21 / 9; }
  .foot-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   MOBILE LAYOUT FIXES (2 Aug 2026 review)
   The three-column and two-column grids below had no phone
   breakpoint at all, so columns squeezed to 70-140px and copy
   was sliced by the viewport edge.
   ============================================================ */
@media (max-width: 760px) {
  /* three-up pillars: stack, and turn the vertical rules horizontal */
  .ruled-cols { grid-template-columns: 1fr; }
  .ruled-cols article {
    padding: 1.5rem 0; border-left: 0; border-top: 1px solid var(--rule);
  }
  .ruled-cols article:first-child { padding-top: 0; border-top: 0; }

  /* home latest-news mosaic: one column, full-width cards */
  .mosaic { grid-template-columns: 1fr; }

  /* operating-company grids */
  .entities { grid-template-columns: 1fr; }
  .people { grid-template-columns: 1fr; }

  /* long unbroken tokens (klearinvestment.com in an article title) must wrap */
  h1.display, h2.display, .article-head h1 {
    overflow-wrap: anywhere; hyphens: auto;
  }
  .article-head h1 { font-size: clamp(1.75rem, 8vw, 2.6rem); }

  /* running body copy reads badly centred in a narrow column */
  .block-head p, .about-copy p { text-align: left; }

  /* tap targets: nothing interactive under ~44px */
  .side-list button { min-height: 44px; padding: 0.5rem 0; }
  .side-search input { font-size: 16px; min-height: 44px; }  /* 16px stops iOS zooming on focus */
  .news-pager button { width: 44px; height: 44px; }
  .map-toolbar button { min-height: 44px; }
  .nav-toggle { width: 44px; height: 44px; gap: 4px; }   /* tap target only */
  .nav-toggle span { width: 20px; }
  .site-bar.open .nav-toggle span:nth-child(1) { width: 17px; transform: translateY(6px) rotate(45deg); }
  .site-bar.open .nav-toggle span:nth-child(3) { width: 17px; transform: translateY(-6px) rotate(-45deg); }
}


/* ============================================================
   FOOD PAGE — first-viewport composition (2 Aug 2026)
   Two opposite goals for the same block. On a phone the whole
   counter-seasonal quote should land above the fold; on desktop
   it should sit entirely below it, so the map is what the first
   screen shows and the quote is a reward for scrolling.
   ============================================================ */
@media (max-width: 760px) {
  /* every gap above the quote gives back a little so the last line clears
     real browser chrome, which is taller than any emulator reports */
  .food-page .hero { padding-top: clamp(1.25rem, 3vh, 2rem); }
  .food-page .routes-block { padding-top: 1.25rem; }
  .food-page .routemap { margin-top: 0; }
  .food-page .routes-block .statement { margin-top: 1.25rem; font-size: 1.42rem; line-height: 1.22; }
}
@media (min-width: 761px) {
  /* the map earns the first screen; the quote starts below it */
  .food-page .routes-block .statement { margin-top: clamp(4.5rem, 11vh, 8rem); }
}