/* ==========================================================================
   Tŷ Mêl — site design system

   Loaded last on every public page. It carries the shared header, footer,
   buttons, forms and page sections, and it re-maps the older brand tokens
   (forest, honey, paper) that shop.css and the queen page still use onto the
   retail palette, so every page reads as one site without each stylesheet
   having to be rewritten.

   The palette is taken from the market-stall banner artwork, so the website
   matches the signage and labels customers see in person.

   Palette
     cream      — main background, a very pale wash of the banner yellow
     wax        — banner sky yellow, the signature colour
     honey      — honeycomb gold, secondary highlights
     brown      — dark honey, small accent text that must stay readable
     charcoal   — the logo's black: outlines, headings, text, dark sections
     meadow / forest / sky / violet — the landscape and flower accents
   ========================================================================== */

:root {
  --cream: #fffbea;
  --cream-2: #fff3c4;
  --cream-3: #fde68a;
  --wax: #fee003;
  --wax-600: #f6ae03;
  --wax-100: #fff6c7;
  --amber: #e48000;
  --brown: #7a4a00;
  --brown-700: #5c3700;
  --charcoal: #12110d;
  --charcoal-2: #1f1d17;
  --ink: #1b1a15;
  --muted: #4f4a3c;
  --green: #2f6b3a;
  --meadow: #4d8e58;
  --forest: #164734;
  --sky: #20609a;
  --violet: #4b2bb8;
  --danger: #a3341c;
  --line: rgba(18, 17, 13, 0.16);
  --line-dark: rgba(255, 251, 234, 0.18);

  /* The outlined, offset-shadow look of the logo lettering, used on cards,
     buttons and photos. */
  --edge: 2px solid var(--charcoal);
  --pop: 4px 4px 0 var(--charcoal);
  --pop-lg: 7px 7px 0 var(--charcoal);

  --maxw: 1200px;
  --gutter: clamp(1.15rem, 4vw, 2.75rem);
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: var(--pop-lg);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --header-h: 72px;

  /* Placeholder artwork until the banner SVG parts arrive. */
  --art-comb: url("/assets/images/brand/placeholder-honeycomb.svg");
  --art-hills: url("/assets/images/brand/placeholder-hills.svg");
  --art-hills-dark: url("/assets/images/brand/placeholder-hills-dark.svg");

  /* Older tokens, re-mapped so shop.css and the queen page follow the new
     palette. Kept by name because those stylesheets still reference them. */
  --forest-900: #12110d;
  --forest-800: #1f1d17;
  --forest-700: #2a271e;
  --forest-600: #2f6b3a;
  --paper: #fffbea;
  --offwhite: #fff7dc;
  --sand: #f3e6b5;
  --honey: #f6ae03;
  --honey-600: #8a5500;
  --honey-300: #fee003;
  --honey-ink: #6b4200;
  --body: #2e2b22;
}

