/* King Island Tours - v1 concept
   Palette is taken from the existing sites: the header green #0E3D38 from
   kingislandtours.com, the ochre #91631F used for their section icons, and the
   Wild Harvest brown #573122. Nothing invented. */

:root {
  --ink: #071F1C;
  --green: #0E3D38;
  --green-deep: #0A2C28;
  --brown: #573122;
  --ochre: #91631F;
  --ochre-light: #C09A54;
  --bone: #F7F4ED;
  --bone-dark: #EDE8DC;
  --paper: #FFFFFF;
  --text: #23211E;
  --muted: #6F6A61;
  --line: rgba(7, 31, 28, 0.14);
  --line-light: rgba(255, 255, 255, 0.22);

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --section: clamp(4.5rem, 9vw, 9rem);
}

/* ---------- base ---------- */

body {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.75;
  font-weight: 400;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.005em;
}

p { max-width: 68ch; }

a { color: inherit; }

img { max-width: 100%; }

::selection { background: var(--ochre); color: #fff; }

.wrap {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap-narrow {
  max-width: 780px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }
.section-tight { padding-block: clamp(3rem, 6vw, 5.5rem); }

.bg-bone { background: var(--bone); }
.bg-green { background: var(--green); color: #fff; }
.bg-ink { background: var(--ink); color: #fff; }
.bg-brown { background: var(--brown); color: #fff; }

.bg-green p, .bg-ink p, .bg-brown p { color: rgba(255, 255, 255, 0.82); }

/* ---------- type scale ---------- */

.display-xl { font-size: clamp(3rem, 8.5vw, 7.5rem); }
.display-lg { font-size: clamp(2.5rem, 5.5vw, 4.75rem); }
.display-md { font-size: clamp(2rem, 3.6vw, 3.25rem); }
.display-sm { font-size: clamp(1.5rem, 2.4vw, 2.125rem); }

.eyebrow {
  font-family: var(--sans);
  /* 13px, up from 11px. Asked for at client UAT: at 11px with 0.22em tracking
     these read as decoration rather than text, and were called out as hard
     work for older eyes. Every eyebrow on the site shares this one rule. */
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ochre);
  margin-bottom: 1.5rem;
  display: block;
}

.eyebrow-light { color: var(--ochre-light); }

.lead-serif {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  line-height: 1.4;
  font-weight: 300;
  color: var(--text);
}

.bg-green .lead-serif, .bg-ink .lead-serif, .bg-brown .lead-serif { color: #fff; }
.hero .lead-serif { color: rgba(255, 255, 255, 0.92); }

.small-caps {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}

.muted { color: var(--muted); }

.rule {
  width: 3.5rem;
  height: 1px;
  background: var(--ochre);
  border: 0;
  opacity: 1;
  margin: 0 0 2rem;
}

.rule-center { margin-inline: auto; }

/* ---------- buttons ---------- */

.btn-ki, .btn-ki-line, .btn-ki-light {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 1.05rem 2.25rem;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.btn-ki { background: var(--green); color: #fff; }
.btn-ki:hover { background: var(--ochre); color: #fff; }

.btn-ki-line { border-color: var(--green); color: var(--green); }
.btn-ki-line:hover { background: var(--green); color: #fff; }

.btn-ki-light { border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.btn-ki-light:hover { background: #fff; color: var(--green); }

.link-ochre {
  color: var(--ochre);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.link-ochre:hover { color: var(--green); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--green);
  color: #fff;
  padding: 0.9rem 1.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* Visible to a screen reader, not on the page. WordPress markup and the theme's
   own disclosure buttons both rely on this class existing. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  clip-path: none;
}

/* A visible focus ring everywhere. Browsers removed the default outline on
   several of these and nothing replaced it. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ochre);
  outline-offset: 3px;
}

/* ---------- navigation ---------- */

.nav-ki {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1030;
  padding-block: 1.5rem;
  transition: background 0.35s, padding 0.35s, box-shadow 0.35s;
}

.nav-ki.is-solid {
  background: var(--green);
  padding-block: 0.85rem;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

.nav-ki .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.nav-ki .brand {
  flex: 0 0 auto;
  display: block;
}

.nav-ki .brand img {
  height: 46px;
  width: auto;
  display: block;
  transition: height 0.35s;
}

.nav-ki.is-solid .brand img { height: 38px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  padding-block: 0.5rem;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a:focus-visible { border-bottom-color: var(--ochre-light); }

/*
 * Where you are.
 *
 * This matched `a.active` before, a class WordPress has never emitted: core
 * puts `current-menu-item` on the <li>, so the rule was dead and no menu item
 * ever marked the current page. The current page takes the colour as well as
 * the rule, so it stays distinguishable from whatever the cursor is over.
 */
.nav-links .current-menu-item > a,
.nav-links .current_page_item > a,
.nav-links .current-menu-ancestor > a,
.nav-links .current-menu-parent > a,
.nav-links .current_page_ancestor > a,
.nav-links .current_page_parent > a {
  color: var(--ochre-light);
  border-bottom-color: var(--ochre-light);
}

/* ---------- navigation: submenus ---------- */

.nav-links li { position: relative; }

.nav-links .menu-item-has-children > a { padding-right: 1.1rem; }

.nav-links .submenu-toggle {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: none;
  border: 0;
  padding: 0.35rem 0;
  line-height: 0;
  color: inherit;
  cursor: pointer;
}

.nav-links .submenu-toggle svg {
  width: 0.5rem;
  height: 0.5rem;
  fill: currentColor;
  transition: transform 0.25s;
}

.nav-links .sub-menu {
  position: absolute;
  top: 100%;
  left: -1.25rem;
  min-width: 16rem;
  margin: 1.35rem 0 0;
  padding: 0.6rem 0;
  list-style: none;
  background: var(--green-deep);
  box-shadow: 0 20px 44px rgba(7, 31, 28, 0.38);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.4rem);
  transition: opacity 0.22s, transform 0.22s, visibility 0.22s;
  z-index: 20;
}

/* An invisible bridge across the bar's own padding, so the pointer can travel
   from the link down to the panel without the panel closing under it. */
.nav-links .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1.35rem;
  height: 1.35rem;
}

.nav-links li:hover > .sub-menu,
.nav-links li:focus-within > .sub-menu,
.nav-links li.is-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav-links li.is-open > .submenu-toggle svg { transform: rotate(180deg); }

.nav-links .sub-menu a {
  display: block;
  padding: 0.62rem 1.4rem;
  letter-spacing: 0.12em;
  border-bottom: 0;
  white-space: normal;
  color: rgba(255, 255, 255, 0.86);
}

.nav-links .sub-menu a:hover,
.nav-links .sub-menu a:focus-visible,
.nav-links .sub-menu .current-menu-item > a,
.nav-links .sub-menu .current_page_item > a {
  color: var(--ochre-light);
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 0;
}

.nav-phone {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  white-space: nowrap;
}
.nav-phone:hover { color: #fff; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  color: #fff;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.5rem 0;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: min(88vh, 860px);
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
}

.hero-short { min-height: min(62vh, 620px); }

.hero img.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(7, 31, 28, 0.55) 0%,
    rgba(7, 31, 28, 0.12) 32%,
    rgba(7, 31, 28, 0.55) 72%,
    rgba(7, 31, 28, 0.82) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: clamp(3rem, 7vw, 6rem);
  padding-top: 9rem;
}

.hero h1 { color: #fff; }

.hero .eyebrow { color: var(--ochre-light); }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-light);
}

.hero-meta div { min-width: 8rem; }

.hero-meta dt {
  /* 12px, up from 10px. See .eyebrow above. */
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ochre-light);
  font-weight: 500;
  margin-bottom: 0.35rem;
}

.hero-meta dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.375rem;
  color: #fff;
}

/*
 * Captions that lead somewhere.
 *
 * Asked for at client UAT: the hero eyebrow and the meta labels name things
 * that have their own page, and a visitor who reads "DINING" and wants the
 * restaurant should not have to go looking for the menu.
 *
 * Two problems to solve. They have to look clickable, or nobody will try:
 * hence the faint underline, which firms up on hover and focus. And they have
 * to be tappable, which 12px of text is not: the label link goes full-width
 * inside its own cell and takes vertical padding, pulled back out with a
 * negative margin so nothing in the layout moves.
 */
.eyebrow a,
.hero-meta dt a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color 0.15s ease;
}

.eyebrow a:hover,
.eyebrow a:focus-visible,
.hero-meta dt a:hover,
.hero-meta dt a:focus-visible {
  text-decoration-color: currentColor;
}

/* Tap target. Inline-block on the eyebrow, block in the meta strip where the
   cell is 8rem wide and there is room to use it. */
.eyebrow a {
  display: inline-block;
  padding: 0.3rem 0;
  margin: -0.3rem 0;
}

.hero-meta dt a {
  display: block;
  padding: 0.35rem 0;
  margin: -0.35rem 0;
}

/* ---------- editorial split ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
}

.split-media img {
  width: 100%;
  height: clamp(24rem, 42vw, 40rem);
  object-fit: cover;
  display: block;
}

.split-tall .split-media img { height: clamp(28rem, 54vw, 46rem); }

.split-reverse .split-media { order: 2; }

/* Full-bleed image column that runs to the edge of the viewport */
.bleed-left .split-media { margin-left: calc(var(--gutter) * -1); }
.bleed-right .split-media { margin-right: calc(var(--gutter) * -1); }

.figure-caption {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.9rem;
}

/* ---------- tour cards ---------- */

.tour-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: clamp(1.75rem, 3vw, 3rem);
}

/* No card background. The card is a photograph with text beneath it, aligned
   to the photograph's own edges, so it has to sit directly on whatever the
   section's colour is. Painting it white turned that alignment into a box with
   the copy jammed against its sides, which is exactly how it read on the bone
   sections (home page, "other ways to see the island"). */
.tour-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: transparent;
}

.tour-card .thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.tour-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.tour-card:hover .thumb img { transform: scale(1.045); }

.tour-card .body {
  padding: 1.75rem 0 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tour-card .duration {
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ochre);
  font-weight: 500;
  margin-bottom: 0.85rem;
}

.tour-card h3 {
  font-size: 1.75rem;
  margin-bottom: 0.9rem;
}

.tour-card p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

.tour-card .foot {
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem 1rem;
  /* A two-line price used to push "View tour" out of the card entirely. */
  flex-wrap: wrap;
}

.tour-card .price {
  font-family: var(--serif);
  font-size: 1.375rem;
  line-height: 1.25;
  min-width: 0;
}

.tour-card .more {
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ochre);
  font-weight: 500;
  flex: 0 0 auto;
  margin-left: auto;
}

/* ---------- inclusions and fact lists ---------- */

.inclusions {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 3rem;
}

.inclusions li {
  break-inside: avoid;
  padding: 0.7rem 0 0.7rem 1.75rem;
  border-bottom: 1px solid var(--line);
  position: relative;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.inclusions li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.35rem;
  width: 0.6rem;
  height: 1px;
  background: var(--ochre);
}

.facts {
  margin: 0;
  border-top: 1px solid var(--line);
}

.facts > div {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 1.5rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
}

.facts dt {
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  padding-top: 0.35rem;
}

.facts dd { margin: 0; font-size: 0.9375rem; }

.price-block {
  border: 1px solid var(--line);
  padding: 2.25rem;
  background: var(--bone);
}

.price-block .amount {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  line-height: 1;
  display: block;
  margin-bottom: 0.5rem;
}

/* ---------- quote ---------- */

.quote {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2.375rem);
  line-height: 1.35;
  font-weight: 300;
  font-style: italic;
}

.quote-attrib {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 2rem;
  color: var(--ochre-light);
}

/* ---------- review ---------- */

/*
 * A review has to look like a review.
 *
 * The Bee Lane testimonial rendered through the generic pull-quote component,
 * which is the same treatment a line of the client's own marketing copy gets.
 * Nothing said it was somebody else speaking, so it read as the site talking
 * about itself in italics. The quote mark, the rating and a named source are
 * what make it evidence rather than decoration.
 */

.review {
  margin: 0;
  text-align: center;
  position: relative;
}

.review-mark {
  font-family: var(--serif);
  font-size: clamp(4rem, 9vw, 7rem);
  line-height: 0.6;
  color: var(--ochre-light);
  opacity: 0.55;
  display: block;
  margin-bottom: 1.25rem;
  user-select: none;
}

.review-stars {
  display: flex;
  justify-content: center;
  gap: 0.3rem;
  margin-bottom: 1.75rem;
  color: var(--ochre-light);
}

.review-stars svg { width: 1.0625rem; height: 1.0625rem; fill: currentColor; }

.review-quote {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.5vw, 2.125rem);
  line-height: 1.4;
  font-weight: 300;
  font-style: italic;
  margin: 0;
  max-width: 38ch;
  margin-inline: auto;
}

.review-quote p { max-width: none; margin: 0; }

.review-attrib {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
}

.review-author {
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}

.review-source {
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ochre-light);
}

