/* Layout and components for every page on the site — the landing page
   first, then the blog at the bottom. One stylesheet on purpose: the two
   surfaces share the nav, the footer and most of their vocabulary, and
   splitting them would be the first step toward them drifting apart.
   Tokens come from tokens.css — nothing in here hardcodes a color, radius,
   spacing or timing value that already has a token. */

.section-inner,
.nav-inner,
.footer-inner,
.hero-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.section-inner-narrow {
  max-width: 640px;
}

.hero-inner {
  position: relative;
  z-index: 1;
}

/* Nav */

/* The nav lies over the top of every page, see-through, so whatever glow
   the page opens with shows behind it. Each page's first section adds
   --nav-height to its top padding to make room. */
.nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: var(--nav-height);
}

/* The brand lockup: Odin's mark beside a two-line text column — the
   wordmark with the company riding under it. Odin leads the page (it's
   the thing being sold), but who makes it should be legible from the
   first screen, not only to a visitor who scrolls to the footer.
   Both lines share .brand-text as their parent so the mark centers
   against the column as a whole; centered against the wordmark alone it
   rode visibly high. */
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-right: auto;
  color: var(--ink);
  text-decoration: none;
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.wordmark-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: 0.02em;
}

/* The whole lockup is one link, so the attribution sits inside the <a>.
   The aria-label names it too ("Enöga by Mihari, home") — a label
   replaces the text it wraps, so one saying only "Odin" would drop
   Mihari for a screen reader. */
.brand-by {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.wordmark-icon {
  display: inline-flex;
  width: 36px;
  height: 36px;
}

.wordmark-icon svg {
  width: 100%;
  height: 100%;
  color: var(--accent);
}

.nav-links {
  display: flex;
  gap: var(--space-5);
}

.nav-links a {
  color: var(--ink-mute);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color var(--t-fast) var(--ease);
}

.nav-links a:hover {
  color: var(--ink);
}

.nav-links a[hreflang] {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* Buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.button-primary {
  background: var(--accent);
  color: var(--ink-on-accent);
  padding: var(--space-4) var(--space-6);
  font-size: 15px;
  box-shadow: var(--glow);
}

.button-primary:hover {
  transform: translateY(-1px);
}

.button-small {
  background: var(--accent);
  color: var(--ink-on-accent);
  padding: var(--space-2) var(--space-4);
  font-size: 14px;
}

/* Odin's rule: one ember action per view. The nav's button is the quiet
   sibling, so the hero's call to action is the only ember on screen. */
.button-secondary {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.button-secondary:hover {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--ink-mute);
}

.button .icon {
  width: 17px;
  height: 17px;
  margin-left: var(--space-3);
  transition: transform var(--t-fast) var(--ease);
}

.button:hover .icon {
  transform: translateX(3px);
}

.icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.symbol-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Hero */

.hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--space-8) * 2 + var(--nav-height)) 0 var(--space-8);
}

/* Static bloom — a complete, good-looking treatment on its own. ember.js
   layers slow WebGL motion on top of this when it's available; nothing
   about the design depends on that succeeding. */
.hero-bloom {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 60% at 20% 20%, rgba(240, 122, 41, 0.14), transparent 65%),
    radial-gradient(ellipse 50% 45% at 92% 0%, rgba(240, 122, 41, 0.07), transparent 70%);
}

/* The ember particle canvas hugs just the eyebrow text — small and
   targeted, not a full-hero effect. Room above the text for particles
   to rise into before they recycle. */
.eyebrow-wrap {
  position: relative;
  display: inline-block;
}

.ember-canvas {
  /* Explicit width/height, not left+right/top+bottom insets: canvas is a
     replaced element, and browsers size those from their intrinsic
     300x150 default instead of resolving insets the way they would for
     a plain div — leaving the canvas (and the particles' whole
     coordinate space) far bigger than the eyebrow text, invisible in
     practice. calc() against the wrapper's own box sidesteps that. */
  position: absolute;
  left: -10px;
  top: -32px;
  width: calc(100% + 20px);
  height: calc(100% + 38px);
  z-index: 0;
  pointer-events: none;
}

.eyebrow {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-ink);
  text-shadow: 0 0 12px rgba(240, 122, 41, 0.35);
  margin-bottom: var(--space-4);
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.1;
  max-width: 16ch;
  margin-bottom: var(--space-5);
}

.lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-mute);
  max-width: 56ch;
  margin-bottom: var(--space-6);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.hero-note {
  font-size: 14px;
  color: var(--ink-faint);
}

/* Landing hero: the big two-tone headline, the wide raven faded in amber
   behind it, and the call to action on the right, where a thumb reaches
   it, as in Alex's prototype. */

.landing-hero {
  isolation: isolate;
  padding-bottom: calc(var(--space-8) * 2.5);
}

.landing-hero .hero-bloom {
  bottom: auto;
  height: 520px;
  background: radial-gradient(circle 560px at 50% 100%, transparent 25%, rgba(240, 122, 41, 0.2) 100%);
  mask-image: linear-gradient(to bottom, #000, transparent);
}

.landing-hero .eyebrow {
  font-weight: 700;
}

.hero-raven {
  position: absolute;
  z-index: 0;
  top: calc(40px + var(--nav-height));
  right: -24px;
  width: min(62%, 760px);
  aspect-ratio: 905 / 455;
  color: var(--amber);
  opacity: 0.58;
  pointer-events: none;
  mask-image: linear-gradient(110deg, transparent 3%, #000 76%);
}

.landing-hero h1 {
  font-weight: 600;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1.04;
  letter-spacing: -0.045em;
  max-width: 13ch;
  margin-bottom: 0;
}

.landing-hero h1 span {
  color: var(--ink-mute);
}

.hero-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--space-8) * 2);
  margin-top: calc(var(--space-8) + var(--space-2));
}

.landing-hero .lede {
  margin-bottom: 0;
}

.hero-conversion {
  flex-shrink: 0;
}

.hero-conversion .button {
  width: 100%;
  min-height: 52px;
}

.hero-conversion .hero-note {
  margin-top: var(--space-3);
  font-size: 13px;
  color: var(--ink-mute);
}

/* The product band: the light page walks quickly into Odin's own ground,
   the product window and the sections about it sit there in Emberfall,
   and the ground walks back to the light page by the time the next
   section starts. */

.odin-band {
  background: linear-gradient(
    in oklab to bottom,
    var(--bg) 0,
    var(--odin-bg) 200px,
    var(--odin-bg) calc(100% - 360px),
    var(--bg) 100%
  );
  padding-bottom: 300px;
}

.band-window {
  padding-top: var(--space-6);
}

.band-section {
  padding-top: calc(var(--space-8) * 3.5);
}

.band-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--space-5);
}

.odin-band h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 3.5vw, 46px);
  line-height: 1.13;
  letter-spacing: -0.04em;
}

.odin-band h2 span {
  color: var(--ink-mute);
}

/* The window */

.product-window {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
  box-shadow: 0 32px 90px -40px rgba(0, 0, 0, 0.6);
  font-size: 14px;
  line-height: 1.5;
}

.film-context {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-8);
  border-bottom: 1px solid var(--line);
  color: var(--ink-mute);
  font-size: 12.5px;
}

.film-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
}

.film-brand .mark {
  width: 25px;
  height: 25px;
  color: var(--accent);
}

.film-context-note {
  margin-left: auto;
}

/* Odin's record components, as its app.css draws them */

.record-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-6);
}

.record-header-title {
  min-width: 0;
}

.record-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.record-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  margin: var(--space-1) 0 var(--space-2);
}

.record-state {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--ink-mute);
}

.case-entry {
  display: grid;
  grid-template-columns: 44px 16px minmax(0, 1fr);
  gap: var(--space-2);
  align-items: baseline;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
}

.case-entry-when {
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-mute);
}

.case-entry-glyph {
  color: var(--ink-mute);
  align-self: center;
}

.case-entry-glyph .icon {
  width: 13px;
  height: 13px;
}

.case-entry-said {
  font-size: 13px;
  line-height: 1.55;
  min-width: 0;
}

.case-entry-actor {
  color: var(--accent-ink);
}

.case-entry-actor::after {
  content: " · ";
  color: var(--ink-mute);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.btn.quiet {
  border-color: transparent;
  color: var(--ink-mute);
}

.btn.quiet:hover {
  color: var(--ink);
  background: var(--surface-2);
}

.btn .icon {
  width: 15px;
  height: 15px;
}

/* The case graph, drawn as Odin's RecordGraph draws it */

.film-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
}

