/* ============================================
   Tea With Bri — Shared Stylesheet
   Warm handmade Southern café — cream & parchment,
   turquoise as the signature color, restrained
   caramel/wood/brick accents, espresso for text.

   Composition system (homepage, Phase 1) — three ideas only:
     A. full-bleed documentary band  (.hero, .stay, .visit)
     B. uneven two-column            (.orient, .folks)
     C. the printed page             (.board — used once)
   ============================================ */

:root {
  --cream: #fbf3e4;          /* primary page background — warm parchment */
  --cream-deep: #f1e2c2;     /* alternate panel background */
  --paper: #fffdf8;          /* card / paper surface, warmer than pure white */

  --turquoise: #2f9c98;      /* signature color — from the shop's café tables & ribbons */
  --turquoise-deep: #1e6e6c;
  --turquoise-pale: #dcefec;

  --sage: #e2e6d4;           /* the one secondary surface — muted sage, drawn from the owners' shop shirts */
  --sage-line: rgba(43, 33, 24, 0.16);

  --caramel: #c98a45;        /* baked goods / warm wood accent */
  --caramel-deep: #9c6527;
  --brick: #b6532f;          /* used sparingly — a single warm accent, not a texture */

  --espresso: #2b2118;       /* primary text + occasional high-contrast sections */
  --espresso-soft: #5b4a3c;  /* secondary text */
  --line: rgba(43, 33, 24, 0.14);
  --line-soft: rgba(43, 33, 24, 0.08);

  --shadow-soft: 0 8px 24px rgba(43, 33, 24, 0.10);
  --shadow-lift: 0 14px 34px rgba(43, 33, 24, 0.16);
  --radius: 14px;
  --radius-sm: 8px;
  --max-width: 1160px;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-hand: 'Caveat', cursive;
  --font-body: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body { overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--espresso);
  background: var(--cream);
  line-height: 1.65;
}

h1, h2, h3, h4 {
  font-family: var(--font-body);
  font-weight: 800;
  margin: 0 0 0.4em;
  line-height: 1.15;
  color: var(--espresso);
}

/* Fraunces carries every headline (h1-h3), button and short label; Nunito Sans
   stays for body copy, small caps labels and the footer column headings (h4). */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: auto;
  text-wrap: balance;
}
h1 { line-height: 1.05; }

h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
h3 { font-size: 1.2rem; }

/* A genuine handwritten accent — used sparingly, never for headings or important info */
.hand {
  font-family: var(--font-hand);
  font-weight: 600;
  letter-spacing: 0.01em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.icon-line {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ---------- Header / Nav ----------
   Sits transparent over the cream page at rest, then fades in a background
   and hairline once the page scrolls. It never overlays a photograph at any
   width, so nav text is always espresso-on-cream. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.site-header.scrolled {
  background: rgba(251, 243, 228, 0.96);
  border-bottom-color: var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--espresso);
}

.brand img.logo-mark {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  position: relative;
  padding: 6px 2px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--espresso-soft);
  transition: color 0.2s ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--turquoise);
  transition: right 0.2s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--espresso);
}
.nav-links a:hover::after,
.nav-links a.active::after { right: 0; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--espresso);
  cursor: pointer;
}

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    flex-direction: column;
    gap: 4px;
    padding: 10px 24px 22px;
    display: none;
    border-bottom: 1px solid var(--line);
  }
  .nav-links.open { display: flex; }
  .nav-links a { display: block; padding: 10px 0; }
  .nav-links a::after { display: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  padding: 12px 26px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 1.02rem;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  cursor: pointer;
  border: 2px solid transparent;
}

.btn:focus-visible {
  outline: 3px solid var(--turquoise-deep);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--turquoise);
  color: var(--paper);
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover { transform: translateY(-2px); background: var(--turquoise-deep); box-shadow: var(--shadow-lift); }


.btn-light {
  background: var(--paper);
  color: var(--turquoise-deep);
}
.btn-light:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }

/* A plain text link — the quieter half of a pair of actions */
.text-link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--espresso);
  border-bottom: 2px solid var(--turquoise);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.text-link:hover { color: var(--turquoise-deep); border-color: var(--turquoise-deep); }

/* ---------- The steam mark ----------
   One motif, three placements on the homepage and nowhere else.
   Decorative only (aria-hidden); drawn once on scroll-in, then at rest. */
.steam {
  color: var(--turquoise);
  opacity: 0.75;
  flex-shrink: 0;
  overflow: visible;
}

/* Fully drawn by default so the mark still reads if JS never runs. */
html.steam-ready .steam path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
html.steam-ready .steam.drawn path {
  animation: steam-draw 1.25s ease forwards;
}
html.steam-ready .steam.drawn path:nth-child(2) {
  animation-delay: 0.18s;
}

@keyframes steam-draw { to { stroke-dashoffset: 0; } }

/* ---------- Sections ---------- */
section { padding: 76px 24px; }

/* Bands that run to the viewport edges handle their own horizontal padding. */
.band-full { padding-left: 0; padding-right: 0; }

.section-head {
  max-width: 640px;
  margin: 0 auto 44px;
  position: relative;
}
.section-head.center { text-align: center; }

.section-head .kicker {
  color: var(--turquoise-deep);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin-bottom: 10px;
  display: block;
}

.alt-bg { background: var(--cream-deep); }

/* ============================================================
   HOMEPAGE
   ============================================================ */

/* ---------- 1. Hero — layout A: photo runs off the right edge ----------
   The copy sits on its own cream panel that reaches into the photo column,
   so the two compositions interlock instead of sitting side by side. Text
   never sits on the photograph. Widths are in % of the band (not vw), so a
   scrollbar can never cause overflow. */
.hero {
  position: relative;
  --gutter: max(24px, calc((100% - var(--max-width)) / 2 + 24px));
  --hero-overlap: clamp(0px, 5.4vw, 88px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  gap: clamp(16px, 2.2vw, 32px);
  align-items: center;
  padding: clamp(24px, 3.4vw, 44px) 0 clamp(36px, 4vw, 56px) var(--gutter);
}

.hero-copy {
  position: relative;
  z-index: 2;
  background: var(--cream);
  margin-right: calc(-1 * var(--hero-overlap));
  padding-right: calc(var(--hero-overlap) * 0.34);
}

.eyebrow-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 10px;
}

