/* ============================================
   Tea With Bri: homepage
   Loaded after styles.css on index.html only.

   The page reads like the shop: a sign band, an awning, the real window.
   Turquoise carries whole regions, cream supports it, and the gloss black
   of the front door supplies the ink.

   One recurring detail: the awning valance. Its stripes come from the patio
   umbrella and its scalloped hem from the awning over the door. It hangs in
   three places (the window, the brick wall, the Visit band) and follows the
   header once the page scrolls.
   ============================================ */

.home {
  --turquoise: #814238;
  --turquoise-deep: #65362e;
  --teal-night: #30251f;
  --cream: #fcf4e5;
  --paper: #fffaf1;
  --ink: #392b24;
  --ink-soft: #6b5548;
  --espresso: var(--ink);
  --espresso-soft: var(--ink-soft);
  --line: rgba(5, 36, 38, 0.24);
  --line-soft: rgba(5, 36, 38, 0.14);

  --font-display: 'Fraunces', Georgia, serif;

  --gut: clamp(16px, 3.4vw, 56px);
  --awning-w: clamp(46px, 5vw, 76px);
  --awning-h: calc(var(--awning-w) * 0.66);

  background: var(--cream);
  font-size: 1.0625rem;
  scrollbar-color: var(--turquoise-deep) var(--cream);
}

/* styles.css sets overflow-x: hidden on html and body, which stops the header
   sticking. clip guards against sideways scroll without breaking sticky. */
html:has(body.home),
body.home { overflow-x: clip; }

.home ::selection { background: var(--ink); color: var(--cream); }
.home :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.home .visit-band :focus-visible,
.home footer :focus-visible { outline-color: var(--cream); }

.home h1,
.home h2,
.home h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: inherit;
  letter-spacing: 0;
}
.home h2 { font-size: clamp(2.6rem, 5vw, 5rem); line-height: 0.95; margin: 0; }

.home section { padding: 0; }
.home figure { margin: 0; }
.home img { height: auto; }

.home figcaption { margin-top: 8px; font-size: 0.92rem; font-weight: 700; color: var(--ink-soft); }

.home .draw { font-weight: 700; color: inherit; }

/* ---------- The awning valance ----------
   Panel colors live in the tile, so they repeat --turquoise and --cream.
   "round" fits a whole number of panels, so none is ever cut at the edge. */
.awning,
.home .site-header::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath fill='%23814238' d='M0 0h60v16a30 24 0 0 1-60 0z'/%3E%3Cpath fill='%23fcf4e5' d='M60 0h60v16a30 24 0 0 1-60 0z'/%3E%3C/svg%3E") round 0 0 / calc(var(--awning-w) * 2) var(--awning-h);
  background-repeat: round no-repeat;
  filter: drop-shadow(0 4px 4px rgba(5, 36, 38, 0.35));
  pointer-events: none;
}

.awning {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  height: var(--awning-h);
  transform-origin: top;
}

/* ---------- Header ---------- */
.home .site-header,
.home .site-header.scrolled {
  background: var(--turquoise);
  border-bottom: 0;
  color: var(--ink);
}

/* The awning follows the page: it unrolls under the header once you scroll. */
.home .site-header::after {
  --awning-w: clamp(30px, 3vw, 44px);
  --awning-h: calc(var(--awning-w) * 0.5);
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: var(--awning-h);
  transform: scaleY(0);
  z-index: -1;
  transform-origin: top;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.home .site-header.scrolled::after { transform: scaleY(1); }

.home .nav {
  max-width: none;
  padding: 10px var(--gut);
}

.home .brand {
  gap: 10px;
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}

/* The real logo artwork, cropped to the teapot with its handle and paw intact
   (source pixels x 80-420, y 12-275 of the 500x455 file). The white version
   follows the shop's own window lettering; the file itself is untouched. */
.pot {
  display: block;
  position: relative;
  flex: none;
  width: 58px;
  aspect-ratio: 340 / 263;
  overflow: hidden;
}
.home .pot img,
.home .logo-lockup {
  filter: invert(1) grayscale(1) brightness(2.1);
  mix-blend-mode: screen;
}
.home .pot img {
  position: absolute;
  max-width: none;
  width: 147.06%;
  left: -23.53%;
  top: -4.56%;
}

.home .nav-links a {
  font-weight: 800;
  font-size: 1rem;
  color: var(--ink);
}
.home .nav-links a::after { background: var(--cream); height: 3px; }
.home .nav-links a:hover,
.home .nav-links a.active { color: var(--ink); }

.home .nav-toggle { display: none; color: var(--ink); line-height: 0; padding: 8px; margin-right: -8px; }

/* ---------- Buttons ---------- */
.home .btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  padding: 14px 28px 15px;
  border-radius: 3px;
  border: 0;
  box-shadow: none;
  transition: background 0.18s ease, color 0.18s ease;
}
.home .btn:hover { transform: none; box-shadow: none; }
.home .btn:active { transform: translateY(1px); box-shadow: none; }

