/* Wrenfield Bakehouse, a made-up bakery for testing Zibby's video hero (templates/video-hero-demo/README.md).
   The design kit's Grove preset with a warmer palette, then the kit's base.css, then this design's own rules. */
@font-face {
  font-family: Fraunces;
  src: url("/fonts/fraunces-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/fonts/dm-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #faf5ec;
  --surface: #f1e6d3;
  --ink: #2b1d14;
  --muted: #6b5646;
  --line: #e2d3bb;
  --accent: #e3a72a;
  --accent-ink: #2b1d14;
  --accent-text: #7a5200;
  --band: #2b1d14;
  --band-ink: #f7efe2;
  --header-bg: #faf5ec;
  --header-ink: #2b1d14;
  --font-display: Fraunces, Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --display-weight: 600;
  --display-case: none;
  --display-tracking: -0.015em;
  --display-scale: 1.02;
  --eyebrow-case: none;
  --eyebrow-tracking: 0.02em;
  --button-case: none;
  --radius: 18px;
  --radius-image: 26px;
  --button-radius: 999px;
  --image-border: 0;
  --image-shadow: none;
  --space: clamp(3rem, 6vw, 6.75rem);
  /* The video hero's tint: Hero Studio draws the same colour and opacity over the camera (hero-configuration.json). */
  --hero-tint: rgb(36 24 16 / 0.45);
}

/* The design kit's base stylesheet (templates/design-kit/README.md). Every colour, font, size and corner below
   comes from a custom property, so a preset (presets/<id>.json) restyles the whole site by setting them on
   :root, and a design's own rules come after this file. The class names are the vocabulary the section files
   (sections/<kind>/<variant>.html) are written in. */

/* ── Reset and type ─────────────────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--body-size, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
img { background: var(--surface); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--accent-text, var(--accent)); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
p, ul, ol, dl, figure, blockquote { margin: 0; }
ul[class], ol[class], nav ul, footer ul { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight, 700);
  text-transform: var(--display-case, none);
  letter-spacing: var(--display-tracking, -0.01em);
  line-height: 1.08;
  text-wrap: balance;
}
h1 { font-size: calc(clamp(2.4rem, 5.2vw + 1rem, 4.6rem) * var(--display-scale, 1)); }
h2 { font-size: calc(clamp(1.8rem, 2.6vw + 1rem, 3rem) * var(--display-scale, 1)); }
h3 { font-size: calc(clamp(1.2rem, 0.6vw + 1rem, 1.45rem) * var(--display-scale, 1)); line-height: 1.2; }
p + p { margin-top: 0.9em; }
:is(h1, h2, h3) + :is(p, ul, ol, address, .contact-lines) { margin-top: 0.75em; }
.actions + * { margin-top: 1.25rem; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Layout ─────────────────────────────────────────────────────────────────────────────────────────── */

.wrap { width: min(100% - 2 * var(--gutter, 1.25rem), var(--wrap, 72rem)); margin-inline: auto; }
.section { padding-block: var(--space, 5rem); }
.section--surface { background: var(--surface); }
.section--band { background: var(--band); color: var(--band-ink); }
.section--band a:hover { color: inherit; }
.section--accent { background: var(--accent); color: var(--accent-ink); }
/* Two plain sections in a row share their space; after a band, a section keeps its own. */
.section:not([class*="section--"]) + .section:not([class*="section--"]) { padding-top: 0; }

.section__head { max-width: var(--measure, 40rem); margin-bottom: calc(var(--space, 5rem) * 0.6); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head .lede { margin-top: 1rem; }
.eyebrow {
  font-family: var(--font-label, var(--font-body));
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: var(--eyebrow-tracking, 0.12em);
  text-transform: var(--eyebrow-case, uppercase);
  color: var(--accent-text, var(--accent));
  margin-bottom: 0.9rem;
}
.section--band .eyebrow, .section--accent .eyebrow { color: inherit; opacity: 0.8; }
.lede { font-size: 1.2em; line-height: 1.5; color: var(--muted); max-width: var(--measure, 40rem); }
.section--band .lede, .section--accent .lede { color: inherit; opacity: 0.85; }
.prose { max-width: var(--measure, 40rem); }
.prose h3 { margin: 1.6em 0 0.5em; }

/* ── Buttons ────────────────────────────────────────────────────────────────────────────────────────── */

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 3rem; padding: 0.75rem 1.4rem;
  border: 2px solid var(--accent); border-radius: var(--button-radius, var(--radius));
  background: var(--accent); color: var(--accent-ink);
  font: inherit; font-weight: 600; text-decoration: none; text-transform: var(--button-case, none); letter-spacing: var(--button-tracking, 0);
  cursor: pointer; transition: filter 0.15s, transform 0.15s;
}
.button:hover { color: var(--accent-ink); filter: brightness(1.08); transform: translateY(-1px); }
.button--ghost { background: transparent; color: inherit; border-color: currentColor; }
.button--ghost:hover { color: inherit; }
.section--accent .button { background: var(--accent-ink); color: var(--accent); border-color: var(--accent-ink); }
.text-link { font-weight: 600; color: var(--accent-text, var(--accent)); }

/* ── Header ─────────────────────────────────────────────────────────────────────────────────────────── */

.site-header { background: var(--header-bg, var(--bg)); color: var(--header-ink, var(--ink)); border-bottom: 1px solid var(--line); position: relative; z-index: 10; }
.site-header__inner { display: flex; align-items: center; gap: 0.75rem 2rem; min-height: 4.5rem; padding-block: 0.75rem; }
.brand { font-family: var(--font-display); font-weight: var(--display-weight, 700); text-transform: var(--display-case, none); letter-spacing: var(--display-tracking, 0); font-size: 1.3rem; line-height: 1.1; text-decoration: none; margin-right: auto; min-width: 0; }
.brand:hover { color: inherit; }
.brand small { display: block; font-family: var(--font-body); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
.nav { min-width: 0; }
.nav ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem 1.5rem; }
.nav a { text-decoration: none; font-weight: 500; padding-block: 0.4rem; border-bottom: 2px solid transparent; }
.nav a[aria-current="page"] { border-bottom-color: var(--accent); }
.header-call { white-space: nowrap; flex: none; }
.site-header--centered .site-header__inner { flex-direction: column; justify-content: center; text-align: center; }
.site-header--centered .brand { margin-right: 0; font-size: 1.6rem; }
.site-header--centered .nav ul { justify-content: center; }

/* Brand, nav and call fit one row only when there is room for all three (a long name and tagline needs about
   1100px). Below that the brand and the call sit together on the first row and the pages run underneath, every link
   visible, wrapping rather than scrolling. */
@media (max-width: 1099px) {
  .site-header:not(.site-header--centered) .site-header__inner {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand call" "nav nav"; gap: 0.25rem 1rem;
  }
  .site-header:not(.site-header--centered) .brand { grid-area: brand; margin-right: 0; }
  .site-header:not(.site-header--centered) .header-call { grid-area: call; }
  .site-header:not(.site-header--centered) .nav { grid-area: nav; }
  .site-header:not(.site-header--centered) .nav ul { justify-content: flex-start; gap: 0.1rem 1.5rem; }
}
@media (max-width: 760px) {
  .site-header .nav ul { gap: 0.1rem 1.25rem; }
  .header-call { padding: 0.5rem 0.9rem; min-height: 2.5rem; font-size: 0.95rem; }
}

/* ── Hero ───────────────────────────────────────────────────────────────────────────────────────────── */

.hero { padding-block: calc(var(--space, 5rem) * 1.1); }
.hero .lede { margin-top: 1.25rem; }

.hero--photo { position: relative; isolation: isolate; color: #fff; min-height: min(88vh, 46rem); display: flex; align-items: flex-end; }
.hero--photo .hero__media { position: absolute; inset: 0; z-index: -1; }
.hero--photo .hero__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.hero--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(0 0 0 / 0.3) 0%, rgb(0 0 0 / 0.45) 45%, var(--overlay, rgb(0 0 0 / 0.78)) 100%); }
.hero--photo .hero__text { text-shadow: 0 1px 12px rgb(0 0 0 / 0.35); }
.hero--photo .lede { color: rgb(255 255 255 / 0.88); }
.hero--photo .eyebrow { color: #fff; }
.hero--photo .button--ghost { color: #fff; }
.hero--photo .hero__text { max-width: 44rem; }

.hero--split .hero__inner { display: grid; gap: 2.5rem; align-items: center; }
.hero--split .hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-image, var(--radius)); border: var(--image-border, 0); box-shadow: var(--image-shadow, none); }
@media (min-width: 900px) { .hero--split .hero__inner { grid-template-columns: 1.05fr 1fr; gap: 4rem; } }

