/* ============================================================================
   Ducey's on the Lake — version 3, "Service"
   ----------------------------------------------------------------------------
   Brief for this one: keep the blue, drop the white. v2's bone paper did not
   sit right, so v3 never leaves the navy. Contrast comes from depth instead of
   from a light ground — three navies stacked, gold for anything that matters,
   and a warm lamp-amber that only ever appears behind the current service.

   Structurally different from both earlier versions:
     v1  stacked full-bleed bands, centred hero
     v2  ledger rows, mono marginalia, bone paper
     v3  the site opens on whatever service is running RIGHT NOW, the menu is
         a two-page spread you turn, and the rooms are a horizontal filmstrip
         you drag rather than a vertical stack.

   Type: Cormorant Garamond for display (a lighter, more engraved serif than
   v1's Playfair and v2's Fraunces), Jost for the UI voice, and no mono at all
   — the mono was v2's signature and this version needs its own.
============================================================================ */

/* ------------------------------------------------------------------ tokens */
:root {
  /* three depths of the same blue, not a blue and a white */
  --abyss:  #04101E;
  --deep:   #071A31;
  --mid:    #0C2745;
  --raised: #123458;
  --line:   rgba(147, 183, 226, .18);
  --line-strong: rgba(147, 183, 226, .34);

  --gold:   #FFCD2A;
  --gold-dim: #C9A03A;
  --amber:  #E8A33D;

  --text:   #E6EEF8;
  --text-dim: #93AEC9;
  --text-faint: #5E7B99;

  --display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --ui: 'Jost', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  --mast-h: 70px;
  --pad: clamp(20px, 5vw, 72px);
  --maxw: 1440px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
[id] { scroll-margin-top: calc(var(--mast-h) + 1rem); }
#menu { scroll-margin-top: var(--mast-h); }

body {
  margin: 0;
  background: var(--abyss);
  color: var(--text);
  font-family: var(--ui);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

/* width:100% is load-bearing. `.now` is a grid, and a grid item carrying
   `margin-inline: auto` self-aligns to centre and sizes to fit-content rather
   than stretching, which collapsed the opening screen to a narrow column
   floating in the middle. */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

.label {
  font-size: .66rem; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--text-faint);
}
.label-gold { color: var(--gold-dim); }

.hair { height: 1px; background: var(--line); border: 0; margin: 0; }

/* a link is a word with a gold underline that grows, never a pill */
.lk {
  display: inline-block; position: relative;
  font-size: .78rem; font-weight: 400;
  letter-spacing: .22em; text-transform: uppercase;
  padding-bottom: .45rem; cursor: pointer;
}
.lk::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--gold); transform: scaleX(.22); transform-origin: left;
  transition: transform .5s var(--ease);
}
.lk:hover::after { transform: scaleX(1); }
.lk-gold { color: var(--gold); }

/* ==========================================================================
   MASTHEAD
   ========================================================================== */
.mast {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding: 1.1rem var(--pad);
  transition: background .5s var(--ease), border-color .5s;
  border-bottom: 1px solid transparent;
}
.mast.stuck { background: rgba(4, 16, 30, .93); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom-color: var(--line); }
.mast-name { font-family: var(--display); font-size: 1.3rem; letter-spacing: .01em; white-space: nowrap; }
.mast-nav { display: flex; gap: 2rem; }
.mast-nav a { font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--text-dim); transition: color .3s; }
.mast-nav a:hover { color: var(--gold); }
.mast-tel { font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; }
.mast-tel:hover { color: var(--gold); }
.mast-burger { display: none; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
@media (max-width: 900px) {
  .mast-burger { display: block; }
  .mast-tel { display: none; }
  .mast-nav {
    position: fixed; inset: 0 0 0 auto; width: min(320px, 80vw);
    flex-direction: column; justify-content: center; gap: 1.8rem;
    padding: 5rem 2.4rem; background: var(--deep);
    border-left: 1px solid var(--line);
    transform: translateX(100%); transition: transform .5s var(--ease); z-index: 95;
  }
  .mast-nav.open { transform: none; }
  .mast-nav a { font-size: .84rem; color: var(--text); }
}

/* ==========================================================================
   OPENING — what is being served right now
   ==========================================================================
   Not a slogan. The page works out the time and tells you whether the kitchen
   is open, what is on, and when the next service starts. The amber glow sits
   behind it and only appears when something is actually being served.
   ========================================================================== */
.now {
  position: relative; min-height: 100svh;
  display: grid; align-items: center;
  padding: 7rem var(--pad) 4rem;
  overflow: hidden; isolation: isolate;
}
.now-shot {
  position: absolute; inset: 0; z-index: -3;
  background-size: cover; background-position: center;
  filter: saturate(.55) brightness(.62);
  transform: scale(1.05);
  animation: drift 30s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: scale(1.05) translate3d(0,0,0); } to { transform: scale(1.13) translate3d(-1.5%, -1%, 0); } }
