/* ============================================================
   MYSTIQUE COMPANIONS — Concept 02 "Atelier Noir"
   Cinematic dark gallery. Cormorant Garamond + Jost.
   Golden-Beige read as LIGHT against espresso-black.
   ============================================================ */

:root{
  --void:#13100D;
  --void-2:#1B1713;
  --void-3:#241F19;
  --bone:#EFE7D9;
  --bone-2:#CFC3AE;
  --beige:#D8C09A;
  --gold:#C9A863;
  --gold-dp:#9C7F44;
  --bronze:#6E5836;
  --hair:rgba(216,192,154,.16);
  --hair-2:rgba(216,192,154,.32);

  /* Liquid type — vmin-anchored so a short landscape viewport
     scales down with the screen instead of overflowing it. */
  --f-micro: clamp(.63rem, .58rem + .2vmin, .72rem);
  --f-small: clamp(.8rem, .74rem + .3vmin, .9rem);
  --f-body:  clamp(1rem, .93rem + .45vmin, 1.12rem);
  --f-lead:  clamp(1.1rem, .95rem + .95vmin, 1.55rem);
  --f-h3:    clamp(1.3rem, 1rem + 1.6vmin, 2.2rem);
  --f-h2:    clamp(2rem, 1.15rem + 3.9vmin, 4.6rem);
  --f-h1:    clamp(2.8rem, 1.1rem + 7.8vmin, 8.5rem);

  --gut: clamp(1.2rem, .6rem + 3vw, 4rem);
  --band: clamp(3.8rem, 1.6rem + 8.4vmin, 9.5rem);
  --railw: clamp(4.5rem, 6vw, 6.5rem);
  --ease: cubic-bezier(.19,1,.22,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--void);color:var(--bone-2);
  font-family:"Jost",system-ui,-apple-system,sans-serif;
  font-size:var(--f-body);line-height:1.75;font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img,picture,svg{max-width:100%;display:block}
img{height:auto;background:var(--void-3)}
img[src*="logo"],img[src*="monogram"]{background:none}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;margin:0;line-height:1.04;color:var(--bone)}
p{margin:0 0 1.1em}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
::selection{background:var(--gold);color:var(--void)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px;background:var(--gold);color:var(--void);padding:.8rem 1.2rem;z-index:999}
.skip:focus{left:.6rem;top:.6rem}

/* ---- Scroll progress ---- */
.prog{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--bronze),var(--gold),var(--beige));z-index:120}

/* ---- Fixed vertical rail (desktop) ---- */
.rail-side{position:fixed;inset:0 auto 0 0;width:var(--railw);z-index:100;
  border-right:1px solid var(--hair);background:rgba(19,16,13,.72);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding-block:1.6rem}
.rail-side__mark{width:clamp(1.9rem,2.4vw,2.7rem)}
.rail-side__nav{display:flex;flex-direction:column;align-items:center;gap:clamp(1rem,2.2vh,2rem)}
.rail-side__nav a{writing-mode:vertical-rl;font-size:var(--f-micro);letter-spacing:.34em;
  text-transform:uppercase;color:var(--bone-2);white-space:nowrap;
  opacity:.6;transition:opacity .4s var(--ease),color .4s var(--ease)}
.rail-side__nav a:hover,.rail-side__nav a.is-active{opacity:1;color:var(--gold)}
.rail-side__foot{font-size:var(--f-micro);letter-spacing:.3em;text-transform:uppercase;
  writing-mode:vertical-rl;color:var(--bronze)}

.page{padding-left:var(--railw)}

/* ---- Top bar ---- */
.topbar{position:absolute;top:0;left:var(--railw);right:0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:clamp(1rem,2.4vh,2.2rem) var(--gut)}
.topbar__logo img{width:clamp(150px,14vw,260px)}
.topbar__cta{display:flex;align-items:center;gap:1.2rem}

.shell{width:min(100% - (var(--gut) * 2),1500px);margin-inline:auto}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.75em;padding:clamp(.8rem,.6rem + .6vmin,1.1rem) clamp(1.4rem,1rem + 1.6vmin,2.5rem);
  border:1px solid var(--hair-2);color:var(--bone);background:transparent;cursor:pointer;
  font-family:"Jost",sans-serif;font-size:var(--f-micro);font-weight:500;letter-spacing:.3em;text-transform:uppercase;
  position:relative;overflow:hidden;transition:color .5s var(--ease),border-color .5s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:var(--gold);transform:translateY(101%);transition:transform .55s var(--ease);z-index:-1}