.bg-bone .review-mark,
.bg-bone .review-stars,
.bg-bone .review-source,
.section:not([class*="bg-"]) .review-mark,
.section:not([class*="bg-"]) .review-stars,
.section:not([class*="bg-"]) .review-source { color: var(--ochre); }

/* ---------- video ---------- */

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.video-caption {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 1rem;
  margin-bottom: 0;
}

.bg-green .video-caption,
.bg-ink .video-caption,
.bg-brown .video-caption { color: rgba(255, 255, 255, 0.6); }

/* ---------- audio credit ---------- */

.audio-credit {
  margin: 0;
  padding: 2rem 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-width: 44rem;
}

.audio-outlet {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ochre);
  font-weight: 500;
}

.audio-title {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.4vw, 1.875rem);
  font-weight: 300;
  line-height: 1.2;
  margin: 0;
}

.audio-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin: 0;
  max-width: none;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* A dot between the speaker and the duration, but not before the first one. */
.audio-meta span + span::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ochre);
  vertical-align: middle;
  margin-right: 0.9rem;
  margin-left: -0.35rem;
}

/*
 * The browser's own player, given room rather than restyled.
 *
 * Audio controls cannot be styled across browsers without replacing them
 * entirely, which means rebuilding keyboard access, screen reader labels and
 * the OS media keys. Not worth it for one recording. Full width and a little
 * breathing space is all it needs.
 */