/* The gloss black of the front door. */
.btn-sign { background: var(--ink); color: var(--cream); }
.btn-sign:hover { background: var(--cream); color: var(--ink); }
.btn-cream { background: var(--cream); color: var(--ink); }
.btn-cream:hover { background: var(--turquoise); color: var(--ink); }

.home .text-link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
}
.home .text-link::after { background: var(--cream); }
.home .text-link:hover { color: var(--ink); border-color: var(--ink); }

/* ---------- 1. Shopfront ---------- */
.home .shopfront {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 25%);
  grid-template-areas:
    "title lead"
    "title actions"
    "window window";
  column-gap: clamp(20px, 3vw, 48px);
  background: var(--turquoise);
  color: var(--ink);
}

.shopfront h1 {
  grid-area: title;
  align-self: end;
  margin: 0;
  padding: clamp(6px, 1vw, 16px) 0 clamp(14px, 1.5vw, 22px) var(--gut);
  font-size: min(10.6vw, 19vh, 10rem);
  line-height: 0.9;
  color: var(--cream);
  text-wrap: wrap;
}

.shopfront-lead {
  grid-area: lead;
  align-self: end;
  padding-right: var(--gut);
}
.shopfront-lead .lead { margin: 0; font-size: 1.1rem; line-height: 1.45; font-weight: 700; }

.open-line { margin: 10px 0 0; }
.home .open-now {
  display: inline-block;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.1;
  color: var(--ink);
}
.open-now::first-letter { text-transform: uppercase; }

.shopfront-actions {
  grid-area: actions;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  padding: 14px var(--gut) clamp(16px, 1.7vw, 24px) 0;
}

.shopfront-window {
  grid-area: window;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1400 / 610;
}
.shopfront-window img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .shopfront .awning { animation: unroll 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
}
@keyframes unroll { from { transform: scaleY(0.12); } }

/* ---------- 2. Facts ---------- */
.home .facts { padding: clamp(36px, 4.5vw, 68px) var(--gut); }

.facts-list {
  display: grid;
  grid-template-columns: 1.3fr 1.2fr 0.8fr 1fr;
  gap: 30px clamp(24px, 3.5vw, 56px);
  margin: 0;
}
.facts-list dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 2.6vw, 2.5rem);
  line-height: 1;
  margin-bottom: 10px;
  color: var(--turquoise-deep);
}
.facts-list dd { margin: 0; line-height: 1.5; }
.facts-hours { font-variant-numeric: tabular-nums; font-weight: 700; }
.facts-links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

/* ---------- 3. Counter ---------- */
.home .counter {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(12px, 1.6vw, 24px);
  padding-bottom: clamp(56px, 7vw, 110px);
}
.counter img { width: 100%; object-fit: cover; }

.counter-lead {
  grid-column: 1 / span 6;
  grid-row: 1 / span 3;
}
.counter-lead img { aspect-ratio: 900 / 990; }
.counter-lead figcaption { padding-left: var(--gut); }

.counter-head {
  grid-column: 7 / -1;
  grid-row: 1;
  padding: 0 var(--gut) clamp(20px, 3vw, 44px) clamp(8px, 1.5vw, 24px);
}
.counter-head h2 { font-size: clamp(3rem, 6.2vw, 6rem); color: var(--turquoise-deep); }
.counter-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 18px 0 0; }

.counter-ribbon { grid-column: 7 / span 3; grid-row: 2; }
.counter-ribbon img { aspect-ratio: 1 / 1; object-position: 50% 25%; }
.counter-cake { grid-column: 10 / -1; grid-row: 2; }
.counter-cake img { aspect-ratio: 1 / 1; object-position: 50% 85%; }

