/*
Theme Name: Cabo London
Theme URI: https://cabolondon.com
Description: Warm plaster and terracotta. The front end for Cabo — the bar at 5 Minories in the City. Light by day, espresso after dark. Private hire, cocktails, day drinking and Friday–Saturday late, all sold on one site. Degrades cleanly with every plugin switched off.
Author: Cococure
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: cabo
*/

/* ═══════════════════════════════════════════════════════════════
   1. TOKENS

   Warm plaster is the ground. Terracotta does all the pointing.
   Espresso is a deliberate section treatment for after-dark
   content and the footer — not the default.

   Measured contrast (sRGB, WCAG 2.1):
     --ink        on --plaster    14.17:1
     --ink        on --plaster-2  12.87:1
     --ink-muted  on --plaster     5.58:1
     --ink-muted  on --plaster-2   5.07:1
     --terracotta-deep on --plaster 6.80:1
     --terracotta on --plaster      4.37:1  FAILS AA for text — FILL ONLY
     --on-terra   on --terracotta   4.66:1
     --bone       on --espresso    15.29:1
     --bone-soft  on --espresso     7.26:1
     --terracotta-soft on --espresso 6.21:1

   So: --terracotta is a FILL and a RULE colour only — backgrounds,
   borders, bullets, accent-color. It is never set as `color` on a
   light ground: any terracotta WORD or glyph uses --terracotta-deep
   (6.80:1). Text on a terracotta fill is --on-terra #FFF8F2
   (4.66:1), never --plaster (4.37:1), and never at reduced opacity,
   which silently drops it below 4.5:1. --ink-soft from the
   brand palette only clears 4.5:1 on the lightest ground, so
   muted body copy uses --ink-muted.
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* brand */
  --terracotta:#C2492D;
  --terracotta-deep:#94331E;
  --terracotta-soft:#E08466;
  --terracotta-wash:#F6E3DB;
  --clay:#D98A5F;
  --olive:#5E6B4F;
  --plaster:#F7F1E9;
  --plaster-2:#EFE6DA;
  --sand:#E2D5C3;
  --espresso:#241A15;
  --espresso-2:#33251E;
  --ink:#2A201B;
  --ink-soft:#7C6B60;
  --bone:#F7F2EC;
  --bone-soft:#B9A696;

  /* derived, for contrast */
  --ink-muted:#6E5D53;
  --on-terra:#FFF8F2;

  /* current ground — flipped by .is-dark so components adapt */
  --ground:var(--plaster);
  --surface:var(--plaster-2);
  --fg:var(--ink);
  --fg-muted:var(--ink-muted);
  --accent:var(--terracotta-deep);
  --hair:var(--sand);

  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;

  --gutter:clamp(20px,5vw,56px);
  --max:1200px;
  --narrow:760px;
  --radius:3px;
  --head-h:66px;
}

/* Dark ground. Applied to a section (.band--dark) or the footer. */
.is-dark{
  --ground:var(--espresso);
  --surface:var(--espresso-2);
  --fg:var(--bone);
  --fg-muted:var(--bone-soft);
  --accent:var(--terracotta-soft);
  --hair:#4A362C;
}

/* ═══════════════════════════════════════════════════════════════
   2. RESET + BASE
   ═══════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 12px)}
body{
  margin:0;
  background:var(--plaster);
  color:var(--ink);
  font-family:var(--body);
  font-weight:400;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2{font-family:var(--display);font-weight:500;margin:0;line-height:1.04;letter-spacing:-.01em;
  font-variation-settings:'opsz' 96,'SOFT' 0,'WONK' 0}
h3,h4,h5,h6{font-family:var(--body);font-weight:500;margin:0;line-height:1.2;letter-spacing:.005em}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 1.05em;padding-left:1.15em}
li{margin-bottom:.35em}
hr{height:1px;border:0;background:var(--hair);margin:0}
strong,b{font-weight:500}
small{font-size:14px}
figure{margin:0}
address{font-style:normal}
button{font:inherit}
table{border-collapse:collapse;width:100%}

/* Accessibility furniture */
.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--terracotta);color:var(--on-terra);
  padding:12px 18px;font-size:14px;font-weight:500;letter-spacing:.06em;
}
.skip:focus{left:10px;top:10px}
:focus-visible{outline:3px solid var(--terracotta-deep);outline-offset:3px;border-radius:2px}
.is-dark :focus-visible,.site-foot :focus-visible{outline-color:var(--terracotta-soft)}
::selection{background:var(--terracotta);color:var(--on-terra)}
.vh{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   3. LAYOUT PRIMITIVES
   ═══════════════════════════════════════════════════════════════ */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:calc(var(--narrow) + var(--gutter) * 2)}

