/* Landing-page foundations and portrait composition. */
    :root { color-scheme: light; --paper: #171a18; --muted: #656a65; --gutter: 5%; --x: 50%; --y: 50%; --radius: clamp(150px, 23vw, 340px); }
    * { box-sizing: border-box; }
    body { margin: 0; background: #ffffff; color: var(--paper); font-family: var(--font-reading); }
    button, a { -webkit-tap-highlight-color: transparent; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; color: inherit; }
    a:focus-visible, button:focus-visible { outline: 2px solid #3c5141; outline-offset: 7px; }
    .hero { min-height: 660px; height: 100svh; position: relative; overflow: hidden; isolation: isolate; }
    .scene { position: absolute; inset: 0; pointer-events: none; }
    .portrait-entry, .portrait-stage { position: absolute; inset: 0; pointer-events: none; }
    .portrait-entry { animation: portrait-enter 1.6s cubic-bezier(.16,1,.3,1) both; }
    .portrait-stage { transform: translate3d(var(--portrait-x, 0px), var(--portrait-y, 0px), 0) rotate(var(--portrait-angle, 0deg)) scale(var(--portrait-scale, 1)); transform-origin: 78% 65%; }
    h1 { animation: text-enter 1.1s cubic-bezier(.16,1,.3,1) .12s both; }
    .cta { animation: text-enter 1s cubic-bezier(.16,1,.3,1) .3s both; }
    .motion-paused .portrait-entry, .motion-paused h1, .motion-paused .cta { animation-play-state: paused; }
    @keyframes portrait-enter { from { opacity: 0; transform: translate3d(25px, 22px, 0) scale(1.025); } to { opacity: 1; transform: none; } }
    @keyframes text-enter { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
    .hero { background: #ffffff; }
    .background-art { position: absolute; inset: 0; pointer-events: none; background: #f8f8f3; }
    .background-art canvas, .background-art svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
    .front { background: transparent; }
    .back { background: transparent; opacity: 0; -webkit-mask-image: radial-gradient(circle var(--radius) at var(--x) var(--y), #000 0%, #000 28%, #0009 53%, #0003 76%, transparent 100%); mask-image: radial-gradient(circle var(--radius) at var(--x) var(--y), #000 0%, #000 28%, #0009 53%, #0003 76%, transparent 100%); transition: opacity .45s ease; }
    .hero.is-lit .back { opacity: var(--reveal-opacity, 1); }
    .hero.show-cyborg .back { opacity: 1; mask-image: none !important; -webkit-mask-image: none !important; }
    .motion-controls { display: flex; gap: 14px; margin-top: 14px; }
    .motion-controls button { cursor: pointer; background: #ffffffe6; border: 1px solid #171a1845; padding: 8px 10px; font-size: 9px; text-transform: uppercase; letter-spacing: .5px; }
    .scene img { position: absolute; right: 0; bottom: 0; height: 94%; width: auto; max-width: none; display: block;  }
    .back img { filter: url(#sleeveRegistration); }
    .scene img[hidden] { display: none; }
    .header { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: 28px var(--gutter); background: linear-gradient(#ffffff 60%, #ffffff00); }
    .logo { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: clamp(22px, 2vw, 30px); font-weight: 600; letter-spacing: -.045em; line-height: 1; }
    .logo-mark { width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 50%; position: relative; }
    .logo-mark::after { content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: currentColor; top: 6px; left: 6px; }
    .desktop-nav { display: flex; gap: 12px; font-size: clamp(14px, 1.15vw, 18px); text-transform: none; letter-spacing: -.015em; }
    .desktop-nav a { padding: 10px 14px; border-radius: 4px; background: #ffffffe6;  }
    .desktop-nav a:hover { color: #575f54; }
    .menu-toggle { display: none; background: none; border: 1px solid #171a1845; width: 44px; height: 44px; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 6px; }
    .menu-toggle span { width: 18px; height: 1px; background: currentColor; transition: transform .2s; }
    .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
    .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
    .content { position: absolute; top: 50%; transform: translateY(-50%); left: var(--gutter); max-width: 47%; z-index: 1; }
    h1 { font-size: clamp(70px, min(8.2vw, 14.5svh), 156px); line-height: .95; letter-spacing: -.05em; font-weight: 800; margin: 0 0 24px; }
    h1 span { display: block; color: inherit; }
    .hero-description { max-width: 39ch; margin: 0 0 26px; font-size: clamp(16px, 1.3vw, 22px); line-height: 1.6; }
    .cta { display: inline-flex; gap: 38px; align-items: center; padding: 15px 22px; background: #ffffff; color: var(--paper); font-size: clamp(15px, 1.15vw, 18px); letter-spacing: -.01em; text-transform: none; border-radius: 999px; border: 1px solid var(--paper); transition: background .2s, color .2s; }
    .cta:hover { background: #171a18; color: #ffffff; }
    .footer { position: absolute; bottom: 35px; left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
    .hint { font-size: 9px; color: #656a65; letter-spacing: 1px; text-transform: uppercase; display: flex; gap: 12px; align-items: center; }
    .hint::before { content: '+'; border: 1px solid #171a1845; border-radius: 50%; width: 26px; height: 26px; display: grid; place-items: center; font-size: 15px; }
    .menu { position: fixed; inset: 0; z-index: 2; background: #ffffff; padding: 130px 7% 40px; }
    .menu[hidden] { display: none; }
    .menu nav { display: flex; flex-direction: column; gap: 28px; }
    .menu a { font-size: clamp(32px, 9vw, 60px); letter-spacing: -.02em; }
    .menu small { display: block; margin-top: 60px; font-size: 10px; color: var(--muted); letter-spacing: 2px; }
    @media (max-width: 700px) {
      :root { --gutter: 7%; }
      .hero { min-height: 980px; height: auto; padding-bottom: 550px; }
      .portrait-entry { top: auto; bottom: 70px; height: 450px; }
      .header { padding: 25px var(--gutter); }
      .desktop-nav { display: none; }
      .menu-toggle { display: flex; }
      .content { position: relative; left: auto; right: auto; top: auto; transform: none; margin: 36px var(--gutter) 0; max-width: none; }
      h1 { font-size: clamp(52px, 13.5vw, 86px); letter-spacing: -.035em; line-height: .98; margin-bottom: 22px; }
      .hero-description { font-size: 17px; max-width: 36ch; margin-bottom: 24px; }
        .footer { left: var(--gutter); right: var(--gutter); bottom: 27px; flex-direction: column; align-items: flex-start; gap: 30px; }
              .scene img { height: 100%; right: 0; }
    }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }