:root {
      --background: #151514; /* Lighter alternative: #181817 */
      --text-primary: #e2e0d8;
      --text-secondary: #b9b7af;
      --text-tertiary: #96948d;
      --rule: #30302d;
      --accent: #6ba6d7;
      --field-blue: #315f78;
      --field-clay: #9b5845;
      --field-ochre: #a27635;
      --field-light: #dedbd1;
      --ink-on-light: #1b1b19;
      --bar-height: 3.25rem;
      --section-space: clamp(6rem, 14vh, 10rem);
      --prose-width: 36rem;
      --phone-width: 360px;
      --column-gap: clamp(3rem, 7vw, 8rem);
      --page-pad: clamp(1.25rem, 4vw, 4rem);
      --first-media-lift: clamp(3rem, 8vh, 5rem);
      --page-width: calc(var(--prose-width) + var(--phone-width) + var(--column-gap) + (var(--page-pad) * 2));
      --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    }

    * { box-sizing: border-box; }
    html {
      color-scheme: dark;
      scroll-behavior: auto;
      scroll-snap-type: none;
      overscroll-behavior-y: none;
    }
    body {
      margin: 0;
      background: var(--background);
      color: var(--text-primary);
      font-family: var(--sans);
      font-size: clamp(1.0625rem, .25vw + 1rem, 1.1875rem);
      font-weight: 400;
      line-height: 1.55;
      font-kerning: normal;
      font-variant-ligatures: common-ligatures;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      overscroll-behavior-y: none;
    }

    ::selection { background: rgb(107 166 215 / 28%); }
    :focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
    a { color: var(--text-primary); text-underline-offset: .2em; }
    a:hover, a:focus-visible { color: var(--accent); }
    h1, h2, p, figure { margin: 0; }
    h1, h2 { font-weight: 560; text-wrap: balance; }
    p { text-wrap: pretty; hanging-punctuation: first last; }

    .topbar {
      position: fixed;
      inset: 0 0 auto;
      z-index: 50;
      height: var(--bar-height);
      display: flex;
      align-items: center;
      padding-inline: var(--page-pad);
      background: var(--background);
    }

    .breadcrumb {
      color: var(--text-secondary);
      font-size: .875rem;
      line-height: 1;
      text-decoration: none;
    }
    .breadcrumb span { color: var(--text-tertiary); }

    main {
      width: min(100%, var(--page-width));
      margin-inline: auto;
      padding: calc(var(--bar-height) + clamp(3rem, 8vh, 6rem)) var(--page-pad) 5rem;
    }

    .hero { padding-bottom: var(--section-space); }
    .hero-inner {
      display: grid;
      grid-template-columns: minmax(0, var(--prose-width)) minmax(22rem, 1fr);
      gap: var(--column-gap);
      align-items: center;
      min-height: 49rem;
    }
    .hero-copy { min-width: 0; }
    h1 {
      max-width: 13ch;
      font-size: clamp(2.75rem, 4.5vw, 4.5rem);
      line-height: 1.07;
      letter-spacing: -.025em;
    }
    .standfirst {
      margin-top: 1.5rem;
      color: var(--text-primary);
      font-size: clamp(1.125rem, .45vw + 1rem, 1.35rem);
      line-height: 1.48;
    }

    .hero-gallery {
      position: relative;
      width: 100%;
      height: clamp(42rem, 54vw, 49rem);
      margin: 0;
      isolation: isolate;
      cursor: pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      -webkit-user-select: none;
      user-select: none;
    }
    .hero-gallery.is-handoff {
      z-index: 40;
      pointer-events: none;
    }
    .hero-gallery.is-handoff .hero-card:first-child {
      pointer-events: auto;
      cursor: pointer;
    }
    .hero-gallery.is-handoff .hero-card {
      transition:
        transform 500ms cubic-bezier(.16, 1, .3, 1),
        box-shadow 500ms cubic-bezier(.16, 1, .3, 1),
        filter 350ms ease;
      transition-delay: 0ms;
    }
    .hero-card {
      --x: 0rem;
      --y: 0rem;
      --r: 0deg;
      --s: 1;
      --stack-position: var(--i);
      --fan-x: 0rem;
      --hover-x: 0rem;
      --focus-y: 0rem;
      --focus-scale: 1;
      position: absolute;
      top: 50%;
      left: 50%;
      width: var(--phone-width);
      aspect-ratio: 1206 / 2622;
      overflow: hidden;
      border: 1px solid var(--rule);
      border-radius: 0;
      background: #090909;
      box-shadow: none;
      translate: 0 var(--focus-y);
      scale: var(--focus-scale);
      transform: translate(-50%, -50%) translate(var(--x), var(--y)) translateX(var(--hover-x)) rotate(var(--r)) scale(var(--s));
      transform-origin: center;
      transition:
        transform 1250ms cubic-bezier(.16, 1, .3, 1),
        translate 620ms cubic-bezier(.16, 1, .3, 1),
        scale 620ms cubic-bezier(.16, 1, .3, 1),
        box-shadow 600ms cubic-bezier(.16, 1, .3, 1);
      transition-delay:
        calc(var(--stack-position) * 55ms),
        0ms,
        0ms,
        0ms;
      will-change: transform, translate, scale;
    }
    .hero-card::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: rgb(0 0 0 / 25%);
      opacity: 0;
      transition: opacity 420ms cubic-bezier(.16, 1, .3, 1);
    }
    .hero-card img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .hero-card video {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .hero-card img,
    .hero-card video {
      -webkit-user-drag: none;
      user-select: none;
    }
    .hero-card:nth-child(1) { --x: -.75rem; --y: -.75rem; --r: 0deg; z-index: 3; }
    .hero-card:nth-child(2) { --x: 0rem; --y: 0rem; --r: 0deg; z-index: 2; }
    .hero-card:nth-child(3) { --x: .75rem; --y: .75rem; --r: 0deg; z-index: 1; }

    @media (hover: hover) and (pointer: fine) and (min-width: 921px) {
      .hero-gallery:not(.is-handoff):hover .hero-card { --hover-x: var(--fan-x); }
      .hero-gallery:not(.is-handoff).has-preview .hero-card:not(.is-previewed) {
        --focus-scale: .985;
      }
      .hero-gallery:not(.is-handoff).has-preview .hero-card:not(.is-previewed)::after { opacity: 1; }
      .hero-gallery:not(.is-handoff) .hero-card.is-previewed {
        --focus-y: -.65rem;
        --focus-scale: 1.015;
        z-index: 10 !important;
        box-shadow: 0 1.25rem 3rem rgb(0 0 0 / 24%);
      }
    }

    .case-grid {
      display: grid;
      grid-template-columns: minmax(0, var(--prose-width)) var(--phone-width);
      gap: var(--column-gap);
      align-items: start;
      justify-content: center;
    }
    .story { min-width: 0; }
    .chapter {
      padding-bottom: var(--section-space);
      scroll-margin-top: calc(var(--bar-height) + 1.5rem);
    }
    h2 {
      max-width: 22ch;
      font-size: clamp(2rem, 2.4vw, 2.625rem);
      line-height: 1.12;
      letter-spacing: -.018em;
    }
    .chapter-copy { margin-top: 1.5rem; }
    .chapter-copy > * + * { margin-top: .9em; }
    .chapter-copy p { color: var(--text-primary); }
    .chapter-copy .decision { color: var(--text-primary); }
    .chapter-copy .cue {
      margin-top: 1.7rem;
      color: var(--text-primary);
    }
    .chapter-copy .tradeoff {
      margin-top: 1.7rem;
      color: var(--text-primary);
      font-size: .95em;
    }

    .media-rail {
      width: var(--phone-width);
      align-self: stretch;
      margin-top: var(--first-media-offset, 0px);
      margin-bottom: var(--last-media-offset, 0px);
    }
    .media-stage {
      position: sticky;
      /* The full-height rail supplies the start and end boundaries: the
         first video rests at its top, the middle videos stay centred, and
         the final video comes to rest at its bottom. */
      top: max(
        calc(var(--bar-height) + 1.5rem),
        calc(50svh - (var(--stage-height, 693px) / 2))
      );
      width: var(--phone-width);
    }
    .stage-viewport {
      position: relative;
      width: var(--phone-width);
      /* Fallback until the active asset reports its native dimensions. */
      aspect-ratio: 9 / 16;
      border: 1px solid var(--rule);
      overflow: hidden;
      transition: opacity 180ms ease;
    }
    .stage-media,
    .mobile-media-inner {
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;
      overflow: hidden;
    }
    .stage-media img,
    .stage-media video,
    .mobile-media-inner img,
    .mobile-media-inner video {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .stage-media video,
    .mobile-media-inner video { cursor: pointer; }
    .stage-placeholder,
    .mobile-placeholder {
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;
      padding: 2rem;
      background: #191918;
      color: var(--text-tertiary);
      text-align: center;
    }
    .placeholder-index {
      display: block;
      color: var(--text-secondary);
      font-size: 2rem;
      line-height: 1;
    }
    .placeholder-name { display: block; margin-top: .75rem; font-size: .875rem; }
    .stage-meta {
      margin-top: .75rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      transition: opacity 180ms ease;
    }
    .media-stage.hero-owned:not(.video-started) .stage-meta {
      opacity: 0;
      pointer-events: none;
    }
    .media-stage.hero-owned .stage-meta {
      position: fixed;
      top: var(--hero-meta-top);
      left: var(--hero-meta-left);
      z-index: 50;
      width: var(--hero-meta-width);
      margin-top: 0;
    }
    .stage-count {
      color: var(--accent);
      font-family: var(--mono);
      font-size: .75rem;
      line-height: 1.4;
      font-variant-numeric: tabular-nums;
    }
    .seek-controls {
      display: flex;
      gap: .35rem;
    }
    .seek-controls[hidden] { display: none; }
    .seek-button {
      width: 1.75rem;
      height: 1.35rem;
      padding: 0;
      border: 1px solid var(--rule);
      border-radius: 2px;
      background: transparent;
      color: var(--text-secondary);
      font: .75rem/1 var(--mono);
      cursor: pointer;
    }
    .seek-button:hover,
    .seek-button:focus-visible {
      border-color: var(--accent);
      color: var(--accent);
    }
    .mobile-media { display: none; }

    .closing {
      max-width: var(--prose-width);
    }
    .closing p { margin-top: .9em; color: var(--text-primary); }
    footer {
      display: flex;
      justify-content: space-between;
      gap: 2rem;
      margin-top: 6rem;
      padding-top: 1.25rem;
      border-top: 1px solid var(--rule);
      color: var(--text-tertiary);
      font-size: .875rem;
    }

    @media (max-width: 1060px) {
      :root { --prose-width: 32rem; --column-gap: 3rem; }
    }

    @media (max-width: 920px) {
      :root {
        --bar-height: 3rem;
        --section-space: clamp(4rem, 10vh, 6rem);
      }
      main { padding-top: calc(var(--bar-height) + 3rem); }
      .hero-inner { display: block; min-height: 0; }
      .hero-gallery {
        width: min(100%, 28rem);
        height: 49rem;
        margin: 3.5rem auto 0;
        transform: none;
      }
      .case-grid { display: block; }
      .media-rail { display: none; }
      .mobile-media {
        display: block;
        width: min(100%, var(--phone-width));
        margin: 1.75rem auto .25rem;
        aspect-ratio: 9 / 16;
        border: 1px solid var(--rule);
        overflow: hidden;
        contain: layout paint;
      }
      .mobile-media-inner video { transform: translateZ(0); }
      .stage-count { display: none; }
    }

    @media (max-width: 430px) {
      :root { --section-space: 3.5rem; }
      main { padding-bottom: 3rem; }
      footer { display: block; }
      footer p + p { margin-top: .4rem; }
      .hero-gallery { height: 46rem; }
      .hero-card { width: min(var(--phone-width), 78vw); }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
      .hero-gallery { cursor: default; }
    }

/* Homepage --------------------------------------------------------------- */
.landing-page {
  width: auto;
  max-width: calc(58ch + 2.5rem);
  min-height: 100svh;
  margin-inline: auto;
  padding: 3rem 1.25rem 6rem;
}

.landing-page h1 {
  max-width: none;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.015em;
}

.landing-tree {
  margin-top: 3.5rem;
}

.landing-tree h2 {
  max-width: none;
  color: var(--text-primary);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.01em;
}

.landing-tree h2:not(:first-child) {
  margin-top: 2.25rem;
}

.landing-tree a {
  display: block;
  margin-top: .5rem;
  color: var(--text-secondary);
  font-size: 1.125rem;
  line-height: 1.5;
  text-decoration: underline;
}

.landing-tree a:hover,
.landing-tree a:focus-visible {
  color: var(--accent);
}

@media (max-width: 640px) {
  .landing-page {
    padding-top: 2.5rem;
    padding-bottom: 4rem;
  }
}

.page-column {
  width: min(calc(100% - 2.5rem), 42rem);
  margin-inline: auto;
}

.home-page {
  background: var(--background);
}

.site-header {
  display: flex;
  align-items: center;
  min-height: 5.5rem;
}

.site-name,
.section-label,
.eyebrow,
.work-role,
.contact-links {
  font-size: .875rem;
}

.site-name {
  color: var(--text-secondary);
  text-decoration: none;
}

.home-page main {
  width: 100%;
  margin: 0;
  padding: 0;
}

.home-intro {
  padding-block: clamp(6rem, 16vh, 11rem) clamp(8rem, 18vh, 13rem);
}

.eyebrow,
.section-label,
.work-role {
  color: var(--text-tertiary);
  letter-spacing: .01em;
}

.home-intro h1 {
  max-width: 8.7ch;
  margin-top: 1.5rem;
  font-size: clamp(3.25rem, 9vw, 6.7rem);
  font-weight: 540;
  line-height: .96;
  letter-spacing: -.045em;
}

.home-intro h1 span {
  color: var(--accent);
}

.intro-note {
  max-width: 31rem;
  margin-top: 2.25rem;
  color: var(--text-secondary);
  font-size: clamp(1.1rem, 1vw + .9rem, 1.35rem);
  line-height: 1.5;
}

.focus {
  padding-bottom: clamp(8rem, 19vh, 13rem);
}

.focus-copy {
  max-width: 31rem;
  margin-top: 1.25rem;
  font-size: clamp(1.5rem, 2.2vw, 2.2rem);
  line-height: 1.28;
  letter-spacing: -.018em;
}

.work-feature {
  padding-block: clamp(5rem, 10vw, 8rem);
  overflow: hidden;
  background: var(--field-blue);
  color: #f2f0e9;
}

.work-copy h2 {
  margin-top: 1.25rem;
  max-width: none;
  font-size: clamp(4rem, 12vw, 7.5rem);
  line-height: .9;
  letter-spacing: -.05em;
}

.work-premise {
  max-width: 33rem;
  margin-top: 2rem;
  font-size: clamp(1.35rem, 1.8vw, 1.75rem);
  line-height: 1.38;
}

.work-role {
  margin-top: 1rem;
  color: rgb(255 255 255 / 68%);
}

.work-media {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.6rem, 2vw, 1.4rem);
  width: min(calc(100% - 2.5rem), 52rem);
  margin: clamp(3.5rem, 8vw, 6rem) auto 3rem;
  text-decoration: none;
}

.work-media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgb(255 255 255 / 16%);
  background: #10100f;
}