.eyebrow-row .hand {
  font-size: 1.5rem;
  color: var(--turquoise-deep);
  line-height: 1.2;
  padding-bottom: 4px;
}

.hero h1 {
  font-size: clamp(2.5rem, 4.4vw, 3.9rem);
  line-height: 0.98;
  margin-bottom: 22px;
}

.hero .lead {
  max-width: 44ch;
  font-size: 1.1rem;
  color: var(--espresso-soft);
  margin-bottom: 30px;
}

.hero-actions {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
}

/* Cropped to put the painted teapot, the window lettering and the striped
   umbrella at the centre of the frame rather than the dark doorway. */
.hero-photo {
  position: relative;
  z-index: 1;
  overflow: hidden;
  aspect-ratio: 5 / 4;
}

.hero-photo img {
  width: 100%;
  height: calc(100% + 40px);
  margin-top: -20px;
  object-fit: cover;
  object-position: 78% center;
}

@media (max-width: 900px) {
  /* Headline first, then the photograph, then the supporting copy — so the
     value proposition is on screen before the image on a phone. */
  .hero {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 0 44px;
  }
  .hero-copy { display: contents; }
  .hero-lede { order: 1; padding: 10px 24px 20px; }
  .hero-photo { order: 2; aspect-ratio: 16 / 10; }
  .hero-support { order: 3; padding: 26px 24px 0; }
  .hero h1 { font-size: clamp(2.3rem, 8.4vw, 3.2rem); }
  .eyebrow-row .hand { font-size: 1.35rem; }
}

/* ---------- The living logo ----------
   images/logo-sm.png is used unchanged. The frame below crops it to the teapot
   (source pixels x 85–400, y 15–268 of the 500x455 artwork) so the wordmark baked
   into the asset stays outside the crop and the business name is not repeated.
   The lid finial lands dead centre of the frame, which is where the steam rises.
   The reserved padding-top holds the steam, so nothing overflows or shifts. */
.brand-mark {
  --mark-w: 92px;
  /* Held proportional to the mark so the steam viewBox maps exactly at every size. */
  --steam-h: calc(var(--mark-w) * 0.28);
  position: relative;
  display: block;
  width: var(--mark-w);
  padding-top: var(--steam-h);
  margin-bottom: 10px;
}

.brand-pot {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 315 / 253;
  overflow: hidden;
}

.brand-pot img {
  position: absolute;
  width: 158.73%;   /* 500 / 315 */
  height: auto;
  left: -26.98%;    /* -85 / 315 */
  top: -5.93%;      /* -15 / 253, as a share of the frame height */
  max-width: none;
  /* The artwork ships on an opaque white ground; multiply drops that white into
     the cream page so only the line work reads. The file itself is untouched. */
  mix-blend-mode: multiply;
}

.brand-steam {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--turquoise);
  pointer-events: none;
  overflow: visible;   /* insurance: a wisp is never clipped by the viewBox edge */
}

/* Each wisp leaves the spout mouth, rises, fades and drifts outward to the left,
   the way vapour actually leaves a spout. Keyframe lengths are in the artwork's own
   units (1 unit = 0.292px at the 92px mark), so a 48-unit rise reads as ~14px on
   desktop and ~11.6px on mobile. Durations and negative delays all differ, so the
   three are never in step and there is no visible reset. The teapot never moves. */
.brand-steam .wisp {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: bottom center;
}

.wisp-a { animation: wisp-out-far  3.4s ease-in-out -0.2s infinite; }
.wisp-b { animation: wisp-out-near 4.1s ease-in-out -1.7s infinite; }
.wisp-c { animation: wisp-out-far  3.7s ease-in-out -2.9s infinite; }

@keyframes wisp-out-far {
  0%   { opacity: 0;    transform: translate(0, 16px) scaleY(0.84); }
  22%  { opacity: 0.55; }
  62%  { opacity: 0.42; }
  100% { opacity: 0;    transform: translate(-16px, -34px) scaleY(1.06); }
}

@keyframes wisp-out-near {
  0%   { opacity: 0;    transform: translate(0, 16px) scaleY(0.86); }
  20%  { opacity: 0.48; }
  60%  { opacity: 0.38; }
  100% { opacity: 0;    transform: translate(-10px, -32px) scaleY(1.05); }
}

@media (max-width: 900px) {
  .brand-mark { --mark-w: 76px; }
}

/* ---------- 2. Orientation strip: see "Counter note" at the end of this file ---------- */

/* ---------- 3. The family — layout B, on the one secondary surface ----------
   No kicker, no script, no teal label: this section deliberately breaks the
   heading formula used elsewhere on the page. */
.folks {
  --slant: clamp(14px, 2.2vw, 30px);
  --poke: clamp(56px, 6.6vw, 80px);   /* how far the photo rises into the section above */
  position: relative;
  isolation: isolate;
  padding-top: clamp(40px, 4.4vw, 60px);
  padding-bottom: calc(clamp(40px, 4.4vw, 60px) + var(--slant));
}
/* The sage surface leans a little: lower on the left at the top, higher on the left at the bottom. */
.folks::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--sage);
  clip-path: polygon(0 var(--slant), 100% 0, 100% calc(100% - var(--slant)), 0 100%);
}

.folks-row {
  display: grid;
  grid-template-columns: 34fr 66fr;
  gap: clamp(22px, 2.8vw, 38px);
  align-items: center;
}

.folks-photo {
  position: relative;
  z-index: 1;
  margin: calc(-1 * var(--poke)) 0 0 calc(-1 * clamp(0px, 1.6vw, 22px));
  align-self: start;
  max-width: 400px;
}
.folks-copy { align-self: center; }
.photo-frame { position: relative; }

.folks-photo img {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 4px;
}

