/* =========================================================================
   SAFFRA — a Melbourne halal degustation house
   Lab concept 03. Own world: warm spice-cellar that BREATHES dark <-> linen.
   Contrast is BOUND TO THE GROUND — no global text-colour token.
   Fraunces (display) · Newsreader (body) · Newsreader small-caps (data labels — no mono)
   ========================================================================= */

/* ---- tokens ---- */
:root{
  --char:#181410;        /* charred-clove dark ground */
  --ember:#211A13;       /* raised panel / hairline on dark */
  --char-2:#0F0C09;      /* deepest, footer / scrims */
  --linen:#EFE7D6;       /* warm paper ground + body on dark */
  --linen-2:#E6DCC7;     /* slightly deeper paper for panels */
  --saffron:#C8852F;     /* THE accent — DISPLAY/UI on DARK only, never body text */
  --saffron-soft:#D8A24F;
  --saffron-ink:#9A5E15; /* darkened saffron for large display ON LINEN (~5.2:1) */
  --rose:#7C3B34;        /* body-safe on LINEN only */
  --mute-dark:#B3A99A;   /* captions/mono on --char  (~7.3:1) */
  --mute-light:#645B4D;  /* captions/mono on --linen (~5.4:1) */
  --rule-dark:#3A332B;
  --rule-light:#C9BEA8;

  --serif:'Fraunces',Georgia,serif;
  --read:'Newsreader',Georgia,serif;
  --mono:'Newsreader',Georgia,serif; /* luxury serif label — NOT mono */

  --spine:74px;          /* desktop course-index width */
  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1180px;
}

/* ---- reset ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--char);
  color:var(--linen);
  font-family:var(--read);
  font-size:clamp(1.02rem,1.4vw,1.18rem);
  line-height:1.62;
  font-weight:380;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--saffron);outline-offset:3px;border-radius:1px}

/* warm-grade treatment shared by all photography (consistency) */
.grade{filter:saturate(1.02) contrast(1.03) brightness(.98) sepia(.06)}

/* ===================== GROUND SYSTEM ===================== */
[data-ground]{position:relative}
[data-ground="dark"]{background:var(--char);color:var(--linen)}
[data-ground="dark"] .caption,[data-ground="dark"] .mono{color:var(--mute-dark)}
[data-ground="dark"] .rule{background:var(--rule-dark)}
[data-ground="linen"]{background:var(--linen);color:var(--char)}
[data-ground="linen"] .caption,[data-ground="linen"] .mono{color:var(--mute-light)}
[data-ground="linen"] .rule{background:var(--rule-light)}
[data-ground="linen"] .accent{color:var(--rose)}     /* body-safe accent on linen */

/* shared atoms */
.mono{font-family:var(--mono);font-weight:400;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
.caption{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em}
.rule{height:1px;width:100%;border:0}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,56px)}

/* ===================== COURSE INDEX SPINE ===================== */
.spine{
  position:fixed;top:0;left:0;z-index:40;
  width:var(--spine);height:100vh;height:100svh;
  display:flex;flex-direction:column;align-items:center;
  padding:22px 0;
  background:linear-gradient(90deg,rgba(15,12,9,.92),rgba(15,12,9,0));
  pointer-events:none;
}
.spine__brand{
  font-family:var(--serif);font-weight:500;font-size:1.1rem;color:var(--saffron);
  writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:.18em;
  margin-bottom:18px;pointer-events:auto;text-decoration:none;
}
.spine__list{
  list-style:none;margin:0;padding:0;position:relative;
  display:flex;flex-direction:column;gap:clamp(8px,1.4vh,16px);align-items:center;flex:1;
  justify-content:center;pointer-events:auto;
}
/* the drawing thread */
.spine__thread{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:1px;background:var(--rule-dark);height:100%;z-index:0;
}
.spine__thread::after{
  content:"";position:absolute;left:0;top:0;width:100%;
  height:var(--thread,0%);background:var(--saffron);
  transition:height .4s var(--ease);
}
.spine__link{
  position:relative;z-index:1;display:grid;place-items:center;
  width:30px;height:26px;
  font-family:var(--serif);font-weight:500;font-size:.92rem;
  color:var(--mute-dark);text-decoration:none;background:var(--char);
  transition:color .3s,transform .3s;
}
.spine__link[data-bill]{font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;height:auto;line-height:1.1;text-align:center;width:46px}
.spine__link:hover{color:var(--linen)}
.spine__link[aria-current="true"]{color:var(--saffron);transform:scale(1.18)}