.band{
  background:var(--ground);color:var(--fg);
  padding-block:clamp(56px,9vw,112px);
  position:relative;
}
.band--plaster{--ground:var(--plaster);--surface:var(--plaster-2)}
.band--surface{--ground:var(--plaster-2);--surface:var(--plaster)}
.band--wash{--ground:var(--terracotta-wash);--surface:#FFFFFFCC;--hair:#E3C3B6}
.band--tight{padding-block:clamp(40px,6vw,68px)}
.band + .band--plaster,.band--plaster + .band--plaster{border-top:1px solid var(--sand)}

.eyebrow{
  font-family:var(--body);font-size:12px;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--accent);margin:0 0 16px;
}
.band-head{max-width:62ch}
.band-head h2{font-size:clamp(30px,5.4vw,52px);margin-bottom:18px}
.band-head .lede{font-size:clamp(17px,1.6vw,19px);color:var(--fg-muted);max-width:56ch}
.band-head--split{display:grid;gap:18px 48px;max-width:none}
@media(min-width:900px){
  .band-head--split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:end}
  .band-head--split .lede{margin-bottom:6px}
}

/* ═══════════════════════════════════════════════════════════════
   4. BUTTONS + LINKS
   ═══════════════════════════════════════════════════════════════ */
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 26px;
  font-family:var(--body);font-size:14px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  border:1px solid var(--terracotta);border-radius:var(--radius);
  background:var(--terracotta);color:var(--on-terra);
  cursor:pointer;text-align:center;
  transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease;
}
.btn:hover,.btn:focus-visible{background:var(--terracotta-deep);border-color:var(--terracotta-deep);color:var(--on-terra)}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent;color:var(--terracotta-deep);border-color:var(--terracotta)}
.btn--ghost:hover,.btn--ghost:focus-visible{background:var(--terracotta);color:var(--on-terra)}
.is-dark .btn--ghost,.site-foot .btn--ghost{color:var(--bone);border-color:var(--terracotta-soft)}
.is-dark .btn--ghost:hover,.is-dark .btn--ghost:focus-visible{background:var(--terracotta);border-color:var(--terracotta);color:var(--on-terra)}
.btn--block{width:100%}
.btn--sm{min-height:44px;padding:0 18px;font-size:13px}

/* Inline text link: underlined, terracotta-deep for the 6.8:1 */
.prose a,.inline-link,.textlink{
  color:var(--accent);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.18em;
}
.prose a:hover,.inline-link:hover,.textlink:hover{text-decoration-thickness:2px}

.arrowlink{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);text-decoration:none;
}
.arrowlink::after{content:'\2192';transition:transform .25s ease}
.arrowlink:hover::after{transform:translateX(4px)}

/* ═══════════════════════════════════════════════════════════════
   5. HEADER + NAV
   ═══════════════════════════════════════════════════════════════ */
.site-head{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--plaster) 92%,transparent);
  border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
}
@supports not (background:color-mix(in srgb,red 50%,transparent)){
  .site-head{background:rgba(247,241,233,.94)}
}
@supports (backdrop-filter:blur(8px)){
  .site-head{backdrop-filter:blur(10px) saturate(1.1)}
}
.site-head.is-stuck{
  background:var(--plaster);
  border-bottom-color:var(--sand);
  box-shadow:0 1px 18px rgba(42,32,27,.07);
}
.head-inner{
  min-height:var(--head-h);
  display:flex;align-items:center;gap:16px;
  padding-inline:var(--gutter);max-width:var(--max);margin-inline:auto;
}
.brand{
  display:inline-flex;align-items:baseline;gap:.5ch;
  font-family:var(--body);font-weight:600;font-size:19px;
  letter-spacing:.26em;text-transform:uppercase;text-decoration:none;
  color:var(--ink);margin-right:auto;white-space:nowrap;
}
.brand i{font-style:normal;color:var(--accent)}
.brand span{
  font-size:10px;letter-spacing:.3em;font-weight:400;color:var(--ink-muted);
}
@media(max-width:430px){.brand span{display:none}}

