/* June Field - site styles. Brand reference: BRAND.md */

:root {
  --jf-ink: oklch(0.17 0.008 75);
  --jf-ink-2: oklch(0.21 0.01 75);
  --jf-ink-3: oklch(0.26 0.012 75);
  --jf-gold: #c9a86a;
  --jf-gold-light: #e1c58e;
  --jf-gold-deep: #8d803c;
  --jf-cream: #f5ebd8;
  --jf-text: oklch(0.93 0.02 85);
  --jf-muted: oklch(0.74 0.02 80);
  --jf-line: color-mix(in oklch, var(--jf-gold) 28%, transparent);
  --jf-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --jf-sans: 'Raleway', 'Segoe UI', sans-serif;
  --jf-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --jf-wrap: min(1240px, 100% - 3rem);
  --jf-header-h: 5.25rem;
}

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

html { scroll-behavior: smooth; }

body.jf {
  margin: 0;
  background: var(--jf-ink);
  color: var(--jf-text);
  font-family: var(--jf-sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Fine grain over the whole page, so the dark background is never flat. */
body.jf::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

:where(.jf) img { max-width: 100%; height: auto; display: block; }
:where(.jf) a { color: inherit; }
:where(.jf) :is(h1, h2, h3) { text-wrap: balance; font-family: var(--jf-serif); font-weight: 500; line-height: 1.1; margin: 0 0 0.6em; color: var(--jf-cream); }
:where(.jf) h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3.1rem); }
:where(.jf) h3 { font-size: clamp(1.45rem, 1.3rem + 0.6vw, 1.8rem); }
:where(.jf) p { margin: 0 0 1.1em; }
/* Large display lines are styled paragraphs. The real h1/h2 on each section
   is the small eyebrow above it, which carries the words people search for. */
.jf-display { text-wrap: balance; font-family: var(--jf-serif); font-weight: 500; line-height: 1.1; margin: 0 0 0.6em; color: var(--jf-cream); font-size: clamp(2rem, 1.5rem + 2vw, 3.1rem); }

.jf-skip { position: absolute; left: -999px; top: 0; background: var(--jf-gold); color: var(--jf-ink); padding: 0.6rem 1rem; z-index: 200; }
.jf-skip:focus { left: 1rem; top: 1rem; }

.jf :focus-visible { outline: 2px solid var(--jf-gold-light); outline-offset: 3px; }

.jf-eyebrow {
  font-family: var(--jf-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--jf-gold);
  margin-bottom: 1rem;
}

/* Buttons and links */
.jf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.8rem 1.6rem;
  font-family: var(--jf-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--jf-gold);
  transition: transform 0.4s var(--jf-ease), background-color 0.3s, color 0.3s, box-shadow 0.4s var(--jf-ease);
}
.jf-btn:hover { transform: translateY(-2px); }
.jf-btn--gold { background: var(--jf-gold); color: var(--jf-ink); box-shadow: 0 10px 30px -12px color-mix(in oklch, var(--jf-gold) 70%, transparent); }
.jf-btn--gold:hover { background: var(--jf-gold-light); }
.jf-btn--ghost { background: transparent; color: var(--jf-gold-light); }
.jf-btn--ghost:hover { background: color-mix(in oklch, var(--jf-gold) 14%, transparent); }

.jf-link {
  display: inline-block;
  color: var(--jf-gold-light);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 0.2rem;
  background: linear-gradient(var(--jf-gold), var(--jf-gold)) left bottom / 100% 1px no-repeat;
  transition: background-size 0.4s var(--jf-ease);
}
.jf-link:hover { background-size: 40% 1px; }

.jf-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* Header */
.jf-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklch, var(--jf-ink) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--jf-line);
}
.jf-header__bar {
  width: var(--jf-wrap);
  margin-inline: auto;
  height: var(--jf-header-h);
  display: flex;
  align-items: center;
  gap: 2rem;
}
.jf-header__logo img { width: 180px; height: auto; }
.jf-header__cta { margin-left: auto; }

.jf-nav { margin-left: auto; }
.jf-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem; }
.jf-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0.9rem;
  background: none;
  border: 0;
  color: var(--jf-text);
  font: 500 0.95rem/1 var(--jf-sans);
  text-decoration: none;
  cursor: pointer;
  position: relative;
}
.jf-nav__link::after {
  content: '';
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.2rem;
  height: 1px;
  background: var(--jf-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--jf-ease);
}
.jf-nav__link:hover::after,
.jf-nav__item.is-open > .jf-nav__link::after,
.jf-nav__link[aria-current]::after { transform: scaleX(1); }
/* Items with a panel: the label links to the overview page, the chevron
   button beside it opens the panel (views/partials/header.blade.php). */
.jf-nav__item { display: flex; align-items: center; }
.jf-nav__item.has-panel > .jf-nav__link { padding-right: 0.2rem; }
.jf-nav__item.has-panel > .jf-nav__link::after { right: 0.2rem; }
.jf-nav__toggle { display: inline-grid; place-items: center; width: 1.6rem; height: 2.4rem; margin-right: 0.5rem; padding: 0; background: none; border: 0; color: var(--jf-gold); cursor: pointer; }
.jf-nav__toggle:hover { color: var(--jf-gold-light); }
.jf-nav__chevron { transition: transform 0.4s var(--jf-ease); color: inherit; }
.jf-nav__toggle[aria-expanded='true'] .jf-nav__chevron { transform: rotate(180deg); }
.jf-nav__cta-mobile { display: none; }

/* Mega menu panel */
.jf-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--jf-ink-2);
  border-bottom: 1px solid var(--jf-line);
  box-shadow: 0 40px 60px -30px oklch(0.05 0 0 / 0.8);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.35s var(--jf-ease), transform 0.45s var(--jf-ease), visibility 0s linear 0.35s;
}
.jf-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.35s var(--jf-ease), transform 0.45s var(--jf-ease), visibility 0s;
}
/* Mega menu content. Zones divided by hairlines, a footer bar per panel. */
.jf-mega { width: var(--jf-wrap); margin-inline: auto; }
.jf-mega__grid { display: grid; gap: 0; padding: 2.25rem 0 2rem; }
.jf-mega__grid--readings { grid-template-columns: 1.15fr 1fr 1fr; }
.jf-mega__grid--events { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
.jf-mega__grid--about { grid-template-columns: 0.9fr 1.35fr minmax(0, 0.95fr); }
.jf-mega__grid--reviews { grid-template-columns: 1fr 1.3fr 0.8fr; }
.jf-mega__zone { padding-inline: 2.25rem; border-left: 1px solid var(--jf-line); min-width: 0; }
.jf-mega__zone:first-child { padding-left: 0; border-left: 0; }
.jf-mega__grid > :last-child { padding-right: 0; }
.jf-mega__heading { margin: 0 0 1.1rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--jf-gold); }
.jf-mega ul { list-style: none; margin: 0; padding: 0; display: grid; }
.jf-mega a { text-decoration: none; color: inherit; }
.jf-mega__title { display: block; font-family: var(--jf-serif); font-size: 1.4rem; line-height: 1.2; color: var(--jf-cream); }
.jf-mega__text { display: block; margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--jf-muted); }
.jf-mega__go { display: inline-flex; gap: 0.4rem; margin-top: 0.7rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--jf-gold-light); }
.jf-mega__go span { transition: transform 0.4s var(--jf-ease); }
.jf-mega a:hover .jf-mega__go span { transform: translateX(4px); }
.jf-mega__all { display: inline-block; margin-top: 1rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--jf-gold-light); border-bottom: 1px solid var(--jf-line); padding-bottom: 0.2rem; }
.jf-mega__all:hover { border-bottom-color: var(--jf-gold); }

/* Reading options: two stacked tiles. */
.jf-mega__options { gap: 0.75rem; }
.jf-mega__option { display: block; padding: 1.1rem 1.25rem; border: 1px solid var(--jf-line); background: color-mix(in oklch, var(--jf-ink-3) 60%, transparent); transition: border-color 0.3s, background-color 0.3s; }
.jf-mega__option:hover { border-color: var(--jf-gold); background: color-mix(in oklch, var(--jf-gold) 7%, var(--jf-ink-2)); }
.jf-mega__facts { display: flex; flex-wrap: wrap; gap: 0.2rem 0; margin-top: 0.35rem; font-size: 0.84rem; color: var(--jf-muted); }
.jf-mega__facts span + span::before { content: ''; display: inline-block; width: 3px; height: 3px; margin: 0 0.6rem 0.2rem; border-radius: 50%; background: var(--jf-gold); vertical-align: middle; }

