/* Kingdom Harvester opt-in layout standard. See SITE_PAGE_LAYOUT_STANDARD.md.
   Load after the theme and page skin. Do not combine with kh-panel-document. */
html.kh-layout-document {
  /* Measured by kh-page-layout.js; these outputs never size the header. */
  --kh-header-height: 0px;
  --kh-layout-clearance: 0px;
  --kh-layout-viewport: 100vh;
  --kh-layout-usable: calc(var(--kh-layout-viewport) - var(--kh-layout-clearance));
  --kh-layout-wide: 1480px;
  --kh-layout-content: 1180px;
  --kh-layout-reading: 720px;
  --kh-layout-gutter: 28px;
  --kh-layout-space-small: 12px;
  --kh-layout-space: 24px;
  --kh-layout-card-space: 28px;
  --kh-layout-heading-gap: 40px;
  --kh-layout-section-space: clamp(32px, 4.5vh, 54px);
  --kh-layout-hero-title: clamp(3.4rem, 5vw, 5.5rem);
  scroll-padding-top: var(--kh-layout-clearance);
  scroll-snap-type: none;
}
@supports (height: 100svh) {
  html.kh-layout-document { --kh-layout-viewport: 100svh; }
}
.kh-layout-document .kh-layout-header {
  position: relative;
  height: auto;
  min-height: 0;
  padding: 12px var(--kh-layout-gutter);
  flex-wrap: wrap;
  gap: 12px 28px;
}
.kh-layout-document .kh-layout-header .kh-site-nav { flex-wrap: wrap; gap: 12px 23px; }
.kh-layout-document .kh-layout-header .kh-site-nav a { display: inline-flex; min-height: 44px; align-items: center; }
.kh-layout-document [id] { scroll-margin-top: 0; }
.kh-layout-document .kh-layout-container,
.kh-layout-document .kh-layout-wide,
.kh-layout-document .kh-layout-reading {
  width: min(var(--kh-layout-content), calc(100% - 2 * var(--kh-layout-gutter)));
  margin-inline: auto;
}
.kh-layout-document .kh-layout-wide { max-width: var(--kh-layout-wide); width: calc(100% - 2 * var(--kh-layout-gutter)); }
.kh-layout-document .kh-layout-reading { max-width: var(--kh-layout-reading); }
.kh-layout-document .kh-layout-section { padding-block: var(--kh-layout-section-space); }
.kh-layout-document .kh-layout-landing { scroll-margin-top: 0; overflow: visible; }
.kh-layout-document .kh-layout-full { min-height: 0; }
.kh-layout-document .kh-layout-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--kh-green-950);
  color: var(--kh-cream-light);
}
.kh-layout-document .kh-layout-hero-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--kh-layout-space);
  padding: var(--kh-layout-section-space) var(--kh-layout-gutter);
  margin: 0;
  width: auto;
}
.kh-layout-document .kh-layout-hero-copy h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: clamp(2.5rem, 6vw, 4.1rem);
  line-height: 1;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.kh-layout-document .kh-layout-hero-copy p { margin: 0; }