/* ---- Base --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1rem, 0.97rem + 0.18vw, 1.0875rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  background-image: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: var(--wax); color: var(--charcoal); }

/* Headings take the heavy, soft-serifed weight of the logo lettering. */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 700;
  font-variation-settings: "SOFT" 100;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: inherit;
  margin: 0;
  font-optical-sizing: auto;
}
h1 { font-size: clamp(2.1rem, 1.5rem + 2.8vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 1.3rem + 1.7vw, 2.55rem); font-weight: 800; }
h3 { font-size: clamp(1.2rem, 1.08rem + 0.5vw, 1.45rem); }
h4 { font-size: 1.1rem; }
/* Emphasis in headings is marked with a yellow highlighter stroke. */
h1 em, h2 em {
  font-style: italic;
  font-weight: 700;
  color: inherit;
  background: linear-gradient(transparent 58%, var(--wax) 58%, var(--wax) 90%, transparent 90%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-inline: 0.06em;
}
p { margin: 0; }
p + p { margin-top: 0.9rem; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
ul, ol { padding-left: 1.2rem; }
strong { font-weight: 700; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.narrow { max-width: 760px; }

:focus-visible {
  outline: 3px solid var(--charcoal);
  outline-offset: 3px;
  border-radius: 4px;
}
.tm-footer :focus-visible,
.tm-section--dark :focus-visible,
.tm-cta-band :focus-visible,
.on-dark :focus-visible { outline-color: var(--wax); }

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 2000;
  background: var(--charcoal);
  color: var(--cream);
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 10px 10px;
  font-weight: 600;
  text-decoration: none;
  transform: none;
}
.skip-link:focus { top: 0; left: 1rem; transform: none; }

/* The older pages laid a film-grain overlay over everything; it muddies the
   cream background and costs paint time, so it is retired here. */
.grain { display: none !important; }

/* Honeycomb and bees. A faint honeycomb is laid over the whole page and a
   few bees sit along the outer edges as you scroll. Both layers ignore the
   pointer and sit under the header, menus and basket drawer. The honeycomb is
   multiplied in, so it reads on cream and all but vanishes on dark sections. */
:root {
  --tm-honeycomb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%23a86f00' stroke-opacity='0.14' stroke-width='1.1'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34'/%3E%3C/g%3E%3C/svg%3E");
  --tm-bee-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='1900' viewBox='0 0 64 1900'%3E%3Cg transform=' translate(20 6) rotate(-12 18 16)'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Cellipse cx='18' cy='18' rx='11' ry='7.5'/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath d='M6 20 C-4 26 -10 14 -18 22' fill='none' stroke='%2312110d' stroke-opacity='0.35' stroke-width='1.2' stroke-linecap='round' stroke-dasharray='1.5 3.5'/%3E%3Cellipse cx='13' cy='8' rx='5.5' ry='8' transform='rotate(-28 13 8)' fill='%23fff' fill-opacity='0.8' stroke='%2312110d' stroke-opacity='0.45' stroke-width='0.8'/%3E%3Cellipse cx='20.5' cy='7.5' rx='4.5' ry='7' transform='rotate(18 20.5 7.5)' fill='%23fff' fill-opacity='0.7' stroke='%2312110d' stroke-opacity='0.45' stroke-width='0.8'/%3E%3Cpath d='M7.5 17.2 L3.5 18.4 L7.5 19.6 Z' fill='%2312110d'/%3E%3Cellipse cx='18' cy='18' rx='11' ry='7.5' fill='%23fee003'/%3E%3Cg clip-path='url(%23c)' fill='%2312110d'%3E%3Crect x='13' y='8' width='3' height='20'/%3E%3Crect x='19.5' y='8' width='3' height='20'/%3E%3C/g%3E%3Cellipse cx='18' cy='18' rx='11' ry='7.5' fill='none' stroke='%2312110d' stroke-width='0.9'/%3E%3Ccircle cx='29.5' cy='16.5' r='4.3' fill='%2312110d'/%3E%3Cpath d='M31 12.8 q1.5 -5 5.5 -5.5 M28.6 12.6 q0 -5.4 3.4 -7' fill='none' stroke='%2312110d' stroke-width='0.9' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  --tm-bee-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='2600' viewBox='0 0 64 2600'%3E%3Cg transform='translate(64 0) scale(-1 1) translate(20 6) rotate(-12 18 16)'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Cellipse cx='18' cy='18' rx='11' ry='7.5'/%3E%3C/clipPath%3E%3C/defs%3E%3Cellipse cx='13' cy='8' rx='5.5' ry='8' transform='rotate(-28 13 8)' fill='%23fff' fill-opacity='0.8' stroke='%2312110d' stroke-opacity='0.45' stroke-width='0.8'/%3E%3Cellipse cx='20.5' cy='7.5' rx='4.5' ry='7' transform='rotate(18 20.5 7.5)' fill='%23fff' fill-opacity='0.7' stroke='%2312110d' stroke-opacity='0.45' stroke-width='0.8'/%3E%3Cpath d='M7.5 17.2 L3.5 18.4 L7.5 19.6 Z' fill='%2312110d'/%3E%3Cellipse cx='18' cy='18' rx='11' ry='7.5' fill='%23fee003'/%3E%3Cg clip-path='url(%23c)' fill='%2312110d'%3E%3Crect x='13' y='8' width='3' height='20'/%3E%3Crect x='19.5' y='8' width='3' height='20'/%3E%3C/g%3E%3Cellipse cx='18' cy='18' rx='11' ry='7.5' fill='none' stroke='%2312110d' stroke-width='0.9'/%3E%3Ccircle cx='29.5' cy='16.5' r='4.3' fill='%2312110d'/%3E%3Cpath d='M31 12.8 q1.5 -5 5.5 -5.5 M28.6 12.6 q0 -5.4 3.4 -7' fill='none' stroke='%2312110d' stroke-width='0.9' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  --tm-bee-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='3300' viewBox='0 0 64 3300'%3E%3Cg transform=' translate(20 6) rotate(-12 18 16)'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Cellipse cx='18' cy='18' rx='11' ry='7.5'/%3E%3C/clipPath%3E%3C/defs%3E%3Cellipse cx='13' cy='8' rx='5.5' ry='8' transform='rotate(-28 13 8)' fill='%23fff' fill-opacity='0.8' stroke='%2312110d' stroke-opacity='0.45' stroke-width='0.8'/%3E%3Cellipse cx='20.5' cy='7.5' rx='4.5' ry='7' transform='rotate(18 20.5 7.5)' fill='%23fff' fill-opacity='0.7' stroke='%2312110d' stroke-opacity='0.45' stroke-width='0.8'/%3E%3Cpath d='M7.5 17.2 L3.5 18.4 L7.5 19.6 Z' fill='%2312110d'/%3E%3Cellipse cx='18' cy='18' rx='11' ry='7.5' fill='%23fee003'/%3E%3Cg clip-path='url(%23c)' fill='%2312110d'%3E%3Crect x='13' y='8' width='3' height='20'/%3E%3Crect x='19.5' y='8' width='3' height='20'/%3E%3C/g%3E%3Cellipse cx='18' cy='18' rx='11' ry='7.5' fill='none' stroke='%2312110d' stroke-width='0.9'/%3E%3Ccircle cx='29.5' cy='16.5' r='4.3' fill='%2312110d'/%3E%3Cpath d='M31 12.8 q1.5 -5 5.5 -5.5 M28.6 12.6 q0 -5.4 3.4 -7' fill='none' stroke='%2312110d' stroke-width='0.9' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
}
body { position: relative; }
body::before,
body::after {
  content: "";
  pointer-events: none;
  z-index: 5;
}
body::before {
  position: fixed;
  inset: 0;
  background-image: var(--tm-honeycomb);
  background-size: 42px 75px;
  mix-blend-mode: multiply;
}
body::after {
  position: absolute;
  inset: 0;
  background-image: var(--tm-bee-a), var(--tm-bee-b), var(--tm-bee-c);
  background-repeat: repeat-y;
  background-size: 64px 1900px, 54px 2194px, 46px 2370px;
  background-position: 1.5% 520px, 98.5% 1150px, 96% 2650px;
  opacity: 0.85;
}
@media (max-width: 700px) {
  body::after {
    background-size: 44px 1306px, 38px 1544px, 34px 1752px;
    background-position: 0 640px, 100% 1380px, 100% 2900px;
    opacity: 0.7;
  }
}
@media print {
  body::before, body::after { display: none; }
}

/* Text links inside running copy */
.prose a, .tm-link {
  color: var(--charcoal);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: var(--wax-600);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.prose a:hover, .tm-link:hover { background: var(--wax-100); text-decoration-color: var(--charcoal); }
.prose > * + * { margin-top: 1rem; }
.prose h2 { margin-top: 2.4rem; }
.prose h3 { margin-top: 1.8rem; }
.prose ul li + li, .prose ol li + li { margin-top: 0.4rem; }

/* ---- Buttons ------------------------------------------------------------
   Chunky outlined pills with a hard offset shadow, like the logo lettering.
   Primary is black on light backgrounds and turns yellow on dark ones. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 48px;
  padding: 0.72em 1.45em;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-align: center;
  text-decoration: none;
  border-radius: 999px;
  border: 2.5px solid var(--charcoal);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--charcoal);
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--charcoal); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--charcoal); }
.btn-primary, .btn-dark {
  background: var(--charcoal);
  color: var(--wax);
  border-color: var(--charcoal);
  box-shadow: 3px 3px 0 var(--wax-600);
}
.btn-primary:hover, .btn-dark:hover { background: var(--charcoal-2); color: var(--wax); border-color: var(--charcoal); box-shadow: 5px 5px 0 var(--wax-600); }
.btn-primary:active, .btn-dark:active { box-shadow: 1px 1px 0 var(--wax-600); }
.btn-secondary, .btn-ghost {
  background: #fff;
  color: var(--charcoal);
  border-color: var(--charcoal);
}
.btn-secondary:hover, .btn-ghost:hover { background: var(--wax); color: var(--charcoal); border-color: var(--charcoal); }
.btn-lg { min-height: 56px; font-size: 1.06rem; padding-inline: 1.8em; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* On black: the primary button becomes the banner yellow. */
.on-dark .btn-primary, .tm-section--dark .btn-primary, .tm-cta-band .btn-primary, .tm-footer .btn-primary {
  background: var(--wax); color: var(--charcoal); border-color: var(--wax); box-shadow: 3px 3px 0 var(--wax-600);
}
.on-dark .btn-primary:hover, .tm-section--dark .btn-primary:hover, .tm-cta-band .btn-primary:hover { background: #fff04d; color: var(--charcoal); border-color: #fff04d; }
.on-dark .btn-secondary, .on-dark .btn-ghost,
.tm-section--dark .btn-secondary, .tm-section--dark .btn-ghost,
.tm-cta-band .btn-secondary, .tm-cta-band .btn-ghost {
  background: transparent; color: var(--cream); border-color: rgba(255, 251, 234, 0.75); box-shadow: none;
}
.on-dark .btn-secondary:hover, .on-dark .btn-ghost:hover,
.tm-section--dark .btn-secondary:hover, .tm-section--dark .btn-ghost:hover,
.tm-cta-band .btn-secondary:hover, .tm-cta-band .btn-ghost:hover { background: var(--cream); color: var(--charcoal); border-color: var(--cream); box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active { transform: none; }
}

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* ==========================================================================
   Header
   The <header class="site-header"> element is kept on every page because the
   shop and queen pages hang their own section bar inside it. Everything here
   overrides the darker header those pages used to style for themselves.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--wax);
  color: var(--charcoal);
  border-bottom: 3px solid var(--charcoal);
  /* No backdrop-filter or transform here: either would make the header the
     containing block for the fixed-position menu panel inside it. */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none;
  filter: none;
  box-shadow: none;
}

.tm-bar-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 72px;
}

.tm-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--charcoal);
  flex: none;
  margin-right: auto;
}
.tm-brand img { width: 48px; height: 48px; object-fit: contain; }
.tm-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.tm-brand-name { font-family: var(--serif); font-size: 1.5rem; font-weight: 900; font-variation-settings: "SOFT" 100; letter-spacing: -0.01em; }
.tm-brand-tag { font-size: 0.74rem; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; margin-top: 0.2rem; }

