/* =========================================================
   F'ing Chefing — enamel kitchenware palette
   Pale eau-de-nil ground, cast-iron ink, chipped-enamel flame.
   ========================================================= */

:root {
  /* --- surfaces --- */
  --ground:      #e9eae1;
  --ground-sunk: #dfe1d6;
  --ground-lift: #f4f5ef;
  --rim:         #14453a;
  --rim-ink:     #e5ece6;

  /* --- ink --- */
  --ink:         #191d19;
  --ink-soft:    #4c534a;
  --ink-faint:   #737b70;

  /* --- lines --- */
  --rule:        #c6cbbc;
  --rule-hard:   #a9b19d;

  /* --- accent: one bold spend --- */
  --flame:       #d9451c;
  --flame-deep:  #b3350f;
  --flame-ink:   #fdf6f2;

  /* --- type --- */
  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --body:    "Newsreader", Georgia, "Times New Roman", serif;
  --mono:    "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-xs:   0.7rem;
  --t-sm:   0.8125rem;
  --t-base: 1.0625rem;
  --t-md:   1.1875rem;
  --t-lg:   1.4rem;
  --t-xl:   1.9rem;
  --t-2xl:  clamp(2rem, 4.2vw, 3.1rem);
  --t-hero: clamp(3.1rem, 10.5vw, 8.2rem);

  --shell: 1180px;
  --band-y: clamp(4rem, 9vw, 7.5rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #141713;
    --ground-sunk: #101310;
    --ground-lift: #1e221d;
    --rim:         #0f342c;
    --rim-ink:     #dfe8e2;
    --ink:         #e9eae1;
    --ink-soft:    #a8b0a4;
    --ink-faint:   #7e867b;
    --rule:        #2f352d;
    --rule-hard:   #444c41;
    --flame:       #f2683c;
    --flame-deep:  #d9451c;
    --flame-ink:   #1a0d07;
  }
}

:root[data-theme="dark"] {
  --ground:      #141713;
  --ground-sunk: #101310;
  --ground-lift: #1e221d;
  --rim:         #0f342c;
  --rim-ink:     #dfe8e2;
  --ink:         #e9eae1;
  --ink-soft:    #a8b0a4;
  --ink-faint:   #7e867b;
  --rule:        #2f352d;
  --rule-hard:   #444c41;
  --flame:       #f2683c;
  --flame-deep:  #d9451c;
  --flame-ink:   #1a0d07;
}

/* ---------------- base ---------------- */

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

/* Any class that sets display beats the browser's own [hidden] rule, so a
   hidden .btn would otherwise stay on screen. Scripts toggle .hidden on
   buttons and links, so this has to win. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "wdth" 80;
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--flame);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--flame);
  color: var(--flame-ink);
  padding: 0.75rem 1rem;
  font-family: var(--mono);
  z-index: 50;
}
.skip:focus { left: 0; }

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

.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}

/* ---------------- shared type ---------------- */

.eyebrow, .rail__label, .ticket__head, .menu__meta, .pillar__tag,
.chef__where, .tier__unit, .run__time, .perk__fig, .checker__label,
.menu__flag, .levels__add, .levels__noteTag,
.tier__flag, .tier__from, .legal__num, .legal__glanceHead, .gift__tag,
.wiz__label, .wiz__subLegend, .wiz__whoTag, .wiz__whoWhere, .chef__sigTag,
.inv__groupTag, .inv__docMeta, .doc__railTag {
  font-family: var(--mono);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: var(--t-xs);
}

.eyebrow { color: var(--flame); margin-bottom: 1.1rem; }

.h2 { font-size: var(--t-2xl); max-width: 20ch; }
.h2--onDeep { color: var(--rim-ink); }

.lede {
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 46ch;
}

.lede__pin {
  color: var(--flame);
  font-weight: 600;
  box-shadow: inset 0 -0.42em 0 color-mix(in srgb, var(--flame) 14%, transparent);
}

.sechead { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sechead__sub {
  margin-top: 1.1rem;
  color: var(--ink-soft);
  max-width: 60ch;
}
.sechead__sub--flush { margin-top: 1rem; margin-bottom: 2.5rem; }

/* ---------------- wordmark ---------------- */

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "wdth" 78;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  line-height: 1;
}
.wordmark__stamp {
  background: var(--flame);
  color: var(--flame-ink);
  padding: 0.16em 0.32em 0.2em;
  transform: rotate(-2deg);
  display: inline-block;
}
.wordmark--foot { font-size: 1.7rem; }

