/* ==========================================================================
   Arioron — public site
   Structure underneath, fluidity on top: a strict 12-column grid governs
   alignment, while compositions stay open, asymmetric and editorial.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `clip` rather than `hidden`: hidden makes body a scroll container, which
     breaks window.scrollTo and sticky positioning inside it. */
  overflow-x: clip;
  transition: background-color var(--dur-mid) var(--ease), color var(--dur-mid) var(--ease);
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

/* A translucent tint rather than a solid colour swap deliberately does NOT
   force a new text colour: some browser/embed contexts apply ::selection's
   background without applying its color, and a solid `background: var(--text)`
   paired with `color: var(--bg)` then leaves selected text sitting on a
   background that exactly matches its own original colour — invisible.
   Tinting the existing background instead keeps whatever contrast the page
   already has (light on dark, dark on light, inside an inverted section,
   inside a button) working no matter which half of the rule a browser
   honours. */
::selection { background: rgba(28, 28, 28, 0.22); }
:root[data-theme="dark"] ::selection { background: rgba(241, 241, 244, 0.28); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) ::selection { background: rgba(241, 241, 244, 0.28); }
}

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--text); color: var(--bg); padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   Grid shell
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
}
@media (max-width: 1024px) { .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .grid { grid-template-columns: minmax(0, 1fr); } }

/* Column spans.
   Written as `auto / span N` rather than the `span N` shorthand: the
   shorthand assigns the span to grid-column-START, which a later
   .start-* rule would then overwrite, silently collapsing the element
   to a single track. Keeping start and end independent lets span and
   start compose. */
[class*="col-"] { grid-column: 1 / -1; }
@media (min-width: 1025px) {
  .col-1  { grid-column: auto / span 1; }  .col-2  { grid-column: auto / span 2; }
  .col-3  { grid-column: auto / span 3; }  .col-4  { grid-column: auto / span 4; }
  .col-5  { grid-column: auto / span 5; }  .col-6  { grid-column: auto / span 6; }
  .col-7  { grid-column: auto / span 7; }  .col-8  { grid-column: auto / span 8; }
  .col-9  { grid-column: auto / span 9; }  .col-10 { grid-column: auto / span 10; }
  .col-11 { grid-column: auto / span 11; } .col-12 { grid-column: auto / span 12; }

  .start-2 { grid-column-start: 2; } .start-3 { grid-column-start: 3; }
  .start-4 { grid-column-start: 4; } .start-5 { grid-column-start: 5; }
  .start-6 { grid-column-start: 6; } .start-7 { grid-column-start: 7; }
  .start-8 { grid-column-start: 8; } .start-9 { grid-column-start: 9; }
  .start-10 { grid-column-start: 10; } .start-11 { grid-column-start: 11; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .t-col-2 { grid-column: auto / span 2; } .t-col-3 { grid-column: auto / span 3; }
  .t-col-4 { grid-column: auto / span 4; } .t-col-6 { grid-column: auto / span 6; }
}

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(56px, 7vw, 104px); }
.section--sunken { background: var(--bg-sunken); }
.section--inverse { background: var(--bg-inverse); color: var(--text-inverse); }
.section--inverse .eyebrow, .section--inverse .lede { color: inherit; opacity: 0.72; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 { margin: 0; font-weight: 600; }

.display {
  font-family: var(--font-display);
  font-size: var(--step-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-display);
  font-weight: 600;
  text-wrap: balance;
}
.title {
  font-family: var(--font-display);
  font-size: var(--step-title);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-title);
  font-weight: 600;
  text-wrap: balance;
}
.heading {
  font-family: var(--font-display);
  font-size: var(--step-section);
  line-height: 1.14;
  letter-spacing: -0.022em;
  font-weight: 600;
  text-wrap: balance;
}
.subheading {
  font-size: var(--step-sub);
  line-height: 1.35;
  letter-spacing: -0.012em;
  font-weight: 500;
}

.lede {
  font-size: clamp(1.0625rem, 1.35vw, 1.3125rem);
  line-height: 1.52;
  color: var(--text-muted);
  max-width: 54ch;
}

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.15em; color: var(--text-muted); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--text); font-weight: 600; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 400;
  display: block;
}

