/* ==========================================================================
   Linda Helin Riding Academy — site styles
   One stylesheet, no build step. Colours and spacing are tokens at the top;
   change them here and the whole site follows.
   ========================================================================== */

/* ---------- Typefaces -------------------------------------------------
   Cinzel is the open-source equivalent of the inscriptional Roman capitals
   in the LH Riding Academy logo, so headings speak in the logo's own voice.
   Source Sans 3 is the humanist companion that carries running text.
   Both are self-hosted: no third-party request, and the site works offline.
   -------------------------------------------------------------------- */
@font-face { font-family: "Cinzel"; src: url("../fonts/cinzel-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("../fonts/cinzel-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("../fonts/cinzel-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Brand palette — taken from the LH Riding Academy logo:
     navy #1c1c52 and gold #c2b274 */
  --blue-900: #14143c;
  --blue-800: #1c1c52;
  --blue-700: #33339e;
  --blue-600: #3a3aad;
  --blue-300: #a8a8dc;
  --gold-600:  #6f6233;
  --gold-500:  #c2b274;
  --gold-300:  #d5c898;
  --gold-100:  #efeadb;
  --cream:     #f7f7f4;
  --paper:     #ffffff;
  --ink:       #1a1a2e;
  --ink-soft:  #4c4c66;
  --line:      #e2e0e6;

  --bg: var(--cream);
  --surface: var(--paper);
  --surface-2: #fafaf8;
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --border: var(--line);
  --accent: var(--gold-500);
  --accent-ink: var(--blue-800);
  /* Headings invert between themes; --blue-900 stays dark because dark
     panels (hero, footer) are painted with it in BOTH themes. */
  --heading: var(--blue-900);
  /* Told-you-so colours for the editor: "saved" and "that did not work".
     They flip in dark mode like --text does. */
  --ok: #1f6b40;
  --danger: #9d2b2b;
  /* Gold as small text. The brand gold is pale, so which one is readable
     depends on the theme: --gold-600 on cream, --gold-300 on the dark
     surfaces. Use this token and it is right in both. */
  --gold-text: var(--gold-600);

  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(20, 20, 60, .06), 0 2px 8px rgba(20, 20, 60, .05);
  --shadow-md: 0 4px 12px rgba(20, 20, 60, .08), 0 12px 32px rgba(20, 20, 60, .08);

  --font-display: "Cinzel", "Trajan Pro", "Optima", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1160px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 8vw, 6.5rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: 0.005em;
  color: var(--heading);
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.85rem, 4.8vw, 3.1rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2.05rem); }
h3 { font-size: clamp(1rem, 1.7vw, 1.18rem); }
p { margin: 0 0 1rem; text-wrap: pretty; }
a { color: var(--blue-700); text-underline-offset: 3px; }
a:hover { color: var(--gold-600); }

:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 2px;
  border-radius: 3px;
  /* the brand gold is pale — this halo keeps the ring visible on light grounds */
  box-shadow: 0 0 0 6px rgba(28, 28, 82, .30);
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--tint { background: var(--surface-2); border-block: 1px solid var(--border); }
.section--dark { background: var(--blue-800); color: #e6e6f2; border-block: 0; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark p { color: #c6c6e0; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--blue-800); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---------- Eyebrow / section heads ---------------------------------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin: 0 0 .75rem;
}
.section--dark .eyebrow { color: var(--gold-300); }
.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head p { color: var(--text-soft); font-size: 1.08rem; }
.section--dark .section-head p { color: #bfbfda; }

/* ---------- Buttons --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.5rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font: inherit; font-weight: 600; font-size: .98rem;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--blue-700); color: #fff; }
.btn--primary:hover { background: var(--blue-600); color: #fff; }
/* background must be stated: a <button> otherwise keeps the browser's own pale
   grey, which in dark mode leaves near-white text on a near-white pill. */
.btn--ghost { background: transparent; border-color: currentColor; color: var(--blue-800); }
.btn--ghost:hover { background: var(--blue-800); color: #fff; border-color: var(--blue-800); }
/* The hero, the page header and the dark sections are navy in both themes, so
   a ghost button on them needs the dark-band colours whatever the theme is.
   Without the hero here, "Lesson calendar" was navy on navy at 1.12:1. */
.section--dark .btn--ghost, .hero .btn--ghost, .page-head .btn--ghost { color: #fff; }
.section--dark .btn--ghost:hover, .hero .btn--ghost:hover, .page-head .btn--ghost:hover {
  background: #fff; color: var(--blue-800);
}
.btn--accent { background: var(--gold-500); color: var(--blue-900); }
.btn--accent:hover { background: var(--gold-300); color: var(--blue-900); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Header / nav --------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 247, 244, .92);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 72px;
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--heading); }
.brand__mark { width: 46px; height: 46px; flex: none; border-radius: 50%; display: block; }
/* Swap assets/img/logo.svg to change the mark everywhere — see README. */
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; letter-spacing: .04em; }
.brand__sub { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-600); font-weight: 600; }

