@font-face{
  font-family:"Highland Gothic";
  src:url("../fonts/HighlandGothicLightFLF.woff") format("woff");
  font-style:normal;
  font-weight:300;
  font-display:swap;
}
@font-face{
  font-family:"Highland Gothic Light";
  src:url("../fonts/HighlandGothicLightFLF.woff") format("woff");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:"Highland Gothic";
  src:url("../fonts/HighlandGothicFLF.woff") format("woff");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:"Highland Gothic";
  src:url("../fonts/HighlandGothicFLF-Bold.woff") format("woff");
  font-style:normal;
  font-weight:700;
  font-display:swap;
}

/* ==========================================================
   TRAIL MONKEY — CENTRAL THEME
   Original content, refined presentation.

   QUICK CHANGES
   Change the colours, type and corner roundness here.
   ========================================================== */
:root{
  --tm-bg:#f5f7f8;
  --tm-sky:#dff3ff;
  --tm-ink:#082331;
  --tm-muted:#52636c;
  --tm-white:#fff;
  --tm-orange:#ff6a00;
  --tm-green:#00a878;
  --tm-pink:#ef4aa8;
  --tm-yellow:#ffd84d;
  --tm-line:rgba(8,35,49,.13);
  --tm-radius:28px;
  /* One light typeface site-wide; size and spacing create hierarchy. */
  --tm-font:"Highland Gothic Light","Avenir Next",Avenir,"Trebuchet MS",Arial,sans-serif;
  --tm-heading-font:"Highland Gothic Light","Avenir Next",Avenir,"Trebuchet MS",Arial,sans-serif;
  /* STYLE RULE: Highland Gothic is always light; size creates hierarchy. */
  --tm-heading-weight:400;
  /* STANDARD HEADING SYSTEM — matches “Upcoming Races” reference. */
  --tm-page-heading-size:clamp(2.35rem,4.6vw,4.8rem);
  --tm-section-heading-size:clamp(2.35rem,4.6vw,4.8rem);
  --tm-card-heading-size:clamp(1.55rem,2.3vw,2.35rem);
  --tm-card-meta-size:clamp(.82rem,1vw,1rem);
  --tm-subheading-size:clamp(1.05rem,1.65vw,1.35rem);
  --tm-heading-line-height:.94;
  --tm-heading-spacing:-.015em;
  --tm-heading-to-subheading:12px;
  --tm-shadow:0 18px 50px rgba(8,35,49,.10);
}

html,body,button,input,select,textarea{background:var(--tm-bg);color:var(--tm-ink);font-family:var(--tm-font)}
body{overflow-x:hidden}
body *{font-weight:400!important}
h1,h2,h3{font-family:var(--tm-heading-font);font-weight:var(--tm-heading-weight)}
.tm-page-heading{font-size:var(--tm-page-heading-size);line-height:var(--tm-heading-line-height);letter-spacing:var(--tm-heading-spacing)}
.tm-section-heading{font-size:var(--tm-section-heading-size);line-height:var(--tm-heading-line-height);letter-spacing:var(--tm-heading-spacing)}
.tm-card-heading{font-size:var(--tm-card-heading-size);line-height:.98;letter-spacing:var(--tm-heading-spacing)}
.tm-card-meta{font-size:var(--tm-card-meta-size);line-height:1.25;letter-spacing:.045em;text-transform:uppercase;color:var(--tm-muted)}
.tm-subheading{margin-top:var(--tm-heading-to-subheading);font-size:var(--tm-subheading-size);line-height:1.35;color:var(--tm-muted)}
.trail-fixed,.trail-dynamic,.trail-word{font-family:var(--tm-heading-font);font-weight:var(--tm-heading-weight)!important}
.container{display:flex;flex-direction:column;max-width:none;padding:0}
.container>*{width:min(1440px,calc(100% - 32px));margin-left:auto;margin-right:auto}