.meta {
  font-family: var(--font-mono);
  font-size: var(--step-meta);
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

.serif-accent { font-family: var(--font-serif); font-style: italic; font-weight: 400; }

.muted { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  border-radius: var(--r-full);
  font-size: var(--step-small);
  font-weight: 500;
  letter-spacing: -0.008em;
  border: 1px solid transparent;
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn--solid { background: var(--text); color: var(--bg); }
.btn--solid:hover { background: var(--text); opacity: 0.88; }
.btn--quiet { border-color: var(--line); color: var(--text); }
.btn--quiet:hover { border-color: var(--text); }
.btn--sm { padding: 9px 18px; font-size: var(--step-meta); font-family: var(--font-mono); letter-spacing: 0.04em; }

/* Text link with a drawn underline that grows on hover */
.link {
  display: inline-flex; align-items: center; gap: 8px;
  position: relative;
  font-weight: 500;
  padding-bottom: 2px;
}
.link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor; transform-origin: right;
  transform: scaleX(1); opacity: 0.28;
  transition: transform var(--dur-mid) var(--ease-out), opacity var(--dur-mid) var(--ease);
}
.link:hover::after { opacity: 1; transform-origin: left; }
.link .arw { transition: transform var(--dur-mid) var(--ease-out); }
.link:hover .arw { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Gravitational mesh field
   -------------------------------------------------------------------------- */

.mesh {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  /* Dissolve at the edges so the field reads as environment rather than
     as a panel that stops at a section boundary. */
  -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 25%, transparent 78%);
  mask-image: radial-gradient(120% 100% at 50% 40%, #000 25%, transparent 78%);
}
.mesh-host { position: relative; isolation: isolate; }
.mesh-host > *:not(.mesh):not(.hero-mark) { position: relative; z-index: 1; }

/* Abstract hero mark — drawn geometry repeated at the top of every page so
   a hero never reads as a heading floating on empty space. Sits above the
   mesh field but behind the actual heading content (painted first, and the
   shell that follows it in markup stacks on top at the same z-index). */
.hero-mark {
  position: absolute; top: clamp(-30px, -4vw, 0px); right: 0;
  width: clamp(220px, 24vw, 380px); height: auto; z-index: 1;
  color: var(--text); opacity: 0.5; pointer-events: none;
}
@media (max-width: 860px) {
  .hero-mark { width: clamp(160px, 42vw, 220px); opacity: 0.35; }
}

/* Corner/size variants so the same drawn-geometry vocabulary can furnish
   plain mid-page sections, not just the top of a hero. */
.hero-mark--tl { top: clamp(-30px, -4vw, 0px); right: auto; left: 0; bottom: auto; transform: scaleX(-1); }
.hero-mark--br { top: auto; bottom: clamp(-30px, -4vw, 0px); right: 0; left: auto; transform: scaleY(-1); }
.hero-mark--bl { top: auto; bottom: clamp(-30px, -4vw, 0px); right: auto; left: 0; transform: scale(-1, -1); }
.hero-mark--sm { width: clamp(140px, 15vw, 220px); opacity: 0.32; }
@media (max-width: 860px) {
  .hero-mark--sm { width: clamp(110px, 30vw, 150px); opacity: 0.24; }
}

/* --------------------------------------------------------------------------
   Floating navigation
   -------------------------------------------------------------------------- */

.nav-shell {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: clamp(14px, 2vw, 26px) var(--gutter);
  pointer-events: none;
  transition: padding var(--dur-mid) var(--ease);
}
.nav-shell.is-compact { padding-top: 10px; padding-bottom: 10px; }

.nav {
  pointer-events: auto;
  max-width: var(--shell);
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5);
  padding: 14px 14px 14px 22px;
  border-radius: var(--r-lg);
  background: var(--bg-veil);
  border: 1px solid var(--line-soft);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  transition: padding var(--dur-mid) var(--ease),
              border-radius var(--dur-mid) var(--ease),
              box-shadow var(--dur-mid) var(--ease),
              max-width var(--dur-mid) var(--ease);
}
.nav-shell.is-compact .nav {
  padding: 8px 8px 8px 18px;
  border-radius: var(--r-full);
  box-shadow: var(--shadow-md);
  max-width: 1180px;
}

.nav-mark { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.nav-mark img { height: 30px; width: auto; transition: height var(--dur-mid) var(--ease); }
.nav-shell.is-compact .nav-mark img { height: 26px; }

/* The mark ships as two artworks — a dark mark for light surfaces and a
   platinum mark for dark ones. Show whichever suits the active theme. */
.mark--dark { display: none; }
:root[data-theme="dark"] .mark--light { display: none; }
:root[data-theme="dark"] .mark--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mark--light { display: none; }
  :root:not([data-theme="light"]) .mark--dark { display: block; }
}
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-link {
  padding: 9px 16px;
  border-radius: var(--r-full);
  font-size: var(--step-small);
  font-weight: 450;
  color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 7px;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.nav-link:hover, .nav-link[aria-expanded="true"], .nav-link.is-current { color: var(--text); }
.nav-link:hover { background: var(--line-soft); }
.nav-link .chev { transition: transform var(--dur-mid) var(--ease); font-size: 0.7em; opacity: 0.7; }
.nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }

.nav-side { display: flex; align-items: center; gap: 10px; }

.theme-toggle {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.theme-toggle:hover { color: var(--text); border-color: var(--text); }
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
}

/* Mega menu ------------------------------------------------------------------
   Reads as the nav pill itself extending downward — one continuous shape,
   not a separate card. That means: zero gap, the same glass material, an
   exact width/position match (synced from the pill's own rendered rect in
   site.js's syncMegaToNav, rather than trusted to two independent CSS
   calculations that could drift apart by a few px at some viewport width),
   and the seam between them squared off on both pieces so they fuse — only
   the very top of the pill and the very bottom of the panel stay rounded. */
.mega {
  /* left/width are overwritten inline by syncMegaToNav once JS runs; these
     are just a same-shaped fallback for the instant before that happens. */
  position: absolute; left: var(--gutter); right: var(--gutter);
  top: calc(100% - clamp(14px, 2vw, 26px));
  max-width: var(--shell); margin-inline: auto;
  background: var(--bg-veil);
  border: 1px solid var(--line-soft);
  border-top: none;
  border-radius: var(--r-lg);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--shadow-lg);
  padding: clamp(24px, 3vw, 40px);
  opacity: 0; visibility: hidden;
  transform: translateY(-6px) scale(0.995);
  transform-origin: top center;
  transition: opacity var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease-out),
              visibility 0s linear var(--dur-mid);
  pointer-events: auto;
}
.mega.is-open {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
  transition-delay: 0s;
}
.nav-shell.is-compact .mega { top: calc(100% - 10px); }

