@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300..700&display=swap");
/*
 * The site header (zip 191), from the preview approved 10 Oct.
 *
 * Loaded after site.css on every page and written only as overrides of the
 * header's own selectors, so the markup in inc/layout.php is unchanged:
 *  - the lockup: option A (zip 192), in the header and the footer; a rule
 *    closing it off from the navigation;
 *  - the navigation: brighter and larger, a short brass rule between items, a
 *    brass underline on the current page and a shorter one on hover;
 *  - a darker bar with a fine brass edge, 76px tall.
 * The footer lockup follows the header's (zip 192).
 */
body .top{background:#071A11;border-bottom:1px solid rgba(212,168,92,.22);box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px rgba(0,0,0,.18)}
body .top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(212,168,92,.55) 20%,rgba(212,168,92,.55) 80%,transparent)}
body .top-in{height:76px;gap:0}

/* the lockup, option A (zip 192): the mark larger and lit from behind, the name
   heavy in Inter Tight, API as a solid brass badge after it. The markup still
   reads API then HorseRacing (ahr_wordmark()); flex order puts the badge after. */
body .top .lock{gap:14px;height:42px}
body .top .lock svg{width:42px;height:42px;flex:0 0 auto;display:block;
  filter:drop-shadow(0 0 10px rgba(212,168,92,.40)) drop-shadow(0 6px 14px rgba(185,138,62,.30))}
body .top .lock .wm,body .ft .lock .wm{display:inline-flex;flex-direction:row;align-items:center;gap:9px;height:auto;line-height:1;font-variation-settings:normal}
body .top .lock .wm .b,body .ft .lock .wm .b{order:0;font-family:"Inter Tight",system-ui,sans-serif;font-weight:700;font-size:22px;letter-spacing:-.03em;color:#fff}
body .top .lock .wm .a,body .ft .lock .wm .a{order:1;margin:0;font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;font-size:10.5px;letter-spacing:.16em;
  color:#1A1309;background:#D4A85C;border-radius:6px;padding:4px 7px 3px;line-height:1}

/* the footer lockup, the same design a size down */
body .ft .lock{gap:12px}
body .ft .lock svg{width:34px;height:34px;filter:drop-shadow(0 0 8px rgba(212,168,92,.35))}
body .ft .lock .wm .b{font-size:19px}
body .ft .lock .wm .a{font-size:9.5px;padding:3px 6px 2px}

/* the navigation */
body .top .nav{gap:0;height:100%;align-items:center;flex:1}
body .top .nav a{position:relative;display:flex;align-items:center;height:100%;padding:0 18px;color:#E3EDE6;font-size:15px;font-weight:500;box-shadow:none;transition:color .2s}
body .top .nav a + a::before{content:"";position:absolute;left:0;top:50%;width:1px;height:14px;margin-top:-7px;background:rgba(212,168,92,.38)}
body .top .nav a::after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:2px;background:#D4A85C;transform:scaleX(0);transition:transform .25s ease}
body .top .nav a:hover{color:#fff}
body .top .nav a:hover::after{transform:scaleX(.6)}
body .top .nav a.on{color:#fff;box-shadow:none}
body .top .nav a.on::after{transform:scaleX(1)}

/* the right-hand side: equal buttons, a ringed avatar */
body .top .right{gap:10px}
body .top .right .b{min-width:120px;height:40px;justify-content:center}
body .top .right .av{box-shadow:0 0 0 3px rgba(212,168,92,.18)}

/* the lockup's rule only where the navigation sits beside it */
@media (min-width:861px){
  body .top .lock{padding-right:26px;margin-right:4px;border-right:1px solid rgba(185,211,195,.12)}
}
@media (max-width:1100px){
  body .top .nav a{padding:0 12px;font-size:14.5px}
  body .top .nav a::after{left:12px;right:12px}
}
@media (max-width:860px){
  body .top-in{height:68px}
  body .top .burger{border-color:rgba(212,168,92,.22)}
}

/* zip 194, phone layout, site-wide (this file loads after site.css on every page).
   - The 12-column grids used plain 1fr tracks, which never shrink below their
     content, so one wide item could stretch a whole row past the screen.
     minmax(0,1fr) lets them fit; nothing changes on a wide screen.
   - The archive chart puts a 1px gap between ~510 weekly bars: 509px of gaps
     alone, wider than a phone, so the bars ran off the right and were cut off
     after 2018. Below 980px the bars sit edge to edge instead. */
.g,.ft .ft-grid,.arch .arch-head{grid-template-columns:repeat(12,minmax(0,1fr))}
@media (max-width:980px){.arch .chart{gap:0}}
@media (max-width:640px){.g,.arch .arch-head{column-gap:12px}}
/* the homepage coverage cards (coverage.css): the same shrinkable tracks, and
   a long country name ("United Arab Emirates" with its "stopped" tag) now
   ellipses inside its card instead of widening the grid past the screen.
   Prefixed with .covd so these win over coverage.css, which loads later. */
.covd .cd-split{grid-template-columns:minmax(0,60fr) minmax(0,40fr)}
.covd .cd-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.covd .cd-card,.covd .cd-detail{min-width:0}
.covd .cd-name{min-width:0;flex:0 1 auto}
.covd .cd-range,.covd .cd-duo-k{overflow:hidden;text-overflow:ellipsis}
@media (max-width:1020px){.covd .cd-split{grid-template-columns:minmax(0,1fr)}.covd .cd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.covd .cd-grid{grid-template-columns:minmax(0,1fr)}}
/* zip 195: the coverage detail panel on small phones. Its three counts
   (races, runners, horses) sat in fixed-minimum columns inside 24px of panel
   padding: at 320px wide the runners figure alone pushed the page about 20px
   past the screen. The columns now shrink, the figures scale with the screen
   and the panel's padding tightens. */
.covd .cd-stats,.covd .cd-era{grid-template-columns:repeat(3,minmax(0,1fr))}
.covd .cd-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
.covd .cd-stats div,.covd .cd-tabs button{min-width:0}
.covd .cd-tabs button small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
@media (max-width:1020px){.covd .cd-era{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){
  .covd .cd-detail{padding:18px 14px}
  .covd .cd-stats{gap:6px}
  .covd .cd-stats div{padding:10px 8px}
  .covd .cd-stats b{font-size:clamp(14px,4.4vw,19px)}
  .covd .cd-f{grid-template-columns:104px minmax(0,1fr) 50px;gap:8px}
}
/* the smallest phones (zip 195): the "start" steps shrink like every other
   grid, and the lockup steps down a size so the menu button keeps its room */
.start .steps{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1080px){.start .steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.start .steps{grid-template-columns:minmax(0,1fr)}}
@media (max-width:360px){
  body .top .lock{gap:10px}
  body .top .lock svg{width:36px;height:36px}
  body .top .lock .wm .b{font-size:19px}
}