/* ============================================
   KOMOGORTSEV — Maison de Curiosités
   Aesthetic: Baroque × Ralph Lauren (mansion catalog)
   Palette: parchment cream / oxblood / library navy / gold leaf / sepia ink
   ============================================ */

:root{
  /* parchment side */
  --parch:        #f1e6cc;
  --parch-2:      #e8dab8;
  --parch-3:      #ddc99a;
  --parch-edge:   #c9b285;
  --ink:          #2a1a10;
  --ink-soft:     #4a3624;
  --ink-mute:     #7a5d3e;

  /* oxblood / library side */
  --oxblood:      #3a1216;
  --oxblood-2:    #2a0c10;
  --oxblood-3:    #4a1a1f;
  --oxblood-ink:  #f1e6cc;
  --oxblood-soft: #d9c7a3;
  --oxblood-mute: #a08c6a;

  /* accent */
  --gold:         #b8946a;
  --gold-2:       #cfa86c;
  --gold-deep:    #7a5a2f;
  --gold-pale:    #d4b88a;

  /* lines */
  --line:         rgba(122,90,47,.32);
  --line-strong:  rgba(122,90,47,.55);
  --line-light:   rgba(241,230,204,.22);

  /* type */
  --serif:   "Cormorant Garamond", "Adobe Caslon", Garamond, "Times New Roman", serif;
  --display: "Marcellus", "Cormorant Garamond", serif;
  --caps:    "Marcellus SC", "Cormorant SC", "Marcellus", serif;
  --script:  "Italianno", "Snell Roundhand", cursive;

  --pad-x: clamp(20px, 5vw, 96px);
  --pad-y: clamp(80px, 11vw, 170px);

  --shadow: 0 30px 60px -28px rgba(58,18,22,.55), 0 12px 24px -16px rgba(0,0,0,.35);
}

*{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  background:var(--parch);
}
body{
  font-family:var(--serif);
  font-size:18px;line-height:1.62;font-weight:400;
  color:var(--ink);
  background-color:var(--parch);
  background-image:
    radial-gradient(at 18% 22%, rgba(184,148,106,.10), transparent 42%),
    radial-gradient(at 78% 68%, rgba(122,90,47,.09), transparent 46%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.46  0 0 0 0 0.32  0 0 0 0 0.16  0 0 0 0.07 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
em{font-style:italic;color:var(--gold-deep)}
.roman{font-family:var(--display);letter-spacing:.08em;font-feature-settings:"smcp" on}
.script{font-family:var(--script);font-style:normal;color:var(--gold-deep)}

/* ====== SECTION BACKDROPS ====== */
.parchment{
  background-color:var(--parch);
  background-image:
    radial-gradient(at 18% 22%, rgba(184,148,106,.10), transparent 42%),
    radial-gradient(at 82% 76%, rgba(122,90,47,.09), transparent 46%);
  color:var(--ink);
}
.oxblood{
  background-color:var(--oxblood);
  background-image:
    radial-gradient(at 18% 22%, rgba(255,200,140,.06), transparent 45%),
    radial-gradient(at 82% 78%, rgba(255,200,140,.04), transparent 48%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.92  0 0 0 0 0.78  0 0 0 0 0.50  0 0 0 0.05 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  color:var(--oxblood-ink);
}
.oxblood .kicker{color:var(--gold-2)}
.oxblood .display{color:var(--oxblood-ink)}
.oxblood .display em{color:var(--gold-2)}
.oxblood .subtle{color:var(--oxblood-mute)}

/* ====== TOPBAR ====== */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:50;
  padding:18px var(--pad-x);
  background:linear-gradient(to bottom, rgba(241,230,204,.94), rgba(241,230,204,.65) 70%, transparent);
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  border-bottom:1px solid var(--line);
}
.topbar__inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  max-width:1480px;margin:0 auto;
}
.brand{display:flex;align-items:center;gap:14px;color:var(--ink)}
.brand__crest{
  display:block;
  width:36px;height:42px;
  background-image: url('images/lecrin-crest.png');
  background-repeat: no-repeat;
  background-size: 72px auto;       /* image scaled to 72x72 */
  background-position: -18px -6px;  /* show only the crest cartouche */
  flex-shrink:0;
  mix-blend-mode: multiply;          /* cream backdrop dissolves into parchment */
  filter: contrast(1.04) saturate(1.05);
}
.brand--footer .brand__crest{
  width:34px;height:40px;
  background-size:68px auto;
  background-position:-17px -5px;
  mix-blend-mode: screen;            /* on dark footer bg, screen blends inversely */
  opacity:.92;
}
.brand__type{display:flex;flex-direction:column;line-height:1.1;gap:2px}
.brand__name{
  font-family:var(--caps);font-size:18px;letter-spacing:.22em;
  color:var(--ink);text-transform:uppercase;
}
.brand__sub{
  font-family:var(--serif);font-style:italic;font-size:12px;
  color:var(--ink-mute);letter-spacing:.04em;
}
.topbar__nav{display:flex;align-items:center;gap:30px}
.topbar__nav a{
  font-family:var(--caps);font-size:11.5px;letter-spacing:.28em;
  color:var(--ink-soft);text-transform:uppercase;
  padding:8px 0;border-bottom:1px solid transparent;
  transition:color .25s ease, border-color .25s ease;
}
.topbar__nav a:hover{color:var(--gold-deep);border-bottom-color:var(--gold)}
.topbar__nav .cta{
  border:1px solid var(--gold-deep);color:var(--gold-deep);
  padding:9px 18px;border-radius:1px;letter-spacing:.32em;
}
.topbar__nav .cta:hover{background:var(--gold-deep);color:var(--parch);border-bottom-color:var(--gold-deep)}
@media (max-width:1000px){
  .topbar__nav{gap:18px}
  .topbar__nav a:not(.cta){display:none}
  .brand__sub{display:none}
}

/* ====== ORNAMENTS ====== */
.ornament{position:absolute;color:var(--gold);pointer-events:none}
.ornament--corner{width:48px;height:48px;color:var(--gold-deep)}
.ornament--tl{top:18px;left:18px}
.ornament--tr{top:18px;right:18px;transform:scaleX(-1)}
.ornament--bl{bottom:18px;left:18px;transform:scaleY(-1)}
.ornament--br{bottom:18px;right:18px;transform:scale(-1,-1)}

.flourish-mark{
  display:block;
  width:clamp(220px, 32vw, 360px);height:28px;
  margin:22px auto;
  color:var(--gold-deep);
}
.flourish-mark.light{color:var(--gold-2);opacity:.85}

.ornament-row{display:flex;justify-content:center;margin: 8px 0 28px}

/* ====== TYPE HELPERS ====== */
.kicker{
  font-family:var(--caps);font-size:11px;letter-spacing:.42em;
  color:var(--gold-deep);text-transform:uppercase;display:inline-block;
}
.kicker.light{color:var(--gold-2)}
.kicker.centered{display:block;text-align:center}
.display{
  font-family:var(--display);font-weight:400;
  font-size:clamp(40px, 6.4vw, 92px);
  line-height:1.05;letter-spacing:.005em;
  color:var(--ink);
}
.display em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--gold-deep)}
.centered{text-align:center}
.subtle{color:var(--ink-mute);font-style:italic;font-weight:400}
.subtle.light{color:var(--oxblood-mute)}

.section-head{
  max-width:920px;margin:0 auto clamp(48px, 7vw, 96px);
  padding:0 var(--pad-x);text-align:center;
}
.section-head .kicker{margin-bottom:18px}
.section-head .display{margin-bottom:8px}
.section-head .subtle{font-size:17px;max-width:640px;margin:14px auto 0}

/* ====== BUTTONS ====== */
.btn{
  display:inline-block;
  font-family:var(--caps);font-size:11.5px;letter-spacing:.32em;
  text-transform:uppercase;
  padding:16px 30px;border-radius:1px;
  transition: all .3s ease;
  border:1px solid transparent;
}
.btn--gold{
  background:linear-gradient(180deg, var(--gold-2), var(--gold-deep));
  color:var(--parch);
  border-color:var(--gold-deep);
  box-shadow: inset 0 1px 0 rgba(255,235,200,.35), 0 6px 16px -6px rgba(122,90,47,.5);
}
.btn--gold:hover{
  background:linear-gradient(180deg, var(--gold-deep), var(--gold-2));
  color:var(--parch);
}
.btn--ink{
  background:transparent;color:var(--ink);border-color:var(--ink);
}
.btn--ink:hover{background:var(--ink);color:var(--parch)}

/* ====== HERO ====== */
.hero{
  position:relative;min-height:100vh;
  display:grid;place-items:center;
  padding: clamp(100px,12vw,160px) var(--pad-x) clamp(60px,8vw,100px);
  overflow:hidden;
  background:var(--oxblood-2);
}
.hero__image{position:absolute;inset:0;z-index:0}
.hero__image img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  filter: sepia(.22) brightness(.6) contrast(1.05) saturate(.95);
}
.hero__vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 75%),
    linear-gradient(180deg, rgba(42,12,16,.45) 0%, rgba(42,12,16,.15) 35%, rgba(42,12,16,.85) 100%);
}
.hero__plate{
  position:relative;z-index:1;
  max-width:880px;padding:clamp(40px,6vw,72px) clamp(28px,4vw,60px);
  text-align:center;
  background:
    radial-gradient(ellipse at top, rgba(241,230,204,.06), transparent 70%),
    linear-gradient(180deg, rgba(58,18,22,.55), rgba(42,12,16,.55));
  border:1px solid rgba(184,148,106,.35);
  box-shadow:
    inset 0 0 0 6px rgba(241,230,204,.04),
    inset 0 0 0 7px rgba(184,148,106,.18),
    0 30px 80px -20px rgba(0,0,0,.7);
  backdrop-filter: blur(2px);
}
.hero__plate .kicker{color:var(--gold-2);margin-bottom:6px}
.hero__plate .script{font-size:30px;color:var(--gold-pale);display:block;margin-bottom:12px}
.hero__plate .display{
  color:var(--parch);font-size:clamp(36px, 5.2vw, 76px);
  margin-bottom:8px;
}
.hero__plate .display em{color:var(--gold-2)}
.hero__plate .lede{
  font-size:clamp(16px, 1.5vw, 19px);
  color:var(--oxblood-soft);font-style:italic;
  max-width:560px;margin:18px auto 32px;
}
.hero__cta{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.hero__plate .btn--ink{color:var(--parch);border-color:var(--gold-pale)}
.hero__plate .btn--ink:hover{background:var(--parch);color:var(--oxblood)}
.hero__price{
  font-family:var(--caps);font-size:11px;letter-spacing:.32em;
  color:var(--gold-2);text-transform:uppercase;
}

/* ====== MANIFESTO ====== */
.manifesto{
  padding: var(--pad-y) var(--pad-x);
  text-align:center;
}
.manifesto .kicker{margin-bottom:18px}
.manifesto .display{margin-bottom:46px}
.manifesto__cols{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap: clamp(28px, 4vw, 56px);
  max-width:1180px;margin:0 auto;text-align:left;
}
.manifesto__cols > div{position:relative;padding-top:6px}
.manifesto__cols p{
  font-size:17.5px;line-height:1.72;color:var(--ink-soft);
  font-family:var(--serif);font-weight:400;
}
.dropcap{
  float:left;
  font-family:var(--display);
  font-size:62px;line-height:.85;color:var(--gold-deep);
  margin: 4px 10px 0 0;font-weight:400;
}
@media (max-width:900px){
  .manifesto__cols{grid-template-columns:1fr;gap:30px}
}

/* ====== COLLECTION ====== */
.collection{padding: var(--pad-y) 0}
.piece{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items:center;
  max-width:1480px;margin:0 auto;
  padding: clamp(70px, 9vw, 120px) var(--pad-x);
  position:relative;
}
.piece + .piece{border-top:1px solid rgba(241,230,204,.14)}
.piece--left{grid-template-columns: 1fr 1.1fr}
.piece--left .piece__image{order:2}
.piece--left .piece__text{order:1}

.piece__image{
  position:relative;
  background:var(--oxblood-2);
  padding:14px;
  border:1px solid rgba(184,148,106,.35);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(241,230,204,.08);
}
.piece__image img{
  width:100%;aspect-ratio: 4/5;object-fit:cover;
  filter: brightness(.98) saturate(1.04);
}
.piece__image figcaption{
  position:absolute;left:14px;right:14px;bottom:14px;
  padding:12px 18px;
  background:linear-gradient(to top, rgba(0,0,0,.85), transparent);
  font-family:var(--caps);font-size:10.5px;letter-spacing:.26em;
  color:var(--gold-pale);text-transform:uppercase;
}

.piece__text{max-width:560px;color:var(--oxblood-soft)}
.piece__plate{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:120px;height:80px;margin-bottom:18px;color:var(--gold-2);
}
.piece__cartouche{width:120px;height:80px;position:absolute;inset:0}
.piece__no{
  font-family:var(--display);font-size:30px;color:var(--gold-2);
  letter-spacing:.04em;position:relative;
}
.piece__name{
  font-family:var(--display);font-weight:400;
  font-size:clamp(34px, 4.2vw, 60px);line-height:1.04;
  color:var(--oxblood-ink);margin-bottom:6px;
}
.piece__sub{
  font-family:var(--script);font-size:30px;color:var(--gold-2);
  line-height:1;margin-bottom:22px;
}
.piece__text p{margin-bottom:18px;font-size:17px}
.piece__verse{
  font-family:var(--serif);font-style:italic;color:var(--gold-pale);
  border-left:1px solid var(--gold-deep);
  padding-left:18px;margin:22px 0 28px;
}
.piece__verse em{color:var(--gold-pale)}
.piece__spec{
  margin:18px 0 22px;
  border-top:1px solid rgba(241,230,204,.18);
  display:grid;grid-template-columns:1fr 1fr;gap:0;
}
.piece__spec > div{
  border-bottom:1px solid rgba(241,230,204,.18);
  padding:14px 0;display:flex;justify-content:space-between;gap:16px;
}
.piece__spec > div:nth-child(odd){padding-right:24px;border-right:1px solid rgba(241,230,204,.18)}
.piece__spec > div:nth-child(even){padding-left:24px}
.piece__spec dt{
  font-family:var(--caps);font-size:10.5px;letter-spacing:.28em;
  color:var(--gold-2);text-transform:uppercase;white-space:nowrap;
}
.piece__spec dd{
  font-size:14.5px;color:var(--oxblood-soft);text-align:right;font-style:italic;
}
.piece__price{
  font-family:var(--caps);font-size:14px;letter-spacing:.3em;
  color:var(--gold-2);text-transform:uppercase;
  border-top:1px solid var(--gold-deep);
  padding-top:18px;
}
@media (max-width:880px){
  .piece, .piece--left{grid-template-columns:1fr}
  .piece--left .piece__image{order:0}
  .piece--left .piece__text{order:1}
  .piece__spec{grid-template-columns:1fr}
  .piece__spec > div, .piece__spec > div:nth-child(odd){border-right:0;padding-right:0}
  .piece__spec > div:nth-child(even){padding-left:0}
}

/* ====== CONFIGURATOR ====== */
.atelier{padding: var(--pad-y) var(--pad-x)}
.config{
  display:grid;grid-template-columns: 1.05fr 1fr;
  gap: clamp(34px, 5vw, 80px);
  max-width:1380px;margin:0 auto;
  align-items:start;
}
.config__stage{position:sticky;top:120px}
.config__figure{
  position:relative;background:var(--oxblood-2);
  padding:18px;border:1px solid var(--gold-deep);
  box-shadow: var(--shadow);
}
.config__figure img{
  width:100%;aspect-ratio: 4/5;object-fit:cover;
  filter: sepia(.06) brightness(.96);
}
.config__corners{position:absolute;inset:0;pointer-events:none}
.config__corners .ornament--corner{color:var(--gold-2);width:42px;height:42px}

.config__legend{
  margin-top:22px;
  display:grid;grid-template-columns:2fr 1fr;gap:18px;
}
.config__strip, .config__glass-preview{
  border:1px solid var(--line);
  padding:14px 18px;
  background:linear-gradient(180deg, var(--parch), var(--parch-2));
  display:flex;flex-direction:column;gap:10px;
}
.config__strip-label{
  font-family:var(--caps);font-size:10px;letter-spacing:.32em;
  color:var(--gold-deep);text-transform:uppercase;
}
.config__strip-bar{
  display:block;height:34px;width:100%;
  border:1px solid rgba(122,90,47,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.15);
  background:linear-gradient(180deg,#eef0f2,#b0b6bb 50%,#7e8489);
  transition: background .35s ease;
}
.glass-profile{width:100%;height:48px;color:var(--ink-soft)}

.config__controls{display:flex;flex-direction:column;gap:34px}
.config__group{border:0;padding:0;margin:0}
.config__group legend{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  width:100%;margin-bottom:18px;
  border-bottom:1px solid var(--line);padding-bottom:10px;
}
.config__group legend .kicker{margin:0}
.config__chosen{
  font-family:var(--serif);font-style:italic;font-size:18px;color:var(--ink);
}

/* Composition cards (Closed / Cave / Horlogerie) */
.contents{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
}
.contents--three{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.contents,.contents--three{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.contents,.contents--three{grid-template-columns:1fr}}
.content-card{
  display:grid;grid-template-rows:auto 1fr;gap:0;
  padding:0;
  border:1px solid var(--line);border-radius:1px;
  background:linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0));
  color:var(--ink-soft);text-align:left;overflow:hidden;
  transition: all .3s ease;
}
.content-card:hover{
  border-color:var(--gold-deep);color:var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 12px 22px -14px rgba(122,90,47,.4);
}
.content-card.is-active{
  border-color:var(--gold-deep);color:var(--ink);
  background:linear-gradient(180deg, rgba(184,148,106,.16), rgba(184,148,106,.04));
  box-shadow: inset 0 0 0 1px rgba(184,148,106,.35), 0 10px 22px -10px rgba(122,90,47,.45);
}
.content-card__image{
  display:block;width:100%;
  aspect-ratio: 4/5;
  background-size: cover;background-position: center;
  filter: brightness(.96) saturate(1.04);
  transition: filter .3s ease;
}
.content-card.is-active .content-card__image{filter: brightness(1) saturate(1.08)}
.content-card__body{
  display:flex;flex-direction:column;gap:6px;
  padding:16px 16px 18px;
  border-top:1px solid var(--line);
}
.content-card__title{
  font-family:var(--display);font-size:22px;color:inherit;line-height:1.1;
}
.content-card__sub{
  font-family:var(--serif);font-style:italic;font-size:13px;color:var(--ink-mute);line-height:1.4;
}
.content-card.is-active .content-card__sub{color:var(--ink-soft)}
.content-card__delta{
  font-family:var(--caps);font-size:10.5px;letter-spacing:.32em;
  color:var(--gold-deep);text-transform:uppercase;margin-top:4px;
}

/* Facade cards (Wood / Marble / Onyx / Crocodile) — wider, shorter */
.facades{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
@media (max-width:900px){.facades{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.facades{grid-template-columns:1fr}}
.facade-card{
  display:grid;grid-template-rows:auto 1fr;gap:0;padding:0;
  border:1px solid var(--line);border-radius:1px;
  background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0));
  color:var(--ink-soft);text-align:left;overflow:hidden;
  transition:all .25s ease;
  cursor:pointer;
}
.facade-card:hover{
  border-color:var(--gold-deep);color:var(--ink);transform:translateY(-2px);
  box-shadow:0 10px 18px -12px rgba(122,90,47,.4);
}
.facade-card.is-active{
  border-color:var(--gold-deep);color:var(--ink);
  background:linear-gradient(180deg,rgba(184,148,106,.16),rgba(184,148,106,.04));
  box-shadow:inset 0 0 0 1px rgba(184,148,106,.35),0 10px 22px -10px rgba(122,90,47,.45);
}
.facade-card__sample{
  display:block;width:100%;aspect-ratio:3/2;
  background-repeat:no-repeat;
  filter:brightness(.97) saturate(1.06);
  transition:filter .3s ease, transform .6s ease;
}
.facade-card:hover .facade-card__sample, .facade-card.is-active .facade-card__sample{
  filter:brightness(1.02) saturate(1.1);
  transform:scale(1.04);
}
.facade-card__body{
  display:flex;flex-direction:column;gap:4px;
  padding:12px 14px 14px;border-top:1px solid var(--line);
}
.facade-card__title{
  font-family:var(--display);font-size:18px;color:inherit;line-height:1.1;
}
.facade-card__sub{
  font-family:var(--serif);font-style:italic;font-size:12.5px;color:var(--ink-mute);line-height:1.4;
}
.facade-card.is-active .facade-card__sub{color:var(--ink-soft)}
.facade-card__delta{
  font-family:var(--caps);font-size:10px;letter-spacing:.3em;
  color:var(--gold-deep);text-transform:uppercase;margin-top:3px;
}

/* Smooth swap of stage image when composition changes */
.config__figure img{
  transition: opacity .35s ease, filter .35s ease;
}
.config__figure img.is-fading{ opacity: 0; filter: blur(2px); }

/* Metal swatches */
.swatches{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
@media (max-width:720px){.swatches{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px){.swatches{grid-template-columns:repeat(2,1fr)}}
.swatch{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:14px 8px 16px;
  border:1px solid transparent;border-radius:1px;
  background:transparent;
  transition: all .25s ease;
}
.swatch:hover{background:rgba(122,90,47,.06);border-color:var(--line)}
.swatch.is-active{
  background:linear-gradient(180deg, rgba(184,148,106,.16), rgba(184,148,106,.04));
  border-color:var(--gold-deep);
  box-shadow: inset 0 0 0 1px rgba(184,148,106,.35), 0 8px 18px -10px rgba(122,90,47,.4);
}
.swatch__disc{
  display:block;width:54px;height:54px;border-radius:50%;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.5),
    inset 0 -4px 8px rgba(0,0,0,.35),
    0 6px 12px -6px rgba(0,0,0,.4);
  border:1px solid rgba(0,0,0,.12);
  position:relative;
}
.swatch__disc::after{
  content:"";position:absolute;inset:3px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  pointer-events:none;
}
.swatch.is-active .swatch__disc{
  outline: 2px solid var(--gold-deep);
  outline-offset: 4px;
}
.swatch__label{
  font-family:var(--caps);font-size:10.5px;letter-spacing:.22em;
  color:var(--ink-soft);text-transform:uppercase;text-align:center;
  line-height:1.3;
}
.swatch.is-active .swatch__label{color:var(--ink)}

/* Glass options */
.glass-options{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
}
.glass{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:22px 18px;border:1px solid var(--line);border-radius:1px;
  background:linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0));
  transition: all .25s ease;color:var(--ink-soft);
}
.glass:hover{border-color:var(--gold-deep);color:var(--ink)}
.glass.is-active{
  border-color:var(--gold-deep);background:linear-gradient(180deg, rgba(184,148,106,.16), rgba(184,148,106,.04));
  color:var(--ink);
  box-shadow: inset 0 0 0 1px rgba(184,148,106,.35), 0 8px 18px -10px rgba(122,90,47,.4);
}
.glass svg{width:84px;height:50px;color:currentColor}
.glass__title{font-family:var(--display);font-size:22px;color:inherit}
.glass__note{font-size:13px;font-style:italic;color:var(--ink-mute);text-align:center}
.glass__delta{
  font-family:var(--caps);font-size:10.5px;letter-spacing:.28em;
  color:var(--gold-deep);text-transform:uppercase;margin-top:4px;
}