.hero--type { padding-block: calc(var(--space, 5rem) * 1.5) var(--space, 5rem); }
.hero--type h1 { font-size: calc(clamp(2.8rem, 7vw + 1rem, 6.5rem) * var(--display-scale, 1)); max-width: 16ch; }
.hero--type .hero__facts { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--muted); }
.hero--type .hero__facts li { display: flex; flex-direction: column; }
.hero--type .hero__facts strong { color: var(--ink); font-size: 1.1rem; }

/* ── Services ───────────────────────────────────────────────────────────────────────────────────────── */

.cards { display: grid; gap: var(--gap, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.card { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.75rem; background: var(--card-bg, var(--surface)); border: 1px solid var(--line); border-radius: var(--radius); }
.section--surface .card { background: var(--bg); }
.card img { margin: -1.75rem -1.75rem 0.5rem; width: calc(100% + 3.5rem); max-width: none; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius) var(--radius) 0 0; }
.card p { color: var(--muted); }
.card .text-link { margin-top: auto; }

.service-list { border-top: 1px solid var(--line); }
.service-list > li { display: grid; gap: 0.5rem 2rem; padding-block: 1.75rem; border-bottom: 1px solid var(--line); }
.service-list p { color: var(--muted); max-width: var(--measure, 40rem); }
@media (min-width: 760px) { .service-list > li { grid-template-columns: minmax(12rem, 1fr) 2fr; } }

.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.4rem; cursor: pointer; list-style: none; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-size: 1.6rem; line-height: 1; color: var(--accent-text, var(--accent)); transition: transform 0.2s; }
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion details > :not(summary) { padding-bottom: 1.5rem; max-width: var(--measure, 40rem); color: var(--muted); }

