/* =========================================================
   Book-A-Table: "The Library"
   Palette pulled from the logo (teal line-art, mustard books,
   tomato) laid on warm paper. Fraunces for display, Newsreader
   for reading, Josefin Sans for the logo's spaced capitals.
   ========================================================= */

:root {
  color-scheme: light;
  --paper: #f4ecdc;
  --paper-2: #ebe0c9;
  --paper-3: #e2d4b6;
  --card: #fbf7ee;
  --ink: #1d2a2a;
  --ink-2: #4a5654;
  --ink-3: #6f7a77;
  --teal: #2f8f8c;
  --teal-deep: #1d5b59;
  --teal-ink: #143f3e;
  --mustard: #e3d64c;
  --mustard-deep: #c9b92c;
  --tomato: #c4553b;
  --wood: #7a5536;
  --wood-hi: #9a6e48;
  --wood-dark: #4b321f;

  --f-display: "Fraunces", Georgia, serif;
  --f-body: "Newsreader", Georgia, serif;
  --f-label: "Josefin Sans", "Futura", system-ui, sans-serif;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
  --radius: 14px;
  --shadow-1: 0 1px 2px rgb(40 25 10 / .08), 0 6px 18px rgb(40 25 10 / .08);
  --shadow-2: 0 2px 4px rgb(40 25 10 / .12), 0 18px 40px rgb(40 25 10 / .18);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper) var(--grain);
  color: var(--ink);
  font: 400 clamp(1.05rem, .98rem + .3vw, 1.2rem)/1.6 var(--f-body);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 500; line-height: 1.05; letter-spacing: -.015em; margin: 0 0 .4em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5.6rem); font-variation-settings: "SOFT" 60, "WONK" 1; }
h2 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.3rem); font-variation-settings: "SOFT" 50; }
h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); }
p { margin: 0 0 1em; text-wrap: pretty; }
cite { font-style: italic; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--mustard); color: var(--ink); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: var(--paper); padding: .6em 1em; border-radius: 8px; }
.skip:focus { left: 8px; }

.kicker {
  display: block;
  font: 600 .78rem/1.2 var(--f-label);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin: 0 0 1rem;
}
.kicker--light { color: var(--mustard); }
.link { color: var(--teal-deep); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.link:hover { text-decoration-thickness: 2px; }

.btn {
  --b: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .75em 1.4em;
  border-radius: 999px; border: 1.5px solid var(--b);
  background: var(--b); color: var(--paper);
  font: 600 .86rem/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: transform .25s var(--ease), background .25s, color .25s, box-shadow .25s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgb(29 42 42 / .25); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--ghost-light { --b: rgb(255 255 255 / .7); background: transparent; color: #fff; }
.btn--ghost-light:hover { background: #fff; color: var(--ink); }
.btn--small { min-height: 40px; padding: .55em 1.1em; font-size: .74rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- header / footer ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem var(--gutter);
  background: rgb(244 236 220 / .86);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 1px solid rgb(29 42 42 / .08);
}
.home .site-head { position: fixed; inset: 0 0 auto; background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; transition: background .3s; }
.home .site-head.is-solid, .home.scrolled .site-head { background: rgb(244 236 220 / .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.site-head__logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; font: 600 .95rem/1 var(--f-label); letter-spacing: .26em; text-transform: uppercase; color: var(--teal-deep); }
.site-head__logo img { width: 26px; height: auto; }
.site-head__logo i { font-style: normal; color: var(--mustard-deep); }
.home:not(.scrolled) .site-head__logo { color: #fff; }
.home:not(.scrolled) .site-head__logo img { filter: brightness(0) invert(1); }
.site-head__nav { display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.8rem); }
.site-head__nav a:not(.btn) { font: 500 .8rem/1 var(--f-label); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; padding: .4em 0; border-bottom: 1.5px solid transparent; }
.site-head__nav a:not(.btn):hover, .site-head__nav a[aria-current] { border-color: currentColor; }
.home:not(.scrolled) .site-head__nav a:not(.btn) { color: #fff; }
.home:not(.scrolled) .site-head__nav .btn { --b: var(--mustard); color: var(--ink); }
@media (max-width: 760px) {
  .site-head__nav a:not(.btn) { display: none; }
  .site-head__logo span { font-size: .78rem; letter-spacing: .2em; }
}

.site-foot { background: var(--teal-ink) var(--grain); color: #e9e3d3; margin-top: 0; }
.site-foot__inner { max-width: var(--max); margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) var(--gutter) 2rem; display: grid; gap: 2.5rem; grid-template-columns: 1.4fr repeat(3, 1fr); }
.site-foot img { border-radius: 12px; background: #fff; padding: 6px; width: 96px; }
.site-foot h2 { font: 600 .74rem/1 var(--f-label); letter-spacing: .22em; text-transform: uppercase; color: var(--mustard); margin-bottom: 1rem; }
.site-foot nav, .site-foot__inner > div:last-child { display: flex; flex-direction: column; gap: .5rem; }
.site-foot a { text-decoration: none; opacity: .9; }
.site-foot a:hover { opacity: 1; text-decoration: underline; }
.site-foot__tag { font: italic 400 1.3rem/1.35 var(--f-display); margin-top: 1rem; max-width: 22ch; }
.site-foot__small { font-size: .9rem; opacity: .7; margin-top: .5rem; }
.site-foot__legal { text-align: center; font-size: .85rem; opacity: .6; padding: 1.2rem var(--gutter) 2rem; margin: 0; border-top: 1px solid rgb(255 255 255 / .08); }
@media (max-width: 860px) { .site-foot__inner { grid-template-columns: 1fr 1fr; } .site-foot__inner > div:first-child { grid-column: 1 / -1; } }

/* ---------- sections ---------- */
.section-head { max-width: 760px; margin: 0 auto clamp(2rem, 4vw, 3.5rem); text-align: center; padding: 0 var(--gutter); }
.section-head p:last-child { color: var(--ink-2); }
.page-head { max-width: 900px; margin: 0 auto; padding: clamp(3.5rem, 8vw, 7rem) var(--gutter) clamp(2rem, 4vw, 3rem); text-align: center; }
.page-head__lede { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); color: var(--ink-2); max-width: 60ch; margin-inline: auto; }

/* ---------- home hero ---------- */
.hero { position: relative; min-height: min(100svh, 980px); display: grid; align-items: end; color: #fff; isolation: isolate; overflow: hidden; background: var(--teal-ink); }
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__video { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { content: ""; position: absolute; inset: 0; z-index: 2; background:
  linear-gradient(90deg, rgb(15 35 35 / .72) 0%, rgb(15 35 35 / .35) 55%, transparent 80%),
  linear-gradient(180deg, rgb(20 63 62 / .55) 0%, rgb(20 63 62 / .1) 35%, rgb(15 30 30 / .78) 100%),
  radial-gradient(120% 80% at 10% 100%, rgb(15 30 30 / .6), transparent 60%); }
.hero__copy { max-width: var(--max); width: 100%; margin: 0 auto; padding: 8rem var(--gutter) clamp(3rem, 8vh, 6rem); }
.hero__title { font-size: clamp(3rem, 1.6rem + 6.5vw, 7.8rem); line-height: .95; margin-bottom: .3em; max-width: 12ch; }
.hero__title em { font-style: italic; color: var(--mustard); font-variation-settings: "SOFT" 100, "WONK" 1; }
.hero__lede { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); max-width: 46ch; color: rgb(255 255 255 / .9); margin-bottom: 2rem; }

/* ---------- the shelf ---------- */
.shelf-section { padding: clamp(4rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 5rem); }
.shelf {
  --bw: clamp(118px, 15vw, 188px);
  --plank: 30px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--bw) + 24px), 1fr));
  row-gap: clamp(2.5rem, 5vw, 3.5rem);
  perspective: 1400px;
}
.shelf__slot { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 1.5rem; }
/* each slot paints its own stretch of plank; adjacent slots join seamlessly */
.shelf__slot::after {
  content: ""; position: absolute; left: -1px; right: -1px; bottom: 0; height: var(--plank); z-index: 0;
  background:
    linear-gradient(180deg, var(--wood-hi) 0 3px, var(--wood) 3px 70%, var(--wood-dark)),
    var(--wood);
  box-shadow: 0 14px 18px -10px rgb(60 35 15 / .5);
}
.shelf__slot::before { /* back-of-shelf shadow on the wall */
  content: ""; position: absolute; left: 0; right: 0; bottom: var(--plank); height: 26px; z-index: 0;
  background: linear-gradient(0deg, rgb(70 45 20 / .16), transparent);
}
.shelf__label {
  position: relative; z-index: 1; height: var(--plank); margin: 0; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: .5em;
  font: 600 .64rem/1 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: #f6e9cf;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 .5rem;
}
.shelf__label small { font-size: inherit; opacity: .65; font-weight: 400; }
.shelf__label span { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) { .shelf__label small { display: none; } }

.shelf.will-reveal .shelf__slot .book { opacity: 0; transform: translateY(30px); }
.shelf.is-in .shelf__slot .book { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i) * 80ms); }

/* ---------- the 3D book ---------- */
.book { --w: var(--bw, 180px); --depth: 18px; position: relative; z-index: 1; display: block; width: var(--w); aspect-ratio: 2 / 3; text-decoration: none; color: inherit; perspective: 900px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.book__tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, -18deg)); transition: transform .6s var(--ease); }
.book__obj { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s var(--ease); }
.book__shadow { position: absolute; left: 6%; right: -4%; bottom: -6px; height: 14px; background: radial-gradient(closest-side, rgb(40 20 5 / .45), transparent); transform: translateZ(-20px); filter: blur(2px); }
.book:hover .book__obj, .book:focus-visible .book__obj { transform: translateY(-12px) translateZ(26px); }
.book:hover .book__tilt, .book:focus-visible .book__tilt { --ry: -28deg; }
.book:focus-visible { outline: none; }
.book:focus-visible .cover { outline: 3px solid var(--teal); outline-offset: 4px; }

