/* The Sommelier's Secret - the landing page.

   Design read: a premium-consumer landing for a wine board game, aimed at hosts and gift buyers,
   in a candlelit-cellar editorial language. Cinzel and EB Garamond on cream, with wine as the one
   accent and gold used only as a hairline metal.

   Motion is deliberately low. The client's note was that the previous page had too much of it and
   that sections glitched and re-fired on the way down, so there are no entrance animations here at
   all: everything is readable the moment it is painted. There was a wine pour simulated down the
   left margin; the client read the dark red as blood and did not want it, so it is gone with its
   canvas and its script. Hover states and the welcome dialog are the only movement left. */

/* ---------------------------------------------------------------- faces */
@font-face { font-family: 'Cinzel'; src: url('/assets/fonts/Cinzel-600.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'EB Garamond'; src: url('/assets/fonts/EBGaramond-400.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'EB Garamond'; src: url('/assets/fonts/EBGaramond-400-italic.woff2') format('woff2');
  font-weight: 400 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/assets/fonts/dm-sans.woff2') format('woff2');
  font-weight: 100 1000; font-style: normal; font-display: swap; }

/* ---------------------------------------------------------------- tokens */
:root {
  --cream: #f4eee1;
  --cream-2: #ece2ce;
  --cream-3: #e2d6bd;
  --ink: #1d1913;
  --ink-2: #443c31;
  --muted: #6f6455;
  --wine: #6b1e2e;
  --wine-deep: #4d1420;
  --wine-bright: #8c2839;
  --gold: #ab8b4e;
  --gold-soft: #c9ab6e;
  --hair: #cdbb96;

  --display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --text: 'EB Garamond', 'Iowan Old Style', Georgia, serif;
  --ui: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gutter: clamp(1.35rem, 5vw, 5rem);
  --ground: #16110d;      /* the one dark ground every dark band sits on */

  /* what chrome.css paints the header and footer with */
  --chrome-paper: var(--cream); --chrome-ink: var(--ink); --chrome-ink-soft: var(--ink-2);
  --chrome-accent: var(--wine); --chrome-gold: var(--gold); --chrome-gold-soft: var(--gold-soft);
  --chrome-hair: var(--hair); --chrome-dark: var(--ink);
  --chrome-display: var(--display); --chrome-ui: var(--ui);   /* the air that keeps the opening bands apart */
  --header-h: 72px;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--text); font-size: 1.0625rem; line-height: 1.62;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4 { font-weight: 400; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
::selection { background: var(--wine); color: var(--cream); }
:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: var(--gold-soft); }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.skip { position: fixed; left: 1rem; top: -5rem; z-index: 120; background: var(--wine); color: var(--cream);
  padding: .85rem 1.15rem; font-family: var(--ui); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.skip:focus { top: 1rem; }

/* ---------------------------------------------------------------- shared */
.wrap { width: 100%; max-width: 78rem; margin-inline: auto; padding-inline: var(--gutter); }
.band { position: relative; padding-block: clamp(4.5rem, 9vw, 8.5rem); }

.eyebrow {
  font-family: var(--display); font-size: .72rem; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase; color: var(--gold);
}
.display {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  line-height: 1.02; letter-spacing: .005em; text-wrap: balance; color: var(--ink);
}
h1.display { font-size: clamp(2.15rem, 5.4vw, 4.4rem); line-height: .98; letter-spacing: -.005em; }
h2.display { font-size: clamp(1.95rem, 3.5vw, 3rem); }
h3.display { font-size: clamp(1.15rem, 1.5vw, 1.4rem); letter-spacing: .06em; }

.lead { font-size: clamp(1.1rem, 1.35vw, 1.28rem); color: var(--ink-2); max-width: 34rem; }
.note { font-family: var(--ui); font-size: .875rem; line-height: 1.7; color: var(--muted); }

/* the little gold flourish under a heading, taken from the box art */
.flourish { display: flex; align-items: center; gap: .55rem; margin: 1.4rem 0; }
.flourish::before { content: ''; height: 1px; width: 3.5rem; background: var(--gold); }
.flourish::after { content: ''; width: 5px; height: 5px; rotate: 45deg; background: var(--gold); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .8rem;
  padding: 1.05rem 2.1rem; border: 1px solid var(--wine); background: var(--wine); color: #f6efe2;
  font-family: var(--display); font-size: .82rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(201, 171, 110, .55);
  transition: background-color .22s ease, box-shadow .22s ease, color .22s ease;
}
.btn:hover { background: var(--wine-deep); box-shadow: inset 0 0 0 1px var(--gold-soft); }
.btn[aria-disabled='true'] { opacity: .5; pointer-events: none; }
.btn:disabled { opacity: .42; cursor: default; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--hair); box-shadow: none; }
.btn-ghost:hover { background: rgba(107, 30, 46, .06); border-color: var(--wine); color: var(--wine); box-shadow: none; }
/* the outlined twin, for use on a photograph where a second filled button would fight the first */
.btn-line {
  background: transparent; color: #f4ece0; border-color: rgba(244, 236, 224, .55); box-shadow: none;
}
.btn-line:hover { background: rgba(244, 236, 224, .1); border-color: var(--gold-soft); color: #fff; box-shadow: none; }

.textlink {
  display: inline-block; font-family: var(--display); font-size: .78rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
  border-bottom: 1px solid var(--gold); padding-bottom: .3rem;
  transition: color .22s ease, border-color .22s ease;
}
.textlink:hover { color: var(--wine); border-color: var(--wine); }
.on-dark .textlink { color: #efe6d6; border-color: var(--gold-soft); }
.on-dark .textlink:hover { color: var(--gold-soft); }

/* the header and the footer live in chrome.css — one copy for the whole site */


/* ---------------------------------------------------------------- hero
   The client's brief, and his own mockup of it: the scene fills the frame and the words sit on it,
   rather than a panel of type beside a picture. The photograph is his — the board on a candlelit
   table, white wine rather than red — with the type he had burned into it lifted back off so the
   page can set it properly (tools/build-hero.mjs).

   The copy sits in the left third because that is where his photograph is darkest and emptiest.
   A scrim goes under it anyway: an image is not a background you can trust for contrast, and this
   one has a candle in it. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: center; align-content: center;
  min-height: 100svh;
  padding: calc(var(--header-h) + clamp(1.5rem, 4vw, 3rem)) 0 clamp(3.5rem, 7vw, 6rem);
  background: var(--ground); color: #f4ece0;
}
/* <picture> is an inline box; the img inside it is what the layout sees */
.hero picture { display: contents; }
.hero-art {
  position: absolute; inset: 0; z-index: -2; display: block;
  width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%;
}
/* Left to right, so the words keep their ground and the board keeps its light. The second stop
   holds the darkness across the whole copy column instead of falling away behind the last line. */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11, 8, 6, 0.9) 0%, rgba(11, 8, 6, 0.8) 21%, rgba(11, 8, 6, 0.46) 38%, rgba(11, 8, 6, 0.1) 55%, rgba(11, 8, 6, 0) 68%),
    linear-gradient(180deg, rgba(11, 8, 6, 0.72) 0%, rgba(11, 8, 6, 0.34) 9%, rgba(11, 8, 6, 0) 26%);
}
.hero-copy {
  position: relative; grid-area: 1 / 1;
  width: min(36rem, 100%); margin-left: var(--gutter); padding-right: 1rem;
}
.hero-copy .eyebrow { color: var(--gold-soft); }
.hero-copy .eyebrow::after {
  content: ''; display: block; width: 4.5rem; height: 1px; margin-top: 1.1rem;
  background: linear-gradient(90deg, var(--gold), rgba(171, 139, 78, 0));
}
.hero h1 { margin-top: 1.5rem; color: #f7f0e3; font-size: clamp(2.5rem, 5.1vw, 4.35rem); line-height: 1.04; }
.hero-sub {
  margin-top: 1.05rem; font-family: var(--text); font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 1.95rem); line-height: 1.2; color: #efe4d2;
}
.hero .lead { margin-top: 1.5rem; margin-bottom: 2.3rem; color: #cdbfa9; max-width: 26rem; }
.hero-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
/* the client's video (2026-10-15): a quiet third way in beside the two buttons, opening the film in its
   window (film.js shows it). A phone has the round pop-up in the corner instead, because the hero's
   height there is measured to keep the headline on its dark ground (see the next block). */
.hero-watch:not([hidden]) {
  display: inline-flex; align-items: center; gap: .65rem; min-height: 2.75rem; padding: 0 .2rem;
  font-family: var(--ui); font-size: .88rem; letter-spacing: .02em; color: #efe4d2;
}
.hero-watch:hover { color: #fff; }
.hero-watch-play { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 1px solid rgba(201, 171, 110, .75); transition: background-color .2s ease; }
.hero-watch:hover .hero-watch-play { background: rgba(201, 171, 110, .16); }
.hero-watch-play::before { content: ''; margin-left: .18rem; border-style: solid; border-width: .34rem 0 .34rem .55rem;
  border-color: transparent transparent transparent var(--gold-soft); }
/* When preorders close, under the buttons: the one date a customer asks for, and the days left once
   the script has counted them. Each part wraps as a whole, never mid-date. Every part carries its
   dot in front, and the line starts one dot early and is clipped by exactly that much, so whichever
   part begins a line — the first, or one a narrow screen has wrapped — never leads with a dot. */
.hero-launch {
  --dot: 2.1em;
  display: flex; flex-wrap: wrap; align-items: baseline; row-gap: .45rem;
  margin: 1.7rem 0 0 calc(-1 * var(--dot)); clip-path: inset(0 0 0 var(--dot));
  font-family: var(--display); font-size: .7rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-soft);
}
.hero-launch > * { white-space: nowrap; }
.hero-launch > *::before { content: '·'; display: inline-block; width: var(--dot); letter-spacing: 0; text-align: center; color: rgba(201, 171, 110, .75); }
.hero-launch time { color: #f7f0e3; }
/* the mockup's own quiet line, bottom left */
.hero-note {
  position: absolute; left: var(--gutter); bottom: clamp(1.5rem, 3vw, 2.5rem); margin: 0;
  font-family: var(--display); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.3em;
  text-transform: uppercase; line-height: 2; color: rgba(226, 214, 189, 0.5);
}

@media (max-width: 900px) {
  /* The phone is served its own portrait cut of the same photograph — the board in the upper half,
     the table diffused downward into dark ground beneath it — so the hero can be the whole screen
     here too, with the words on that ground rather than in a block underneath a band. */
  .hero {
    min-height: 100svh; align-items: end; align-content: end;
    padding: calc(var(--header-h) + 1.25rem) 0 clamp(2.4rem, 8vw, 3.6rem);
  }
  .hero-art { object-position: 50% 30%; }
  .hero::before {
    background:
      linear-gradient(180deg, rgba(11, 8, 6, .6) 0%, rgba(11, 8, 6, .12) 12%, rgba(11, 8, 6, 0) 26%,
                              rgba(11, 8, 6, .58) 42%, rgba(11, 8, 6, .86) 56%, rgba(11, 8, 6, .94) 72%,
                              rgba(11, 8, 6, .96) 100%);
  }
  .hero-copy { width: auto; margin-inline: var(--gutter); padding-right: 0; }
  .hero-copy .eyebrow { font-size: 0.62rem; letter-spacing: 0.16em; }
  .hero-copy .eyebrow::after { margin-top: 0.85rem; }
  .hero h1 { margin-top: 1.1rem; }
  .hero-sub { margin-top: 0.85rem; }
  .hero .lead { max-width: none; margin-top: 1.1rem; margin-bottom: 1.7rem; }
  .hero-note { display: none; }
}
@media (max-width: 520px) {
  .hero-actions { display: grid; width: 100%; }
  .hero-actions .btn { width: 100%; }
  /* A phone stacks the two buttons, and launch day under them is that same height again — enough to
     lift the headline off its dark ground and onto the board (measured from 320×568 to 430×932). So
     on a phone launch day takes the second button's row: "How it works" only scrolls to the very next
     band, which is one swipe away and also "How to play" in the menu. */
  .hero-actions .btn-line { display: none; }
  .hero-actions .hero-watch { display: none; }
}


/* ---------------------------------------------------------------- three rooms */
.rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--hair);
  width: 100%; max-width: 78rem; margin-inline: auto; padding-inline: var(--gutter); }