/* Spec summary */
.config__summary{
  border:1px solid var(--gold-deep);
  padding: clamp(20px,3vw,32px);
  background:
    linear-gradient(180deg, rgba(241,230,204,.7), rgba(232,218,184,.8));
  box-shadow: inset 0 0 0 6px rgba(241,230,204,.5), inset 0 0 0 7px rgba(184,148,106,.25);
  position:relative;
}
.config__summary header{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  border-bottom:1px solid var(--line-strong);padding-bottom:14px;margin-bottom:18px;
}
.config__summary header .script{font-size:26px}
.config__summary dl{display:grid;gap:0;margin-bottom:24px}
.config__summary dl > div{
  display:flex;justify-content:space-between;gap:18px;
  padding:10px 0;border-bottom:1px dotted var(--line);
}
.config__summary dt{
  font-family:var(--caps);font-size:10.5px;letter-spacing:.26em;
  color:var(--gold-deep);text-transform:uppercase;
}
.config__summary dd{font-size:14.5px;color:var(--ink-soft);font-style:italic;text-align:right}
.config__price{
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  border-top:1px solid var(--gold-deep);padding-top:18px;margin-bottom:18px;
}
.config__price-label{
  font-family:var(--caps);font-size:10.5px;letter-spacing:.32em;
  color:var(--gold-deep);text-transform:uppercase;
}
.config__price-value{
  font-family:var(--display);font-size:32px;color:var(--ink);letter-spacing:.02em;
}
.config__cta{width:100%;text-align:center;display:block}
.config__fine{
  font-size:12px;font-style:italic;color:var(--ink-mute);
  text-align:center;margin-top:12px;
}
@media (max-width:1000px){
  .config{grid-template-columns:1fr}
  .config__stage{position:static}
}