/* Caption written on, not aligned to: hand-lettered, nudged in and tilted a hair. */
.folks-photo figcaption {
  margin: 12px 0 0 clamp(6px, 2.4vw, 30px);
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--espresso-soft);
  transform: rotate(-1.4deg);
  transform-origin: left center;
  max-width: 11em;
}

.folks-copy h2 { margin-bottom: 14px; }
.folks-copy p { color: var(--espresso-soft); }
.folks-copy p:last-of-type { margin-bottom: 0; }

/* Reserved for a real quote from Bri — see the commented block in index.html.
   Kept here so the markup can be dropped in without further styling work. */
.quote-slot {
  position: relative;
  margin-top: 30px;
  padding-left: 50px;
  min-height: 84px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.quote-slot .steam-rule {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 84px;
  width: 30px;
}

.quote-line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.35;
  color: var(--espresso);
  margin: 0;
  text-wrap: balance;
}

.quote-attrib {
  font-family: var(--font-hand);
  font-size: 1.2rem;
  color: var(--turquoise-deep);
  margin: 8px 0 0;
}

@media (max-width: 860px) {
  .folks-row { grid-template-columns: 1fr; gap: 26px; }
  .folks-photo { max-width: 340px; }
  .quote-slot { padding-left: 0; min-height: 0; display: block; }
  .quote-slot .steam-rule {
    position: static;
    transform: none;
    height: 52px;
    width: 19px;
    margin-bottom: 6px;
  }
}

/* ---------- 4. Stay Awhile — headline lockup, photo rises behind its cream panel ---------- */
.stay {
  position: relative;
  --stay-overlap: clamp(14px, 3.2vw, 52px);
  padding-bottom: 0;
}

/* The panel hugs the words and carries the page background, so the photograph
   can rise behind it without ever sitting under live text. */
.stay-head {
  position: relative;
  z-index: 1;
  width: fit-content;
  max-width: 100%;
  background: var(--cream);
  padding: 0 clamp(14px, 2.6vw, 34px) 10px 0;
}

.stay-word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.7rem, 10vw, 8rem);
  line-height: 0.92;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}

.stay-sub {
  margin-left: clamp(10px, 5.5vw, 84px);
  transform: rotate(-1.2deg);
  transform-origin: left center;
  display: block;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  color: var(--turquoise-deep);
  margin-top: 6px;
  margin-bottom: 0;
}

.stay-photo {
  position: relative;
  overflow: hidden;
  margin-top: calc(-1 * var(--stay-overlap));
  height: clamp(260px, 42vw, 560px);
}

.stay-photo img {
  width: 100%;
  height: calc(100% + 40px);
  margin-top: -20px;
  object-fit: cover;
  object-position: center 42%;
}

@media (max-width: 760px) {
  /* On a phone the panel spans the column and the overlap all but disappears,
     so the headline and photograph read as one block rather than a cropped edge. */
  .stay { --stay-overlap: 12px; }
  .stay-head { width: 100%; padding-right: 0; }
  .stay-word { font-size: clamp(2.3rem, 11.5vw, 3.1rem); }
  .stay-photo { height: clamp(210px, 52vw, 300px); }
}

/* ---------- 5. Seasonal board — layout C: the printed page (used once) ---------- */
.board-section { padding-top: clamp(56px, 6vw, 80px); padding-bottom: clamp(48px, 5vw, 68px); }

.board {
  max-width: 800px;
  margin: 0 auto;
  padding: 8px 0 0;
  border-top: 1px solid var(--espresso);
  border-bottom: 1px solid var(--espresso);
}

.board-head {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  padding-top: 26px;
  margin-bottom: 18px;
}

.board-label {
  font-size: 1.6rem;
  color: var(--turquoise-deep);
  line-height: 1.2;
  padding-bottom: 4px;
}

.board .divider {
  border: none;
  border-top: 2px dashed var(--turquoise);
  opacity: 0.5;
  margin: 0 0 4px;
}

/* Hierarchy inverted throughout: the shop's own nickname leads, the literal
   drink name follows in a quieter voice. */
.board .nick {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--espresso);
}

.board .real {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--espresso-soft);
  margin-top: 6px;
}

.board .desc {
  color: var(--espresso-soft);
  margin: 8px 0 0;
}

/* The featured entry — scale and space carry the emphasis, no box, no photo. */
.board-feature {
  position: relative;
  padding: 26px 0 28px;
  border-bottom: 1px solid var(--espresso);
  text-align: center;
}

.board-feature .nick { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.board-feature .real { font-size: 0.8rem; letter-spacing: 0.1em; color: var(--turquoise-deep); }
.board-feature .desc { font-size: 1.02rem; max-width: 46ch; margin-left: auto; margin-right: auto; }

/* The rest of the board reads as two printed columns on wider screens. */
.board-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 44px;
}

.board-item {
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
}

.board-item .nick { font-size: 1.12rem; }
.board-item .desc { font-size: 0.92rem; }

/* Keep the last row of each column flush with the board's bottom rule. */
.board-grid .board-item:nth-last-child(-n+2):nth-child(odd) { border-bottom: none; }
.board-grid .board-item:last-child { border-bottom: none; }

@media (max-width: 720px) {
  .board-grid { grid-template-columns: 1fr; column-gap: 0; }
  .board-grid .board-item:nth-last-child(-n+2):nth-child(odd) { border-bottom: 1px solid var(--line-soft); }
  .board-grid .board-item:last-child { border-bottom: none; }
}

/* ---------- 6. Event notice — compact, attached to the board ---------- */
.events {
  max-width: 800px;
  margin: clamp(28px, 3.4vw, 44px) auto 0;
}

.events-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--caramel-deep);
  margin-bottom: 10px;
}

.event-item {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 4px 24px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.event-item:last-child { border-bottom: 1px solid var(--line); }

.event-date {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--espresso);
  font-variant-numeric: tabular-nums;
  padding-top: 3px;
}

.event-body h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.18rem;
  margin-bottom: 2px;
}

.event-body p {
  color: var(--espresso-soft);
  font-size: 0.92rem;
  margin: 0;
  max-width: 60ch;
}

