/* ============================================================
   PALETTES — each one is a complete, self-contained token set.
   The page paints every colour explicitly from these tokens, so it
   holds on any host background. Switching palette re-skins everything.
   ============================================================ */
[data-palette="orchard"]{
  --bg:#FFFDF6; --surf:#FFFFFF; --surf2:#F5F0E2; --deep:#25341F;
  --ink:#26331F; --muted:#61705A; --line:#E4DCC7;
  --brand:#2F7D4F; --on-brand:#FFFFFF; --band:#C1D8CA; --brand-soft:#E4F0E7;
  --acc:#F2A93B; --acc-ink:#4A3208; --acc2-ink:#26331F; --acc2:#5E9CC0;
  --hero-from:rgba(20,34,18,.72); --hero-to:rgba(20,34,18,.05);
}
[data-palette="haybarn"]{
  --bg:#FBF6EF; --surf:#FFFFFF; --surf2:#F1E9DE; --deep:#3A342C;
  --ink:#37312A; --muted:#786E61; --line:#E6DACB;
  --brand:#5E7F53; --on-brand:#FFFFFF; --band:#CFD9CB; --brand-soft:#E7EEE3;
  --acc:#E5AE9F; --acc-ink:#4A2A20; --acc2-ink:#37312A; --acc2:#9BB7C8;
  --hero-from:rgba(48,40,32,.70); --hero-to:rgba(48,40,32,.04);
}
[data-palette="bramble"]{
  --bg:#FFF7EC; --surf:#FFFFFF; --surf2:#F6E8DC; --deep:#2A1B2E;
  --ink:#241A28; --muted:#6B5C70; --line:#E6D6C8;
  --brand:#B5324A; --on-brand:#FFFFFF; --band:#E9C2C9; --brand-soft:#FAE3E7;
  --acc:#F5B921; --acc-ink:#3D2C02; --acc2-ink:#FFFFFF; --acc2:#1F6F5C;
  --hero-from:rgba(34,18,32,.74); --hero-to:rgba(34,18,32,.06);
}
[data-palette="spring"]{
  --bg:#FBFDF7; --surf:#FFFFFF; --surf2:#ECF5E5; --deep:#22381F;
  --ink:#24381F; --muted:#5C7255; --line:#D9E8CF;
  --brand:#4E9A51; --on-brand:#FFFFFF; --band:#CAE1CB; --brand-soft:#E6F3E5;
  --acc:#EE9EB4; --acc-ink:#4A1F2C; --acc2-ink:#24381F; --acc2:#8FCBAE;
  --hero-from:rgba(20,40,20,.68); --hero-to:rgba(20,40,20,.04);
}
[data-palette="summer"]{
  --bg:#FFFCF0; --surf:#FFFFFF; --surf2:#FFF2D2; --deep:#33301C;
  --ink:#332F1C; --muted:#6E6A4C; --line:#EDE0B8;
  --brand:#E08A12; --on-brand:#FFFFFF; --band:#F6DCB8; --brand-soft:#FDEFD5;
  --acc:#3E8FB0; --acc-ink:#FFFFFF; --acc2-ink:#332F1C; --acc2:#7CB342;
  --hero-from:rgba(48,40,10,.66); --hero-to:rgba(48,40,10,.04);
}
[data-palette="autumn"]{
  --bg:#FDF7EE; --surf:#FFFFFF; --surf2:#F3E6D3; --deep:#33251A;
  --ink:#32251A; --muted:#6F5B46; --line:#E5D1B9;
  --brand:#B5541F; --on-brand:#FFFFFF; --band:#E9CCBC; --brand-soft:#F8E7DA;
  --acc:#C99A28; --acc-ink:#3A2B04; --acc2-ink:#FFFFFF; --acc2:#4F6B3C;
  --hero-from:rgba(44,26,12,.72); --hero-to:rgba(44,26,12,.05);
}
[data-palette="winter"]{
  --bg:#F7F9FB; --surf:#FFFFFF; --surf2:#E7EEF3; --deep:#1E2930;
  --ink:#20282F; --muted:#5D6A73; --line:#D4DEE6;
  --brand:#2F6C8F; --on-brand:#FFFFFF; --band:#C1D3DD; --brand-soft:#E2EDF3;
  --acc:#C86A4C; --acc-ink:#FFFFFF; --acc2-ink:#20282F; --acc2:#8FA9B8;
  --hero-from:rgba(18,30,38,.70); --hero-to:rgba(18,30,38,.06);
}
[data-palette="christmas"]{
  --bg:#FBF7F0; --surf:#FFFFFF; --surf2:#EFE6D6; --deep:#17301F;
  --ink:#16301E; --muted:#53705C; --line:#DCCFBA;
  --brand:#A4262C; --on-brand:#FFFFFF; --band:#E4BEC0; --brand-soft:#F7E4E1;
  --acc:#C9A227; --acc-ink:#332802; --acc2-ink:#FFFFFF; --acc2:#1E5B3E;
  --hero-from:rgba(12,32,20,.74); --hero-to:rgba(12,32,20,.06);
}
/* ============================================================
   FONT PAIRINGS
   ============================================================ */
[data-fonts="editorial"]{ --f-display:"Fraunces",Georgia,serif; --f-body:"Figtree",system-ui,sans-serif;
  --dw:600; --dt:-.022em; --ds:1; --dcase:none; }
[data-fonts="elegance"]{ --f-display:"Instrument Serif",Georgia,serif; --f-body:"Karla",system-ui,sans-serif;
  --dw:400; --dt:-.012em; --ds:1.12; --dcase:none; }
[data-fonts="modern"]{ --f-display:"Bricolage Grotesque",system-ui,sans-serif; --f-body:"Work Sans",system-ui,sans-serif;
  --dw:700; --dt:-.032em; --ds:.98; --dcase:none; }
[data-fonts="playful"]{ --f-display:"Baloo 2",system-ui,cursive; --f-body:"Nunito",system-ui,sans-serif;
  --dw:700; --dt:-.012em; --ds:1.02; --dcase:none; }
[data-fonts="contrast"]{ --f-display:"Gloock",Georgia,serif; --f-body:"Manrope",system-ui,sans-serif;
  --dw:400; --dt:-.018em; --ds:1.04; --dcase:none; }
/* ============================================================
   BASE
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background-color .45s ease, color .45s ease;
}
img{max-width:100%; display:block}
h1,h2,h3,.disp{
  font-family:var(--f-display); font-weight:var(--dw);
  letter-spacing:var(--dt); line-height:1.05; text-wrap:balance; margin:0;
}
a{color:inherit}
button{font:inherit; cursor:pointer; border:none; background:none; color:inherit}
:focus-visible{outline:3px solid var(--acc); outline-offset:3px; border-radius:6px}
.shell{max-width:1240px; margin:0 auto; padding:0 26px}
@media (max-width:720px){ .shell{padding:0 18px} body{font-size:16px} }
.eyebrow{
  font-family:var(--f-body); font-weight:700; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brand);
  display:block; margin-bottom:14px;
}
.lede{font-size:1.12rem; color:var(--muted); max-width:60ch}
.btn{
  display:inline-flex; align-items:center; gap:9px; padding:14px 26px;
  border-radius:999px; font-weight:700; font-size:.96rem; text-decoration:none;
  background:var(--brand); color:var(--on-brand); letter-spacing:.005em;
  transition:transform .18s ease, box-shadow .18s ease, background-color .3s ease;
  box-shadow:0 2px 0 rgba(0,0,0,.07);
}
.btn:hover{transform:translateY(-2px); box-shadow:0 8px 22px -10px rgba(0,0,0,.45)}
.btn.ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 2px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 2px var(--brand)}
.btn.acc{background:var(--acc); color:var(--acc-ink)}
.btn.sm{padding:10px 18px; font-size:.86rem}
/* Book a place and the capacity statement side by side, wrapping on a phone. */
.btn-row{display:inline-flex; flex-wrap:wrap; gap:10px; align-items:center}
.capacity-pill{cursor:default}
.capacity-pill:hover{transform:none; box-shadow:none}
/* ---------------- header ---------------- */
/* Locality strip. Sits above the sticky header and scrolls away with the page,
   so the bar that follows you down stays compact. */