/* ---------------- topbar ---------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.topbar__in {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-block: 0.9rem;
}
.topnav {
  display: none;
  gap: 1.6rem;
  margin-inline-start: auto;
  font-family: var(--mono);
  font-size: var(--t-sm);
}
.topnav a { text-decoration: none; color: var(--ink-soft); }
.topnav a:hover { color: var(--flame); }
.topbar__cta { margin-inline-start: auto; }

@media (min-width: 1080px) {
  .topnav { display: flex; }
  .topbar__cta { margin-inline-start: 0; }
}

/* ---------------- buttons ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  padding: 0.72rem 1.2rem;
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.14s ease, background-color 0.14s ease, color 0.14s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--flame {
  background: var(--flame);
  border-color: var(--flame);
  color: var(--flame-ink);
}
.btn--flame:hover { background: var(--flame-deep); border-color: var(--flame-deep); }
.btn--ghost:hover { background: var(--ink); color: var(--ground); }
.btn--lg { padding: 0.95rem 1.7rem; font-size: var(--t-base); }
.btn--full { width: 100%; margin-top: auto; }

/* ---------------- bands ---------------- */

.band { padding-block: var(--band-y); border-top: 1px solid var(--rule); }
.band--hero { border-top: 0; padding-block: clamp(3.5rem, 7vw, 6rem) var(--band-y); }
.band--sunk { background: var(--ground-sunk); }
.band--rim { background: var(--rim); color: var(--rim-ink); border-top: 0; }
.band--deep { background: var(--rim); color: var(--rim-ink); }

.rail-layout {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 900px) {
  .rail-layout { grid-template-columns: 15rem 1fr; }
}
.rail { border-top: 3px solid var(--flame); padding-top: 1rem; }
.rail__label { color: var(--flame); display: block; margin-bottom: 0.75rem; }
.rail__note { font-size: var(--t-sm); line-height: 1.5; color: var(--ink-soft); }
/* On an inverted band the note has to switch to the light ink. Both green
   bands need it: --rim was the only one without it until investors.html put a
   rail on one, and the dark-on-dark result measured 1.36:1. */
.band--deep .rail { border-top-color: var(--flame); }
.band--deep .rail__note,
.band--rim .rail__note { color: color-mix(in srgb, var(--rim-ink) 72%, transparent); }
.rail__main { min-width: 0; }

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

.hero {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 900px) {
  .hero { grid-template-columns: 1fr 17rem; }
}

.hero__h1 {
  font-size: var(--t-hero);
  font-variation-settings: "wdth" 76;
  letter-spacing: -0.03em;
  margin-bottom: 1.6rem;
}
.stamp {
  display: inline-block;
  background: var(--flame);
  color: var(--flame-ink);
  padding: 0.02em 0.14em 0.06em;
  transform: rotate(-1.6deg);
}
.hero__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.2rem;
}
.hero__note {
  margin-top: 1.6rem;
  font-family: var(--mono);
  font-size: var(--t-sm);
  color: var(--ink-faint);
}

.ticket {
  background: var(--ground-lift);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--ink);
  padding: 1.4rem 1.4rem 1.2rem;
}
.ticket__head { color: var(--ink); margin-bottom: 1rem; }
.ticket__list { display: flex; flex-direction: column; }
.ticket__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.55rem;
  border-bottom: 1px dashed var(--rule);
  font-family: var(--mono);
  font-size: var(--t-sm);
}
.ticket__row dt { color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--t-xs); }
.ticket__row dd { text-align: right; font-variant-numeric: tabular-nums; }
.ticket__foot {
  margin-top: 1rem;
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--ink-soft);
}

/* ---------------- pillars ---------------- */

.pillars {
  display: grid;
  /* Same gap as .menus and .tiers, so every three-column grid on the page
     shares one set of column edges. */
  gap: clamp(2rem, 4vw, 3rem) 1.5rem;
}
@media (min-width: 820px) { .pillars { grid-template-columns: repeat(3, 1fr); } }

.pillar { border-top: 1px solid color-mix(in srgb, var(--rim-ink) 35%, transparent); padding-top: 1.2rem; }
.pillar__tag { color: var(--flame); display: block; margin-bottom: 1rem; }
.pillar__h { font-size: var(--t-xl); margin-bottom: 0.85rem; color: var(--rim-ink); }
.pillar p { color: color-mix(in srgb, var(--rim-ink) 78%, transparent); }

/* ---------------- how it runs ---------------- */

.run {
  display: flex;
  flex-direction: column;
  margin-top: 2.5rem;
}
.run__step {
  display: grid;
  gap: 0.4rem 1.8rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--rule);
}
@media (min-width: 640px) { .run__step { grid-template-columns: 5.5rem 1fr; } }
.run__time { color: var(--flame); font-variant-numeric: tabular-nums; }
.run__txt h3 { font-size: var(--t-lg); margin-bottom: 0.45rem; }
.run__txt p { color: var(--ink-soft); max-width: 58ch; }

/* ---------------- menus ---------------- */

