/* =====================================================================
   Classic Salon Suites — case study 04
   This page carries a complete brand skin (Audrey + the client's beige
   system) down to the nav and footer, so it loads INSTEAD OF site.css
   rather than on top of it — site.css uses --ink for foreground where
   this uses it for the ground, and the two would fight.
   Audrey by Cristina Pagnotta, licensed for desktop and web:
   see assets/classic/fonts/Audrey-License.txt
   ===================================================================== */
@font-face{font-family:Audrey;src:url("../assets/classic/fonts/audrey-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Audrey;src:url("../assets/classic/fonts/audrey-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Audrey;src:url("../assets/classic/fonts/audrey-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Audrey;src:url("../assets/classic/fonts/audrey-normal-oblique.woff2") format("woff2");font-weight:400;font-style:oblique;font-display:swap}

:root{
  color-scheme:dark;
  /* ground */
  --ink:#201E21; --ink-2:#191719; --ink-3:#2A272A;
  --hero-bg:#41413F;   /* sampled from the hero clip's own backdrop */
  /* brand five, sampled off the mock-up */
  --c1:#E3E6E7; --c2:#E2D4CA; --c3:#CCB5A1; --c4:#DDC2A5; --c5:#DFAA6E;
  /* type */
  --fg:#EFECE8; --fg-2:#B8AFA8; --fg-3:#8A827C; --on-light:#221D1F;
  --rule:rgba(226,212,202,.16);
  --display:Audrey,"Didot","Bodoni 72",Georgia,serif;
  --body:"Helvetica Neue",Inter,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --gutter:clamp(20px,5vw,64px);
  --wrap:1180px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--c5);outline-offset:3px;border-radius:2px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:200;display:inline-flex;align-items:center;
  min-height:44px;background:var(--fg);color:var(--on-light);padding:10px 16px;border-radius:8px;
  font-weight:600;font-size:13px}
.skip:focus{top:12px}

/* shared type ------------------------------------------------------- */
.label{font-family:var(--body);font-size:10.5px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--c3)}
.h2{font-family:var(--display);font-weight:400;font-size:clamp(32px,5.6vw,66px);
  letter-spacing:.07em;line-height:1.05;text-wrap:balance}
.lede{font-size:clamp(14.5px,1.3vw,16.5px);line-height:1.75;color:var(--fg-2);max-width:62ch}
.lede b{color:var(--fg);font-weight:500}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:clamp(72px,12vh,140px)}

/* reveal (JS only, so no-JS and reduced motion see everything) -------- */
.js .rev{opacity:0;transform:translateY(20px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.js .rev.on{opacity:1;transform:none}

/* nav — skinned in the Classic palette on this page only */
#cnav{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:20px;
  height:58px;padding-inline:var(--gutter);
  background:rgba(25,23,25,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule)}
#cnav .name{margin-right:auto;font-family:var(--display);font-size:clamp(14px,1.5vw,17px);
  letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center;min-height:44px}
#cnav .back{display:inline-flex;align-items:center;min-height:44px;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--fg-2);transition:color .25s}
#cnav .back:hover{color:var(--c3)}
#cnav .pill{display:inline-flex;align-items:center;min-height:40px;padding:8px 20px;
  border:1px solid var(--rule);border-radius:100px;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-2);transition:border-color .25s,color .25s}
#cnav .pill:hover{border-color:var(--c3);color:var(--fg)}

/* 01 · hero --------------------------------------------------------- */
.chero-block{position:relative;isolation:isolate;overflow:hidden;background:var(--hero-bg)}
.chero-bg{position:absolute;inset:0;z-index:0}
.chero-bg video{width:100%;height:100%;object-fit:cover;object-position:76% 50%}
/* darkens the clip's own backdrop for the copy — one continuous surface, so
   there is nothing for an edge to form against */
.chero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,19,20,.66) 0%,rgba(20,19,20,.40) 34%,rgba(20,19,20,0) 66%)}
.chero{position:relative;z-index:1;display:grid;align-items:center;min-height:min(74vh,700px)}
.chero .txt{max-width:min(640px,54%);padding:clamp(48px,8vh,96px) clamp(28px,5vw,72px);
  display:grid;gap:26px;justify-items:start}
.chero .lockup{width:min(440px,100%)}
.chero .lede{font-size:clamp(15px,1.5vw,19px);line-height:1.7;color:var(--fg);max-width:34ch;
  text-shadow:0 1px 14px rgba(15,14,15,.5)}

/* meta row — still over the clip, as it is in the mock-up */
.cmeta{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;
  padding:26px var(--gutter);background:rgba(20,19,20,.42);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.12)}
