/* Leon's Beverly Hills — landing page v3 (2026-10-30). One file, no framework.
   The palette comes from the shop itself: the mint walls, the deep green awning, the carved wood, ivory.
   Type: Fraunces (display, the wordmark in its italic) + Instrument Sans (text). The italic is used only for the wordmark,
   so it ships subset to the letters of "Leon's" (fraunces-italic-wordmark.woff2, 4.5 KB, both axes kept; the full file stays). */
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-var-latin.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-italic-wordmark.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/fonts/instrument-sans-var-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --ivory: #f7f3ec;
  --paper: #fffdf9;
  --mint: #dbeadf;
  --mint-2: #c4dccb;
  --green: #16352a;
  --green-2: #234a3b;
  --ink: #14211b;
  --muted: #485750;
  --wood: #7a4b26;
  --gold: #85652c;
  --line: #d6d0c3;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 72rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --header: 4.25rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--ivory); color: var(--ink); font: 400 1.0625rem/1.6 var(--sans); }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.1; letter-spacing: -.01em; margin: 0 0 .5em; font-variation-settings: "opsz" 96; }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
p { margin: 0 0 1em; }
address { font-style: normal; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--green); color: #fff; padding: .6rem 1rem; }
.skip-link:focus { top: 1rem; }
.v3-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.v3-narrow { max-width: 42rem; }
.eyebrow { font: 600 .78rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; margin: 0 0 1rem; }

.v3-preview { background: var(--wood); color: #fff; text-align: center; font: 500 .8rem/1.3 var(--sans); padding: .45rem 1rem; position: relative; z-index: 60;
  height: 1.95rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body:has(.v3-preview) .v3-hero { --preview: 1.95rem; }   /* the preview bar's height comes off the hero, so the first screen still ends at the mobile bar */

/* ---------------------------------------------------------------- header: the wordmark centered */
.v3-header { position: sticky; top: 0; z-index: 50; height: var(--header); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--gutter); background: var(--ivory); border-bottom: 1px solid var(--line); }
.v3-wordmark { font: italic 400 2.1rem/1 var(--display); color: var(--green); text-decoration: none; letter-spacing: -.01em; font-variation-settings: "opsz" 144, "SOFT" 50; grid-column: 2; }
.v3-nav { display: flex; gap: 1.75rem; font: 500 .9rem/1 var(--sans); }
.v3-nav a { text-decoration: none; padding: .5rem 0; }
.v3-nav a:hover { text-decoration: underline; }
.v3-nav-l { grid-column: 1; }
.v3-nav-r { grid-column: 3; justify-content: flex-end; }
@media (max-width: 899px) { .v3-nav { display: none; } }

/* ---------------------------------------------------------------- hero: the shop interior, full bleed
   One photo (IMG_9518) under the whole hero. Its orchid centerpiece and display table sit in the middle of the frame, from
   about a third of the way down to the bottom; every layout keeps them clear of the copy:
   - wide screens: the photo fills the width (anchored low, so the table stays in), the copy is a left column narrower
     than the gap left of the orchid, over a dark gradient from the left and the bottom
   - tall screens (phones, tablets upright): the photo fills the height and shows its middle, so the eyebrow, the H1 and
     the lead sit at the top over the darkened ceiling, the two buttons at the bottom, the orchid and table between */
.v3-hero { position: relative; min-height: calc(100svh - var(--header) - var(--preview, 0px)); display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: var(--green); }
.v3-hero-media, .v3-hero-media picture, .v3-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; }
.v3-hero-photo { object-fit: cover; object-position: 50% 78%; }
.v3-hero-media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(9, 24, 17, .9) 0%, rgba(9, 24, 17, .84) 28%, rgba(9, 24, 17, .72) 37%, rgba(9, 24, 17, .3) 45%, rgba(9, 24, 17, 0) 53%),
    linear-gradient(to top, rgba(9, 24, 17, .6) 0%, rgba(9, 24, 17, 0) 45%); }