.audio-player {
  width: 100%;
  margin-block: 0.75rem 0.25rem;
  border-radius: 2px;
}

.audio-source {
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

.audio-source a { color: var(--ochre); text-decoration: none; border-bottom: 1px solid currentColor; }
.audio-source a:hover { color: var(--green); }

/* ---------- media mentions ---------- */

.media-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}

.media-item {
  background: var(--bone);
  padding: 1.5rem 0;
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 0.5rem 2rem;
  align-items: baseline;
}

.media-outlet {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ochre);
  font-weight: 500;
}

.media-body { margin: 0; max-width: 60ch; }

/* A mention that carries a heading, a player or a film needs a column rather
   than a two-column row, so the outlet sits above it instead of beside it. */
.media-item-rich {
  grid-template-columns: 1fr;
  gap: 0.5rem;
  padding: 1.75rem 0;
}

.media-title {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  font-weight: 300;
  line-height: 1.25;
  margin: 0;
}

.media-title a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.media-title a:hover { color: var(--ochre); border-bottom-color: currentColor; }

.media-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.25rem;
  margin: 0;
  max-width: none;
  font-size: 0.8125rem;
  color: var(--muted);
}

.media-meta span + span::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ochre);
  vertical-align: middle;
  margin-right: 0.9rem;
  margin-left: -0.35rem;
}