.tm-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.15rem;
}
.tm-nav-item { position: relative; display: flex; align-items: center; }
.tm-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 0.55rem;
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--charcoal);
  text-decoration: none;
  border-radius: 8px;
  white-space: nowrap;
}
.tm-nav-link:hover { background: rgba(255, 255, 255, 0.55); }
.tm-nav-link[aria-current="page"], .tm-nav-item.is-current > .tm-nav-link {
  box-shadow: inset 0 -4px 0 var(--charcoal);
  border-radius: 8px 8px 0 0;
}

.tm-dd-btn {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 44px;
  margin-left: -0.45rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--charcoal);
  cursor: pointer;
}
.tm-dd-btn:hover { color: var(--charcoal); background: rgba(255, 255, 255, 0.55); }
.tm-dd-btn svg { width: 14px; height: 14px; transition: transform 0.2s; }
.tm-dd-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.tm-dd {
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 250px;
  background: #fff;
  border: var(--edge);
  border-radius: 12px;
  box-shadow: var(--pop);
  display: none;
  z-index: 10;
}
.tm-dd.is-open { display: block; }
.tm-dd a {
  display: block;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--charcoal);
  font-weight: 550;
  font-size: 0.95rem;
}
.tm-dd a:hover, .tm-dd a:focus-visible { background: var(--wax-100); }
.tm-dd a[aria-current="page"] { background: var(--wax); }
.tm-dd .tm-dd-note { display: block; font-size: 0.8rem; font-weight: 500; color: var(--muted); }

@media (hover: hover) and (min-width: 1121px) {
  .tm-nav-item:hover > .tm-dd { display: block; }
  /* A small bridge so the pointer can travel from the link to the panel. */
  .tm-nav-item.tm-has-dd::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px;
  }
}

.tm-actions { display: flex; align-items: center; gap: 0.5rem; flex: none; }

.tm-basket {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 46px;
  height: 46px;
  padding: 0 0.75rem;
  border-radius: 999px;
  border: var(--edge);
  background: #fff;
  color: var(--charcoal);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 750;
  cursor: pointer;
}
.tm-basket:hover { background: var(--wax-100); }
.tm-basket svg { width: 20px; height: 20px; }
.tm-basket-count {
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.3rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--charcoal);
  color: var(--wax);
  font-size: 0.78rem;
  font-weight: 800;
}
.tm-basket-count[data-empty="true"] { background: var(--cream-2); color: var(--muted); }

.tm-menu-btn {
  display: none;
  align-items: center;
  gap: 0.5rem;
  height: 46px;
  padding: 0 0.95rem;
  border-radius: 999px;
  border: 2px solid var(--charcoal);
  background: var(--charcoal);
  color: var(--wax);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 750;
  cursor: pointer;
}
.tm-menu-bars { position: relative; width: 18px; height: 12px; display: inline-block; }
.tm-menu-bars::before, .tm-menu-bars::after, .tm-menu-bars span {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor;
}
.tm-menu-bars::before { top: 0; }
.tm-menu-bars span { top: 5px; }
.tm-menu-bars::after { bottom: 0; }

/* Page-level section bars kept from the older pages (sponsorship categories,
   the queen page's "jump to" list), restyled to sit under the new header. */
