/* ============================================================
   Oeuvre Bistro · "The Exhibition"
   A white-walled gallery. Dishes hang from a picture rail with
   museum placards; brush strokes lifted from the logo draw
   themselves in. Rooms are numbered like a real exhibition.
   Palette: gallery wall / ink / crimson (tangerine lives only
   inside the paint gradient, as it does in the logo ring).
   Type: Marcellus + Jost. Marcellus is carved Roman inscription
   lettering, the voice of museum plaques. (Bodoni Moda lost its
   hairlines at display sizes; Newsreader read too close to the
   Gloock used on an earlier site.) Marcellus has no italic, so
   accent words are set upright in crimson.
   ============================================================ */

:root{
  --wall:#F7F3EE;
  --wall-2:#EFE9E1;
  --ink:#1C1917;
  --ink-soft:rgba(28,25,23,.64);
  --crimson:#B02E38;
  --crimson-deep:#8F222B;
  --tangerine:#EE8B33;
  --line:rgba(28,25,23,.14);
  --night:#171412;

  --wrap:1200px;
  --ease:cubic-bezier(.2,.8,.25,1);
  --f-display:"Marcellus","Optima","Palatino Linotype",Georgia,serif;
  --ease-silk:cubic-bezier(.16,1,.3,1);   /* long, soft landing */
  --ease-pendulum:cubic-bezier(.45,0,.55,1); /* eases into and out of every turn */
  --f-text:"Jost","Futura","Century Gothic",-apple-system,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--wall);color:var(--ink);
  font-family:var(--f-text);font-size:17px;line-height:1.7;font-weight:400;
  overflow-x:clip; /* clip, not hidden: keeps position:sticky working */
}
img,video{display:block;max-width:100%;}
a{color:inherit;}
p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
figure{margin:0;} /* browsers add 40px side margins to <figure> by default */
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
:focus-visible{outline:2px solid var(--crimson);outline-offset:4px;}
h1,h2,h3{margin:0;font-family:var(--f-display);font-weight:400;line-height:1.08;letter-spacing:-.005em;}
h1 em,h2 em{font-style:normal;color:var(--crimson);font-weight:400;}

.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto;}
.eyebrow,.room__num,.placard__no,.ticket__label{
  font-family:var(--f-text);font-size:11.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
}
.eyebrow{color:var(--ink-soft);margin-bottom:22px;}

/* ── brush strokes (from the logo ring) ───────── */
.brush{position:absolute;overflow:visible;pointer-events:none;}
.brush path{
  fill:none;stroke:url(#paint);stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 2.1s cubic-bezier(.65,0,.35,1) .6s; /* slow start and finish, like a hand drawing it */
}
.in .brush path,.brush.in path{stroke-dashoffset:0;}
.circled{position:relative;display:inline-block;color:var(--crimson);font-weight:400;}
.brush--ring{left:-14%;top:-10%;width:128%;height:124%;}
.brush--ring path{stroke-width:4.5;}
.underlined{position:relative;white-space:nowrap;}
.brush--under{left:-2%;bottom:-.28em;width:104%;height:.45em;}
.brush--under path{stroke-width:4;}

/* ── buttons & links ─────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:54px;padding:0 30px;border-radius:0;
  background:var(--ink);color:var(--wall);text-decoration:none;
  font-size:.86rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--ink);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),translate .3s var(--ease);
}
.btn:hover{background:var(--crimson);border-color:var(--crimson);translate:0 -3px;}
.btn--ghost{background:transparent;color:var(--ink);}
.btn--ghost:hover{background:var(--ink);color:var(--wall);border-color:var(--ink);}
.btn--sm{min-height:44px;padding:0 20px;font-size:.76rem;}
.link{
  font-size:.86rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  background:linear-gradient(90deg,var(--crimson),var(--tangerine)) left bottom/100% 1.5px no-repeat;
  display:inline-block;padding:15px 0 7px; /* at least 44px tap height, underline stays at the bottom */
  transition:background-size .35s var(--ease);
}
.link:hover{background-size:40% 1.5px;}

