/* ==========================================================================
   Fellside Bakery — demo website by Spectacle (https://usespectacle.net)
   --------------------------------------------------------------------------
   1. Fonts             6. Header & navigation    11. Signpost
   2. Design tokens     7. Buttons & links        12. Postcard & forms
   3. Base              8. Hero                   13. Page-specific blocks
   4. Utilities         9. Cards & grids          14. Footer
   5. Demo banner      10. Bands & promos         15. Responsive
   ========================================================================== */

/* 1. Fonts (self-hosted, SIL Open Font Licence) -------------------------- */
@font-face { font-family: "Bowlby One"; src: url("../fonts/bowlby-one-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* 2. Design tokens -------------------------------------------------------- */
:root {
  --color-cocoa: #3a1f1a;
  --color-cocoa-line: #7a5a50;
  --color-cream: #fbf5ee;
  --color-oat: #efe6de;
  --color-latte: #eadcd2;
  --color-white: #ffffff;
  --color-butter: #ffd84d;
  --color-peach: #f7b98f;
  --color-sky: #a8d8de;
  --color-lilac: #dccbf5;
  --color-rust: #a3381a;
  --color-rust-dark: #8a2e14;
  --color-lake: #13323c;
  --color-moss: #2f6b45;
  --color-plum: #3d2a66;

  --font-display: "Bowlby One", "Arial Black", sans-serif;
  --font-body: "Figtree", system-ui, sans-serif;

  --radius-sm: 24px;
  --radius-md: 32px;
  --radius-lg: 40px;
  --radius-pill: 999px;
  --border-bold: 2.5px solid var(--color-cocoa);
  --shadow-offset: 4px 4px 0 var(--color-cocoa);

  --container: 1280px;
  --gutter: 28px;
  --space-section: 96px;

  /* Fell-ridge photo edges */
  --ridge-a: polygon(0% 16%, 18% 4%, 32% 12%, 50% 0%, 66% 10%, 82% 2%, 100% 12%, 100% 100%, 0% 100%);
  --ridge-b: polygon(0% 10%, 16% 2%, 34% 14%, 48% 4%, 64% 16%, 80% 6%, 100% 14%, 100% 100%, 0% 100%);
  --ridge-c: polygon(0% 14%, 14% 6%, 28% 16%, 44% 2%, 60% 12%, 76% 0%, 100% 10%, 100% 100%, 0% 100%);
  --ridge-d: polygon(0% 8%, 20% 16%, 36% 4%, 52% 14%, 68% 2%, 84% 12%, 100% 4%, 100% 100%, 0% 100%);
  --ridge-wide: polygon(0% 12%, 9% 5%, 17% 11%, 28% 0%, 39% 9%, 50% 3%, 61% 12%, 72% 2%, 84% 10%, 93% 4%, 100% 8%, 100% 100%, 0% 100%);
  --edge-left: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%, 6% 78%, 0% 58%, 7% 36%, 2% 18%);
  --edge-right: polygon(0% 0%, 100% 0%, 94% 20%, 100% 42%, 93% 64%, 100% 84%, 95% 100%, 0% 100%);
}

/* 3. Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--color-cream);
  color: var(--color-cocoa);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 400; line-height: 0.98; }
p { margin: 0; }
a { color: var(--color-cocoa); }
a:hover { color: var(--color-rust); }
:focus-visible { outline: 3px solid var(--color-rust); outline-offset: 3px; border-radius: 6px; }
.section--dark :focus-visible, .site-footer :focus-visible, .demo-banner :focus-visible { outline-color: var(--color-butter); }
:where(ul[class], ol[class]) { margin: 0; padding: 0; list-style: none; }

/* 4. Utilities ------------------------------------------------------------ */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: 960px; }
.container--text { max-width: 776px; }
.section { padding-block: var(--space-section); }
.section--tight-top { padding-top: 0; }
.section--dark { background: var(--color-cocoa); color: var(--color-cream); }
.section--dark a { color: var(--color-cream); }
.uppercase { text-transform: uppercase; letter-spacing: 0.04em; }
.bg-peach { background: var(--color-peach); }
.bg-sky { background: var(--color-sky); }
.bg-lilac { background: var(--color-lilac); }
.bg-butter { background: var(--color-butter); }
.ridge-a { clip-path: var(--ridge-a); }
.ridge-b { clip-path: var(--ridge-b); }
.ridge-c { clip-path: var(--ridge-c); }
.ridge-d { clip-path: var(--ridge-d); }
.ridge-wide { clip-path: var(--ridge-wide); }
.cover-image { width: 100%; height: 100%; object-fit: cover; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--color-butter); color: var(--color-cocoa);
  padding: 12px 20px; border-radius: var(--radius-pill); border: var(--border-bold);
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 16px; }