.film-graph {
  display: flex;
  align-items: center;
  padding: var(--space-5);
  border-right: 1px solid var(--line);
  background-color: #0d131c;
  background-image: radial-gradient(rgba(148, 170, 197, 0.09) 1px, transparent 1px);
  background-size: 24px 24px;
}

.film-graph-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: var(--font-body);
}

.g-edge {
  stroke: rgba(148, 170, 197, 0.46);
  stroke-width: 1.5;
}

.g-record {
  stroke: rgba(148, 170, 197, 0.32);
  stroke-dasharray: 4 4;
}

.g-pill rect {
  fill: #0d131c;
}

.g-pill text,
.g-legend text {
  fill: var(--ink-mute);
  font-size: 13px;
  text-anchor: middle;
}

.g-legend text {
  text-anchor: start;
  font-size: 12px;
}

.g-new-dot {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 3 2;
}

.g-ring {
  fill: var(--surface);
  stroke: var(--line-strong);
  stroke-width: 1.5;
  transition: stroke var(--t-slow) var(--ease);
}

.g-case .g-ring {
  fill: var(--surface-2);
}

.g-icon {
  fill: none;
  stroke: #c7d0dc;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.g-mark {
  color: var(--accent);
}

.g-name,
.g-sub,
.g-flag {
  text-anchor: middle;
  paint-order: stroke;
  stroke: #0d131c;
  stroke-width: 5px;
  stroke-linejoin: round;
}

.g-name {
  fill: var(--ink);
  font-size: 13.5px;
  font-weight: 500;
}

.g-sub {
  fill: var(--ink-mute);
  font-size: 13px;
  transition: fill var(--t-slow) var(--ease);
}

.g-flag {
  fill: var(--warn);
  font-size: 12.5px;
  font-weight: 500;
}

.g-node.is-new .g-ring {
  stroke: var(--accent);
  stroke-dasharray: 4 3;
}

.g-node.is-new .g-sub {
  fill: var(--accent-ink);
}

.g-node.is-flagged .g-ring {
  stroke: rgba(224, 168, 60, 0.6);
}

.film-rail {
  padding: var(--space-6);
  min-width: 0;
}

.film-priority {
  padding: 1px 8px;
  border: 1px solid rgba(214, 96, 90, 0.5);
  border-radius: 999px;
  color: #e08585;
}

.film-log {
  list-style: none;
}

/* Without landing.js every piece shows and only the final status does;
   with it, each piece shows from its data-at until its data-until. */
[data-until] {
  display: none;
}

.film-live [data-until].is-on {
  display: inline;
}

.film-live [data-at] {
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}

.film-live [data-at]:not(.is-on) {
  opacity: 0;
  visibility: hidden;
  transition: none;
}

.film-live .g-node {
  transform-box: fill-box;
  transform-origin: center;
}

.film-live .g-node:not(.is-on) {
  transform: scale(0.8);
}

.film-live line[pathLength] {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 700ms var(--ease);
}

.film-live line[pathLength]:not(.is-on) {
  stroke-dashoffset: 1;
}

.film-transport {
  border-top: 1px solid var(--line);
  background: var(--bg-raise);
  padding: var(--space-4) var(--space-6) 10px;
}

.film-transport[hidden] {
  display: none;
}

.film-chapters {
  display: flex;
  list-style: none;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.film-chapters li {
  font-size: 12.5px;
  color: var(--ink-mute);
  display: flex;
  align-items: center;
  gap: 7px;
}

.film-chapters button {
  display: flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: var(--space-1) 0;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}

.film-chapters button:hover {
  color: var(--ink);
}

.film-chapters button > span {
  font-family: var(--font-mono);
  font-size: 10px;
}

.film-chapters li.is-past {
  color: var(--ink);
}

.film-chapters li[aria-current="step"] {
  color: var(--accent-ink);
}

.film-progress {
  height: 2px;
  background: var(--line-strong);
  overflow: hidden;
}

.film-progress > span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
}

.film-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-2);
}

.film-controls .btn {
  padding: 6px var(--space-2);
  min-height: 32px;
  font-size: 12.5px;
}

.product-window[data-playing="true"] .icon-play,
.product-window[data-playing="false"] .icon-pause {
  display: none;
}

