/* ============================================================================
   Ducey's on the Lake — version 6, "Nightfall"
   ----------------------------------------------------------------------------
   One continuous scroll through the restaurant's day. No tabs anywhere: you
   start at first light and breakfast, pass through the gold hour and the
   Sunset Specials, and end in the dark with dinner and the bar. The page
   background moves with you.

   The blue is the constant. It goes from a cold pre-dawn slate, through a
   warmer lit blue at sunset, to near-black at night. Gold is the sun and only
   fully arrives in the middle. There is no white anywhere.

   Course headings stick as you scroll through their section, the way a long
   printed menu keeps its heading in view — so you always know which part of
   the card you are in.

   Type: Bodoni Moda (a proper didone, the most "engraved menu" face used in
   any version) with Karla. Neither appears in v1–v5.
============================================================================ */

:root {
  /* the three grounds the page travels between */
  --dawn:  #0B1C30;
  --gold-hour: #1A2A3E;
  --night: #050A12;

  --bg: var(--dawn);          /* set by js as you scroll */

  --gold:   #FFCD2A;
  --gold-d: #C08F17;
  --ember:  #E9994A;

  --fg:      #E9EFF6;
  --fg-dim:  #93A8C0;
  --fg-low:  #5B7391;
  --line:    rgba(160, 190, 220, .18);
  --line2:   rgba(160, 190, 220, .34);

  --display: 'Bodoni Moda', 'Didot', Georgia, serif;
  --ui: 'Karla', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  --pad: clamp(20px, 5vw, 68px);
  --maxw: 1280px;
  --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: 5rem; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ui);
  font-size: 16px; font-weight: 300; line-height: 1.64;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background 1.2s linear;
}
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: 3px; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 400; line-height: 1.05; text-wrap: balance; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.k { font-size: .64rem; letter-spacing: .28em; text-transform: uppercase; color: var(--fg-low); font-weight: 500; }
.k-gold { color: var(--gold-d); }

.go {
  display: inline-block; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  padding-bottom: .35rem; border-bottom: 1px solid var(--line2); cursor: pointer;
  transition: color .3s, border-color .3s;
}
.go:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* ==========================================================================
   THE SUN — a fixed marker showing where in the day you are
   ==========================================================================
   Not decoration: it is the page's only navigation. The dot rides down the
   track as you scroll, and the three stops are the three services.
   ========================================================================== */
.sun {
  position: fixed; right: clamp(14px, 2.4vw, 34px); top: 50%; transform: translateY(-50%);
  z-index: 50; height: min(320px, 44vh);
  display: grid; grid-template-columns: auto 2px; gap: .7rem; align-items: stretch;
}
.sun-stops { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; }
.sun-stop {
  font-size: .58rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--fg-low); cursor: pointer; white-space: nowrap;
  transition: color .35s;
}
.sun-stop:hover, .sun-stop.on { color: var(--gold); }
.sun-track { position: relative; background: var(--line); }
.sun-dot {
  position: absolute; left: 50%; width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold); transform: translate(-50%, -50%);
  box-shadow: 0 0 12px 2px rgba(255,205,42,.5);
  transition: top .25s linear;
  top: 0;
}
@media (max-width: 820px) { .sun { display: none; } }

/* ==========================================================================
   MASTHEAD
   ========================================================================== */
.mast {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1rem var(--pad);
  transition: background .6s var(--ease), border-color .6s;
  border-bottom: 1px solid transparent;
}
.mast.solid { background: var(--bg); border-bottom-color: var(--line); }
.mast-n { font-family: var(--display); font-size: 1.2rem; white-space: nowrap; }
.mast-r { display: flex; gap: 1.6rem; align-items: center; }
.mast-r a { font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-dim); }
.mast-r a:hover { color: var(--gold); }

/* ==========================================================================
   FIRST LIGHT
   ========================================================================== */
.first {
  min-height: 100svh; display: grid; align-items: center;
  padding: 6rem 0 4rem; position: relative; overflow: hidden;
}
.first-shot {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  filter: saturate(.4) brightness(.5);
}
.first::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 72%, transparent), var(--bg) 88%);
}
.first h1 { font-size: clamp(2.6rem, 7vw, 5.4rem); }
.first h1 em { font-style: italic; color: var(--gold); }
.first p { margin: 1.5rem 0 0; max-width: 48ch; color: var(--fg-dim); }
.first .go { margin-top: 2.4rem; }

