/* ==========================================================================
   Nearaway Farm
   Direction D, Traditional equestrian
   Tokens and structure follow DESIGN-PLAN.md. Edit tokens here, not inline.
   ========================================================================== */

/* --------------------------------------------------------------- tokens */
:root {
  /* colour */
  --paper:        #EFE9DC;
  --paper-2:      #E6DFCE;   /* subtle banding within paper sections */
  --navy:         #10254A;
  --navy-2:       #1B3663;
  --green:        #1F3D2E;
  --green-2:      #2C5240;
  --gold:         #B08A2E;   /* rules, borders, button fills. NOT for text on paper. */
  --gold-lt:      #D2AB53;   /* gold text on navy and green, 6.99:1 and 5.49:1 */
  --gold-ink:     #755A12;   /* gold text on paper, 5.38:1 and 4.90:1 */
  --ink:          #241F17;
  --mute:         #635B4B;
  --mute-lt:      #B9C4D6;   /* muted text on navy */
  --rule:         rgba(176,138,46,.55);
  --rule-soft:    rgba(36,31,23,.16);
  --rule-dark:    rgba(239,233,220,.20);
  --focus:        #2C6FD1;

  /* type */
  --display: "Libre Caslon Display", "Libre Baskerville", Georgia, "Times New Roman", serif;
  --body:    "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --util:    "Libre Caslon Text", Georgia, "Times New Roman", serif;

  /* spacing scale */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;  --s5: 24px;
  --s6: 32px;  --s7: 48px;  --s8: 64px;  --s9: 96px;  --s10: 128px; --s11: 160px;

  --wrap: 1120px;
  --prose: 68ch;
  --header-h: 96px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.70;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, picture { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--navy);
  margin: 0 0 var(--s4);
  letter-spacing: -.005em;
}
h1 { font-size: clamp(40px, 6.2vw, 72px); line-height: 1.04; }
h2 { font-size: clamp(30px, 3.8vw, 36px); line-height: 1.16; }
h3 { font-size: clamp(21px, 2.4vw, 24px); line-height: 1.28; }
h4 { font-size: 19px; line-height: 1.35; }

p  { margin: 0 0 var(--s5); max-width: var(--prose); }
p:last-child { margin-bottom: 0; }

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--focus); }
/* Prose links inside a navy or green band. Without this they keep the global
   navy link colour and disappear into the background. Buttons, nav and footer
   links carry their own colours, so only unclassed links are caught here. */
.on-dark p a:not([class]) { color: var(--gold-lt); }
.on-dark p a:not([class]):hover { color: var(--paper); }

/* Focus is never removed. Visible on every interactive element. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible { outline-color: #7FB0F5; }

/* --------------------------------------------------------------- helpers */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s5); }

.label {
  font-family: var(--util);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 var(--s4);
  display: block;
}
.on-dark .label { color: var(--gold-lt); }

.lede { font-size: 19px; line-height: 1.75; color: var(--mute); }
.on-dark .lede { color: var(--mute-lt); }

.small { font-size: 15px; line-height: 1.6; }

.skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 200;
  background: var(--gold); color: #1A1305; padding: 12px 20px;
  font-weight: 700; text-decoration: none; transition: top .18s var(--ease);
}
.skip:focus { top: var(--s3); color: #1A1305; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* gold rule, the recurring structural device */
.rule {
  border: 0; height: 1px; background: var(--rule);
  margin: 0; transform-origin: left center;
}
.on-dark .rule { background: rgba(210,171,83,.5); }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 13px 30px;
  font-family: var(--body); font-size: 13px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; text-decoration: none;
  border: 1px solid transparent; border-radius: 2px; cursor: pointer;
  transition: background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.btn--primary { background: var(--gold); color: #1A1305; border-color: var(--gold); }
.btn--primary:hover { background: #C79B36; color: #1A1305; border-color: #C79B36; }
.btn--secondary { background: transparent; color: var(--navy); border-color: rgba(16,37,74,.36); }
.btn--secondary:hover { background: var(--navy); color: var(--paper); border-color: var(--navy); }
.on-dark .btn--secondary { color: var(--paper); border-color: rgba(239,233,220,.4); }
.on-dark .btn--secondary:hover { background: var(--paper); color: var(--navy); border-color: var(--paper); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }
.btn-row--center { justify-content: center; }

/* --------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy); color: var(--paper);
  border-bottom: 1px solid rgba(239,233,220,.14);
  transition: box-shadow .2s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 1px 0 var(--gold), 0 8px 24px rgba(16,37,74,.22); }

.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  min-height: var(--header-h);
  transition: min-height .2s var(--ease);
}
.site-header.is-stuck .header-inner { min-height: 64px; }

.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--paper); flex-shrink: 0; }
/* Width, deliberately, not transform. A compositor-only scale leaves the
   logo's original 62px footprint in the layout, so the wordmark beside it
   stops tracking inward and a gap opens up as the header condenses. With
   the two-threshold toggle in site.js this transition now runs at most
   twice per visit, which is a fair price for the correct layout. */
.brand img { width: 62px; height: auto; transition: width .2s var(--ease); }
.site-header.is-stuck .brand img { width: 46px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-family: var(--display); font-size: 20px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--paper);
}
.brand-tag {
  font-family: var(--util); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-lt); margin-top: 4px;
}

.site-nav ul { display: flex; align-items: center; gap: var(--s5); list-style: none; margin: 0; padding: 0; }
.site-nav a {
  font-size: 12.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(239,233,220,.86); text-decoration: none; padding: 12px 2px;
  display: inline-block; border-bottom: 2px solid transparent;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.site-nav a:hover { color: var(--paper); border-bottom-color: var(--gold); }
.site-nav a[aria-current="page"] { color: var(--gold-lt); border-bottom-color: var(--gold); }

.header-phone {
  font-family: var(--util); font-size: 16px; font-weight: 700; letter-spacing: .04em;
  color: var(--paper); text-decoration: none; white-space: nowrap;
  padding: 12px 0; display: inline-flex; align-items: center; gap: 8px;
}
.header-phone:hover { color: var(--gold-lt); }

/* The number appears twice in the markup: once as its own item at the right of
   the header, once inside the nav list for the mobile menu. Only ever show one.
   Above 900px that is .header-phone; below it, .nav-phone. */
.nav-phone { display: none; }

.nav-toggle {
  display: none; background: transparent; border: 1px solid rgba(239,233,220,.4);
  color: var(--paper); width: 48px; height: 48px; border-radius: 2px; cursor: pointer;
  align-items: center; justify-content: center; padding: 0;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* --------------------------------------------------------------- hero */
.hero {
  background: var(--paper);
  padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 5vw, 64px);
  text-align: center;
  position: relative;
}
.hero-inner { max-width: 880px; margin-inline: auto; }
.hero .rule { max-width: 560px; margin-inline: auto; }
.hero .label { margin: var(--s5) 0; }
.hero h1 { margin: 0 0 var(--s5); }
.hero h1 em { font-style: italic; color: var(--gold-ink); }
.hero p { margin-inline: auto; max-width: 60ch; }
.hero .btn-row { margin-top: var(--s7); margin-bottom: var(--s7); }

/* --- split hero: copy on the left, the farm from the air on the right --- */
.hero--split {
  text-align: left;
  /* Kept deliberately short so the stats strip is still reachable at the fold. */
  padding: clamp(40px, 5vw, 72px) 0 clamp(48px, 6vw, 80px);
  overflow: hidden;
}
.hero--split .hero-inner {
  max-width: var(--wrap);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.hero--split .hero__copy { min-width: 0; }
.hero--split .rule { max-width: 200px; margin-inline: 0; }
.hero--split .label { margin: var(--s5) 0 var(--s4); }
.hero--split h1 { max-width: 13ch; }
.hero--split p { margin-inline: 0; max-width: 46ch; }
.hero--split .btn-row { margin-top: var(--s7); margin-bottom: 0; }

.hero__figure {
  margin: 0;
  min-width: 0;
  position: relative;
}
.hero__figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* a squared frame reads as a plate in a stud book, not a stock hero */
  box-shadow: 0 0 0 1px var(--rule), 0 18px 44px -22px rgba(16,37,74,.45);
}
.hero__figure figcaption {
  font-family: var(--util);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--mute);
  margin-top: var(--s4);
  padding-left: var(--s4);
  border-left: 2px solid var(--rule);
  max-width: 40ch;
}

/* The gold corner marks tie the plate to the rules used elsewhere. */
.hero__figure::before,
.hero__figure::after {
  content: "";
  position: absolute;
  width: 28px; height: 28px;
  border: 2px solid var(--gold);
  pointer-events: none;
}
.hero__figure::before { top: -9px; left: -9px; border-right: 0; border-bottom: 0; }
.hero__figure::after  { top: -9px; right: -9px; border-left: 0; border-bottom: 0; }

/* Entrance. Keyframes, not JS classes, so the caption is still readable with
   scripting off. The image itself is never faded: it is the LCP element, and
   animating its opacity delays the paint the metric actually measures. */
@keyframes heroMark { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes heroCap  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.hero__figure::before,
.hero__figure::after { animation: heroMark .5s var(--ease) .35s both; }
.hero__figure figcaption { animation: heroCap .6s var(--ease) .45s both; }

/* interior page banner */
.page-head {
  background: var(--navy); color: var(--paper);
  padding: clamp(48px, 6vw, 80px) 0 clamp(40px, 5vw, 64px);
}
.page-head h1 { color: var(--paper); margin: 0 0 var(--s5); max-width: 20ch; }
.page-head p { color: var(--mute-lt); font-size: 19px; line-height: 1.7; }
.page-head .rule { max-width: 240px; margin-bottom: var(--s5); }

/* --------------------------------------------------------------- provenance strip */
.provenance {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.provenance dl {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin: 0; list-style: none;
}
.prov-item {
  padding: var(--s7) var(--s4);
  text-align: center;
  border-right: 1px solid var(--rule-soft);
}
.prov-item:last-child { border-right: 0; }
.prov-item dt {
  font-family: var(--display); font-size: clamp(34px, 4.6vw, 46px); line-height: 1;
  color: var(--navy);
}
.prov-item dd {
  margin: var(--s3) 0 0;
  font-family: var(--util); font-size: 11px; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase; color: var(--mute);
}

/* --------------------------------------------------------------- sections */
.section { padding: clamp(48px, 7vw, 96px) 0; }
.section--tight { padding: clamp(40px, 5vw, 64px) 0; }
.section--paper2 { background: var(--paper-2); }

.section--navy { background: var(--navy); color: var(--paper); }
.section--navy h2, .section--navy h3 { color: var(--paper); }
.section--navy p { color: var(--mute-lt); }

.section--green { background: var(--green); color: var(--paper); }
.section--green h2, .section--green h3 { color: var(--paper); }
.section--green p { color: #CFDAD1; }

/* the label rail plus prose grid, used on every interior section */
.spread {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: start;
}
.spread__rail { position: sticky; top: calc(var(--header-h) + 24px); }
.spread__rail .label { margin-bottom: var(--s3); }
.spread__rail .rail-note {
  font-size: 14.5px; line-height: 1.6; color: var(--mute); margin: var(--s3) 0 0; max-width: 30ch;
}
.on-dark .spread__rail .rail-note, .section--navy .rail-note, .section--green .rail-note { color: var(--mute-lt); }
.spread__body > *:last-child { margin-bottom: 0; }

.section-head { max-width: 62ch; margin-bottom: var(--s7); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center p { margin-inline: auto; }

/* --------------------------------------------------------------- stud-book entry (signature) */
.entries { margin: 0; padding: 0; list-style: none; }

.entry {
  padding: var(--s6) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.entry:first-child { border-top: 1px solid var(--rule); }
.section--navy .entry, .section--green .entry { border-bottom-color: var(--rule-dark); }
.section--navy .entry:first-child, .section--green .entry:first-child { border-top-color: rgba(210,171,83,.5); }

.entry__label {
  font-family: var(--util); font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink);
  margin: 0 0 var(--s3);
}
.section--navy .entry__label, .section--green .entry__label { color: var(--gold-lt); }

.entry__name {
  font-family: var(--display); font-size: clamp(26px, 3.2vw, 34px); line-height: 1.12;
  color: var(--navy); margin: 0 0 var(--s4);
}
.section--navy .entry__name, .section--green .entry__name { color: var(--paper); }

.entry__note { font-size: 16.5px; line-height: 1.7; color: var(--mute); margin: 0 0 var(--s5); max-width: 62ch; }

/* An entry that carries a photograph. The plate sits to the side of the text
   so the stud-book row is still a row, not a card. */
.entry--media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 272px;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.entry--media .entry__text { min-width: 0; }
.entry--media .entry__text > *:last-child { margin-bottom: 0; }
.entry__figure { margin: 0; min-width: 0; }
.entry__figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--rule);
  transition: transform .25s var(--ease);
}
.entry--media:hover .entry__figure img { transform: scale(1.02); }
.section--navy .entry__note, .section--green .entry__note { color: var(--mute-lt); }

/* tabular pedigree data */
.entry__data {
  display: grid; grid-template-columns: 132px minmax(0, 1fr);
  gap: 0 var(--s5); margin: 0;
  border-top: 1px solid var(--rule);
  padding-top: var(--s4);
  max-width: 620px;
}
.entry__data dt {
  font-family: var(--util); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--mute);
  padding: 7px 0;
}
.entry__data dd {
  margin: 0; padding: 7px 0; font-size: 16px; color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.section--navy .entry__data, .section--green .entry__data { border-top-color: rgba(210,171,83,.5); }
.section--navy .entry__data dt, .section--green .entry__data dt { color: var(--gold-lt); }
.section--navy .entry__data dd, .section--green .entry__data dd { color: var(--paper); }

/* --------------------------------------------------------------- oval portraits */
.ovals {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 48px); margin: 0; padding: 0; list-style: none;
}
/* Two up. Centred in the wrap, and set wider than a third-of-the-row card so
   the pair reads as a deliberate pairing rather than a three up with a gap. */
.ovals--two { grid-template-columns: repeat(2, 1fr); max-width: 860px; margin-inline: auto; }
.ovals--four { grid-template-columns: repeat(4, 1fr); }
.ovals--four .oval { max-width: 232px; }
.ovals--four .oval-figure figcaption { font-size: 15px; }

.oval-figure { margin: 0; text-align: center; }
/* .oval is a <span>, so it must be made a block. As an inline element it
   ignores aspect-ratio, max-width, overflow and margin auto, and the rounded
   border paints as two stray arcs either side of the image instead of a ring. */
.oval-figure a { display: block; }
.oval {
  display: block;
  position: relative; aspect-ratio: 1 / 1; border-radius: 50%;
  overflow: hidden; margin: 0 auto var(--s5);
  border: 1px solid var(--gold);
  box-shadow: 0 0 0 5px var(--paper), 0 0 0 6px var(--rule);
  background: var(--paper-2);
  max-width: 300px;
}
.section--navy .oval, .section--green .oval { box-shadow: 0 0 0 5px transparent, 0 0 0 6px rgba(210,171,83,.5); }
.oval img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .3s var(--ease);
}
a:hover .oval img, .oval-figure:hover .oval img { transform: scale(1.03); }

/* Squared plate. Used where the photograph is a full body horse, which a
   circular crop would cut the head and tail off. The sources are already
   square, so at 1:1 the plate loses nothing at all. Same ring, same grid. */
.oval--plate {
  border-radius: 2px;
  max-width: 100%;
}

.oval-figure h3 { margin: 0 0 var(--s2); }
.oval-figure figcaption { font-size: 16px; line-height: 1.65; color: var(--mute); max-width: 34ch; margin-inline: auto; }
.section--navy .oval-figure figcaption { color: var(--mute-lt); }

/* --------------------------------------------------------------- media blocks */
.media {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
.media--flip .media__figure { order: 2; }
.media__figure { margin: 0; }
.media__figure img { width: 100%; border: 1px solid var(--rule-soft); }
.media__figure figcaption {
  font-family: var(--util); font-size: 12.5px; letter-spacing: .06em;
  color: var(--mute); margin-top: var(--s3);
}

/* Video plates.
   A clip gets the same treatment as a photograph: hairline frame, serif
   caption, square corners. Native controls stay so it is keyboard reachable,
   and preload="none" with a poster keeps the 10MB file off the initial load
   until somebody actually asks for it. */
.media__figure video {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule-soft);
  background: var(--navy);
}
.on-dark .media__figure video { border-color: var(--rule-dark); }

/* A phone-shot clip is vertical, and the rest of this site is not. Rather than
   leave a tall sliver floating in a wide column, the clip fills the column in a
   square window and is cropped to fit, so it reads as a plate like every
   photograph around it. The ratio is declared rather than measured: with
   preload="none" the file has no intrinsic size until somebody presses play, so
   aspect-ratio is what reserves the space and stops the poster shifting the page. */
.media__figure--clip video {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.media--set-off { margin-top: var(--s8); }
@media (max-width: 900px) {
  .media--set-off { margin-top: var(--s7); }
}

/* --------------------------------------------------------------- vouch
   An outside voice. Set in the utility serif so it reads as somebody else
   talking, not as more farm copy, with a gold rule marking the boundary.

   Deliberately NOT wrapped in Review or AggregateRating structured data.
   Google stopped showing star ratings for reviews about a business on that
   business's own site in 2019, so the markup buys no stars and carries
   manual action risk. These are quotes, and nothing more. */
.vouch {
  margin: var(--s7) 0;
  padding-left: var(--s5);
  border-left: 2px solid var(--gold);
  border-radius: 0;
}
.vouch blockquote { margin: 0; }
.vouch blockquote p {
  font-family: var(--util);
  font-size: 19px; line-height: 1.62; font-style: italic;
  color: var(--ink);
  margin: 0 0 var(--s4);
  max-width: 48ch;
}
.vouch figcaption {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4);
  font-family: var(--body); font-size: 11.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--mute);
}
.vouch__who { color: var(--ink); }
.vouch figcaption a { color: var(--gold-ink); }