.work-media img:nth-child(2) { transform: translateY(-1.5rem); }

.text-link {
  display: inline-block;
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  text-underline-offset: .35em;
}

.home-ending {
  background: var(--field-light);
  color: var(--ink-on-light);
}

.ending-inner {
  padding-block: clamp(6rem, 14vw, 10rem) 2rem;
}

.ending-statement {
  max-width: 12ch;
  font-size: clamp(2.75rem, 7vw, 5rem);
  font-weight: 520;
  line-height: 1;
  letter-spacing: -.04em;
}

.contact-links {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  margin-top: clamp(8rem, 18vw, 14rem);
  color: #55544f;
}

.contact-links a { color: var(--ink-on-light); }

@media (max-width: 560px) {
  .page-column { width: min(calc(100% - 2rem), 42rem); }
  .site-header { min-height: 4.5rem; }
  .home-intro { padding-top: 5rem; }
  .work-media { width: calc(100% - 1.5rem); gap: .4rem; }
  .work-media img:nth-child(2) { transform: translateY(-.75rem); }
  .contact-links { display: block; }
  .contact-links a { display: inline-block; margin-top: .65rem; }
}

/* Writing ---------------------------------------------------------------- */
.article-page {
  background: var(--background);
}

.article-page a:hover,
.article-page a:focus-visible {
  color: var(--text-primary);
}

