/* ---------- embedded faces ---------- */
    @font-face {
      font-family: 'Inter S';
      src: url(../fonts/inter-s-400.woff2) format('woff2');
      font-weight: 400;
      font-style: normal;
      font-display: block
    }

    @font-face {
      font-family: 'Inter S';
      src: url(../fonts/inter-s-700.woff2) format('woff2');
      font-weight: 700;
      font-style: normal;
      font-display: block
    }

    @font-face {
      font-family: 'Chakra S';
      src: url(../fonts/chakra-s-700.woff2) format('woff2');
      font-weight: 700;
      font-style: normal;
      font-display: block
    }

    /* ---------- reference unit ----------
   Every measurement below is a real pixel value read off the 1280x800 reference.
   --u is the reference pixel: 1px at 1280x800, and it scales with the viewport,
   so proportions are preserved while the chrome stays anchored to the real edges. */
    :root {
      --u: clamp(0.68px, min(100vw / 1280, 100vh / 800), 1.72px);
      --t: var(--u);
      /* desktop: content and structure share one scale */
      --u: clamp(0.68px, min(100vw / 1280, 100dvh / 800), 1.72px);
      --line: rgba(255, 255, 255, .13);
      --cream: #e8d1cb;
      --ink: #15131b;
      --hair: max(1px, calc(1 * var(--u)));
      --nudge: calc(1 * var(--t));
      /* Chrome centres these caps ~1px high */
    }

    * {
      box-sizing: border-box
    }

    html,
    body {
      height: 100%
    }

    body {
      margin: 0;
      background: #04070d;
      overflow-x: hidden;
      overflow-y: auto;
      font-family: 'Chakra S', 'Inter S', -apple-system, 'Helvetica Neue', Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: geometricPrecision;
    }

    .stage {
      position: relative;
      height: 100vh;
      overflow: hidden
    }

    /* ---------- hero image: graded exactly as the reference, cover, centred ---------- */
    .bg {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-image: url(../img/background.webp);
      background-size: cover;
      background-position: 50% 50%;
      background-repeat: no-repeat
    }

    /* the video box is sized to cover the stage at 16:9 (no object-fit crop, so it can
   move without exposing an edge). The arch sits ~4% left of centre in the clip:
   scale up 10% and shift the box right by 4.5% of its own width. */
    .bg video {
      position: absolute;
      left: 50%;
      top: 50%;
      display: block;
      width: max(100vw, 177.78vh);
      height: max(100vh, 56.25vw);
      transform: translate(-45.5%, -50%) scale(1.1)
    }

    /* one clip per chapter, stacked; the chosen one fades up over the last */
    .bg video {
      opacity: 0;
      transition: opacity .9s ease
    }

    .bg video.on {
      opacity: 1
    }

    /* chapter change: the headline drops back into its mask and the paragraph
   settles out, the copy is swapped, and both return the way they entered */
    .hero .hrise {
      transition: transform .5s var(--e-mask)
    }

    .hero .blurb {
      transition: opacity .4s ease, transform .4s ease
    }

    .swapping .hrise {
      transform: translateY(112%)
    }

    .swapping .blurb {
      opacity: 0;
      transform: translateY(calc(7*var(--t)))
    }

    /* ---------- frame: 30u inset, 1px hairline, 26u chamfer on all four corners ---------- */
    .frame {
      position: absolute;
      left: calc(30*var(--u));
      top: calc(64*var(--u));
      right: calc(30*var(--u));
      bottom: calc(31*var(--u))
    }

    .ln {
      position: absolute;
      background: var(--line)
    }

    .ln-t {
      left: calc(26*var(--u));
      right: calc(26*var(--u));
      top: 0;
      height: var(--hair)
    }

    .ln-b {
      left: calc(26*var(--u));
      right: calc(26*var(--u));
      bottom: 0;
      height: var(--hair)
    }

    .ln-l {
      top: calc(26*var(--u));
      bottom: calc(26*var(--u));
      left: 0;
      width: var(--hair)
    }

    .ln-r {
      top: calc(26*var(--u));
      bottom: calc(26*var(--u));
      right: 0;
      width: var(--hair)
    }

    .cn {
      position: absolute;
      width: calc(26*var(--u));
      height: calc(26*var(--u))
    }

    .cn-tl {
      left: 0;
      top: 0;
      background: linear-gradient(to bottom right, transparent calc(50% - .65px), var(--line) calc(50% - .65px), var(--line) calc(50% + .65px), transparent calc(50% + .65px))
    }

    .cn-br {
      right: 0;
      bottom: 0;
      background: linear-gradient(to bottom right, transparent calc(50% - .65px), var(--line) calc(50% - .65px), var(--line) calc(50% + .65px), transparent calc(50% + .65px))
    }

    .cn-tr {
      right: 0;
      top: 0;
      background: linear-gradient(to bottom left, transparent calc(50% - .65px), var(--line) calc(50% - .65px), var(--line) calc(50% + .65px), transparent calc(50% + .65px))
    }

    .cn-bl {
      left: 0;
      bottom: 0;
      background: linear-gradient(to bottom left, transparent calc(50% - .65px), var(--line) calc(50% - .65px), var(--line) calc(50% + .65px), transparent calc(50% + .65px))
    }

    /* ---------- shared label face ---------- */
    .lbl {
      font-family: 'Chakra S', 'Inter S', sans-serif;
      font-weight: 700;
      font-size: calc(12*var(--t));
      line-height: 1;
      white-space: nowrap
    }

    .t {
      position: relative;
      top: var(--nudge);
      display: inline-block;
      text-align: left;
      white-space: pre
    }

    .bg {
      will-change: transform;
      transform-origin: 50% 50%;
      backface-visibility: hidden
    }

    /* the footage starts below an expanded top band, so the whole scene sits lower */
    .bg {
      top: calc(34*var(--u))
    }

    /* ---------- masthead ---------- */
    .logo {
      position: fixed;
      left: calc(18*var(--t));
      top: calc(12*var(--t));
      width: auto;
      height: calc(41*var(--t));
      display: flex;
      align-items: center;
      z-index: 900
    }

    .logo svg {
      width: 100%;
      height: 100%;
      display: block;
      fill: #000
    }

    .logo-text {
      display: flex;
      align-items: center;
      text-decoration: none;
      font-family: 'Chakra S', 'Inter S', sans-serif;
      font-weight: 700;
      font-size: calc(19*var(--t));
      letter-spacing: calc(1.6*var(--t));
      color: #fff;
      -webkit-text-stroke: calc(0.8*var(--t)) #000;
      paint-order: stroke fill;
      text-shadow: 0 0 14px rgba(0, 0, 0, .75);
      white-space: nowrap
    }

    .masthead {
      position: fixed;
      right: calc(18*var(--t));
      top: calc(12*var(--t));
      display: flex;
      align-items: center;
      z-index: 900
    }

    .navset {
      display: contents
    }

    .links {
      display: flex;
      align-items: center;
      gap: calc(14.4*var(--t));
      margin-right: calc(18*var(--t))
    }

    .links a {
      color: #fff;
      text-decoration: none;
      /* NAV TEXT SIZE — change 14 here to resize the nav labels (12 = previous size) */
      font-size: calc(14*var(--t));
      letter-spacing: calc(.1*var(--t));
      padding-left: calc(.1*var(--t));
      opacity: .94;
      white-space: nowrap;
      flex: none;
      -webkit-text-stroke: calc(0.7*var(--t)) #000;
      paint-order: stroke fill;
      text-shadow: 0 0 12px rgba(0, 0, 0, .7);
      transition: opacity .25s ease, color .25s ease
    }

    .links a:hover {
      opacity: 1;
      color: #fff
    }

    /* nav labels are hard-locked to one line: nowrap (specificity .links .t)
       beats the generic .t { white-space: pre } below, so even a stray source
       line break can never render as a second line */
    .links .t {
      white-space: nowrap
    }

    .pill {
      height: calc(41*var(--t));
      display: flex;
      align-items: center;
      text-decoration: none;
      position: relative;
      cursor: pointer;
      border: 0;
      padding: 0
    }

    .pill .ico {
      flex: none;
      display: block
    }

    .resume {
      width: auto;
      padding: 0 calc(19*var(--t)) 0 calc(17*var(--t));
      background: #0C0C0C;
      border: 1px solid rgba(215, 226, 234, .24);
      border-radius: 999px;
      transition: background .3s ease, border-color .3s ease, transform .3s ease
    }

    .resume:hover {
      background: #D7E2EA;
      border-color: #D7E2EA;
      transform: translateY(calc(-1*var(--t)))
    }

    .resume:hover .ico {
      fill: #0C0C0C
    }

    .resume:hover span {
      color: #0C0C0C
    }

    .resume .ico {
      width: calc(9*var(--t));
      height: calc(10*var(--t));
      fill: #fff
    }

    .resume span {
      color: #fff;
      margin-left: calc(7*var(--t));
      letter-spacing: calc(.33*var(--t))
    }

    .menu {
      display: none;
      background: transparent;
      border: 0;
      padding: 0 calc(12*var(--t));
      cursor: pointer
    }

    .menu .ico {
      width: calc(12*var(--t));
      height: calc(5*var(--t));
      fill: #D7E2EA
    }

    .menu span {
      color: #D7E2EA;
      margin-left: calc(7*var(--t))
    }

    .menu:hover .ico,
    .menu:hover span {
      color: #fff
    }