/* In-person dates: a compact table-like list. */
.jf-mega__dates li + li { border-top: 1px solid color-mix(in oklch, var(--jf-gold) 14%, transparent); }
.jf-mega__dates a { display: grid; grid-template-columns: 7.6rem minmax(0, 1fr) auto; align-items: baseline; gap: 0.75rem; padding: 0.55rem 0; transition: color 0.3s; }
.jf-mega__when { font-size: 0.8rem; color: var(--jf-muted); font-variant-numeric: lining-nums tabular-nums; }
.jf-mega__dates strong { font-family: var(--jf-serif); font-size: 1.12rem; font-weight: 500; color: var(--jf-cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jf-mega__state { font-size: 0.78rem; color: var(--jf-gold-light); }
.jf-mega__dates .is-full strong, .jf-mega__dates .is-full .jf-mega__state { color: var(--jf-muted); }
.jf-mega__dates .is-full .jf-mega__state { font-style: italic; }
.jf-mega__dates a:hover strong { color: var(--jf-gold-light); }

/* Plain links with a note underneath. */
.jf-mega__links { gap: 0.15rem; }
.jf-mega__links--two { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
.jf-mega__links a { display: grid; gap: 0.1rem; padding: 0.6rem 0.85rem; margin-inline: -0.85rem; border-left: 1px solid transparent; transition: background-color 0.3s, border-color 0.3s; }
.jf-mega__links a:hover { background: color-mix(in oklch, var(--jf-gold) 7%, transparent); border-left-color: var(--jf-gold); }
.jf-mega__links strong { font-family: var(--jf-serif); font-size: 1.18rem; font-weight: 500; line-height: 1.25; color: var(--jf-cream); }
.jf-mega__links small { font-size: 0.8rem; line-height: 1.45; color: var(--jf-muted); }

/* Shows: date, town and venue, price, ticket link. */
.jf-mega__shows li { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr) auto auto; align-items: center; gap: 1.1rem; padding: 0.7rem 0; }
.jf-mega__shows li + li { border-top: 1px solid color-mix(in oklch, var(--jf-gold) 14%, transparent); }
.jf-mega__day { display: grid; justify-items: center; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--jf-muted); line-height: 1.3; }
.jf-mega__day b { font-family: var(--jf-serif); font-size: 1.65rem; font-weight: 500; line-height: 1; color: var(--jf-gold-light); }
.jf-mega__show { display: grid; gap: 0.1rem; min-width: 0; }
.jf-mega__show strong { display: flex; align-items: center; gap: 0.65rem; font-family: var(--jf-serif); font-size: 1.22rem; font-weight: 500; color: var(--jf-cream); }
.jf-mega__show em { font-family: var(--jf-sans); font-style: normal; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--jf-ink); background: var(--jf-gold); padding: 0.2rem 0.45rem; }
.jf-mega__show small { font-size: 0.8rem; color: var(--jf-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jf-mega__show:hover strong { color: var(--jf-gold-light); }
.jf-mega__price { display: grid; text-align: right; font-family: var(--jf-serif); font-size: 1.2rem; line-height: 1.05; color: var(--jf-cream); }
.jf-mega__price small { font-family: var(--jf-sans); font-size: 0.66rem; color: var(--jf-muted); }
.jf-mega__tickets { padding: 0.5rem 0.9rem; border: 1px solid var(--jf-line); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--jf-gold-light); transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
.jf-mega__tickets:hover, .is-next .jf-mega__tickets { background: var(--jf-gold); border-color: var(--jf-gold); color: var(--jf-ink); }

/* Feature card: photo with a caption block, used by Live Events and About. */
.jf-mega__feature { align-self: start; display: grid; grid-template-rows: auto 1fr; margin-left: 2.25rem; border: 1px solid var(--jf-line); background: var(--jf-ink-3); overflow: hidden; }
.jf-mega__feature img { width: 100%; height: 10.5rem; object-fit: cover; object-position: center 30%; transition: transform 0.9s var(--jf-ease); }
.jf-mega__feature:hover img { transform: scale(1.04); }
.jf-mega__feature-body { position: relative; display: block; padding: 1.1rem 1.25rem 1.2rem; background: var(--jf-ink-3); }
.jf-mega__feature--uri img { height: 9.5rem; object-position: center 35%; }
.jf-mega__quote { display: block; margin-bottom: 0.4rem; font-family: var(--jf-serif); font-style: italic; font-size: 1.35rem; line-height: 1.2; color: var(--jf-cream); }

/* Reviews panel. */
.jf-mega__big { margin: 0 0 0.25rem; font-family: var(--jf-serif); font-size: 3.4rem; line-height: 1; color: var(--jf-cream); }
.jf-mega__big span { font-size: 1.3rem; color: var(--jf-muted); }
.jf-mega__grid--reviews .jf-rating { margin-top: 1.1rem; }
.jf-mega .jf-rating__text { white-space: nowrap; }
.jf-mega__quotes { gap: 1.1rem; }
.jf-mega__quotes li { padding-left: 1.1rem; border-left: 2px solid var(--jf-gold); }
.jf-mega__quotes blockquote { margin: 0 0 0.35rem; font-family: var(--jf-serif); font-style: italic; font-size: 1.22rem; line-height: 1.35; color: var(--jf-text); }
.jf-mega__quotes small { font-size: 0.78rem; color: var(--jf-muted); }
.jf-mega__quotes b { font-weight: 600; letter-spacing: 0.06em; color: var(--jf-gold); }

/* Panel footer bar. */
.jf-mega__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: 1rem 0 1.25rem; border-top: 1px solid var(--jf-line); }
.jf-mega__bar p { margin: 0; font-size: 0.84rem; color: var(--jf-muted); }
.jf-mega__bar .jf-rating { margin-top: 0; }
.jf-mega__bar .jf-mega__all { margin-top: 0; }
.jf-mega__bar .jf-btn { min-height: 2.6rem; padding: 0.6rem 1.3rem; font-size: 0.72rem; }

/* Entrance: zones rise in sequence when a panel opens. */
.jf-panel.is-open .jf-mega__grid > * { animation: jf-rise 0.6s var(--jf-ease) both; }
.jf-panel.is-open .jf-mega__grid > :nth-child(2) { animation-delay: 0.06s; }
.jf-panel.is-open .jf-mega__grid > :nth-child(3) { animation-delay: 0.12s; }

/* Burger (mobile only) */
.jf-burger { display: none; width: 2.75rem; height: 2.75rem; background: none; border: 1px solid var(--jf-line); cursor: pointer; padding: 0.7rem; flex-direction: column; justify-content: space-between; }
.jf-burger span { display: block; height: 1px; background: var(--jf-gold-light); transition: transform 0.4s var(--jf-ease), opacity 0.3s; }
.jf-burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.jf-burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.jf-burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Hero */
.jf-hero {
  position: relative;
  min-height: min(88vh, 860px);
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.jf-hero__media { position: absolute; inset: 0; z-index: -2; }
.jf-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 20%; animation: jf-settle 2.4s var(--jf-ease) both; }
.jf-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 70% at 72% 40%, transparent 0%, color-mix(in oklch, var(--jf-ink) 35%, transparent) 60%, var(--jf-ink) 100%),
    linear-gradient(90deg, var(--jf-ink) 0%, color-mix(in oklch, var(--jf-ink) 85%, transparent) 35%, transparent 65%);
}
.jf-hero__copy { width: var(--jf-wrap); margin-inline: auto; padding: 5rem 0; }
.jf-hero__copy > * { max-width: 34rem; }
.jf-hero__name { font-size: clamp(3.6rem, 2.4rem + 6vw, 7.5rem); font-weight: 500; letter-spacing: -0.01em; margin-bottom: 0.25em; }
.jf-hero__lede { font-family: var(--jf-serif); font-style: italic; font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2.1rem); line-height: 1.3; color: var(--jf-gold-light); margin-bottom: 2rem; }
.jf-hero__press { margin-top: 2.75rem; font-size: 0.85rem; color: var(--jf-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; }
.jf-hero__press span { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--jf-gold); display: inline-flex; align-items: center; gap: 0.9rem; }
.jf-hero__press span::after { content: ''; width: 2.5rem; height: 1px; background: var(--jf-line); }

/* Staggered entrance. Hidden state lives in the keyframes, not base CSS. */
.jf-rise { animation: jf-rise 1.1s var(--jf-ease) both; animation-delay: calc(var(--d, 0) * 120ms + 150ms); }
@keyframes jf-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes jf-settle { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }

/* Award seal and press logos. Logos are shown in one tint: grey, inverted
   and warmed, so boxed logos (Daily Record, The Sun, STB) stay legible. */