/* ===================== MOBILE PROGRESS BAR ===================== */
.topbar{
  display:none;position:fixed;top:0;left:0;right:0;z-index:45;
  align-items:center;gap:10px;
  height:46px;padding:0 14px;
  background:rgba(15,12,9,.94);backdrop-filter:saturate(1.2);
  border-bottom:1px solid var(--rule-dark);
}
.topbar__track{flex:1;height:2px;background:var(--rule-dark);position:relative;border-radius:2px}
.topbar__fill{position:absolute;left:0;top:0;height:100%;width:var(--thread,0%);background:var(--saffron);border-radius:2px;transition:width .4s var(--ease)}
.topbar__now{font-family:var(--serif);font-weight:500;color:var(--saffron);font-size:.95rem;min-width:1.6em}
.topbar__name{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
.topbar__menu{margin-left:auto;background:none;border:1px solid var(--rule-dark);color:var(--mute-dark);font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;padding:6px 9px;border-radius:2px}

/* slide-down menu sheet (mobile jump) */
.sheet{
  position:fixed;inset:0;z-index:60;display:none;
  background:rgba(10,8,6,.99);
  padding:64px 24px 24px;
}
.sheet.is-open{display:block}
.sheet__close{position:absolute;top:12px;right:14px;background:none;border:0;color:var(--linen);font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;padding:8px}
.sheet ol{list-style:none;margin:0;padding:0;columns:2;column-gap:18px}
.sheet a{
  display:flex;gap:12px;align-items:baseline;text-decoration:none;
  padding:11px 4px;border-bottom:1px solid var(--rule-dark);
}
.sheet a span:first-child{font-family:var(--serif);color:var(--saffron);min-width:1.8em;font-size:1.05rem}
.sheet a span:last-child{font-family:var(--read);color:var(--linen);font-size:.96rem}

/* ===================== ARRIVAL (00) ===================== */
.arrival{
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden;padding:8vh 0 11vh;
}
.arrival__bg{position:absolute;inset:0;z-index:0}
.arrival__bg img{width:100%;height:100%;object-fit:cover;opacity:.5}
.arrival::after{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(120% 90% at 50% 36%,rgba(24,20,16,.2),var(--char) 78%)}
.arrival .wrap{position:relative;z-index:2;text-align:center;text-shadow:0 2px 30px rgba(15,12,9,.85)}
.arrival__eyebrow{color:var(--saffron);margin-bottom:clamp(20px,5vh,40px)}
.arrival__mark{
  font-family:var(--serif);font-weight:340;font-optical-sizing:auto;
  font-size:clamp(4.4rem,20vw,15rem);line-height:.86;letter-spacing:-.02em;
  margin:0;color:var(--linen);
}
.arrival__mark em{font-style:italic;color:var(--saffron-soft)}
.arrival__line{
  font-family:var(--read);font-style:italic;font-size:clamp(1.1rem,2.6vw,1.5rem);
  color:var(--linen);opacity:.92;margin:clamp(20px,4vh,34px) auto 0;max-width:30ch;
}
.arrival__cue{
  margin-top:clamp(34px,7vh,64px);color:var(--mute-dark);
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
}
.arrival__cue .dot{display:inline-block;animation:bob 1.8s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ===================== THE PASS — one plate, nine courses =====================
   Default (no JS / no .motion / mobile): clean stacked course list with inline plates.
   Desktop + .motion: cinematic sticky-plate scrollytelling (the signature). */
.pass{position:relative;background:var(--char);color:var(--linen)}

/* shared course text atoms (used by both modes) */
.pass__course{
  max-width:760px;margin-inline:auto;
  padding:clamp(46px,8vh,90px) clamp(20px,5vw,56px);
}
.pass__cno{
  display:block;font-family:var(--serif);font-weight:300;color:var(--saffron);
  font-size:clamp(3rem,8vw,6rem);line-height:.8;letter-spacing:-.01em;margin-bottom:.06em;
}
.pass__course--hero .pass__cno{font-size:clamp(3.6rem,11vw,8rem)}
.pass__cook{display:block;margin-bottom:clamp(14px,2.2vh,24px)}
.pass__name{
  font-family:var(--serif);font-weight:420;font-optical-sizing:auto;
  font-size:clamp(1.7rem,4vw,3rem);line-height:1.02;margin:0 0 .5em;letter-spacing:-.01em;
}
.pass__name em{font-style:italic;color:var(--saffron-soft)}
.pass__body{max-width:44ch}
.pass__body p{margin:0 0 .8em}
.pass__origin{
  margin-top:clamp(18px,2.6vh,30px);padding-top:16px;
  display:flex;gap:16px;align-items:center;border-top:1px solid var(--rule-dark);
}
.pass__ing{width:58px;height:58px;flex:none;overflow:hidden;border-radius:50%;background:var(--ember)}
.pass__ing img{width:100%;height:100%;object-fit:cover}
.pass__origin .mono span{color:var(--saffron);display:block;font-size:.78rem;margin-bottom:2px}
.pass__inline{
  margin:clamp(20px,3vh,34px) 0 0;border:1px solid var(--rule-dark);
  overflow:hidden;aspect-ratio:4/3;background:var(--ember);
}
.pass__inline img{width:100%;height:100%;object-fit:cover}

/* the sticky plate stage — hidden unless desktop+motion turns it on */
.pass__stage{display:none}

/* ---- DESKTOP + MOTION: the cinematic sticky pass ---- */
@media (min-width:901px){
  .motion .pass{display:grid;grid-template-columns:1fr 1fr;align-items:start}

  .motion .pass__stage{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    position:sticky;top:0;height:100svh;grid-column:1;overflow:hidden;
    padding:clamp(30px,6vh,70px) clamp(20px,4vw,56px);
    border-right:1px solid var(--rule-dark);
  }
  .motion .pass__inline{display:none}        /* stage replaces the inline plates */

  .pass__tag{position:absolute;top:clamp(22px,5vh,44px);left:0;right:0;text-align:center;color:var(--mute-dark)}
  .pass__count{position:absolute;bottom:clamp(22px,5vh,44px);left:0;right:0;text-align:center;color:var(--mute-dark);letter-spacing:.22em}
  .pass__count b{color:var(--saffron);font-weight:500}

  .pass__plate{position:relative;width:min(74%,430px);aspect-ratio:4/5}
  .pass__no{
    position:absolute;left:50%;top:-.12em;transform:translateX(-50%);z-index:0;pointer-events:none;
    font-family:var(--serif);font-weight:300;color:var(--saffron);opacity:.12;
    font-size:clamp(8rem,16vw,13rem);line-height:.66;white-space:nowrap;
  }
  .pass__dish{
    position:absolute;inset:0;z-index:1;opacity:0;transform:scale(1.04);
    border:1px solid var(--rule-dark);overflow:hidden;background:var(--ember);
    transition:opacity .8s var(--ease),transform 1s var(--ease);
  }
  .pass__dish img{width:100%;height:100%;object-fit:cover}
  /* settle high-key dishes into the dark stage with a soft edge vignette */
  .pass__dish::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(125% 105% at 50% 38%,transparent 52%,rgba(15,12,9,.42))}
  .pass__dish.is-on{opacity:1;transform:scale(1);z-index:2}

  .motion .pass__flow{grid-column:2}
  .motion .pass__course{
    min-height:100svh;max-width:none;margin:0;
    display:flex;flex-direction:column;justify-content:center;
    opacity:.16;transition:opacity .55s var(--ease);
  }
  .motion .pass__course.is-on{opacity:1}
  .motion .pass__name{clip-path:inset(0 100% 0 0)}
  .motion .pass__course.is-on .pass__name{clip-path:inset(0 0 0 0);transition:clip-path .6s var(--ease) .08s}
}

/* ===================== THE CELLAR WITHOUT WINE ===================== */
.cellar{padding:clamp(80px,15vh,160px) 0;position:relative;overflow:hidden}
.cellar__bg{position:absolute;inset:0;z-index:0}
.cellar__bg img{width:100%;height:100%;object-fit:cover;opacity:.16}
.cellar .wrap{position:relative;z-index:1}
.cellar__head{max-width:30ch;margin-bottom:clamp(34px,6vh,64px)}
.cellar__eyebrow{color:var(--rose)}
.cellar__title{
  font-family:var(--serif);font-weight:380;font-size:clamp(2.2rem,6vw,4.4rem);
  line-height:.98;letter-spacing:-.02em;margin:.2em 0 .3em;
}
.cellar__title em{font-style:italic;color:var(--rose)}
.cellar__lede{font-family:var(--read);font-style:italic;font-size:clamp(1.1rem,2.2vw,1.4rem);max-width:34ch;color:var(--char)}
.pours{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 clamp(28px,4vw,56px)}
.pour{padding:18px 0;border-top:1px solid var(--rule-light)}
.pour__name{font-family:var(--serif);font-weight:480;font-size:1.18rem;margin:0 0 .15em}
.pour__name em{font-style:italic;color:var(--rose)}
.pour__note{font-family:var(--read);font-size:.96rem;color:var(--mute-light);margin:0}
.pour__label{color:var(--rose)!important;margin-top:6px;display:block}

/* ===================== THE BILL (reservation) ===================== */
.bill{padding:clamp(80px,14vh,160px) 0}
.bill__head{max-width:26ch;margin-bottom:clamp(34px,6vh,56px)}
.bill__eyebrow{color:var(--rose)}
.bill__title{font-family:var(--serif);font-weight:360;font-size:clamp(2.6rem,8vw,6rem);line-height:.92;letter-spacing:-.02em;margin:.15em 0 .25em}
.bill__title em{font-style:italic;color:var(--rose)}
.bill__lede{font-family:var(--read);font-style:italic;font-size:clamp(1.05rem,2.2vw,1.35rem);color:var(--mute-light)}

.bill__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:start}
.field{margin-bottom:clamp(24px,3.4vh,38px)}
.field__label{display:block;color:var(--rose);margin-bottom:12px}