.cmeta div{text-align:center;min-width:0}
.cmeta dt{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-3);margin-bottom:8px}
.cmeta dd{font-family:var(--display);font-size:clamp(13px,1.4vw,17px);letter-spacing:.12em}
.cmeta dd .sep{font-family:var(--body);letter-spacing:0;opacity:.45;padding-inline:.42em}

/* 02 · marquee ------------------------------------------------------ */
.band{background:var(--c3);color:var(--on-light);padding-block:clamp(40px,7vh,78px)}
.marq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.marq-track{display:flex;width:max-content;align-items:center;gap:clamp(24px,4vw,56px);
  animation:marq 34s linear infinite}
.marq-track:hover{animation-play-state:paused}
.marq-track span{font-family:var(--display);font-style:oblique;font-weight:400;
  font-size:clamp(46px,9.5vw,124px);line-height:1;letter-spacing:.015em;white-space:nowrap;
  color:#F0E2D9}
.marq-track .sc{flex:none;width:clamp(14px,1.6vw,22px);fill:#8E7360;opacity:.9}
@keyframes marq{to{transform:translateX(-50%)}}
.band-copy{text-align:center;margin-top:clamp(30px,5vh,56px)}
.band-copy p{font-family:var(--display);font-size:clamp(17px,2.2vw,30px);line-height:1.45;
  letter-spacing:.02em;max-width:52ch;margin-inline:auto;color:var(--on-light);text-wrap:balance}
.crit{display:flex;justify-content:center;align-items:center;gap:clamp(9px,2.6vw,40px);
  flex-wrap:nowrap;white-space:nowrap;max-width:none;margin-top:clamp(22px,4vh,44px)}
.crit span{font-family:var(--display);font-style:oblique;font-size:clamp(15px,3.4vw,36px);
  letter-spacing:.04em;color:var(--on-light)}
.crit .sc{width:clamp(7px,1.1vw,12px);fill:#6E5748;flex:none}

/* 03 · the process -------------------------------------------------- */
/* Reads as a narrowing: the reasoning, then the three directions side by
   side, then the one that survived — alone, large, below a rule. */
.proc-h{text-align:center}
.proc-copy{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,64px);
  max-width:1000px;margin:clamp(28px,4.5vh,48px) auto 0}
.proc-copy .lede{max-width:none}

/* One line of work, resolving left to right: the three explored directions
   at a common size, then the adopted mark at roughly twice that. All four
   share a baseline, and the scale change carries the hierarchy — no badge
   needed to say which one won. */
.tried{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.9fr);
  align-items:end;gap:clamp(18px,3vw,44px);list-style:none;
  margin-top:clamp(40px,6.5vh,82px);
  padding-bottom:clamp(20px,3.4vh,32px);border-bottom:1px solid var(--rule)}
/* the row is bottom-aligned, so a mark above each logo would ride that logo's
   own height and the four would stagger; below, they share the baseline */
.tried li{display:grid;justify-items:center;gap:clamp(12px,2vh,18px)}
.tried .mark{order:2}
.tried img{opacity:.5;transition:opacity .35s var(--ease)}
.tried li:not(.pick) img{width:min(100%,190px)}
.tried li:hover img{opacity:.9}
.tried .pick img{width:min(100%,420px);opacity:1}

.mark{display:block;width:15px;height:15px;color:var(--fg-3)}
.mark.ok{width:22px;height:22px;color:var(--c5)}

.proc-foot{display:flex;justify-content:space-between;gap:16px;margin-top:16px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-3)}
.proc-foot b{color:var(--c5);font-weight:500}

/* 04 · colours ------------------------------------------------------ */
#colors{background:var(--flood,var(--ink));transition:background .65s var(--ease)}
#colors.flooded .h2,#colors.flooded .label,#colors.flooded .lede,#colors.flooded .sw-hex,
#colors.flooded .sw-name{color:var(--on-light)}
#colors.flooded .lede b{color:var(--on-light)}
#colors .head{display:grid;gap:16px;justify-items:center;text-align:center}
#colors .lede{text-align:center;margin-inline:auto}
.swatches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,2.2vw,30px);
  margin-top:clamp(40px,7vh,80px)}
.sw{display:grid;justify-items:center;gap:14px;padding:0;text-align:center;min-width:0}
.sw svg{width:min(100%,104px);aspect-ratio:1;filter:drop-shadow(0 12px 26px rgba(0,0,0,.4));
  transition:transform .45s var(--ease)}
