/* ==========================================================================
   KRAFT — brown paper, oxblood ink, and a butcher's string

   For a farm, a butcher, a smokehouse, a market stall: a business whose
   products are wrapped in paper and labelled by hand. The page is kraft
   paper (a warm tan, not white), the type is dark brown ink, and there is
   one oxblood accent, the colour of a rubber stamp. A herb green does the
   small labelling. Young Serif carries the headlines, sturdy and a little
   old-fashioned, like a stencilled sign over a shop; Alegreya carries the
   prose; Alegreya Sans does the small work in tracked capitals (navigation,
   dates, labels, buttons).

   Three devices: the LABEL (a cream card with a dashed line stitched just
   inside its edge: the hero card, the notes that matter, the forms), the
   STAMP (categories are slightly tilted oxblood stamps), and the TICKET
   (event cards are tickets with a tear-off date stub, notched top and
   bottom where the perforation meets the edge). Section headings open
   with a short double rule, the kind drawn on a price board. The footer
   is a dark slab whose top edge is scalloped, like the edge of a paper bag.

   Structure (positioning, menu mechanics, lightbox, map chrome) comes from
   _base.css; everything visual lives here.
   ========================================================================== */

@import url('./_base.css');
@import url('../fonts/kraft.css');

:root {
  --accent: #8e3b32;
  --accent-dark: #6e2b24;
  --accent-light: #eed9d3;
  --accent-soft: rgba(142, 59, 50, 0.13);
  --on-accent: #fbf3e8;
  --herb: #4f6b3c;
  --herb-dark: #3b5230;
  --herb-light: #e1e7d2;
  --note-bg: #f1e4c8;
  --note-text: #5a4520;
  --note-line: rgba(90, 69, 32, 0.45);
  --text-primary: #2b221b;
  --text-secondary: #5a4d42;
  --text-muted: #8a7b6d;
  --surface: #eee3d0;
  --surface-alt: #e4d6bf;
  --surface-raised: #faf3e7;
  --border: #cbb99f;
  --border-light: #dccdb5;
  --header-bg: rgba(238, 227, 208, 0.92);
  --footer-bg: #2b221b;
  --footer-text: #e4d6bf;
  --footer-strong: #faf3e7;
  --footer-muted: #a3937f;
  --font-display: 'Young Serif', 'Iowan Old Style', 'Palatino', Georgia, serif;
  --font-serif: 'Alegreya', 'Iowan Old Style', 'Palatino', Georgia, serif;
  --font-sans: 'Alegreya Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --max-width: 1100px;
  --measure: 680px;
  --gutter: 1.5rem;
  --radius: 4px;
  --radius-lg: 8px;
  /* The stitched line inside every label */
  --stitch: 1.5px dashed var(--accent);
  --stitch-inset: 7px;
  /* The tear-off stub of a ticket */
  --stub: 7.5rem;
  --shadow-sm: 0 1px 2px rgba(43, 34, 27, 0.08);
  --shadow-md: 0 18px 40px -22px rgba(43, 34, 27, 0.35);
  --card-shadow: var(--shadow-md);
  --transition: 0.2s ease;
  --header-height: 76px;
  --gallery-gap: 0.9rem;
  --gallery-min: 220px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #d78f83;
    --accent-dark: #e7aba1;
    --accent-light: #3f2925;
    --accent-soft: rgba(215, 143, 131, 0.16);
    --on-accent: #1f1712;
    --herb: #a6bf8a;
    --herb-dark: #bcd3a2;
    --herb-light: #2b3326;
    --note-bg: #382f20;
    --note-text: #e9d7ad;
    --note-line: rgba(233, 215, 173, 0.45);
    --text-primary: #efe5d6;
    --text-secondary: #c8baa8;
    --text-muted: #8f8274;
    --surface: #1f1a16;
    --surface-alt: #2a231d;
    --surface-raised: #27201a;
    --border: #48392e;
    --border-light: #352b24;
    --header-bg: rgba(31, 26, 22, 0.9);
    --footer-bg: #14100d;
    --footer-text: #c8baa8;
    --footer-strong: #efe5d6;
    --footer-muted: #8f8274;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 18px 40px -22px rgba(0, 0, 0, 0.7);
    --card-shadow: var(--shadow-md);
    color-scheme: dark;
  }
}