/* Turquoise ribbon in the photos, turquoise field behind them. */
.candles {
  grid-column: 5 / -1;
  grid-row: 3;
  position: relative;
  z-index: 1;
  align-self: end;
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(2, clamp(120px, 15vw, 230px));
  gap: clamp(10px, 1.2vw, 16px);
  align-items: end;
  margin-top: clamp(14px, 1.6vw, 24px);
  padding: clamp(18px, 2vw, 30px) var(--gut) clamp(18px, 2vw, 30px) clamp(18px, 2vw, 30px);
  background: var(--turquoise);
  color: var(--ink);
}
.candles h2 { font-size: clamp(2.2rem, 3.6vw, 3.6rem); color: var(--cream); }
/* These two source files carry white bars along their edges; trim them without touching the files. */
.candles img { clip-path: inset(3.6%); transform: scale(1.075); }
.candles p { margin: 12px 0 0; }

/* ---------- 4. Family ---------- */
.home .family {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(12px, 1.6vw, 24px);
  padding: 0 var(--gut);
}
.family-copy { grid-column: 1 / span 6; padding-bottom: clamp(44px, 6vw, 90px); }
.family-copy h2 {
  font-size: clamp(3rem, 6.8vw, 6.6rem);
  margin-bottom: clamp(18px, 2vw, 30px);
  color: var(--turquoise-deep);
}
.family-copy p { max-width: 58ch; }

/* The photo steps down over the wall below, so the two read as one room. */
.family-photo {
  grid-column: 8 / -1;
  margin-right: calc(-1 * var(--gut)) !important;
  margin-bottom: calc(-1 * clamp(70px, 10vw, 170px)) !important;
}
.family-photo img { width: 100%; aspect-ratio: 1 / 1.08; object-fit: cover; object-position: 50% 8%; }
.home .family-photo figcaption {
  margin: 0;
  padding: 8px 14px 10px;
  background: var(--turquoise);
  color: var(--ink);
}

/* ---------- 5. Stay Awhile ---------- */
.home .stay-wall { position: relative; overflow: hidden; }
.stay-wall > img { width: 100%; aspect-ratio: 1400 / 717; object-fit: cover; }

/* Set on the open stretch of brick, right of the shop's own framed sign. */
.stay-lettering {
  position: absolute;
  top: 10%;
  left: 28.5%;
  width: 34%;
  color: var(--cream);
}
.stay-lettering h2 { font-size: clamp(5rem, 8.4vw, 8.4rem); line-height: 1; }
.stay-lettering p { margin: 10px 0 0; font-weight: 700; font-size: clamp(0.95rem, 1.2vw, 1.15rem); }