@media (prefers-reduced-motion: reduce) { .now-shot { animation: none; } }

.now::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(to right, var(--abyss) 0%, rgba(4,16,30,.86) 42%, rgba(4,16,30,.5) 72%, rgba(4,16,30,.72) 100%),
    linear-gradient(to top, var(--abyss) 0%, rgba(4,16,30,.2) 46%, rgba(4,16,30,.7) 100%);
}
/* the lamp: only lit while a service is on */
.now-glow {
  position: absolute; z-index: -1;
  left: -10%; bottom: -30%; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(circle, rgba(232,163,61,.24), rgba(232,163,61,0) 62%);
  opacity: 0; transition: opacity 2s var(--ease);
  pointer-events: none;
}
.now.open .now-glow { opacity: 1; }

.now-inner { max-width: 780px; }
.now-status {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: .68rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 1.8rem;
}
.now-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); }
.now.open .now-dot { background: var(--amber); box-shadow: 0 0 0 0 rgba(232,163,61,.6); animation: pulse 2.6s ease-out infinite; }
@keyframes pulse { to { box-shadow: 0 0 0 12px rgba(232,163,61,0); } }
.now.open .now-status { color: var(--amber); }

.now h1 { font-size: clamp(2.8rem, 7.6vw, 5.6rem); }
.now h1 em { font-style: italic; color: var(--gold); }
.now-sub { margin: 1.6rem 0 0; font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--text-dim); max-width: 46ch; }
.now-next { margin: 1.1rem 0 0; font-size: .9rem; color: var(--text-faint); }
.now-acts { display: flex; flex-wrap: wrap; gap: 2.4rem; margin-top: 3rem; }

/* ==========================================================================
   SERVICE RAIL — horizontal, sticky, drives the spread below
   ========================================================================== */
.rail {
  /* stops below the fixed masthead rather than under it */
  position: sticky; top: var(--mast-h); z-index: 60;
  background: var(--deep);
  border-block: 1px solid var(--line);
}
.rail-inner { display: flex; overflow-x: auto; scrollbar-width: none; max-width: var(--maxw); margin-inline: auto; }
.rail-inner::-webkit-scrollbar { display: none; }
.rail-btn {
  flex: 1 0 auto; min-width: 180px;
  padding: 1.4rem clamp(1rem, 3vw, 2.4rem);
  text-align: left; cursor: pointer;
  border-right: 1px solid var(--line);
  position: relative;
  transition: background .4s var(--ease);
}
.rail-btn:last-child { border-right: 0; }
.rail-btn:hover { background: var(--mid); }
.rail-btn .rb-name { display: block; font-family: var(--display); font-size: 1.5rem; line-height: 1; }
.rail-btn .rb-hrs { display: block; margin-top: .45rem; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint); }
.rail-btn::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.rail-btn.on { background: var(--mid); }
.rail-btn.on::after { transform: scaleX(1); }
.rail-btn.on .rb-name { color: var(--gold); }
.rail-btn.serving .rb-hrs::before { content: '● '; color: var(--amber); }

/* ==========================================================================
   THE SPREAD — the menu as two facing pages
   ========================================================================== */
