/* ============================================================================
   SOUTH ORANGE COUNTY YOUNG DEMOCRATS — "CIVIC HORIZON"
   ----------------------------------------------------------------------------
   The system is lifted directly from the club's own artwork (the Meet the Board
   carousel, the July slide deck, the logo mark): a navy sky, a cream ground,
   and one hard horizon line between them with the twin peaks and the rising
   orange sitting on it.

   Every colour and both typefaces below are the same ones used in the printed
   and social assets — Big Shoulders for display, Outfit for everything else.

   EDITING NOTES
   - Change a colour once in :root and it changes everywhere.
   - External links (join form, Instagram, docs) live in /js/config.js, not here.
   - Section rhythm is driven by --step; don't hand-tune margins per page.
============================================================================ */

/* ---------------------------------------------------------------- tokens -- */
:root{
  /* Sky */
  --navy:#15356B;
  --navy-deep:#0E2450;
  --navy-soft:#1B4080;
  --ghost:#32548E;            /* ghost numerals — one step off the navy */

  /* Ground */
  --cream:#F6F2E8;
  --cream-2:#EFE9DA;
  --cream-3:#E6DECA;
  --paper:#FCFAF4;

  /* Brand */
  --sky:#4AA3D6;
  --sky-deep:#2F7FAE;
  --peak-back:#3888BA;
  --orange:#F5851F;
  --fruit:#FF8133;
  --orange-deep:#C4620E;
  --leaf:#12663A;

  /* Ink */
  --ink:#132A4C;
  --slate:#2C3A50;
  --muted:#5C6D85;
  --muted-sky:#A9B6C8;

  /* Lines */
  --rule:rgba(19,42,76,.16);
  --rule-2:rgba(19,42,76,.30);
  --rule-sky:rgba(255,255,255,.18);
  --rule-sky-2:rgba(255,255,255,.34);

  /* Type */
  --f-disp:'Big Shoulders Display','Big Shoulders',Oswald,'Arial Narrow',sans-serif;
  --f-body:Outfit,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* Metrics */
  --wrap:1240px;
  --wrap-mid:1040px;
  --wrap-narrow:760px;
  --gut:clamp(20px,4.4vw,52px);
  --step:clamp(64px,8.4vw,124px);
  --step-sm:clamp(40px,5vw,72px);
  --r:4px;                     /* the system is square; radius is a whisper */
  --r-lg:10px;

  --shadow:0 30px 70px -46px rgba(9,26,54,.62);
  --shadow-sm:0 14px 34px -24px rgba(9,26,54,.5);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ----------------------------------------------------------------- reset -- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:104px;
}
body{
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.62;
  font-weight:400;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
:focus-visible{
  outline:3px solid var(--orange);
  outline-offset:3px;
  border-radius:2px;
}
::selection{background:var(--orange);color:#fff}

/* ------------------------------------------------------------ typography -- */
h1,h2,h3,h4,h5{
  font-family:var(--f-disp);
  font-weight:700;
  line-height:.92;
  letter-spacing:.004em;
  text-transform:uppercase;
  color:var(--ink);
  text-wrap:balance;
}
.d1{font-size:clamp(3.1rem,9.4vw,7.4rem)}
.d2{font-size:clamp(2.5rem,6.4vw,4.9rem)}
.d3{font-size:clamp(2rem,4.4vw,3.4rem)}
.d4{font-size:clamp(1.5rem,2.6vw,2.15rem);line-height:.98}
.d5{font-size:clamp(1.2rem,1.9vw,1.5rem);line-height:1.02}

/* small caps label — the mono-ish kicker used across the club's artwork */
.kicker{
  display:inline-block;
  font-family:var(--f-body);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--orange-deep);
}
.kicker--sky{color:var(--sky)}
.kicker--muted{color:var(--muted)}
.kicker--cream{color:var(--muted-sky)}

.lede{
  font-size:clamp(1.12rem,1.75vw,1.36rem);
  line-height:1.52;
  font-weight:300;
  color:var(--slate);
  max-width:56ch;
  text-wrap:pretty;
}
.prose{max-width:66ch}
.prose p{margin-bottom:1.05em;color:var(--slate);text-wrap:pretty}
.prose p:last-child{margin-bottom:0}
.prose strong{font-weight:600;color:var(--ink)}
.prose a{
  color:var(--sky-deep);
  border-bottom:1.5px solid rgba(47,127,174,.34);
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.prose a:hover{color:var(--orange-deep);border-color:var(--orange)}
.prose h3{margin:1.7em 0 .55em;font-size:1.5rem}
.prose ul{margin:0 0 1.05em;padding-left:0}
.prose li{
  position:relative;padding-left:1.3em;margin-bottom:.5em;color:var(--slate);
}
.prose li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:7px;height:7px;background:var(--orange);
}

/* on-navy text */
.on-sky{color:#fff}
.on-sky h1,.on-sky h2,.on-sky h3,.on-sky h4{color:#fff}
.on-sky .lede{color:#D6E2F2;font-weight:300}
.on-sky .prose p,.on-sky .prose li{color:#CBD9EC}
.on-sky .prose strong{color:#fff}
.on-sky .prose a{color:#fff;border-bottom-color:rgba(255,255,255,.4)}
.on-sky .prose a:hover{color:var(--fruit);border-color:var(--fruit)}

/* ---------------------------------------------------------------- layout -- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap--mid{max-width:var(--wrap-mid)}
.wrap--narrow{max-width:var(--wrap-narrow)}
section{padding-block:var(--step)}
.sec--sm{padding-block:var(--step-sm)}
.sec--flush-top{padding-top:0}
.bg-navy{background:var(--navy);color:#fff}
.bg-navy-deep{background:var(--navy-deep);color:#fff}
.bg-cream-2{background:var(--cream-2)}
.bg-paper{background:var(--paper)}
.center{text-align:center}
.center .lede{margin-inline:auto}

.grid{display:grid;gap:clamp(20px,2.6vw,34px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}

/* section head — rule + kicker + title, used on every page */
.sechead{margin-bottom:clamp(30px,4vw,52px)}
.sechead__rule{height:2px;background:var(--ink);margin-bottom:16px}
.on-sky .sechead__rule{background:rgba(255,255,255,.85)}
.sechead .kicker{margin-bottom:12px}
.sechead .lede{margin-top:16px}
.sechead--split{
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;
}
.sechead--split .lede{grid-column:1/-1;margin-top:4px}

/* ------------------------------------------------------- horizon / peaks -- */
/* The signature: a hard line where navy sky meets cream ground, with the
   club's peaks sitting on it. Used as a section divider.                     */
/* A zero-height marker placed exactly on the seam between two sections. The
   peaks rise out of the seam into the section above — the club's logo, used
   as the page's own horizon line. No band, so the two section colours meet
   as one crisp edge. */
.horizon{position:relative;height:0;overflow:visible;z-index:2}
/* Reserve room above the seam so the peaks never sit on top of real content. */
section:has(+ .horizon){padding-bottom:clamp(120px,13vw,190px)}
.horizon__peaks{
  position:absolute;right:clamp(20px,6vw,90px);bottom:0;
  width:clamp(150px,19vw,280px);height:auto;
}
.horizon__peaks--left{right:auto;left:clamp(20px,6vw,90px)}

/* the mark itself */
.mark{display:block;height:auto}
.mark--sm{width:38px}

/* ghost numeral, straight from the carousel cards */
.ghost-num{
  font-family:var(--f-disp);
  font-weight:700;
  line-height:.8;
  color:var(--ghost);
  opacity:.9;
  pointer-events:none;
  user-select:none;
}
.on-cream .ghost-num{color:rgba(19,42,76,.10)}

/* --------------------------------------------------------------- buttons -- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--f-body);
  font-size:.88rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  padding:15px 26px;
  border:2px solid transparent;
  border-radius:var(--r);
  transition:transform .16s var(--ease),background .2s var(--ease),
             color .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
  white-space:nowrap;
  text-align:center;
}
.btn:active{transform:translateY(1px)}
.btn__arrow{transition:transform .22s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}

.btn--orange{background:var(--orange);color:#12233F;border-color:var(--orange)}
.btn--orange:hover{background:var(--fruit);border-color:var(--fruit);box-shadow:0 12px 26px -14px rgba(245,133,31,.85)}

.btn--navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn--navy:hover{background:var(--navy-soft);border-color:var(--navy-soft)}

.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn--ghost:hover{border-color:var(--ink);background:rgba(19,42,76,.05)}

.btn--ghost-sky{background:transparent;color:#fff;border-color:var(--rule-sky-2)}
.btn--ghost-sky:hover{border-color:#fff;background:rgba(255,255,255,.1)}

.btn--sm{padding:11px 18px;font-size:.78rem}
.btn--lg{padding:18px 34px;font-size:.95rem}
.btn--block{display:flex;width:100%}

.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.btn-row--center{justify-content:center}

/* text link with arrow */
.tlink{
  display:inline-flex;align-items:center;gap:.5em;
  font-weight:600;font-size:.85rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--sky-deep);
  border-bottom:2px solid transparent;
  padding-bottom:2px;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.tlink:hover{color:var(--orange-deep);border-color:var(--orange)}
.tlink svg{transition:transform .22s var(--ease)}
.tlink:hover svg{transform:translateX(4px)}
.on-sky .tlink{color:var(--fruit)}
.on-sky .tlink:hover{color:#fff;border-color:#fff}

/* ---------------------------------------------------------------- header -- */
.hdr{
  position:sticky;top:0;z-index:100;
  background:var(--navy);
  border-bottom:1px solid rgba(255,255,255,.13);
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.hdr__in{
  display:flex;align-items:center;gap:clamp(16px,3vw,44px);
  height:72px;
}
.hdr__brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.hdr__brand .mark{width:38px;flex-shrink:0}
.hdr__name{
  font-family:var(--f-disp);font-weight:700;text-transform:uppercase;
  font-size:1.16rem;line-height:.9;letter-spacing:.01em;color:#fff;
}
.hdr__name span{display:block;font-size:.58rem;font-family:var(--f-body);
  font-weight:600;letter-spacing:.17em;color:var(--sky);margin-top:3px}
.hdr__nav{display:flex;align-items:center;gap:clamp(4px,1.4vw,10px);margin-left:auto}
.hdr__link{
  position:relative;
  padding:9px 12px;
  font-size:.82rem;font-weight:500;letter-spacing:.055em;text-transform:uppercase;
  color:#C9D8EC;
  transition:color .18s var(--ease);
}
.hdr__link:hover{color:#fff}
.hdr__link::after{
  content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;
  background:var(--orange);transform:scaleX(0);transform-origin:left;
  transition:transform .24s var(--ease);
}
.hdr__link:hover::after,.hdr__link[aria-current="page"]::after{transform:scaleX(1)}
.hdr__link[aria-current="page"]{color:#fff}
.hdr__cta{margin-left:8px}
.hdr__burger{
  display:none;width:44px;height:44px;margin-left:auto;
  align-items:center;justify-content:center;
}
.hdr__burger span{
  display:block;width:22px;height:2px;background:#fff;position:relative;
  transition:background .2s var(--ease);
}
.hdr__burger span::before,.hdr__burger span::after{
  content:"";position:absolute;left:0;width:22px;height:2px;background:#fff;
  transition:transform .26s var(--ease),top .2s var(--ease);
}
.hdr__burger span::before{top:-7px}
.hdr__burger span::after{top:7px}
body.nav-open .hdr__burger span{background:transparent}
body.nav-open .hdr__burger span::before{top:0;transform:rotate(45deg)}
body.nav-open .hdr__burger span::after{top:0;transform:rotate(-45deg)}

/* skip link */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--orange);color:#12233F;padding:12px 20px;font-weight:600;
}
.skip:focus{left:12px;top:12px}

/* --------------------------------------------------------------- ribbon -- */
/* the thin alert strip above the header (deadlines, next meeting) */
.ribbon{
  background:var(--orange);
  color:#12233F;
  font-size:.82rem;font-weight:500;
}
.ribbon__in{
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:38px;padding-block:7px;text-align:center;flex-wrap:wrap;
}
.ribbon b{font-weight:700}
.ribbon a{border-bottom:1.5px solid rgba(18,35,63,.45);font-weight:600}
.ribbon a:hover{border-color:#12233F}

/* ----------------------------------------------------------------- hero -- */
.hero{
  position:relative;
  background:var(--navy);
  color:#fff;
  padding-top:clamp(52px,7vw,92px);
  padding-bottom:clamp(72px,9vw,116px);
}
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(28px,4vw,62px);
  align-items:start;
  position:relative;z-index:2;
}
.hero__eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.hero__eyebrow .kicker{color:var(--sky)}
.hero__eyebrow::after{content:"";height:1px;flex:1;background:rgba(255,255,255,.22)}
.hero h1{
  font-size:clamp(3.2rem,8.6vw,6.6rem);
  color:#fff;
  margin-bottom:22px;
}
.hero h1 em{font-style:normal;color:var(--fruit)}
.hero__lede{
  font-size:clamp(1.08rem,1.55vw,1.28rem);
  line-height:1.55;font-weight:300;color:#CFDDF0;max-width:46ch;
}
.hero__cta{margin-top:32px}
.hero__note{
  margin-top:18px;font-size:.86rem;color:var(--muted-sky);
  display:flex;align-items:center;gap:8px;
}
.hero__note svg{flex-shrink:0;color:var(--sky)}
/* The hero ends on the same .horizon seam every other section uses — the
   peaks sit on the navy/cream boundary. No bespoke hero floor component. */

/* the "next up" card that sits in the hero */
.nextup{
  background:var(--navy-deep);
  border:1px solid rgba(255,255,255,.16);
  border-top:3px solid var(--orange);
  border-radius:var(--r);
  padding:clamp(22px,2.4vw,30px);
  box-shadow:var(--shadow);
}
.nextup__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:14px;margin-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.15);
}
.nextup__head .kicker{color:var(--fruit)}
.nextup__live{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-sky);
}
.nextup__dot{
  width:6px;height:6px;border-radius:50%;background:var(--sky);
  box-shadow:0 0 0 0 rgba(74,163,214,.7);
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(74,163,214,.6)}
  70%{box-shadow:0 0 0 8px rgba(74,163,214,0)}
  100%{box-shadow:0 0 0 0 rgba(74,163,214,0)}
}
.nextup__item+.nextup__item{
  margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.11);
}
.nextup__row{display:flex;gap:16px;align-items:flex-start}
.nextup__date{
  flex-shrink:0;width:58px;text-align:center;
  border:1px solid rgba(255,255,255,.2);border-radius:var(--r);
  padding:7px 4px 8px;
}
.nextup__mon{
  display:block;font-size:.6rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fruit);
}
.nextup__day{
  display:block;font-family:var(--f-disp);font-size:1.7rem;font-weight:700;
  line-height:1;color:#fff;margin-top:2px;
}
.nextup__body{min-width:0;flex:1}
.nextup__title{
  font-family:var(--f-disp);font-size:1.28rem;font-weight:700;
  text-transform:uppercase;line-height:1;color:#fff;
}
.nextup__meta{
  margin-top:7px;font-size:.86rem;color:var(--muted-sky);line-height:1.45;
}
.nextup__foot{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.15)}
.nextup__skel{height:74px;border-radius:var(--r);
  background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.11),rgba(255,255,255,.05));
  background-size:200% 100%;animation:shimmer 1.5s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}