/* ── nav ─────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:22px;
  padding:12px clamp(20px,4vw,44px);
  background:rgba(247,243,238,.9);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color .3s;
}
.nav.is-stuck{border-bottom-color:var(--line);}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto;text-decoration:none;}
.brand img{width:52px;height:52px;mix-blend-mode:multiply;} /* the logo's white field drops out on the wall colour */
.brand__word{font-family:var(--f-display);font-size:1.2rem;letter-spacing:.01em;}
.brand__word em{font-style:normal;color:var(--crimson);}
.nav__links{display:none;gap:34px;}
.nav__links a{font-size:.8rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;position:relative;padding:6px 0;}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:linear-gradient(90deg,var(--crimson),var(--tangerine));
  scale:0 1;transform-origin:right;transition:scale .4s var(--ease);
}
.nav__links a:hover::after{scale:1 1;transform-origin:left;}
.nav__cta{display:none;}
.burger{width:44px;height:44px;display:grid;place-content:center;gap:7px;}
.burger i{display:block;width:24px;height:1.5px;background:var(--ink);transition:rotate .3s var(--ease),translate .3s var(--ease);}
.nav.is-open .burger i:first-child{translate:0 4.25px;rotate:45deg;}
.nav.is-open .burger i:last-child{translate:0 -4.25px;rotate:-45deg;}
.drawer{
  position:absolute;top:100%;left:0;right:0;background:var(--wall);border-bottom:1px solid var(--line);
  display:grid;padding:6px 20px 20px;clip-path:inset(0 0 100% 0);transition:clip-path .45s var(--ease);
}
.nav.is-open .drawer{clip-path:inset(0 0 0 0);}
.drawer a{padding:15px 0;border-bottom:1px solid var(--line);text-decoration:none;font-family:var(--f-display);font-size:1.3rem;}
.drawer__cta{color:var(--crimson);border-bottom:0!important;}

/* ── frames, hanging wires, placards ─────────── */
.frame{
  background:#fff;padding:12px;border:6px solid var(--ink);
  box-shadow:0 1px 0 rgba(0,0,0,.04),0 22px 44px -22px rgba(28,25,23,.45);
}
.frame img,.frame video{width:100%;height:auto;}
.frame--portrait video{aspect-ratio:9/16;object-fit:cover;height:auto;}

/* a wire from the picture rail down to the frame, and a nail at the top */
.hang{position:relative;margin-top:var(--drop,48px);transform-origin:50% calc(-1 * var(--drop,48px));}
.hang::before{
  content:"";position:absolute;left:50%;top:calc(-1 * var(--drop,48px));
  width:1px;height:var(--drop,48px);background:rgba(28,25,23,.35);
}
.hang::after{
  content:"";position:absolute;left:50%;top:calc(-1 * var(--drop,48px) - 4px);translate:-50% 0;
  width:8px;height:8px;border-radius:50%;background:var(--ink);
}

.placard{
  display:grid;gap:3px;margin-top:16px;padding:12px 14px;max-width:290px;
  background:#fff;border:1px solid var(--line);
}
.placard__no{color:var(--crimson);font-size:10.5px;}
.placard__title{font-family:var(--f-display);font-size:1.18rem;line-height:1.2;}
.placard__medium{font-size:.84rem;color:var(--ink-soft);line-height:1.5;}
.placard__price{font-size:.9rem;font-weight:500;letter-spacing:.04em;margin-top:4px;font-variant-numeric:tabular-nums;}
.placard__price--ask{font-weight:400;font-style:italic;color:var(--ink-soft);}

/* ── hero ────────────────────────────────────── */
.hero{padding:44px 0 72px;}
.hero__grid{display:grid;gap:40px;align-items:center;}
.hero__title{font-size:clamp(2.5rem,10.6vw,5rem);font-weight:400;}
.hero__title .line{display:block;}
.hero__lede{margin-top:30px;max-width:46ch;color:var(--ink-soft);font-size:1.08rem;}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;}
.hero__facts{display:flex;flex-wrap:wrap;gap:28px 44px;margin:38px 0 0;}
.hero__facts dt{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--crimson);font-weight:500;}
.hero__facts dd{margin:4px 0 0;font-size:.98rem;}
.hero__piece{margin-inline:auto;width:min(100%,360px);}
.hero__piece .placard{margin-inline:auto;}

