/* ============================================================
   HnR Nothhaft Horse Racing — shared stylesheet
   One source of truth for the whole site.
   ============================================================ */
:root{
  --navy:#0E2A4E; --navy-deep:#091E38; --gold:#F5B417; --rail:#FBFAF7;
  --turf:#2F5233; --ink:#1A1D21; --muted:#6B7480; --line:#DEDAD1;
  --content:1440px;         /* constrained reading column */
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{overflow-x:hidden}
body{
  background:var(--rail); color:var(--ink);
  font-family:'Source Serif 4',Georgia,serif; line-height:1.72; font-size:clamp(18px, 0.6vw + 14px, 22px);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit}

/* ---- full-bleed band + constrained inner column ---- */
.band{width:100%}
.wrap{max-width:var(--content); margin:0 auto; padding-left:34px; padding-right:34px}

.eyebrow{font-family:'Oswald',sans-serif;font-weight:500;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:9px}
.eyebrow::before{content:"";width:8px;height:8px;background:var(--gold);transform:rotate(45deg);flex:none}
.eyebrow.on-navy{color:rgba(255,255,255,.62)}

/* ============ NAV ============ */
.nav{background:var(--navy-deep);border-bottom:2px solid var(--gold);position:sticky;top:0;z-index:40}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-mark{height:42px;width:auto;display:block}
.brand-text{font-family:'Oswald',sans-serif;font-weight:600;font-size:clamp(15px, 1vw, 18px);letter-spacing:.16em;color:var(--gold);white-space:nowrap;text-transform:none}
.brand-text em{font-style:normal;text-transform:uppercase}
.nav ul{list-style:none;display:flex;gap:19px;align-items:center}
.nav a.top{font-family:'Oswald',sans-serif;font-weight:400;font-size:clamp(12px, 0.85vw, 15px);letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.75);text-decoration:none;padding-bottom:3px;border-bottom:2px solid transparent;white-space:nowrap}
.nav a.top.active{color:#fff;border-bottom-color:var(--gold)}
.nav a.top:hover{color:#fff}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:11px;margin:-6px}
.hamburger span{width:24px;height:2px;background:#fff;display:block}

/* mobile slide-in */
.mobile-panel{display:none;position:fixed;top:0;right:0;bottom:0;width:100%;max-width:100vw;background:var(--navy-deep);z-index:50;transform:translateX(100%);transition:transform .3s ease;overflow-y:auto;overflow-x:hidden}
.mobile-panel.open{transform:translateX(0)}
.mp-head{display:flex;align-items:center;justify-content:space-between;padding:20px 26px;border-bottom:2px solid var(--gold)}
.mp-head .brand-text{font-size:14px}
.mp-close{background:none;border:none;color:#fff;font-size:30px;line-height:1;cursor:pointer}
.mp-list{list-style:none;padding:8px 0}
.mp-list a{display:block;font-family:'Oswald',sans-serif;font-size:17px;letter-spacing:.08em;text-transform:uppercase;color:#fff;padding:17px 26px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.1)}
.mp-list a:hover{color:var(--gold)}

/* ============ FOOTER ============ */
.foot{background:var(--navy);color:rgba(255,255,255,.6);border-top:2px solid var(--gold)}
.foot .wrap{padding-top:42px;padding-bottom:34px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:30px}
.foot-silks{width:62px;display:block;margin-bottom:14px}
.foot-name{font-family:'Oswald',sans-serif;font-size:14px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#fff;line-height:1.5}
.foot-loc{font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-top:7px}
.foot-h{font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#fff;padding-bottom:11px;border-bottom:1px solid rgba(245,180,23,.45);margin-bottom:13px}
.foot-col a{display:block;font-family:'Source Serif 4',serif;font-size:16px;color:rgba(255,255,255,.66);text-decoration:none;padding:5px 0}
.foot-col a:hover{color:var(--gold)}
.foot-bar{border-top:1px solid rgba(255,255,255,.13);margin-top:22px;padding-top:16px;display:flex;justify-content:space-between;font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.foot-bar a{color:var(--gold);text-decoration:none}

/* ============ shared type ============ */
h2.sec{font-family:'Oswald',sans-serif;font-weight:600;font-size:clamp(24px, 1.6vw, 32px);text-transform:uppercase;letter-spacing:.02em;color:var(--navy);margin-bottom:6px;padding-bottom:10px;border-bottom:2px solid var(--navy)}
.btn{font-family:'Oswald',sans-serif;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;padding:13px 22px;text-decoration:none;display:inline-block;cursor:pointer;border:none}
.btn-gold{background:var(--gold);color:var(--navy-deep)}
.btn-ghost{border:1px solid rgba(255,255,255,.4);color:#fff;background:none}

/* ============ HERO (home) ============ */
.hero{color:#fff;background-color:var(--navy);
  background-image:linear-gradient(100deg,rgba(255,255,255,.16) 0%,rgba(10,20,40,.28) 14%,rgba(255,255,255,.10) 27%,rgba(10,20,40,.34) 42%,rgba(255,255,255,.13) 56%,rgba(10,20,40,.30) 71%,rgba(255,255,255,.12) 85%,rgba(10,20,40,.26) 100%);
  background-repeat:no-repeat;background-size:100% 100%}
.hero .wrap{display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:44px;padding-top:52px;padding-bottom:56px}
.hero .silks{width:132px;margin-bottom:22px;display:block}
.hero h1{font-family:'Oswald',sans-serif;font-weight:600;font-size:clamp(32px, 2.4vw, 46px);line-height:1.24;letter-spacing:.012em;text-transform:uppercase;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero .lede{font-size:clamp(18px, 0.6vw + 14px, 23px);line-height:1.68;color:rgba(255,255,255,.78);margin-top:18px;max-width:52ch}
.hero-cta{display:flex;gap:12px;margin-top:26px}
.hero-figure img{width:100%;display:block;border:1px solid rgba(255,255,255,.16)}
.hero-figure figcaption{margin-top:11px;font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);display:flex;justify-content:space-between;gap:14px}
.hero-figure figcaption b{color:var(--gold);font-weight:500}

/* ============ page head (interior navy header) ============ */
.pagehead{background:var(--navy);color:#fff}
.pagehead .wrap{padding-top:44px;padding-bottom:38px}
.pagehead h1{font-family:'Oswald',sans-serif;font-weight:600;font-size:clamp(38px, 3vw, 52px);letter-spacing:.01em;text-transform:uppercase;margin-top:10px}
.pagehead p{font-size:clamp(19px, 0.7vw + 14px, 24px);line-height:1.66;color:rgba(255,255,255,.8);max-width:64ch;margin-top:14px}

.section{padding-top:44px;padding-bottom:44px}

/* ============ generic responsive ============ */
@media (max-width:860px){
  .nav ul.desktop{display:none}
  .hamburger{display:flex}
  .mobile-panel{display:block}
  .hero .wrap{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-bar{flex-direction:column;gap:8px}
  .wrap{padding-left:22px;padding-right:22px}
  .pagehead h1{font-size:30px}
}