.topline{
  background:var(--deep); color:rgba(255,255,255,.84); text-align:center;
  font-family:"Figtree",sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; padding:9px 16px;
}
/* Two things now, centred together, with the number reading as a link without
   shouting: it is a strip of small print, not a call to action. */
.topline{display:flex; justify-content:center; align-items:center; gap:18px; flex-wrap:wrap}
.topline a{color:inherit; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35)}
.topline a:hover{border-bottom-color:currentColor}
header.site{
  position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--line);
}
.bar{display:flex; align-items:center; gap:22px; padding-top:11px; padding-bottom:11px}
.brandmark{display:flex; align-items:flex-end; gap:12px; text-decoration:none; flex:none}
.brandmark img{height:86px; width:auto; object-fit:contain}
/* On the dark footer the mark's black script would disappear. Inverting it to a
   white silhouette merges the two donkeys into one blob, so the logo keeps its
   colour and sits on a light chip instead. */
.f-grid .brandmark img{background:#FBF8F0; border-radius:14px; padding:9px 12px}
nav.main{display:flex; gap:5px; margin-left:auto; flex-wrap:wrap}
nav.main a{
  text-decoration:none; padding:9px 13px; border-radius:999px; font-weight:600; font-size:.9rem;
  color:var(--ink); transition:background-color .2s ease;
}
nav.main a:hover{background:var(--surf2)}
.hdr-cta{display:flex; align-items:center; gap:12px; flex:none}
/* nav.main carried the `margin-left:auto` that pushed everything right. Hiding
   it below 1080 removed that push too, which left the menu and the buttons
   floating next to the logo instead of against the right edge. */
@media (max-width:1080px){
  nav.main{display:none}
  .hdr-cta{margin-left:auto}
}
/* The shorthand `padding:x 0` on a .shell element wipes the container's
   side gutters — always set vertical padding longhand here. */
@media (max-width:620px){
  /* One row: logo, both pills, menu. Everything here is sized to make that fit
     rather than to look generous — at 390px the shell leaves 358px once the
     gutters are in, and the fixed parts (logo, menu, gaps) take about 100 of
     it. What is left has to hold "Bookings Available", which is the longest
     label on the header and therefore the thing that sets the type size. */
  .shell{padding-inline:16px}
  .bar{flex-wrap:nowrap; gap:8px}
  .hdr-cta{flex:0 1 auto; min-width:0; flex-wrap:nowrap; gap:6px; margin-left:auto}
  .hdr-cta > .status,
  .hdr-cta > .btn{
    font-size:.7rem; padding:9px 11px; gap:5px; white-space:nowrap;
    /* The status carries a 1px border and the button does not, which left the
       pair 2px different in height. A transparent border matches them without
       nudging the padding. */
    border:1px solid transparent;
  }
  .hdr-cta > .status{flex:0 1 auto; min-width:0; border-color:var(--line)}
  .hdr-cta > .btn{flex:0 0 auto}
  .brandmark img{height:52px}
  .menu summary{width:38px; height:38px}
  .hdr-cta > .menu{flex:0 0 auto}
  .hdr-cta > .btn.ghost{display:none} /* Contact is in the menu panel on a phone */
  .menu-panel .status{display:none}
  .hero-proof{gap:8px 0}
  .hero-proof i{display:none}
}
/* 360px phones — an iPhone SE, a good half of Android — do fit all four, so the
   fallback sits at 340 rather than the 380 I first guessed. Below that the row
   genuinely cannot hold it: the pill returns to the menu panel rather than the
   header overflowing the screen, and the information is still one tap away. */
@media (max-width:339px){
  .hdr-cta > .status{display:none}
  .menu-panel .status{display:inline-flex}
}
/* live status pill */
.status{
  display:inline-flex; align-items:center; gap:8px; padding:7px 15px 7px 12px;
  border-radius:999px; background:var(--brand-soft); color:var(--ink);
  font-size:.8rem; font-weight:700; border:1px solid var(--line); white-space:nowrap;
}
.dot{width:9px; height:9px; border-radius:50%; background:var(--brand); position:relative; flex:none}
.dot::after{content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid var(--brand); opacity:.35; animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.5}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
body.status-closed .dot{background:var(--muted)}
body.status-closed .dot::after{display:none}
body.status-closed .status{background:var(--surf2)}
.status .lbl-open{display:inline}
.status .lbl-closed{display:none}
body.status-closed .lbl-open{display:none}
body.status-closed .lbl-closed{display:inline}
/* ---------------- hero ---------------- */
.hero{
  /* No border-bottom. --line is a pale cream, which read as a white hairline
     bleeding between the dark photograph and whatever sits under it — most
     obviously now the dates band is a colour rather than near-black. The hero
     meets the next section directly. */
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:clamp(560px,78vh,820px);
}
/* Kept as `.hero .hero-media` rather than `.hero-media`. In the mockup a
   later `[data-admin]{position:relative}` rule won on equal specificity and
   dropped this out of absolute positioning, which put the image at its full
   natural height with the headline stranded underneath it. That rule is gone,
   but the extra specificity costs nothing and the failure was invisible. */
.hero .hero-media{position:absolute; inset:0}
.hero-media video, .hero-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero-media img{animation:drift 26s ease-in-out infinite alternate}
.hero-media[data-mode="video"] img{display:none}
.hero-media[data-mode="still"] video{display:none}
@keyframes drift{from{transform:scale(1.04) translate3d(0,0,0)} to{transform:scale(1.13) translate3d(-1.5%,-1.5%,0)}}
/* One continuous scrim: a diagonal that shades the copy side, plus a foot that
   carries the proof bar. Both fade to --hero-to, never to transparent black,
   so the tint stays in the palette's own hue. */
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--hero-from) 0%, var(--hero-to) 46%),
    linear-gradient(102deg, var(--hero-from) 0%, var(--hero-from) 26%, var(--hero-to) 78%);
}
.hero > .shell{width:100%}
.hero-inner{position:relative; z-index:2; padding-top:clamp(70px,11vw,132px); padding-bottom:clamp(30px,4vw,46px)}
.hero-copy{max-width:610px; color:#fff}
.hero h1{
  font-size:clamp(2.6rem,6.4vw,4.9rem); color:#fff; margin-bottom:20px;
  font-size:calc(clamp(2.6rem,6.4vw,4.9rem) * var(--ds));
  text-shadow:0 2px 30px rgba(0,0,0,.28);
}
.hero .kicker{
  display:inline-block; padding:7px 16px; border-radius:999px; margin-bottom:22px;
  background:var(--acc); color:var(--acc-ink); font-weight:800; font-size:.78rem;
  letter-spacing:.12em; text-transform:uppercase;
}
.hero p.intro{font-size:1.13rem; line-height:1.55; color:rgba(255,255,255,.94); margin:0 0 30px; max-width:52ch}
.hero-actions,.page-actions{display:flex; flex-wrap:wrap; gap:13px; align-items:center}
/* The same three buttons away from the hero, where they need room of their own
   rather than sitting under a headline. */
/* Centred, because away from the hero they sit under a sign-off rather than
   under a headline, and a left-aligned row there reads as a fourth paragraph. */
.page-actions{margin:26px 0 6px; justify-content:center}
.hero .btn.ghost{color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.hero .btn.ghost:hover{box-shadow:inset 0 0 0 2px #fff; background:rgba(255,255,255,.12)}
.hero-proof{
  position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:12px 30px; align-items:center;
  padding-top:16px; padding-bottom:26px; color:rgba(255,255,255,.94); font-size:.9rem; font-weight:600;
}
.hero-proof .stars{color:var(--acc); letter-spacing:2px; font-size:1rem}
.hero-proof i{opacity:.5; font-style:normal}
/* ---------------- sections ---------------- */
section{padding:clamp(58px,7.5vw,102px) 0}
.sec-head{max-width:66ch; margin-bottom:38px}
/* A heading with something opposite it. The heading keeps its own measure and
   the button goes to the far edge; below 720px it drops under rather than
   squeezing the names into a column. */
.sec-head-row{display:flex; align-items:flex-end; justify-content:space-between; gap:22px; flex-wrap:wrap; margin-bottom:38px}
.sec-head-row .sec-head{margin-bottom:0}
.sec-head-row .btn{flex:none}
@media (max-width:720px){ .sec-head-row{align-items:flex-start} }
.sec-head h2{font-size:calc(clamp(1.85rem,4.1vw,3rem) * var(--ds)); margin-bottom:14px}
/* status band */
/* Its own token rather than a mix computed at render time, so it can be picked
   in the admin like any other colour. The shipped value per palette is still
   30% of that palette's brand over its surface — a mid pastel of whatever green
   (or red, in Christmas) the palette is built on. */
.band{background:var(--band); color:var(--ink); padding:0}
.band .shell{display:flex; flex-wrap:wrap; gap:26px; align-items:center; justify-content:space-between; padding-top:26px; padding-bottom:26px}
.band h3{font-size:calc(1.35rem * var(--ds)); color:var(--ink); margin-bottom:5px}
.band p{margin:0; color:var(--muted); font-size:.93rem; max-width:66ch; line-height:1.55}
/* The longer booking note and five date chips cannot share a row at any width
   worth designing for, so the band is deliberately two rows: the note, then the
   dates. The measure is capped so the note does not run the full 1240. */
.band .shell > div:first-child{flex:1 1 100%}
/* align-items:center so the "See available slots" button sits level with the
   date pills rather than stretching to their row height. */
.band .dates{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.band .dates .btn{margin-left:6px}
.band .date{
  padding:8px 14px; border-radius:10px; background:var(--surf); color:var(--ink);
  font-weight:700; font-size:.86rem; white-space:nowrap; border:1px solid var(--line);
}
/* experiences */
.exp-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:22px}
/* Fixed-width cards, centred: a short last row sits in the middle rather than
   hugging the left or stretching to fill. */
.exp-grid > .exp{flex:0 0 calc((100% - 44px) / 3); min-width:0}
@media (max-width:1000px){.exp-grid > .exp{flex-basis:calc((100% - 22px) / 2)}}
@media (max-width:660px){.exp-grid > .exp{flex-basis:100%}}
/* The picture is a link now; it still has to behave like a block of image. */
a.exp-img{display:block; text-decoration:none; color:inherit}
/* Book it or read about it, side by side, wrapping on a narrow card. */
.exp-actions{display:flex; flex-wrap:wrap; gap:9px; margin-top:6px; align-items:center}
.exp{
  background:var(--surf); border:1px solid var(--line); border-radius:20px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease;
}
.exp:hover{transform:translateY(-5px); box-shadow:0 22px 44px -26px rgba(0,0,0,.4)}
.exp-img{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--surf2)}
.exp-img img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.exp:hover .exp-img img{transform:scale(1.05)}
.exp .price{
  position:absolute; left:14px; bottom:14px; padding:7px 14px; border-radius:999px;
  background:var(--surf); color:var(--ink); font-weight:800; font-size:.85rem; border:1px solid var(--line);
}
.exp .season{
  position:absolute; right:14px; top:14px; padding:5px 12px; border-radius:999px;
  background:var(--acc); color:var(--acc-ink); font-weight:800; font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase;
}
.exp-body{padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; gap:11px}
.exp-body h3{font-size:calc(1.4rem * var(--ds))}
.exp-body p{margin:0; color:var(--muted); font-size:.95rem; flex:1}
.exp-meta{display:flex; flex-wrap:wrap; gap:7px; margin-top:2px}
.tag{
  font-size:.74rem; font-weight:700; padding:5px 11px; border-radius:8px;
  background:var(--surf2); color:var(--muted); letter-spacing:.02em;
}
/* herd */
.herd{display:grid; grid-template-columns:repeat(4,1fr); gap:28px 18px}
@media (max-width:640px){ .herd{grid-template-columns:repeat(2,1fr)} }
.donk{text-align:center}
.donk .ring{
  aspect-ratio:1; border-radius:50%; overflow:hidden; border:4px solid var(--surf);
  box-shadow:0 0 0 2px var(--line), 0 14px 28px -18px rgba(0,0,0,.5);
  transition:transform .3s ease, box-shadow .3s ease; background:var(--surf2);
}
.donk:hover .ring{transform:translateY(-6px) rotate(-2deg); box-shadow:0 0 0 3px var(--brand), 0 20px 34px -18px rgba(0,0,0,.55)}
.donk img{width:100%; height:100%; object-fit:cover}
.donk b{display:block; margin-top:14px; font-family:var(--f-display); font-weight:var(--dw); font-size:1.15rem; letter-spacing:var(--dt)}
.donk span{display:block; font-size:.8rem; color:var(--muted); margin-top:2px}
/* reviews — strong position */
.rev-wrap{background:var(--surf2); border-radius:26px; padding:clamp(26px,4vw,46px); border:1px solid var(--line)}
.rev-top{display:flex; flex-wrap:wrap; gap:22px; align-items:center; justify-content:space-between; margin-bottom:30px}
.gscore{display:flex; align-items:center; gap:18px}
.gscore .num{font-family:var(--f-display); font-weight:var(--dw); font-size:3.4rem; line-height:1; letter-spacing:var(--dt)}
.gscore .stars{color:var(--acc); font-size:1.3rem; letter-spacing:3px}
.gscore small{display:block; color:var(--muted); font-size:.85rem; margin-top:5px; font-weight:600}
.glogo{display:inline-flex; align-items:center; gap:7px; font-weight:800; font-size:.95rem}
.glogo svg{width:19px; height:19px}
.rev-rail{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(232px,1fr); gap:14px; overflow-x:auto; padding-bottom:10px; scroll-snap-type:x mandatory}
.rev{
  background:var(--surf); border:1px solid var(--line); border-radius:16px; padding:16px 17px 15px;
  scroll-snap-align:start; display:flex; flex-direction:column; gap:9px;
}
.rev .stars{color:var(--acc); letter-spacing:2px; font-size:.95rem}
.rev p{margin:0; font-size:.88rem; line-height:1.5; color:var(--ink); flex:1}
.rev .who{display:flex; align-items:center; gap:9px; font-weight:700; font-size:.82rem}
.rev .av{
  width:28px; height:28px; border-radius:50%; background:var(--brand); color:var(--on-brand);
  display:grid; place-items:center; font-size:.85rem; font-weight:800; flex:none;
}
/* about */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4.5vw,62px); align-items:center}
/* An experience page has a price card and a calendar in the right column,
   so both sides start at the top; the contact page keeps its centring. */