@media (max-width: 620px) {
  .event-item { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- 7. Visit band — address and directions lead, hours are secondary ---------- */
.visit {
  --lean: clamp(16px, 2.6vw, 38px);
  position: relative;
  isolation: isolate;
  color: var(--cream);
  padding-top: calc(clamp(48px, 5vw, 68px) + var(--lean) * 0.6);
  padding-bottom: clamp(48px, 5vw, 68px);
}

.visit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--espresso);
  clip-path: polygon(0 var(--lean), 100% 0, 100% 100%, 0 100%);
}

.visit-row {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(30px, 5vw, 72px);
  align-items: start;
}

.visit h2 { color: var(--cream); margin-bottom: 14px; }

.visit-address {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.35;
  color: var(--cream);
  margin-bottom: 20px;
}

.visit-phone {
  margin: 16px 0 0;
  color: rgba(251, 243, 228, 0.75);
  font-size: 0.95rem;
}
.visit-phone a { border-bottom: 1px solid rgba(251, 243, 228, 0.35); }
.visit-phone a:hover { color: var(--turquoise); }

.visit-hours-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(251, 243, 228, 0.72);
  margin-bottom: 8px;
}

.hours-grouped {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.hours-grouped td {
  padding: 7px 0;
  border-bottom: 1px solid rgba(251, 243, 228, 0.12);
  color: rgba(251, 243, 228, 0.78);
}
.hours-grouped tr:last-child td { border-bottom: none; }
.hours-grouped td:last-child {
  text-align: right;
  color: rgba(251, 243, 228, 0.92);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .visit-row { grid-template-columns: 1fr; gap: 34px; }
  .visit-hours { max-width: 340px; }
}

/* ============================================================
   MENU PAGE
   ============================================================ */
.menu-hero-note {
  max-width: 640px;
  margin: 0 auto 40px;
  text-align: center;
  color: var(--espresso-soft);
  font-size: 0.98rem;
}

.menu-category {
  max-width: 720px;
  margin: 0 auto 50px;
}

.menu-category h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--turquoise-deep);
  font-size: 1.4rem;
  margin-bottom: 4px;
}

.menu-category .cat-note {
  font-size: 0.9rem;
  color: var(--espresso-soft);
  margin-bottom: 18px;
}

.menu-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}

.menu-item:last-child { border-bottom: none; }

.menu-item .item-text { display: flex; flex-direction: column; }

.menu-item .name {
  font-weight: 800;
  color: var(--espresso);
}

.menu-item .desc {
  font-size: 0.9rem;
  color: var(--espresso-soft);
  margin-top: 2px;
}

.menu-item .leader {
  flex: 1;
  border-bottom: 2px dotted var(--line);
  margin: 0 6px;
  transform: translateY(-4px);
}

.menu-item .price {
  font-weight: 800;
  color: var(--turquoise-deep);
  white-space: nowrap;
  font-family: var(--font-display);
}

.menu-note-quiet {
  max-width: 720px;
  margin: 40px auto 0;
  padding-top: 20px;
  border-top: 1px dashed var(--line);
  font-size: 0.9rem;
  color: var(--espresso-soft);
  text-align: center;
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
  max-width: var(--max-width);
  margin: 0 auto;
}

@media (max-width: 860px) {
  .about-hero { grid-template-columns: 1fr; }
}

.about-photo {
  aspect-ratio: 4/3;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 6px solid var(--paper);
}

.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.values-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: var(--max-width);
  margin: 52px auto 0;
  text-align: center;
  font-weight: 800;
  color: var(--turquoise-deep);
}
.values-row span.sep { color: var(--line); font-weight: 400; }

/* ============================================================
   PRODUCTS PAGE
   ============================================================ */
.shop-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: var(--max-width);
  margin: 0 auto;
}

@media (max-width: 760px) {
  .shop-row { grid-template-columns: 1fr; }
}

.shop-item .shop-photo {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 6px solid var(--paper);
  margin-bottom: 16px;
}
.shop-item .shop-photo img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }

.shop-item .shop-photo.pair {
  display: flex;
  gap: 4px;
}
.shop-item .shop-photo.pair img {
  width: 50%;
  aspect-ratio: 4/5;
  object-fit: cover;
}
.shop-item h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; }
.shop-item p { color: var(--espresso-soft); font-size: 0.96rem; }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background: var(--espresso);
  color: rgba(251,243,228,0.78);
  padding: 56px 24px 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 0.9fr 1fr 1.3fr;
  gap: 32px;
  max-width: var(--max-width);
  margin: 0 auto 32px;
}

@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; }
}

footer h4 {
  color: var(--cream);
  font-size: 1rem;
  margin-bottom: 14px;
}

footer a:hover { color: var(--turquoise); }

footer .footer-brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--cream);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.footer-bottom {
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.6;
  border-top: 1px solid rgba(251,243,228,0.15);
  padding-top: 20px;
  max-width: var(--max-width);
  margin: 0 auto;
}

/* ============================================================
   MICRO-INTERACTIONS
   ============================================================ */

/* Text links keep a hairline at rest; a heavier turquoise line draws in
   from the left on hover, like it was pulled across with a pen. */
.text-link,
.cup-link {
  position: relative;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}

.text-link::after,
.cup-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--turquoise-deep);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}

.text-link:hover::after,
.text-link:focus-visible::after,
.cup-link:hover::after,
.cup-link:focus-visible::after { transform: scaleX(1); }

/* Buttons: colour carries the state, movement stays at 1–2px. */
.btn-primary:active,
.btn-light:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-soft);
}

/* An understated reveal, used only on the board heading and featured drink.
   The "reveal-ready" flag is set by script.js only when animation is allowed,
   so the content is visible by default if JS never runs. */
html.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
html.reveal-ready .reveal.shown {
  opacity: 1;
  transform: none;
}

/* Documentary photos drift a few pixels against the scroll. The transform is
   applied to the image inside an overflow-hidden frame that is 40px taller
   than its box, so nothing shifts layout and no edge is ever exposed. */
.hero-photo img,
.stay-photo img { will-change: transform; }

/* ============================================================
   ACCESSIBILITY / MOTION
   ============================================================ */