.nav-main{display:none}
.nav-main ul{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.nav-main li{margin:0}
.nav-main a{
  display:block;padding:6px 0;text-decoration:none;
  font-size:14px;font-weight:400;letter-spacing:.05em;color:var(--ink);
  border-bottom:1px solid transparent;
}
.nav-main a:hover{border-bottom-color:var(--terracotta)}
.nav-main .current-menu-item > a,
.nav-main .current_page_item > a,
.nav-main .is-current > a,
.nav-main a[aria-current="page"]{border-bottom-color:var(--terracotta);font-weight:500}
.nav-main .sub-menu{display:none}

.head-cta{display:none}
@media(min-width:1000px){
  .nav-main{display:block}
  .head-cta{display:inline-flex}
}

.burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;padding:0 11px;margin-right:-6px;
  background:transparent;border:1px solid var(--sand);border-radius:var(--radius);
  cursor:pointer;
}
.burger span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(min-width:1000px){.burger{display:none}}

/* Mobile drawer — a real panel, not a hidden nav. */
.drawer{
  position:fixed;inset:0;z-index:80;
  display:grid;grid-template-rows:1fr;
  background:var(--plaster);
  overflow-y:auto;overscroll-behavior:contain;
  transform:translateY(-100%);
  transition:transform .32s cubic-bezier(.3,0,0,1),visibility .32s;
  visibility:hidden;
}
.drawer.is-open{transform:none;visibility:visible}
/* No JS: the panel never appears, and the header nav wraps instead
   (see the <noscript> block in header.php). [hidden] has to be
   re-asserted because the author `display:grid` above outranks it. */
.drawer[hidden]{display:none}
.drawer__inner{padding:18px var(--gutter) 40px;display:flex;flex-direction:column;min-height:100%}
.drawer__top{display:flex;align-items:center;min-height:var(--head-h);margin-bottom:12px}
.drawer__close{
  margin-left:auto;width:46px;height:46px;line-height:1;font-size:26px;
  background:transparent;border:1px solid var(--sand);border-radius:var(--radius);
  color:var(--ink);cursor:pointer;
}
.drawer__links{display:flex;flex-direction:column;border-top:1px solid var(--sand)}
.drawer__links a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:17px 2px;border-bottom:1px solid var(--sand);
  font-family:var(--body);font-size:21px;font-weight:400;
  text-decoration:none;color:var(--ink);
}
.drawer__links a::after{content:'\2192';color:var(--terracotta-deep);font-size:17px}
.drawer__links a[aria-current="page"]{font-weight:500;color:var(--terracotta-deep)}
.drawer__cta{margin-top:26px}
.drawer__foot{margin-top:auto;padding-top:30px;font-size:15px;color:var(--ink-muted);line-height:1.8}
.drawer__foot a{color:var(--terracotta-deep);text-decoration:underline;text-underline-offset:.18em}
body.nav-open{overflow:hidden}

/* ═══════════════════════════════════════════════════════════════
   6. HERO — split: plaster type panel beside a photograph
   ═══════════════════════════════════════════════════════════════ */
.hero{background:var(--plaster);padding-block:0}
.hero__grid{display:grid;gap:0}
@media(min-width:900px){
  .hero__grid{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:stretch}
}
.hero__panel{
  padding:clamp(34px,6vw,84px) var(--gutter) clamp(38px,6vw,84px);
  display:flex;flex-direction:column;justify-content:center;
  max-width:calc(var(--max) / 2 + var(--gutter));
  margin-left:auto;width:100%;
}
@media(max-width:899px){.hero__panel{margin-left:0;max-width:none;order:2}}
.hero__panel h1{
  font-size:clamp(39px,8.6vw,74px);
  margin-bottom:20px;max-width:16ch;
}
.hero__panel h1 em{font-style:italic;color:var(--terracotta-deep);font-weight:400}
.hero__lede{font-size:clamp(17px,1.9vw,20px);color:var(--ink-muted);max-width:42ch}
.hero__media{position:relative;background:var(--espresso);min-height:300px}
@media(max-width:899px){.hero__media{order:1;aspect-ratio:4/3;min-height:0}}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center}
@media(min-width:900px){.hero__media img{position:absolute;inset:0}}
.hero__tag{
  position:absolute;left:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:10px;
  padding:11px 18px;
  background:var(--espresso);color:var(--bone);
  font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
}
.hero__tag b{color:var(--terracotta-soft);font-weight:500}

