/* ============================================================
   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); }
  /* order:3 wraps the burger onto a second flex line, and the brand plaque
     hangs 2.6rem below the first one — so a left-aligned burger lands
     underneath the plaque, which is opaque and positioned, and paints over
     it. margin-left:auto parks it on the right of that second line, clear of
     the plaque and directly under the booking button. */
  .burger{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.9rem; cursor:pointer; padding:.5rem .25rem; order:3; margin-left:auto; }
  .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.
   ============================================================ */

/* ---------- the section bar ----------
   Fourteen sections wrapped into a pill block filled a screen and a half on a
   phone before the first dish, and once you were past it there was no way back
   to it: the menu runs to about 10,000px.

   So the bar is one non-wrapping row that sticks. It pins below the masthead
   on desktop, clearing the logo plaque's overhang rather than sliding under
   it; on mobile the masthead is static, so it pins to the top of the viewport
   and is the only chrome on screen. Full-bleed, because a sticky bar with page
   content sliding past either side of it reads as a mistake. */
.menu-jump{
  position:sticky; z-index:40;
  top:calc(var(--head-h) + var(--logo-drop));
  display:flex; flex-wrap:nowrap; gap:.5rem;
  overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none; -ms-overflow-style:none;
  margin:0 calc(50% - 50vw) 2.5rem;
  padding:.7rem max(var(--gut), calc(50vw - 590px));
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.menu-jump::-webkit-scrollbar{ display:none; }
.menu-jump a{
  flex:0 0 auto; white-space:nowrap;
  padding:.35rem .8rem;
  border:1px solid var(--line); border-radius:999px;
  font-size:.8125rem; color:var(--ink-soft); text-decoration:none;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.menu-jump a:hover{ color:var(--ink); border-color:var(--ink-soft); }
/* Set by the scroll-spy, so it only ever appears when JavaScript is running. */
.menu-jump a[aria-current="true"]{
  background:var(--green); border-color:var(--green); color:#fff;
}
.menu-band{ padding-top:clamp(1.5rem,3vw,2.5rem); }
/* The bar covers the top of whatever you jump to, so targets clear it as well
   as the masthead that scroll-padding-top on <html> already accounts for. */
.menu-section{ scroll-margin-top:4.5rem; }
.menu-actions{ margin-top:.5rem; }

/* ---------- back to top ----------
   Hidden until the scroll-spy says there is something to go back up to, so a
   no-JavaScript reader never sees a control that does nothing useful. The
   sticky bar is what carries navigation in that case. */
.to-top{
  position:fixed; right:1rem; bottom:1rem; z-index:45;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.6rem .95rem;
  background:var(--green); color:#fff; text-decoration:none;
  border-radius:999px; font-size:.8125rem; font-weight:600;
  box-shadow:0 2px 10px rgb(27 46 36 / .25);
  opacity:0; visibility:hidden; transform:translateY(.5rem);
}
.to-top::before{ content:"\2191"; font-size:.95rem; }
.to-top.on{ opacity:1; visibility:visible; transform:none; }
@media (prefers-reduced-motion: no-preference){
  .to-top{ transition:opacity .2s ease, transform .2s ease, visibility .2s; }
}

/* 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; }
  .menu-jump{ top:0; }
}

/* Printing the page should produce something usable, since people will. */
@media print{
  .site-head, .foot, .menu-jump, .menu-actions, .to-top, .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); }

/* ============================================================
   THE COVE — the printed menu's skin
   The restaurant's printed menu has a character the web page had
   none of: a warm greige ground, terracotta headings, and a dozen
   pen-and-ink drawings. The colours below are measured out of the
   PDF, not matched by eye.

   It works by redefining the site's own custom properties on one
   wrapper rather than restyling each component: every band, rule
   and muted caption inside .cove picks the new palette up on its
   own, and the page still reads as the same site.
   ============================================================ */
.cove{
  --paper:   #DBD2D2;  /* the ground of every printed page */
  --oat:     #D2C7C5;
  --line:    #C3B7B5;
  --line-dk: #AC9D9A;
  --ink:     #2E2A28;
  --ink-soft:#6B615C;
  --cove-terracotta:#944B21;  /* the heading colour, 5,067 uses in the PDF */
  background:var(--paper);
}
.cove h1,
.cove .menu-section-head h2{ color:var(--cove-terracotta); }

/* Prices are set like the printed ones: small, spaced, terracotta. */
.cove .dish-price,
.cove .menu-list b,
.cove .menu-all-price{
  color:var(--cove-terracotta);
  font-family:"Karla",sans-serif; font-weight:700;
  letter-spacing:.03em;
}

/* The printed section rule runs either side of the name rather than under
   it — "——— SOUPS ———" — which is most of why the page reads as a menu
   and not as a list. */
.cove .menu-section-head{
  flex-direction:column; align-items:center; text-align:center;
  gap:.3rem; border-bottom:0; padding-bottom:0; margin-bottom:1.25rem;
}
.cove .menu-section-head h2{
  display:flex; align-items:center; justify-content:center; gap:.85rem;
  width:100%; letter-spacing:.05em;
}
.cove .menu-section-head h2::before,
.cove .menu-section-head h2::after{
  content:""; flex:1 1 auto; max-width:3.25rem; height:1px;
  background:var(--line-dk);
}
.cove .menu-note{ text-align:center; }

/* The drawings. Sized by height so the set keeps one optical weight
   however wide each one happens to be. */
.cove .menu-art{
  display:block; margin:0 auto .6rem;
  height:96px; width:auto; max-width:100%;
}

/* The "OPEN everyday" stamp, used once, the way a stamp is. */
.cove .cove-stamp{
  display:block; width:124px; height:auto;
  margin:0 0 -1.25rem auto;
  transform:rotate(-7deg);
  pointer-events:none;
}

@media (max-width:700px){
  .cove .menu-art{ height:78px; }
  .cove .cove-stamp{ width:92px; margin-bottom:-.5rem; }
}
@media print{
  .cove .cove-stamp{ display:none !important; }
}

/* The farm's green is the farm's. Inside the restaurant's skin the current
   section is marked in the menu's own terracotta. */
.cove .menu-jump a[aria-current="true"]{
  background:var(--cove-terracotta);
  border-color:var(--cove-terracotta);
}

/* The actions sit between the title and the section bar, so the band's full
   height would leave a lake of empty ground above the first dish — the thing
   the pill wall was already guilty of. */
.cove .band-tight{ padding:clamp(1.25rem,2.5vw,2rem) 0 0; }
.cove .menu-actions{ margin-top:0; }

/* ============================================================
   THE PRINTED MENU — /menu/view
   The five pages as laid out, read online. The strip is a plain
   horizontal scroll container, so swiping works with no script
   at all; the buttons and the counter are the enhancement, and
   pinch-zoom is the browser's own (the viewport meta sets no
   maximum-scale, so it is not blocked).
   ============================================================ */
.pv{ background:var(--oat); }
.pv-head{ max-width:var(--measure); }
.pv-head h1{ margin:0 0 .6rem; }
.pv-head p{ color:var(--ink-soft); margin:0; }
.pv-head .actions{ margin-top:1.5rem; }

.pv-stage{ margin-top:2.5rem; }
.pv-pages{
  display:flex; gap:1rem;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  padding-bottom:.75rem;
}
.pv-pages:focus-visible{ outline:2px solid var(--green); outline-offset:4px; }
.pv-page{
  flex:0 0 min(100%, 34rem);
  scroll-snap-align:center;
  margin:0;
}
.pv-page img{
  display:block; width:100%; height:auto;
  background:#DBD2D2;                 /* the page ground, so loading is quiet */
  border:1px solid var(--line-dk);
  border-radius:var(--r-box);
}

.pv-bar{
  display:flex; align-items:center; justify-content:center; gap:1rem;
  margin-top:1.25rem;
}
.pv-count{ font-size:.875rem; color:var(--ink-soft); min-width:9rem; text-align:center; }
.pv-step{
  width:2.5rem; height:2.5rem; border-radius:999px; cursor:pointer;
  border:1px solid var(--line-dk); background:var(--paper); color:var(--ink);
  font-size:1.25rem; line-height:1;
}
.pv-step:hover{ border-color:var(--ink-soft); }

/* Swapped in only where the browser really can render a PDF inline. */
.pv-embed{
  display:block; width:100%; height:min(86vh, 56rem);
  border:1px solid var(--line-dk); border-radius:var(--r-box);
  background:var(--paper);
}

@media print{ .pv-bar, .pv-head .actions{ display:none !important; } }