:focus-visible { outline: 2px solid var(--turquoise-deep); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  /* The steam mark renders complete and static. */
  html.steam-ready .steam path {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
  html.steam-ready .steam.drawn path { animation: none !important; }
  /* Underline growth, reveals and photo drift all resolve to their end state. */
  .text-link::after,
  .cup-link::after { transform: scaleX(1); }
  html.reveal-ready .reveal { opacity: 1; transform: none; }
  .hero-photo img,
  .stay-photo img { transform: none !important; will-change: auto; }
  /* The living logo keeps its steam, drawn once and held still. */
  .brand-steam .wisp {
    animation: none !important;
    opacity: 0.42;
    transform: none;
  }
}


/* ============================================
   Combined Products page (menu + custom cakes + candles)
   ============================================ */
.product-section { scroll-margin-top: 80px; }
.order-feature {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px);
  align-items: center; max-width: 980px; margin: 8px auto 0;
}
@media (max-width: 800px) { .order-feature { grid-template-columns: 1fr; } }
.order-feature .shop-photo { margin: 0; }
.order-feature .shop-photo img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.order-steps h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; margin-bottom: 10px; }
.order-steps p, .order-steps li { color: var(--espresso-soft); font-size: 0.98rem; }
.order-steps ol { padding-left: 1.2em; margin: 0 0 18px; display: grid; gap: 10px; }
.order-steps li strong { color: var(--espresso); }
.order-steps a:not(.btn):not(.text-link) { color: var(--turquoise-deep); font-weight: 700; }
.order-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 16px; }
.order-feature .shop-photo { border-radius: 2px; overflow: hidden; box-shadow: var(--shadow-soft); border: 6px solid var(--paper); }
.order-feature .shop-photo.pair { display: flex; gap: 4px; }
.order-feature .shop-photo.pair img { width: 50%; aspect-ratio: 4/5; object-fit: cover; }


/* ============================================================
   SHARED: drawn underline
   A hairline at rest; a heavier line is drawn in from the left on hover,
   focus, or when the link marks the current section.
   ============================================================ */
.draw {
  position: relative;
  padding-bottom: 2px;
  background: linear-gradient(var(--line), var(--line)) no-repeat 0 100% / 100% 1px;
}
.draw::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--draw-color, var(--turquoise-deep));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}
.draw:hover::after,
.draw:focus-visible::after,
.draw[aria-current="true"]::after { transform: scaleX(1); }

button.text-link {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 0 0 2px;
  cursor: pointer;
}

/* ============================================================
   COUNTER NOTE (home, orientation strip)
   A ruled note like the one taped by the register: a hand-lettered
   title sitting on the top rule, then plain ruled lines of fact.
   ============================================================ */
.orient { padding-top: clamp(44px, 5vw, 64px); padding-bottom: clamp(44px, 5vw, 64px); }

.orient-note {
  position: relative;
  max-width: 900px;
  padding-top: 14px;
  border-top: 1px solid var(--espresso);
}
.orient-hand {
  position: absolute;
  top: -0.85rem;
  left: 0;
  background: var(--cream);
  padding-right: 16px;
  font-size: 1.55rem;
  line-height: 1;
  color: var(--turquoise-deep);
}

.orient-list { margin: 0; }
.orient-list > div {
  display: grid;
  grid-template-columns: 10.5rem 1fr;
  gap: 4px 28px;
  padding: 15px 0;
  border-bottom: 1px dashed var(--line);
}
.orient-list > div:last-child { border-bottom: none; }
.orient-list dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--espresso);
}
.orient-list dd {
  margin: 0;
  color: var(--espresso-soft);
  font-size: 1rem;
}
.orient-list dd a { color: var(--espresso); font-weight: 700; }
.orient-list .sep { margin: 0 8px; color: var(--espresso-soft); }
.orient-hours { display: block; font-variant-numeric: tabular-nums; }
.open-now {
  display: block;
  margin-top: 4px;
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.15;
  color: var(--turquoise-deep);
}
.open-now:empty { display: none; }

@media (max-width: 700px) {
  .orient-list > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ============================================================
   HOME: board follow line + event notice extras
   ============================================================ */
.board-follow {
  text-align: center;
  margin: 26px 0 0;
  color: var(--espresso-soft);
  font-size: 0.96rem;
}
.board-follow .hand { font-size: 1.35rem; margin-right: 8px; color: var(--espresso-soft); }
.board-follow a { color: var(--espresso); font-weight: 700; }

.event-item[hidden] { display: none; }
.events-none {
  margin: 0;
  padding: 14px 0;
  color: var(--espresso-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.events-none[hidden] { display: none; }
.events-more {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 18px 0 0;
  font-size: 0.95rem;
}
.events-more a { font-weight: 700; color: var(--espresso); }

/* ============================================================
   WHAT'S YOUR CUP? (home)
   A fill-in-the-blank on the printed page: pick a word on each
   line, it gets underlined like you circled it, and a drink is
   poured out below.
   ============================================================ */
.cup {
  margin-top: 28px;
  border-top: 1px dashed var(--line);
  padding: 34px 0 28px;
  scroll-margin-top: 80px;
}
.cup-head { text-align: center; margin-bottom: 26px; }
.cup-head h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); margin: 0; }
.cup-head .hand { display: block; margin-top: 4px; font-size: 1.35rem; color: var(--espresso-soft); }

.cup-form { max-width: 640px; margin: 0 auto; }
.cup-q {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 26px;
  margin: 0 0 18px;
}
.cup-q-label {
  flex: 0 0 100%;
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.1;
  color: var(--turquoise-deep);
}
.cup-choice { position: relative; cursor: pointer; }
.cup-choice input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
}
.cup-choice span {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 1.65rem);
  line-height: 1.25;
  color: var(--espresso-soft);
  padding: 0 2px 3px;
  border-bottom: 1px dashed var(--line);
  background: linear-gradient(var(--turquoise), var(--turquoise)) no-repeat 0 100% / 0 3px;
  transition: background-size 0.3s ease, color 0.2s ease;
}
.cup-choice:hover span { color: var(--espresso); border-bottom-color: var(--turquoise); }
.cup-choice input:checked + span {
  color: var(--espresso);
  background-size: 100% 3px;
  border-bottom-color: transparent;
}
.cup-choice input:focus-visible + span { outline: 2px solid var(--turquoise-deep); outline-offset: 4px; }