/* Fact strip under the hero */
.factstrip{background:var(--espresso);color:var(--bone)}
.factstrip ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);
}
@media(min-width:760px){.factstrip ul{grid-template-columns:repeat(4,1fr)}}
.factstrip li{
  margin:0;padding:18px var(--gutter);
  border-bottom:1px solid #4A362C;
}
.factstrip li:nth-child(2n){border-left:1px solid #4A362C}
@media(min-width:760px){
  .factstrip li{border-bottom:0;border-left:1px solid #4A362C}
  .factstrip li:first-child{border-left:0}
  .factstrip li:nth-child(2n){border-left:1px solid #4A362C}
}
.factstrip .k{display:block;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--terracotta-soft);margin-bottom:5px}
.factstrip .v{display:block;font-size:16px;font-weight:400;color:var(--bone)}

/* Page hero for inner pages */
.phero{background:var(--plaster-2);border-bottom:1px solid var(--sand);padding-block:clamp(38px,6vw,72px)}
.phero h1{font-size:clamp(33px,6.2vw,58px);max-width:20ch;margin-bottom:16px}
.phero .lede{font-size:clamp(17px,1.7vw,20px);color:var(--ink-muted);max-width:56ch}
.phero--dark{background:var(--espresso);border-bottom-color:#4A362C}
.phero--dark h1{color:var(--bone)}
.phero--dark .lede{color:var(--bone-soft)}
.phero--dark .eyebrow{color:var(--terracotta-soft)}

/* ═══════════════════════════════════════════════════════════════
   7. CARDS, ROWS, TILES — all SANS. A display serif at card size
      reads as clutter, so h3+ is Jost everywhere.
   ═══════════════════════════════════════════════════════════════ */
.cards{display:grid;gap:14px;margin-top:40px}
@media(min-width:620px){.cards--2,.cards--4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){
  .cards--3{grid-template-columns:repeat(3,1fr)}
  .cards--4{grid-template-columns:repeat(4,1fr)}
}
.card{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius);
  padding:24px 22px 22px;text-decoration:none;color:inherit;
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
a.card:hover,a.card:focus-visible{border-color:var(--terracotta);transform:translateY(-2px);box-shadow:0 10px 26px rgba(42,32,27,.08)}
.is-dark a.card:hover{box-shadow:0 10px 26px rgba(0,0,0,.3)}
.card__n{
  font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;
}
.card h3{font-size:20px;margin-bottom:9px}
.card p{font-size:15.5px;color:var(--fg-muted);margin:0}
.card .arrowlink{margin-top:18px}
.card__meta{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--hair);
  font-size:13.5px;letter-spacing:.04em;color:var(--fg-muted);
}

/* List rows — the week, the menu, the spaces */
.rows{margin-top:36px;border-top:1px solid var(--hair)}
.row{
  display:grid;gap:4px 24px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--hair);
}
@media(min-width:720px){.row{grid-template-columns:150px minmax(0,1fr) auto}}
.row__k{
  font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);
}
.row h3{font-size:19px;margin-bottom:5px}
.row p{font-size:15.5px;color:var(--fg-muted);margin:0}
.row__v{font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-muted);white-space:nowrap}
/* Prices. Sans, not the display serif — a serif at row size reads as
   clutter. Full strength ink so the number is the thing you scan to. */
.row__v--price{
  font-size:16px;letter-spacing:0;text-transform:none;
  color:var(--fg);font-weight:500;font-variant-numeric:tabular-nums;
}
/* Dietary tags, under the description now the right rail holds a price. */
.row__tags{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-muted);margin-top:7px
}
.row p.row__tags{font-size:12px}

/* Definition pairs — capacities, hours, spec */
.spec{display:grid;gap:0;margin:28px 0 0;border-top:1px solid var(--hair)}
.spec > div{
  display:flex;flex-wrap:wrap;gap:4px 18px;justify-content:space-between;
  padding:14px 0;border-bottom:1px solid var(--hair);
}
.spec dt{font-size:15.5px;font-weight:400;color:var(--fg);margin:0}
.spec dd{font-size:15.5px;margin:0;color:var(--fg-muted);text-align:right}
.spec dd b{color:var(--fg);font-weight:500}

