:root {
        --ink: #111;
        --paper: #fff;
        --warm: #f4f1eb;
        --signal: #e34a31;
        --rule: #c8c5bf;
        --serif: Didot, "Bodoni 72", "Times New Roman", serif;
        --sans: Arial, Helvetica, sans-serif;
      }

      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); }
      img { display: block; width: 100%; }
      a { color: inherit; }
      :focus-visible { outline: 3px solid var(--signal); outline-offset: 4px; }
      .skip { position: fixed; left: 1rem; top: -5rem; z-index: 20; padding: .8rem 1rem; background: var(--ink); color: #fff; font: 700 .75rem/1 var(--sans); }
      .skip:focus { top: 1rem; }
      .shell { width: min(calc(100% - 4rem), 88rem); margin: 0 auto; }

      .masthead {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 2rem;
        padding: 1.2rem 0;
        border-bottom: 1px solid var(--ink);
      }
      .brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
      .brand-mark { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--signal); color: #fff; font: 300 2.15rem/.8 var(--serif); letter-spacing: -.08em; }
      .brand-name { font: 300 1.55rem/.9 var(--serif); letter-spacing: .04em; }
      .nav { display: flex; gap: 1.3rem; align-items: center; }
      .nav a { font: 700 .68rem/1 var(--sans); letter-spacing: .15em; text-decoration: none; text-transform: uppercase; }
      .nav a:hover { color: var(--signal); }

      .story-header { max-width: 72rem; margin: 0 auto; padding: clamp(3.5rem, 8vw, 7.5rem) 0 clamp(2.5rem, 6vw, 5rem); text-align: center; }
      .eyebrow { margin: 0 0 1.25rem; color: var(--signal); font: 700 .72rem/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
      h1 { margin: 0; font: 300 clamp(3rem, 7.2vw, 7rem)/.86 var(--serif); letter-spacing: -.045em; }
      .dek { max-width: 50rem; margin: 1.6rem auto 1.35rem; font: 400 clamp(1.25rem, 2.2vw, 1.75rem)/1.18 var(--serif); }
      .credits { margin: 0; font: 700 .7rem/1.5 var(--sans); letter-spacing: .12em; text-transform: uppercase; }

      .hero { width: min(100%, 76rem); margin: 0 auto; background: var(--warm); overflow: hidden; }
      .hero img { height: min(70vw, 49rem); object-fit: cover; }
      .hero.full-frame { width: min(100%, 44rem); background: transparent; }
      .hero.full-frame img { height: auto; object-fit: contain; }

      .reading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 40rem) minmax(0, 1fr); gap: 2rem; padding: clamp(3.5rem, 8vw, 7rem) 0; }
      .summary { grid-column: 2; }
      .summary p { margin: 0; font: 400 clamp(1.25rem, 2.3vw, 1.75rem)/1.36 var(--serif); }
      .summary p::first-letter { font-size: 1.25em; }
      .source-link { display: inline-block; margin-top: 1.8rem; padding-bottom: .3rem; border-bottom: 2px solid var(--signal); font: 700 .72rem/1 var(--sans); letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
      .source-link:hover { color: var(--signal); }

      .gallery-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.25rem 0 .9rem; border-top: 4px solid var(--ink); }
      .gallery-heading h2 { margin: 0; font: 400 clamp(2rem, 4vw, 3.8rem)/1 var(--serif); }
      .gallery-heading p { margin: 0; color: var(--signal); font: 700 .7rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
      .gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.3vw, 2rem); align-items: start; padding-bottom: clamp(4rem, 9vw, 8rem); }
      .gallery figure { margin: 0; background: var(--warm); }
      .gallery figure.wide { grid-column: 1 / -1; }
      .gallery figure img { height: auto; max-height: 90vh; object-fit: cover; }
      figcaption { padding: .7rem .8rem .85rem; font: 400 .72rem/1.35 var(--sans); }

      .story-copy {
        grid-column: 1 / -1;
        width: min(100%, 42rem);
        margin: clamp(1.5rem, 4vw, 4rem) 0;
        padding: clamp(2rem, 4vw, 3.5rem);
        border-top: 1px solid var(--ink);
        border-bottom: 1px solid var(--rule);
        background: var(--paper);
      }
      .story-copy.left { justify-self: start; margin-left: clamp(0rem, 7vw, 6rem); }
      .story-copy.right { justify-self: end; margin-right: clamp(0rem, 7vw, 6rem); }
      .story-copy-kicker { margin: 0 0 1.1rem; color: var(--signal); font: 700 .68rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
      .story-copy p { margin: 0; font: 400 clamp(1.3rem, 2.25vw, 1.85rem)/1.35 var(--serif); }
      .story-copy p + p { margin-top: 1.2em; }
      .story-copy a,
      .summary a { text-decoration-color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: .16em; }
      .story-copy a:hover,
      .summary a:hover { color: var(--signal); }

      /* Lunar New Year: an immersive, cinematic longform treatment. */
      body.immersive-story { background: #e7e7e5; }
      .immersive-story > .shell { width: 100%; }
      .immersive-story .masthead {
        position: absolute;
        inset: 0 0 auto;
        z-index: 5;
        width: min(calc(100% - 4rem), 92rem);
        margin: 0 auto;
        border-color: rgba(255,255,255,.55);
        color: #fff;
      }
      .immersive-story .brand-mark { background: #fff; color: var(--signal); }
      .immersive-story #story {
        display: grid;
        grid-template-columns: 1fr;
      }
      .immersive-story .story-header,
      .immersive-story .hero {
        grid-area: 1 / 1;
      }
      .immersive-story .hero,
      .immersive-story .hero.full-frame {
        position: relative;
        width: 100%;
        height: max(44rem, 100svh);
        margin: 0;
        background: #161616;
      }
      .immersive-story .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.18) 58%, rgba(0,0,0,.08) 100%),
          linear-gradient(0deg, rgba(0,0,0,.62) 0%, transparent 52%);
        pointer-events: none;
      }
      .immersive-story .hero img,
      .immersive-story .hero.full-frame img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 36%;
      }
      .immersive-story .story-header {
        z-index: 2;
        align-self: end;
        width: min(calc(100% - 4rem), 92rem);
        max-width: none;
        margin: 0 auto;
        padding: 11rem 0 clamp(3rem, 6vw, 6rem);
        color: #fff;
        text-align: left;
      }
      .immersive-story .eyebrow { color: #fff; }
      .immersive-story h1 {
        max-width: 13ch;
        font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
        font-size: clamp(4rem, 9vw, 9rem);
        font-weight: 800;
        line-height: .84;
        letter-spacing: -.065em;
      }
      .immersive-story .dek {
        max-width: 34rem;
        margin: 1.7rem 0 1.35rem;
        font-family: var(--sans);
        font-size: clamp(1.15rem, 1.7vw, 1.55rem);
        font-weight: 700;
        line-height: 1.18;
      }
      .immersive-story .credits { color: rgba(255,255,255,.82); }
      .immersive-story .reading {
        display: block;
        width: min(calc(100% - 3rem), 34rem);
        margin: 0 auto;
        padding: clamp(7rem, 13vw, 13rem) 0;
      }
      .immersive-story .summary p {
        font-family: var(--sans);
        font-size: clamp(1.05rem, 1.35vw, 1.22rem);
        line-height: 1.6;
      }
      .immersive-story .gallery-heading {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
      }
      .immersive-story .gallery {
        display: block;
        width: 100%;
        padding: 0 0 clamp(8rem, 14vw, 14rem);
        background: #e7e7e5;
      }
      .immersive-story .gallery figure {
        width: min(72vw, 70rem);
        margin: 0 0 clamp(9rem, 17vw, 17rem);
        background: transparent;
      }
      .immersive-story .gallery figure:nth-of-type(3n + 1) { width: 100%; }
      .immersive-story .gallery figure:nth-of-type(3n + 2) { margin-left: 7vw; }
      .immersive-story .gallery figure:nth-of-type(3n) {
        width: min(48vw, 42rem);
        margin-left: auto;
        margin-right: 8vw;
      }
      .immersive-story .gallery figure img {
        width: 100%;
        max-height: none;
        object-fit: contain;
      }
      .immersive-story figcaption {
        max-width: 34rem;
        padding: .8rem 1rem 0;
        color: #3b3b3b;
        font: 400 .68rem/1.45 var(--sans);
      }
      .immersive-story .story-copy,
      .immersive-story .story-copy.left,
      .immersive-story .story-copy.right {
        width: min(calc(100% - 3rem), 34rem);
        margin-top: clamp(8rem, 14vw, 14rem);
        margin-bottom: clamp(8rem, 14vw, 14rem);
        padding: 0;
        border: 0;
        background: transparent;
      }
      .immersive-story .story-copy.left { margin-left: 14vw; margin-right: auto; }
      .immersive-story .story-copy.right { margin-left: auto; margin-right: 14vw; }
      .immersive-story .story-copy-kicker { color: #202020; }
      .immersive-story .story-copy p {
        font-family: var(--sans);
        font-size: clamp(1rem, 1.18vw, 1.12rem);
        line-height: 1.62;
      }
      .immersive-story .story-copy.dark,
      .immersive-story .story-copy.dark.left,
      .immersive-story .story-copy.dark.right {
        width: 100%;
        max-width: none;
        margin: 0 0 clamp(10rem, 16vw, 16rem);
        padding: clamp(9rem, 15vw, 15rem) max(8vw, calc((100vw - 92rem) / 2));
        background: #171717;
        color: #fff;
      }
      .immersive-story .story-copy.dark .story-copy-kicker { color: #fff; }
      .immersive-story .story-copy.dark p,
      .immersive-story .story-copy.dark .story-copy-kicker { max-width: 34rem; }
      .immersive-story .story-copy.dark.right p,
      .immersive-story .story-copy.dark.right .story-copy-kicker { margin-left: auto; }
      .immersive-story .story-copy.pullquote,
      .immersive-story .story-copy.pullquote.left,
      .immersive-story .story-copy.pullquote.right {
        width: min(calc(100% - 3rem), 68rem);
        margin: clamp(11rem, 18vw, 18rem) auto;
        text-align: center;
      }
      .immersive-story .story-copy.pullquote p {
        font-size: clamp(1.8rem, 4vw, 3.7rem);
        font-weight: 700;
        line-height: 1.12;
        letter-spacing: -.035em;
      }
      .immersive-story .next {
        padding: clamp(5rem, 9vw, 9rem) max(2rem, calc((100vw - 92rem) / 2));
        border-color: #505050;
        background: #171717;
        color: #fff;
      }
      .immersive-story footer {
        padding: 1.4rem max(2rem, calc((100vw - 92rem) / 2)) 2.5rem;
        border-color: #505050;
        background: #171717;
        color: #fff;
      }

      .next { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; padding: clamp(2.5rem, 6vw, 5rem) 0; border-top: 1px solid var(--ink); text-decoration: none; }
      .next-label { display: block; margin-bottom: .65rem; color: var(--signal); font: 700 .68rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
      .next-title { display: block; max-width: 55rem; font: 300 clamp(2rem, 4.5vw, 4.5rem)/.9 var(--serif); letter-spacing: -.03em; }
      .next-arrow { font: 300 clamp(3rem, 7vw, 6rem)/1 var(--serif); }
      .next:hover .next-title { color: var(--signal); }
      footer { display: flex; justify-content: space-between; gap: 2rem; padding: 1.4rem 0 2.5rem; border-top: 1px solid var(--rule); }
      footer p, footer a { margin: 0; font: 700 .68rem/1.4 var(--sans); letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
      footer a:hover { color: var(--signal); }

      @media (max-width: 680px) {
        .shell { width: min(calc(100% - 1.5rem), 88rem); }
        .masthead { align-items: flex-start; }
        .nav { flex-direction: column; align-items: flex-end; gap: .75rem; padding-top: .3rem; }
        .story-header { text-align: left; }
        h1 { font-size: clamp(3rem, 15vw, 5rem); }
        .dek { margin-left: 0; }
        .hero img { height: min(105vw, 37rem); }
        .reading { display: block; padding-left: .3rem; padding-right: .3rem; }
        .gallery { grid-template-columns: 1fr; }
        .gallery figure.wide { grid-column: auto; }
        .story-copy,
        .story-copy.left,
        .story-copy.right { grid-column: auto; width: 100%; margin: 1.5rem 0; padding: 2.2rem 1.2rem; }
        .gallery-heading { align-items: flex-end; }
        .gallery-heading p { text-align: right; }
        footer { flex-direction: column; gap: .7rem; }

        .immersive-story .masthead,
        .immersive-story .story-header { width: calc(100% - 2rem); }
        .immersive-story .masthead { padding-top: .85rem; }
        .immersive-story .brand-name { display: none; }
        .immersive-story .hero,
        .immersive-story .hero.full-frame { height: 100svh; min-height: 39rem; }
        .immersive-story .hero img,
        .immersive-story .hero.full-frame img { object-position: 58% center; }
        .immersive-story .story-header { padding-bottom: 2.25rem; }
        .immersive-story h1 { font-size: clamp(3.4rem, 16vw, 5.6rem); }
        .immersive-story .reading { padding: 6rem 0 8rem; }
        .immersive-story .gallery figure,
        .immersive-story .gallery figure:nth-of-type(3n + 1),
        .immersive-story .gallery figure:nth-of-type(3n + 2),
        .immersive-story .gallery figure:nth-of-type(3n) {
          width: 100%;
          margin: 0 0 7rem;
        }
        .immersive-story .story-copy,
        .immersive-story .story-copy.left,
        .immersive-story .story-copy.right {
          width: auto;
          margin: 7rem 1.5rem;
        }
        .immersive-story .story-copy.dark,
        .immersive-story .story-copy.dark.left,
        .immersive-story .story-copy.dark.right {
          width: 100%;
          margin: 0 0 8rem;
          padding: 8rem 1.5rem;
        }
        .immersive-story .story-copy.pullquote,
        .immersive-story .story-copy.pullquote.left,
        .immersive-story .story-copy.pullquote.right {
          width: auto;
          margin: 9rem 1.5rem;
        }
        .immersive-story .next { padding-left: 1.5rem; padding-right: 1.5rem; }
        .immersive-story footer { padding-left: 1.5rem; padding-right: 1.5rem; }
      }

      @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }