/* =====================================================================
   The Smithy — design system  ("Banked Fire", 2026-07-27)
   The app's world, on the web: rich-black slate field (#03071E), the
   flame ramp for accents (03071E·370617·6A040F·9D0208·D00000·DC2F02·
   E85D04·F48C06·FAA307·FFBA08), parchment ink (#F4F1EB — the client
   app's own text color), Merriweather display (the engine web's serif)
   over the system UI stack (what the app itself renders).
   Token NAMES are inherited skeleton plumbing (--paper is the dark
   field, --copper is flame orange); values are the contract.
   ===================================================================== */

:root {
  /* fields & ink — slate night, parchment text */
  --paper:      #03071e;   /* page field — the ramp's rich black */
  --paper-2:    #0d1226;   /* raised surfaces: cards, forms, drawers */
  --ink:        #f4f1eb;   /* parchment — body text (app-native) */
  --ink-soft:   #b9b4a9;   /* warm grey — meta, captions */
  --forest:     #faf7f0;   /* display headings (name is plumbing) */
  --forest-2:   #e9e3d5;
  --river:      #7c8db0;   /* slate-blue secondary */
  --ridge:      #8fb0d9;   /* Blue Ridge blue — cool accent */
  --valley:     #7dc99a;   /* valley green — success, growth accents */
  --copper:     #e85d04;   /* flame — primary CTA fill */
  --copper-dk:  #faa307;   /* amber — links, eyebrows, hovers */
  --sand:       #f4f1eb1f; /* decorative hairlines (12% parchment) */
  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --border-input: #8a93a6; /* functional input borders — ≥3:1 on the field */
  --ember-deep: #370617;   /* maroon — deep tints, error fields */
  --flame-red:  #dc2f02;   /* error text / danger accents */

  /* type — Merriweather (engine-web serif) + the app's system stack */
  --display: "Merriweather", Georgia, serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --step--2: clamp(.72rem, .7rem + .1vw, .8rem);
  --step--1: clamp(.82rem, .79rem + .15vw, .92rem);
  --step-0:  clamp(1rem, .96rem + .25vw, 1.15rem);
  --step-1:  clamp(1.1rem, 1.05rem + .3vw, 1.3rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-4:  clamp(2.4rem, 1.9rem + 2.6vw, 4rem);
  --step-6:  clamp(3.4rem, 2.4rem + 5vw, 6.5rem);

  --maxw: 72rem;
  --radius: 6px;
  --shadow: 0 0 0 1px rgba(244,241,235,.06);
}
/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--paper);
  /* atmosphere: soft light wash + paper grain */
  background-image:
    radial-gradient(110% 70% at 85% -12%, color-mix(in srgb, var(--copper) 9%, transparent), transparent 58%),
    radial-gradient(80% 55% at -8% 4%, color-mix(in srgb, #9d0208 12%, transparent), transparent 52%),
    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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.04; letter-spacing: -.01em; color: var(--forest); margin: 0 0 .5em; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-2); }
p { margin: 0 0 1rem; max-width: 62ch; }
a { color: var(--copper-dk); text-decoration-thickness: 1px; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }

:focus-visible { outline: 2px solid var(--river); outline-offset: 3px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--forest); color: var(--paper); padding: .5rem .9rem; border-radius: var(--radius); z-index: 50; }

main { max-width: var(--maxw); margin: 0 auto; padding: clamp(2rem, 5vw, 4.5rem) clamp(1.1rem, 4vw, 2rem); }
section + section { margin-top: clamp(2.5rem, 6vw, 5rem); }

/* ---------- header / nav ---------- */
/* Announcement bar (optional) + header stick to the top of the viewport as a
   single unit, so the header always sits cleanly below the bar without any
   fragile top-offset math. The header itself is no longer sticky. */
.site-top { position: sticky; top: 0; z-index: 40; }
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem clamp(1.1rem, 4vw, 2rem);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}

/* ---------- sticky announcement bar (interior pages, no motion) ---------- */
/* A slim, single-line save-the-date strip. Deliberately NOT a marquee: text
   is static (WCAG 2.2.2 — no moving content to pause/stop/hide). Suppressed on
   home via the announcement_bar context processor, where .savedate lives. */
.navbar {
  background: var(--forest);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 24%, transparent);
}
.navbar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: .4rem clamp(1.1rem, 4vw, 2rem);
  display: flex; align-items: center; gap: .5rem;
}
.navbar-link {
  flex: 1 1 auto;
  display: inline-flex; flex-wrap: wrap; align-items: baseline;
  justify-content: center; gap: .25rem .6rem;
  color: var(--paper); text-decoration: none; font-weight: 500;
  font-size: var(--step--1); line-height: 1.4;
}
.navbar-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.navbar-close {
  flex: 0 0 auto; background: none; border: 0; cursor: pointer;
  padding: .1rem .4rem; line-height: 1; font-size: 1.3rem;
  color: color-mix(in srgb, var(--paper) 70%, transparent);
  border-radius: var(--radius);
}
.navbar-close:hover { color: var(--paper); }
.navbar-tag {
  font-family: var(--body); font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; font-size: .72rem;
  /* copper-on-forest AA-safe mix (raw --copper fails contrast here) */
  color: color-mix(in srgb, var(--copper) 55%, var(--paper));
}
.navbar-msg { color: color-mix(in srgb, var(--paper) 88%, transparent); }
.navbar-cue { color: var(--paper); }
.brand {
  font-family: var(--display); font-weight: 600; font-size: 1.3rem;
  color: var(--forest); text-decoration: none; letter-spacing: -.02em;
  display: inline-flex; align-items: center; gap: .45rem;
}
.brand::before { content: none; }
.nav { display: flex; gap: clamp(.6rem, 1.4vw, 1.4rem); align-items: center; flex-wrap: wrap; }
.nav a {
  color: var(--ink-soft); text-decoration: none; font-weight: 500;
  font-size: var(--step--1); letter-spacing: .02em; text-transform: uppercase;
  padding: .25rem 0; position: relative;
}
.nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--copper); transition: width .25s ease; }
.nav a:hover::after, .nav a[aria-current="page"]::after { width: 100%; }

/* CSS-only responsive nav: inline on desktop, checkbox-hack hamburger on
   mobile. (A <details> kept the links hidden on desktop — this is robust.) */
.nav-toggle { position: absolute; left: -9999px; }       /* a11y-hidden checkbox */
.nav-burger { display: none; flex-direction: column; gap: 5px; padding: .55rem .4rem; cursor: pointer; }
.nav-burger span { display: block; width: 26px; height: 2px; background: var(--forest); border-radius: 2px; }

@media (max-width: 820px) {
  .site-header { position: relative; }
  .nav-burger { display: flex; }
  .nav {
    display: none; position: absolute; right: clamp(1.1rem, 4vw, 2rem); top: 100%;
    flex-direction: column; align-items: flex-start; gap: .9rem; background: var(--paper);
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1rem 1.2rem; min-width: 13rem; box-shadow: var(--shadow); z-index: 45;
  }
  .nav-toggle:checked ~ .nav { display: flex; }
}

/* ---------- hero ---------- */
.hero {
  position: relative; padding: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(2rem, 5vw, 3.5rem);
  overflow: hidden;
}

.hero::before { /* one low forge-ember glow — iron, not ridgelines */
  content: ""; position: absolute; inset: auto 0 0 0; height: 60%; z-index: -1;
  background: radial-gradient(60% 40% at 50% 110%, color-mix(in srgb, var(--copper) 12%, transparent), transparent 70%);
}
.hero h1 { font-size: var(--step-6); font-weight: 400; max-width: 16ch; font-optical-sizing: auto; }
.hero .lede { font-size: var(--step-2); font-family: var(--display); color: var(--ink-soft); max-width: 30ch; }
.page-home .hero h1 { font-size: var(--step-4); max-width: 20ch; }
.page-home .hero .lede { font-size: var(--step-1); max-width: 44ch; }
.hero p { font-size: 1.1rem; }
.eyebrow { font-family: var(--body); text-transform: uppercase; letter-spacing: .22em; font-size: .78rem; font-weight: 700; color: var(--copper-dk); margin: 0 0 1rem; max-width: none; }
/* hero CTA row: primary + secondary, wraps cleanly on mobile */
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
/* offset in-page anchor jumps so the sticky bar + header don't cover the
   target. Desktop clears a one-line bar + header; on mobile the bar can wrap
   to 2–3 lines, so the offset grows to keep the target fully visible. */
:target { scroll-margin-top: 6.5rem; }
@media (max-width: 820px) { :target { scroll-margin-top: 8.5rem; } }

/* ---------- buttons ---------- */
.btn, button[type="submit"] {
  display: inline-block; font-family: var(--body); font-weight: 600;
  font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em;
  /* copper-dk (not copper) for WCAG AA contrast on the small bold label: white
     on --copper-dk ≈ 5.7:1 vs ~3.95:1 on --copper. */
  background: var(--copper); color: #1a0b00; border: 0; border-radius: var(--radius);
  padding: .8rem 1.4rem; text-decoration: none; cursor: pointer;
  box-shadow: 0 10px 22px -12px var(--copper-dk); transition: transform .15s ease, background .2s ease;
}
.btn:hover, button[type="submit"]:hover { background: var(--copper-dk); color: #1a0b00; transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--forest); border: 1.5px solid var(--forest); box-shadow: none; }
.btn--ghost:hover { background: var(--forest); color: var(--paper); }

/* ---------- cards / hours / menu ---------- */
.card {
  background: var(--paper-2);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.3rem, 3vw, 2.2rem); box-shadow: var(--shadow);
}
.hours ul, .menu-items, .products, .events ul { list-style: none; margin: 0; padding: 0; }
.hours li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px dashed var(--sand); }
.hours li:last-child { border-bottom: 0; }
.hours-sub { margin: 1.3rem 0 .2rem; font-family: var(--display); font-size: 1.1rem; color: var(--copper-dk); }
.hours-sub:first-of-type { margin-top: .4rem; }

.menu h2 { color: var(--copper-dk); margin-top: 1.6rem; padding-bottom: .3rem; border-bottom: 2px solid var(--sand); }
.menu-items li { padding: .7rem 0; border-bottom: 1px dashed var(--sand); }
.menu-items strong { font-family: var(--display); font-size: 1.15rem; color: var(--forest); }
.menu-items em { color: var(--river); font-style: italic; }
.menu-items .desc { color: var(--ink-soft); font-size: var(--step--1); margin-top: .15rem; }
.updated { color: var(--ink-soft); font-size: var(--step--1); font-style: italic; }
/* generic de-emphasis utility (e.g. "Details coming soon") — was used in
   markup but only defined in scoped contexts, so it rendered at full ink */
.muted { color: var(--ink-soft); }

.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1.2rem; }
.products li { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; }

/* ---------- forms ---------- */
form p { display: flex; flex-direction: column; gap: .35rem; max-width: 34rem; }
label { font-weight: 600; font-size: var(--step--1); color: var(--ink-soft); }
input, textarea, select {
  font: inherit; font-size: var(--step-0); padding: .6rem .75rem;
  background: var(--paper-2); border: 1px solid var(--border-input); border-radius: var(--radius); color: var(--ink);
}
input:focus, textarea:focus, select:focus { border-color: var(--river); }
/* Attestation checkboxes (market vendor application): make each label its own
   row so they don't run together inline, and keep the box from being bloated
   by the global input padding above. */
.checkbox { display: flex; align-items: flex-start; gap: .6rem; max-width: 34rem; margin: 0 0 1rem; font-weight: 400; cursor: pointer; }
.checkbox input[type=checkbox] { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin: .15rem 0 0; padding: 0; }
.checkbox span { font-weight: 400; font-size: var(--step--1); color: var(--ink-soft); line-height: 1.45; }
/* Roots Market vendor directory + profiles */
.vendor-grid { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.vendor-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.vendor-card a { display: block; color: inherit; text-decoration: none; }
.vendor-card img, .vendor-card .vc-placeholder { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.vendor-card .vc-placeholder { display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; background: var(--sand); color: var(--ink-soft); font-size: var(--step--1); }
.vendor-card .vc-body { padding: 1rem; }
.vc-cat { font-size: var(--step--1); color: var(--copper); text-transform: uppercase; letter-spacing: .04em; margin: 0; }
.vendor-card h3 { margin: .2rem 0 .4rem; }
.vendor-card .vc-body p:last-child { color: var(--ink-soft); font-size: var(--step--1); margin: 0; }
.vendor-hero { width: 100%; max-width: 34rem; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); margin: 0 0 1.2rem; }

/* ---------- age gate ---------- */
.age-gate {
  min-height: 78vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 1.2rem;
}
.age-gate h1 { font-size: var(--step-6); font-weight: 400; }
.age-gate form { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.age-gate button[value="no"] { background: transparent; color: var(--ink-soft); box-shadow: none; text-decoration: underline; }

/* 21+ overlay (#30) — full-viewport, opaque enough that the page is not
   readable behind it; the content stays in the DOM for search engines. */
.age-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  background: color-mix(in srgb, var(--paper) 96%, var(--forest));
}
.age-overlay-card { text-align: center; max-width: 36rem; }
.age-overlay-card h2 { font-size: var(--step-6); font-weight: 400; }
.age-overlay-card form { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.age-overlay-card button[value="no"] { background: transparent; color: var(--ink-soft); box-shadow: none; text-decoration: underline; }
body.age-locked { overflow: hidden; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--forest); color: color-mix(in srgb, var(--paper) 88%, transparent);
  margin-top: clamp(3rem, 8vw, 6rem); padding: clamp(2rem, 5vw, 3.5rem) clamp(1.1rem, 4vw, 2rem);
  font-size: var(--step--1);
}
.site-footer a { color: var(--paper); }
.footer-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.6fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.footer-brand .footer-logo { height: 52px; width: auto; margin: 0 0 .7rem; }
.footer-tagline { font-family: var(--display); font-size: 1.15rem; color: var(--paper); margin: 0 0 .7rem; }
.footer-meta { margin: .2rem 0; color: color-mix(in srgb, var(--paper) 70%, transparent); }
.footer-col h3 { font-family: var(--display); font-weight: 500; font-size: 1.05rem; color: var(--paper); margin: 0 0 .75rem; }
.footer-col a { display: block; color: color-mix(in srgb, var(--paper) 82%, transparent); text-decoration: none; padding: .25rem 0; }
.footer-col a:hover { color: var(--copper-dk); }
.footer-connect .footer-subscribe { margin: 0 0 1rem; max-width: none; }
.footer-connect .subscribe-row { justify-content: flex-start; }
.footer-connect .subscribe-row input { max-width: 16rem; }
.footer-social { margin: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; }
.footer-social a { color: color-mix(in srgb, var(--paper) 82%, transparent); text-decoration: none; }
.footer-social a:hover { color: var(--paper); text-decoration: underline; }
.footer-bottom { max-width: var(--maxw); margin: clamp(1.8rem, 4vw, 2.6rem) auto 0; padding-top: 1.2rem; border-top: 1px solid color-mix(in srgb, var(--paper) 18%, transparent); display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; justify-content: space-between; align-items: center; font-size: var(--step--2); color: color-mix(in srgb, var(--paper) 60%, transparent); }
.footer-bottom p { margin: 0; }
.footer-sublinks { display: flex; gap: 1.2rem; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- motion: staggered page-load reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  main > section { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
  main > section:nth-child(2) { animation-delay: .08s; }
  main > section:nth-child(3) { animation-delay: .16s; }
  main > section:nth-child(4) { animation-delay: .24s; }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}

/* ---------- cart / messages (Phase 2 shop) ---------- */
.messages { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .5rem; }
.msg { padding: .6rem .9rem; border-radius: var(--radius); border: 1px solid var(--line); font-size: var(--step--1); }
.msg--success { background: color-mix(in srgb, var(--forest-2) 12%, var(--paper)); border-color: var(--forest-2); }
.msg--error { background: color-mix(in srgb, var(--copper) 14%, var(--paper)); border-color: var(--copper-dk); }
.cart-link { font-weight: 700 !important; color: var(--forest) !important; }
.cart-rows { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.cart-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .9rem 0; border-bottom: 1px dashed var(--sand); }
.cart-name { font-family: var(--display); font-size: 1.1rem; color: var(--forest); flex: 1 1 12rem; }
.cart-qty { display: flex; align-items: center; gap: .6rem; margin: 0; }
.cart-qty input { width: 4.5rem; }
.cart-qty .link, .cart-qty button[value="remove"] { background: none; box-shadow: none; color: var(--copper-dk); text-transform: none; letter-spacing: 0; padding: .4rem; text-decoration: underline; }
.cart-total { font-size: 1.3rem; font-family: var(--display); }
.add-to-cart { display: flex; align-items: center; gap: .8rem; margin-top: 1rem; }
.add-to-cart input { width: 5rem; }
.notice { color: var(--ink-soft); font-style: italic; }
.cart-party-note { background: color-mix(in srgb, var(--copper) 8%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--copper) 28%, var(--sand));
  border-radius: 12px; padding: .9rem 1.1rem; margin: 0 0 1.5rem;
  color: var(--ink-soft); line-height: 1.55; }
.cart-party-note strong { color: var(--forest); }
.cart-party-note a { font-weight: 600; white-space: nowrap; }
.product .price { font-family: var(--display); font-size: 1.6rem; color: var(--copper-dk); }

/* ---------- real assets (logo / hero photo / menu image) ---------- */
.brand { gap: .55rem; }
.brand::before { content: none; }  /* replaced by the real logo mark */
.brand-mark { height: 30px; width: auto; }
.hero-photo {
  width: 100%; max-height: 460px; object-fit: cover; border-radius: var(--radius);
  margin-top: clamp(1.5rem, 4vw, 2.5rem); box-shadow: var(--shadow);
}
.menu-photo {
  width: 100%; max-width: 640px; border-radius: var(--radius);
  border: 1px solid var(--line); margin: 1rem 0 1.5rem;
}
.footer-logo { height: 56px; width: auto; margin-bottom: 1rem; opacity: .95; }

/* ---------- beer thumbnails + product imagery ---------- */
.menu-items li.has-thumb { display: flex; gap: 1rem; align-items: center; }
.beer-thumb {
  width: 72px; height: 72px; flex: 0 0 72px; object-fit: cover;
  border-radius: 50%; border: 2px solid var(--sand);
}
.item-body { flex: 1; }

/* 86'd / sold-out — used on beer that has kicked but hasn't been replaced yet.
   Keep the beer listed (so guests see it was pouring) but stamp it clearly. */
.menu-items li.sold-out strong {
  text-decoration: line-through;
  text-decoration-color: #b3261e;
  text-decoration-thickness: 2px;
}
.menu-items li.sold-out .beer-thumb { filter: grayscale(1); opacity: .55; }
.menu-items li.sold-out em,
.menu-items li.sold-out .desc { opacity: .55; }
.sold-out-stamp {
  display: inline-block;
  margin-left: .45rem;
  vertical-align: middle;
  transform: rotate(-6deg);
  font-family: var(--body);
  font-weight: 700;
  font-size: .66em;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.25;
  white-space: nowrap;
  color: #b3261e;
  border: 2.5px solid #b3261e;
  border-radius: 5px;
  padding: .04rem .4rem;
}

.products { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.product-card { text-align: center; padding: 0; overflow: hidden; }
.product-card > a { display: block; text-decoration: none; color: var(--forest); }
.product-thumb {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block;
  background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.product-thumb--empty {
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; color: var(--sand); font-family: var(--display);
}
.product-name { display: block; font-family: var(--display); font-size: 1.1rem; padding: .9rem 1rem .2rem; }
.product-price { display: block; padding: 0 1rem 1rem; color: var(--copper-dk); font-weight: 600; }
.product-hero {
  width: 100%; max-width: 420px; aspect-ratio: 1/1; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--line); margin-bottom: 1.2rem;
}

/* ---------- featured menu spot (e.g. Sunday Supper) ---------- */
.menu-feature {
  display: grid; grid-template-columns: 240px 1fr; gap: clamp(1rem, 3vw, 1.8rem);
  align-items: center; margin: 1rem 0 2rem; padding: clamp(1rem, 3vw, 1.5rem);
  background: color-mix(in srgb, var(--copper) 8%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--copper) 30%, var(--sand));
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.menu-feature .feature-figure { margin: 0; }
.menu-feature .feature-figure img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--line); display: block;
}
.menu-feature figcaption {
  font-size: var(--step--1); color: var(--ink-soft); font-style: italic;
  text-align: center; margin-top: .4rem;
}
.menu-feature .feature-body h2 {
  margin: 0 0 .5rem; border: 0; padding: 0; color: var(--copper-dk);
}
.menu-feature .feature-body p { margin: 0 0 .6rem; }
.menu-feature .feature-week { font-size: var(--step--1); color: var(--ink-soft); }
@media (max-width: 640px) {
  .menu-feature { grid-template-columns: 1fr; }
  .menu-feature .feature-figure img { aspect-ratio: 16/10; }
}