/* Ticked lists */
.ticks{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:26px;font-size:16px;color:var(--fg);margin:0}
.ticks li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:9px;height:9px;background:var(--terracotta);border-radius:50%;
}
.is-dark .ticks li::before{background:var(--terracotta-soft)}

/* Numbered steps */
.steps{list-style:none;counter-reset:s;padding:0;margin:36px 0 0;display:grid;gap:14px}
@media(min-width:860px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{
  counter-increment:s;margin:0;padding:22px;
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius);
}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  display:block;font-size:12px;font-weight:500;letter-spacing:.24em;
  color:var(--accent);margin-bottom:12px;
}
.steps h3{font-size:18px;margin-bottom:7px}
.steps p{font-size:15.5px;color:var(--fg-muted);margin:0}

/* Photo tiles — type never sits on these without a scrim */
.tiles{display:grid;gap:10px;margin-top:40px}
@media(min-width:620px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--espresso-2)}
.tile img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;transition:transform 1s cubic-bezier(.2,0,0,1)}
.tile:hover img{transform:scale(1.035)}
.tile--wide{grid-column:span 2}
@media(min-width:620px){.tile--tall img{aspect-ratio:3/4}}
.tile__cap{
  position:absolute;inset:auto 0 0 0;padding:34px 16px 13px;
  background:linear-gradient(to top,rgba(36,26,21,.88),rgba(36,26,21,0));
  color:var(--bone);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
}

/* Feature: photograph beside copy */
.feature{display:grid;gap:26px;align-items:center}
@media(min-width:900px){
  .feature{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,64px)}
  .feature--flip .feature__media{order:2}
}
.feature__media{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--espresso-2)}
.feature__media img{width:100%;height:auto}
.feature__media--crop img{aspect-ratio:4/3;object-fit:cover}
.feature h2{font-size:clamp(28px,4.6vw,44px);margin-bottom:16px}
.feature p{color:var(--fg-muted)}
.feature .btns{margin-top:24px}
.feature__badge{
  position:absolute;left:14px;top:14px;
  padding:7px 13px;background:var(--plaster);color:var(--ink);
  font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  border-radius:var(--radius);
}

/* ═══════════════════════════════════════════════════════════════
   8. EVENTS
   ═══════════════════════════════════════════════════════════════ */
.events{display:grid;gap:16px;margin-top:40px}
@media(min-width:680px){.events{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.events{grid-template-columns:repeat(3,1fr)}}
.event{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius);
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.event:hover{border-color:var(--terracotta);transform:translateY(-2px);box-shadow:0 10px 26px rgba(42,32,27,.08)}
.event__cover{display:block;background:var(--espresso-2);aspect-ratio:3/2;overflow:hidden}
.event__cover img{width:100%;height:100%;object-fit:cover}
.event__cover--none{
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--espresso) 0%,var(--terracotta-deep) 140%);
  color:var(--bone-soft);font-size:12px;letter-spacing:.3em;text-transform:uppercase;
}
.event__body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.event__when{
  font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:10px;
}
.event__body h3{font-size:20px;margin-bottom:8px}
.event__body h3 a{text-decoration:none;color:inherit}
.event__body p{font-size:15.5px;color:var(--fg-muted);margin:0 0 16px}
.event__foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.event__pill{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 10px;border:1px solid var(--hair);border-radius:999px;color:var(--fg-muted);
}

.empty{
  margin-top:36px;padding:30px 24px;
  background:var(--surface);border:1px dashed var(--hair);border-radius:var(--radius);
}
.empty h3{font-size:19px;margin-bottom:8px}
.empty p{color:var(--fg-muted);margin:0 0 4px;font-size:16px}

/* Single event — a split, not an overlay.

   An editor can upload any cover image, and a light photograph under a
   gradient scrim cannot be relied on to keep 4.5:1 for the terracotta
   eyebrow. So the type sits on a solid espresso panel and the
   photograph sits beside it: no type on a photograph at all, and the
   contrast is the same whatever gets uploaded. */