/* ---------- 6. Menu board ---------- */
.home .menuboard {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 0 clamp(28px, 5vw, 84px);
  padding: clamp(52px, 6.5vw, 100px) var(--gut) 0;
  background: var(--turquoise);
  color: var(--ink);
}
.menuboard p { margin: 0; }
.menuboard .nick { font-family: var(--font-display); font-weight: 700; color: var(--cream); line-height: 0.98; }
.menuboard .real {
  margin-top: 6px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.menuboard .desc { margin-top: 6px; line-height: 1.45; }

.home .menuboard-feature .nick { margin: 0; font-size: clamp(4rem, 10vw, 10rem); line-height: 0.88; color: var(--cream); text-indent: -0.24em; max-width: 3.7em; }
.menuboard-feature .real { margin-top: 18px; font-size: 0.95rem; }
.menuboard-feature .desc { font-size: 1.2rem; font-weight: 700; max-width: 34ch; }
.menuboard-feature { display: flex; flex-direction: column; align-items: flex-start; }
.menuboard-follow { margin-top: auto !important; padding-top: clamp(20px, 2.4vw, 34px); }

.menuboard-list > div { padding: 15px 0 16px; border-top: 2px solid rgba(5, 36, 38, 0.5); }
.menuboard-list > div:last-child { border-bottom: 2px solid rgba(5, 36, 38, 0.5); }
.menuboard-list .nick { font-size: clamp(2rem, 2.9vw, 2.75rem); }

/* What's your cup? The markup and behaviour are unchanged; only the look is. */
.home .cup {
  grid-column: 1 / -1;
  margin: clamp(44px, 5.5vw, 80px) calc(-1 * var(--gut)) 0;
  padding: clamp(36px, 4.5vw, 68px) var(--gut);
  border: 0;
  background: var(--cream);
  color: var(--ink);
  scroll-margin-top: 90px;
}
.home .cup-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 24px;
  margin-bottom: clamp(22px, 2.6vw, 36px);
  text-align: left;
}
.home .cup-head h2 { font-size: clamp(3rem, 6vw, 6rem); margin: 0; color: var(--turquoise-deep); }
.home .cup-head p { margin: 0; font-weight: 700; }
.tuck { margin-inline: -0.07em; }
.home .cup-form {
  max-width: none;
  display: grid;
  grid-template-columns: 0.8fr 1.6fr 1fr;
  gap: 0 clamp(20px, 3vw, 48px);
}
.home .cup-q { margin: 0; gap: 8px; align-items: center; align-content: flex-start; }
.home .cup-q-label,
.home .cup-kicker,
.home .cup-prompt {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--ink);
}
.home .cup-q-label { margin-bottom: 4px; }
.home .cup-choice span {
  padding: 8px 15px 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.home .cup-choice:hover span { background: rgba(28, 159, 157, 0.2); color: var(--ink); border-color: var(--ink); }
.home .cup-choice input:checked + span { background: var(--turquoise-deep); border-color: var(--turquoise-deep); color: var(--paper); }
.home .cup-choice input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }
.home .cup-result {
  grid-column: 1 / -1;
  min-height: 0;
  margin: clamp(22px, 2.6vw, 34px) 0 0;
  padding: 18px 0 0;
  border: 0;
  border-top: 2px solid var(--ink);
}
.home .cup-result .steam { display: none; }
.home .cup-pick { margin: 2px 0; font-size: clamp(2.6rem, 5vw, 5rem); line-height: 0.95; color: var(--turquoise-deep); }
.home .cup-real { color: var(--ink); }
.home .cup-why,
.home .cup-note { color: var(--ink); max-width: 62ch; }
.home .cup-actions { align-items: center; }
.home .cup-actions .text-link,
.home button.text-link { font-size: 1.35rem; border-bottom: 2px solid var(--turquoise-deep); }
.home .cup-actions .text-link::after { background: var(--turquoise-deep); }
.home .cup-none { text-align: left; }

/* ---------- 7. Around the shop ---------- */
.home .around {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.4fr);
  gap: clamp(36px, 5vw, 84px);
  padding: clamp(52px, 6.5vw, 100px) var(--gut) calc(var(--awning-h) + clamp(40px, 5vw, 72px));
  background: var(--turquoise);
  color: var(--ink);
}
.home .around h2 { color: var(--cream); }
.home .around figcaption { color: var(--ink); }

.home .events { max-width: none; margin: 0; }
.home .events h2 { margin-bottom: clamp(14px, 1.5vw, 22px); font-size: clamp(2.4rem, 3.4vw, 3.4rem); line-height: 1; }
.home .event-item { border-color: var(--ink); }
.home .event-date { color: var(--ink); }
.home .event-body h3 { font-size: 1.9rem; line-height: 1; }
.home .event-body p,
.home .events-none { color: var(--ink); }
.home .events-none { border-color: var(--ink); font-weight: 700; }
.home .events-more { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 1rem; }
.home .events-more a { color: var(--ink); }

.around-community {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 18px clamp(18px, 2.4vw, 36px);
  grid-template-rows: auto 1fr;
  align-content: start;
}
.around-community figure { grid-row: 1 / span 2; }
.around-community img { width: 100%; aspect-ratio: 1 / 0.8; object-fit: cover; object-position: 50% 76%; }
.home .around-community h2 { font-size: clamp(2.4rem, 3.4vw, 3.4rem); line-height: 1; }
.around-copy p { margin: 12px 0 0; font-weight: 700; }
.around-links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; align-self: start; }