.jf-press { border-top: 1px solid var(--jf-line); background: var(--jf-ink-2); }
.jf-press__inner { width: var(--jf-wrap); margin-inline: auto; padding-block: 2.75rem; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.jf-seal { position: relative; width: 9.5rem; aspect-ratio: 1; color: var(--jf-gold); }
.jf-seal__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: jf-spin 60s linear infinite; }
.jf-seal__ring text { font-family: var(--jf-sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; fill: currentColor; }
.jf-seal__centre { position: absolute; inset: 22%; display: grid; place-items: center; align-content: center; gap: 0.1rem; text-align: center; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklch, var(--jf-gold) 16%, transparent), transparent 70%); }
.jf-seal__laurel { width: 2.4rem; color: var(--jf-gold-light); }
.jf-seal__centre span { font-family: var(--jf-serif); font-style: italic; font-size: 0.98rem; line-height: 1.05; color: var(--jf-cream); }
@keyframes jf-spin { to { transform: rotate(360deg); } }
.jf-press__groups { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 3vw, 3rem); }
.jf-press__group + .jf-press__group { padding-left: clamp(1.5rem, 3vw, 3rem); border-left: 1px solid var(--jf-line); }
.jf-press__label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--jf-muted); margin-bottom: 1.1rem; }
.jf-press ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem clamp(1.25rem, 2vw, 1.75rem); }
.jf-press li img { width: auto; height: 1.6rem; filter: grayscale(1) invert(1) sepia(0.4) brightness(0.92); opacity: 0.8; transition: opacity 0.3s; }
.jf-press li img:hover { opacity: 1; }
.jf-press .is-mail { height: 1.55rem; }
.jf-press .is-scotsman { height: 1.45rem; }
.jf-press .is-post { height: 1.45rem; }
.jf-press .is-record { height: 2rem; }
.jf-press .is-sun { height: 1.8rem; }
.jf-press .is-stv { height: 2.1rem; }
.jf-press .is-stb { height: 2rem; }
.jf-press .is-bbc { height: 1.35rem; }

/* Why people come to June: rotating loved one + matching real review. */
.jf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.jf-missing { position: relative; overflow: hidden; isolation: isolate; border-top: 1px solid var(--jf-line); background: radial-gradient(70% 90% at 50% 40%, color-mix(in oklch, var(--jf-gold) 7%, transparent), transparent 70%), var(--jf-ink); }
.jf-missing__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.jf-missing__glow span { position: absolute; border-radius: 50%; filter: blur(70px); background: radial-gradient(circle, color-mix(in oklch, var(--jf-gold) 36%, transparent) 0%, transparent 70%); animation: jf-drift 24s ease-in-out infinite alternate; }
.jf-missing__glow span:nth-child(1) { width: 32rem; height: 32rem; left: -10rem; top: -8rem; opacity: 0.5; }
.jf-missing__glow span:nth-child(2) { width: 24rem; height: 24rem; right: -4rem; top: 25%; opacity: 0.4; animation-duration: 30s; animation-delay: -8s; }
.jf-missing__glow span:nth-child(3) { width: 18rem; height: 18rem; left: 45%; bottom: -10rem; opacity: 0.3; animation-duration: 36s; animation-delay: -14s; }
.jf-missing__inner { width: var(--jf-wrap); max-width: 64rem; margin-inline: auto; padding-block: clamp(5.5rem, 4rem + 6vw, 10rem); text-align: center; }
.jf-missing__line { font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.6rem); line-height: 1.12; margin-bottom: 2.75rem; text-wrap: balance; }
.jf-missing__words { display: inline-grid; vertical-align: bottom; text-align: left; }
.jf-missing__word { grid-area: 1 / 1; font-style: italic; color: var(--jf-gold-light); opacity: 0; transform: translateY(0.45em); filter: blur(6px); transition: opacity 0.9s var(--jf-ease), transform 0.9s var(--jf-ease), filter 0.9s var(--jf-ease); }
.jf-missing__word.is-active { opacity: 1; transform: none; filter: blur(0); }
.jf-missing__word.is-leaving { opacity: 0; transform: translateY(-0.45em); filter: blur(6px); }
.jf-missing__quotes { display: grid; max-width: 46rem; margin: 0 auto 2.25rem; }
.jf-missing__quote { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(-8px); transition: opacity 0.35s ease-out, transform 0.35s ease-out; }
.jf-missing__quote.is-active { opacity: 1; transform: none; transition: opacity 0.9s var(--jf-ease) 0.45s, transform 0.9s var(--jf-ease) 0.45s; }
.jf-missing__quote blockquote { margin: 0 0 1rem; }
.jf-missing__quote p { font-family: var(--jf-serif); font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.8rem); line-height: 1.45; color: var(--jf-text); margin: 0; }
.jf-missing__quote p::before { content: '\201C'; color: var(--jf-gold); }
.jf-missing__quote p::after { content: '\201D'; color: var(--jf-gold); }
.jf-missing__quote figcaption { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--jf-muted); }
.jf-missing__dots { display: flex; flex-wrap: wrap; gap: 0.6rem 1.1rem; margin-bottom: 3.5rem; }
.jf-missing__dots button { display: grid; justify-items: center; gap: 0.55rem; padding: 0.25rem; background: none; border: 0; cursor: pointer; color: var(--jf-muted); transition: color 0.4s; }
.jf-missing__badge { position: relative; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: color-mix(in oklch, var(--jf-ink) 70%, transparent); transition: background-color 0.4s, transform 0.5s var(--jf-ease); }
.jf-missing__icon { width: 1.75rem; height: 1.75rem; }
.jf-missing__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.jf-missing__ring circle { fill: none; stroke-width: 1; }
.jf-missing__track { stroke: color-mix(in oklch, var(--jf-gold) 28%, transparent); }
.jf-missing__progress { stroke: var(--jf-gold-light); stroke-dasharray: 151; stroke-dashoffset: 151; }
.jf-missing__label { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.jf-missing__dots button:hover { color: var(--jf-gold-light); }
.jf-missing__dots button:hover .jf-missing__badge { transform: translateY(-2px); }
.jf-missing__dots [aria-pressed='true'] { color: var(--jf-gold-light); }
.jf-missing__dots [aria-pressed='true'] .jf-missing__badge { background: color-mix(in oklch, var(--jf-gold) 14%, var(--jf-ink)); }
.jf-missing__dots [aria-pressed='true'] .jf-missing__progress { animation: jf-countdown var(--jf-missing-interval, 6s) linear forwards; }
.jf-missing.is-paused .jf-missing__dots [aria-pressed='true'] .jf-missing__progress { animation-play-state: paused; }
@keyframes jf-countdown { from { stroke-dashoffset: 151; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .jf-missing__dots [aria-pressed='true'] .jf-missing__progress { stroke-dashoffset: 0; } }
.jf-missing__june { max-width: 34rem; margin: 0 auto 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--jf-line); }
.jf-missing__june p { font-family: var(--jf-serif); font-style: italic; font-size: 1.25rem; line-height: 1.5; color: var(--jf-gold-light); margin-bottom: 0.6rem; }
.jf-missing__june span { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--jf-gold); }
.jf-missing__actions { justify-content: center; }

/* Background: June on stage at a live show. The source photo is only
   692px wide, so it is toned, darkened and softened rather than shown sharp. */
.jf-missing__photo { position: absolute; inset: -3rem 0; z-index: -2; overflow: hidden; }
.jf-missing__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 45%; filter: grayscale(1) sepia(0.5) brightness(0.62) contrast(1.12) blur(1.5px); transform: scale(1.04); animation: jf-slowzoom 30s ease-in-out infinite alternate; }
.jf-missing__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--jf-ink) 0%, color-mix(in oklch, var(--jf-ink) 92%, transparent) 38%, color-mix(in oklch, var(--jf-ink) 35%, transparent) 72%, color-mix(in oklch, var(--jf-ink) 55%, transparent) 100%), linear-gradient(180deg, var(--jf-ink) 0%, var(--jf-ink) 6%, transparent 30%, transparent 72%, var(--jf-ink) 94%, var(--jf-ink) 100%); }
@keyframes jf-slowzoom { from { transform: scale(1.04); } to { transform: scale(1.14) translateX(-1.5%); } }
.jf-missing { background: var(--jf-ink); }
.jf-missing__inner { max-width: none; text-align: left; }
.jf-missing__inner > * { max-width: 44rem; }
.jf-missing__line { font-size: clamp(2.4rem, 1.6rem + 3.2vw, 4.4rem); }
.jf-missing__quotes { margin-left: 0; max-width: 40rem; }
.jf-missing__dots { justify-content: flex-start; margin-left: -0.25rem; }
.jf-missing__june { margin-left: 0; max-width: 34rem; }
.jf-missing__actions { justify-content: flex-start; }
.jf-missing.is-visible .jf-missing__inner > * { animation: jf-rise 1.1s var(--jf-ease) both; }
.jf-missing.is-visible .jf-missing__inner > :nth-child(2) { animation-delay: 0.12s; }
.jf-missing.is-visible .jf-missing__inner > :nth-child(3) { animation-delay: 0.3s; }
.jf-missing.is-visible .jf-missing__inner > :nth-child(n+4) { animation-delay: 0.45s; }

/* What happens in a reading: drifting candle-light glow, a gold line that
   draws across, steps that rise one by one. Content is visible without JS;
   the .is-visible class only runs the entrance. */
