/* ============================================================================
   Ducey's on the Lake — version 5, "Index"
   ----------------------------------------------------------------------------
   The opposite bet to every other version: almost no photography. The page
   opens on type alone, the menu is a numbered catalogue, and the pictures are
   confined to one horizontal strip near the bottom that you scrub through.

   Reference: MOUTHWASH Studio's archive index and SSENSE's caption-led rows —
   tiny mono UI pinned to the edges, enormous quantities of empty ground, and
   the content doing all the talking.

   The one interaction that carries it: hovering a dish name brings up a small
   plate in the corner with its price and description, so scanning the
   catalogue feels like pulling cards rather than reading a list.

   Near-black blue, gold, one cool grey. Instrument Serif and DM Mono, neither
   used in v1–v4.
============================================================================ */

:root {
  --void:  #050A11;
  --raise: #0A121D;
  --line:  rgba(140, 170, 205, .16);
  --line2: rgba(140, 170, 205, .32);

  --gold:  #FFCD2A;
  --gold-d:#A9821B;

  --fg:     #E4EBF3;
  --fg-dim: #7F94AC;
  --fg-low: #4A5F79;

  --display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --pad: clamp(16px, 3vw, 40px);
  --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: 4rem; }

body {
  margin: 0;
  background: var(--void);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 14px; font-weight: 300; line-height: 1.6;
  -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: 3px; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 400; line-height: 1; letter-spacing: -0.01em; }

.m { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-low); }
.m-gold { color: var(--gold-d); }

/* ==========================================================================
   CORNER UI — pinned, tiny, never in the way
   ========================================================================== */
.corner { position: fixed; z-index: 60; padding: var(--pad); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; }
.corner a { color: var(--fg-dim); transition: color .3s; }
.corner a:hover { color: var(--gold); }
.c-tl { top: 0; left: 0; display: flex; gap: 1.4rem; align-items: baseline; }
.c-tr { top: 0; right: 0; display: flex; gap: 1.4rem; }
.c-bl { bottom: 0; left: 0; color: var(--fg-low); }
.c-br { bottom: 0; right: 0; color: var(--fg-low); }
.c-tl .mark { color: var(--fg); font-family: var(--display); font-size: 1rem; letter-spacing: 0; text-transform: none; }
@media (max-width: 720px) {
  .c-bl, .c-br { display: none; }
  .c-tr { gap: .9rem; font-size: .58rem; }
}

/* ==========================================================================
   OPENING — type only
   ========================================================================== */
.open {
  min-height: 100svh;
  display: grid; align-content: center;
  padding: 6rem var(--pad) 5rem;
  max-width: 1500px; margin-inline: auto; width: 100%;
}
.open h1 {
  font-size: clamp(3rem, 12vw, 11rem);
  line-height: .88;
  letter-spacing: -0.035em;
}
.open h1 .it { font-style: italic; color: var(--gold); }
.open-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1.6rem; margin-top: clamp(2.5rem, 6vw, 4.5rem);
  border-top: 1px solid var(--line); padding-top: 1.4rem;
}
.open-meta div span { display: block; }
.open-meta .k { color: var(--fg-low); margin-bottom: .3rem; }
.open-meta .v { color: var(--fg); text-transform: none; letter-spacing: .02em; font-size: .78rem; }
.open-meta .v.live { color: var(--gold); }

/* ==========================================================================
   THE CATALOGUE
   ==========================================================================
   Numbered rows. Hovering one raises a plate in the bottom-right with the
   detail, so the list itself can stay stripped to name and price.
   ========================================================================== */
.cat-wrap { max-width: 1500px; margin-inline: auto; padding: clamp(3rem,7vw,6rem) var(--pad) 6rem; }