.split-top{align-items:start}
/* A grid item defaults to min-width:auto, which means the widest thing inside it
   sets the column's width — so the calendar rail grew to fit five months
   instead of scrolling, and squeezed the words beside it into a ribbon. Both
   columns are allowed to be narrower than their contents; that is what lets the
   rail overflow, and overflowing is what puts the arrows on screen. */
.split > *{min-width:0}
@media (max-width:900px){ .split{grid-template-columns:1fr} }
.split .art{border-radius:22px; overflow:hidden; box-shadow:0 26px 50px -30px rgba(0,0,0,.55)}
/* The frame is the column; the photograph fills it. The original herd
   portraits are 460px squares and sat in the left two-thirds of the frame. */
.split .art img{width:100%; height:auto}
.split p{color:var(--muted)}
.sign{font-family:var(--f-display); font-size:1.2rem; color:var(--ink); font-weight:var(--dw); letter-spacing:var(--dt)}
/* support split */
.support{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media (max-width:800px){ .support{grid-template-columns:1fr} }
.sup{
  border-radius:22px; padding:32px 30px; border:1px solid var(--line);
  display:flex; flex-direction:column; gap:13px; background:var(--surf);
}
.sup.hi{background:var(--brand); color:var(--on-brand); border-color:transparent}
.sup.hi p{color:rgba(255,255,255,.9)}
/* Anything secondary inside the brand-coloured card has to be light. The muted
   token is tuned for the cream ground and disappears against the green. */
.sup.hi .quiet, .sup.hi label span{color:rgba(255,255,255,.72)}
.sup.hi .btn{background:var(--acc); color:var(--acc-ink)}
.sup h3{font-size:calc(1.6rem * var(--ds))}
.sup p{margin:0; color:var(--muted); flex:1}
/* gallery */
.gal{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.gal figure{margin:0; border-radius:16px; overflow:hidden; aspect-ratio:3/2; background:var(--surf2)}
.gal img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.gal figure:hover img{transform:scale(1.07)}
.gal figure.tall{grid-row:span 2; aspect-ratio:3/4}
@media (max-width:820px){ .gal{grid-template-columns:repeat(2,1fr)} .gal figure.tall{grid-row:span 1; aspect-ratio:3/2} }
/* faqs */
.faq{border-top:1px solid var(--line)}
.faq:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{
  padding:19px 44px 19px 0; font-weight:700; font-size:1.02rem; position:relative;
  list-style:none; cursor:pointer;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-size:1.5rem; color:var(--brand); font-weight:400; transition:transform .25s ease;
}
.faq[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq .ans{padding:0 44px 22px 0; color:var(--muted); font-size:.97rem; max-width:74ch}
/* visit */
.visit{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(26px,4vw,54px); align-items:start}
@media (max-width:880px){ .visit{grid-template-columns:1fr} }
.info-rows{display:grid; gap:2px; border-radius:18px; overflow:hidden; border:1px solid var(--line)}
.info-row{display:grid; grid-template-columns:150px 1fr; gap:16px; padding:16px 20px; background:var(--surf)}
.info-row dt{font-weight:800; font-size:.85rem; letter-spacing:.03em; color:var(--muted); text-transform:uppercase; margin:0}
.info-row dd{margin:0; font-size:.97rem}
@media (max-width:520px){ .info-row{grid-template-columns:1fr; gap:4px} }
/* footer */
/* No margin-top. It left a 20px band of the page background showing between
   the last section and the footer — invisible when the section above happened
   to be the same colour, a pale leak when it was tinted. */
footer.site{background:var(--deep); color:rgba(255,255,255,.82); padding:64px 0 30px}
footer.site h4{font-family:var(--f-body); font-size:.8rem; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.5); margin:0 0 14px; font-weight:800}
.f-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px; padding-bottom:38px; border-bottom:1px solid rgba(255,255,255,.14)}
@media (max-width:860px){ .f-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .f-grid{grid-template-columns:1fr} }
footer.site a{color:rgba(255,255,255,.82); text-decoration:none; display:block; padding:4px 0; font-size:.93rem}
footer.site a:hover{color:#fff; text-decoration:underline}
.f-bot{padding-top:22px; font-size:.8rem; color:rgba(255,255,255,.5); display:flex; flex-wrap:wrap; gap:8px 26px}
/* The Design Studio, the admin hotspots and the "written by Claude" marks
   lived here. They were pitch devices for the static mockup and have no
   place on the site itself — the hotspot rule in particular set
   position:relative on [data-admin], which silently broke the hero. */

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
}
/* reveal */
.rv{opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1; transform:none} }
/* ============================================================
   SEASON CALENDAR — every month that has a date, side by side.
   Never opens on an empty month, because empty months are not drawn.
   ============================================================ */
