/* Letterio Distributing preview: shared styles for every page */
:root {
  --amber: #ffce07;          /* the logo's yellow (LetDist-Logo_Main.svg) */
  --amber-deep: #e0950f;     /* foam orange from the logo photo */
  --amber-ink: #8a4f06;
  --foam: #fbf3df;
  --foam-2: #f3e6c4;
  --stout: #1d140c;          /* the logo's black, warmed */
  --stout-2: #2c1e12;
  --bottle: #3b2615;
  --glass: #e9eef0;
  --chrome-1: #f4f6f7;
  --chrome-2: #9aa3a8;
  --ink: #241a10;
  --ink-soft: #5b4a38;
  --line: rgba(29, 20, 12, .16);
  --display: "Gloock", Georgia, serif;
  --label: "Archivo", "Arial Black", sans-serif;
  --body: "Lora", Georgia, serif;
  --radius: 12px;
  --bar-h: 40px;
  --head-h: 112px;
  --shell: min(1240px, calc(100% - 48px));
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 140px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--foam); color: var(--ink); font: 400 18px/1.65 var(--body); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 4px; }
.shell { width: var(--shell); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.label { font: 800 13px/1.2 var(--label); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; }
.h2 { font: 400 clamp(36px, 4.6vw, 60px)/1.04 var(--display); letter-spacing: .01em; }
.lede { font-size: 20px; color: var(--ink-soft); max-width: 36em; }
.btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 28px; border-radius: 8px; font: 800 15px/1 var(--label); font-stretch: 112%; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border: 2px solid var(--stout); background: var(--amber); color: var(--stout); box-shadow: 0 4px 0 var(--stout); transition: transform .2s ease-out, box-shadow .2s ease-out; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--stout); }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--stout); }
.btn.ghost { background: transparent; color: var(--foam); border-color: rgba(251, 243, 223, .7); box-shadow: none; }
.btn.ghost:hover { border-color: var(--amber); color: var(--amber); }
.btn.dark { background: var(--stout); color: var(--amber); }

/* ---- top bar: the announcement strip (DNA: announcement-photo-bar) ---- */
.masthead { position: fixed; inset: 0 0 auto; z-index: 50; transition: transform .35s ease-out; }
.masthead.tucked { transform: translateY(calc(-1 * var(--bar-h))); }
.topbar { height: var(--bar-h); background: var(--amber); color: var(--stout); font: 700 14px/1 var(--label); }
.topbar .shell { height: 100%; display: flex; align-items: center; gap: 24px; }
.topbar a { text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.topbar a:hover { text-decoration: underline; }
.topbar .open { display: inline-flex; align-items: center; gap: 8px; }
.topbar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bottle); }
.topbar .dot.on { background: #2f7d32; box-shadow: 0 0 0 3px rgba(47, 125, 50, .25); }
.topbar .push { margin-left: auto; }
.wmg-tag { font: 700 12px/1 var(--label); letter-spacing: .04em; opacity: .8; }

/* the main bar is a photo of the foam under a stout multiply */
.mainbar { position: relative; height: var(--head-h); color: var(--foam); background: var(--stout); isolation: isolate; transition: height .35s ease-out; }
.mainbar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("https://images.unsplash.com/photo-1784631845260-541b28ba719a?ixid=M3wxMTE2NzUwfDB8MXxhbGx8fHx8fHx8fHwxNzkzOTA5NTE1fA&ixlib=rb-4.1.0&w=1600&q=70&fit=crop") center/cover; opacity: .55; mix-blend-mode: luminosity; }
.mainbar::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(29, 20, 12, .92) 0%, rgba(44, 30, 18, .78) 60%, rgba(138, 79, 6, .62) 100%); }
.mainbar .shell { height: 100%; display: flex; align-items: center; gap: 32px; }
.brand { display: block; flex: none; transition: transform .35s ease-out; transform-origin: left center; }
.brand img { height: 92px; width: auto; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .35)); }
.masthead.tucked .mainbar { height: 80px; }
.masthead.tucked .brand { transform: scale(.72); }
.nav { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.nav a { position: relative; padding: 12px 16px; border-radius: 8px; font: 800 14px/1 var(--label); font-stretch: 118%; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--foam); transition: color .3s ease-out, text-shadow .3s ease-out; }
/* DNA: glow-readout, made as the neon of a beer sign in the window */
.nav a:hover, .nav a[aria-current="page"] { color: var(--amber); text-shadow: 0 0 8px rgba(255, 207, 0, .75), 0 0 20px rgba(255, 160, 0, .45); }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--amber); box-shadow: 0 0 8px rgba(255, 207, 0, .9); }
.nav .call { margin-left: 8px; }
.menu-btn { display: none; margin-left: auto; background: none; border: 2px solid rgba(251, 243, 223, .6); color: var(--foam); border-radius: 8px; padding: 10px 14px; font: 800 13px/1 var(--label); letter-spacing: .1em; text-transform: uppercase; }
main { padding-top: calc(var(--bar-h) + var(--head-h)); }