.kh-layout-document .kh-layout-hero-copy .kh-eyebrow { color: var(--kh-gold); }
.kh-layout-document .kh-layout-hero-media {
  min-width: 0;
  margin: 0;
  width: auto;
  display: flex;
  align-items: center;
  background: var(--kh-green-900);
}
.kh-layout-document .kh-layout-hero-media img { display: block; width: 100%; height: auto; border: 0; box-shadow: none; }
.kh-layout-document .kh-layout-prose { line-height: 1.75; margin-bottom: var(--kh-layout-heading-gap); }
.kh-layout-document .kh-layout-prose section { margin-top: var(--kh-layout-heading-gap); }
.kh-layout-document .kh-layout-prose section section { border-top: 1px solid var(--kh-line); padding-top: var(--kh-layout-space); }
.kh-layout-document .kh-layout-prose p { margin-bottom: 0.95em; }
.kh-layout-document .kh-layout-prose h2 { margin-bottom: var(--kh-layout-space); }
.kh-layout-document .kh-layout-prose h3 { margin-bottom: var(--kh-layout-space-small); }
.kh-layout-document .kh-layout-prose h2,
.kh-layout-document .kh-layout-prose h3 { break-after: avoid; }
.kh-layout-document .kh-layout-prose section > :last-child { margin-bottom: 0; }
.kh-layout-document .kh-layout-callout { padding: var(--kh-layout-card-space); }
.kh-layout-document .kh-layout-cards { display: grid; grid-template-columns: 1fr; gap: var(--kh-layout-space); margin-block: 0; }
.kh-layout-document .kh-layout-cards > * { padding: var(--kh-layout-card-space); }
.kh-layout-document .kh-layout-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--kh-layout-space); align-items: center; }
.kh-layout-document .kh-layout-pair > * { min-width: 0; }
.kh-layout-document .kh-layout-closing { display: flex; flex-direction: column; background: #eee8db; }
.kh-layout-document .kh-layout-closing > .kh-layout-section { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--kh-layout-space); }
.kh-layout-document .kh-layout-closing > footer { flex: none; }
.kh-layout-document .kh-layout-closing h2,
.kh-layout-document .kh-layout-closing .kh-layout-section > p { margin: 0; }
@media (min-width: 621px) and (max-width: 999px) {
  .kh-layout-document .kh-layout-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .kh-layout-document .kh-layout-header {
    position: sticky;
    top: 0;
    height: auto;
    flex-wrap: wrap;
    padding-inline: max(var(--kh-layout-gutter), calc((100% - var(--kh-layout-content)) / 2));
  }
  .kh-layout-document.kh-layout-measured .kh-layout-full { min-height: var(--kh-layout-usable); }
  .kh-layout-document .kh-layout-hero { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .kh-layout-document .kh-layout-hero-copy {
    padding-inline: max(var(--kh-layout-gutter), calc((100vw - var(--kh-layout-wide)) / 2));
  }
  .kh-layout-document .kh-layout-hero-copy h1 { font-size: var(--kh-layout-hero-title); }
  .kh-layout-document .kh-layout-hero-media img { max-height: var(--kh-layout-usable); object-fit: contain; }
  .kh-layout-document .kh-layout-pair { grid-template-columns: minmax(0, 0.9fr) minmax(400px, 1.1fr); gap: var(--kh-layout-heading-gap); }
  .kh-layout-document .kh-layout-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html.kh-layout-document.kh-layout-snap { scroll-snap-type: y proximity; }
  .kh-layout-snap .kh-layout-landing { scroll-snap-align: start; scroll-snap-stop: normal; }
  /* The first hero already lands at document start. An initial snap while
     header measurement settles can otherwise move it under the header. */
  .kh-layout-snap .kh-layout-hero { scroll-snap-align: none; }
}
@media (max-width: 620px) {
  html.kh-layout-document { --kh-layout-gutter: 20px; --kh-layout-card-space: 20px; --kh-layout-heading-gap: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  html.kh-layout-document,
  html.kh-layout-document.kh-layout-snap { scroll-behavior: auto; scroll-snap-type: none; }
}

/* Immersive describes geometry, not image fit: 61% media as on Living
   Stones and a quieter editorial title scale. Select contain or cover on the
   media element independently. Unspecified media defaults to safe containment. */
@media (min-width: 1000px) {
  .kh-layout-document .kh-layout-hero--immersive {
    --kh-layout-hero-title: clamp(2.5rem, 3.1vw, 3.75rem);
    grid-template-columns: minmax(0, 39fr) minmax(0, 61fr);
  }
  .kh-layout-document .kh-layout-hero--immersive .kh-layout-hero-copy {
    justify-content: flex-start;
    padding-top: calc(2 * var(--kh-layout-section-space));
    padding-bottom: var(--kh-layout-section-space);
    padding-left: max(var(--kh-layout-gutter), calc((100vw - var(--kh-layout-wide)) / 2));
    padding-right: clamp(28px, 3vw, 54px);
  }
  .kh-layout-document .kh-layout-hero--immersive .kh-layout-hero-media {
    position: relative;
    align-self: stretch;
    min-height: 0;
    background: var(--kh-green-950);
  }
  .kh-layout-document .kh-layout-hero--immersive .kh-layout-hero-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: var(--kh-layout-media-fit, contain);
    object-position: center;
  }
  .kh-layout-document .kh-layout-hero--immersive .kh-layout-hero-media--cover::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--kh-layout-gutter);
    pointer-events: none;
    background: linear-gradient(to right, var(--kh-green-950), transparent);
  }
}

