:root {
        --bg: #f5f2ec;
        --ink: #111111;
        --muted: #6b6658;
        --accent: #ff4d1f;
        --rule: #1111111a;
        --max: 1320px;
      }

      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }
      html,
      body {
        margin: 0;
        padding: 0;
        background: var(--bg);
        color: var(--ink);
      }
      body {
        font-family:
          'Inter',
          -apple-system,
          BlinkMacSystemFont,
          sans-serif;
        font-weight: 400;
        font-size: clamp(15px, 1.05vw + 10px, 18px);
        line-height: 1.55;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        overflow-x: hidden;
      }
      a {
        color: inherit;
        text-decoration: none;
        border-bottom: 1px solid var(--ink);
        padding-bottom: 1px;
        transition:
          color 0.2s ease,
          border-color 0.2s ease;
      }
      a:hover {
        color: var(--accent);
        border-bottom-color: var(--accent);
      }

      .serif {
        font-family: 'Fraunces', Georgia, serif;
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 0.95;
      }
      .mono {
        font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
        font-size: 0.78rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--muted);
      }

      .wrap {
        max-width: var(--max);
        margin: 0 auto;
        padding: 0 clamp(20px, 4vw, 64px);
      }

      /* Nav */
      .nav {
        position: fixed;
        inset: 0 0 auto 0;
        z-index: 50;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 22px clamp(20px, 4vw, 64px);
        mix-blend-mode: difference;
        color: #fff;
      }
      .nav .mono {
        color: #fff;
      }
      .nav a {
        border: none;
        padding: 0;
      }
      .nav a:hover {
        color: var(--accent);
      }
      .nav-links {
        display: flex;
        gap: clamp(16px, 2vw, 32px);
      }

      /* Hero */
      .hero {
        min-height: 100vh;
        padding: clamp(120px, 18vh, 200px) 0 clamp(60px, 10vh, 120px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
      }
      .hero .eyebrow {
        margin-bottom: clamp(32px, 6vh, 64px);
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 16px;
      }
      .hero-headline {
        font-family: 'Fraunces', Georgia, serif;
        font-weight: 800;
        letter-spacing: -0.035em;
        line-height: 0.9;
        font-size: clamp(64px, 13.5vw, 220px);
        margin: 0;
      }
      .hero-headline em {
        font-style: italic;
        font-weight: 400;
        color: var(--accent);
      }
      .hero .tail {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-top: clamp(40px, 8vh, 80px);
        gap: 40px;
        flex-wrap: wrap;
      }
      .hero .tail .lede {
        font-family: 'Fraunces', Georgia, serif;
        font-weight: 400;
        font-size: clamp(20px, 2vw, 28px);
        line-height: 1.35;
        max-width: 42ch;
        color: var(--ink);
      }
      .hero .tail .lede em {
        font-style: italic;
        color: var(--accent);
      }
      .hero .tail .meta {
        color: var(--muted);
        display: flex;
        flex-direction: column;
        gap: 4px;
        align-items: flex-end;
      }
      .hero .tail .meta .dot {
        color: var(--accent);
      }

      /* SplitText helpers — line masks */
      .split-line {
        overflow: hidden;
        display: block;
      }

      /* Sections */
      section {
        padding: clamp(80px, 14vh, 160px) 0;
        border-top: 1px solid var(--rule);
      }
      .section-head {
        display: grid;
        grid-template-columns: 140px 1fr;
        gap: clamp(24px, 4vw, 80px);
        margin-bottom: clamp(40px, 6vh, 80px);
        align-items: baseline;
      }
      .section-head h2 {
        font-family: 'Fraunces', Georgia, serif;
        font-weight: 800;
        letter-spacing: -0.02em;
        font-size: clamp(40px, 6.5vw, 88px);
        line-height: 1;
        margin: 0;
      }

      /* About */
      .about-grid {
        display: grid;
        grid-template-columns: 140px 1fr;
        gap: clamp(24px, 4vw, 80px);
      }
      .about-grid .body p {
        font-family: 'Fraunces', Georgia, serif;
        font-weight: 400;
        font-size: clamp(22px, 2.4vw, 34px);
        line-height: 1.3;
        margin: 0 0 1em;
        max-width: 22ch;
      }
      .about-grid .body p:last-child {
        margin-bottom: 0;
      }
      .about-grid .body strong {
        font-weight: 600;
      }

      /* Marquee */
      .marquee {
        padding: clamp(20px, 4vh, 40px) 0;
        border-top: 1px solid var(--rule);
        border-bottom: 1px solid var(--rule);
        overflow: hidden;
        white-space: nowrap;
      }
      .marquee-track {
        display: inline-flex;
        gap: 48px;
        padding-right: 48px;
        will-change: transform;
      }
      .marquee-track span {
        font-family: 'Fraunces', Georgia, serif;
        font-weight: 800;
        font-size: clamp(40px, 8vw, 120px);
        letter-spacing: -0.02em;
        line-height: 1;
      }
      .marquee-track .dot {
        color: var(--accent);
      }

      /* Horizontal scroll — shared scaffolding */
      .h-scroll {
        overflow: hidden;
        padding: 0;
        border-top: 1px solid var(--rule);
      }
      .h-track {
        display: flex;
        flex-wrap: nowrap;
        width: max-content;
        height: 100vh;
        will-change: transform;
      }

      /* Numbers panels */
      .numbers .h-panel {
        flex: 0 0 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 clamp(20px, 4vw, 64px);
        position: relative;
      }
      .numbers .h-panel:nth-child(even) {
        background: var(--ink);
        color: var(--bg);
      }
      .numbers .h-panel:nth-child(even) .mono {
        color: #b5b0a4;
      }
      .numbers .h-panel .num {
        font-family: 'Fraunces', Georgia, serif;
        font-weight: 800;
        font-size: clamp(120px, 28vw, 460px);
        line-height: 0.85;
        letter-spacing: -0.045em;
        margin: 0;
      }
      .numbers .h-panel .num em {
        font-style: italic;
        font-weight: 400;
        color: var(--accent);
      }
      .numbers .h-panel .label {
        font-family: 'Fraunces', Georgia, serif;
        font-weight: 400;
        font-style: italic;
        font-size: clamp(20px, 2.2vw, 32px);
        line-height: 1.3;
        max-width: 28ch;
        margin: 0;
      }
      .numbers .h-panel .panel-inner {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: end;
        gap: clamp(24px, 4vw, 80px);
        max-width: 1400px;
        width: 100%;
      }
      .numbers .h-panel .panel-inner .meta {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .numbers .panel-index {
        position: absolute;
        top: clamp(24px, 6vh, 64px);
        left: clamp(20px, 4vw, 64px);
      }

      /* Work panels */
      .work .h-panel {
        flex: 0 0 min(100vw, 900px);
        height: 100vh;
        padding: clamp(80px, 14vh, 120px) clamp(24px, 4vw, 64px);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-right: 1px solid var(--rule);
        position: relative;
      }
      .work .h-panel:last-child {
        border-right: none;
      }
      .work .h-panel .year-big {
        font-family: 'Fraunces', Georgia, serif;
        font-weight: 800;
        font-size: clamp(80px, 14vw, 200px);
        line-height: 0.9;
        letter-spacing: -0.045em;
        margin: 0;
      }
      .work .h-panel .year-big em {
        font-style: italic;
        font-weight: 400;
        color: var(--accent);
      }
      .work .h-panel .role {
        font-family: 'Fraunces', Georgia, serif;
        font-weight: 800;
        font-size: clamp(28px, 3.2vw, 48px);
        letter-spacing: -0.02em;
        line-height: 1.05;
        margin: 0 0 12px;
      }
      .work .h-panel .company {
        color: var(--muted);
        margin: 0 0 24px;
        font-size: clamp(15px, 1.2vw, 18px);
      }
      .work .h-panel .blurb {
        font-family: 'Fraunces', Georgia, serif;
        font-weight: 400;
        font-size: clamp(16px, 1.4vw, 20px);
        line-height: 1.4;
        margin: 0;
        max-width: 44ch;
        color: var(--muted);
      }
      .work .h-panel .row-top,
      .work .h-panel .row-bottom {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
      }
      .work .h-panel .row-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
      }
      .work-intro {
        flex: 0 0 min(100vw, 640px);
        height: 100vh;
        padding: clamp(80px, 14vh, 120px) clamp(24px, 4vw, 64px);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        gap: 24px;
        background: var(--ink);
        color: var(--bg);
        border-right: 1px solid var(--rule);
      }
      .work-intro h2 {
        font-family: 'Fraunces', Georgia, serif;
        font-weight: 800;
        font-size: clamp(48px, 7vw, 96px);
        letter-spacing: -0.02em;
        line-height: 1;
        margin: 0;
      }
      .work-intro h2 em {
        font-style: italic;
        font-weight: 400;
        color: var(--accent);
      }
      .work-intro .mono {
        color: #b5b0a4;
      }
      .work-intro .hint {
        font-family: 'Fraunces', Georgia, serif;
        font-weight: 400;
        font-style: italic;
        font-size: clamp(18px, 1.6vw, 22px);
        color: #b5b0a4;
        max-width: 30ch;
      }

      /* Skills */
      .skills-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: clamp(24px, 3vw, 48px);
      }
      .skill-group h3 {
        font-family: 'Fraunces', Georgia, serif;
        font-weight: 600;
        font-size: clamp(22px, 2vw, 28px);
        margin: 0 0 12px;
        letter-spacing: -0.01em;
      }
      .skill-group ul {
        list-style: none;
        margin: 0;
        padding: 0;
        color: var(--muted);
      }
      .skill-group li {
        padding: 4px 0;
      }

      /* Contact */
      .contact {
        padding: clamp(120px, 20vh, 220px) 0 clamp(60px, 10vh, 120px);
        border-top: 1px solid var(--rule);
      }
      .contact h2 {
        font-family: 'Fraunces', Georgia, serif;
        font-weight: 800;
        font-size: clamp(60px, 12vw, 180px);
        letter-spacing: -0.035em;
        line-height: 0.95;
        margin: 0 0 clamp(32px, 5vh, 56px);
      }
      .contact h2 em {
        font-style: italic;
        color: var(--accent);
        font-weight: 400;
      }
      .contact .links {
        display: flex;
        flex-wrap: wrap;
        gap: clamp(16px, 3vw, 40px);
        font-size: clamp(18px, 1.6vw, 22px);
      }

      footer {
        padding: 32px 0;
        border-top: 1px solid var(--rule);
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px;
        color: var(--muted);
      }

      /* Cursor dot */
      .cursor {
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 100;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--accent);
        transform: translate(-50%, -50%) scale(0);
        mix-blend-mode: multiply;
      }

      /* Scroll hint for horizontal sections */
      .scroll-hint {
        position: absolute;
        bottom: clamp(24px, 6vh, 48px);
        left: clamp(20px, 4vw, 64px);
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .scroll-hint .bar {
        width: 40px;
        height: 1px;
        background: currentColor;
        opacity: 0.4;
      }

      @media (max-width: 720px) {
        .section-head,
        .about-grid {
          grid-template-columns: 1fr;
          gap: 16px;
        }
        .nav-links {
          display: none;
        }
        /* Fall back to vertical flow on narrow screens */
        .h-scroll {
          overflow: visible;
        }
        .h-track {
          flex-wrap: wrap;
          width: 100%;
          height: auto;
        }
        .numbers .h-panel,
        .work .h-panel,
        .work-intro {
          flex: 0 0 100%;
          height: auto;
          min-height: 80vh;
          border-right: none;
          border-bottom: 1px solid var(--rule);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        * {
          animation-duration: 0.01ms !important;
          transition-duration: 0.01ms !important;
        }
        .h-scroll {
          overflow: visible;
        }
        .h-track {
          flex-wrap: wrap;
          width: 100%;
          height: auto;
        }
        .numbers .h-panel,
        .work .h-panel,
        .work-intro {
          flex: 0 0 100%;
          height: auto;
          min-height: 70vh;
        }
      }
    </style>