/* ====== MATERIALS ====== */
.materials{padding: var(--pad-y) var(--pad-x)}
.materials__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  max-width:1280px;margin:0 auto;
  border-top:1px solid rgba(241,230,204,.18);
  border-left:1px solid rgba(241,230,204,.18);
}
.mat{
  padding:38px 28px;
  border-right:1px solid rgba(241,230,204,.18);
  border-bottom:1px solid rgba(241,230,204,.18);
  background:linear-gradient(180deg, rgba(241,230,204,.03), transparent);
  position:relative;
  transition: background .35s ease;
}
.mat:hover{background:linear-gradient(180deg, rgba(184,148,106,.08), transparent)}
.mat__num{
  display:inline-block;
  font-family:var(--display);font-size:22px;color:var(--gold-2);
  letter-spacing:.06em;margin-bottom:14px;
  padding-bottom:8px;border-bottom:1px solid rgba(184,148,106,.35);
}
.mat__title{
  font-family:var(--display);font-weight:400;font-size:28px;
  color:var(--oxblood-ink);margin-bottom:14px;line-height:1.1;
}
.mat p{font-size:15.5px;color:var(--oxblood-soft);font-style:italic}
@media (max-width:980px){.materials__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.materials__grid{grid-template-columns:1fr}}

/* ====== COMMISSION ====== */
.commission{padding: var(--pad-y) var(--pad-x)}
.steps{
  list-style:none;
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  max-width:1280px;margin:0 auto;
}
.steps li{
  position:relative;padding:0 28px;
  border-left:1px solid var(--line);
}
.steps li:first-child{border-left:0;padding-left:0}
.step__no{
  display:block;
  font-family:var(--display);font-size:46px;color:var(--gold-deep);
  letter-spacing:.04em;margin-bottom:18px;
}
.steps h3{
  font-family:var(--display);font-weight:400;font-size:30px;
  color:var(--ink);margin-bottom:14px;
}
.steps p{font-size:15.5px;color:var(--ink-soft);font-style:italic}
@media (max-width:980px){
  .steps{grid-template-columns:1fr 1fr;gap:32px}
  .steps li{border-left:0;padding:0;border-top:1px solid var(--line);padding-top:22px}
  .steps li:first-child, .steps li:nth-child(2){border-top:0;padding-top:0}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr}
  .steps li:nth-child(2){border-top:1px solid var(--line);padding-top:22px}
}

/* ====== CONTACT ====== */
.contact{padding: var(--pad-y) var(--pad-x)}
.contact__inner{max-width:900px;margin:0 auto}
.contact .display{margin-bottom:8px}
.contact .subtle{font-size:17px;max-width:560px;margin:14px auto 50px}

.form{
  display:grid;grid-template-columns:1fr 1fr;gap:24px 28px;
  margin-bottom:46px;
}
.form label{display:flex;flex-direction:column;gap:8px}
.form__full{grid-column:1/-1}
.form label > span{
  font-family:var(--caps);font-size:10.5px;letter-spacing:.32em;
  color:var(--gold-2);text-transform:uppercase;
}
.form input, .form textarea{
  font:inherit;font-weight:400;font-style:italic;
  background:transparent;color:var(--oxblood-ink);
  border:0;border-bottom:1px solid rgba(241,230,204,.28);
  padding:10px 0 12px;outline:none;resize:vertical;
  transition:border-color .25s ease;
}
.form input::placeholder, .form textarea::placeholder{color:var(--oxblood-mute);font-style:italic}
.form input:focus, .form textarea:focus{border-color:var(--gold-2)}
.form__submit{grid-column:1/-1;justify-self:start;margin-top:10px}
@media (max-width:640px){.form{grid-template-columns:1fr}}

.contact__lines{
  border-top:1px solid rgba(241,230,204,.18);padding-top:32px;display:grid;gap:18px;
}
.contact__lines p{
  display:flex;gap:24px;flex-wrap:wrap;align-items:baseline;
  font-size:16px;color:var(--oxblood-soft);font-style:italic;
}
.contact__lines span{
  font-family:var(--caps);font-size:10.5px;letter-spacing:.32em;
  color:var(--gold-2);text-transform:uppercase;
  min-width:180px;font-style:normal;
}
.contact__lines a:hover{color:var(--gold-2)}