.site-header .section-nav {
  background: var(--wax-100);
  border-top: 2px solid var(--charcoal);
}
.site-header .section-nav-inner { display: flex; align-items: center; gap: 0.8rem; min-height: 48px; padding-block: 0.3rem; }
.site-header .section-nav-label {
  flex: none; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700; color: var(--muted);
}
.site-header .section-nav-list {
  list-style: none; margin: 0; padding: 0; display: flex; gap: 0.35rem;
  overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none;
}
.site-header .section-nav-list::-webkit-scrollbar { display: none; }
.site-header .section-nav-list li { flex: none; }
.site-header .section-nav-list a {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 38px;
  padding: 0.35rem 0.85rem; border-radius: 999px; border: 1px solid transparent;
  font-size: 0.88rem; font-weight: 600; color: var(--charcoal); text-decoration: none; background: transparent;
  white-space: nowrap;
}
.site-header .section-nav-list a:hover { background: #fff; border-color: var(--line); color: var(--charcoal); }
.site-header .section-nav-list a[aria-current="page"],
.site-header .section-nav-list a.is-active { background: var(--charcoal); color: var(--wax); border-color: var(--charcoal); }
.site-header .section-nav-count {
  font-size: 0.72rem; font-weight: 700; padding: 0.05rem 0.45rem; border-radius: 999px;
  background: rgba(31, 29, 26, 0.08); color: inherit;
}
.site-header .section-nav-list a[aria-current="page"] .section-nav-count { background: rgba(245, 238, 221, 0.2); }

/* The old sponsor band above the header and the old floating menu pieces. */
.sponsor-bar { display: none !important; }

/* ---- Small screens: the nav becomes a panel ------------------------------ */

@media (max-width: 1120px) {
  .tm-menu-btn { display: inline-flex; }
  .tm-bar-inner { min-height: 64px; gap: 0.6rem; }
  .tm-brand img { width: 42px; height: 42px; }
  .tm-brand-name { font-size: 1.3rem; }

  .tm-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(420px, 100%);
    z-index: 1100;
    background: var(--cream);
    border-left: 3px solid var(--charcoal);
    box-shadow: -20px 0 50px -30px rgba(0, 0, 0, 0.5);
    padding: 0.75rem 1.1rem 2rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }
  .tm-nav.is-open { transform: none; visibility: visible; transition: transform 0.25s ease; }
  .tm-nav-head { display: flex; align-items: center; justify-content: space-between; padding: 0.3rem 0 0.9rem; border-bottom: var(--edge); margin-bottom: 0.4rem; }
  .tm-nav-title { font-family: var(--serif); font-size: 1.4rem; font-weight: 800; }
  .tm-nav-close {
    width: 46px; height: 46px; border-radius: 999px; border: var(--edge); background: var(--wax);
    font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--charcoal);
  }
  .tm-nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .tm-nav-item { flex-wrap: wrap; border-bottom: 1px solid var(--line); }
  .tm-nav-link { flex: 1; min-height: 52px; font-size: 1.05rem; padding-inline: 0.25rem; border-radius: 0; }
  .tm-nav-link:hover { background: none; text-decoration: underline; }
  .tm-nav-link[aria-current="page"], .tm-nav-item.is-current > .tm-nav-link { box-shadow: inset 5px 0 0 var(--charcoal); background: var(--wax); padding-left: 0.8rem; border-radius: 0; }
  .tm-dd-btn { width: 52px; height: 52px; margin: 0; border-radius: 10px; }
  .tm-dd-btn svg { width: 18px; height: 18px; }
  .tm-dd {
    position: static; width: 100%; min-width: 0; box-shadow: none; border: 0; border-radius: 0;
    background: transparent; padding: 0 0 0.6rem 0.6rem;
  }
  .tm-dd a { padding: 0.75rem 0.7rem; min-height: 48px; display: flex; flex-direction: column; justify-content: center; }
  .tm-nav-extra { display: grid; gap: 0.6rem; margin-top: 1.4rem; }
  .tm-nav-extra a { justify-content: flex-start; }
  .tm-nav-backdrop {
    position: fixed; inset: 0; z-index: 1050; background: rgba(31, 29, 26, 0.45);
    opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0s linear 0.2s;
  }
  .tm-nav-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity 0.2s; }
}
@media (min-width: 1121px) {
  .tm-nav-head, .tm-nav-extra, .tm-nav-backdrop { display: none !important; }
}
@media (max-width: 1440px) {
  .tm-basket-label { display: none; }
}
@media (min-width: 1121px) and (max-width: 1360px) {
  .tm-brand-tag { display: none; }
}
@media (max-width: 560px) {
  .tm-brand-tag { display: none; }
  .tm-basket-label { display: none; }
  .tm-menu-label { display: none; }
  .tm-menu-btn { width: 46px; padding: 0; justify-content: center; }
  .site-header .section-nav-label { display: none; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.tm-footer {
  position: relative;
  margin-top: clamp(56px, 8vw, 110px);
  background: var(--charcoal);
  color: rgba(255, 251, 234, 0.84);
  padding-block: clamp(2.4rem, 5vw, 3.6rem) 2rem;
  font-size: 0.95rem;
}
/* The landscape closes every page the way the banner opens it. */
.tm-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 1px);
  height: clamp(56px, 8vw, 110px);
  background: var(--art-hills-dark) center bottom / 100% 100% no-repeat;
  pointer-events: none;
}
.tm-footer a { color: var(--cream); text-decoration: none; }
.tm-footer a:hover { color: var(--wax); text-decoration: underline; text-underline-offset: 3px; }
.tm-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 2rem;
}
.tm-footer h2 {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--wax);
  margin-bottom: 0.9rem;
}
.tm-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.tm-footer-brand { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.tm-footer-brand img { width: 52px; height: 52px; object-fit: contain; }
.tm-footer-brand p { font-family: var(--serif); font-size: 1.5rem; font-weight: 800; font-variation-settings: "SOFT" 100; color: var(--wax); }
.tm-footer-contact { display: grid; gap: 0.35rem; margin-top: 1rem; }
.tm-footer-sister {
  margin-top: 1.4rem;
  padding: 1rem 1.1rem;
  border: 2px solid rgba(254, 224, 3, 0.35);
  border-radius: var(--radius-sm);
  background: rgba(254, 224, 3, 0.05);
}
.tm-footer-sister span { display: block; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245, 238, 221, 0.6); margin-bottom: 0.2rem; }
.tm-footer-sister a { font-weight: 650; color: var(--wax); }
.tm-footer-base {
  margin-top: 2.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-dark);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem 2rem;
  font-size: 0.85rem;
  color: rgba(245, 238, 221, 0.62);
}
.tm-footer-base p + p { margin-top: 0.25rem; }
.tm-footer .tm-linkbtn {
  background: none; border: 0; padding: 0; font: inherit; color: var(--cream); cursor: pointer; text-align: left;
}
.tm-footer .tm-linkbtn:hover { color: var(--wax); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 980px) {
  .tm-footer-grid { grid-template-columns: repeat(2, 1fr); }
  .tm-footer-about { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .tm-footer-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Page sections
   ========================================================================== */

.tm-section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.tm-section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.tm-section--alt { background: var(--cream-2); border-block: var(--edge); }
.tm-section--wax { background: var(--wax); border-block: var(--edge); }
.tm-section--dark { background: var(--charcoal); color: rgba(255, 251, 234, 0.86); border-block: 4px solid var(--wax); }
.tm-section--alt + .tm-section--alt, .tm-section--dark + .tm-section--dark { border-top: 0; }
.tm-section--dark h1, .tm-section--dark h2, .tm-section--dark h3, .tm-section--dark h4 { color: var(--cream); }
.tm-section--dark h2 em, .tm-section--dark h1 em { color: var(--wax); }
/* On black the highlighter would sit behind yellow text, so drop it there. */
.tm-section--dark h1 em, .tm-section--dark h2 em,
.q-hero h1 em, .section-dark h1 em, .section-dark h2 em, .intro h1 em,
.card-dark h2 em, .on-dark h1 em, .on-dark h2 em { background: none; padding-inline: 0; }
.tm-section--dark .tm-eyebrow { color: var(--wax); }
.tm-section--dark .tm-link { color: var(--wax); }
.tm-section--dark .tm-link:hover { color: var(--cream); }
.tm-section + .tm-section:not([class*="--"]) { padding-top: 0; }

.tm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 0.9rem;
}
.tm-eyebrow::before {
  content: "";
  flex: none;
  width: 0.95rem;
  height: 1.05rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'%3E%3Cpath d='M10 1.5 18.5 6.2v9.6L10 20.5 1.5 15.8V6.2z' fill='%23fee003' stroke='%2312110d' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tm-head { max-width: 62ch; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.tm-head--center { margin-inline: auto; text-align: center; }
.tm-head p:not(.tm-eyebrow) { margin-top: 0.9rem; font-size: 1.08rem; color: var(--muted); }
.tm-section--dark .tm-head p:not(.tm-eyebrow) { color: rgba(245, 238, 221, 0.78); }
.tm-lede { font-size: clamp(1.08rem, 1rem + 0.35vw, 1.25rem); color: var(--muted); max-width: 60ch; }

.tm-grid { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); }
.tm-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tm-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tm-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tm-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tm-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.tm-split--top { align-items: start; }
.tm-split--wide-left { grid-template-columns: 1.2fr 0.8fr; }

@media (max-width: 1080px) {
  .tm-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tm-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .tm-grid-3, .tm-grid-2 { grid-template-columns: 1fr; }
  .tm-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tm-split, .tm-split--wide-left { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .tm-grid-4 { grid-template-columns: 1fr; }
  .tm-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .tm-grid-5 .tm-cat-body { padding: 0.8rem 0.85rem 1rem; }
  .tm-grid-5 .tm-cat-body p { display: none; }
  .tm-grid-5 .tm-cat-body h3 { font-size: 1.05rem; }
  .tm-grid-5 .tm-more { font-size: 0.88rem; margin-top: 0.5rem; }
}

/* ---- Home hero ---------------------------------------------------------- */

.tm-hero,
.tm-page-hero,
.page-lede {
  --hills-h: clamp(54px, 8vw, 120px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--wax);
  color: var(--charcoal);
  border-bottom: 3px solid var(--charcoal);
}
/* Honeycomb clusters in the two top corners. */
.tm-hero::before,
.tm-page-hero::before,
.page-lede::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--comb-h, clamp(150px, 20vw, 300px));
  z-index: -1;
  background:
    var(--art-comb) left top / auto 100% no-repeat;
  pointer-events: none;
}
.tm-hero > .wrap::before,
.tm-page-hero > .wrap::before,
.page-lede > .wrap::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--comb-h, clamp(150px, 20vw, 300px));
  height: var(--comb-h, clamp(150px, 20vw, 300px));
  z-index: -1;
  background: var(--art-comb) left top / 100% 100% no-repeat;
  transform: scaleX(-1);
  pointer-events: none;
}
/* Mountains, meadow and grass along the bottom edge. */
.tm-hero::after,
.tm-page-hero::after,
.page-lede::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--hills-h);
  z-index: -1;
  background: var(--art-hills) center bottom / 100% 100% no-repeat;
  pointer-events: none;
}

