:root {
        --paper: #ffffff;
        --ink: #111111;
        --muted: #3f3f3c;
        --line: rgba(17, 17, 17, 0.2);
        --soft: #ffffff;
        --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
        --serif: "Bodoni 72", Didot, "Bodoni MT", "Times New Roman", serif;
        --ease: cubic-bezier(0.22, 1, 0.36, 1);
      }

      * { box-sizing: border-box; }

      html {
        background: var(--paper);
        scroll-behavior: smooth;
      }

      body {
        min-width: 320px;
        margin: 0;
        overflow-x: hidden;
        color: var(--ink);
        background: var(--paper);
        font-family: var(--sans);
        font-size: 16px;
        font-weight: 400;
        letter-spacing: -0.025em;
        line-height: 1.35;
      }

      body::before {
        display: none;
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        content: "";
        opacity: 0.13;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
        mix-blend-mode: multiply;
      }

      a { color: inherit; text-decoration: none; }
      button { color: inherit; font: inherit; }
      img { display: block; max-width: 100%; }

      .site-header {
        position: relative;
        z-index: 10;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        min-height: 66px;
        padding: 18px 30px 14px;
        border-bottom: 1px solid transparent;
        background: var(--paper);
        transition: border-color 300ms ease;
      }

      .site-header.is-scrolled {
        position: sticky;
        top: 0;
        border-color: var(--line);
        backdrop-filter: blur(10px);
      }

      .brand,
      .nav-link,
      .header-meta,
      .small-label,
      .tile-label,
      .footer-meta {
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.08em;
        line-height: 1.2;
        text-transform: uppercase;
      }

      .brand { letter-spacing: 0.04em; }

      .main-nav {
        display: flex;
        gap: 25px;
        align-items: center;
      }

      .nav-link {
        position: relative;
        padding: 5px 0;
      }

      .nav-link::after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 1px;
        content: "";
        background: currentColor;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 360ms var(--ease);
      }

      .nav-link:hover::after,
      .nav-link:focus-visible::after { transform: scaleX(1); transform-origin: left; }

      .header-meta {
        justify-self: end;
        color: var(--muted);
        text-align: right;
      }

      .menu-button {
        display: none;
        justify-self: end;
        border: 0;
        padding: 5px 0;
        background: none;
        cursor: pointer;
      }

      .page {
        width: min(100%, 1520px);
        margin: 0 auto;
        padding: 0 30px;
      }

      .hero {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 22px;
        min-height: calc(100svh - 66px);
        padding: 28px 0 72px;
      }

      .hero-copy {
        order: 2;
        width: min(100%, 420px);
        padding: 22px 0 18px;
        color: var(--ink);
        font-size: 11px;
        line-height: 1.8;
        letter-spacing: 0.025em;
        text-align: center;
      }

      .hero-copy p { margin: 0; }
      .hero-copy strong {
        display: block;
        margin-bottom: 24px;
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.14em;
      }
      .hero-copy .hero-statement span { display: block; }
      .hero-copy .hero-discovery {
        margin-top: 30px;
        font-family: Georgia, 'Times New Roman', serif;
        font-size: 11px;
        font-style: italic;
        letter-spacing: 0.015em;
      }
      .hero-discovery::after {
        content: '';
        display: block;
        width: 24px;
        height: 1px;
        margin: 14px auto 0;
        background: #000;
      }

      .visual {
        --rx: 0deg;
        --ry: 0deg;
        position: relative;
        overflow: hidden;
        background: var(--soft);
        transform: perspective(1100px) rotateX(var(--ry)) rotateY(var(--rx));
        transition: transform 700ms var(--ease);
      }

      .visual::after {
        position: absolute;
        inset: 11px;
        border: 1px solid rgba(247, 247, 244, 0.72);
        content: "";
        pointer-events: none;
        transition: inset 700ms var(--ease);
      }

      .visual:hover::after { inset: 18px; }

      .visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: saturate(0.88) contrast(0.98);
        transform: scale(1.015);
        transition: transform 1.1s var(--ease), filter 700ms ease;
      }

      .visual:hover img {
        filter: saturate(1) contrast(1.02);
        transform: scale(1.06) translate3d(0.7%, -0.7%, 0);
      }

      .hero-video-wrap {
        order: 1;
        position: relative;
        width: min(100%, 960px);
        aspect-ratio: 16 / 9;
        margin: 0 auto;
      }

      .hero-video {
        display: block;
        width: 100%;
        height: 100%;
        border: 1px solid var(--line);
        background: var(--paper);
        object-fit: contain;
        object-position: center center;
      }

      .video-placeholder {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 1;
        font-size: 10px;
        letter-spacing: 0.1em;
        pointer-events: none;
        text-transform: uppercase;
        transform: translate(-50%, -50%);
      }

      .video-caption {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        margin-top: 10px;
        font-size: 10px;
        letter-spacing: 0.08em;
        line-height: 1.2;
        text-transform: uppercase;
      }

      .video-caption span:last-child { margin-left: auto; color: var(--muted); }

      .image-note {
        position: absolute;
        bottom: 17px;
        left: 18px;
        z-index: 2;
        color: var(--paper);
        font-size: 10px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        mix-blend-mode: difference;
      }

      .hero-caption {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        margin-top: 10px;
        color: var(--muted);
        font-size: 10px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .collection-intro {
        display: grid;
        grid-template-columns: 0.8fr 1.2fr;
        gap: 34px;
        align-items: center;
        min-height: 310px;
        padding: 82px 0 70px;
      }

      .season-copy {
        align-self: center;
        padding-left: 35px;
        font-size: 13px;
        line-height: 1.15;
        text-transform: uppercase;
      }

      .season-copy span { display: block; }
      .collection-title { align-self: center; }
      .collection-title .small-label {
        margin-bottom: 20px;
        color: var(--ink);
        font-size: 10px;
        font-weight: 400;
        letter-spacing: 0.12em;
      }

      .collection-title h1 {
        margin: 0;
        color: var(--ink);
        font-family: Georgia, 'Times New Roman', serif;
        font-size: clamp(26px, 2.7vw, 36px);
        font-weight: 400;
        letter-spacing: -0.025em;
        line-height: 1.2;
        text-transform: none;
      }

      .collection-title h1 em { font-weight: 400; }
      .collection-title h1 em { font-style: normal; }

      .feature-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding-bottom: 150px;
      }

      .feature-grid .visual { aspect-ratio: 1.08 / 1; }
      .feature-grid .visual:first-child img { object-position: 22% center; filter: grayscale(0.85) contrast(0.96); }
      .feature-grid .visual:last-child img { object-position: 78% center; filter: grayscale(0.35); }