html {
  font-size: 17.5px;
}

body {
  font-family: var(--font-serif);
  color: var(--text-primary);
  background: var(--surface);
  line-height: 1.6;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--accent-dark);
}

::selection {
  background: var(--accent-light);
  color: var(--text-primary);
}

h1,
h2,
h3,
.banner-heading,
.post-title,
.card-title,
.logo-title,
.footer-logo {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-primary);
}

/* The small work is sans: navigation, dates, labels, buttons, forms */
.nav-link,
.nav-dropdown-link,
.logo-tagline,
.member-entry,
.lang-toggle,
.lang-option,
.card-meta,
.card-category,
.card-date,
.card-read-more,
.post-meta,
.post-category,
.back-link,
.block-image figcaption,
.block-map figcaption,
.block-quote cite,
.footer-tagline,
.footer-contact,
.footer-links,
.footer-bottom,
.public-layout .event-list-block .event-card__date,
.public-layout .event-list-block .event-card__location,
.public-layout .event-list-block .event-card__more,
.public-layout .event-page .event-dates__title,
.public-layout .event-page .event-bring__title,
.public-layout .event-page .past-badge,
.public-layout .event-page .reg-field__label,
.public-layout .event-page .reg-input,
.public-layout .event-page .reg-button,
.public-layout .content-blocks .feedback-field__label,
.public-layout .content-blocks .feedback-input,
.public-layout .content-blocks .feedback-button,
.public-layout .content-blocks .feedback-kind,
.public-layout .member-page .member-field__label,
.public-layout .member-page .member-input,
.public-layout .member-page .member-button,
.public-layout .gift-page .gift-field__label,
.public-layout .gift-page .gift-input,
.public-layout .gift-page .gift-button,
.public-layout .gift-page .amount,
.public-layout .content-blocks .recipe__category,
.public-layout .content-blocks .recipe__facts,
.public-layout .content-blocks .recipe__download {
  font-family: var(--font-sans);
}

/* The stamp: tracked capitals, an oxblood frame, a slight tilt */
.card-category,
.post-category,
.public-layout .content-blocks .recipe__category {
  display: inline-block;
  padding: 0.12em 0.5em 0.1em;
  border: 1.5px solid var(--accent);
  border-radius: 3px;
  background: transparent;
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.3;
  transform: rotate(-2deg);
  transform-origin: left center;
}

/* --------------------------------------------------------------------------
   Header — kraft, translucent, tracked capitals for the menu
   -------------------------------------------------------------------------- */

.site-header {
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.header-inner.container {
  max-width: var(--max-width);
  gap: 1.5rem;
}

.logo {
  gap: 0.8rem;
  color: var(--text-primary);
}

.logo-image {
  height: 44px;
}

.logo-title {
  font-size: 1.55rem;
  line-height: 1.05;
}

.logo-tagline {
  margin-top: 0.25rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.main-nav {
  gap: 0.15rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav-link {
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  box-shadow: inset 0 -2px 0 transparent;
  transition: color var(--transition), background var(--transition), box-shadow var(--transition);
}

.nav-link:hover {
  color: var(--text-primary);
  background: var(--surface-alt);
}

.nav-link.active {
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
  border-radius: var(--radius) var(--radius) 0 0;
}

.nav-dropdown {
  left: 0;
  padding: 0.4rem;
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

.nav-dropdown-link {
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: background var(--transition), color var(--transition);
}

.nav-dropdown-link:hover,
.nav-dropdown-link.active {
  background: var(--surface-alt);
  color: var(--accent);
}

.site-header .header-right .member-entry {
  padding: 0.4rem 0.85rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lang-selector {
  margin: 0;
}

.lang-toggle,
.lang-option {
  padding: 0.35rem 0.6rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-primary);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background var(--transition), color var(--transition);
}

.lang-toggle:hover {
  background: var(--surface-alt);
}

.lang-dropdown {
  padding: 4px;
  gap: 2px;
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

.lang-option {
  border-color: transparent;
}

.lang-option.active {
  background: var(--accent-light);
  color: var(--accent-dark);
}

.lang-option:hover:not(.active) {
  background: var(--surface-alt);
}

.site-header .menu-toggle {
  color: var(--text-primary);
}

.site-header .menu-toggle span {
  border-radius: 1px;
}

@media (max-width: 1000px) {
  .logo-tagline {
    display: none;
  }
}

@media (max-width: 768px) {
  .main-nav {
    padding: 0.75rem var(--gutter) 1.25rem;
    background: var(--surface-raised);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    gap: 0.15rem;
    flex-wrap: nowrap;
  }

  .nav-link {
    padding: 0.8rem 0.9rem;
    font-size: 0.92rem;
    box-shadow: none;
  }

  .nav-link.active {
    box-shadow: none;
    background: var(--accent-light);
    color: var(--accent-dark);
    border-radius: var(--radius);
  }

  .nav-dropdown {
    padding: 0 0 0.25rem 1rem;
    border: none;
    box-shadow: none;
    background: none;
  }
}

/* --------------------------------------------------------------------------
   Hero — a photo edge to edge, and a label pinned to its lower left
   -------------------------------------------------------------------------- */

.hero-banner {
  padding: 4.5rem 0 3rem;
  background: var(--surface);
}

/* No photo: a faint warm light and the double rule under the headline */
.hero-banner .banner-texture {
  background:
    radial-gradient(ellipse at 10% 0%, var(--accent-soft), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(228, 214, 191, 0.7), transparent 50%);
}

@media (prefers-color-scheme: dark) {
  .hero-banner .banner-texture {
    background:
      radial-gradient(ellipse at 10% 0%, var(--accent-soft), transparent 55%),
      radial-gradient(ellipse at 100% 100%, rgba(42, 35, 29, 0.8), transparent 50%);
  }
}

.banner-content {
  max-width: var(--max-width);
  text-align: left;
}

.banner-heading {
  font-size: clamp(2.2rem, 4.8vw, 3.6rem);
  line-height: 1.05;
  max-width: 18ch;
  text-wrap: balance;
}

.hero-banner:not(.has-image) .banner-heading::after {
  content: '';
  display: block;
  width: 3.25rem;
  height: 7px;
  margin-top: 1.1rem;
  border-top: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
}

.banner-subheading {
  margin-top: 1.1rem;
  font-size: clamp(1.1rem, 1.5vw, 1.28rem);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 52ch;
}

.hero-banner.has-image {
  display: grid;
  grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, var(--max-width)) minmax(var(--gutter), 1fr);
  padding: 0;
  overflow: visible;
  color: var(--text-primary);
}

.hero-banner.has-image .banner-overlay {
  display: none;
}

.hero-banner.has-image .banner-bg {
  position: static;
  grid-area: 1 / 1 / 2 / 4;
  width: 100%;
  height: clamp(320px, 50vw, 580px);
  object-fit: cover;
  background: var(--surface-alt);
}

/* The label: cream, square, a dashed line stitched inside its edge */
.hero-banner.has-image .banner-content {
  position: relative;
  grid-area: 1 / 2;
  align-self: end;
  justify-self: start;
  width: min(100%, 600px);
  max-width: none;
  margin: 0 0 -3.5rem;
  padding: 2rem 2.4rem 2.2rem;
  background: var(--surface-raised);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  outline: var(--stitch);
  outline-offset: calc(-1 * var(--stitch-inset));
}

.has-image .banner-heading,
.has-image .banner-subheading {
  text-shadow: none;
}

.has-image .banner-heading {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
}

.has-image .banner-subheading {
  margin-top: 0.85rem;
  font-size: 1.08rem;
  color: var(--text-secondary);
}

/* The label overlaps the photo; the page content starts below the label */
.hero-banner.has-image + .page-content .content-blocks,
.hero-banner.has-image + .page-content .post-content,
.hero-banner.has-image + .page-content .event-content {
  padding-top: 6.5rem;
}

@media (max-width: 768px) {
  .hero-banner {
    padding: 3rem 0 2.25rem;
  }

  /* On a phone the label would cover the whole photo: stack them, with the
     label tucked a little way under the photo's lower edge */
  .hero-banner.has-image {
    grid-template-rows: auto auto;
  }

  .hero-banner.has-image .banner-bg {
    grid-area: 1 / 1 / 2 / 4;
    height: clamp(220px, 60vw, 360px);
  }

  .hero-banner.has-image .banner-content {
    grid-area: 2 / 2;
    align-self: start;
    width: 100%;
    margin: -2.5rem 0 0;
    padding: 1.5rem 1.4rem 1.6rem;
  }

  .has-image .banner-heading {
    font-size: 1.7rem;
  }

  .has-image .banner-subheading {
    font-size: 1rem;
  }

  .hero-banner.has-image + .page-content .content-blocks,
  .hero-banner.has-image + .page-content .post-content,
  .hero-banner.has-image + .page-content .event-content {
    padding-top: 4.5rem;
  }
}

/* --------------------------------------------------------------------------
   Reading column
   -------------------------------------------------------------------------- */

.page-content.container,
.page-content.post-layout {
  max-width: var(--max-width);
}

.content-blocks {
  padding: 3rem 0 5rem;
}

.block-h2,
.block-h3,
.block-h4,
.block-text,
.block-quote,
.block-image,
.block-iframe {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}

.block-map {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

/* Every section opens with the double rule of a price board */
.block-h2 {
  margin: 3.75rem auto 1.1rem;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 1.12;
  text-align: left;
}

.block-h2::before {
  content: '';
  display: block;
  width: 3.25rem;
  height: 7px;
  margin-bottom: 1.1rem;
  border-top: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
}

.block-h3 {
  margin: 2.5rem auto 0.7rem;
  font-size: 1.4rem;
  line-height: 1.25;
}

.block-h4 {
  margin: 2rem auto 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--herb);
}

.block-text {
  margin-bottom: 1.4rem;
  font-size: 1.12rem;
  line-height: 1.66;
  color: var(--text-primary);
}

.block-text p {
  margin: 0 0 1em;
}

.block-text p:last-child {
  margin-bottom: 0;
}

.block-text a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent-light);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
  transition: text-decoration-color var(--transition), color var(--transition);
}

.block-text a:hover {
  color: var(--accent-dark);
  text-decoration-color: var(--accent);
}

.block-text ul,
.block-text ol {
  padding-left: 1.35rem;
  margin: 0.4em 0 1em;
}

.block-text li {
  margin-bottom: 0.45em;
  padding-left: 0.2rem;
}

.block-text li::marker {
  color: var(--accent);
  font-weight: 700;
}

.block-text li > strong:first-child {
  font-family: var(--font-sans);
  font-size: 0.95em;
  letter-spacing: 0.01em;
}

/* A note that matters is a label: kraft-tinted, with the stitched line */
.block-text blockquote {
  margin: 1.5em 0;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius);
  background: var(--note-bg);
  color: var(--note-text);
  outline: 1.5px dashed var(--note-line);
  outline-offset: calc(-1 * var(--stitch-inset));
  font-size: 1em;
  line-height: 1.55;
}

.block-text blockquote p:last-child {
  margin-bottom: 0;
}

.block-text hr,
.block-divider {
  border: none;
  width: 3.25rem;
  height: 7px;
  border-top: 2px solid var(--border);
  border-bottom: 2px solid var(--border);
  background: none;
  margin: 2em 0;
}

.block-divider {
  margin: 3rem auto;
}

.block-text h1,
.block-text h2,
.block-text h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.2;
  margin: 1.4em 0 0.5em;
}