.room { padding: clamp(2.2rem, 3.5vw, 3.4rem) clamp(1.4rem, 2.4vw, 2.6rem); border-right: 1px solid var(--hair); }
.room:last-child { border-right: 0; }
.room-name { font-family: var(--display); font-size: .74rem; font-weight: 600; letter-spacing: .24em;
  text-transform: uppercase; color: var(--wine); }
.room h3 { margin: 1rem 0 .85rem; font-family: var(--text); font-size: 1.5rem; text-transform: none;
  letter-spacing: 0; line-height: 1.2; }
.room p { font-size: 1rem; color: var(--ink-2); }
.room img { margin-top: 1.8rem; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: sepia(.18) saturate(.92); }

/* ---------------------------------------------------------------- your turn
   What replaced the sample round. It answers the question the section above it leaves open —
   "resolve the space you land on", but which spaces? — and the four colours are the board's own,
   sampled off the artwork rather than guessed: burgundy #512c21, beige #e0d8d0, blue #2f293e,
   charcoal #373431. Every word of it is the rulebook's. */
.turn-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: end; margin-bottom: clamp(2rem, 4vw, 3.2rem);
}
/* the second column has a floor of 22rem, so below about 900 the heading is squeezed into a sliver
   and the note lands on top of it — one column from there down */