.media-summary { margin: 0.2rem 0 0; max-width: 62ch; }

.media-item-rich .audio-player { margin-block: 1rem 0; }
.media-item-rich .video-frame { margin-top: 1rem; }
.media-body cite { font-style: normal; color: var(--muted); }

/* ---------- restaurant menu ---------- */

/*
 * `dish-row`, not `menu-item`.
 *
 * WordPress puts class="menu-item" on every single navigation <li>, so the
 * restaurant's dish rows and the site navigation were matching the same rule.
 * The nav survived it only by accident: one inline <a> inside a grid container
 * looks the same as one inside a block. The moment the nav gained a disclosure
 * button and a submenu, those became grid items and every parent item in the
 * bar grew to 85px tall with its chevron pushed into the next item's space.
 *
 * Scoping the nav rules harder would have papered over it. The dish row is the
 * one with a choice about its name, so it is the one that changes.
 */
.dish-row-course { margin-bottom: 4rem; }

.dish-row {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: start;
}

.dish-row h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.dish-row .technique {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
  max-width: 56ch;
}

.dish-row .technique b {
  display: block;
  font-family: var(--sans);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ochre);
  font-weight: 500;
  margin-bottom: 0.3rem;
}

.dish-row .cost {
  font-family: var(--serif);
  font-size: 1.5rem;
  white-space: nowrap;
}