.film-time {
  font-family: var(--font-mono);
  color: var(--ink-mute);
  font-size: 11px;
  margin-left: var(--space-2);
}

.film-caption {
  margin-left: auto;
  color: var(--ink-mute);
  font-size: 12.5px;
}

/* Capabilities: ruled rows rather than cards */

.section-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--space-8) * 3);
  align-items: end;
  margin-bottom: 52px;
}

.section-heading > p {
  max-width: 490px;
  font-size: 17px;
  line-height: 1.8;
  color: var(--ink-mute);
}

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

.capability-list article {
  display: grid;
  grid-template-columns: 55px minmax(200px, 0.85fr) minmax(0, 1.4fr);
  gap: 30px;
  padding: 27px 0;
  align-items: start;
  border-bottom: 1px solid var(--line);
  transition: border-color var(--t-fast) var(--ease);
}

.capability-list article:hover {
  border-bottom-color: var(--ink-faint);
}

.capability-index {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.8;
  color: var(--ink-mute);
  padding-top: 5px;
}

.capability-list h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 25px;
  line-height: 1.35;
  letter-spacing: -0.025em;
}

.capability-list p {
  color: var(--ink-mute);
  line-height: 1.8;
  font-size: 16px;
  max-width: 660px;
}

/* The shared-context diagram */

.context-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: calc(var(--space-8) * 2.5);
  align-items: center;
}

.context-copy p:not(.band-eyebrow) {
  margin-top: var(--space-6);
  color: var(--ink-mute);
  line-height: 1.8;
  max-width: 470px;
}

.context-map {
  position: relative;
  height: 350px;
  min-width: 0;
}

.map-connections {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #43536a;
  stroke-width: 1;
}

.map-center-line {
  stroke: #798ca5;
}

.map-node {
  position: absolute;
  width: 43%;
  max-width: 204px;
  padding: var(--space-4) 19px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

.map-node .icon {
  width: 18px;
  height: 18px;
  color: var(--ink-mute);
  margin-bottom: 11px;
}

.map-node strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
}

.map-node span {
  display: block;
  color: var(--ink-mute);
  font-size: 12.5px;
  margin-top: 3px;
}

.map-threat {
  left: 0;
  top: 0;
}

.map-systems {
  right: 0;
  top: 0;
}

.map-people {
  left: 0;
  bottom: 0;
}

.map-business {
  right: 0;
  bottom: 0;
}

.map-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 156px;
  height: 61px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  box-shadow: var(--glow);
}

.map-center .mark {
  width: 30px;
  height: 30px;
  color: var(--accent);
}

.map-center span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 29px;
  letter-spacing: -0.05em;
}

/* Reveals, switched on by landing.js only when motion is welcome */

.motion-enabled [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 480ms var(--ease) var(--reveal-delay, 0ms), transform 480ms var(--ease) var(--reveal-delay, 0ms);
}