.on-dark .vouch blockquote p, .on-dark .vouch__who { color: var(--paper); }
.on-dark .vouch figcaption { color: var(--mute-lt); }
.on-dark .vouch figcaption a { color: var(--gold-lt); }

/* --------------------------------------------------------------- notice
   A dated announcement that will stop being true: openings, a closure, a
   date to call by. Framed rather than shouted, so it sits inside the copy
   instead of reading as an ad. Delete it once it has expired. */
.notice {
  margin: var(--s7) 0;
  padding: var(--s5);
  border: 1px solid var(--rule);
  border-left-width: 3px;
  border-left-color: var(--gold);
  background: var(--paper-2);
}
.notice__label {
  font-family: var(--body); font-size: 11.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 var(--s3);
}
.notice p { margin: 0; max-width: 56ch; }
.notice p + p { margin-top: var(--s3); }
.on-dark .notice {
  background: rgba(239,233,220,.06);
  border-color: var(--rule-dark);
  border-left-color: var(--gold-lt);
}
.on-dark .notice__label { color: var(--gold-lt); }
.on-dark .notice p:not(.notice__label) { color: var(--paper); }

.band-figure { margin: 0; }
.band-figure img { width: 100%; max-height: 460px; object-fit: cover; }

/* gallery strip */
.gallery {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4);
  margin: 0; padding: 0; list-style: none;
}
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--rule-soft); }

