/* ==========================================================================
   McLarty MX Park - public stylesheet
   Pro Star CMS Development - Chad Sanders - 256-550-1988
   ========================================================================== */

/* --- Self-hosted display face (condensed, motocross) ---------------------- */
@font-face{font-family:'Oswald';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/Oswald/regular.ttf') format('truetype');}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/Oswald/600.ttf') format('truetype');}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/Oswald/700.ttf') format('truetype');}

/* --- Tokens --------------------------------------------------------------- */
:root{
  --ink:#0b0d0f;            /* page base */
  --ink-2:#14181b;          /* raised panel */
  --ink-3:#1d2226;          /* card */
  --line:#2b3238;
  --paper:#f5f3f0;
  --text:#e8e6e3;
  --text-dim:#a7aeb4;
  --red:#e4131c;            /* logo red */
  --red-hot:#ff2d38;
  --clay:#c9682a;           /* Alabama red clay */
  --clay-lt:#e08a45;
  --sand:#e0b483;
  --go:#37c06a;
  --warn:#f5a524;

  --wrap:1200px;
  --gap:clamp(1rem,3vw,2rem);
  --pad-y:clamp(3.25rem,8vw,6.5rem);
  --r:14px;
  --r-lg:22px;

  --shadow:0 18px 40px -18px rgba(0,0,0,.75);
  --shadow-hi:0 26px 60px -20px rgba(0,0,0,.85);

  --font-display:'Oswald','Arial Narrow',system-ui,sans-serif;
  --font-body:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* --- Reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;
  /* The slide-in menu parks itself off the right edge. "clip" contains it
     without creating a scroll container, so position:sticky still works
     (overflow:hidden would break the sticky header). */
  overflow-x:clip;
}
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:var(--font-body);font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.65;overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--clay-lt);text-decoration:none}
a:hover{color:var(--sand)}
button{font:inherit}
h1,h2,h3,h4,h5{
  font-family:var(--font-display);font-weight:700;line-height:1.03;
  letter-spacing:.005em;margin:0 0 .5em;text-transform:uppercase;
}
h1{font-size:clamp(2.4rem,7vw,5rem)}
h2{font-size:clamp(1.9rem,4.6vw,3.4rem)}
h3{font-size:clamp(1.3rem,2.4vw,1.85rem)}
h4{font-size:clamp(1.05rem,1.6vw,1.3rem)}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em;padding-left:1.25em}
hr{border:0;border-top:1px solid var(--line);margin:2rem 0}

.wrap{width:min(100% - 2.2rem,var(--wrap));margin-inline:auto}
.wrap--narrow{width:min(100% - 2.2rem,860px);margin-inline:auto}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--red);
  color:#fff;padding:.7rem 1.1rem;border-radius:0 0 8px 0;font-weight:700}
.skip-link:focus{left:0}

:focus-visible{outline:3px solid var(--clay-lt);outline-offset:2px;border-radius:4px}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  --btn-bg:var(--red);--btn-fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.055em;font-size:1.02rem;line-height:1;
  padding:1.02rem 1.85rem;min-height:52px;border:0;border-radius:8px;cursor:pointer;
  background:var(--btn-bg);color:var(--btn-fg);
  transition:transform .16s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
  box-shadow:0 8px 22px -10px rgba(228,19,28,.85);
  text-align:center;
}
.btn:hover{transform:translateY(-2px);color:var(--btn-fg);box-shadow:0 14px 30px -12px rgba(228,19,28,.95)}
.btn:active{transform:translateY(0)}
.btn--primary{--btn-bg:var(--red)}
.btn--clay{--btn-bg:var(--clay);box-shadow:0 8px 22px -10px rgba(201,104,42,.85)}
.btn--clay:hover{box-shadow:0 14px 30px -12px rgba(201,104,42,.95)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--text);
  border:2px solid rgba(255,255,255,.28);box-shadow:none}