/* ---------- kitchen photo gallery (food menu) ---------- */
.menu-gallery-grid {
  list-style: none; margin: 1rem 0 1.5rem; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem;
}
.menu-gallery-grid li { overflow: hidden; border-radius: var(--radius); }
.menu-gallery-grid img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block;
  border-radius: var(--radius); border: 1px solid var(--line);
}

/* ---------- menu hero banner ---------- */
.menu-hero {
  width: 100%; max-height: 340px; object-fit: cover; border-radius: var(--radius);
  margin-bottom: 1.5rem; box-shadow: var(--shadow);
}

/* ---------- home amenities grid ---------- */
.amenities { padding: 0; }
.amenity-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.amenity-grid li {
  background: var(--paper-2); border: 1px solid var(--line);
  border-left: 3px solid var(--copper); border-radius: var(--radius); padding: 1.1rem 1.2rem;
}
.amenity-grid strong { display: block; font-family: var(--display); font-size: 1.2rem; color: var(--forest); }
.amenity-grid span { color: var(--ink-soft); font-size: var(--step--1); }

/* ---------- image + text band ---------- */
.band { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 2.5rem); align-items: center; }
.band img { width: 100%; height: 100%; max-height: 380px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.band-body h2 { margin-top: 0; }
@media (max-width: 720px) { .band { grid-template-columns: 1fr; } }

/* ---------- Grit partnership feature (family page) ---------- */
.partner-feature {
  display: grid; grid-template-columns: minmax(200px, 260px) 1fr;
  gap: clamp(1.2rem, 3vw, 2.4rem); align-items: center;
  padding: clamp(1.4rem, 4vw, 2.4rem);
  background: var(--forest); color: var(--paper); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.partner-feature .partner-art {
  width: 100%; height: auto; display: block;  /* transparent logo, shadow baked in */
}
/* lighten the copper eyebrow toward birch so it clears WCAG AA (~5:1) on the
   dark forest band — full --copper was only ~2.9:1 */
.partner-feature .eyebrow { color: color-mix(in srgb, var(--copper) 55%, var(--paper)); }
.partner-feature h2 { margin: .2rem 0 .6rem; color: var(--paper); }
.partner-feature p { color: color-mix(in srgb, var(--paper) 88%, transparent); }
.partner-feature strong { color: var(--paper); }
@media (max-width: 640px) {
  .partner-feature { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .partner-feature .partner-art { max-width: 220px; }
}

/* ---------- save-the-date banner (landing) ---------- */
.savedate {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .8rem clamp(1.2rem, 4vw, 2.5rem);
  background: var(--forest); color: var(--paper);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: clamp(1rem, 3vw, 1.4rem) clamp(1.2rem, 4vw, 1.8rem);
}
.savedate .eyebrow { color: color-mix(in srgb, var(--copper) 55%, var(--paper)); margin: 0 0 .15rem; }
.savedate-headline { font-family: var(--display); font-size: var(--step-2); color: var(--paper); line-height: 1.1; margin: 0; }
.savedate-body { flex: 1 1 20rem; }
.savedate-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.1rem; margin: 0; }
.savedate-link { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
@media (max-width: 640px) { .savedate { justify-content: flex-start; } }

/* ---------- Grit partnership teaser (landing) ---------- */
.partner-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem clamp(1.2rem, 4vw, 2.5rem);
  background: color-mix(in srgb, var(--copper) 8%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--copper) 28%, var(--sand));
  border-radius: var(--radius); padding: clamp(1.1rem, 3vw, 1.6rem); box-shadow: var(--shadow);
}
.partner-strip-body { flex: 1 1 22rem; }
.partner-strip-body h2 { margin: .15rem 0 .4rem; }
.partner-strip-body p { margin: 0; }
.partner-strip-cta { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }

/* gift-card callout reuses the strip layout, tinted river-slate instead of
   copper so two strips on the landing page read as distinct moments */
.gift-strip {
  background: color-mix(in srgb, var(--river) 8%, var(--paper));
  border-color: color-mix(in srgb, var(--river) 28%, var(--sand));
}

/* ---------- family page: kids coloring book feature ---------- */
.coloring-feature {
  display: grid; grid-template-columns: minmax(200px, 280px) 1fr;
  gap: clamp(1.2rem, 3vw, 2.4rem); align-items: center;
}
.coloring-cover {
  width: 100%; height: auto; display: block; border-radius: var(--radius);
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.coloring-body h2 { margin-top: 0; }
@media (max-width: 640px) {
  .coloring-feature { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .coloring-cover { max-width: 280px; }
}

/* ---------- family page: scavenger-hunt stops ---------- */
.family-stops {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 1.6rem);
}
.family-stop {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.family-stop img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
  border-bottom: 1px solid var(--line);
}
.family-stop-body { padding: .8rem 1rem 1rem; }
.family-stop-body strong {
  display: block; font-family: var(--display); font-size: 1.15rem; color: var(--forest);
}
.family-stop-body span { color: var(--ink-soft); font-size: var(--step--1); }
@media (max-width: 640px) { .family-stops { grid-template-columns: 1fr; } }

/* ---------- private-events / weddings gallery (masonry, keeps aspect) ---------- */
.venue-gallery-section .eyebrow { margin-bottom: .2rem; }
.venue-gallery {
  list-style: none; padding: 0; margin: 1.4rem 0 0;
  columns: 3; column-gap: clamp(.7rem, 1.6vw, 1.1rem);
}
.venue-gallery li {
  break-inside: avoid; margin: 0 0 clamp(.7rem, 1.6vw, 1.1rem);
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.venue-gallery img {
  width: 100%; display: block;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.venue-gallery li:hover img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .venue-gallery li:hover img { transform: none; } }
/* large phones / small tablets keep two columns; true phones get one big,
   emotional photo per row (the gallery is the venue's main sell). */
@media (max-width: 720px) { .venue-gallery { columns: 2; } }
@media (max-width: 520px) { .venue-gallery { columns: 1; } }

/* ---------- private-events booking card (details + request form) ---------- */
.hero .hero-actions { margin-top: 1.5rem; }
.booking-card {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(1.6rem, 4vw, 2.8rem);
}
@media (min-width: 760px) {
  .booking-card { grid-template-columns: .82fr 1fr; align-items: start; }
  /* keep the value props in view while the form is filled out */
  .booking-details { position: sticky; top: 6.5rem; }
}
.booking-details .eyebrow { margin-bottom: .3rem; }
.booking-contact { margin: 1.4rem 0 0; color: var(--ink-soft); font-size: var(--step--1); }
.booking-details h2 { margin-bottom: .6rem; }
.venue-facts { list-style: none; margin: 0; padding: 0; }
.venue-facts li { padding: .8rem 0; border-top: 1px solid var(--line); }
.venue-facts li:first-child { border-top: 0; padding-top: 0; }
.venue-facts strong {
  display: block; font-family: var(--display);
  font-size: 1.2rem; color: var(--forest); line-height: 1.2;
}
.venue-facts span { color: var(--ink-soft); font-size: var(--step--1); }
.booking-request h2 { margin-bottom: .5rem; }
.booking-note { color: var(--ink-soft); margin-bottom: 1.4rem; }
.booking-fineprint {
  color: var(--ink-soft); font-size: var(--step--1);
  font-style: italic; margin: .9rem 0 0;
}

/* partial vs private rental toggle — CSS-only radio tabs (no JS) */
.evt-toggle > input { position: absolute; left: -9999px; }   /* a11y-hidden radios */
.evt-tabs { display: flex; gap: .5rem; margin: 0 0 1rem; }
.evt-tabs label {
  flex: 1; text-align: center; cursor: pointer;
  padding: .5rem .7rem; border: 1px solid var(--line); border-radius: var(--radius);
  font-weight: 600; font-size: var(--step--1); color: var(--ink-soft); background: var(--paper);
}
.evt-tabs label:hover { border-color: var(--forest); }
.evt-panel { display: none; }
#evt-partial:checked ~ .evt-tabs label[for="evt-partial"],
#evt-private:checked ~ .evt-tabs label[for="evt-private"] {
  background: var(--forest); color: var(--paper); border-color: var(--forest);
}
#evt-partial:focus-visible ~ .evt-tabs label[for="evt-partial"],
#evt-private:focus-visible ~ .evt-tabs label[for="evt-private"] {
  outline: 2px solid var(--river); outline-offset: 2px;
}
#evt-partial:checked ~ .evt-panel--partial,
#evt-private:checked ~ .evt-panel--private { display: block; }

/* ---------- landing Sunday Supper feature (shown Sat–Sun) ---------- */
.home-supper { padding: 0; }
.home-supper-card {
  display: grid; grid-template-columns: 280px 1fr; gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: center; text-decoration: none; color: inherit;
  padding: clamp(1.1rem, 3vw, 1.8rem);
  background: color-mix(in srgb, var(--copper) 9%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--copper) 32%, var(--sand));
  border-radius: var(--radius); box-shadow: var(--shadow);
  transition: box-shadow .15s ease, transform .15s ease;
}
.home-supper-card:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 22px 48px -24px rgba(34,31,26,.5); }
.home-supper-photo {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--line); display: block;
}
.home-supper-body h2 { margin: .1rem 0 .5rem; color: var(--copper-dk); }
.home-supper-body p { margin: 0 0 .7rem; }
.home-supper-week { font-size: var(--step--1); color: var(--ink-soft); }
.home-supper-body .btn { margin-top: .3rem; }
@media (max-width: 720px) {
  .home-supper-card { grid-template-columns: 1fr; }
  .home-supper-photo { aspect-ratio: 16/10; }
}

/* ---------- hero "Now Playing" live-music badge (self-populating) ----------
   Floats in the top-right of the video hero as an overlay — never pushes page
   content down. z-index 3 sits above the scrim (1) and the centered overlay
   (2). JS flips [data-state] to "live" during a set. */
.hero-np {
  position: absolute; top: clamp(.7rem, 2vw, 1.1rem); right: clamp(.7rem, 2vw, 1.1rem);
  z-index: 3; display: flex; align-items: center; gap: .7rem; text-decoration: none;
  padding: .55rem .85rem .55rem .6rem; border-radius: 14px; color: var(--paper);
  max-width: min(74vw, 260px); transform-origin: top right;
  background: rgba(20,17,13,.52); border: 1px solid rgba(245,239,225,.20);
  -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.6);
  animation: np-in .55s cubic-bezier(.2,.7,.2,1) .7s both;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.hero-np:hover { transform: translateY(-2px); background: rgba(20,17,13,.62);
  box-shadow: 0 16px 38px -14px rgba(0,0,0,.7); }