/* --------------------------------------------------------------- fact list */
.facts { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.facts li {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s5);
  padding: var(--s4) 0; border-bottom: 1px solid var(--rule-soft); font-size: 16.5px;
}
.facts .k { color: var(--mute); }
.facts .v { font-weight: 600; text-align: right; }
.section--navy .facts { border-top-color: rgba(210,171,83,.5); }
.section--navy .facts li { border-bottom-color: var(--rule-dark); }
.section--navy .facts .k { color: var(--mute-lt); }
.section--navy .facts .v { color: var(--paper); }

/* --------------------------------------------------------------- CTA band */
.cta-band { background: var(--green); color: var(--paper); padding: clamp(48px, 7vw, 88px) 0; text-align: center; }
.cta-band h2 { color: var(--paper); max-width: 20ch; margin-inline: auto; }
.cta-band p { color: #CFDAD1; max-width: 56ch; margin-inline: auto; }
.cta-band .rule { max-width: 200px; margin: 0 auto var(--s5); background: rgba(210,171,83,.6); }
.cta-band .btn-row { margin-top: var(--s7); }
.cta-band .btn--primary { background: var(--gold); border-color: var(--gold); }

/* The band is always dark green, so it styles its own secondary button rather
   than depending on the on-dark class being remembered in the markup. It was
   missed on all six of these sections, and the fallback is navy on green at
   1.27:1 against a 4.5:1 requirement, which is what made it near invisible.
   Hover returns green rather than the generic navy, to match the band. */
.cta-band .btn--secondary { color: var(--paper); border-color: rgba(239,233,220,.45); }
.cta-band .btn--secondary:hover { background: var(--paper); color: var(--green); border-color: var(--paper); }
.cta-band .label { color: var(--gold-lt); }

/* --------------------------------------------------------------- footer */
.site-footer { background: var(--navy); color: var(--paper); padding: var(--s9) 0 var(--s6); }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(28px, 4vw, 56px); padding-bottom: var(--s8);
  border-bottom: 1px solid var(--rule-dark);
}
.site-footer h2 {
  font-family: var(--util); font-size: 11.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold-lt);
  margin: 0 0 var(--s4);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--s3); }