.motion-enabled [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

.motion-enabled .context-map .map-connections path {
  stroke-dasharray: 750;
  stroke-dashoffset: 750;
  transition: stroke-dashoffset 1200ms var(--ease) 180ms;
}

.motion-enabled .context-map.is-revealed .map-connections path {
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .film-live [data-at] {
    transition: none !important;
  }
}

@media (max-width: 1100px) {
  .section-heading {
    gap: calc(var(--space-8) * 2);
  }

  .context-grid {
    gap: 50px;
  }

  .capability-list article {
    grid-template-columns: 36px minmax(185px, 0.8fr) minmax(0, 1.4fr);
    gap: 25px;
  }
}

@media (max-width: 900px) {
  .film-stage {
    grid-template-columns: minmax(0, 1fr);
  }

  .film-graph {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

}

@media (max-width: 800px) {
  .hero-bottom {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-6);
  }

  .hero-raven {
    width: 80%;
    right: 0;
    top: calc(50px + var(--nav-height));
    opacity: 0.45;
  }

  .band-section {
    padding-top: calc(var(--space-8) * 2.5);
  }

  .section-heading,
  .context-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .section-heading {
    margin-bottom: 38px;
  }

  .capability-list article {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: var(--space-2) var(--space-5);
    padding: 23px 0;
  }

  .capability-list p {
    grid-column: 2;
  }

  .capability-list h3 {
    font-size: 23px;
  }

  .context-map {
    width: min(560px, 100%);
    justify-self: center;
  }

}

@media (max-width: 620px) {
  .landing-hero {
    padding-bottom: calc(var(--space-8) * 1.5);
  }

  .hero-raven {
    width: 100%;
    top: calc(72px + var(--nav-height));
  }

  .odin-band {
    padding-bottom: 220px;
  }


  .film-context {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3);
    font-size: 11px;
  }

  .film-context {
    flex-wrap: wrap;
    row-gap: var(--space-1);
  }

  .film-context-note {
    flex-basis: 100%;
    margin-left: 0;
  }

  .film-graph {
    padding: var(--space-2);
  }

  .film-graph-svg .g-name {
    font-size: 24px;
    stroke-width: 9px;
  }

  .film-graph-svg .g-sub,
  .film-graph-svg .g-flag,
  .film-graph-svg .g-pill,
  .film-graph-svg .g-legend {
    display: none;
  }

  .film-rail {
    padding: var(--space-5) var(--space-4);
  }

  .film-transport {
    padding: var(--space-4) var(--space-3) 10px;
  }

  .film-chapters {
    gap: 5px;
  }

  .film-chapters li {
    font-size: 10px;
    gap: 3px;
  }

  .film-chapters button > span,
  .film-caption {
    display: none;
  }

  .film-time {
    margin-left: auto;
  }

  .capability-list article {
    grid-template-columns: 25px 1fr;
    gap: var(--space-2) var(--space-3);
  }

  .capability-list p {
    font-size: 15px;
  }

  .context-map {
    height: 335px;
  }

  .map-node {
    padding: 14px 11px;
    width: 45%;
  }

  .map-node strong {
    font-size: 13px;
  }

  .map-center {
    width: 112px;
    height: 53px;
  }

  .map-center span {
    font-size: 26px;
  }

  .map-center .mark {
    width: 25px;
    height: 25px;
  }
}

/* Sections */

.section {
  padding: var(--space-8) 0;
  border-top: 1px solid var(--line);
}

.section h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 3vw, 32px);
  margin-bottom: var(--space-6);
}

/* Differentiators */

/* Pulled up into the product band's fade back to the light ground, so
   the heading starts while the ground is still turning; no rule here. */
.differentiators {
  position: relative;
  border-top: 0;
  margin-top: -120px;
}

@media (max-width: 720px) {
  .differentiators {
    margin-top: -80px;
  }
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: var(--space-5);
}

.card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  margin-bottom: var(--space-3);
}

.card p {
  color: var(--ink-mute);
  font-size: 15px;
  line-height: 1.6;
}

/* One quiet accent bloom, not every card — restraint is the point. */
.card--accent {
  position: relative;
  border: 1px solid rgba(240, 122, 41, 0.2);
  background-color: var(--surface);
  background-image: radial-gradient(ellipse 90% 70% at 100% 0%, rgba(240, 122, 41, 0.08), transparent 65%);
  box-shadow: var(--card-shadow), 0 0 50px -24px rgba(240, 122, 41, 0.4);
}

.card-link {
  display: inline-block;
  margin-top: var(--space-3);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

.card-link:hover {
  text-decoration: underline;
}

/* Pilot */

.pilot-card {
  position: relative;
  max-width: 760px;
  padding: var(--space-8);
  background-color: var(--surface);
  background-image: radial-gradient(ellipse 70% 90% at 0% 0%, rgba(240, 122, 41, 0.09), transparent 60%);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}

.pilot-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: var(--space-3);
}

.pilot-text {
  color: var(--ink-mute);
  font-size: 17px;
  line-height: 1.7;
  max-width: 60ch;
  margin: var(--space-4) 0 var(--space-5);
}

.pilot-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  color: var(--accent-ink);
  text-decoration: none;
}

.pilot-link:hover {
  text-decoration: underline;
}

.pilot-link .icon {
  width: 18px;
  height: 18px;
}

@media (max-width: 620px) {
  .pilot-card {
    padding: var(--space-6) var(--space-5);
  }
}

/* Contact */

/* Full-viewport-tall: not decorative, load-bearing. #contact is the last
   section before a short footer, so without this there usually isn't
   enough page left below it for the browser to ever scroll its top edge
   up to the viewport top — "Talk to us" would jump as far as it could
   and stall partway down instead of landing the heading at the top. */