/* ── Gallery ────────────────────────────────────────────────────────────────────────────────────────── */

.gallery { display: grid; gap: var(--gap, 1.5rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.gallery figure { display: flex; flex-direction: column; gap: 0.6rem; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-image, var(--radius)); border: var(--image-border, 0); box-shadow: var(--image-shadow, none); }
.gallery figcaption { font-size: 0.92rem; color: var(--muted); }
.gallery figcaption strong { display: block; color: var(--ink); }
.gallery--mosaic { grid-auto-flow: dense; }
@media (min-width: 760px) {
  .gallery--mosaic { grid-template-columns: repeat(3, 1fr); }
  .gallery--mosaic figure:nth-child(5n + 1) { grid-column: span 2; grid-row: span 2; }
  .gallery--mosaic figure:nth-child(5n + 1) img { aspect-ratio: auto; height: 100%; }
}

/* ── Story ──────────────────────────────────────────────────────────────────────────────────────────── */

.story__inner { display: grid; gap: 2.5rem; align-items: center; }
.story__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-image, var(--radius)); border: var(--image-border, 0); box-shadow: var(--image-shadow, none); }
@media (min-width: 900px) {
  .story__inner { grid-template-columns: 1fr 1fr; gap: 4.5rem; }
  .story--reverse .story__media { order: -1; }
}
.facts { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); margin-top: 2.5rem; }
.facts > li { padding-top: 1rem; border-top: 2px solid var(--accent); }
.facts strong { display: block; font-family: var(--font-display); font-size: 1.3rem; }

/* ── Reviews ────────────────────────────────────────────────────────────────────────────────────────── */

