/* ============================================================================
   Timilo Boutique — menu pages (restaurant, bar, in-room dining, spa)
   Loaded AFTER info.css, which supplies every token, the nav and the footer.
   Nothing here redefines a token; these are menu-only components.

   ── colour system (2026-07-28) ────────────────────────────────────────────
   info.css already converted; this file just follows its token mapping.
   Everything here sits on the (now white) page body EXCEPT .mcard, which
   lives inside dining.html's own dark "#menus" band — that one gets the
   dark-surface treatment (paper text, neutral white-tinted translucent
   fill) instead of the light one everything else gets.
   ========================================================================== */

/* Dining sits mid-bar like Rooms, so its panel hangs left rather than right.
   info.css only knows about .rooms-sub, so the same rule is repeated here. */
.dining-sub .subnav{right:auto;left:0}

/* ── sticky section jump bar ──────────────────────────────────────────────
   The restaurant menu runs to fourteen sections, which is far too long to
   scroll blind. The chip row pins under the 80px nav and scrolls sideways on
   a phone. Sections therefore need 80 + ~58 of scroll-margin so an anchored
   heading lands below both bars rather than behind them. */
.menu-jump{position:sticky;top:80px;z-index:80;background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.menu-jump .row{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding:11px clamp(20px,4vw,44px);max-width:1200px;margin:0 auto}
.menu-jump .row::-webkit-scrollbar{display:none}
.menu-jump a{flex:none;font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--charcoal);background:var(--white);border:1px solid var(--line);
  border-radius:999px;padding:9px 16px;min-height:38px;display:inline-flex;align-items:center;
  white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.menu-jump a:hover{border-color:var(--amber);color:var(--amber-ink)}

/* ── a menu section ───────────────────────────────────────────────────────── */
.mgroup{scroll-margin-top:142px}
.mgroup+.mgroup{margin-top:clamp(44px,5.5vw,76px)}
.mgroup>h2{font-size:clamp(34px,4vw,54px);line-height:.98;margin-bottom:6px}
.mgroup .mnote{margin:0 0 clamp(20px,2.4vw,28px);font-size:14px;line-height:1.6;color:var(--gray);max-width:62ch}
.mgroup .rule{height:1px;background:var(--line);margin:0 0 clamp(20px,2.4vw,28px)}

/* Two columns from 900px up. Grid (not CSS columns) so a tall item with a long
   description can never be split across the gutter mid-sentence. */
.mlist{list-style:none;margin:0;padding:0;display:grid;gap:0 clamp(30px,4vw,60px);
  grid-template-columns:repeat(auto-fit,minmax(min(410px,100%),1fr))}
.mi{padding:15px 0;border-bottom:1px solid var(--line)}
.mi-h{display:flex;align-items:baseline;gap:9px}
.mi-n{font-size:16px;font-weight:600;color:var(--charcoal);line-height:1.35}
/* The leader is decorative — it carries the eye from dish to price and is
   hidden from assistive tech, which reads name then price directly. */
.mi-lead{flex:1 1 auto;min-width:16px;align-self:flex-end;margin-bottom:5px;
  border-bottom:1px dotted rgba(30,30,30,.32)}
.mi-p{flex:none;font-size:15px;font-weight:700;color:var(--amber-ink);white-space:nowrap}
/* Items priced by choice of protein/size wrap under the name instead of
   stretching the leader off the right edge. */
.mi-var{margin:7px 0 0;display:flex;flex-wrap:wrap;gap:6px 8px;list-style:none;padding:0}
.mi-var li{font-size:12.5px;font-weight:600;color:var(--amber-ink);
  background:rgba(245,166,35,.13);border-radius:999px;padding:4px 11px;white-space:nowrap}
.mi-d{margin:6px 0 0;font-size:13.5px;line-height:1.6;color:var(--gray);max-width:56ch}

/* ── spa rituals ──────────────────────────────────────────────────────────── */
.ritual{background:var(--white);border:1px solid var(--line);border-radius:20px;
  padding:clamp(24px,3vw,40px);scroll-margin-top:142px}
.ritual+.ritual{margin-top:clamp(18px,2.4vw,26px)}
.ritual .r-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 24px}
.ritual .r-name{font-family:var(--display);font-weight:300;font-size:clamp(30px,3.4vw,42px);
  line-height:1;color:var(--charcoal)}
.ritual .r-sub{margin:6px 0 0;font-size:14.5px;font-style:italic;color:var(--gray)}
.ritual .r-price{flex:none;text-align:right}
.ritual .r-price b{display:block;font-size:22px;font-weight:700;color:var(--amber-ink);line-height:1.2}
.ritual .r-price span{font-size:11.5px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--gray)}
.ritual .r-body{margin:18px 0 0;font-size:14.5px;line-height:1.72;color:var(--charcoal);max-width:74ch}
.ritual .r-journey{margin:22px 0 0;padding:20px 0 0;border-top:1px solid var(--line)}
.ritual .r-journey h4{margin:0 0 12px;font-family:var(--body);font-size:11.5px;font-weight:700;
  letter-spacing:2.4px;text-transform:uppercase;color:var(--gray)}
.ritual .r-journey ol{margin:0;padding:0;list-style:none;counter-reset:step;
  display:flex;flex-direction:column;gap:11px}
.ritual .r-journey li{counter-increment:step;position:relative;padding-left:34px;
  font-size:14px;line-height:1.66;color:var(--charcoal)}
.ritual .r-journey li::before{content:counter(step);position:absolute;left:0;top:1px;
  width:23px;height:23px;border-radius:50%;background:rgba(245,166,35,.16);color:var(--amber-ink);
  font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center}

/* ── menu index cards (dining.html) — lives on a dark band, see file header */
.mcards{display:grid;gap:clamp(14px,2vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.mcard{display:flex;flex-direction:column;gap:8px;padding:24px;border-radius:18px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  transition:background .25s,border-color .25s,transform .25s}
.mcard:hover{background:rgba(255,255,255,.11);border-color:var(--amber);transform:translateY(-3px)}
.mcard .k{font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--amber)}
.mcard h3{font-family:var(--display);font-weight:300;font-size:30px;line-height:1;color:var(--paper)}
.mcard p{margin:0;font-size:13.5px;line-height:1.6;color:var(--mist)}

@media (prefers-reduced-motion:reduce){.mcard{transition:none}}
/* Once .r-top wraps, the price sits on its own line. Right-aligning inside a
   shrink-wrapped box then indents the number off the card's left edge (the box
   is as wide as "Excluding GST", not as wide as the price), so flip it left. */
@media (max-width:620px){.ritual .r-price{text-align:left}}