.contact {
  min-height: 100dvh;
}

.contact-lede {
  color: var(--ink-mute);
  margin-bottom: var(--space-6);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact-form[aria-busy="true"] button[type="submit"] {
  cursor: progress;
  opacity: 0.6;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-mute);
}

.field input,
.field textarea {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 1px;
}

.field textarea {
  resize: vertical;
}

/* A field only bots fill in: off screen rather than display: none, which
   some of them check for. */
.field-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form .button-primary {
  align-self: flex-start;
  margin-top: var(--space-2);
}

.contact-form .button-primary:disabled {
  opacity: 0.6;
  cursor: progress;
}

.contact-privacy {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-mute);
  max-width: 60ch;
}

.contact-privacy a,
.chat-bubble a {
  color: var(--accent-ink);
}

/* The answer to the form, as Odin answers an act: a toast (its glass card,
   in the light ground) when it went through, the amber of a degraded state
   when it did not. Nothing about it may read as one more field. */
.chat-bubble {
  display: none;
  position: relative;
  margin-top: var(--space-5);
  max-width: 46ch;
  padding: 14px 18px 14px 48px;
  background: #fbfaf7;
  border: 1px solid rgba(28, 27, 24, 0.08);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px -12px rgba(28, 27, 24, 0.22), 0 2px 6px rgba(28, 27, 24, 0.06);
  font-size: 15px;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}

.chat-bubble::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 15px;
  width: 20px;
  height: 20px;
  background: var(--ok);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.chat-bubble:focus {
  outline: none;
}

.chat-bubble-failed {
  background: #f6ecd6;
  border-color: rgba(156, 107, 18, 0.28);
  box-shadow: none;
}

.chat-bubble-failed::before {
  background: var(--warn);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
}

/* :target is the answer when the form was posted without the script and
   the server redirected back to #contact-sent or #contact-failed. */
.chat-bubble.chat-bubble-shown,
.chat-bubble:target {
  display: block;
}

.chat-bubble.chat-bubble-visible,
.chat-bubble:target {
  opacity: 1;
  transform: none;
}

/* Footer */

.footer {
  border-top: 1px solid var(--line);
  padding: var(--space-6) 0;
}

.footer-inner {
  text-align: center;
}

.footer-tagline {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink-mute);
  margin-bottom: var(--space-1);
}

.footer-legal {
  font-size: 13px;
  color: var(--ink-faint);
}

/* Team page */

/* Reuses the landing page's hero furniture — same bloom, same type scale —
   minus the mark and the ember canvas. This page's subject is the two
   people, so nothing should compete with the headline. */
.page-hero h1 {
  max-width: 22ch;
}

/* Only for headings the page doesn't need to show but the outline does need
   (h1 -> h2 -> h3), so the bios don't hang off the h1 with a level skipped. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Bios are separated by space alone, no rule: the only hairline in this
   section belongs to the credentials block inside a bio, and a second one
   between bios would make the two reads compete. */
.bios .section-inner {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-8) * 2);
}

.bio {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: var(--space-6);
  align-items: start;
}

/* The photo slot. Fixed width, fixed 1:1 box, its own ground: a real
   photograph dropped in later fills exactly this space and nothing below it
   moves. Until then the box holds a monogram rather than a grey silhouette
   or an empty frame, so the placeholder reads as a choice, not a 404. */
.bio-portrait {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background-color: var(--surface);
  background-image: radial-gradient(ellipse 90% 90% at 50% 0%, rgba(240, 122, 41, 0.1), transparent 70%);
  box-shadow: var(--card-shadow);
}

.bio-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bio-initials {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 40px;
  letter-spacing: 0.04em;
  color: var(--accent-ink);
  opacity: 0.55;
}

/* .bio-body p below outranks a bare .bio-role, so the label rules are
   written against the parent too rather than leaning on source order,
   which wouldn't win against it. */
.bio-body .bio-role,
.bio-body .bio-facts-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}

.bio-body .bio-role {
  margin-bottom: var(--space-1);
}

.bio-body .bio-facts-label {
  margin-bottom: var(--space-3);
}

.bio-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  margin-bottom: var(--space-4);
}

.bio-body p {
  color: var(--ink-mute);
  font-size: 15px;
  line-height: 1.6;
  max-width: 62ch;
}