.eyebrow { font-family: var(--font-display); font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-rust); margin-bottom: 14px; }
.section--dark .eyebrow { color: var(--color-butter); }
.heading-xl { font-size: clamp(3rem, 8vw, 7.5rem); line-height: 0.9; letter-spacing: -0.02em; text-transform: uppercase; }
.heading-lg { font-size: clamp(2.25rem, 4.4vw, 3.75rem); text-transform: uppercase; }
.heading-md { font-size: clamp(1.75rem, 3.2vw, 2.75rem); text-transform: uppercase; }
.heading-sm { font-size: 1.3rem; text-transform: uppercase; line-height: 1.1; }
.lead { font-size: 1.2rem; max-width: 34rem; }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 24px; margin-bottom: 32px; }
.section-head__note { font-weight: 600; }

/* 5. Demo banner ---------------------------------------------------------- */
.demo-banner {
  background: var(--color-cocoa); color: var(--color-cream);
  padding: 10px 24px; font-size: 0.875rem; font-weight: 600;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; text-align: center;
}
.demo-banner__link { color: var(--color-butter); }
.demo-banner__link:hover { color: var(--color-white); }

/* 6. Header & navigation -------------------------------------------------- */
.site-header__inner {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 16px 28px; padding-block: 20px;
}
.site-logo { display: block; line-height: 0; transform: rotate(-3deg); border-radius: 8px; }
.site-logo svg { width: 180px; height: auto; }
.site-nav__list { display: flex; flex-wrap: wrap; gap: 4px 26px; }
.site-nav__link {
  display: inline-block; padding: 10px 0; font-family: var(--font-display); font-size: 0.875rem;
  letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  border-bottom: 4px solid transparent;
}
.site-nav__link[aria-current="page"] { border-bottom-color: var(--color-peach); }

/* 7. Buttons & links ------------------------------------------------------ */
.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 12px 26px; border-radius: var(--radius-pill); border: var(--border-bold);
  font-family: var(--font-display); font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.button--primary { background: var(--color-butter); color: var(--color-cocoa); box-shadow: var(--shadow-offset); }