.site-footer a { color: rgba(239,233,220,.86); text-decoration: none; font-size: 16px; }
.site-footer a:hover { color: var(--gold-lt); text-decoration: underline; }
.site-footer address { font-style: normal; color: rgba(239,233,220,.86); font-size: 16px; line-height: 1.75; }
.footer-brand img { width: 96px; margin-bottom: var(--s4); }
.footer-brand p { color: var(--mute-lt); font-size: 15.5px; max-width: 34ch; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); justify-content: space-between;
  padding-top: var(--s5); font-size: 14px; color: var(--mute-lt);
}
.footer-bottom a { font-size: 14px; }
.social { display: flex; gap: var(--s3); margin-top: var(--s4); }
.social a {
  width: 44px; height: 44px; border: 1px solid rgba(239,233,220,.3); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.social a:hover { border-color: var(--gold-lt); background: rgba(210,171,83,.14); }
.social svg { width: 19px; height: 19px; fill: currentColor; }

/* --------------------------------------------------------------- forms */
.form-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr); gap: clamp(32px, 5vw, 72px); align-items: start; }

.form { margin: 0; }
.field { margin-bottom: var(--s5); }
.field > label {
  display: block; font-family: var(--util); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--navy); margin-bottom: var(--s2);
}
.req { color: var(--gold-ink); }
.hint { display: block; font-size: 14px; color: var(--mute); margin-top: 6px; font-weight: 400; letter-spacing: 0; text-transform: none; font-family: var(--body); }