.bio-body p + p {
  margin-top: var(--space-3);
}

.bio-facts {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
}

.chip {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--accent-ink);
  background: var(--accent-bg);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
}

.team-close-body {
  color: var(--ink-mute);
  font-size: 15px;
  line-height: 1.6;
  max-width: 62ch;
  margin-bottom: var(--space-4);
}

.team-close .button-primary {
  margin-top: var(--space-2);
}

@media (max-width: 720px) {
  .card-grid {
    grid-template-columns: 1fr;
  }

  /* The nav keeps its links on a phone. They were hidden when the landing
     page was the whole site and Team was the only one, so the group cost
     nothing; with /blog and /team both living there, hiding it left the
     two interior pages unreachable from the nav on the viewport most
     visitors arrive on. Measured at 320px, the narrowest phone worth
     caring about, the row still fits once the gap tightens. */
  .nav-inner {
    gap: var(--space-4);
  }

  .nav-links {
    gap: var(--space-4);
  }

  /* The CTA is the one element that may not be squeezed to fit. */
  .nav .button-small {
    flex: none;
  }
}

/* Below ~360px the row needs the side gutter back to clear the CTA; the
   page's own gutter stays where it is, so only the nav tightens. */
@media (max-width: 400px) {
  .nav-inner {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .hero {
    padding: calc(var(--space-8) + var(--nav-height)) 0 var(--space-8);
  }

  /* One column, and a smaller square: a full-width portrait would be an
     enormous empty box on a phone. The 1:1 slot is kept, so a photo still
     drops in without the layout shifting. */
  .bio {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .bio-portrait {
    width: 104px;
  }

  .bio-initials {
    font-size: 28px;
  }
}

/* Blog
   ---------------------------------------------------------------------
   Two surfaces: the index (a list of rows, not a card grid — the landing
   page already owns cards, and a list of titles is what a reader scans)
   and the post itself, which is the first long-form page on the site and
   so the first one where measure, leading and heading rhythm do real
   work. Everything below shares the landing page's nav, footer, tokens
   and type stack; nothing here is a parallel design. */

/* The index's header: the hero's vocabulary — bloom, eyebrow, lede — at a
   lower volume. This is a doorway, not a pitch. */

.page-header {
  position: relative;
  overflow: hidden;
  padding: calc(var(--space-8) * 1.5 + var(--nav-height)) 0 var(--space-8);
  border-bottom: 1px solid var(--line);
}

.page-header-bloom {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 75% at 10% 0%, rgba(240, 122, 41, 0.13), transparent 65%);
}

.page-header .section-inner {
  position: relative;
  z-index: 1;
}

.page-header h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.1;
  margin-bottom: var(--space-4);
}

.blog-index {
  padding: var(--space-6) 0 calc(var(--space-8) * 2);
}

.blog-empty {
  color: var(--ink-mute);
  max-width: var(--measure);
  padding: var(--space-8) 0;
}

.blog-empty code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* One row per post. The whole row is the link — a title-only hit target
   makes a reader aim, and there is nothing else in the row to click. */

.post-index {
  list-style: none;
}

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

.post-index-link {
  display: block;
  padding: var(--space-6) 0;
  color: inherit;
  text-decoration: none;
}

.post-index-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--space-3);
}

.post-index-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.22;
  max-width: 30ch;
  margin-bottom: var(--space-3);
  transition: color var(--t-fast) var(--ease);
}

.post-index-summary {
  color: var(--ink-mute);
  font-size: 16px;
  line-height: 1.65;
  max-width: var(--measure);
  margin-bottom: var(--space-3);
}

/* Always visible rather than revealed on hover: on a touch screen there is
   no hover, and an affordance nobody can trigger is decoration. */
.post-index-more {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-ink);
  transition: transform var(--t-fast) var(--ease);
}

.post-index-link:hover .post-index-title {
  color: var(--accent-ink);
}

.post-index-link:hover .post-index-more {
  transform: translateX(3px);
}

/* The post itself */

.post-main {
  padding: calc(var(--space-8) * 1.5 + var(--nav-height)) 0 calc(var(--space-8) * 2);
}

/* The measure plus its gutters: max-width is border-box here, so the
   padding has to be added back or the column comes out narrow. */