.tm-hero { padding-block: clamp(2.5rem, 6vw, 5rem) calc(var(--hills-h) + clamp(1.5rem, 3vw, 2.5rem)); }
.tm-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.tm-hero h1 { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem); }
.tm-hero .tm-lede, .tm-page-hero .tm-lede { color: var(--ink); }
/* On yellow, the highlighter stroke switches to white. */
.tm-hero h1 em, .tm-page-hero h1 em, .page-lede h1 em {
  color: inherit;
  font-weight: 700;
  background-image: linear-gradient(transparent 58%, #fff 58%, #fff 90%, transparent 90%);
}
.tm-hero .tm-lede { margin-top: 1.3rem; }
.tm-hero .btn-row { margin-top: 2rem; }
.tm-hero-media { position: relative; }
.tm-hero-media img {
  width: 100%;
  aspect-ratio: 1440 / 1337;
  object-fit: cover;
  border: 3px solid var(--charcoal);
  border-radius: 22px;
  box-shadow: var(--pop-lg);
}
.tm-hero-caption {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  right: 1rem;
  max-width: 34ch;
  padding: 0.7rem 0.9rem;
  border: var(--edge);
  border-radius: 12px;
  background: #fff;
  font-size: 0.88rem;
  font-weight: 550;
  line-height: 1.4;
  color: var(--charcoal);
}
.tm-trust-strip {
  list-style: none;
  margin: 2.2rem 0 0;
  padding: 1.2rem 0 0;
  border-top: 2px solid rgba(18, 17, 13, 0.25);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
}
.tm-trust-strip li { display: flex; align-items: center; gap: 0.5rem; }
.tm-trust-strip svg { width: 18px; height: 18px; color: var(--charcoal); flex: none; }

@media (max-width: 860px) {
  .tm-hero-grid { grid-template-columns: 1fr; }
  .tm-hero-media { order: -1; }
  .tm-hero-media img { aspect-ratio: 4 / 3; }
}

/* ---- Inner page hero ---------------------------------------------------- */

.tm-page-hero, .page-lede {
  --hills-h: clamp(36px, 5vw, 64px);
  --comb-h: clamp(110px, 13vw, 190px);
  padding-block: clamp(2rem, 4vw, 3.5rem) calc(var(--hills-h) + clamp(1.5rem, 3vw, 2.4rem));
}
/* Inner pages keep one honeycomb, in the right corner, clear of the text. */
.tm-page-hero::before, .page-lede::before { display: none; }
.tm-page-hero h1 { max-width: 22ch; }
.tm-page-hero .tm-lede { margin-top: 1.1rem; }
.tm-page-hero .btn-row { margin-top: 1.8rem; }
.tm-page-hero--media .tm-split { align-items: center; }
.tm-page-hero-img img { width: 100%; border: 3px solid var(--charcoal); border-radius: 18px; box-shadow: var(--pop-lg); object-fit: cover; aspect-ratio: 4 / 3; }
.tm-page-hero .tm-breadcrumb { color: var(--ink); }
.tm-page-hero .tm-breadcrumb li + li::before { color: rgba(18, 17, 13, 0.45); }
.tm-page-hero .tm-breadcrumb a { color: var(--charcoal); font-weight: 650; }

/* The shop category pages' older lede block, brought onto the yellow. */
.page-lede h1 em { font-style: italic; }
.page-lede p { color: var(--ink); }
.page-lede .kicker { color: var(--charcoal); font-weight: 800; }
.page-lede .breadcrumb { color: var(--ink); }
.page-lede .breadcrumb a { color: var(--charcoal); font-weight: 650; border-bottom-color: var(--charcoal); }
.page-lede .breadcrumb a:hover { color: var(--charcoal); background: rgba(255, 255, 255, 0.55); }

@media (max-width: 700px) {
  .tm-hero { --comb-h: 120px; }
  .tm-page-hero, .page-lede { --comb-h: 84px; }
  .tm-hero::before { opacity: 0.85; }
}

.tm-breadcrumb { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; font-size: 0.88rem; color: var(--muted); }
.tm-breadcrumb li + li::before { content: "/"; margin-right: 0.3rem; color: rgba(31, 29, 26, 0.35); }
.tm-breadcrumb a { color: var(--charcoal); text-decoration: underline; text-decoration-color: var(--wax-600); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---- Cards -------------------------------------------------------------- */

.tm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--pop);
  padding: clamp(1.3rem, 2.6vw, 1.8rem);
  color: var(--ink);
  transition: transform 0.15s, box-shadow 0.15s;
}
.tm-card h3 { margin-bottom: 0.6rem; }
.tm-card p { color: var(--muted); }
.tm-card .tm-card-foot { margin-top: auto; padding-top: 1.2rem; }
.tm-card--wax { background: var(--wax); border-color: var(--charcoal); }
.tm-card--wax p { color: var(--ink); }
.tm-card--dark { background: var(--charcoal-2); border-color: var(--charcoal); box-shadow: 4px 4px 0 var(--wax-600); color: rgba(255, 251, 234, 0.86); }
.tm-card--dark h3 { color: var(--cream); }
.tm-card--dark p { color: rgba(245, 238, 221, 0.78); }
.tm-section--dark .tm-card:not(.tm-card--wax) { background: var(--charcoal-2); border-color: rgba(254, 224, 3, 0.4); box-shadow: none; }
.tm-section--dark .tm-card--wax { box-shadow: none; }
.tm-section--dark .tm-card:not(.tm-card--wax) h3 { color: var(--cream); }
.tm-section--dark .tm-card:not(.tm-card--wax) p { color: rgba(245, 238, 221, 0.78); }
.tm-card-num {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--brown);
  margin-bottom: 0.6rem;
}

/* Whole-card links: the heading link stretches over the card. */
.tm-card-link { text-decoration: none; color: inherit; }
.tm-card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tm-card:has(.tm-card-link):hover { transform: translate(-2px, -2px); box-shadow: var(--pop-lg); }
.tm-card:has(.tm-card-link:focus-visible) { outline: 3px solid var(--charcoal); outline-offset: 4px; }
.tm-card:has(.tm-card-link):hover .tm-more { text-decoration: underline; text-decoration-color: var(--wax-600); text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .tm-card:has(.tm-card-link):hover { transform: none; } }
.tm-card-link:focus-visible { outline: none; }
.tm-more {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1rem;
  font-weight: 750; color: var(--charcoal);
}
.tm-section--dark .tm-more { color: var(--wax); }
.tm-more svg { width: 1em; height: 1em; }