/* Square off the pill's bottom edge exactly where the panel attaches, so
   the seam disappears instead of showing two touching rounded corners. */
.nav:has(.nav-link[aria-expanded="true"]) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}
.mega-grid { display: grid; grid-template-columns: 0.85fr 2.15fr; gap: clamp(24px, 4vw, 64px); }
@media (max-width: 900px) { .mega-grid { grid-template-columns: 1fr; gap: 24px; } }

.mega-aside .heading { font-size: 1.55rem; margin-bottom: 12px; }
.mega-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
@media (max-width: 700px) { .mega-list { grid-template-columns: 1fr; } }

.mega-item {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  transition: background-color var(--dur-fast) var(--ease);
}
.mega-item:hover { background: var(--bg-sunken); }
.mega-item-mark {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 11px;
  background: var(--text); color: var(--bg);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500;
}
.mega-item-name { font-weight: 550; letter-spacing: -0.014em; display: flex; align-items: center; gap: 8px; }
.mega-item-desc { font-size: var(--step-small); color: var(--text-muted); line-height: 1.45; margin-top: 3px; }
.mega-item .arw { opacity: 0; transform: translateX(-4px); transition: all var(--dur-mid) var(--ease-out); font-size: 0.8em; }
.mega-item:hover .arw { opacity: 0.55; transform: translateX(0); }

/* Mobile navigation --------------------------------------------------------- */
.nav-burger { display: none; width: 38px; height: 38px; border-radius: var(--r-full);
  border: 1px solid var(--line); place-items: center; color: var(--text); }
.mobile-nav {
  position: fixed; inset: 0; z-index: 99;
  background: var(--bg);
  padding: 108px var(--gutter) 40px;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease-out),
              visibility 0s linear var(--dur-mid);
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.m-group { border-bottom: 1px solid var(--line-soft); }
.m-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 22px 0; font-family: var(--font-display); font-size: 1.5rem;
  font-weight: 550; letter-spacing: -0.02em; text-align: left;
}
.m-trigger .chev { transition: transform var(--dur-mid) var(--ease); opacity: 0.5; font-size: 0.6em; }
.m-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
.m-panel { overflow: hidden; max-height: 0; transition: max-height var(--dur-mid) var(--ease); }
.m-panel-inner { padding-bottom: 20px; display: grid; gap: 4px; }
.m-sub { padding: 11px 0; color: var(--text-muted); font-size: 1.0625rem; }
.m-sub:hover { color: var(--text); }