/* ── wall text ───────────────────────────────── */
.walltext{padding:40px 0 96px;}
.walltext__inner{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:56px 0;max-width:880px;}
.walltext__word{font-family:var(--f-display);font-size:clamp(3.2rem,13vw,7rem);line-height:.95;letter-spacing:.01em;color:var(--crimson);}
.walltext__phon{margin-top:12px;font-size:.92rem;letter-spacing:.06em;color:var(--ink-soft);}
.walltext__defs{counter-reset:def;display:grid;gap:14px;margin-top:30px;}
.walltext__defs li{
  counter-increment:def;display:grid;grid-template-columns:34px 1fr;align-items:baseline;
  font-family:var(--f-display);font-size:clamp(1.25rem,3.6vw,1.8rem);line-height:1.3;
}
.walltext__defs li::before{content:counter(def) ".";font-family:var(--f-text);font-size:.9rem;color:var(--crimson);}

/* ── rooms ───────────────────────────────────── */
.room{padding:88px 0;}
.room__sign{max-width:620px;margin-bottom:28px;}
.room__sign--center{margin-inline:auto;text-align:center;}
.room__num{display:inline-block;color:var(--crimson);padding-bottom:10px;margin-bottom:18px;border-bottom:1px solid currentColor;}
.room__sign h2,.mornings__copy h2,.space__copy h2{font-size:clamp(2.5rem,9vw,4.6rem);}
.room__sign p,.mornings__copy>p,.space__copy>p{margin-top:20px;color:var(--ink-soft);max-width:52ch;}

/* the salon hang: pieces at different drops below one rail */
.salon{position:relative;display:grid;gap:22px;padding-top:30px;}
.salon__rail{position:absolute;left:0;right:0;top:30px;height:2px;background:var(--ink);opacity:.8;}
.salon .piece{--drop:44px!important;}
.room__cta{display:flex;flex-wrap:wrap;align-items:center;gap:26px;margin-top:56px;}

/* ── quote ───────────────────────────────────── */
.quote{padding:90px 0;background:var(--wall-2);text-align:center;}
.quote blockquote{margin:0 auto;max-width:880px;}
.quote p{font-family:var(--f-display);font-size:clamp(2rem,6.5vw,3.9rem);line-height:1.2;}
.quote cite{display:block;margin-top:30px;font-style:normal;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);}

/* ── mornings ────────────────────────────────── */
.mornings{display:grid;gap:40px;}
.catalogue-mini{margin-top:28px;display:grid;}
.catalogue-mini li{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line);}
.catalogue-mini li span{font-family:var(--f-display);font-size:1.1rem;}
.catalogue-mini b{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;}
.mornings__wall{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;padding-top:12px;border-top:2px solid var(--ink);}
.mornings__wall .frame{padding:7px;border-width:4px;}
.mornings__wall .placard{padding:9px 10px;}
.mornings__wall .placard__title{font-size:.98rem;}