.menus {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 700px)  { .menus { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .menus { grid-template-columns: repeat(3, 1fr); } }

.menu {
  background: var(--ground-lift);
  border: 1px solid var(--rule);
  padding: 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.menu--feature { border-color: var(--flame); border-width: 2px; }
.menu__name { font-size: var(--t-xl); margin-bottom: 0.5rem; }
.menu__meta { color: var(--ink-faint); }
.menu__dishes { display: flex; flex-direction: column; gap: 0.9rem; }
.menu__dishes li {
  border-top: 1px dashed var(--rule);
  padding-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.menu__dishes strong { font-weight: 600; }
.menu__dishes span { font-size: var(--t-sm); line-height: 1.5; color: var(--ink-soft); }
.menu__why {
  margin-top: auto;
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--ink-faint);
  border-top: 1px solid var(--rule);
  padding-top: 0.9rem;
}

.menu__flag { color: var(--flame); display: block; margin-bottom: 0.9rem; }
.menu__lead { display: flex; flex-direction: column; }
.menu__why--lead { margin-top: 1rem; }
/* Where the ingredients come from. Sits under the "For:" line and shares its
   faint treatment, but upright rather than italic so it reads as fact rather
   than aside. Every name on one of these is a supplier still to be arranged:
   see the pre-launch list in the README before treating any of them as real. */
.menu__source {
  font-size: var(--t-xs);
  /* --ink-soft, not --ink-faint. The faint tier is what the rest of the card
     uses, but it measures about 4:1 and this line is 11px, so it would be new
     text landing under the 4.5:1 threshold. Hierarchy comes from the size here
     rather than from washing the colour out. */
  color: var(--ink-soft);
  margin-top: 0.6rem;
  line-height: 1.5;
}
.menu__source strong { font-weight: 600; }
.menu__lead .menu__source { margin-top: 0.9rem; }

/* A wide card is only wide in the three-column layout. Mixing one-column and
   all-column cards in a TWO-column grid cannot tile: a card spanning both
   columns will not fit beside a single one, so it drops to the next row and
   abandons the space next to it. Below 1040px every menu is therefore an
   ordinary card and the grid simply wraps, leaving at most a partial last row.
   Do not give .menu--wide a grid-column outside this media query. */
@media (min-width: 1040px) {
  /* A wide card repeats the parent's three columns rather than inventing its
     own rhythm, and drops its side padding onto the lead and the dish list so
     the text inside lines up with the text in the single cards above it. The
     dish gap is the grid gap plus the two paddings it now has to bridge. */
  .menu--wide {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 1.5rem;
    row-gap: 2.25rem;
    align-items: start;
    padding-inline: 0;
  }
  .menu--wide > .menu__lead { padding-inline: 1.4rem; }
  .menu--wide .menu__dishes--row {
    display: grid;
    grid-column: 2 / -1;
    grid-template-columns: repeat(2, 1fr);
    column-gap: calc(1.5rem + 2 * 1.4rem);
    row-gap: 1.2rem;
    padding-inline: 1.4rem;
  }
}

/* ---------------- chefs ---------------- */

.chefs { display: grid; gap: 2rem 2.5rem; }
@media (min-width: 720px) { .chefs { grid-template-columns: repeat(2, 1fr); } }

.chef { border-top: 1px solid var(--rule); padding-top: 1.1rem; }
.chef__where { color: var(--ink-faint); display: block; margin-bottom: 0.6rem; }
.chef__name { font-size: var(--t-lg); margin-bottom: 0.5rem; }
.chef__cv { font-size: var(--t-sm); color: var(--ink-soft); margin-bottom: 0.9rem; }
.chef__sig {
  border-top: 1px dashed var(--rule);
  padding-top: 0.8rem;
  margin-bottom: 0.9rem;
}
.chef__sigTag { color: var(--flame); display: block; margin-bottom: 0.4rem; }
.chef__sigName { font-weight: 600; }
.chef__sigWhy { font-size: var(--t-sm); line-height: 1.5; color: var(--ink-soft); margin-top: 0.2rem; }

.chef__quote {
  margin: 0;
  font-size: var(--t-md);
  font-style: italic;
  line-height: 1.45;
  border-left: 3px solid var(--flame);
  padding-left: 1rem;
}

/* ---------------- prices ---------------- */

.tiers { display: grid; gap: 1.5rem; align-items: stretch; }
@media (min-width: 860px) { .tiers { grid-template-columns: repeat(3, 1fr); } }

.tier {
  background: var(--ground-lift);
  border: 1px solid var(--rule);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.tier--pick { border: 2px solid var(--flame); }
.tier__flag { color: var(--flame); display: block; }
.tier__name { font-size: var(--t-lg); }
.tier__price {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "wdth" 78;
  font-size: 3.2rem;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.tier__from { color: var(--ink-faint); }
.tier__unit { color: var(--ink-faint); display: block; margin-bottom: 0.5rem; }
.tier__list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 1.6rem;
  font-size: var(--t-sm);
}
.tier__list li {
  border-top: 1px dashed var(--rule);
  padding-top: 0.55rem;
  color: var(--ink-soft);
}
.tiers__foot {
  margin-top: 1.75rem;
  font-family: var(--mono);
  font-size: var(--t-sm);
  color: var(--ink-faint);
}

/* ---------------- service levels ---------------- */

.levels__scroll {
  overflow-x: auto;
  border-top: 2px solid var(--ink);
  /* The table's min-width is wider than a phone, and overflow-x alone does not
     stop it extending the document's scroll width — the page could be swiped
     sideways into empty space. Containment keeps the scrolling inside this box,
     which is what the table-in-its-own-scroller rule intends. */
  contain: paint;
}
.levels {
  width: 100%;
  min-width: 52rem;
  border-collapse: collapse;
  text-align: left;
}
.levels__cap {
  caption-side: top;
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--ink-faint);
  text-align: left;
  padding-bottom: 0.9rem;
}
.levels th,
.levels td {
  padding: 0.9rem 1rem;
  border-bottom: 1px dashed var(--rule);
  vertical-align: top;
}
.levels thead th {
  border-bottom: 1px solid var(--rule-hard);
  padding-top: 1.3rem;
  padding-bottom: 1.2rem;
}
.levels__corner {
  font-family: var(--mono);
  font-weight: 400;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--ink-faint);
  width: 32%;
}
.levels__name {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "wdth" 82;
  font-size: var(--t-lg);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.levels__add { display: block; margin-top: 0.45rem; color: var(--flame); }
.levels tbody th {
  font-family: var(--body);
  font-weight: 400;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-soft);
}
.levels tbody td { text-align: center; }

.mark {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  background: var(--flame);
  margin-top: 0.35rem;
}
.mark--no {
  width: 1rem;
  height: 1.5px;
  background: var(--rule-hard);
  margin-top: 0.7rem;
}

.levels__best th,
.levels__best td {
  border-bottom: 0;
  padding-top: 1.4rem;
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--ink);
}
.levels__best td { text-align: left; }