/* ---------- 8. Visit ---------- */
.home .visit-band {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
  gap: clamp(18px, 2.4vw, 36px) clamp(30px, 6vw, 100px);
  align-items: start;
  padding: calc(var(--awning-h) + clamp(40px, 5vw, 72px)) var(--gut) clamp(48px, 6vw, 88px);
  background: var(--turquoise-deep);
  color: var(--cream);
}
.visit-band h2 { grid-column: 1 / -1; font-size: clamp(3.6rem, 9.4vw, 9.4rem); line-height: 0.9; }
.home .visit-address {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 2.8vw, 2.7rem);
  line-height: 1.05;
}
.home .visit-phone { margin: 16px 0 0; color: var(--cream); font-weight: 700; }
.home .visit-phone a { border-bottom: 1px solid currentColor; }
.home .visit-phone a:hover { color: var(--cream); border-bottom-width: 2px; }
.home .visit-hours-label { font-family: var(--font-display); font-weight: 700; font-size: 2rem; letter-spacing: 0; text-transform: none; line-height: 1; color: var(--cream); margin-bottom: 8px; }
.home .hours-grouped { font-size: 1.02rem; }
.home .hours-grouped td { color: var(--cream); border-bottom-color: rgba(255, 246, 227, 0.32); }
.home .hours-grouped td:last-child { color: var(--cream); font-weight: 700; }

/* ---------- Footer ---------- */
.home footer { background: var(--teal-night); color: var(--cream); padding-inline: var(--gut); }
.home .footer-grid { max-width: none; grid-template-columns: 1.5fr 0.9fr 1fr 1.3fr; }
.home footer h4 { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; line-height: 1; color: var(--cream); }
.home footer .footer-brand { display: block; }
.home .logo-lockup { width: 190px; margin-bottom: 10px; }
.home footer a:hover { color: var(--cream); }
.home footer .draw { --draw-color: var(--cream); }
.home .footer-bottom { max-width: none; opacity: 1; border-top-color: rgba(255, 246, 227, 0.28); }

/* ---------- Narrow screens ---------- */
@media (min-width: 861px) and (max-width: 1300px) {
  .home .shopfront { grid-template-columns: minmax(0, 1fr) minmax(320px, 30%); }
  .shopfront h1 { font-size: min(9vw, 19vh); }
  .shopfront-lead { padding-top: 10px; }
  .shopfront-lead .lead { font-size: 1rem; }
  .shopfront-actions { flex-wrap: nowrap; white-space: nowrap; }
  .home .shopfront-actions .btn { padding-inline: 20px; }
}

@media (max-width: 1040px) {
  .facts-list { grid-template-columns: 1fr 1fr; }
  .home .cup-form { grid-template-columns: 1fr; gap: 16px; }
  .home .around { grid-template-columns: 1fr; }
}

@media (min-width: 561px) and (max-width: 860px) {
  .home .shopfront h1 { font-size: 13vw; }
}