.jf-journey { position: relative; overflow: hidden; isolation: isolate; border-top: 1px solid var(--jf-line); background: var(--jf-ink); }
.jf-journey__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.jf-journey__glow span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; background: radial-gradient(circle, color-mix(in oklch, var(--jf-gold) 38%, transparent) 0%, transparent 70%); animation: jf-drift 22s ease-in-out infinite alternate; }
.jf-journey__glow span:nth-child(1) { width: 34rem; height: 34rem; left: -8rem; top: -10rem; }
.jf-journey__glow span:nth-child(2) { width: 26rem; height: 26rem; right: 8%; top: 30%; animation-duration: 28s; animation-delay: -6s; opacity: 0.4; }
.jf-journey__glow span:nth-child(3) { width: 20rem; height: 20rem; left: 40%; bottom: -12rem; animation-duration: 34s; animation-delay: -12s; opacity: 0.35; }
@keyframes jf-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6rem, 3rem) scale(1.15); } 100% { transform: translate(-3rem, 5rem) scale(0.95); } }
.jf-journey__inner { width: var(--jf-wrap); margin-inline: auto; padding-block: clamp(5rem, 3.5rem + 6vw, 9rem); }
.jf-journey__head { max-width: 40rem; margin: 0 auto 4.5rem; text-align: center; }
.jf-journey__head > p:last-child { font-family: var(--jf-serif); font-style: italic; font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem); line-height: 1.45; color: var(--jf-gold-light); }
.jf-journey__steps { position: relative; list-style: none; margin: 0 0 3.5rem; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; }
.jf-journey__steps::before { content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 2rem; height: 1px; background: linear-gradient(90deg, transparent, var(--jf-gold) 10%, var(--jf-gold) 90%, transparent); transform-origin: left; }
.jf-journey__steps li { position: relative; text-align: center; padding: 0 0.5rem; }
.jf-journey__mark { position: relative; display: grid; place-items: center; width: 4rem; height: 4rem; margin: 0 auto 1.75rem; border-radius: 50%; border: 1px solid var(--jf-gold); background: var(--jf-ink); font-family: var(--jf-serif); font-style: italic; font-size: 1.35rem; color: var(--jf-gold-light); }
.jf-journey__mark::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid color-mix(in oklch, var(--jf-gold) 30%, transparent); }
.jf-journey__steps h3 { font-size: 1.55rem; margin-bottom: 0.6rem; }
.jf-journey__steps p { color: var(--jf-muted); font-size: 0.95rem; margin: 0; }
.jf-journey__cta { display: table; margin-inline: auto; }

.jf-journey.is-visible .jf-journey__head { animation: jf-rise 1.1s var(--jf-ease) both; }
.jf-journey.is-visible .jf-journey__steps::before { animation: jf-draw 1.8s var(--jf-ease) 0.3s both; }
.jf-journey.is-visible .jf-journey__steps li { animation: jf-rise 1s var(--jf-ease) both; animation-delay: calc(0.45s + var(--i) * 0.28s); }
.jf-journey.is-visible .jf-journey__mark::after { animation: jf-halo 3.2s ease-in-out infinite; animation-delay: calc(1.4s + var(--i) * 0.4s); }
@keyframes jf-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes jf-draw-down { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes jf-halo { 0%, 100% { opacity: 0.35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }

/* Proof band: one slim row, gold hairline dividers, no boxes. */
.jf-proof { border-block: 1px solid var(--jf-line); }
.jf-proof__inner { width: var(--jf-wrap); margin-inline: auto; display: grid; grid-template-columns: minmax(12rem, 1fr) 3fr; align-items: center; gap: 2rem; padding-block: 2.1rem; }
.jf-proof__title { margin: 0; font-family: var(--jf-serif); font-style: italic; font-size: 1.25rem; line-height: 1.25; color: var(--jf-gold-light); }
.jf-proof dl { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.jf-proof dl > div { padding: 0.2rem 0 0.2rem 2rem; border-left: 1px solid var(--jf-line); }
.jf-proof dt { font-family: var(--jf-serif); font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.6rem); font-weight: 500; line-height: 1; color: var(--jf-cream); margin-bottom: 0.45rem; letter-spacing: -0.01em; }
.jf-proof dd { margin: 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--jf-muted); }

/* Sections */
.jf-section { width: var(--jf-wrap); margin-inline: auto; padding-block: clamp(4.5rem, 3rem + 6vw, 8rem); }
.jf-section__head { max-width: 40rem; margin-bottom: 3rem; }

/* Two ways to have a reading: the one light section on the page. Cream
   ground, ink text, deep gold for small details (light gold fails contrast
   on cream). Portrait sits in an arch between the two readings. */
.jf-offer {
  --jf-paper: oklch(0.955 0.022 85);
  --jf-paper-ink: oklch(0.2 0.012 70);
  --jf-paper-muted: oklch(0.43 0.02 70);
  --jf-paper-gold: oklch(0.52 0.09 75);
  --jf-paper-line: color-mix(in oklch, var(--jf-paper-gold) 35%, transparent);
  background: var(--jf-paper);
  color: var(--jf-paper-ink);
}
.jf-offer__inner { width: var(--jf-wrap); margin-inline: auto; padding-block: clamp(5rem, 3.5rem + 6vw, 9rem); }
.jf-offer__head { text-align: center; max-width: 38rem; margin: 0 auto clamp(3rem, 2rem + 3vw, 5rem); }
.jf-offer__eyebrow { font-family: var(--jf-sans); line-height: 1.5; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--jf-paper-gold); margin-bottom: 1rem; }
.jf-offer .jf-display { color: var(--jf-paper-ink); margin-bottom: 0.5em; }
.jf-offer__lede { font-family: var(--jf-serif); font-style: italic; font-size: 1.35rem; color: var(--jf-paper-muted); margin: 0; }
.jf-offer__grid { display: grid; grid-template-columns: 1fr minmax(15rem, 20rem) 1fr; align-items: center; gap: clamp(2rem, 5vw, 5.5rem); }
.jf-offer__item { display: flex; flex-direction: column; }
.jf-offer__item--left { align-items: flex-end; text-align: right; }
.jf-offer__item--right { align-items: flex-start; text-align: left; }
.jf-offer__num { font-family: var(--jf-serif); font-style: italic; font-size: 1.4rem; color: var(--jf-paper-gold); margin-bottom: 0.6rem; }
.jf-offer__item h3 { color: var(--jf-paper-ink); font-size: clamp(1.8rem, 1.5rem + 1vw, 2.4rem); margin-bottom: 0.8rem; }
.jf-offer__item > p:not(.jf-offer__num):not(.jf-offer__price) { color: var(--jf-paper-muted); max-width: 24rem; margin-bottom: 1.75rem; }
.jf-offer__price { display: flex; flex-direction: column; gap: 0.2rem; padding-top: 1.25rem; margin-bottom: 1.75rem; border-top: 1px solid var(--jf-paper-line); min-width: 10rem; }
.jf-offer__item--left .jf-offer__price { align-items: flex-end; }
.jf-offer__price strong { font-family: var(--jf-serif); font-weight: 500; font-size: 2.6rem; line-height: 1; color: var(--jf-paper-ink); }
.jf-offer__price small { font-size: 0.5em; font-style: italic; color: var(--jf-paper-muted); }
.jf-offer__price span { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--jf-paper-gold); }
.jf-offer__portrait { margin: 0; position: relative; }
.jf-offer__portrait img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 20%; border-radius: 999px 999px 0.25rem 0.25rem; }
.jf-offer__portrait::before { content: ''; position: absolute; inset: -0.9rem; border: 1px solid var(--jf-paper-line); border-radius: 999px 999px 0.4rem 0.4rem; pointer-events: none; }
/* Google rating: stars fill to the real score. */
.jf-rating { display: inline-flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; padding: 0.55rem 1.1rem; border: 1px solid var(--jf-paper-line, var(--jf-line)); border-radius: 999px; text-decoration: none; color: inherit; transition: background-color 0.3s, border-color 0.3s; }
.jf-rating:hover { background: color-mix(in oklch, var(--jf-paper-gold, var(--jf-gold)) 8%, transparent); border-color: var(--jf-paper-gold, var(--jf-gold)); }
.jf-rating__stars { position: relative; display: inline-block; font-size: 1.05rem; letter-spacing: 0.12em; line-height: 1; }
.jf-rating__base { color: color-mix(in oklch, var(--jf-paper-gold, var(--jf-gold)) 28%, transparent); }
.jf-rating__fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; color: oklch(0.72 0.14 80); }
.jf-rating__text { font-size: 0.85rem; color: var(--jf-paper-muted, var(--jf-muted)); }
.jf-rating__text strong { font-family: var(--jf-serif); font-size: 1.2rem; font-weight: 600; color: var(--jf-paper-ink, var(--jf-cream)); }

.jf-btn--ink { background: var(--jf-paper-ink); color: var(--jf-paper); border-color: var(--jf-paper-ink); }
.jf-btn--ink:hover { background: oklch(0.3 0.015 70); }
.jf-btn--ink-ghost { background: transparent; color: var(--jf-paper-ink); border-color: var(--jf-paper-ink); }
.jf-btn--ink-ghost:hover { background: color-mix(in oklch, var(--jf-paper-ink) 8%, transparent); }
.jf-offer :focus-visible { outline-color: var(--jf-paper-ink); }