.sw:hover svg,.sw:focus-visible svg{transform:scale(1.09) rotate(6deg)}
.sw-hex{font-family:var(--mono);font-size:clamp(9.5px,1.1vw,12px);letter-spacing:.08em;
  color:var(--fg-2);font-variant-numeric:tabular-nums;transition:color .4s}
.sw-name{font-size:clamp(9px,1vw,10.5px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg-3);transition:color .4s}
.sw-rule{width:0;height:1px;background:currentColor;opacity:.35;transition:width .6s var(--ease) .15s}
.js .sw{opacity:0;transform:scale(.72)}
.js .sw.on{opacity:1;transform:none;
  transition:opacity .6s var(--ease),transform .7s cubic-bezier(.34,1.4,.64,1)}
.js .sw.on .sw-rule{width:40px}

/* 05 · window graphics — the ring ----------------------------------- */
#ring-sec{background:var(--ink-2)}
#ring-sec .head{display:grid;gap:16px;justify-items:center;text-align:center}
#ring-sec .lede{text-align:center;margin-inline:auto}
/* A turntable, not a cylinder: the circle lies back in perspective, so the
   panels ride an ellipse — rising and shrinking toward the back, dropping and
   growing as they come round the front. Position, scale, stacking and
   brightness are all computed from one angle per panel, which keeps the
   depth cues consistent and needs no preserve-3d nesting. */
.ring-stage{--pw:clamp(124px,14.5vw,196px);
  position:relative;height:clamp(420px,60vh,640px);
  margin-top:clamp(20px,3.5vh,40px);touch-action:pan-y}
/* the platter the panels stand on */
.ring-stage::before{content:"";position:absolute;left:50%;top:62%;
  width:min(78%,700px);aspect-ratio:3.4/1;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,rgba(226,212,202,.09),transparent 68%);
  pointer-events:none}
.ring{position:absolute;inset:0}
.slot{position:absolute;left:50%;top:50%;width:var(--pw);aspect-ratio:1000/1778;
  padding:0;border:0;background:none;cursor:pointer;will-change:transform}
.slot img{width:100%;height:100%;object-fit:cover;border-radius:3px;
  box-shadow:0 30px 60px -26px rgba(0,0,0,.92);
  outline:1px solid rgba(239,236,232,.10);outline-offset:-1px;
  transition:filter .4s var(--ease)}
.slot:hover img,.slot:focus-visible img{filter:brightness(1.14)}
.ring-stage.dim .slot img{filter:brightness(.45) saturate(.7)}
.ring-hint{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-3);transition:opacity .4s;pointer-events:none}
.ring-stage.used .ring-hint{opacity:0}
.rail-wrap{display:none}

/* lightbox */
#lb{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:5vh 5vw}
#lb[hidden]{display:none}
#lb .veil{position:absolute;inset:0;background:rgba(12,10,13,.9);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#lb img{position:relative;max-height:90vh;width:auto;border-radius:4px;
  box-shadow:0 50px 120px -40px rgba(0,0,0,1)}
#lb .x{position:absolute;top:max(14px,3vh);right:max(14px,3vw);width:46px;height:46px;
  display:grid;place-items:center;border:1px solid var(--rule);border-radius:50%;
  font-size:19px;color:var(--fg);background:rgba(25,23,25,.7)}
#lb .cap{position:absolute;left:50%;bottom:max(14px,3vh);transform:translateX(-50%);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-3);text-align:center;width:min(90vw,520px)}

/* 07 · the close ----------------------------------------------------- */
/* the top of this gradient is exactly --ink-2, the ground Window Graphics
   ends on, so the two meet with nothing to see; the texture emerges below
   and bookends the page with the home-page feature */
.close{position:relative;isolation:isolate;overflow:hidden;background:var(--ink-2)}
.close-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.close::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--ink-2) 0%,rgba(25,23,25,.84) 34%,rgba(19,17,19,.90) 100%)}
.next{display:grid;justify-items:center;gap:clamp(10px,1.5vh,18px);text-align:center;
  padding:clamp(44px,8vh,96px) var(--gutter) clamp(40px,7vh,80px)}
.next .label{color:var(--c3)}
.next b{display:inline-flex;align-items:center;gap:clamp(12px,2vw,28px);font-weight:400;
  font-family:var(--display);font-size:clamp(34px,6.4vw,84px);letter-spacing:.06em;
  color:var(--fg);transition:color .35s var(--ease)}
.next .arr{width:clamp(26px,3.6vw,54px);flex:none;color:var(--c4);
  transition:transform .5s var(--ease),color .35s var(--ease)}