.calendar{margin-top:34px}
.cal-head h3{margin:0 0 4px}
.cal-head .sub{margin:0 0 18px; color:var(--muted); font-size:.94rem}
/* Two months at a time, the rest a scroll away.
   The calendar lives in a half-width column now, which fits two and no more.
   Walking runs to December, and five months stacked into a tower pushed
   everything under it off the screen. Snap so a page always lands on a month
   boundary rather than half of one. */
.cal-months{
  display:grid; gap:18px; grid-auto-flow:column;
  grid-auto-columns:calc(50% - 9px);
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:4px; scrollbar-width:thin;
}
.cal-months > *{scroll-snap-align:start}
/* One at a time where two would be 90px wide each. */
@media (max-width:600px){ .cal-months{grid-auto-columns:100%} }
.cal-head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px}
.cal-nav{display:flex; gap:8px; flex:none}
.cal-btn{
  width:34px; height:34px; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; font-size:1.1rem; line-height:1;
  border:1px solid var(--line); background:var(--surf); color:var(--ink);
}
.cal-btn:hover:not(:disabled){background:var(--brand); color:var(--on-brand); border-color:var(--brand)}
.cal-btn:disabled{opacity:.32; cursor:default}
/* The UA's [hidden] rule is display:none, but a class selector beats it. */
.cal-nav[hidden]{display:none}
.cal-month{
  background:var(--surf); border:1px solid var(--line);
  border-radius:14px; padding:14px 14px 16px;
  /* Capped, because auto-fit gives a lone month the whole row: Afternoon Tea
     has dates in one month only and stretched to 1188px with day cells 163px
     square. A month is a month-sized object however many of them there are. */
  width:100%; max-width:268px;
}
.cal-month h4{
  margin:0 0 10px; font-size:.95rem; letter-spacing:.01em;
  text-align:center; color:var(--ink);
}
.cal-grid{display:grid; grid-template-columns:repeat(7, 1fr); gap:3px}
.cal-dow{
  font-size:.66rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); text-align:center; padding-bottom:5px;
}
.cal-pad{aspect-ratio:1}
.cal-day{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-size:.8rem; color:var(--muted); opacity:.45; border-radius:8px;
}
.cal-day.is-open,.cal-day.is-full{opacity:1; font-weight:700; text-decoration:none}
.cal-day.is-open{
  background:var(--brand); color:var(--on-brand);
  transition:transform .14s ease, box-shadow .14s ease;
}
.cal-day.is-open:hover,.cal-day.is-open:focus-visible{
  transform:translateY(-2px); box-shadow:0 6px 16px -8px rgba(0,0,0,.55);
}
.cal-day.is-nearly{background:var(--acc); color:var(--acc-ink)}
.cal-day.is-full{
  background:var(--surf2); color:var(--muted);
  box-shadow:inset 0 0 0 1px var(--line);
}
.cal-key{
  display:flex; flex-wrap:wrap; gap:6px 20px; margin:16px 0 0;
  font-size:.82rem; color:var(--muted);
}
.cal-key span{display:inline-flex; align-items:center; gap:7px}
.cal-key i{width:13px; height:13px; border-radius:4px; display:inline-block}
.cal-key .k-open{background:var(--brand)}
.cal-key .k-nearly{background:var(--acc)}
.cal-key .k-full{background:var(--surf2); box-shadow:inset 0 0 0 1px var(--line)}
/* ============================================================
   PHOTOGRAPHS — one justified row at a common height.
   Two centre themselves; twenty scroll. Same component either way.
   ============================================================ */
