/* Maison des Maisons — page 13. Scoped to body.maison-page / .mdm; reference: content/brand/maison-des-maisons/reference/salon-de-nuit.html */

/* ---------- page ground + grain/vignette (above #page z110, below cookie 150 / header 500 / modals 1000 / pushy) ---------- */
body.maison-page{background-color:#0D090D}
body.maison-page::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:120;
  background:
    repeating-radial-gradient(circle at 17% 29%, rgba(255,240,225,.5) 0 .6px, transparent .6px 2.3px),
    repeating-radial-gradient(circle at 71% 63%, rgba(0,0,0,.6) 0 .7px, transparent .7px 2.9px),
    repeating-conic-gradient(from 13deg at 41% 11%, rgba(255,255,255,.35) 0 .4deg, transparent .4deg 1.7deg);
  opacity:.045;mix-blend-mode:overlay;
}
body.maison-page::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:119;
  background:radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(5,2,5,.55) 100%);
}

/* ---------- tokens + root ---------- */
.mdm{
  --ink:#120D12;
  --ink-2:#1A121A;
  --ink-3:#241823;
  --ivory:#EFE6D8;
  --ivory-2:#D9CFC2;
  --mute:#A89BA3;
  --gold:#C9A96E;
  --gold-hi:#E4CC97;
  --line:rgba(201,169,110,.28);
  --serif:'Cormorant', 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --sans:'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --mono:"Courier New", ui-monospace, monospace;
  --gutter:clamp(16px, 5vw, 72px);
  --ease:cubic-bezier(.2,.7,.1,1);
  --hdr:88px;
  color-scheme:dark;
  margin-top:var(--hdr);
  background:var(--ink);color:var(--ivory);
  font-family:var(--serif);font-style:normal;font-weight:400;font-size:clamp(18px,1.15vw + 12px,21px);line-height:1.62;text-align:left;
  overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
@media (max-width:1200px){ .mdm{--hdr:52px} }

/* ---------- neutralise global site styles (common.css + bootstrap 3) ---------- */
.mdm *,.mdm *::before,.mdm *::after{box-sizing:border-box}
.mdm h1,.mdm h2,.mdm h3,.mdm h4{font-family:var(--serif);font-style:normal;font-weight:300;text-transform:none;color:inherit;margin:0}
.mdm p{font:inherit;color:inherit;margin:1em 0}
.mdm blockquote{margin:0;padding:0;border:0;font-size:inherit}
.mdm dl{margin:0}
.mdm dt,.mdm dd{line-height:inherit;font-weight:inherit;margin:0}
.mdm ol{margin:0;padding:0;list-style:none;counter-reset:none}
.mdm li{margin:0}
.mdm ol > li::before{content:none}
.mdm a,.mdm a:hover,.mdm a:focus{color:inherit !important;text-decoration:none !important}
.mdm em{font-style:italic}
.mdm svg{max-width:100%}
.mdm ::selection{background:#5C3A4E;color:#FFF7EA}
.mdm :focus-visible{outline:1px solid var(--gold-hi);outline-offset:4px}

/* ---------- type primitives ---------- */
.mdm .lbl{
  font-family:var(--sans);font-weight:300;font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold-hi);line-height:1.6;
}
.mdm .lbl--mute{color:var(--mute)}
.mdm .display{font-family:var(--serif);font-weight:300;line-height:1.02;letter-spacing:-.01em;margin:0}
.mdm .it{font-style:italic}
.mdm .rule{display:block;width:56px;height:1px;background:var(--gold);border:0;margin:28px 0}
.mdm .rule--c{margin-left:auto;margin-right:auto}

.mdm .wrap{max-width:1180px;margin:0 auto;padding-inline:var(--gutter)}
.mdm .narrow{max-width:720px;margin:0 auto;padding-inline:var(--gutter)}
.mdm section{position:relative}

/* ---------- reveal (.js set on .mdm by maison.js; without JS everything stays visible) ---------- */
.mdm .rv{transition:opacity 1.6s var(--ease), transform 1.6s var(--ease)}
.mdm.js .rv{opacity:0;transform:translateY(22px)}
.mdm .rv.in{opacity:1;transform:none}
.mdm .rv.d1{transition-delay:.15s}.mdm .rv.d2{transition-delay:.3s}.mdm .rv.d3{transition-delay:.45s}.mdm .rv.d4{transition-delay:.6s}

/* ---------- act rail ---------- */
.mdm .rail{position:fixed;right:clamp(14px,2vw,30px);top:50%;transform:translateY(-50%);z-index:39;display:flex;flex-direction:column;gap:14px;opacity:0;pointer-events:none;transition:opacity .8s}
.mdm .rail.on{opacity:1;pointer-events:auto}
.mdm .rail a{font-family:var(--sans);font-weight:300;font-size:10px;letter-spacing:.2em;line-height:1.62;color:var(--mute) !important;text-decoration:none !important;text-align:right;transition:color .5s}
.mdm .rail a.cur{color:var(--gold-hi) !important}
.mdm .rail a::after{content:"";display:inline-block;width:10px;height:1px;background:currentColor;vertical-align:middle;margin-left:8px;transition:width .6s var(--ease)}
.mdm .rail a.cur::after{width:26px}

/* ---------- cover ---------- */
.mdm .cover{
  min-height:calc(100vh - var(--hdr));min-height:calc(100svh - var(--hdr));display:grid;grid-template-rows:1fr auto;
  background:
    radial-gradient(60% 50% at 50% 46%, rgba(201,169,110,.13), transparent 70%),
    radial-gradient(90% 70% at 50% 100%, #2A1427 0%, transparent 70%),
    linear-gradient(180deg,#0E0A0E 0%, var(--ink) 40%, #170E16 100%);
  overflow:hidden;position:relative;
}
/* velvet folds: in the reference the act::before layers resolve to the first viewport, so they render over the cover only */
.mdm .cover::before{
  content:"";position:absolute;left:0;right:0;top:0;height:100vh;pointer-events:none;
  background:repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 46px, rgba(0,0,0,.266) 70px, rgba(255,255,255,.061) 94px, rgba(0,0,0,0) 120px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 55%);mask-image:linear-gradient(180deg,#000 0%,transparent 55%);
}
.mdm .cover__in{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:max(24px, calc(120px - var(--hdr))) var(--gutter) 40px}
.mdm .flacon{width:clamp(150px,22vw,230px);height:auto;margin-bottom:clamp(26px,4vh,44px);overflow:visible}
.mdm .flacon .halo{animation:mdm-breathe 9s ease-in-out infinite;transform-origin:120px 190px}
.mdm .flacon .glint{animation:mdm-glint 7s ease-in-out infinite}
.mdm .flacon .glint--late{animation-delay:-3s}
@keyframes mdm-breathe{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes mdm-glint{0%,100%{opacity:.25}45%{opacity:.85}}
.mdm .cover h1{font-size:clamp(50px,9vw,128px);color:#F4EBDD}
.mdm .cover__title{margin-top:18px}
.mdm .cover h1 .des{font-style:italic;color:var(--gold);font-size:.78em;padding:0 .08em}
.mdm .cover__bars{display:flex;gap:10px;justify-content:center;margin:34px 0 30px}
.mdm .cover__bars i{display:block;width:38px;height:2px;opacity:.9}
.mdm .cover__bars i:nth-child(1){background:#E8A98C}
.mdm .cover__bars i:nth-child(2){background:#C2394B}
.mdm .cover__bars i:nth-child(3){background:#B8AE62}
.mdm .cover__bars i:nth-child(4){background:#A796BE}
.mdm .cover__bars i:nth-child(5){background:#3F9A7A}
.mdm .cover__lines{font-style:italic;font-size:clamp(20px,1.6vw + 12px,27px);color:var(--ivory-2);line-height:1.5;margin:0}
.mdm .cover__foot{padding:0 var(--gutter) calc(30px + env(safe-area-inset-bottom,0px));text-align:center}
.mdm .cover__foot .lbl{color:var(--mute)}
.mdm .scrollcue{display:block;width:1px;height:46px;margin:0 auto 18px;background:linear-gradient(var(--gold),transparent);animation:mdm-cue 3.2s ease-in-out infinite}
@keyframes mdm-cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- manifesto ---------- */
.mdm .manifesto{padding:clamp(110px,16vh,190px) 0;background:linear-gradient(180deg,#170E16, var(--ink) 30%)}
.mdm .manifesto .lbl{text-align:center}
.mdm .manifesto h2{font-size:clamp(38px,5vw,64px);text-align:center;margin-top:18px;color:#F4EBDD}
.mdm .manifesto__open{font-size:clamp(26px,2.2vw + 14px,38px);font-style:italic;font-weight:300;line-height:1.3;text-align:center;color:var(--gold-hi);margin:0 0 56px}
.mdm .manifesto p{margin:0 0 1.2em}
.mdm .manifesto p.dropcap::first-letter{float:left;font-size:4.2em;line-height:.82;padding:.06em .1em 0 0;color:var(--gold);font-weight:300}
.mdm .manifesto__close{text-align:center;font-style:italic;font-size:clamp(22px,1.4vw + 14px,30px);line-height:1.45;color:var(--ivory);margin-top:56px !important}

/* ---------- how our compositions live ---------- */
.mdm .live{padding:clamp(100px,14vh,170px) 0;background:
  radial-gradient(70% 60% at 85% 30%, rgba(122,58,84,.22), transparent 70%),
  var(--ink-2)}
.mdm .live__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,110px);align-items:start}
.mdm .live h2{font-size:clamp(40px,4.6vw,70px);color:#F4EBDD;margin-top:20px}
.mdm .live h2 em{color:var(--gold)}
.mdm .live p{margin:0 0 1.2em;color:var(--ivory)}
.mdm .live__coda{font-style:italic;font-size:clamp(24px,1.6vw + 14px,32px);color:var(--gold-hi);margin-top:1.6em !important;line-height:1.35}
.mdm .wave{display:block;width:100%;height:60px;margin-top:36px}
.mdm .wave path{stroke:var(--gold);stroke-width:1;fill:none;stroke-dasharray:900;stroke-dashoffset:0;transition:stroke-dashoffset 4s var(--ease)}
.mdm.js .wave path{stroke-dashoffset:900}
.mdm.js .in .wave path,.mdm.js .wave.in path{stroke-dashoffset:0}

/* ---------- five collections ---------- */
.mdm .colls{padding:clamp(100px,14vh,170px) 0;background:var(--ink)}
.mdm .colls__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px;margin-bottom:48px}
.mdm .colls__head h2{font-size:clamp(36px,4.4vw,62px);color:#F4EBDD;max-width:14ch}
.mdm .colls ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.mdm .coll{display:grid;grid-template-columns:56px minmax(0,1.3fr) minmax(0,2fr) minmax(0,1.2fr) 110px;gap:20px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--line)}
.mdm .coll__n{font-family:var(--sans);font-weight:300;font-size:12px;letter-spacing:.2em;color:var(--mute)}
.mdm .coll__name{font-size:clamp(28px,2.4vw,38px);font-weight:400;line-height:1.1}
.mdm .coll__line{font-size:18px;color:var(--ivory-2);line-height:1.45}
.mdm .coll__motto{font-style:italic;font-size:20px;text-align:right}
.mdm .coll__st{font-family:var(--sans);font-weight:300;font-size:10px;letter-spacing:.24em;text-transform:uppercase;text-align:right}
.mdm .coll--on .coll__name{color:#F4EBDD}
.mdm .coll--on .coll__motto{color:var(--gold-hi)}
.mdm .coll--on .coll__st{color:var(--gold-hi)}
.mdm .coll--on .coll__st::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold-hi);margin-right:9px;vertical-align:1px;box-shadow:0 0 12px var(--gold)}
.mdm .coll--off .coll__name,.mdm .coll--off .coll__motto,.mdm .coll--off .coll__line,.mdm .coll--off .coll__st{color:var(--mute)}
.mdm .coll--off .coll__st{font-family:var(--serif);font-style:italic;font-size:17px;letter-spacing:.02em;text-transform:none}
.mdm .colls__coda{font-style:italic;color:var(--ivory-2);margin-top:34px;font-size:20px}

/* ---------- Le Corps title ---------- */
.mdm .corps{padding:clamp(110px,16vh,190px) 0 clamp(60px,8vh,100px);text-align:center;background:linear-gradient(180deg,var(--ink),#160D14)}
.mdm .corps h2{font-size:clamp(64px,11vw,170px);color:#F4EBDD;font-style:italic}
.mdm .corps .lbl{margin-bottom:22px}
.mdm .corps__sub{font-style:italic;color:var(--ivory-2);font-size:clamp(20px,1.4vw + 12px,26px);margin:18px 0 0}

/* ---------- acts ---------- */
.mdm .act{
  position:relative;
  min-height:100vh;min-height:100svh;display:flex;align-items:center;
  padding:clamp(90px,12vh,140px) 0;color:var(--ivory);
  background:
    radial-gradient(70% 60% at 22% 30%, var(--glow), transparent 72%),
    radial-gradient(80% 70% at 100% 100%, var(--deep), transparent 70%),
    var(--field);
  border-top:1px solid rgba(255,240,220,.05);
  overflow:hidden;
  scroll-margin-top:52px;
}
.mdm .act__grid{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,7vw,120px);align-items:start}
.mdm .act__panel{position:sticky;top:110px}
.mdm .act__no{font-family:var(--serif);font-weight:300;font-size:clamp(90px,10vw,150px);line-height:.8;color:var(--accent);opacity:.9;display:block;margin-bottom:18px}
.mdm .act h3{font-size:clamp(44px,5.2vw,82px);font-weight:300;line-height:1;color:#FBF3E6;margin:16px 0 14px;letter-spacing:-.01em}
.mdm .act__tr{font-style:italic;font-size:clamp(22px,1.4vw + 12px,28px);color:var(--accent);margin:0}
.mdm .act__epi{margin:36px 0 0;padding-top:24px;border-top:1px solid var(--rule);font-style:italic;font-size:clamp(20px,1vw + 13px,24px);line-height:1.45;color:var(--ivory)}
.mdm .act__lead{font-style:italic;font-size:clamp(24px,1.6vw + 13px,32px);line-height:1.35;color:var(--accent);margin:0 0 1.1em;font-weight:300}
.mdm .act__story p{margin:0 0 1.15em}
.mdm .pyr{margin:46px 0 0;padding:30px 0 0;border-top:1px solid var(--rule);display:grid;gap:0}
.mdm .pyr__row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:baseline;padding:14px 0;border-bottom:1px dashed var(--rule)}
.mdm .pyr__row:last-child{border-bottom:0}
.mdm .pyr dt{font-family:var(--sans);font-weight:400;font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--ivory-2)}
.mdm .pyr dd{margin:0;font-family:var(--mono);font-size:15px;line-height:1.6;letter-spacing:.01em;color:var(--ivory)}
.mdm .pyr__tier{display:inline-block;width:14px;height:1px;background:var(--accent);vertical-align:middle;margin-right:12px;opacity:.85}
.mdm .pyr__row:nth-child(2) .pyr__tier{width:24px}
.mdm .pyr__row:nth-child(3) .pyr__tier{width:34px}
.mdm .act__close{margin:40px 0 0;font-style:italic;font-size:clamp(21px,1.1vw + 13px,26px);line-height:1.45;color:#FBF3E6;padding-left:22px;border-left:1px solid var(--accent)}

.mdm .act--1{--field:#2B1A18;--glow:rgba(214,140,104,.30);--deep:#1A0F10;--accent:#F0BFA6;--rule:rgba(240,191,166,.30)}
.mdm .act--2{--field:#2A0A10;--glow:rgba(170,30,52,.42);--deep:#14050A;--accent:#F2A0A8;--rule:rgba(242,160,168,.30)}
.mdm .act--3{--field:#1E2116;--glow:rgba(176,160,82,.26);--deep:#11140C;--accent:#DCCF8E;--rule:rgba(220,207,142,.30)}
.mdm .act--4{--field:#221E28;--glow:rgba(170,152,190,.24);--deep:#141119;--accent:#CFC2E0;--rule:rgba(207,194,224,.30)}
.mdm .act--5{--field:#0F211C;--glow:rgba(120,82,40,.40);--deep:#08130F;--accent:#9FD6BC;--rule:rgba(159,214,188,.30)}

/* ---------- waitlist (phase 1: opens soon, no form) ---------- */
.mdm .wl{padding:clamp(110px,16vh,190px) 0;scroll-margin-top:52px;background:
  radial-gradient(55% 60% at 50% 0%, rgba(201,169,110,.12), transparent 70%),
  linear-gradient(180deg,#160D14, var(--ink))}
.mdm .wl__card{max-width:660px;margin:0 auto;text-align:center}
.mdm .wl h2{font-size:clamp(40px,5.6vw,76px);font-style:italic;color:#F4EBDD;margin-top:18px}
.mdm .wl__body{color:var(--ivory-2);margin:22px auto 48px;max-width:34em}
.mdm .wl__act{display:flex;justify-content:center}
.mdm .cta{
  display:inline-block;margin:8px 0 0;cursor:pointer;
  font-family:var(--sans);font-style:normal;font-weight:400;font-size:12px;line-height:1.2;letter-spacing:.34em;text-transform:uppercase;white-space:normal;
  color:var(--ink);background:linear-gradient(180deg,#EAD6A6,#C9A96E);border:0;border-radius:0;padding:20px 44px 19px;
  box-shadow:0 0 0 1px rgba(234,214,166,.4), 0 18px 50px -20px rgba(201,169,110,.6);
  transition:transform .5s var(--ease), box-shadow .5s;
  -webkit-appearance:none;appearance:none;
}
.mdm .cta:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(234,214,166,.6), 0 24px 60px -18px rgba(201,169,110,.75)}

/* ---------- FAQ ---------- */
.mdm .faq{padding:clamp(80px,12vh,150px) 0 clamp(90px,12vh,150px);background:var(--ink)}
.mdm .faq h2{font-size:clamp(34px,4vw,54px);color:#F4EBDD;margin:18px 0 40px}
.mdm .faq details{display:block;border-top:1px solid var(--line)}
.mdm .faq details:last-of-type{border-bottom:1px solid var(--line)}
.mdm .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding:24px 0;font-size:clamp(21px,1vw + 14px,25px);color:var(--ivory)}
.mdm .faq summary::-webkit-details-marker{display:none}
.mdm .faq summary::after{content:"+";font-family:var(--sans);font-weight:200;font-size:22px;color:var(--gold-hi);transition:transform .5s var(--ease)}
.mdm .faq details[open] summary::after{transform:rotate(45deg)}
.mdm .faq details p{margin:0 0 26px;color:var(--ivory-2);max-width:40em}

/* ---------- page note (site footer follows) ---------- */
.mdm .foot{padding:56px var(--gutter) 56px;text-align:center;border-top:1px solid rgba(201,169,110,.14);background:#0D090D}
.mdm .foot p{margin:0;font-style:italic;color:var(--mute);font-size:17px}
.mdm .foot p.foot__note{margin-top:14px;font-size:15px;line-height:1.5}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .mdm .live__grid,.mdm .act__grid{grid-template-columns:minmax(0,1fr)}
  .mdm .act__panel{position:static}
  .mdm .coll{grid-template-columns:40px minmax(0,1fr) auto;row-gap:6px}
  .mdm .coll__line{grid-column:2 / -1}
  .mdm .coll__motto{grid-column:2 / 3;text-align:left}
  .mdm .coll__st{grid-column:3;grid-row:1}
  .mdm .rail{display:none}
}
@media (max-width:520px){
  .mdm{font-size:18px}
  .mdm .pyr__row{grid-template-columns:minmax(0,1fr);gap:4px}
  .mdm .act__no{font-size:84px}
  .mdm .coll{grid-template-columns:30px minmax(0,1fr)}
  .mdm .coll__st{grid-column:2;grid-row:auto;text-align:left}
  .mdm .lbl{letter-spacing:.24em}
  .mdm .cover__bars i{width:28px}
}
@media (prefers-reduced-motion:reduce){
  .mdm *,.mdm *::before,.mdm *::after{animation:none !important;transition:none !important}
  .mdm.js .rv{opacity:1;transform:none}
  .mdm.js .wave path{stroke-dashoffset:0}
}

body.maison-page #header-top{background-color:#120D12}