.field input,
.field select,
.field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font-family: var(--body); font-size: 16px; color: var(--ink);
  background: #FBF8F1; border: 1px solid rgba(36,31,23,.28); border-radius: 2px;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field textarea { min-height: 168px; resize: vertical; line-height: 1.65; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(36,31,23,.5); }
/* Mouse focus gets the soft ring. */
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--focus); box-shadow: 0 0 0 3px rgba(44,111,209,.22); outline: none;
}
/* Keyboard focus keeps a real, high contrast outline. This rule must come after
   the one above, and match its specificity, or the outline above wins. */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--focus);
}

.field .error { display: none; margin-top: 6px; font-size: 14.5px; color: #96261B; font-weight: 600; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #96261B; background: #FCF3F1; }
.field.has-error .error { display: block; }

.form-note { font-size: 14.5px; color: var(--mute); margin-top: var(--s4); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.contact-card { background: var(--paper-2); border: 1px solid var(--rule-soft); padding: var(--s6); }
.contact-card h2 { font-size: 24px; }
.contact-card address { font-style: normal; line-height: 1.8; }
.contact-card .facts { margin-top: var(--s5); }

.map-frame { border: 1px solid var(--rule-soft); margin-top: var(--s6); }
.map-frame iframe { display: block; width: 100%; height: 380px; border: 0; }

/* --------------------------------------------------------------- FAQ */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule-soft); }
.faq summary {
  list-style: none; cursor: pointer; padding: var(--s5) 44px var(--s5) 0;
  position: relative; font-family: var(--display); font-size: clamp(19px, 2.2vw, 22px);
  line-height: 1.35; color: var(--navy); min-height: 48px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 13px; height: 13px;
  border-right: 2px solid var(--gold-ink); border-bottom: 2px solid var(--gold-ink);
  transform: translateY(-70%) rotate(45deg); transition: transform .22s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq summary:hover { color: var(--focus); }
.faq .answer { padding: 0 44px var(--s6) 0; }
.faq .answer p { color: var(--mute); }

/* --------------------------------------------------------------- thanks */
.thanks { padding: clamp(64px, 10vw, 140px) 0; text-align: center; }
.thanks .rule { max-width: 220px; margin: 0 auto var(--s5); }
.thanks p { margin-inline: auto; }

/* --------------------------------------------------------------- motion */
[data-reveal] { opacity: 0; transform: translateY(12px); }
[data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .28s var(--ease), transform .28s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-rule-draw] { transform: scaleX(0); }
[data-rule-draw].is-in { transform: scaleX(1); transition: transform .3s var(--ease); transition-delay: var(--reveal-delay, 0ms); }

/* --------------------------------------------------------------- responsive */
@media (max-width: 1024px) {
  :root { --header-h: 80px; }
  .spread { grid-template-columns: 190px minmax(0, 1fr); }
  /* Tablet landscape: give the copy a bit more of the row. */
  .hero--split .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, .72fr); }
  .hero--split h1 { max-width: none; }
  .site-nav ul { gap: var(--s4); }
  .site-nav a { font-size: 11.5px; letter-spacing: .1em; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .header-phone { display: none; }
  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--navy); border-top: 1px solid var(--rule-dark);
    border-bottom: 1px solid var(--gold);
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height .26s var(--ease), visibility 0s linear .26s;
  }
  .site-nav.is-open { max-height: 80vh; overflow-y: auto; visibility: visible; transition: max-height .26s var(--ease), visibility 0s; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: var(--s3) var(--s5) var(--s5); }
  .site-nav li { border-bottom: 1px solid var(--rule-dark); }
  .site-nav li:last-child { border-bottom: 0; }
  .site-nav a { display: block; padding: 16px 0; font-size: 14px; letter-spacing: .12em; border-bottom: 0; }
  .site-nav a[aria-current="page"] { border-bottom: 0; }
  .nav-phone { display: block; padding-top: var(--s4); }
  .nav-phone a { font-family: var(--util); font-size: 18px; letter-spacing: .04em; text-transform: none; color: var(--gold-lt); }

  .spread { grid-template-columns: 1fr; gap: var(--s5); }
  .spread__rail { position: static; }
  .spread__rail .rail-note { max-width: var(--prose); }

  /* Hero stacks. The image goes first so something is visible immediately. */
  .hero--split { padding-top: 0; }
  .hero--split .hero-inner { grid-template-columns: 1fr; gap: var(--s7); }
  .hero--split .hero__figure { order: -1; margin-inline: calc(var(--s5) * -1); }
  .hero__figure img { aspect-ratio: 16 / 10; box-shadow: none; border-bottom: 1px solid var(--rule); }
  .hero__figure::before, .hero__figure::after { display: none; }
  .hero__figure figcaption { margin-inline: var(--s5); }
  .hero--split .rule { display: none; }
  .hero--split .label { margin-top: 0; }
  .hero--split p { max-width: var(--prose); }

  .media, .form-layout { grid-template-columns: 1fr; }
  .media--flip .media__figure { order: 0; }
  /* Tablet: two up rather than a stretched single column. */
  .ovals, .ovals--four { grid-template-columns: repeat(2, 1fr); }
  .ovals--two { max-width: none; }
  .ovals--four .oval { max-width: 260px; }
  .ovals > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ovals > li:last-child:nth-child(odd) .oval { max-width: 260px; }
  .provenance dl { grid-template-columns: repeat(2, 1fr); }
  .prov-item:nth-child(2) { border-right: 0; }
  .prov-item:nth-child(-n+2) { border-bottom: 1px solid var(--rule-soft); }
}