.shots{margin-top:40px}
.shots-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px}
.shots-head h3{margin:0}
.shots-nav{display:flex; gap:8px}
/* The UA's [hidden] rule is display:none, but a class selector beats it, so
   without this the arrows stay visible after the script hides them. */
.shots-nav[hidden]{display:none}
.shots-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  background:var(--surf); color:var(--ink); font-size:1.3rem; line-height:1;
  cursor:pointer; transition:background .15s ease, border-color .15s ease;
}
.shots-btn:hover{background:var(--brand); color:var(--on-brand); border-color:var(--brand)}
.strip{
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:6px; scrollbar-width:thin;
  /* Bleeds to the edge on a phone so the row reads as continuing. */
  margin-inline:-4px; padding-inline:4px;
}
/* When everything fits, centre it rather than leaving a gap on the right. */
.strip.is-static{justify-content:center; scroll-snap-type:none; overflow-x:visible; flex-wrap:wrap}
.strip::-webkit-scrollbar{height:8px}
.strip::-webkit-scrollbar-thumb{background:var(--line); border-radius:8px}
.shot{
  margin:0; flex:0 0 auto; scroll-snap-align:start;
  /* The common baseline: every photograph is this tall and as wide as its
     own proportions make it, so nothing is cropped and the row stays level. */
  height:clamp(230px, 32vw, 340px);
  aspect-ratio:var(--ratio, 1.5);
  border-radius:12px; overflow:hidden; background:var(--surf2);
  position:relative;
}
.shot img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease}
.shot:hover img{transform:scale(1.04)}
.shot figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:22px 12px 9px;
  font-size:.8rem; color:#fff;
  background:linear-gradient(to top, rgba(0,0,0,.62), transparent);
}
.shots-credit{margin:12px 0 0; font-size:.8rem; color:var(--muted)}
/* Lightbox */
.lb{
  position:fixed; inset:0; z-index:80; display:none;
  align-items:center; justify-content:center; gap:10px;
  background:rgba(12,12,10,.92); padding:24px;
}
.lb.on{display:flex}
.lb img{max-width:min(1200px, 92vw); max-height:88vh; border-radius:10px; object-fit:contain}
.lb button{
  background:rgba(255,255,255,.12); color:#fff; border:0; cursor:pointer;
  width:46px; height:46px; border-radius:50%; font-size:1.6rem; line-height:1; flex:none;
}
.lb button:hover{background:rgba(255,255,255,.24)}
.lb-close{position:absolute; top:18px; right:18px; font-size:1.5rem}
@media (max-width:640px){
  .lb{padding:12px}
  .lb-prev,.lb-next{position:absolute; bottom:18px}
  .lb-prev{left:22px} .lb-next{right:22px}
}
@media (prefers-reduced-motion: reduce){
  .shot img,.cal-day.is-open{transition:none}
  .shot:hover img{transform:none}
}
/* ============================================================
   PRICE CARD — replaces the old filled panel on an experience page.
   The price is the thing being read, so it is the biggest thing there,
   and nothing frames it: no heading, no box, no colour to fight the
   photograph beside it.
   ============================================================ */
/* Not sticky any more. Following the reader down made sense when this column
   held nothing but the price and the left one ran for screens; now the calendar
   sits underneath it in the same column, and a pinned price card means the
   dates scroll up behind it and disappear. */
.price-card{
  border-top:3px solid var(--ink); padding-top:20px;
}
.price{
  margin:0; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  line-height:1;
}
.price b{
  font-family:var(--f-display); font-weight:var(--dw);
  font-size:clamp(2.6rem, 5vw, 3.6rem);
  letter-spacing:var(--dt); color:var(--ink);
}
.price span{font-size:1rem; color:var(--muted)}
/* Each figure stays with the words it belongs to when the row wraps. */
.price{gap:10px 20px}
.price .pp{display:inline-flex; align-items:baseline; gap:8px; font-size:inherit}
.price-card .btn{margin-top:22px}
.price-when{
  margin:14px 0 0; font-size:.88rem; color:var(--muted); line-height:1.5;
}
.price-when a{color:var(--ink); font-weight:600}
@media (max-width:860px){
  .price-card{position:static; margin-top:8px}
}
/* The pre-booking notice. Deliberately not styled as a warning: it is a
   welcome with a condition, not an error, and red boxes on a page about
   donkeys read as something having gone wrong. */
.must-book{
  margin-top:28px; padding:16px 20px;
  background:var(--brand-soft); border-left:3px solid var(--brand);
  border-radius:0 12px 12px 0;
  font-size:.95rem; line-height:1.6; color:var(--ink);
}
.must-book b{display:block; margin-bottom:3px}
/* Footer social row and the not-for-profit line. */
.f-social{display:flex; gap:10px; margin-top:18px}
/* Scoped through footer.site on purpose. The generic `footer.site a` rule sets
   display:block and padding:4px 0, and at 0,1,2 it outranks a bare `.f-social a`
   — which left every icon pinned to the top-left of its circle. Matching that
   specificity is the fix; !important would only hide the collision. */
footer.site .f-social a{
  width:38px; height:38px; padding:0; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.78); background:rgba(255,255,255,.08);
  transition:background .16s ease, color .16s ease, transform .16s ease;
}
footer.site .f-social a:hover,footer.site .f-social a:focus-visible{
  background:var(--acc); color:var(--acc-ink); transform:translateY(-2px); text-decoration:none;
}
.f-social svg{display:block; flex:none}
.f-notforprofit{
  margin:34px 0 0; padding-top:22px;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:.95rem; font-weight:600; color:rgba(255,255,255,.9);
}
.f-notforprofit + .f-bot{border-top:0; margin-top:10px; padding-top:0}
@media (prefers-reduced-motion: reduce){ footer.site .f-social a{transition:none} }
/* Compact review cards. A teaser under the stars, the whole card a link to the
   reviews page — the home page is an invitation to read them, not the place
   to read them. Equal heights because every teaser is cut to the same length. */