/* ---------- gallery ---------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0.75rem;
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery .g-wide { grid-column: span 6; aspect-ratio: 3 / 2; }
.gallery .g-tall { grid-column: span 3; aspect-ratio: 2 / 3; }
.gallery .g-sq { grid-column: span 3; aspect-ratio: 1; }
.gallery .g-full { grid-column: span 12; aspect-ratio: 3 / 1; }

/* ---------- footer ---------- */

.footer-ki {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.72);
  padding-block: clamp(3.5rem, 7vw, 6rem) 2.5rem;
  font-size: 0.9375rem;
}

.footer-ki h2 {
  font-family: var(--sans);
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ochre-light);
  font-weight: 500;
  margin-bottom: 1.35rem;
}

.footer-ki a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.footer-ki a:hover { color: #fff; }

.footer-ki ul { list-style: none; margin: 0; padding: 0; }
.footer-ki li { margin-bottom: 0.65rem; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 4rem);
}

.footer-brand img {
  height: 54px;
  margin-bottom: 1.75rem;
}

.footer-base {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

/* ---------- section head ---------- */

.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head .lead-serif { margin-bottom: 0; }
.section-head.text-center .lead-serif { margin-inline: auto; }

/* ---------- prose ----------
   Editor content. The client writes paragraphs and lists; this gives them the
   same rhythm as the hand-built sections without the client needing to know a
   single class name. */

.prose { max-width: 70ch; }
.prose.wrap-narrow { max-width: 780px; }
.prose > *:first-child { margin-top: 0; }
.prose > *:last-child { margin-bottom: 0; }

.prose p { margin-bottom: 1.5rem; }

.prose h2 {
  font-size: clamp(1.75rem, 2.8vw, 2.5rem);
  margin-top: 3.5rem;
  margin-bottom: 1.25rem;
}

.prose h3 {
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  margin-top: 2.75rem;
  margin-bottom: 1rem;
}

.prose .label {
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ochre);
  font-weight: 500;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.prose ul, .prose ol { margin: 0 0 1.5rem; padding-left: 1.35rem; }
.prose li { margin-bottom: 0.6rem; }

.prose a { color: var(--ochre); text-decoration: none; border-bottom: 1px solid currentColor; }
.prose a:hover { color: var(--green); }

.prose blockquote {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.4;
  font-style: italic;
  font-weight: 300;
  margin: 2.5rem 0;
  padding-left: 2rem;
  border-left: 2px solid var(--ochre);
  color: var(--ink);
}

.prose blockquote cite {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 1.25rem;
}

.prose img { max-width: 100%; height: auto; }

.prose hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 3rem 0;
  opacity: 1;
}

/* ---------- split body ---------- */

.split-body { min-width: 0; }

/* ---------- tour page layout ---------- */

.tour-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.tour-aside { position: sticky; top: 7rem; }
.tour-aside .facts { margin-top: 2rem; }
.tour-aside .facts > div { grid-template-columns: 7.5rem 1fr; gap: 1rem; }