/* ====== FOOTER ====== */
.footer{
  background:#0e0708;color:var(--oxblood-soft);
  padding:54px var(--pad-x);
  border-top:1px solid rgba(184,148,106,.25);
}
.footer__inner{
  max-width:1280px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.footer .brand{color:var(--oxblood-ink)}
.footer .brand__crest{color:var(--gold-2)}
.footer .brand__name{color:var(--oxblood-ink)}
.footer__line{font-size:14px;color:var(--oxblood-mute);font-style:italic}
@media (max-width:700px){.footer__inner{flex-direction:column;align-items:flex-start;gap:14px}}

/* ====== REVEAL ====== */
.reveal{opacity:0;transform:translateY(20px);transition: opacity .9s ease, transform .9s ease}
.reveal.is-in{opacity:1;transform:none}

/* ====== SELECTION ====== */
::selection{background:var(--gold-deep);color:var(--parch)}

/* ====== SCROLLBAR ====== */
html::-webkit-scrollbar{width:10px;background:var(--parch)}
html::-webkit-scrollbar-thumb{background:var(--parch-edge);border-radius:0}
html::-webkit-scrollbar-thumb:hover{background:var(--gold-deep)}

/* =============================================================
   ANIMATION LAYER — Lever de Rideau, Mercedes drive,
   L'Engraveur live plate, scroll-driven hourglass,
   cabinet card Ken Burns, headlight pulse, dust motes
   ============================================================= */

html.is-locked, html.is-locked body { overflow:hidden !important; }

/* ====== LEVER DE RIDEAU ====== */
.lever{
  position:fixed;inset:0;z-index:999;pointer-events:auto;
  display:grid;place-items:center;
  background:#0a0506;
  transition: opacity .9s ease;
}
.lever.is-finished{opacity:0;pointer-events:none}
.lever.is-skipped .curtain--l{transform:translateX(-110%)!important}
.lever.is-skipped .curtain--r{transform:translateX(110%)!important}

.curtain{
  position:absolute;top:0;bottom:0;width:50.5%;
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.45) 0px, rgba(0,0,0,.45) 1px,
      transparent 1px, transparent 26px,
      rgba(0,0,0,.32) 26px, rgba(0,0,0,.32) 28px,
      transparent 28px, transparent 54px),
    radial-gradient(ellipse at 50% 30%, rgba(255,180,140,.06), transparent 60%),
    linear-gradient(180deg, #1a0508 0%, #3a1216 35%, #4a1a1f 55%, #3a1216 75%, #160407 100%);
  background-blend-mode: multiply, normal, normal;
  transform: translateX(0);
  transition: transform 2s cubic-bezier(.77,0,.18,1);
  box-shadow: inset 0 0 80px rgba(0,0,0,.6);
}
.curtain--l{left:0}
.curtain--r{right:0}
.lever.is-opening .curtain--l{transform:translateX(-100%)}
.lever.is-opening .curtain--r{transform:translateX(100%)}