/* ── the bar (night room) ────────────────────── */
.bar{background:var(--night);color:var(--wall);padding:96px 0;}
.room__sign--dark h2{color:var(--wall);}
.room__sign--dark h2 em{color:var(--tangerine);}
.room__sign--dark .room__num{color:var(--tangerine);}
.room__sign--dark p{color:rgba(247,243,238,.68);}
/* phones: two across, the third centred beneath; three across from 720px */
.bar__wall{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;margin-top:44px;}
.bar__wall .piece:nth-child(3){grid-column:1/-1;width:62%;margin-inline:auto;}
.piece--dark .frame{background:#221E1B;border-color:#3A332E;padding:6px;box-shadow:0 30px 60px -30px rgba(0,0,0,.9);}
.piece--dark .placard{background:transparent;border-color:rgba(247,243,238,.18);padding:9px 10px;}
.piece--dark .placard__no{color:var(--tangerine);}
.piece--dark .placard__title{font-size:.98rem;color:var(--wall);}
.piece--dark .placard__medium{color:rgba(247,243,238,.6);font-size:.76rem;}
.piece--lift{margin-top:-18px;}
.bar__lists{display:grid;gap:0;margin-top:56px;border-top:1px solid rgba(247,243,238,.16);}
.bar__lists>div{padding:22px 0;border-bottom:1px solid rgba(247,243,238,.16);display:grid;gap:6px;}
.bar__lists h3{font-size:1.5rem;font-weight:400;}
.bar__lists p{color:rgba(247,243,238,.66);font-size:.95rem;}
.bar__lists b{font-weight:500;color:var(--tangerine);letter-spacing:.04em;}

/* ── catalogue (full menu) ───────────────────── */
.catalogue{padding:96px 0;}
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:0 20px 2px;border-bottom:1px solid var(--line);}
.tabs::-webkit-scrollbar{display:none;}
.tab{
  flex:0 0 auto;min-height:48px;padding:0 16px;position:relative;
  font-size:.78rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  transition:color .25s var(--ease);
}
.tab::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--crimson),var(--tangerine));scale:0 1;transition:scale .35s var(--ease);}
.tab:hover{color:var(--ink);}
.tab[aria-selected="true"]{color:var(--ink);}
.tab[aria-selected="true"]::after{scale:1 1;}
.lots{margin-top:12px;}
.lots__group{display:none;}
.lots__group.is-active{display:grid;animation:lotsIn .5s var(--ease);}
@keyframes lotsIn{from{opacity:0;translate:0 10px;}to{opacity:1;translate:0 0;}}
.lot{display:grid;grid-template-columns:auto 1fr auto;gap:2px 18px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line);}
.lot__no{font-size:10.5px;letter-spacing:.18em;color:var(--crimson);font-variant-numeric:tabular-nums;min-width:34px;}
.lot__name{font-family:var(--f-display);font-size:1.22rem;line-height:1.25;}
.lot__price{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;}
.lot__desc{grid-column:2/-1;color:var(--ink-soft);font-size:.9rem;line-height:1.55;}
.catalogue__foot{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;margin-top:40px;}
.catalogue__foot p{color:var(--ink-soft);font-size:.9rem;}

/* ── space ───────────────────────────────────── */
.room--space{background:var(--wall-2);}
.space{display:grid;gap:44px;align-items:center;}
.space__piece{width:min(100%,380px);margin-inline:auto;}
.space__copy .btn{margin-top:30px;}