.levels__notes {
  display: grid;
  gap: 1.1rem;
  margin-top: 2rem;
  max-width: 68ch;
}
.levels__note { font-size: var(--t-sm); line-height: 1.55; color: var(--ink-soft); }
.levels__noteTag {
  color: var(--flame);
  margin-inline-end: 0.6rem;
}
.levels__note strong { color: var(--ink); font-weight: 600; }

/* ---------------- cook for us ---------------- */

.deep__lede {
  font-size: var(--t-md);
  line-height: 1.55;
  margin-top: 1.2rem;
  max-width: 56ch;
  color: color-mix(in srgb, var(--rim-ink) 84%, transparent);
}
.perks {
  display: grid;
  gap: 1.5rem;
  margin-block: 2.5rem;
}
@media (min-width: 620px) { .perks { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .perks { grid-template-columns: repeat(4, 1fr); } }

.perk { border-top: 1px solid color-mix(in srgb, var(--rim-ink) 35%, transparent); padding-top: 0.9rem; }
.perk__fig {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "wdth" 80;
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--flame);
  margin-bottom: 0.6rem;
  font-variant-numeric: tabular-nums;
}
.perk__txt { font-size: var(--t-sm); line-height: 1.5; color: color-mix(in srgb, var(--rim-ink) 76%, transparent); }
.deep__note {
  margin-top: 1.3rem;
  font-family: var(--mono);
  font-size: var(--t-sm);
  color: color-mix(in srgb, var(--rim-ink) 62%, transparent);
}

/* ---------------- postcode checker ---------------- */

.checker { max-width: 44rem; }
.checker__label { color: var(--ink-faint); display: block; margin-bottom: 0.6rem; }
.checker__row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.checker__input {
  flex: 1 1 14rem;
  font-family: var(--mono);
  font-size: var(--t-md);
  text-transform: uppercase;
  padding: 0.9rem 1rem;
  background: var(--ground-lift);
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.checker__input::placeholder { color: var(--ink-faint); text-transform: none; }
.checker__out {
  margin-top: 1.1rem;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--ink-soft);
  border-left: 3px solid var(--rule-hard);
  padding-left: 1rem;
  min-height: 3rem;
}
.checker__out[data-state="yes"] { border-left-color: var(--rim); color: var(--ink); }
.checker__out[data-state="no"]  { border-left-color: var(--flame); color: var(--ink); }
.checker__out strong { font-family: var(--display); font-weight: 800; font-size: var(--t-lg); display: block; margin-bottom: 0.2rem; font-variation-settings: "wdth" 82; }