/* Story: copy left, warm-toned photo right with caption. */
.jf-story { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2.5rem, 6vw, 7rem); align-items: center; }
.jf-story__copy .jf-display { max-width: 16ch; }
.jf-story__lede { font-family: var(--jf-serif); font-style: italic; font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem); line-height: 1.4; color: var(--jf-gold-light); max-width: 32rem; margin-bottom: 2rem; }
.jf-story__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem; padding-top: 2rem; border-top: 1px solid var(--jf-line); }
.jf-story__cols p { color: var(--jf-muted); font-size: 0.95rem; margin: 0; }
.jf-story__media { margin: 0; position: relative; }
.jf-story__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 55% 30%; filter: grayscale(1) sepia(0.4) brightness(0.9) contrast(1.08); }
.jf-story__media::before { content: ''; position: absolute; inset: -1rem 1rem 3rem -1rem; border: 1px solid var(--jf-line); z-index: -1; }
.jf-story__media figcaption { margin-top: 0.9rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--jf-muted); }
.jf-story__media figcaption em { font-style: normal; color: var(--jf-gold); }

/* Judge's quote: one large line, full width. */
/* Judge's quote, beside the signed photo Uri Geller gave June. */
.jf-verdict { overflow: hidden; border-block: 1px solid var(--jf-line); background: radial-gradient(55% 120% at 30% 50%, color-mix(in oklch, var(--jf-gold) 10%, transparent), transparent 70%); }
.jf-verdict__inner { width: var(--jf-wrap); margin: 0 auto; padding: clamp(4rem, 3rem + 4vw, 7rem) 0; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.jf-verdict__photo { position: relative; margin: 0; justify-self: center; width: min(100%, 30rem); }
.jf-verdict__print { position: relative; }
.jf-verdict__print::before { content: ''; position: absolute; inset: -0.9rem; border: 1px solid var(--jf-line); transform: rotate(3deg); }
.jf-verdict__photo img { position: relative; display: block; width: 100%; height: auto; transform: rotate(-2.5deg); box-shadow: 0 40px 70px -30px oklch(0.08 0.01 75 / 0.9), 0 0 0 1px color-mix(in oklch, var(--jf-gold) 30%, transparent); }
.jf-verdict__photo figcaption { position: relative; margin-top: 1.75rem; text-align: center; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--jf-muted); }
.jf-verdict.is-visible .jf-verdict__photo img { animation: jf-land 1.4s var(--jf-ease) both; }
.jf-verdict.is-visible blockquote { animation: jf-rise 1.1s var(--jf-ease) 0.25s both; }
@keyframes jf-land { from { opacity: 0; transform: translateY(2.5rem) rotate(-8deg) scale(0.94); } }
.jf-verdict blockquote { margin: 0; }
.jf-verdict p { position: relative; font-family: var(--jf-serif); font-style: italic; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); line-height: 1.18; color: var(--jf-cream); text-wrap: balance; margin-bottom: 1.75rem; }
.jf-verdict p::before { content: '\201C'; display: block; font-size: 1.6em; line-height: 0.5; margin-bottom: 0.25em; color: var(--jf-gold); font-style: normal; }
.jf-verdict cite { font-style: normal; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--jf-gold); }
.jf-verdict cite em { font-style: normal; color: var(--jf-muted); }

/* Events: a programme-style list, whole row clickable. */
.jf-events__head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2.5rem; }
.jf-events__head .jf-display { margin: 0; }
/* Event list: date, where (with map link), facts, ticket button. */
.jf-event-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--jf-line); }
.jf-event {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1.35fr) minmax(0, 1fr) auto;
  grid-template-areas: "date where facts buy";
  align-items: center;
  gap: 1.25rem 2.5rem;
  padding: 2rem 1.25rem;
  border-bottom: 1px solid var(--jf-line);
  transition: background-color 0.4s var(--jf-ease);
}
.jf-event:hover { background: color-mix(in oklch, var(--jf-gold) 5%, transparent); }
.jf-event__date { grid-area: date; display: grid; justify-items: start; align-content: start; gap: 0.2rem; padding-right: 1.5rem; border-right: 1px solid var(--jf-line); }
.jf-event__weekday, .jf-event__month { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.3; }
.jf-event__weekday { color: var(--jf-muted); }
.jf-event__month { color: var(--jf-cream); white-space: nowrap; }
.jf-event__day { font-family: var(--jf-serif); font-size: 3.4rem; line-height: 1; font-variant-numeric: lining-nums; margin-bottom: 0.15rem; color: var(--jf-gold-light); }
.jf-event__where { grid-area: where; min-width: 0; }
.jf-event__next { display: inline-block; margin: 0 0 0.6rem; padding: 0.2rem 0.6rem; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--jf-ink); background: var(--jf-gold); }
.jf-event__town { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.75rem; font-size: clamp(1.6rem, 1.4rem + 0.6vw, 1.95rem); margin: 0 0 0.2rem; }
.jf-event__region { font-family: var(--jf-sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--jf-gold); }
.jf-event__venue { margin: 0 0 0.45rem; font-size: 1rem; color: var(--jf-text); }
.jf-event__map { display: inline-flex; align-items: flex-start; gap: 0.5rem; font-size: 0.86rem; color: var(--jf-muted); text-decoration: underline; text-decoration-color: color-mix(in oklch, var(--jf-gold) 40%, transparent); text-underline-offset: 0.25em; transition: color 0.3s, text-decoration-color 0.3s; }
.jf-event__map svg { flex: none; margin-top: 0.2em; color: var(--jf-gold); }
.jf-event__map:hover { color: var(--jf-cream); text-decoration-color: var(--jf-gold); }
.jf-event__facts { grid-area: facts; list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; font-size: 0.86rem; color: var(--jf-muted); }
.jf-event__facts li { display: flex; align-items: center; gap: 0.65rem; }
.jf-event__facts svg { flex: none; color: var(--jf-gold); }
.jf-event__buy { grid-area: buy; white-space: nowrap; }
.jf-event--empty { display: block; color: var(--jf-muted); }
@media (max-width: 1100px) {
  .jf-event { grid-template-columns: 6.5rem minmax(0, 1fr) auto; grid-template-areas: "date where buy" "date facts buy"; align-items: start; row-gap: 1rem; }
  .jf-event__date { align-self: stretch; }
  .jf-event__buy { align-self: center; }
  .jf-event__facts { grid-template-columns: repeat(auto-fit, minmax(11rem, max-content)); column-gap: 1.75rem; }
}
@media (max-width: 900px) {
  .jf-event { grid-template-columns: 5.5rem minmax(0, 1fr); grid-template-areas: "date where" "facts facts" "buy buy"; gap: 1.1rem 1.25rem; padding: 1.6rem 0; }
  .jf-event:hover { background: none; }
  .jf-event__date { padding-right: 1rem; }
  .jf-event__day { font-size: 2.6rem; }
  .jf-event__facts { grid-template-columns: 1fr; padding-top: 1rem; border-top: 1px dashed var(--jf-line); }
  .jf-event__buy { width: 100%; }
}

/* Reviews: one lead quote, two supporting quotes, no boxes. */
/* Reviews: thanks count, mention bars, moving wall of quotes. */
.jf-reviews { border-top: 1px solid var(--jf-line); }
.jf-reviews__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; margin-bottom: clamp(3.5rem, 6vw, 5.5rem); }
.jf-reviews__thanks { font-style: italic; font-size: clamp(2.8rem, 2rem + 3.4vw, 5rem); line-height: 1.05; color: var(--jf-cream); margin-bottom: 1.25rem; }
.jf-reviews__lede { max-width: 30rem; color: var(--jf-muted); margin-bottom: 0; }
.jf-reviews__chart { margin: 0; padding: clamp(1.75rem, 3vw, 2.5rem); border: 1px solid var(--jf-line); background: color-mix(in oklch, var(--jf-ink-2) 70%, transparent); }
.jf-reviews__chart figcaption { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--jf-gold); margin-bottom: 1.5rem; }
.jf-reviews__chart ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.jf-reviews__chart li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 2.5rem; align-items: center; gap: 1rem; }
.jf-reviews__label { font-size: 0.9rem; color: var(--jf-text); }
.jf-reviews__track { height: 6px; border-radius: 4px; background: color-mix(in oklch, var(--jf-gold) 12%, transparent); overflow: hidden; }
.jf-reviews__bar { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--jf-gold-deep), var(--jf-gold-light)); transform-origin: left center; }
.jf-reviews.is-visible .jf-reviews__bar { animation: jf-grow 1.4s var(--jf-ease) both; animation-delay: calc(0.2s + var(--i) * 0.12s); }
@keyframes jf-grow { from { transform: scaleX(0); } }
.jf-reviews__value { font-family: var(--jf-serif); font-size: 1.35rem; line-height: 1; text-align: right; font-variant-numeric: lining-nums tabular-nums; color: var(--jf-cream); }