/* ---------- numbered sequence ---------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}

.step {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: clamp(1.75rem, 3vw, 2.75rem) 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.step:first-child { border-top: 1px solid var(--line); }

.step-n {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1;
  color: var(--ochre);
  font-weight: 300;
}

.step-body h3 { font-size: clamp(1.25rem, 2vw, 1.625rem); margin-bottom: 0.65rem; }
.step-body p { color: var(--muted); font-size: 0.9375rem; line-height: 1.7; }

.bg-green .step, .bg-ink .step, .bg-brown .step { border-color: var(--line-light); }
.bg-green .step-n, .bg-ink .step-n, .bg-brown .step-n { color: var(--ochre-light); }
.bg-green .step-body h3, .bg-ink .step-body h3, .bg-brown .step-body h3 { color: #fff; }

/* ---------- contact block ---------- */

.contact-block .facts > div { grid-template-columns: 7rem 1fr; gap: 1rem; }

/* ---------- forms ----------
   Gravity Forms ships its own stylesheet, which fights the type scale and the
   button shapes. It is disabled in functions.php and the markup is styled here
   like any other component, so a form looks like the site rather than like a
   plugin. */

.ki-form .gform_wrapper { margin: 0; }
.ki-form .gform_heading { margin-bottom: 2rem; }
.ki-form .gform_title { font-size: 1.75rem; margin-bottom: .5rem; }
.ki-form .gform_description { color: var(--muted); font-size: .9375rem; }

.ki-form .gform_fields {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ki-form .gfield { grid-column: span 12; min-width: 0; }
.ki-form .gfield--width-half { grid-column: span 6; }
.ki-form .gfield--width-third { grid-column: span 4; }

.ki-form .gfield_label {
  display: block;
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 0.6rem;
}

.ki-form .gfield_required { color: var(--ochre); margin-left: .25rem; }

.ki-form input[type=text],
.ki-form input[type=email],
.ki-form input[type=tel],
.ki-form input[type=number],
.ki-form input[type=url],
.ki-form input[type=date],
.ki-form select,
.ki-form textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 0.9rem 1rem;
  transition: border-color .2s ease;
}

.ki-form textarea { min-height: 9rem; resize: vertical; }

.ki-form input:focus,
.ki-form select:focus,
.ki-form textarea:focus {
  outline: none;
  border-color: var(--ochre);
}

.ki-form .gfield_description {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: 0.5rem;
}

.ki-form .gfield_radio,
.ki-form .gfield_checkbox { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }

.ki-form .gchoice { display: flex; align-items: center; gap: 0.65rem; }
.ki-form .gchoice label { font-size: 0.9375rem; margin: 0; }
.ki-form .gchoice input { accent-color: var(--green); width: 1rem; height: 1rem; }

/* Dining times read better as a row of choices than a stacked list. */
.ki-form .ki-choice-row .gfield_radio {
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.ki-form .gform_footer { margin-top: 2.5rem; }

.ki-form .gform_button {
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--green);
  background: var(--green);
  color: #fff;
  padding: 1.05rem 2.25rem;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease;
}

.ki-form .gform_button:hover { background: var(--ochre); border-color: var(--ochre); }

.ki-form .gform_validation_errors {
  border: 1px solid var(--ochre);
  background: var(--bone);
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  font-size: 0.9375rem;
}