.hero-np:focus-visible { outline: 2px solid #e79a5c; outline-offset: 3px; }
@keyframes np-in { from { opacity: 0; transform: translate(10px,-8px) scale(.96); } to { opacity: 1; transform: none; } }
.hero-np-avatar { position: relative; flex: 0 0 auto; width: 50px; height: 50px; border-radius: 50%; }
.hero-np-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  object-position: center 30%; border: 1.5px solid rgba(245,239,225,.5); display: block; }
.hero-np-avatar::before { content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid var(--copper); opacity: .55; animation: np-ring 2.6s ease-in-out infinite; }
@keyframes np-ring { 0%,100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.09); opacity: .16; } }
.hero-np-text { display: flex; flex-direction: column; gap: .06rem; min-width: 0; }
.hero-np-eyebrow { display: flex; align-items: center; gap: .4rem; height: .9rem; }
.hero-np-kicker { font-family: var(--body); font-weight: 700; font-size: .6rem;
  text-transform: uppercase; letter-spacing: .16em; color: #e79a5c; white-space: nowrap; }
.hero-np-name { font-family: var(--display); font-weight: 600; font-size: 1.02rem; line-height: 1.1;
  color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-np-sub { font-family: var(--body); font-size: .66rem; color: rgba(245,239,225,.72);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-np-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.hero-np-eq i { width: 2.5px; background: #e79a5c; border-radius: 1px; height: 40%;
  animation: np-eq 1.1s ease-in-out infinite; }
.hero-np-eq i:nth-child(2) { animation-delay: .22s; }
.hero-np-eq i:nth-child(3) { animation-delay: .44s; }
.hero-np-eq i:nth-child(4) { animation-delay: .12s; }
@keyframes np-eq { 0%,100% { height: 30%; } 50% { height: 100%; } }
.hero-np-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--copper); display: none;
  animation: np-dot 1.6s ease-out infinite; }
@keyframes np-dot { 0% { box-shadow: 0 0 0 0 rgba(191,106,44,.6); } 70% { box-shadow: 0 0 0 7px rgba(191,106,44,0); } 100% { box-shadow: 0 0 0 0 rgba(191,106,44,0); } }
.hero-np[data-state="live"] .hero-np-dot { display: inline-block; }
.hero-np[data-state="live"] .hero-np-kicker { color: #f0b483; }
.hero-np[data-state="live"] .hero-np-eq i { animation-duration: .62s; }
.hero-np[data-state="live"] .hero-np-avatar::before { border-color: var(--copper); animation-duration: 1.6s; }
@media (max-width: 560px) {
  .hero-np { gap: .5rem; padding: .45rem .6rem .45rem .45rem; max-width: 62vw; }
  .hero-np-avatar { width: 40px; height: 40px; }
  .hero-np-name { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-np, .hero-np-avatar::before, .hero-np-eq i, .hero-np-dot { animation: none; }
  .hero-np-eq i { height: 70%; }
}

/* ---------- video hero (carried over from the original site) ---------- */
.video-hero {
  position: relative; overflow: hidden;
  width: 100vw; margin-left: calc(50% - 50vw);
  margin-top: calc(-1 * clamp(2rem, 5vw, 4.5rem));   /* flush under the header */
  min-height: min(80vh, 680px);
  display: grid; place-items: center;
  background-size: cover; background-position: center;   /* poster fallback */
}
.video-hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none;  /* decorative; never intercept taps */
}
.video-hero::after {  /* legibility scrim */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,28,22,.45), rgba(20,28,22,.30) 40%, rgba(20,28,22,.6));
}
.video-hero-overlay {
  position: relative; z-index: 2; text-align: center; color: #fff;
  padding: 2rem 1.2rem; display: grid; justify-items: center; gap: 1.1rem;
}
.video-hero-logo { width: min(380px, 72vw); height: auto; filter: drop-shadow(0 2px 12px rgba(0,0,0,.4)); }
.video-hero-tag {
  font-family: var(--display); font-size: clamp(1.4rem, 1rem + 2vw, 2.4rem);
  margin: 0; text-shadow: 0 2px 16px rgba(0,0,0,.5);
}
.video-hero-cta { margin: 0; display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; }
.btn--ghost-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.8); box-shadow: none; }
.btn--ghost-light:hover { background: #fff; color: var(--forest); }

.intro { text-align: center; }
.intro h1 { max-width: 18ch; margin-inline: auto; }
.intro p { max-width: 60ch; margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
  .video-hero-bg { display: none; }   /* show the poster background instead */
}

/* ---------- events / live music ---------- */
.event-card {
  display: grid; grid-template-columns: 220px 1fr; gap: clamp(1rem, 3vw, 2rem);
  align-items: start; background: var(--paper-2);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.2rem, 3vw, 2rem); box-shadow: var(--shadow);
}
.event-card + .event-card { margin-top: 1.5rem; }
.event-card:not(:has(.event-photo)) { grid-template-columns: 1fr; }  /* no band photo → full-width body, not the 220px photo column */
.event-photo { width: 220px; height: 220px; object-fit: cover; border-radius: var(--radius); }
.event-when { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .08em; color: var(--copper-dk); font-weight: 700; margin: 0 0 .3rem; }
.event-where { color: var(--ink-soft); font-weight: 500; text-transform: none; letter-spacing: 0; margin-left: .5rem; }
.event-body h2 { margin: 0 0 .4rem; }
.event-performer { font-family: var(--display); font-size: 1.2rem; color: var(--forest); margin: 0 0 .4rem; }
.event-performer .muted { color: var(--ink-soft); font-family: var(--body); font-size: var(--step--1); }
.event-bio { color: var(--ink-soft); margin: 0 0 .9rem; }

.socials { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.social-pill {
  display: inline-block; font-size: var(--step--1); font-weight: 600; text-decoration: none;
  color: var(--forest); background: var(--paper); border: 1px solid var(--sand);
  border-radius: 999px; padding: .3rem .8rem;
}
.social-pill:hover { background: var(--forest); color: var(--paper); border-color: var(--forest); }

.player { border-top: 1px dashed var(--sand); padding-top: .9rem; }
.player-label { font-size: var(--step--1); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin: 0 0 .6rem; }
.track { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.track-title { font-family: var(--display); color: var(--forest); min-width: 9rem; }
.track audio { height: 38px; flex: 1; min-width: 220px; }
.track audio::-webkit-media-controls-panel { background: var(--paper); }

@media (max-width: 640px) {
  .event-card { grid-template-columns: 1fr; }
  .event-photo { width: 100%; height: 220px; }
}

/* ---------- events month calendar ---------- */
.calendar { padding: clamp(1rem,3vw,1.6rem); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.calendar h2 { margin-top: 0; }
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .6rem; }
.cal-nav .cal-title { margin: 0; flex: 1; text-align: center; }
.cal-nav-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.5rem; height: 2.5rem; border: 1px solid var(--sand); border-radius: 999px; background: var(--paper); color: var(--forest); font-size: 1.5rem; line-height: 1; text-decoration: none; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease; }
.cal-nav-btn:hover { background: var(--forest); color: var(--paper); border-color: var(--forest); }
.cal-nav-btn:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
.cal-nav-btn:active { transform: scale(.93); }
.cal-today { margin: -.2rem 0 .7rem; text-align: center; font-size: var(--step--1); }
.cal-today a { color: var(--copper-dk); text-decoration: none; }
.cal-today a:hover { text-decoration: underline; }
/* Image-tile grid calendar (#39) — a visual, scannable month of events. */
.cal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: clamp(.8rem, 2vw, 1.3rem); }
.cal-tile { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform .12s ease, box-shadow .12s ease; }
.cal-tile:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgb(34 31 26 / .14); }
.cal-tile:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
.cal-tile-media { position: relative; aspect-ratio: 1 / 1; background: var(--paper-2); }
.cal-tile-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cal-tile-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; box-sizing: border-box; background: linear-gradient(135deg, var(--forest), var(--copper-dk)); }
.cal-tile-fallback span { font-family: var(--display); font-size: 1.25rem; line-height: 1.15; color: var(--paper); }
.cal-tile-date { position: absolute; top: .6rem; left: .6rem; background: var(--paper); color: var(--forest); font-weight: 800; font-size: .72rem; letter-spacing: .05em; padding: .25rem .55rem; border-radius: 999px; box-shadow: var(--shadow); }
.cal-tile-cap { padding: .7rem .8rem .85rem; display: flex; flex-direction: column; gap: .12rem; }
.cal-tile-time { font-size: var(--step--1); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--copper-dk); }
.cal-tile-title { font-family: var(--display); font-size: 1.05rem; line-height: 1.15; color: var(--forest); }
.cal-empty-note { grid-column: 1 / -1; text-align: center; padding: 1.5rem 0; }
@media (max-width: 640px) {
  .cal-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .cal-nav-btn { width: 2.2rem; height: 2.2rem; font-size: 1.3rem; }
}

/* ---------- performer detail ---------- */
.performer-head { display: grid; grid-template-columns: 240px 1fr; gap: clamp(1rem,3vw,2rem); align-items: start; }
.performer-photo { width: 240px; height: 240px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.performer-head:not(:has(.performer-photo)) { grid-template-columns: 1fr; }  /* no band photo → full-width text, not the 240px photo column */
.performer .muted { color: var(--ink-soft); }
.show-row { margin: .3rem 0; }
@media (max-width: 640px) { .performer-head { grid-template-columns: 1fr; } .performer-photo { width: 100%; height: 260px; } }

/* ---------- instagram feed ---------- */
.instagram { text-align: center; }
.ig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .5rem; margin: 1rem 0 1.5rem; }
.ig-grid a { display: block; overflow: hidden; border-radius: var(--radius); }
.ig-grid img { width: 100%; aspect-ratio: 1/1; object-fit: cover; transition: transform .3s ease; }
.ig-grid a:hover img { transform: scale(1.06); }

/* ---------- about: pull-quote ---------- */
.pullquote { text-align: center; padding: clamp(1.5rem,5vw,3.5rem) 1rem; }
.pullquote blockquote { margin: 0 auto; max-width: 24ch; font-family: var(--display); font-weight: 500; font-size: var(--step-4); line-height: 1.08; color: var(--forest); letter-spacing: -.01em; }
.pullquote blockquote::before { content: "“"; color: var(--copper); }
.pullquote blockquote::after { content: "”"; color: var(--copper); }
.pullquote-cite { margin-top: 1rem; font-family: var(--body); text-transform: uppercase; letter-spacing: .18em; font-size: .76rem; font-weight: 700; color: var(--copper-dk); }

/* ---------- about: band reverse + founders ---------- */
.band--reverse img { order: 2; }
.founders { text-align: center; }
.founders-title { margin-bottom: 1.5rem; }
.founder-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); text-align: left; }
.founder { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(1.2rem,3vw,1.8rem); }
.founder h3 { margin: .15rem 0 .6rem; color: var(--forest); font-size: 1.55rem; }
.founder-role { margin: 0; font-family: var(--body); text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; font-weight: 700; color: var(--copper-dk); }
.founder p:last-child { margin-bottom: 0; color: var(--ink-soft); }
@media (max-width: 720px) { .band--reverse img { order: 0; } }

/* ===================================================================
   v2 revenue features (issue #2)
   =================================================================== */