.jf-wall { display: grid; gap: 1.25rem; margin: 0 0 3rem; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, black 7%, black 93%, transparent); mask-image: linear-gradient(90deg, transparent, black 7%, black 93%, transparent); }
.jf-wall__row { display: flex; align-items: stretch; gap: 1.25rem; width: max-content; animation: jf-marquee 110s linear infinite; }
.jf-wall__row--reverse { animation-direction: reverse; animation-duration: 125s; }
.jf-wall:hover .jf-wall__row { animation-play-state: paused; }
@keyframes jf-marquee { to { transform: translateX(calc(-50% - 0.625rem)); } }
.jf-wall__card { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem; width: 22rem; margin: 0; padding: 3.1rem 1.75rem 1.5rem; border: 1px solid var(--jf-line); background: var(--jf-ink-2); }
.jf-wall__card::before { content: '\201C'; position: absolute; top: 0.9rem; left: 1.6rem; font-family: var(--jf-serif); font-size: 3.6rem; line-height: 1; color: color-mix(in oklch, var(--jf-gold) 55%, transparent); }
.jf-wall__card blockquote { margin: 0; }
.jf-wall__card p { margin: 0; font-family: var(--jf-serif); font-size: 1.22rem; line-height: 1.4; color: var(--jf-text); }
.jf-wall__card figcaption { display: grid; gap: 0.2rem; padding-top: 1rem; border-top: 1px solid var(--jf-line); }
.jf-wall__card strong { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--jf-gold); }
.jf-wall__card span { font-size: 0.8rem; color: var(--jf-muted); }
@media (max-width: 900px) {
  .jf-reviews__top { grid-template-columns: 1fr; }
  .jf-reviews__chart li { grid-template-columns: 7.5rem minmax(0, 1fr) 2rem; gap: 0.75rem; }
  .jf-reviews__label { font-size: 0.82rem; }
  .jf-wall__card { width: 17.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .jf-wall { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .jf-wall__row { animation: none; }
  .jf-wall__card[aria-hidden='true'] { display: none; }
}

/* Footer */
.jf-footer { --jf-wrap: calc(100% - clamp(2.5rem, 6vw, 7rem)); background: radial-gradient(60rem 30rem at 12% 12rem, color-mix(in oklch, var(--jf-gold) 10%, transparent), transparent 70%), var(--jf-ink-2); border-top: 1px solid var(--jf-line); }
.jf-footer__cta { width: var(--jf-wrap); margin-inline: auto; padding: clamp(4rem, 3rem + 3vw, 6rem) 0; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; border-bottom: 1px solid var(--jf-line); }
.jf-footer__cta .jf-display { max-width: 26rem; margin-bottom: 1rem; }
.jf-footer__cta-lede { color: var(--jf-muted); margin: 0; }
.jf-routes { display: grid !important; gap: 0 !important; border-top: 1px solid var(--jf-line); }
.jf-route { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: 1.25rem; padding: 1.5rem 0; border-bottom: 1px solid var(--jf-line); }
.jf-route:last-child { border-bottom: 0; }
.jf-route__num { font-family: var(--jf-serif); font-size: 1.5rem; line-height: 1; color: var(--jf-gold); font-variant-numeric: lining-nums; }
.jf-route__title { margin: 0 0 0.2rem; font-family: var(--jf-serif); font-size: 1.45rem; line-height: 1.2; color: var(--jf-cream); }
.jf-route__text { margin: 0; font-size: 0.9rem; color: var(--jf-muted); }
.jf-route .jf-btn { min-width: 14rem; justify-content: center; }
.jf-footer__proof { width: var(--jf-wrap); margin-inline: auto; padding: 1.75rem 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; border-bottom: 1px solid var(--jf-line); }
.jf-footer__proof .jf-rating { margin-top: 0; }
.jf-footer__proof ul { display: flex !important; flex-wrap: wrap; gap: 0.75rem 2.25rem !important; }
.jf-footer__proof a { display: inline-flex; align-items: baseline; gap: 0.5rem; color: var(--jf-muted); text-decoration: none; font-size: 0.88rem; transition: color 0.3s; }
.jf-footer__proof a:hover { color: var(--jf-gold-light); }
.jf-footer__proof strong { font-family: var(--jf-serif); font-size: 1.3rem; font-weight: 600; color: var(--jf-cream); }
.jf-footer__grid { width: var(--jf-wrap); margin-inline: auto; padding: 4rem 0 3rem; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; }
.jf-footer__brand img { width: 200px; margin-bottom: 1rem; }
.jf-footer__brand p { color: var(--jf-muted); font-size: 0.92rem; max-width: 24rem; }
.jf-footer__brand .jf-footer__heading { margin: 1.75rem 0 0.75rem; font-size: 0.72rem; color: var(--jf-gold); }
.jf-footer__note { font-size: 0.88rem; color: var(--jf-muted); }
.jf-footer__contact { margin-top: 1.5rem; }
.jf-footer__grid .jf-btn { font-size: 0.75rem; }
.jf-footer__heading { margin: 0 0 1rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--jf-gold); }
.jf-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.jf-footer__grid a { color: var(--jf-text); text-decoration: none; font-size: 0.95rem; overflow-wrap: anywhere; }
.jf-footer__grid a:hover { color: var(--jf-gold-light); }
.jf-social { display: flex !important; flex-wrap: wrap; gap: 0.5rem 1.2rem !important; }
.jf-social a { font-size: 0.8rem !important; letter-spacing: 0.1em; text-transform: uppercase; color: var(--jf-gold-light) !important; }
.jf-locations { width: var(--jf-wrap); margin-inline: auto; border-top: 1px solid var(--jf-line); }
.jf-locations summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 0; cursor: pointer; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--jf-gold); }
.jf-locations summary::-webkit-details-marker { display: none; }
.jf-locations summary svg { transition: transform 0.4s var(--jf-ease); }
.jf-locations[open] summary svg { transform: rotate(180deg); }
.jf-locations summary:hover { color: var(--jf-gold-light); }
.jf-locations__body { padding-bottom: 2rem; animation: jf-rise 0.6s var(--jf-ease) both; }
.jf-locations__body p { color: var(--jf-muted); font-size: 0.9rem; }
.jf-locations ul { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.5rem 1.5rem; margin-bottom: 1.5rem; }
.jf-locations li a { color: var(--jf-text); text-decoration: none; font-size: 0.9rem; }
.jf-locations li a:hover { color: var(--jf-gold-light); }
.jf-footer__legal { width: var(--jf-wrap); margin-inline: auto; padding: 1.5rem 0 2rem; border-top: 1px solid var(--jf-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: 0.82rem; color: var(--jf-muted); }
.jf-footer__legal p { margin: 0; }
.jf-footer__legal ul { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; }
.jf-footer__legal a { color: var(--jf-muted); text-decoration: none; }
.jf-footer__legal a:hover { color: var(--jf-gold-light); }

/* ===== Inner pages ===== */

/* Breadcrumbs */
.jf-crumbs { margin-bottom: 2rem; font-size: 0.78rem; letter-spacing: 0.06em; }
.jf-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.jf-crumbs li + li::before { content: '/'; margin-right: 0.4rem; color: var(--jf-line); }
.jf-crumbs a { color: var(--jf-muted); text-decoration: none; }
.jf-crumbs a:hover { color: var(--jf-gold-light); }
.jf-crumbs [aria-current] { color: var(--jf-text); }

/* Page hero: copy left, framed portrait right */
.jf-page-hero { position: relative; width: var(--jf-wrap); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(3.5rem, 2rem + 5vw, 7rem); }
.jf-page-hero::before { content: ''; position: absolute; inset: -20% 0 auto 40%; height: 80%; background: radial-gradient(closest-side, color-mix(in oklch, var(--jf-gold) 12%, transparent), transparent); z-index: -1; pointer-events: none; }
.jf-page-hero .jf-display { font-size: clamp(2.6rem, 1.8rem + 3.4vw, 4.6rem); line-height: 1.04; }
.jf-page-hero__lede { max-width: 36rem; font-size: 1.08rem; color: var(--jf-text); margin-bottom: 2rem; }
.jf-page-hero__media { position: relative; margin: 0; justify-self: center; width: min(100%, 22rem); }
.jf-page-hero__media::before { content: ''; position: absolute; inset: 1.1rem -1.1rem -1.1rem 1.1rem; border: 1px solid var(--jf-line); }
.jf-page-hero__media img { position: relative; display: block; width: 100%; height: auto; box-shadow: 0 40px 70px -30px oklch(0.08 0.01 75 / 0.9); }

/* Compare cards */
.jf-compare { border-top: 1px solid var(--jf-line); }
.jf-compare__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); margin-top: 2.5rem; }
.jf-compare__card { display: flex; flex-direction: column; padding: clamp(1.75rem, 3vw, 2.75rem); border: 1px solid var(--jf-line); background: var(--jf-ink-2); }
.jf-compare__card:first-child { background: linear-gradient(160deg, color-mix(in oklch, var(--jf-gold) 10%, var(--jf-ink-2)), var(--jf-ink-2) 55%); }
.jf-compare__kind { margin: 0 0 0.5rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--jf-gold); }
.jf-compare__card h3 { margin: 0 0 1.25rem; font-family: var(--jf-serif); font-weight: 500; font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.2rem); line-height: 1.15; color: var(--jf-cream); }
.jf-compare__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem 0.8rem; margin: 0 0 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--jf-line); }
.jf-compare__price strong { font-family: var(--jf-serif); font-size: clamp(2rem, 1.6rem + 1.4vw, 2.8rem); font-weight: 500; line-height: 1; color: var(--jf-gold-light); }
.jf-compare__price span { font-size: 0.9rem; color: var(--jf-muted); }
.jf-compare__card dl { margin: 0 0 2rem; display: grid; gap: 0.9rem; }
.jf-compare__card dl div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; }
.jf-compare__card dt { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--jf-muted); padding-top: 0.2rem; }
.jf-compare__card dd { margin: 0; color: var(--jf-text); }
.jf-compare__card .jf-btn { margin-top: auto; align-self: flex-start; }