.block-text h1 {
  font-size: 1.9rem;
}

.block-text h2 {
  font-size: 1.6rem;
}

.block-text h3 {
  font-size: 1.3rem;
}

.block-text h4 {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--herb);
  margin: 1.2em 0 0.4em;
}

/* Quotes: a large opening mark hangs in the margin, the text is italic */
.block-quote {
  position: relative;
  margin: 3rem auto;
  padding: 0.5rem 0 0.5rem 3.4rem;
  border: none;
  border-left: 2px solid var(--accent);
  background: transparent;
  text-align: left;
}

.block-quote::before {
  content: '„';
  position: absolute;
  left: 0.8rem;
  top: -0.9rem;
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1;
  color: var(--accent);
}

.block-quote p {
  font-style: italic;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.38;
  color: var(--text-primary);
  text-wrap: pretty;
}

.block-quote cite {
  display: block;
  margin-top: 0.9rem;
  font-style: normal;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.block-iframe,
.block-map {
  margin: 2.25rem auto;
  border-radius: var(--radius);
  overflow: hidden;
}

.block-map__canvas,
.block-map iframe {
  border-radius: var(--radius);
}

.block-image {
  margin: 2.5rem auto;
}

.block-image img {
  max-height: 620px;
  object-fit: cover;
  object-position: 50% 35%;
  border-radius: var(--radius);
  border: 5px solid var(--surface-raised);
  box-shadow: var(--shadow-sm);
}

.block-image-clickable {
  transition: opacity var(--transition);
}

.block-image-clickable:hover {
  opacity: 0.94;
}

.block-image figcaption,
.block-map figcaption {
  margin-top: 0.75rem;
  padding-left: 0.25rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: left;
}

/* --------------------------------------------------------------------------
   Cards — cream, square, a stamp for the category
   -------------------------------------------------------------------------- */

.post-list-block {
  margin: 1.5rem 0 2rem;
}

.post-list-block .loading-state {
  padding: 3rem 0;
}

.subpages-grid,
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.4rem;
}