@media (max-width: 860px) {
  .home .nav-toggle { display: block; }
  /* styles.css collapses the nav at 760px; the homepage's wider links need it sooner. */
  .home .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 2;
    display: none;
    flex-direction: column;
    gap: 4px;
    background: var(--turquoise);
    padding: 4px var(--gut) 20px;
    border-bottom: 0;
    box-shadow: 0 10px 16px rgba(5, 36, 38, 0.28);
  }
  .home .nav-links.open { display: flex; }
  .home .nav-links a { display: block; padding: 9px 0; font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; line-height: 1.1; }
  .home .nav-links a::after { display: none; }
  .home .nav-links a.active { text-decoration: underline; text-decoration-color: var(--cream); text-decoration-thickness: 3px; text-underline-offset: 4px; }

  .home .shopfront {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "actions" "window" "lead";
  }
  .home .shopfront h1 { padding: 6px var(--gut) 12px; }
  .shopfront h1 { font-size: 18.6vw; }
  .shopfront-actions { padding: 0 var(--gut) 18px; }
  .shopfront-window { aspect-ratio: 1 / 1.08; }
  .shopfront-window img { object-position: 87% 100%; }
  .shopfront-lead { padding: 18px var(--gut) 22px; }
  .home .menuboard-feature .nick { text-indent: -0.14em; max-width: none; }

  .home .counter { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 6px; padding-bottom: 0; }
  .counter-head { grid-column: 1 / -1; grid-row: 1; padding: 0 var(--gut) 18px; }
  .counter-lead { grid-column: 1 / -1; grid-row: 2; }
  .counter-head h2 { font-size: 17vw; line-height: 0.9; }
  .counter-lead img { aspect-ratio: 1 / 0.96; }
  .counter-lead figcaption { padding-inline: var(--gut); margin-bottom: 14px; }
  .counter-ribbon { grid-column: 1; grid-row: 3; }
  .counter-cake { grid-column: 2; grid-row: 3; }
  .candles {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 24px var(--gut);
  }
  .candles-copy { grid-column: 1 / -1; }
  .candles img { max-width: 240px; }
  .candles h2 { font-size: 12.5vw; }

  .home .family { display: block; padding-top: 48px; }
  .family-copy { padding-bottom: 26px; }
  .family-copy h2 { font-size: 16vw; line-height: 0.9; }
  .family-photo {
    margin: 0 calc(-1 * var(--gut)) -44px var(--gut) !important;
  }

  .home .stay-wall {
    display: flex;
    flex-direction: column-reverse;
    padding-top: 74px;
    background: var(--cream);
  }
  .stay-lettering { position: static; width: auto; padding: 0 var(--gut) 20px; color: var(--turquoise-deep); }
  .stay-lettering h2 { font-size: 25vw; white-space: nowrap; }
  .stay-lettering h2 br { display: none; }
  .stay-lettering p { color: var(--ink); }
  .stay-wall > img { aspect-ratio: 4 / 3; object-position: 26% 50%; }
  .stay-wall .awning { display: none; }

  .home .menuboard { grid-template-columns: minmax(0, 1fr); }
  .menuboard-feature .nick { font-size: 21vw; }
  .menuboard-list { margin-top: 30px; }
  .menuboard-list .nick { font-size: 2.35rem; }

  .around-community figure { grid-row: auto; margin-inline: calc(-1 * var(--gut)) !important; }
  .around-community figcaption { padding-inline: var(--gut); }
  .around-links { padding-bottom: 0; }

  .home .around { padding-bottom: calc(var(--awning-h) + 44px); }
  .around-community { grid-template-columns: minmax(0, 1fr); }
  .home .visit-band { grid-template-columns: minmax(0, 1fr); }
  .visit-band h2 { font-size: 19vw; }
  .home .footer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Café refresh — warm cherrywood, buttercream and olive. Homepage only. */
