@charset "UTF-8";
/* ============================================================================
   MAULANA STUD — DESIGN SYSTEM
   مربط مولانا للخيول العربية الأصيلة
   ----------------------------------------------------------------------------
   Direction: "The Arch" — warm classical ground, editorial composition.

   HOUSE RULES (read before editing — these are why the site exists):
   1. STATIC ONLY. Plain CSS. No build step, no preprocessor, no framework.
   2. ZERO EXTERNAL REQUESTS. No @import, no webfonts, no CDN, no analytics.
      Every URL in this file is a local relative path. The site must work
      fully offline. The original site died because it depended on someone
      else's servers — do not reintroduce that dependency.
   3. FONTS: Georgia for display, system sans for body. The original used
      Wix-licensed faces (futura-lt-w01, madefor-display) which we cannot
      legally use. Never reference them. Never @import a font.
   4. NEVER INVENT FACTS. Pedigrees, dates, colours, awards and registration
      numbers are official registry records. Empty is correct; wrong is harmful.
   5. FAILS TO READABLE. Any JS enhancement must be visible-by-default and
      gated on `html.js` (see the REVEAL block at the foot of this file).

   ASSET FACTS (verified from the actual pixels — do not re-litigate):
   - logo-mark.png    burgundy #A31A53 on a TRANSPARENT ground (82.3% alpha-0).
                      The only primary asset safe on the light header.
   - logo-white.png   pure white on TRANSPARENT. For dark/burgundy grounds only.
   - logo-primary.png an 83%-opaque pure-white (#FFFFFF) rounded badge. It will
                      read as a cool white square on parchment. NOT used in this
                      system. If the farm supplies a transparent-ground primary
                      lockup, it can replace the header mark + wordmark.
   - watercolor.png   65.5% transparent, 0.4% white pixels — a GENUINE alpha
                      channel. It needs no mix-blend-mode and no matte board.
                      Do not "fix" a white background it does not have.

   CONTENTS
     1. TOKENS          6. HERO            11. HORSE CARD (the arch)
     2. RESET / BASE    7. BAND            12. INDEX LIST
     3. LAYOUT          8. SECTION         13. GALLERY / FIGURE
     4. TOPBAR          9. PROSE           14. FOOTER
     5. HEADER / NAV   10. BUTTON          15. REVEAL / MOTION / PRINT
                                           16. ANCHOR TARGETS
                                           17. CONTACT
   ========================================================================== */


/* ============================================================================
   1. TOKENS
   ----------------------------------------------------------------------------
   Every colour pairing below was measured (WCAG 2.1 relative luminance).
   Where a token carries a FLOOR note, that is the limit at which it still
   clears 4.5:1 against its darkest intended background. Do not push past it.
   ========================================================================== */
:root{

  /* --- Brand ------------------------------------------------------------ */
  /* Sampled from the logo pixels. logo-mark.png's most common opaque RGB is
     literally (163,26,83) — this value is exact, not an approximation. */
  --brand:        #A31A53;
  /* Deepened brand, for LARGE fields (footer) where full-strength #A31A53
     is too hot for a heritage tone, and for text on paper.
     #7C1240 on --paper = 9.7:1. White on #7C1240 = 10.4:1. */
  --brand-deep:   #7C1240;
  /* Tint for note panels. Never carries text on its own — --ink sits on it. */
  --brand-wash:   #F7EAF0;

  /* --- Ink -------------------------------------------------------------- */
  --ink:          #2A2521;  /* 14.2:1 on --paper. Body + headings. */
  --ink-soft:     #4A423B;  /*  9.2:1 on --paper, 7.3:1 on --paper-deep. */
  /* FLOOR. --muted is the dimmest tone that still clears 4.5:1 on the
     WARMEST ground it is allowed to sit on (--paper-deep #E9DCC4 = 4.91:1).
     The previous value #6A6157 measured 4.48:1 there — it failed. Do not
     lighten this token. If you need dimmer text, change the ground instead. */
  --muted:        #645B51;

  /* --- Paper ------------------------------------------------------------ */
  --paper:        #FBF7F0;  /* page ground */
  --paper-warm:   #F3EBDD;  /* alternating band */
  --paper-deep:   #E9DCC4;  /* deepest ground text may sit on — see --muted */
  --white:        #FFFFFF;  /* horse-card plate; lifts off the parchment */

  /* --- Lines ------------------------------------------------------------ */
  --line:         #DFD3BD;
  --line-soft:    #EBE1CE;

  /* --- Dark ground (hero scrim, farm overlay) --------------------------- */
  --shade:        #17110F;
  /* On dark grounds --brand is only ~2.7:1 and MUST NOT carry text.
     Cinematic solved this with a lifted pink (#D9538A) which loses the brand.
     This system does not need it: on dark ground we use white and
     --on-dark-dim instead, and --brand appears only as rules/fills.
     If you ever add a dark band, use these two — never tint the brand. */
  --on-dark:      rgba(255,255,255,1);
  --on-dark-dim:  rgba(255,255,255,.82); /* FLOOR: .82 alpha ≈ 4.6:1 on --shade */

  /* --- Type ------------------------------------------------------------- */
  --serif: Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;

  /* Type scale. Display sizes are fluid; UI sizes are fixed so that
     letter-spacing stays predictable at small sizes.
     NOTE: nothing in this system is below 10px. 9px uppercase at .11em
     tracking is below any defensible legibility floor — do not go there. */
  --t-display: clamp(2.5rem, 6vw, 4.25rem);   /* hero h1 */
  --t-h1:      clamp(2rem, 4.4vw, 3rem);      /* page title */
  --t-h2:      clamp(1.75rem, 3.4vw, 2.5rem); /* section head */
  --t-h3:      1.375rem;
  --t-body:    1.0625rem;
  --t-small:   .9375rem;
  --t-micro:   .75rem;    /* 12px — smallest running text */
  --t-label:   .6875rem;  /* 11px — uppercase labels, tracked */
  --t-tiny:    .625rem;   /* 10px — HARD FLOOR. Uppercase counters only. */

  /* --- Spacing scale ---------------------------------------------------- */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --section-y: clamp(4rem, 10vw, 7rem);  /* vertical rhythm of every .section */

  /* --- Layout ----------------------------------------------------------- */
  --page:   1200px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 68ch;   /* .prose max line length */

  /* --- Effects ---------------------------------------------------------- */
  --shadow-plate: 0 24px 60px -28px rgba(42,37,33,.45);
  --shadow-card:  0 12px 32px -20px rgba(42,37,33,.40);
  --ease: cubic-bezier(.22,.61,.36,1);
}