.subpages-grid {
  margin: 1.5rem 0 2rem;
}

.subpage-card,
.post-card {
  display: flex;
  flex-direction: column;
  padding: 0.7rem 0.7rem 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: var(--text-primary);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.subpage-card:hover,
.post-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.card-cover {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 0 0 1.1rem;
  border-radius: var(--radius);
  background: var(--surface-alt);
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin: 0 0.5rem 0.7rem;
}

.card-date {
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.card-title {
  margin: 0 0.5rem 0.45rem;
  font-size: 1.35rem;
  line-height: 1.2;
}

.card-tagline,
.card-excerpt {
  margin: 0 0.5rem 0.9rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.card-read-more {
  margin: auto 0.5rem 0;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.subpage-card:hover .card-read-more,
.post-card:hover .card-read-more {
  color: var(--accent-dark);
}

.post-grid .empty-state {
  padding: 3rem 0;
  text-align: center;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Post page
   -------------------------------------------------------------------------- */

.post-content {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 3rem 0 4rem;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.post-title {
  margin-bottom: 1.75rem;
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.08;
  text-wrap: balance;
}

.post-body p {
  margin-bottom: 1.1em;
  font-size: 1.12rem;
  line-height: 1.7;
  color: var(--text-primary);
}

.back-link,
.post-content .back-link {
  display: inline-block;
  margin-top: 2.5rem;
  padding: 0.55rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary);
  transition: background var(--transition), border-color var(--transition);
}

.back-link:hover {
  background: var(--surface-raised);
  border-color: var(--text-muted);
  color: var(--text-primary);
}

.error-state {
  padding: 6rem 0;
  text-align: center;
}

.error-state h2 {
  margin-bottom: 0.5rem;
  font-size: 2.2rem;
}

.error-state p {
  margin-bottom: 1.5rem;
  color: var(--text-muted);
}

.page-content > .loading-state {
  padding: 6rem 0;
}

/* --------------------------------------------------------------------------
   Gallery — prints with a cream mat, the label on a kraft strip
   -------------------------------------------------------------------------- */

.gallery-grid,
.gallery-columns {
  margin: 2rem 0;
}

.gallery-grid-item,
.gallery-column-item {
  border-radius: var(--radius);
  border: 5px solid var(--surface-raised);
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
}

.gallery-grid-item img,
.gallery-column-item img {
  transition: transform 0.5s ease;
}

.gallery-grid-item:hover img,
.gallery-column-item:hover img {
  transform: scale(1.02);
}

.gallery-item-label {
  padding: 1.6rem 0.9rem 0.7rem;
  background: linear-gradient(transparent, rgba(43, 34, 27, 0.72));
  color: #fbf3e8;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Events — tickets: a date stub on the left, a perforation, two notches
   (EventListBlock.vue is scoped, hence the three-class selectors)
   -------------------------------------------------------------------------- */

.public-layout .event-list-block .event-grid {
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}

.public-layout .event-list-block .event-card {
  position: relative;
  display: block;
  min-height: 150px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: none;
  overflow: visible;
  transition: transform var(--transition), border-color var(--transition);
}

/* The notches: two discs in the page colour, half over the ticket's edge,
   where the perforation meets it (a mask would clip the shadow and, in
   some browsers, repaint late) */
.public-layout .event-list-block .event-card::before,
.public-layout .event-list-block .event-card::after {
  content: '';
  position: absolute;
  left: calc(var(--stub) - 10px);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  z-index: 1;
  pointer-events: none;
}

.public-layout .event-list-block .event-card::before {
  top: -10px;
}

.public-layout .event-list-block .event-card::after {
  bottom: -10px;
}

.public-layout .event-list-block .event-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* The cover fills the right end of the ticket, whatever its own proportions */
.public-layout .event-list-block .event-card__cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 172px;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  object-fit: cover;
  background: var(--surface-alt);
}

.public-layout .event-list-block .event-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  padding: 1.25rem 1.5rem 1.25rem calc(var(--stub) + 1.5rem);
}

.public-layout .event-list-block .event-card:has(.event-card__cover) .event-card__body {
  padding-right: calc(172px + 1.5rem);
}

/* The stub: the date on a kraft strip behind the perforation, full height */
.public-layout .event-list-block .event-card__date {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--stub);
  display: flex;
  align-items: center;
  margin: 0;
  padding: 1rem 1rem 1rem 1.25rem;
  border-right: 2px dashed var(--border);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  background: var(--surface-alt);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.45;
  color: var(--accent);
  text-wrap: balance;
}

.public-layout .event-list-block .event-card__title,
.public-layout .event-list-block .event-card__tagline,
.public-layout .event-list-block .event-card__excerpt,
.public-layout .event-list-block .event-card__location,
.public-layout .event-list-block .event-card__more {
  margin: 0;
}

.public-layout .event-list-block .event-card__title {
  order: 1;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.18;
  color: var(--text-primary);
}

.public-layout .event-list-block .event-card__tagline {
  order: 2;
  font-size: 1.02rem;
  color: var(--text-secondary);
}

.public-layout .event-list-block .event-card__excerpt {
  order: 3;
  margin-top: 0.25rem;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.public-layout .event-list-block .event-card__location {
  order: 4;
  margin-top: 0.4rem;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.public-layout .event-list-block .event-card__more {
  order: 5;
  margin-top: 0.35rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

@media (max-width: 640px) {
  .public-layout .event-list-block .event-card {
    --stub: 5.25rem;
    min-height: 0;
  }

  .public-layout .event-list-block .event-card__cover {
    display: none;
  }

  .public-layout .event-list-block .event-card__body,
  .public-layout .event-list-block .event-card:has(.event-card__cover) .event-card__body {
    padding: 1rem 1rem 1rem calc(var(--stub) + 1rem);
  }

  .public-layout .event-list-block .event-card__date {
    padding: 0.9rem 0.7rem 0.9rem 0.9rem;
    font-size: 0.76rem;
  }

  .public-layout .event-list-block .event-card__title {
    font-size: 1.2rem;
  }

  .public-layout .event-list-block .event-card__excerpt {
    display: none;
  }
}

/* Event page (PublicEvent.vue is scoped) */
.public-layout .page-content.event-page {
  max-width: var(--max-width);
}

.public-layout .event-page .event-content {
  max-width: var(--measure);
  margin: 0 auto;
  padding-bottom: 4rem;
}

.public-layout .event-page .event-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: 0;
  text-wrap: balance;
}

.public-layout .event-page .event-tagline {
  font-size: 1.12rem;
  color: var(--text-secondary);
}

.public-layout .event-page .event-dates {
  margin: 2rem 0;
}

.public-layout .event-page .event-dates__title,
.public-layout .event-page .event-bring__title {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--herb);
}

.public-layout .event-page .event-dates__item {
  font-size: 1.05rem;
}

.public-layout .event-page .past-badge {
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 3px;
  background: var(--surface-alt);
  color: var(--text-muted);
}

.public-layout .event-page .event-bring {
  border: none;
  border-radius: var(--radius);
  background: var(--note-bg);
  color: var(--note-text);
  outline: 1.5px dashed var(--note-line);
  outline-offset: calc(-1 * var(--stitch-inset));
  padding: 1.35rem 1.6rem;
}

.public-layout .event-page .event-bring__title {
  color: var(--note-text);
  opacity: 0.85;
}

/* The registration box is a label */
.public-layout .event-page .registration-box {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  box-shadow: none;
  outline: var(--stitch);
  outline-offset: calc(-1 * var(--stitch-inset));
  padding: 2.1rem 2.2rem;
}

.public-layout .event-page .reg-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.55rem;
  letter-spacing: 0;
}

.public-layout .event-page .reg-field__label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.public-layout .event-page .reg-input {
  padding: 0.75rem 0.95rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 1rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.public-layout .event-page .reg-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.public-layout .event-page .reg-notice,
.public-layout .event-page .reg-error {
  border-radius: var(--radius);
}

.public-layout .event-page .reg-button {
  padding: 0.85rem 1.5rem;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.public-layout .event-page .reg-button:hover:not(:disabled) {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

.public-layout .event-page .reg-button--secondary {
  background: transparent;
  border-color: var(--border);
  color: var(--text-primary);
}

.public-layout .event-page .reg-button--secondary:hover:not(:disabled) {
  background: var(--surface-alt);
  border-color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Forms — feedback block, member area, gift cards: labels, all of them
   -------------------------------------------------------------------------- */

.public-layout .content-blocks .feedback-block {
  max-width: var(--measure);
  margin: 3rem auto;
  padding: 2.1rem 2.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  box-shadow: none;
  outline: var(--stitch);
  outline-offset: calc(-1 * var(--stitch-inset));
}

.public-layout .content-blocks .feedback-block__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0;
}

.public-layout .content-blocks .feedback-field__label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.public-layout .content-blocks .feedback-input {
  padding: 0.75rem 0.95rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 1rem;
}

.public-layout .content-blocks .feedback-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.public-layout .content-blocks .feedback-kind {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.public-layout .content-blocks .feedback-kind--active {
  border-color: var(--accent);
  background: var(--accent-light);
}

.public-layout .content-blocks .feedback-error {
  border-radius: var(--radius);
}

.public-layout .content-blocks .feedback-button {
  padding: 0.85rem 1.5rem;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.public-layout .content-blocks .feedback-button:hover:not(:disabled) {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

.public-layout .content-blocks .feedback-button--secondary {
  background: transparent;
  border-color: var(--border);
  color: var(--text-primary);
}

.public-layout .member-page .member-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  box-shadow: none;
  outline: var(--stitch);
  outline-offset: calc(-1 * var(--stitch-inset));
  padding: 2.1rem 2.2rem;
}

.public-layout .member-page .member-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.8rem;
  letter-spacing: 0;
}

.public-layout .member-page .member-input {
  padding: 0.75rem 0.95rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-primary);
}

.public-layout .member-page .member-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.public-layout .member-page .member-error {
  border-radius: var(--radius);
}

.public-layout .member-page .member-button {
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius);
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.public-layout .member-page .member-button:hover:not(:disabled) {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

.public-layout .member-page .member-button--secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border);
}

.public-layout .gift-page .gift-box {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  outline: var(--stitch);
  outline-offset: calc(-1 * var(--stitch-inset));
}

.public-layout .gift-page .gift-heading {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}

.public-layout .gift-page .gift-input {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.public-layout .gift-page .gift-button {
  border-radius: var(--radius);
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.public-layout .gift-page .amount {
  border-radius: var(--radius);
  font-weight: 700;
}

/* Recipe block (scoped): the ingredients on a kraft label, stamped category */
.public-layout .content-blocks .recipe__title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}

.public-layout .content-blocks .recipe__picture,
.public-layout .content-blocks .recipe__step-picture {
  border-radius: var(--radius);
  border: 5px solid var(--surface-raised);
  box-shadow: var(--shadow-sm);
}

.public-layout .content-blocks .recipe__facts {
  font-size: 0.9rem;
}

.public-layout .content-blocks .recipe__ingredients {
  border-radius: var(--radius);
  background: var(--note-bg);
  color: var(--note-text);
  outline: 1.5px dashed var(--note-line);
  outline-offset: calc(-1 * var(--stitch-inset));
}

.public-layout .content-blocks .recipe__section-title {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.public-layout .content-blocks .recipe__tip {
  border-radius: var(--radius);
  background: var(--herb-light);
  color: var(--herb-dark);
}

.public-layout .content-blocks .recipe__download {
  border-radius: var(--radius);
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.public-layout .content-blocks .recipe__step-number {
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-sans);
  font-weight: 700;
}

.public-layout .content-blocks .recipe__badge {
  border-radius: 3px;
  background: var(--herb-light);
  color: var(--herb-dark);
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.7rem;
}

/* --------------------------------------------------------------------------
   Footer — a dark slab with a scalloped top edge, like a paper bag
   -------------------------------------------------------------------------- */

.site-footer {
  position: relative;
  margin-top: 6rem;
  padding: 3.5rem 0 0;
  background: var(--footer-bg);
  color: var(--footer-text);
}

.site-footer::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -9px;
  height: 10px;
  background: radial-gradient(circle at 9px 10px, var(--footer-bg) 8.5px, transparent 9.5px) 0 0 / 18px 10px repeat-x;
}

.footer-inner.container {
  max-width: var(--max-width);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 2.75rem;
  border-bottom: 1px dashed var(--footer-muted);
}

.footer-logo {
  font-size: 1.55rem;
  color: var(--footer-strong);
}

.footer-tagline {
  margin-top: 0.5rem;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--footer-muted);
}

.footer-contact h4,
.footer-links h4 {
  margin-bottom: 0.9rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--footer-muted);
}

.footer-contact p {
  margin-bottom: 0.35rem;
  font-size: 0.95rem;
}

.footer-contact a {
  color: var(--footer-strong);
}

.footer-contact a:hover {
  color: var(--accent);
}

.footer-address {
  margin-top: 0.5rem;
  font-size: 0.92rem;
  white-space: pre-line;
  color: var(--footer-muted);
}

.footer-links {
  display: flex;
  flex-direction: column;
}

.footer-nav-link {
  padding: 0.24rem 0;
  font-size: 0.95rem;
  color: var(--footer-text);
  text-decoration: none;
  transition: color var(--transition);
}

.footer-nav-link.active,
.footer-nav-link:hover {
  color: var(--accent);
}

.footer-nav-child {
  padding-left: 0.9rem;
  font-size: 0.88rem;
  color: var(--footer-muted);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 0;
  font-size: 0.82rem;
  color: var(--footer-muted);
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.legal-link,
.admin-link {
  font-size: 0.82rem;
  color: var(--footer-muted);
  text-decoration: none;
  transition: color var(--transition);
}

.legal-link:hover,
.admin-link:hover {
  color: var(--footer-strong);
}

@media (max-width: 768px) {
  .site-footer {
    text-align: center;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   Focus
   -------------------------------------------------------------------------- */

.gallery-grid-item:focus-visible,
.gallery-column-item:focus-visible,
.subpage-card:focus-visible,
.post-card:focus-visible,
.nav-link:focus-visible,
.footer-nav-link:focus-visible,
.legal-link:focus-visible,
.lang-toggle:focus-visible,
.lang-option:focus-visible,
.menu-toggle:focus-visible,
.public-layout .event-list-block .event-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius);
}