.button--primary:hover { color: var(--color-cocoa); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--color-cocoa); }
.button--dark { background: var(--color-cocoa); color: var(--color-cream); }
.button--dark:hover { color: var(--color-butter); }
.button--outline { background: var(--color-white); color: var(--color-cocoa); }
.button--lake { background: var(--color-lake); border-color: var(--color-lake); color: var(--color-white); }
.button--lake:hover { color: var(--color-butter); }
.section--dark .button--primary { border-color: var(--color-butter); box-shadow: none; color: var(--color-cocoa); }
@media (prefers-reduced-motion: reduce) { .button { transition: none; } .button:hover { transform: none; } }
.button-row { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.text-link {
  font-family: var(--font-display); font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none; padding: 10px 0 2px; border-bottom: 3px solid var(--color-peach);
}

/* 8. Hero ----------------------------------------------------------------- */
.hero { padding: 8px 0 64px; }
.hero__card {
  container-type: inline-size; position: relative; overflow: hidden;
  background: var(--color-white); border-radius: var(--radius-lg); padding: 44px 44px 0;
}
.hero__contours { position: absolute; right: -60px; top: -40px; width: 420px; opacity: 0.5; pointer-events: none; }
.hero__title { position: relative; font-size: 9cqi; white-space: nowrap; line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; }
.hero__grid { position: relative; display: flex; flex-wrap: wrap; gap: 36px; margin-top: 32px; }
.hero__intro { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 22px; padding-bottom: 44px; }
.hero__strapline { font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.1; }
.hero__media { flex: 1.4 1 460px; min-width: 0; position: relative; min-height: 400px; }
.hero__backdrop { position: absolute; inset: 40px 0 0 0; background: var(--color-peach); clip-path: polygon(0% 22%, 12% 8%, 22% 16%, 36% 0%, 50% 14%, 62% 6%, 76% 18%, 88% 9%, 100% 16%, 100% 100%, 0% 100%); }
.hero__image { position: absolute; left: 8%; bottom: 0; width: 84%; height: 340px; object-fit: cover; clip-path: polygon(0% 20%, 14% 7%, 26% 15%, 42% 0%, 56% 13%, 70% 4%, 84% 15%, 100% 8%, 100% 100%, 0% 100%); }
.hero__steam { position: absolute; left: 44%; top: -4px; width: 50px; }

.page-hero { padding: 8px 0 56px; }
.page-hero__card { background: var(--color-white); border-radius: var(--radius-lg); padding: 48px; display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-end; justify-content: space-between; }
.page-hero__intro { flex: 1 1 520px; min-width: 0; }
.page-hero__intro .lead { margin-top: 20px; }

/* 9. Cards & grids -------------------------------------------------------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: 24px; }
.card-grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

.forecast-card { background: var(--color-white); border: var(--border-bold); border-radius: 28px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.forecast-card__icon { width: 48px; height: 48px; }
.forecast-card__name { font-family: var(--font-display); font-size: 1.25rem; text-transform: uppercase; }
.forecast-card__status { font-weight: 700; }
.forecast-card__status--good { color: var(--color-moss); }
.forecast-card__status--low { color: var(--color-rust); }

.product-card { background: var(--color-white); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; }
.product-card__media { position: relative; height: 240px; }
.product-card__media img { position: absolute; inset: 0; }
.product-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 6px; }
.product-card__header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.product-card__title { font-size: 1.3rem; text-transform: uppercase; line-height: 1.1; }
.product-card__price { font-family: var(--font-display); font-size: 1.25rem; color: var(--color-rust); white-space: nowrap; }
.tag { align-self: flex-start; margin-top: 4px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 12px; border-radius: var(--radius-pill); }
.tag--vegan { background: #e4f1e8; color: var(--color-moss); }
.tag--vegetarian { background: #f3ecfb; color: var(--color-plum); }

.chip-list { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-block; padding: 10px 20px; border-radius: var(--radius-pill); font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; color: var(--color-cocoa); }
.chip--dark { background: var(--color-cocoa); color: var(--color-cream); }
.chip--outline { background: var(--color-white); border: var(--border-bold); font-family: var(--font-body); font-weight: 700; text-transform: none; letter-spacing: 0; padding: 7px 18px; }

/* 10. Bands & promos ------------------------------------------------------ */
.story-band__grid { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.story-band__text { flex: 1 1 420px; min-width: 0; }
.story-band__title span { color: var(--color-peach); }
.story-band__text p { margin: 24px 0 30px; max-width: 30rem; color: var(--color-latte); font-size: 1.125rem; }
.story-band__gallery { flex: 1 1 460px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.story-band__gallery img { width: 100%; object-fit: cover; border-radius: 28px; }
.story-band__tall { height: 340px; grid-row: span 2; }
.story-band__short { height: 162px; }
.story-band__fact { background: var(--color-peach); color: var(--color-cocoa); border-radius: 28px; height: 162px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; }
.story-band__fact-value { font-family: var(--font-display); font-size: 2.5rem; line-height: 1; }
.story-band__fact-label { font-weight: 700; font-size: 0.95rem; }

.promo { border-radius: var(--radius-lg); display: flex; flex-wrap: wrap; overflow: hidden; }
.promo__text { flex: 1 1 420px; min-width: 0; padding: 52px; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.promo__text p { max-width: 30rem; font-size: 1.125rem; }
.promo__media { flex: 1 1 420px; min-width: 0; min-height: 380px; position: relative; }
.promo__media img { position: absolute; inset: 0; }
.promo__media--edge-left img { clip-path: var(--edge-left); }
.promo__media--edge-right img { clip-path: var(--edge-right); }

/* 11. Signpost ------------------------------------------------------------ */
.signpost { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.signpost__intro { flex: 1 1 360px; min-width: 0; }
.signpost__intro p { margin-top: 12px; max-width: 24rem; font-size: 1.125rem; }
.signpost__post { flex: 1.3 1 460px; min-width: 0; position: relative; padding: 8px 0; }
.signpost__pole { position: absolute; left: 50%; top: 0; bottom: -20px; width: 18px; margin-left: -9px; background: #8a4b2a; border-radius: 6px; }
.signpost__list { position: relative; display: flex; flex-direction: column; gap: 16px; }
.signpost__sign {
  display: inline-block; padding: 14px 52px 14px 24px; font-family: var(--font-display); font-size: 1.1rem;
  letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; color: var(--color-cocoa);
}
.signpost__item--right { align-self: flex-start; margin-left: 50%; }
.signpost__item--left { align-self: flex-end; margin-right: 50%; }
.signpost__item--right .signpost__sign { clip-path: polygon(0 0, 86% 0, 100% 50%, 86% 100%, 0 100%); }
.signpost__item--left .signpost__sign { padding: 14px 24px 14px 52px; clip-path: polygon(14% 0, 100% 0, 100% 100%, 14% 100%, 0 50%); }
.signpost__item:nth-child(1) .signpost__sign { transform: rotate(-3deg); }
.signpost__item:nth-child(2) .signpost__sign { transform: rotate(2deg); }
.signpost__item:nth-child(3) .signpost__sign { transform: rotate(2deg); }
.signpost__item:nth-child(4) .signpost__sign { transform: rotate(-2deg); }
.signpost__sign:hover { color: var(--color-cocoa); text-decoration: underline; }
.signpost__sign:focus-visible { outline: none; text-decoration: underline; text-decoration-thickness: 3px; }

/* 12. Postcard & forms ---------------------------------------------------- */
.postcard { position: relative; background: var(--color-sky); color: var(--color-lake); border: 2.5px dashed var(--color-lake); border-radius: 36px; padding: 44px; }
.postcard__content { max-width: 40rem; padding-right: 90px; }
.postcard__content p { margin: 16px 0 22px; }
.postcard .eyebrow { color: var(--color-lake); }
.postcard__stamp { position: absolute; right: 28px; top: 24px; width: 92px; height: 108px; background: var(--color-white); padding: 6px; transform: rotate(5deg); border: 2px dashed var(--color-lake); }
.postcard__stamp-inner { width: 100%; height: 100%; background: var(--color-cocoa); display: flex; align-items: center; justify-content: center; }

.inline-form { display: flex; flex-wrap: wrap; gap: 10px; max-width: 500px; }
.inline-form .form__input { flex: 1 1 220px; }

.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 18px 20px; }
.form__field { display: flex; flex-direction: column; gap: 6px; }
.form__field--full { grid-column: 1 / -1; }
.form__label { font-weight: 700; }
.form__optional { font-weight: 400; }
.form__input {
  min-height: 48px; padding: 12px 18px; border: var(--border-bold); border-radius: var(--radius-pill);
  background: var(--color-cream); font: inherit; color: var(--color-cocoa);
}
.postcard .form__input { background: var(--color-white); border-color: var(--color-lake); color: var(--color-lake); }
textarea.form__input { border-radius: var(--radius-sm); resize: vertical; }
.form__input:focus-visible { outline: 3px solid var(--color-rust); outline-offset: 2px; }
.form__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.form-panel { background: var(--color-white); border: var(--border-bold); border-radius: 36px; box-shadow: 8px 8px 0 var(--color-cocoa); padding: 44px; }
.form-panel .heading-md { margin-bottom: 24px; }
.form-success { border-radius: 28px; padding: 32px; text-align: center; background: var(--color-butter); }
.form-success:focus { outline: 3px solid var(--color-cocoa); outline-offset: 4px; }
.form-success__title { font-family: var(--font-display); font-size: 1.75rem; line-height: 1.1; text-transform: uppercase; }
.form-success p + p { margin-top: 12px; }
.postcard .form-success { background: var(--color-white); text-align: left; }

/* 13. Page-specific blocks ------------------------------------------------ */
/* Menu */
.menu-section { padding-block: 24px 56px; }
.menu-section__badge { padding: 4px 14px; border-radius: var(--radius-pill); font-weight: 700; font-size: 0.95rem; }
.price-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 24px; }
.price-panel { border-radius: 36px; padding: 40px; }
.price-panel--dark { background: var(--color-cocoa); color: var(--color-cream); }
.price-panel--dark .heading-md { color: var(--color-lilac); }
.price-panel--butter { background: var(--color-butter); }
.price-panel__note { margin: 4px 0 24px; }
.price-panel--dark .price-panel__note { color: var(--color-latte); }
.price-list { display: flex; flex-direction: column; gap: 12px; font-size: 1.125rem; }
.price-list__item { display: flex; gap: 8px; align-items: baseline; }
.price-list__leader { flex: 1; border-bottom: 3px dotted currentColor; opacity: 0.4; min-width: 24px; }
.price-list__price { font-family: var(--font-display); }
.price-panel img { width: 100%; height: 220px; object-fit: cover; border-radius: var(--radius-sm); margin-top: 28px; }
.callout { border-radius: 36px; padding: 40px 44px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; background: var(--color-sky); color: var(--color-lake); }
.callout p { margin-top: 10px; }
.small-print { margin-top: 24px; text-align: center; font-size: 0.95rem; }

/* Cakes */
.size-card { border-radius: var(--radius-md); padding: 32px; display: flex; flex-direction: column; gap: 6px; position: relative; }
.size-card--dark { background: var(--color-cocoa); color: var(--color-cream); }
.size-card__name { font-family: var(--font-display); font-size: 1.6rem; text-transform: uppercase; }
.size-card__price { margin-top: 14px; font-family: var(--font-display); font-size: 2.5rem; line-height: 1; }
.size-card__price small { font-size: 1rem; }
.size-card--dark .size-card__price { color: var(--color-butter); }
.size-card__flag { position: absolute; right: 22px; top: -14px; background: var(--color-butter); color: var(--color-cocoa); font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.06em; padding: 6px 14px; border-radius: var(--radius-pill); transform: rotate(4deg); }
.photo-tile { position: relative; height: 300px; border-radius: var(--radius-md); overflow: hidden; margin: 0; }
.photo-tile img { position: absolute; inset: 0; }
.photo-tile__label { position: absolute; left: 16px; bottom: 16px; background: var(--color-white); font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 14px; border-radius: var(--radius-pill); }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 20px; counter-reset: step; }
.steps__item { border: 2.5px solid var(--color-cocoa-line); border-radius: 28px; padding: 28px; }
.steps__number { display: inline-flex; width: 52px; height: 52px; border-radius: 50%; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.5rem; color: var(--color-cocoa); }
.steps__item h3 { margin: 16px 0 6px; font-size: 1.35rem; text-transform: uppercase; }
.steps__item p { color: var(--color-latte); }
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq__item { background: var(--color-white); border-radius: var(--radius-sm); padding: 20px 26px; }
.faq__question { font-weight: 700; cursor: pointer; }
.faq__answer { margin-top: 10px; }

/* Story */
.story-hero__image { margin: 40px -44px 0; height: 460px; position: relative; background: var(--color-sky); }
.story-hero__image img { position: absolute; inset: 0; }
.split-text { display: flex; flex-wrap: wrap; gap: 40px 72px; }
.split-text > h2 { flex: 1 1 320px; }
.split-text__body { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 18px; font-size: 1.125rem; }
.timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 18px; }
.timeline__item { border-radius: 28px; padding: 28px; color: var(--color-cocoa); }
.timeline__time { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; }
.timeline__item p:last-child { margin-top: 10px; font-weight: 600; }
.sources { border-radius: var(--radius-lg); padding: 48px; display: flex; flex-wrap: wrap; gap: 40px; align-items: center; background: var(--color-sky); color: var(--color-lake); }
.sources > h2 { flex: 1 1 300px; }
.sources__list { flex: 1.4 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 12px; font-size: 1.125rem; }
.sources__list .price-list__item { flex-wrap: wrap; }
.sources__term { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; }
.centered-cta { text-align: center; max-width: 900px; margin: 0 auto; }
.centered-cta p { margin: 16px auto 28px; max-width: 34rem; font-size: 1.125rem; }
.centered-cta .button-row { justify-content: center; }

/* Journal */
.journal-feature { display: flex; flex-wrap: wrap; background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; }
.journal-feature__media { flex: 1.3 1 520px; min-width: 0; min-height: 420px; position: relative; }
.journal-feature__media img { position: absolute; inset: 0; clip-path: var(--edge-right); }
.journal-feature__body { flex: 1 1 380px; padding: 48px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.journal-feature__body .heading-md { text-transform: uppercase; }
.journal-card { background: var(--color-white); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; height: 100%; }
.journal-card__media { position: relative; height: 230px; }
.journal-card__media img { position: absolute; inset: 0; }
.journal-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; }
.journal-card__meta { font-weight: 700; font-size: 0.9rem; color: var(--color-rust); text-transform: uppercase; letter-spacing: 0.04em; }
.journal-card__title { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.1; text-transform: uppercase; }
.journal-card:hover .journal-card__title { text-decoration: underline; }
.related-card { border-radius: 28px; padding: 24px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--color-cocoa); }
.section--dark .related-card { color: var(--color-cocoa); }

/* Article */
.article-header { padding: 24px 0 32px; }
.article-header__meta { margin: 28px 0 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-weight: 700; }
.article-header h1 { font-size: clamp(2.5rem, 5.6vw, 4.75rem); line-height: 0.95; text-transform: uppercase; }
.article-header .lead { margin-top: 22px; font-size: 1.3rem; max-width: none; }
.article-figure { position: relative; height: 520px; border-radius: var(--radius-lg); overflow: hidden; margin: 8px 0 48px; }
.article-figure img { position: absolute; inset: 0; }
.prose { font-size: 1.1875rem; line-height: 1.75; }
.prose p + p { margin-top: 22px; }
.prose h2 { margin: 40px 0 12px; font-size: 1.9rem; line-height: 1.05; text-transform: uppercase; }
.pull-quote { margin: 40px 0; padding: 32px 36px; background: var(--color-butter); border-radius: var(--radius-md); font-family: var(--font-display); font-size: 1.75rem; line-height: 1.1; text-transform: uppercase; transform: rotate(-1deg); }
.pull-quote p { margin: 0; }
.recipe-card { background: var(--color-white); border: var(--border-bold); border-radius: var(--radius-md); box-shadow: 6px 6px 0 var(--color-cocoa); padding: 32px; font-size: 1.0625rem; }
.recipe-card h3 { margin-bottom: 16px; font-size: 1.5rem; text-transform: uppercase; }
.recipe-card ul, .recipe-card ol { margin: 0 0 20px; padding-left: 22px; }
.recipe-card ol { display: flex; flex-direction: column; gap: 8px; margin-bottom: 0; }
.share-list { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 32px; }
.share-list .chip--outline { font-family: var(--font-display); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 8px 16px; }

/* Visit */
.visit-hero { background: var(--color-white); border-radius: var(--radius-lg); padding: 48px; display: flex; flex-wrap: wrap; gap: 40px; }
.visit-hero__text { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.address-card { background: var(--color-cream); border-radius: 28px; padding: 24px 26px; font-style: normal; max-width: 420px; }
.address-card__name { font-family: var(--font-display); font-size: 1.25rem; text-transform: uppercase; }
.visit-hero__media { flex: 1.1 1 440px; min-width: 0; min-height: 460px; position: relative; background: var(--color-sky); border-radius: var(--radius-md); overflow: hidden; }
.visit-hero__media img { position: absolute; inset: 0; }
.map-pin { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; }
.map-pin__label { background: var(--color-cocoa); color: var(--color-butter); font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.04em; padding: 8px 14px; border-radius: var(--radius-pill); white-space: nowrap; text-transform: uppercase; }
.hours { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 12px; margin: 0; }
.hours__day { border-radius: var(--radius-sm); padding: 20px; text-align: center; background: var(--color-oat); }
.hours__day dt { font-family: var(--font-display); font-size: 1.1rem; text-transform: uppercase; }
.hours__day dd { margin: 6px 0 0; font-weight: 700; }
.hours__day--sunday { background: var(--color-cocoa); color: var(--color-cream); }
.info-card { border: 2.5px solid var(--color-cocoa-line); border-radius: 28px; padding: 26px; }
.info-card h3 { margin-bottom: 8px; font-size: 1.25rem; text-transform: uppercase; }
.info-card p { color: var(--color-latte); }
.info-card--butter h3 { color: var(--color-butter); }
.info-card--peach h3 { color: var(--color-peach); }
.info-card--sky h3 { color: var(--color-sky); }
.info-card--lilac h3 { color: var(--color-lilac); }
.contact { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.contact__intro { flex: 1 1 340px; min-width: 0; }
.contact__intro p { margin: 14px 0 24px; font-size: 1.125rem; }
.contact__photo { position: relative; height: 260px; max-width: 420px; border-radius: var(--radius-md); overflow: hidden; }
.contact__photo img { position: absolute; inset: 0; }
.contact .form-panel { flex: 1.2 1 460px; min-width: 0; }

/* 14. Footer -------------------------------------------------------------- */
.site-footer { background: var(--color-cocoa); color: var(--color-latte); }
.site-footer a { color: var(--color-cream); }
.site-footer a:hover { color: var(--color-butter); }
.site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 36px; padding-block: 64px 44px; }
.site-footer__brand { display: flex; flex-direction: column; gap: 14px; }
.site-footer__brand svg { width: 170px; height: auto; }
.site-footer__heading { margin-bottom: 10px; font-size: 0.875rem; letter-spacing: 0.08em; color: var(--color-butter); text-transform: uppercase; }
.site-footer__links { display: flex; flex-direction: column; gap: 6px; }
.site-footer__links a { display: inline-block; padding: 2px 0; }
.site-footer address { font-style: normal; }
.site-footer__credit { border-top: 1px solid #5a3a33; padding: 20px var(--gutter); text-align: center; font-size: 0.875rem; }
.site-footer__credit a { color: var(--color-butter); font-weight: 700; }

/* 15. Responsive ---------------------------------------------------------- */
@media (max-width: 720px) {
  :root { --gutter: 18px; --space-section: 64px; }
  .site-header__inner { flex-direction: column; gap: 10px; }
  .site-nav__list { justify-content: center; gap: 0 20px; }
  .hero__card, .page-hero__card, .visit-hero, .promo__text, .form-panel, .postcard, .sources, .callout { padding: 28px; }
  .hero__title { font-size: 15cqi; white-space: normal; }
  .story-hero__image { margin-inline: -28px; height: 300px; }
  .postcard__content { padding-right: 0; padding-top: 90px; }
  .article-figure { height: 320px; }
  .signpost__item--right, .signpost__item--left { margin: 0; align-self: center; }
  .signpost__pole { display: none; }
}

/* 16. Small helpers used across pages ------------------------------------- */
.section-title { margin-bottom: 32px; }
.section-intro { margin: 8px 0 28px; }
.flavours-title { margin: 44px 0 14px; }
.steps__note { margin-top: 28px; color: var(--color-latte); }
.hours__note { margin-top: 16px; font-weight: 600; }
.button-row--center { justify-content: center; margin-top: 40px; }
.button-row--spaced { margin-top: 28px; }
.journal-card__soon { font-size: 0.9rem; font-weight: 600; }
.journal-feature__body .heading-md a { text-decoration: none; }
.journal-feature__body .heading-md a:hover { text-decoration: underline; }
.journal-feature:focus-within { outline: 3px solid var(--color-rust); outline-offset: 4px; }
.related-card .journal-card__meta { color: var(--color-cocoa); }
.story-hero { padding-bottom: 0; }
.story-hero__title { max-width: 1000px; font-size: clamp(2.6rem, 6vw, 5.5rem); }
.article-gallery { margin-block: 8px 40px; }
.article .prose + .article-gallery { margin-top: 40px; }
.recipe-card { margin-block: 24px 32px; }
.share-list { margin-bottom: 72px; }
.address-card p + p { margin-top: 4px; }
.site-header__cta { white-space: nowrap; }
.promo .heading-xl, .visit-hero .heading-xl { font-size: clamp(2.6rem, 5.2vw, 4.75rem); }
.journal-feature__body .chip { align-self: flex-start; }