/* ============================================================================
   2. RESET / BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

/* height:auto is load-bearing. Every <img> carries width/height attributes
   (good — they reserve layout space and stop reflow), but those attributes
   are presentational hints: without height:auto the browser applies the raw
   pixel height and ignores aspect-ratio. */
img{ max-width:100%; height:auto; display:block; }

a{ color:var(--brand-deep); }

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0;
  /* Kills the ragged one-word orphan line that a fluid clamp() produces at
     intermediate widths. Free, and degrades to normal wrapping. */
  text-wrap:balance;
}
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

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

:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:3px;
  border-radius:2px;
}
/* On dark grounds the burgundy outline disappears — switch to white. */
.hero-figure :focus-visible,
.farm :focus-visible,
.topbar :focus-visible,
.site-footer :focus-visible{ outline-color:#fff; }

/* Visually hidden, still announced. */
.sr{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Skip link — first tab stop on every page. */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--brand); color:#fff;
  padding:.75rem 1.25rem;
  font-size:var(--t-small); text-decoration:none;
}
.skip:focus{ left:.5rem; top:.5rem; }


/* ============================================================================
   3. LAYOUT
   ----------------------------------------------------------------------------
   .wrap   centred page column, used by every section.
   .grid   generic auto-fit grid. Prefer auto-fit over a hardcoded column
           ladder: it absorbs a 7th stallion without a CSS edit, which
           matters on a site the farm hand-edits.
   ========================================================================== */
.wrap{
  max-width:var(--page);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.grid{ display:grid; gap:clamp(1.5rem, 3vw, 2.5rem); }
.grid--2{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.grid--4{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }

/* The asymmetric editorial grid. This is the system's signature composition:
   a 7/5 split with the body left and a ruled aside right. Use it for any
   "intro + list" block. It is the antidote to centring everything. */
.grid--editorial{
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(2.5rem, 6vw, 5rem);
  align-items:start;
}
/* Mirror image: narrow column first (art left, body right). Use this rather
   than `order:` on the children — order would leave the DOM reading order
   fighting the visual one, and the wide track would land on the art. */
.grid--editorial-alt{
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(2.5rem, 6vw, 5rem);
  align-items:center;
}
/* The collection index: mares get a double-width column, progeny and sales
   a single each. */
.grid--index{
  grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem, 5vw, 3.5rem);
  margin-top:clamp(3rem, 7vw, 4.5rem);
}
@media (max-width:1080px){
  .grid--index{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .grid--index > :first-child{ grid-column:1 / -1; }
}
@media (max-width:900px){
  .grid--editorial,
  .grid--editorial-alt{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .grid--index{ grid-template-columns:1fr; }
  .grid--index > :first-child{ grid-column:auto; }
}


/* ============================================================================
   THE ARCH — shared geometry
   ----------------------------------------------------------------------------
   The stud's own buildings are round-arched: the stable range in the aerial,
   the timber arch behind the black stallion, the great doorway in the hero.
   Every arch below is a TRUE semicircle, not an eyeballed radius.

   The maths: a semicircular top needs a horizontal radius of W/2 and a
   VERTICAL radius of the same absolute length. border-radius percentages
   resolve against different axes, so the vertical figure must be expressed
   as a percentage of height:  (W/2) / H.

     aspect 5/4 → H = 0.80W → (W/2)/0.80W = 62.5%
     aspect 1/1 → H = 1.00W → (W/2)/1.00W = 50%
     aspect 4/5 → H = 1.25W → (W/2)/1.25W = 40%
     aspect 3/4 → H = 1.33W → (W/2)/1.33W = 37.5%

   Hence the odd-looking percentages. The small bottom radii (4px) keep the
   plate from looking machine-cut. Change the aspect and you MUST recompute.
   ========================================================================== */
.arch-5-4{ aspect-ratio:5/4; border-radius:50% 50% 5px 5px / 62.5% 62.5% 5px 5px; }
.arch-1-1{ aspect-ratio:1/1; border-radius:50% 50% 4px 4px / 50%   50%   4px 4px; }
.arch-4-5{ aspect-ratio:4/5; border-radius:50% 50% 4px 4px / 40%   40%   4px 4px; }
.arch-3-4{ aspect-ratio:3/4; border-radius:50% 50% 4px 4px / 37.5% 37.5% 4px 4px; }


/* ============================================================================
   4. TOPBAR
   ----------------------------------------------------------------------------
   A burgundy band above the header carrying the address and the phone.
   In this market the buyer's first act is to call: this puts the number
   above the fold on every page, and commits the brand colour at the very
   top of the document rather than withholding it until the footer.
   ========================================================================== */
.topbar{
  background:var(--brand);
  color:#fff;
  font-size:var(--t-micro);
  letter-spacing:.03em;
}
.topbar .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4); min-height:38px;
}
.topbar a{ color:#fff; text-decoration:none; }        /* white on brand = 7.4:1 */
.topbar a:hover{ text-decoration:underline; text-underline-offset:3px; }
.topbar .place{ color:rgba(255,255,255,.9); }


/* ============================================================================
   5. HEADER / NAV
   ----------------------------------------------------------------------------
   Sticky, parchment, blurred. The header must NOT be position:absolute over
   the hero — the nav then vanishes for the whole page, which was the single
   worst defect in the source directions.

   The lockup is logo-mark.png (burgundy, transparent ground) + a Georgia
   wordmark. logo-primary.png is deliberately NOT used: it is an 83%-opaque
   white badge and would read as a cool white square on the parchment.
   Do not "solve" that with mix-blend-mode — it dirties the burgundy.
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(251,247,240,.94);          /* --paper at .94 */
  -webkit-backdrop-filter:blur(8px) saturate(1.1);  /* Safari needs the prefix */
  backdrop-filter:blur(8px) saturate(1.1);
  border-bottom:1px solid var(--line-soft);
}
.site-header .wrap{
  position:relative;                          /* anchors the mobile drawer */
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-5); min-height:84px;
}