.btn:hover{color:var(--void);border-color:var(--gold)}
.btn:hover::before{transform:none}
.btn > *{position:relative}
.btn--solid{background:var(--gold);border-color:var(--gold);color:var(--void)}
.btn--solid::before{background:var(--bone)}
.btn--solid:hover{color:var(--void);border-color:var(--bone)}
.arrow{transition:transform .5s var(--ease)}
.btn:hover .arrow{transform:translateX(.35em)}
.tlink{display:inline-flex;align-items:center;gap:.5em;font-size:var(--f-micro);letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold);border-bottom:1px solid transparent;padding-bottom:.3rem;
  transition:border-color .45s var(--ease),color .45s var(--ease)}
.tlink:hover{border-color:var(--gold);color:var(--beige)}
.tlink:hover .arrow{transform:translateX(.3em)}

/* ---- Kicker ---- */
.kick{font-size:var(--f-micro);letter-spacing:.46em;text-transform:uppercase;color:var(--bronze);
  display:flex;align-items:center;gap:1em;margin:0 0 1.6rem;font-weight:400}
.kick::before{content:"";width:clamp(1.5rem,4vw,3.4rem);height:1px;background:var(--gold)}

/* ============ HERO — split, cinematic ============ */
.hero{position:relative;min-height:100svh;display:grid;align-items:center;
  grid-template-columns:1fr;padding:clamp(5rem,13vh,8.5rem) var(--gut) clamp(3rem,7vh,5.5rem)}
@media (min-width:64rem){.hero{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(2rem,3.4vw,4.6rem);align-items:center}}
.hero__copy{position:relative;z-index:2;max-width:44ch}
.hero h1{font-size:var(--f-h1);letter-spacing:-.02em}
.hero h1 span{display:block}
.hero h1 .it{font-style:italic;color:var(--beige)}
.hero__sub{font-size:var(--f-lead);font-weight:200;color:var(--bone-2);max-width:38ch;margin:clamp(1.1rem,2.6vh,2rem) 0 clamp(1.4rem,3vh,2.4rem)}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem}
/* 2x2 frame: the left figure holds the full height of both rows.
   An explicit aspect-ratio on the grid gives the rows a definite
   size, which is what lets `grid-row: span 2` actually span. */
.hero__figs{position:relative;display:grid;grid-template-columns:repeat(2,1fr);
  grid-template-rows:repeat(2,minmax(0,1fr));aspect-ratio:1/1.06;
  gap:clamp(.6rem,1.2vw,1.2rem);margin-top:clamp(2rem,5vh,0rem)}
.hero__figs figure{margin:0;overflow:hidden;height:100%}
.hero__figs figure > picture{display:block;width:100%;height:100%}
.hero__figs img{width:100%;height:100%;object-fit:cover;filter:saturate(.86) contrast(1.04)}
.hero__figs figure:first-child{grid-row:span 2}
.hero__scroll{position:absolute;left:var(--gut);bottom:clamp(1rem,3vh,2.4rem);
  font-size:var(--f-micro);letter-spacing:.34em;text-transform:uppercase;color:var(--bronze);
  display:flex;align-items:center;gap:.8em}
.hero__scroll::after{content:"";width:3rem;height:1px;background:var(--bronze);animation:sweep 2.6s var(--ease) infinite}
@keyframes sweep{0%,100%{transform:scaleX(.3);transform-origin:0 50%}50%{transform:scaleX(1);transform-origin:0 50%}}

/* ============ SECTIONS ============ */
.band{padding-block:var(--band)}
.band--lift{background:var(--void-2)}
.head{max-width:56ch;margin:0 0 clamp(2.2rem,1rem + 3.6vmin,4.5rem)}
.head h2{font-size:var(--f-h2);letter-spacing:-.015em;margin:0 0 1rem}
.head h2 em{font-style:italic;color:var(--beige)}
.head p{font-size:var(--f-lead);font-weight:200;color:var(--bone-2)}