.reviews { display: grid; gap: var(--gap, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.reviews > li { display: flex; }
.reviews > li > .review { flex: 1; }
.review { display: flex; flex-direction: column; gap: 1.25rem; padding: 2rem; background: var(--card-bg, var(--surface)); border-radius: var(--radius); border: 1px solid var(--line); }
.section--surface .review { background: var(--bg); }
.section--band .review { background: transparent; border-color: color-mix(in srgb, var(--band-ink) 25%, transparent); }
.review blockquote { font-size: 1.1rem; line-height: 1.55; }
.review figcaption { margin-top: auto; font-weight: 600; }
.review figcaption span { display: block; font-weight: 400; color: var(--muted); font-size: 0.9rem; }
.section--band .review figcaption span { color: inherit; opacity: 0.75; }
.review.review--feature, .section--surface .review--feature { padding: 0; border: 0; background: none; max-width: 52rem; margin-inline: auto; text-align: center; }
.review--feature blockquote { font-family: var(--font-display); font-size: clamp(1.5rem, 2vw + 1rem, 2.4rem); line-height: 1.25; text-transform: none; }
.rating { color: var(--accent-text, var(--accent)); letter-spacing: 0.15em; }

/* ── Steps ──────────────────────────────────────────────────────────────────────────────────────────── */

.steps { display: grid; gap: var(--gap, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); counter-reset: step; }
.step { counter-increment: step; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.step::before { content: counter(step, decimal-leading-zero); display: block; font-family: var(--font-display); font-size: 2.2rem; line-height: 1; color: var(--accent-text, var(--accent)); margin-bottom: 1rem; }
.step p { color: var(--muted); margin-top: 0.5rem; }
.section--band .step { border-color: color-mix(in srgb, var(--band-ink) 25%, transparent); }
.section--band .step p { color: inherit; opacity: 0.8; }

/* ── Questions ──────────────────────────────────────────────────────────────────────────────────────── */

.faq { max-width: 52rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { padding-block: 1.25rem; font-weight: 600; font-size: 1.1rem; cursor: pointer; }
.faq details > :not(summary) { padding-bottom: 1.25rem; color: var(--muted); max-width: var(--measure, 40rem); }

/* ── Hours and location ─────────────────────────────────────────────────────────────────────────────── */

.visit__inner { display: grid; gap: 2.5rem; }
.visit h2, .contact h2 { margin-bottom: 1rem; }
@media (min-width: 900px) { .visit__inner { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td { padding: 0.7rem 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.hours td { text-align: right; }
.address { font-style: normal; font-size: 1.15rem; line-height: 1.5; }
.contact-lines { display: grid; gap: 0.6rem; margin-top: 1.5rem; }
.contact-lines a { font-weight: 600; }

/* ── Contact ────────────────────────────────────────────────────────────────────────────────────────── */

.contact__inner { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .contact__inner { grid-template-columns: 1fr 1.2fr; gap: 4rem; } }
.contact__form { padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--card-bg, var(--surface)); border-radius: var(--radius); border: 1px solid var(--line); color: var(--ink); }
.section--surface .contact__form { background: var(--bg); }
.contact--simple .contact-lines { font-size: clamp(1.3rem, 1.5vw + 1rem, 2rem); font-family: var(--font-display); }

/* The site form (templates/site-form/): its required rules, then the kit's look. */
.site-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
.site-form label { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.3rem; font-weight: 500; font-size: 0.95rem; }
.site-form fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.site-form legend { font-weight: 500; font-size: 0.95rem; margin-bottom: 0.4rem; }
.site-form fieldset label { display: flex; gap: 0.4rem; align-items: center; font-weight: 400; }
.site-form-trap { display: none !important; }
.site-form-status:empty { display: none; }
.site-form-consent { font-size: 0.85em; opacity: 0.8; }
.site-form input:not([type="radio"]), .site-form select, .site-form textarea {
  width: 100%; padding: 0.75rem 0.85rem; font: inherit; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line-strong, var(--line)); border-radius: calc(var(--radius) * 0.6);
}
.site-form input[type="radio"] { accent-color: var(--accent); }
.site-form button { justify-self: start; }
.site-form button:not(.button) {
  min-height: 3rem; padding: 0.75rem 1.4rem; border: 0; border-radius: var(--button-radius, var(--radius));
  background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 600; cursor: pointer;
}

/* ── Call to action ─────────────────────────────────────────────────────────────────────────────────── */

.cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.cta-band h2 { max-width: 22ch; }
.cta-band .actions { margin-top: 0; }

/* ── Footer ─────────────────────────────────────────────────────────────────────────────────────────── */

.site-footer { background: var(--footer-bg, var(--band)); color: var(--footer-ink, var(--band-ink)); padding-block: calc(var(--space, 5rem) * 0.8) 2rem; font-size: 0.95rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: inherit; }
.footer-cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.footer-cols h2 { font-size: 0.8rem; font-family: var(--font-body); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; margin-bottom: 0.9rem; }
.footer-cols ul { display: grid; gap: 0.4rem; }
.site-footer .brand { font-size: 1.5rem; display: inline-block; margin-bottom: 0.75rem; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent); opacity: 0.8; font-size: 0.85rem; }
.site-footer--simple .site-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; }
.proposal-note { width: 100%; margin-top: 1.25rem; font-size: 0.8rem; opacity: 0.75; }
.proposal-note a { text-decoration: underline; }

/* ── Not found ──────────────────────────────────────────────────────────────────────────────────────── */

.not-found { min-height: 50vh; display: flex; align-items: center; }

/* ── This design ────────────────────────────────────────────────────────────────────────────────────── */

/* The video hero (Hero Studio's first supported hero, docs/hero-studio.md). Its box is set by aspect-ratio, never
   by the window's height, so at any width it has one known shape and the app can frame footage for it exactly:
   3:5 on a phone, 3:2 from 700px, 16:7 from 1100px. On a phone the words sit at the bottom and the subject goes
   above them; from 700px they run down the left and the subject goes to their right. The video and its still fill the box with object-fit: cover
   at the centre. The headline, line and button are the page's own text over a flat tint, never part of the
   video; with no video at all (reduced motion, Save-Data, autoplay refused, a failed file) the still stays. */
.hero--video {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  aspect-ratio: 3 / 5; display: flex; flex-direction: column; justify-content: flex-end;
  background: #241810;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img, .hero__media video {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 50%; border-radius: 0; background: #241810;
}
.hero__media video { opacity: 0; transition: opacity 0.6s ease; }
.hero__media video.is-showing { opacity: 1; }
.hero--video::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hero-tint); }
.hero__text { padding-bottom: 1.75rem; text-shadow: 0 1px 10px rgb(0 0 0 / 0.3); }
.hero__text > * { max-width: 34rem; }
.hero__text h1 { font-size: calc(clamp(2.3rem, 3.6vw + 1.3rem, 4.1rem) * var(--display-scale, 1)); line-height: 1.04; }
.hero__text .lede { margin-top: 0.9rem; font-size: 1.1rem; color: #fff; max-width: 30rem; }
.hero__text .button { margin-top: 1.4rem; text-shadow: none; }
.hero__pause {
  position: absolute; right: 1rem; bottom: 1.75rem; width: 3rem; height: 3rem; padding: 0;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  border: 2px solid rgb(255 255 255 / 0.85); background: rgb(36 24 16 / 0.55); color: #fff;
}
.hero__pause:hover { background: rgb(36 24 16 / 0.8); }
.hero__pause[hidden] { display: none; }
.hero__pause svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.hero__pause [data-icon="play"], .hero__pause[data-state="paused"] [data-icon="pause"] { display: none; }
.hero__pause[data-state="paused"] [data-icon="play"] { display: block; }
@media (min-width: 700px) {
  .hero--video { aspect-ratio: 3 / 2; justify-content: center; }
  .hero__text { padding-bottom: 0; }
  .hero__text > * { max-width: 26rem; }
  .hero__text .lede { font-size: 1.2rem; }
  .hero__pause { right: 1.5rem; bottom: 1.5rem; }
}
@media (min-width: 1100px) {
  .hero--video { aspect-ratio: 16 / 7; }
  .hero__text > * { max-width: 34rem; }
  .hero__text .lede { max-width: 30rem; }
  .hero__pause { right: 2rem; bottom: 2rem; }
}

.bakes .card h3 { font-size: 1.3rem; }
.bakes .card .when { font-size: 0.9rem; font-weight: 600; color: var(--accent-text); }
.story .facts { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin-top: 1.75rem; }
.story .facts li { display: flex; flex-direction: column; color: var(--muted); }
.story .facts strong { color: var(--ink); font-family: var(--font-display); font-size: 1.35rem; }
.story__inner--text { display: grid; gap: 2rem; }
@media (min-width: 900px) { .story__inner--text { grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: start; } }
.hours th { text-align: left; padding: 0.45rem 2rem 0.45rem 0; font-weight: 600; }
.hours td { padding-block: 0.45rem; }
.hours tr + tr { border-top: 1px solid var(--line); }
.not-found { min-height: 60vh; display: grid; align-content: center; gap: 1rem; }