.rev{cursor:pointer; text-decoration:none; color:inherit; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
.rev:hover,.rev:focus-visible{transform:translateY(-3px); box-shadow:0 12px 26px -18px rgba(0,0,0,.5); border-color:var(--brand)}
.rev p{display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.rev-top{margin-bottom:22px}
@media (prefers-reduced-motion: reduce){ .rev{transition:none} .rev:hover{transform:none} }
/* ============================================================
   WHAT'S ON — the month tile that fills the sixth cell of the
   experiences grid. Same card shell as an experience so the row
   reads as one set, not a card and a widget.
   ============================================================ */
.whats-on .exp-body{padding:24px 22px 22px; gap:14px}
.whats-on h3{font-size:calc(1.25rem * var(--ds)); margin:0}
.wo-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.wo-dow{
  font-size:.64rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); text-align:center; padding-bottom:6px;
}
.wo-pad{aspect-ratio:1}
.wo-day{
  aspect-ratio:1; border-radius:8px; position:relative;
  display:flex; align-items:center; justify-content:center;
  font-size:.78rem; color:var(--muted); opacity:.45;
}
.wo-day.is-on{
  opacity:1; font-weight:700; color:var(--ink);
  background:var(--surf2); padding-bottom:7px;
}
/* Dots sit under the numeral rather than beside it, so a day with three
   experiences on it is the same size as a day with one. */
.wo-dots{
  position:absolute; left:0; right:0; bottom:5px;
  display:flex; justify-content:center; gap:2px;
}
.wo-dots i{width:5px; height:5px; border-radius:50%; background:var(--muted); display:block}
.wo-key{display:flex; flex-direction:column; gap:6px; margin-top:2px}
.wo-key a{
  display:flex; align-items:center; gap:9px;
  font-size:.85rem; color:var(--ink); text-decoration:none; font-weight:600;
}
.wo-key a:hover{text-decoration:underline}
.wo-key i{width:11px; height:11px; border-radius:4px; flex:none; display:block}
.wo-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.wo-nav{display:flex; gap:4px; flex:none}
.wo-nav a,.wo-nav span{
  width:28px; height:28px; border-radius:50%; font-size:1.05rem; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
  color:var(--ink); border:1px solid var(--line);
}
.wo-nav span{opacity:.3}
.wo-nav a:hover{background:var(--brand); color:var(--on-brand); border-color:var(--brand)}
/* ============================================================
   MOBILE MENU — a <details> panel. Below 1080px this is the only
   navigation there is, so it must work with no JavaScript.
   ============================================================ */
.menu{display:none; position:relative}
.menu summary{
  list-style:none; cursor:pointer; width:42px; height:42px; border-radius:12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  border:1px solid var(--line); background:var(--surf);
}
.menu summary::-webkit-details-marker{display:none}
.menu summary span{
  display:block; width:19px; height:2px; border-radius:2px; background:var(--ink);
  transition:transform .18s ease, opacity .18s ease;
}
.menu[open] summary span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu[open] summary span:nth-child(2){opacity:0}
.menu[open] summary span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu-panel{
  position:absolute; right:0; top:calc(100% + 10px); z-index:60;
  min-width:min(84vw, 280px); padding:12px;
  background:var(--surf); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 26px 50px -28px rgba(0,0,0,.55);
  display:flex; flex-direction:column; gap:4px;
}
.menu-panel nav{display:flex; flex-direction:column}
.menu-panel a{
  padding:11px 13px; border-radius:10px; text-decoration:none;
  color:var(--ink); font-weight:600; font-size:.97rem;
}
.menu-panel a:hover{background:var(--surf2)}
.menu-panel .status{
  display:inline-flex; margin-top:6px; align-self:flex-start;
  /* The pill is hidden in the bar on a phone for want of room, so this is the
     only place the opening state appears there. */
}
@media (max-width:1080px){ .menu{display:block} }
@media (prefers-reduced-motion: reduce){ .menu summary span{transition:none} }
/* The sponsorship perks. A list because it is a list — the old site ran the
   six of them together in one sentence and the discount, which is the valuable
   one, was lost in the middle of it. */
.perks{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:7px}
.perks li{display:flex; align-items:flex-start; gap:10px; font-size:.95rem}
.perks li::before{
  content:""; width:6px; height:6px; margin-top:8px; border-radius:50%;
  background:var(--brand); flex:none;
}
/* ============================================================
   PROOF COLUMNS — Google reviews beside written testimonials.
   Two kinds of evidence, kept visually distinct: starred cards on
   one side, quoted letters on the other.
   ============================================================ */
.proof-cols{display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:start}
.proof-col > h3{margin:0 0 3px}
.proof-col > .sub{margin:0 0 18px; color:var(--muted); font-size:.9rem}
.proof-col .rev{margin-bottom:14px; cursor:default}
.proof-col .rev:hover{transform:none; box-shadow:none; border-color:var(--line)}
.letter{
  margin:0 0 16px; padding:20px 22px; background:var(--surf);
  border:1px solid var(--line); border-left:3px solid var(--brand); border-radius:0 14px 14px 0;
}
.letter p{margin:0 0 10px; font-size:.95rem; line-height:1.6; color:var(--ink)}
.letter p:last-of-type{margin-bottom:0}
.letter footer{
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;
}
.letter footer b{font-size:.92rem}
.letter footer span{font-size:.84rem; color:var(--muted)}
@media (max-width:860px){ .proof-cols{grid-template-columns:1fr; gap:36px} }
/* ============================================================
   STORIES — one per row, picture and words side by side,
   alternating. Replaces the photo strip where an experience has
   something to tell rather than just something to show.
   ============================================================ */
.stories{margin-top:42px}
.stories > h3{margin:0 0 3px}
.stories > .sub{margin:0 0 24px; color:var(--muted); font-size:.94rem}
.story{
  display:grid; grid-template-columns:minmax(0,260px) minmax(0,1fr); gap:26px;
  align-items:center; padding:22px 0; border-top:1px solid var(--line);
}
.story.no-photo{grid-template-columns:minmax(0,1fr)}
/* Alternating sides. The column template has to swap as well as the order —
   reordering alone put the picture in the 1fr column and squeezed the words
   into 260px, so every other story came out with a huge photograph and a
   column of text two words wide. */
.story.flip{grid-template-columns:minmax(0,1fr) minmax(0,260px)}
.story.flip .story-copy{order:1}
/* .story-embed as well as .story-img — the video wrapper is a different element
   and without it the player kept order 0, took the wide column and left the
   words in a 260px gutter. */
.story.flip .story-img,
.story.flip .story-embed{order:2}
.story-img{border-radius:14px; overflow:hidden; background:var(--surf2); aspect-ratio:4/3}
.story-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease}
.story:hover .story-img img{transform:scale(1.04)}
.story-copy h4{margin:0 0 9px; font-size:calc(1.18rem * var(--ds))}
.story-copy p{margin:0 0 9px; font-size:.96rem; line-height:1.62; color:var(--ink)}
.story-copy p:last-of-type{margin-bottom:0}
.story-link{
  display:inline-flex; align-items:center; gap:7px; margin-top:12px;
  font-weight:700; font-size:.9rem; color:var(--brand); text-decoration:none;
  border-bottom:2px solid transparent;
}
.story-link:hover{border-bottom-color:var(--brand)}
@media (max-width:720px){
  .story{grid-template-columns:minmax(0,1fr); gap:16px}
  .story.flip .story-img,
  .story.flip .story-embed{order:0}
  /* Full width on a phone would make a portrait video taller than the screen. */
  .story-embed{max-width:280px; margin-inline:auto}
}
@media (prefers-reduced-motion: reduce){
  .story-img img{transition:none}
  .story:hover .story-img img{transform:none}
}
/* The video, behind a click. Sized like a story photograph so the row keeps
   its rhythm whether it holds a picture or a player. */