/* ── visit ───────────────────────────────────── */
.visit{padding:96px 0;}
.visit__grid{display:grid;gap:16px;margin-top:20px;}
.ticket{
  position:relative;background:#fff;border:1px solid var(--line);padding:30px 26px 28px;
  transition:translate .35s var(--ease),box-shadow .35s var(--ease);
}
.ticket::before{ /* ticket stub perforation */
  content:"";position:absolute;left:0;right:0;top:54px;border-top:1px dashed var(--line);
}
.ticket:hover{translate:0 -6px;box-shadow:0 24px 40px -26px rgba(28,25,23,.5);}
.ticket__label{color:var(--crimson);display:block;margin-bottom:30px;}
.ticket__big{font-family:var(--f-display);font-size:1.9rem;line-height:1.15;margin-bottom:6px;}
.ticket__big span{font-size:1.2rem;color:var(--ink-soft);}
.ticket p:not(.ticket__big){color:var(--ink-soft);margin-bottom:18px;}
.open-pill{display:inline-block;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;padding:7px 12px;border:1px solid var(--line);}
.open-pill.is-open{background:var(--crimson);border-color:var(--crimson);color:#fff;}

/* ── footer ──────────────────────────────────── */
.footer{background:var(--night);color:var(--wall);padding:72px 0 0;}
.footer__grid{display:grid;gap:36px;}
.footer__logo{display:inline-grid;place-content:center;width:112px;height:112px;border-radius:50%;background:#fff;}
.footer__logo img{width:96px;height:96px;}
.footer__brand p{margin-top:18px;font-family:var(--f-display);font-size:1.5rem;}
.footer__nav,.footer__contact{display:grid;gap:10px;align-content:start;}
.footer__nav a{text-decoration:none;color:rgba(247,243,238,.72);font-size:.92rem;letter-spacing:.06em;}
.footer__nav a:hover{color:var(--tangerine);}
.footer__contact{color:rgba(247,243,238,.72);font-size:.95rem;}
.footer__contact a{color:var(--wall);text-decoration:none;width:fit-content;border-bottom:1px solid var(--tangerine);}
.footer__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:56px;padding:22px 0;border-top:1px solid rgba(247,243,238,.14);font-size:.8rem;color:rgba(247,243,238,.5);}

/* ── floating reserve (mobile) ───────────────── */
.fab{
  position:fixed;right:16px;bottom:16px;z-index:60;min-height:50px;padding:0 22px;
  display:grid;place-content:center;background:var(--crimson);color:#fff;text-decoration:none;
  font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 16px 30px -12px rgba(28,25,23,.55);
}

/* ── reveals (use the individual translate/rotate properties so they
      never overwrite an element's own transform) ───────────────── */
.reveal{opacity:0;translate:0 16px;transition:opacity 1.3s var(--ease-silk),translate 1.6s var(--ease-silk);}
.reveal.in{opacity:1;translate:0 0;}
.hang{opacity:0;translate:0 -10px;transition:opacity 1.4s var(--ease-silk),translate 1.8s var(--ease-silk);}
.hang.in{opacity:1;translate:0 0;animation:swing 3.6s .1s both;}
/* a damped pendulum: each swing is smaller, and every turn eases in and out */
@keyframes swing{
  0%  {rotate:1.8deg;  animation-timing-function:var(--ease-pendulum);}
  21% {rotate:-1.15deg;animation-timing-function:var(--ease-pendulum);}
  41% {rotate:.7deg;   animation-timing-function:var(--ease-pendulum);}
  59% {rotate:-.38deg; animation-timing-function:var(--ease-pendulum);}
  75% {rotate:.17deg;  animation-timing-function:var(--ease-pendulum);}
  89% {rotate:-.05deg; animation-timing-function:var(--ease-pendulum);}
  100%{rotate:0deg;}
}
.hang .frame img,.hang .frame video{scale:1.04;transition:scale 2.4s var(--ease-silk) .15s;}
.hang.in .frame img,.hang.in .frame video{scale:1;}
.frame{overflow:hidden;}
.d1{transition-delay:.12s;}.d2{transition-delay:.24s;}.d3{transition-delay:.36s;}.d4{transition-delay:.48s;}.d5{transition-delay:.6s;}

/* ── breakpoints ─────────────────────────────── */
@media (min-width:720px){
  .salon{grid-template-columns:repeat(2,1fr);gap:34px 28px;}
  .visit__grid{grid-template-columns:repeat(3,1fr);}
  .bar__lists{grid-template-columns:repeat(2,1fr);column-gap:48px;}
  .footer__grid{grid-template-columns:1.4fr 1fr 1fr;}
  .bar__wall{grid-template-columns:repeat(3,1fr);gap:22px;}
  .bar__wall .piece:nth-child(3){grid-column:auto;width:auto;}
}
@media (min-width:1000px){
  body{font-size:18px;}
  .nav__links,.nav__cta{display:flex;}
  .burger,.drawer,.fab{display:none;}
  .hero{padding:64px 0 96px;}
  .hero__grid{grid-template-columns:1.25fr .75fr;gap:72px;}
  .hero__piece{width:100%;max-width:330px;}
  .room{padding:120px 0;}
  .salon{grid-template-columns:repeat(4,1fr);gap:30px;align-items:start;}
  .salon .piece{--drop:var(--d)!important;}
  .salon .piece:nth-of-type(1){--d:40px;}
  .salon .piece:nth-of-type(2){--d:118px;}
  .salon .piece:nth-of-type(3){--d:64px;}
  .salon .piece:nth-of-type(4){--d:140px;}
  .mornings{grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center;}
  .mornings__wall{gap:30px;}
  .bar__lists{grid-template-columns:repeat(4,1fr);column-gap:36px;}
  .space{grid-template-columns:.9fr 1.1fr;gap:90px;}
  .lot{grid-template-columns:52px minmax(240px,1.1fr) 2fr auto;gap:24px;}
  .lot__desc{grid-column:auto;}
  .tabs{flex-wrap:wrap;margin:0;padding:0;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.001ms!important;}
  html{scroll-behavior:auto;}
  .reveal,.hang{opacity:1;translate:0 0;}
  .brush path{stroke-dashoffset:0;}
}