/* MARETPL 2026-10-09 (Johnny request, preview only): mare detail template.
   Loaded after /css/noble-foal-detail.css (locked, not edited) so the mare page uses the same on-the-ground
   H063 look. Only mare-only pieces live here, all scoped to body.mare-detail. */
@font-face{font-family:'GX Cinzel';src:url(https://fonts.gstatic.com/s/cinzel/v26/8vIJ7ww63mVu7gt79mT7.woff2) format('woff2');font-weight:400 900;font-style:normal;font-display:swap;unicode-range:U+0058;}

/* Title: mare's name in the H063 title face; barn name (when different) as the small kick above it. */
body.mare-detail .head .title .nm .s{font-size:clamp(17px,1.9vw,22px)}
body.mare-detail .head .title .kick{margin-bottom:2px}
/* Sire X Dam line under the name, with the same bold Cinzel X as the foal titles (GROUNDX). */
body.mare-detail .head .byline.mpair{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:0;row-gap:2px;margin-top:8px;line-height:1.3}
body.mare-detail .head .byline.mpair .mp-s,body.mare-detail .head .byline.mpair .mp-d{color:var(--ink);white-space:nowrap}
body.mare-detail .mxm{display:inline-block;font-family:'GX Cinzel','Cinzel',serif;font-weight:900;font-size:20px;line-height:1;color:var(--brass);margin:0 .5em;letter-spacing:0;text-transform:none;vertical-align:-0.06em}
body.mare-detail .mxm--sm{font-size:15px;margin:0 .4em}

/* Her foals / Planned crosses: simple rows (thumb, name, one sub line, arrow). Links only where a page exists. */
body.mare-detail .mfam .mlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
body.mare-detail .mrow{display:flex;align-items:center;gap:12px;min-width:0;padding:8px 12px 8px 8px;border:1px solid var(--rule);border-radius:2px;background:rgba(255,255,255,.18);color:var(--ink);text-decoration:none;transition:background .15s,border-color .15s}
body.mare-detail a.mrow:hover,body.mare-detail a.mrow:focus-visible{background:rgba(255,255,255,.34);border-color:var(--brass)}
body.mare-detail .mthumb{flex:0 0 auto;width:64px;height:48px;overflow:hidden;border-radius:2px;background:rgba(0,0,0,.08)}
body.mare-detail .mthumb img{width:100%;height:100%;object-fit:cover;display:block}
body.mare-detail .mtxt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
body.mare-detail .mnm{font:400 13px/1.25 'Archivo Black',sans-serif;text-transform:uppercase;letter-spacing:.01em;color:var(--ink);overflow-wrap:anywhere}
body.mare-detail .msub{font:400 var(--fs-small,12px)/1.35 'Jost',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
body.mare-detail .mgo{flex:0 0 auto;color:var(--brass);font-size:16px;line-height:1}

@media(max-width:640px){
  body.mare-detail .head .title .nm .s{font-size:17px}
  body.mare-detail .mxm{font-size:17px}
  body.mare-detail .mfam .mlist{grid-template-columns:1fr}
  body.mare-detail .mnm{font-size:12px}
}

/* ===== MAREOCHRE 2026-10-09 (Johnny: "yellowish, more ochre-ish"; preview only) =====
   Mare page only. Swaps the H063 foal browns (inherited from the locked noble-foal-detail.css) for an ochre set.
   Every rule is under body.mare-detail; tokens are set on .sheet / .sec--ctaonly (not on body) so the shared
   nav, footer and FB banner keep their own colors. Foal / stallion / planned / shared CSS untouched.
   Deep ochre #8A5A14  title band, headers, page   (was #3D2314 / #5C3A20)
   Yellow ochre #C8922E frames, rules, section headers, buttons (was #8C6B45 / #A3651C / #B0701E, plus #B06F33 / #E08E2B frames)
   Wheat #E9D49A        panels + facts box          (was #D9C79E / #EDD9AE / #F1E4C6)
   Bone #F6EEDA (kept)  Dark umber #3A2812 body text  Brick #8B2E2E (kept)
   Legibility: yellow ochre is never used for text on light or deep-ochre grounds (fails contrast); small text there is
   umber (light) or bone (deep ochre). Cinzel brass X kept as is. */

/* Page ground */
body.mare-detail{--bg:#8A5A14}

/* Sheet (dark context) tokens */
body.mare-detail .sheet.mare,body.mare-detail .sec--ctaonly{
  --panel:#8A5A14;--panel2:#7E5212;--ink:#F6EEDA;--ink2:#F6EEDA;--stone:#E9D49A;--mut:#E9D49A;
  --rule:#C8922E;--hair:#C8922E;--gold:#C8922E;--goldd:#C8922E;--brass:#E9D49A;--acc:#C8922E;--ongold:#231207}

/* Title band: deep ochre, bone type */
body.mare-detail .sheet.mare .head{background:#8A5A14;border-bottom:2px solid #C8922E;
  --ink:#F6EEDA;--ink2:#F6EEDA;--mut:#E9D49A;--stone:#E9D49A;--rule:#C8922E;--hair:#C8922E;--gold:#C99A3B;--goldd:#C99A3B;--brass:#C99A3B}
body.mare-detail .sheet.mare .head .kick{color:#F6EEDA}
body.mare-detail .sheet.mare .head .mxm{color:#C99A3B} /* Cinzel brass X kept as is */

/* Hero frame + carousel: yellow ochre */
body.mare-detail .sheet.mare .hero{background:#C8922E}
body.mare-detail .sheet.mare .pcarousel .pnav{background:#C8922E;border-color:#3A2812;color:#3A2812}
body.mare-detail .sheet.mare .pcarousel .pnav::after{background:#3A2812}
body.mare-detail .sheet.mare .pcarousel .pcount{color:#F6EEDA}

/* Metrics strip (Foaled / Sex / Color) on deep ochre */
body.mare-detail .sheet.mare .metrics{background:#7E5212}
body.mare-detail .sheet.mare .metrics .rlab{color:#F6EEDA}
body.mare-detail .sheet.mare .metrics .rval:not(.tbd){color:#F6EEDA}

/* Wheat panels: pedigree, write-up, facts, her foals, planned crosses */
body.mare-detail .sheet.mare .sec:has(.tree),body.mare-detail .sheet.mare .sec--listed-ped,
body.mare-detail .sheet.mare .incterms .inc,body.mare-detail .sheet.mare .incterms .terms,
body.mare-detail .sheet.mare .sec:has(.bledcap),body.mare-detail .sheet.mare .sec.mfam{
  background:#E9D49A;position:relative;z-index:0;
  --ink:#3A2812;--ink2:#3A2812;--mut:#3A2812;--stone:#3A2812;--rule:#C8922E;--hair:#C8922E;
  --gold:#C8922E;--goldd:#C8922E;--brass:#8A5A14;--panel:#F6EEDA;--panel2:#E9D49A;--ongold:#231207}
body.mare-detail .sheet.mare .incterms{border-bottom-color:#C8922E}

/* Pedigree cells: bone on wheat, ochre frames */
body.mare-detail .sheet.mare .tree .c{background:#F6EEDA;border-color:rgba(138,90,20,.35)}
body.mare-detail .sheet.mare .tree .c.hl{border-color:#C8922E;box-shadow:inset 3px 0 0 #C8922E}
body.mare-detail .sheet.mare .tree .c.key .nmc{color:#8A5A14}
body.mare-detail .sheet.mare .tree .c.clk:hover{border-color:#C8922E}
body.mare-detail .sheet.mare .tree .c.clk.on{background:rgba(200,146,46,.20);border-color:#C8922E;box-shadow:inset 3px 0 0 #C8922E}
body.mare-detail .sheet.mare .tree .clkdot{color:#8A5A14}
body.mare-detail .sheet.mare .anccard .axlink{color:#8A5A14;border-bottom-color:#8A5A14}
body.mare-detail .sheet.mare .st2tree--record .st2parent{border-left-color:#C8922E;background:#F6EEDA}
body.mare-detail .sheet.mare .st2tree--record .st2gp{background:#F6EEDA}

/* Section headers ("Her foals", "Planned crosses"): yellow ochre header band, umber type */
body.mare-detail .sheet.mare .mfam .rulelab{background:#C8922E;color:#3A2812;font-weight:600;padding:8px 12px;margin:0 0 14px}
body.mare-detail .sheet.mare .mfam .rulelab::after{background:rgba(58,40,18,.35)}
body.mare-detail .sheet.mare .mrow{background:#F6EEDA;border-color:rgba(138,90,20,.35);color:#3A2812}
body.mare-detail .sheet.mare a.mrow:hover,body.mare-detail .sheet.mare a.mrow:focus-visible{background:#FBF5E6;border-color:#C8922E}
body.mare-detail .sheet.mare .mnm{color:#3A2812}
body.mare-detail .sheet.mare .msub{color:#5E4520}
body.mare-detail .sheet.mare .mgo{color:#8A5A14}
body.mare-detail .sheet.mare .mxm--sm{color:#C97A24} /* planned-cross Cinzel X: same brass as before */

/* Inquire buttons: yellow ochre, near-black type; hover wheat */
body.mare-detail .cta .book{background:#C8922E;color:#231207}
body.mare-detail .cta .book:hover,body.mare-detail .cta .book:focus-visible{background:#E9D49A;border-color:#E9D49A;color:#231207}
/* ===== /MAREOCHRE 2026-10-09 ===== */