.article-page :focus-visible {
  outline-color: var(--text-tertiary);
}

.article-main {
  width: 100%;
  margin: 0;
  padding: 0;
}

.article-heading {
  padding-block: calc(var(--bar-height) + clamp(4rem, 10vh, 7rem)) clamp(3.5rem, 8vh, 5rem);
}

.article-meta {
  margin-top: 1.25rem;
  color: var(--text-tertiary);
  font-size: .875rem;
  letter-spacing: .01em;
}

.article-heading h1 {
  max-width: 15ch;
  font-size: clamp(2.75rem, 6vw, 4.75rem);
  font-weight: 540;
  line-height: 1;
  letter-spacing: -.04em;
}

.reading-column {
  width: min(calc(100% - 2.5rem), 44rem);
  margin-inline: auto;
}

.article-body {
  color: var(--text-primary);
  padding-bottom: clamp(7rem, 14vh, 10rem);
}

.article-body > * + * { margin-top: 1.45em; }

.article-body p {
  font-size: clamp(1.08rem, .35vw + 1rem, 1.2rem);
  line-height: 1.68;
}

.article-body h2 {
  max-width: 18ch;
  margin-top: 3.2em;
  font-size: clamp(2rem, 3vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -.025em;
}

.article-body blockquote {
  margin: 3.5rem 0;
  padding-left: 1.35rem;
  border-left: 2px solid var(--rule);
}

.article-body hr {
  margin-block: 4rem;
  border: 0;
  border-top: 1px solid var(--rule);
}

.article-footer {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  width: min(calc(100% - 2.5rem), 48rem);
  padding-block: 2rem 4rem;
  border-top: 1px solid var(--rule);
  color: var(--text-tertiary);
  font-size: .875rem;
}

.article-footer a { color: var(--text-secondary); }

@media (max-width: 560px) {
  .article-heading {
    padding-top: calc(var(--bar-height) + 4.5rem);
  }
  .article-heading h1 { font-size: clamp(2.75rem, 14vw, 4rem); }
  .reading-column { width: min(calc(100% - 2rem), 44rem); }
}