/* demo ribbon */
.demo-ribbon { background: var(--copper); color: #fff; text-align: center; font-family: var(--body); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; padding: .35rem; }

/* small/ghost button variants */
.btn--sm { padding: .45rem .85rem; font-size: var(--step--1); }

/* footer subscribe + links */
.footer-subscribe { margin: 1rem auto; max-width: 32rem; }
.footer-subscribe label { display: block; font-family: var(--display); font-size: 1.15rem; margin-bottom: .5rem; color: var(--paper); }
.subscribe-row { display: flex; gap: .5rem; justify-content: center; }
.subscribe-row input { flex: 1; min-width: 0; max-width: 22rem; padding: .55rem .7rem; border: 1px solid color-mix(in srgb, #fff 30%, transparent); border-radius: var(--radius); background: color-mix(in srgb, #fff 12%, transparent); color: #fff; }
.subscribe-row input::placeholder { color: color-mix(in srgb, #fff 60%, transparent); }
.footer-links { margin: 1rem 0; font-size: var(--step--1); opacity: .9; }
.footer-links a { color: var(--paper); }

/* mug club tiers (reuse .founder card) */
.tier { text-align: center; }
.tier h3 { font-size: 2.4rem; }
.tier .per { font-size: 1rem; color: var(--ink-soft); font-family: var(--body); }
/* tier cards can carry >1 body paragraph (e.g. the assessment's free
   line); pin the soft ink on all of them so the :last-child rule above
   doesn't leave earlier paragraphs full-strength on multi-p cards. */
.founder.tier p { color: var(--ink-soft); }
.perks { list-style: none; margin: 1rem 0 0; padding: 0; text-align: left; }
.perks li { padding: .35rem 0 .35rem 1.4rem; position: relative; color: var(--ink-soft); border-top: 1px solid var(--line); }
.perks li::before { content: "—"; color: var(--copper); position: absolute; left: 0; }

/* shared form card */
.form-card { max-width: 38rem; }
.stack-form p { margin: 0 0 .9rem; }
.stack-form label { display: block; font-weight: 600; font-size: var(--step--1); margin-bottom: .25rem; }
.stack-form input:not([type=checkbox]), .stack-form select, .stack-form textarea { width: 100%; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); font: inherit; }

/* reviews */
.reviews-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.review { margin: 0; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(1.2rem,3vw,1.6rem); }
.review-stars { color: var(--copper); letter-spacing: .1em; margin: 0 0 .5rem; }
.review blockquote { margin: 0 0 .8rem; font-size: 1.1rem; line-height: 1.5; }
.review figcaption { font-weight: 600; color: var(--forest); }

/* gift cards */
.giftcards { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.giftcard { text-align: center; }
.giftcard-face { aspect-ratio: 16/10; border-radius: 10px; background: linear-gradient(135deg, var(--forest), var(--forest-2)); color: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; box-shadow: var(--shadow); margin-bottom: .8rem; }
.giftcard-logo { width: 68px; height: auto; margin-bottom: .15rem; }
.giftcard-amount { font-family: var(--display); font-size: 2.6rem; line-height: 1; }
.giftcard-brand { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }

/* on-tap list */
.tap-live { color: #2f8f4e; font-weight: 700; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; vertical-align: middle; }
.tap-section h2 { border-bottom: 2px solid var(--copper); padding-bottom: .3rem; }
.taplist { list-style: none; margin: 0 0 2rem; padding: 0; }
.tap-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.tap-name { font-family: var(--display); font-size: 1.2rem; color: var(--forest); }
.tap-style { color: var(--ink-soft); margin-left: .5rem; font-size: var(--step--1); }
.tap-meta { white-space: nowrap; color: var(--ink-soft); font-size: var(--step--1); }
.tap-abv { font-weight: 600; }
.tap-ibu { margin-left: .6rem; }

/* event card actions */
.event-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1rem; }
.event-actions .remind { display: flex; gap: .4rem; }
.event-actions .remind input { padding: .4rem .6rem; border: 1px solid var(--line); border-radius: var(--radius); font: inherit; }

/* ---------- grounds / property terrain ---------- */
.grounds { text-align: center; }
.grounds-lede { max-width: 64ch; margin-inline: auto; color: var(--ink-soft); }
.grounds-grid { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(208px, 1fr); gap: clamp(1.2rem,3vw,2rem); align-items: stretch; margin-top: 1.5rem; text-align: left; }
.grounds-terrain { margin: 0; display: flex; flex-direction: column; }
.grounds-terrain img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--sand); display: block; }
.grounds-terrain figcaption { margin-top: .5rem; font-size: var(--step--1); color: var(--ink-soft); font-style: italic; }
.grounds-list { align-self: start; }
.grounds-list h3 { margin-top: 0; color: var(--forest); }
.grounds-amenities { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.grounds-amenities li { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem 0; border-top: 1px solid var(--line); }
.grounds-amenities li:first-child { border-top: 0; }
.grounds-amenities .gi { display: block; }
.grounds-amenities strong { display: block; font-family: var(--display); font-size: 1.1rem; color: var(--forest); }
.grounds-amenities .gi > span { color: var(--ink-soft); font-size: var(--step--1); }
/* number badge — mirrors the numbered pins on the map */
.grounds-amenities .ln { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-top: .1rem; border-radius: 50%; background: var(--copper); color: #fff; font-family: var(--body); font-weight: 700; font-size: .72rem; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.grounds-amenities .ln--paw { background: transparent; color: var(--copper); box-shadow: none; font-size: 1rem; }
@media (max-width: 880px) { .grounds-grid { grid-template-columns: 1fr; } }

/* ---------- grounds 3D terrain viewer + area linking ---------- */
.grounds-3d { width: 100%; height: clamp(460px, 72vh, 780px); background: var(--paper-2); border: 1px solid var(--sand); border-radius: var(--radius); box-shadow: var(--shadow); --poster-color: var(--paper-2); }
@media (max-width: 880px) { .grounds-3d { height: 56vh; } }

.map-hotspot { background: none; border: 0; padding: 0; cursor: pointer; }
/* numbered marker — keyed to the list beside the map */
.hs-dot { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--copper); color: #fff; font-family: var(--body); font-weight: 700; font-size: .78rem; line-height: 1; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.45); transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.hs-label { position: absolute; left: 50%; bottom: 165%; transform: translateX(-50%); background: color-mix(in srgb, var(--paper) 92%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: var(--forest); font-family: var(--body); font-weight: 600; font-size: .74rem; letter-spacing: .01em; padding: .25rem .6rem; border: 1px solid color-mix(in srgb, var(--forest) 22%, transparent); border-radius: 14px; white-space: nowrap; box-shadow: 0 3px 10px rgba(0,0,0,.22); opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.hs-label::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: color-mix(in srgb, var(--paper) 92%, transparent); }
/* dim the rest once one area is active */
.grounds-3d.has-active .map-hotspot:not(.is-active) .hs-dot { opacity: .45; }
.map-hotspot.is-active .hs-dot { background: var(--forest); transform: scale(1.28); box-shadow: 0 0 0 7px color-mix(in srgb, var(--copper) 30%, transparent); }
.map-hotspot.is-active .hs-label { opacity: 1; }

.grounds-amenities li[data-zone] { cursor: pointer; padding-inline: .5rem; margin-inline: -.5rem; border-radius: var(--radius); transition: background .12s ease; }
.grounds-amenities li[data-zone]:hover,
.grounds-amenities li.is-active { background: color-mix(in srgb, var(--copper) 14%, transparent); }
.grounds-amenities li.is-active strong { color: var(--copper-dk); }

/* ---------- grounds calibration tool (?calibrate=1) ---------- */
.calib { margin-top: 1.5rem; padding: 1rem 1.2rem; border: 2px dashed var(--copper); border-radius: var(--radius); background: color-mix(in srgb, var(--copper) 6%, var(--paper)); text-align: left; }
.calib p { max-width: none; }
.calib-areas { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0; }
.calib-areas button { padding: .35rem .7rem; border: 1px solid var(--sand); border-radius: 16px; background: var(--paper); font: inherit; font-size: var(--step--1); cursor: pointer; }
.calib-areas button.on { background: var(--copper); color: #fff; border-color: var(--copper); }
.calib-status { font-size: var(--step--1); }
.calib textarea { width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: .8rem; border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem; background: #fff; }

/* calibration drag mode — labels always shown, dots grabbable */
.grounds-3d.calibrating .hs-label { opacity: 1; }
.grounds-3d.calibrating .map-hotspot { cursor: grab; touch-action: none; }
.grounds-3d.calibrating .map-hotspot:active { cursor: grabbing; }
.grounds-3d.calibrating .hs-dot { width: 28px; height: 28px; opacity: 1; }
.grounds-3d.calibrating.has-active .map-hotspot:not(.is-active) .hs-dot { opacity: .85; }

/* ---------- location photo modal ---------- */
.grounds-hint { font-size: var(--step--1); color: var(--ink-soft); font-style: italic; margin: -.3rem 0 1rem; }
.loc-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); }
.loc-modal[hidden] { display: none; }
.loc-backdrop { position: absolute; inset: 0; background: rgba(20,18,14,.72); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.loc-dialog { position: relative; margin: 0; max-width: 880px; width: 100%; background: var(--paper); border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); animation: locpop .18s ease; }
.loc-dialog img:not([hidden]), .loc-dialog video:not([hidden]) { width: 100%; max-height: 68vh; object-fit: cover; display: block; background:#000; }
.loc-dialog figcaption { padding: 1rem 1.2rem; }
.loc-dialog figcaption strong { display: block; font-family: var(--display); font-size: 1.4rem; color: var(--forest); margin-bottom: .15rem; }
.loc-dialog figcaption span { color: var(--ink-soft); }
.loc-close { position: absolute; top: .6rem; right: .6rem; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; box-shadow: none; }
.loc-close:hover { background: rgba(0,0,0,.82); transform: none; }
@keyframes locpop { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* on-tap live strip on the beer page */
.tap-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .8rem; background: color-mix(in srgb, var(--forest) 7%, var(--paper)); border: 1px solid var(--line); border-left: 3px solid #2f8f4e; border-radius: var(--radius); padding: .6rem .9rem; max-width: none; margin-bottom: 1.4rem; }
.tap-now-list { color: var(--ink-soft); font-size: var(--step--1); }

.spotify-embed { margin-top: .85rem; max-width: 540px; }
.spotify-embed iframe { display: block; width: 100%; border: 0; }

/* ---------- checkout (Square Web Payments SDK) ---------- */
.checkout { max-width: 980px; margin: 0 auto; padding: clamp(1.4rem, 4vw, 2.6rem) var(--gutter, 1.2rem); }
.checkout > h1 { font-family: var(--display); color: var(--forest); margin-bottom: 1.4rem; }
.checkout-grid { display: grid; grid-template-columns: 1fr; gap: 1.4rem; align-items: start; }
@media (min-width: 760px) { .checkout-grid { grid-template-columns: 1fr 1.1fr; } }
.checkout .card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.1rem, 3vw, 1.6rem); }
.checkout-summary h2, .checkout-pay h2 { font-family: var(--display); font-size: 1.25rem; color: var(--forest); margin: 0 0 .9rem; }
.checkout-rows { list-style: none; margin: 0 0 .6rem; padding: 0; }
.checkout-rows li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.checkout-rows .ck-item { color: var(--ink, #23201b); }
.checkout-rows .ck-line { color: var(--ink-soft); white-space: nowrap; }
.checkout-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: .8rem; }
.checkout-total strong { font-family: var(--display); font-size: 1.5rem; color: var(--forest); }
.checkout-note { font-size: var(--step--1); color: var(--ink-soft); margin-top: 1rem; }
.checkout-pay .field { display: block; font-size: var(--step--1); color: var(--ink-soft); margin-bottom: 1rem; }
.checkout-pay .field input { display: block; width: 100%; margin-top: .35rem; padding: .7rem .8rem; font-size: 1rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-sizing: border-box; }
.card-field { margin: .4rem 0 1.1rem; min-height: 52px; }

/* fulfillment + shipping address (#31) */
.ship-choice, .ship-fields { border: 1px solid var(--line); border-radius: 10px; padding: .9rem 1rem .4rem; margin-bottom: 1rem; }
.ship-choice legend, .ship-fields legend { padding: 0 .4rem; font-weight: 600; color: var(--ink-soft); }
.ship-choice .radio { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .6rem; font-size: var(--step--1); color: var(--ink); }
.ship-choice .radio input { accent-color: var(--copper); }
.ship-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .7rem; }
.checkout-ship-line { display: flex; justify-content: space-between; font-size: var(--step--1); color: var(--ink-soft); margin: .3rem 0 0; }
/* the display:flex above beats the UA [hidden] rule — restore it so the JS
   toggle (ship line shows only when "Ship to me" is picked) actually works. */
.checkout-ship-line[hidden] { display: none; }
.checkout-reward { margin: .7rem 0 0; padding: .6rem .8rem; border-left: 3px solid #d64545;
  background: color-mix(in srgb, #d64545 6%, var(--paper)); border-radius: 8px;
  font-size: var(--step--1); color: var(--ink); }
.wallets { margin-bottom: .4rem; }
.wallet-btn { margin-bottom: .6rem; min-height: 44px; }
#apple-pay-button { -apple-pay-button-style: black; -webkit-appearance: -apple-pay-button; appearance: -apple-pay-button; height: 48px; border-radius: 10px; cursor: pointer; }
.wallets-or { position: relative; text-align: center; color: var(--ink-soft); font-size: var(--step--1); margin: 1rem 0; }
.wallets-or::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--line); }
.wallets-or span { position: relative; background: var(--paper); padding: 0 .7rem; }
.btn--pay { width: 100%; margin-top: .2rem; font-size: 1.05rem; padding: .85rem 1rem; }
.btn--pay:disabled { opacity: .6; cursor: progress; }
.ck-status { min-height: 1.2em; margin: .7rem 0 0; font-size: var(--step--1); }
.ck-status--error { color: #b3261e; }
.ck-status--ok { color: #2f8f4e; }
.ck-secure { margin-top: 1rem; font-size: .8rem; color: var(--ink-soft); text-align: center; }

/* ---------- friends & family Caking-Fee waiver (#48) ---------- */
.ff-code { border: 1px dashed var(--forest); border-radius: 10px; padding: .8rem 1rem .9rem; margin: .2rem 0; }
.ff-code legend { font-weight: 600; padding: 0 .4rem; font-size: var(--step--1); }
.ff-hint { margin: .2rem 0 .6rem; font-size: var(--step--1); color: var(--ink-soft); }
.ff-row { display: flex; gap: .5rem; align-items: stretch; }
.ff-row input { flex: 1 1 auto; min-width: 0; text-transform: uppercase; }
.ff-row .btn { flex: 0 0 auto; padding: .55rem 1.1rem; }
.ff-status { min-height: 1.1em; margin: .5rem 0 0; font-size: var(--step--1); }
.ff-status--error { color: #b3261e; }
.ff-applied { margin: .5rem 0 0; font-size: var(--step--1); color: #2f8f4e; }
.link-btn { background: none; border: 0; padding: 0; color: var(--forest); font: inherit; text-decoration: underline; cursor: pointer; }

/* ---------- footer newsletter confirmation ---------- */
.footer-subscribed { color: var(--ink); font-weight: 600; }
.footer-suberr { color: #f3c0a8; font-size: var(--step--1); margin: .4rem 0 0; }

/* Honeypot for the footer signup form (apps.growth.antibot). Moved off-screen
   rather than display:none or visibility:hidden — scripts commonly skip fields
   hidden those two ways, which would defeat the trap. Kept out of the tab
   order and the accessibility tree by the markup (tabindex/aria-hidden). */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Smithy Phase-A additions ---------- */
/* The one conversion, outside the collapsible nav — always visible, even on
   mobile with the drawer closed (cart-reachability rule, adapted). */
.nav-book-cta { white-space: nowrap; }
@media (max-width: 820px) {
  .nav-book-cta { margin-left: auto; margin-right: .5rem; order: 1; padding: .65rem .95rem; }
  .nav-burger { order: 2; }
}
/* Slot-picker radios ride the same row layout the checkbox rule gives
   checkboxes (the skeleton rule only targeted [type=checkbox]). */
.checkbox input[type=radio] { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin: .15rem 0 0; padding: 0; }

/* Case-study cards are whole-card links — kill the inline-link styling. */
a.card { display: block; text-decoration: none; color: inherit; }
a.card:hover { box-shadow: var(--shadow); }

/* Functional input borders must hit 3:1 (WCAG 1.4.11) — --sand measures
   1.43:1 on paper; keep --sand for decorative card borders only. */
.stack-form input:not([type=checkbox]):not([type=radio]),
.stack-form select, .stack-form textarea { border-color: var(--border-input); }
/* The global steel focus ring is 2.23:1 on the dark footer field. */
.site-footer :focus-visible { outline-color: var(--paper); }

/* Steward portraits (real artwork from the workshop app) on crew cards. */
.crew-avatar { width: 96px; height: 96px; border-radius: 50%; box-shadow: var(--shadow); }
.founders .crew-avatar { margin: 0 0 .8rem; }

/* Marketing-UX pass (2026-07-27): the primary CTA must live above the fold
   at 1440x900 / 1280x800 / 390x844 — hero scaled accordingly (copy untouched). */
.hero { padding: clamp(1.8rem, 4vw, 3rem) 0 clamp(2rem, 5vw, 3.5rem); }
.page-home .hero { padding: clamp(.7rem, 1.2vw, .9rem) 0 clamp(.4rem, 1vw, .7rem); }
.hero h1 { font-size: clamp(2.6rem, 2rem + 3.2vw, 4.6rem); }
.hero .lede { max-width: 38ch; }
.hero-proof { font-size: var(--step--1); margin-top: .9rem; }
/* Slot picker grouped by week — first week open, rest collapsed (no JS). */
.slot-week { border: 1px solid var(--line); border-radius: var(--radius); padding: .3rem .8rem; margin: 0 0 .7rem; }
.slot-week summary { cursor: pointer; font-weight: 600; padding: .45rem 0; }
/* Django validation errors — visible, on-brand (P2-10). */
.errorlist { list-style: none; margin: .3rem 0 0; padding: .45rem .7rem; background: color-mix(in srgb, var(--copper) 10%, transparent); border-left: 3px solid var(--copper); color: var(--copper-dk); font-size: var(--step--1); }
/* Mobile: claim before image in bands; no fixed-attachment jank on iOS. */
@media (max-width: 720px) { .band img { order: 2; } }
@media (max-width: 820px) { body { background-attachment: scroll; } }

/* Live-console shots: contain, not crop — letterboxing vanishes on the
   near-black field the app itself uses. */
.band img.band-art-full { object-fit: contain; background: #101014; max-height: 480px; }

/* Station medallions: transparent renders — never crop, never box. */
.band img.band-medallion { object-fit: contain; background: none; box-shadow: none; border-radius: 0; max-height: 340px; }
.crew-avatar.crew-station { border-radius: 0; box-shadow: none; }

/* =====================================================================
   Banked Fire — polarity overrides (dark-field pass, 2026-07-27)
   ===================================================================== */
.site-footer { background: #020409; color: color-mix(in srgb, var(--ink) 88%, transparent); border-top: 1px solid var(--line); }
.site-footer :focus-visible { outline-color: #ffba08; }
:focus-visible { outline-color: #ffba08; }
.skip:focus { background: var(--copper); color: #1a0b00; }
.demo-ribbon { background: #9d0208; color: #f4f1eb; }
.msg--error, .errorlist { background: color-mix(in srgb, var(--ember-deep) 55%, transparent); border-left: 3px solid var(--flame-red); color: #ff9b7a; }
.msg--success { background: color-mix(in srgb, #14532d 40%, transparent); color: #b7e2c3; }
.hero::before { background: radial-gradient(60% 40% at 50% 110%, color-mix(in srgb, var(--copper) 22%, transparent), transparent 70%); }
.band img.band-art-full { background: #121418; }  /* the app's own slate */
.btn--ghost { color: var(--ink); border-color: var(--border-input); background: transparent; }
.btn--ghost:hover { border-color: var(--copper-dk); color: var(--copper-dk); background: transparent; }
.eyebrow { color: var(--copper-dk); }
.founder-role { color: var(--copper-dk); }
.pullquote blockquote::before, .pullquote blockquote::after { color: var(--copper); }
.slot-week { background: color-mix(in srgb, var(--paper-2) 60%, transparent); }
.stack-form input:not([type=checkbox]):not([type=radio]), .stack-form select, .stack-form textarea {
  background: var(--paper-2); color: var(--ink); border-color: var(--border-input); }
.stack-form ::placeholder { color: color-mix(in srgb, var(--ink) 45%, transparent); }
.footer-subscribe label { color: var(--ink); }
.partner-strip { background: color-mix(in srgb, var(--ember-deep) 30%, var(--paper)); border: 1px solid var(--line); }
.nav-burger span { background: var(--ink); }
.hero-proof, .muted { color: var(--ink-soft); }
.hero-proof a { color: var(--copper-dk); }
h1, h2, h3 { font-weight: 700; letter-spacing: 0; }
.hero h1 { font-weight: 900; }
/* numbers speak monospace — the app's convention */
.footer-meta, .booking-fineprint { font-feature-settings: "tnum"; }

/* Lighthouse pass (2026-07-27): footer text inherited paper-mix colors
   from the light skeleton — pin the parchment family explicitly. */
.site-footer, .site-footer p, .footer-tagline, .footer-meta { color: color-mix(in srgb, var(--ink) 88%, transparent); }
.site-footer h3 { color: var(--ink); }
.footer-sublinks a { color: var(--ink-soft); }
.footer-meta { color: var(--ink-soft); }
.footer-col a { color: var(--ink); }
.footer-bottom, .footer-bottom p { color: var(--ink-soft); }

/* Dark-execution round 2 (2026-07-27) */
:root { color-scheme: dark; }               /* native selects/scrollbars go dark */
::selection { background: #ffba08; color: #03071e; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--paper-2) inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
}
input[type=radio], input[type=checkbox] { accent-color: var(--copper); }
.checkbox { color: var(--ink); }
.footer-col a { overflow-wrap: anywhere; }
a.card { transition: border-color .18s ease, transform .18s ease; border-color: var(--line); }
a.card:hover { border-color: color-mix(in srgb, var(--copper-dk) 55%, transparent); transform: translateY(-2px); }
.btn[href^="mailto:"] { text-transform: none; letter-spacing: .02em; }
.intro--article { text-align: left; max-width: 62ch; margin-inline: auto; }
.intro--article h2 { text-align: left; }
/* /book/ two-column: reassurance left, form right; form-first on mobile */
.book-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,34rem); gap: clamp(1.5rem,4vw,3.5rem); align-items: start; }
.book-aside { position: sticky; top: 5.5rem; }
@media (max-width: 960px) { .book-layout { grid-template-columns: 1fr; } .book-aside { position: static; order: 2; } .book-form-col { order: 1; } }
/* NOTE: skeleton sections below the v2-features banner (.navbar, .savedate,
   .partner-feature, .giftcard*, checkout) are UNMIGRATED light-field code —
   migrate before enabling any of them (dark-pass round-2 finding #11). */

/* =====================================================================
   Design pass (2026-08-02): hero artifact, /book/ two-column, tier CTAs,
   typography polish — impact-ranked audit follow-through.
   ===================================================================== */

/* Headline widows ("…run / it.") and lone-word paragraph orphans. */
h1, h2, .pullquote blockquote { text-wrap: balance; }
p { text-wrap: pretty; }

/* The footer email must never break mid-address — overflow-wrap:anywhere
   above split hello@… across lines in the 481–820px two-column footer.
   The unbroken address needs more room than two columns give below
   ~640px, so the grid collapses to one column earlier than the 480px
   skeleton rule. */
.footer-col a[href^="mailto:"] { overflow-wrap: normal; }
@media (max-width: 640px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* Compact hero for utility/legal pages — "Terms of service." doesn't
   deserve a full viewport before any content. */
.hero--compact { padding: clamp(1.2rem, 3vw, 2rem) 0 .5rem; }
.hero--compact h1 { font-size: var(--step-4); }

/* ---------- home hero: copy left, Monday-digest artifact right ---------- */
.hero-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start;
}
@media (max-width: 960px) { .hero-split { grid-template-columns: 1fr; } }

.digest-card {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.2rem 1.3rem 1.1rem; font-feature-settings: "tnum";
}
.digest-card .digest-kicker {
  font-family: var(--body); text-transform: uppercase; letter-spacing: .16em;
  font-size: .68rem; font-weight: 700; color: var(--copper-dk); margin: 0 0 .2rem;
}
.digest-card .digest-title {
  font-family: var(--display); font-weight: 700; font-size: 1.25rem;
  color: var(--forest); margin: 0 0 .5rem;
}
.digest-rows { list-style: none; margin: 0; padding: 0; }
.digest-rows li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; padding: .5rem 0; border-top: 1px dashed var(--sand);
  font-size: var(--step--1);
}
.digest-rows li:first-child { border-top: 0; }
.digest-rows span { color: var(--ink-soft); }
.digest-rows strong { color: var(--forest); white-space: nowrap; }
.digest-rows .delta {
  font-style: normal; font-size: .7rem; font-weight: 700;
  color: #7dc99a; margin-left: .3rem;
}
.digest-driver {
  margin: .55rem 0 0; padding: .5rem .65rem; border-radius: 8px;
  font-size: var(--step--2); line-height: 1.45;
  background: color-mix(in srgb, var(--ridge) 12%, transparent);
  max-width: none;
}
.digest-driver span {
  font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  font-size: .62rem; color: var(--ridge); margin-right: .3rem;
}
.digest-driver + .digest-driver {
  background: color-mix(in srgb, var(--valley) 10%, transparent);
}
.digest-driver + .digest-driver span { color: var(--valley); }
.digest-card .digest-foot {
  margin: .7rem 0 0; font-size: var(--step--2); color: var(--ink-soft);
  font-style: italic;
}

/* ---------- "operated" band: sample text thread, owner's-eye view ---------- */
/* iPhone-style frame for the hero text thread. Bubble colors are
   deliberately literal iOS blue/gray, not brand tokens: the artifact
   reads as a real phone. */

/* ---------- see-it-live client showcase (CSS-only tabs) ---------- */
.sc-radio { position: absolute; opacity: 0; pointer-events: none; }
.logo-row label {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  cursor: pointer; width: 100%;
}
.showcase {
  margin-top: 0; background: var(--ink);
  border-radius: 0 0 12px 12px; padding: .9rem 1.1rem 1rem;
}
.sc-panel { display: none; margin: 0; }
.sc-panel img {
  width: 100%; height: auto; border-radius: 8px; display: block;
}
.sc-panel figcaption { margin-top: .5rem; font-size: var(--step--2); }
.sc-panel figcaption a { color: var(--copper); }
.sc-desc {
  margin: 0 0 .6rem; font-size: var(--step-0); max-width: none;
  color: color-mix(in srgb, var(--paper) 88%, transparent);
}
#sc-bt:checked ~ .showcase .sc-bt { display: block; }
#sc-bb:checked ~ .showcase .sc-bb { display: block; }
#sc-oc:checked ~ .showcase .sc-oc { display: block; }
#sc-ac:checked ~ .showcase .sc-ac { display: block; }
#sc-3n:checked ~ .showcase .sc-3n { display: block; }
#sc-bt:checked ~ .logo-row .t-bt,
#sc-3n:checked ~ .logo-row .t-3n,
#sc-bb:checked ~ .logo-row .t-bb,
#sc-oc:checked ~ .logo-row .t-oc,
#sc-ac:checked ~ .logo-row .t-ac {
  opacity: 1; border-top-color: var(--copper);
}
.sc-radio:focus-visible ~ .logo-row label { text-decoration: underline; }

.chef-quote {
  margin: 1.6rem auto 0; max-width: 44rem;
}
.chef-quote figcaption a { color: var(--copper-dk); }

.fineprint-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
}
.fineprint-grid li {
  background: color-mix(in srgb, var(--ridge) 9%, transparent);
  border-left-color: var(--ridge);
}
.fineprint-grid span { font-size: .95rem; }

/* ---------- services: hero menu key + cluster numbering ---------- */
.hero--menu { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .hero--menu { grid-template-columns: 1fr auto; } }
.menu-key { display: flex; flex-direction: column; min-width: 15rem; }
.menu-key a {
  display: flex; align-items: baseline; gap: .8rem;
  padding: .75rem .2rem; text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: 1.15rem;
  color: var(--ink); border-bottom: 1px solid var(--line);
  transition: transform .2s ease, color .2s ease;
}
.menu-key a:first-child { border-top: 1px solid var(--line); }
.menu-key a:hover { transform: translateX(4px); color: var(--copper-dk); }
.menu-key a span {
  font-family: var(--body); font-weight: 700; font-size: .78rem;
  letter-spacing: .1em; color: var(--copper-dk);
}
@media (max-width: 899px) {
  .menu-key { flex-direction: row; flex-wrap: wrap; gap: .5rem; }
  .menu-key a, .menu-key a:first-child {
    border: 1px solid var(--line); border-radius: 999px;
    padding: .5rem .85rem; font-size: .95rem;
  }
  .menu-key a:hover { transform: none; }
}
.svc-cluster { scroll-margin-top: 5rem; }
.cluster-no { color: var(--copper-dk); margin-right: .35rem; }
.svc summary::after { transition: transform .2s ease; }
.svc:not([open]) summary:hover::after { transform: translateY(3px); }

/* ---------- services: solo pricing finale ---------- */
.band--solo { display: block; text-align: center; }
.band--solo .band-body {
  max-width: 40rem; margin: 0 auto;
  background: color-mix(in srgb, var(--copper) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--copper) 25%, transparent);
  border-radius: 16px; padding: clamp(2rem, 5vw, 3rem);
}
.band--solo .band-body p { max-width: 34rem; margin-inline: auto; }
.band--solo .btn { margin-top: .6rem; }

/* ---------- services: tier cards act ---------- */
.tier { position: relative; }
.tier-cta { margin: .9rem 0 0; }
.tier-cta a { color: var(--copper-dk); font-weight: 600; text-decoration: none; }
.tier-cta a:hover { text-decoration: underline; }
  background: color-mix(in srgb, var(--copper) 6%, transparent);
}
  position: absolute; top: -.7rem; left: 1.1rem; margin: 0;
  background: var(--copper); color: #fff; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: .28rem .7rem;
}

/* ---------- homepage FAQ accordion ---------- */
.faq-list { max-width: 46rem; margin: 1.2rem auto 0; text-align: left; }
.faq-list details {
  border-bottom: 1px solid var(--line); padding: .3rem 0;
}
.faq-list summary {
  cursor: pointer; font-weight: 600; font-family: var(--display);
  font-size: var(--step-0); padding: .55rem 0; list-style: none;
  position: relative; padding-right: 2rem;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; position: absolute; right: .2rem; top: 50%;
  transform: translateY(-50%); color: var(--copper-dk);
  font-size: 1.2rem; font-weight: 400;
}
.faq-list details[open] summary::after { content: "\2212"; }
.faq-list details p {
  margin: 0 0 .8rem; max-width: none; color: var(--ink-soft);
  font-size: var(--step-0);
}
.sc-nav { display: none; }
.logo-sub { margin: -.15rem 0 .4rem; font-size: var(--step--2); color: var(--ink-soft); }
.logo-sub a { color: var(--copper-dk); }
html { scroll-behavior: smooth; }

/* ---------- closing CTA banner ---------- */
.cta-banner {
  text-align: center;
  background: linear-gradient(135deg, var(--copper), var(--copper-dk));
  border-radius: 18px;
  padding: clamp(2rem, 5vw, 3.2rem) clamp(1.2rem, 4vw, 2.5rem);
  margin: 2rem 0 1rem;
  box-shadow: 0 14px 40px color-mix(in srgb, var(--copper) 28%, transparent);
}
.cta-banner h2 {
  color: var(--paper); font-size: var(--step-2); margin-bottom: .35rem;
}
.cta-banner p {
  color: color-mix(in srgb, var(--paper) 82%, transparent);
  max-width: none; margin: 0 0 1.2rem; font-weight: 500;
}
.btn--invert {
  background: var(--paper); color: var(--ink);
}
.btn--invert:hover { background: color-mix(in srgb, var(--paper) 88%, var(--copper)); }
.cta-banner .cta-motto {
  margin: 1.4rem 0 0; font-size: var(--step--2);
  color: color-mix(in srgb, var(--paper) 60%, transparent);
}

/* ---------- homepage testimonial ---------- */
.testimonial {
  margin: 0 auto; max-width: 52rem; display: flex; align-items: center;
  gap: clamp(1.4rem, 3vw, 2.4rem); text-align: left; position: relative;
  background: color-mix(in srgb, var(--copper) 9%, var(--paper-2));
  border: 1px solid color-mix(in srgb, var(--copper) 30%, transparent);
  border-radius: 18px;
  padding: 2.2rem clamp(1.4rem, 3.5vw, 2.6rem) 1.8rem;
  box-shadow: var(--shadow);
}
.testimonial-body { position: relative; z-index: 0; }
.testimonial-body::before {
  content: "\201C"; position: absolute; top: -1rem; left: -.7rem;
  font-family: var(--display); font-size: 9rem; line-height: 1;
  color: var(--copper); opacity: .18; pointer-events: none;
  z-index: -1;
}
.testimonial-face {
  width: 108px; height: 108px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--copper); flex: none;
}
.testimonial blockquote {
  margin: 0 0 .9rem; font-family: var(--display);
  font-size: clamp(1.15rem, 1rem + .9vw, 1.55rem);
  line-height: 1.4; color: var(--forest); font-style: italic;
}
.testimonial figcaption {
  display: flex; align-items: center; gap: .6rem;
  font-size: var(--step--1); color: var(--ink-soft);
}
.testimonial-logo { height: 34px; width: auto; }
.testimonial figcaption strong { color: var(--ink); }
.intro .testimonial blockquote, .intro .testimonial-body p { max-width: none; margin-inline: 0; }
@media (max-width: 640px) {
  /* the face sits half above the card edge, like a wax seal */
  .testimonial {
    flex-direction: column; text-align: center;
    margin-top: 64px; padding-top: 1rem; gap: .9rem;
  }
  .testimonial figcaption { justify-content: center; }
  .testimonial-face { margin-top: -71px; }
  .testimonial-body { padding-top: .3rem; }
  .testimonial-body::before {
    top: -.4rem; left: -.4rem; font-size: 8rem; opacity: .2;
  }
}

/* ---------- alternating section tint for vertical rhythm ---------- */
section.tint {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  border: 1px solid var(--line); border-radius: 16px;
  padding: 1.6rem clamp(1.1rem, 3vw, 2rem) 1.8rem;
  margin: 1.6rem 0;
}
section.familiar.tint {
  background: color-mix(in srgb, var(--ridge) 9%, transparent);
  border-color: color-mix(in srgb, var(--ridge) 22%, transparent);
}
.familiar.tint .eyebrow { color: var(--ridge); }

/* ---------- does-this-feel-familiar: old way vs the text ---------- */
.familiar-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 1.6rem 2.4rem; margin: 1.6rem auto 0; text-align: left;
  max-width: 52rem;
}
.way h3 {
  font-size: .95rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .8rem;
}
.way ul { list-style: none; margin: 0; padding: 0; }
.way li { margin-bottom: .55rem; font-size: var(--step-0); }
.way--old li::before { content: "\2717\00a0\00a0"; color: var(--ink-soft); }
.way--old .way-sigh { color: var(--ink-soft); font-style: italic; }
.way--old .way-sigh::before { content: ""; }
.way--new .text-bubble {
  display: inline-block; margin-bottom: 1rem; max-width: none;
}
.way-checks li::before { content: "\2713\00a0\00a0"; color: var(--valley); font-weight: 700; }
.familiar .way p { max-width: none; margin-inline: 0; }

/* ---------- homepage what-we-do pillars ---------- */
.pillar-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  gap: 1.6rem 2.4rem; margin: 1.6rem 0 1.2rem; text-align: left;
}
.pillar h3 {
  font-size: 1.05rem; font-weight: 700; color: var(--valley);
  margin: 0 0 .5rem;
}
.intro .pillar p { max-width: none; margin-inline: 0; }
.pillar p { font-size: var(--step-0); margin-bottom: .6rem; }

.proof-panel {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border: 1px solid var(--line); border-radius: 16px;
  padding: .5rem 1.4rem 1rem; margin: .1rem 0 1.8rem;
}
.stat-row {
  list-style: none; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .4rem 2.2rem; margin: 1rem 0 0; padding: .9rem 0 0;
  border-top: 1px solid var(--line);
}
.stat-row li { display: flex; align-items: baseline; gap: .45rem; }
.stat-row strong {
  font-family: var(--display); font-size: 1.15rem; font-weight: 700;
  color: #d00000; /* ramp red — amber is a dark-field color; 1.8:1 on the parchment panel */
  line-height: 1;
  font-variant-numeric: lining-nums;
}
.stat-row span { font-size: var(--step--2); color: var(--ink-soft); }
.stat-row .stat-link { margin-left: auto; }
.stat-row .stat-link a { font-size: var(--step--2); color: #d00000; }
.logo-line {
  margin: 0 0 .3rem; font-size: var(--step-0); color: var(--ink);
  font-family: var(--display); font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
}
.logo-row {
  list-style: none; display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: .4rem; margin: .8rem 0 0; padding: 0;
}
.logo-row li {
  flex: 1 1 8rem;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .4rem;
  background: var(--ink); border-radius: 10px 10px 0 0;
  padding: .5rem .6rem .4rem; min-height: 4.3rem;
  opacity: .55; transition: opacity .15s ease;
  border-top: 3px solid transparent;
}
.logo-row li:hover { opacity: .8; }
.logo-row .t-3n { cursor: default; }
.logo-row img {
  height: 44px; width: auto; max-width: 7.5rem; object-fit: contain;
}
.logo-row li span {
  font-size: .8rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: color-mix(in srgb, var(--paper) 82%, transparent);
  white-space: nowrap;
}
.logo-row .logo-ink { filter: brightness(0); opacity: .85; }

.phone {
  position: relative; width: 238px; height: 486px;
  justify-self: end;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .5));
}
.phone-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 2;
}
.phone-screen {
  position: absolute; inset: 11px; border-radius: 30px;
  background: #fff; overflow: hidden; z-index: 1;
  display: flex; flex-direction: column;
  padding: 78px 10px 9px;
}
.phone-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 1;
  display: flex; align-items: center;
  padding: 38px 10px 5px; background: #fbfbfd;
  border-bottom: 1px solid #ececec;
}
.phone-back {
  color: #0a84ff; font-size: 1.25rem; font-weight: 500; line-height: 1;
  align-self: flex-end;
}
.phone-chat {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 3px;
}
.phone-avatars { display: flex; }
.phone-avatars img {
  width: 25px; height: 25px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid #fbfbfd;
}
.phone-avatars img + img { margin-left: -7px; }
.phone-chatname {
  font-family: var(--body); font-size: .58rem; font-weight: 600;
  color: #111; background: #e9eaee; border-radius: 9px;
  padding: 1.5px 8px;
}
.chatname-chev { color: #8e8e93; font-weight: 400; }
.phone-facetime { width: 21px; height: 14px; align-self: flex-end; margin-bottom: 3px; }
.phone-thread .text-bubble { max-width: 90%; font-size: .76rem; line-height: 1.3; }
.phone-thread {
  margin-top: auto; display: flex; flex-direction: column;
  gap: .5rem; padding-bottom: .5rem;
}
.reply-name {
  display: block; font-family: var(--body); font-size: .55rem;
  color: #8e8e93; margin: 0 0 2px 5px;
}
.reply-av {
  position: absolute; left: 0; bottom: 0; width: 20px; height: 20px;
  border-radius: 50%; object-fit: cover;
}
.phone-bar { display: flex; align-items: center; gap: 6px; }
.bar-plus {
  width: 23px; height: 23px; border-radius: 50%; background: #e9e9eb;
  color: #8e8e93; font-family: var(--body); font-size: .9rem;
  display: flex; align-items: center; justify-content: center; flex: none;
  line-height: 1;
}
.bar-field {
  flex: 1; height: 23px; border: 1px solid #d9d9de; border-radius: 12px;
  position: relative;
}
.bar-field svg {
  position: absolute; right: 7px; top: 4px; width: 9px; height: 15px;
}
.phone .dots { display: inline-flex; gap: 5px; padding: .2rem 0; }
.phone .dots i {
  width: 7px; height: 7px; border-radius: 50%; background: #8e8e93;
  display: block;
}
.phone .typing { display: none; }
.reply-wrap { position: relative; width: 100%; padding-left: 26px; }
.reply-wrap .typing { position: absolute; top: 11px; left: 26px; margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  /* iMessage choreography: sent texts just appear; each reply is
     preceded by the gray typing-indicator bubble, which collapses as
     the reply arrives. Layers stay unscaled to avoid compositor
     hairlines under the phone's 3D transform. */
  .phone .text-bubble { opacity: 0; }
  .phone.play .text-bubble {
    animation: bubble-in .35s ease forwards;
  }
  .phone .typing { display: block; opacity: 0; }
  .phone.play .typing {
    animation: typing-cycle 1.5s ease forwards;
  }
  .phone .typing .dots i { animation: dot-pulse 1s ease-in-out infinite; }
  .phone .typing .dots i:nth-child(2) { animation-delay: .18s; }
  .phone .typing .dots i:nth-child(3) { animation-delay: .36s; }
  .phone .reply-name, .phone .reply-av { opacity: 0; }
  .phone.play .reply-name, .phone.play .reply-av {
    animation: msg-reveal .3s ease forwards;
  }
  .rw1 .reply-av { animation-delay: 1.4s; }
  .rw1 .reply-name { animation-delay: 2.9s; }
  .rw2 .reply-av { animation-delay: 4.9s; }
  .rw2 .reply-name { animation-delay: 6.4s; }
  @keyframes msg-reveal { to { opacity: 1; } }
  .phone .m1 { animation-delay: .5s; }
  .phone .t1 { animation-delay: 1.4s; }
  .phone .m2 { animation-delay: 2.9s; }
  .phone .m3 { animation-delay: 4s; }
  .phone .t2 { animation-delay: 4.9s; }
  .phone .m4 { animation-delay: 6.4s; }
  @keyframes bubble-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes typing-cycle {
    0% { opacity: 0; }
    12% { opacity: 1; }
    82% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
  }
  @keyframes dot-pulse {
    0%, 100% { transform: translateY(0); opacity: .5; }
    50% { transform: translateY(-3px); opacity: 1; }
  }
}
.text-bubble {
  width: fit-content; max-width: 80%; margin: 0;
  padding: .42rem .85rem; border-radius: 17px;
  font-family: var(--body); font-size: .8rem; line-height: 1.3;
  font-weight: 400; letter-spacing: 0; text-align: left;
  text-wrap: pretty; hyphens: none;
}
.text--owner {
  align-self: flex-end; margin-left: auto;
  border-bottom-right-radius: 5px;
  background: #0b69d4; color: #fff;
}
.text--smithy {
  align-self: flex-start; border-bottom-left-radius: 5px;
  background: #e9e9eb; color: #111;
}
.text-bubble a { color: #0a5bd0; font-weight: 600; }
.text--owner a { color: #fff; }
.texts-foot {
  margin: .5rem auto 0; font-size: var(--step--2); color: var(--ink-soft);
  font-style: italic; max-width: none; text-align: center;
}
/* Mobile: claim before the sample thread — the site's `.band img { order: 2 }`
   convention no longer matches here since the band's img became the digest card. */
@media (max-width: 720px) { .digest-card { order: 2; } }

/* ---------- services tiers: scannable, equal-height, every tier acts ---------- */
.founder.tier { text-align: left; display: flex; flex-direction: column; }
.tier h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); }
.tier .tier-cta { margin: auto 0 0; padding-top: 1rem; }

/* ---------- /book/: aside notes + full-width submit ---------- */
.book-aside-note { font-size: var(--step--1); color: var(--ink-soft); margin: 1rem 0 0; }
.book-form-col button[type="submit"] { width: 100%; }

/* ---------- /work/ index: whole-card links must look clickable ---------- */
.card-more { color: var(--copper-dk); font-weight: 600; margin: .4rem 0 0; }
a.card:hover .card-more { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- /method/: the console shot's in-image labels are decorative
   at rendered size — name the stations in readable type. ---------- */
.station-key { font-size: var(--step--1); color: var(--ink-soft); }

/* =====================================================================
   Messaging rework (2026-08): home "what we actually do" plain-noun
   strip. Pill geometry borrowed from .social-pill, minus the hover
   invert — these are nouns, not links.
   ===================================================================== */
.noun-strip {
  list-style: none; margin: 1.4rem auto 1.2rem; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
  max-width: 54rem;
}
.noun-strip li {
  font-size: var(--step--1); font-weight: 600; color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 999px; padding: .3rem .85rem;
}

/* =====================================================================
   Services grid (2026-08): compact <details> tiles, click to expand.
   Native disclosure — keyboard-focusable, no JS. Card skin reused;
   the chevron is the expand affordance.
   ===================================================================== */
.svc-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(18.5rem, 1fr));
  margin-top: 1.2rem; align-items: start;
}
.svc {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  box-shadow: var(--shadow), 0 10px 28px -14px rgba(0, 0, 0, .65),
    inset 0 1px 0 rgba(244, 241, 235, .05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .25s ease;
}
.svc:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow), 0 16px 34px -14px rgba(0, 0, 0, .78),
    inset 0 1px 0 rgba(244, 241, 235, .07);
}
.svc[open] summary { border-radius: var(--radius) var(--radius) 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .svc[open] .svc-body { animation: svc-open .28s cubic-bezier(.22, 1.25, .32, 1); }
  @keyframes svc-open { from { opacity: 0; transform: translateY(-6px); } }
  .svc { interpolate-size: allow-keywords; }
  .svc::details-content {
    transition: height .3s cubic-bezier(.33, 1, .68, 1),
      content-visibility .3s allow-discrete;
    height: 0; overflow: clip;
  }
  .svc[open]::details-content { height: auto; }
}

.svc summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 1rem 2.6rem 1rem 1.2rem; border-radius: var(--radius);
}
.svc summary::-webkit-details-marker { display: none; }
.svc summary::after {  /* chevron: points down closed, up open */
  content: ""; position: absolute; right: 1.2rem; top: 1.45rem;
  width: .5rem; height: .5rem;
  border-right: 2px solid var(--copper-dk);
  border-bottom: 2px solid var(--copper-dk);
  transform: rotate(45deg); transition: transform .18s ease;
}
.svc[open] summary::after { transform: translateY(.25rem) rotate(225deg); }
.svc summary:hover { background: color-mix(in srgb, var(--copper) 8%, transparent); }
.svc[open] { border-color: color-mix(in srgb, var(--copper-dk) 55%, transparent); }
.svc-name {
  display: block; margin: 0; font-family: var(--display); font-weight: 700;
  font-size: 1.15rem; line-height: 1.2; color: var(--forest);
}
.svc-hook {
  display: block; margin-top: .2rem;
  color: var(--ink-soft); font-size: var(--step--1);
}
.svc-body { padding: 0 1.2rem 1.1rem; }
.svc-body p { margin: 0; color: var(--ink-soft); font-size: var(--step--1); }

/* ---------- scroll-reveal choreography ---------- */
/* Only when the script confirms support (html.reveal-on): sections
   sweep in from alternating sides; the comparison columns split apart;
   staggered children on the marquee rows. Reduced-motion and no-JS
   visitors see everything immediately. overflow-x: clip keeps the
   offstage sections from widening the page. */
.reveal-on { --slide: min(24vw, 220px); }
.reveal-on main { overflow-x: clip; }
.reveal-on main > section:not(.hero) {
  /* The page-load rise animation would sit above these transitions in
     the cascade (finished animation + fill: both) and freeze every
     section at its final keyframe, so it must be off here. */
  animation: none;
  opacity: 0;
  --dx: calc(-1 * var(--slide));
  transform: translateX(var(--dx));
  /* Slight overshoot on the slide; the .in rule below must beat every
     offstage transform, so direction is carried in --dx rather than a
     higher-specificity nth-of-type transform. */
  transition: opacity .8s cubic-bezier(.33, 1, .68, 1),
    transform 1s cubic-bezier(.22, 1.25, .32, 1);
}
.reveal-on main > section:nth-of-type(even):not(.hero) { --dx: var(--slide); }
.reveal-on main > section.cta-banner,
.reveal-on main > section.band--solo {
  transform: translateY(70px) scale(.96);
}
/* tile pages: gentler section drift so it doesn't compound with the
   tile rise */
.reveal-on main > section.svc-cluster { --slide: min(12vw, 110px); }
/* The comparison sections only fade; their columns do the moving. */
.reveal-on main > section.familiar { transform: none; }
.reveal-on main > section.in { opacity: 1; transform: none; }
/* Comparison sections: the columns pull in from opposite sides. */
.reveal-on .familiar .way--old,
.reveal-on .familiar .way--new {
  opacity: 0;
  transition: opacity .8s cubic-bezier(.33, 1, .68, 1) .12s,
    transform 1s cubic-bezier(.22, 1.25, .32, 1) .12s;
}
.reveal-on .familiar .way--old { transform: translateX(calc(-.8 * var(--slide))); }
.reveal-on .familiar .way--new { transform: translateX(calc(.8 * var(--slide))); }
.reveal-on section.in .way--old,
.reveal-on section.in .way--new { opacity: 1; transform: none; }
.reveal-on .svc,
.reveal-on .founder {
  opacity: 0; transform: translateY(30px);
  transition: opacity .65s cubic-bezier(.16, 1, .3, 1),
    transform .65s cubic-bezier(.16, 1, .3, 1);
}
.reveal-on section.in .svc,
.reveal-on section.in .founder { opacity: 1; transform: none; }
.reveal-on section.in .svc:nth-child(2),
.reveal-on section.in .founder:nth-child(2) { transition-delay: .16s; }
.reveal-on section.in .svc:nth-child(3),
.reveal-on section.in .founder:nth-child(3) { transition-delay: .32s; }
.reveal-on section.in .svc:nth-child(4) { transition-delay: .48s; }
.reveal-on section.in .svc:nth-child(5),
.reveal-on section.in .svc:nth-child(6) { transition-delay: .64s; }
.reveal-on .logo-row li,
.reveal-on .stat-row li,
.reveal-on .fineprint-grid li,
.reveal-on .pillar {
  opacity: 0; transform: translateY(30px);
  transition: opacity .65s cubic-bezier(.16, 1, .3, 1),
    transform .65s cubic-bezier(.16, 1, .3, 1);
}
.reveal-on section.in .logo-row li,
.reveal-on section.in .stat-row li,
.reveal-on section.in .fineprint-grid li,
.reveal-on section.in .pillar { opacity: 1; transform: none; }
.reveal-on section.in .logo-row li:nth-child(2),
.reveal-on section.in .stat-row li:nth-child(2),
.reveal-on section.in .fineprint-grid li:nth-child(2),
.reveal-on section.in .pillar:nth-child(2) { transition-delay: .16s; }
.reveal-on section.in .logo-row li:nth-child(3),
.reveal-on section.in .stat-row li:nth-child(3),
.reveal-on section.in .fineprint-grid li:nth-child(3),
.reveal-on section.in .pillar:nth-child(3) { transition-delay: .32s; }
.reveal-on section.in .logo-row li:nth-child(4),
.reveal-on section.in .stat-row li:nth-child(4),
.reveal-on section.in .fineprint-grid li:nth-child(4),
.reveal-on section.in .pillar:nth-child(4) { transition-delay: .48s; }
.reveal-on section.in .logo-row li:nth-child(5),
.reveal-on section.in .fineprint-grid li:nth-child(5) { transition-delay: .64s; }

/* ---------- showcase live-phone cards + stories mode ---------- */
.sc-shot, .sc-top, .sc-back, .sc-punch, .sc-note, .sc-stat { display: none; }
@media (max-width: 700px) {
  /* flat screenshots give way to the framed live phones; the module
     sheds its wrapper text and fits one screen so the swipe is obvious */
  .sc-panel > a, .sc-panel figcaption, .sc-panel .sc-flat,
  .logo-line, .logo-sub, .sc-desc { display: none; }
  /* the module is a full-bleed parchment band, not a floating card */
  .proof-panel {
    margin: .1rem calc(50% - 50vw) 1.8rem; border: none; border-radius: 0;
    padding: .7rem 1.1rem .85rem; background: var(--ink); color: #1c2025;
  }
  .sc-punch, .sc-note, .sc-stat { display: block; }
  .sc-back { display: inline-flex; }
  .sc-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: .6rem; margin-bottom: .25rem;
  }
  .sc-top .sc-head { margin: 0; }
  .sc-top .sc-head img { height: 24px; }
  .showcase { background: none; border-radius: 0; padding: 0; }
  .proof-panel .stat-row { border-top-color: rgba(28, 32, 37, .15); }
  .proof-panel .stat-row span { color: #4a4f57; }
  .proof-panel .midcta { border-top-color: rgba(28, 32, 37, .14); }
  .showcase .sc-panel { flex: 0 0 92%; }
  .sc-back {
    display: inline-flex; align-items: center; gap: .3rem;
    background: none; border: none; padding: 0;
    font: inherit; font-size: .78rem; font-weight: 700;
    color: var(--copper); cursor: pointer;
  }
  .sc-intro .sc-back { display: none; }
  .sc-punch {
    margin: 0 0 .15rem; font-family: var(--display); font-weight: 700;
    font-size: 1.05rem; color: #1c2025;
  }
  .sc-note {
    margin: 0 0 .45rem; font-size: .82rem; line-height: 1.4;
    color: #4a4f57;
  }
  .sc-shot {
    display: block; position: relative; margin: .1rem 0 .45rem;
    aspect-ratio: 5 / 6; overflow: hidden; border-radius: 12px;
    box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .45);
    border: 1px solid rgba(28, 32, 37, .12);
  }
  .sc-shot img {
    width: 100%; height: 100%; object-fit: cover; object-position: top;
    display: block;
  }
  .sc-shot--wide { aspect-ratio: auto; }
  .sc-shot--wide img { height: auto; }
  .sc-domain {
    position: absolute; bottom: .55rem; left: 50%; transform: translateX(-50%);
    background: rgba(5, 7, 15, .68); color: #fff;
    font-size: .6rem; font-weight: 600; letter-spacing: .02em;
    padding: .24rem .65rem; border-radius: 999px; white-space: nowrap;
  }
  /* the cover rides a LIGHT panel surface: colors are explicit,
     not the dark-theme tokens */
  .showcase .sc-panel.sc-intro {
    display: flex !important; flex-direction: column;
    justify-content: center;
  }
  .sc-cover { padding: .4rem .2rem; }
  .sc-cover-title {
    margin: 0 0 1.1rem; font-family: var(--display); font-weight: 700;
    font-size: 1.3rem; line-height: 1.3; color: #1c2025;
  }
  .sc-cover-logos { list-style: none; margin: 0; padding: 0; }
  .sc-cover-logos button {
    display: flex; align-items: center; gap: .8rem; width: 100%;
    background: none; border: none; border-top: 1px solid rgba(28, 32, 37, .14);
    padding: .65rem .1rem; font: inherit; font-weight: 600;
    color: #1c2025; text-align: left;
  }
  .sc-cover-logos li:last-child button { border-bottom: 1px solid rgba(28, 32, 37, .14); }
  .sc-cover-logos img {
    height: 30px; width: 44px; object-fit: contain;
    background: #fff; border: 1px solid rgba(28, 32, 37, .1);
    border-radius: 6px; padding: 3px;
  }
  /* 3N's mark is white-on-full-bleed: dark tile, no ink filter */
  .sc-cover-logos .logo-ink {
    filter: none; opacity: 1; background: #0b0c0f;
    border-color: #0b0c0f;
  }
  .sc-cover-logos em {
    margin-left: auto; font-style: normal; color: var(--copper);
    font-weight: 700;
  }
  .sc-swipe {
    margin: .9rem 0 0; text-align: center; font-size: .78rem;
    color: rgba(28, 32, 37, .75);
  }
  .sc-swipe span { display: inline-block; color: var(--copper); }
  .sc-stat {
    text-align: center; margin: 0 0 .3rem; font-weight: 700;
    font-size: .8rem; color: var(--copper);
  }
}
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  .sc-swipe span { animation: swipe-nudge 1.6s ease-in-out infinite; }
}
@keyframes swipe-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

/* ---------- mid-page CTAs + panel heads ---------- */
.midcta {
  text-align: center; margin: 2.8rem auto .4rem; padding-top: 1.8rem;
  border-top: 1px solid var(--line); max-width: 34rem;
}
.midcta .btn { display: inline-block; }
.midcta-note { margin: .65rem 0 0; font-size: var(--step--1); }
.cta-fine {
  margin: .8rem 0 0; font-size: var(--step--2);
  color: color-mix(in srgb, var(--paper) 75%, transparent);
}
.sc-head { display: none; }

/* ---------- homepage mobile pass ---------- */
@media (max-width: 700px) {
  .page-home .hero { padding: 1.3rem 0 1.6rem; }
  .hero-split { gap: 2rem; }
  .phone { justify-self: center; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { text-align: center; }
  .site-header { gap: .55rem; }
  .brand { font-size: 1.15rem; flex: 0 1 auto; min-width: 0; }
  .nav-book-cta {
    font-size: .68rem; padding: .55rem .7rem; letter-spacing: .02em;
  }
  .stat-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem;
  }
  .stat-row li { flex-direction: column; align-items: flex-start; gap: .15rem; }
  .stat-row strong { font-size: 1.6rem; }
  .stat-row .stat-link { grid-column: 1 / -1; margin-left: 0; }
  .pillar-grid { gap: 0; }
  .pillar { border-top: 1px solid var(--line); padding: 1.1rem 0; }
  .pillar:first-child { border-top: none; padding-top: 0; }
  .pillar h3 { font-size: 1.2rem; font-family: var(--display); }
  main > section + section { margin-top: 3.2rem; }
  section.tint { margin: 2.4rem 0; }
  /* the tab strip gives way to a swipeable carousel with arrows */
  .logo-row { display: none; }
  .showcase {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: .9rem; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .showcase::-webkit-scrollbar { display: none; }
  /* !important outranks the #sc-*:checked tab rules; on phones every
     panel lives in the scroll track */
  .showcase .sc-panel { display: block !important; flex: 0 0 100%; scroll-snap-align: center; }
  .sc-nav { display: flex; align-items: center; justify-content: center; gap: 1.1rem; margin-top: .45rem; }
  .sc-nav button {
    background: none; border: 1.5px solid color-mix(in srgb, currentColor 35%, transparent);
    border-radius: 50%; width: 2.6rem; height: 2.6rem; color: inherit;
    font-size: 1.5rem; line-height: 1; padding: 0 0 .2rem;
  }
  .sc-dots { display: flex; gap: .5rem; }
  .sc-dots i {
    width: .5rem; height: .5rem; border-radius: 50%;
    background: color-mix(in srgb, currentColor 28%, transparent);
  }
  .sc-dots i.on { background: var(--copper); }
  .sc-head {
    display: flex; align-items: center; gap: .55rem;
    margin: 0 0 .45rem; font-family: var(--body);
    font-size: .72rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: #33383f; text-align: left;
  }
  .sc-head img { height: 30px; width: auto; max-width: 5.5rem; object-fit: contain; }
  .sc-head .logo-ink { filter: brightness(0); opacity: .85; }
  .hero-split { overflow-x: clip; }
  .phone { transform: scale(1.08); transform-origin: top center; margin-bottom: 2.6rem; }
  .fineprint-grid { grid-template-columns: 1fr; gap: .7rem; }
  .fineprint-grid li { text-align: left; padding: .8rem 1rem; }
  .faq-list summary { padding: .8rem 2rem .8rem 0; }
  .brand { white-space: nowrap; }
}
@media (max-width: 700px) {
  .reveal-on main > section.svc-cluster { --slide: min(16vw, 90px); }
  .reveal-on .svc, .reveal-on .founder { transform: translateY(22px); }
}
@media (max-width: 380px) {
  .brand { font-size: 1.02rem; }
  .site-header { gap: .5rem; }
  .nav-book-cta { font-size: .63rem; padding: .5rem .55rem; }
}

/* =====================================================================
   Services section vignettes (issue #9, 2026-09) — four animated
   inline-SVG scenes on /services/, one per .svc-cluster, included as
   templates/pages/_svc_viz_*.html. Everything is scoped under .svc-viz;
   nothing here can leak to other pages.

   Choreography pattern: BASE STYLES ARE THE END STATE — the finished,
   meaningful frame that reduced-motion (and any no-animation) visitors
   see. All motion lives inside the prefers-reduced-motion:no-preference
   block: shared keyframes + per-element phase delays. Every element in
   a scene runs the SAME duration (9/10/11/12s per scene), so the loop
   stays coherent; animation-fill-mode: backwards holds each element at
   its first frame until its cue. Late elements wrap phase into the next
   cycle on purpose — the scene dissolves and rebuilds in cause order.
   ===================================================================== */
.svc-viz { display: block; width: 100%; max-width: 44rem; height: auto; margin: 1.7rem auto .3rem; }
.svc-viz--numbers { max-width: 47rem; }
.svc-viz text { font-family: var(--body); }
.svc-viz .viz-mono { font-family: var(--mono); font-feature-settings: "tnum"; }
.svc-viz .viz-ink { fill: var(--ink); }
.svc-viz .viz-soft { fill: var(--ink-soft); }
.svc-viz .viz-panel { fill: var(--paper-2); stroke: var(--line); }
.svc-viz .viz-guide { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; }
.svc-viz .viz-tb { transform-box: fill-box; transform-origin: center; }

/* ---- 01 storefront: one text, four destinations ---- */
/* Deliberate literal iOS blue — house precedent: .text--owner on home. */
.sf-bubble-bg { fill: #0a84ff; }
.sf-photo { fill: #0b0c0f; stroke: rgba(255, 255, 255, .16); }
.sf-chalk { fill: none; stroke: color-mix(in srgb, var(--ink) 80%, transparent); stroke-width: 2; stroke-linecap: round; }
.sf-chalk--c { stroke: var(--copper-dk); }
.sf-hub { fill: var(--copper); }
.sf-wire { fill: none; stroke: var(--copper-dk); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100; }
.sf-halo { fill: none; stroke: var(--copper-dk); stroke-width: 1.5; opacity: .85; }
.sf-ring { fill: color-mix(in srgb, var(--valley) 14%, transparent); stroke: color-mix(in srgb, var(--valley) 55%, transparent); stroke-width: 1.5; }
.sf-check { fill: none; stroke: var(--valley); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; }
.sf-m2, .sf-m3 { opacity: 0; }

/* ---- 02 money: four orders, one register ---- */
.mv-tee { fill: var(--ridge); }
.mv-tee-seam { fill: none; stroke: color-mix(in srgb, var(--paper) 45%, transparent); stroke-width: 1.5; stroke-linecap: round; }
.mv-gift { fill: var(--forest-2); }
.mv-ribbon { fill: var(--copper); }
.mv-giftamt { fill: var(--paper); }
.mv-ticket { fill: var(--ember-deep); stroke: color-mix(in srgb, var(--copper-dk) 45%, transparent); stroke-width: 1.5; }
.mv-perf { fill: none; stroke: var(--copper-dk); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: .6; }
.mv-admit { fill: var(--copper-dk); }
/* hardware tones from the hand-built phone frame's own bezel palette */
.mv-phone { fill: #0b0c0f; stroke: #3a3d44; }
.mv-phone-scr { fill: var(--paper-2); }
.mv-phone-notch { fill: #0b0c0f; }
.mv-phone-line { fill: var(--ink-soft); opacity: .8; }
.mv-phone-pay { fill: var(--copper); }
.mv-paper-bg { fill: var(--ink); }
.mv-line { fill: color-mix(in srgb, var(--paper) 55%, transparent); }
.mv-stand { fill: #26282e; }
.mv-slot { fill: #0b0c0f; }
.mv-drawer { stroke: var(--line); }
.mv-knob { fill: var(--ink-soft); opacity: .5; }
.mv-screen { fill: #0b0c0f; stroke: #3a3d44; }
.mv-screen-tag { fill: var(--ink-soft); }
.mv-glow { fill: none; stroke: var(--copper); stroke-width: 3; opacity: 0; }
.mv-plus { fill: var(--copper-dk); }
/* end state shows the last sale rung up; earlier blips are transient */
.mv-p1, .mv-p2, .mv-p3 { opacity: 0; }
.mv-i1 { transform: translate(84px, 30px); }
.mv-i2 { transform: translate(84px, 90px); }
.mv-i3 { transform: translate(84px, 150px); }
.mv-i4 { transform: translate(84px, 210px); }

/* ---- 03 door: a program posts, the room fills ---- */
.dr-head { fill: color-mix(in srgb, var(--copper) 20%, transparent); }
.dr-head-label { fill: var(--copper-dk); }
.dr-dot { fill: var(--copper-dk); }
.dr-dot--v { fill: var(--valley); }
.dr-always { fill: var(--valley); }
.dr-rule { stroke: var(--line); }
.dr-ping { fill: none; stroke: var(--copper); stroke-width: 2; opacity: 0; }
.dr-floor { fill: color-mix(in srgb, var(--ink) 5%, transparent); }
.dr-glow { fill: var(--copper); opacity: .08; }
.dr-walls { fill: none; stroke: color-mix(in srgb, var(--ink) 34%, transparent); stroke-width: 2.5; stroke-linecap: round; }
.dr-arc { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 3 5; }
.dr-leaf { stroke: var(--ink-soft); stroke-width: 3; stroke-linecap: round; transform-box: view-box; transform-origin: 320px 142px; }
.dr-bar { fill: color-mix(in srgb, var(--ember-deep) 70%, transparent); stroke: var(--line); }
.dr-table { fill: color-mix(in srgb, var(--ink) 8%, transparent); stroke: color-mix(in srgb, var(--ink) 30%, transparent); stroke-width: 1.5; }
.dr-outs circle { fill: color-mix(in srgb, var(--ink) 6%, transparent); stroke: var(--line); stroke-width: 1.2; }
.dr-seat { fill: var(--copper-dk); stroke: var(--paper); stroke-width: 1.5; }
.dr-seat--v { fill: var(--valley); }

/* ---- 04 numbers: post → visits → sales → verdict ---- */
.nm-avatar { fill: color-mix(in srgb, var(--ridge) 40%, transparent); }
.nm-namebar { fill: color-mix(in srgb, var(--ink) 75%, transparent); }
.nm-subbar, .nm-capbar { fill: var(--ink-soft); opacity: .5; }
.nm-photo { fill: color-mix(in srgb, var(--ember-deep) 55%, transparent); stroke: var(--line); }
.nm-sun { fill: var(--copper-dk); opacity: .9; }
.nm-hills { fill: color-mix(in srgb, var(--ridge) 30%, transparent); }
.nm-heart { fill: var(--flame-red); opacity: .9; }
.nm-arrow { fill: none; stroke: var(--copper-dk); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; }
.nm-kicker-visits { fill: var(--ridge); }
.nm-kicker-sales { fill: var(--copper-dk); }
.nm-axis { stroke: var(--line); }
.nm-area { fill: color-mix(in srgb, var(--ridge) 18%, transparent); }
.nm-spark { fill: none; stroke: var(--ridge); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; }
.nm-dot { fill: var(--ridge); }
.nm-dotring { fill: none; stroke: var(--ridge); stroke-width: 2; opacity: 0; }
.nm-bar { fill: color-mix(in srgb, var(--ink) 26%, transparent); }
.nm-bar4 { fill: var(--copper); transform-box: fill-box; transform-origin: 50% 100%; }
.nm-delta { fill: var(--valley); }
.nm-return { fill: none; stroke: color-mix(in srgb, var(--copper-dk) 75%, transparent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; }
.nm-chip-bg { fill: color-mix(in srgb, var(--copper) 12%, transparent); stroke: var(--copper-dk); stroke-width: 1.5; }
.nm-chip-halo { fill: none; stroke: var(--copper); stroke-width: 3; opacity: .45; }
.nm-chip-label { fill: var(--copper-dk); }

/* ---- motion (everything below is additive; base = frozen end state) ---- */
@media (prefers-reduced-motion: no-preference) {
  /* shared verbs */
  @keyframes viz-pop     { 0% { opacity: 0; transform: translateY(8px); } 5% { opacity: 1; transform: none; } 86% { opacity: 1; } 93%, 100% { opacity: 0; } }
  @keyframes viz-appear  { 0% { opacity: 0; } 5% { opacity: 1; } 86% { opacity: 1; } 93%, 100% { opacity: 0; } }
  @keyframes viz-blip    { 0% { opacity: 0; transform: translateY(4px); } 3% { opacity: 1; transform: none; } 12% { opacity: 1; } 16%, 100% { opacity: 0; } }
  @keyframes viz-draw    { 0% { stroke-dashoffset: 100; opacity: 1; } 9% { stroke-dashoffset: 0; } 86% { opacity: 1; } 93%, 100% { opacity: 0; } }
  @keyframes viz-draw-slow { 0% { stroke-dashoffset: 100; opacity: 1; } 16% { stroke-dashoffset: 0; } 86% { opacity: 1; } 93%, 100% { opacity: 0; } }
  @keyframes viz-halo    { 0% { opacity: 0; } 5% { opacity: .85; } 86% { opacity: .85; } 93%, 100% { opacity: 0; } }
  @keyframes viz-ping    { 0% { opacity: 0; transform: scale(.5); } 3% { opacity: .9; transform: scale(1); } 12%, 100% { opacity: 0; transform: scale(2.4); } }
  @keyframes viz-pulse   { 0% { transform: scale(1); } 2.5% { transform: scale(1.35); } 5% { transform: scale(1); } 7.5% { transform: scale(1.22); } 10%, 100% { transform: scale(1); } }
  @keyframes viz-seat    { 0% { opacity: 0; transform: scale(0); } 3% { opacity: 1; transform: scale(1.25); } 5% { transform: scale(1); } 86% { opacity: 1; transform: scale(1); } 93%, 100% { opacity: 0; transform: scale(.5); } }
  @keyframes viz-glow    { 0% { opacity: 0; } 6% { opacity: .08; } 84% { opacity: .08; } 92%, 100% { opacity: 0; } }
  @keyframes viz-grow    { 0% { transform: scaleY(.5); } 5% { transform: scaleY(1.07); } 8%, 100% { transform: scaleY(1); } }

  /* 01 storefront — 9s cycle: text pops (0s), wires fire at 1.0/2.25/3.5/
     4.75s, each chip halo+check lands ~.9s behind its wire; long lit hold. */
  .sf-bubble    { animation: viz-pop 9s ease infinite backwards; }
  .sf-delivered { animation: viz-appear 9s ease infinite backwards; animation-delay: .6s; }
  /* Wires/halos/checks carry their stagger INSIDE one shared 9s clock
     (no animation-delay: a delayed infinite cycle holds its lit phase into
     the NEXT message's pass; the message slot cycles, so every element must
     dissolve together at 86-93%). */
  @keyframes sf-wire-1 { 0%, 11.1% { stroke-dashoffset: 100; } 20.1% { stroke-dashoffset: 0; } 86% { opacity: 1; } 93%, 100% { opacity: 0; stroke-dashoffset: 0; } }
  @keyframes sf-wire-2 { 0%, 25%   { stroke-dashoffset: 100; } 34%   { stroke-dashoffset: 0; } 86% { opacity: 1; } 93%, 100% { opacity: 0; stroke-dashoffset: 0; } }
  @keyframes sf-wire-3 { 0%, 38.9% { stroke-dashoffset: 100; } 47.9% { stroke-dashoffset: 0; } 86% { opacity: 1; } 93%, 100% { opacity: 0; stroke-dashoffset: 0; } }
  @keyframes sf-wire-4 { 0%, 52.8% { stroke-dashoffset: 100; } 61.8% { stroke-dashoffset: 0; } 86% { opacity: 1; } 93%, 100% { opacity: 0; stroke-dashoffset: 0; } }
  @keyframes sf-halo-1 { 0%, 20.6% { opacity: 0; } 25.6%, 86% { opacity: .85; } 93%, 100% { opacity: 0; } }
  @keyframes sf-halo-2 { 0%, 34.4% { opacity: 0; } 39.4%, 86% { opacity: .85; } 93%, 100% { opacity: 0; } }
  @keyframes sf-halo-3 { 0%, 48.3% { opacity: 0; } 53.3%, 86% { opacity: .85; } 93%, 100% { opacity: 0; } }
  @keyframes sf-halo-4 { 0%, 62.2% { opacity: 0; } 67.2%, 86% { opacity: .85; } 93%, 100% { opacity: 0; } }
  @keyframes sf-check-1 { 0%, 21.7% { stroke-dashoffset: 100; } 30.7% { stroke-dashoffset: 0; } 86% { opacity: 1; } 93%, 100% { opacity: 0; stroke-dashoffset: 0; } }
  @keyframes sf-check-2 { 0%, 35.6% { stroke-dashoffset: 100; } 44.6% { stroke-dashoffset: 0; } 86% { opacity: 1; } 93%, 100% { opacity: 0; stroke-dashoffset: 0; } }
  @keyframes sf-check-3 { 0%, 49.4% { stroke-dashoffset: 100; } 58.4% { stroke-dashoffset: 0; } 86% { opacity: 1; } 93%, 100% { opacity: 0; stroke-dashoffset: 0; } }
  @keyframes sf-check-4 { 0%, 63.3% { stroke-dashoffset: 100; } 72.3% { stroke-dashoffset: 0; } 86% { opacity: 1; } 93%, 100% { opacity: 0; stroke-dashoffset: 0; } }
  .sf-w1 { animation: sf-wire-1 9s ease infinite; }  .sf-w2 { animation: sf-wire-2 9s ease infinite; }
  .sf-w3 { animation: sf-wire-3 9s ease infinite; }  .sf-w4 { animation: sf-wire-4 9s ease infinite; }
  .sf-h1 { animation: sf-halo-1 9s ease infinite; }  .sf-h2 { animation: sf-halo-2 9s ease infinite; }
  .sf-h3 { animation: sf-halo-3 9s ease infinite; }  .sf-h4 { animation: sf-halo-4 9s ease infinite; }
  .sf-c1 { animation: sf-check-1 9s ease infinite; } .sf-c2 { animation: sf-check-2 9s ease infinite; }
  .sf-c3 { animation: sf-check-3 9s ease infinite; } .sf-c4 { animation: sf-check-4 9s ease infinite; }
  @keyframes sf-gate { 0%, 32.5% { opacity: 1; } 33.3%, 100% { opacity: 0; } }
  .sf-msg { animation: sf-gate 27s linear infinite; }
  .sf-m2 { animation-delay: -18s; } .sf-m3 { animation-delay: -9s; }

  /* 02 money — 10s cycle: each order departs at .4/2.4/4.4/6.4s, lands
     ~1.8s later; screen blips +$ and the receipt steps up a line per sale. */
  @keyframes viz-travel-1 {
    0%, 4% { transform: translate(84px, 30px); opacity: 1; animation-timing-function: ease-in; }
    11%    { transform: translate(310px, 58px) scale(.95); animation-timing-function: ease-out; }
    17%    { transform: translate(496px, 106px) scale(.75); opacity: 1; }
    19%    { transform: translate(508px, 110px) scale(.3); opacity: 0; }
    88%    { transform: translate(508px, 110px) scale(.3); opacity: 0; }
    92%    { transform: translate(84px, 30px); opacity: 0; }
    96%, 100% { transform: translate(84px, 30px); opacity: 1; }
  }
  @keyframes viz-travel-2 {
    0%, 4% { transform: translate(84px, 90px); opacity: 1; animation-timing-function: ease-in; }
    11%    { transform: translate(310px, 96px) scale(.95); animation-timing-function: ease-out; }
    17%    { transform: translate(496px, 110px) scale(.75); opacity: 1; }
    19%    { transform: translate(508px, 113px) scale(.3); opacity: 0; }
    88%    { transform: translate(508px, 113px) scale(.3); opacity: 0; }
    92%    { transform: translate(84px, 90px); opacity: 0; }
    96%, 100% { transform: translate(84px, 90px); opacity: 1; }
  }
  @keyframes viz-travel-3 {
    0%, 4% { transform: translate(84px, 150px); opacity: 1; animation-timing-function: ease-in; }
    11%    { transform: translate(310px, 128px) scale(.95); animation-timing-function: ease-out; }
    17%    { transform: translate(496px, 114px) scale(.75); opacity: 1; }
    19%    { transform: translate(508px, 116px) scale(.3); opacity: 0; }
    88%    { transform: translate(508px, 116px) scale(.3); opacity: 0; }
    92%    { transform: translate(84px, 150px); opacity: 0; }
    96%, 100% { transform: translate(84px, 150px); opacity: 1; }
  }
  @keyframes viz-travel-4 {
    0%, 4% { transform: translate(84px, 210px); opacity: 1; animation-timing-function: ease-in; }
    11%    { transform: translate(310px, 158px) scale(.95); animation-timing-function: ease-out; }
    17%    { transform: translate(496px, 118px) scale(.75); opacity: 1; }
    19%    { transform: translate(508px, 119px) scale(.3); opacity: 0; }
    88%    { transform: translate(508px, 119px) scale(.3); opacity: 0; }
    92%    { transform: translate(84px, 210px); opacity: 0; }
    96%, 100% { transform: translate(84px, 210px); opacity: 1; }
  }
  @keyframes viz-paper { /* prints a step per arrival, resets between loops */
    0%, 21%   { transform: translateY(44px); }
    25%, 41%  { transform: translateY(33px); }
    45%, 61%  { transform: translateY(22px); }
    65%, 81%  { transform: translateY(11px); }
    85%, 95%  { transform: translateY(0); }
    100%      { transform: translateY(44px); }
  }
  .mv-i1 { animation: viz-travel-1 10s ease-in-out infinite backwards; animation-delay: .4s; }
  .mv-i2 { animation: viz-travel-2 10s ease-in-out infinite backwards; animation-delay: 2.4s; }
  .mv-i3 { animation: viz-travel-3 10s ease-in-out infinite backwards; animation-delay: 4.4s; }
  .mv-i4 { animation: viz-travel-4 10s ease-in-out infinite backwards; animation-delay: 6.4s; }
  .mv-glow  { animation: viz-blip 10s ease infinite backwards; animation-delay: 2.2s; }
  .mv-plus  { animation: viz-blip 10s ease infinite backwards; }
  .mv-p1 { animation-delay: 2.2s; } .mv-p2 { animation-delay: 4.2s; }
  .mv-p3 { animation-delay: 6.2s; } .mv-p4 { animation-delay: 8.2s; }
  .mv-paper { animation: viz-paper 10s ease infinite; }
  .mv-line  { animation: viz-appear 10s ease infinite backwards; }
  .mv-l1 { animation-delay: 2.4s; } .mv-l2 { animation-delay: 4.4s; }
  .mv-l3 { animation-delay: 6.4s; } .mv-l4 { animation-delay: 8.4s; }
  /* the glow blips once per arrival: restart it with each +$ via the same
     delays is one-element-per-blip territory — keep the single ring on the
     first arrival and let the +$ text carry the other two. */

  /* 03 door — 11s cycle: the week posts (ping), the door swings open, and
     15 of 18 seats fill door-outward at .34s intervals; warm glow at full. */
  @keyframes viz-leaf {
    0%, 10%   { transform: rotate(126deg); }  /* closed, flush to the wall */
    16%       { transform: rotate(-6deg); }
    20%, 86%  { transform: rotate(0deg); }
    94%, 100% { transform: rotate(126deg); }
  }
  .dr-ping { animation: viz-ping 11s ease-out infinite backwards; animation-delay: .5s; }
  .dr-leaf { animation: viz-leaf 11s ease infinite; }
  .dr-glow { animation: viz-glow 11s ease infinite backwards; animation-delay: 7.4s; }
  .dr-seat { animation: viz-seat 11s cubic-bezier(.2, .7, .2, 1) infinite backwards; }
  .dr-s1  { animation-delay: 1.6s; }  .dr-s2  { animation-delay: 1.94s; }
  .dr-s3  { animation-delay: 2.28s; } .dr-s4  { animation-delay: 2.62s; }
  .dr-s5  { animation-delay: 2.96s; } .dr-s6  { animation-delay: 3.3s; }
  .dr-s7  { animation-delay: 3.64s; } .dr-s8  { animation-delay: 3.98s; }
  .dr-s9  { animation-delay: 4.32s; } .dr-s10 { animation-delay: 4.66s; }
  .dr-s11 { animation-delay: 5s; }    .dr-s12 { animation-delay: 5.34s; }
  .dr-s13 { animation-delay: 5.68s; } .dr-s14 { animation-delay: 6.02s; }
  .dr-s15 { animation-delay: 6.36s; }

  /* 04 numbers — 12s cycle, the causal chain: post (0s) → arrow (1.8s) →
     visits climb (3.2s) → arrow (5.8s) → sales bar ticks up (7.4s) →
     verdict chip (9s) → return arrow feeds the next post (10s). */
  .nm-post       { animation: viz-pop 12s ease infinite backwards; }
  .nm-heart      { animation: viz-pulse 12s ease infinite backwards; animation-delay: 1s; }
  .nm-arrow      { animation: viz-draw 12s ease infinite backwards; }
  .nm-a1 { animation-delay: 1.8s; } .nm-a2 { animation-delay: 5.8s; }
  .nm-sparkpanel { animation: viz-pop 12s ease infinite backwards; animation-delay: 2.6s; }
  .nm-spark      { animation: viz-draw-slow 12s ease-out infinite backwards; animation-delay: 3.2s; }
  .nm-area       { animation: viz-appear 12s ease infinite backwards; animation-delay: 4.8s; }
  .nm-dotring    { animation: viz-ping 12s ease-out infinite backwards; animation-delay: 5.4s; }
  .nm-barpanel   { animation: viz-pop 12s ease infinite backwards; animation-delay: 6.6s; }
  .nm-bar4       { animation: viz-grow 12s cubic-bezier(.22, 1.25, .32, 1) infinite backwards; animation-delay: 7.4s; }
  .nm-delta      { animation: viz-appear 12s ease infinite backwards; animation-delay: 8.4s; }
  .nm-chip       { animation: viz-pop 12s ease infinite backwards; animation-delay: 9s; }
  .nm-chip-halo  { animation: viz-halo 12s ease infinite backwards; animation-delay: 9.5s; }
  .nm-return     { animation: viz-draw 12s ease infinite backwards; animation-delay: 10s; }
}

/* mobile: the scenes scale down with the viewBox; just tighten the gap */
@media (max-width: 700px) {
  .svc-viz { margin: 1.2rem auto 0; }
}

/* =====================================================================
   Services vignettes — narrow-viewport arrangements (issue #13, 2026-09)
   ---------------------------------------------------------------------
   The wide scenes are drawn for a 720-unit viewBox and an SVG scales as a
   WHOLE, text included, so a 390px phone renders them at about 390/720 =
   0.54x and the 9–10 unit labels land at 5px or less. Raising font-size
   alone cannot fix that: clearing 12px at ~0.5x means ~24-unit text, which
   overflows a layout drawn for 720.

   So each scene ships a SECOND arrangement, drawn portrait for a 320-unit
   viewBox and capped at 20rem, which renders at no more than 1x on a
   phone — a unit is at most a CSS px. Every label in a narrow arrangement
   is >= 14 units (pinned by ServicesVignetteNarrowLayoutTests in
   apps/core/tests.py), so the floor stays above 12 CSS px down to a 275px
   container: a 360px viewport with 42px of padding a side.

   The WORDS are not duplicated. Both arrangements of a scene read the same
   strings, bound once per partial, so only the geometry differs — which is
   the entire point of having two.

   The narrow arrangements are deliberately still. The wide scenes'
   choreography is keyed to wide-scene coordinates, so it cannot be reused
   as-is, and a phone is the wrong place to spend battery on a decorative
   loop.
   ===================================================================== */
.svc-viz.svc-viz--narrow { display: none; }
@media (max-width: 700px) {
  .svc-viz.svc-viz--wide { display: none; }
  .svc-viz.svc-viz--narrow { display: block; max-width: 20rem; }
}

/* ink for the narrow arrangements — self-contained, so nothing here can
   collide with the wide scenes' animated classes */
.svc-viz--narrow .vzn-hub { fill: var(--copper-dk); }
.svc-viz--narrow .vzn-accent { fill: var(--copper-dk); }
.svc-viz--narrow .vzn-kicker { fill: var(--copper-dk); }
.svc-viz--narrow .vzn-rule { fill: none; stroke: var(--line); stroke-width: 1.4; }
.svc-viz--narrow .vzn-line { fill: color-mix(in srgb, var(--ink) 38%, transparent); }
.svc-viz--narrow .vzn-line-soft { fill: color-mix(in srgb, var(--ink) 18%, transparent); }
.svc-viz--narrow .vzn-obj { fill: color-mix(in srgb, var(--ink) 7%, transparent); stroke: var(--line); stroke-width: 1.4; }
.svc-viz--narrow .vzn-obj-alt { fill: color-mix(in srgb, var(--ridge) 20%, transparent); stroke: color-mix(in srgb, var(--ridge) 50%, transparent); stroke-width: 1.4; }
.svc-viz--narrow .vzn-check { fill: none; stroke: var(--valley); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.svc-viz--narrow .vzn-chalk { fill: none; stroke: color-mix(in srgb, #fff 55%, transparent); stroke-width: 2; stroke-linecap: round; }
.svc-viz--narrow .vzn-chalk--c { stroke: var(--copper-dk); }
.svc-viz--narrow .vzn-bubble-tail { fill: #0a84ff; }
.svc-viz--narrow .vzn-screen { fill: #0b0c0f; stroke: color-mix(in srgb, var(--valley) 45%, transparent); stroke-width: 1.4; }
.svc-viz--narrow .vzn-amt { fill: var(--valley); }
.svc-viz--narrow .vzn-head { fill: color-mix(in srgb, var(--ink) 7%, transparent); }
.svc-viz--narrow .vzn-floor { fill: color-mix(in srgb, var(--ink) 4%, transparent); }
.svc-viz--narrow .vzn-walls { fill: none; stroke: var(--line); stroke-width: 2; stroke-linecap: round; }
.svc-viz--narrow .vzn-leaf { stroke: var(--line); stroke-width: 2; stroke-linecap: round; }
.svc-viz--narrow .vzn-arc { fill: none; stroke: var(--line); stroke-width: 1.2; stroke-dasharray: 2 5; }
.svc-viz--narrow .vzn-counter { fill: color-mix(in srgb, var(--ink) 12%, transparent); }
.svc-viz--narrow .vzn-table { fill: color-mix(in srgb, var(--ink) 8%, transparent); stroke: var(--line); stroke-width: 1.4; }
.svc-viz--narrow .vzn-seat { fill: color-mix(in srgb, var(--valley) 65%, transparent); }
.svc-viz--narrow .vzn-seat-out { fill: none; stroke: var(--line); stroke-width: 1.4; }
.svc-viz--narrow .vzn-avatar { fill: color-mix(in srgb, var(--ridge) 40%, transparent); }
.svc-viz--narrow .vzn-photo { fill: color-mix(in srgb, var(--ridge) 12%, transparent); }
.svc-viz--narrow .vzn-hills { fill: color-mix(in srgb, var(--ink) 16%, transparent); }
.svc-viz--narrow .vzn-axis { stroke: var(--line); stroke-width: 1.2; }
.svc-viz--narrow .vzn-area { fill: color-mix(in srgb, var(--valley) 14%, transparent); }
.svc-viz--narrow .vzn-spark { fill: none; stroke: var(--valley); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.svc-viz--narrow .vzn-dot { fill: var(--valley); }
.svc-viz--narrow .vzn-bar { fill: color-mix(in srgb, var(--ridge) 42%, transparent); }
.svc-viz--narrow .vzn-bar--hi { fill: var(--valley); }
.svc-viz--narrow .vzn-arrow { fill: none; stroke: var(--copper-dk); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.svc-viz--narrow .vzn-chip-bg { fill: color-mix(in srgb, var(--valley) 14%, transparent); stroke: color-mix(in srgb, var(--valley) 55%, transparent); stroke-width: 1.4; }
.svc-viz--narrow .vzn-chip-label { fill: var(--valley); }

/* ---------- #13: no graphic text under 12px on a phone ---------- */
/* The /services scenes carry their own narrow layouts (svc-viz--narrow). These
   are the homepage graphics the same sweep measured under 12 CSS px at 390 and
   360 wide: the iMessage mockup's name pill and sender names, and the showcase
   panel's client name and domain chip. Mobile only, so desktop is unchanged.
   The phone is already scaled 1.08 on mobile, so .72rem renders at ~12.4px.
   The phone is a fixed 486px tall and its thread is bottom-anchored, so the
   larger labels are paid for in spacing (a slimmer pill and header, tighter
   thread gaps), or the first bubble slides under the header. */
@media (max-width: 700px) {
  .phone-chatname { font-size: .72rem; padding: .5px 8px; }
  .phone-header { padding-bottom: 3px; }
  .reply-name { font-size: .72rem; margin: 0 0 0 5px; }
  .phone-thread { gap: .35rem; }
  .sc-head { font-size: .75rem; }
  .sc-domain { font-size: .75rem; }
}