.cat-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1.5rem; border-bottom: 1px solid var(--line2); padding-bottom: 1rem; }
.cat-head h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
.svcs { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.svc { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-low); cursor: pointer; padding-bottom: .3rem; border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.svc:hover { color: var(--fg-dim); }
.svc.on { color: var(--gold); border-bottom-color: var(--gold); }

.grp { margin-top: 2.8rem; }
.grp-h { display: flex; align-items: baseline; gap: 1rem; margin-bottom: .3rem; }
.grp-h .gn { font-size: .62rem; color: var(--fg-low); }
.grp-h .gt { font-family: var(--display); font-size: 1.35rem; }
.grp-note { margin: .1rem 0 .9rem; font-size: .68rem; color: var(--fg-low); max-width: 60ch; line-height: 1.5; }

.line {
  display: grid; grid-template-columns: 3rem minmax(0,1fr) auto;
  gap: 1rem; align-items: baseline;
  width: 100%; text-align: left; cursor: default;
  padding: .5rem 0; border-bottom: 1px solid var(--line);
  transition: background .3s, padding-left .4s var(--ease);
}
.line:hover { background: var(--raise); padding-left: .6rem; }
.line .ln { font-size: .62rem; color: var(--fg-low); }
.line .nm { font-size: .84rem; letter-spacing: .01em; text-transform: none; }
.line:hover .nm { color: var(--gold); }
.line .pr { font-size: .8rem; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
@media (max-width: 620px) { .line { grid-template-columns: 2.2rem 1fr auto; } }

/* the raised detail plate */
.detail {
  position: fixed; right: var(--pad); bottom: calc(var(--pad) + 1.6rem); z-index: 59;
  width: min(340px, 74vw);
  background: var(--raise); border: 1px solid var(--line2);
  padding: 1.1rem 1.2rem;
  opacity: 0; transform: translateY(10px);
  transition: opacity .3s, transform .4s var(--ease);
  pointer-events: none;
}
.detail.on { opacity: 1; transform: none; }
.detail .dt { font-family: var(--display); font-size: 1.15rem; line-height: 1.1; }
.detail .dp { margin-top: .35rem; color: var(--gold); font-size: .78rem; }
.detail .dd { margin: .6rem 0 0; font-size: .72rem; color: var(--fg-dim); line-height: 1.55; }
@media (max-width: 720px) { .detail { display: none; } }

/* ==========================================================================
   PLATES — the only photography, one scrubbable strip
   ========================================================================== */
.strip-wrap { border-block: 1px solid var(--line); padding: clamp(2.5rem,6vw,4rem) 0; }
.strip-head { max-width: 1500px; margin: 0 auto clamp(1.5rem,3vw,2.2rem); padding-inline: var(--pad); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: baseline; }
.strip-head h2 { font-size: clamp(1.5rem,3vw,2.2rem); }
.strip { display: flex; gap: 1px; overflow-x: auto; scrollbar-width: none; cursor: grab; padding-inline: var(--pad); }
.strip::-webkit-scrollbar { display: none; }
.strip.drag { cursor: grabbing; }
.plate {
  flex: 0 0 clamp(180px, 22vw, 280px);
  user-select: none;
}
.plate-img { aspect-ratio: 4/5; overflow: hidden; background: var(--raise); }
.plate-img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.45) brightness(.7); transition: filter .8s var(--ease), transform 1.4s var(--ease); pointer-events: none; }
.plate:hover .plate-img img { filter: saturate(1) brightness(.95); transform: scale(1.04); }
.plate-cap { padding: .7rem .2rem 0; display: flex; gap: .6rem; }
.plate-cap .pn { color: var(--fg-low); font-size: .62rem; }
.plate-cap .pt { font-size: .68rem; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .1em; }

/* ==========================================================================
   ROOMS + VISIT — plain data rows, catalogue voice
   ========================================================================== */
.rows { max-width: 1500px; margin-inline: auto; padding: clamp(3rem,7vw,5.5rem) var(--pad); }
.rows h2 { font-size: clamp(1.6rem,3.2vw,2.4rem); margin-bottom: 1.6rem; }
.drow { display: grid; grid-template-columns: 3rem minmax(0,1.1fr) minmax(0,1.6fr) auto; gap: 1.2rem; padding: 1rem 0; border-top: 1px solid var(--line); align-items: baseline; }
.drow .dn { font-size: .62rem; color: var(--fg-low); }
.drow .dname { font-family: var(--display); font-size: 1.2rem; }
.drow .ddesc { font-size: .74rem; color: var(--fg-dim); line-height: 1.55; }
.drow .dh { font-size: .68rem; color: var(--fg-low); text-align: right; white-space: nowrap; }
@media (max-width: 820px) {
  .drow { grid-template-columns: 2.2rem 1fr; }
  .drow .ddesc, .drow .dh { grid-column: 2; text-align: left; }
}

.endnote { max-width: 1500px; margin-inline: auto; padding: 0 var(--pad) 5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 2rem; border-top: 1px solid var(--line); padding-top: 2rem; }
.endnote h4 { margin: 0 0 .6rem; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-d); font-weight: 400; }
.endnote p, .endnote a { display: block; margin: 0 0 .2rem; font-size: .76rem; color: var(--fg-dim); }
.endnote a:hover { color: var(--gold); }

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

/* ==========================================================================
   VEILS
   ==========================================================================
   The corner UI is fixed, so any content scrolling past the top or bottom of
   the viewport collides with it. These two gradients sit behind the corners
   and fade the ground back in, which keeps the corners readable without
   giving them a hard bar and losing the sparseness.
   ========================================================================== */
.veil {
  position: fixed; left: 0; right: 0; z-index: 55;
  height: 92px; pointer-events: none;
}
.veil-t { top: 0; background: linear-gradient(to bottom, var(--void) 38%, transparent); }
.veil-b { bottom: 0; background: linear-gradient(to top, var(--void) 38%, transparent); }
.corner { z-index: 58; }
@media (max-width: 720px) { .veil-b { display: none; } }