.cup-result {
  position: relative;
  min-height: 92px;
  margin: 26px 0 0;
  padding: 2px 46px 2px 22px;
  border-left: 3px solid var(--turquoise);
}
.cup-prompt {
  margin: 0;
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 1.45rem;
  color: var(--espresso-soft);
}
.cup-kicker {
  display: block;
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1;
  color: var(--turquoise-deep);
}
.cup-pick { margin: 4px 0 2px; font-size: clamp(1.65rem, 3.4vw, 2.3rem); line-height: 1.1; }
.cup-real {
  display: block;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--espresso-soft);
}
.cup-why { margin: 10px 0 0; color: var(--espresso-soft); max-width: 52ch; }
.cup-note { margin: 6px 0 0; font-size: 0.88rem; color: var(--espresso-soft); max-width: 52ch; }
.cup-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 26px; margin-top: 16px; }
.cup-result .steam { position: absolute; top: 0; right: 4px; }
.cup-none { text-align: center; color: var(--espresso-soft); margin: 0; }
.cup-none a { color: var(--espresso); font-weight: 700; }

/* ============================================================
   PRODUCTS: index-style navigation
   ============================================================ */
.index-nav {
  max-width: 860px;
  margin: 10px auto 0;
  border-top: 1px solid var(--espresso);
  border-bottom: 1px solid var(--line);
}
.index-nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 28px;
}
.index-nav li { padding: 14px 0; }
.index-nav a { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; }
.index-nav .idx {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--turquoise-deep);
  margin-right: 8px;
}

/* ============================================================
   EVENTS PAGE: a community bulletin, printed-calendar style
   ============================================================ */
.bulletin-wrap { max-width: 860px; }
.bulletin {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 3px double var(--espresso);
}
.bulletin-item {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 6px 40px;
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
}
.bulletin-item[hidden] { display: none; }
.bulletin-when { line-height: 1; }
.bulletin-month {
  display: block;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--turquoise-deep);
}
.bulletin-day {
  display: block;
  margin-top: 2px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 3.6rem;
  line-height: 1;
  color: var(--espresso);
}
.bulletin-dow {
  display: block;
  margin-top: 8px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--espresso-soft);
}
.bulletin-body h2 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); margin-bottom: 4px; }
.bulletin-meta { margin: 0 0 8px; font-weight: 800; font-size: 0.9rem; color: var(--espresso); }
.bulletin-body p { color: var(--espresso-soft); font-size: 1rem; max-width: 56ch; }
.bulletin-body p.bulletin-meta { color: var(--espresso); }
.bulletin-empty { text-align: center; padding: 36px 8px; color: var(--espresso-soft); border-bottom: 1px solid var(--line); }
.bulletin-empty[hidden] { display: none; }
.bulletin-empty h2 { font-size: 1.5rem; margin-bottom: 6px; }
.bulletin-fb {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 26px;
  margin: 26px 0 0;
}
.bulletin-fb .hand { font-size: 1.4rem; color: var(--espresso-soft); }
.bulletin-fb a { font-weight: 700; color: var(--espresso); }

@media (max-width: 620px) {
  .bulletin-item { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
  .bulletin-when { display: flex; align-items: baseline; gap: 12px; }
  .bulletin-day { font-size: 2.6rem; margin-top: 0; }
  .bulletin-dow { margin-top: 0; }
}

/* ============================================================
   CONTACT PAGE: one page composition, not two cards
   Facts on the left, a ruled notepad on the right, one hairline
   between them; the map runs full width underneath.
   ============================================================ */
.contact-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  max-width: 1040px;
  margin: 0 auto;
}
.contact-info { padding-right: clamp(28px, 5vw, 64px); }
.contact-address {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.45rem, 2.8vw, 2rem);
  line-height: 1.25;
  margin: 0 0 10px;
}
.contact-phone { margin: 0 0 10px; }
.contact-phone a { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; }
.contact-directions { margin: 0; }
.contact-directions a { font-weight: 700; }

.reach {
  list-style: none;
  margin: 28px 0 0;
  padding: 18px 0 0;
  border-top: 1px dashed var(--line);
  display: grid;
  gap: 12px;
}
.reach li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.reach a { font-weight: 800; color: var(--espresso); }
.reach .hand { font-size: 1.3rem; color: var(--espresso-soft); }

.contact-sub { font-size: 1.3rem; margin: 30px 0 6px; }
.hours-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours-table td { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.hours-table td:last-child { text-align: right; font-weight: 700; }

form.contact-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-left: clamp(28px, 5vw, 64px);
  border-left: 1px solid var(--line);
}
.contact-form h2 { font-size: 1.7rem; margin: 0; }
.contact-form .form-hand { margin: -14px 0 0; font-size: 1.35rem; color: var(--espresso-soft); }
.contact-form label {
  display: block;
  margin: 0;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--espresso-soft);
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 8px 2px 9px;
  border: 0;
  border-bottom: 1px solid var(--espresso-soft);
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 1.08rem;
  color: var(--espresso);
}
.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: 2px solid var(--turquoise-deep);
  outline-offset: 3px;
  border-bottom-color: var(--turquoise-deep);
}
/* The message box is ruled like notepaper. */
.contact-form textarea {
  min-height: 176px;
  padding: 0 2px;
  line-height: 32px;
  border-bottom: 0;
  resize: vertical;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, var(--espresso-soft) 31px, var(--espresso-soft) 32px);
  background-attachment: local;
}
.contact-form .btn { align-self: flex-start; }

.map-band { padding: 0; border-top: 1px solid var(--espresso); margin-top: clamp(48px, 6vw, 84px); }
.map-band iframe { display: block; width: 100%; height: 380px; border: 0; }

@media (max-width: 860px) {
  .contact-split { grid-template-columns: 1fr; }
  .contact-info { padding-right: 0; }
  form.contact-form { padding-left: 0; border-left: 0; margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--line); }
}