.nav-toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  background: none; border: 1.5px solid var(--border); border-radius: 999px;
  padding: .5rem .9rem; font: inherit; font-weight: 600; font-size: .9rem; color: var(--blue-800); cursor: pointer;
}
.nav-toggle__bars { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }

.nav { display: none; }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: .35rem; align-items: center; }
.nav__link {
  display: block; padding: .5rem .8rem; border-radius: 999px;
  text-decoration: none; color: var(--blue-800); font-weight: 500; font-size: .97rem;
}
.nav__link:hover { background: var(--gold-100); color: var(--blue-900); }
.nav__link[aria-current="page"] { background: var(--blue-700); color: #fff; }
.nav__cta { margin-left: .35rem; }

@media (min-width: 62rem) {
  .nav-toggle { display: none; }
  .nav { display: block !important; }
}
@media (max-width: 61.99rem) {
  .nav[data-open="true"] { display: block; position: absolute; inset: 100% 0 auto; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md); }
  .nav[data-open="true"] .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem var(--gutter) 1.25rem; }
  .nav[data-open="true"] .nav__link { padding: .85rem .75rem; border-radius: var(--radius-sm); }
  .nav__cta { margin: .5rem 0 0; }
  .site-header__inner { position: relative; }
}

/* ---------- Hero ------------------------------------------------------ */
.hero { position: relative; background: var(--blue-900); color: #fff; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img, .hero__media svg { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,20,60,.55) 0%, rgba(20,20,60,.72) 55%, rgba(20,20,60,.92) 100%);
}
.hero__inner { position: relative; z-index: 2; padding-block: clamp(4.5rem, 13vw, 9rem); max-width: 46rem; }
.hero h1 { color: #fff; }
.hero__lede { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: #cdcde8; max-width: 42ch; }
.hero .eyebrow { color: var(--gold-300); }
.hero__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 2rem; font-size: .92rem; color: #b4b4d2; }
.hero__meta span { display: inline-flex; align-items: center; gap: .45rem; }

/* ---------- Cards / grids -------------------------------------------- */
.grid { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.card__body { padding: clamp(1.15rem, 2.5vw, 1.6rem); display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.card__body h3 { margin-bottom: .15rem; }
.card__meta { font-size: .85rem; color: var(--gold-600); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.card__price { font-family: var(--font-display); font-size: 1.3rem; color: var(--blue-800); font-weight: 600; }
.card p { color: var(--text-soft); margin: 0; }
.card__footer { margin-top: auto; padding-top: .9rem; }

.tick-list { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .4rem; }
.tick-list li { position: relative; padding-left: 1.55rem; color: var(--text-soft); font-size: .96rem; }
.tick-list li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: .8rem; height: .45rem; border-left: 2px solid var(--gold-500); border-bottom: 2px solid var(--gold-500);
  transform: rotate(-45deg);
}

/* ---------- Horse cards ---------------------------------------------- */
.horse-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--gold-100); }
.horse-card__media img, .horse-card__media svg { width: 100%; height: 100%; object-fit: cover; }
.horse-card--sold { opacity: .72; }
.horse-card--sold .horse-card__media { filter: grayscale(.75); }

.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem; border-radius: 999px;
  font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.badge--available { background: #dff0e3; color: #1f5c33; }
.badge--pending   { background: #fdf0d5; color: #8a5a11; }
.badge--sold      { background: #e7e4df; color: #59524a; }
.horse-card__media .badge { position: absolute; top: .8rem; left: .8rem; box-shadow: var(--shadow-sm); }

.spec-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .6rem 1rem; margin: .3rem 0 0; padding: 0; }
.spec-list div { display: flex; flex-direction: column; }
.spec-list dt { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-600); font-weight: 700; }
.spec-list dd { margin: 0; font-size: .97rem; color: var(--text); font-weight: 500; }

.chip-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  font-size: .78rem; font-weight: 600; padding: .25rem .65rem; border-radius: 999px;
  background: var(--gold-100); color: var(--blue-800); border: 1px solid var(--gold-300);
}

/* ---------- Filters --------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 2rem; }
.filters__label { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--gold-600); margin-right: .25rem; }
.filter-btn {
  border: 1.5px solid var(--border); background: var(--surface); color: var(--blue-800);
  padding: .45rem 1rem; border-radius: 999px; font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer;
}
.filter-btn:hover { border-color: var(--gold-500); }
.filter-btn[aria-pressed="true"] { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }

/* ---------- Schedule table ------------------------------------------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
table.schedule { width: 100%; border-collapse: collapse; min-width: 34rem; }
table.schedule th, table.schedule td { text-align: left; padding: .95rem 1.15rem; border-bottom: 1px solid var(--border); vertical-align: top; }
table.schedule thead th { background: var(--surface-2); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-600); }
table.schedule tbody tr:last-child td { border-bottom: 0; }
table.schedule td:first-child { font-weight: 600; color: var(--blue-800); white-space: nowrap; }
.slot { display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
.slot + .slot { margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed var(--border); }
.slot__time { font-variant-numeric: tabular-nums; color: var(--blue-700); font-weight: 600; min-width: 10.5rem; }
.slot__what { color: var(--text-soft); }

/* ---------- Calendar -------------------------------------------------- */
.calendar-toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.view-switch { display: inline-flex; border: 1.5px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--surface); }
.view-switch button {
  border: 0; background: none; font: inherit; font-size: .92rem; font-weight: 600;
  padding: .5rem 1.1rem; cursor: pointer; color: var(--blue-800);
}
.view-switch button + button { border-left: 1.5px solid var(--border); }
.view-switch button[aria-pressed="true"] { background: var(--blue-700); color: #fff; }

.calendar-frame {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  min-height: 480px;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.calendar-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (min-width: 48rem) { .calendar-frame { aspect-ratio: 16 / 10; } }

.notice {
  border: 1px dashed var(--gold-500); background: #fcfaf0; color: var(--blue-900);
  border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem);
}
.notice h3 { margin-top: 0; }
.notice ol { margin: 0 0 .5rem; padding-left: 1.25rem; }
.notice li { margin-bottom: .4rem; color: var(--text-soft); }
.notice code { background: var(--gold-100); padding: .1rem .4rem; border-radius: 4px; font-size: .92em; }

.event-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.event {
  display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; align-items: start;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .9rem 1.1rem;
}
.event__date { text-align: center; background: var(--blue-700); color: #fff; border-radius: var(--radius-sm); padding: .45rem .25rem; }
.event__month { display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-300); font-weight: 700; }
.event__day { display: block; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; font-weight: 600; }
.event__title { font-weight: 600; color: var(--heading); margin: 0; }
.event__when, .event__where { font-size: .9rem; color: var(--text-soft); margin: 0; }

/* ---------- Social strip --------------------------------------------- */
.social-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 40rem) { .social-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .social-grid { grid-template-columns: repeat(6, 1fr); } }
.social-tile { position: relative; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--blue-800); display: block; }
.social-tile img, .social-tile svg { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.social-tile:hover img { transform: scale(1.05); }
.social-links { display: flex; flex-wrap: wrap; gap: .75rem; }
.social-links a {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .65rem 1.2rem; border-radius: 999px; border: 1.5px solid currentColor;
  text-decoration: none; font-weight: 600; font-size: .95rem;
}
.social-links svg { width: 18px; height: 18px; }

/* ---------- Split / feature ------------------------------------------ */
.split { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 55rem) { .split { grid-template-columns: 1fr 1fr; } .split--wide-left { grid-template-columns: 1.15fr .85fr; } }
.split__media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 4/3; background: var(--gold-100); }
.split__media img, .split__media svg { width: 100%; height: 100%; object-fit: cover; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1.25rem; margin-top: 2rem; }
.stat__num { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.4rem); color: var(--gold-500); font-weight: 600; line-height: 1; }
.stat__label { font-size: .88rem; color: var(--text-soft); }
.section--dark .stat__label { color: #b8b8d4; }

/* ---------- Forms ----------------------------------------------------- */
.form { display: grid; gap: 1rem; }
.field { display: grid; gap: .35rem; }
.field label { font-weight: 600; font-size: .92rem; color: var(--blue-800); }
.field input, .field select, .field textarea {
  font: inherit; color: var(--text);
  padding: .75rem .9rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold-500); }
