/* ============================================================
   ADVENTURE FARM KAREN — shared stylesheet
   Palette: bottle green / olive / ochre on white and oat.
   Radius rule: interactive = 10px, static panels = 2px.
   ============================================================ */

:root{
  --ink:       #1B2E24;
  --ink-soft:  #5A6B5E;
  --green:     #24503C;
  --green-dk:  #163325;
  --olive:     #7B8763;
  --olive-dk:  #55693F;
  --ochre:     #B4763A;
  --paper:     #FFFFFF;
  --oat:       #F5F3ED;
  --line:      #E2DED4;
  --line-dk:   #CFC9BB;

  --measure: 33rem;
  --gut: clamp(1.25rem, 4vw, 4rem);
  --r-btn: 10px;
  --r-box: 2px;

  /* The masthead bar's own height, excluding the logo plaque that hangs below
     it. Named because scroll-padding-top has to match it. */
  --head-h: 77px;
}

*,*::before,*::after{ box-sizing:border-box; }
/* The masthead is sticky and the logo plaque hangs below it, so anything
   scrolled to by a `#fragment` would come to rest behind one or the other.
   scroll-padding-top holds the viewport clear of both for every such jump,
   including the ones the browser makes when focus moves.

   The plaque has to be counted, not just the bar: a menu section carries no
   padding of its own, so clearing only the bar left its heading hidden under
   the logo. */
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--head-h) + var(--logo-drop));
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Karla","Helvetica Neue",Arial,sans-serif;
  font-size:clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:"Fraunces","Iowan Old Style",Georgia,serif;
  font-weight:400;
  line-height:1.08;
  letter-spacing:-0.01em;
  margin:0;
  font-variation-settings:"SOFT" 0, "WONK" 0;
}

p{ margin:0 0 1em; max-width:var(--measure); }
a{ color:inherit; }

:focus-visible{ outline:2px solid var(--green); outline-offset:3px; border-radius:2px; }

.wrap{ width:min(1180px, 100% - (var(--gut) * 2)); margin-inline:auto; }
.narrow{ width:min(760px, 100% - (var(--gut) * 2)); margin-inline:auto; }

.skip{ position:absolute; left:-9999px; background:var(--ink); color:#fff; padding:.75rem 1rem; z-index:99; }
.skip:focus{ left:1rem; top:1rem; }

/* ---------- draft content marker ----------
   .tbc marks a figure or policy imported from the old Wix site that has NOT
   been re-confirmed by the farm. It must not survive to launch — see
   content/migration/unconfirmed.md. Visible dotted underline is deliberate. */
.tbc{ border-bottom:1.5px dotted var(--ochre); padding-bottom:1px; }

/* ---------- header ---------- */
.site-head{ position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:1px solid var(--line); }
.head-in{ display:flex; align-items:center; gap:1.75rem; min-height:calc(var(--head-h) - 1px); }
/* ---------- brand mark ----------
   The logo sits on a white plaque that overhangs the header, so its lower half
   falls onto the page beneath. The plaque's own background is what interrupts
   the header's bottom rule, and it carries the same 1px line so the two read as
   one piece of furniture rather than an image dropped on top.

   A negative bottom margin keeps the plaque out of the header's height
   calculation — that is what stops the bar growing to fit it — and the header's
   z-index puts the overhang above the page content. */
/* Declared on :root, not .site-head: scroll-padding-top is set on <html> and
   has to know how far the plaque reaches down the page. */
:root{
  --logo-h:5.5rem;      /* the mark itself */
  --brand-pad:0.85rem;  /* white space around it */
  --logo-drop:5rem;     /* how much of the plaque hangs below the bar */
}
.brand{
  display:block; margin-right:auto;
  text-decoration:none; line-height:0;
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-box);
  padding:var(--brand-pad);
  margin-bottom:calc(var(--logo-drop) * -1);
}
.brand-mark{
  display:block;
  height:var(--logo-h); width:auto;
  pointer-events:none;
}
@media (max-width:700px){
  :root{ --logo-h:3.4rem; --brand-pad:0.55rem; --logo-drop:2.6rem; }
}