/* Explicit media-fit contract, independent of the hero split variant.
   CONTAIN is required for posters, artwork and images with embedded lettering.
   COVER is opt-in for photography with a crop-safe focal area. */
.kh-layout-document .kh-layout-hero-media--contain { --kh-layout-media-fit: contain; }
.kh-layout-document .kh-layout-hero-media--cover { --kh-layout-media-fit: cover; }
@media (min-width: 1000px) {
  .kh-layout-document .kh-layout-hero-media--contain,
  .kh-layout-document .kh-layout-hero-media--cover {
    position: relative;
    align-self: stretch;
    min-height: 0;
    background: var(--kh-green-950);
  }
  .kh-layout-document .kh-layout-hero-media--contain img,
  .kh-layout-document .kh-layout-hero-media--cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: var(--kh-layout-media-fit);
    object-position: center;
  }
}
/* Designed artwork must not be obscured by the photographic edge treatment.
   The matching green canvas integrates the remaining space without masking
   any pixels of the artwork. Mobile uses the base natural-ratio image rules. */
.kh-layout-document .kh-layout-hero-media--contain::after { content: none; }

/* Before measurement (or without JS), natural flow is safer than guessed
   header subtraction. Once measured, desktop sticky behavior uses that value. */
.kh-layout-document:not(.kh-layout-measured) .kh-layout-header { position: relative; }

/* A focal position belongs to the photograph, not to a viewport workaround.
   Set --kh-hero-media-position on a cover figure (e.g. right center or 85% 50%).
   Contained artwork remains centered and mobile keeps its natural image ratio. */
@media (min-width: 1000px) {
  .kh-layout-document .kh-layout-hero .kh-layout-hero-media--cover img {
    object-position: var(--kh-hero-media-position, center center);
  }
  /* Opt-in for compositions that benefit from a more generous image column. */
  .kh-layout-document .kh-layout-hero--media-led {
    grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
  }
}

/* Editorial hierarchy: utility navigation sits outside one compact title group.
   Reuse the shared rhythm instead of separate margins for each copy item. */
.kh-layout-document .kh-layout-hero-title-group {
  display: grid;
  gap: var(--kh-layout-space-small);
}
.kh-layout-document .kh-layout-hero-utility {
  min-height: 44px;
  padding: 0;
  border: 0;
  font-size: 0.72rem;
  font-weight: 400;
}
@media (min-width: 1000px) {
  .kh-layout-document .kh-layout-hero-utility { min-height: 24px; }
}
/* Explicit keyboard destinations do not need CSS snapping. Wheel, touch and
   ordinary reading stay free even if an adopter also supplies kh-layout-snap. */
html.kh-layout-document[data-kh-page-navigation] { scroll-snap-type: none; }

/* Content-led landing composition: group existing sections without inventing
   page-specific viewport offsets. Content can grow at zoom or short heights. */
.kh-layout-document .kh-layout-stack {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--kh-layout-space);
}
.kh-layout-document .kh-layout-stack--compact { gap: var(--kh-layout-space-small); }
.kh-layout-document .kh-layout-stack > :is(h1, h2, p),
.kh-layout-document .kh-layout-stack > header > p { margin-block: 0; }
.kh-layout-document .kh-layout-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kh-layout-space-small);
  align-items: stretch;
}
.kh-layout-document .kh-layout-actions > a { display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 620px) {
  .kh-layout-document .kh-layout-actions { flex-direction: column; }
}