/* --- launch notification signup --------------------------------------
   Ships hidden; notify.js reveals it only when an endpoint is configured.
   Reuses .checker__input and .checker__out so there is one input treatment
   on the page rather than two that drift apart. */
.notify {
  max-width: 44rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}
.notify__head { margin-bottom: 1.4rem; }
.notify__h {
  font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 82;
  font-size: var(--t-xl); line-height: 1.05; letter-spacing: -0.02em;
  margin: 0.5rem 0 0.6rem;
}
.notify__sub { color: var(--ink-soft); max-width: 42ch; }
.notify__row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 1.1rem; }
.notify__field { flex: 1 1 16rem; min-width: 0; }
.notify__field--pc { flex: 0 1 9rem; }
.notify__opt { color: var(--ink-faint); text-transform: none; letter-spacing: 0; }
.notify__consent {
  display: flex; gap: 0.7rem; align-items: flex-start;
  font-size: var(--t-sm); line-height: 1.5; color: var(--ink-soft);
  margin-bottom: 1.2rem; cursor: pointer; max-width: 46ch;
}
/* Big enough to hit on a phone, and never pre-ticked: a pre-ticked consent
   box is not consent under PECR. */
.notify__consent input { margin-top: 0.15rem; width: 1.1rem; height: 1.1rem; flex: none; accent-color: var(--flame); }
.notify__acts { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.notify__small { font-size: var(--t-xs); color: var(--ink-soft); max-width: 30ch; }
.notify__small a { color: var(--flame); }
.notify__form .checker__out { margin-top: 1.1rem; }


/* ---------------- gift block (prices section) ---------------- */

.gift {
  background: var(--ground-lift);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--flame);
  padding: 1.3rem 1.5rem;
  margin-top: 1.75rem;
}
.gift--auction { margin-top: 1rem; }
.gift__body { font-size: var(--t-base); line-height: 1.55; max-width: 68ch; margin-top: 0.6rem; }
.gift__small { font-size: var(--t-sm); color: var(--ink-faint); line-height: 1.5;
  margin-top: 0.7rem; max-width: 68ch; }

/* ---------------- booking wizard (booking.html) ---------------- */

.wiz { max-width: 44rem; }

.wiz__rail { display: flex; gap: 0.5rem; margin-bottom: 2rem; }
.wiz__pip {
  width: 1.9rem; height: 1.9rem;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: var(--t-xs);
  border: 1.5px solid var(--rule-hard); color: var(--ink-faint);
}
.wiz__pip.is-now  { border-color: var(--flame); color: var(--flame-ink); background: var(--flame); }
.wiz__pip.is-done { border-color: var(--ink); color: var(--ink); }

.wiz__step { border: 0; padding: 0; margin: 0; min-width: 0; }
.wiz__legend {
  font-family: var(--display); font-weight: 800;
  font-variation-settings: "wdth" 82;
  font-size: var(--t-xl); line-height: 1.05; letter-spacing: -0.02em;
  padding: 0; margin-bottom: 0.9rem; max-width: 24ch;
}
.wiz__legend:focus-visible { outline: 3px solid var(--flame); outline-offset: 4px; }
.wiz__giftNote { border-left: 3px solid var(--flame); padding-left: 1rem; }
.wiz__help { color: var(--ink-soft); font-size: var(--t-sm); margin-bottom: 1.4rem; max-width: 54ch; }
.wiz__label { display: block; color: var(--ink-faint); margin: 1.4rem 0 0.6rem; }
.wiz__input { width: 100%; }
.wiz__area { font-family: var(--body); text-transform: none; font-size: var(--t-base); }
.wiz__note { margin-top: 0.9rem; font-size: var(--t-sm); line-height: 1.55; color: var(--ink-soft);
  border-left: 3px solid var(--rule-hard); padding-left: 1rem; }
.wiz__note[data-state="yes"] { border-left-color: var(--rim); color: var(--ink); }
.wiz__note[data-state="no"]  { border-left-color: var(--flame); color: var(--ink); }

.wiz__opts { display: flex; flex-direction: column; gap: 0.75rem; }
.wiz__opts--row { flex-direction: row; flex-wrap: wrap; }
.wiz__opt { display: block; cursor: pointer; }
.wiz__opt--sm { flex: 1 1 8rem; }
.wiz__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.wiz__optIn {
  display: block; background: var(--ground-lift);
  border: 1.5px solid var(--rule); padding: 0.9rem 1.1rem;
  transition: border-color 0.14s ease, transform 0.14s ease;
}
.wiz__optIn strong { display: block; font-weight: 600; }
.wiz__optIn em { display: block; margin-top: 0.2rem; font-size: var(--t-sm);
  font-style: normal; color: var(--ink-soft); }