/* --- Brand lockup --- */
.brand{
  display:flex; align-items:center; gap:.75rem;
  text-decoration:none; color:var(--ink); flex:none;
}
.brand img{ height:52px; width:auto; }
.brand-word{
  display:flex; flex-direction:column; line-height:1.1;
}
.brand-word .n{
  font-family:var(--serif);
  font-size:1.25rem;
  letter-spacing:.01em;
  color:var(--ink);
}
.brand-word .s{
  font-family:var(--sans);
  font-size:var(--t-tiny);
  letter-spacing:.16em; text-transform:uppercase;
  font-weight:700;
  color:var(--brand);                         /* 6.9:1 on --paper */
  margin-top:.2rem;
}

/* --- Desktop nav --- */
.nav ul{ display:flex; align-items:center; gap:clamp(.85rem, 1.7vw, 1.6rem); }
.nav a{
  font-size:var(--t-micro);
  letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  color:var(--ink); text-decoration:none;
  padding:.4rem 0;
  border-bottom:1px solid transparent;
  white-space:nowrap;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.nav a:hover{ color:var(--brand); border-bottom-color:var(--brand); }
.nav a[aria-current="page"]{ color:var(--brand); border-bottom-color:var(--brand); }

/* --- Menu button (mobile) --- */
.menu-btn{
  display:none;
  background:none; border:1px solid var(--line);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-label);
  letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  padding:.7rem 1rem;
  min-height:44px;                            /* touch target */
  cursor:pointer; border-radius:2px;
}
.menu-btn:hover{ border-color:var(--brand); color:var(--brand); }

/* --- Mobile drawer -----------------------------------------------------
   A nine-item nav does not belong in a dropped list. This is a full-height
   sheet: 01–09 indices, serif names, and the address/phone pinned to the
   bottom — the phone is one tap away on the device most likely to call.
   Hidden with `visibility` (not display) so it is unfocusable when closed. */
.drawer{
  position:fixed; inset:0; z-index:50;
  background:var(--paper);
  padding:1.5rem var(--gutter) 2rem;
  display:flex; flex-direction:column;
  overflow-y:auto;
  opacity:0; visibility:hidden;
  /* visibility is deliberately NOT interpolated — it is switched with a 0s
     transition that is DELAYED on close and immediate on open.
     Why it matters: a transitioned `visibility` still computes to `hidden` at
     t=0, so an element made visible this way is not yet focusable in the same
     tick — nav.js's focus() call would silently do nothing. With `0s linear 0s`
     on open, visibility is `visible` the moment the class lands and focus works.
     On close the 0.3s delay keeps the drawer visible while it fades out. */
  transition:opacity .3s var(--ease), visibility 0s linear .3s;
}
.drawer.is-open{
  opacity:1; visibility:visible;
  transition:opacity .3s var(--ease), visibility 0s linear 0s;
}
.drawer-top{
  display:flex; justify-content:flex-end;
  min-height:84px; align-items:center;
}
.drawer nav{ display:flex; flex-direction:column; }
.drawer nav a{
  display:flex; align-items:baseline; gap:1rem;
  font-family:var(--serif); font-size:1.5rem;
  color:var(--ink); text-decoration:none;
  padding:.85rem 0;
  border-bottom:1px solid var(--line-soft);
  transition:color .25s var(--ease), padding-left .25s var(--ease);
}
.drawer nav a:hover{ color:var(--brand); padding-left:.4rem; }
.drawer nav a[aria-current="page"]{ color:var(--brand); }
.drawer nav a i{
  font-style:normal; font-family:var(--sans);
  font-size:var(--t-tiny); font-weight:700; letter-spacing:.12em;
  color:var(--brand); flex:none;
}
.drawer-foot{ margin-top:auto; padding-top:2.5rem; }
.drawer-foot p{ margin:.3rem 0; font-size:var(--t-small); color:var(--muted); }
.drawer-foot a{
  font-family:var(--serif); font-size:1.25rem;
  color:var(--brand-deep); text-decoration:none;
}

/* Nine nav items stop fitting here — collapse to the drawer rather than
   let the header wrap to two rows. The 1040 threshold is mirrored in
   nav.js; change both together. */
@media (max-width:1040px){
  .nav{ display:none; }
  .menu-btn{ display:inline-block; }
}
@media (min-width:1041px){
  .drawer{ display:none; }
}


/* ============================================================================
   6. HERO
   ----------------------------------------------------------------------------
   Asymmetric, not centred: the tagline sits left with the lede and calls to
   action set against it. A centred hero plus an italic Georgia h1 reads as
   heritage-hotel brochure; roman type on an asymmetric grid reads as a stud
   book. The tagline is the brand's own words and carries the page, so it is
   set roman at display size rather than italic.
   ========================================================================== */
.hero{ padding-block:clamp(3rem, 7vw, 5rem) 0; }

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(2rem, 5vw, 4rem);
  align-items:end;
}
.hero h1{
  font-size:var(--t-display);
  line-height:1.02;
  letter-spacing:-.025em;
  margin:var(--sp-4) 0 0;
}
.hero .arabic{
  font-family:var(--serif);
  font-size:1.0625rem;
  color:var(--muted);
  margin-top:var(--sp-4);
  line-height:1.9;
}
.hero-lede{
  color:var(--ink-soft);
  font-size:1.0625rem;
  max-width:38ch;
}
.hero-cta{
  margin-top:var(--sp-5);
  display:flex; flex-wrap:wrap; gap:.75rem;
}

/* --- The hero arch plate ---
   Structure matters here:
     <figure class="hero-figure">
       <div class="hero-plate"><img class="arch-5-4"></div>
       <figcaption>…</figcaption>
     </figure>
   figcaption MUST live inside the figure and MUST be its first or last child.
   A stray sibling between figure and caption is invalid and breaks the
   caption's programmatic association with the image — do not reintroduce one.
   The .hero-plate div exists only to anchor the keyline to the IMAGE box
   rather than to the image-plus-caption box.
   The "plinth" the arch stands on is the caption's border-top. */