.nav{ display:flex; gap:1.6rem; }
.nav a{ text-decoration:none; font-weight:500; font-size:.925rem; padding:.35rem 0; border-bottom:1px solid transparent; color:var(--ink); }
.nav a:hover{ border-bottom-color:var(--green); }
.nav a[aria-current="true"]{ border-bottom-color:var(--green); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; font-family:"Karla",sans-serif; font-weight:600; font-size:.925rem;
  padding:.7rem 1.3rem; border-radius:var(--r-btn);
  background:var(--green); color:#fff; border:1px solid var(--green);
  white-space:nowrap; cursor:pointer;
}
.btn:hover{ background:var(--green-dk); border-color:var(--green-dk); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-dk); }
.btn-ghost:hover{ background:var(--oat); border-color:var(--ink-soft); }
.btn-quiet{ background:transparent; color:#fff; border-color:rgba(255,255,255,.45); }
.btn-quiet:hover{ background:rgba(255,255,255,.1); border-color:#fff; }
.btn-big{ padding:.95rem 1.75rem; font-size:1rem; }
.menu-toggle{ display:none; }

.actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }

/* ---------- page header ---------- */
.page-head{ background:var(--oat); border-bottom:1px solid var(--line); padding:clamp(2.5rem,6vw,4rem) 0 clamp(2.25rem,5vw,3rem); }
.crumbs{ font-size:.8125rem; color:var(--ink-soft); margin-bottom:1.25rem; }
.crumbs a{ text-decoration:none; border-bottom:1px solid var(--line-dk); }
.page-head h1{ font-size:clamp(2.1rem,4.6vw,3.3rem); max-width:17ch; }
.page-head .lede{ margin-top:1.25rem; font-size:1.1rem; color:var(--ink-soft); max-width:48ch; }

.subnav{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2rem; }
.subnav a{ text-decoration:none; font-size:.875rem; font-weight:500; padding:.5rem 1rem; border:1px solid var(--line-dk); border-radius:var(--r-btn); background:var(--paper); }
.subnav a:hover{ border-color:var(--ink-soft); }
.subnav a[aria-current="page"]{ background:var(--green); color:#fff; border-color:var(--green); }

/* ---------- hero (home) ---------- */
.hero{ padding:clamp(3rem,7vw,6rem) 0 0; }
.hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.hero h1{ font-size:clamp(2.5rem, 5.6vw, 4.25rem); max-width:13ch; margin-bottom:1.5rem; }
.hero h1 em{ font-style:normal; display:block; color:var(--olive); }
.hero-lede{ font-size:1.1rem; color:var(--ink-soft); max-width:34ch; }

/* ---------- photo slots ---------- */
.shot{
  border:1px solid var(--line-dk); border-radius:var(--r-box); background:var(--oat);
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem; text-align:center; color:var(--ink-soft); font-size:.8125rem; line-height:1.5;
}
.shot b{ display:block; color:var(--green); font-size:.85rem; margin-bottom:.25rem; font-weight:700; }
.shot-hero{ aspect-ratio:4/3.2; }
.shot-wide{ aspect-ratio:21/8; }
.shot-4-3{ aspect-ratio:4/3; }
.shot-sq{ aspect-ratio:1/1; }
.shot-shop{ aspect-ratio:16/11; }

/* ---------- facts strip ---------- */
.facts{ margin-top:clamp(2.5rem,6vw,4.5rem); border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(4,1fr); }
.fact{ padding:1.75rem; border-left:1px solid var(--line); }
.fact:first-child{ padding-left:0; border-left:0; }
.fact dt{ font-size:.8125rem; color:var(--ink-soft); margin-bottom:.4rem; }
.fact dd{ margin:0; font-family:"Fraunces",Georgia,serif; font-size:1.2rem; line-height:1.25; }
.fact dd small{ display:block; font-family:"Karla",sans-serif; font-size:.8125rem; color:var(--ink-soft); margin-top:.4rem; line-height:1.5; }

/* ---------- bands ---------- */
.band{ padding:clamp(4rem,9vw,7rem) 0; }
.band-tight{ padding:clamp(2.75rem,6vw,4.5rem) 0; }
.band-oat{ background:var(--oat); }
.band-head{ margin-bottom:3rem; }
.band-head h2{ font-size:clamp(1.9rem,3.8vw,2.8rem); max-width:17ch; }
.band-head p{ margin-top:1rem; color:var(--ink-soft); }
h2.solo{ font-size:clamp(1.9rem,3.8vw,2.8rem); margin-bottom:1.25rem; }
h3.sub-h{ font-size:1.5rem; margin-bottom:.75rem; }

/* ---------- timeline ---------- */
.day{ display:grid; grid-template-columns:repeat(4,1fr); }
.stop{ padding:1.75rem 1.75rem 0 0; border-top:1px solid var(--line-dk); position:relative; }
.stop + .stop{ padding-left:1.75rem; }
.stop::before{ content:""; position:absolute; top:-4px; left:0; width:7px; height:7px; border-radius:50%; background:var(--ochre); }
.stop + .stop::before{ left:1.75rem; }
.time{ font-family:"Fraunces",Georgia,serif; font-size:1.3rem; display:block; margin-bottom:.5rem; color:var(--green); }
.stop p{ font-size:.95rem; color:var(--ink-soft); margin:0; }

/* ---------- crew ---------- */
.crew{ background:var(--green); color:#F2EFE7; }
.crew h2{ color:#fff; font-size:clamp(2rem,4.4vw,3.1rem); }
.crew .band-head p{ color:#C3CFC2; }
.crew-list{ display:grid; grid-template-columns:repeat(5,1fr); gap:2rem 1.75rem; }
.critter{ display:flex; flex-direction:column; }
.critter .face{ aspect-ratio:1; border-radius:50%; border:1px solid rgba(242,239,231,.35); display:grid; place-items:center; font-size:.7rem; color:#B7C4B6; text-align:center; padding:.75rem; margin-bottom:1rem; }
.critter .who{ font-family:"Fraunces",Georgia,serif; font-size:clamp(1.25rem,2vw,1.6rem); line-height:1.1; color:#fff; margin-bottom:.4rem; }
.critter .what{ font-size:.875rem; color:#C3CFC2; margin:0; line-height:1.55; }

/* ---------- cards & doors ---------- */
.doors{ display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:1.5rem; }
.door{ border:1px solid var(--line-dk); border-radius:var(--r-box); padding:2rem; background:var(--paper); display:flex; flex-direction:column; }
.door-lead{ background:var(--oat); }
.door h3{ font-size:1.5rem; margin-bottom:.9rem; }
.door p{ font-size:.95rem; color:var(--ink-soft); }
.door ul{ margin:0 0 1.5rem; padding:0; list-style:none; font-size:.925rem; }
.door li{ padding:.5rem 0; border-bottom:1px solid var(--line); }
.door li:last-child{ border-bottom:0; }
.door .door-cta{ margin-top:auto; }
.door-note{ font-size:.85rem; color:var(--ink-soft); margin-top:1.1rem; margin-bottom:0; }

.card{ border:1px solid var(--line-dk); border-radius:var(--r-box); padding:clamp(1.5rem,3vw,2rem); background:var(--paper); }
.card-oat{ background:var(--oat); }
.card h3{ font-size:1.4rem; margin-bottom:.75rem; }
.card p:last-child{ margin-bottom:0; }

.cols-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); }
.cols-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.split{ display:grid; grid-template-columns:1fr 1.35fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.split-rev{ grid-template-columns:1.35fr 1fr; }
.sticky{ position:sticky; top:104px; }

/* ---------- included / not included ---------- */
.honest-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); }
.sub{ font-family:"Karla",sans-serif; font-size:.95rem; font-weight:700; margin:0 0 .75rem; }
.incl{ list-style:none; margin:0; padding:0; }
.incl li{ display:flex; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--line); font-size:.95rem; }
.incl li:last-child{ border-bottom:0; }
.mark{ font-weight:700; color:var(--green); flex:0 0 2.5rem; font-size:.8125rem; padding-top:.15rem; }
.mark-no{ color:var(--ochre); }

/* ---------- rates ---------- */
.rate{ list-style:none; margin:0 0 1.5rem; padding:0; }
.rate li{ display:flex; justify-content:space-between; gap:1.5rem; padding:.85rem 0; border-bottom:1px solid var(--line); font-size:.95rem; }
.rate li:last-child{ border-bottom:0; }
.rate b{ font-weight:600; white-space:nowrap; }
.rate small{ display:block; color:var(--ink-soft); font-size:.8125rem; }

/* ---------- menu ---------- */
.dish{ padding:1.05rem 0; border-bottom:1px solid var(--line); }
.dish:last-child{ border-bottom:0; }
.dish-top{ display:flex; justify-content:space-between; gap:1.5rem; align-items:baseline; }
.dish-name{ font-family:"Fraunces",Georgia,serif; font-size:1.15rem; }
.dish-price{ white-space:nowrap; font-weight:600; font-size:.95rem; }
.dish p{ font-size:.9rem; color:var(--ink-soft); margin:.3rem 0 0; max-width:44ch; }

/* ---------- week grid (The Cove nights) ---------- */
.week{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-box); overflow:hidden; }
.night{ background:var(--paper); padding:1.5rem; }
.night .dayname{ font-size:.8125rem; color:var(--ochre); font-weight:700; margin-bottom:.4rem; }
.night h3{ font-size:1.3rem; margin-bottom:.5rem; }
.night p{ font-size:.9rem; color:var(--ink-soft); margin:0; }

/* ---------- faq ---------- */
.faq{ border-top:1px solid var(--line); }
details{ border-bottom:1px solid var(--line); }
summary{ cursor:pointer; padding:1.15rem 0; font-weight:600; font-size:1rem; list-style:none; display:flex; justify-content:space-between; gap:1rem; }
summary::-webkit-details-marker{ display:none; }
summary::after{ content:"+"; color:var(--ochre); font-size:1.35rem; line-height:1; }
details[open] summary::after{ content:"\2013"; }
details p{ margin:0 0 1.15rem; color:var(--ink-soft); font-size:.95rem; max-width:60ch; }

/* ---------- forms ---------- */
.field{ margin-bottom:1.25rem; }
.field label{ display:block; font-size:.875rem; font-weight:600; margin-bottom:.4rem; }
.hint{ font-size:.8125rem; color:var(--ink-soft); margin:.35rem 0 0; }
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=time],input[type=number],select,textarea{
  width:100%; font-family:inherit; font-size:1rem; color:var(--ink);
  padding:.7rem .85rem; border:1px solid var(--line-dk); border-radius:var(--r-btn);
  background:var(--paper); line-height:1.4;
}
input:focus,select:focus,textarea:focus{ border-color:var(--green); }
textarea{ min-height:120px; resize:vertical; }
fieldset{ border:0; padding:0; margin:0 0 2.25rem; }
legend{ font-family:"Fraunces",Georgia,serif; font-size:1.45rem; padding:0; margin-bottom:1.25rem; }
.two-up{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.choices{ display:grid; gap:.6rem; }
.choice{ display:flex; gap:.85rem; align-items:flex-start; border:1px solid var(--line-dk); border-radius:var(--r-btn); padding:.9rem 1rem; cursor:pointer; }
.choice input{ margin-top:.3rem; accent-color:var(--green); flex:0 0 auto; }
.choice .lbl{ font-size:.95rem; font-weight:600; }
.choice small{ display:block; color:var(--ink-soft); font-size:.8125rem; font-weight:400; }
.steps{ display:flex; gap:1.75rem; flex-wrap:wrap; font-size:.8125rem; margin-bottom:2.5rem; padding-bottom:1rem; border-bottom:1px solid var(--line); }
.steps span{ color:var(--ink-soft); }
.steps .now{ color:var(--green); font-weight:700; }
.mpesa{ border:1px solid var(--line-dk); border-radius:var(--r-box); padding:1.5rem; background:var(--oat); }
.mpesa h3{ font-size:1.2rem; margin-bottom:.6rem; }
.total{ display:flex; justify-content:space-between; padding:1rem 0; border-top:1px solid var(--line-dk); margin-top:1rem; font-weight:700; }

/* ---------- callout ---------- */
.callout{ border-left:3px solid var(--ochre); padding:.35rem 0 .35rem 1.35rem; margin:2rem 0; }
.callout p{ margin-bottom:0; }
.callout .sub{ margin-bottom:.35rem; }

/* ---------- blog ---------- */
.post-row{ display:grid; grid-template-columns:170px 1fr; gap:2.5rem; padding:2.25rem 0; border-top:1px solid var(--line); align-items:start; }
.post-row:last-child{ border-bottom:1px solid var(--line); }
.post-row h3{ font-size:1.5rem; margin-bottom:.6rem; }
.post-row p{ color:var(--ink-soft); font-size:.95rem; margin:0; }
.post-row a{ text-decoration:none; }
.post-row a:hover h3{ color:var(--green); }
.meta{ font-size:.8125rem; color:var(--ink-soft); }
.post p{ font-size:1.075rem; max-width:36rem; }
.post h2{ font-size:1.75rem; margin:2.75rem 0 .85rem; }
.post ul{ max-width:36rem; font-size:1.075rem; padding-left:1.15rem; }
.post li{ margin-bottom:.5rem; }

/* ---------- checklist ---------- */
.chk{ width:100%; border-collapse:collapse; font-size:.9rem; margin-bottom:3rem; }
.chk th,.chk td{ text-align:left; padding:.8rem 1rem .8rem 0; border-bottom:1px solid var(--line); vertical-align:top; }
.chk th{ font-size:.8rem; color:var(--ink-soft); font-weight:700; border-bottom-color:var(--line-dk); }
.chk td:first-child{ width:38%; }

/* ---------- market / shop ---------- */
.market{ border-top:1px solid var(--line-dk); padding-top:1.5rem; margin-top:2.5rem; }
.market strong{ display:block; font-family:"Fraunces",Georgia,serif; font-size:1.3rem; }

/* ---------- footer ---------- */
.foot{ background:var(--ink); color:#C3CFC2; padding:clamp(3.5rem,7vw,5.5rem) 0 2rem; }
.foot a{ color:#C3CFC2; }
.foot h2{ color:#fff; font-size:clamp(1.8rem,3.4vw,2.5rem); margin-bottom:1.5rem; }
.foot-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:3rem; }
.foot h3{ font-family:"Karla",sans-serif; font-size:.9rem; font-weight:700; color:#fff; margin-bottom:.85rem; }
.foot ul{ list-style:none; margin:0; padding:0; font-size:.95rem; }
.foot li{ margin-bottom:.55rem; }
.foot p{ font-size:.95rem; }
.foot-cta{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.25rem; }
.foot .btn{ background:var(--olive-dk); border-color:var(--olive-dk); color:#fff; }
.foot .btn:hover{ background:#63784B; border-color:#63784B; }
.foot .btn-quiet{ background:transparent; border-color:rgba(255,255,255,.4); color:#fff; }
.foot .btn-quiet:hover{ background:rgba(255,255,255,.1); border-color:#fff; }
.colophon{ margin-top:3.5rem; padding-top:1.5rem; border-top:1px solid #33463A; font-size:.8125rem; color:#7E8F80; }

/* ---------- responsive ---------- */
@media (max-width: 960px){
  .hero-grid{ grid-template-columns:1fr; align-items:start; }
  .shot-hero{ aspect-ratio:16/10; }
  .shot-wide{ aspect-ratio:16/9; }
  .facts{ grid-template-columns:1fr 1fr; }
  .fact:nth-child(3){ padding-left:0; border-left:0; }
  .fact:nth-child(-n+2){ border-bottom:1px solid var(--line); }
  .day{ grid-template-columns:1fr 1fr; }
  .crew-list{ grid-template-columns:repeat(3,1fr); }
  .doors,.honest-grid,.cols-2,.split,.foot-grid{ grid-template-columns:1fr; }
  .split-rev{ grid-template-columns:1fr; }
  .cols-3,.week{ grid-template-columns:1fr 1fr; }
  .sticky{ position:static; }
  .post-row{ grid-template-columns:1fr; gap:.75rem; }
}

@media (max-width: 700px){
  .nav{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; background:var(--paper); border-bottom:1px solid var(--line); padding:.25rem var(--gut) 1rem; }
  .menu-toggle:checked ~ .nav{ display:flex; }
  .nav a{ padding:.8rem 0; border-bottom:1px solid var(--line); }
  .burger{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.9rem; cursor:pointer; padding:.5rem .25rem; order:3; }
  .burger::before{ content:"\2630"; font-size:1.05rem; }
  .site-head{ position:relative; }
  .head-in{ position:relative; flex-wrap:wrap; gap:.75rem; }
  /* The bar is static here, so a fragment target needs no clearance. */
  html{ scroll-padding-top:0; }
  .day,.cols-3,.week,.two-up{ grid-template-columns:1fr; }
  .stop + .stop{ padding-left:0; }
  .stop + .stop::before{ left:0; }
  .crew-list{ grid-template-columns:1fr 1fr; }
  .chk,.chk tbody,.chk tr,.chk td,.chk th{ display:block; }
  .chk thead{ display:none; }
  .chk tr{ border-bottom:1px solid var(--line-dk); padding:.75rem 0; }
  .chk td{ border-bottom:0; padding:.2rem 0; }
  .chk td:first-child{ width:auto; font-weight:700; }
}
@media (min-width: 701px){ .burger{ display:none; } }

@media (prefers-reduced-motion: no-preference){
  .btn,.nav a,.subnav a{ transition:background-color .18s ease, color .18s ease, border-color .18s ease; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

/* ============================================================
   MIGRATED CONTENT
   Cards, galleries and long-form prose for the imported Wix
   pages and the 96 blog posts. Follows the existing language:
   1px lines, 2px static radius, oat for alternate bands.
   ============================================================ */

/* ---------- notice: content the migration could not supply ---------- */
.notice{
  border:1px solid var(--line-dk); border-left:3px solid var(--ochre);
  border-radius:var(--r-box); background:var(--oat);
  padding:1rem 1.25rem; color:var(--ink-soft); font-size:.9375rem;
  max-width:none; margin:0 0 2rem;
}

/* ---------- card grid ---------- */
.card-grid{
  display:grid; gap:clamp(1.25rem,2.5vw,2rem);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

/* Anchor cards carry their own media, so padding moves to the body. */
a.card{ display:flex; flex-direction:column; text-decoration:none; padding:0; overflow:hidden; transition:border-color .15s ease; }
a.card:hover{ border-color:var(--ink-soft); }
/* height:auto is required, not optional: the <img height> attribute is a
   presentational hint that sets the CSS height, which then defeats
   aspect-ratio. Without it a card image inherited its master's pixel height
   and cards grew to 1386px. */
a.card img{
  display:block;
  width:100%; height:auto;
  aspect-ratio:3/2; object-fit:cover;
  background:var(--oat);
}
.card-body{ padding:clamp(1.15rem,2.4vw,1.5rem); }
.card-body h3{
  font-size:1.2rem; margin-bottom:.5rem; line-height:1.2;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  line-clamp:2; overflow:hidden;
}
.card-excerpt{
  color:var(--ink-soft); font-size:.9375rem;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  line-clamp:3; overflow:hidden;
}
.card-meta{ color:var(--ink-soft); font-size:.8125rem; margin-bottom:0; }

/* ---------- long-form prose ---------- */
.prose h2{ font-size:clamp(1.5rem,3vw,2rem); margin:2.5rem 0 .85rem; }
.prose h3{ font-size:1.25rem; margin:2rem 0 .65rem; }
.prose h4{ font-family:"Karla",sans-serif; font-size:1rem; font-weight:700; margin:1.75rem 0 .5rem; }
.prose > :first-child{ margin-top:0; }
.prose ul{ padding-left:1.15rem; margin:0 0 1.25rem; max-width:var(--measure); }
.prose li{ margin-bottom:.4rem; }
.prose blockquote{
  margin:1.75rem 0; padding-left:1.25rem;
  border-left:3px solid var(--olive); color:var(--ink-soft); font-style:italic;
}

/* ---------- blog post ---------- */
.post-meta{ color:var(--ink-soft); font-size:.875rem; margin-top:1rem; }
.post-body{ padding-top:clamp(2rem,4vw,3rem); }
.post-body p, .post-body ul{ max-width:var(--measure); }
.post-figure{ margin:2rem 0; }
.post-figure img{ display:block; width:100%; height:auto; border-radius:var(--r-box); background:var(--oat); }
.post-figure figcaption{ margin-top:.6rem; font-size:.8125rem; color:var(--ink-soft); }

/* ============================================================
   PHOTOGRAPHY — working with the migrated library
   Only 19 of 256 images are hero-width and 185 are portrait or
   square, so nothing here upscales. Images render at or below
   their true width; anything smaller than its slot is matted on
   a blurred copy of itself so it still fills the space.
   Replacing a photo with a larger one needs no code change —
   the matte simply stops applying.
   ============================================================ */

.smart-img{ margin:0; position:relative; }
.smart-img-frame{ position:relative; z-index:1; display:flex; justify-content:center; }
.smart-img img{
  display:block; width:100%; height:auto;
  border-radius:var(--r-box); background:var(--oat);
}
.smart-img figcaption{
  position:relative; z-index:1;
  margin-top:.6rem; font-size:.8125rem; color:var(--ink-soft); text-align:center;
}

/* Undersized image: sharp photo sits on a blurred enlargement of itself. */
.smart-img.is-matted{
  overflow:hidden; border-radius:var(--r-box);
  background:var(--oat); border:1px solid var(--line);
  padding:clamp(1.25rem,3vw,2.75rem);
}
.smart-img.is-matted .smart-img-backdrop{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:blur(38px) saturate(1.15); transform:scale(1.25);
  opacity:.34;
}
.smart-img.is-matted .smart-img-frame img{
  box-shadow:0 6px 28px rgba(27,46,36,.22);
}
/* Portrait photos are capped so they never tower over the text column.
   A portrait can never fill a text measure, so it is always framed (see
   SmartImage) — the cap here stops it dominating the screen. */
.smart-img.is-portrait img{ max-height:58vh; width:auto; }

/* An article's opening image. */
.smart-img.is-lead{ margin-bottom:2.5rem; }
.smart-img.is-lead img{ max-height:52vh; width:auto; }

/* A framed portrait needs a frame that hugs it. Left at full column width the
   photo becomes a small stamp adrift in a wide band, which is worse than no
   frame at all. Narrowing the frame keeps the mat proportional to the image. */
.smart-img.is-matted.is-portrait{
  max-width:32rem; margin-inline:auto;
  padding:clamp(1rem,2.2vw,1.75rem);
}
.smart-img.is-lead.is-portrait img{ max-height:60vh; }

@media (max-width:640px){
  .smart-img.is-portrait img{ max-height:52vh; }
  .smart-img.is-lead img{ max-height:46vh; }
  .smart-img.is-matted.is-portrait{ max-width:100%; }
}

@media (prefers-reduced-motion: no-preference){
  .smart-img img{ transition:none; }
}

/* ---------- masonry gallery ----------
   CSS columns keep every native aspect ratio intact, which suits a
   library that is 109 portrait / 76 square / 71 landscape. Nothing
   is cropped and nothing is stretched. */
.mosaic{
  columns:3 16rem;
  column-gap:clamp(.75rem,1.6vw,1.15rem);
}
.mosaic > *{
  break-inside:avoid; margin:0 0 clamp(.75rem,1.6vw,1.15rem);
  display:block;
}
.mosaic img{
  display:block; width:100%; height:auto;
  border-radius:var(--r-box); background:var(--oat);
}
@media (max-width:640px){ .mosaic{ columns:2 9rem; } }

/* Small images inside prose sit in a centred, matted frame rather than
   spanning the measure. */
.prose .smart-img{ margin:2rem 0; }

/* ---------- home hero photograph ----------
   The photo carried over from Wix is natively portrait (2500x3320) while the
   hero slot is landscape, so it is cropped. The focal point is set just above
   centre: the frame then keeps the adult's face, the child's face and the
   rabbit, which is the whole story of the picture. Cropping from the middle
   would cut the adult's head and lose the rabbit.
   Ratios follow the prototype: 4/3.2 on desktop, 16/10 below 960px. */
.hero-shot{
  border-radius:var(--r-box);
  overflow:hidden;
  background:var(--oat);
  aspect-ratio:4/3.2;
}
.hero-shot img{
  display:block; width:100%; height:100%;
  object-fit:cover;
  object-position:50% 38%;
}
@media (max-width:960px){
  .hero-shot{ aspect-ratio:16/10; }
  .hero-shot img{ object-position:50% 35%; }
}

/* <picture> is inline by default; make it behave like the img it wraps. */
picture{ display:contents; }
.hero-shot picture{ display:block; width:100%; height:100%; }

/* Animal portraits sit inside the circular slot. */
.critter .face.has-photo{ padding:0; overflow:hidden; border-color:rgba(242,239,231,.55); }
.critter .face.has-photo picture{ display:block; width:100%; height:100%; }
.critter .face.has-photo img{
  display:block; width:100%; height:100%;
  object-fit:cover; border-radius:50%;
}


/* ============================================================
   VERTICAL TABS
   Labels on the left, one panel on the right. No JavaScript:
   each tab is a radio input and :has() switches the panel, so
   the component adds nothing to the page weight and is keyboard
   navigable with the arrow keys for free.
   ============================================================ */

.vtabs{
  display:grid;
  grid-template-columns:minmax(11rem, 15rem) 1fr;
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:start;
}

/* The radios stay in the accessibility tree but are not painted. */
.vtabs-nav input[type="radio"]{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

.vtabs-nav{ display:flex; flex-direction:column; border-left:1px solid var(--line); }
.vtabs-label{
  display:block; cursor:pointer;
  padding:.85rem 1.1rem;
  margin-left:-1px;
  border-left:2px solid transparent;
  font-weight:500; font-size:.95rem; line-height:1.3;
  color:var(--ink-soft);
  transition:color .15s ease, border-color .15s ease;
}
.vtabs-label:hover{ color:var(--ink); border-left-color:var(--line-dk); }

/* Keyboard focus must be visible even though the radio itself is not. */
.vtabs-nav input[type="radio"]:focus-visible + .vtabs-label{
  outline:2px solid var(--green); outline-offset:-2px; border-radius:2px;
}

.vtab{ display:none; }
.vtab h3{
  font-family:"Fraunces",Georgia,serif; font-weight:400;
  font-size:clamp(1.6rem,3vw,2.3rem); line-height:1.1; margin:0 0 1.25rem;
}
/* Every tab photo presents at the same size via .photo-frame below. */
.vtab-photo{ margin:0 0 1.5rem; max-width:46rem; }
/* Panels are now a consistent height, but reserve space anyway so switching
   tabs never shifts the page. */
.vtabs-body{ min-height:36rem; }
@media (max-width:760px){ .vtabs-body{ min-height:0; } }
.vtab p{ max-width:var(--measure); }

@media (max-width:760px){
  .vtabs{ grid-template-columns:1fr; }
  .vtabs-nav{
    flex-direction:row; border-left:0; border-bottom:1px solid var(--line);
    overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  .vtabs-label{
    margin-left:0; margin-bottom:-1px; white-space:nowrap;
    border-left:0; border-bottom:2px solid transparent;
  }
  .vtabs-label:hover{ border-left-color:transparent; border-bottom-color:var(--line-dk); }
}

.vtabs:has(#vtab-tours:checked) #panel-tours{ display:block; }
.vtabs:has(#vtab-tours:checked) .vtabs-label[for="vtab-tours"]{
  color:var(--ink); border-left-color:var(--green); background:var(--paper); font-weight:600;
}
.vtabs:has(#vtab-cove:checked) #panel-cove{ display:block; }
.vtabs:has(#vtab-cove:checked) .vtabs-label[for="vtab-cove"]{
  color:var(--ink); border-left-color:var(--green); background:var(--paper); font-weight:600;
}
.vtabs:has(#vtab-sustainability:checked) #panel-sustainability{ display:block; }
.vtabs:has(#vtab-sustainability:checked) .vtabs-label[for="vtab-sustainability"]{
  color:var(--ink); border-left-color:var(--green); background:var(--paper); font-weight:600;
}
.vtabs:has(#vtab-wellness:checked) #panel-wellness{ display:block; }
.vtabs:has(#vtab-wellness:checked) .vtabs-label[for="vtab-wellness"]{
  color:var(--ink); border-left-color:var(--green); background:var(--paper); font-weight:600;
}
.vtabs:has(#vtab-events:checked) #panel-events{ display:block; }
.vtabs:has(#vtab-events:checked) .vtabs-label[for="vtab-events"]{
  color:var(--ink); border-left-color:var(--green); background:var(--paper); font-weight:600;
}
.vtabs:has(#vtab-market:checked) #panel-market{ display:block; }
.vtabs:has(#vtab-market:checked) .vtabs-label[for="vtab-market"]{
  color:var(--ink); border-left-color:var(--green); background:var(--paper); font-weight:600;
}

@media (max-width:760px){
  .vtabs:has(#vtab-tours:checked) .vtabs-label[for="vtab-tours"]{ border-left-color:transparent; border-bottom-color:var(--green); }
  .vtabs:has(#vtab-cove:checked) .vtabs-label[for="vtab-cove"]{ border-left-color:transparent; border-bottom-color:var(--green); }
  .vtabs:has(#vtab-sustainability:checked) .vtabs-label[for="vtab-sustainability"]{ border-left-color:transparent; border-bottom-color:var(--green); }
  .vtabs:has(#vtab-wellness:checked) .vtabs-label[for="vtab-wellness"]{ border-left-color:transparent; border-bottom-color:var(--green); }
  .vtabs:has(#vtab-events:checked) .vtabs-label[for="vtab-events"]{ border-left-color:transparent; border-bottom-color:var(--green); }
  .vtabs:has(#vtab-market:checked) .vtabs-label[for="vtab-market"]{ border-left-color:transparent; border-bottom-color:var(--green); }
}


/* ============================================================
   FRAMED PHOTO
   Presents photographs of any shape at one consistent size. The
   picture is contained, never cropped, and a blurred copy of it
   (a ~1KB derivative) fills the remainder. This is what lets a
   3x3 collage, a tall portrait and a wide landscape sit in the
   same row without looking accidental.
   ============================================================ */

.photo-frame{
  /* Equal breathing space on all four sides. Without it a photo whose ratio
     matches the frame sits flush against the top and bottom edges while the
     sides have margin, which reads as a mistake. */
  --frame-pad:clamp(1rem, 2.2vw, 1.75rem);
  position:relative;
  aspect-ratio:3/2;
  overflow:hidden;
  border-radius:var(--r-box);
  background:var(--oat);
  border:1px solid var(--line);
}
.photo-frame-backdrop{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:blur(28px) saturate(1.15);
  transform:scale(1.3);
  opacity:.38;
}
/* The picture is anchored to the frame so it has a definite height, then
   object-fit letterboxes the photo inside it.
   Neither `max-height:100%` nor `height:100%` works on a centred grid item
   here: the percentage resolves against a height the layout treats as
   indefinite, so it is ignored and tall photographs overflow the frame. */
.photo-frame picture{
  /* Inset by the padding; the backdrop below still covers the whole frame. */
  position:absolute; inset:var(--frame-pad); z-index:1;
  display:block;
}
.photo-frame img{
  display:block;
  width:100%; height:100%;
  object-fit:contain;
}
@media (max-width:760px){
  .photo-frame{ aspect-ratio:4/3; }
}

/* ---------- post cards ----------
   Cards are kept a uniform height by clamping the title and excerpt, rather
   than by packing them into a waterfall. A CSS-only masonry fills columns
   top-to-bottom, which put the newest third of the posts down the left-hand
   column instead of across the top row — wrong for a listing sorted newest
   first. Clamping removes the dead space without disturbing the order. */
/* Push the date to the bottom so it lines up across a row. */
a.card .card-body{ flex:1; display:flex; flex-direction:column; }
a.card .card-meta{ margin-top:auto; padding-top:.85rem; }
}

/* The prototype centred this row with an inline style; keep it in the sheet. */
.cols-2-center{ align-items:center; }

/* Copyright sits on its own line at the very foot. */
.colophon .copyright{ display:block; margin-top:.6rem; }

/* A choice rendered as a link, for the booking options. */
a.choice-link{ text-decoration:none; color:inherit; display:block; }
a.choice-link:hover{ border-color:var(--green); }

/* ============================================================
   MENU
   Two columns of sections on a wide screen, one on a phone.
   Dish rows reuse the .dish pattern from The Cove page so the
   two never drift apart visually.
   ============================================================ */

.menu-jump{
  display:flex; flex-wrap:wrap; gap:.4rem .5rem;
  margin:0 0 1.25rem;
}
.menu-jump a{
  display:inline-block;
  padding:.35rem .8rem;
  border:1px solid var(--line); border-radius:999px;
  font-size:.8125rem; color:var(--ink-soft); text-decoration:none;
  transition:border-color .15s ease, color .15s ease;
}
.menu-jump a:hover{ color:var(--ink); border-color:var(--ink-soft); }
.menu-actions{ margin-top:.5rem; }

/* Columns, not a grid: a section should not be split across a column break. */
.menu-grid{ columns:2 22rem; column-gap:clamp(2rem,4vw,3.5rem); }
.menu-section{
  break-inside:avoid; -webkit-column-break-inside:avoid;
  display:block; margin:0 0 2.75rem;
}
.menu-section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; border-bottom:1px solid var(--line);
  padding-bottom:.5rem; margin-bottom:1rem;
}
.menu-section-head h2{
  font-size:clamp(1.25rem,2.2vw,1.6rem); margin:0; line-height:1.1;
}
.veg-tag{
  display:inline-block; margin-left:.5rem; padding:.05rem .4rem;
  border:1px solid var(--olive); border-radius:3px;
  font-family:"Karla",sans-serif; font-size:.6875rem; font-weight:700;
  color:var(--olive); vertical-align:middle;
}
.menu-all-price{
  margin:0; white-space:nowrap;
  font-size:.8125rem; font-weight:600; color:var(--ink-soft);
}
.menu-note{
  margin:0 0 1rem; font-size:.875rem; color:var(--ink-soft); font-style:italic;
}

.menu-list{ list-style:none; margin:0; padding:0; }
.menu-list li{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:.75rem; flex-wrap:wrap;
  padding:.4rem 0; border-bottom:1px dotted var(--line);
}
.menu-list li small{ flex-basis:100%; color:var(--ink-soft); }

.flavours{
  list-style:none; margin:.4rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.3rem .45rem;
}
.flavours li{
  font-size:.8125rem; color:var(--ink-soft);
  padding:.15rem .55rem; border:1px solid var(--line); border-radius:999px;
}

@media (max-width:640px){
  .menu-grid{ columns:1; }
}

/* Printing the page should produce something usable, since people will. */
@media print{
  .site-head, .foot, .menu-jump, .menu-actions, .proto{ display:none !important; }
  .menu-grid{ columns:2; }
  .band{ padding:0 !important; }
  a[href]:after{ content:""; }
}

/* A button-shaped element that is deliberately not yet a link. */
.btn-disabled{
  opacity:.55; cursor:default; pointer-events:none;
  background:transparent; color:var(--ink-soft); border-color:var(--line);
}

/* The masthead already closes with its own padding and a rule, so the first
   band beneath it does not need a full band's worth of space on top as well.
   The prototype applied band-tight here on some pages and not others, which
   left a 161px void above the blog, visit, shop, contact and book listings. */
.page-head + .band{ padding-top:clamp(2.75rem, 6vw, 4.5rem); }