/* ============================================================
   CLOSER: the shared end-of-page moment (replaces the dark card)
   A full-width band on the secondary surface: one big line,
   the address, and plain drawn-underline links.
   ============================================================ */
.closer {
  background: var(--cream-deep);
  border-top: 1px solid var(--espresso);
  padding: clamp(48px, 6vw, 84px) 0;
}
.closer-row {
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 22px clamp(28px, 5vw, 72px);
  align-items: end;
  max-width: var(--max-width);
  margin: 0 auto;
}
.closer h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.02; margin: 0; }
.closer-side p { margin: 0 0 12px; color: var(--espresso-soft); }
.closer-links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.closer-links a { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--espresso); }
@media (max-width: 760px) { .closer-row { grid-template-columns: 1fr; } }

/* ============================================================
   FOOTER: Facebook column
   ============================================================ */
.footer-fb { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
footer .draw { --draw-color: var(--turquoise); background-image: linear-gradient(rgba(251,243,228,0.3), rgba(251,243,228,0.3)); }


/* ============================================================
   HOST AN EVENT: CTA on the Events page + request form
   ============================================================ */
.host-cta {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 18px clamp(28px, 5vw, 64px);
  align-items: end;
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: 30px;
  border-top: 3px double var(--espresso);
}
.host-cta h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.05; margin: 0; }
.host-cta-side p { margin: 0 0 16px; color: var(--espresso-soft); max-width: 44ch; }
@media (max-width: 760px) { .host-cta { grid-template-columns: 1fr; } }

.host-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.host-steps li {
  counter-increment: step;
  position: relative;
  padding: 14px 0 14px 44px;
  border-bottom: 1px dashed var(--line);
  color: var(--espresso-soft);
}
.host-steps li:last-child { border-bottom: none; }
.host-steps li::before {
  content: counter(step, lower-roman) ".";
  position: absolute;
  left: 0; top: 10px;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--turquoise-deep);
}
.host-steps strong { color: var(--espresso); }
.host-alt { margin: 22px 0 0; color: var(--espresso-soft); }
.host-alt a { color: var(--espresso); font-weight: 700; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.contact-form .opt { font-weight: 600; letter-spacing: 0; text-transform: none; }
.contact-form select {
  width: 100%;
  padding: 8px 2px 9px;
  border: 0;
  border-bottom: 1px solid var(--espresso-soft);
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 1.08rem;
  color: var(--espresso);
}
.contact-form select:focus-visible {
  outline: 2px solid var(--turquoise-deep);
  outline-offset: 3px;
  border-bottom-color: var(--turquoise-deep);
}
.host-form textarea { min-height: 144px; }
.form-fine {
  margin: 0;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--caramel);
  font-size: 0.95rem;
  color: var(--espresso);
}


/* ============================================================
   TEA-LEAF LINE DRAWINGS (home only, five placements)
   Simple single-weight linework in the existing turquoise. All are
   decorative (aria-hidden) and static except two: the hero branch
   draws itself in once, and the Stay Awhile branch drifts with scroll.
   ============================================================ */
.leaf { position: absolute; overflow: visible; pointer-events: none; color: var(--turquoise); }

/* 1. Hero seam: enters from the right, sags across the hero/orientation boundary. */
.leaf-hero {
  --bw: clamp(300px, 54vw, 660px);
  z-index: 3;
  right: 0;
  bottom: calc(var(--bw) * -0.1);
  width: var(--bw);
  height: auto;
  color: var(--turquoise-deep);
}

/* 2. Sprig behind the owners' photo, poking out below its bottom-right corner. */
.leaf-sprig {
  z-index: -1;
  right: -72px;
  bottom: -98px;
  width: 190px;
  height: auto;
  color: var(--turquoise-deep);
  opacity: 0.9;
}

/* 3. Larger branch, asymmetrical, half tucked behind the heading panel and the photo. */
.leaf-stay {
  z-index: 0;
  right: clamp(20px, 8vw, 130px);
  top: 12px;
  width: clamp(190px, 23vw, 300px);
  height: auto;
  opacity: 0.75;
  will-change: transform;
}

/* 4. Printed teacup-ring stamp by the featured drink. */
.stamp {
  position: absolute;
  right: clamp(4px, 5%, 44px);
  top: 6px;
  width: 64px;
  height: 64px;
  color: var(--espresso);
  opacity: 0.34;
  transform: rotate(14deg);
  pointer-events: none;
}

/* 5. Visit edge: crosses the leaning top edge of the dark band from the left. */
.leaf-visit {
  z-index: 1;
  left: 0;
  top: calc(var(--lean) * -0.9);
  width: clamp(240px, 34vw, 440px);
  height: auto;
}

@media (max-width: 860px) {
  .folks { --poke: 56px; }
  .folks-photo { margin-left: 0; }
  .leaf-sprig { right: -30px; bottom: -66px; width: 130px; }
}
@media (max-width: 760px) {
  .leaf-stay { display: none; }
  .stamp { display: none; }
  .leaf-visit { top: calc(var(--lean) * -0.7); }
}

/* The hero branch is drawn in once. "branch-ready" is only set by script.js when motion is
   allowed, so the branch is fully drawn by default if JS never runs. */
html.branch-ready .leaf-hero path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
html.branch-ready .leaf-hero.drawn path {
  animation: steam-draw 1.1s ease forwards;
  animation-delay: var(--d, 0s);
}
html.branch-ready .leaf-hero.drawn path.stem {
  animation-duration: 1.7s;
}

@media (prefers-reduced-motion: reduce) {
  html.branch-ready .leaf-hero path { stroke-dashoffset: 0; animation: none !important; }
  .leaf-stay { transform: none !important; }
}


/* ============================================================
   COMMUNITY: a scrapbook wall (not a card grid)
   Prints at different sizes, pinned at slight angles with a strip
   of tape, a handwritten note under each, one column on a phone.
   ============================================================ */
.wall-intro { padding-bottom: 8px; }
.wall-cta-line { text-align: center; margin: 0; }
.wall-section { padding-top: 40px; }