.hero-figure{ margin:clamp(2.5rem, 6vw, 4rem) 0 0; }
.hero-plate{ position:relative; }
.hero-plate::before{                           /* outer keyline, echoes the arch */
  content:"";
  position:absolute; inset:-18px;
  border:1px solid var(--line);
  /* Decorative echo: the keyline box is 18px larger than the plate on every
     side, so its aspect is not exactly 5:4 and these radii are a close
     approximation rather than a true semicircle. That is fine for a hairline;
     it is NOT fine for the plate itself — see THE ARCH. */
  border-radius:50% 50% 6px 6px / 62.5% 62.5% 6px 6px;
  pointer-events:none;
}
.hero-figure img{
  width:100%;
  object-fit:cover; object-position:50% 50%;
  background:var(--paper-deep);
  box-shadow:var(--shadow-plate);
}
.hero-figure figcaption{
  margin-top:1.75rem; padding-top:1rem;
  border-top:1px solid var(--line);            /* ← the plinth */
  font-family:var(--serif); font-style:italic;
  font-size:var(--t-small);
  color:var(--muted);
}
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; align-items:start; }
  .hero-lede{ max-width:none; }
}
@media (max-width:640px){
  /* A 5:4 arch is too wide-and-shallow on a narrow screen; square it up.
     Both radii recomputed for the new aspect — see THE ARCH block. */
  .hero-figure img{ aspect-ratio:1/1; border-radius:50% 50% 4px 4px / 50% 50% 4px 4px; }
  .hero-plate::before{ inset:-12px; border-radius:50% 50% 5px 5px / 50% 50% 5px 5px; }
  .hero-cta .btn{ flex:1; text-align:center; justify-content:center; }
}


/* ============================================================================
   7. BAND
   ----------------------------------------------------------------------------
   A hairline strip under the hero giving the Arabic name parity with the
   English rather than relegating it to a superscript and a footer line.
   For an Egyptian farm selling to international collectors, both names are
   the brand.
   ========================================================================== */
.band{
  border-block:1px solid var(--line-soft);
  background:var(--paper-warm);
}
.band .wrap{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--sp-4) var(--sp-5);
  padding-block:1.25rem;
}
.band p{
  margin:0;
  font-size:var(--t-label);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted);
}
.band p b{ color:var(--ink); font-weight:700; }
.band .ar{
  font-family:var(--serif);
  font-size:1rem;
  letter-spacing:normal; text-transform:none;
  color:var(--ink-soft);
}


/* ============================================================================
   8. SECTION
   ----------------------------------------------------------------------------
   .section        vertical rhythm + optional ground modifiers
   .section-head   eyebrow + h2 left, descriptive line right, on a 2px ink
                   rule. Authoritative and it scales to every page. Do not
                   replace this with a centred lozenge.
   ========================================================================== */
.section{ padding-block:var(--section-y); }
.section--warm{
  background:var(--paper-warm);
  border-block:1px solid var(--line-soft);
}
.section--tight{ padding-block:clamp(2.5rem, 6vw, 4rem); }
/* Trailing "see all" link under a section's content. */
.section-foot{ margin-top:clamp(2rem, 5vw, 3.5rem); }

.eyebrow{
  font-family:var(--sans);
  font-size:var(--t-label);
  letter-spacing:.22em; text-transform:uppercase; font-weight:700;
  color:var(--brand);                          /* 6.9:1 on --paper */
  margin:0;
}

.section-head{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap:var(--sp-5);
  padding-bottom:var(--sp-5);
  border-bottom:2px solid var(--ink);
  margin-bottom:clamp(2.5rem, 5vw, 3.5rem);
}
.section-head h2{ font-size:var(--t-h2); margin:.75rem 0 0; }
.section-head .lede{
  color:var(--muted);
  font-size:var(--t-small);
  margin:0;
  max-width:34ch;
}

/* --- Page title (interior pages) ---
   The homepage uses .hero; every other page opens with this. */
.page-title{
  padding-block:clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
  border-bottom:1px solid var(--line);
}
.page-title h1{
  font-size:var(--t-h1);
  margin:var(--sp-3) 0 0;
  max-width:20ch;
}
.page-title .lede{
  margin:var(--sp-4) 0 0;
  color:var(--ink-soft);
  max-width:56ch;
}

/* --- Group label (a run of horses inside a section) --- */
.group-label{
  display:flex; align-items:baseline; gap:var(--sp-4);
  margin-bottom:var(--sp-5);
}
.group-label h3{ font-size:1.5rem; }
.group-label .count{
  font-family:var(--sans);
  font-size:var(--t-tiny); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brand);
}
.group-label .line{ flex:1; height:1px; background:var(--line); }
.group-label a{
  font-family:var(--sans);
  font-size:var(--t-label);
  letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color:var(--brand-deep); text-decoration:none;
  white-space:nowrap;
}
.group-label a:hover{ text-decoration:underline; text-underline-offset:4px; }

/* --- Masthead: drop cap + counter aside --- */
.masthead-body p{ color:var(--ink-soft); margin:var(--sp-5) 0 0; max-width:56ch; }
.masthead-body h2{ font-size:var(--t-h2); margin:var(--sp-5) 0 0; max-width:22ch; }
.masthead-body > p.has-dropcap::first-letter{
  font-family:var(--serif);
  float:left;
  font-size:4.25rem;
  line-height:.82;
  padding:.32rem .6rem 0 0;
  color:var(--brand);
}
/* Pull-quote in the masthead body — the tagline's own gloss. */
.masthead-body .pull{
  font-family:var(--serif); font-style:italic;
  font-size:1.125rem;
  color:var(--brand-deep);                     /* 9.7:1 on --paper */
  max-width:42ch;
}
.masthead-aside{
  border-top:2px solid var(--brand);
  padding-top:var(--sp-5);
}
.masthead-aside .eyebrow{ margin-bottom:var(--sp-4); }

/* Philosophy body — pairs with .grid--editorial-alt (art left, body right). */
.phil-body h2{ font-size:var(--t-h2); margin:var(--sp-4) 0 0; max-width:18ch; }
.phil-body .prose{ margin-top:var(--sp-5); }

/* Numbered theme list. counter() generates 01, 02 … so the numbers can
   never drift out of sync with the items when the farm edits the list. */