.post {
  max-width: calc(var(--measure) + var(--space-6) * 2);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.post-kicker {
  font-size: 14px;
  margin-bottom: var(--space-5);
}

.post-kicker a {
  color: var(--ink-mute);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

.post-kicker a:hover {
  color: var(--accent-ink);
}

.post-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-4);
}

.post-byline {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--space-5);
}

/* The standfirst is the bridge from title to body: one size up from the
   body, quieter ink, and a rule under it that says the article proper
   starts here. */
.post-standfirst {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-mute);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--line);
  margin-bottom: calc(var(--space-8) * 1.25);
}

.post-body {
  font-size: 18px;
  line-height: 1.75;
}

/* Vertical rhythm in em, so each block's spacing scales with its own type
   size: a heading's gap above grows with the heading, and stays in
   proportion when the body shrinks on a phone. */

.post-body p {
  margin-bottom: 1.15em;
}

.post-body h2,
.post-body h3,
.post-body h4,
.post-body h5,
.post-body h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  scroll-margin-top: var(--space-6);
}

.post-body h2 {
  font-size: 27px;
  margin: 2.1em 0 0.55em;
}

.post-body h3 {
  font-size: 21px;
  margin: 1.9em 0 0.5em;
}

.post-body h4,
.post-body h5,
.post-body h6 {
  font-size: 18px;
  margin: 1.8em 0 0.5em;
}

.post-body ul,
.post-body ol {
  margin: 0 0 1.15em 1.3em;
}

.post-body li {
  margin-bottom: 0.45em;
}

.post-body li::marker {
  color: var(--ink-faint);
}

.post-body a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(240, 122, 41, 0.45);
  transition: text-decoration-color var(--t-fast) var(--ease);
}

.post-body a:hover {
  text-decoration-color: var(--accent);
}

.post-body strong {
  font-weight: 600;
}

.post-body code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.12em 0.36em;
}

/* Code is the one block allowed to be wider than the measure — it scrolls
   itself rather than making the page scroll. */
.post-code {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.65;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: var(--space-5);
  margin: 1.6em 0;
  overflow-x: auto;
}

.post-code code {
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
}

.post-quote {
  border-left: 3px solid var(--accent);
  padding-left: var(--space-5);
  margin: 1.7em 0;
  color: var(--ink-mute);
}

.post-quote p:last-child {
  margin-bottom: 0;
}

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

.post-figure {
  margin: 2.4em 0;
}

/* Images carry width/height from the content manifest, so the browser
   works their box out before the file lands. A video's frame size isn't in
   its header the same way, so it gets a declared ratio instead — otherwise
   it occupies the 300x150 default until metadata arrives and shoves the
   rest of the post down. A clip that isn't 16:9 letterboxes inside it,
   which is the behaviour <video> already has. */
.post-video {
  aspect-ratio: 16 / 9;
}

.post-image,
.post-video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--card-shadow);
  background: var(--surface-2);
}

.post-figure figcaption {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-mute);
  max-width: var(--measure);
}

/* Above desktop widths a figure steps outside the measure, so an
   illustration reads as an illustration rather than as an oversized
   paragraph. Capped against the viewport so it can never be the thing
   that makes the page scroll sideways. */
@media (min-width: 900px) {
  .post-figure {
    width: min(880px, calc(100vw - var(--space-8) * 2));
    margin-left: 50%;
    transform: translateX(-50%);
  }

  .post-figure figcaption {
    max-width: var(--measure);
    margin-left: auto;
    margin-right: auto;
  }
}

.post-footer {
  margin-top: calc(var(--space-8) * 1.5);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.post-footer-link {
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}

.post-footer-link:hover {
  text-decoration: underline;
}

@media (max-width: 720px) {
  .page-header {
    padding: calc(var(--space-8) + var(--nav-height)) 0 var(--space-6);
  }

  .post-main {
    padding: calc(var(--space-8) + var(--nav-height)) 0 calc(var(--space-8) * 1.5);
  }

  .post-body {
    font-size: 17px;
    line-height: 1.7;
  }

  .post-standfirst {
    font-size: 17px;
  }

  .post-body h2 {
    font-size: 23px;
  }

  .post-body h3 {
    font-size: 19px;
  }

  .post-code {
    font-size: 13px;
    padding: var(--space-4);
  }

  .post-index-link {
    padding: var(--space-5) 0;
  }
}