.spread { background: var(--deep); padding: clamp(3rem, 7vw, 6rem) 0 clamp(4rem, 9vw, 7rem); }
.spread-head { text-align: center; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.spread-head h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.spread-head h2 em { font-style: italic; color: var(--gold); }
.spread-head p { margin: 1rem auto 0; color: var(--text-dim); max-width: 52ch; }

.pages {
  columns: 2; column-gap: clamp(2.5rem, 6vw, 6rem);
  column-rule: 1px solid var(--line);
  max-width: 1180px; margin-inline: auto;
  padding-inline: var(--pad);
}
@media (max-width: 880px) { .pages { columns: 1; column-rule: 0; } }

.course { break-inside: avoid; margin-bottom: 3rem; }
.course-name {
  display: flex; align-items: baseline; gap: 1rem;
  font-family: var(--display); font-size: 1.7rem; color: var(--gold);
  margin-bottom: .3rem;
}
.course-name::after { content: ''; flex: 1; height: 1px; background: var(--line-strong); }
.course-note { margin: .4rem 0 1.2rem; font-size: .82rem; line-height: 1.55; color: var(--text-faint); }

.dish { padding: .62rem 0; }
.dish-top { display: flex; align-items: baseline; gap: .7rem; }
.dish-name { font-size: .98rem; font-weight: 400; letter-spacing: .01em; }
.dish-dots { flex: 1; border-bottom: 1px dotted var(--line-strong); transform: translateY(-4px); }
.dish-price { font-family: var(--display); font-size: 1.15rem; color: var(--text); }
.dish-desc { margin: .22rem 0 0; font-size: .82rem; line-height: 1.5; color: var(--text-dim); max-width: 44ch; }

/* ==========================================================================
   FILMSTRIP — the rooms, dragged sideways rather than stacked
   ========================================================================== */
.rooms { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.rooms-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2.6rem; }
.rooms-head h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
.rooms-hint { font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--text-faint); }

.strip {
  display: flex; gap: clamp(1rem, 2.5vw, 2rem);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 var(--pad) 1.5rem;
  scrollbar-width: none; cursor: grab;
}
.strip::-webkit-scrollbar { display: none; }
.strip.dragging { cursor: grabbing; scroll-snap-type: none; }
.room {
  flex: 0 0 clamp(280px, 38vw, 460px);
  scroll-snap-align: center;
  user-select: none;
}
.room-fig { aspect-ratio: 3 / 4; overflow: hidden; background: var(--mid); }
.room-fig img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease), filter 1s; filter: saturate(.72) brightness(.82); pointer-events: none; }
.room:hover .room-fig img { transform: scale(1.05); filter: saturate(1) brightness(.95); }
.room-body { padding-top: 1.2rem; }
.room-kick { font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-dim); }
.room-body h3 { font-size: 1.7rem; margin-top: .5rem; }
.room-body p { margin: .8rem 0 0; font-size: .88rem; color: var(--text-dim); }
.room-hrs { margin-top: .9rem; font-size: .78rem; color: var(--text-faint); }
.room-hrs b { color: var(--text); font-weight: 400; }

/* ==========================================================================
   BAR — a dark inset panel, not a section
   ========================================================================== */
.bar-band { background: var(--deep); border-block: 1px solid var(--line); padding: clamp(3.5rem, 8vw, 6rem) 0; }
.bar-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
@media (max-width: 900px) { .bar-grid { grid-template-columns: 1fr; } }
.bar-grid h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
.bar-grid > div > p { margin: 1.2rem 0 0; color: var(--text-dim); max-width: 44ch; }
.bar-note { margin-top: 2rem; padding-left: 1rem; border-left: 1px solid var(--gold-dim); font-size: .84rem; color: var(--text-faint); }
.bar-cols { columns: 2; column-gap: 2.6rem; }
@media (max-width: 620px) { .bar-cols { columns: 1; } }

/* ==========================================================================
   VISIT + COLOPHON
   ========================================================================== */
.visit { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.visit-shot { aspect-ratio: 21 / 8; overflow: hidden; margin-top: 2.5rem; }
.visit-shot img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) brightness(.8); }
.visit-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 2.4rem; margin-top: 3rem; }
.visit-cols h4 { margin: 0 0 .8rem; font-size: .64rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-dim); font-weight: 500; }
.visit-cols p, .visit-cols a { display: block; margin: 0 0 .25rem; font-size: .92rem; color: var(--text-dim); }
.visit-cols a:hover { color: var(--gold); }

.colophon { border-top: 1px solid var(--line); padding: 2rem 0; }
.colophon .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint); }
.colophon a:hover { color: var(--gold); }

/* ------------------------------------------------------------------ reveal */
[data-r] { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
[data-r].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-r] { opacity: 1; transform: none; transition: none; } }