@media (max-width: 900px) { .turn-head { grid-template-columns: 1fr; align-items: start; } }
.spaces { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.space { display: grid; gap: .5rem; align-content: start; padding: clamp(1.5rem, 2.6vw, 2.1rem); background: var(--cream); }
.space-swatch { width: 2.6rem; height: .5rem; display: block; }
.space[data-space='trivia'] .space-swatch { background: #512c21; }
.space[data-space='wisdom'] .space-swatch { background: #e0d8d0; box-shadow: inset 0 0 0 1px var(--hair); }
.space[data-space='favor'] .space-swatch { background: #2f293e; }
.space[data-space='icon'] .space-swatch { background: #373431; }
.space-colour {
  font-family: var(--display); font-size: .64rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted); margin-top: .35rem;
}
.space h3 { font-family: var(--text); font-size: 1.5rem; line-height: 1.15; color: var(--ink); }
.space > p:last-of-type { font-family: var(--text); font-size: 1.05rem; line-height: 1.5; color: var(--ink-2); }
/* The five icons had lived inside the charcoal card, which made that card twice the height of the
   other three and left the row looking half empty. They get their own strip under the four, where
   they read as the set they are. */
.space-icons {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--hair); border: 1px solid var(--hair); border-top: 0;
}
.space-icons li { display: flex; align-items: center; gap: .85rem; padding: clamp(1rem, 1.8vw, 1.35rem) clamp(1.1rem, 2vw, 1.5rem); background: var(--cream-2); }
.space-icons img { width: 30px; height: 30px; object-fit: contain; flex: none; }
.space-icons span { display: grid; gap: .15rem; font-family: var(--ui); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.space-icons b { font-family: var(--text); font-size: 1.02rem; letter-spacing: 0; text-transform: none; font-weight: 400; line-height: 1.3; color: var(--ink-2); }
@media (min-width: 640px) { .space-icons { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) {
  .space-icons { grid-template-columns: repeat(5, 1fr); }
  /* two auto rows in a stretched cell drift apart when one description wraps and another does not */
  .space-icons li { display: grid; align-content: start; justify-items: start; gap: .7rem; }
}
.turn-foot { margin-top: clamp(1.6rem, 3vw, 2.4rem); font-family: var(--text); font-size: 1.02rem; color: var(--muted); }
@media (min-width: 760px) { .spaces { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .spaces { grid-template-columns: repeat(4, 1fr); } }

/* ---------------------------------------------------------------- what arrives */
.arrives { position: relative; color: #f0e7d6; }
.arrives-walnut { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.arrives-shade { position: absolute; inset: 0; background: rgba(22, 17, 13, .74); }
.arrives-inner { position: relative; }
.arrives .display { color: #f6efe0; }
.arrives-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.arrives-stack { position: relative; aspect-ratio: 5 / 4; }
.arrives-stack img { position: absolute; border: 1px solid rgba(201, 171, 110, .45); box-shadow: 0 28px 60px -24px rgba(0, 0, 0, .8); }
.arrives-board { width: 72%; top: 0; left: 0; rotate: -3deg; }
.arrives-card { width: 26%; bottom: 2%; left: 46%; rotate: 5deg; }
.arrives-trivia { width: 24%; bottom: 14%; right: 0; rotate: -7deg; }
/* build:box-images — written by tools/build-box-images.mjs (npm run build:box). Until a picture arrives,
   its frame shows a soft preview of it, and the band is already the colour of the walnut it waits for. */
.arrives { background-color: #472b20; }
.arrives-board { background: url(data:image/webp;base64,UklGRsoBAABXRUJQVlA4IL4BAAAQDwCdASpAAEAAPp1CmEklpCIhMBQMALATiWcAwv+xbw/uR9P9sxjX0xrMF/gyhFh32tYN9r9ItqrNNTIPTmAzk4sZD2wgxq8zLNiB/arJ2CC/EDhzNl5y8uTxIVQD0rbgUHbilSU3uUMRrxZl3bJXVJcAZ33EsGAnL+UYnSd+2EAA/vm2f9ujRvbk5x/HivDVjS0lHgjDQ4K95mRd8jfWfd2Wipzbm3H6jQjn73Bn3ruRf2mGfAgI2wWu9GNeZkmMkU+VehqBcMSYJGjnuGnUV2JbBzASAs8w3Agiu43c4Yh1ArhYeOM6FFREr63Ycf0hysH/9Z8z/kn0kpdwX2kMr5ds91gd0ifMCLZOrAFiOma/dJ7y+mG1XBmy7KcCYvOHPglOKp7vAhF5qVffBavkeFw4yWmAzJBZQBTV79h+6idaePWFjdzdVOpw5yXdnxsE0xr/2nSZWQQYtK95z2XyVULYISMkhK9m465sopgEGRy5LFWc1faR3+s7tsA8Qy+Ccq3lHGFwhiO65eZ7+L65GD/gLMQaP3LqdQcYUEDnPWnqvoLECCsMDYS9Paem4BATVwjVpKk03Lh/ysboAA==) 0 0 / 100% 100% no-repeat content-box; }
.arrives-card { background: url(data:image/webp;base64,UklGRuAAAABXRUJQVlA4INQAAACwBgCdASogADAAPp1InUslpCKhqrgIALATiWMAs7OmgRvHLZU/Z1koVeuslvQMWwistB/XudYr0vwp0ZxvAAD+9dorefMXbm9aSsH8+nbWHO/J91uzRiKkuHUdfAbf2XIPtSHGenR0diEmRWgZaU2V5TVgAeiN5M7uGHpdL5WU96oboa3Q6WuKa+qpaaStUwLbhQjngr1Z9Iy9uPIMmvjclawx66lAkBgfulk4eYze3zv1CcM1S2MK5tha6puDNYBKH5CGIrsX9U0B4XXT95fN0IAAAA==) 0 0 / 100% 100% no-repeat content-box; }
.arrives-trivia { background: url(data:image/webp;base64,UklGRswAAABXRUJQVlA4IMAAAAAQBwCdASogAC0APp1Gm0mlpCIhMBVYALATiWUAwFeOgJuuvTCvjLlg57VflNmWdu4P3VtFd6j1Ej4EIpCJIOvvAAD+93kAfEI9MG/c1qXE0EAtfi5+m8h1PUFocQfvheOZuhtGG3hGYeShyuw5HUwuYTm82XMbEtY4Sd7W1kA/lX0dWcaL3hp8un2X2pa2VwGFlIc/0PUFEbu5M3qdK9qUvySsogInqrdyD4o6iynm9yG6Pwv+RoGMwndmCSTAAAA=) 0 0 / 100% 100% no-repeat content-box; }
/* end build:box-images */
.arrives-list { display: grid; gap: 1.35rem; }
.arrives-list div { display: grid; grid-template-columns: minmax(4.5rem, auto) 1fr; gap: 1rem; align-items: baseline;
  padding-bottom: 1.35rem; border-bottom: 1px solid rgba(201, 171, 110, .22); }
.arrives-list div:last-child { border-bottom: 0; padding-bottom: 0; }
.arrives-list b { font-family: var(--display); font-size: .72rem; font-weight: 600; letter-spacing: .1em; color: var(--gold-soft); }
.arrives-list p { color: #dccfb8; font-size: 1.02rem; }
.arrives-list strong { color: #f4ecdb; font-weight: 400; }

/* ---------------------------------------------------------------- the cellar
   Built to the client's own poster: the still life bleeding in from the left, a column of type
   over the dark, gold diamond rules between the movements, and the two decks split by a hairline.
   The marginal lines sit in the outer margins and step out of the way when there is no room. */
.cellar { overflow: hidden; background: var(--ground); }
.cellar-plate {
  position: absolute; left: 0; top: 0; z-index: 0;
  width: clamp(230px, 33%, 540px); height: 100%;
  object-fit: cover; object-position: 52% 52%;
  filter: brightness(1.14) saturate(1.06);
}
.cellar-shade {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(22, 17, 13, 0) 0%,
    rgba(22, 17, 13, 0) 12%,
    rgba(22, 17, 13, .42) 21%,
    rgba(22, 17, 13, .9) 30%,
    rgba(22, 17, 13, .97) 36%,
    rgba(22, 17, 13, .97) 100%);
}
.cellar-inner { position: relative; z-index: 1; }

.cellar-inner {
  width: min(100% - 2 * var(--gutter), 39rem);
  margin-left: max(var(--gutter), 40%); margin-right: var(--gutter);
  text-align: center; color: #f2e9d8;
}
.cellar-mark { height: 46px; width: auto; margin-inline: auto; }
.cellar-brand {
  margin-top: .95rem; font-family: var(--display); font-size: .8rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: #f4ecdb;
}
.cellar-head { margin-top: 1.1rem; color: #f7f0e2; font-size: clamp(1.95rem, 3.5vw, 3rem); }
.cellar-head em { color: #f0d59c; font-style: normal; }
.cellar-sub { margin-top: .75rem; font-style: italic; font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: #e9dcc2; }

/* the gold rule with a diamond at its centre, the poster's own divider */
.diamond { display: flex; align-items: center; justify-content: center; gap: .85rem; margin: 1.7rem 0; }
.diamond::before, .diamond::after {
  content: ''; height: 1px; width: clamp(2.5rem, 8vw, 6rem); background: rgba(201, 171, 110, .55);
}
.diamond span { width: 5px; height: 5px; rotate: 45deg; background: var(--gold-soft); }

.cellar-lead { margin-inline: auto; max-width: 33rem; color: #ded2bb; font-size: 1.04rem; }
.cellar-decks { display: grid; grid-template-columns: 1fr 1fr; margin-top: 2rem; text-align: center; }
.cellar-decks > div:first-child {
  border-right: 1px solid rgba(201, 171, 110, .3); padding-right: clamp(1rem, 2.4vw, 2rem);
}
.cellar-decks > div:last-child { padding-left: clamp(1rem, 2.4vw, 2rem); }
.cellar-decks b {
  display: block; font-family: var(--display); font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #f6efe0;
}
.cellar-decks span {
  display: block; margin-top: .3rem; font-family: var(--display); font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-soft);
}
.cellar-decks p { margin-top: .95rem; font-size: .97rem; line-height: 1.62; color: #dccfb8; }
.cellar-count {
  font-family: var(--display); font-size: clamp(1.05rem, 1.8vw, 1.45rem); font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: #f6efe0;
}
.cellar-close {
  margin-top: .6rem; font-family: var(--display); font-size: .72rem; letter-spacing: .2em;
  text-transform: uppercase; color: #c6b596;
}
.bank-open {
  margin-top: 1.9rem; padding-bottom: .35rem;
  font-family: var(--display); font-size: .76rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-soft); border-bottom: 1px solid rgba(201, 171, 110, .5);
  transition: color .22s ease, border-color .22s ease;
}
.bank-open:hover { color: #f2d9a4; border-color: #f2d9a4; }

/* ---------------------------------------------------------------- the table */
.table-band { position: relative; color: #f2e9d8; display: grid; align-items: center; min-height: min(64svh, 620px); }
.table-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.table-shade { position: absolute; inset: 0;
  background:
    radial-gradient(58% 68% at 50% 40%, rgba(22, 17, 13, .9), rgba(22, 17, 13, .32) 72%),
    linear-gradient(180deg, rgba(22, 17, 13, .44), rgba(22, 17, 13, .8)); }
.table-inner { position: relative; text-align: center; max-width: 40rem; margin-inline: auto; }
.table-inner .display { color: #f7f0e2; }
.table-inner .flourish { justify-content: center; }
.table-inner p { color: #e0d5c0; }

/* ---------------------------------------------------------------- questions */
.qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.6rem) clamp(2.5rem, 6vw, 5rem); margin-top: clamp(2rem, 3.5vw, 3rem); }
.qa > div { border-top: 1px solid var(--hair); padding-top: 1.4rem; }
.qa dt { font-family: var(--display); font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .7rem; }
.qa dd { font-size: 1.02rem; color: var(--ink-2); }
.qa a { color: var(--wine); border-bottom: 1px solid currentColor; }

/* ---------------------------------------------------------------- the last pour */
.buy { position: relative; padding-bottom: clamp(9rem, 13vw, 13rem); }
.buy-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.buy-inner > * { min-width: 0; }
.buy-card { border: 1px solid var(--hair); padding: clamp(1.8rem, 3vw, 2.6rem); background: var(--cream-2); }
.price-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem;
  padding-bottom: 1.2rem; border-bottom: 1px solid var(--hair); }
/* what it is, over the price at every width: since the launch price stands struck through beside the
   preorder one (2026-09-23), the two no longer fit beside the label in the card, and on a desktop the
   price ran past the card's inner edge while the label broke over three lines */
.price-row span:first-child { font-family: var(--ui); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.price { font-family: var(--display); font-size: clamp(2.1rem, 3.4vw, 2.7rem); color: var(--ink); white-space: nowrap; }
.price small { font-size: .38em; letter-spacing: .1em; color: var(--muted); }
/* the price it is down from, struck through and labelled for what it is (2026-10-14: "Planned launch
   price", never "Was"): a line of its own under the price, in the card's label voice */
.price-launch { margin-top: .9rem; font-family: var(--ui); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.price-launch s { margin-left: .35em; font-size: 1.15em; letter-spacing: .04em; text-decoration-thickness: 1px; }
.price-note { margin-top: .35rem; font-family: var(--ui); font-size: .8rem; letter-spacing: .02em; color: var(--wine); }
/* when preorders close, between the price and the facts: the date large enough to find, how far away it
   is, and when the first games are expected to ship */
.buy-launch { display: grid; gap: .32rem; padding: 1.15rem 0 1.2rem; border-bottom: 1px solid var(--hair); }
.buy-launch p { margin: 0; }
/* the price row's own arrangement: what it is on the left, the days left on the right */
.buy-launch-label { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem 1rem;
  font-family: var(--ui); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.buy-launch-label [data-launch-countdown] { color: var(--wine); white-space: nowrap; }
/* one line down to a 320px screen, so the day never breaks away from its date */
.buy-launch-date { font-family: var(--display); font-size: clamp(.875rem, 4.4vw, 1.12rem); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.buy-launch-note { font-family: var(--ui); font-size: .86rem; color: var(--ink-2); }
.buy-facts { display: grid; gap: .65rem; margin: 1.3rem 0 1.6rem; }
.buy-facts li { font-family: var(--ui); font-size: .88rem; color: var(--ink-2); padding-left: 1.1rem; position: relative; text-wrap: pretty; }
.buy-facts li::before { content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; rotate: 45deg; background: var(--gold); }
/* how many games (2026-10-02): chosen here because the shipping on offer depends on it. The label reads
   like the card's other labels; the stepper is one bordered object, its buttons a thumb's width */
.buy-qty { margin: 0 0 1.4rem; }
.buy-qty-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; }
.buy-qty-label { font-family: var(--ui); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--hair); background: var(--cream); }
.stepper-btn { width: 2.75rem; min-height: 2.75rem; font-family: var(--ui); font-size: 1.2rem; line-height: 1; color: var(--wine);
  transition: background-color .18s ease; }
.stepper-btn:hover:not([aria-disabled='true']) { background: rgba(107, 30, 46, .07); }
.stepper-btn:focus-visible { outline-offset: -2px; }
.stepper-btn[aria-disabled='true'] { color: var(--hair); cursor: default; }
.stepper-value { display: grid; place-items: center; min-width: 2.9rem; padding: 0 .4rem; border-inline: 1px solid var(--hair);
  font-family: var(--display); font-size: 1.15rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.buy-qty-note { margin-top: .6rem; font-family: var(--ui); font-size: .8rem; color: var(--muted); text-wrap: pretty; }
.buy-qty-note[data-state='free'] { color: var(--wine); }
.buy-qty-note a { color: inherit; border-bottom: 1px solid currentColor; }
/* with JavaScript off: an order of three or more has a link of its own */
.buy-three { margin: 0 0 1rem; font-family: var(--ui); font-size: .84rem; color: var(--ink-2); }
.buy-three a { color: var(--wine); border-bottom: 1px solid currentColor; }
.buy-card .btn { width: 100%; }
.code-toggle { display: block; width: 100%; margin-top: 1rem; font-family: var(--ui); font-size: .84rem; color: var(--muted); text-align: center; }
.code-form { margin-top: 1rem; display: grid; gap: .6rem; }
.code-form input { width: 100%; padding: .85rem 1rem; border: 1px solid var(--hair); background: var(--cream);
  font-family: var(--ui); font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; }
.code-form input:focus-visible { border-color: var(--wine); outline-offset: 0; }
.code-say { font-family: var(--ui); font-size: .8rem; color: var(--muted); min-height: 1.2rem; }
.code-say[data-state='ok'] { color: var(--wine); }
.code-say[data-state='bad'] { color: var(--wine-bright); }
.buy-offer { display: block; margin-top: 1.2rem; text-align: center; font-family: var(--ui); font-size: .8rem;
  color: var(--muted); border-bottom: 1px solid var(--hair); padding-bottom: .3rem; }
.buy-offer:hover { color: var(--wine); border-color: var(--wine); }
/* what the shop says when it cannot open a checkout: the first batch is spoken for, preorders have
   closed, or something went wrong — said in the card, where the button is (buy.js) */
.buy-say { margin: .9rem 0 0; font-family: var(--ui); font-size: .86rem; color: var(--ink-2); text-wrap: pretty; }
.buy-say[data-state='bad'] { color: var(--wine-bright); }
.buy-say[data-state='closed'] { color: var(--wine); }
.buy-card .btn[aria-disabled='true'] { opacity: .55; cursor: default; }
.buy-policy { margin: .9rem 0 0; text-align: center; font-family: var(--ui); font-size: .78rem; }
.buy-policy a { color: var(--muted); border-bottom: 1px solid var(--hair); padding-bottom: .15rem; }
.buy-policy a:hover { color: var(--wine); border-color: var(--wine); }
/* the sweepstakes, while it is open (tools/open-sweepstakes.mjs writes it), with its disclosure */
.buy-sweeps { margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--hair); font-family: var(--ui); font-size: .78rem; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.buy-sweeps a { color: var(--wine); border-bottom: 1px solid currentColor; }
.buy-sweeps a:first-child { font-weight: 600; }

/* ---------------------------------------------------------------- partners + footer */
.partners {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--cream-2); border-top: 1px solid var(--hair);
}
.partners a { display: block; padding: clamp(2.2rem, 4vw, 3.4rem) var(--gutter); border-right: 1px solid var(--hair);
  transition: background-color .22s ease; }
.partners a:last-child { border-right: 0; }
.partners a:hover { background: var(--cream-3); }
.partners h3 { margin: .8rem 0 .5rem; font-family: var(--text); font-size: 1.5rem; text-transform: none; letter-spacing: 0; }
.partners p { font-family: var(--ui); font-size: .84rem; color: var(--muted); }
/* the eyebrow is a <p> too, so the arrow goes on the last one — the call to action */
.partners p:last-of-type::after { content: ' \2192'; color: var(--wine); transition: padding-left .2s ease; }
.partners a:hover p:last-of-type::after { padding-left: .35rem; }

/* ---------------------------------------------------------------- welcome dialog */
.welcome { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1.25rem; }
.welcome-scrim { position: absolute; inset: 0; background: rgba(16, 11, 9, .78); backdrop-filter: blur(3px); }
.welcome-card { position: relative; display: grid; grid-template-columns: 1fr 1.15fr;
  width: min(100%, 54rem); background: var(--cream); border: 1px solid var(--gold);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7); overflow: hidden; }
.welcome-art { position: relative; background: var(--wine-deep); }
.welcome-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.welcome-body { padding: clamp(2rem, 3.5vw, 3rem) clamp(1.6rem, 3vw, 2.8rem); text-align: center; }
.welcome-body .wordmark { display: inline-flex; align-items: center; gap: .6rem;
  font-size: .8rem; letter-spacing: .22em; color: var(--ink-2); }
.welcome-body .wordmark img { height: 1.7rem; width: auto; flex: none; }
.welcome-key { display: flex; align-items: center; justify-content: center; gap: .8rem; margin: 1rem 0 1.5rem; }
.welcome-key::before, .welcome-key::after { content: ''; height: 1px; width: 3.2rem; background: var(--gold); }
.welcome-key svg { width: 15px; color: var(--gold); }
.welcome-body h2 { font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.08;
  color: var(--wine); text-transform: none; letter-spacing: 0; }
.welcome-body > p { margin-top: 1rem; font-size: 1.05rem; color: var(--ink-2); }
.welcome-form { display: grid; gap: .7rem; margin-top: 1.6rem; }
.welcome-form input[type='email'] { width: 100%; padding: 1rem 1.1rem; border: 1px solid var(--hair);
  background: #fbf7ee; font-family: var(--ui); font-size: 1rem; text-align: center; }
.welcome-form input[type='email']:focus-visible { border-color: var(--wine); outline-offset: 0; }
.welcome-fine { font-family: var(--ui); font-size: .78rem; color: var(--muted); }
.welcome-no { font-family: var(--ui); font-size: .86rem; color: var(--muted);
  border-bottom: 1px solid var(--hair); padding-bottom: .2rem; margin-top: .4rem; }
.welcome-no:hover { color: var(--wine); border-color: var(--wine); }
.welcome-x { position: absolute; top: .8rem; right: 1rem; z-index: 2; font-size: 1.6rem; line-height: 1;
  color: var(--muted); padding: .3rem .5rem; }
.welcome-x:hover { color: var(--wine); }
.welcome-say { font-family: var(--ui); font-size: .84rem; min-height: 1.2rem; color: var(--muted); }
.welcome-say[data-state='bad'] { color: var(--wine-bright); }
.welcome-code { margin: .4rem 0 1rem; padding: 1rem; border: 1px dashed var(--gold);
  font-family: var(--display); font-size: clamp(1.3rem, 3.5vw, 1.7rem); letter-spacing: .22em; color: var(--wine); }
body.welcome-open { overflow: hidden; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .arrives-grid { grid-template-columns: 1fr; }
  .buy-inner { grid-template-columns: 1fr; }
  .buy-card { max-width: 26rem; }
}
@media (max-width: 860px) {
  .rooms { grid-template-columns: 1fr; }
  .room { border-right: 0; border-bottom: 1px solid var(--hair); }
  .room:last-child { border-bottom: 0; }
  .cellar-inner { margin-left: var(--gutter); }
  .cellar-plate { width: 100%; object-position: 50% 30%; opacity: .34; }
  .cellar-shade { background: linear-gradient(180deg, rgba(22, 17, 13, .74), rgba(22, 17, 13, .91)); }
  .qa { grid-template-columns: 1fr; }
  .partners { grid-template-columns: 1fr; }
  .partners a { border-right: 0; border-bottom: 1px solid var(--hair); }
  .welcome-card { grid-template-columns: 1fr; max-width: 26rem; }
  .welcome-art { height: 12rem; }
  .welcome-art img { object-position: 50% 22%; }
}
/* the narrowest phones: the button's label on one line inside the card's padding */
@media (max-width: 360px) {
  .buy-card .btn { padding-inline: .9rem; letter-spacing: .14em; }
}
@media (max-width: 520px) {
  .buy { padding-bottom: 8rem; }
}

/* ---------------------------------------------------------------- the varietal bank
   Fifty-two cards is too much to unroll inside a section, so it opens in its own window. Native
   <dialog>, which brings the backdrop, the escape key and the top layer with it. Split by deck
   rather than run as one list: that is how the cards are actually divided, and it halves what you
   have to read at once. */
.bank-dialog {
  width: min(100% - 2rem, 54rem); max-height: min(90svh, 54rem); padding: 0; border: 0;
  background: transparent; color: var(--ink); overflow: visible;
}
.bank-dialog::backdrop { background: rgba(16, 11, 9, .8); backdrop-filter: blur(3px); }
.bank-card {
  position: relative; max-height: inherit; display: flex; flex-direction: column;
  padding: clamp(1.8rem, 4vw, 3rem) clamp(1.4rem, 3.5vw, 3rem) clamp(1.4rem, 3vw, 2.2rem);
  background: var(--cream); border: 1px solid var(--gold);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7); text-align: center;
}
.bank-card .eyebrow { color: var(--gold); }
.bank-card h2 { margin-top: .8rem; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.bank-card .diamond { margin: 1.1rem 0; }
.bank-note { font-size: .98rem; color: var(--ink-2); }
.bank-x {
  position: absolute; top: .5rem; right: .8rem; z-index: 2;
  font-size: 1.7rem; line-height: 1; color: var(--muted); padding: .3rem .5rem;
}
.bank-x:hover { color: var(--wine); }

.bank-search {
  display: flex; align-items: center; gap: .7rem; margin: 1.4rem auto 0; width: min(100%, 22rem);
  padding: .7rem .95rem; border: 1px solid var(--hair); background: #fbf7ee;
}
.bank-search:focus-within { border-color: var(--wine); }
.bank-search svg { width: 17px; height: 17px; color: var(--muted); flex: none; }
.bank-search input {
  width: 100%; border: 0; background: none; outline: none;
  font-family: var(--ui); font-size: .95rem;
}

.bank-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 2.4rem);
  margin-top: 1.6rem; padding-top: 1.4rem; padding-bottom: 1.2rem; border-top: 1px solid var(--hair);
  overflow-y: auto; overscroll-behavior: contain; text-align: left;
  mask-image: linear-gradient(#000 calc(100% - 2.2rem), transparent);
  -webkit-mask-image: linear-gradient(#000 calc(100% - 2.2rem), transparent);
}
.bank-cols:not(:hover) { scrollbar-width: thin; }
.bank-cols h3 {
  font-family: var(--display); font-size: .95rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--wine);
}
.bank-cols h3 span {
  display: block; margin-top: .3rem; font-family: var(--ui); font-size: .72rem;
  letter-spacing: .06em; text-transform: none; color: var(--muted);
}
.bank-cols ul { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.bank-cols li {
  font-family: var(--ui); font-size: .86rem; color: var(--ink-2);
  border: 1px solid var(--hair); padding: .36rem .68rem; background: #fbf7ee;
}
.bank-cols li[data-hit] { border-color: var(--wine); color: var(--wine); background: rgba(107, 30, 46, .06); }
.bank-status {
  margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--hair);
  font-family: var(--ui); font-size: .78rem; color: var(--muted);
}
body.bank-open-lock { overflow: hidden; }
@media (max-width: 620px) {
  .bank-cols { grid-template-columns: 1fr; gap: 1.6rem; }
  .bank-card { text-align: center; }
}

/* The opening has to land whole on the first screen, so on a short one the hero tightens rather
   than pushing the buttons under the fold. */
@media (max-height: 820px) and (min-width: 1081px) {
  .hero { padding-block: 2rem 2.5rem; }
  .hero h1 { font-size: clamp(1.9rem, 4.1vw, 3.4rem); margin-top: 1.1rem; }
  .hero-sub { font-size: clamp(1.2rem, 2.3vw, 1.6rem); margin-top: 0.8rem; }
  .hero .lead { margin-top: 1rem; margin-bottom: 1.6rem; font-size: 1.02rem; }
  .hero-launch { margin-top: 1.2rem; }
}
/* and on a short phone — an SE is 568 tall — the picture gives up the height instead of the words */
@media (max-height: 700px) and (max-width: 900px) {
  /* A short phone is WIDER than the picture is, proportionally, so `cover` crops the height here
     and takes the diffused ground with it. The crop is pulled down to keep some of it, and the
     eyebrow — a supporting line, and the only one that was ever tight against the board — steps
     aside so the headline has the room and the contrast. */
  .hero { padding-bottom: 1.5rem; }
  .hero-art { object-position: 50% 62%; }
  .hero-copy .eyebrow { display: none; }
  .hero h1 { margin-top: 0; }
  .hero h1 { font-size: 2.15rem; margin-top: 0.85rem; }
  .hero-sub { font-size: 1.15rem; margin-top: 0.65rem; }
  .hero .lead { margin-top: 0.75rem; margin-bottom: 1.1rem; font-size: 0.96rem; }
  .hero-launch { margin-top: 0.9rem; }
}