/* ---- crimp edge from a bottle cap (DNA: trade-divider) ---- */
.crimp { position: relative; }
.crimp::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; background: radial-gradient(circle at 8px 12px, var(--crimp, var(--amber)) 7.5px, transparent 8px) 0 0 / 16px 12px repeat-x; }

/* ---- hero (DNA: film-loop) ---- */
.hero { position: relative; min-height: min(78vh, 760px); display: grid; align-items: center; color: var(--foam); overflow: hidden; isolation: isolate; background: var(--stout); }
.hero-film { position: absolute; inset: -4% -8%; z-index: -2; background: url("https://images.unsplash.com/photo-1571613316887-6f8d5cbf7ef7?ixid=M3wxMTE2NzUwfDB8MXxhbGx8fHx8fHx8fHwxNzkzOTA5NTE0fA&ixlib=rb-4.1.0&w=2200&q=75&fit=crop") center 60%/cover; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(95deg, rgba(29, 20, 12, .86) 0%, rgba(29, 20, 12, .66) 42%, rgba(29, 20, 12, .18) 100%); }
.hero .shell { padding: 96px 0 168px; }
.hero h1 { font: 400 clamp(46px, 7vw, 96px)/.98 var(--display); max-width: 11.5em; letter-spacing: .005em; }
.hero h1 em { font-style: normal; color: var(--amber); }
.hero .label { color: var(--amber); display: block; margin-bottom: 20px; }
.hero p { font-size: 21px; max-width: 32em; margin: 24px 0 32px; color: rgba(251, 243, 223, .92); }
.hero .acts { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(29, 20, 12, .7); border: 1px solid rgba(255, 207, 0, .5); font: 700 14px/1 var(--label); color: var(--foam); }
.chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--chrome-2); }
.chip .dot.on { background: #4caf50; }
.hero .chip { margin-top: 24px; }

/* ---- row 2: amber band with caps rising into the hero (DNA: rising-collage) ---- */
.band-amber { background: var(--amber); color: var(--stout); --crimp: var(--amber); }
.rise { display: flow-root; padding: 0; }
.caps { display: flex; justify-content: center; gap: clamp(8px, 2vw, 28px); margin-top: -96px; position: relative; z-index: 2; flex-wrap: wrap; }
.cap { --s: clamp(112px, 12vw, 152px); width: var(--s); text-align: center; text-decoration: none; color: var(--stout); }
.cap svg { width: var(--s); height: var(--s); filter: drop-shadow(0 8px 10px rgba(29, 20, 12, .35)); transition: transform .3s ease-out; }
.cap:hover svg { transform: rotate(-8deg) translateY(-4px); }
.cap .n { font: 400 44px/1 var(--display); fill: var(--stout); }
.cap .t { font: 800 11px/1 var(--label); letter-spacing: .12em; fill: var(--stout); }
.cap span { display: block; margin-top: 8px; font: 800 12px/1.2 var(--label); letter-spacing: .1em; text-transform: uppercase; }
.why { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: start; margin-top: 56px; }
.why blockquote { margin: 0; font: 400 clamp(30px, 3.4vw, 46px)/1.1 var(--display); }
.why blockquote small { display: block; margin-top: 16px; font: 800 12px/1.3 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--amber-ink); }
.why h2 { font: 400 32px/1.1 var(--display); margin-bottom: 16px; }
.why p { font-size: 19px; }
.marquee { margin-top: 64px; margin-bottom: 0; border-block: 2px solid var(--stout); overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee ul { display: flex; gap: 40px; width: max-content; margin: 0; padding: 14px 0; list-style: none; font: 800 16px/1 var(--label); font-stretch: 118%; letter-spacing: .1em; text-transform: uppercase; }
.marquee li::after { content: "\2726"; margin-left: 40px; color: var(--amber-ink); }

/* ---- finder in cooler doors (DNA: framed-cases) ---- */
.finder { padding: 112px 0 104px; background: var(--foam); }
.finder-top { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 48px; }
.search { position: relative; }
.search label { display: block; margin-bottom: 8px; }
.search input { width: 100%; padding: 20px 20px 20px 56px; border: 2px solid var(--stout); border-radius: var(--radius); background: #fffaf0; font: 400 22px/1 var(--body); color: var(--ink); box-shadow: 0 4px 0 var(--stout); }
.search i { position: absolute; left: 20px; bottom: 25px; font-size: 20px; color: var(--ink-soft); }
.answer { min-height: 56px; margin-top: 16px; font-size: 19px; }
.answer strong { font-family: var(--label); font-stretch: 112%; }
.tries { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tries button { border: 1px solid var(--line); background: #fffaf0; border-radius: 999px; padding: 8px 14px; font: 600 15px/1 var(--body); color: var(--ink); cursor: pointer; transition: background-color .2s ease-out; }
.tries button:hover { background: var(--amber); }
.doors { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.door { position: relative; padding: 12px; border-radius: var(--radius); background: linear-gradient(180deg, var(--stout-2), var(--stout)); box-shadow: 0 12px 24px rgba(29, 20, 12, .22); }
.door-glass { position: relative; height: 100%; border-radius: 4px; padding: 24px 20px 28px 20px; background: linear-gradient(115deg, rgba(255, 255, 255, .5) 0 18%, rgba(255, 255, 255, 0) 18% 26%, rgba(255, 255, 255, .25) 26% 30%, rgba(255, 255, 255, 0) 30%), linear-gradient(180deg, #f2f6f7, #dfe6e9); color: var(--ink); overflow: hidden; }
.door::after { content: ""; position: absolute; right: 20px; top: 28%; width: 8px; height: 30%; border-radius: 4px; background: linear-gradient(90deg, var(--chrome-2), var(--chrome-1) 45%, var(--chrome-2)); box-shadow: 0 2px 4px rgba(0, 0, 0, .4); }
.door h3 { font: 400 26px/1.05 var(--display); }
.door .count { display: block; margin: 4px 0 16px; font: 800 12px/1 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--amber-ink); }
.door ul { list-style: none; margin: 0; padding: 0; font-size: 16px; line-height: 1.5; padding-right: 16px; }
.door li { transition: opacity .25s ease-out, background-color .25s ease-out; border-radius: 4px; }
.door li.hit { background: var(--amber); font-weight: 600; padding-inline: 4px; margin-inline: -4px; }
.doors.searching li:not(.hit) { opacity: .35; }
.door .more { display: inline-block; margin-top: 12px; font: 800 13px/1.2 var(--label); letter-spacing: .06em; text-transform: uppercase; }
.door-title { display: flex; justify-content: space-between; }

/* ---- Pennsylvania band, bubbles drifting (material + motion) ---- */
.pa { position: relative; padding: 120px 0 112px; color: var(--foam); background: var(--bottle); isolation: isolate; overflow: hidden; --crimp: var(--bottle); }
.pa .bubbles { position: absolute; inset: 0 0 -60% 0; z-index: -2; background: url("https://images.unsplash.com/photo-1784631845260-541b28ba719a?ixid=M3wxMTE2NzUwfDB8MXxhbGx8fHx8fHx8fHwxNzkzOTA5NTE1fA&ixlib=rb-4.1.0&w=1800&q=70&fit=crop") center top/cover; opacity: .5; }
.pa::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(59, 38, 21, .9), rgba(29, 20, 12, .82)); }
.pa-grid { display: grid; grid-template-columns: .9fr 1.3fr; gap: 64px; align-items: start; }
.pa h2 { color: var(--foam); }
.pa .lede { color: rgba(251, 243, 223, .85); margin-top: 20px; }
.note-hand { display: inline-block; margin-top: 24px; padding: 16px 20px; background: var(--foam); color: var(--stout); font: 400 22px/1.3 var(--display); transform: rotate(-2deg); border-radius: 4px; box-shadow: 0 8px 18px rgba(0, 0, 0, .35); max-width: 22em; }
.ledger { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 40px; }
.ledger li { break-inside: avoid; display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px dashed rgba(251, 243, 223, .3); font-size: 18px; }
.ledger b { font: 700 18px/1.3 var(--body); }
.ledger span { font: 700 12px/1.6 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--amber); text-align: right; }

/* ---- occasion band: photo with copy ---- */
.occasion { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; min-height: 520px; background: var(--foam-2); }
.occasion figure { margin: 0; position: relative; }
.occasion img { width: 100%; height: 100%; object-fit: cover; }
.occasion .copy { padding: 88px clamp(24px, 6vw, 96px); align-self: center; }
.occasion .copy p { font-size: 19px; }
.occasion .phone-big { display: inline-block; margin-top: 8px; font: 400 clamp(32px, 3.4vw, 44px)/1 var(--display); text-decoration: none; border-bottom: 3px solid var(--amber); }

/* ---- Q&A as category bars (DNA: category-bars) ---- */
.qa { padding: 112px 0; }
.qa-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 40px; flex-wrap: wrap; }
.qa-cat { margin-bottom: 12px; border-radius: var(--radius); background: #fffaf0; border: 2px solid var(--stout); overflow: hidden; }
.qa-cat > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 20px; padding: 24px 28px; background: var(--stout); color: var(--foam); font: 400 28px/1.1 var(--display); transition: background-color .25s ease-out; }
.qa-cat > summary::-webkit-details-marker { display: none; }
.qa-cat > summary .ic { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--amber); color: var(--stout); font-size: 20px; }
.qa-cat > summary .n { margin-left: auto; font: 800 12px/1 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.qa-cat > summary .chev { transition: transform .3s ease-out; color: var(--amber); }
.qa-cat[open] > summary .chev { transform: rotate(180deg); }
.qa-cat:hover > summary { background: var(--stout-2); }
.qa-rows { padding: 8px 28px 16px; }
.qa-row { display: grid; grid-template-columns: minmax(200px, .8fr) 1.6fr; gap: 32px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.qa-row:last-child { border-bottom: 0; }
.qa-row h3 { font: 700 19px/1.35 var(--body); }
.qa-row p { margin: 0; }

/* ---- pre-footer signature band ---- */
.signature { padding: 72px 0; --crimp: var(--amber); }
.signature .shell { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.signature p { margin: 0; font: 400 clamp(30px, 3.6vw, 48px)/1.08 var(--display); max-width: 18em; }

/* ---- footer (DNA: horizon) ---- */
.foot { background: var(--stout); color: var(--foam); }
.horizon { position: relative; height: 240px; overflow: hidden; }
.horizon img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.horizon::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(29, 20, 12, .1), rgba(29, 20, 12, .45) 70%, var(--stout)); }
.river-line { position: absolute; left: 0; right: 0; bottom: 18px; width: 100%; height: 60px; z-index: 1; }
.river-line path { fill: none; stroke: var(--amber); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 10; }
.foot-main { padding: 40px 0 56px; display: grid; grid-template-columns: 1.1fr 1.4fr 1fr; gap: 48px; }
.foot .brand img { height: 120px; }
.sign-nums { display: grid; gap: 20px; }
.sign-nums div span { display: block; font: 800 12px/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); margin-bottom: 8px; }
.sign-nums a, .sign-nums b { font: 400 clamp(24px, 2.4vw, 32px)/1.1 var(--display); text-decoration: none; font-weight: 400; font-variant-numeric: tabular-nums; }
.foot nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.foot nav a { text-decoration: none; font: 800 14px/1 var(--label); letter-spacing: .1em; text-transform: uppercase; }
.foot nav a:hover { color: var(--amber); }
.socials { display: flex; gap: 12px; margin-top: 24px; }
.socials a { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(251, 243, 223, .1); font-size: 20px; transition: background-color .25s ease-out, color .25s ease-out; }
.socials a:hover { background: var(--amber); color: var(--stout); }
.credits { border-top: 1px solid rgba(251, 243, 223, .15); padding: 20px 0 24px; font: 400 13px/1.6 var(--body); color: rgba(251, 243, 223, .7); }
.credits .shell { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.credits a { color: rgba(251, 243, 223, .9); }
.age { font: 800 12px/1.4 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }

/* ---- phone bottom bar ---- */
.dock { display: none; }

/* ---- interior pages ---- */
.page-hero { position: relative; padding: 88px 0 104px; color: var(--foam); background: var(--stout); isolation: isolate; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--ph) center/cover; opacity: .55; }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(29, 20, 12, .88), rgba(29, 20, 12, .4)); }
.page-hero h1 { font: 400 clamp(44px, 6vw, 80px)/1 var(--display); max-width: 12em; }
.page-hero p { font-size: 20px; max-width: 34em; margin-top: 20px; color: rgba(251, 243, 223, .9); }
.preview-note { display: inline-flex; gap: 12px; align-items: flex-start; margin-top: 24px; padding: 12px 16px; border: 1px dashed rgba(255, 207, 0, .7); border-radius: 8px; font: 400 15px/1.5 var(--body); color: var(--foam); max-width: 40em; }
.cat-nav { position: sticky; top: calc(var(--head-h) - 32px + 0px); z-index: 5; background: var(--foam); border-bottom: 1px solid var(--line); }
.cat-nav .shell { display: flex; gap: 8px; padding: 12px 0; overflow-x: auto; align-items: center; }
.cat-nav a { flex: none; padding: 10px 16px; border-radius: 999px; text-decoration: none; font: 800 13px/1 var(--label); letter-spacing: .08em; text-transform: uppercase; border: 2px solid var(--stout); }
.cat-nav a:hover { background: var(--amber); }
.cat-nav input { margin-left: auto; min-width: 220px; padding: 10px 16px; border: 2px solid var(--stout); border-radius: 999px; font: 400 16px/1 var(--body); background: #fffaf0; }
.shelf { padding: 72px 0 96px; display: grid; gap: 40px; }
.shelf .door { padding: 16px; }
.shelf .door-glass { padding: 40px 48px; }
.shelf .door h2 { font: 400 clamp(32px, 3.6vw, 46px)/1 var(--display); }
.shelf .door ul { columns: 4 180px; column-gap: 32px; font-size: 18px; line-height: 1.8; padding-right: 32px; }
.shelf .door p { max-width: 44em; color: var(--ink-soft); margin: 8px 0 24px; }
.shelf .door.hidden { display: none; }
.empty { display: none; padding: 24px; border: 2px dashed var(--stout); border-radius: var(--radius); font-size: 19px; }
.visit-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; padding: 96px 0; align-items: start; }
.hours { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 19px; }
.hours th, .hours td { text-align: left; padding: 14px 0; border-bottom: 1px solid var(--line); }
.hours th { font: 700 19px/1.3 var(--body); }
.hours td { text-align: right; }
.hours tr.today th, .hours tr.today td { color: var(--amber-ink); }
.hours tr.today th::after { content: "Today"; margin-left: 12px; padding: 4px 8px; border-radius: 4px; background: var(--amber); color: var(--stout); font: 800 11px/1 var(--label); letter-spacing: .1em; text-transform: uppercase; vertical-align: 3px; }
.addr-big { font: 400 clamp(32px, 3.6vw, 48px)/1.08 var(--display); margin: 8px 0 24px; }
.map { width: 100%; height: 420px; border: 2px solid var(--stout); border-radius: var(--radius); background: var(--foam-2); }
.then { background: var(--foam-2); padding: 96px 0; }
.then-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: center; }
.then figure { margin: 0; }
.then img { border-radius: 6px; border: 10px solid #fffaf0; box-shadow: 0 16px 32px rgba(29, 20, 12, .2); }
.then figure:first-child img { transform: rotate(-1deg); }
.then figcaption { margin-top: 16px; font-size: 15px; color: var(--ink-soft); }
.form-card { background: #fffaf0; border: 2px solid var(--stout); border-radius: var(--radius); padding: 40px; box-shadow: 0 6px 0 var(--stout); }
.form-card label { display: block; margin: 16px 0 8px; font: 800 12px/1 var(--label); letter-spacing: .12em; text-transform: uppercase; }
.form-card input, .form-card textarea { width: 100%; padding: 14px 16px; border: 2px solid var(--line); border-radius: 8px; font: 400 18px/1.4 var(--body); background: #fff; }
.form-card .stub { margin-top: 16px; font-size: 15px; color: var(--ink-soft); }

/* ---- motion (the Bow on Top) ---- */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-film { animation: pan 26s ease-in-out infinite alternate; }
  .js .in { opacity: 0; transform: translateY(24px); animation: rise .6s ease-out forwards; }
  .js .in-1 { animation-delay: .1s; } .js .in-2 { animation-delay: .25s; } .js .in-3 { animation-delay: .4s; } .js .in-4 { animation-delay: .55s; } .js .in-5 { animation-delay: .8s; }
  .js .caps .cap { opacity: 0; transform: translateY(60px); }
  .js .caps.go .cap { animation: cap-up .7s cubic-bezier(.2, .9, .3, 1.15) forwards; }
  .js .caps.go .cap:nth-child(2) { animation-delay: .1s; } .js .caps.go .cap:nth-child(3) { animation-delay: .2s; } .js .caps.go .cap:nth-child(4) { animation-delay: .3s; } .js .caps.go .cap:nth-child(5) { animation-delay: .4s; }
  .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease-out, transform .6s ease-out; }
  .js .reveal.seen { opacity: 1; transform: none; }
  .js .marquee ul { animation: slide 60s linear infinite; }
  .marquee:hover ul, .marquee:focus-within ul { animation-play-state: paused; }
  .js .pa .bubbles { animation: drift 40s linear infinite alternate; }
  .pa:hover .bubbles { animation-play-state: paused; }
  .js .river-line path { animation: flow 3s linear infinite; }
  .foot:hover .river-line path { animation-play-state: paused; }
  .js #doors .door { opacity: 0; transform: translateY(24px); transition: opacity .5s ease-out, transform .5s ease-out; }
  .js #doors.seen .door { opacity: 1; transform: none; }
  #doors.seen .door:nth-child(2) { transition-delay: .08s; } #doors.seen .door:nth-child(3) { transition-delay: .16s; } #doors.seen .door:nth-child(4) { transition-delay: .24s; } #doors.seen .door:nth-child(5) { transition-delay: .32s; }
}
@keyframes pan { from { transform: translateX(-3%) scale(1.04); } to { transform: translateX(3%) scale(1.1); } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes cap-up { 0% { opacity: 0; transform: translateY(60px) rotate(-30deg); } 70% { opacity: 1; transform: translateY(-6px) rotate(4deg); } 100% { opacity: 1; transform: none; } }
@keyframes slide { to { transform: translateX(-50%); } }
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(-30%); } }
@keyframes flow { to { stroke-dashoffset: -24; } }