.ehero{background:var(--espresso);color:var(--bone)}
.ehero__grid{display:grid}
@media(min-width:900px){
  .ehero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:stretch}
}
.ehero__panel{
  padding:clamp(34px,6vw,76px) var(--gutter);
  display:flex;flex-direction:column;justify-content:center;
  max-width:calc(var(--max) / 2 + var(--gutter));margin-left:auto;width:100%;
}
@media(max-width:899px){.ehero__panel{margin-left:0;max-width:none;order:2}}
.ehero--nophoto .ehero__panel{
  max-width:var(--max);margin-inline:auto;
  padding-block:clamp(44px,8vw,96px);
}
.ehero__media{position:relative;background:var(--espresso-2);min-height:260px}
@media(max-width:899px){.ehero__media{order:1;aspect-ratio:3/2;min-height:0}}
.ehero__media img{width:100%;height:100%;object-fit:cover}
@media(min-width:900px){.ehero__media img{position:absolute;inset:0}}
.ehero h1{font-size:clamp(33px,6.2vw,58px);color:var(--bone);margin-bottom:16px;max-width:20ch}
.ehero .eyebrow{color:var(--terracotta-soft)}
.ehero__lede{color:var(--bone-soft);max-width:52ch;font-size:clamp(16px,1.7vw,18px);margin:0}
.ehero__meta{
  list-style:none;margin:24px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px 12px;
}
.ehero__meta li{
  margin:0;padding:7px 13px;border:1px solid #6A4E40;border-radius:999px;
  font-size:13px;letter-spacing:.08em;color:var(--bone);
}

/* ═══════════════════════════════════════════════════════════════
   9. PROSE (editor content, terms)
   ═══════════════════════════════════════════════════════════════ */
.prose{max-width:68ch;font-size:17px}
.prose h2{font-size:clamp(25px,3.4vw,34px);margin:38px 0 14px}
.prose h3{font-size:19px;margin:28px 0 10px}
.prose h3:first-child,.prose h2:first-child{margin-top:0}
.prose ul,.prose ol{color:var(--fg)}
.prose blockquote{
  margin:26px 0;padding:4px 0 4px 20px;border-left:3px solid var(--terracotta);
  color:var(--fg-muted);
}
.prose img{border-radius:var(--radius);margin-block:22px}
.prose table{margin:24px 0;font-size:15.5px}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--hair)}
.prose th{font-weight:500}

/* ═══════════════════════════════════════════════════════════════
   10. FORMS
   ═══════════════════════════════════════════════════════════════ */
.form{margin-top:32px;max-width:720px}
.form__grid{display:grid;gap:16px}
@media(min-width:680px){.form__grid--2{grid-template-columns:repeat(2,1fr)}}
.field{display:flex;flex-direction:column;gap:6px}
.field--full{grid-column:1/-1}
.field label{font-size:14px;font-weight:500;letter-spacing:.04em;color:var(--fg)}
.field .hint{font-size:13.5px;color:var(--fg-muted)}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:16px;color:var(--ink);
  background:#FFFDFA;border:1px solid var(--sand);border-radius:var(--radius);
  padding:13px 14px;min-height:50px;width:100%;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--terracotta);outline:3px solid rgba(194,73,45,.28);outline-offset:0;
}
.field--check{flex-direction:row;align-items:flex-start;gap:11px}
.field--check input{width:20px;height:20px;min-height:0;margin-top:3px;flex:0 0 auto;accent-color:var(--terracotta)}
.field--check label{font-weight:400;font-size:15px;color:var(--fg-muted)}
.form__note{font-size:14px;color:var(--fg-muted);margin-top:16px}
.notice{
  padding:16px 18px;border-radius:var(--radius);margin-bottom:26px;
  border:1px solid var(--terracotta);background:var(--terracotta-wash);color:var(--ink);
  font-size:16px;
}
.notice--bad{border-color:#9A2C18;background:#F7E0DA}
.notice strong{display:block;margin-bottom:3px}

.searchform{display:flex;gap:10px;max-width:460px;margin-top:22px}
.searchform input[type=search]{
  flex:1;font-family:var(--body);font-size:16px;min-height:50px;padding:12px 14px;
  background:#FFFDFA;border:1px solid var(--sand);border-radius:var(--radius);color:var(--ink);
}

/* ═══════════════════════════════════════════════════════════════
   11. HIRE DEPOSIT / BOOKING SHELLS
   ═══════════════════════════════════════════════════════════════ */
.shell{
  margin-top:32px;padding:clamp(22px,4vw,34px);
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius);
}
.shell h2{font-size:clamp(24px,3.4vw,32px);margin-bottom:12px}
.shell p{color:var(--fg-muted)}
.shell .btns{margin-top:22px}