.story-embed{
  position:relative; border-radius:14px; overflow:hidden;
  background:var(--deep);
  /* The proportions of the film itself. BBC CWR shot it for social, so it is
     portrait; a 4:3 landscape box would letterbox it and, before it loads,
     promise a shape the video does not have. */
  aspect-ratio:267/476;
}
.story-embed iframe{width:100%; height:100%; border:0; display:block}
.story-embed .play{
  width:100%; height:100%; border:0; cursor:pointer; color:#fff;
  background:linear-gradient(140deg, var(--brand) 0%, var(--deep) 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  font:inherit; padding:18px; text-align:center;
}
.story-embed .play:hover .play-icon{transform:scale(1.08)}
.play-icon{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.16); font-size:1.2rem; padding-left:4px;
  transition:transform .18s ease;
}
.play-note{font-weight:700; font-size:.95rem; display:block}
.play-note small{display:block; font-weight:500; font-size:.78rem; opacity:.78; margin-top:3px}
@media (prefers-reduced-motion: reduce){ .play-icon{transition:none} }
/* ============================================================
   PROSE — editorial body text: pages, experience copy, a donkey's
   own page, a news post. The only place on the site where a link
   sits inside a sentence rather than being a button, a card or a
   nav item, so it is the only place that needs to look like one.
   `a{color:inherit}` at the top of this file is right everywhere
   else and wrong here.
   ============================================================ */
.prose p a:not(.btn),.prose li a:not(.btn){
  color:var(--brand); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px;
}
.prose p a:not(.btn):hover,.prose li a:not(.btn):hover{text-decoration-thickness:2px}
/* ============================================================
   WAYS TO HELP — the three routes in that are not adopting a
   donkey. Equal-height cards so the row reads as three peers
   rather than a ranked list; the button sits on the floor of
   each card whatever the copy length above it.
   ============================================================ */