.next:hover b,.next:focus-visible b{color:var(--c4)}
.next:hover .arr,.next:focus-visible .arr{transform:translateX(14px)}
.cfoot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:18px var(--gutter) 26px;border-top:1px solid rgba(255,255,255,.13);
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-3)}
.cfoot a{transition:color .25s}
.cfoot a:hover{color:var(--c3)}

/* responsive --------------------------------------------------------- */
@media (max-width:900px){
  .chero{min-height:min(82vh,640px);align-items:end}
  .chero .txt{max-width:none;padding:clamp(34px,6vh,60px) var(--gutter)}
  .chero-bg video{object-position:58% 50%}
  .chero-bg::after{background:linear-gradient(180deg,rgba(20,19,20,.18) 0%,rgba(20,19,20,.55) 46%,rgba(20,19,20,.88) 100%)}
  .proc-copy{grid-template-columns:1fr;gap:18px}
}
@media (max-width:760px){
  .cmeta{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
  .tried{grid-template-columns:1fr;gap:0;margin-top:clamp(32px,5vh,44px);
    padding-bottom:0;border-bottom:0}
  .tried li{grid-template-columns:24px minmax(0,1fr);justify-items:start;
    align-items:center;gap:14px;padding:16px 0;border-top:1px solid var(--rule)}
  .tried li:last-child{border-bottom:1px solid var(--rule)}
  /* images lead in the DOM for the desktop baseline — stacked, the mark leads */
  .tried .mark{order:-1}
  .tried li:not(.pick) img{width:min(100%,52vw)}
  .tried .pick img{width:min(100%,80vw)}
  .proc-foot{display:none}
  .swatches{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 12px}
  .swatches .sw:nth-child(4){grid-column:1/2}
  .swatches .sw:nth-child(5){grid-column:2/3}
  /* the ring needs a mouse — touch gets a snap rail of the same four */
  .ring-stage{display:none}
  .rail-wrap{display:block;position:relative;margin-top:clamp(20px,3.5vh,34px)}
  .poster-rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-padding-left:var(--gutter);
    padding:0 var(--gutter) 4px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    /* the side a card can still come from stays faded, so the strip visibly
       continues past the screen instead of ending at it */
    -webkit-mask-image:linear-gradient(90deg,#000 0 92%,transparent);
    mask-image:linear-gradient(90deg,#000 0 92%,transparent);
    transition:-webkit-mask-image .3s linear,mask-image .3s linear}
  .poster-rail.at-end{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%);
    mask-image:linear-gradient(90deg,transparent,#000 8%)}
  .poster-rail.mid{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8% 92%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 8% 92%,transparent)}
  .poster-rail::-webkit-scrollbar{display:none}
  /* a card and a bit: the sliver of the next one is the first cue */
  .poster-rail button{flex:0 0 min(62vw,240px);scroll-snap-align:start;padding:0}
  .poster-rail img{width:100%;border-radius:3px;box-shadow:0 20px 44px -20px rgba(0,0,0,.85)}

  .rail-foot{display:flex;align-items:center;gap:14px;margin-top:16px;min-height:26px;
    padding-inline:var(--gutter)}
  .rail-dots{display:flex;gap:7px;margin-right:auto}
  .rail-dots button{width:26px;height:26px;display:grid;place-items:center;padding:0}
  .rail-dots i{display:block;width:6px;height:6px;border-radius:50%;
    background:rgba(226,212,202,.3);transition:background .25s,transform .25s var(--ease)}
  .rail-dots button[aria-current="true"] i{background:var(--c5);transform:scale(1.5)}
  .rail-cue{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
    font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--c3);transition:opacity .45s var(--ease)}
  .rail-cue .hand{width:15px;flex:none;color:var(--c5)}
  .rail-cue.gone{opacity:0}
  .rail-count{position:absolute;right:var(--gutter);bottom:0;font-family:var(--mono);font-size:9.5px;
    letter-spacing:.16em;color:var(--fg-3);font-variant-numeric:tabular-nums;
    opacity:0;transition:opacity .45s var(--ease)}
  .rail-count.on{opacity:1}
  @media (prefers-reduced-motion:no-preference){
    .rail-cue .hand{animation:swipecue 2.4s ease-in-out infinite}
  }
  @keyframes swipecue{
    0%,100%{transform:translateX(0);opacity:.55}
    45%{transform:translateX(7px);opacity:1}
  }
}
@media (max-width:560px){
  #cnav{height:52px;gap:14px}
  #cnav .name{font-size:12.5px;letter-spacing:.1em;white-space:nowrap}
  #cnav .pill{display:none}
  #cnav .back{font-size:9.5px;letter-spacing:.14em;white-space:nowrap}
}
@media (max-width:420px){
  .marq-track span{font-size:clamp(38px,13vw,58px)}