/* ---- widths ---- */
@media (max-width: 1180px) {
  .doors { grid-template-columns: repeat(3, 1fr); }
  .nav a { padding: 12px 10px; }
}
@media (max-width: 980px) {
  :root { --head-h: 92px; }
  .brand img { height: 72px; }
  .menu-btn { display: inline-block; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; padding: 16px 24px 24px; background: var(--stout); gap: 4px; }
  .nav.open { display: flex; }
  .nav .call { margin: 8px 0 0; justify-content: center; }
  .why, .finder-top, .pa-grid, .occasion, .visit-grid, .then-grid { grid-template-columns: 1fr; }
  .why { gap: 32px; }
  .finder-top { gap: 24px; }
  .occasion figure { height: 340px; }
  .foot-main { grid-template-columns: 1fr 1fr; }
  .qa-row { grid-template-columns: 1fr; gap: 8px; }
  .topbar .addr { display: none; }
}
@media (max-width: 680px) {
  :root { --bar-h: 36px; --shell: calc(100% - 32px); }
  body { font-size: 17px; padding-bottom: 72px; }
  .topbar { font-size: 13px; }
  .topbar .shell { gap: 16px; }
  .topbar .fb, .topbar .wmg-tag { display: none; }
  .doors { grid-template-columns: 1fr; }
  .ledger { columns: 1; }
  .foot-main { grid-template-columns: 1fr; }
  .hero .shell { padding: 64px 0 132px; }
  .hero p { font-size: 18px; }
  .caps { margin-top: -72px; }
  .cap { --s: 96px; }
  .cap .n { font-size: 40px; }
  .cap span { font-size: 10px; }
  .qa-cat > summary { font-size: 22px; padding: 18px 20px; gap: 14px; }
  .qa-cat > summary .ic { width: 40px; height: 40px; font-size: 16px; }
  .qa-cat > summary .n { display: none; }
  .qa-rows { padding: 4px 20px 12px; }
  .shelf .door-glass { padding: 28px 24px; }
  .form-card { padding: 24px; }
  .cat-nav input { min-width: 160px; }
  .dock { display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; inset: auto 0 0; z-index: 60; background: var(--stout); border-top: 3px solid var(--amber); }
  .dock a { display: grid; place-items: center; gap: 4px; padding: 10px 0 12px; color: var(--foam); text-decoration: none; font: 800 11px/1 var(--label); letter-spacing: .08em; text-transform: uppercase; }
  .dock a i { font-size: 18px; color: var(--amber); }
}

/* Bow fixes, round 1 */
.visit-grid .map { position: sticky; top: 140px; height: 640px; }
@media (max-width: 980px) { .visit-grid .map { position: static; height: 380px; } }
@media (max-width: 680px) { .hero .chip { display: none; } }