/* Product category tile */
.tm-cat { padding: 0; overflow: hidden; }
.tm-cat-art {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 90% at 50% 0%, #fffbe0 0%, var(--wax) 70%, var(--wax-600) 130%);
  border-bottom: var(--edge);
}
.tm-cat-art svg { width: 46%; height: auto; }
.tm-cat-art img { width: 100%; height: 100%; object-fit: cover; }
.tm-cat-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.tm-cat-body h3 { font-size: 1.2rem; margin-bottom: 0.4rem; }
.tm-cat-body p { font-size: 0.95rem; }

.tm-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  border: 1.5px solid currentColor;
  margin-bottom: 0.7rem;
}
.tm-badge svg { width: 0.9rem; height: 0.9rem; }
.tm-badge--soon { color: var(--charcoal); background: var(--wax); }
.tm-badge--live { color: #fff; background: var(--green); border-color: var(--green); }
.tm-badge--season { color: var(--charcoal); background: var(--cream-2); }

/* Facts list: label + value pairs */
.tm-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0;
  margin: 0;
  background: #fff;
  border: var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--pop);
  overflow: hidden;
}
/* Hairlines drawn on each cell, so a short last row leaves white, not grey. */
.tm-facts > div { background: #fff; padding: 1rem 1.15rem; box-shadow: inset -1px -1px 0 var(--line); }
.tm-facts dt { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--brown); margin-bottom: 0.3rem; }
.tm-facts dd { margin: 0; font-weight: 600; color: var(--charcoal); line-height: 1.4; }
.tm-facts dd small { display: block; font-weight: 500; color: var(--muted); font-size: 0.88rem; margin-top: 0.2rem; }
.tm-section--dark .tm-facts { background: var(--charcoal-2); border-color: rgba(254, 224, 3, 0.4); box-shadow: none; }
.tm-section--dark .tm-facts > div { background: var(--charcoal-2); box-shadow: inset -1px -1px 0 var(--line-dark); }
.tm-section--dark .tm-facts dt { color: var(--wax); }
.tm-section--dark .tm-facts dd { color: var(--cream); }
.tm-section--dark .tm-facts dd small { color: rgba(245, 238, 221, 0.7); }

/* Big number timing blocks for visit durations */
.tm-timing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.tm-timing > div { background: #fff; border: var(--edge); border-radius: var(--radius); box-shadow: var(--pop); padding: 1.2rem; }
.tm-timing strong { display: block; font-family: var(--serif); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); font-weight: 800; font-variation-settings: "SOFT" 100; color: var(--charcoal); line-height: 1.1; white-space: nowrap; }
.tm-timing span { display: block; margin-top: 0.35rem; color: var(--muted); font-size: 0.95rem; }
.tm-section--dark .tm-timing > div { background: var(--charcoal-2); border-color: rgba(254, 224, 3, 0.4); box-shadow: none; }
.tm-section--dark .tm-timing strong { color: var(--wax); }
.tm-section--dark .tm-timing span { color: rgba(245, 238, 221, 0.78); }
@media (max-width: 640px) { .tm-timing { grid-template-columns: 1fr; } }

/* Tick list */
.tm-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.tm-ticks li { position: relative; padding-left: 1.9rem; }
.tm-ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--charcoal);
  background: var(--wax) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f1d1a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.7rem no-repeat;
}
.tm-ticks strong { color: var(--charcoal); }
.tm-section--dark .tm-ticks strong { color: var(--cream); }

/* Numbered steps */
.tm-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 1rem; }
.tm-steps > li { counter-increment: s; position: relative; padding-left: 3.2rem; min-height: 2.4rem; }
.tm-steps > li::before {
  content: counter(s);
  position: absolute; left: 0; top: 0;
  width: 2.3rem; height: 2.6rem;
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 800;
  background: var(--charcoal); color: var(--wax);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.tm-steps h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }

/* Notices */
.tm-notice {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  padding: 1rem 1.2rem;
  border-radius: var(--radius-sm);
  border: var(--edge);
  border-left-width: 6px;
  background: var(--wax-100);
  color: var(--ink);
  font-size: 0.97rem;
}
.tm-notice svg { width: 1.3rem; height: 1.3rem; flex: none; margin-top: 0.15rem; color: var(--charcoal); }
.tm-notice strong { color: var(--charcoal); }
.tm-notice--plain { background: #fff; }
.tm-section--dark .tm-notice { background: rgba(240, 189, 69, 0.1); border-color: rgba(240, 189, 69, 0.35); color: rgba(245, 238, 221, 0.9); }
.tm-section--dark .tm-notice strong { color: var(--cream); }
.tm-section--dark .tm-notice svg { color: var(--wax); }

/* Figures */
.tm-figure { margin: 0; }
.tm-figure img { width: 100%; border: var(--edge); border-radius: var(--radius); box-shadow: var(--pop); object-fit: cover; }
.tm-figure figcaption { margin-top: 0.6rem; font-size: 0.88rem; color: var(--muted); }
.tm-section--dark .tm-figure figcaption { color: rgba(245, 238, 221, 0.66); }
.tm-ratio-43 { aspect-ratio: 4 / 3; }
.tm-ratio-1 { aspect-ratio: 1 / 1; }
.tm-ratio-34 { aspect-ratio: 3 / 4; }
.tm-ratio-169 { aspect-ratio: 16 / 9; }

/* Call-to-action band */
.tm-cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 2rem;
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
  border: 3px solid var(--charcoal);
  border-radius: 20px;
  background: var(--charcoal);
  box-shadow: 7px 7px 0 var(--wax-600);
  color: rgba(255, 251, 234, 0.86);
}
.tm-cta-band h2 { color: var(--wax); font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); }
.tm-cta-band h2 em { color: var(--wax); background: none; }
.tm-cta-band p { margin-top: 0.4rem; max-width: 56ch; }