/* ==========================================================================
   A SERVICE — one long band per part of the day
   ========================================================================== */
.service { padding: clamp(4rem, 10vh, 8rem) 0; border-top: 1px solid var(--line); }
.service-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 1.4rem; }
.service-head h2 { font-size: clamp(2rem, 5vw, 3.6rem); }
.service-head h2 em { font-style: italic; color: var(--gold); }
.service-head .hrs { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-low); }
.service-intro { margin: 0 0 2rem; max-width: 54ch; color: var(--fg-dim); font-size: .95rem; }

/* sticky course headings, the way a long printed card keeps its heading */
.course { margin-top: 2.4rem; }
/* Solid background, no backdrop-filter. There are ~17 of these stuck at once
   across the three services; giving each one a blur layer froze the renderer
   outright, and the body's colour transition made it worse by repainting them
   all continuously. A flat fill reads the same and costs nothing. */
.course-h {
  position: sticky; top: 3.6rem; z-index: 20;
  display: flex; align-items: baseline; gap: .9rem;
  padding: .7rem 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line2);
}
.course-h .cn { font-size: .6rem; letter-spacing: .2em; color: var(--gold-d); }
.course-h .ct { font-family: var(--display); font-size: 1.4rem; font-style: italic; }
.course-note { margin: .9rem 0 .3rem; font-size: .8rem; color: var(--fg-low); line-height: 1.55; max-width: 62ch; }

.dishes { columns: 2; column-gap: clamp(2rem, 5vw, 4rem); margin-top: .6rem; }
@media (max-width: 820px) { .dishes { columns: 1; } }
.dish { break-inside: avoid; padding: .68rem 0; border-bottom: 1px solid var(--line); }
.dish-r { display: flex; align-items: baseline; gap: .7rem; }
.dish-n { font-size: .95rem; }
.dish-f { flex: 1; border-bottom: 1px dotted var(--line2); transform: translateY(-4px); }
.dish-p { font-family: var(--display); font-size: 1.05rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.dish-d { margin: .18rem 0 0; font-size: .78rem; color: var(--fg-dim); line-height: 1.5; max-width: 44ch; }

/* a full-bleed plate between services, to break the density */
.interlude { position: relative; height: clamp(240px, 42vh, 460px); overflow: hidden; }
.interlude img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.5) brightness(.6); }
.interlude figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--pad);
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-dim);
  background: linear-gradient(to top, color-mix(in srgb, var(--bg) 90%, transparent), transparent);
}

/* ==========================================================================
   AFTER DARK — bar + rooms, the end of the day
   ========================================================================== */
.dark-band { border-top: 1px solid var(--line); padding: clamp(4rem, 10vh, 7rem) 0; }
.two { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; } }
.two h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
.two h2 em { font-style: italic; color: var(--gold); }
.two > div > p { margin: 1.2rem 0 0; color: var(--fg-dim); max-width: 42ch; }
.note-rule { margin-top: 1.8rem; padding-left: 1rem; border-left: 1px solid var(--gold-d); font-size: .82rem; color: var(--fg-low); }

.rooms { display: grid; gap: 0; margin-top: 2.4rem; }
.room { display: grid; grid-template-columns: 2.4rem 1fr auto; gap: 1rem; align-items: baseline; padding: 1.05rem 0; border-top: 1px solid var(--line); }
.room .rn { font-size: .6rem; letter-spacing: .16em; color: var(--fg-low); }
.room .rt { font-family: var(--display); font-size: 1.25rem; }
.room .rd { grid-column: 2 / -1; font-size: .8rem; color: var(--fg-dim); margin-top: .25rem; }
.room .rh { font-size: .68rem; color: var(--fg-low); white-space: nowrap; }

/* ==========================================================================
   CLOSING
   ========================================================================== */
.closing { border-top: 1px solid var(--line); padding: clamp(3rem, 7vw, 5rem) 0 2rem; }
.closing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2.2rem; }
.closing h4 { margin: 0 0 .7rem; font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-d); font-weight: 500; }
.closing p, .closing a { display: block; margin: 0 0 .2rem; font-size: .88rem; color: var(--fg-dim); }
.closing a:hover { color: var(--gold); }
.closing-end { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-low); }

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