.v3-hero-copy { text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.v3-hero-copy { position: relative; z-index: 1; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter) clamp(2.5rem, 8vh, 5.5rem); }
.v3-hero-copy > * { max-width: min(34rem, 34vw); }
@media (min-aspect-ratio: 1/1) { .v3-hero-copy { max-width: none; margin: 0; } }   /* the left gutter, clear of the orchid */
.v3-hero .eyebrow { color: #e7dcc4; width: fit-content; }
.v3-hero h1 { font-size: clamp(2.4rem, 4.8vw, 4.8rem); max-width: 11ch; margin-bottom: .35em; text-wrap: balance; }
.v3-lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); width: fit-content; color: #f3efe6; }
.v3-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 0; }
@media (max-aspect-ratio: 1/1) {
  .v3-hero { align-items: stretch; }
  .v3-hero-media picture, .v3-hero-photo { top: auto; height: 118%; }   /* anchored at the bottom: the extra 18% cut is ceiling (behind the copy), which lifts the orchid and the table above the buttons */
  .v3-hero-photo { object-position: 50% 100%; }
  .v3-hero-media::after { background: linear-gradient(to bottom, rgba(9, 24, 17, .9) 0%, rgba(9, 24, 17, .82) 30%, rgba(9, 24, 17, .35) 44%, rgba(9, 24, 17, 0) 54%),
      linear-gradient(to top, rgba(9, 24, 17, .92) 0%, rgba(9, 24, 17, .82) 17%, rgba(9, 24, 17, .3) 26%, rgba(9, 24, 17, 0) 32%); }
  .v3-hero-copy { display: flex; flex-direction: column; padding: clamp(1.25rem, 4vh, 2.5rem) var(--gutter) clamp(1.25rem, 3vh, 2rem); }
  .v3-hero-copy > * { max-width: 34rem; }
  .v3-hero h1 { font-size: clamp(2.2rem, 9vw, 4.4rem); max-width: 14ch; }
  .v3-lead { font-size: 1rem; margin-bottom: 0; }
  .v3-hero .v3-actions { margin-top: auto; padding-top: 1.5rem; }
}

/* ---------------------------------------------------------------- buttons */
.v3-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .8rem 1.5rem; border: 1px solid var(--green);
  background: var(--green); color: #fff; font: 600 .95rem/1.2 var(--sans); letter-spacing: .02em; text-decoration: none; cursor: pointer; border-radius: 0; }
.v3-btn:hover { background: var(--green-2); }
.v3-btn-line { background: transparent; color: var(--green); }
.v3-btn-line:hover { background: var(--mint); }
.v3-hero .v3-btn { background: var(--ivory); color: var(--green); border-color: var(--ivory); }
.v3-hero .v3-btn:hover { background: #fff; }
.v3-hero .v3-btn-line { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .8); }
.v3-hero .v3-btn-line:hover { background: rgba(255, 255, 255, .12); }

/* ---------------------------------------------------------------- sections */
.v3-pieces, .v3-inquire, .v3-travel, .v3-reviews, .v3-visit, .v3-faq { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.v3-head { display: grid; gap: .5rem 3rem; align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); }
.v3-head p { color: var(--muted); max-width: 32rem; margin: 0; }
@media (min-width: 900px) { .v3-head { grid-template-columns: 1fr 1fr; } .v3-head h2 { margin: 0; } }

/* the gallery: the shop's photos, a lead picture and four around it */
.v3-gallery { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: 1fr; }
.v3-piece { margin: 0; background: var(--paper); border: 1px solid var(--line); display: flex; flex-direction: column; }
.v3-piece picture { display: block; overflow: hidden; background: var(--mint); }
.v3-piece img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.v3-piece.v3-wide img { aspect-ratio: 3 / 2; }
.v3-piece figcaption { display: grid; grid-template-columns: 1fr auto; gap: .15rem 1rem; align-items: center; padding: 1rem 1.1rem 1.1rem; }
.v3-cap { font: 400 1.2rem/1.25 var(--display); }
.v3-ref { grid-row: 2; color: var(--muted); font-size: .85rem; letter-spacing: .04em; }
.v3-inq { grid-column: 2; grid-row: 1 / span 2; font-weight: 600; font-size: .95rem; color: var(--green); padding: .6rem .9rem; border: 1px solid var(--green); text-decoration: none; }
.v3-inq:hover { background: var(--mint); }
@media (min-width: 640px) { .v3-gallery { grid-template-columns: 1fr 1fr; } .v3-first { grid-column: 1 / -1; } .v3-piece.v3-wide:not(.v3-first) img { aspect-ratio: 4 / 5; } }
@media (min-width: 1000px) {
  .v3-gallery { grid-template-columns: repeat(3, 1fr); }
  .v3-piece.v3-first { grid-column: span 2; }
  .v3-piece.v3-first img { aspect-ratio: auto; height: 100%; }
  .v3-piece.v3-first picture { flex: 1; }
}