@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .wrap { padding-inline: var(--s4); }
  .brand-tag { display: none; }
  .brand-name { font-size: 17px; letter-spacing: .12em; }
  .brand img { width: 48px; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .hero--split .hero__figure { margin-inline: calc(var(--s4) * -1); }
  .hero__figure figcaption { margin-inline: var(--s4); }
  .hero__figure img { aspect-ratio: 3 / 2; }
  /* Photo above the text once the row is too narrow to hold both. */
  .entry--media { grid-template-columns: 1fr; gap: var(--s5); }
  .entry--media .entry__text { order: 2; }
  .entry--media .entry__figure { order: 1; }
  .entry__figure img { aspect-ratio: 16 / 9; }
  .entry__data { grid-template-columns: 1fr; gap: 0; }
  .entry__data dt { padding-bottom: 0; }
  .entry__data dd { padding-top: 2px; padding-bottom: 12px; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .ovals, .ovals--four { grid-template-columns: 1fr; }
  .ovals .oval, .ovals--four .oval { max-width: 240px; }
  .footer-grid { grid-template-columns: 1fr; }
  .facts li { flex-direction: column; gap: 2px; }
  .facts .v { text-align: left; }
  .contact-card { padding: var(--s5); }
}

/* --------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  [data-rule-draw] { transform: none; }
  .hero__figure::before, .hero__figure::after,
  .hero__figure figcaption { animation: none; opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- print */
@media print {
  .site-header, .site-footer, .cta-band, .nav-toggle, .btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  [data-reveal], [data-rule-draw], .hero__figure figcaption { opacity: 1 !important; transform: none !important; }
}