/* pages block (right edge) */
.book__pages {
  position: absolute; top: 2%; bottom: 2%; right: 0; width: var(--depth);
  transform-origin: right center; transform: rotateY(90deg) translateX(calc(var(--depth) / 2)) translateZ(calc(var(--depth) / -2 + 1px));
  transform: translateX(calc(var(--depth) / 2)) rotateY(90deg);
  background: repeating-linear-gradient(90deg, #f7f0e1 0 1px, #e6dcc6 1px 2px), #efe6d2;
  box-shadow: inset 0 0 6px rgb(0 0 0 / .2);
}
/* inside first page, revealed when cover swings */
.book__inside {
  position: absolute; inset: 1.5% 1% 1.5% 0; transform: translateZ(-1px);
  background: #fbf6ea var(--grain); border-radius: 0 4px 4px 0;
  display: grid; place-items: center; padding: 14%;
  box-shadow: inset 8px 0 14px -8px rgb(0 0 0 / .25);
}
.book__inside span { font: italic 400 clamp(.75rem, .6rem + .4vw, 1rem)/1.35 var(--f-display); color: var(--ink-2); text-align: center; opacity: 0; transition: opacity .4s .25s; }

/* the cover face */
.cover {
  position: absolute; inset: 0; z-index: 2; overflow: hidden;
  transform-origin: left center; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 3px 7px 7px 3px;
  background: var(--c-bg); color: var(--c-ink);
  box-shadow: inset 4px 0 0 rgb(0 0 0 / .08), inset 9px 0 6px -6px rgb(0 0 0 / .35), inset -1px 0 0 rgb(255 255 255 / .25), var(--shadow-2);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 12% 10% 9%;
  transition: transform .65s cubic-bezier(.5, .05, .3, 1);
  container-type: inline-size;
}
.cover::after { /* hinge crease + sheen */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(0 0 0 / .18) 0 2.5%, rgb(255 255 255 / .22) 3.5%, transparent 6%),
    linear-gradient(115deg, rgb(255 255 255 / .16), transparent 40%);
}
.cover__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.cover__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--c-bg) 0%, color-mix(in srgb, var(--c-bg) 70%, transparent) 38%, transparent 62%, color-mix(in srgb, var(--c-bg) 85%, transparent) 100%); }
.cover__top { font: 600 6.5cqw/1 var(--f-label); letter-spacing: .25em; text-transform: uppercase; opacity: .85; }
.cover__title { font: 500 19cqw/0.95 var(--f-display); margin-top: 9%; letter-spacing: -.01em; text-wrap: balance; }
.cover__rule { width: 28%; height: 2px; background: var(--c-accent); margin: 7% 0 5%; }
.cover__author { font: italic 400 7.5cqw/1.2 var(--f-display); }
.cover__foot { margin-top: auto; font: 600 5.6cqw/1 var(--f-label); letter-spacing: .2em; text-transform: uppercase; opacity: .9; }

.book.is-opening .cover { transform: rotateY(-155deg); }
.book.is-opening .book__inside span { opacity: 1; }
.book.is-opening .book__obj { transform: translateY(-12px) translateZ(60px); }
.book.is-opening .book__tilt { --ry: -6deg; }
html.is-leaving main > *:not(:has(.is-opening)) { opacity: .4; transition: opacity .5s; }