.theme-list{ counter-reset:themes; }
.theme-list li{
  counter-increment:themes;
  border-bottom:1px solid var(--line);
  padding-block:.85rem;
  font-family:var(--serif);
  font-size:1.0625rem;
  color:var(--ink);
  display:flex; align-items:baseline; gap:.85rem;
}
.theme-list li::before{
  content:counter(themes, decimal-leading-zero);
  font-family:var(--sans);
  font-size:var(--t-tiny); font-weight:700; letter-spacing:.1em;
  color:var(--brand);
  flex:none;
}

/* --- Records note ---
   The honest empty-state, stated once, in plain language. This copy is the
   ethical centre of the site: it is why the pedigree fields are blank.
   Do not soften it and do not delete it until the records actually land. */
.note{
  margin-top:clamp(2.5rem, 5vw, 3.5rem);
  padding:1.25rem 1.5rem;
  background:var(--brand-wash);
  border-left:2px solid var(--brand);
  font-size:var(--t-small);
  line-height:1.65;
  color:var(--ink-soft);
  max-width:70ch;
}
.note strong{ color:var(--brand-deep); font-weight:700; }
.note .note-h{
  display:block;
  font-family:var(--sans);
  font-size:var(--t-tiny); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand);
  margin-bottom:.4rem;
}


/* ============================================================================
   9. PROSE
   ----------------------------------------------------------------------------
   Long-form body copy for About / Blog. Constrained measure, serif quotes.
   ========================================================================== */
.prose{ max-width:var(--measure); color:var(--ink-soft); }
.prose > * + *{ margin-top:var(--sp-5); }
.prose h2{ font-size:var(--t-h2); color:var(--ink); margin-top:var(--sp-7); }
.prose h3{ font-size:var(--t-h3); color:var(--ink); margin-top:var(--sp-6); }
.prose a{ color:var(--brand-deep); text-underline-offset:3px; }
.prose ul{ list-style:disc; padding-left:1.25rem; }
.prose ul li{ margin-top:.4rem; }
.prose .lead{
  font-family:var(--serif);
  font-size:1.3125rem; line-height:1.6;
  color:var(--ink);
}
.prose blockquote{
  margin:var(--sp-6) 0;
  padding-left:var(--sp-5);
  border-left:2px solid var(--brand);
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.25rem, 2.2vw, 1.5rem);
  line-height:1.5;
  color:var(--brand-deep);                     /* 9.7:1 on --paper */
}
.rule-short{
  width:44px; height:2px; background:var(--brand);
  border:0; margin:var(--sp-5) 0;
}


/* ============================================================================
   10. BUTTON
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--sans);
  font-size:var(--t-micro); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  padding:1rem 1.85rem;
  min-height:44px;                             /* touch target */
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease),
             border-color .2s var(--ease);
}
.btn--solid{ background:var(--brand); color:#fff; border-color:var(--brand); }
.btn--solid:hover{ background:var(--brand-deep); border-color:var(--brand-deep); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--brand); color:var(--brand); }
/* On a dark ground (farm overlay, gallery) — white outline, brand fill. */
.btn--onDark{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.btn--onDark:hover{ background:var(--brand); border-color:var(--brand); }

/* Inline "more" link with an arrow. */
.more{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--sans);
  font-size:var(--t-micro); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand-deep); text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:3px;
}
.more::after{ content:"\2192"; }
.more:hover{ border-bottom-color:var(--brand); }


/* ============================================================================
   11. HORSE CARD — the arch nameplate
   ----------------------------------------------------------------------------
   No per-horse photograph survived the original site, and none has been
   invented. Rather than fake a portrait or drop in a grey box, each horse
   gets an arched niche — the shape of the stall doorways in the hero
   photograph — carrying the ghosted logo mark and the name.
   It is a nameplate on an empty stall: honest, and correct.

   The plate is flat --white on purpose. A sand gradient gives every empty
   nameplate a faint plastic sheen; flat white reads as paper.
   ========================================================================== */
.horse-grid{
  display:grid;
  /* auto-fit, NOT a hardcoded 6→3→2 ladder: this absorbs a seventh stallion
     without a CSS edit. min() stops the track overflowing at 320px. */
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap:clamp(.75rem, 1.6vw, 1.25rem);
}
.horse-card{
  position:relative;
  isolation:isolate;                           /* contains the mark's z-index */
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end;
  text-align:center; text-decoration:none;
  padding:1.25rem 1rem 1.5rem;
  background:var(--white);
  border:1px solid var(--line);
  overflow:hidden;
  transition:border-color .3s var(--ease), background-color .3s var(--ease),
             transform .3s var(--ease), box-shadow .3s var(--ease);
}
/* The ghost mark. z-index:-1 inside the isolated card puts it genuinely
   behind the name but still above the card's own white background — no
   blend mode, no stacking against the page. */
.horse-card .mark{
  position:absolute; z-index:-1;
  top:14%; left:50%;
  transform:translateX(-50%);
  width:62%; height:auto;
  opacity:.10;
  pointer-events:none;
  transition:opacity .3s var(--ease);
}
.horse-card::after{                            /* keystone tick */
  content:"";
  position:absolute; top:8%; left:50%;
  width:1px; height:14px;
  background:var(--line);
  transform:translateX(-50%);
  transition:background-color .3s var(--ease);
}
.horse-card:hover,
.horse-card:focus-visible{
  border-color:var(--brand);
  background:var(--brand-wash);
  transform:translateY(-3px);
  box-shadow:var(--shadow-card);
}
.horse-card:hover .mark,
.horse-card:focus-visible .mark{ opacity:.18; }
.horse-card:hover::after,
.horse-card:focus-visible::after{ background:var(--brand); }

.horse-card .name{
  font-family:var(--serif);
  font-size:1.375rem;
  line-height:1.1;
  color:var(--ink);
}
/* "Pedigree to follow" names the actual gap and promises the fill.
   10px is the hard floor — the previous 9px at .11em tracking was below
   any defensible legibility threshold. --muted on --white = 6.7:1. */
.horse-card .pending{
  margin-top:.55rem; padding-top:.55rem;
  border-top:1px solid var(--line);
  width:100%;
  font-family:var(--sans);
  font-size:var(--t-tiny);
  font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted);
  line-height:1.4;
}


/* ============================================================================
   12. INDEX LIST
   ----------------------------------------------------------------------------
   A ruled column. Fourteen mares in an inline list with diamond separators
   is hard to scan; ruled rows with leading-zero counters are a stud book.
   ========================================================================== */