/* HEADER — compact and calm, with Trail Monkey colour retained. */
.topbar{order:-1;position:sticky;top:12px;z-index:50;margin:12px auto 8px;padding:11px 14px 11px 20px;border:1px solid rgba(8,35,49,.08);border-radius:18px;background:rgba(255,255,255,.92);box-shadow:0 8px 30px rgba(8,35,49,.09);backdrop-filter:blur(18px)}
.topbar strong{font-size:1rem;letter-spacing:-.02em;white-space:nowrap}
.nav{gap:3px;justify-content:flex-end}
.nav a{padding:8px 10px;background:transparent;border-radius:10px;color:var(--tm-ink);font-size:.78rem;font-weight:650}
.nav a:hover{background:var(--tm-sky);color:var(--tm-ink)}
.nav-dropdown{position:relative}
.nav-dropdown>a{display:block}
.nav-submenu{position:absolute;top:calc(100% + 10px);right:0;z-index:80;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;width:440px;padding:20px;border:1px solid var(--tm-line);border-radius:18px;background:#fff;box-shadow:var(--tm-shadow);opacity:0;visibility:hidden;transform:translateY(-7px);transition:opacity .18s ease,transform .18s ease,visibility .18s ease}
.nav-submenu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-submenu section{min-width:0}.nav-submenu p{margin:0 0 7px;padding:0 10px;color:var(--tm-green);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}.nav-submenu a{display:block;padding:8px 10px;border-radius:9px;font-size:.78rem;font-weight:400!important}.nav-submenu-wide{grid-column:1/-1;padding-top:14px;border-top:1px solid var(--tm-line)}.nav-submenu-wide>div{display:flex;flex-wrap:wrap;gap:4px}.nav-submenu-wide a{padding:7px 10px;background:var(--tm-sky)}
.nav-dropdown:hover .nav-submenu,.nav-dropdown:focus-within .nav-submenu{opacity:1;visibility:visible;transform:translateY(0)}

/* RACE TICKER — an energetic brand detail, not the main event. */
.ticker{order:-2;width:100%;max-width:none;margin:0;border:0;border-radius:0;background:var(--tm-ink);box-shadow:none}
.ticker-track{display:flex;width:max-content;align-items:center;gap:18px;padding:8px 14px;animation:tm-shared-ticker 55s linear infinite;will-change:transform}
.ticker-content{display:inline-flex;align-items:center;gap:18px;white-space:nowrap}
.ticker-item{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.ticker a{color:#fff;font-size:.78rem}
.ticker .sep{color:var(--tm-orange)}
.ticker-item img{width:27px;height:27px;box-shadow:none}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes tm-shared-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* HERO — one message, one image, two clear actions. */
.hero.hero--bg{min-height:clamp(610px,78vh,850px);border-radius:0;box-shadow:none;background:var(--tm-ink)}
.hero.hero--bg .hero-bg{filter:saturate(1.02) contrast(1.02) brightness(.78);transform:none;object-position:center 22%}
.hero.hero--bg .hero-video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center center;filter:saturate(1.02) contrast(1.02) brightness(.78);z-index:0}
.hero.hero--bg .hero-overlay,.hero.hero--bg::after{z-index:1}
.hero.hero--bg .hero-content{z-index:2}
@media (prefers-reduced-motion:reduce){.hero.hero--bg .hero-video{display:none}}
.hero.hero--bg .hero-overlay{background:linear-gradient(90deg,rgba(4,26,37,.90) 0%,rgba(4,26,37,.63) 42%,rgba(4,26,37,.10) 78%)}
.hero.hero--bg::after{background:linear-gradient(0deg,rgba(4,26,37,.38),transparent 45%)}
.hero.hero--bg .hero-content{max-width:760px;padding:clamp(72px,10vw,145px) clamp(26px,7vw,100px);justify-content:center}
.hero-title{font-size:clamp(4rem,10vw,9.2rem);line-height:.78;letter-spacing:-.035em;font-weight:var(--tm-heading-weight)}
.hero-content>p{max-width:620px;margin:34px 0 26px;font-size:clamp(1.08rem,1.65vw,1.42rem);line-height:1.45;color:rgba(255,255,255,.91)}
.hero .btn{box-shadow:none}

/* BUTTONS — bold enough for an event brand, simple enough to scan. */
.btn{padding:13px 20px;border-radius:8px;background:var(--tm-orange);color:#fff;font-size:.86rem;font-weight:750;transition:transform .2s ease,background .2s ease}
.btn:hover{background:#e65f00;transform:translateY(-2px)}
.btn.secondary{background:var(--tm-green);color:#fff}
.btn.secondary:hover{background:#008f67}

/* SECTIONS — generous pacing inspired by premium editorial homepages. */
.section{padding:clamp(72px,9vw,138px) clamp(16px,4vw,62px);margin-top:0!important;border-top:1px solid var(--tm-line)}
.section h2{display:block;max-width:1050px;margin:0 0 16px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:var(--tm-section-heading-size);line-height:var(--tm-heading-line-height);letter-spacing:var(--tm-heading-spacing);font-weight:var(--tm-heading-weight)}
.section .sub{max-width:760px;margin:0 0 clamp(36px,5vw,70px);font-size:var(--tm-subheading-size);line-height:1.35;color:var(--tm-muted)}
#upcoming{background:var(--tm-white);border-top:0}
#ultras{background:#dcecf2;color:var(--tm-ink)}
#ultras .sub{color:var(--tm-muted)}
#northcoast{background:var(--tm-sky)}
#halves{background:var(--tm-white)}
#tenk{background:#fff4e9}
#series{background:#eaf8f1}
#about{background:#e7f2f6;color:var(--tm-ink)}
#new-runners{background:var(--tm-white)}
#ultras h2,#about h2{color:var(--tm-ink)}

/* CARDS — large photography first, useful information directly below. */
.grid{gap:18px}
.card{border:1px solid var(--tm-line);border-radius:var(--tm-radius);box-shadow:none;background:var(--tm-white);transition:transform .28s ease,box-shadow .28s ease}
.card:hover{transform:translateY(-5px);box-shadow:var(--tm-shadow)}
.card img{aspect-ratio:4/3;object-fit:cover}
.card-body{display:flex;flex-direction:column;gap:12px;padding:clamp(20px,2.6vw,34px)}
.card-body>.row:first-child{display:flex;height:auto;align-items:flex-start;justify-content:space-between;gap:12px}
.card-body>.row:first-child h3{font-size:clamp(1.15rem,1.65vw,1.65rem);line-height:1.08;letter-spacing:0}
.card-body>.meta{min-height:0;margin:0;color:var(--tm-muted);font-size:var(--tm-card-meta-size);font-weight:400;text-transform:uppercase;letter-spacing:.045em}
.card-body>p:not(.meta){font-size:1rem;color:#354c57}
.card-body>.row:last-child{margin-top:10px}
.pill{padding:7px 11px;background:var(--tm-pink);font-size:.72rem;white-space:nowrap}
.pill.alt{background:var(--tm-yellow);color:var(--tm-ink)}

/* Feature races get the visual confidence of a campaign panel. */
.featured-race .center-wrap{max-width:1180px}
.featured-race .card{display:block;min-height:0;border:0}
.featured-race .card img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;object-position:center}
.featured-race .card-body{justify-content:center;padding:clamp(28px,4vw,52px)}
.featured-race .card-body>.row:first-child h3{font-size:clamp(1.65rem,3vw,3.1rem);line-height:1.02}
#ultras .card{background:#fff;color:var(--tm-ink)}

/* About and beginner content remain friendly and practical. */
.about{gap:20px}
#about .card{background:#123443;color:#fff;border-color:rgba(255,255,255,.12)}
#about .card p,#about .meta{color:rgba(255,255,255,.76)}
#about .blurb{display:flex;flex-direction:column;padding:clamp(28px,4vw,56px);background:#fff;color:var(--tm-ink);box-shadow:none}
#about .blurb p{color:var(--tm-ink)}
#about .blurb .meta{color:var(--tm-muted)}
.community-points{display:grid;gap:0;margin:clamp(24px,4vw,50px) 0 30px;border-top:1px solid var(--tm-line)}
.community-points>div{display:grid;grid-template-columns:minmax(150px,.8fr) 1.4fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--tm-line)}
.community-points strong{font-family:var(--tm-heading-font);font-size:clamp(1.25rem,2vw,1.85rem);font-weight:var(--tm-heading-weight);line-height:1}
.community-points span{color:var(--tm-muted);line-height:1.5}
.community-actions{margin-top:auto}
details{border-color:var(--tm-line);background:rgba(255,255,255,.7)}
summary{font-weight:750}

/* Small brand accents make it Trail Monkey rather than a technology clone. */
#upcoming h2::after,#halves h2::after,#tenk h2::after,#series h2::after{content:none}

@media (max-width:950px){
  .topbar{position:relative;top:0}
  .topbar>.row{align-items:flex-start!important}
  .nav{width:100%;overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;padding-bottom:3px}
  .nav a{white-space:nowrap}
  .nav-dropdown{position:static}
  .nav-submenu{display:none}
  .featured-race .card{min-height:0}
  .featured-race .card img{height:auto;aspect-ratio:auto}
}

@media (max-width:700px){
  .container>*{width:calc(100% - 16px)}
  .topbar{margin-top:8px;padding:12px}
  .ticker{border-radius:0}
  .hero.hero--bg{min-height:650px}
  .hero.hero--bg .hero-content{padding:78px 24px 42px;justify-content:flex-end}
  .hero-title{font-size:clamp(4rem,19vw,6rem)}
  .hero-content>.row{align-items:stretch}
  .hero .btn{width:100%;text-align:center}
  .section{padding:72px 18px}
  .section h2{font-size:var(--tm-section-heading-size)}
  .grid{gap:14px}
  .card{border-radius:22px}
  .card:hover{transform:none}
  .community-points>div{grid-template-columns:1fr;gap:7px}
}

@media (prefers-reduced-motion:reduce){
  .card,.btn{transition:none}
  .ticker{overflow-x:auto}
  .ticker-track{animation:none;transform:none}
}
.tm-email-float{position:fixed;right:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);z-index:90;display:flex;align-items:center;gap:10px;padding:7px 14px 7px 7px;border:1px solid rgba(255,255,255,.7);border-radius:999px;background:#fff;color:var(--tm-ink,#082331);box-shadow:0 10px 34px rgba(8,35,49,.24);text-decoration:none!important;transition:transform .2s ease,box-shadow .2s ease}.tm-email-float img{display:block;width:54px;height:54px;border-radius:50%;object-fit:cover}.tm-email-float span{font-family:var(--tm-heading-font,var(--tm-font,sans-serif));font-size:1rem;font-weight:400!important;white-space:nowrap}.tm-email-float:hover{transform:translateY(-3px);box-shadow:0 14px 38px rgba(8,35,49,.3)}.tm-email-float:focus-visible{outline:3px solid var(--tm-orange,#ff6a00);outline-offset:3px}@media(max-width:600px){.tm-email-float{right:12px;bottom:12px;padding:5px}.tm-email-float img{width:50px;height:50px}.tm-email-float span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.nav-races-submenu{grid-template-columns:1fr;width:380px;gap:1px;padding:12px}.nav-races-submenu a{padding:8px 11px}