.ways{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.way{
  background:var(--surf); border:1px solid var(--line); border-radius:16px;
  padding:24px 24px 22px; display:flex; flex-direction:column; gap:10px;
}
.way h3{margin:0; font-size:calc(1.15rem * var(--ds))}
.way p{margin:0; font-size:.94rem; line-height:1.6; color:var(--muted); flex:1}
.way .btn{align-self:flex-start; margin-top:6px}
@media (max-width:900px){ .ways{grid-template-columns:1fr} }
/* The sponsor wall. */
.wall{margin-top:52px; text-align:center}
.wall-head{
  margin:0 0 20px; font-size:.82rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.wall-logos{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
  justify-content:center; align-items:center; gap:16px;
}
/* A white tile per logo — see the note in the sponsor route. */
.wall-logos li{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:18px 26px; display:flex; align-items:center; justify-content:center;
  min-width:180px; min-height:104px;
}
.wall-logos img{width:auto; height:auto; max-height:64px; max-width:200px; object-fit:contain}
@media (max-width:520px){ .wall-logos li{min-width:0; flex:1 1 100%} }
/* ============================================================
   NEWS POST MEDIA — a photograph or the video, in the flow of
   the words. Full column width, because these posts are the
   pictures; the caption is the small part.
   ============================================================ */
.post-shot{margin:22px 0; border-radius:14px; overflow:hidden; background:var(--surf2)}
.post-shot img,.post-shot video{display:block; width:100%; height:auto}
/* A tall phone photograph would otherwise fill three screens on its own. */
.post-shot img{max-height:78vh; object-fit:contain; background:var(--surf2)}
/* ============================================================
   PAGE HERO — the same film treatment as the home page, shorter.
   The home hero has to hold a kicker, a headline, a paragraph and
   three buttons; this one holds a title and a line, so at the
   home page's height it would be mostly empty sky.
   ============================================================ */
.hero.page-hero{min-height:clamp(320px,42vh,460px)}
.page-hero .hero-copy{max-width:44ch}
.page-hero h1{font-size:calc(clamp(2rem,4.6vw,3.1rem) * var(--ds))}
.page-hero .intro{margin-top:12px; font-size:calc(1.02rem * var(--ds))}
/* The still does not drift here. On a 20-second loop that never leaves the
   lawn, a slow zoom on the poster underneath it reads as the video stuttering
   at the moment it swaps in. */
.page-hero .hero-media img{animation:none}
/* ============================================================
   THE VISIT BLOCK — address, map and FAQs, now on the About
   page. `.visit` is the two-column grid the old page used and
   is defined above; these are the parts that are new.
   ============================================================ */
/* The column has no panel behind it any more, so the spacing that used to come
   from the card's padding has to be here instead. */
.visit-head{margin:14px 0 10px; font-size:calc(1.25rem * var(--ds))}
.visit-address{font-style:normal; font-size:1.05rem; line-height:1.7; font-weight:600}
.map{margin:22px 0 0; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:var(--surf)}
.map img{display:block; width:100%; height:auto}
.map figcaption{
  padding:8px 12px; font-size:.76rem; color:var(--muted); background:var(--surf);
  border-top:1px solid var(--line);
}
/* The attribution is a licence condition, not decoration — it keeps the
   underline that the rest of the site's small print does without. */
.map figcaption a{color:inherit; text-decoration:underline}
/* Address left, the button that acts on it right, on one line where there is
   room and stacked where there is not. */
.visit-top{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap}
.visit-top .btn{flex:none; margin-top:2px}
/* ============================================================
   THE SIXTH CELL — ask us something, or join the list. Two
   boxes stacked inside one card of the experiences grid, so
   the row still reads as six equal things.
   ============================================================ */
.exp-forms{display:flex; flex-direction:column; padding:0}
.exp-forms:hover{transform:none; box-shadow:none}
.tile-form{padding:20px 20px 18px; display:flex; flex-direction:column; gap:9px}
.tile-form + .tile-form{border-top:1px solid var(--line)}
.tile-list{background:var(--surf2); flex:1}
.tile-form h3{margin:0; font-size:calc(1.08rem * var(--ds))}
.tile-form p{margin:0; font-size:.86rem; line-height:1.5; color:var(--muted)}
/* The short enquiry form, wherever it appears — the home page tile and under
   the questions on About. One set of rules, because it is one form. */
.mini-form{display:flex; flex-direction:column; gap:8px; margin-top:2px}
.mini-form input,.mini-form textarea{
  width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:9px;
  font:inherit; font-size:.88rem; background:var(--surf); color:var(--ink);
}
.mini-form textarea{resize:vertical; min-height:64px}
.mini-form .btn{align-self:flex-start}
.tile-form .btn{align-self:flex-start}
.tile-form .joined{color:var(--ink)}
/* ============================================================
   NEWS TEASERS — three lines and a +, so a row of cards is a
   row of equal cards whatever length the posts happen to be.
   ============================================================ */
.teaser{margin:0}
.teaser.clamped{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
.more{
  align-self:flex-start; margin-top:2px; width:26px; height:26px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:50%; background:var(--surf);
  color:var(--brand); font-weight:700; line-height:1; text-decoration:none;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.more:hover,.more:focus-visible{background:var(--brand); color:var(--on-brand); border-color:var(--brand)}
/* Under the FAQs on About. Ruled off rather than boxed, so it reads as the last
   answer in the column rather than a second panel competing with the map. */
.ask-more{margin-top:26px; padding-top:22px; border-top:1px solid var(--line)}
.ask-more h3{margin:0 0 12px; font-size:calc(1.1rem * var(--ds))}
/* ============================================================
   SCRAPBOOK — every photograph an experience has, all at once,
   laid out like pictures stuck in an album rather than a rail
   that hides most of them behind a scroll. Columns rather than
   grid so tall and wide shots pack without being cropped: these
   are somebody's photographs, and cropping them to a common
   height is what the strip did wrong.
   ============================================================ */
/* Rows, not balanced columns, so a photograph left over at the end sits
   centred under the rest instead of hanging alone at the bottom of one column
   (the About page's ten split 3-3-4 that way). Every photograph in a row is
   the same height and keeps its own shape: its width is its ratio times the
   row height, so a portrait beside a landscape leaves no hole. */
.scrapbook{display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:18px; margin-top:4px; --snap-h:300px}
.snap{
  flex:0 1 calc(var(--ratio, 1.5) * var(--snap-h)); margin:0; padding:9px 9px 11px;
  background:#fff; border-radius:3px; box-shadow:0 8px 22px -14px rgba(0,0,0,.6);
  transform:rotate(-1.3deg); transition:transform .18s ease, box-shadow .18s ease;
}
/* A repeating tilt would read as a pattern, so the cycle is a prime length and
   the angles do not divide evenly into it. */
.snap:nth-child(2n){transform:rotate(1.1deg)}
.snap:nth-child(3n){transform:rotate(-0.5deg)}
.snap:nth-child(5n){transform:rotate(1.8deg)}
.snap:nth-child(7n){transform:rotate(-2deg)}
.snap:hover,.snap:focus-within{transform:rotate(0) scale(1.015); box-shadow:0 14px 30px -14px rgba(0,0,0,.55)}
.snap img{display:block; width:100%; height:auto; border-radius:2px; cursor:zoom-in}
.snap figcaption{margin-top:7px; font-size:.8rem; color:var(--muted); text-align:center}
/* Straight and still for anyone who has asked for less movement. */
@media (prefers-reduced-motion: reduce){
  .snap,.snap:hover{transform:none; transition:none}
}
@media (max-width:520px){ .scrapbook{gap:12px; --snap-h:150px} .snap{padding:6px 6px 8px} }
/* The agency credit above the small print. Sized by the mark's height rather
   than its width — it is mostly whitespace on the left, so matching widths with
   the text beside it would make it look twice as big as it is. */
.f-by{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:26px 0 0; padding-top:20px; border-top:1px solid rgba(255,255,255,.12);
  font-size:.82rem; color:rgba(255,255,255,.6);
}
/* The mark is inlined, so its two halves take their colour from here. The R
   follows the palette — --band rather than --brand, because this footer paints
   itself from --deep and the mid-tone brand goes muddy on it. The 4 stays Red4
   red, lifted from #b91e24: brand red is drawn for white paper. */
/* footer.site a is display:block, which would stack the wording above the mark —
   so this needs the same specificity to win. */
footer.site a.built-by{
  display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
  padding:0; color:rgba(255,255,255,.6);
  --r4-red:#d2373d;
  --r4-r:var(--band);
}
footer.site a.built-by:hover{text-decoration:none; color:#fff}
.f-by + .f-bot{border-top:0; margin-top:14px; padding-top:0}
/* The season calendar sits in the right-hand column now, under the price. */
.split-top .calendar{margin-top:22px}
/* The availability line above an experience description. Reads as a label, not
   a sentence: it is the same fact as the badge on the hero, said again where
   somebody starts reading. */
.exp-status{
  margin:0 0 14px; display:inline-block; padding:6px 14px; border-radius:999px;
  background:var(--brand-soft); color:var(--brand);
  font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
/* ============================================================
   INFO ON THE DAY — the practical detail under the calendar,
   for an experience that has more to say than a description.
   Held to a reading measure rather than the full page width;
   it is a dozen paragraphs and nobody reads a 150-character line.
   ============================================================ */
.day-info{margin-top:44px; padding-top:34px; border-top:1px solid var(--line); max-width:74ch}
.day-info h2{font-size:calc(clamp(1.5rem,3vw,2rem) * var(--ds)); margin-bottom:16px}
.day-info p{margin:0 0 14px; line-height:1.7}
.day-info p:last-child{margin-bottom:0}
.day-info a{color:var(--brand); text-decoration:underline; text-underline-offset:3px}

/* The house credit. Only the size and position are decided here — the artwork,
   its animation, the word beneath it and that word's colour are all served from
   red4digital, so one change there reaches every site we have built. */
.built-by {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-decoration: none;
  --r4-red: #b91e24;
}
.r4-mark-slot {
  width: var(--r4-mark-h, 76px); height: var(--r4-mark-h, 76px);
  display: block; flex: none;
}
.r4-mark-slot > svg, .r4-mark-slot > span { width: 100%; height: 100%; display: block; }
.r4-mark { height: 100%; width: 100%; display: block; }
.r4-px rect { fill: var(--r4-red); transition: fill 0.2s ease; }
.built-by:hover .r4-px rect { fill: currentColor; }
/* Brand red is drawn for white paper and goes muddy on a dark footer. */
.site-footer .built-by, .footer .built-by { --r4-red: #d2373d; }

/* The credit's wording and its name.
   The label is the site's own footerCredit setting, not a literal — we design
   some sites we do not host, and a stamp claiming otherwise is a lie printed on
   every page. The name shows only on hover, positioned absolutely so revealing
   it cannot nudge the footer about.

   NOTHING HERE UNDERLINES, and it takes this many selectors to say so. The
   footer's own `.site-footer a:hover { text-decoration: underline }` scores
   (0,2,1) and beat a plain `.built-by:hover` at (0,2,0) — so the credit was
   underlined on hover despite a rule that read as though it had settled it.
   Adding the wrapper class takes these to (0,3,0), which wins on merit rather
   than on !important. */
.built-by, .built-by:hover,
.built-by span, .built-by:hover span,
.site-footer .built-by, .site-footer .built-by:hover,
.site-footer .built-by span, .site-footer .built-by:hover span,
.f-by .built-by, .f-by .built-by:hover,
.f-by .built-by span, .f-by .built-by:hover span,
.footer .built-by, .footer .built-by:hover { text-decoration: none; }

.built-by-label {
  font-size: 0.52rem; letter-spacing: 0.13em; text-transform: uppercase;
  line-height: 1; margin-bottom: 7px; white-space: nowrap;
  color: var(--r4-credit-label, #c9a227);
}
.built-by-name {
  position: absolute; left: 50%; bottom: -0.85rem; transform: translate(-50%, 2px);
  font-size: 0.54rem; letter-spacing: 0.11em; text-transform: uppercase;
  line-height: 1; white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.built-by:hover .built-by-name, .built-by:focus-visible .built-by-name {
  opacity: 1; transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) { .built-by-name { transition: none; } }