.index-list{ counter-reset:idx; }
.index-list li{ border-bottom:1px solid var(--line); }
.index-list li:first-child{ border-top:1px solid var(--line); }
.index-list a{
  display:flex; align-items:baseline; gap:1rem;
  padding-block:.8rem;
  text-decoration:none;
  transition:color .2s var(--ease), padding-left .2s var(--ease);
}
.index-list a::before{
  content:counter(idx, decimal-leading-zero);
  counter-increment:idx;
  font-family:var(--sans);
  font-size:var(--t-tiny); font-weight:700; letter-spacing:.08em;
  color:var(--muted);
  flex:none;
  transition:color .2s var(--ease);
}
.index-list .n{
  font-family:var(--serif);
  font-size:1.125rem;
  color:var(--ink);
  transition:color .2s var(--ease);
}
.index-list a:hover,
.index-list a:focus-visible{ padding-left:.4rem; }
.index-list a:hover .n,
.index-list a:focus-visible .n,
.index-list a:hover::before,
.index-list a:focus-visible::before{ color:var(--brand); }

/* Two-up for a long list (the fourteen mares). */
.index-list--split{ columns:2; column-gap:2rem; }
.index-list--split li{ break-inside:avoid; }
@media (max-width:480px){
  .index-list--split{ columns:1; }
}


/* ============================================================================
   13. GALLERY / FIGURE
   ----------------------------------------------------------------------------
   Captions are italic serif — a warmer voice than an uppercase label, and it
   matches the stud-book tone. Left-aligned, not centred.
   ========================================================================== */
.shots{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap:clamp(1.25rem, 3vw, 2.125rem);
  align-items:start;   /* don't stretch figures — a definite parent height
                          would flatten the arch into an ellipse. */
}
.shot{ margin:0; }
.shot img{
  width:100%;
  object-fit:cover;
  background:var(--paper-deep);
  box-shadow:var(--shadow-card);
}
.shot figcaption{
  margin-top:1.1rem;
  font-family:var(--serif); font-style:italic;
  font-size:var(--t-small); line-height:1.55;
  color:var(--muted);
}

/* --- Watercolour ---
   watercolor.png has a GENUINE alpha channel (65.5% of the file is fully
   transparent; 0.4% is white). It sits on the parchment natively.
   No matte board, no mix-blend-mode, no white box to fight. A multiply
   blend here would only dirty the paint against the warm ground.
   And no caption: the only honest provenance line — "a watercolour
   recovered from the stud's original site" — is too meta for the page,
   and anything warmer would be inventing provenance. */
.watercolour{ margin:0; display:flex; justify-content:center; }
.watercolour img{ width:min(100%, 360px); }