@media (max-width: 1024px) {
  .nav-links, .nav-side .btn { display: none; }
  .nav-burger { display: grid; }
  /* Already reachable from the mobile drawer below — no need to also carry
     it as a fixed-size icon competing for room in the bar itself. */
  .nav-search { display: none; }
}
@media (max-width: 480px) {
  .nav { padding: 10px 8px 10px 14px; gap: 10px; }
  .nav-mark img { height: 22px; }
  .nav-side { gap: 6px; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  padding-top: clamp(150px, 20vh, 240px);
  padding-bottom: clamp(80px, 10vw, 150px);
  min-height: min(92vh, 940px);
  display: flex; align-items: center;
}
.hero .display { max-width: 15ch; }
.hero-aside {
  padding-top: 12px;
  border-top: 1px solid var(--line);
  align-self: end;
}

.scroll-cue {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: clamp(48px, 7vw, 90px);
  color: var(--text-faint);
}
.scroll-cue .bar {
  width: 46px; height: 1px; background: currentColor; position: relative; overflow: hidden;
}
.scroll-cue .bar::after {
  content: ""; position: absolute; inset: 0; background: var(--text);
  transform: translateX(-100%); animation: cue 2.6s var(--ease) infinite;
}
@keyframes cue { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue .bar::after { animation: none; } }

/* --------------------------------------------------------------------------
   Editorial index — the brand ecosystem (rows, not a card grid)
   -------------------------------------------------------------------------- */

.index-list { border-top: 1px solid var(--line); }

.index-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1.15fr) minmax(0, 1fr) 44px;
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(26px, 3.4vw, 46px) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: padding-left var(--dur-mid) var(--ease-out);
}
.index-row::before {
  content: ""; position: absolute; inset: 0 -24px;
  background: var(--bg-sunken); border-radius: var(--r-md);
  opacity: 0; transition: opacity var(--dur-mid) var(--ease); z-index: -1;
}
.index-row:hover::before { opacity: 1; }
.index-row:hover { padding-left: 18px; }
.index-num { font-family: var(--font-mono); font-size: var(--step-meta); color: var(--text-faint); }
.index-name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1.06; letter-spacing: -0.028em; font-weight: 550;
  display: inline-flex; align-items: center; gap: 14px;
}
.index-desc { color: var(--text-muted); font-size: var(--step-small); line-height: 1.5; }
.index-go {
  width: 42px; height: 42px; border-radius: var(--r-full);
  border: 1px solid var(--line); display: grid; place-items: center;
  color: var(--text-muted); justify-self: end;
  transition: all var(--dur-mid) var(--ease);
}
.index-row:hover .index-go { background: var(--text); color: var(--bg); border-color: var(--text); transform: rotate(-45deg); }

@media (max-width: 900px) {
  .index-row { grid-template-columns: 40px minmax(0, 1fr) 36px; gap: 14px; }
  .index-desc { grid-column: 2 / 3; }
  .index-go { width: 34px; height: 34px; }
}

/* Hover image preview that follows the pointer (desktop only) */
.index-preview {
  position: fixed; top: 0; left: 0; width: 300px; height: 210px;
  border-radius: var(--r-md); overflow: hidden;
  pointer-events: none; opacity: 0; z-index: 60;
  transform: translate(-50%, -50%) scale(0.94);
  transition: opacity var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease-out);
  box-shadow: var(--shadow-lg);
}
.index-preview.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.index-preview img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1024px), (prefers-reduced-motion: reduce) { .index-preview { display: none; } }

/* --------------------------------------------------------------------------
   Full-bleed feature with overlapping text
   -------------------------------------------------------------------------- */

.feature { position: relative; }
.feature-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7.4;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--bg-sunken);
}
.feature-media img { width: 100%; height: 100%; object-fit: cover; }
.feature-panel {
  background: var(--bg);
  border-radius: var(--r-lg);
  padding: clamp(28px, 3.4vw, 52px);
  margin-top: -14%;
  position: relative; z-index: 2;
  box-shadow: var(--shadow-md);
}
@media (max-width: 900px) {
  .feature-media { aspect-ratio: 4 / 3; }
  .feature-panel { margin-top: -40px; }
}

/* Sticky editorial column ---------------------------------------------------- */
.sticky-head { position: sticky; top: 140px; align-self: start; }
@media (max-width: 1024px) { .sticky-head { position: static; } }

/* --------------------------------------------------------------------------
   Editorial article listings
   -------------------------------------------------------------------------- */

.lead-story { display: grid; gap: clamp(20px, 2.5vw, 34px); }
.lead-story-media {
  aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-sunken);
}
.lead-story-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.lead-story:hover .lead-story-media img { transform: scale(1.03); }

.story-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
  padding: 22px 0;
  border-top: 1px solid var(--line-soft);
}
.story-row:first-child { border-top: 0; padding-top: 0; }
.story-row-media { aspect-ratio: 4 / 3; border-radius: var(--r-sm); overflow: hidden; background: var(--bg-sunken); }
/* Deterministic fallback thumbnail (content_plate macro) — fills whichever
   media box it's dropped into, same as an <img> would. */
.content-plate { display: block; width: 100%; height: 100%; color: var(--text); }
.story-row-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.story-row:hover .story-row-media img { transform: scale(1.05); }
.story-title {
  font-family: var(--font-display); font-weight: 550;
  font-size: 1.14rem; line-height: 1.3; letter-spacing: -0.016em;
  margin: 8px 0 6px;
}
.story-row:hover .story-title { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (max-width: 560px) { .story-row { grid-template-columns: minmax(0, 1fr) 92px; } }

/* Research entries — technical editorial, no cards ---------------------------- */
.paper-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: clamp(16px, 3vw, 40px);
  align-items: baseline;
  padding: clamp(22px, 2.6vw, 34px) 0;
  border-bottom: 1px solid var(--line);
  transition: opacity var(--dur-fast) var(--ease);
}
.paper-title {
  font-family: var(--font-display); font-weight: 550;
  font-size: clamp(1.1rem, 1.6vw, 1.45rem); line-height: 1.26; letter-spacing: -0.02em;
}
.paper-row:hover .paper-title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.paper-abstract { color: var(--text-muted); font-size: var(--step-small); margin-top: 8px; max-width: 62ch; }
@media (max-width: 760px) {
  .paper-row { grid-template-columns: 1fr; gap: 8px; }
}