/* -- Statement split -- */
.split{display:grid;gap:clamp(1.8rem,1rem + 3.4vw,5.5rem);grid-template-columns:1fr;align-items:center}
@media (min-width:62rem){.split{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
  .split--flip > *:first-child{order:2}}
.split figure{margin:0;overflow:hidden}
.split figure img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.88)}
.split__quote{font-family:"Cormorant Garamond",serif;font-size:var(--f-h3);font-style:italic;
  color:var(--beige);line-height:1.42;border-left:1px solid var(--gold);padding-left:1.4rem;margin:2rem 0 0}

/* -- Services as index rows -- */
.rows{border-top:1px solid var(--hair)}
.row{display:grid;grid-template-columns:1fr;gap:.4rem 2rem;padding-block:clamp(1.5rem,.9rem + 2.4vmin,3rem);
  border-bottom:1px solid var(--hair);position:relative;transition:padding-left .6s var(--ease)}
@media (min-width:56rem){.row{grid-template-columns:5rem minmax(0,20ch) minmax(0,1fr) auto;align-items:baseline}
  .row:hover{padding-left:1.2rem}}
.row__n{font-family:"Cormorant Garamond",serif;font-size:var(--f-h3);color:var(--bronze);line-height:1}
.row h3{font-size:var(--f-h3);margin:0}
.row p{margin:0;font-size:var(--f-small);color:var(--bone-2);line-height:1.85;opacity:.85}
.row__go{justify-self:start}
@media (min-width:56rem){.row__go{justify-self:end}}
.row::after{content:"";position:absolute;left:0;bottom:-1px;width:0;height:1px;background:var(--gold);transition:width .8s var(--ease)}
.row:hover::after{width:100%}

/* -- Gallery: horizontal, drag-scrollable -- */
.gal-wrap{position:relative}
.gal{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(15rem,50vw,26rem);
  gap:clamp(.7rem,.3rem + 1.2vw,1.6rem);overflow-x:auto;scroll-snap-type:x proximity;
  padding-inline:var(--gut);margin-inline:calc(var(--gut) * -1);padding-bottom:2rem;
  cursor:grab;scrollbar-width:none}
.gal::-webkit-scrollbar{display:none}
.gal.is-drag{cursor:grabbing;scroll-snap-type:none}
.gal.is-drag *{pointer-events:none}
.tile{scroll-snap-align:center;position:relative;overflow:hidden;background:var(--void-3)}
.tile img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:saturate(.82) brightness(.9);
  transition:transform 1.4s var(--ease),filter .9s var(--ease)}
.tile:hover img{transform:scale(1.05);filter:saturate(1) brightness(1)}
.tile__veil{position:absolute;inset:auto 0 0 0;padding:clamp(1rem,2.4vw,2rem);
  background:linear-gradient(180deg,transparent,rgba(19,16,13,.9) 62%)}