/* Partner / funder logos */
.tm-logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.tm-logos li { background: #fff; border: var(--edge); border-radius: var(--radius); box-shadow: var(--pop); padding: 1rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.7rem; }
.tm-logos .tm-logo-frame { height: 84px; display: flex; align-items: center; justify-content: center; width: 100%; }
.tm-logos img { max-height: 84px; width: auto; max-width: 100%; object-fit: contain; }
.tm-logos p { font-size: 0.86rem; color: var(--muted); line-height: 1.35; }
.tm-logos strong { display: block; color: var(--charcoal); font-size: 0.92rem; }
@media (max-width: 980px) { .tm-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tm-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Contact details */
.tm-contact-list { margin: 0; display: grid; gap: 1px; background: var(--line); border: var(--edge); border-radius: var(--radius); box-shadow: var(--pop); overflow: hidden; }
.tm-contact-list > div { background: #fff; padding: 0.9rem 1.1rem; display: grid; grid-template-columns: 9rem 1fr; gap: 0.8rem; }
.tm-contact-list dt { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--brown); padding-top: 0.15rem; }
.tm-contact-list dd { margin: 0; font-weight: 600; }
.tm-contact-list a { color: var(--charcoal); }
@media (max-width: 480px) { .tm-contact-list > div { grid-template-columns: 1fr; gap: 0.2rem; } }

/* FAQ / disclosure */
.tm-faq { display: grid; gap: 0.6rem; }
.tm-faq details { background: #fff; border: var(--edge); border-radius: var(--radius-sm); }
.tm-faq details[open] { box-shadow: var(--pop); }
.tm-faq summary { cursor: pointer; padding: 1rem 1.2rem; font-weight: 750; list-style: none; display: flex; justify-content: space-between; gap: 1rem; min-height: 48px; align-items: center; }
.tm-faq summary::-webkit-details-marker { display: none; }
.tm-faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--wax); border: 1.5px solid var(--charcoal); font-size: 1.15rem; font-weight: 800; line-height: 1; color: var(--charcoal); }
.tm-faq details[open] summary::after { content: "–"; }
.tm-faq details > div { padding: 0 1.2rem 1.1rem; color: var(--muted); }

/* ==========================================================================
   Forms
   The field classes (.field, .field-row, .form-status) are the ones the
   booking calendar and the older forms already use, so they are kept.
   ========================================================================== */

.form-card, .partner-form-wrap {
  background: #fff;
  color: var(--ink);
  border: 3px solid var(--charcoal);
  border-radius: 18px;
  padding: clamp(1.3rem, 3vw, 2.2rem);
  box-shadow: var(--pop-lg);
}
.form-lead { font-family: var(--serif); font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem); font-weight: 800; color: var(--charcoal); margin-bottom: 0.5rem; }
.form-note { font-size: 0.95rem; color: var(--muted); margin-bottom: 1.4rem; }
.form-required-note { font-size: 0.88rem; color: var(--muted); margin-bottom: 1rem; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.field { margin-bottom: 1.1rem; display: flex; flex-direction: column; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.field > label, .field > .field-label, fieldset.field > legend {
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--charcoal);
  margin-bottom: 0.4rem;
  letter-spacing: 0;
  text-transform: none;
}
.field .opt { font-weight: 500; color: var(--muted); }
.field .req { color: var(--danger); }
.field-hint { font-size: 0.86rem; color: var(--muted); margin: -0.15rem 0 0.45rem; }
.field input:not([type="checkbox"]):not([type="radio"]), .field textarea, .field select {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 2px solid rgba(18, 17, 13, 0.55);
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
  min-height: 48px;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%235c574d' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.4rem;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--charcoal);
  box-shadow: 0 0 0 4px var(--wax);
}
.field [aria-invalid="true"] { border-color: var(--danger) !important; }
.field-error { color: var(--danger); font-size: 0.88rem; font-weight: 600; margin-top: 0.35rem; }
.field-error:empty { display: none; }

fieldset.field { border: 0; padding: 0; margin-inline: 0; }
.check, .radio {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.6rem 0;
  font-size: 0.98rem;
  line-height: 1.45;
  cursor: pointer;
}
.check input, .radio input { width: 1.25rem; height: 1.25rem; margin: 0.12rem 0 0; flex: none; accent-color: var(--charcoal); }
.check small, .radio small { display: block; color: var(--muted); font-size: 0.88rem; }

.choice-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.choice-card {
  position: relative;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.95rem 1rem;
  border: 2px solid rgba(18, 17, 13, 0.35);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}
.choice-card:has(input:checked) { border-color: var(--charcoal); background: var(--wax); box-shadow: var(--pop); }
.choice-card:has(input:focus-visible) { outline: 3px solid var(--charcoal); outline-offset: 2px; }
.choice-card input { width: 1.2rem; height: 1.2rem; margin: 0.15rem 0 0; flex: none; accent-color: var(--charcoal); }
.choice-card strong { display: block; color: var(--charcoal); }
.choice-card span { font-size: 0.9rem; color: var(--muted); line-height: 1.45; }
@media (max-width: 620px) { .choice-cards { grid-template-columns: 1fr; } }

.form-submit { margin-top: 0.4rem; }
.form-status { margin-top: 0.9rem; font-size: 0.97rem; min-height: 1.2em; font-weight: 600; }
.form-status:empty { margin-top: 0; min-height: 0; }
.form-status.ok {
  color: #2e4a31;
  background: #eef3ea;
  border: 1px solid rgba(63, 93, 66, 0.35);
  border-radius: 10px;
  padding: 0.8rem 1rem;
}
.form-status.err {
  color: var(--danger);
  background: #fbefec;
  border: 1px solid rgba(163, 52, 28, 0.3);
  border-radius: 10px;
  padding: 0.8rem 1rem;
}
.form-status a { color: inherit; }
.form-privacy { font-size: 0.86rem; color: var(--muted); margin-top: 0.9rem; }
.form-privacy a { color: var(--charcoal); font-weight: 650; }

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

/* ==========================================================================
   School visit calendar (markup and behaviour in /schools and js/booking.js)
   ========================================================================== */

.booking-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin: 0 0 1.4rem; padding: 0; font-size: 0.85rem; font-weight: 700; color: var(--muted); counter-reset: step; }
.booking-steps li { display: flex; align-items: center; gap: 0.5rem; }
.booking-steps li::before { content: counter(step); counter-increment: step; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1.5px solid var(--line); font-size: 0.8rem; }
.booking-steps li[aria-current="step"] { color: var(--charcoal); }
.booking-steps li[aria-current="step"]::before { background: var(--wax); border-color: var(--wax); color: var(--charcoal); }

.cal { border: var(--edge); border-radius: var(--radius); padding: clamp(0.8rem, 2.5vw, 1.3rem); background: #fff; box-shadow: var(--pop); }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.9rem; }
.cal-month { font-family: var(--serif); font-size: 1.25rem; font-weight: 800; text-align: center; flex: 1; color: var(--charcoal); }
.cal-nav { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--charcoal); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.cal-nav:hover:not(:disabled) { border-color: var(--charcoal); }
.cal-nav:disabled { opacity: 0.3; cursor: not-allowed; }

.cal-season { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.9rem; line-height: 1.45; padding: 0.7rem 0.9rem; border-radius: 10px; margin-bottom: 0.9rem; }
.cal-season[data-bees="yes"] { background: var(--wax-100); border: 1.5px solid var(--charcoal); color: var(--charcoal); }
.cal-season[data-bees="no"], .cal-season[data-bees="mixed"] { background: #eef3ea; border: 1px solid rgba(63, 93, 66, 0.3); color: #2e4a31; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { margin-bottom: 4px; }
.cal-dow span { text-align: center; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--muted); padding-block: 0.35rem; }
.cal-day { position: relative; aspect-ratio: 1 / 1; min-height: 2.75rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; border-radius: 9px; border: 1.5px solid transparent; background: transparent; font-family: var(--sans); font-size: 0.98rem; font-weight: 650; color: var(--ink); padding: 0; }
.cal-day.is-pad { visibility: hidden; }
.cal-day.is-closed { color: rgba(31, 29, 26, 0.32); }
.cal-day.is-off { color: rgba(31, 29, 26, 0.38); background: repeating-linear-gradient(135deg, rgba(31, 29, 26, 0.06) 0 5px, transparent 5px 10px); }
.cal-day.is-held, .cal-day.is-conf { color: var(--muted); background: var(--cream-2); border-color: var(--line); }
.cal-day.is-held::after, .cal-day.is-conf::after { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.cal-day.is-held::after { background: var(--wax-600); }
.cal-day.is-conf::after { background: var(--green); }
.cal-day.is-free, .cal-day.is-part { cursor: pointer; background: var(--wax-100); border-color: var(--charcoal); color: var(--charcoal); }
.cal-day.is-part { border-style: dashed; }
.cal-day.is-free:hover, .cal-day.is-part:hover { background: var(--wax); border-color: var(--wax); border-style: solid; }
.cal-day.is-free::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--wax-600); }
.cal-day.is-part::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.cal-day[aria-pressed="true"], .cal-day[aria-pressed="true"]:hover { background: var(--charcoal); border-color: var(--charcoal); color: var(--cream); }
.cal-key { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin: 1rem 0 0; padding: 0.9rem 0 0; border-top: 1px solid var(--line); font-size: 0.84rem; color: var(--muted); }
.cal-key li { display: flex; align-items: center; gap: 0.45rem; }
.cal-key i { width: 0.95rem; height: 0.95rem; border-radius: 4px; border: 1.5px solid var(--line); }
.cal-key .k-free { background: var(--wax-100); border-color: var(--charcoal); }
.cal-key .k-part { background: var(--wax-100); border-color: var(--charcoal); border-style: dashed; }
.cal-key .k-held { background: var(--cream-2); border-color: var(--wax-600); }
.cal-key .k-conf { background: var(--cream-2); border-color: var(--green); }
.cal-key .k-off { background: repeating-linear-gradient(135deg, rgba(31, 29, 26, 0.14) 0 4px, transparent 4px 8px); }
.cal-msg { margin-top: 0.9rem; font-size: 0.93rem; font-weight: 550; min-height: 1.2em; }
.cal-msg.err { color: var(--danger); }

