*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    /* Fixed nav offset so anchored sections aren't hidden under the bar */
    section[id] { scroll-margin-top: 76px; }

    body {
      background: #181512;
      color: #EDE8DF;
      font-family: 'DM Sans', system-ui, sans-serif;
      font-weight: 300;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      cursor: none;
      opacity: 0;
      transition: opacity 0.7s ease;
    }
    body.ready { opacity: 1; }
    @media (pointer: coarse) { body { cursor: auto; } }

    /* ── Scrollbar ── */
    ::-webkit-scrollbar { width: 3px; }
    ::-webkit-scrollbar-track { background: #181512; }
    ::-webkit-scrollbar-thumb { background: #CCAE52; border-radius: 2px; }

    /* ── Film grain ── */
    body::after {
      content: '';
      position: fixed; inset: 0; z-index: 900;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.03'/%3E%3C/svg%3E");
      pointer-events: none;
    }

    /* ── Triangle cursor ── */
    #tri-cursor {
      position: fixed; top: 0; left: 0;
      width: 26px; height: 23px;
      pointer-events: none; z-index: 9999;
      will-change: transform;
    }
    #tri-cursor svg polygon { transition: fill 0.18s ease, stroke-width 0.15s ease; }
    #tri-cursor.on-link svg polygon { fill: rgba(204,174,82,0.2); stroke-width: 2.2; }
    @media (pointer: coarse) { #tri-cursor { display: none; } }

    /* ── NAV ── */
    #nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 500;
      display: flex; align-items: center; justify-content: space-between;
      padding: 1.6rem clamp(1.4rem, 5vw, 4rem);
      transition: background 0.5s ease, border-color 0.5s ease;
      border-bottom: 1px solid transparent;
    }
    #nav.solid {
      background: rgba(24,21,18,0.93);
      backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      border-bottom-color: rgba(204,174,82,0.1);
    }
    .nav-logo {
      font-family: 'DM Sans', sans-serif; font-weight: 400;
      font-size: 0.74rem; letter-spacing: 0.52em; text-transform: uppercase;
      color: #CCAE52; text-decoration: none;
    }
    .nav-links { display: flex; align-items: center; gap: 2.2rem; list-style: none; }
    .nav-links a {
      font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase;
      color: rgba(237,232,223,0.45); text-decoration: none;
      transition: color 0.25s ease;
    }
    .nav-links a:hover { color: #CCAE52; }
    @media (max-width: 600px) { .nav-links { display: none; } }

    /* Hamburger (mobile only) */
    .nav-toggle {
      display: none; width: 30px; height: 22px; position: relative;
      background: none; border: none; padding: 0; cursor: pointer; z-index: 620;
    }
    .nav-toggle span {
      position: absolute; left: 0; height: 1.5px; width: 100%; background: #CCAE52;
      transition: transform .35s ease, opacity .25s ease, top .35s ease;
    }
    .nav-toggle span:nth-child(1){ top: 3px; }
    .nav-toggle span:nth-child(2){ top: 10px; }
    .nav-toggle span:nth-child(3){ top: 17px; }
    .nav-toggle.open span:nth-child(1){ top: 10px; transform: rotate(45deg); }
    .nav-toggle.open span:nth-child(2){ opacity: 0; }
    .nav-toggle.open span:nth-child(3){ top: 10px; transform: rotate(-45deg); }
    @media (max-width: 600px){ .nav-toggle{ display: block; } }

    /* Mobile menu overlay */
    .mobile-menu {
      position: fixed; inset: 0; z-index: 610;
      background: rgba(20,18,15,0.97);
      backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 2.4rem; opacity: 0; visibility: hidden;
      transition: opacity .45s ease, visibility .45s ease;
    }
    .mobile-menu.open { opacity: 1; visibility: visible; }
    .mobile-menu .mm-eyebrow {
      position: absolute; top: clamp(1.6rem, 5vh, 2.6rem);
      font-family: 'DM Sans', sans-serif; font-size: 0.55rem; letter-spacing: 0.5em;
      text-transform: uppercase; color: rgba(204,174,82,0.6);
    }
    .mobile-menu a {
      font-family: 'Cormorant Garamond', serif; font-weight: 300; font-style: italic;
      font-size: 2.1rem; color: #EDE8DF; text-decoration: none;
      transition: color .3s ease;
    }
    .mobile-menu a:hover, .mobile-menu a:active { color: #CCAE52; }
    .mobile-menu .mm-order {
      font-style: normal; font-family: 'DM Sans', sans-serif;
      font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase;
      border: 1px solid rgba(204,174,82,0.5); color: #CCAE52;
      padding: 0.95rem 2.2rem; margin-top: 1rem;
      display: inline-flex; align-items: center; gap: 0.6rem;
    }

    /* ── Buttons ── */
    .btn-outline {
      display: inline-flex; align-items: center; gap: 0.55rem;
      border: 1px solid rgba(204,174,82,0.45); color: #CCAE52;
      font-family: 'DM Sans', sans-serif; font-weight: 400;
      font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase;
      padding: 0.9rem 2rem; text-decoration: none; background: transparent;
      cursor: none; position: relative; overflow: hidden;
      transition: color 0.35s ease, border-color 0.35s ease;
    }
    .btn-outline::before {
      content: ''; position: absolute; inset: 0; background: #CCAE52;
      transform: scaleX(0); transform-origin: left;
      transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
    }
    .btn-outline:hover { color: #181512; border-color: #CCAE52; }
    .btn-outline:hover::before { transform: scaleX(1); }
    .btn-outline > * { position: relative; z-index: 1; }

    .btn-solid {
      display: inline-flex; align-items: center; gap: 0.55rem;
      background: #CCAE52; color: #181512;
      font-family: 'DM Sans', sans-serif; font-weight: 500;
      font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase;
      padding: 0.9rem 2rem; text-decoration: none; cursor: none;
      transition: background 0.3s ease;
    }
    .btn-solid:hover { background: #E0C470; }
    @media (pointer: coarse) { .btn-outline, .btn-solid { cursor: pointer; } }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       HERO — generative, no image
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    #hero {
      position: relative;
      height: 100dvh; min-height: 600px;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
    }

    /* Layer 0 — animated aurora blobs (warm depth) */
    .hero-aurora {
      position: absolute; inset: -20%; z-index: 0;
      pointer-events: none; filter: blur(60px); opacity: 0.9;
    }
    .hero-aurora b {
      position: absolute; display: block; border-radius: 50%;
      mix-blend-mode: screen; will-change: transform;
    }
    .hero-aurora b:nth-child(1) {
      width: 60vw; height: 60vw; left: 6%; top: 10%;
      background: radial-gradient(circle, rgba(158,104,52,0.30), transparent 66%);
      animation: blobA 24s ease-in-out infinite;
    }
    .hero-aurora b:nth-child(2) {
      width: 48vw; height: 48vw; right: 4%; top: 24%;
      background: radial-gradient(circle, rgba(210,176,110,0.20), transparent 66%);
      animation: blobB 28s ease-in-out infinite;
    }
    .hero-aurora b:nth-child(3) {
      width: 54vw; height: 54vw; left: 28%; bottom: -4%;
      background: radial-gradient(circle, rgba(96,66,40,0.38), transparent 70%);
      animation: blobC 32s ease-in-out infinite;
    }
    @keyframes blobA { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(8%,-6%) scale(1.15)} }
    @keyframes blobB { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-7%,5%) scale(1.1)} }
    @keyframes blobC { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(4%,-8%) scale(1.2)} }

    /* Layer 1 — rotating light rays */
    .hero-rays {
      position: absolute; left: 50%; top: 52%; z-index: 1;
      width: 160vmax; height: 160vmax; transform: translate(-50%,-50%);
      pointer-events: none;
      background: repeating-conic-gradient(from 0deg at 50% 50%,
        rgba(204,174,82,0.035) 0deg 1.5deg,
        transparent 1.5deg 14deg);
      -webkit-mask: radial-gradient(circle at 50% 50%, transparent 6%, black 20%, transparent 50%);
              mask: radial-gradient(circle at 50% 50%, transparent 6%, black 20%, transparent 50%);
      opacity: 0; will-change: transform;
      animation-name: raysSpin, raysIn;
      animation-duration: 90s, 3s;
      animation-timing-function: linear, ease;
      animation-iteration-count: infinite, 1;
      animation-fill-mode: none, forwards;
    }
    @keyframes raysSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }
    @keyframes raysIn { to { opacity: 1; } }

    /* Layer 2 — particle canvas */
    #heroCanvas {
      position: absolute; inset: 0; z-index: 2;
      pointer-events: none; display: block;
    }

    /* Layer 3 — THE PRISM */
    .hero-prism-stage {
      position: absolute; left: 50%; top: 45%; z-index: 3;
      transform: translate(-50%,-50%);
      width: min(440px, 80vw, 52vh);
      pointer-events: none;
      will-change: transform;
      container-type: inline-size;   /* enables cqw units for the title */
    }

    /* Headline locked inside the triangle — scales 1:1 with it via cqw */
    .hero-prism-title {
      position: absolute; left: 50%; top: 64%;
      transform: translate(-50%, -50%);
      z-index: 4; width: 70cqw; text-align: center; margin: 0;
      pointer-events: none;
    }
    .hero-prism-title span {
      display: inline-block;
      font-family: 'Cormorant Garamond', serif; font-weight: 300;
      font-size: 13cqw; line-height: 0.92; letter-spacing: -0.02em;
      color: #EDE8DF;
      opacity: 0; animation: fadeUp 1s 0.7s ease forwards;
    }
    .hero-prism-title em { font-style: italic; color: #CCAE52; }

    .hero-prism-tilt {
      width: 100%;
      transform-style: preserve-3d;
      will-change: transform;
    }
    .hero-prism {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 0.866;       /* equilateral */
      transform-style: preserve-3d;
      animation: prismFloat 9s ease-in-out infinite;
      will-change: transform;
    }
    @keyframes prismFloat {
      0%,100% { transform: translateY(0) rotate(0.001deg); }
      50%      { transform: translateY(-2.2%); }
    }
    /* Soft glow halo behind — neutral warm gold */
    .hero-prism::before {
      content: ''; position: absolute; inset: -18%;
      background: radial-gradient(ellipse 58% 54% at 50% 58%,
        rgba(204,174,82,0.16), transparent 70%);
      filter: blur(26px); z-index: -1;
      animation: haloPulse 7s ease-in-out infinite;
    }
    @keyframes haloPulse { 0%,100%{opacity:0.6} 50%{opacity:0.95} }

    /* Triangular face — barely-there dark glass, only for text contrast */
    .hero-prism-face {
      position: absolute; inset: 0;
      clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
      background:
        radial-gradient(ellipse 70% 60% at 50% 62%,
          rgba(12,11,9,0.42) 0%,
          rgba(12,11,9,0.16) 55%,
          transparent 80%);
      overflow: hidden;
    }
    .hero-prism-face .seam {
      position: absolute; top: 8%; bottom: 0; left: 50%;
      width: 1px; transform: translateX(-0.5px);
      background: linear-gradient(to bottom,
        rgba(224,196,112,0.55), rgba(204,174,82,0.12) 65%, transparent);
    }
    .hero-prism-face .shimmer {
      position: absolute; top: -50%; bottom: -50%; left: -60%;
      width: 40%;
      background: linear-gradient(105deg,
        transparent, rgba(224,196,112,0.10) 48%, rgba(255,244,214,0.16) 50%,
        rgba(224,196,112,0.10) 52%, transparent);
      transform: skewX(-18deg);
      animation: shimmerSweep 8s ease-in-out infinite;
    }
    @keyframes shimmerSweep {
      0%   { left: -60%; }
      60%  { left: 135%; }
      100% { left: 135%; }
    }

    /* Crisp gold frame — refined, two hairlines */
    .hero-prism-frame { position: absolute; inset: 0; overflow: visible; }
    .hero-prism-frame polygon { fill: none; }
    .hero-prism-frame .outer { stroke: url(#edgeGrad); stroke-width: 0.7; }
    .hero-prism-frame .inner { stroke: rgba(204,174,82,0.30); stroke-width: 0.35; }

    /* Travelling light bead — runs the perimeter (the WOW detail) */
    .hero-prism-trace { position: absolute; inset: 0; overflow: visible; }
    .hero-prism-trace polygon {
      fill: none;
      stroke: rgba(255,248,228,0.98);
      stroke-width: 1.6;
      stroke-linecap: round; stroke-linejoin: round;
      stroke-dasharray: 9 279;          /* glowing comet head + gap (perimeter ≈ 288) */
      filter: drop-shadow(0 0 3px rgba(224,196,112,1))
              drop-shadow(0 0 9px rgba(224,196,112,0.7));
      animation: traceRun 6s linear infinite;
    }
    .hero-prism-trace polygon.lag {
      stroke: rgba(224,196,112,0.5);
      stroke-width: 1;
      stroke-dasharray: 22 266;         /* soft trailing tail behind the head */
      filter: drop-shadow(0 0 6px rgba(224,196,112,0.5));
      animation: traceRun 6s linear infinite;
      animation-delay: -0.22s;
    }
    @keyframes traceRun { to { stroke-dashoffset: -288; } }

    /* Apex spark */
    .hero-prism-apex {
      position: absolute; left: 50%; top: -1.5%;
      width: 7px; height: 7px; transform: translate(-50%,-50%);
      background: radial-gradient(circle, #fff, rgba(224,196,112,0.6) 42%, transparent 72%);
      border-radius: 50%;
      animation: apexTwinkle 4s ease-in-out infinite;
    }
    @keyframes apexTwinkle { 0%,100%{opacity:0.35;transform:translate(-50%,-50%) scale(0.8)} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.25)} }

    .hero-prism-stage { opacity: 0; animation: prismReveal 1.6s 0.3s cubic-bezier(0.16,1,0.3,1) forwards; }
    @keyframes prismReveal {
      from { opacity: 0; transform: translate(-50%,-50%) scale(0.82); }
      to   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
    }

    /* Layer 4 — small parallax floater triangles */
    .hero-floaters { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
    .hero-floaters .ft {
      position: absolute; opacity: 0;
      animation: ftIn 2s ease forwards;
      will-change: transform;
    }
    .hero-floaters .ft polygon { fill: none; stroke: rgba(204,174,82,0.2); stroke-width: 1; }
    .ft.f1 { width: clamp(120px,18vw,230px); top: 14%; right: 9%;  animation-delay: 1.2s; }
    .ft.f2 { width: clamp(50px,8vw,100px);   bottom: 17%; left: 7%; animation-delay: 1.5s; }
    .ft.f3 { width: clamp(26px,4vw,52px);    top: 32%; left: 16%;   animation-delay: 1.8s; }
    .ft.f4 { width: clamp(34px,5vw,64px);    bottom: 30%; right: 18%; animation-delay: 2s; }
    @keyframes ftIn { to { opacity: 1; } }

    /* Top wordmark — sits high, above the triangle apex */
    .hero-topmark {
      position: absolute; top: clamp(6rem, 13vh, 9rem); left: 50%;
      transform: translateX(-50%); z-index: 6; width: 100%; text-align: center;
    }
    .hero-topmark span {
      font-size: clamp(0.5rem, 1.1vw, 0.62rem); letter-spacing: 0.5em; text-transform: uppercase;
      color: rgba(204,174,82,0.7);
      opacity: 0; animation: fadeUp 0.8s 0.5s ease forwards;
    }

    /* Content — anchored to the lower third, below the drawing */
    .hero-content {
      position: absolute; left: 50%; bottom: clamp(2.5rem, 7vh, 5rem);
      transform: translate(-50%, 0);
      z-index: 6; width: 100%; text-align: center;
      padding: 0 clamp(1rem, 4vw, 3rem);
      display: flex; flex-direction: column; align-items: center;
      will-change: transform, opacity;
    }
    .hero-tagline {
      font-size: clamp(0.56rem, 1.2vw, 0.68rem); letter-spacing: 0.3em; text-transform: uppercase;
      color: rgba(237,232,223,0.42); margin-bottom: 2.2rem;
      opacity: 0; animation: fadeUp 0.8s 0.85s ease forwards;
    }
    .hero-actions {
      display: flex; gap: 0.9rem; flex-wrap: wrap; justify-content: center;
      opacity: 0; animation: fadeUp 0.8s 1s ease forwards;
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: none; }
    }

    /* Vignette — readability */
    .hero-vignette {
      position: absolute; inset: 0; z-index: 5;
      background:
        linear-gradient(180deg,
          rgba(24,21,18,0.55) 0%,
          rgba(24,21,18,0.12) 34%,
          rgba(24,21,18,0.40) 66%,
          rgba(24,21,18,0.97) 100%),
        radial-gradient(ellipse 90% 70% at 50% 45%,
          transparent 40%, rgba(24,21,18,0.45) 100%);
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       MARQUEE
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .marquee-wrap {
      overflow: hidden; padding: 1rem 0; background: #1E1B17;
      border-top: 1px solid rgba(204,174,82,0.1);
      border-bottom: 1px solid rgba(204,174,82,0.1);
    }
    .marquee-track {
      display: flex; width: max-content;
      animation: marquee 32s linear infinite;
    }
    @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    .marquee-item {
      font-family: 'Cormorant Garamond', serif; font-style: italic;
      font-size: clamp(0.72rem, 1.3vw, 0.86rem); letter-spacing: 0.2em;
      color: rgba(204,174,82,0.32); padding: 0 2.8rem; white-space: nowrap;
      border-right: 1px solid rgba(204,174,82,0.09);
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       SHARED
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .section-eyebrow {
      display: block; font-size: 0.56rem; letter-spacing: 0.52em; text-transform: uppercase;
      color: #CCAE52; margin-bottom: 0.9rem;
    }
    .section-title {
      font-family: 'Cormorant Garamond', serif; font-weight: 300;
      font-size: clamp(2.2rem, 4.5vw, 4rem); color: #EDE8DF;
      line-height: 1.05; letter-spacing: -0.01em;
    }
    .section-title em { font-style: italic; color: #CCAE52; }
    .gold-rule { width: 36px; height: 1px; background: rgba(204,174,82,0.45); }

    .reveal {
      opacity: 0; transform: translateY(30px);
      transition: opacity 0.9s ease, transform 0.9s ease;
    }
    .reveal.d1 { transition-delay: 0.12s; }
    .reveal.d2 { transition-delay: 0.24s; }
    .reveal.d3 { transition-delay: 0.38s; }
    .reveal.d4 { transition-delay: 0.52s; }
    .reveal.in  { opacity: 1; transform: none; }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       FEATURED DROP
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    /* ── DROP INTRO — narrative transition hero → product ── */
    #drop-intro {
      background: #1E1B17;
      padding: clamp(6rem, 15vh, 12rem) clamp(1.5rem, 5vw, 4rem) clamp(3.5rem, 7vh, 6rem);
      text-align: center;
      display: flex; flex-direction: column; align-items: center;
    }
    .intro-title {
      font-family: 'Cormorant Garamond', serif; font-weight: 300;
      font-size: clamp(2rem, 5vw, 4rem); line-height: 1.12; letter-spacing: -0.02em;
      color: #EDE8DF; max-width: 18ch; margin: 0 auto;
    }
    .intro-title em { font-style: italic; color: #CCAE52; }
    .intro-lead {
      margin-top: 1.8rem; max-width: 48ch;
      font-size: 0.86rem; line-height: 1.95; color: rgba(237,232,223,0.5);
    }
    .intro-down {
      margin-top: clamp(2.5rem, 5vh, 4rem); width: 1px; height: 46px;
      background: linear-gradient(to bottom, #CCAE52, transparent);
      animation: scrollPulse 2.4s ease-in-out infinite;
    }
    @keyframes scrollPulse { 0%,100%{opacity:.25;transform:scaleY(1)} 55%{opacity:.75;transform:scaleY(1.18)} }

    /* ── FEATURED ── */
    #featured {
      display: grid; grid-template-columns: 1fr 1fr;
      min-height: 100dvh; background: #1E1B17;
      overflow: hidden;
    }
    @media (max-width: 768px) { #featured { grid-template-columns: 1fr; } }

    .feat-visual {
      position: relative; display: flex; align-items: center; justify-content: center;
      padding: 8%; overflow: hidden; min-height: 55vmin;
    }
    .feat-glow {
      position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(ellipse 65% 65% at 50% 55%,
        rgba(55,85,45,0.28) 0%, transparent 72%);
    }
    /* Two box faces — front large + reverse as a framed inset */
    .feat-boxes {
      position: relative; z-index: 1;
      width: 100%; max-width: 520px; aspect-ratio: 1 / 1;
      will-change: transform;
      transform: perspective(1100px);
      transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
    }
    .feat-boxes .box-front {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: contain;
      filter: drop-shadow(0 30px 70px rgba(0,0,0,0.6));
      z-index: 1;
    }
    .feat-boxes .box-back {
      position: absolute; right: -3%; bottom: -5%;
      width: 44%; aspect-ratio: 1 / 1; object-fit: cover;
      background: #14110d;
      border: 1px solid rgba(204,174,82,0.5);
      box-shadow: 0 22px 55px rgba(0,0,0,0.72);
      z-index: 2;
    }
    .feat-boxes .box-cap {
      position: absolute; right: -3%; bottom: -5%;
      width: 44%; text-align: center;
      transform: translateY(115%);
      font-size: 0.46rem; letter-spacing: 0.35em; text-transform: uppercase;
      color: rgba(204,174,82,0.6); z-index: 2;
    }
    @media (max-width: 480px) {
      .feat-boxes .box-back { width: 50%; right: -2%; bottom: -3%; }
    }

    .feat-info {
      display: flex; flex-direction: column; justify-content: center;
      padding: clamp(3rem, 6vw, 7rem) clamp(2rem, 5vw, 6rem);
      background: #181512;
    }
    .feat-number {
      font-size: 0.5rem; letter-spacing: 0.52em; text-transform: uppercase;
      color: rgba(204,174,82,0.35); margin-bottom: 1.2rem;
    }
    .feat-title {
      font-family: 'Cormorant Garamond', serif; font-weight: 300;
      font-size: clamp(3rem, 5.5vw, 5.5rem); line-height: 0.93;
      letter-spacing: -0.02em; color: #EDE8DF;
    }
    .feat-subtitle {
      font-family: 'Cormorant Garamond', serif; font-style: italic;
      font-size: clamp(1.1rem, 2vw, 1.45rem); color: #CCAE52;
      margin-top: 0.5rem; margin-bottom: 2.4rem;
    }
    .feat-desc {
      font-size: 0.8rem; line-height: 1.95;
      color: rgba(237,232,223,0.52); max-width: 380px; margin-bottom: 2.8rem;
    }
    .feat-products { display: flex; gap: 0.75rem; margin-bottom: 2.8rem; }
    .feat-thumb {
      width: 74px; height: 74px; object-fit: cover;
      border: 1px solid rgba(204,174,82,0.12);
      transition: border-color 0.3s ease, transform 0.3s ease;
    }
    .feat-thumb:hover { border-color: rgba(204,174,82,0.55); transform: scale(1.05); }
    .feat-alloc {
      font-size: 0.52rem; letter-spacing: 0.38em; text-transform: uppercase;
      color: rgba(204,174,82,0.42); margin-bottom: 1.8rem;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       EDITIONS GRID
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    #editions {
      padding: clamp(5rem, 9vw, 10rem) clamp(1.2rem, 4vw, 4rem);
      background: #181512;
    }
    .editions-header {
      display: flex; align-items: flex-end; justify-content: space-between;
      margin-bottom: clamp(2.5rem, 4vw, 4.5rem); flex-wrap: wrap; gap: 1rem;
    }
    .editions-hint {
      font-size: 0.55rem; letter-spacing: 0.28em; text-transform: uppercase;
      color: rgba(237,232,223,0.18); align-self: flex-end;
    }
    .editions-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 3px;
    }
    @media (max-width: 960px)  { .editions-grid { grid-template-columns: repeat(2, 1fr); } }

    .edition-card {
      position: relative; overflow: hidden; aspect-ratio: 3/4;
      background: #252119; cursor: none;
    }
    @media (pointer: coarse) { .edition-card { cursor: pointer; } }

    .edition-card img {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover;
      filter: brightness(0.68) saturate(0.75);
      transition: transform 0.75s cubic-bezier(0.16,1,0.3,1),
                  filter 0.65s ease;
      will-change: transform, filter;
    }
    .edition-card:hover img {
      transform: scale(1.07);
      filter: brightness(0.88) saturate(1.05);
    }
    .edition-card.active img {
      filter: brightness(0.82) saturate(1.05);
    }
    .edition-card.active::after {
      content: '';
      position: absolute; inset: 0; z-index: 3;
      box-shadow: inset 0 0 0 2px rgba(204,174,82,0.5);
      pointer-events: none;
    }

    .edition-overlay {
      position: absolute; inset: 0; z-index: 2;
      background: linear-gradient(to top, rgba(24,21,18,0.92) 0%, rgba(24,21,18,0.18) 48%, transparent 72%);
      display: flex; flex-direction: column; justify-content: flex-end;
      padding: clamp(1rem, 2.5vw, 1.6rem);
    }
    .edition-badge {
      display: inline-block; align-self: flex-start;
      font-size: 0.43rem; letter-spacing: 0.38em; text-transform: uppercase;
      padding: 0.28rem 0.65rem; margin-bottom: 0.65rem;
    }
    .edition-badge.available { background: #CCAE52; color: #181512; }
    .edition-badge.soon { border: 1px solid rgba(204,174,82,0.38); color: rgba(204,174,82,0.65); }
    .edition-badge.sold { border: 1px solid rgba(237,232,223,0.12); color: rgba(237,232,223,0.28); }

    .edition-name {
      font-family: 'Cormorant Garamond', serif; font-weight: 400;
      font-size: clamp(1rem, 2.2vw, 1.4rem); color: #EDE8DF; line-height: 1.15;
    }
    .edition-sub {
      font-size: 0.52rem; letter-spacing: 0.25em; text-transform: uppercase;
      color: rgba(237,232,223,0.35); margin-top: 0.3rem;
    }
    .edition-card {
      opacity: 0; transform: translateY(36px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }
    .edition-card.in { opacity: 1; transform: none; }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       ORDER CTA
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    #order {
      padding: clamp(7rem, 13vw, 14rem) clamp(1.2rem, 4vw, 4rem);
      text-align: center; background: #181512;
      border-top: 1px solid rgba(204,174,82,0.08);
    }
    .order-title {
      font-family: 'Cormorant Garamond', serif; font-weight: 300;
      font-size: clamp(3.2rem, 8.5vw, 9rem); line-height: 0.9;
      letter-spacing: -0.03em; color: #EDE8DF; margin-bottom: 1.5rem;
    }
    .order-title em { font-style: italic; color: #CCAE52; }
    .order-sub {
      font-size: 0.74rem; letter-spacing: 0.14em; line-height: 2;
      color: rgba(237,232,223,0.38); margin-bottom: 3.5rem;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       FOOTER
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    footer {
      background: #141210;
      border-top: 1px solid rgba(204,174,82,0.07);
      padding: 2rem clamp(1.2rem, 4vw, 4rem);
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 1rem;
    }
    footer p { font-size: 0.49rem; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(237,232,223,0.18); }
    footer .footer-mark {
      font-family: 'Cormorant Garamond', serif; font-style: italic;
      font-size: 0.72rem; color: rgba(204,174,82,0.25); letter-spacing: 0.1em;
    }

    /* ── Lazy-load blur ── */
    img[loading="lazy"] { transition: filter 0.5s ease; }
    img[loading="lazy"].loading { filter: blur(10px) brightness(0.6); }

    /* ── Large screen max-width container ── */
    .site-max { max-width: 2200px; margin-left: auto; margin-right: auto; }

    /* ── LIGHTBOX ── */
    .zoomable { cursor: zoom-in; }
    @media (pointer: coarse) { .zoomable { cursor: pointer; } }

    .lightbox {
      position: fixed; inset: 0; z-index: 1200;
      display: flex; align-items: center; justify-content: center;
      padding: clamp(1.5rem, 6vmin, 5rem);
      background: rgba(8,7,5,0.92);
      backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
      opacity: 0; visibility: hidden;
      transition: opacity 0.4s ease, visibility 0.4s ease;
    }
    .lightbox.open { opacity: 1; visibility: visible; }
    .lightbox img {
      max-width: min(92vw, 1100px); max-height: 86vh;
      object-fit: contain; background: #14110d;
      border: 1px solid rgba(204,174,82,0.22);
      box-shadow: 0 36px 100px rgba(0,0,0,0.75);
      transform: scale(0.92); opacity: 0;
      transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), opacity 0.4s ease;
    }
    .lightbox.open img { transform: scale(1); opacity: 1; }
    .lightbox-cap {
      position: absolute; bottom: clamp(1.2rem, 4vh, 2.4rem); left: 0; right: 0;
      text-align: center; font-size: 0.55rem; letter-spacing: 0.35em;
      text-transform: uppercase; color: rgba(204,174,82,0.7);
      opacity: 0; transition: opacity 0.5s 0.15s ease;
    }
    .lightbox.open .lightbox-cap { opacity: 1; }
    .lightbox-close {
      position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem);
      width: 46px; height: 46px;
      display: flex; align-items: center; justify-content: center;
      border: 1px solid rgba(204,174,82,0.4); background: transparent;
      color: #CCAE52; font-size: 1.3rem; line-height: 1; cursor: pointer;
      transition: background 0.3s ease, color 0.3s ease;
    }
    .lightbox-close:hover { background: #CCAE52; color: #181512; }
    @media (pointer: coarse) { .lightbox-close { cursor: pointer; } }