.tile__veil h3{font-size:var(--f-h3);margin:0 0 .2rem}
.tile__veil p{margin:0;font-size:var(--f-micro);letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.tile__bio{margin:.8rem 0 0!important;font-size:var(--f-small);letter-spacing:0;text-transform:none;color:var(--bone-2)!important;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .7s var(--ease),opacity .5s var(--ease)}
.tile:hover .tile__bio,.tile:focus-within .tile__bio{max-height:9rem;opacity:.9}
.gal-hint{display:flex;align-items:center;gap:1rem;margin-top:1rem;font-size:var(--f-micro);
  letter-spacing:.3em;text-transform:uppercase;color:var(--bronze)}
.gal-hint__track{flex:1;height:1px;background:var(--hair);position:relative;max-width:16rem}
.gal-hint__bar{position:absolute;inset:0 auto 0 0;width:20%;background:var(--gold);transition:transform .1s linear}

/* -- Steps as vertical timeline -- */
.tl{display:grid;gap:0;border-left:1px solid var(--hair);margin-left:.5rem}
.tl__i{position:relative;padding:0 0 clamp(1.8rem,3.4vmin,3.4rem) clamp(1.4rem,3vw,3.4rem)}
.tl__i::before{content:"";position:absolute;left:-4px;top:.55em;width:7px;height:7px;background:var(--gold);border-radius:50%}
.tl__i span{font-size:var(--f-micro);letter-spacing:.36em;text-transform:uppercase;color:var(--bronze);display:block;margin-bottom:.5rem}
.tl__i h3{font-size:var(--f-h3);margin:0 0 .6rem}
.tl__i p{margin:0;font-size:var(--f-small);color:var(--bone-2);line-height:1.85;max-width:60ch;opacity:.85}

/* -- Marquee -- */
.marq{border-block:1px solid var(--hair);padding-block:clamp(1.2rem,2.6vmin,2.2rem);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marq__track{display:flex;gap:clamp(1.6rem,4vw,4rem);width:max-content;animation:slide 46s linear infinite}
.marq:hover .marq__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marq__track span{font-family:"Cormorant Garamond",serif;font-size:clamp(1.4rem,.8rem + 2.4vmin,3rem);
  color:var(--bone-2);white-space:nowrap;display:flex;align-items:center;gap:clamp(1.6rem,4vw,4rem)}
.marq__track span::after{content:"◆";font-size:.32em;color:var(--gold)}
@media (prefers-reduced-motion:reduce){.marq__track{animation:none;width:auto;flex-wrap:wrap}}

/* -- Membership panels -- */
.panels{display:grid;gap:1px;background:var(--hair);grid-template-columns:1fr}
@media (min-width:56rem){.panels{grid-template-columns:repeat(2,1fr)}}
@media (min-width:86rem){.panels{grid-template-columns:repeat(4,1fr)}}
.panel{background:var(--void);padding:clamp(1.5rem,.9rem + 2.6vmin,3rem);transition:background .6s var(--ease)}
.panel:hover{background:var(--void-2)}
.panel h3{font-size:var(--f-h3);margin:0 0 .8rem}
.panel p{margin:0;font-size:var(--f-small);line-height:1.85;color:var(--bone-2);opacity:.85}
.panel__n{font-size:var(--f-micro);letter-spacing:.36em;color:var(--bronze);display:block;margin-bottom:1.4rem}

/* -- Membership feature -- */
.mem{display:grid;gap:clamp(2rem,1rem + 3.6vw,5.5rem);grid-template-columns:1fr;align-items:center}
@media (min-width:66rem){.mem{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.mem ul{list-style:none;margin:2rem 0 2.4rem;padding:0;display:grid;gap:0}
.mem li{padding-block:1rem;border-bottom:1px solid var(--hair);font-size:var(--f-small);
  display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:baseline}
.mem li::before{content:"◆";font-size:.5em;color:var(--gold)}
.mem figure{margin:0;overflow:hidden}
.mem figure img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:saturate(.85)}

/* -- FAQ -- */
.qa{border-top:1px solid var(--hair)}
.qa details{border-bottom:1px solid var(--hair)}
.qa summary{list-style:none;cursor:pointer;display:flex;gap:1.4rem;align-items:baseline;justify-content:space-between;
  padding-block:clamp(1rem,2.2vmin,1.7rem);font-family:"Cormorant Garamond",serif;font-size:var(--f-h3);
  color:var(--bone);transition:color .4s var(--ease)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--gold)}
.qa summary b{font-family:"Jost",sans-serif;font-size:var(--f-micro);font-weight:400;letter-spacing:.3em;color:var(--bronze);flex:0 0 auto}
.qa__a{padding:0 0 clamp(1rem,2.4vmin,1.9rem);max-width:78ch}
.qa__a p{margin:0;font-size:var(--f-small);line-height:1.9;color:var(--bone-2);opacity:.85}

/* -- Closing -- */
.finale{position:relative;isolation:isolate;min-height:min(84svh,44rem);display:grid;place-items:center;
  text-align:center;padding:var(--band) var(--gut);overflow:hidden}
.finale__bg{position:absolute;inset:0;z-index:-2}
.finale__bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.7) brightness(.5)}
.finale__bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 60% at 50% 50%,rgba(19,16,13,.2),rgba(19,16,13,.92))}
.finale h2{font-size:var(--f-h2);max-width:18ch;margin:0 auto 1.2rem}
.finale p{max-width:48ch;margin:0 auto 2.2rem;font-size:var(--f-lead);font-weight:200}