.booking-form { margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.chosen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; padding: 1rem 1.15rem; border-radius: 12px; background: var(--charcoal); color: var(--cream); margin-bottom: 1.5rem; }
.chosen-date { font-family: var(--serif); font-size: 1.2rem; font-weight: 800; color: var(--wax); }
.chosen-season { display: block; font-size: 0.85rem; color: var(--wax); margin-top: 0.2rem; font-weight: 550; font-family: var(--sans); }
.chosen button { background: none; border: 1px solid rgba(245, 238, 221, 0.5); border-radius: 999px; min-height: 40px; padding: 0 1rem; color: var(--cream); font-family: var(--sans); font-size: 0.9rem; font-weight: 650; cursor: pointer; }
.chosen button:hover { background: var(--cream); color: var(--charcoal); }
.bees-opt { display: flex; gap: 0.75rem; align-items: flex-start; padding: 1rem 1.15rem; border: 2px solid var(--charcoal); background: var(--wax-100); border-radius: 12px; margin-bottom: 1.2rem; cursor: pointer; }
.bees-opt[hidden] { display: none; }
.bees-opt input { margin-top: 0.2rem; width: 1.2rem; height: 1.2rem; accent-color: var(--charcoal); flex: none; }
.bees-opt span { font-size: 0.95rem; line-height: 1.5; }
.bees-opt strong { display: block; font-weight: 700; margin-bottom: 0.15rem; color: var(--charcoal); }
.bees-opt em { color: var(--muted); font-style: normal; font-size: 0.9rem; }
.booking-done { margin-top: 1.6rem; padding: 1.6rem; border-radius: var(--radius); border: 1px solid rgba(63, 93, 66, 0.35); background: #eef3ea; }
.booking-done h3 { margin-bottom: 0.7rem; }
.booking-ref { display: inline-block; margin-top: 0.9rem; font-weight: 750; letter-spacing: 0.12em; font-size: 1.05rem; padding: 0.5em 1em; border-radius: 8px; background: var(--charcoal); color: var(--wax); }
.booking-fallback { margin-top: 1.6rem; border-top: 1px solid var(--line); padding-top: 1.2rem; }
.booking-fallback > summary { cursor: pointer; font-weight: 750; color: var(--charcoal); list-style: none; display: flex; align-items: center; gap: 0.5rem; min-height: 44px; }
.booking-fallback > summary::-webkit-details-marker { display: none; }
.booking-fallback > summary::before { content: "+"; font-size: 1.2rem; line-height: 1; }
.booking-fallback[open] > summary::before { content: "–"; }
.booking-fallback .enquiry-form { margin-top: 1.4rem; }
.lookup { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px dashed var(--line); }
.lookup-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; }
.lookup-row .field { margin-bottom: 0; flex: 1 1 200px; }

@media (max-width: 560px) {
  .cal-day { min-height: 2.5rem; font-size: 0.9rem; }
  .cal-key { font-size: 0.8rem; gap: 0.35rem 0.8rem; }
  .chosen { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Consent-gated embeds and the cookie preferences dialog
   ========================================================================== */

.tm-embed-gate {
  max-width: 520px;
  margin-inline: auto;
  padding: 1.6rem;
  border: 2px dashed var(--charcoal);
  border-radius: var(--radius);
  background: #fff;
  text-align: center;
}
.tm-embed-gate p { color: var(--muted); font-size: 0.95rem; }
.tm-embed-gate .btn-row { justify-content: center; margin-top: 1.1rem; }
.tm-fb { max-width: 500px; margin-inline: auto; min-height: 120px; }
.tm-fb .fb-page, .tm-fb span, .tm-fb iframe { width: 100% !important; }

.tm-consent {
  border: 3px solid var(--charcoal);
  padding: 0;
  border-radius: 16px;
  max-width: min(520px, calc(100% - 2rem));
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6);
  background: var(--cream);
  color: var(--ink);
}
.tm-consent::backdrop { background: rgba(31, 29, 26, 0.5); }
.tm-consent form { padding: 1.5rem; }
.tm-consent h2 { font-size: 1.4rem; margin-bottom: 0.6rem; }
.tm-consent p { color: var(--muted); font-size: 0.95rem; }
.tm-consent .check { margin-top: 1rem; padding: 0.9rem 1rem; background: #fff; border: var(--edge); border-radius: 12px; }
.tm-consent .btn-row { margin-top: 1.2rem; justify-content: flex-end; }

/* ---- Basket overrides ---------------------------------------------------
   The header basket button replaces the floating badge cart.js used to show
   on its own, so the floating one is hidden wherever the header has one. */
.has-header-basket .cart-badge { display: none !important; }
.cart-drawer { background: var(--cream); color: var(--ink); }
.cart-drawer h2 { color: var(--charcoal); }

/* ==========================================================================
   Older page fixes — shop.css and the queen page, under the new palette
   ========================================================================== */

.card-dark, .card.card-dark { background: var(--charcoal); }
/* Product cards on the sponsorship and category pages take the outlined look. */
.card { background: #fff; border: var(--edge); border-bottom-width: 5px; border-bottom-color: var(--wax-600); box-shadow: var(--pop); }
.card:hover { transform: translate(-2px, -2px); box-shadow: var(--pop-lg); }
.card.card-dark { border-color: var(--charcoal); border-bottom-color: var(--wax); box-shadow: 4px 4px 0 var(--wax-600); }
@media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }
.kicker { color: var(--brown); }

/* Reveal-on-scroll is kept for the older shop pages that rely on it, but it
   never hides content from people who prefer less motion. */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@media print {
  .site-header, .tm-footer, .tm-nav-backdrop, .cart-badge, .cart-drawer { display: none !important; }
  body { background: #fff; }
}