/* ---------------------------------------------------------------- cards -- */
.card{
  position:relative;
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--r);
  padding:clamp(24px,2.4vw,32px);
  transition:transform .26s var(--ease),box-shadow .26s var(--ease),border-color .26s var(--ease);
}
a.card:hover,.card--link:hover{
  transform:translateY(-3px);
  border-color:var(--rule-2);
  box-shadow:var(--shadow-sm);
}
.card--navy{background:var(--navy-deep);border-color:rgba(255,255,255,.14);color:#fff}
.card__n{
  font-family:var(--f-disp);font-size:.95rem;font-weight:700;
  color:var(--orange);letter-spacing:.08em;
}
.card h3{margin:14px 0 10px;font-size:clamp(1.3rem,2vw,1.6rem)}
.card p{color:var(--slate);font-size:.98rem;line-height:1.58}
.card--navy p{color:#C2D2E8}
.card__foot{margin-top:20px}

/* pillar card with a top accent rule */
.pillar{border-top:3px solid var(--sky)}
.pillar:nth-child(2){border-top-color:var(--orange)}
.pillar:nth-child(3){border-top-color:var(--leaf)}
.pillar:nth-child(4){border-top-color:var(--navy)}

/* --------------------------------------------------------------- photos -- */
/* Real photographs of real meetings. Asymmetric on purpose — a perfect grid
   of stock-looking squares is what makes a site feel automated. */
.shots{
  display:grid;
  grid-template-columns:1.55fr 1fr 1fr;
  grid-template-rows:auto auto;
  gap:clamp(10px,1.2vw,16px);
}
.shot{
  position:relative;overflow:hidden;border-radius:var(--r);
  background:var(--cream-3);
}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.shot:hover img{transform:scale(1.04)}
.shot--big{grid-row:span 2;aspect-ratio:auto}
.shot--big img{min-height:100%}
.shot__cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:34px 18px 14px;
  background:linear-gradient(transparent,rgba(10,26,52,.82));
  color:#fff;font-size:.82rem;font-weight:500;letter-spacing:.01em;
}
@media (max-width:820px){
  .shots{grid-template-columns:1fr 1fr}
  .shot--big{grid-column:1/-1;grid-row:auto;aspect-ratio:3/2}
}

/* ---------------------------------------------------------------- board -- */
.board{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.2vw,30px)}
.member{position:relative}
.member__frame{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--navy-deep);
  /* the arch window from the carousel cards */
  border-radius:999px 999px var(--r) var(--r)/44% 44% var(--r) var(--r);
  border:2px solid var(--sky);
  border-top-width:3px;
  transition:border-color .26s var(--ease),transform .3s var(--ease);
}
.member:hover .member__frame{border-color:var(--orange);transform:translateY(-4px)}
.member__frame img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease);
}
.member:hover .member__frame img{transform:scale(1.035)}
.member__num{
  position:absolute;top:10px;right:14px;z-index:2;
  font-family:var(--f-disp);font-size:2.2rem;font-weight:700;line-height:1;
  color:rgba(255,255,255,.42);
  text-shadow:0 2px 12px rgba(10,26,52,.45);
  pointer-events:none;
}
.member__name{
  margin-top:15px;font-family:var(--f-disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.08rem,1.5vw,1.34rem);line-height:.96;color:var(--ink);
}
.on-sky .member__name{color:#fff}
.member__role{
  margin-top:7px;font-size:.7rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--orange-deep);
}
.on-sky .member__role{color:var(--fruit)}
.member__role span{color:var(--muted)}
.on-sky .member__role span{color:var(--muted-sky)}
.member__bio{margin-top:10px;font-size:.9rem;line-height:1.5;color:var(--muted)}
.on-sky .member__bio{color:#B9C9DF}

/* ------------------------------------------------------------- calendar -- */
.cal__bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  padding-bottom:20px;margin-bottom:26px;border-bottom:2px solid var(--ink);
}
.cal__filters{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;
  font-size:.76rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  border:1.5px solid var(--rule-2);border-radius:999px;
  color:var(--slate);background:transparent;
  transition:all .18s var(--ease);
}
.chip:hover{border-color:var(--ink)}
.chip__dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.cal__views{display:flex;gap:0;margin-left:auto;border:1.5px solid var(--rule-2);border-radius:var(--r);overflow:hidden}
.cal__view{
  padding:9px 16px;font-size:.76rem;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);transition:all .18s var(--ease);
}
.cal__view[aria-pressed="true"]{background:var(--navy);color:#fff}

/* tag colours — one source of truth, mirrored in JS */
.t-club{color:var(--sky-deep)}
.t-field{color:var(--orange-deep)}
.t-partner{color:var(--leaf)}
.t-social{color:#8A4FBF}
.t-deadline{color:#C0392B}
.bgt-club{background:var(--sky-deep)}
.bgt-field{background:var(--orange-deep)}
.bgt-partner{background:var(--leaf)}
.bgt-social{background:#8A4FBF}
.bgt-deadline{background:#C0392B}

/* agenda list */
.agenda{border-top:1px solid var(--rule)}
.ev{
  display:grid;grid-template-columns:96px 1fr auto;gap:clamp(14px,2vw,28px);
  align-items:start;
  padding:22px 4px;
  border-bottom:1px solid var(--rule);
  transition:background .2s var(--ease);
}
.ev:hover{background:rgba(19,42,76,.028)}
.ev--past{opacity:.5}
.ev__when{text-align:left}
.ev__mon{
  font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--orange-deep);
}
.ev__day{
  font-family:var(--f-disp);font-size:2.5rem;font-weight:700;line-height:.88;
  color:var(--navy);margin-top:2px;
}
.ev__dow{font-size:.76rem;color:var(--muted);margin-top:3px;text-transform:uppercase;letter-spacing:.08em}
.ev__body{min-width:0}
.ev__tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  margin-bottom:7px;
}
.ev__tag i{width:7px;height:7px;border-radius:50%;background:currentColor;display:block}
.ev__title{
  font-family:var(--f-disp);font-size:clamp(1.3rem,2.1vw,1.7rem);font-weight:700;
  text-transform:uppercase;line-height:.98;color:var(--ink);
}
.ev__meta{
  margin-top:8px;display:flex;flex-wrap:wrap;gap:6px 18px;
  font-size:.88rem;color:var(--muted);
}
.ev__meta span{display:inline-flex;align-items:center;gap:6px}
.ev__meta svg{flex-shrink:0;opacity:.65}
.ev__desc{margin-top:10px;font-size:.94rem;line-height:1.55;color:var(--slate);max-width:62ch}
.ev__desc a{color:var(--sky-deep);border-bottom:1px solid rgba(47,127,174,.35)}
.ev__desc a:hover{color:var(--orange-deep);border-color:var(--orange)}
.ev__act{display:flex;flex-direction:column;gap:8px;align-items:stretch}

/* month grid */
.month{margin-top:8px}
.month__nav{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.month__label{
  font-family:var(--f-disp);font-size:clamp(1.5rem,3vw,2.2rem);font-weight:700;
  text-transform:uppercase;line-height:1;min-width:8ch;
}
.month__btn{
  width:38px;height:38px;border:1.5px solid var(--rule-2);border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;color:var(--slate);
  transition:all .18s var(--ease);
}
.month__btn:hover{border-color:var(--ink);background:rgba(19,42,76,.05)}
.month__btn[disabled]{opacity:.3;cursor:default}
.month__btn[disabled]:hover{border-color:var(--rule-2);background:none}
.month__grid{
  display:grid;grid-template-columns:repeat(7,1fr);
  border-top:2px solid var(--ink);border-left:1px solid var(--rule);
}
.month__dow{
  padding:10px 8px;font-size:.68rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background:var(--cream-2);
}
.day{
  position:relative;min-height:118px;padding:8px;
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background:var(--paper);
}
.day--out{background:var(--cream-2);opacity:.55}
.day--today{background:#FFF6E8;box-shadow:inset 0 0 0 2px var(--orange)}
.day__n{
  font-family:var(--f-disp);font-size:1.05rem;font-weight:700;color:var(--slate);
  line-height:1;
}
.day--today .day__n{color:var(--orange-deep)}
.day__ev{
  display:block;width:100%;text-align:left;
  margin-top:6px;padding:5px 7px;border-radius:3px;
  font-size:.72rem;font-weight:600;line-height:1.3;color:#fff;
  overflow:hidden;text-overflow:ellipsis;
  transition:filter .18s var(--ease);
}
.day__ev:hover{filter:brightness(1.13)}
.day__more{margin-top:4px;font-size:.68rem;color:var(--muted);font-weight:600}

/* empty / error state */
.cal__empty{
  padding:52px 24px;text-align:center;border:1px dashed var(--rule-2);
  border-radius:var(--r);color:var(--muted);
}
.cal__empty h3{font-size:1.3rem;margin-bottom:8px}

/* event detail dialog */
.evdlg{
  border:0;padding:0;max-width:min(560px,calc(100vw - 32px));width:100%;
  background:var(--paper);border-radius:var(--r-lg);
  box-shadow:0 40px 90px -40px rgba(9,26,54,.7);
  color:var(--ink);
}
.evdlg::backdrop{background:rgba(14,36,80,.62);backdrop-filter:blur(3px)}
.evdlg__in{padding:clamp(24px,3vw,34px)}
.evdlg__x{
  position:absolute;top:12px;right:12px;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;border-radius:var(--r);
  color:var(--muted);transition:all .18s var(--ease);
}
.evdlg__x:hover{background:rgba(19,42,76,.07);color:var(--ink)}
.evdlg h3{font-size:clamp(1.5rem,3vw,2rem);margin:10px 0 14px;line-height:.98}

/* -------------------------------------------------------------- endorse -- */
.slate{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.cand{
  display:flex;gap:16px;align-items:center;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);
  padding:16px;
  border-left:3px solid var(--sky);
  transition:transform .24s var(--ease),box-shadow .24s var(--ease);
}
.cand:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.cand--won{border-left-color:var(--leaf)}
.cand--out{border-left-color:var(--muted-sky)}
.cand__img{
  width:66px;height:66px;flex-shrink:0;border-radius:50%;object-fit:cover;
  background:var(--cream-3);border:2px solid var(--cream-3);
}
.cand__body{min-width:0}
.cand__name{
  font-family:var(--f-disp);font-size:1.22rem;font-weight:700;text-transform:uppercase;
  line-height:1;color:var(--ink);
}
.cand__race{margin-top:5px;font-size:.82rem;color:var(--muted);line-height:1.35}
.cand__flag{
  display:inline-flex;align-items:center;gap:5px;margin-top:7px;
  font-size:.64rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--leaf);
}
.cand--out .cand__flag{color:var(--muted)}

/* --------------------------------------------------------------- tables -- */
.tbl{width:100%;border-collapse:collapse;font-size:.95rem}
.tbl th{
  text-align:left;padding:12px 14px;font-size:.7rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  border-bottom:2px solid var(--ink);
}
.tbl td{padding:14px;border-bottom:1px solid var(--rule);color:var(--slate);vertical-align:top}
.tbl tr:hover td{background:rgba(19,42,76,.026)}
.tbl__t{font-weight:600;color:var(--ink)}

/* -------------------------------------------------------------- doc list -- */
.docs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,20px)}
.doc{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);
  padding:20px 22px;
  transition:transform .24s var(--ease),box-shadow .24s var(--ease),border-color .24s var(--ease);
}
.doc:hover{transform:translateY(-2px);border-color:var(--rule-2);box-shadow:var(--shadow-sm)}
.doc__ic{
  width:42px;height:42px;flex-shrink:0;border-radius:var(--r);
  background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.doc--pending .doc__ic{background:var(--cream-3);color:var(--muted)}
.doc__t{font-family:var(--f-disp);font-size:1.2rem;font-weight:700;text-transform:uppercase;line-height:1}
.doc__m{margin-top:6px;font-size:.86rem;color:var(--muted);line-height:1.45}

/* ----------------------------------------------------------------- form -- */
.form{display:grid;gap:18px}
.field{display:grid;gap:7px}
.field label{
  font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--slate);
}
.field label .req{color:var(--orange-deep)}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;
  background:var(--paper);
  border:1.5px solid var(--rule-2);border-radius:var(--r);
  font-size:1rem;color:var(--ink);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--sky);box-shadow:0 0 0 4px rgba(74,163,214,.18);
}
.field textarea{min-height:112px;resize:vertical;line-height:1.55}
.field__hint{font-size:.82rem;color:var(--muted);line-height:1.45}
.field--2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form__note{font-size:.84rem;color:var(--muted);line-height:1.5}
.form__err{
  display:none;padding:13px 16px;border-radius:var(--r);
  background:#FDECEA;border:1px solid #F0B7B0;color:#96271A;font-size:.9rem;
}
.form__err[data-on]{display:block}