/* -- Footer -- */
.foot{border-top:1px solid var(--hair);padding:var(--band) var(--gut) 2rem}
.foot__grid{display:grid;gap:clamp(1.8rem,1rem + 3vw,4rem);grid-template-columns:1fr}
@media (min-width:46rem){.foot__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:72rem){.foot__grid{grid-template-columns:1.5fr repeat(3,1fr)}}
.foot h4{font-family:"Jost",sans-serif;font-size:var(--f-micro);letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);font-weight:400;margin:0 0 1.2rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;font-size:var(--f-small)}
.foot a{opacity:.75;transition:opacity .35s,color .35s}
.foot a:hover{opacity:1;color:var(--beige)}
.foot__mark img{width:clamp(160px,15vw,240px);margin-bottom:1.2rem}
.foot__end{margin-top:var(--band);padding-top:1.6rem;border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-size:var(--f-micro);letter-spacing:.24em;text-transform:uppercase;color:var(--bronze)}

/* ---- Reveal ---- */
[data-fade]{opacity:0;transform:translateY(2rem);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
[data-fade].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-fade]{opacity:1;transform:none}}

/* ============================================================
   ORIENTATION + LIQUID BEHAVIOUR
   ============================================================ */

/* Below the rail breakpoint: the side rail becomes a top bar and a
   full-screen overlay menu. */
@media (max-width:64rem){
  :root{--railw:0px}
  /* the concept-deck bar owns the bottom edge, so the rail stacks above it */
  .rail-side{inset:auto 0 var(--cnav-h,0px) 0;width:100%;height:auto;flex-direction:row;
    border-right:0;border-top:1px solid var(--hair);gap:1.1rem;
    padding:.7rem var(--gut);justify-content:space-between}
  /* the scroller has to be allowed to shrink, or it crowds the monogram */
  .rail-side__nav{min-width:0}
  .rail-side__nav{flex-direction:row;align-items:center;gap:1.1rem;overflow-x:auto;scrollbar-width:none}
  .rail-side__nav a{writing-mode:horizontal-tb}
  .rail-side__nav::-webkit-scrollbar{display:none}
  .rail-side__foot{display:none}
  .rail-side__mark{width:1.7rem}
  .page{padding-left:0;padding-bottom:4.2rem}   /* clears the rail; the bar is cleared by body */
  .topbar{left:0;position:relative}
  .hero{min-height:auto;padding-top:clamp(1rem,4vh,2rem)}
  .hero__figs{grid-template-columns:repeat(3,1fr);grid-template-rows:auto;aspect-ratio:3/1.34}
  .hero__figs figure:first-child{grid-row:auto}
  .hero__scroll{display:none}
}

/* PHONE IN LANDSCAPE — short viewport.
   Keep the hero on one screen, shrink the rhythm, and put the
   hero imagery beside the copy instead of beneath it. */
@media (orientation:landscape) and (max-height:34rem){
  :root{--band:clamp(1.8rem,1rem + 3vmin,3rem)}
  .hero{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:1.4rem;
    align-items:center;padding-block:1.6rem;min-height:auto}
  .hero__copy{max-width:none}
  .hero h1{font-size:clamp(1.9rem,1rem + 6vmin,3.4rem)}
  .hero__sub{margin-block:.8rem 1.2rem;font-size:var(--f-body)}
  .hero__figs{margin-top:0;grid-template-columns:repeat(2,1fr);grid-template-rows:auto;aspect-ratio:2/1.3}
  .hero__figs figure:nth-child(3){display:none}
  .topbar{padding-block:.7rem}
  .topbar__logo img{width:130px}
  .gal{grid-auto-columns:clamp(11rem,30vw,16rem)}
  .tl__i{padding-bottom:1.2rem}
  .rail-side{padding-block:.45rem}
}

/* Tablet portrait — roomier gallery, single-column splits */
@media (orientation:portrait) and (min-width:46rem) and (max-width:64rem){
  .gal{grid-auto-columns:clamp(17rem,38vw,22rem)}
  .panels{grid-template-columns:repeat(2,1fr)}
}

@media (hover:none){
  .tile__bio{max-height:none;opacity:.85}
  .row:hover{padding-left:0}
}