/* --- The farm: full-bleed aerial with an overlaid card --- */
.farm{ position:relative; background:var(--shade); overflow:hidden; }
.farm-img{
  width:100%;
  height:clamp(360px, 58vh, 620px);
  object-fit:cover; object-position:50% 42%;
}
.farm-overlay{
  position:absolute; inset:0;
  display:flex; align-items:center;
  background:linear-gradient(to right,
    rgba(23,17,15,.88) 0%, rgba(23,17,15,.58) 45%, rgba(23,17,15,.15) 78%);
}
.farm-card{ width:100%; }
.farm-card .inner{ max-width:32rem; }
.farm-card h2{ color:#fff; font-size:var(--t-h2); margin:var(--sp-4) 0 0; }
.farm-card p{
  color:var(--on-dark-dim);
  margin:var(--sp-4) 0 0;
  font-size:var(--t-small);
}
.farm-card .eyebrow{ color:#fff; }             /* --brand is ~2.7:1 here: never */
.farm-facts{
  margin:var(--sp-6) 0 0;
  display:flex; flex-wrap:wrap; gap:var(--sp-5) var(--sp-6);
}
.farm-facts dt{
  font-size:var(--t-tiny);
  letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  color:var(--on-dark-dim);
  margin-bottom:.3rem;
}
.farm-facts dd{
  margin:0;
  font-family:var(--serif); font-size:1.0625rem;
  color:#fff;
}
.farm-facts a{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.45); }
.farm-facts a:hover{ border-bottom-color:#fff; }
@media (max-width:900px){
  .farm-overlay{
    background:linear-gradient(to bottom, rgba(23,17,15,.35) 0%, rgba(23,17,15,.9) 62%);
    align-items:flex-end;
  }
  .farm-card{ padding-block:2.5rem; }
  .farm-card .inner{ max-width:none; }
}


/* --- Journal post --- */
.posts{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap:clamp(2rem, 5vw, 4rem);
}
.post{ border-top:2px solid var(--ink); padding-top:var(--sp-5); }
.post time{
  font-family:var(--sans);
  font-size:var(--t-tiny); font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--brand);
}
.post h3{ font-size:var(--t-h3); line-height:1.3; margin:.85rem 0 0; }
.post h3 a{ color:var(--ink); text-decoration:none; }
.post h3 a:hover{ color:var(--brand); }
.post .excerpt{ color:var(--ink-soft); font-size:var(--t-small); margin:var(--sp-4) 0 0; }
/* The blog bodies were never archived and are not recoverable. This flag is
   an honest statement of that — it is not a "coming soon" teaser. */
.post .restore{
  margin-top:var(--sp-4); padding-top:.85rem;
  border-top:1px solid var(--line);
  font-family:var(--serif); font-style:italic;
  font-size:var(--t-micro);
  color:var(--muted);
}


/* ============================================================================
   14. FOOTER
   ----------------------------------------------------------------------------
   --brand-deep, not --brand: a full-strength #A31A53 field this large runs
   hot against a heritage tone, and the deepened shade buys contrast headroom
   (white = 10.4:1). The exact brand colour still opens the page in .topbar.

   Headings here are h3, NOT h2 — h2 would compete with real section
   headings in the document outline.
   ========================================================================== */
.site-footer{
  background:var(--brand-deep);
  color:var(--on-dark-dim);
  padding-block:clamp(3.5rem, 8vw, 5rem) 1.5rem;
}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2.5rem, 6vw, 4rem);
  padding-bottom:var(--sp-7);
  border-bottom:1px solid rgba(255,255,255,.2);
}
.footer-brand img{ height:76px; width:auto; margin-bottom:var(--sp-5); }
.footer-brand .ar{
  font-family:var(--serif);
  color:var(--on-dark-dim);
  font-size:1rem; margin:0 0 .75rem;
}
.footer-brand .tag{
  font-family:var(--serif); font-style:italic;
  font-size:1.125rem; color:#fff; margin:0;
}
.footer-col h3{
  font-family:var(--sans);
  font-size:var(--t-tiny); font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--on-dark-dim);                    /* .82 alpha = 7.2:1 on brand-deep */
  margin:0 0 var(--sp-4);
  padding-bottom:.75rem;
  border-bottom:1px solid rgba(255,255,255,.2);
}
.footer-col li{ margin-bottom:.6rem; }
.footer-col a{
  font-size:var(--t-small);
  color:#fff; text-decoration:none;
  border-bottom:1px solid transparent;
}
.footer-col a:hover{ border-bottom-color:#fff; }
.footer-col ul.two-up{ columns:2; column-gap:1.5rem; }
.footer-col ul.two-up li{ break-inside:avoid; }

.footer-contact dt{
  font-size:var(--t-tiny); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-dark-dim);
  margin-top:var(--sp-4);
}
.footer-contact dd{ margin:.35rem 0 0; font-size:var(--t-small); color:#fff; }
.footer-contact .phone{ font-family:var(--serif); font-size:1.375rem; }
.footer-contact .phone a{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.4); }
.footer-contact .phone a:hover{ border-bottom-color:#fff; }
/* PLACEHOLDER — no email address was recoverable and none has been invented. */
.footer-contact .pending{
  font-family:var(--serif); font-style:italic;
  color:var(--on-dark-dim);
}
.colophon{
  padding-top:var(--sp-6);
  display:flex; flex-wrap:wrap; gap:var(--sp-4);
  justify-content:space-between; align-items:center;
  font-size:var(--t-micro);
  color:var(--on-dark-dim);
}
@media (max-width:900px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:640px){
  .footer-grid{ grid-template-columns:1fr; }
  .colophon{ justify-content:center; text-align:center; }
}


/* ============================================================================
   15. MOTION / PRINT
   ----------------------------------------------------------------------------
   THERE IS NO SCROLL-REVEAL ON THIS SITE, AND THAT IS DELIBERATE.

   Nothing in this stylesheet hides content and waits for JavaScript to bring
   it back. Two reasons, in order of importance:

   1. It is not needed. The brief permits JS only where it is genuinely
      required (the mobile drawer). A fade-up on scroll is the "tech startup"
      gesture this design is explicitly meant to avoid — a stud farm's
      brochure does not animate.

   2. It is the only class of bug that can blank the page. An opacity:0
      default relies on IntersectionObserver callbacks, which are delivered
      during the browser's rendering steps — a document that never paints
      (background/prerendered tab, some in-app webviews, a headless client)
      never fires them, and the content stays invisible. Feature-detecting
      `'IntersectionObserver' in window` does NOT protect against this: the
      API can exist and still never fire. This was observed directly while
      building the page, not theorised.

   IF A FUTURE EDITOR ADDS ONE ANYWAY, it must take this shape — the
   `js` class and the error listener in nav.js exist to support it:

       html.js .rv      { opacity:0; transition:opacity .8s var(--ease); }
       html.js .rv.in   { opacity:1; }

   …plus, in JS: reveal on IntersectionObserver, but ALSO revealAll() on any
   error, on prefers-reduced-motion, on missing API, and on a timeout. The
   rule is "visible by default; only script-confirmed-alive licenses hiding
   it". This site died once from depending on infrastructure it did not
   control. Fails-to-fully-readable is the permanent default.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .horse-card:hover{ transform:none; }
}

/* A stud farm gets printed — a collector prints the horse list to take to
   the yard. Kill the furniture, keep the content, put ink on white. */
@media print{
  .topbar,
  .site-header,
  .drawer,
  .menu-btn,
  .skip,
  .farm-overlay,
  .hero-figure::before{ display:none !important; }

  body{ background:#fff; color:#000; font-size:11pt; }
  .site-footer{ background:#fff; color:#000; border-top:1px solid #000; }
  .site-footer a,
  .footer-col h3,
  .footer-brand .tag,
  .footer-contact dd,
  .colophon{ color:#000; }
  .horse-card{ border-color:#000; break-inside:avoid; }
  .section{ padding-block:1.5rem; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; }
}


/* ============================================================================
   16. ANCHOR TARGETS
   ----------------------------------------------------------------------------
   Added with blog.html. Additive only — this overrides no existing component.

   The header is sticky and 84px tall. An in-page anchor scrolls its target to
   the very top of the viewport, which on this site means underneath the
   header: the homepage journal links to blog.html#<slug>, so a reader
   following one would land on the article's own date and title hidden behind
   the nav, and appear to have arrived at the wrong post.

   84px header + a little breathing room. Scoped to .post[id] rather than a
   bare [id] selector, which would also catch #main, #drawer and #yr — #main
   in particular is the skip link's target and must not be offset.

   The horse pages will want the same treatment when they land: their cards
   link to stallions.html#malk, mares.html#ghadia and so on. Add the selector
   to this rule then — do not start a second block.

   .section[id] / .farm[id] added with about.html, which carries an in-page
   contents list to its six named sections (#philosophy, #heritage, …). Same
   failure without this: the eyebrow and half the h2 land behind the nav.
   Both stay attribute-qualified for the reason above — a bare .section would
   offset sections nobody linked to, which is harmless but untrue to intent.
   ========================================================================== */
.post[id],
.section[id],
.farm[id]{ scroll-margin-top:104px; }


/* ============================================================================
   17. CONTACT
   ----------------------------------------------------------------------------
   Added with contact.html. Additive only — this overrides no existing
   component and restyles nothing above it.

   .contact-list  the contact details as a definition list on PAPER.
                  .footer-contact could not be reused: its selectors are
                  unscoped and hardcode --on-dark colours for the burgundy
                  footer, so a <dd> would come out white on the parchment.

   .enquiry-form  THE FORM IS COMMENTED OUT IN contact.html AND RENDERS
                  NOWHERE. That is deliberate, and these rules are not dead
                  code — read the instructions above the block in contact.html
                  before touching either.
                  Why it is off: this site is plain HTML on FTP with no
                  backend, and a form with nowhere to post reloads the page,
                  throws the enquiry away, and says nothing. A collector who
                  writes about a horse and hears nothing does not conclude the
                  form broke — they conclude they were ignored. An obvious
                  telephone number and no form beats that outright, which is
                  what SYSTEM.md §7 means by "a silently-failing form is worse
                  than none".
                  These rules exist so that on the day the farm has a real
                  destination (a cPanel handler, a hosted relay, or simply an
                  email address for a mailto: fallback), removing the comment
                  markers is the ONLY step needed.
   ========================================================================== */

/* --- Contact details, on paper --------------------------------------- */
.contact-list dt{
  font-family:var(--sans);
  font-size:var(--t-tiny); font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--brand);                          /* 6.9:1 on --paper */
  margin-top:var(--sp-5);
  padding-bottom:.55rem;
  border-bottom:1px solid var(--line);
}
.contact-list dt:first-child{ margin-top:0; }
.contact-list dd{
  margin:.85rem 0 0;
  font-size:var(--t-small);
  line-height:1.7;
  color:var(--ink-soft);
}
/* The telephone is this page's real call to action — the archive left us no
   email and no form has anywhere to post, so the number is not one contact
   route among several. It is the route. It gets display size. */
.contact-list .big{
  font-family:var(--serif);
  font-size:clamp(1.5rem, 3vw, 1.875rem);
  line-height:1.2;
}
.contact-list .big a{
  color:var(--brand-deep);                     /* 9.7:1 on --paper */
  text-decoration:none;
  border-bottom:1px solid var(--line);
}
.contact-list .big a:hover{ border-bottom-color:var(--brand-deep); }
/* PLACEHOLDER tone. The email address and the map link are genuinely not
   known and have not been invented. Italic serif — the same voice as
   .footer-contact .pending — so an empty field reads as "not yet" rather
   than as a mistake. --muted on --paper = 6.2:1. */
.contact-list .pending{
  font-family:var(--serif); font-style:italic;
  color:var(--muted);
}

/* --- Enquiry form: inert until the farm wires a handler (see above) --- */
.enquiry-form{ max-width:34rem; margin-top:clamp(2.5rem, 5vw, 3.5rem); }
.enquiry-form p{ margin-top:var(--sp-5); }
.enquiry-form label{
  display:block;
  font-family:var(--sans);
  font-size:var(--t-label); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft);                       /* 9.2:1 on --paper */
  margin-bottom:.5rem;
}
/* font-family and font-size are NOT inherited by form controls — they must be
   stated, or the fields render in the UA's own 13px sans and the form reads as
   a stock widget bolted onto a stud farm's brochure. */
.enquiry-form input,
.enquiry-form textarea{
  display:block; width:100%;
  font-family:var(--sans); font-size:var(--t-body);
  line-height:1.6;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:2px;
  padding:.7rem .85rem;
  min-height:44px;                             /* touch target */
  transition:border-color .2s var(--ease);
}
.enquiry-form input:hover,
.enquiry-form textarea:hover{ border-color:var(--muted); }
.enquiry-form input:focus-visible,
.enquiry-form textarea:focus-visible{ border-color:var(--brand); }
.enquiry-form textarea{ min-height:9rem; resize:vertical; }
/* Decorative only: `required` is what carries the requirement to a screen
   reader, so the asterisk is aria-hidden in the markup. */
.enquiry-form .req{ color:var(--brand); }
.enquiry-form .form-foot{ margin-top:var(--sp-6); }


/* ==========================================================================
   16. HORSE DETAIL  —  horses/<collection>/<slug>.html
   ==========================================================================
   Used only by the generated horse pages (build-horses.py). The defining
   constraint: for every horse we currently hold a NAME and nothing else.
   These styles therefore have to make an almost-empty record look deliberate
   rather than broken — the emptiness is the honest state, not a failure.
   ========================================================================== */

/* Visually hidden, still read by screen readers. The pedigree list carries a
   heading for structure; sighted users get it from the <h1> + eyebrow. */
.vh{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

/* The portrait plate. Mirrors .horse-card's white plate + arch so a detail
   page reads as the same object as the card it was reached from. */
.horse-figure{
  position:relative;
  isolation:isolate;
  margin:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  background:var(--white);
  border:1px solid var(--line);
  overflow:hidden;
}
.horse-figure img:not(.mark){
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* Empty state: the ghost mark sits behind, exactly as on .horse-card. */
.horse-figure.is-empty{
  padding:var(--sp-6) var(--sp-5);
}
.horse-figure .mark{
  position:absolute; z-index:-1;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:66%; height:auto;
  opacity:.07;
}
.horse-figure figcaption{
  font-family:var(--sans);
  font-size:var(--t-micro);
  line-height:1.5;
  color:var(--muted);                          /* 6.7:1 on --white */
  text-align:center;
  max-width:26ch;
  text-transform:none; letter-spacing:0;       /* override .pending's caps */
  font-weight:400;
}

/* The record itself. A <dl> of label/value pairs, ruled like a stud book. */
.pedigree{
  margin:0 0 var(--sp-6);
  border-top:1px solid var(--line);
}
.ped-row{
  display:grid;
  grid-template-columns:minmax(7rem,10rem) 1fr;
  gap:var(--sp-4);
  align-items:baseline;
  padding:var(--sp-4) 0;
  border-bottom:1px solid var(--line-soft);
}
.ped-row dt{
  font-family:var(--sans);
  font-size:var(--t-label);
  font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
}
.ped-row dd{
  margin:0;
  font-family:var(--serif);
  font-size:var(--t-h3);
  color:var(--ink);
}
/* An unconfirmed field. Italic serif, not a grey box — it should read as
   "not yet written in the book", not as a broken component. */
.ped-row dd.pending{
  font-style:italic;
  font-size:var(--t-body);
  color:var(--muted);
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:0; text-transform:none;
  border:0; padding:0; margin:0; width:auto;
}

@media (max-width:560px){
  .ped-row{ grid-template-columns:1fr; gap:var(--sp-1); padding:var(--sp-3) 0; }
}