/* Meet Leon: the film beside his words */
.v3-leon { padding: clamp(4rem, 9vw, 7.5rem) 0; background: var(--paper); border-top: 1px solid var(--line); }
.v3-leon-grid { display: grid; gap: 2rem; align-items: center; }
.v3-leon-film video { width: 100%; max-width: 24rem; aspect-ratio: 9 / 16; height: auto; object-fit: cover; background: var(--green); margin: 0 auto; }
.v3-leon-copy p { max-width: 32rem; }
.v3-leon .eyebrow { color: var(--gold); }
.v3-transcript { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 1.5rem 0; max-width: 32rem; }
.v3-transcript summary { cursor: pointer; padding: .9rem 0; font-weight: 600; color: var(--green); }
.v3-transcript p { color: var(--muted); font-size: .98rem; }
@media (min-width: 900px) { .v3-leon-grid { grid-template-columns: 5fr 7fr; gap: 4rem; } .v3-leon-film video { margin: 0; } }

/* the inquiry form */
.v3-inquire { background: var(--mint); }
.v3-inquire-grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .v3-inquire-grid { grid-template-columns: 5fr 7fr; gap: 4rem; } }
.v3-inquire-copy p { color: var(--ink); max-width: 28rem; }
.v3-inquire-copy a { color: var(--green); font-weight: 600; }
.v3-form { display: grid; gap: 1.1rem 1.25rem; background: var(--paper); padding: clamp(1.25rem, 3vw, 2.25rem); border: 1px solid var(--mint-2); }
@media (min-width: 640px) { .v3-form { grid-template-columns: 1fr 1fr; } .v3-field-wide { grid-column: 1 / -1; } }
.v3-field { display: flex; flex-direction: column; gap: .35rem; margin: 0; }
.v3-field label, .v3-choice legend { font-weight: 600; font-size: .92rem; }
.v3-opt { font-weight: 400; color: var(--muted); }
.v3-hint { margin: 0; font-size: .82rem; color: var(--muted); }
.v3-field input, .v3-field textarea, .v3-signup input { font: inherit; color: var(--ink); background: #fff; border: 1px solid #8c968f; padding: .75rem .85rem; border-radius: 0; min-height: 3rem; width: 100%; }
.v3-field input:focus, .v3-field textarea:focus, .v3-signup input:focus { border-color: var(--green); }
.v3-field input.is-filled { background: #f1f8f3; border-color: var(--green); }
.v3-choice { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.v3-choice legend { width: 100%; padding: 0; margin-bottom: .35rem; }
.v3-choice label { display: inline-flex; align-items: center; gap: .5rem; font-weight: 400; min-height: 2.75rem; cursor: pointer; }
.v3-choice input { width: 1.15rem; height: 1.15rem; accent-color: var(--green); }
.v3-send { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.v3-fine { margin: 0; font-size: .82rem; color: var(--muted); }

/* the Travel line: coming soon */
.v3-travel { background: var(--green); color: #fff; }
.v3-travel .eyebrow { color: #e7dcc4; }
.v3-travel-grid { display: grid; gap: 2rem; align-items: end; }
@media (min-width: 900px) { .v3-travel-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.v3-travel p { color: #e9efe9; max-width: 28rem; }
.v3-signup label { display: block; font: 400 1.35rem/1.3 var(--display); margin-bottom: .75rem; }
.v3-signup-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.v3-signup input { flex: 1 1 14rem; border-color: rgba(255, 255, 255, .7); }
.v3-signup .v3-btn { background: var(--ivory); color: var(--green); border-color: var(--ivory); }
.v3-signup-msg { min-height: 1.6em; margin: .75rem 0 0; }
.v3-signup[hidden] { display: none; }

/* reviews: a link, never a number that goes stale */
.v3-reviews { text-align: center; }
.v3-reviews-inner { max-width: 40rem; }
.v3-reviews p { color: var(--muted); }

/* visit */
.v3-visit { background: var(--paper); border-top: 1px solid var(--line); }
.v3-visit-grid { display: grid; gap: 2rem; }
.v3-visit-photo { margin: 0; }
.v3-visit-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.v3-visit-copy address { font-size: 1.15rem; line-height: 1.7; margin-bottom: 1.25rem; }
.v3-visit-copy address a { color: var(--green); font-weight: 600; }
.v3-hours { display: grid; gap: .25rem; margin: 0 0 1.25rem; }
.v3-hours div { display: flex; gap: 1rem; }
.v3-hours dt { font-weight: 600; min-width: 11rem; }
.v3-hours dd { margin: 0; }
.v3-map iframe { width: 100%; height: 22rem; border: 1px solid var(--line); display: block; }
@media (min-width: 900px) {
  .v3-visit-grid { grid-template-columns: 7fr 5fr; gap: 3rem 4rem; align-items: center; }
  .v3-map { grid-column: 1 / -1; }
}

/* FAQ */
.v3-faq .faq-list { border-top: 1px solid var(--line); max-width: 52rem; }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 1.15rem 2.5rem 1.15rem 0; position: relative; font: 400 1.3rem/1.35 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .25rem; top: 1rem; font: 300 1.6rem/1 var(--sans); color: var(--gold); }
.faq[open] summary::after { content: "–"; }
.faq p { color: var(--muted); max-width: 44rem; padding-bottom: 1.15rem; margin: 0; }

/* footer */
.v3-footer { background: var(--green); color: #e9efe9; padding: 3.5rem 0 6rem; }
.v3-footer-grid { display: grid; gap: 2rem; }
@media (min-width: 900px) { .v3-footer-grid { grid-template-columns: 1fr 1fr; } .v3-footer { padding-bottom: 2rem; } }
.v3-wordmark-foot { color: #fff; margin: 0 0 1rem; font-size: 2.4rem; }
.v3-footer address { line-height: 1.7; }
.v3-footer a { color: #fff; }
.v3-footer-nav { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.v3-footer-nav a { padding: .25rem 0; }
.v3-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; border-top: 1px solid rgba(255, 255, 255, .2); margin-top: 2.5rem; padding-top: 1.25rem; font-size: .85rem; }
.v3-footer-bottom p { margin: 0; }

/* plain pages: thanks, privacy */
.v3-plain-page { padding: clamp(4rem, 10vw, 7rem) 0; min-height: 60vh; }
.v3-plain-page h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
.v3-prose h2 { font-size: 1.6rem; margin-top: 2rem; }
.v3-plain-page a { color: var(--green); font-weight: 600; }

/* the mobile bar: Call · Inquire, always on screen under 900px */
.v3-mbar { display: none; }
@media (max-width: 899px) {
  .v3-mbar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: var(--green); border-top: 1px solid rgba(255, 255, 255, .25); padding-bottom: env(safe-area-inset-bottom); }
  .v3-mbar a { display: flex; align-items: center; justify-content: center; min-height: 3.5rem; color: #fff; font: 600 1rem/1 var(--sans); text-decoration: none; letter-spacing: .03em; }
  .v3-mbar a + a { border-left: 1px solid rgba(255, 255, 255, .25); background: var(--ivory); color: var(--green); }
  body { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom)); }
  .v3-hero { min-height: calc(100svh - var(--header) - var(--preview, 0px) - 3.5rem); }
}

/* rise-in: only once js/v3.js has said motion is allowed; content is visible without it */
.v3-motion [data-rise] { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; transition-delay: var(--d, 0ms); }
.v3-motion [data-rise].is-in { opacity: 1; transform: none; }

/* Phones and touch screens (2026-10-31, showpiece-hq factory/engine/devices.py): every control a thumb can hit is 44x44 (a link
   inside a sentence is exempt) and the form's hints are 16px. */
@media (pointer: coarse), (max-width: 899px) {
  .v3-wordmark, .v3-header a, .v3-footer-nav a, .v3-footer a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .v3-btn { min-height: 44px; }
  .v3-hint, .v3-fine { font-size: 1rem; }
}