.wiz__opt:hover .wiz__optIn { border-color: var(--rule-hard); transform: translateY(-1px); }
.wiz__opt input:checked + .wiz__optIn { border-color: var(--flame); border-width: 2px; padding: calc(0.9rem - 0.5px) calc(1.1rem - 0.5px); }
.wiz__opt input:focus-visible + .wiz__optIn { outline: 3px solid var(--flame); outline-offset: 3px; }

.wiz__sub { border: 0; padding: 1.6rem 0 0; margin: 0; min-width: 0; }
.wiz__subLegend { color: var(--ink-faint); padding: 0; margin-bottom: 0.8rem; }

.wiz__acts { display: flex; gap: 0.9rem; margin-top: 2rem; flex-wrap: wrap; }
.wiz__running { margin-top: 1rem; font-family: var(--mono); font-size: var(--t-sm);
  color: var(--ink-soft); line-height: 1.6; }

.wiz__who { border-top: 3px solid var(--flame); padding-top: 1.1rem; margin-bottom: 1.8rem; }
.wiz__whoTag { color: var(--flame); }
.wiz__whoName { font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 80;
  font-size: var(--t-2xl); line-height: 1; margin: 0.5rem 0 0.3rem; }
.wiz__whoWhere { display: block; color: var(--ink-faint); margin-bottom: 0.9rem; }
.wiz__whoSig { font-size: var(--t-sm); color: var(--ink-soft); margin-bottom: 0.9rem; }
.wiz__whoWhy { font-size: var(--t-md); line-height: 1.5; max-width: 52ch; }
.wiz__whoCaveat { margin-top: 0.9rem; font-size: var(--t-sm); color: var(--ink-soft);
  line-height: 1.55; max-width: 56ch; }

.wiz__price { background: var(--ground-lift); border: 1px solid var(--rule);
  border-top: 4px solid var(--ink); padding: 1.2rem 1.4rem; }
.wiz__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-block: 0.5rem; border-bottom: 1px dashed var(--rule);
  font-family: var(--mono); font-size: var(--t-sm); }
.wiz__row dt { color: var(--ink-soft); }
.wiz__row dd { font-variant-numeric: tabular-nums; }
.wiz__row--total { border-bottom: 0; border-top: 1px solid var(--rule-hard);
  margin-top: 0.4rem; padding-top: 0.8rem; }
.wiz__row--total dt { color: var(--ink); }
.wiz__row--total dd { font-family: var(--display); font-weight: 800;
  font-variation-settings: "wdth" 80; font-size: var(--t-xl); }

.wiz__warn { margin-top: 1.2rem; font-size: var(--t-sm); line-height: 1.55; color: var(--ink);
  border-left: 3px solid var(--flame); padding-left: 1rem; }
.wiz__foot { margin-top: 2.5rem; font-size: var(--t-sm); color: var(--ink-faint); }

/* ---------------- faq ---------------- */

.faq { display: flex; flex-direction: column; }
.faq__item { border-top: 1px solid var(--rule); padding-block: 1.35rem; }
.faq__item dt {
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: "wdth" 84;
  font-size: var(--t-lg);
  margin-bottom: 0.5rem;
}
.faq__item dd { color: var(--ink-soft); max-width: 62ch; }

/* ---------------- legal pages (terms.html) ---------------- */

.legal { max-width: 68ch; counter-reset: sec; }
.legal__h1 { font-size: var(--t-2xl); margin-bottom: 1.2rem; }
.legal .lede { margin-bottom: 2rem; }

.legal__notice {
  border-left: 3px solid var(--flame);
  background: var(--ground-lift);
  padding: 0.9rem 1.1rem;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 2rem;
}
.legal__notice strong { color: var(--flame); font-weight: 600; }

.legal__glance {
  background: var(--ground-lift);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--ink);
  padding: 1.3rem 1.4rem 0.9rem;
  margin-bottom: 2.5rem;
}
.legal__glanceHead { color: var(--ink); margin-bottom: 0.5rem; }
.legal__glance li {
  border-top: 1px dashed var(--rule);
  padding-block: 0.6rem;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-soft);
}

.legal__toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.3rem;
  font-family: var(--mono);
  font-size: var(--t-sm);
  margin-bottom: 1.5rem;
}
.legal__toc a { color: var(--ink-soft); text-decoration: none; }
.legal__toc a:hover { color: var(--flame); }

.legal__sec {
  border-top: 1px solid var(--rule);
  padding-block: 1.9rem;
  counter-increment: sec;
  scroll-margin-top: 5rem;
}
.legal__sec h2 {
  font-size: var(--t-lg);
  margin-bottom: 1rem;
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
}
.legal__num { color: var(--flame); font-variant-numeric: tabular-nums; }
.legal__sec p, .legal__sec li { color: var(--ink-soft); }
.legal__sec p + p { margin-top: 0.8rem; }
.legal__sec strong { color: var(--ink); font-weight: 600; }
.legal__sec a { color: var(--ink); }