/* Job rows ------------------------------------------------------------------- */
.job-row {
  display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr 1fr 44px;
  gap: 20px; align-items: center;
  padding: 26px 0; border-bottom: 1px solid var(--line);
  transition: padding-left var(--dur-mid) var(--ease-out);
}
.job-row:hover { padding-left: 14px; }
.job-title { font-family: var(--font-display); font-weight: 550; font-size: 1.24rem; letter-spacing: -0.018em; }
@media (max-width: 800px) {
  .job-row { grid-template-columns: minmax(0, 1fr) 40px; row-gap: 6px; }
  .job-row .job-meta { grid-column: 1 / 2; }
}

/* --------------------------------------------------------------------------
   Tags, chips, pagination
   -------------------------------------------------------------------------- */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: var(--r-full);
  border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: var(--step-meta); letter-spacing: 0.04em;
  color: var(--text-muted);
  transition: all var(--dur-fast) var(--ease);
}
a.chip:hover, .chip.is-active { background: var(--text); color: var(--bg); border-color: var(--text); }
.chip--flagship { background: var(--text); color: var(--bg); border-color: var(--text); vertical-align: middle; }

.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* Entity logos — brands and products, wherever their name appears -------- */
.entity-logo {
  width: 40px; height: 40px; object-fit: contain; display: block;
  border-radius: var(--r-sm); background: var(--bg-sunken); border: 1px solid var(--line-soft);
  padding: 5px;
}
.entity-logo--lg { width: 64px; height: 64px; padding: 8px; }

/* --------------------------------------------------------------------------
   Article toolbar — listen (TTS) + share
   -------------------------------------------------------------------------- */

.article-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px;
  padding-top: 18px; border-top: 1px solid var(--line);
}
.article-toolbar-listen {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px 9px 14px; border-radius: var(--r-full);
  border: 1px solid var(--line); font-size: var(--step-small); font-weight: 500;
  color: var(--text); flex-shrink: 0;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.article-toolbar-listen:hover { border-color: var(--text); }
.article-toolbar-listen[aria-pressed="true"] { background: var(--bg-inverse); color: var(--text-inverse); border-color: var(--bg-inverse); }
.article-toolbar-listen i { font-size: 0.9em; }

.article-toolbar-share {
  display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
}
.article-toolbar-share-label {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-faint); margin-right: 2px;
}
.article-share-btn {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--text-muted); font-size: 0.82rem;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.article-share-btn:hover { color: var(--text); border-color: var(--text); }
.article-share-btn:active { transform: scale(0.92); }
@media (max-width: 640px) {
  .article-toolbar-share { margin-left: 0; }
  .article-toolbar-share-label { display: none; }
}

/* --------------------------------------------------------------------------
   Long-form article body
   -------------------------------------------------------------------------- */

.article-body { max-width: 70ch; font-size: 1.125rem; line-height: 1.55; }
.article-body > table,
.article-body > pre,
.article-body > .table-scroll { max-width: none; }

.article-body p { margin: 0 0 1.05em; color: var(--text-muted); }
.article-body > *:first-child { margin-top: 0; }

.article-body h2 {
  font-family: var(--font-display); font-size: 1.65rem; letter-spacing: -0.022em;
  margin: 1.9em 0 0.7em; color: var(--text); font-weight: 600;
}
.article-body h3 { font-family: var(--font-display); font-size: 1.24rem; margin: 1.7em 0 0.6em; color: var(--text); font-weight: 600; }
.article-body h4 { font-size: 1.05rem; margin: 1.5em 0 0.5em; color: var(--text); font-weight: 600; }

.article-body ul, .article-body ol { color: var(--text-muted); padding-left: 1.3em; margin: 0 0 1.35em; }
.article-body li { margin-bottom: 0.5em; }
.article-body li > ul, .article-body li > ol { margin-top: 0.5em; margin-bottom: 0; }
.article-body li p { margin-bottom: 0.5em; }

.article-body blockquote {
  margin: 1.8em 0; padding-left: 26px; border-left: 2px solid var(--text);
  font-family: var(--font-serif); font-style: italic; font-size: 1.4rem; line-height: 1.42;
  color: var(--text);
}
.article-body blockquote p:last-child { margin-bottom: 0; }

.article-body code {
  font-family: var(--font-mono); font-size: 0.86em;
  background: var(--bg-sunken); padding: 2px 6px; border-radius: 4px;
  word-break: break-word;
}
.article-body pre {
  background: var(--bg-inverse); color: var(--text-inverse);
  border-radius: var(--r-md); padding: 20px 22px; overflow-x: auto;
  margin: 0 0 1.6em; line-height: 1.6;
}
.article-body pre code {
  background: none; padding: 0; font-size: 0.86rem; color: inherit;
}