.ki-form .gfield_error input,
.ki-form .gfield_error textarea,
.ki-form .gfield_error select { border-color: #A3341F; }

.ki-form .validation_message {
  font-size: 0.8125rem;
  color: #A3341F;
  margin-top: 0.5rem;
}

.ki-form .gform_confirmation_message {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.4;
  padding: 2rem;
  background: var(--bone);
  border-left: 2px solid var(--ochre);
}

/* ---------- honeypot ----------
   Gravity Forms' anti-spam field is hidden by Gravity Forms' own stylesheet,
   which this theme disables (see gform_disable_css in functions.php). That left
   it fully visible: a real customer sees an empty box labelled COMPANY, URL or
   INSTAGRAM above the fields they actually came to fill in. Anyone who fills it
   has their enquiry silently classified as spam, which is a lost booking.

   Found by the usability test. Positioned off-screen rather than display:none
   so the field is still submitted, which is what makes the trap work. */

.ki-form .gform_validation_container,
.ki-form .gfield--type-honeypot {
  position: absolute !important;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* On a dark section the labels and rules have to invert. */
.bg-green .ki-form .gfield_label,
.bg-ink .ki-form .gfield_label,
.bg-brown .ki-form .gfield_label { color: var(--ochre-light); }

.bg-green .ki-form input,
.bg-green .ki-form textarea,
.bg-green .ki-form select {
  background: rgba(255,255,255,.07);
  border-color: var(--line-light);
  color: #fff;
}

/* ---------- responsive ---------- */

@media (max-width: 1200px) {
  .nav-links { gap: clamp(0.85rem, 1.8vw, 1.5rem); }
}

@media (max-width: 1100px) {
  /* Logo, seven links and a phone number stop fitting here. The phone goes:
     it is also in the footer, on the contact page and in every contact block. */
  .nav-phone { display: none; }
}

@media (max-width: 991px) {
  .split { grid-template-columns: 1fr; }
  .split-reverse .split-media { order: 0; }
  .bleed-left .split-media,
  .bleed-right .split-media {
    margin-inline: calc(var(--gutter) * -1);
  }
  .split-media img { height: clamp(18rem, 55vw, 26rem); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .gallery .g-wide { grid-column: span 12; }
  .gallery .g-tall, .gallery .g-sq { grid-column: span 6; }

  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--green);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 1rem var(--gutter) 2rem;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding-block: 0.85rem; }
  .nav-ki { padding-block: 1rem; }
  .nav-ki:has(.nav-links.is-open) { background: var(--green); }

  /* Submenus become an accordion. Hover is not available here, so the panel is
     opened by its own button rather than by touching the parent link: the
     parent link still has to go to the parent page. */
  .nav-links li { width: 100%; }

  /*
   * The chevron is laid out in flow here rather than absolutely.
   *
   * Absolutely positioned at top:50% it centres on the whole list item, and on
   * mobile the list item grows to contain the open submenu, so the control for
   * "Tours" drifted down beside "Hidden South". In flow it stays beside its own
   * label whatever the panel below is doing.
   */
  .nav-links .menu-item-has-children {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .nav-links .menu-item-has-children > a { flex: 1 1 auto; padding-right: 0; }
  .nav-links .submenu-toggle {
    position: static;
    transform: none;
    flex: 0 0 auto;
  }
  .nav-links .menu-item-has-children > .sub-menu { flex: 1 0 100%; }
  .nav-links .sub-menu {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    margin: 0;
    padding: 0 0 0.6rem 1.1rem;
    background: transparent;
    box-shadow: none;
    border-left: 1px solid var(--line-light);
  }
  .nav-links .sub-menu::before { content: none; }
  .nav-links li.is-open > .sub-menu { display: block; }
  .nav-links .sub-menu a { padding: 0.6rem 0; }
  .nav-links .sub-menu a:hover,
  .nav-links .sub-menu .current-menu-item > a { background: transparent; }
  .nav-links .submenu-toggle { padding: 0.85rem 0.5rem; }
}

@media (max-width: 767px) {
  body { font-size: 1rem; }
  .media-item { grid-template-columns: 1fr; gap: 0.4rem; }
  .inclusions { columns: 1; }
  .facts > div { grid-template-columns: 1fr; gap: 0.25rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-meta { gap: 1.5rem 2rem; }

  /* Caption links are 32px tall at the desktop padding, which is a small
     target on a phone. The extra padding takes them past 44px; the matching
     negative margin keeps the layout where it was. */
  .eyebrow a,
  .hero-meta dt a {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    margin-top: -0.7rem;
    margin-bottom: -0.7rem;
  }
  .dish-row { grid-template-columns: 1fr; gap: 0.75rem; }
  .nav-phone { display: none; }
}

/* ---------- responsive: components added in v1.0.0 ---------- */

@media (max-width: 991px) {
  .tour-layout { grid-template-columns: 1fr; }
  .tour-aside { position: static; }
  .ki-form .gfield--width-half,
  .ki-form .gfield--width-third { grid-column: span 12; }
}

@media (max-width: 767px) {
  .step { grid-template-columns: 3rem 1fr; gap: 1rem; }
  /* The phone and email in a contact block are the two things most likely to
     be tapped on a phone, and as bare inline links they were 22px tall. */
  .contact-block .facts dd a,
  .footer-ki a[href^="tel:"],
  .footer-ki a[href^="mailto:"] {
    display: inline-block;
    padding-block: 0.45rem;
  }
  .prose h2 { margin-top: 2.5rem; }
  .contact-block .facts > div,
  .tour-aside .facts > div { grid-template-columns: 1fr; gap: .25rem; }
  .ki-form .ki-choice-row .gfield_radio { grid-auto-flow: row; gap: .75rem; }
  .price-block { padding: 1.75rem; }
}


/* ---------- navigation over a page with no photograph ---------- */

/*
 * The bar is white text with no background until the page is scrolled, which is
 * correct over a hero and catastrophic without one: on the two Terms pages and
 * the privacy policy the entire menu was invisible: white on white: until the
 * visitor happened to scroll.
 *
 * The body carries `ki-no-hero` whenever nothing is positively known to sit
 * behind the bar (see ki_view_has_hero_image()), so the default for anything
 * new is the safe one rather than the invisible one.
 */
/*
 * Anchor links land below the fixed bar, not underneath it.
 *
 * "Book a table" on the sample menu, and "Enquire now" on every tour page, both
 * jump to an id further down their destination. With a fixed header and no
 * scroll padding the browser puts that id at y=0, which is behind the bar: so
 * the heading the visitor was sent to see is the one thing they cannot see.
 */
/*
 * Built on WordPress's own admin-bar variable rather than hard-coded pixels.
 * admin-bar.css sets `html { scroll-padding-top: var(--wp-admin--admin-bar--height) }`
 * and maintains that variable responsively (32px, 46px under 783px). Composing
 * with it means one rule covers logged-in and logged-out, at every width, and
 * `:root` outranks the bare `html` selector whichever stylesheet loads last.
 */
:root { scroll-padding-top: calc(6rem + var(--wp-admin--admin-bar--height, 0px)); }

/*
 * Below the admin bar, not behind it.
 *
 * The bar is position:fixed at top:0, and WordPress's admin bar is also fixed
 * at top:0, so for anyone logged in, which is every person reviewing this
 * site, the site's own menu sat underneath it and the logo was half hidden.
 * Same variable as above, so the two stay in step and a logged-out visitor
 * gets the 0px fallback.
 */
.nav-ki { top: var(--wp-admin--admin-bar--height, 0px); }

.ki-no-hero .nav-ki {
  background: var(--green);
  padding-block: 0.85rem;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ki-no-hero .nav-ki .brand img { height: 38px; }

/* The bar is fixed, so the page needs to start below it. The first section's
   own padding did this by accident at desktop widths and failed at narrow ones,
   where --section drops to 4.5rem and the bar is taller than the gap. */
.ki-no-hero #content { padding-top: 4.5rem; }
.ki-no-hero #content > .section:first-child { padding-top: clamp(1.5rem, 4vw, 4rem); }


/* ---------- Elementor: the theme owns vertical rhythm ---------- */

/*
 * Elementor puts 20px of margin under every widget that is not the last in its
 * container. Our widgets are not widgets in that sense: each one renders a
 * full-bleed <section> with its own padding, so that margin became a 20px strip
 * of page background between every band on the three builder pages.
 *
 * It was invisible for as long as the bands either side of it were white or
 * bone. It is a white stripe the moment one of them is green or ink, which is
 * what the film on the home page exposed, but the gap was there all along,
 * under every hero and every split.
 *
 * Scoped to our own widget classes so Elementor's spacing still applies to any
 * of its native widgets someone adds later.
 */
.elementor-widget[class*="elementor-widget-ki-"]:not(:last-child) {
  margin-block-end: 0;
}