/* ---- cover styles: each edition gets its own typographic treatment ---- */
/* Bridgerton: Regency script inside a gilt frame */
.cover--regency { padding-top: 16%; }
.cover--regency::before { content: ""; position: absolute; inset: 6%; border: 1.5px solid var(--c-accent); outline: 1px solid var(--c-accent); outline-offset: -6px; border-radius: 2px; pointer-events: none; }
.cover--regency .cover__title { font-family: "Pinyon Script", cursive; font-weight: 400; font-size: 24cqw; line-height: 1; margin-top: 12%; }
.cover--regency .cover__veil { background: linear-gradient(180deg, var(--c-bg) 0 42%, color-mix(in srgb, var(--c-bg) 30%, transparent) 70%, color-mix(in srgb, var(--c-bg) 90%, transparent)); }
/* Butter: bold mincho, vertical Japanese, butter-yellow block */
.cover--butter { align-items: flex-start; text-align: left; }
.cover--butter .cover__title { font-family: "Shippori Mincho B1", serif; font-weight: 800; font-size: 24cqw; text-transform: lowercase; letter-spacing: -.03em; margin-top: 6%; }
.cover__jp { position: absolute; right: 8%; top: 9%; writing-mode: vertical-rl; font: 800 8cqw/1 "Shippori Mincho B1", serif; letter-spacing: .25em; color: var(--c-accent); }
.cover--butter .cover__veil { background: linear-gradient(180deg, var(--c-bg) 0 45%, transparent 75%, color-mix(in srgb, var(--c-bg) 80%, transparent)); }
/* A Suitable Boy: marigold + maroon, Rozha display, jharokha arch window */
.cover--suitable .cover__title { font-family: "Rozha One", serif; font-weight: 400; font-size: 17cqw; line-height: 1; }
.cover--suitable .cover__img { inset: auto 14% 18% 14%; width: 72%; height: 44%; border-radius: 50% 50% 4px 4px / 34% 34% 4px 4px; border: 3px solid var(--c-accent); z-index: 0; }
.cover--suitable .cover__veil { display: none; }
.cover--suitable .cover__foot { position: relative; z-index: 1; }
.cover--suitable::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 10px, rgb(0 0 0 / .05) 10px 11px); pointer-events: none; }
/* Lessons in Chemistry: 1960s TV-kitchen retro, atom orbit */
.cover--chemistry { justify-content: flex-start; }
.cover--chemistry .cover__title { font-family: "DM Serif Display", serif; font-weight: 400; font-size: 17cqw; line-height: .95; }
.cover--chemistry .cover__title::before { content: ""; display: block; width: 34cqw; height: 14cqw; margin: 0 auto 6cqw; border: 2px solid var(--c-accent); border-radius: 50%; box-shadow: 0 0 0 0 transparent; transform: rotate(-25deg); }
.cover--chemistry .cover__veil { background: linear-gradient(180deg, var(--c-bg) 0 48%, transparent 78%, color-mix(in srgb, var(--c-bg) 80%, transparent)); }
/* Independence: Bengal lal-paar border (red on white) */
.cover--independence { box-shadow: inset 0 0 0 5cqw var(--c-accent), inset 0 0 0 6.2cqw #e8c46a, var(--shadow-2); padding-top: 15%; }
.cover--independence .cover__title { font-family: "Gloock", serif; font-weight: 400; font-size: 15cqw; letter-spacing: .01em; }
.cover--independence .cover__veil { background: linear-gradient(180deg, var(--c-bg) 0 44%, transparent 75%, color-mix(in srgb, var(--c-bg) 85%, transparent)); }
/* Yellowface collab: flat colour, heavy grotesk, no photo */
.cover--yellowface { justify-content: center; }
.cover--yellowface .cover__img { opacity: .0; }
.cover--yellowface .cover__veil { display: none; }
.cover--yellowface .cover__title { font-family: "Archivo Black", sans-serif; font-size: 13.5cqw; text-transform: uppercase; letter-spacing: -.02em; margin-top: 0; }
.cover--yellowface .cover__top { position: absolute; top: 10%; }
.cover--yellowface .cover__foot { position: absolute; bottom: 9%; }

/* Mystery: wrapped in kraft paper with twine */
.cover--mystery {
  background:
    radial-gradient(120% 90% at 30% 20%, rgb(255 255 255 / .12), transparent 60%),
    repeating-linear-gradient(35deg, rgb(0 0 0 / .025) 0 2px, transparent 2px 7px),
    #b88b5a var(--grain);
  color: #3a2614; justify-content: center; padding: 10%;
}
.cover__twine { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(90deg, transparent calc(62% - 2px), #e9dcc0 calc(62% - 2px) calc(62% + 2px), transparent calc(62% + 2px)),
  linear-gradient(180deg, transparent calc(38% - 2px), #e9dcc0 calc(38% - 2px) calc(38% + 2px), transparent calc(38% + 2px)); filter: drop-shadow(0 1px 1px rgb(0 0 0 / .3)); }
.cover__tag { position: relative; background: #fbf6ea; border-radius: 4px; padding: 10% 8% 9%; box-shadow: 0 3px 8px rgb(0 0 0 / .25); transform: rotate(-4deg); display: flex; flex-direction: column; gap: .35em; width: 86%; }
.cover__tag::before { content: ""; position: absolute; top: 8%; left: 50%; width: 7cqw; height: 7cqw; border-radius: 50%; background: #b88b5a; transform: translateX(-50%); box-shadow: inset 0 1px 2px rgb(0 0 0 / .4); }
.cover__tag em { font: 600 5.6cqw/1 var(--f-label); letter-spacing: .2em; text-transform: uppercase; font-style: normal; color: var(--tomato); margin-top: 8%; }
.cover__tag strong { font: italic 500 11cqw/1.05 var(--f-display); color: var(--ink); }
.cover__tag small { font: 400 6cqw/1.3 var(--f-body); color: var(--ink-2); }

/* sizes */
.book--hero { --w: min(360px, 70vw); }
.book--cta { --w: clamp(140px, 22vw, 220px); flex: none; }
.book--hero .book__tilt { --ry: -14deg; }

/* ---------- answer block (AEO) ---------- */
.answer { padding: clamp(3rem, 7vw, 6rem) var(--gutter); background: var(--card); border-block: 1px solid var(--paper-3); }
.answer__inner { max-width: 880px; margin: 0 auto; }
.answer__lead { font: 400 clamp(1.3rem, 1.05rem + 1vw, 1.9rem)/1.45 var(--f-display); font-variation-settings: "SOFT" 80; }
.answer__lead strong { font-weight: 600; color: var(--teal-deep); }

/* ---------- steps ---------- */
.steps { padding: clamp(4rem, 8vw, 7rem) var(--gutter); }
.steps__list { list-style: none; margin: 0 auto; padding: 0; max-width: var(--max); display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: s; }
.steps__item { background: var(--card); border: 1px solid var(--paper-3); border-radius: var(--radius); padding: 2rem 1.6rem 1.6rem; position: relative; box-shadow: var(--shadow-1); }
.steps__item:nth-child(2) { transform: translateY(1.5rem); }
.steps__item:nth-child(4) { transform: translateY(1.5rem); }
@media (max-width: 1040px) { .steps__item:nth-child(n) { transform: none; } }
.steps__n { font: 600 .74rem/1 var(--f-label); letter-spacing: .22em; text-transform: uppercase; color: var(--tomato); display: block; margin-bottom: 1rem; }
.steps__item h2, .steps__item h3 { font-size: clamp(1.35rem, 1.2rem + .6vw, 1.75rem); }
.steps__item p { color: var(--ink-2); margin: 0; font-size: 1.02rem; }
.steps__more { text-align: center; margin-top: 3.5rem; }
.steps--page { padding-top: 0; }

/* ---------- press ---------- */
.press { padding: clamp(4rem, 8vw, 7rem) var(--gutter); background: var(--teal-deep) var(--grain); color: #fff; }
.press__quote { max-width: 980px; margin: 0 auto; text-align: center; }
.press__quote blockquote { margin: 0; }
.press__quote p { font: italic 400 clamp(1.5rem, 1.1rem + 1.8vw, 2.7rem)/1.3 var(--f-display); font-variation-settings: "SOFT" 100; }
.press__quote figcaption { font: 600 .8rem/1.4 var(--f-label); letter-spacing: .18em; text-transform: uppercase; color: var(--mustard); }
.press__quote figcaption a { color: inherit; }
.press--list { background: var(--card); color: var(--ink); }
.press--list .press__quote + .press__quote { margin-top: 3rem; }
.press--list .press__quote figcaption { color: var(--teal-deep); }
.press--list h2 { text-align: center; }

/* ---------- sisters ---------- */
.sisters-teaser { max-width: var(--max); margin: 0 auto; padding: clamp(4rem, 8vw, 7rem) var(--gutter); display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.sisters-teaser__img img { border-radius: 200px 200px var(--radius) var(--radius); box-shadow: var(--shadow-2); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
@media (max-width: 800px) { .sisters-teaser { grid-template-columns: 1fr; } .sisters-teaser__img { max-width: 420px; } }
.sisters { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) clamp(4rem, 8vw, 7rem); }
.sisters__duo img { border-radius: var(--radius); box-shadow: var(--shadow-2); width: 100%; max-height: 80vh; object-fit: cover; }
.sisters__duo { margin: 0 0 clamp(2.5rem, 5vw, 4rem); }
.sisters__story { max-width: 68ch; margin: 0 auto 4rem; font-size: 1.15em; }
.sisters__story p:first-child::first-letter { float: left; font: 500 4.2em/.8 var(--f-display); margin: .08em .1em 0 0; color: var(--teal-deep); }
.sisters__pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); }
.sister img { border-radius: var(--radius); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; margin-bottom: 1.4rem; box-shadow: var(--shadow-1); }
@media (max-width: 700px) { .sisters__pair { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq-section { padding: clamp(4rem, 8vw, 7rem) var(--gutter); }
.faq { max-width: 860px; margin: 0 auto; border-top: 1px solid var(--paper-3); }
.faq__item { border-bottom: 1px solid var(--paper-3); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.3rem 0; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h3 { margin: 0; font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem); }
.faq__item summary::after { content: "+"; font: 300 1.8rem/1 var(--f-display); color: var(--teal-deep); transition: transform .3s var(--ease); flex: none; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__a { padding: 0 0 1.4rem; color: var(--ink-2); max-width: 68ch; }
.faq__a a { color: var(--teal-deep); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--mustard) var(--grain); padding: clamp(3.5rem, 7vw, 6rem) var(--gutter); overflow: hidden; }
.cta-band__inner { max-width: 1000px; margin: 0 auto; display: flex; align-items: center; gap: clamp(2rem, 6vw, 5rem); }
.cta-band h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem); }
.cta-band p { max-width: 48ch; color: #3b3a1c; }
.cta-band .kicker { color: var(--teal-ink); }
.cta-band .btn--ghost { --b: var(--ink); }
@media (max-width: 680px) { .cta-band__inner { flex-direction: column; text-align: center; } .cta-band .btn-row { justify-content: center; } .cta-band p { margin-inline: auto; } }

/* ---------- library ledger ---------- */
.ledger { max-width: 980px; margin: clamp(3rem, 6vw, 5rem) auto; padding: 0 var(--gutter); overflow-x: auto; }
.ledger__table { width: 100%; border-collapse: collapse; font-size: 1rem; min-width: 560px; }
.ledger__table th { font: 600 .7rem/1 var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); text-align: left; padding: .8rem .6rem; border-bottom: 2px solid var(--ink); }
.ledger__table td { padding: .9rem .6rem; border-bottom: 1px dashed var(--paper-3); }
.ledger__table td:first-child { font: 500 1rem/1 var(--f-display); color: var(--tomato); }
.ledger__table a { font: italic 500 1.15rem/1.2 var(--f-display); text-decoration: none; }
.ledger__table a:hover { text-decoration: underline; }

/* ---------- book page ---------- */
.bk { --tint: color-mix(in srgb, var(--c-bg) 14%, var(--paper)); background: var(--tint) var(--grain); }
.crumbs { max-width: var(--max); margin: 0 auto; padding: 1.4rem var(--gutter) 0; display: flex; gap: .6rem; flex-wrap: wrap; font: 500 .74rem/1.4 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.bk__hero { max-width: var(--max); margin: 0 auto; padding: clamp(2rem, 5vw, 4.5rem) var(--gutter) clamp(3rem, 6vw, 5rem); display: grid; grid-template-columns: auto 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.bk__cover { display: grid; place-items: center; padding: 1rem 2rem 2rem 0; }
.bk__cover .book { view-transition-name: var(--vt); }
.bk__intro h1 { font-size: clamp(2.4rem, 1.5rem + 3.8vw, 4.8rem); }
.bk__answer { font: 400 clamp(1.2rem, 1.05rem + .6vw, 1.55rem)/1.45 var(--f-display); color: var(--ink-2); max-width: 46ch; }
.bk__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem 2rem; margin: 2rem 0 0; padding: 1.4rem 0 0; border-top: 1px solid rgb(29 42 42 / .15); }
.bk__facts dt { font: 600 .68rem/1 var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .4rem; }
.bk__facts dd { margin: 0; font-size: 1.02rem; }
@media (max-width: 820px) { .bk__hero { grid-template-columns: 1fr; text-align: center; } .bk__cover { padding: 0 0 1rem; } .bk__answer { margin-inline: auto; } .bk__facts { text-align: left; } }

.bk__wide { margin: 0; position: relative; }
.bk__wide img { width: 100%; max-height: 86vh; object-fit: cover; }
.bk__wide figcaption, .gallery figcaption { font: italic 400 .98rem/1.4 var(--f-display); color: var(--ink-2); padding: .7rem var(--gutter) 0; }
.bk__wide figcaption { max-width: var(--max); margin: 0 auto; }

.bk__body { max-width: var(--max); margin: 0 auto; padding: clamp(3.5rem, 7vw, 6rem) var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.bk__section { padding: 0 clamp(1.5rem, 4vw, 4rem); }
.bk__section:first-child { padding-left: 0; border-right: 1px solid rgb(29 42 42 / .14); }
.bk__section:nth-child(2) { padding-right: 0; }
.bk__section h2 .kicker { margin-bottom: .8rem; }
.bk__section h2 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.8rem); margin-bottom: 1.2rem; }
.bk__moments { margin-top: 2.2rem; padding-top: 1.8rem; border-top: 1px solid rgb(29 42 42 / .14); }
.bk__moments h3 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.7rem); }
.bk__moments h3 .kicker { margin-bottom: .6rem; }
.bk__body--single { grid-template-columns: minmax(0, 760px); justify-content: center; }
.bk__body--single .bk__section { padding: 0; border: 0; }
.bk__moments ul { padding-left: 1.2em; }
.bk__moments li { margin-bottom: .6em; }
.bk__moments li::marker { color: var(--tomato); }
.bk__note { font-size: .92rem; color: var(--ink-3); font-style: italic; margin-top: 1.4rem; }
@media (max-width: 820px) { .bk__body { grid-template-columns: 1fr; } .bk__section { padding: 0 !important; border: 0 !important; } .bk__section + .bk__section { margin-top: 3rem; } }

/* menu as a table of contents */
.toc { list-style: none; margin: 0; padding: 0; }
.toc li { display: grid; grid-template-columns: 2.2rem auto 1fr auto; align-items: baseline; gap: .6rem; padding: .7rem 0; }
.toc__n { font: 500 .95rem/1 var(--f-display); color: var(--tomato); font-variant-numeric: oldstyle-nums; }
.toc__dish { font: 500 1.2rem/1.3 var(--f-display); }
.toc__dish small { display: block; font: italic 400 .92rem/1.4 var(--f-body); color: var(--ink-3); margin-top: .15rem; }
.toc__dots { border-bottom: 2px dotted rgb(29 42 42 / .3); transform: translateY(-.35em); min-width: 1rem; }
.toc__course { font: 600 .66rem/1 var(--f-label); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }

/* gallery */
.gallery { max-width: calc(var(--max) + 200px); margin: 0 auto; padding: 0 var(--gutter) clamp(3rem, 6vw, 5rem); }
.gallery__grid { columns: 4 220px; column-gap: 1rem; }
.gallery__item { break-inside: avoid; margin: 0 0 1rem; }
.gallery__btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-1); }
.gallery__btn img { width: 100%; transition: transform .8s var(--ease); }
.gallery__btn:hover img { transform: scale(1.035); }
.gallery figcaption { padding: .5rem .2rem 0; font-size: .92rem; }

.bk__faq { max-width: 860px; margin: 0 auto; padding: 0 var(--gutter) clamp(3rem, 6vw, 5rem); }
.bk__faq h2 { text-align: center; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem); margin-bottom: 1.5rem; }

/* turn the page */
.turn { max-width: var(--max); margin: 0 auto; padding: 2rem var(--gutter) clamp(3rem, 6vw, 5rem); display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; border-top: 1px solid rgb(29 42 42 / .14); }
.turn a { text-decoration: none; }
.turn__prev, .turn__next { display: flex; flex-direction: column; gap: .3rem; }
.turn__next { text-align: right; }
.turn small { font: 600 .7rem/1 var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.turn span { font: italic 500 clamp(1.2rem, 1rem + 1vw, 1.8rem)/1.1 var(--f-display); }
.turn a:hover span { text-decoration: underline; text-underline-offset: .2em; }
.turn__shelf { font: 600 .74rem/1 var(--f-label); letter-spacing: .18em; text-transform: uppercase; border: 1.5px solid currentColor; border-radius: 999px; padding: .8em 1.2em; }
@media (max-width: 640px) { .turn { grid-template-columns: 1fr 1fr; } .turn__shelf { grid-column: 1 / -1; grid-row: 2; justify-self: center; } }

/* lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox::backdrop { background: rgb(14 22 22 / .92); }
.lightbox figure { margin: 0; height: 100%; display: grid; place-items: center; grid-template-rows: 1fr auto; padding: 3rem 4rem 1.5rem; }
.lightbox img { max-height: calc(100vh - 7rem); max-width: 100%; width: auto; object-fit: contain; border-radius: 6px; }
.lightbox figcaption { color: #eee; font: italic 1rem/1.4 var(--f-display); padding-top: .8rem; text-align: center; }
.lightbox button { position: absolute; background: rgb(255 255 255 / .1); color: #fff; border: 0; border-radius: 50%; width: 48px; height: 48px; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.lightbox button:hover { background: rgb(255 255 255 / .25); }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) { .lightbox figure { padding: 3.5rem .5rem 1rem; } .lightbox__nav { top: auto !important; bottom: 1rem; transform: none !important; } }

/* ---------- save a seat ---------- */
.seat { max-width: var(--max); margin: 0 auto; padding: clamp(3rem, 7vw, 6rem) var(--gutter); display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.seat__aside .book { margin: 0 0 2.5rem 1rem; }
.seat__aside h1 { font-size: clamp(2.6rem, 1.8rem + 3vw, 4.4rem); }
.seat__points { padding-left: 1.2em; color: var(--ink-2); }
.seat__points li { margin-bottom: .5em; }
.seat__points li::marker { content: "✦  "; color: var(--tomato); }
.seat__form { background: var(--card); border: 1px solid var(--paper-3); border-radius: 20px; padding: clamp(1.5rem, 4vw, 2.6rem); box-shadow: var(--shadow-2); display: grid; gap: 1.1rem; position: sticky; top: 90px; }
.seat__form fieldset { border: 0; padding: 0; margin: 0; }
.seat__form legend, .field label { font: 600 .72rem/1.3 var(--f-label); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .55rem; display: block; }
.field label small { text-transform: none; letter-spacing: 0; font: italic 400 .85rem var(--f-body); color: var(--ink-3); }
.field input, .field select, .field textarea {
  width: 100%; font: 400 1.05rem/1.4 var(--f-body); color: var(--ink);
  background: #fff; border: 1.5px solid var(--paper-3); border-radius: 10px; padding: .75em .9em; min-height: 48px;
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgb(47 143 140 / .15); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips label { cursor: pointer; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span { display: inline-block; padding: .65em 1.05em; border: 1.5px solid var(--paper-3); border-radius: 999px; font: 500 .95rem/1 var(--f-body); background: #fff; transition: all .2s; }
.chips input:checked + span { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
.chips input:focus-visible + span { outline: 3px solid var(--teal); outline-offset: 2px; }
.seat__fine { font-size: .9rem; color: var(--ink-3); margin: 0; text-align: center; }
.seat__form.is-sent .seat__fine { color: var(--teal-deep); font-weight: 600; font-size: 1rem; }
@media (max-width: 860px) { .seat { grid-template-columns: 1fr; } .seat__form { position: static; } .seat__aside { text-align: center; } .seat__aside .book { margin: 0 auto 2rem; } .seat__points { text-align: left; display: inline-block; } }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }

.page-head--404 { min-height: 60vh; display: grid; place-content: center; }

/* ---------- view transitions (cover → book page) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  @view-transition { navigation: none; }
}

/* ---------- hero slideshow (slow Ken Burns crossfade) ---------- */
.hero__slide { position: absolute; inset: 0; opacity: 0; animation: heroFade calc(var(--slides) * 7s) infinite; animation-delay: calc(var(--n) * 7s); }
.hero__slide:first-child { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; animation: heroZoom calc(var(--slides) * 7s) infinite; animation-delay: calc(var(--n) * 7s); }
@keyframes heroFade { 0% { opacity: 0; } 4% { opacity: 1; } 25% { opacity: 1; } 30% { opacity: 0; } 100% { opacity: 0; } }
@keyframes heroZoom { 0% { transform: scale(1.02); } 30% { transform: scale(1.12); } 100% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .hero__slide { animation: none; } .hero__slide img { animation: none; } }

/* ---------- Whistledown letter ---------- */
.letter { padding: clamp(3rem, 7vw, 6rem) var(--gutter); background: linear-gradient(180deg, transparent, var(--paper-2)); }
.letter__paper {
  max-width: 680px; margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem);
  background: #fbf6ea var(--grain); color: #2b2620;
  box-shadow: 0 1px 0 #e7dcc4, 0 2px 0 #fbf6ea, 0 3px 0 #e7dcc4, var(--shadow-2);
  transform: rotate(-1.2deg); position: relative; text-align: center;
}
.letter__paper::before { content: ""; position: absolute; inset: 12px; border: 1px solid #c9b48a; pointer-events: none; }
.letter__mast { font: 400 clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem)/1 "Pinyon Script", cursive; margin-bottom: 1.6rem; color: #1f3554; }
.letter__mast span { display: block; font: 600 .78rem/1 var(--f-label); letter-spacing: .4em; text-transform: uppercase; margin-top: .6rem; color: #6b5a3c; }
.letter__salute { font: italic 500 1.25rem/1.3 var(--f-display); }
.letter__body { font: 400 clamp(1.15rem, 1rem + .6vw, 1.45rem)/1.55 var(--f-display); font-variation-settings: "SOFT" 100; }
.letter__cite { font: 600 .7rem/1.4 var(--f-label); letter-spacing: .18em; text-transform: uppercase; color: #6b5a3c; margin: 1.6rem 0 0; }

/* ---------- book page pull quote ---------- */
.bk__pull { max-width: 900px; margin: clamp(3rem, 6vw, 5rem) auto 0; padding: 0 var(--gutter); text-align: center; }
.bk__pull blockquote { margin: 0; }
.bk__pull p { font: italic 400 clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem)/1.3 var(--f-display); font-variation-settings: "SOFT" 100; color: var(--ink); }
.bk__pull p::before { content: "“"; display: block; font-size: 3em; line-height: .6; color: var(--c-accent); }
.bk__pull figcaption { font: 600 .74rem/1.4 var(--f-label); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- real published covers ---------- */
.cover--art { padding: 0; background: #ddd; }
.cover__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- tighter rhythm: no dead space between sections ---------- */
.shelf-section { padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.answer, .steps, .press, .faq-section, .letter, .sisters-teaser { padding-block: clamp(2.75rem, 5.5vw, 4.5rem); }
.page-head { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.section-head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.steps__item:nth-child(n) { transform: none; }
.steps__more { margin-top: 2rem; margin-bottom: 0; }
.answer__lead { margin-bottom: 0; }
.bk__hero { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem); }
.bk__body { padding-block: clamp(2.5rem, 5vw, 4rem); }
.bk__pull { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.cta-band { padding-block: clamp(2.5rem, 5vw, 4rem); }
.ledger { margin-block: clamp(2rem, 4vw, 3rem); }

/* shelf: one row of seven on desktop; when it wraps, the last row centres */
.shelf { --bw: clamp(112px, 11vw, 158px); display: flex; flex-wrap: wrap; justify-content: center; row-gap: clamp(2rem, 4vw, 3rem); max-width: 1400px; }
.shelf__slot { flex: 0 0 calc(var(--bw) + 28px); }
@media (max-width: 520px) { .shelf { --bw: 128px; } .shelf__slot { flex-basis: 50%; } }

/* gallery: gap-free grid of uniform tiles; landscapes span two; dense packing fills holes */
.gallery__grid { columns: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); grid-auto-rows: 1fr; grid-auto-flow: dense; gap: .75rem; }
.gallery__item { margin: 0; aspect-ratio: 4 / 5; }
.gallery__item--land { grid-column: span 2; aspect-ratio: auto; }
.gallery__btn { position: relative; height: 100%; }
.gallery__btn img { width: 100%; height: 100%; object-fit: cover; }
.gallery__btn figcaption {
  position: absolute; inset: auto 0 0 0; padding: 2.2rem .9rem .75rem; text-align: left;
  font: italic 400 .92rem/1.35 var(--f-display); color: #fff;
  background: linear-gradient(transparent, rgb(10 20 20 / .72));
}
@media (max-width: 520px) { .gallery__grid { grid-template-columns: 1fr 1fr; gap: .5rem; } .gallery__btn figcaption { font-size: .8rem; padding: 1.6rem .6rem .5rem; } }

/* home: all seven books fit on one shelf on desktop */
.shelf { --bw: clamp(112px, 10vw, 150px); }
/* sisters teaser: landscape photo so the copy fills the row */
.sisters-teaser__img img { aspect-ratio: 4 / 3; border-radius: var(--radius); }
.shelf__slot { min-width: 0; }
/* gallery rows: portrait tiles 4:5, landscape tiles span two at 8:5 so every row is the same height */
.gallery__grid { grid-auto-rows: auto; align-items: stretch; }
.gallery__item--land { aspect-ratio: 8 / 5; }
.gallery__btn { overflow: hidden; }
.gallery__btn img { position: absolute; inset: 0; }

/* =========================================================
   Intro: the logo bounces onto the cover; as it settles the
   cover swings open (page-turn sound), the site eases up from
   underneath and the logo glides into its place in the header.
   Once per session; skipped for bots and reduced motion.
   ========================================================= */
.intro { display: none; }
html.intro-on { overflow: hidden; }
html.intro-on .intro {
  display: block; position: fixed; inset: 0; z-index: 1000; perspective: 1800px;
  animation: introFailsafe 0s 5s forwards; /* never trap the page if JS fails */
}
.intro__cover { position: absolute; inset: 0; transform-origin: left center; transform-style: preserve-3d; will-change: transform; }
.intro__front, .intro__back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.intro__front {
  background: var(--grain), radial-gradient(120% 90% at 50% 42%, #fbf6ea, var(--paper) 60%, var(--paper-2));
  box-shadow: inset 0 0 0 clamp(12px, 2.4vw, 26px) var(--paper), inset 0 0 0 calc(clamp(12px, 2.4vw, 26px) + 2px) var(--teal),
              inset 16px 0 20px -12px rgb(0 0 0 / .22);
}
.intro__front::after { /* the board catches less light as it turns away */
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(90deg, rgb(40 25 10 / .05), rgb(40 25 10 / .45));
}
.intro__back { transform: rotateY(180deg); background: #efe6d2 var(--grain); }
.intro__tag {
  position: absolute; left: 0; right: 0; top: calc(50% + clamp(95px, 13vw, 150px)); margin: 0; text-align: center;
  font: italic 400 clamp(1.1rem, 1rem + .8vw, 1.6rem)/1 var(--f-display); color: var(--teal-deep);
  opacity: 0; animation: introTag .45s .45s forwards;
}
.intro__mark {
  position: absolute; left: 50%; top: 50%; width: clamp(150px, 22vw, 240px); translate: -50% -58%;
  transition: transform .95s cubic-bezier(.55, 0, .2, 1), opacity .3s .7s; will-change: transform;
}
.intro__logo { width: 100%; height: auto; transform-origin: 50% 100%; animation: introBounce 1.05s cubic-bezier(.3, 0, .3, 1) both; }

@keyframes introBounce {
  0%   { transform: translateY(-65vh) scale(.92, 1.08); opacity: 0; }
  10%  { opacity: 1; }
  40%  { transform: translateY(0) scale(1.1, .88); }
  56%  { transform: translateY(-11vh) scale(.97, 1.04); }
  72%  { transform: translateY(0) scale(1.04, .95); }
  84%  { transform: translateY(-2.5vh); }
  100% { transform: none; opacity: 1; }
}
@keyframes introTag { to { opacity: 1; } }
@keyframes introFailsafe { to { visibility: hidden; pointer-events: none; } }

/* the site waits just beneath the cover, slightly dimmed and set back */
html.intro-on main { transform: scale(1.035); filter: brightness(.78); transform-origin: 50% 50vh; }
html.intro-on .site-head { opacity: 0; }
html.intro-open .site-head { opacity: 1; transition: opacity .6s .35s; }
html.intro-on .hero__copy > * { opacity: 0; transform: translateY(18px); }

/* opening */
html.intro-open .intro__cover { animation: introOpen .95s cubic-bezier(.6, .02, .3, 1) forwards; }
html.intro-open .intro__front::after { animation: introDim .95s cubic-bezier(.6, .02, .3, 1) forwards; }
html.intro-open .intro__tag { opacity: 0; transition: opacity .25s; animation: none; }
html.intro-open .intro::before { /* soft shadow the turning cover casts across the page */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgb(30 20 10 / .4), rgb(30 20 10 / .12) 45%, transparent 75%);
  animation: introShade .95s ease-out forwards;
}
html.intro-open main { transform: none; filter: none; transition: transform 1.05s cubic-bezier(.2, .7, .2, 1), filter 1.05s; }
html.intro-open .hero__copy > * { opacity: 1; transform: none; transition: opacity .7s, transform .9s cubic-bezier(.2, .7, .2, 1); }
html.intro-open .hero__copy > :nth-child(1) { transition-delay: .35s; }
html.intro-open .hero__copy > :nth-child(2) { transition-delay: .45s; }
html.intro-open .hero__copy > :nth-child(3) { transition-delay: .55s; }
html.intro-open .hero__copy > :nth-child(4) { transition-delay: .65s; }
@keyframes introOpen { 0% { transform: rotateY(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: rotateY(105deg); opacity: 0; } }
@keyframes introDim { to { opacity: 1; } }
@keyframes introShade { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }

/* =========================================================
   The Bar Cart: after-hours palette (ink, brass, amber)
   ========================================================= */
:root { --bar-ink: #141d1c; --bar-ink-2: #1d2a29; --brass: #d6a54a; --brass-hi: #ecc77a; --bar-text: #efe6d2; }
.kicker--brass { color: var(--brass); }
.btn--brass { --b: var(--brass); color: var(--bar-ink); }
.btn--brass:hover { box-shadow: 0 8px 24px rgb(214 165 74 / .35); }

/* home teaser */
.bar-teaser { background: radial-gradient(90% 120% at 85% 50%, #2a2116, var(--bar-ink) 60%) , var(--bar-ink); color: var(--bar-text); overflow: hidden; padding-block: clamp(3rem, 6vw, 5rem); }
.bar-teaser__inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.bar-teaser h2 { color: #fff; font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.8rem); }
.bar-teaser h2 em { font-style: italic; color: var(--brass-hi); font-variation-settings: "SOFT" 100, "WONK" 1; }
.bar-teaser p { color: rgb(239 230 210 / .82); max-width: 44ch; margin-bottom: 1.6rem; }
.bar-teaser__fan { position: relative; height: clamp(300px, 34vw, 440px); }
.bar-teaser__card { position: absolute; top: 50%; left: 50%; width: 42%; margin: 0; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 50px rgb(0 0 0 / .5);
  transform: translate(calc(-50% + (var(--k) - 1) * 62%), -50%) rotate(calc((var(--k) - 1) * 7deg)); transition: transform .5s var(--ease); }
.bar-teaser__card:nth-child(2) { z-index: 2; width: 46%; }
.bar-teaser__card img { width: 100%; height: 100%; object-fit: cover; }
.bar-teaser__fan:hover .bar-teaser__card { transform: translate(calc(-50% + (var(--k) - 1) * 72%), -52%) rotate(calc((var(--k) - 1) * 9deg)); }
@media (max-width: 800px) { .bar-teaser__inner { grid-template-columns: 1fr; } .bar-teaser__fan { height: 300px; } }

/* bar page */
.bar-page { background: var(--bar-ink); }
.bar-page main { color: var(--bar-text); }
.bar-page .site-head { background: rgb(20 29 28 / .88); border-color: rgb(255 255 255 / .06); }
.bar-page .site-head__logo, .bar-page .site-head__nav a:not(.btn) { color: var(--bar-text); }
.bar-page .site-head__nav .btn { --b: var(--brass); color: var(--bar-ink); }
.bar-page .site-head__logo i { color: var(--brass); }
.bar-page h1, .bar-page h2, .bar-page h3 { color: #fff; }
.bar-hero { max-width: var(--max); margin: 0 auto; padding: clamp(2.5rem, 6vw, 5rem) var(--gutter) clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.bar-hero h1 { font-size: clamp(2.8rem, 1.8rem + 4vw, 5.4rem); font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; }
.bar-hero__answer { font: 400 clamp(1.1rem, 1rem + .5vw, 1.35rem)/1.55 var(--f-display); color: rgb(239 230 210 / .85); max-width: 50ch; margin-bottom: 1.8rem; }
.bar-hero__media { position: relative; min-height: clamp(360px, 40vw, 560px); }
.bar-hero__media figure { position: absolute; margin: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgb(0 0 0 / .55); }
.bar-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.bar-hero__a { inset: 0 22% 0 0; }
.bar-hero__b { width: 42%; aspect-ratio: 3 / 4; right: 0; bottom: -6%; border: 6px solid var(--bar-ink); }
@media (max-width: 820px) { .bar-hero { grid-template-columns: 1fr; } .bar-hero__media { min-height: 420px; } }

.pours { max-width: var(--max); margin: 0 auto; padding: clamp(2.5rem, 5vw, 4rem) var(--gutter); }
.pours .section-head p:last-child { color: rgb(239 230 210 / .75); }
.pours__list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.pour { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); background: var(--bar-ink-2); border: 1px solid rgb(214 165 74 / .18); border-radius: 18px; overflow: hidden; scroll-margin-top: 90px; }
.pour__img { margin: 0; min-height: 100%; }
.pour__img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.pour__body { padding: clamp(1.2rem, 2.5vw, 1.8rem); display: flex; flex-direction: column; gap: .2rem; }
.pour__book { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; font: 600 .7rem/1.2 var(--f-label); letter-spacing: .18em; text-transform: uppercase; color: var(--brass); }
.pour__book img { width: 30px; height: 45px; object-fit: cover; border-radius: 2px 4px 4px 2px; box-shadow: 0 2px 6px rgb(0 0 0 / .5); }
.pour__book a { color: inherit; text-decoration: none; }
.pour__book a:hover { text-decoration: underline; }
.pour h3 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); font-style: italic; }
.pour p { font-size: 1rem; color: rgb(239 230 210 / .82); }
.pour__with { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: auto !important; padding-top: .6rem; }
.pour__with span { font: 600 .66rem/1 var(--f-label); letter-spacing: .18em; text-transform: uppercase; color: rgb(239 230 210 / .55); margin-right: .2rem; }
.pour__with b { font: 500 .85rem/1 var(--f-body); border: 1px solid rgb(214 165 74 / .45); color: var(--brass-hi); border-radius: 999px; padding: .4em .8em; }
.pour__zero { font-style: italic; color: var(--brass-hi) !important; font-size: .95rem !important; margin-top: .6rem; }
@media (max-width: 980px) { .pours__list { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .pour { grid-template-columns: 1fr; } .pour__img img { aspect-ratio: 4 / 3; } }

.spirits { max-width: var(--max); margin: 0 auto; padding: clamp(2rem, 4vw, 3rem) var(--gutter); text-align: center; border-block: 1px solid rgb(214 165 74 / .2); }
.spirits__list { list-style: none; margin: 1rem 0 1.4rem; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.5rem, 5vw, 4rem); }
.spirits__list li { display: flex; flex-direction: column; gap: .35rem; }
.spirits__list strong { font: 500 clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem)/1 var(--f-display); color: #fff; letter-spacing: .01em; }
.spirits__list small { font: 600 .66rem/1.3 var(--f-label); letter-spacing: .18em; text-transform: uppercase; color: rgb(239 230 210 / .6); }
.spirits__cta { margin: 0; color: rgb(239 230 210 / .8); }
.spirits__cta a { color: var(--brass-hi); }
.gallery--bar { padding-top: clamp(2.5rem, 5vw, 4rem); }
.faq-section--bar .faq, .faq-section--bar .faq__item { border-color: rgb(214 165 74 / .2); }
.faq-section--bar summary h3 { color: #fff; }
.faq-section--bar summary::after { color: var(--brass); }
.faq-section--bar .faq__a { color: rgb(239 230 210 / .8); }
.faq-section--bar .faq__a a { color: var(--brass-hi); }

/* book page: In the glass */
.bk__glass { display: grid; grid-template-columns: 96px 1fr; gap: 1rem; align-items: center; margin-top: 2rem; padding: .9rem; border-radius: 14px; text-decoration: none; background: var(--bar-ink); color: var(--bar-text); transition: transform .3s var(--ease); }
.bk__glass:hover { transform: translateY(-2px); }
.bk__glass img { width: 96px; height: 120px; object-fit: cover; border-radius: 8px; }
.bk__glass .kicker { color: var(--brass); margin-bottom: .35rem; }
.bk__glass strong { display: block; font: italic 500 1.2rem/1.2 var(--f-display); color: #fff; }
.bk__glass small { display: block; font-size: .88rem; line-height: 1.45; color: rgb(239 230 210 / .75); margin: .3rem 0 .4rem; }
.bk__glass em { font: 600 .68rem/1 var(--f-label); letter-spacing: .16em; text-transform: uppercase; font-style: normal; color: var(--brass-hi); }
.gallery--bar .gallery__grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 700px) { .gallery--bar .gallery__grid { grid-template-columns: 1fr 1fr; } }
/* every gallery: fixed 4 columns (2 on phones); tile spans are balanced at build time so rows are always full */
.gallery__grid, .gallery--bar .gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 700px) { .gallery__grid, .gallery--bar .gallery__grid { grid-template-columns: 1fr 1fr; } }