.article-body a { text-decoration: underline; text-underline-offset: 3px; color: var(--text); }
.article-body a:hover { text-decoration-thickness: 2px; }

.article-body hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }

.article-body img {
  max-width: 100%; border-radius: var(--r-md); margin: 0.4em 0 1.6em;
}

/* Tables scroll horizontally on their own rather than the page overflowing */
.article-body table {
  width: 100%; max-width: none; border-collapse: collapse;
  margin: 0 0 1.8em; font-size: 0.94rem;
  display: block; overflow-x: auto; white-space: nowrap;
}
.article-body table thead, .article-body table tbody { display: table; width: 100%; table-layout: fixed; }
.article-body th, .article-body td {
  text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line);
  white-space: normal;
}
.article-body th {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-faint); font-weight: 400;
  border-bottom: 1px solid var(--text);
}
.article-body tbody tr:last-child td { border-bottom: 0; }

/* Admonitions (python-markdown's `admonition` extension: !!! note "Title") */
.article-body .admonition {
  border: 1px solid var(--line); border-left: 3px solid var(--text);
  border-radius: var(--r-sm); padding: 16px 20px; margin: 0 0 1.6em;
  background: var(--bg-sunken);
}
.article-body .admonition-title {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-faint); margin: 0 0 8px; display: block;
}
.article-body .admonition p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.field-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }

.field { margin-bottom: 26px; }
.field label {
  display: block; font-family: var(--font-mono); font-size: var(--step-meta);
  letter-spacing: var(--track-meta); text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 10px;
}
.field input, .field textarea, .field select {
  width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--text);
  font-family: inherit; font-size: 1.0625rem;
  border-radius: 0;
  transition: border-color var(--dur-fast) var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-bottom-color: var(--text);
}
.field select {
  appearance: none; cursor: pointer;
  padding-right: 26px;
  /* appearance:none drops the native arrow entirely — without this a
     select is visually indistinguishable from a plain text input. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23888' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 12px 8px;
}
:root[data-theme="dark"] .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23aaa' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23aaa' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

.flash {
  padding: 15px 22px; border-radius: var(--r-md); margin-bottom: 22px;
  font-size: var(--step-small); border: 1px solid var(--line);
  background: var(--bg-sunken);
}
.flash--error { border-color: #C4726B; color: #8C3A32; background: rgba(196, 114, 107, 0.08); }
:root[data-theme="dark"] .flash--error { color: #E9A49D; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--bg-sunken);
  padding-top: clamp(64px, 8vw, 120px);
  padding-bottom: 40px;
  margin-top: 0;
}
.footer-statement {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.2vw, 4.4rem);
  line-height: 1.04; letter-spacing: -0.034em; font-weight: 600;
  max-width: 18ch;
  margin-bottom: clamp(56px, 8vw, 110px);
}
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
@media (max-width: 900px) { .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
@media (max-width: 520px) { .footer-cols { grid-template-columns: 1fr; } }
.footer-col h4 {
  font-family: var(--font-mono); font-size: var(--step-meta);
  letter-spacing: var(--track-meta); text-transform: uppercase;
  color: var(--text-faint); font-weight: 400; margin-bottom: 18px;
}
.footer-col a {
  display: block; padding: 6px 0; color: var(--text-muted); font-size: var(--step-small);
  transition: color var(--dur-fast) var(--ease);
}
.footer-col a:hover { color: var(--text); }
.footer-base {
  margin-top: clamp(48px, 6vw, 88px); padding-top: 26px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
}

/* --------------------------------------------------------------------------
   Cookie consent banner
   -------------------------------------------------------------------------- */

.cookie-banner {
  position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 60;
  max-width: 680px; margin: 0 auto;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
  padding: clamp(18px, 2.4vw, 26px);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-inner { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.cookie-banner p { margin: 0; font-size: var(--step-small); color: var(--text-muted); max-width: 44ch; }
.cookie-banner-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Reveal on scroll
   -------------------------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 700ms var(--ease), transform 800ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Utilities ------------------------------------------------------------------ */
.stack > * + * { margin-top: var(--flow, 20px); }
.flow-sm { --flow: 12px; }
.flow-lg { --flow: 36px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.text-right { text-align: right; }
@media (max-width: 1024px) { .text-right { text-align: left; } }

/* ==========================================================================
   Informational components
   ========================================================================== */

/* Generative company plates ------------------------------------------------ */
.plate {
  width: 100%; display: block; color: var(--text);
  background: var(--bg-sunken);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
}
.plate-wrap { overflow: hidden; border-radius: var(--r-lg); }
.plate-wrap .plate { transition: transform var(--dur-slow) var(--ease-out); }
a:hover .plate, .index-row:hover .plate { transform: scale(1.02); }

/* Group structure diagram --------------------------------------------------- */
.diagram { width: 100%; height: auto; color: var(--text); }
.diagram .dgm-title {
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  fill: currentColor; letter-spacing: -0.01em;
}
.diagram .dgm-sub {
  font-family: var(--font-body); font-size: 12px; fill: currentColor; opacity: 0.55;
}
.diagram .dgm-code {
  font-family: var(--font-mono); font-size: 10px; fill: currentColor;
  opacity: 0.4; letter-spacing: 0.12em;
}
.dgm-sub-html {
  font-family: var(--font-body); font-size: 12px; line-height: 1.4;
  color: inherit; opacity: 0.55; text-align: center;
}
.diagram-scroll { overflow-x: auto; }
.diagram-scroll .diagram { min-width: 720px; }

/* Benchmarks ---------------------------------------------------------------- */
.bench {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(20px, 2.6vw, 30px);
  background: var(--bg-sunken);
}
.bench-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; margin-bottom: 20px;
}
.bench-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 1.5fr) 62px;
  gap: 16px; align-items: center;
  padding: 13px 0; border-top: 1px solid var(--line-soft);
}
.bench-row:first-of-type { border-top: 0; }
.bench-label { font-size: var(--step-small); font-weight: 500; }
.bench-note {
  display: block; font-family: var(--font-mono); font-size: 0.68rem;
  color: var(--text-faint); margin-top: 3px; letter-spacing: 0.04em;
}
.bench-track { height: 6px; background: var(--line-soft); border-radius: var(--r-full); overflow: hidden; }
.bench-fill {
  height: 100%; background: var(--text); border-radius: var(--r-full);
  transform-origin: left; animation: benchGrow 900ms var(--ease-out) both;
}
@keyframes benchGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .bench-fill { animation: none; } }
.bench-value {
  font-family: var(--font-mono); font-size: 0.86rem; text-align: right; font-weight: 500;
}
@media (max-width: 620px) {
  .bench-row { grid-template-columns: minmax(0, 1fr) 56px; }
  .bench-track { grid-column: 1 / -1; }
}