.wall {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 54px 24px;
  max-width: 1040px;
  margin: 0 auto;
  align-items: start;
}
.wall-item { position: relative; margin: 0; }
.wall-photo {
  position: relative;
  padding: 8px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  box-shadow: 0 1px 0 var(--line), 0 8px 14px -8px rgba(43, 33, 24, 0.28);
}
.wall-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Masking-tape strips, drawn in CSS: two angles so they are never all alike. */
.wall-photo::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 82px;
  height: 22px;
  margin-left: -41px;
  background: rgba(201, 138, 69, 0.34);
  border-left: 1px dashed rgba(43, 33, 24, 0.14);
  border-right: 1px dashed rgba(43, 33, 24, 0.14);
  transform: rotate(-4deg);
}
.wall-photo.tape-b::before { background: rgba(47, 156, 152, 0.26); transform: rotate(3deg); left: 30%; }

.wall-item figcaption { position: relative; margin-top: 12px; padding: 0 4px; }
.wall-note {
  display: block;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--turquoise-deep);
}
.wall-meta { display: block; margin-top: 4px; font-size: 0.82rem; color: var(--espresso-soft); letter-spacing: 0.01em; }
.wall-arrow { position: absolute; width: 58px; height: 42px; right: -8px; top: -46px; color: var(--espresso-soft); opacity: 0.8; pointer-events: none; }

/* Varied sizes and offsets on a 12-column base. */
.wall-1 { grid-column: 1 / span 5; transform: rotate(-1.6deg); }
.wall-1 .wall-photo img { aspect-ratio: 4 / 5; }
.wall-2 { grid-column: 7 / span 5; margin-top: 70px; transform: rotate(1.3deg); }
.wall-2 .wall-photo img { aspect-ratio: 4 / 3; }
.wall-3 { grid-column: 2 / span 4; margin-top: -10px; transform: rotate(1deg); }
.wall-3 .wall-photo img { aspect-ratio: 1 / 1; }
.wall-4 { grid-column: 6 / span 7; margin-top: -30px; transform: rotate(-0.8deg); }
.wall-4 .wall-photo img { aspect-ratio: 3 / 2; }
.wall-5 { grid-column: 1 / span 4; transform: rotate(1.4deg); }
.wall-5 .wall-photo img { aspect-ratio: 4 / 5; }
.wall-6 { grid-column: 6 / span 5; transform: rotate(-1.2deg); }
.wall-6 .wall-photo img { aspect-ratio: 4 / 3; }

.wall-local {
  max-width: 460px;
  margin: 56px 0 0 clamp(0px, 9vw, 120px);
  padding-left: 22px;
  border-left: 2px solid var(--turquoise);
}
.wall-local p { margin: 6px 0 0; color: var(--espresso-soft); }
.wall-local .draw { margin-right: 22px; color: var(--espresso); font-weight: 700; }
.wall-empty {
  margin: 48px 0 0;
  text-align: center;
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 1.45rem;
  color: var(--espresso-soft);
}

/* Reserved for an approved short testimonial: type on the wall, no box. */
.wall-quote { margin: 0; grid-column: 3 / span 8; text-align: center; }
.wall-quote blockquote { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(1.4rem, 2.8vw, 2rem); line-height: 1.3; }

@media (max-width: 760px) {
  .wall { grid-template-columns: 1fr; gap: 44px; padding: 0 6px; }
  .wall-item { grid-column: 1 !important; margin-top: 0 !important; max-width: 420px; }
  .wall-item:nth-child(even) { margin-left: auto !important; }
  .wall-arrow { display: none; }
  .wall-local { margin-left: 0; }
}

/* ---- Share form ---- */
.share { position: relative; margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(48px, 6vw, 72px); padding-bottom: clamp(48px, 6vw, 80px); border-top: 3px double var(--espresso); }
.leaf-wall { z-index: 0; right: clamp(8px, 4vw, 60px); top: -78px; width: 150px; height: auto; color: var(--turquoise-deep); opacity: 0.85; }
.share .container { position: relative; z-index: 1; }
.share-hand { margin-bottom: 4px; }
.share-title { font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height: 1.05; }
.share-lead { color: var(--espresso-soft); margin: 0 0 18px; max-width: 42ch; }
.field-help { margin: 6px 0 0; font-size: 0.86rem; color: var(--espresso-soft); }
.field-help.is-error { color: var(--brick); font-weight: 700; }
.contact-form input[type="file"] {
  padding: 8px 0;
  border-bottom: 1px solid var(--espresso-soft);
  font-size: 0.95rem;
}
.contact-form input[type="file"]::file-selector-button {
  margin-right: 14px;
  padding: 6px 14px;
  border: 1.5px solid var(--turquoise-deep);
  border-radius: 4px;
  background: transparent;
  color: var(--turquoise-deep);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
}
.consent { border: 0; margin: 0; padding: 0; display: grid; gap: 14px; }
.contact-form label.check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--espresso);
  line-height: 1.45;
}
.contact-form .check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  padding: 0;
  accent-color: var(--turquoise-deep);
}

/* ---- Homepage teaser ---- */
.community-teaser { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(56px, 6vw, 92px); }
.teaser-row { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 6vw, 84px); align-items: center; max-width: 960px; }
.teaser-photo { margin: 0; max-width: 360px; transform: rotate(-2deg); }
.teaser-photo .wall-photo img { aspect-ratio: 4 / 5; }
.teaser-photo figcaption { margin-top: 10px; }
.teaser-hand { display: block; font-size: 1.5rem; color: var(--turquoise-deep); margin-bottom: 4px; }
.teaser-line { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.15rem); line-height: 1.2; margin: 0 0 20px; text-wrap: balance; }
.teaser-copy { margin-top: clamp(0px, 3vw, 40px); }
.teaser-links { margin: 0; }
.teaser-links .draw { margin-right: 24px; font-weight: 700; color: var(--espresso); }
@media (max-width: 760px) {
  .teaser-row { grid-template-columns: 1fr; }
  .teaser-photo { max-width: 260px; }
}