/* seating cards */
.seatings{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.seat{
  text-align:left;background:transparent;border:1px solid var(--rule-light);
  padding:16px 18px;border-radius:2px;transition:border-color .25s,background .25s;
}
.seat:hover{border-color:var(--rose)}
.seat[aria-pressed="true"]{border-color:var(--rose);background:var(--linen-2)}
.seat[aria-pressed="true"] .seat__time{color:var(--rose)}
.seat__time{display:block;font-family:var(--serif);font-weight:520;font-size:1.4rem;line-height:1}
.seat__when{display:block;margin-top:6px;color:var(--mute-light)}

/* calendar */
.cal{border:1px solid var(--rule-light);border-radius:2px;padding:16px;background:var(--linen-2)}
.cal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal__title{font-family:var(--serif);font-weight:500;font-size:1.1rem}
.cal__nav{background:none;border:1px solid var(--rule-light);width:32px;height:32px;border-radius:2px;color:var(--char);display:grid;place-items:center}
.cal__nav:disabled{opacity:.3;cursor:not-allowed}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal__dow{font-family:var(--mono);font-size:.56rem;letter-spacing:.06em;text-align:center;color:var(--mute-light);padding:4px 0;text-transform:uppercase}
.cal__day{
  aspect-ratio:1;border:0;background:transparent;border-radius:2px;
  font-family:var(--mono);font-size:.82rem;color:var(--char);
  display:grid;place-items:center;min-height:38px;
}
.cal__day.is-open:hover{background:var(--linen)}
.cal__day:disabled{color:var(--rule-light);cursor:default}
.cal__day[aria-pressed="true"]{background:var(--rose);color:var(--linen)}
.cal__day.is-empty{visibility:hidden}

/* party stepper */
.stepper{display:inline-flex;align-items:center;gap:0;border:1px solid var(--rule-light);border-radius:2px;overflow:hidden}
.stepper button{width:48px;height:48px;background:transparent;border:0;font-size:1.4rem;color:var(--rose);display:grid;place-items:center}
.stepper button:disabled{color:var(--rule-light)}
.stepper__val{min-width:60px;text-align:center;font-family:var(--serif);font-weight:520;font-size:1.5rem}
.stepper__note{display:block;margin-top:10px;color:var(--mute-light)}

/* text inputs */
.in{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--rule-light);
  font-family:var(--read);font-size:1.05rem;color:var(--char);padding:10px 2px;
}
.in:focus{outline:0;border-color:var(--rose)}
.in::placeholder{color:var(--mute-light);opacity:.7}
.bill__note{font-family:var(--read);font-style:italic;color:var(--mute-light);font-size:.96rem;margin:6px 0 0}
.submit{
  margin-top:clamp(22px,3vh,32px);width:100%;
  background:var(--rose);color:var(--linen);border:0;border-radius:2px;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  padding:18px;transition:background .25s;
}
.submit:hover{background:#5f2a25}
.submit:disabled{opacity:.55;cursor:not-allowed}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* the printed docket (right column / resolve target) */
.docket{
  background:var(--linen);border:1px solid var(--rule-light);
  padding:clamp(22px,3vw,34px);position:relative;
  box-shadow:0 1px 0 var(--rule-light),0 18px 40px -28px rgba(24,20,16,.5);
}
.docket::before,.docket::after{content:"";position:absolute;left:0;right:0;height:8px;
  background:repeating-linear-gradient(90deg,var(--linen) 0 8px,transparent 8px 16px)}
.docket::before{top:-7px}
.docket::after{bottom:-7px;transform:scaleY(-1)}
.docket__head{text-align:center;border-bottom:1px dashed var(--rule-light);padding-bottom:14px;margin-bottom:14px}
.docket__mark{font-family:var(--serif);font-weight:540;font-size:1.5rem;letter-spacing:.02em}
.docket__sub{display:block;margin-top:4px;color:var(--mute-light)}
.docket__lines{list-style:none;margin:0;padding:0}
.docket__row{display:flex;align-items:baseline;gap:8px;font-family:var(--mono);font-size:.78rem;color:var(--char);padding:9px 0}
.docket__row .k{white-space:nowrap;letter-spacing:.08em;text-transform:uppercase;color:var(--mute-light)}
.docket__row .lead{flex:1;border-bottom:1px dotted var(--rule-light);transform:translateY(-3px)}
.docket__row .v{white-space:nowrap;font-weight:500}
.docket__row .v[data-pending]{color:var(--mute-light);font-style:italic}
.docket__foot{margin-top:16px;padding-top:14px;border-top:1px dashed var(--rule-light);text-align:center;color:var(--rose)}
.docket.is-set .docket__foot .pending{display:none}
.docket__set{display:none}
.docket.is-set .docket__set{
  display:inline-block;transform:rotate(-3.5deg);
  border:1.5px solid var(--rose);border-radius:3px;padding:5px 12px;margin-top:4px;
  letter-spacing:.18em;color:var(--rose);font-weight:500;
}
.docket.is-set .v[data-pending]{color:var(--char);font-style:normal}
/* the bill PRINTS — rows roll out top-to-bottom like a thermal receipt */
.docket.is-printing .docket__head,
.docket.is-printing .docket__row,
.docket.is-printing .docket__foot{animation:printrow .42s var(--ease) both;animation-delay:var(--d,0s)}
@keyframes printrow{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
.docket.is-printing{animation:feed .5s var(--ease)}
@keyframes feed{0%{box-shadow:0 1px 0 var(--rule-light),0 -10px 24px -18px rgba(24,20,16,.6)}100%{box-shadow:0 1px 0 var(--rule-light),0 18px 40px -28px rgba(24,20,16,.5)}}

/* ===================== FOOTER ===================== */
.foot{background:var(--char-2);color:var(--linen);padding:clamp(56px,9vh,110px) 0 36px;overflow:hidden}
.foot__mark{
  font-family:var(--serif);font-weight:330;font-size:clamp(4rem,21vw,17rem);
  line-height:.82;letter-spacing:-.02em;color:var(--linen);margin:0 0 .2em;white-space:nowrap;
}
.foot__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:28px 40px;margin-top:clamp(28px,4vh,48px)}
.foot__col h3{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--saffron);margin:0 0 12px}
.foot__col p,.foot__col a{font-family:var(--read);font-size:.98rem;color:var(--linen);margin:0 0 6px;text-decoration:none;display:block}
.foot__col a:hover{color:var(--saffron-soft)}
.foot__clock{font-family:var(--mono);font-size:.82rem;letter-spacing:.08em;color:var(--mute-dark)}
.foot__base{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;
  margin-top:clamp(36px,6vh,64px);padding-top:20px;border-top:1px solid var(--rule-dark);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;color:var(--mute-dark);text-transform:uppercase}
.foot__base a{color:var(--saffron);text-decoration:none}

/* ===================== RESPONSIVE ===================== */
@media (max-width:900px){
  body{padding-top:46px}
  .spine{display:none}
  .topbar{display:flex}
  .bill__grid{grid-template-columns:1fr;gap:clamp(22px,4vh,34px)}
  .pass__course{padding-top:clamp(34px,6vh,60px);padding-bottom:clamp(34px,6vh,60px)}
  .pass__ing{width:50px;height:50px}
  .seatings{grid-template-columns:1fr}
  .foot__mark{font-size:clamp(3rem,24vw,7rem)}
}
@media (max-width:520px){
  .pours{grid-template-columns:1fr}
  .sheet ol{columns:1}
}

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .arrival__cue .dot{animation:none}
}