.curtain__pleats{
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.32) 0px, rgba(0,0,0,.32) 2px,
      transparent 2px, transparent 22px,
      rgba(255,200,160,.05) 22px, rgba(255,200,160,.05) 24px,
      transparent 24px, transparent 60px);
  mix-blend-mode: overlay;
  pointer-events:none;
}
.curtain__edge{
  position:absolute;top:0;bottom:0;width:6px;
  background:linear-gradient(180deg,#b8946a,#7a5a2f 30%,#5a3a18 70%,#b8946a);
  box-shadow: 0 0 14px rgba(184,148,106,.5);
}
.curtain--l .curtain__edge{right:0}
.curtain--r .curtain__edge{left:0}
.curtain__valance{
  position:absolute;top:0;left:0;right:0;height:60px;
  background:linear-gradient(180deg,#5a1a1f,#3a1216);
  border-bottom:2px solid var(--gold-deep);
  box-shadow:inset 0 -6px 12px rgba(0,0,0,.5);
}

/* Split-crest on the opening doors */
.curtain{overflow:hidden}
.curtain__crest{
  position:absolute;top:50%;
  width: clamp(280px, 52vmin, 620px);
  height:auto;
  z-index:5;
  filter:
    drop-shadow(0 12px 28px rgba(0,0,0,.55))
    drop-shadow(0 0 28px rgba(184,148,106,.18));
  opacity:0;
  transition: opacity 1s ease .2s, filter .8s ease;
  pointer-events:none;
}
.lever.is-playing .curtain__crest{opacity:1}
.lever.is-opening .curtain__crest{
  opacity:.95;
  filter:
    drop-shadow(0 8px 18px rgba(0,0,0,.5))
    drop-shadow(0 0 40px rgba(207,168,108,.35));
}
.curtain__crest--l{right:0;transform:translate(50%, -50%)}
.curtain__crest--r{left:0; transform:translate(-50%, -50%)}

/* Caption below the seam */
.lever__caption{
  position:absolute;left:0;right:0;bottom:11%;
  z-index:6;text-align:center;pointer-events:none;
  opacity:0;transform:translateY(8px);
  transition: opacity 1s ease .5s, transform 1.2s ease .5s;
}
.lever.is-playing .lever__caption{opacity:1;transform:none}
.lever.is-opening .lever__caption{opacity:0;transition: opacity .6s ease}
.lever__caption .kicker{
  color:var(--gold-2);
  letter-spacing:.42em;
  display:block;margin-bottom:6px;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
}
.lever__caption .script{
  font-family:var(--script);
  color:var(--gold-pale);
  font-size:28px;display:block;line-height:1;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}

/* ====== HERO ANIMATION LAYERS ====== */
.hero__image{overflow:hidden}
.hero__image img{
  animation: kenburns 24s ease-out 1 forwards;
  transform-origin: 50% 55%;
}
@keyframes kenburns{
  0%   { transform: scale(1.08); }
  100% { transform: scale(1.0); }
}
.hero__beam{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 28% 65% at 50% 35%, rgba(255,235,200,.32), transparent 65%),
    radial-gradient(ellipse 18% 35% at 50% 30%, rgba(255,250,230,.22), transparent 70%);
  mix-blend-mode: screen;
  opacity:0;
  animation: beamFade 3.6s ease-out 1.2s forwards;
}
@keyframes beamFade{
  0% { opacity:0 }
  60% { opacity:.85 }
  100% { opacity:.6 }
}

/* Pulsing headlights of the model inside the cabinet */
.hero__headlight{
  position:absolute;width:64px;height:64px;border-radius:50%;
  background: radial-gradient(circle, rgba(255,235,200,.55), rgba(255,210,150,.15) 50%, transparent 70%);
  mix-blend-mode:screen;pointer-events:none;
  filter: blur(3px);
  opacity:0;
  animation: headlightPulse 3.2s ease-in-out 2.2s infinite;
}
.hero__headlight--a{ top:24%; left:36% }
.hero__headlight--b{ top:24%; left:54% ; animation-delay: 2.5s }
@keyframes headlightPulse{
  0%,100% { opacity:.18; transform:scale(.95) }
  50%     { opacity:.6;  transform:scale(1.08) }
}

/* Dust motes drifting in the beam */
.hero__motes{
  position:absolute;inset:0;pointer-events:none;
  background: linear-gradient(180deg, transparent 0%, transparent 85%, rgba(0,0,0,.2) 100%);
}
.hero__motes span{
  position:absolute;left:var(--x);top:100%;
  width:3px;height:3px;border-radius:50%;
  background: radial-gradient(circle, rgba(255,235,200,.9), rgba(255,235,200,0));
  animation: moteRise var(--d, 10s) linear var(--delay, 0s) infinite;
  opacity:0;
}
@keyframes moteRise{
  0%   { transform: translate(0, 0) scale(.6); opacity:0 }
  10%  { opacity:.6 }
  50%  { transform: translate(-10px, -55vh) scale(1); opacity:.4 }
  90%  { opacity:.15 }
  100% { transform: translate(8px, -110vh) scale(.6); opacity:0 }
}

/* ====== ENTR'ACTE — driving Mercedes ====== */
.intermission{
  background: linear-gradient(180deg, var(--parch) 0%, var(--parch-2) 45%, var(--parch) 100%);
  padding: clamp(60px,8vw,110px) var(--pad-x);
  position:relative;overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.intermission__caption{
  text-align:center;margin-bottom:22px;
  display:flex;justify-content:center;gap:14px;align-items:baseline;flex-wrap:wrap;
}
.intermission__caption .script{font-size:26px}
.intermission__rail{
  position:relative;height:120px;
  max-width:1480px;margin:0 auto;
  border-bottom:1px solid var(--gold-deep);
  background: linear-gradient(180deg, transparent 0%, rgba(184,148,106,.05) 100%);
}
.intermission__rail::before, .intermission__rail::after{
  content:"";position:absolute;bottom:-3px;width:6px;height:6px;border-radius:50%;background:var(--gold-deep);
}
.intermission__rail::before{left:0}
.intermission__rail::after{right:0}
.intermission__road{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:
    repeating-linear-gradient(90deg,
      var(--gold-deep) 0px, var(--gold-deep) 14px,
      transparent 14px, transparent 28px);
  opacity:.55;
}
.intermission__dust{
  position:absolute;bottom:6px;width:240px;height:30px;
  background: radial-gradient(ellipse, rgba(184,148,106,.35), transparent 70%);
  filter: blur(4px);
  opacity:0;
  transform: translateX(-110%);
}
.intermission__car{
  position:absolute;bottom:6px;left:0;
  width: clamp(220px, 27vw, 340px);
  height:auto;
  color:var(--gold-deep);
  transform: translateX(-25%);
  filter: drop-shadow(0 6px 0 rgba(184,148,106,.18));
}
.intermission.is-driving .intermission__car{
  animation: driveAcross 8s cubic-bezier(.42,0,.18,1) 0s forwards;
}
.intermission.is-driving .intermission__dust{
  animation: dustTrail 8s cubic-bezier(.42,0,.18,1) 0s forwards;
}
@keyframes driveAcross{
  0%   { transform: translateX(-30%) }
  10%  { transform: translateX(-18%) }
  100% { transform: translateX(calc(100vw - 60px)) }
}

/* — wheels spin while driving — */
.merc-spokes{ transform-box: fill-box; transform-origin: center center; }
.intermission.is-driving .merc-spokes{
  animation: wheelSpin .42s linear infinite;
}
@keyframes wheelSpin{ to{ transform: rotate(360deg) } }

/* — headlight beam fades in, flickers, then steady forward projection — */
.merc-beam, .merc-halo{ opacity:0; transform-origin: left center; }
.intermission.is-driving .merc-beam{
  animation: beamLight 8s ease-out 0s 1 forwards;
}
.intermission.is-driving .merc-halo{
  animation: beamLight 8s ease-out 0s 1 forwards;
}
@keyframes beamLight{
  0%   { opacity:0;  transform: scaleX(.6) }
  6%   { opacity:.95; transform: scaleX(1.08) }
  8%   { opacity:.4 }
  10%  { opacity:1;  transform: scaleX(1) }
  90%  { opacity:.85; transform: scaleX(1.02) }
  100% { opacity:0;  transform: scaleX(.9) }
}

/* — Mercedes-Benz star glints when in light — */
.merc-star{ opacity:.8; transform-box: fill-box; transform-origin: center center; }
.intermission.is-driving .merc-star{
  animation: starGlint 3.4s ease-in-out 1s infinite;
}
@keyframes starGlint{
  0%, 65%, 100% { opacity:.7; filter: none }
  78%           { opacity:1;  filter: drop-shadow(0 0 5px #ffe0a0) }
  85%           { opacity:.85 }
}

/* — road dashes scroll opposite to driving direction (parallax) — */
.intermission.is-driving .intermission__road{
  animation: roadFlow .55s linear infinite;
}
@keyframes roadFlow{
  from { background-position: 0 0 }
  to   { background-position: -28px 0 }
}
@keyframes dustTrail{
  0%   { transform: translateX(-130%); opacity:0 }
  15%  { opacity:.55 }
  100% { transform: translateX(calc(100vw - 320px)); opacity:.2 }
}
.intermission__milestones{
  margin-top:24px;
  display:flex;justify-content:center;gap:14px;flex-wrap:wrap;
  font-family:var(--caps);font-size:11px;letter-spacing:.32em;
  color:var(--gold-deep);text-transform:uppercase;
}
.intermission__milestones .dot{color:var(--line-strong)}

/* ====== CABINET CARDS — Ken Burns + cartouche shimmer ====== */
.piece__image{overflow:hidden;cursor:pointer}
.piece__image img{
  transition: transform 2.6s cubic-bezier(.2,.6,.2,1), filter .6s ease;
}
.piece:hover .piece__image img{
  transform: scale(1.06);
  filter: brightness(1.04) saturate(1.08);
}
.piece__cartouche{
  transition: filter .6s ease;
}
.piece:hover .piece__cartouche{
  filter: drop-shadow(0 0 12px rgba(207,168,108,.7));
}
.piece__plate{transition: transform .5s ease}
.piece:hover .piece__plate{transform: translateY(-2px)}
.piece__no{position:relative}
.piece:hover .piece__no::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  background: radial-gradient(circle, rgba(255,235,200,.4), transparent 70%);
  animation: cartoucheSparkle 1.6s ease-out 1;
  pointer-events:none;
}
@keyframes cartoucheSparkle{
  0%   { transform: scale(.6); opacity:0 }
  40%  { transform: scale(1.1); opacity:1 }
  100% { transform: scale(1.6); opacity:0 }
}

/* ====== L'ENGRAVEUR — live brass plate ====== */
.engraver{
  margin: 22px 0 18px;
  padding: 18px 0 0;
  border-top:1px dotted var(--line);
}
.engraver__caption{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  margin-bottom:14px;
}
.engraver__caption .script{font-size:22px}
.engraver__plate{
  position:relative;
  padding: 22px 26px 20px;
  border-radius:2px;
  background:
    linear-gradient(135deg,
      #d8b87a 0%,
      #b8946a 22%,
      #8a6a3d 50%,
      #b8946a 78%,
      #d8b87a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,235,200,.5),
    inset 0 -2px 4px rgba(80,50,20,.4),
    inset 0 0 0 1px rgba(80,50,20,.25),
    0 8px 18px -10px rgba(80,50,20,.5);
  overflow:hidden;
  transition: filter .4s ease;
}
.engraver__plate[data-tint="silver"], .engraver__plate[data-tint="chrome"], .engraver__plate[data-tint="steel"]{
  background: linear-gradient(135deg, #e6e8eb 0%, #b8bcbf 22%, #7a8086 50%, #b8bcbf 78%, #e6e8eb 100%);
}
.engraver__plate[data-tint="gold"]{
  background: linear-gradient(135deg, #ffe28a 0%, #d8a832 22%, #8a5e1f 50%, #d8a832 78%, #ffe28a 100%);
}
.engraver__plate[data-tint="copper"]{
  background: linear-gradient(135deg, #f0a47a 0%, #b46d3a 22%, #682f15 50%, #b46d3a 78%, #f0a47a 100%);
}
.engraver__plate[data-tint="titanium"]{
  background: linear-gradient(135deg, #e8c862 0%, #b5841e 22%, #6f4d12 50%, #b5841e 78%, #e8c862 100%);
}
.engraver__bevel{
  position:absolute;inset:6px;border:1px solid rgba(80,50,20,.35);border-radius:1px;
  pointer-events:none;
}
.engraver__rivet{
  position:absolute;width:6px;height:6px;border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #f3e6c3, #6a4818 70%);
  box-shadow: inset 0 -1px 1px rgba(0,0,0,.35);
}
.engraver__rivet--tl{top:10px;left:10px}
.engraver__rivet--tr{top:10px;right:10px}
.engraver__rivet--bl{bottom:10px;left:10px}
.engraver__rivet--br{bottom:10px;right:10px}
.engraver__inscription{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  text-align:center;
}
.engraver__row{
  font-family:var(--caps);text-transform:uppercase;
  color: #3a1f08;
  text-shadow:
    0 1px 0 rgba(255,235,200,.55),
    0 -1px 0 rgba(60,30,10,.5);
  letter-spacing:.22em;
}
.engraver__row--brand{font-size:13px;letter-spacing:.42em;color:#2a1408}
.engraver__row--cabinet{font-size:11px;letter-spacing:.32em}
.engraver__row--spec{font-size:11.5px;letter-spacing:.3em;color:#2a1408;font-weight:bold}
.engraver__row--no{font-size:10px;letter-spacing:.32em;opacity:.8;margin-top:4px}

/* Re-stamp animation: brief sink + dark flash */
.engraver__plate.is-stamping .engraver__inscription{
  animation: engravePress .55s ease-out 1;
}
@keyframes engravePress{
  0%   { transform: translateY(0); filter: brightness(1) }
  20%  { transform: translateY(1px); filter: brightness(.7) contrast(1.1) }
  100% { transform: translateY(0); filter: brightness(1) }
}

/* Polish-wipe sheen */
.engraver__wipe{
  position:absolute;top:0;bottom:0;left:-40%;width:50%;
  background: linear-gradient(110deg,
    transparent 20%,
    rgba(255,255,255,.55) 50%,
    transparent 80%);
  transform: skewX(-18deg);
  pointer-events:none;
  opacity:0;
}
.engraver__wipe.is-running{
  animation: polishWipe .95s cubic-bezier(.32,.16,.3,1) 1;
}
@keyframes polishWipe{
  0%   { left:-50%; opacity:0 }
  20%  { opacity:1 }
  100% { left:120%; opacity:0 }
}

/* ====== HOURGLASS ====== */
.hourglass{
  --drain: 0;
  display:grid;grid-template-columns:auto 1fr;
  gap:24px;align-items:center;
  max-width:920px;margin:0 auto clamp(36px, 5vw, 60px);
  padding: 20px clamp(20px, 3vw, 40px);
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(241,230,204,.35), rgba(232,218,184,.45));
  box-shadow: inset 0 0 0 4px rgba(241,230,204,.4), inset 0 0 0 5px rgba(184,148,106,.18);
}
.hourglass__case{
  position:relative;width:60px;height:100px;
}
.hourglass__glass, .hourglass__sand{
  position:absolute;inset:0;width:60px;height:100px;
}
.hourglass__glass{color:var(--gold-deep)}
.hourglass__sand{color:var(--gold-deep)}
.hourglass__top{
  transform-origin: 30px 50px;
  transform: scaleY(calc(1 - var(--drain)));
  fill: currentColor;
  opacity:.72;
  transition: transform .4s ease;
}
.hourglass__bottom{
  transform-origin: 30px 94px;
  transform: scaleY(var(--drain));
  fill: currentColor;
  opacity:.72;
  transition: transform .4s ease;
}
.hourglass__stream{
  fill: currentColor;
  opacity: calc(var(--drain) * (1 - var(--drain)) * 4);
  transition: opacity .3s ease;
}
.hourglass__caption{
  display:flex;flex-direction:column;line-height:1.5;
  color:var(--ink-soft);
}
.hourglass__caption .kicker{margin-bottom:6px}
.hourglass__caption .script{font-size:24px;color:var(--gold-deep)}

/* ====== TOPBAR ABOVE CURTAIN ====== */
.lever{z-index:1000}
.topbar{z-index:60}

/* ====== REDUCED MOTION ====== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hero__image img{transform:none}
  .lever{display:none}
}

/* =============================================================
   MOBILE OPTIMIZATION — tablet/phone/tiny phone
   ============================================================= */

/* Prevent any animated/clamped element from causing horizontal scroll */
html, body { overflow-x: hidden; }

/* ----- Tablet & below (≤880px) ----- */
@media (max-width: 880px){
  :root{
    --pad-y: clamp(56px, 9vw, 110px);
    --pad-x: clamp(18px, 5vw, 40px);
  }

  /* Hero — stack CTAs full-width for big tap targets */
  .hero{ min-height: 100svh; padding-top: clamp(92px, 14vw, 130px) }
  .hero__plate{ padding: clamp(30px,6vw,52px) clamp(22px,4vw,38px) }
  .hero__plate .display{ font-size: clamp(30px, 7.4vw, 52px); margin-bottom: 14px }
  .hero__plate .lede{ font-size: 16px; margin: 14px auto 26px }
  .hero__cta{ flex-direction: column; align-items: stretch; gap: 12px }
  .hero__cta .btn{ width: 100%; text-align: center }
  .ornament--corner{ width: 38px; height: 38px }
  .ornament--tl,.ornament--tr{ top: 12px }
  .ornament--bl,.ornament--br{ bottom: 12px }
  .ornament--tl,.ornament--bl{ left: 12px }
  .ornament--tr,.ornament--br{ right: 12px }
}

/* ----- Phone (≤640px) ----- */
@media (max-width: 640px){
  body{ font-size: 16px }

  /* Typography compression */
  .display{ font-size: clamp(28px, 8vw, 46px) }
  .section-head{ margin-bottom: clamp(28px, 6vw, 52px) }
  .section-head .display{ font-size: clamp(28px, 7.6vw, 42px); margin-bottom: 6px }
  .section-head .subtle{ font-size: 15px }
  .kicker{ font-size: 10px; letter-spacing: .36em }

  /* Topbar — compact */
  .topbar{ padding: 12px 14px }
  .brand__name{ font-size: 14px; letter-spacing: .2em }
  .brand__crest{ width: 30px; height: 36px; background-size: 56px auto; background-position: -14px -4px }
  .topbar__nav{ gap: 12px }
  .topbar__nav .cta{ padding: 9px 14px; font-size: 10px; letter-spacing: .26em }

  /* Lever de Rideau — smaller crest split */
  .curtain__crest{ width: clamp(200px, 48vmin, 380px) }
  .lever__caption{ bottom: 9% }
  .lever__caption .kicker{ font-size: 9.5px; letter-spacing: .35em }
  .lever__caption .script{ font-size: 22px }

  /* Hero plate tweaks */
  .hero__plate{ padding: 26px 18px }
  .hero__plate .script{ font-size: 24px }
  .hero__plate .display{ font-size: clamp(26px, 8vw, 38px) }
  .hero__plate .lede{ font-size: 14.5px; margin: 12px auto 22px }
  .hero__price{ font-size: 9.5px; letter-spacing: .26em }
  .btn{ padding: 14px 22px; font-size: 11px; letter-spacing: .28em }

  /* Manifesto */
  .manifesto__cols{ gap: 24px }
  .manifesto__cols p{ font-size: 16px; line-height: 1.66 }
  .dropcap{ font-size: 52px; margin: 2px 8px 0 0 }
  .flourish-mark{ width: clamp(180px, 60vw, 280px) }

  /* Intermission — smaller car */
  .intermission{ padding: clamp(44px, 8vw, 80px) var(--pad-x) }
  .intermission__caption{ gap: 8px }
  .intermission__caption .script{ font-size: 20px }
  .intermission__rail{ height: 86px }
  .intermission__car{ width: clamp(160px, 56vw, 230px); bottom: 4px }
  .intermission__dust{ width: 160px; height: 22px }
  .intermission__milestones{ font-size: 9.5px; letter-spacing: .26em; gap: 8px }

  /* Collection — tighter pieces */
  .piece{ gap: 26px; padding: clamp(48px,7vw,80px) var(--pad-x) }
  .piece__plate{ width: 100px; height: 68px; margin-bottom: 14px }
  .piece__cartouche{ width: 100px; height: 68px }
  .piece__no{ font-size: 26px }
  .piece__name{ font-size: clamp(28px, 7.6vw, 42px); margin-bottom: 4px }
  .piece__sub{ font-size: 22px; margin-bottom: 18px }
  .piece__text p{ font-size: 15.5px; line-height: 1.6 }
  .piece__verse{ font-size: 14.5px; padding-left: 14px; margin: 18px 0 22px }
  .piece__spec dt{ font-size: 9.5px; letter-spacing: .24em }
  .piece__spec dd{ font-size: 13.5px }
  .piece__price{ font-size: 11.5px; letter-spacing: .26em }
  .piece__image figcaption{ font-size: 9.5px; letter-spacing: .22em; padding: 10px 14px }

  /* Configurator — flow + tighter cards */
  .atelier{ padding: clamp(56px,10vw,100px) var(--pad-x) }
  .config{ gap: 28px }
  .config__figure{ padding: 8px }
  .config__corners .ornament--corner{ width: 30px; height: 30px }
  .config__legend{ grid-template-columns: 1fr; gap: 14px; margin-top: 16px }
  .config__strip-bar{ height: 28px }
  .glass-profile{ height: 42px }

  /* Group legend: stack kicker and chosen-name vertically */
  .config__group legend{
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-bottom: 12px;
    margin-bottom: 14px;
  }
  .config__chosen{ font-size: 16px }

  /* Composition cards */
  .content-card__body{ padding: 12px 12px 14px }
  .content-card__title{ font-size: 18px }
  .content-card__sub{ font-size: 12px; line-height: 1.4 }
  .content-card__delta{ font-size: 9.5px; letter-spacing: .28em }

  /* Facade cards */
  .facade-card__body{ padding: 10px 12px 12px }
  .facade-card__title{ font-size: 16px }
  .facade-card__sub{ font-size: 11.5px }
  .facade-card__delta{ font-size: 9px; letter-spacing: .28em }

  /* Metal swatches — 3 per row */
  .swatches{ grid-template-columns: repeat(3, 1fr); gap: 10px }
  .swatch{ padding: 10px 4px 12px; gap: 8px }
  .swatch__disc{ width: 46px; height: 46px }
  .swatch__label{ font-size: 9.5px; letter-spacing: .2em }
  .swatch.is-active .swatch__disc{ outline-offset: 3px }

  /* Glass cards */
  .glass{ padding: 14px 12px; gap: 6px }
  .glass svg{ width: 64px; height: 38px }
  .glass__title{ font-size: 18px }
  .glass__note{ font-size: 11.5px }
  .glass__delta{ font-size: 9.5px; letter-spacing: .24em }

  /* Engraver brass plate — keep readable */
  .engraver{ padding-top: 14px; margin: 18px 0 14px }
  .engraver__caption .script{ font-size: 20px }
  .engraver__plate{ padding: 16px 16px 14px }
  .engraver__bevel{ inset: 5px }
  .engraver__rivet{ width: 5px; height: 5px }
  .engraver__rivet--tl,.engraver__rivet--tr{ top: 8px }
  .engraver__rivet--bl,.engraver__rivet--br{ bottom: 8px }
  .engraver__rivet--tl,.engraver__rivet--bl{ left: 8px }
  .engraver__rivet--tr,.engraver__rivet--br{ right: 8px }
  .engraver__row--brand{ font-size: 11px; letter-spacing: .32em }
  .engraver__row--cabinet{ font-size: 9px; letter-spacing: .22em }
  .engraver__row--spec{ font-size: 9.5px; letter-spacing: .22em }
  .engraver__row--no{ font-size: 8.5px; letter-spacing: .24em; margin-top: 2px }

  /* Config summary */
  .config__summary{ padding: 18px 16px }
  .config__summary header{ padding-bottom: 12px; margin-bottom: 14px }
  .config__summary header .script{ font-size: 20px }
  .config__summary dt{ font-size: 9.5px; letter-spacing: .24em }
  .config__summary dd{ font-size: 13.5px }
  .config__price-label{ font-size: 9.5px; letter-spacing: .26em }
  .config__price-value{ font-size: 26px }
  .config__cta{ width: 100% }
  .config__fine{ font-size: 11.5px }

  /* Materials */
  .materials__grid > .mat{ padding: 26px 20px }
  .mat__num{ font-size: 18px }
  .mat__title{ font-size: 22px }
  .mat p{ font-size: 14.5px }

  /* Commission */
  .steps li{ padding: 22px 0 0 }
  .step__no{ font-size: 38px; margin-bottom: 12px }
  .steps h3{ font-size: 24px; margin-bottom: 10px }
  .steps p{ font-size: 14.5px }

  /* Hourglass — single column */
  .hourglass{ grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; padding: 18px 20px }
  .hourglass__case{ width: 48px; height: 80px }
  .hourglass__glass, .hourglass__sand{ width: 48px; height: 80px }
  .hourglass__caption{ align-items: center }
  .hourglass__caption .script{ font-size: 20px }

  /* Contact */
  .contact .display{ font-size: clamp(28px, 8vw, 42px) }
  .contact .subtle{ margin-bottom: 36px }
  .form{ gap: 18px }
  .form input, .form textarea{ font-size: 16px } /* prevent iOS focus zoom */
  .form__submit{ width: 100%; text-align: center }
  .contact__lines{ padding-top: 24px; gap: 14px }
  .contact__lines p{ flex-direction: column; align-items: flex-start; gap: 4px }
  .contact__lines span{ min-width: 0; font-size: 9.5px }
  .contact__lines p, .contact__lines a{ font-size: 15px }

  /* Footer */
  .footer{ padding: 36px var(--pad-x) }
  .footer__line{ font-size: 13px }
}

/* ----- Tiny phones (≤380px) ----- */
@media (max-width: 380px){
  :root{ --pad-x: 14px }
  .display{ font-size: clamp(24px, 8vw, 36px) }
  .brand__name{ font-size: 12.5px; letter-spacing: .18em }
  .brand__crest{ width: 26px; height: 32px; background-size: 50px auto; background-position: -12px -3px }
  .topbar__nav .cta{ padding: 7px 11px; font-size: 9.5px; letter-spacing: .22em }
  .hero__plate{ padding: 22px 14px }
  .hero__plate .display{ font-size: 26px }
  .hero__plate .script{ font-size: 22px }
  .lever__caption .script{ font-size: 20px }
  .curtain__crest{ width: clamp(180px, 56vmin, 320px) }
  .swatch__disc{ width: 42px; height: 42px }
  .intermission__car{ width: clamp(150px, 60vw, 200px) }
  .piece__name{ font-size: 26px }
  .piece__sub{ font-size: 20px }
  .config__price-value{ font-size: 22px }
  .engraver__row--brand{ font-size: 10px; letter-spacing: .26em }
  .engraver__row--cabinet, .engraver__row--spec{ font-size: 8.5px; letter-spacing: .2em }
}