.btn--ghost:hover{border-color:var(--clay-lt);background:rgba(255,255,255,.06);box-shadow:none}
.btn--light{--btn-bg:var(--paper);--btn-fg:#16191c;box-shadow:0 8px 22px -12px rgba(0,0,0,.6)}
.btn--sm{padding:.66rem 1.05rem;min-height:42px;font-size:.9rem}
.btn--lg{padding:1.2rem 2.3rem;min-height:60px;font-size:1.15rem}
.btn--block{display:flex;width:100%}
.btnrow{display:flex;flex-wrap:wrap;gap:.85rem}

/* ==========================================================================
   Alert bar (cancelled / postponed / weather)
   ========================================================================== */
.alertbar{background:var(--red);color:#fff;font-weight:600;position:relative;z-index:60}
.alertbar--is-postponed{background:#b7791f}
.alertbar--is-weather{background:#1f6fb2}
.alertbar__inner{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;
  padding:.6rem 0;font-size:.95rem}
.alertbar__badge{font-family:var(--font-display);font-weight:700;letter-spacing:.09em;
  background:rgba(0,0,0,.32);padding:.24rem .6rem;border-radius:5px;font-size:.82rem;
  white-space:nowrap}
.alertbar__text{flex:1 1 16rem}
.alertbar__link{color:#fff;text-decoration:underline;white-space:nowrap;font-weight:700}
.alertbar__link:hover{color:#fff;opacity:.85}

/* ==========================================================================
   Header / navigation
   ========================================================================== */
.site-head{
  position:sticky;top:0;z-index:80;
  background:rgba(11,13,15,.82);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background .25s var(--ease),box-shadow .25s var(--ease);
}
.site-head.is-stuck{background:rgba(11,13,15,.97);box-shadow:0 10px 30px -18px #000}
.site-head__inner{display:flex;align-items:center;gap:1.25rem;
  min-height:72px;padding:.5rem 0}
.brand{flex:0 0 auto;line-height:0}
.brand img{width:clamp(140px,17vw,200px);height:auto;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}

.mainnav{margin-left:auto}
.mainnav__list{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.mainnav__list a{
  display:block;padding:.62rem .66rem;border-radius:7px;
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;font-size:.93rem;color:var(--text);white-space:nowrap;
  position:relative;transition:color .18s var(--ease),background .18s var(--ease);
}
.mainnav__list a::after{
  content:'';position:absolute;left:.66rem;right:.66rem;bottom:.34rem;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .22s var(--ease);
}
.mainnav__list a:hover{color:#fff;background:rgba(255,255,255,.05)}
.mainnav__list a:hover::after,
.mainnav__list a.is-active::after{transform:scaleX(1)}
.mainnav__list a.is-active{color:#fff}

.site-head__cta{display:flex;align-items:center;gap:.6rem;flex:0 0 auto}
.phone-btn svg{flex:0 0 auto}

.navtoggle{display:none;width:46px;height:46px;border:1px solid rgba(255,255,255,.22);
  background:transparent;border-radius:9px;cursor:pointer;padding:0;
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
.navtoggle span{display:block;width:22px;height:2px;background:var(--text);
  transition:transform .25s var(--ease),opacity .2s var(--ease)}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1150px){
  /* backdrop-filter makes the header a containing block for position:fixed,
     which would trap the slide-in menu inside the header strip. Drop the glass
     on phones and tablets (it is expensive there anyway) and paint the bar solid. */
  .site-head{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(11,13,15,.97)}

  .mainnav{
    position:fixed;top:0;bottom:0;right:0;width:min(88vw,340px);
    background:#101417;border-left:1px solid var(--line);
    transform:translateX(100%);transition:transform .3s var(--ease);
    padding:5.5rem 1.3rem 6.5rem;overflow-y:auto;z-index:90;
    box-shadow:-24px 0 60px -30px #000;
  }
  .mainnav.is-open{transform:none}
  .mainnav__list{flex-direction:column;align-items:stretch;gap:.2rem}
  .mainnav__list a{padding:.95rem .9rem;font-size:1.15rem;border-radius:9px}
  .mainnav__list a::after{display:none}
  .mainnav__list a.is-active{background:rgba(228,19,28,.16);color:#fff}
  .navtoggle{display:flex;position:relative;z-index:95}
  /* While the drawer is open the close button rides at the top of the drawer,
     not wherever the header happened to be. */
  body.nav-open .navtoggle{
    position:fixed;top:.85rem;right:1rem;z-index:95;
    background:rgba(0,0,0,.5);border-color:rgba(255,255,255,.35);
  }
  .phone-btn span{display:none}
  .phone-btn{padding:.66rem .8rem}
  body.nav-open{overflow:hidden}
  .navscrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:85;
    opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
  .navscrim.is-on{opacity:1;pointer-events:auto}
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;min-height:clamp(520px,82vh,820px);
  display:flex;align-items:center;overflow:hidden;
  background:#08090a;isolation:isolate;
}
.hero__media{position:absolute;inset:-6% 0 -6%;z-index:-2;will-change:transform}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:72% 48%}
.hero::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(8,9,10,.72) 0%,rgba(8,9,10,.26) 30%,rgba(8,9,10,.5) 62%,rgba(8,9,10,.96) 100%),
    linear-gradient(95deg,rgba(8,9,10,.92) 0%,rgba(8,9,10,.74) 34%,rgba(8,9,10,.18) 62%,transparent 80%);
}
.hero__inner{position:relative;padding:clamp(3.5rem,8vh,6rem) 0 clamp(3rem,7vh,5rem)}
.hero__kicker{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.22em;font-size:.86rem;color:var(--sand);
  background:rgba(0,0,0,.42);border:1px solid rgba(224,180,131,.34);
  padding:.42rem .95rem;border-radius:100px;margin-bottom:1.3rem;
}
.hero__kicker::before{content:'';width:8px;height:8px;border-radius:50%;
  background:var(--red);box-shadow:0 0 0 0 rgba(228,19,28,.7);animation:pulse 2.4s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(228,19,28,.65)}
  70%{box-shadow:0 0 0 12px rgba(228,19,28,0)}
  100%{box-shadow:0 0 0 0 rgba(228,19,28,0)}
}
.hero h1{
  margin:0 0 .35em;color:#fff;max-width:min(100%,17ch);
  text-shadow:0 6px 34px rgba(0,0,0,.8);
  font-size:clamp(2.5rem,6.6vw,5.1rem);letter-spacing:-.012em;
}
.hero h1 em{font-style:normal;color:var(--red);display:block}
.hero__sub{
  font-size:clamp(1.06rem,1.9vw,1.4rem);max-width:44ch;color:#e9e6e2;
  text-shadow:0 2px 14px rgba(0,0,0,.8);margin-bottom:2rem;
}
.hero__facts{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin:2.2rem 0 0;
  padding:0;list-style:none;font-size:.94rem;color:#cfd4d8}
.hero__facts li{display:flex;align-items:center;gap:.5rem}
.hero__facts svg{color:var(--clay-lt);flex:0 0 auto}

/* Angled section break used under the hero and between dark bands */
.slash{position:relative}
.slash::before{
  content:'';position:absolute;left:0;right:0;top:-1px;height:clamp(38px,5vw,74px);
  background:inherit;clip-path:polygon(0 100%,100% 0,100% 100%);
  transform:translateY(-99%);pointer-events:none;
}

/* ==========================================================================
   Sections
   ========================================================================== */
.sec{padding:var(--pad-y) 0;position:relative}
.sec--dark{background:var(--ink)}
.sec--raise{background:var(--ink-2)}
.sec--clay{
  background:linear-gradient(150deg,#7d3d16 0%,#a8551f 42%,#c9682a 100%);
  color:#fff;
}
.sec--clay a{color:#ffe6cd}
.sec--paper{background:var(--paper);color:#171a1d}
.sec--paper h1,.sec--paper h2,.sec--paper h3,.sec--paper h4{color:#101315}
.sec--paper a{color:#a8551f}
.sec--paper .sec__lead{color:#4b5359}

.sec__head{max-width:62ch;margin-bottom:clamp(2rem,4vw,3.2rem)}
.sec__head--center{margin-inline:auto;text-align:center}
.kicker{
  display:block;font-family:var(--font-display);font-weight:600;
  text-transform:uppercase;letter-spacing:.24em;font-size:.82rem;
  color:var(--clay-lt);margin-bottom:.75rem;
}
.sec--paper .kicker{color:#b0561d}
.sec__lead{font-size:clamp(1.02rem,1.5vw,1.18rem);color:var(--text-dim);margin-bottom:0}

.rule{width:64px;height:4px;background:var(--red);border-radius:3px;margin:0 0 1.4rem}
.sec__head--center .rule{margin-inline:auto}

/* ==========================================================================
   Cards / grids
   ========================================================================== */
.grid{display:grid;gap:clamp(1rem,2.2vw,1.7rem)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}

.fx-card{
  background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.4rem,2.4vw,2rem);position:relative;overflow:hidden;
  transition:transform .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease);
}
.fx-card::before{
  content:'';position:absolute;left:0;top:0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--red),var(--clay));
  transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease);
}
.fx-card:hover{transform:translateY(-5px);border-color:#3a444c;box-shadow:var(--shadow-hi)}
.fx-card:hover::before{transform:scaleX(1)}
.fx-card__num{
  font-family:var(--font-display);font-size:2.6rem;line-height:1;color:rgba(255,255,255,.1);
  font-weight:700;margin-bottom:.4rem;
}
.fx-card__title{font-size:1.22rem;margin-bottom:.55rem;color:#fff}
.fx-card__text{color:var(--text-dim);margin:0;font-size:.985rem}
.sec--paper .fx-card{background:#fff;border-color:#e2ddd6;box-shadow:0 8px 24px -18px rgba(0,0,0,.35)}
.sec--paper .fx-card__title{color:#14171a}
.sec--paper .fx-card__text{color:#525a61}
.sec--paper .fx-card__num{color:rgba(0,0,0,.09)}

/* Split media + text */
.split{display:grid;gap:clamp(1.6rem,4vw,3.4rem);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.split__media{border-radius:var(--r-lg);overflow:hidden;position:relative;
  box-shadow:var(--shadow)}
.split__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.split--flip .split__media{order:2}
@media (max-width:760px){.split--flip .split__media{order:0}}

/* ==========================================================================
   Event / schedule cards
   ========================================================================== */
.ev-list{display:grid;gap:1.05rem;list-style:none;margin:0;padding:0}
.ev-card{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,2.4vw,1.7rem);
  background:var(--ink-3);border:1px solid var(--line);border-left:5px solid var(--red);
  border-radius:var(--r);padding:clamp(1.1rem,2.2vw,1.6rem);
  transition:transform .24s var(--ease),box-shadow .24s var(--ease),border-color .24s var(--ease);
  position:relative;
}
.ev-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.ev-card.is-cancelled{border-left-color:var(--red-hot);opacity:.92}
.ev-card.is-postponed{border-left-color:var(--warn)}
.ev-card.is-weather{border-left-color:#3b8fd4}
.ev-card.is-past{opacity:.6;border-left-color:#4b545b}

.ev-date{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:88px;padding:.75rem .5rem;border-radius:10px;
  background:linear-gradient(160deg,#22282d,#171b1f);border:1px solid var(--line);
  text-align:center;
}
.ev-date__month{font-family:var(--font-display);font-size:.86rem;font-weight:700;
  letter-spacing:.15em;color:var(--clay-lt)}
.ev-date__day{font-family:var(--font-display);font-size:2.5rem;font-weight:700;
  line-height:1;color:#fff}
.ev-date__dow{font-size:.74rem;letter-spacing:.13em;color:var(--text-dim);margin-top:.15rem}

.ev-card__body{min-width:0}
.ev-card__title{font-size:clamp(1.2rem,2.2vw,1.6rem);margin:0 0 .3rem;color:#fff}
.ev-card__meta{color:var(--text-dim);font-size:.95rem;margin:0 0 .7rem;
  display:flex;flex-wrap:wrap;gap:.3rem 1.1rem}
.ev-card__meta span{display:inline-flex;align-items:center;gap:.35rem}
.ev-card__text{margin:0 0 .8rem;color:var(--text);font-size:.99rem}
.ev-card__badge{
  display:inline-block;font-family:var(--font-display);font-weight:700;
  letter-spacing:.11em;font-size:.78rem;padding:.28rem .68rem;border-radius:5px;
  background:var(--red);color:#fff;margin-bottom:.55rem;
}
.is-postponed .ev-card__badge{background:var(--warn);color:#241a06}
.is-weather .ev-card__badge{background:#3b8fd4}
.ev-card__notice{color:#ffd7d9;font-weight:600;margin:0 0 .7rem}
.is-postponed .ev-card__notice{color:#ffe4b5}
.is-weather .ev-card__notice{color:#cfe6ff}
.ev-card__facts{list-style:none;margin:.2rem 0 .9rem;padding:0;display:grid;gap:.4rem;
  font-size:.95rem}
.ev-card__facts strong{font-family:var(--font-display);font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;font-size:.84rem;color:var(--clay-lt);
  display:block}
.ev-card__img{border-radius:10px;overflow:hidden;margin:.2rem 0 .9rem;max-width:420px}
.ev-card__img img{width:100%;height:auto}
.ev-countdown{
  position:absolute;top:1rem;right:1rem;font-family:var(--font-display);
  font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--text-dim);
  background:rgba(0,0,0,.35);padding:.22rem .6rem;border-radius:100px;
}
@media (max-width:560px){
  .ev-card{grid-template-columns:1fr}
  .ev-date{flex-direction:row;gap:.6rem;min-width:0;justify-content:flex-start;
    padding:.5rem .85rem}
  .ev-date__day{font-size:1.7rem}
  .ev-date__month,.ev-date__dow{font-size:.8rem;margin:0}
  .ev-countdown{position:static;display:inline-block;margin-bottom:.5rem}
}

/* Homepage spotlight */
.next-up{
  display:grid;gap:clamp(1.2rem,3vw,2.6rem);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  background:linear-gradient(135deg,#1a1f23 0%,#12161a 60%);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,3.4vw,2.8rem);box-shadow:var(--shadow);
  position:relative;overflow:hidden;
}
.next-up::before{
  content:'';position:absolute;right:-14%;top:-40%;width:52%;height:180%;
  background:radial-gradient(closest-side,rgba(228,19,28,.24),transparent 72%);
  pointer-events:none;
}
.next-up__label{
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.22em;
  font-size:.8rem;color:var(--clay-lt);margin-bottom:.6rem;display:block;
}
.next-up__title{font-size:clamp(1.7rem,3.6vw,2.6rem);margin:0 0 .35rem;color:#fff}
.next-up__meta{color:var(--text-dim);margin:0 0 1.3rem;font-size:1.02rem}
.next-up__big{
  font-family:var(--font-display);font-weight:700;line-height:.92;
  font-size:clamp(3.4rem,10vw,6rem);color:#fff;text-align:center;
}
.next-up__big small{display:block;font-size:.24em;letter-spacing:.2em;
  color:var(--clay-lt);margin-top:.5rem}

/* ==========================================================================
   Prices
   ========================================================================== */
.price-card{
  background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2.2rem);text-align:center;position:relative;overflow:hidden;
  transition:transform .26s var(--ease),box-shadow .26s var(--ease),border-color .26s var(--ease);
}
.price-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hi);border-color:#3d474f}
.price-card--feature{border-color:var(--red);background:linear-gradient(165deg,#221619,#15181b)}
.price-card--feature::after{
  content:'Most popular';position:absolute;top:14px;right:-34px;transform:rotate(45deg);
  background:var(--red);color:#fff;font-family:var(--font-display);font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;padding:.3rem 2.6rem;
}
.price-card__name{font-size:1.28rem;margin:0 0 .3rem;color:#fff}
.price-card__amount{
  font-family:var(--font-display);font-weight:700;line-height:1;
  font-size:clamp(2.8rem,6vw,3.9rem);color:var(--red);margin:.4rem 0 .1rem;
}
.price-card__amount sup{font-size:.42em;top:-.7em;position:relative;color:var(--clay-lt)}
.price-card__unit{font-size:.9rem;color:var(--text-dim);letter-spacing:.08em;
  text-transform:uppercase;font-family:var(--font-display)}
.price-card__note{color:var(--text-dim);font-size:.95rem;margin:1rem 0 0}
.price-card__list{list-style:none;padding:0;margin:1.2rem 0 0;text-align:left;
  display:grid;gap:.5rem;font-size:.96rem}
.price-card__list li{display:flex;gap:.55rem;align-items:flex-start;color:var(--text-dim)}
.price-card__list li::before{content:'';flex:0 0 auto;width:7px;height:7px;
  border-radius:50%;background:var(--clay);margin-top:.55rem}

/* ==========================================================================
   Race classes
   ========================================================================== */
.cls-table{display:grid;gap:.4rem}
.cls-row{
  display:grid;grid-template-columns:minmax(150px,.4fr) 1fr;gap:.4rem 1.2rem;
  padding:.85rem 1.1rem;border-radius:10px;background:var(--ink-3);
  border:1px solid transparent;transition:border-color .2s var(--ease),background .2s var(--ease);
}
.cls-row:hover{border-color:var(--line);background:#20262b}
.cls-row__name{font-family:var(--font-display);font-weight:600;color:#fff;
  letter-spacing:.02em;font-size:1.02rem}
.cls-row__spec{color:var(--text-dim);font-size:.94rem;margin:0}
@media (max-width:640px){.cls-row{grid-template-columns:1fr;gap:.15rem}}

/* ==========================================================================
   Gallery
   ========================================================================== */
.gal{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.gal__item{
  position:relative;border-radius:var(--r);overflow:hidden;background:#15181b;
  aspect-ratio:4/3;display:block;
}
.gal__item img{width:100%;height:100%;object-fit:cover;
  transition:transform .55s var(--ease),filter .4s var(--ease)}
.gal__item:hover img{transform:scale(1.06);filter:saturate(1.12)}
.gal__item--wide{grid-column:span 2}
@media (max-width:640px){.gal__item--wide{grid-column:span 1}}
.gal-cap{
  position:absolute;inset:auto 0 0 0;padding:2.4rem .95rem .85rem;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.86));
  transform:translateY(6px);opacity:.92;transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.gal__item:hover .gal-cap{transform:none;opacity:1}
.gal-cap__title{font-family:var(--font-display);font-weight:600;color:#fff;
  text-transform:uppercase;letter-spacing:.06em;font-size:1rem;margin:0}

/* ==========================================================================
   Reviews
   ========================================================================== */
.rev-card{
  background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.3rem,2.4vw,1.9rem);position:relative;
  transition:transform .26s var(--ease),box-shadow .26s var(--ease);
}
.rev-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.rev-card__stars{color:var(--warn);letter-spacing:.14em;font-size:1.05rem;margin-bottom:.6rem}
.rev-card__text{margin:0 0 1rem;color:var(--text);font-size:1rem}
.rev-card__name{font-family:var(--font-display);font-weight:600;color:var(--clay-lt);
  text-transform:uppercase;letter-spacing:.07em;font-size:.9rem;margin:0}
.sec--paper .rev-card{background:#fff;border-color:#e3ded7}
.sec--paper .rev-card__text{color:#3c4349}
.sec--paper .rev-card__name{color:#a8551f}

/* ==========================================================================
   Lodging
   ========================================================================== */
.lodge-card{
  background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;transition:transform .26s var(--ease),box-shadow .26s var(--ease);
  display:flex;flex-direction:column;
}
.lodge-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hi)}
.lodge-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.lodge-card__body{padding:1.2rem 1.3rem 1.5rem;flex:1;display:flex;flex-direction:column}
.lodge-card__name{font-size:1.15rem;margin:0 0 .4rem;color:#fff}
.lodge-card__text{color:var(--text-dim);font-size:.95rem;margin:0 0 1rem;flex:1}

/* ==========================================================================
   Stats strip
   ========================================================================== */
.stats{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  text-align:center}
.stat__n{font-family:var(--font-display);font-weight:700;line-height:1;
  font-size:clamp(2.3rem,5.2vw,3.4rem);color:#fff}
.stat__l{font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.72);font-family:var(--font-display)}

/* ==========================================================================
   Forms
   ========================================================================== */
.form{display:grid;gap:1.1rem}
.form__row{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.field{display:grid;gap:.4rem}
.field > label{font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.07em;font-size:.86rem;color:var(--clay-lt)}
.field .req{color:var(--red)}
.field input,.field select,.field textarea{
  width:100%;padding:.9rem 1rem;border-radius:10px;font:inherit;
  background:#12161a;border:1px solid var(--line);color:var(--text);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
  min-height:52px;
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--clay);box-shadow:0 0 0 3px rgba(201,104,42,.22)}
.field__hint{font-size:.86rem;color:var(--text-dim)}
.field--error input,.field--error textarea,.field--error select{border-color:var(--red-hot)}
.field__err{color:#ff8f96;font-size:.88rem}

.mathbox{
  background:#12161a;border:1px dashed var(--clay);border-radius:12px;
  padding:1.1rem 1.2rem;display:grid;gap:.7rem;
}
.mathbox__q{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.mathbox__sum{font-family:var(--font-display);font-weight:700;font-size:1.5rem;
  color:#fff;letter-spacing:.03em}
.mathbox input{max-width:160px}

.notice{padding:1rem 1.2rem;border-radius:12px;margin:0 0 1.4rem;border:1px solid}
.notice--ok{background:rgba(55,192,106,.12);border-color:rgba(55,192,106,.45);color:#b8f0cd}
.notice--bad{background:rgba(228,19,28,.12);border-color:rgba(228,19,28,.45);color:#ffc4c8}
.notice p:last-child{margin:0}
.notice__h{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;
  margin:0 0 .35rem;font-size:1.05rem}

/* ==========================================================================
   Map / directions
   ========================================================================== */
.mapwrap{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow);background:#12161a}
.mapwrap iframe{display:block;width:100%;height:clamp(300px,45vh,460px);border:0}

.dirsteps{counter-reset:step;list-style:none;padding:0;margin:0;display:grid;gap:1rem}
.dirsteps li{
  counter-increment:step;position:relative;padding:1.1rem 1.2rem 1.1rem 4rem;
  background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r);
}
.dirsteps li::before{
  content:counter(step);position:absolute;left:1.1rem;top:1rem;
  width:36px;height:36px;border-radius:50%;background:var(--red);color:#fff;
  font-family:var(--font-display);font-weight:700;display:grid;place-items:center;
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.crumbs{padding:1rem 0 0}
.crumbs__list{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0;
  font-size:.86rem;color:var(--text-dim)}
.crumbs__list li+li::before{content:'/';margin-right:.4rem;color:#4a5259}
.crumbs__list a{color:var(--text-dim)}
.crumbs__list a:hover{color:var(--clay-lt)}
.sec--paper .crumbs__list{color:#6b7379}

/* ==========================================================================
   Page header (interior pages)
   ========================================================================== */
.pagehead{
  position:relative;padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.4rem,5vw,4rem);
  background:#0e1114;overflow:hidden;isolation:isolate;
}
.pagehead__bg{position:absolute;inset:0;z-index:-2}
.pagehead__bg img{width:100%;height:100%;object-fit:cover;opacity:.34}
.pagehead::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(11,13,15,.72),rgba(11,13,15,.95));
}
.pagehead h1{margin:0 0 .3em;color:#fff;max-width:20ch}
.pagehead__lead{font-size:clamp(1.02rem,1.7vw,1.24rem);color:#cbd1d6;max-width:60ch;margin:0}

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{position:relative;overflow:hidden;background:#141719;isolation:isolate}
.cta-band__bg{position:absolute;inset:0;z-index:-2}
.cta-band__bg img{width:100%;height:100%;object-fit:cover}
.cta-band::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(11,13,15,.94) 18%,rgba(11,13,15,.55) 62%,rgba(160,72,24,.55) 100%)}
.cta-band__inner{padding:clamp(3rem,7vw,5.5rem) 0;max-width:56ch}
.cta-band h2{color:#fff;margin-bottom:.4em}
.cta-band p{color:#d7dbdf;font-size:1.08rem;margin-bottom:1.8rem}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-foot{background:#080a0b;border-top:1px solid var(--line);padding-top:clamp(2.6rem,6vw,4.4rem)}
.site-foot__grid{display:grid;gap:clamp(1.6rem,3.4vw,2.6rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  padding-bottom:clamp(2rem,4vw,3rem)}
.site-foot__brand img{width:200px;margin-bottom:1rem}
.site-foot__blurb{color:var(--text-dim);font-size:.96rem}
.site-foot__h{font-size:1.02rem;color:#fff;letter-spacing:.09em;margin-bottom:.9rem}
.site-foot__addr{font-style:normal;margin-bottom:.9rem;line-height:1.6}
.site-foot__addr a{color:var(--text)}
.site-foot__addr a:hover{color:var(--clay-lt)}
.site-foot__phone{font-family:var(--font-display);font-size:1.35rem;font-weight:700;
  color:#fff;letter-spacing:.02em}
.site-foot__phone:hover{color:var(--clay-lt)}
.site-foot__small{font-size:.84rem;color:var(--text-dim)}
.site-foot__hours{color:var(--text-dim);font-size:.95rem}
.site-foot__links{list-style:none;padding:0;margin:0;display:grid;gap:.42rem;font-size:.96rem}
.site-foot__links a{color:var(--text-dim)}
.site-foot__links a:hover{color:var(--clay-lt)}
.social{display:inline-flex;align-items:center;gap:.5rem;color:var(--text-dim);
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;font-size:.9rem}
.social:hover{color:#fff}
.site-foot__bar{border-top:1px solid var(--line);padding:1.1rem 0;
  margin-top:1rem;font-size:.86rem;color:var(--text-dim)}
.site-foot__barin{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;justify-content:space-between}
.site-foot__bar p{margin:0}

/* ==========================================================================
   Mobile action bar
   ========================================================================== */
.actionbar{display:none}
@media (max-width:760px){
  .actionbar{
    display:grid;grid-template-columns:repeat(4,1fr);position:fixed;
    left:0;right:0;bottom:0;z-index:70;
    background:rgba(13,16,18,.97);backdrop-filter:blur(12px);
    border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .actionbar a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
    padding:.6rem .3rem;min-height:60px;color:var(--text-dim);
    font-family:var(--font-display);font-size:.72rem;letter-spacing:.08em;
    text-transform:uppercase;
  }
  .actionbar a:active{background:rgba(255,255,255,.06);color:#fff}
  .actionbar svg{color:var(--clay-lt)}
  body{padding-bottom:64px}
}

/* ==========================================================================
   Popup
   ========================================================================== */
.mmx-popup{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:1.2rem}
.mmx-popup[hidden]{display:none}
.mmx-popup__backdrop{position:absolute;inset:0;background:rgba(4,6,7,.82);
  backdrop-filter:blur(4px);animation:fadeIn .25s var(--ease)}
.mmx-popup__panel{
  position:relative;max-width:min(94vw,560px);max-height:88vh;
  /* Wide enough for a headline even when the picture above it is narrow. */
  min-width:min(92vw,380px);
  /* A column so the picture can give up space to the headline and button
     instead of the whole panel growing a scrollbar. */
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 34px 90px -30px #000;animation:popIn .34s var(--ease);
}
.mmx-popup--alert{border-top:5px solid var(--red)}
.mmx-popup--announcement{border-top:5px solid var(--clay)}

/* A flyer must never be blown up past its own size, and the whole popup has to
   fit the screen without scrolling. The panel shrinks to the picture rather
   than the picture stretching to the panel. */
.mmx-popup__media{
  display:flex;justify-content:center;align-items:flex-start;
  min-height:0;flex:0 1 auto;
}
/* Capped in viewport units, which resolve reliably inside a flex column -
   a percentage max-height would not. Never upscaled past its own size. */
.mmx-popup__media img{
  display:block;width:auto;height:auto;
  max-width:100%;
  max-height:58vh;                 /* room for a headline, text and a button */
  object-fit:contain;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}
/* Nothing but a picture: let it use nearly the whole screen. */
.mmx-popup__panel--tight .mmx-popup__media img{max-height:84vh;border-radius:var(--r-lg)}
.mmx-popup--image .mmx-popup__media img{border-radius:var(--r-lg)}

/* A picture-only popup wraps tight to the image instead of padding it out. */
.mmx-popup__panel--tight{max-width:min(94vw,560px);min-width:0;
  width:-moz-fit-content;width:fit-content}
.mmx-popup__body{padding:clamp(1.1rem,3vw,2rem);flex:0 0 auto;overflow-y:auto}
.mmx-popup__title{font-size:clamp(1.5rem,4vw,2.1rem);color:#fff;margin:0 0 .5rem}
.mmx-popup__text{color:var(--text-dim);margin:0 0 1.4rem}
.mmx-popup__close{
  position:absolute;top:.6rem;right:.6rem;width:42px;height:42px;border-radius:50%;
  border:0;background:rgba(0,0,0,.62);color:#fff;cursor:pointer;
  display:grid;place-items:center;transition:background .2s var(--ease),transform .2s var(--ease);
  z-index:2;
}
.mmx-popup__close:hover{background:var(--red);transform:rotate(90deg)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:translateY(22px) scale(.96)}to{opacity:1;transform:none}}

/* ==========================================================================
   Scroll reveal + motion
   ========================================================================== */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}
.reveal[data-d="4"]{transition-delay:.36s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .hero__media{transform:none!important}
}

/* ==========================================================================
   Utilities
   ========================================================================== */
.center{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-2{margin-top:1.4rem}.mt-3{margin-top:2.2rem}
.lead{font-size:clamp(1.05rem,1.7vw,1.25rem);color:var(--text-dim)}
.sec--paper .lead{color:#4d555b}
.tag{display:inline-block;font-family:var(--font-display);font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;padding:.26rem .66rem;border-radius:5px;
  background:rgba(201,104,42,.18);color:var(--clay-lt);border:1px solid rgba(201,104,42,.32)}
.muted{color:var(--text-dim)}
.nowrap{white-space:nowrap}
.panel{background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.3rem,3vw,2.2rem)}
.sec--paper .panel{background:#fff;border-color:#e3ded7}
.empty{text-align:center;padding:clamp(2rem,5vw,3.4rem);border:1px dashed var(--line);
  border-radius:var(--r-lg);color:var(--text-dim)}
.empty h3{color:var(--text)}

/* Visual-editor mode: make every editable element obvious but never break layout */
body.ve-edit [data-ve-hover]{outline:1px dashed rgba(224,138,69,.6);outline-offset:2px}

/* ==========================================================================
   Touch comfort
   Most of this site's traffic is on a phone, so the text links people
   actually navigate with get real tap area rather than line-height.
   ========================================================================== */
@media (max-width:760px){
  .site-foot__links a,
  .crumbs__list a,
  .site-foot__addr a,
  .alertbar__link{
    display:inline-block;
    padding-block:.42rem;
    min-height:40px;
    line-height:1.5;
  }
  .site-foot__links li{margin-block:-.15rem}
  .site-foot__phone{display:inline-block;padding-block:.3rem;min-height:44px}

  /* The town table is the main navigation on /ride/ - give every row a real
     touch target instead of a 21px line of text. */
  .tbl td a{display:block;padding-block:.55rem;min-height:40px}
  .tbl td,.tbl th{padding-block:.5rem}

  /* FAQ / expander headings */
  details > summary{padding-block:.55rem;min-height:44px;display:flex;align-items:center}
}

/* ==========================================================================
   Right-click quick menu
   ========================================================================== */
.quickmenu{
  position:fixed;z-index:130;min-width:280px;max-width:min(92vw,340px);
  background:rgba(16,20,23,.82);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid rgba(255,255,255,.16);border-radius:16px;
  box-shadow:0 26px 60px -18px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.14);
  padding:.85rem;
  opacity:0;transform:scale(.96) translateY(-4px);
  transition:opacity .14s var(--ease),transform .14s var(--ease);
}
.quickmenu.is-open{opacity:1;transform:none}
.quickmenu[hidden]{display:none}

.quickmenu__head{
  margin:0 0 .6rem;padding:0 .25rem;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:.72rem;color:var(--clay-lt);
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.quickmenu__grid{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.quickmenu__btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;
  padding:.85rem .5rem;min-height:76px;border-radius:11px;text-align:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);
  color:#fff;text-decoration:none;
  transition:background .16s var(--ease),transform .16s var(--ease),border-color .16s var(--ease);
}
.quickmenu__btn:hover,.quickmenu__btn:focus-visible{
  background:rgba(228,19,28,.28);border-color:rgba(255,255,255,.30);
  color:#fff;transform:translateY(-2px);
}
.quickmenu__btn:first-child{grid-column:1/-1;flex-direction:row;gap:.6rem;min-height:56px}
.quickmenu__ico{display:block;line-height:1}
.quickmenu__ico svg{width:22px;height:22px;display:block}
.quickmenu__label{
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;font-size:.82rem;line-height:1.15;
  text-shadow:0 1px 2px rgba(0,0,0,.55);
}
.quickmenu__close{
  display:block;width:100%;margin-top:.55rem;padding:.55rem;
  background:transparent;border:1px solid rgba(255,255,255,.16);border-radius:9px;
  color:var(--text-dim);cursor:pointer;font-size:.82rem;
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.09em;
}
.quickmenu__close:hover{background:rgba(255,255,255,.07);color:#fff}

@media (max-width:420px){
  .quickmenu{min-width:0;width:min(92vw,320px)}
  .quickmenu__btn{min-height:68px}
}
@media (prefers-reduced-motion:reduce){
  .quickmenu{transition:none;transform:none}
}

/* ==========================================================================
   Legibility: a drop shadow under light text
   House style. Light type over dark panels and photographs needs the shadow
   to stay readable, especially on a phone in daylight. Dark text on the paper
   sections is deliberately left alone - a shadow there just looks muddy.
   ========================================================================== */
.sec--dark, .sec--raise, .sec--clay, .pagehead, .hero, .cta-band,
.site-foot, .alertbar, .site-head, .mmx-popup__panel {
  --lit-shadow:0 1px 2px rgba(0,0,0,.55);
}

.hero h1,
.hero__sub,
.hero__kicker,
.hero__facts,
.pagehead h1,
.pagehead__lead,
.cta-band h2,
.cta-band p,
.sec--clay h2,
.sec--clay p,
.sec--clay a,
.stat__n,
.stat__l,
.alertbar__text,
.alertbar__badge,
.alertbar__link,
.gal-cap__title,
.next-up__title,
.next-up__meta,
.next-up__label,
.next-up__big,
.ev-card__title,
.ev-card__notice,
.ev-date__day,
.ev-date__month,
.mmx-popup__title,
.mmx-popup__text,
.site-foot__phone,
.site-foot__h {
  text-shadow:var(--lit-shadow,0 1px 2px rgba(0,0,0,.55));
}

/* The big display type carries a deeper shadow - it sits over photographs. */
.hero h1,
.pagehead h1,
.cta-band h2,
.next-up__big{ text-shadow:0 2px 10px rgba(0,0,0,.65), 0 1px 2px rgba(0,0,0,.55); }

/* Section headings and body copy on the dark bands. */
.sec--dark h1, .sec--raise h1,
.sec--dark h2, .sec--dark h3, .sec--raise h2, .sec--raise h3,
.sec--dark .lead, .sec--raise .lead,
.sec--dark .sec__lead, .sec--raise .sec__lead,
.fx-card__title, .price-card__name, .price-card__amount,
.cls-row__name, .lodge-card__name, .rev-card__text,
.ev-card__text, .ev-card__facts li, .dirsteps li,
.mainnav__list a, .quickmenu__label{
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}

/* Buttons, the header phone and the footer address are light text too. Keep the
   shadow tight here - these sit on solid colour rather than a photograph, so
   they need definition, not a halo. */
.btn--primary, .btn--clay, .btn--ghost, .phone-btn, .phone-btn span,
.site-foot__addr a, .skip-link, .actionbar a{
  text-shadow:0 1px 1px rgba(0,0,0,.4);
}

/* Form pages: the waiver panel, the race sections and the anti-spam sum are all
   light text on a dark panel. Native <option> lists are drawn by the operating
   system, so they are deliberately left alone. */
.panel > summary, .panel > p, .panel label span,
.mathbox p, .mathbox__sum{
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}

/* Never shadow text on the light paper sections or inside the admin. */
.sec--paper, .sec--paper *{text-shadow:none}