.home { --font-body:'DM Sans',system-ui,sans-serif; --olive:#626c4b; font-family:var(--font-body); }
.home h2 { font-weight:500; letter-spacing:-.035em; line-height:1.12; }
.home .site-header,.home .site-header.scrolled { background:var(--cream); border-bottom:1px solid #81423825; }
.home .site-header::after { display:none; }
.home .nav { max-width:1480px; margin:auto; padding-block:18px; }
.home .brand { font-size:1.65rem; color:var(--turquoise-deep); }
.home .pot img { filter:none; mix-blend-mode:multiply; }
.home .nav-links a { font-size:.86rem; font-weight:600; }
.home .nav-links a::after { background:var(--turquoise); height:2px; }
.home .shopfront {
  max-width:1480px; margin:auto; padding:clamp(28px,5vw,80px) var(--gut) 54px;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  grid-template-areas:'title window' 'lead window' 'actions window';
  gap:0 clamp(28px,5vw,80px); background:var(--cream); align-items:start;
}
.home .shopfront h1 { font-size:clamp(3rem,5.9vw,6.4rem); font-weight:500; line-height:1.04; letter-spacing:-.055em; color:var(--turquoise-deep); padding:12px 0 24px; align-self:start; }
.cafe-location { display:block; margin-bottom:26px; font:600 .72rem/1.5 var(--font-body); letter-spacing:.15em; text-transform:uppercase; color:var(--olive); }
.home .shopfront h1 em { font-weight:500; }
.home .shopfront-lead { padding:0; align-self:start; max-width:37ch; }
.home .shopfront-lead .lead { font-size:1.05rem; line-height:1.8; font-weight:400; color:var(--ink-soft); }
.home .open-now { font:600 .82rem/1.5 var(--font-body); color:var(--olive); }
.home .shopfront-actions { padding:26px 0 12px; align-self:start; gap:18px; flex-wrap:wrap; white-space:normal; }
.home .btn { font:600 .88rem/1.3 var(--font-body); padding:15px 24px; border-radius:4px; }
.home .btn-sign { background:var(--turquoise-deep); color:var(--cream); }
.home .btn-sign:hover { background:#49261f; color:var(--cream); }
.home .text-link { font:600 .86rem/1.5 var(--font-body); border-bottom:1px solid currentColor; }
.home .shopfront-window { aspect-ratio:4/4.7; border-radius:48% 48% 4px 4px; border:7px solid #eee1c9; outline:1px solid #bda98d; outline-offset:5px; margin:8px 7px; }
.home .shopfront-window img { object-position:70% 50%; }
.home .shopfront-window .awning { display:none; }
.home .facts { background:#efe6d3; padding:30px var(--gut); border-block:1px solid #a58b6625; }
.home .facts-list { max-width:1368px; margin:auto; gap:28px; }
.home .facts-list dt { font:600 1.1rem/1.3 var(--font-display); color:var(--turquoise-deep); }
.home .facts-list dd { font-size:.85rem; line-height:1.7; }
.home .counter { max-width:1480px; margin:0 auto; padding:80px var(--gut); gap:24px; }
.home .counter-head { padding:8px 0 28px 16px; }
.home .counter-head h2 { font-size:clamp(2.1rem,3.6vw,4rem); font-weight:500; line-height:1.12; }
.home .counter-lead img { border-radius:4px 4px 80px 4px; }
.home .counter-lead figcaption { padding-left:0; font-weight:400; font-style:italic; }
.home .counter-ribbon img,.home .counter-cake img { border-radius:4px; }
.home .candles { background:#e6e8d8; color:var(--ink); border-radius:4px; padding:24px; }
.home .candles h2 { color:#454e35; font-size:clamp(1.5rem,2.4vw,2.5rem); font-weight:500; }
.home .family { max-width:1380px; margin:0 auto 64px; padding:20px var(--gut); align-items:center; }
.home .family-copy { padding-bottom:0; }
.home .family-copy h2 { font-size:clamp(2.3rem,4.3vw,4.5rem); font-weight:500; line-height:1.1; }
.home .family-copy p { font-size:1rem; line-height:1.8; }
.home .family-photo { margin:0 !important; }
.home .family-photo img { border-radius:46% 46% 3px 3px; }
.home .family-photo figcaption { background:transparent; color:var(--ink-soft); font-weight:400; font-size:.8rem; padding-inline:0; }
.home .stay-wall .awning { display:none; }
.home .stay-lettering { top:auto; bottom:8%; left:6%; width:auto; padding:24px 30px; background:#fcf4e5ed; color:var(--turquoise-deep); }
.home .stay-lettering h2 { font-size:clamp(2.5rem,5vw,5rem); }
.home .stay-lettering h2 br { display:none; }
.home .stay-lettering p { font-size:.85rem; font-weight:400; }
.home .menuboard { background:#626c4b; color:var(--cream); }
.home .menuboard-feature .nick { font-size:clamp(2.7rem,4.7vw,5rem); max-width:12ch; font-weight:500; line-height:1.12; text-indent:0; }
.home .menuboard-list .nick { font-size:clamp(1.5rem,2.1vw,2.2rem); font-weight:500; line-height:1.2; }
.home .menuboard-list > div { border-color:#fcf4e550; }
.home .menuboard-feature .desc { font-size:1rem; font-weight:400; line-height:1.7; }
.home .cup-head h2 { font-size:clamp(2.4rem,4.2vw,4rem); font-weight:500; }
.home .cup-choice span { font:500 .9rem/1.4 var(--font-body); border-width:1px; border-radius:30px; }
.home .cup-pick { font-size:clamp(2rem,4vw,3.5rem); line-height:1.2; }
.home .around { background:#eee3cf; }
.home .around h2 { color:var(--turquoise-deep); font-weight:500; line-height:1.15; }
.home .visit-band { background:#65362e; }
.home .visit-band .awning { display:none; }
.home .visit-band h2 { font-size:clamp(2.7rem,6vw,6rem); font-weight:500; line-height:1.1; max-width:15ch; }
.home .visit-address { font-size:clamp(1.4rem,2.5vw,2.2rem); line-height:1.4; }
.home footer { background:#30251f; }
.home footer h4 { font-size:1.2rem; line-height:1.4; }
@media(prefers-reduced-motion:no-preference) {
  .home .shopfront-window img { animation:cafe-arrive .9s ease-out both; }
  .home .btn { transition:background .2s,transform .2s; }
  .home .btn:hover { transform:translateY(-2px); }
}
@keyframes cafe-arrive { from { opacity:.5; transform:scale(1.035); } to { opacity:1; transform:scale(1); } }
@media(max-width:860px) {
  .home .nav-links { background:var(--cream); border-bottom:1px solid #81423840; }
  .home .nav-links a { font:600 1.1rem/1.5 var(--font-body); padding:12px 0; }
  .home .nav-links a.active { text-decoration-color:var(--turquoise); }
  .home .shopfront { grid-template-columns:minmax(0,1fr); grid-template-areas:'title' 'lead' 'actions' 'window'; padding-top:26px; }
  .home .shopfront h1 { font-size:clamp(3rem,10vw,5.8rem); padding:10px 0 20px; }
  .home .shopfront-window { aspect-ratio:5/4; border-radius:42% 42% 4px 4px; margin:18px 7px 0; }
  .home .counter { padding:48px var(--gut); gap:16px; }
  .home .counter-head { padding:0 0 14px; }
  .home .counter-head h2 { font-size:clamp(2rem,7vw,3.2rem); }
  .home .candles { margin-top:0; padding:20px; }
  .home .family-photo { max-width:430px; margin:20px auto 0 !important; }
  .home .stay-wall { padding-top:0; flex-direction:column; }
  .home .stay-lettering { padding:24px var(--gut); }
  .home .stay-lettering h2 { font-size:clamp(2.6rem,8vw,4rem); }
  .home .menuboard-feature .nick { max-width:15ch; }
  .home .cup-head p { font-weight:400; }
}
@media(max-width:560px) {
  .home .facts-list { grid-template-columns:1fr; gap:20px; }
  .home .facts-list > div { padding-bottom:16px; border-bottom:1px solid #81423825; }
  .home .candles { grid-column:1 / -1; }
  .home .shopfront-actions { gap:16px; }
  .home .brand { font-size:1.35rem; }
}

/* Supplied-photo album: a shop corner, a gathering and a seasonal bake. */
.home .shop-album { max-width:1480px; margin:0 auto 70px; padding:0 var(--gut); display:grid; grid-template-columns:1fr 1.05fr 1.2fr; gap:24px 32px; align-items:start; }
.album-intro { grid-column:1; grid-row:1; padding:20px 0; }
.album-eyebrow { display:block; color:var(--olive); font:600 .7rem/1.5 var(--font-body); letter-spacing:.12em; text-transform:uppercase; margin-bottom:20px; }
.home .album-intro h2 { font-size:clamp(2rem,3.2vw,3.5rem); color:var(--turquoise-deep); margin-bottom:20px; }
.album-intro p { max-width:27ch; font-size:.95rem; color:var(--ink-soft); }
.album-tall { grid-column:2; grid-row:1 / span 2; }
.album-people { grid-column:3; grid-row:1; }
.album-bake { grid-column:1; grid-row:2; margin-top:-10px !important; }
.shop-album img { width:100%; object-fit:cover; border-radius:4px; }
.album-tall img { aspect-ratio:3/4; }
.album-people img { aspect-ratio:4/4.2; object-position:center 35%; }
.album-bake img { aspect-ratio:4/3; }
.home .shop-album figcaption { font-size:.8rem; font-weight:400; line-height:1.6; }
.home .shopfront-window img { object-position:50% 50%; }
.home .counter-lead img { object-position:center; }
.home .counter-ribbon img { object-position:center; }
.home .counter-cake img { object-position:55% 60%; }
.home .around-community img { aspect-ratio:4/3; object-position:center; }
@media(max-width:860px) {
 .home .shop-album { grid-template-columns:1fr 1fr; gap:24px 16px; margin-bottom:40px; }
 .album-intro { grid-column:1 / -1; grid-row:1; }
 .album-intro p { max-width:45ch; }
 .album-tall { grid-column:1; grid-row:2 / span 2; }
 .album-people { grid-column:2; grid-row:2; }
 .album-bake { grid-column:2; grid-row:3; margin-top:0 !important; }
 .album-tall img { aspect-ratio:3/5; }
 .album-people img { aspect-ratio:1; }
}