.field textarea { min-height: 8rem; resize: vertical; }
@media (min-width: 40rem) { .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } }
.form__note { font-size: .88rem; color: var(--text-soft); }
.form__status { padding: .8rem 1rem; border-radius: var(--radius-sm); font-size: .95rem; }
.form__status--ok { background: #dff0e3; color: #1f5c33; }
.form__status--err { background: #fbe3e3; color: #8a2222; }

/* ---------- Footer ---------------------------------------------------- */
.site-footer { background: var(--blue-900); color: #c5c5dc; padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.site-footer a { color: #e8e8f4; }
.site-footer a:hover { color: var(--gold-300); }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.site-footer .footer-heading { color: #fff; font-family: var(--font-body); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .9rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: .95rem; }
.footer-bottom {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; font-size: .85rem; color: #9090ae;
}

/* ---------- Dialog / horse detail ------------------------------------ */
dialog.horse-dialog {
  width: min(58rem, calc(100vw - 2rem)); max-height: min(88vh, 56rem);
  padding: 0; border: 0; border-radius: var(--radius); box-shadow: var(--shadow-md);
  background: var(--surface); color: var(--text); overflow: auto;
}
dialog.horse-dialog::backdrop { background: rgba(20, 20, 60, .6); backdrop-filter: blur(3px); }
/* Opened without the modal while editing (see horses.js), so it needs its own
   placing — and it must sit under the editor bar, not over the Save button. */
.is-editing dialog.horse-dialog[open] {
  position: fixed; z-index: 80;
  inset-block-start: 1rem; inset-inline-start: 50%;
  transform: translateX(-50%);
  max-height: calc(100vh - 8rem);
  border: 2px solid var(--gold-500);
}
.dialog__close {
  position: sticky; top: .75rem; float: right; margin: .75rem .75rem 0 0; z-index: 3;
  border: 0; background: var(--blue-800); color: #fff; width: 2.25rem; height: 2.25rem;
  border-radius: 50%; font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.dialog__gallery { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); padding: 0; }
.dialog__gallery img, .dialog__gallery svg { width: 100%; aspect-ratio: 4/3; object-fit: cover; max-height: 42vh; }
/* One photo should not fill the panel and push the specs below the fold. */
.dialog__gallery:has(img:only-child) img { aspect-ratio: 16/9; }
.dialog__body { padding: clamp(1.25rem, 3vw, 2rem); }

/* ---------- Add-to-home-screen hint (iPhone only) --------------------- */
.install-hint {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 80; display: flex; align-items: center; gap: .75rem;
  width: calc(100vw - 24px); max-width: 30rem;
  padding: .75rem .75rem .75rem 1rem;
  background: var(--blue-800); color: #e6e6f2;
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  font-size: .92rem; line-height: 1.35;
}
.install-hint strong { color: var(--gold-300); font-weight: 600; }
.install-hint button {
  flex: none; width: 2rem; height: 2rem; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff;
  font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.install-hint button:hover { background: rgba(255, 255, 255, .26); }
@media print { .install-hint { display: none; } }

/* ---------- In-place editor (only on ?edit) --------------------------- */
.is-editing { padding-bottom: 5.5rem; }

.edit-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .75rem clamp(.75rem, 3vw, 1.5rem);
  padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
  background: var(--blue-900); color: #e6e6f2;
  box-shadow: 0 -4px 20px rgba(20, 20, 60, .35);
}
/* Netlify puts a "Powered by Netlify" badge in the bottom-right corner of the
   page, injected at their edge, so it is not in this repository and cannot be
   moved from here. Keep the bar's own controls clear of that corner instead:
   space on the right where there is room, and a clear strip underneath when
   the bar has wrapped and there is not. (It can also be switched off in
   Netlify under Project configuration -> General.) */
.edit-bar { padding-right: 11rem; }
@media (max-width: 40rem) {
  .edit-bar {
    padding-right: clamp(.75rem, 3vw, 1.5rem);
    /* The badge is about 40px tall and sits 16px off the bottom, so the last
       row of controls has to finish above roughly 4.5rem. */
    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom));
  }
  .is-editing { padding-bottom: 12rem; }
}
.is-editing { padding-bottom: 8rem; }

.edit-bar__title { font-weight: 700; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-300); }
.edit-bar__status { font-size: .92rem; color: #b8b8d4; }
.edit-bar__status.is-ok { color: #a8e0bb; }
.edit-bar__status.is-error { color: #f0b4b4; }
.edit-bar__spacer { flex: 1 1 auto; }
.edit-bar__leave { color: #e6e6f2; font-size: .92rem; text-underline-offset: 3px; }
.edit-bar .btn { padding: .55rem 1.1rem; font-size: .92rem; }
.edit-bar .btn[disabled] { opacity: .5; cursor: default; }
/* The bar is a dark band in BOTH themes, so its ghost button has to stay the
   dark-band version rather than following the page. */
.edit-bar .btn--ghost { color: #fff; }
.edit-bar .btn--ghost:hover { background: #fff; color: var(--blue-800); }

.is-editable {
  outline: 1px dashed transparent; outline-offset: 4px;
  border-radius: 3px; transition: outline-color .15s ease, background-color .15s ease;
}
.is-editing .is-editable:hover { outline-color: var(--gold-500); cursor: text; }
.is-editing .is-editable:focus {
  outline: 2px solid var(--gold-500); background: rgba(194, 178, 116, .10);
}

.edit-add, .edit-remove {
  font: inherit; cursor: pointer; border-radius: 999px;
  border: 1.5px dashed var(--border); background: var(--surface); color: var(--text-soft);
}
.edit-add { display: inline-block; margin-top: .5rem; padding: .3rem .9rem; font-size: .85rem; }
/* display:inline-block above would otherwise beat the hidden attribute. */
.edit-add[hidden] { display: none; }
.edit-add:hover { border-color: var(--gold-500); color: var(--text); }
.edit-row { display: flex; align-items: flex-start; gap: .5rem; }
.edit-row > [data-edit] { flex: 1 1 auto; margin-bottom: .5rem; }
.edit-remove {
  flex: none; width: 1.5rem; height: 1.5rem; line-height: 1; padding: 0;
  border-style: solid; font-size: 1rem; opacity: 0; transition: opacity .15s ease;
}
.edit-row:hover .edit-remove, .edit-remove:focus-visible { opacity: 1; }
.edit-remove:hover { border-color: #b03a3a; color: #b03a3a; }

.edit-photos { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.edit-photos img {
  width: 4.5rem; height: 3.4rem; object-fit: cover; border-radius: var(--radius-sm);
  border: 2px solid var(--border); cursor: grab;
}
.edit-photos img:hover { border-color: var(--gold-500); }
.edit-photos__item { position: relative; display: inline-flex; }
.edit-photos__item .edit-remove {
  position: absolute; top: -.4rem; right: -.4rem; background: var(--surface);
}
.edit-photos__item:hover .edit-remove { opacity: 1; }
.edit-photos__add { display: inline-flex; align-items: center; gap: .5rem; }
.edit-photos__add .edit-add { margin-top: 0; }
.edit-photos__note { font-size: .85rem; color: var(--text-soft); }
/* A marker on each editable picture, and the little panel it opens. Both sit
   on the body, above the page and below the editor bar, because a picture may
   be behind an overlay (the hero) or inside something that clips (a gallery
   tile) — neither of which a control in the flow survives. */
.edit-imgmark {
  position: absolute; z-index: 86;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .6rem; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .78rem; font-weight: 600; line-height: 1.6;
  border: 1.5px solid var(--gold-500);
  background: var(--blue-800); color: #fff;
  box-shadow: var(--shadow-sm);
}
.edit-imgmark:hover { background: var(--blue-700); }
.edit-imgmark:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }

.edit-imgpanel {
  position: absolute; z-index: 87;
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .7rem; border-radius: var(--radius-sm);
  border: 1.5px solid var(--gold-500);
  background: var(--surface); box-shadow: var(--shadow-md);
  max-width: min(26rem, calc(100vw - 1rem));
}
.edit-imgpanel .edit-add { margin-top: 0; white-space: nowrap; }
.edit-imgpanel .edit-remove { opacity: 1; flex: none; }

.edit-alt {
  flex: 1 1 14rem; min-width: 0; font: inherit; font-size: .9rem;
  padding: .35rem .6rem; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border); background: var(--bg); color: var(--text);
}
.edit-alt:focus { outline: 2px solid var(--gold-500); outline-offset: 1px; }

/* One rewrite button for the whole page, parked above whatever is being
   edited. Under the editor bar's z-index so it can never cover Save. */
.edit-ai {
  position: absolute; z-index: 85;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .7rem; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .8rem; font-weight: 600; line-height: 1.6;
  border: 1.5px solid var(--gold-500);
  background: var(--blue-800); color: #fff;
  box-shadow: var(--shadow-sm);
}
.edit-ai:hover { background: var(--blue-700); }
.edit-ai:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.edit-ai[disabled] { opacity: .7; cursor: progress; }
.edit-ai__mark { color: var(--gold-300); font-size: .95em; }
.edit-ai.is-busy .edit-ai__mark { animation: edit-ai-spin 1.1s linear infinite; }
@keyframes edit-ai-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .edit-ai.is-busy .edit-ai__mark { animation: none; } }

/* A card carries its own remove, tucked into the corner so it is out of the
   way until wanted. The card needs a positioning context for it. */
.is-editing .card, .is-editing .horse-card { position: relative; }
.edit-remove--card {
  position: absolute; top: .5rem; right: .5rem; z-index: 2;
  background: var(--surface); opacity: 0;
}
.is-editing .card:hover .edit-remove--card,
.edit-remove--card:focus-visible { opacity: 1; }

/* Status is a choice, not something to type. */
/* An entry that has been added but not filled in. Plain about what it is,
   rather than pretending it is a finished listing. */
.is-editing .card.is-unfinished { border: 1.5px dashed var(--gold-500); }
.edit-note {
  margin: 0; padding: .4rem .9rem;
  font-size: .82rem; font-weight: 600; color: var(--gold-text);
  background: var(--surface-2); border-top: 1px dashed var(--border);
}

.edit-choice {
  font: inherit; font-size: .9rem; padding: .3rem .6rem;
  border-radius: 999px; border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text);
}
.edit-choice:focus { outline: 2px solid var(--gold-500); outline-offset: 1px; }

/* The drafting panel. Deliberately looks like a tool sitting on the page
   rather than part of it, so nobody mistakes the notes box for published text. */
.draft {
  margin-top: 1.5rem; padding: 1rem;
  border: 1.5px dashed var(--border); border-radius: var(--radius-sm);
  background: var(--surface);
}
.draft__label {
  display: block; margin-bottom: .4rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold-text);
}
.draft__notes {
  display: block; width: 100%; box-sizing: border-box;
  font: inherit; font-size: .95rem; line-height: 1.5;
  padding: .6rem .7rem; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border); background: var(--bg); color: var(--text);
  resize: vertical;
}
.draft__notes:focus { outline: 2px solid var(--gold-500); outline-offset: 1px; }
.draft__row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .7rem; }
.draft__go { padding: .5rem 1.1rem; font-size: .92rem; }
.draft__go[disabled] { opacity: .55; cursor: progress; }
.draft__status { margin: .6rem 0 0; font-size: .9rem; color: var(--text-soft); }
.draft__status.is-ok { color: var(--ok); }
.draft__status.is-error { color: var(--danger); }
/* The link to a post that has just gone up sits inside the status line, so it
   inherits that line's colour unless it is told otherwise. */
.draft__status a { color: inherit; text-decoration: underline; }

/* ---------- Utilities ------------------------------------------------- */
.cta-line { max-width: 46ch; margin-inline: auto; }
.btn-row--center { justify-content: center; margin-top: 1.5rem; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.muted { color: var(--text-soft); }
.center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.lede { font-size: 1.12rem; color: var(--text-soft); max-width: 60ch; }
.empty-state { padding: 3rem 1rem; text-align: center; color: var(--text-soft); border: 1px dashed var(--border); border-radius: var(--radius); }

/* ---------- Page header (interior pages) ------------------------------ */
.page-head { background: var(--blue-800); color: #fff; padding-block: clamp(2.75rem, 7vw, 4.5rem); }
.page-head h1 { color: #fff; margin-bottom: .35rem; }
.page-head p { color: #c2c2dc; max-width: 55ch; margin: 0; font-size: 1.06rem; }
.page-head .eyebrow { color: var(--gold-300); }
/* Links on the dark bands: the body link blue is unreadable on navy. */
/* A link on a dark band needs the pale gold to be readable — but a button is
   not a link here, and painting its label gold put gold text on the gold
   accent button at 1.27:1. Every one of these has to exclude .btn, not just
   the hero's. */
.page-head a:not(.btn), .section--dark a:not(.btn), .hero a:not(.btn) { color: var(--gold-300); }
.page-head a:not(.btn):hover, .section--dark a:not(.btn):hover, .hero a:not(.btn):hover { color: #fff; }

/* ---------- Dark mode ------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d0d20;
    --surface: #16162e;
    --surface-2: #111124;
    --text: #e7e7f0;
    --text-soft: #a8a8bd;
    --border: #2a2a44;
    --heading: #f2f2f8;
    --ok: #86dba7;
    --danger: #f2a9a9;
    --gold-text: var(--gold-300);
  }
  body { color: var(--text); }
  a { color: var(--gold-300); }
  a:hover { color: var(--gold-500); }
  .site-header { background: rgba(13, 13, 32, .92); }
  .nav__link { color: #d3d3ee; }
  .nav__link:hover { background: #22224a; color: #fff; }
  .nav-toggle { color: #d3d3ee; }
  .btn--ghost { color: #e7e7f0; }
  .btn--ghost:hover { background: #e7e7f0; color: var(--blue-800); }
  .filter-btn { background: var(--surface); color: #d3d3ee; }
  .notice { background: #1b1b33; color: #e7e7f0; }
  .notice code { background: #26264a; color: #efe2c0; }
  table.schedule thead th { background: var(--surface-2); }
  table.schedule td:first-child { color: #dfe9e0; }
  .section--tint { background: var(--surface-2); }
  .card__price { color: var(--gold-300); }
  .spec-list dd { color: var(--text); }
  .chip { background: #22224a; color: #e0d6ae; border-color: #3a3a63; }
  .badge--available { background: #1f3f2a; color: #a8e0bb; }
  .badge--pending { background: #3d3117; color: #f0cf8e; }
  .badge--sold { background: #2b2b28; color: #c2bcb2; }
  .field input, .field select, .field textarea { background: var(--surface-2); color: var(--text); }
}