/* --------------------------------------------------------------- footer -- */
.ftr{background:var(--navy-deep);color:#fff;padding-block:clamp(48px,6vw,76px) 0}
.ftr__grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:clamp(28px,4vw,52px);
  padding-bottom:44px;
}
.ftr__brand .mark{width:52px;margin-bottom:18px}
.ftr__name{font-family:var(--f-disp);font-size:1.5rem;font-weight:700;text-transform:uppercase;line-height:.94;color:#fff}
.ftr__blurb{margin-top:14px;font-size:.92rem;line-height:1.6;color:#B4C6DE;max-width:34ch}
.ftr h4{font-size:.74rem;font-family:var(--f-body);font-weight:700;letter-spacing:.15em;color:var(--sky);margin-bottom:16px}
.ftr__list li{margin-bottom:10px}
.ftr__list a{font-size:.94rem;color:#C7D6EA;transition:color .18s var(--ease)}
.ftr__list a:hover{color:var(--fruit)}
.ftr__bot{
  border-top:1px solid rgba(255,255,255,.14);
  padding-block:22px;
  display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;
  font-size:.82rem;color:#93A8C4;
}
.ftr__legal{max-width:74ch;line-height:1.55}
.social{display:flex;gap:10px;margin-top:18px}
.social a{
  width:42px;height:42px;border:1px solid rgba(255,255,255,.24);border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;color:#fff;
  transition:all .2s var(--ease);
}
.social a:hover{background:var(--orange);border-color:var(--orange);color:#12233F}

/* --------------------------------------------------------------- pagehd -- */
.pagehd{
  background:var(--navy);color:#fff;position:relative;overflow:hidden;
  padding-block:clamp(52px,7vw,90px) clamp(56px,7vw,96px);
}
.pagehd__peaks{
  position:absolute;right:0;bottom:0;width:clamp(200px,27vw,420px);
  pointer-events:none;
}
.pagehd__in{position:relative;z-index:2}
/* Headings default to ink; on every dark surface they must be reset explicitly.
   These are deliberately narrow selectors — a blanket ".bg-navy h3" would also
   hit event titles inside the light cards that sit on navy sections. */
.pagehd h1,.pagehd h2{color:#fff}
.card--navy h2,.card--navy h3,.card--navy h4{color:#fff}
.pagehd h1{font-size:clamp(2.7rem,7vw,5.4rem);margin-bottom:20px}
.crumbs{display:flex;gap:8px;align-items:center;font-size:.76rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted-sky);margin-bottom:20px}
.crumbs a:hover{color:#fff}

/* --------------------------------------------------------------- motion -- */
/* Reveal-on-scroll is a progressive enhancement and is scoped to .js, which
   is set by an inline script in <head>. If JavaScript never runs, every
   .reveal element simply stays visible instead of the page looking empty. */
.js .reveal{opacity:0;transform:translateY(18px);
  transition:opacity .62s var(--ease),transform .62s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important
  }
  .js .reveal{opacity:1;transform:none}
}

/* ------------------------------------------------------------ utilities -- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nowrap{white-space:nowrap}
.mt-s{margin-top:16px}.mt-m{margin-top:28px}.mt-l{margin-top:clamp(30px,4vw,48px)}
.hide{display:none!important}

/* ----------------------------------------------------------- responsive -- */
@media (max-width:1080px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .board{grid-template-columns:repeat(3,1fr)}
  .slate{grid-template-columns:repeat(2,1fr)}
  .ftr__grid{grid-template-columns:1fr 1fr;gap:36px}
}
@media (max-width:940px){
  .hero__grid{grid-template-columns:1fr;gap:38px}
  .g-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  /* mobile nav */
  .hdr__burger{display:flex}
  /* Anchored to the header itself (top:100%), NOT a hardcoded viewport offset.
     The announcement ribbon sits above the header and pushes it down at scroll
     top, so a fixed "72px from the top" drawer would open over the logo. */
  .hdr__nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--navy-deep);
    padding:14px var(--gut) 28px;
    border-bottom:1px solid rgba(255,255,255,.14);
    box-shadow:0 24px 40px -28px rgba(4,14,32,.8);
    transform:translateY(-118%);
    transition:transform .34s var(--ease);
    max-height:calc(100dvh - 72px);overflow-y:auto;
    margin-left:0;
    z-index:-1;
  }
  body.nav-open .hdr__nav{transform:none}
  .hdr__link{padding:15px 0;font-size:1rem;border-bottom:1px solid rgba(255,255,255,.1)}
  .hdr__link::after{display:none}
  .hdr__cta{margin:18px 0 0}
  .month__grid{font-size:.9rem}
  .day{min-height:92px}
  .docs{grid-template-columns:1fr}
}
@media (max-width:680px){
  body{font-size:16px}
  .board{grid-template-columns:repeat(2,1fr)}
  .slate{grid-template-columns:1fr}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .ev{grid-template-columns:64px 1fr;gap:14px}
  .ev__act{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;margin-top:4px}
  .ev__day{font-size:2rem}
  .field--2{grid-template-columns:1fr}
  .ftr__grid{grid-template-columns:1fr;gap:32px}
  .cal__views{margin-left:0;width:100%}
  .cal__view{flex:1}
  .sechead--split{grid-template-columns:1fr}
  /* month grid is unusable this narrow — JS forces list view, but hide anyway */
  .month{display:none}
}
@media (max-width:400px){
  .board{grid-template-columns:1fr}
}

/* ------------------------------------------------------------- printing -- */
@media print{
  .hdr,.ribbon,.ftr,.btn,.cal__bar,.horizon{display:none!important}
  body{background:#fff;color:#000}
  .bg-navy,.hero,.pagehd{background:#fff!important;color:#000!important}
  .hero h1,.pagehd h1{color:#000!important}
}