:root{
    --cream:#F4F1EA;
    --paper:#EFEBE1;
    --char:#1A1A1A;
    --ink:#101010;
    --mute:#6B655B;
    --rule:#1A1A1A;
    --cobalt:#1B3FCB;
    --tomato:#E33A1E;
    --cadmium:#F2C111;
    --licht:#2D8BD7;
    --ivory:#EDE6D2;
    --midnight:#0F1424;
    --gutter: clamp(20px, 4vw, 64px);
  }
  *,*::before,*::after{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; background:var(--cream); color:var(--char); }
  html{ scroll-behavior:auto; }
  body{
    font-family:"DM Sans", system-ui, sans-serif;
    font-size:15px;
    line-height:1.5;
    letter-spacing:0.005em;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    cursor:none;
  }
  a{ color:inherit; text-decoration:none; }
  button{ font:inherit; color:inherit; background:none; border:0; cursor:none; }
  img,svg{ display:block; max-width:100%; }

  /* ---------- Custom octagon cursor ---------- */
  .cursor{
    position:fixed; top:0; left:0; width:28px; height:28px;
    pointer-events:none; z-index:9999;
    transform:translate(-50%,-50%);
    transition: width .18s ease, height .18s ease, background-color .18s ease, opacity .2s ease;
    mix-blend-mode:difference;
    color:#fff;
  }
  .cursor svg{ width:100%; height:100%; overflow:visible; }
  .cursor polygon{
    fill:none; stroke:currentColor; stroke-width:1.25;
    transition: fill .18s ease, stroke-width .18s ease;
  }
  .cursor.is-pointer{ width:14px; height:14px; }
  .cursor.is-pointer polygon{ fill:currentColor; }
  @media (hover:none){
    body{ cursor:auto; }
    .cursor{ display:none; }
    button, a{ cursor:auto; }
  }

  /* ---------- Loader ---------- */
  .loader{
    position:fixed; inset:0; background:var(--cream); z-index:1000;
    display:flex; align-items:center; justify-content:center;
    transition: opacity .6s ease .2s, visibility 0s linear .9s;
  }
  .loader svg{ width:84px; height:84px; }
  .loader polygon{
    fill:none; stroke:var(--char); stroke-width:1.25;
    stroke-dasharray: 380;
    stroke-dashoffset: 380;
    animation: drawOcto 2s ease forwards;
  }
  .loader .lbl{
    position:absolute; bottom:6vh; left:0; right:0; text-align:center;
    font-family:"Cormorant Garamond", serif; font-style:italic; font-size:13px;
    letter-spacing:.04em; color:var(--mute);
    opacity:0; animation: fadeIn .6s ease 1.6s forwards;
  }
  body.ready .loader{ opacity:0; visibility:hidden; }
  @keyframes drawOcto{ to{ stroke-dashoffset:0; } }
  @keyframes fadeIn{ to{ opacity:1; } }

  /* ---------- Top chrome ---------- */
  .topbar{
    position:fixed; top:0; left:0; right:0; z-index:50;
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
    padding: 22px var(--gutter);
    transition: color .6s ease, background-color .4s ease, opacity .5s ease;
    color: var(--char);
  }
  .topbar .wordmark{ justify-self:start; grid-column: 1; }
  .topbar .nav{ justify-self:center; grid-column: 2; }
  .topbar .cart{ justify-self:end; grid-column: 3; }
  /* Over the hero, dynamically tinted by JS to match panel fg */
  .topbar.is-hero{ mix-blend-mode: difference; color:#fff; }
  .topbar.is-hidden{ opacity:0; pointer-events:none; }
  .wordmark{
    font-family:"Cormorant Garamond", serif;
    font-weight:500;
    font-size: clamp(20px, 1.6vw, 24px);
    letter-spacing:-0.01em;
    line-height:1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .wordmark-mark{
    height: 26px;
    width: auto;
    flex: 0 0 auto;
    transition: height .35s ease;
  }
  .wordmark-text{
    display: inline-block;
    overflow-x: hidden;
    overflow-y: visible;
    white-space: nowrap;
    max-width: 30ch;
    opacity: 1;
    /* room for descender (g, é) so it isn't clipped */
    padding-bottom: 0.2em;
    margin-bottom: -0.2em;
    transition: max-width .5s ease, opacity .35s ease, margin-left .35s ease;
  }
  .topbar.is-compact .wordmark-text{
    max-width: 0;
    opacity: 0;
    margin-left: -10px; /* eat the flex gap so the logo doesn't sit with a phantom space */
  }
  .topbar.is-compact .wordmark-mark{
    height: 28px; /* tiny upscale so the collapsed crest reads as the wordmark */
  }
  @media (max-width: 600px){
    .topbar{ padding: 16px var(--gutter); }
    .wordmark{ font-size: 16px; gap: 8px; }
    .wordmark-mark{ height: 22px; }
    .topbar.is-compact .wordmark-mark{ height: 24px; }
    .cart{ font-size: 10px; }
  }
  .nav{ display:flex; gap: clamp(18px,2.4vw,34px); font-size:11px; letter-spacing:.18em; text-transform:uppercase; }
  .nav a{ position:relative; }
  .nav a::after{
    content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px; background:currentColor;
    transform:scaleX(0); transform-origin:left center;
    transition: transform .35s ease;
  }
  .nav a:hover::after{ transform:scaleX(1); }
  .cart{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; }

  /* ---------- HERO: six color flips ---------- */
  .hero{
    position:relative;
    height: 600vh;
  }
  .hero-stage{
    position:sticky; top:0; height:100vh; width:100%;
    overflow:hidden;
    background:var(--cobalt);
    transition: background-color .9s cubic-bezier(.7,0,.2,1);
  }
  .hero-frame{
    position:absolute; inset:0;
    display:grid; grid-template-columns: 1fr; grid-template-rows: 1fr;
  }
  .hero-card{
    position:absolute; inset:0;
    display:grid; place-items:center;
    opacity:0; transition: opacity .8s ease;
  }
  .hero-card.is-active{ opacity:1; }

  .cuff-slot{
    position:relative;
    width: min(46vw, 560px);
    aspect-ratio: 1/1;
    background: rgba(0,0,0,0.07);
    outline:1px solid rgba(255,255,255,0.35);
    outline-offset:0;
    display:grid; place-items:center;
    color: rgba(255,255,255,.85);
  }
  .cuff-slot::after{
    content:""; position:absolute; inset:0;
    background: repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 14px);
  }
  .cuff-slot .tag{
    position:relative; z-index:2;
    font-family:"DM Sans", sans-serif;
    font-size:11px; letter-spacing:.22em; text-transform:uppercase;
    text-align:center; line-height:1.6;
    padding:8px 12px;
    color: rgba(255,255,255,.85);
  }
  .cuff-slot .tag em{ font-style:normal; opacity:.7; display:block; font-size:10px; letter-spacing:.18em; }
  .hero-card[data-tone="ivory"] .cuff-slot{ background: rgba(0,0,0,0.05); outline-color: rgba(26,26,26,.25); color:rgba(26,26,26,.7); }
  .hero-card[data-tone="ivory"] .cuff-slot .tag{ color: rgba(26,26,26,.7); }
  .hero-card[data-tone="ivory"] .cuff-slot::after{ background: repeating-linear-gradient(135deg, rgba(0,0,0,0.04) 0 2px, transparent 2px 14px); }
  .hero-card[data-tone="cadmium"] .cuff-slot{ outline-color: rgba(26,26,26,.35); color:rgba(26,26,26,.78); }
  .hero-card[data-tone="cadmium"] .cuff-slot .tag{ color: rgba(26,26,26,.78); }
  .hero-card[data-tone="cadmium"] .cuff-slot::after{ background: repeating-linear-gradient(135deg, rgba(0,0,0,0.05) 0 2px, transparent 2px 14px); }

  .hero-meta{
    position:absolute; left: var(--gutter); right: var(--gutter); bottom: 6vh;
    display:flex; justify-content:space-between; align-items:flex-end;
    color:#fff;
    transition: color .9s ease, opacity .35s ease;
  }
  .hero-line{
    font-family:"Cormorant Garamond", serif;
    font-weight: 400;
    font-size: clamp(28px, 4.2vw, 60px);
    line-height: 1.06;
    letter-spacing:-0.015em;
    max-width: 22ch;
    margin:0;
    opacity:0; transform: translateY(8px);
    animation: heroIn 1.1s ease .5s forwards;
  }
  @keyframes heroIn{ to{ opacity:1; transform:none; } }

  .hero-index{
    font-family:"DM Sans", sans-serif;
    font-size:11px; letter-spacing:.22em; text-transform:uppercase;
    display:flex; gap:18px; align-items:baseline;
  }
  .hero-index .num{ font-family:"Cormorant Garamond",serif; font-size:18px; letter-spacing:0; }
  .hero-index .of{ opacity:.7; }
  .hero-index .name{ opacity:.85; }

  .hero-ticks{
    position:absolute; right: var(--gutter); top:50%; transform:translateY(-50%);
    display:flex; flex-direction:column; gap:10px; align-items:flex-end;
    color:#fff;
  }
  .hero-ticks .tick{
    width:18px; height:1px; background:currentColor; opacity:.4; transition: width .4s ease, opacity .4s ease;
  }
  .hero-ticks .tick.is-active{ width:34px; opacity:1; }

  /* Hero heraldic stack: a column of fleurs mirroring the ticks */
  .hero-fleurs{
    position:absolute; left: var(--gutter); top:50%; transform:translateY(-50%);
    display:flex; flex-direction:column; gap: 18px; align-items:center;
    color:#fff;
    transition: color .9s ease;
    pointer-events:none;
  }
  .hero-fleurs .f{
    width:18px; height:24px;
    background: currentColor;
    -webkit-mask: url('fleur-de-lis.png') center/contain no-repeat;
            mask: url('fleur-de-lis.png') center/contain no-repeat;
    opacity:.32;
  }
  .hero-fleurs .f.lg{ width:30px; height:40px; opacity:.6; }
  .hero-fleurs .rule{ width:1px; height: 32px; background: currentColor; opacity:.25; }

  /* ---------- Section frame ---------- */
  section{ position:relative; }
  .sect-label{
    display:flex; justify-content:space-between; align-items:baseline;
    padding: 28px var(--gutter);
    font-size:11px; letter-spacing:.22em; text-transform:uppercase;
    border-bottom:1px solid var(--rule);
  }
  .sect-label .num{ font-family:"Cormorant Garamond", serif; font-size:14px; letter-spacing:0; text-transform:none; color: var(--mute); }

  /* ---------- EDITORIAL ---------- */
  .editorial{ background:var(--cream); color:var(--char); }
  .ed-intro{
    padding: 14vh var(--gutter) 10vh;
    display:grid; grid-template-columns: 1fr; gap: 8vh;
  }
  .ed-intro .kicker{
    font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--mute);
  }
  .ed-headline{
    font-family:"Cormorant Garamond", serif;
    font-weight:400;
    font-size: clamp(40px, 7.2vw, 132px);
    line-height: .98;
    letter-spacing:-0.02em;
    max-width: 16ch;
    margin: 0;
  }

  .ed-body{
    margin-top: 6vh;
    display:grid; grid-template-columns: 1fr;
    gap: 24px;
    max-width: 56ch;
    margin-left:auto;
    font-family:"Cormorant Garamond", serif;
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 1.55;
    color:var(--char);
  }
  .ed-body p{ margin:0; }

  /* Reserve CTA repeated earlier in the page */
  .reserve-cta{
    display:flex; align-items:center; justify-content:space-between; gap: 24px;
    margin-top: 6vh;
    padding-top: 28px;
    border-top:1px solid var(--rule);
    max-width: 720px;
    margin-left:auto; margin-right:0;
    flex-wrap:wrap;
  }
  .reserve-cta .meta{
    font-family:"Cormorant Garamond", serif; font-style:italic;
    font-size: clamp(15px, 1.2vw, 18px); color:var(--mute);
    max-width: 32ch;
  }
  .reserve-cta .btn{
    display:inline-flex; align-items:center; gap:14px;
    border:1px solid var(--char);
    padding: 16px 24px;
    font-size:11px; letter-spacing:.24em; text-transform:uppercase;
    transition: background-color .3s ease, color .3s ease;
    white-space:nowrap;
  }
  .reserve-cta .btn:hover{ background:var(--char); color: var(--cream); }
  .reserve-cta .btn .arrow{ font-family:"Cormorant Garamond",serif; font-size:18px; letter-spacing:0; text-transform:none; }

  .photo-slot{
    position:relative;
    background:var(--ivory);
    color: rgba(26,26,26,.7);
    display:grid; place-items:center;
    overflow:hidden;
  }
  .photo-slot::after{
    content:""; position:absolute; inset:0;
    background:repeating-linear-gradient(135deg, rgba(0,0,0,0.045) 0 2px, transparent 2px 16px);
    pointer-events:none;
  }
  .photo-slot .tag{
    position:relative; z-index:2;
    font-size:10px; letter-spacing:.24em; text-transform:uppercase;
    text-align:center; line-height:1.7;
    border:1px solid currentColor;
    padding:10px 14px;
    color: inherit;
  }
  .photo-slot .tag em{ display:block; font-style:normal; opacity:.7; }

  .ed-full{ aspect-ratio: 16/9; }
  .ed-split{
    display:grid; grid-template-columns: 5fr 7fr; gap: var(--gutter);
    padding: 0 var(--gutter) 10vh;
    align-items:end;
  }
  .ed-split .photo-slot{ aspect-ratio: 4/5; }
  .ed-split .photo-slot.tall{ aspect-ratio: 3/4; }
  .ed-cap{
    font-family:"Cormorant Garamond", serif; font-style:italic;
    font-size: 15px; color:var(--mute);
    padding-top: 14px;
    border-top:1px solid var(--rule);
    line-height:1.5;
    max-width: 36ch;
    margin: 14px 0 0;
  }
  .ed-cap .plate{ color:var(--char); }

  .ed-twocol{
    display:grid; grid-template-columns: 1fr 1fr; gap: var(--gutter);
    padding: 0 var(--gutter) 12vh;
  }
  .ed-twocol .col{ display:flex; flex-direction:column; gap:16px; }
  .ed-twocol .photo-slot{ aspect-ratio: 4/5; }
  .ed-twocol .col.offset{ padding-top: 12vh; }
  .ed-twocol .col.offset .photo-slot{ aspect-ratio: 3/4; }

  /* French-quote interlude variant */
  .french-quote{ min-height: 70vh; gap: 18px; }
  .french-quote .quote{ font-size: clamp(34px, 6vw, 84px); max-width: 18ch; }
  .french-quote .quote-sub{
    font-family:"DM Sans", sans-serif; font-style:normal;
    font-size: 11px; letter-spacing:.24em; text-transform:uppercase;
    text-align:center; color: rgba(255,255,255,.7);
    margin: 14px 0 0;
  }

  /* Quiet editorial quote — cream background, single thin tomato accent */
  .quiet-quote{
    background: var(--cream); color: var(--char);
    position: relative;
    padding: 22vh var(--gutter) 22vh;
    display: grid;
    place-items: center;
    text-align: center;
  }
  .quiet-quote .rule{
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 1px; height: 14vh;
    background: var(--tomato);
  }
  .quiet-quote .meta-top{
    display:flex; align-items:baseline; gap: 16px;
    margin-bottom: 8vh;
    font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
    color: var(--mute);
  }
  .quiet-quote .meta-top .num{ font-family:"Cormorant Garamond", serif; font-style: italic; color: var(--tomato); font-size: 16px; letter-spacing: 0; text-transform: none; }
  .quiet-quote blockquote{
    margin: 0; max-width: 22ch;
    display: flex; flex-direction: column; gap: 32px;
  }
  .quiet-quote .fr{
    margin: 0;
    font-family: "Cormorant Garamond", serif;
    font-style: italic; font-weight: 400;
    font-size: clamp(34px, 5.6vw, 80px);
    line-height: 1.06;
    letter-spacing: -0.01em;
    color: var(--char);
  }
  .quiet-quote .en{
    margin: 0;
    font-family: "DM Sans", sans-serif;
    font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
    color: var(--mute);
  }

  /* ---------- COLOR BREAK BANNER ---------- */
  .color-break{
    min-height: 80vh;
    background: var(--tomato);
    display:grid; place-items:center;
    color:#fff;
    position:relative;
    padding: 16vh var(--gutter);
  }
  .color-break .tag{
    position:absolute; top:24px; left: var(--gutter);
    font-size:10px; letter-spacing:.22em; text-transform:uppercase; opacity:.7;
  }
  .color-break .num{
    position:absolute; bottom:24px; right: var(--gutter);
    font-family:"Cormorant Garamond", serif; font-style:italic;
    font-size: 16px; letter-spacing:0; opacity:.85;
  }
  .color-break .quote{
    font-family:"Cormorant Garamond", serif;
    font-weight:400; font-style:italic;
    font-size: clamp(28px, 4.5vw, 64px);
    line-height: 1.1;
    letter-spacing:-0.005em;
    max-width: 22ch;
    text-align:center;
    margin: 0;
  }
  .color-break .quote em, .color-break .quote i{ font-style:italic; }

  /* ---------- CONSTRUCTION ---------- */
  .construction{ background:var(--paper); color:var(--char); padding-bottom: 16vh; }
  .con-head{
    padding: 16vh var(--gutter) 8vh;
    display:grid; grid-template-columns: 1fr 1fr; gap: var(--gutter);
    align-items:end;
  }
  .con-head h2{
    margin:0;
    font-family:"Cormorant Garamond", serif;
    font-weight: 400;
    font-size: clamp(44px, 6.4vw, 96px);
    line-height:.98;
    letter-spacing:-0.015em;
    max-width: 14ch;
  }

  .con-head p{
    margin:0;
    max-width: 44ch;
    font-family:"Cormorant Garamond", serif;
    font-size: clamp(17px,1.3vw, 20px);
    line-height: 1.55;
    color: var(--char);
  }
  .con-grid{
    display:grid; grid-template-columns: repeat(12, 1fr);
    gap: var(--gutter);
    padding: 0 var(--gutter);
  }
  .con-cell{ display:flex; flex-direction:column; gap:14px; }
  .con-cell .photo-slot{ aspect-ratio: 1/1; background:var(--cream); }
  .con-cell .photo-slot.wide{ aspect-ratio: 4/3; }
  .con-cell .photo-slot.tall{ aspect-ratio: 3/4; }
  .con-cell .label{
    display:flex; justify-content:space-between; align-items:baseline; gap:12px;
    border-top:1px solid var(--rule); padding-top: 12px;
  }
  .con-cell .label .name{ font-family:"Cormorant Garamond", serif; font-size:18px; display:flex; align-items:baseline; gap:14px; }
  .con-cell .label .name .ord{ color: var(--mute); font-size:13px; letter-spacing:.04em; }
  .con-cell .label .num{ font-size:11px; letter-spacing:.2em; color:var(--mute); }
  .con-cell .desc{ font-size:13px; color:var(--mute); line-height:1.55; max-width: 32ch; margin: 0; }
  .c-a{ grid-column: 1 / span 5; }
  .c-b{ grid-column: 7 / span 6; padding-top: 16vh;}
  .c-c{ grid-column: 1 / span 4; padding-top: 8vh; }
  .c-d{ grid-column: 6 / span 7; padding-top: 0; }

  .con-specs{
    margin: 14vh var(--gutter) 0;
    border-top:1px solid var(--rule);
    border-bottom:1px solid var(--rule);
    display:grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  }
  .spec{
    padding: 32px 24px 32px 0;
    border-left:1px solid var(--rule);
    padding-left: 24px;
  }
  .spec:first-child{ border-left:0; padding-left:0; }
  .spec .k{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--mute); margin-bottom:14px; }
  .spec .v{ font-family:"Cormorant Garamond", serif; font-size: clamp(20px,1.6vw,26px); line-height:1.25; }
  .spec .v .q{ color: var(--mute); }

  /* ---------- ATELIER ---------- */
  .atelier{
    background:var(--midnight); color: var(--cream);
    padding: 0 0 14vh;
    position:relative;
  }
  .atelier .sect-label{ border-bottom-color: rgba(244,241,234,.18); color:var(--cream); }
  .atelier-head{
    padding: 12vh var(--gutter) 8vh;
    display:grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items:end;
  }
  .atelier-head h2{
    margin:0;
    font-family:"Cormorant Garamond", serif;
    font-weight:400;
    font-size: clamp(46px, 7vw, 120px);
    line-height:.96;
    letter-spacing:-0.02em;
    max-width: 12ch;
  }

  .atelier-head p{
    margin:0; max-width: 38ch;
    font-family:"Cormorant Garamond", serif;
    font-style:italic;
    font-size: clamp(17px,1.3vw,20px);
    line-height:1.55; color: rgba(244,241,234,.78);
  }

  .config{
    display:grid; grid-template-columns: 1.05fr .95fr; gap: var(--gutter);
    padding: 0 var(--gutter);
    align-items:stretch;
  }
  .config .stage{
    aspect-ratio: 4/5;
    background: var(--cobalt);
    position:relative;
    transition: background-color 1.1s cubic-bezier(.7,0,.2,1);
    display:grid; place-items:center;
  }
  .config .stage .cuff-slot{
    width: 60%;
    aspect-ratio:1/1;
    color: rgba(255,255,255,.85);
  }
  .config .stage-tag{
    position:absolute; top:18px; left:18px;
    font-size:10px; letter-spacing:.22em; text-transform:uppercase; color: rgba(255,255,255,.85);
  }
  .config .stage-name{
    position:absolute; bottom:24px; left:24px; right:24px;
    display:flex; justify-content:space-between; align-items:baseline;
    color:#fff;
  }
  .config .stage-name .n{ font-family:"Cormorant Garamond",serif; font-size: clamp(22px, 2vw, 32px); letter-spacing:-.01em; }
  .config .stage-name .n .sub{ color: rgba(255,255,255,.7); }
  .config[data-tone="ivory"] .stage-name .n .sub,
  .config[data-tone="cadmium"] .stage-name .n .sub{ color: rgba(26,26,26,.55); }
  .config .stage-name .p{ font-size:11px; letter-spacing:.2em; }

  .config[data-tone="cadmium"] .stage{ background:var(--cadmium); }
  .config[data-tone="cadmium"] .stage .cuff-slot,
  .config[data-tone="cadmium"] .stage-tag,
  .config[data-tone="cadmium"] .stage-name{ color: rgba(26,26,26,.85); }
  .config[data-tone="cadmium"] .stage .cuff-slot{ outline-color: rgba(26,26,26,.35); }
  .config[data-tone="cadmium"] .stage .cuff-slot::after{ background:repeating-linear-gradient(135deg, rgba(0,0,0,0.05) 0 2px, transparent 2px 14px); }

  .config[data-tone="tomato"] .stage{ background:var(--tomato); }
  .config[data-tone="licht"] .stage{ background:var(--licht); }
  .config[data-tone="ivory"] .stage{ background:var(--ivory); }
  .config[data-tone="ivory"] .stage .cuff-slot,
  .config[data-tone="ivory"] .stage-tag,
  .config[data-tone="ivory"] .stage-name{ color: rgba(26,26,26,.78); }
  .config[data-tone="ivory"] .stage .cuff-slot{ outline-color: rgba(26,26,26,.25); }
  .config[data-tone="ivory"] .stage .cuff-slot::after{ background:repeating-linear-gradient(135deg, rgba(0,0,0,0.045) 0 2px, transparent 2px 14px); }
  .config[data-tone="midnight"] .stage{ background:#0A0E1C; }

  .config .panel{
    display:flex; flex-direction:column; justify-content:space-between;
    padding: 12px 0 0;
  }
  .panel-block{ margin-bottom: 48px; }
  .panel-block .k{
    font-size:10px; letter-spacing:.22em; text-transform:uppercase;
    color: rgba(244,241,234,.55); margin-bottom: 22px;
    display:flex; justify-content:space-between; align-items:baseline;
  }
  .panel-block .k .v{ font-family:"Cormorant Garamond", serif; font-size:15px; letter-spacing:0; text-transform:none; color: var(--cream); }
  .swatches{
    display:grid; grid-template-columns: repeat(6, 1fr);
    gap: 14px;
  }
  .sw{
    position:relative; padding-bottom:100%;
    border:1px solid rgba(244,241,234,.18);
    transition: transform .5s ease, border-color .35s ease;
  }
  .sw[aria-pressed="true"]{ border-color: var(--cream); }
  .sw[aria-pressed="true"]::after{
    content:""; position:absolute; left:50%; bottom:-22px; transform:translateX(-50%);
    width:6px; height:6px; background:var(--cream); border-radius:50%;
  }
  .sw .fill{ position:absolute; inset:6px; }
  .sw[data-tone="cobalt"] .fill{ background:var(--cobalt); }
  .sw[data-tone="tomato"] .fill{ background:var(--tomato); }
  .sw[data-tone="cadmium"] .fill{ background:var(--cadmium); }
  .sw[data-tone="licht"] .fill{ background:var(--licht); }
  .sw[data-tone="ivory"] .fill{ background:var(--ivory); }
  .sw[data-tone="midnight"] .fill{ background:#0A0E1C; border:1px solid rgba(244,241,234,.25); }

  .row{ display:flex; gap:10px; flex-wrap:wrap; }
  .chip{
    border:1px solid rgba(244,241,234,.25); padding: 10px 16px;
    font-size:11px; letter-spacing:.16em; text-transform:uppercase;
    color: rgba(244,241,234,.78);
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
  }
  .chip[aria-pressed="true"]{ background: var(--cream); color: var(--ink); border-color: var(--cream); }
  .chip .ord{ font-family:"Cormorant Garamond",serif; text-transform:none; letter-spacing:0; font-size:13px; margin-right:8px; color: rgba(244,241,234,.55); }
  .chip[aria-pressed="true"] .ord{ color: rgba(16,16,16,.55); }

  .summary{
    border-top:1px solid rgba(244,241,234,.22);
    padding-top: 22px;
    display:grid; grid-template-columns: 1fr auto; gap:12px;
    align-items:end;
  }
  .summary .name{ font-family:"Cormorant Garamond", serif; font-size: clamp(22px, 2vw, 28px); letter-spacing:-.01em; }
  .summary .name .sub{ color: rgba(244,241,234,.6); }
  .summary .price{ font-family:"Cormorant Garamond", serif; font-size: clamp(22px,2vw,28px); }
  .summary .meta{ grid-column: 1 / -1; font-size:11px; letter-spacing:.18em; color: rgba(244,241,234,.55); text-transform:uppercase; }
  .summary .cta{
    grid-column: 1 / -1; margin-top: 22px;
    display:flex; align-items:center; justify-content:space-between;
    border-top:1px solid rgba(244,241,234,.22);
    padding-top: 22px;
    gap: 16px;
    flex-wrap:wrap;
  }
  .summary .cta .lt{ font-family:"Cormorant Garamond", serif; font-style:italic; font-size:18px; color: rgba(244,241,234,.78); }
  .summary .cta .btn{
    font-size:11px; letter-spacing:.22em; text-transform:uppercase;
    border:1px solid var(--cream); padding:14px 22px;
    transition: background-color .3s ease, color .3s ease;
  }
  .summary .cta .btn:hover{ background:var(--cream); color: var(--ink); }

  /* ---------- DROP ---------- */
  .drop{
    background: var(--cream); color: var(--char);
    min-height: 100vh;
    display:grid; place-items:center;
    text-align:center;
    position:relative;
    padding: 18vh var(--gutter);
  }
  .drop .kicker{
    font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--mute);
    margin-bottom: 6vh;
  }
  .drop h2{
    margin:0 0 6vh;
    font-family:"Cormorant Garamond", serif; font-weight:400;
    font-size: clamp(52px, 9vw, 156px);
    line-height:.96;
    letter-spacing:-0.025em;
    max-width: 12ch;
  }

  .countdown{
    display:flex; gap: clamp(28px, 4vw, 64px); align-items:baseline;
    justify-content:center;
    margin-bottom: 8vh;
    font-family:"Cormorant Garamond", serif;
  }
  .countdown .unit{ text-align:center; }
  .countdown .unit .v{ font-size: clamp(36px, 4vw, 56px); line-height:1; letter-spacing:-.02em; display:block; font-variant-numeric: tabular-nums; }
  .countdown .unit .k{ font-family:"DM Sans", sans-serif; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--mute); margin-top: 10px; display:block; }
  .countdown .sep{ color: var(--mute); font-style:italic; font-size: clamp(24px,2.4vw,32px); }
  .drop-btn{
    display:inline-block;
    border:1px solid var(--char);
    padding: 22px 44px;
    font-size:12px; letter-spacing:.26em; text-transform:uppercase;
    transition: background-color .3s ease, color .3s ease;
  }
  .drop-btn:hover{ background:var(--char); color: var(--cream); }
  .drop .note{
    margin-top: 6vh;
    font-family:"Cormorant Garamond", serif; font-style:italic;
    color:var(--mute); font-size:15px;
    max-width: 38ch;
  }

  /* ---------- Footer ---------- */
  footer{
    background:var(--cream); color:var(--char);
    border-top:1px solid var(--rule);
    padding: 36px var(--gutter) 24px;
    display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--gutter); align-items:start;
    font-size:12px; letter-spacing:.06em; color: var(--mute);
  }
  footer .mark{
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family:"Cormorant Garamond", serif; font-weight:500;
    font-size: clamp(28px, 3.4vw, 52px); color: var(--char); letter-spacing:-0.015em; line-height:1;
    padding-bottom: 0.15em; /* room for the g descender */
  }
  footer .mark img{ height: 56px; width: auto; display: block; flex: 0 0 auto; }
  footer h6{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--char); margin: 6px 0 14px; font-weight:500; }
  footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
  footer .fine{ grid-column: 1 / -1; border-top:1px solid var(--rule); padding-top:18px; margin-top: 8vh; display:flex; justify-content:space-between; font-size:11px; flex-wrap:wrap; gap:12px; }

  /* ---------- Heritage marks: fleur, flags, partner lockup ---------- */
  .fleur{ width:14px; height:14px; display:inline-block; vertical-align:-2px; background:currentColor;
    -webkit-mask: url('fleur-de-lis.png') center/contain no-repeat;
            mask: url('fleur-de-lis.png') center/contain no-repeat;
  }
  .fleur.lg{ width:22px; height:22px; vertical-align:-5px; }
  .fleur.xl{ width:44px; height:44px; vertical-align:middle; }

  .flag{ width:18px; height:13px; display:inline-block; vertical-align:-2px; object-fit:cover; border:1px solid rgba(26,26,26,.18); }
  .topbar .flag{ border-color: rgba(255,255,255,.4); }

  /* Partner band: cream pill that reads on every hero color */
  .partners{
    position:fixed; top: 64px; left:50%; transform:translateX(-50%); z-index:40;
    display:flex; align-items:center; gap:16px;
    padding: 9px 18px;
    background: var(--cream);
    border:1px solid rgba(26,26,26,.12);
    color: var(--char);
    font-size:10px; letter-spacing:.24em; text-transform:uppercase;
    box-shadow: 0 6px 24px -12px rgba(0,0,0,.25);
    transition: opacity .5s ease, transform .5s ease;
    pointer-events:none;
    white-space:nowrap;
  }
  .partners .lbl{ color: var(--mute); }
  .partners img{ height:14px; width:auto; display:block; }
  .partners img.swatch{ height:12px; }
  .partners .sep{ color: var(--mute); }
  .partners.is-hidden{ opacity:0; transform: translateX(-50%) translateY(-10px); }

  /* Fleur background pattern (sparingly) */
  .fleur-bg{
    position:absolute; inset:0; pointer-events:none;
    background-image: url('fleur-de-lis.png');
    background-size: 88px auto;
    background-repeat: repeat;
    background-position: 0 0;
    opacity: 0.05;
    mix-blend-mode: multiply;
  }
  .fleur-bg.on-dark{ filter: invert(1); opacity: 0.06; mix-blend-mode: screen; }

  /* Bi-national geo line */
  .geo-line{
    display:flex; align-items:center; justify-content:center; gap:20px;
    font-size:10px; letter-spacing:.24em; text-transform:uppercase;
    color: var(--mute);
  }
  .geo-line .pair{ display:inline-flex; align-items:center; gap:8px; }
  .geo-line .x{ font-family:"Cormorant Garamond", serif; font-style:italic; font-size:15px; letter-spacing:0; text-transform:none; color: var(--char); }
  .geo-line img.flag{ width:20px; height:14px; }

  /* Drop: layered fleur composition */
  .drop-mark{
    position:relative;
    width: 240px; height: 240px;
    margin: 6vh auto 4vh;
    display:grid; place-items:center;
  }
  .drop-mark .f{
    position:absolute;
    background: var(--char);
    -webkit-mask: url('fleur-de-lis.png') center/contain no-repeat;
            mask: url('fleur-de-lis.png') center/contain no-repeat;
  }
  .drop-mark .f.center{
    width: 140px; height: 200px;
    opacity: 1;
    z-index: 3;
  }
  .drop-mark .f.left{
    width: 78px; height: 110px;
    left: 8px; bottom: 28px;
    transform: rotate(-22deg);
    opacity: .14;
    z-index: 1;
  }
  .drop-mark .f.right{
    width: 78px; height: 110px;
    right: 8px; bottom: 28px;
    transform: rotate(22deg);
    opacity: .14;
    z-index: 1;
  }
  .drop-mark .f.tiny{
    width: 26px; height: 36px;
    top: -8px;
    opacity: .35;
    z-index: 2;
  }
  .drop-mark .ring{
    position:absolute; inset: 0;
    border:1px solid rgba(26,26,26,.18);
    border-radius: 50%;
    z-index: 0;
  }
  .drop-mark .ring.inner{ inset: 28px; opacity:.7; }
  .drop-mark .seal-label{
    position:absolute; left: 50%; bottom: -42px; transform: translateX(-50%);
    font-size: 9px; letter-spacing: .32em; text-transform: uppercase;
    color: var(--mute);
    white-space: nowrap;
  }
  .pour-le{
    display:flex; align-items:center; gap:18px;
    padding: 14px 0;
    background: transparent;
  }
  .pour-le .kicker{ font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--mute); }
  .pour-le img{ height: 18px; width:auto; display:block; }
  .pour-le img.ap{ height:14px; }
  .pour-le img.swatch{ height:12px; }
  .pour-le .x{ font-family:"Cormorant Garamond",serif; font-style:italic; color:var(--mute); font-size:15px; }
  .pour-le.on-dark{ border-color: rgba(244,241,234,.25); }
  .pour-le.on-dark .kicker{ color: rgba(244,241,234,.55); }
  .pour-le.on-dark .x{ color: rgba(244,241,234,.55); }
  .pour-le.on-dark img{ filter: invert(1) brightness(2); }

  /* ---------- Responsive ---------- */
  @media (max-width: 900px){
    .partners{ display:none; }
    .nav{ display:none; }
    .ed-split{ grid-template-columns: 1fr; }
    .ed-twocol{ grid-template-columns: 1fr; }
    .ed-twocol .col.offset{ padding-top: 0; }
    .con-head{ grid-template-columns: 1fr; }
    .con-grid{ grid-template-columns: 1fr; gap: 6vh; }
    .c-a,.c-b,.c-c,.c-d{ grid-column: 1 / -1; padding-top: 0; }
    .con-specs{ grid-template-columns: repeat(2, 1fr); }
    .spec{ border-left:0; padding-left:0; padding-right:0; }
    .spec:nth-child(2){ border-left:1px solid var(--rule); padding-left: 20px; }
    .spec:nth-child(4){ border-left:1px solid var(--rule); padding-left: 20px; }
    .config{ grid-template-columns: 1fr; }
    .atelier-head{ grid-template-columns: 1fr; }
    footer{ grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 560px){
    .cuff-slot{ width: 70vw; }
    .config .stage{ aspect-ratio: 1/1; }
  }

  /* ============ OPENER \u2014 landscape French line ============ */
  .opener{
    min-height: 100vh;
    background: var(--cream);
    color: var(--char);
    display: grid;
    place-items: center;
    padding: 18vh var(--gutter);
  }
  .opener-line{
    margin: 0;
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(36px, 7.4vw, 132px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    text-align: center;
    max-width: 22ch;
    text-wrap: balance;
  }
  .opener-trans{
    margin: 36px 0 0;
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    letter-spacing: .26em;
    text-transform: uppercase;
    text-align: center;
    color: var(--mute);
  }
  .ht-toc li{
    display: grid;
    grid-template-columns: 64px 1fr auto auto;
    align-items: baseline;
    gap: 24px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(26,26,26,.14);
    font-family: "Cormorant Garamond", serif;
  }
  .ht-toc .ord{
    color: var(--mute); font-style: italic;
    font-size: clamp(18px, 1.4vw, 22px);
  }
  .ht-toc .name{
    font-size: clamp(28px, 3vw, 44px);
    letter-spacing: -0.015em;
    line-height: 1;
  }
  .ht-toc .swatch-pair{
    display: inline-flex; gap: 6px; align-items: center;
  }
  .ht-toc .swatch-pair .dot{
    width: 14px; height: 14px; display: inline-block;
    border: 1px solid rgba(26,26,26,.18);
  }
  .ht-toc .ann{
    font-family: "DM Sans", sans-serif;
    font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--mute);
    min-width: 18ch; text-align: right;
  }
  .ht-foot{
    margin-top: 10vh;
    display:flex; justify-content: space-between; align-items: baseline;
    font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--mute); flex-wrap: wrap; gap: 12px;
  }
  .ht-foot .it{ font-family:"Cormorant Garamond",serif; font-style: italic; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--char); }

  /* ============ CHAPTER ============ */
  .chapter{
    --pop: #000;
    --pop-fg: #fff;
    background: var(--pop);
    color: var(--pop-fg);
    position: relative;
  }
  .chapter-hero{
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 22vh var(--gutter) 14vh;
  }
  .chapter-marker{
    position: absolute;
    top: 5vh; left: var(--gutter); right: var(--gutter);
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
    opacity: .82;
  }
  .chapter-marker .num{ font-family:"Cormorant Garamond",serif; font-style: italic; font-size: 16px; letter-spacing: 0; text-transform: none; opacity: .9; }
  .chapter-hero .cuff-slot{
    width: min(54vw, 680px);
    aspect-ratio: 1/1;
    outline: 1px solid currentColor;
    background: rgba(255,255,255,.05);
    color: currentColor;
  }
  .chapter-hero .cuff-slot .tag{ color: currentColor; border: 1px solid currentColor; padding: 10px 14px; }
  .chapter-hero .cuff-slot .tag em{ color: currentColor; opacity: .7; }
  .chapter-hero .cuff-slot::after{
    background: repeating-linear-gradient(135deg, currentColor 0 1px, transparent 1px 16px);
    opacity: .08;
  }
  .chapter[data-tone="light"] .chapter-hero .cuff-slot{ background: rgba(0,0,0,.04); }
  .chapter[data-tone="light"] .chapter-hero .cuff-slot::after{ opacity: .12; }

  .chapter-fleur{
    position: absolute;
    bottom: 4vh; left: 50%; transform: translateX(-50%);
    width: 22px; height: 30px; background: currentColor;
    -webkit-mask: url('fleur-de-lis.png') center/contain no-repeat;
            mask: url('fleur-de-lis.png') center/contain no-repeat;
    opacity: .42;
  }

  .chapter-title-wrap{
    padding: 14vh var(--gutter) 6vh;
    display: grid; gap: 22px;
    max-width: 1400px;
  }
  .chapter-title{
    margin: 0;
    font-family: "Cormorant Garamond", serif;
    font-weight: 400;
    font-size: clamp(72px, 12vw, 200px);
    line-height: .9;
    letter-spacing: -0.03em;
  }
  .chapter-tagline{
    margin: 0;
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: clamp(18px, 1.5vw, 24px);
    line-height: 1.45;
    opacity: .82;
    max-width: 40ch;
  }
  .chapter-tagline .en{
    display: block; margin-top: 8px;
    font-family: "DM Sans", sans-serif; font-style: normal;
    font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
    opacity: .65;
  }

  .chapter-story{
    padding: 0 var(--gutter) 12vh;
    max-width: 60ch;
    margin-left: clamp(24px, 14vw, 220px);
    display: flex; flex-direction: column; gap: 28px;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(20px, 1.55vw, 25px);
    line-height: 1.6;
    text-wrap: pretty;
  }
  .chapter-story p{ margin: 0; }
  .chapter-story .lede{
    font-size: clamp(22px, 1.8vw, 28px);
    font-style: italic;
  }
  .chapter-story .note{
    font-family: "DM Sans", sans-serif;
    font-style: normal;
    font-size: 13px; letter-spacing: .04em; line-height: 1.6;
    border-top: 1px solid currentColor;
    padding-top: 14px;
    opacity: .82;
    max-width: 48ch;
  }

  .chapter-details{
    padding: 0 var(--gutter) 12vh;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .chapter-details figure{ margin: 0; display: flex; flex-direction: column; gap: 14px; max-width: 520px; width: 100%; }
  .chapter-details .photo-slot{
    background: rgba(255,255,255,.06);
    color: currentColor;
    outline: 1px solid currentColor;
  }
  .chapter-details .photo-slot.macro{ aspect-ratio: 4/5; }
  .chapter-details .photo-slot.lifestyle{ aspect-ratio: 4/5; }
  .chapter-details .photo-slot::after{
    background: repeating-linear-gradient(135deg, currentColor 0 1px, transparent 1px 16px);
    opacity: .08;
  }
  .chapter[data-tone="light"] .chapter-details .photo-slot{ background: rgba(0,0,0,.05); }
  .chapter[data-tone="light"] .chapter-details .photo-slot::after{ opacity: .12; }
  .chapter-details .photo-slot .tag{ color: currentColor; border: 1px solid currentColor; padding: 10px 14px; }
  .chapter-details .photo-slot .tag em{ color: currentColor; opacity: .7; }
  .chapter-details figcaption{
    font-family: "Cormorant Garamond", serif; font-style: italic;
    font-size: 15px; opacity: .78;
    border-top: 1px solid currentColor;
    padding-top: 12px;
    max-width: 32ch;
    line-height: 1.5;
  }

  .chapter-buy{
    margin: 0 var(--gutter);
    padding: 28px 0 16vh;
    border-top: 1px solid currentColor;
    display: flex; justify-content: space-between; align-items: baseline;
    flex-wrap: wrap;
    gap: 24px;
  }
  .chapter-buy .lede{
    font-family: "Cormorant Garamond", serif; font-style: italic;
    font-size: clamp(17px, 1.3vw, 20px); opacity: .82;
    max-width: 34ch;
  }
  .chapter-btn{
    display: inline-flex; align-items: baseline; gap: 16px;
    padding: 18px 26px;
    border: 1px solid currentColor;
    font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
    transition: background-color .35s ease, color .35s ease;
    color: var(--pop-fg);
  }
  .chapter-btn .arrow{
    font-family: "Cormorant Garamond", serif; font-style: italic;
    font-size: 18px; letter-spacing: 0; text-transform: none;
  }
  .chapter-btn:hover{ background: var(--pop-fg); color: var(--pop); }
  .chapter-buy .buy-action{
    display: inline-flex; flex-direction: column; align-items: flex-end; gap: 10px;
  }
  .chapter-buy .buy-fine{
    font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
    opacity: .62;
  }

  /* Carnaval gradient — the one rule-break (slow drift) */
  .carnaval-rule{
    margin: 8vh var(--gutter) 0;
    height: 2px;
    background-image: linear-gradient(90deg,
      #E63946 0%, #F4A261 14%, #F2C111 28%, #2A9D8F 50%, #2D8BD7 72%, #7E3FBF 86%, #E63946 100%);
    background-size: 200% 100%;
    background-repeat: repeat-x;
    animation: carnavalDrift 14s linear infinite;
  }
  @keyframes carnavalDrift{
    from{ background-position: 0% 50%; }
    to  { background-position: 200% 50%; }
  }
  @media (prefers-reduced-motion: reduce){
    .carnaval-rule{ animation: none; }
  }
  .carnaval-rule + .carnaval-rule-label{
    margin: 12px var(--gutter) 0;
    font-family: "DM Sans", sans-serif;
    font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
    color: var(--mute);
    display: flex; justify-content: space-between;
  }
  .chapter[data-chapter="carnaval"] .carnaval-rule-label{ color: rgba(26,26,26,.62); }

  /* Centered moment image inside a chapter (portrait or landscape) */
  .chapter-banner{
    margin: 8vh auto 4vh;
    width: 100%;
    max-width: 640px;
    padding: 0 var(--gutter);
    background: transparent;
    box-sizing: border-box;
  }
  .chapter-banner img{
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  .chapter-banner .caption{
    display: block;
    margin: 14px 0 0;
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 15px;
    line-height: 1.4;
    opacity: .78;
    border-top: 1px solid currentColor;
    padding-top: 12px;
    max-width: 32ch;
  }

  /* Numbered-edition stamp (Carnaval) — sits inside the right slot of the chapter marker */
  .chapter-marker .right-stack{
    display: inline-flex; flex-direction: column; align-items: flex-end; gap: 10px;
  }
  .edition-stamp{
    display: inline-flex; gap: 10px; align-items: baseline;
    padding: 6px 12px;
    border: 1px solid currentColor;
    font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
    opacity: .82;
  }
  .edition-stamp .n{ font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 16px; letter-spacing: 0; text-transform: none; }

  /* ============ PALATE CLEANSER ============ */
  .palate{
    background: var(--cream); color: var(--char);
    min-height: 56vh;
    padding: 12vh var(--gutter);
    display: grid;
    place-items: center;
    text-align: center;
    position: relative;
  }
  .palate .vrule{
    position: absolute; left: 50%; transform: translateX(-50%);
    top: 0; width: 1px; height: 8vh; background: var(--rule); opacity: .4;
  }
  .palate .roman{
    font-family: "Cormorant Garamond", serif; font-style: italic;
    font-size: clamp(54px, 7vw, 110px);
    color: var(--mute);
    line-height: 1;
    margin: 0;
  }
  .palate .lbl{
    margin-top: 28px;
    font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
    color: var(--mute);
    max-width: 38ch;
  }
  .palate .lbl em{
    font-family: "Cormorant Garamond", serif; font-style: italic;
    font-size: 15px; letter-spacing: 0; text-transform: none;
    color: var(--char);
    display: block; margin-top: 10px;
  }
  .palate.dark{ background: var(--char); color: var(--cream); }
  .palate.dark .roman{ color: rgba(244,241,234,.7); }
  .palate.dark .lbl{ color: rgba(244,241,234,.55); }
  .palate.dark .lbl em{ color: var(--cream); }
  .palate.dark .vrule{ background: var(--cream); opacity: .35; }

  /* ============ CLOSING DROP (quote + reserve + fleur) ============ */
  .drop-quiet{
    background: var(--cream); color: var(--char);
    min-height: 100vh;
    padding: 18vh var(--gutter);
    display: grid; place-items: center; text-align: center;
    position: relative;
    grid-auto-rows: min-content;
    gap: 7vh;
  }
  .drop-quote{
    margin: 0;
    font-family: "Cormorant Garamond", serif;
    font-weight: 400;
    font-size: clamp(46px, 8vw, 132px);
    line-height: .96;
    letter-spacing: -0.025em;
    max-width: 14ch;
    text-wrap: balance;
  }
  .drop-reserve{
    display: inline-flex; align-items: baseline; gap: 16px;
    padding: 20px 32px;
    border: 1px solid var(--char);
    font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
    color: var(--char);
    transition: background-color .35s ease, color .35s ease;
  }
  .drop-reserve .arrow{
    font-family: "Cormorant Garamond", serif; font-style: italic;
    font-size: 18px; letter-spacing: 0; text-transform: none;
  }
  .drop-reserve:hover{ background: var(--char); color: var(--cream); }
  .drop-quiet .drop-mark{ margin: 2vh auto 0; }

  /* Hide a couple of the old hero JS-driven extras (defensive) */
  .partners.is-hidden{ opacity:0; transform: translateX(-50%) translateY(-10px); pointer-events:none; }

  @media (max-width: 900px){
    .chapter-details{ grid-template-columns: 1fr; gap: 6vh; }
    .chapter-story{ margin-left: 0; }
    .ht-toc li{ grid-template-columns: 44px 1fr; }
    .ht-toc .swatch-pair, .ht-toc .ann{ grid-column: 2 / -1; min-width: 0; text-align: left; padding-top: 4px; }
    .chapter-hero .cuff-slot{ width: 78vw; }
  }

  /* Reel: 3 strap photos stacked, fade per scroll state */
  .reel-cuff.has-image{
    position: relative;
    overflow: hidden;
    background: transparent;
    outline: none;
  }
  .reel-cuff .reel-strap{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity .9s ease;
    pointer-events: none;
  }
  .reel-stage[data-state="0"] .reel-strap[data-strap="0"],
  .reel-stage[data-state="1"] .reel-strap[data-strap="1"],
  .reel-stage[data-state="2"] .reel-strap[data-strap="2"]{ opacity: 1; }

  /* Reel: "More coming soon." overlays the cuff square at the outro state */
  .reel-cuff .reel-end-note{
    position: absolute;
    inset: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: clamp(22px, 2.4vw, 32px);
    color: var(--char);
    opacity: 0;
    transition: opacity .9s ease;
    pointer-events: none;
    text-align: center;
  }
  .reel-stage[data-state="3"] .reel-end-note{ opacity: 1; }