/* ═══════════════════════════════════════════════════════════════
   12. CONTACT / FIND US
   ═══════════════════════════════════════════════════════════════ */
.cols{display:grid;gap:26px;margin-top:36px}
@media(min-width:720px){.cols--2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.cols--3{grid-template-columns:repeat(3,1fr)}}
.col h3{font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;font-weight:500}
.col address,.col p,.col ul{font-size:16px;color:var(--fg-muted);line-height:1.8}
.col ul{list-style:none;padding:0}
.col a{color:var(--accent);text-decoration:underline;text-underline-offset:.18em}

/* Call-to-action band */
.cta{background:var(--terracotta);color:var(--on-terra);padding-block:clamp(44px,7vw,78px)}
.cta h2{font-size:clamp(28px,5vw,46px);color:var(--on-terra);margin-bottom:14px;max-width:26ch}
.cta p{color:var(--on-terra);max-width:52ch;font-size:17px}
.cta .eyebrow{color:var(--on-terra)}
.cta .btn{background:var(--on-terra);border-color:var(--on-terra);color:var(--terracotta-deep)}
.cta .btn:hover,.cta .btn:focus-visible{background:var(--espresso);border-color:var(--espresso);color:var(--bone)}
.cta .btn--ghost{background:transparent;color:var(--on-terra);border-color:rgba(255,248,242,.62)}
.cta .btn--ghost:hover,.cta .btn--ghost:focus-visible{background:var(--on-terra);color:var(--terracotta-deep);border-color:var(--on-terra)}

/* ═══════════════════════════════════════════════════════════════
   13. FOOTER — espresso ground
   ═══════════════════════════════════════════════════════════════ */
.site-foot{
  background:var(--espresso);color:var(--bone);
  padding-block:clamp(46px,6vw,72px) 0;
  --hair:#4A362C;--fg:var(--bone);--fg-muted:var(--bone-soft);--accent:var(--terracotta-soft);
}
.foot-grid{display:grid;gap:30px}
@media(min-width:720px){.foot-grid{grid-template-columns:1.25fr 1fr 1fr}}
@media(min-width:1040px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.site-foot .brand{color:var(--bone);margin-bottom:16px}
.site-foot .brand span{color:var(--bone-soft)}
.site-foot h3{
  font-size:12px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--terracotta-soft);margin-bottom:14px;font-weight:500;
}
.site-foot address,.site-foot p{color:var(--bone-soft);font-size:15.5px;line-height:1.85}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:9px}
.site-foot a{color:var(--bone);text-decoration:none;border-bottom:1px solid transparent}
.site-foot a:hover{border-bottom-color:var(--terracotta-soft)}
.site-foot .muted a{color:var(--bone-soft)}
.foot-extra{
  margin-top:clamp(28px,4vw,42px);padding-top:26px;
  border-top:1px solid #4A362C;
  display:grid;gap:22px;
}
@media(min-width:760px){.foot-extra{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
.foot-widget p,.foot-widget li{color:var(--bone-soft);font-size:15.5px}
.foot-widget ul{list-style:none;margin:0;padding:0}
.foot-widget a{color:var(--bone)}

.foot-bottom{
  margin-top:clamp(34px,5vw,52px);padding-block:20px 24px;
  border-top:1px solid #4A362C;
  display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;align-items:center;
  font-size:13.5px;color:var(--bone-soft);
}
.socials{display:flex;gap:14px;margin-top:16px}
.socials a{
  display:grid;place-items:center;width:40px;height:40px;
  border:1px solid #4A362C;border-radius:50%;color:var(--bone);
}
.socials a:hover{border-color:var(--terracotta-soft);background:var(--espresso-2)}
.socials svg{width:17px;height:17px;fill:currentColor}

/* ═══════════════════════════════════════════════════════════════
   14. MOTION
   ═══════════════════════════════════════════════════════════════ */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .75s ease,transform .75s ease}
.reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .tile img,.tile:hover img,.arrowlink::after,.drawer{transition:none!important;transform:none!important}
  .drawer{transition:visibility 0s!important}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important}
}

/* ═══════════════════════════════════════════════════════════════
   15. PRINT
   ═══════════════════════════════════════════════════════════════ */
@media print{
  .site-head,.drawer,.burger,.cta,.tiles,.hero__media{display:none!important}
  body{background:#fff;color:#000;font-size:12pt}
  .band{padding-block:14pt}
}