/* In-person dates */
.jf-dates { border-top: 1px solid var(--jf-line); }
.jf-dates__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 3rem; margin-bottom: 2rem; }
.jf-dates__note { margin: 0 0 0.6em; font-size: 0.88rem; color: var(--jf-muted); }
.jf-dates__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--jf-line); }
.jf-dates__list li { display: grid; grid-template-columns: 13rem minmax(0, 1fr) 5rem 15rem; align-items: center; gap: 1.25rem; padding: 1.1rem 0; border-bottom: 1px solid var(--jf-line); transition: background-color 0.3s; }
.jf-dates__list li:hover { background: color-mix(in oklch, var(--jf-gold) 5%, transparent); }
.jf-dates__when { font-size: 0.92rem; color: var(--jf-muted); font-variant-numeric: lining-nums tabular-nums; }
.jf-dates__town { font-family: var(--jf-serif); font-size: 1.45rem; font-weight: 500; color: var(--jf-cream); }
.jf-dates__price { font-family: var(--jf-serif); font-size: 1.3rem; color: var(--jf-gold-light); text-align: right; font-variant-numeric: lining-nums; }
.jf-dates__ask, .jf-dates__state { justify-self: end; white-space: nowrap; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.jf-dates__ask { padding: 0.6rem 1rem; border: 1px solid var(--jf-line); color: var(--jf-gold-light); text-decoration: none; transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
.jf-dates__ask:hover { background: var(--jf-gold); border-color: var(--jf-gold); color: var(--jf-ink); }
.jf-dates__state { font-style: italic; letter-spacing: 0.06em; text-transform: none; font-size: 0.85rem; color: var(--jf-muted); }
.jf-dates__list .is-full .jf-dates__town, .jf-dates__list .is-full .jf-dates__price { color: var(--jf-muted); }
.jf-dates__left { display: block; margin-top: 0.3rem; font-family: var(--jf-sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--jf-gold-light); }

/* How to book: four numbered steps */
.jf-howbook { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.jf-howbook li { display: grid; gap: 0.9rem; align-content: start; padding-top: 1.25rem; border-top: 1px solid var(--jf-gold); }
.jf-howbook span { font-family: var(--jf-serif); font-size: 2rem; line-height: 1; color: var(--jf-gold); }
.jf-howbook p { margin: 0; font-size: 0.95rem; color: var(--jf-muted); }
.jf-howbook strong { display: block; margin-bottom: 0.3rem; font-weight: 600; color: var(--jf-cream); }

/* Voices: three quotes */
.jf-voices { border-top: 1px solid var(--jf-line); }
.jf-voices__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); margin: 1.5rem 0 2.5rem; }
.jf-voices figure { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; padding-left: 1.25rem; border-left: 2px solid var(--jf-gold); }
.jf-voices blockquote { margin: 0; }
.jf-voices p { margin: 0; font-family: var(--jf-serif); font-style: italic; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.35; color: var(--jf-cream); }
.jf-voices figcaption { display: grid; gap: 0.15rem; }
.jf-voices figcaption strong { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--jf-gold); }
.jf-voices figcaption span { font-size: 0.82rem; color: var(--jf-muted); }

/* FAQ */
.jf-faq { border-top: 1px solid var(--jf-line); }
.jf-faq__list { max-width: 52rem; margin-top: 2rem; border-top: 1px solid var(--jf-line); }
.jf-faq details { border-bottom: 1px solid var(--jf-line); }
.jf-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.35rem 0; cursor: pointer; font-family: var(--jf-serif); font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); color: var(--jf-cream); }
.jf-faq summary::-webkit-details-marker { display: none; }
.jf-faq summary::after { content: '+'; flex: none; font-family: var(--jf-sans); font-size: 1.4rem; color: var(--jf-gold); transition: transform 0.4s var(--jf-ease); }
.jf-faq details[open] summary::after { transform: rotate(45deg); }
.jf-faq summary:hover { color: var(--jf-gold-light); }
.jf-faq details p { margin: 0 0 1.5rem; max-width: 44rem; color: var(--jf-muted); animation: jf-rise 0.5s var(--jf-ease) both; }


@media (max-width: 1100px) {
  .jf-dates__list li { grid-template-columns: 10rem minmax(0, 1fr) 4rem 14rem; }
  .jf-howbook { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .jf-page-hero { grid-template-columns: 1fr; }
  .jf-page-hero__media { width: min(70%, 16rem); justify-self: start; order: -1; }
  .jf-compare__grid, .jf-voices__grid { grid-template-columns: 1fr; }
  .jf-compare__card dl div { grid-template-columns: 6rem minmax(0, 1fr); }
  .jf-dates__list li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.35rem; }
  .jf-dates__when { grid-column: 1 / -1; }
  .jf-dates__price { text-align: left; }
  .jf-dates__ask, .jf-dates__state { grid-column: 1 / -1; justify-self: start; }
  .jf-howbook { grid-template-columns: 1fr; }
}

/* Tablet */
@media (max-width: 1100px) {
  .jf-header__cta { display: none; }
  .jf-mega__grid--readings, .jf-mega__grid--about, .jf-mega__grid--reviews { grid-template-columns: 1fr 1fr; row-gap: 1.75rem; }
  .jf-mega__grid--readings > :nth-child(3), .jf-mega__grid--reviews > :nth-child(3) { display: none; }
  .jf-mega__grid--events { grid-template-columns: 1fr; }
  .jf-mega__feature { display: none; }
  .jf-proof__inner { grid-template-columns: 1fr; gap: 1.25rem; }
  .jf-offer__grid { grid-template-columns: 1fr 1fr; }
  .jf-offer__portrait { grid-column: 1 / -1; grid-row: 1; width: min(16rem, 70%); justify-self: center; }
  .jf-offer__item--left { align-items: flex-start; text-align: left; }
  .jf-offer__item--left .jf-offer__price { align-items: flex-start; }
  .jf-journey__steps { grid-template-columns: 1fr 1fr; row-gap: 3.5rem; }
  .jf-press__groups { grid-template-columns: 1fr; }
  .jf-press__group + .jf-press__group { padding-left: 0; border-left: 0; padding-top: 1.75rem; border-top: 1px solid var(--jf-line); }
  .jf-journey__steps::before { display: none; }
  .jf-footer__grid { grid-template-columns: 1fr 1fr; }
  .jf-footer__cta { grid-template-columns: 1fr; }
  .jf-verdict__inner { grid-template-columns: 1fr; text-align: center; }
  .jf-verdict__photo { width: min(100%, 26rem); }
}