.legal__sec ol {
  counter-reset: clause;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.legal__sec ol li {
  counter-increment: clause;
  position: relative;
  padding-left: 3rem;
}
.legal__sec ol li::before {
  content: counter(sec) "." counter(clause);
  position: absolute;
  left: 0;
  top: 0.45em;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* ---------------- investors index + document viewer ---------------- */

.inv__stats { display: grid; gap: 1.5rem; margin-top: 1rem; }
@media (min-width: 620px)  { .inv__stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .inv__stats { grid-template-columns: repeat(4, 1fr); } }
.inv__stat { border-top: 3px solid var(--flame); padding-top: 1rem; }
.inv__figure {
  font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 80;
  font-size: 3rem; line-height: 1; letter-spacing: -0.03em; color: var(--flame);
  font-variant-numeric: tabular-nums; margin-bottom: 0.6rem;
}
.inv__statTxt { font-size: var(--t-sm); line-height: 1.5; color: var(--ink-soft); }

.inv__nots { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.inv__nots li {
  border-top: 1px solid color-mix(in srgb, var(--rim-ink) 35%, transparent);
  padding-top: 0.9rem; font-size: var(--t-base); line-height: 1.55;
  color: color-mix(in srgb, var(--rim-ink) 82%, transparent); max-width: 68ch;
}
.inv__nots strong { color: var(--rim-ink); font-weight: 600; }
.inv__notsFoot {
  margin-top: 1.6rem; font-size: var(--t-md); line-height: 1.5;
  color: var(--rim-ink); max-width: 60ch;
}

.inv__group { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.inv__groupHead { border-top: 1px solid var(--ink); padding-top: 1rem; margin-bottom: 1.5rem; }
.inv__groupTag { color: var(--flame); }
.inv__groupBlurb { margin-top: 0.5rem; color: var(--ink-soft); max-width: 62ch; font-size: var(--t-sm); }
.inv__list { display: grid; gap: 1.5rem; }
@media (min-width: 760px)  { .inv__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .inv__list { grid-template-columns: repeat(3, 1fr); } }
.inv__doc {
  display: flex; flex-direction: column; gap: 0.6rem; text-decoration: none;
  background: var(--ground-lift); border: 1px solid var(--rule);
  padding: 1.3rem 1.4rem; transition: border-color 0.14s ease, transform 0.14s ease;
}
.inv__doc:hover { border-color: var(--flame); transform: translateY(-2px); }
.inv__docName {
  font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 82;
  font-size: var(--t-lg); line-height: 1.05; letter-spacing: -0.02em;
}
.inv__docBlurb { font-size: var(--t-sm); line-height: 1.55; color: var(--ink-soft); }
.inv__docMeta { margin-top: auto; padding-top: 0.5rem; }

/* --- the viewer --- */
.doc { padding-block: clamp(2rem, 4vw, 3rem); }
.doc__in { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
@media (min-width: 1000px) { .doc__in { grid-template-columns: 16rem 1fr; } }
.doc__rail { position: sticky; top: 5rem; max-height: calc(100vh - 7rem); overflow-y: auto; }
.doc__railTag { color: var(--flame); cursor: pointer; }
.doc__tocBox summary::-webkit-details-marker { display: none; }
.doc__tocBox summary { list-style: none; }
/* The closed state gets an affordance; the open sidebar on desktop does not
   need one, and doc-view.js opens it there. */
.doc__tocBox:not([open]) summary::after { content: " +"; }
@media (min-width: 1000px) { .doc__tocBox summary { cursor: default; } }
.doc__toc { display: flex; flex-direction: column; margin-top: 0.8rem; }
.doc__tocLink {
  text-decoration: none; color: var(--ink-soft); font-size: var(--t-sm);
  line-height: 1.35; padding: 0.35rem 0 0.35rem 0.7rem;
  border-left: 2px solid var(--rule);
}
.doc__tocLink:hover { color: var(--flame); border-left-color: var(--flame); }
.doc__tocLink--h3 { padding-left: 1.5rem; font-size: var(--t-xs); }
.doc__main { min-width: 0; }
.doc__h1 {
  font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 80;
  font-size: var(--t-2xl); line-height: 1; letter-spacing: -0.02em; margin-bottom: 0.7rem;
}
.doc__meta { font-family: var(--mono); font-size: var(--t-sm); color: var(--ink-faint); margin-bottom: 1.5rem; }

/* Rendered markdown. The base sheet strips list styling, so it comes back here. */
.doc__body {
  font-size: var(--t-base); line-height: 1.62;
  /* The research documents cite full legislation.gov.uk URLs. Each is one
     unbroken word wider than a phone, and without this the page scrolls
     sideways rather than the word wrapping. */
  overflow-wrap: break-word;
}
.doc__body a { overflow-wrap: anywhere; }
.doc__body h2, .doc__body h3, .doc__body h4 {
  font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 82;
  line-height: 1.05; letter-spacing: -0.015em; scroll-margin-top: 5.5rem;
}
.doc__body h2 { font-size: var(--t-xl); margin: 2.4rem 0 0.9rem; border-top: 1px solid var(--rule); padding-top: 1.4rem; }
.doc__body h3 { font-size: var(--t-lg); margin: 1.8rem 0 0.7rem; }
.doc__body h4 { font-size: var(--t-md); margin: 1.4rem 0 0.5rem; }
.doc__body p { margin-bottom: 1rem; max-width: 74ch; }
.doc__body ul, .doc__body ol { margin: 0 0 1rem 1.4rem; max-width: 74ch; }
.doc__body ul li { list-style: disc; margin-bottom: 0.4rem; }
.doc__body ol li { list-style: decimal; margin-bottom: 0.4rem; }
.doc__body a { color: var(--flame); }
.doc__body strong { font-weight: 600; }
.doc__body hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }
.doc__body blockquote {
  border-left: 3px solid var(--flame); padding-left: 1rem; margin: 0 0 1rem;
  color: var(--ink-soft); font-style: italic;
}
.doc__body code {
  font-family: var(--mono); font-size: 0.86em;
  background: var(--ground-sunk); padding: 0.1em 0.3em;
}
.doc__body pre {
  background: var(--ground-sunk); border: 1px solid var(--rule);
  padding: 1rem; overflow-x: auto; margin-bottom: 1rem;
}
.doc__body pre code { background: none; padding: 0; font-size: var(--t-sm); }
.doc__body table {
  width: 100%; border-collapse: collapse; margin-bottom: 1.2rem;
  font-size: var(--t-sm); display: block; overflow-x: auto;
}
.doc__body th, .doc__body td {
  border-bottom: 1px dashed var(--rule); padding: 0.55rem 0.8rem;
  text-align: left; vertical-align: top;
}
.doc__body thead th {
  border-bottom: 1px solid var(--rule-hard);
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: var(--t-xs); font-weight: 400; color: var(--ink-faint);
  white-space: nowrap;
}
.doc__diagram {
  background: var(--ground-lift); border: 1px solid var(--rule);
  padding: 1.2rem; margin-bottom: 1.2rem; overflow-x: auto; text-align: center;
}
.doc__diagram svg { max-width: 100%; height: auto; }
/* If the diagram library cannot load, the source stays readable rather than blank. */
.doc__diagram--raw { text-align: left; white-space: pre; font-family: var(--mono); font-size: var(--t-xs); }

/* ---------------- footer ---------------- */

.foot {
  background: var(--rim);
  color: var(--rim-ink);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.foot__in { display: flex; flex-direction: column; gap: 2rem; }
.foot__line { font-family: var(--mono); font-size: var(--t-sm); margin-top: 0.9rem; color: color-mix(in srgb, var(--rim-ink) 72%, transparent); }
.foot__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  font-family: var(--mono);
  font-size: var(--t-sm);
  padding-top: 1.75rem;
  border-top: 1px solid color-mix(in srgb, var(--rim-ink) 30%, transparent);
}
.foot__nav a { text-decoration: none; color: color-mix(in srgb, var(--rim-ink) 80%, transparent); }
.foot__nav a:hover { color: var(--flame); }
.foot__small {
  font-family: var(--mono);
  font-size: var(--t-xs);
  line-height: 1.7;
  color: color-mix(in srgb, var(--rim-ink) 55%, transparent);
}

/* ---------------- cookie consent ---------------- */
/* Injected by assets/consent.js, and only when analytics is configured and
   no choice has been recorded yet. Uses existing tokens only. */
.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--ground-lift);
  border-top: 2px solid var(--ink);
}
.consent__in {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 1.1rem 1.25rem;
  display: flex;
  gap: 1.25rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.consent__text {
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
  max-width: 62ch;
}
.consent__link { color: var(--flame); }
.consent__actions {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}
.consent__btn {
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  padding: 0.7rem 1.15rem;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.consent__btn:hover { border-color: var(--flame); color: var(--flame); }
/* Accept and reject are deliberately identical in weight. The ICO expects
   refusing to be as easy as agreeing, and a flame-filled "Accept" beside an
   outlined "No thanks" is a nudge. The modifier is kept as a JS/test hook. */
.consent__btn--yes { }
@media (max-width: 700px) {
  .consent__in { flex-direction: column; align-items: flex-start; }
  .consent__actions { width: 100%; }
  .consent__btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .btn:hover { transform: none; }
}