/* Findings list -------------------------------------------------------------- */
.findings { list-style: none; padding: 0; margin: 0; }
.findings li {
  display: grid; grid-template-columns: 26px 1fr; gap: 12px;
  padding: 12px 0; border-top: 1px solid var(--line-soft);
  color: var(--text-muted); font-size: var(--step-small);
}
.findings li:first-child { border-top: 0; }
.findings li::before {
  content: counter(list-item, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-faint);
  padding-top: 2px;
}

/* Metrics -------------------------------------------------------------------- */
.metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: 1px solid var(--line);
}
.metric {
  padding: clamp(22px, 2.6vw, 34px) clamp(18px, 2.4vw, 30px);
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.metric:last-child { border-right: 0; }
.metric:first-child { padding-left: 0; }
@media (max-width: 700px) { .metric:first-child { padding-left: clamp(18px, 2.4vw, 30px); } }
.metric-value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 600;
  letter-spacing: -0.035em; line-height: 1;
}
.metric-label {
  font-family: var(--font-mono); font-size: var(--step-meta);
  letter-spacing: var(--track-meta); text-transform: uppercase;
  color: var(--text-faint); margin-top: 10px;
}
.metric-context {
  margin: 10px 0 0; font-size: var(--step-small); color: var(--text-muted);
  max-width: 32ch; line-height: 1.5;
}
@media (max-width: 700px) { .metric { border-right: 0; padding-right: 0; } }

/* Facts ---------------------------------------------------------------------- */
.facts { margin: 0; padding: 0; border-top: 1px solid var(--line); }
.fact {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--line-soft);
}
.fact dt {
  font-family: var(--font-mono); font-size: var(--step-meta);
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-faint);
}
.fact dd { margin: 0; font-size: var(--step-small); font-weight: 500; }

/* Timeline -------------------------------------------------------------------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline-item {
  display: grid; grid-template-columns: 78px 26px minmax(0, 1fr);
  gap: 0 clamp(12px, 2vw, 26px);
  padding-bottom: clamp(26px, 3vw, 44px);
  position: relative;
}
.timeline-year {
  font-family: var(--font-mono); font-size: var(--step-meta);
  letter-spacing: 0.08em; color: var(--text-faint); padding-top: 5px;
}
.timeline-dot { position: relative; }
.timeline-dot::before {
  content: ""; position: absolute; left: 50%; top: 8px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--text); transform: translateX(-50%);
}
.timeline-item:not(:last-child) .timeline-dot::after {
  content: ""; position: absolute; left: 50%; top: 20px; bottom: -22px;
  width: 1px; background: var(--line); transform: translateX(-50%);
}
.timeline-body h3 {
  font-family: var(--font-display); font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  letter-spacing: -0.02em; font-weight: 550; margin: 0 0 6px;
}
.timeline-body p { margin: 0; color: var(--text-muted); font-size: var(--step-small); max-width: 58ch; }
@media (max-width: 600px) {
  .timeline-item { grid-template-columns: 56px 20px minmax(0, 1fr); }
}

/* Marquee --------------------------------------------------------------------- */
/* Client showcase — a static wordmark row, deliberately distinct from the
   scrolling tech-stack marquee above it (motion reads as "stack", stillness
   reads as "who trusts us"). */