/* Mobile: the nav becomes a full-height drawer with accordion panels. */
@media (max-width: 900px) {
  :root { --jf-header-h: 4.5rem; --jf-wrap: min(1240px, 100% - 2.5rem); }
  .jf-header__logo img { width: 140px; }
  /* backdrop-filter would make the header the containing block of the fixed drawer. */
  .jf-header { backdrop-filter: none; background: var(--jf-ink); }
  .jf-burger { display: flex; margin-left: auto; }
  .jf-nav {
    position: fixed;
    inset: var(--jf-header-h) 0 0 0;
    background: var(--jf-ink);
    padding: 1.5rem 1.25rem 2.5rem;
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.5s var(--jf-ease), visibility 0s linear 0.5s;
  }
  .jf-nav.is-open { transform: none; visibility: visible; transition: transform 0.5s var(--jf-ease), visibility 0s; }
  .jf-nav__list { flex-direction: column; gap: 0; }
  .jf-nav__item { border-bottom: 1px solid var(--jf-line); }
  .jf-nav__link { width: 100%; justify-content: space-between; padding: 1.1rem 0; font-family: var(--jf-serif); font-size: 1.6rem; }
  .jf-nav__link::after { display: none; }
  /* The label links to the overview page; the chevron opens the accordion. */
  .jf-nav__item.has-panel { flex-wrap: wrap; }
  .jf-nav__item.has-panel > .jf-nav__link { flex: 1 1 0; width: auto; min-width: 0; padding-right: 0; }
  .jf-nav__toggle { width: 3rem; height: 3rem; margin-right: -0.6rem; }
  .jf-nav__toggle .jf-nav__chevron { width: 14px; height: 14px; }
  .jf-panel { flex: 0 0 100%; }
  .jf-panel { position: static; display: none; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent; }
  .jf-panel.is-open { display: block; }
  .jf-mega { width: 100%; }
  .jf-mega__grid, .jf-mega__grid--readings, .jf-mega__grid--events, .jf-mega__grid--about, .jf-mega__grid--reviews { grid-template-columns: 1fr; gap: 1.5rem; padding: 0.25rem 0 1.5rem; }
  .jf-mega__zone { padding: 0; border: 0; }
  .jf-mega__grid--readings > :nth-child(3), .jf-mega__grid--reviews > :nth-child(3) { display: block; }
  .jf-mega__links--two { grid-template-columns: 1fr; }
  .jf-mega__links a { margin-inline: 0; padding-inline: 0.75rem; }
  .jf-mega__shows li { grid-template-columns: 3rem minmax(0, 1fr) auto; gap: 0.75rem; }
  .jf-mega__price { display: none; }
  .jf-mega__show small { white-space: normal; }
  .jf-mega__dates a { grid-template-columns: 6.8rem minmax(0, 1fr) auto; }
  .jf-mega__bar { display: none; }
  /* Live Events keeps its "See all live events" link on phones. */
  .jf-mega__bar--keep { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: 0 0 1.5rem; border-top: 0; }
  .jf-panel.is-open .jf-mega__grid > * { animation: none; }
  .jf-nav__cta-mobile { display: flex; width: 100%; margin-top: 1.75rem; }
  body.jf-nav-open { overflow: hidden; }

  .jf-hero { min-height: auto; align-items: end; }
  .jf-hero__media { bottom: auto; height: 27rem; }
  .jf-hero__media img { object-position: 74% 18%; }
  .jf-hero::before { bottom: auto; height: 27rem; background: linear-gradient(180deg, transparent 0%, transparent 55%, var(--jf-ink) 100%); }
  .jf-hero__copy { padding: 23rem 0 3rem; }
  .jf-proof dl > div { padding-left: 0.9rem; }
  .jf-proof dl > div:first-child { padding-left: 0; border-left: 0; }
  .jf-proof dd { font-size: 0.62rem; letter-spacing: 0.1em; }
  .jf-proof dt { font-size: 1.45rem; white-space: nowrap; }
  .jf-story, .jf-story__cols { grid-template-columns: 1fr; }
  .jf-story__media { margin-right: 1rem; }
  .jf-story__media::before { inset: -0.75rem 0.75rem 2.5rem -0.75rem; }
  .jf-events__head { flex-direction: column; align-items: start; gap: 1rem; }
  .jf-hero__press span::after { display: none; }
  .jf-offer__head { text-align: left; }
  .jf-rating { gap: 0.55rem; padding: 0.5rem 0.9rem; }
  .jf-rating__stars { font-size: 0.9rem; }
  .jf-rating__text { font-size: 0.76rem; white-space: nowrap; }
  .jf-rating__text strong { font-size: 1.05rem; }
  .jf-offer__grid { grid-template-columns: 1fr; gap: 3rem; }
  .jf-offer__portrait { width: 70%; justify-self: start; margin-left: 0.9rem; }
  .jf-offer__price strong { font-size: 2.2rem; }
  .jf-journey__head { text-align: left; margin-bottom: 3rem; }
  .jf-missing__photo { top: 0; bottom: auto; height: 22rem; }
  .jf-missing__photo img { object-position: 78% 30%; }
  .jf-missing__photo::after { background: linear-gradient(180deg, color-mix(in oklch, var(--jf-ink) 30%, transparent) 0%, color-mix(in oklch, var(--jf-ink) 55%, transparent) 50%, var(--jf-ink) 100%); }
  .jf-missing__inner { padding-top: 15rem; }
  .jf-missing__dots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem 0.5rem; margin-left: 0; }
  .jf-press__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .jf-press ul { justify-content: center; gap: 1.25rem 1.75rem; }
  .jf-press li img { height: 1.3rem; }
  .jf-press .is-record, .jf-press .is-stv, .jf-press .is-stb { height: 1.7rem; }
  .jf-journey__steps { grid-template-columns: 1fr; row-gap: 2.25rem; }
  .jf-journey__steps::before { display: block; left: 2rem; right: auto; top: 2rem; bottom: 2rem; width: 1px; height: auto; background: linear-gradient(180deg, var(--jf-gold), color-mix(in oklch, var(--jf-gold) 20%, transparent)); transform-origin: top; }
  .jf-journey.is-visible .jf-journey__steps::before { animation-name: jf-draw-down; }
  .jf-journey__steps li { text-align: left; padding: 0 0 0 5.5rem; min-height: 4rem; }
  .jf-journey__mark { position: absolute; left: 0; top: 0; margin: 0; }
  .jf-journey__cta { margin-inline: 0; }
  .jf-footer__grid { grid-template-columns: 1fr; }
  .jf-route { grid-template-columns: 2.25rem minmax(0, 1fr); row-gap: 1rem; }
  .jf-route .jf-btn { grid-column: 1 / -1; min-width: 0; }
  .jf-footer__proof { flex-direction: column; align-items: flex-start; }
  .jf-footer__proof ul { flex-direction: column; gap: 0.6rem !important; }
  .jf-verdict__print::before { inset: -0.6rem; }
  .jf-locations ul { grid-template-columns: repeat(2, 1fr); gap: 0.6rem 1rem; }
  .jf-locations li a { font-size: 0.9rem; }
  /* Town name only on phones; the prefix stays in the link text for search engines and screen readers. */
  .jf-locations__pre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .jf-btn { width: 100%; }
  .jf-actions { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Cookie banner. The markup, script and base styles are the engine's
   (cmshq/resources/views/partials/seo/cookie-consent.blade.php); this only
   restyles it for June's site, through the engine's --cmshq-consent-* custom
   properties plus a few rules scoped to body.jf. Accept is solid gold and
   Reject is outlined gold at the same size and weight, so saying no is as
   easy as saying yes (ICO guidance). */
.jf .cmshq-consent {
  --cmshq-consent-bg: linear-gradient(180deg, #1e1e1e, #151515);
  --cmshq-consent-text: #f5ebd8;
  --cmshq-consent-border: #c9a86a;
  --cmshq-consent-link: #c9a86a;
  --cmshq-consent-button-bg: #c9a86a;
  --cmshq-consent-button-text: #151515;
  --cmshq-consent-focus: #e1c58e;
  --cmshq-consent-radius: 0;
  --cmshq-consent-shadow: 0 -1.25rem 3rem color-mix(in oklch, #151515 70%, transparent);
  font-family: var(--jf-sans);
  padding-bottom: env(safe-area-inset-bottom);
  animation: jf-consent-in 0.7s var(--jf-ease) both;
}
@keyframes jf-consent-in { from { transform: translateY(100%); } to { transform: none; } }
.jf .cmshq-consent__inner { width: var(--jf-wrap); padding-block: 0.85rem; }
.jf .cmshq-consent__message { font-size: 0.92rem; line-height: 1.6; max-width: 46rem; }
.jf .cmshq-consent__link { margin-left: 0.35rem; font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.jf .cmshq-consent__link:hover { color: #e1c58e; }
.jf .cmshq-consent__actions { grid-template-columns: repeat(2, minmax(8.5rem, 1fr)); gap: 0.75rem; }
.jf .cmshq-consent__button {
  min-height: 2.75rem;
  padding: 0.65rem 1.4rem;
  font-family: var(--jf-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background-color 0.3s, color 0.3s, transform 0.4s var(--jf-ease);
}
.jf .cmshq-consent__button:hover { opacity: 1; transform: translateY(-2px); }
.jf .cmshq-consent__button[data-cmshq-consent="accept"]:hover { background: #e1c58e; border-color: #e1c58e; }
.jf .cmshq-consent__button[data-cmshq-consent="reject"] { background: transparent; color: #e1c58e; border-color: #c9a86a; }
.jf .cmshq-consent__button[data-cmshq-consent="reject"]:hover { background: color-mix(in oklch, #c9a86a 16%, transparent); color: #f5ebd8; }
/* Room to scroll the end of the page clear of the open banner, in the footer's own colour. */
.jf:has(> .cmshq-consent) .jf-footer { padding-bottom: 5.5rem; }
@media (max-width: 42rem) {
  .jf .cmshq-consent__inner { gap: 0.9rem; padding-block: 1rem; }
  .jf .cmshq-consent__message { font-size: 0.86rem; line-height: 1.5; }
  .jf .cmshq-consent__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .jf .cmshq-consent__button { min-height: 2.9rem; padding-inline: 0.5rem; letter-spacing: 0.12em; }
  .jf:has(> .cmshq-consent) .jf-footer { padding-bottom: 9.5rem; }
}