.client-showcase { border-bottom: 1px solid var(--line); padding-block: 34px; margin-top: 28px; }
.client-showcase-inner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 18px 48px;
}
.client-showcase-eyebrow { flex-shrink: 0; }
.client-showcase-list {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 40px;
  list-style: none; padding: 0; margin: 0; flex: 1; min-width: 0;
}
.client-showcase-item {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1rem, 1.3vw, 1.18rem); letter-spacing: -0.012em;
  color: var(--text-faint);
  transition: color var(--dur-fast) var(--ease);
}
.client-showcase-item:hover { color: var(--text); }
.client-showcase-item img {
  height: 20px; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: 0.85;
}
@media (max-width: 760px) {
  .client-showcase-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
}

.marquee {
  overflow: hidden; border-block: 1px solid var(--line);
  padding: 22px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex; align-items: center; gap: 18px; width: max-content;
  animation: marquee 48s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  font-family: var(--font-mono); font-size: var(--step-small);
  letter-spacing: 0.02em; color: var(--text-muted); white-space: nowrap;
}
.marquee-sep { color: var(--text-faint); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
}

/* Newsroom cross-link strip ----------------------------------------------- */
.newsroom-strip {
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px;
  padding: 16px var(--gutter);
  max-width: var(--shell); margin-inline: auto;
  border-block: 1px solid var(--line);
}
.newsroom-strip-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--step-small);
  color: var(--text-muted); flex-shrink: 0;
}
.newsroom-strip-label i { color: var(--text-faint); }
.newsroom-strip-items {
  display: flex; flex-wrap: wrap; gap: 8px 26px; flex: 1;
  min-width: 0;
}
.newsroom-strip-item {
  display: inline-flex; align-items: baseline; gap: 8px;
  color: var(--text); font-size: var(--step-small); font-weight: 500;
  max-width: 320px;
}
.newsroom-strip-item .meta { flex-shrink: 0; color: var(--text-faint); }
.newsroom-strip-item .newsroom-strip-title {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.newsroom-strip-item:hover .newsroom-strip-title { text-decoration: underline; }
.newsroom-strip-all { flex-shrink: 0; margin-left: auto; }
@media (max-width: 760px) {
  .newsroom-strip { padding-block: 14px; }
  .newsroom-strip-item { max-width: 220px; }
  .newsroom-strip-all { margin-left: 0; }
}

/* Process steps ---------------------------------------------------------------- */
.steps { display: grid; gap: 0; border-top: 1px solid var(--line); }
.step {
  display: grid; grid-template-columns: 60px minmax(0, 1fr);
  gap: clamp(14px, 2vw, 30px);
  padding: clamp(20px, 2.4vw, 30px) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left var(--dur-mid) var(--ease-out);
}
.step:hover { padding-left: 12px; }
.step-num { font-family: var(--font-mono); font-size: var(--step-meta); color: var(--text-faint); }
.step h3 {
  font-family: var(--font-display); font-size: 1.2rem; letter-spacing: -0.02em;
  font-weight: 550; margin: 0 0 6px;
}
.step p { margin: 0; color: var(--text-muted); font-size: var(--step-small); max-width: 62ch; }

/* Definition rows (used for infrastructure + open source detail) ---------------- */
.detail-rows { border-top: 1px solid var(--line); }
.detail-row {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr);
  gap: clamp(14px, 3vw, 40px);
  padding: clamp(18px, 2.2vw, 28px) 0; border-bottom: 1px solid var(--line-soft);
}
.detail-row h3 {
  margin: 0; font-family: var(--font-display); font-size: 1.05rem;
  font-weight: 550; letter-spacing: -0.016em;
}
.detail-row p { margin: 0; color: var(--text-muted); font-size: var(--step-small); }
@media (max-width: 700px) { .detail-row { grid-template-columns: 1fr; gap: 6px; } }

/* Leadership rows -------------------------------------------------------------- */
.leader-row { display: grid; grid-template-columns: repeat(6, 1fr); column-gap: 20px; row-gap: 6px; }
.leader-row > * { grid-column: span 2; }
@media (max-width: 700px) {
  .leader-row { grid-template-columns: 1fr; row-gap: 10px; }
  .leader-row > * { grid-column: auto; }
}

/* Client strip ---------------------------------------------------------------- */
.client-strip { display: flex; flex-wrap: wrap; gap: 10px; }
.client-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 20px; border-radius: var(--r-full); border: 1px solid var(--line);
  font-size: var(--step-small); font-weight: 500; color: var(--text-muted);
}
.client-pill img { width: 18px; height: 18px; object-fit: contain; border-radius: 3px; }