/* ΘX × ΑΔΠ Golf Outing.
   Palette from the two chapters' real colours: Theta Chi military red and
   Alpha Delta Pi azure, given equal weight so neither org looks like a guest.
   Ground is warm off-white, not grey: this is a fundraiser, not a SaaS page. */
:root{
  --red:#b01e28; --red-d:#8c1720;
  --azure:#1b4c8c; --azure-d:#143a6b;
  --fairway:#2e4a32;
  --paper:#f7f5f0; --card:#fffdf9; --ink:#1a1d1a;
  --mut:#5d6259; --faint:#8c9089; --rule:#e2ded4;
  --good:#2e7d4f;
  --shadow:0 1px 3px rgba(26,29,26,.08), 0 8px 24px rgba(26,29,26,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--paper);color:var(--ink);
  font:17px/1.65 "Source Serif 4",Georgia,serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,.disp{font-family:Oswald,"Arial Narrow",sans-serif;font-weight:600;
  letter-spacing:.01em;line-height:1.08;margin:0;text-wrap:balance}
a{color:var(--azure)}
.wrap{max-width:940px;margin-inline:auto;padding-inline:clamp(18px,4vw,32px)}
.narrow{max-width:660px}

/* --- top bar --- */
.bar{position:sticky;top:0;z-index:50;background:rgba(247,245,240,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.bar .in{display:flex;align-items:center;gap:16px;padding-block:11px}
.crest{display:flex;align-items:center;gap:9px;font-family:Oswald,sans-serif;
  font-size:1.02rem;letter-spacing:.04em;text-decoration:none;color:var(--ink)}
.crest .g{font-size:1.3rem;letter-spacing:.06em}
.crest .g .x{color:var(--red)}.crest .g .a{color:var(--azure)}
.bar nav{margin-left:auto;display:flex;gap:20px;align-items:center}
.bar nav a{font-family:Oswald,sans-serif;font-size:.86rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mut);text-decoration:none}
.bar nav a:hover{color:var(--ink)}
@media(max-width:640px){.bar nav a.hide-sm{display:none}}

/* --- buttons --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:Oswald,sans-serif;font-size:.95rem;letter-spacing:.05em;
  text-transform:uppercase;text-decoration:none;border:2px solid var(--red);
  background:var(--red);color:#fff;padding:14px 30px;border-radius:2px;
  cursor:pointer;transition:background .15s,border-color .15s}
.btn:hover{background:var(--red-d);border-color:var(--red-d)}
.btn.blue{background:var(--azure);border-color:var(--azure)}
.btn.blue:hover{background:var(--azure-d);border-color:var(--azure-d)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
:focus-visible{outline:3px solid var(--azure);outline-offset:2px}

/* --- hero ---
   A centred poster over a photograph of a course at dusk, which is what a golf
   outing flyer looks like pinned to a chapter house wall. Deliberately not the
   text-left / picture-right split: the two chapter letters are the loudest thing
   on the page and they want the middle. The canvas turf animation stays behind
   the photo, so the page still has motion when the image is slow. */
.hero{position:relative;background:var(--fairway);color:#f4f2ec;overflow:hidden;
  min-height:min(82vh,720px);display:flex;align-items:center;text-align:center}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.5}
.hero .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 62%;opacity:.42}
/* One wash so every line clears contrast against grass, sky or trees alike. */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 90% 78% at 50% 48%,rgba(20,40,26,.42) 0%,
    rgba(18,34,22,.80) 62%,rgba(16,30,20,.94) 100%)}
.hero .in{position:relative;z-index:2;padding-block:clamp(46px,8vw,86px);
  max-width:800px;margin-inline:auto}
.hero .kicker{font-family:Oswald,sans-serif;font-size:.8rem;letter-spacing:.22em;
  text-transform:uppercase;color:#d8e2d3;margin-bottom:18px}
/* The date sits above the letters as its own line of record, the way an invitation
   puts the occasion before the name. */
.hero .date-rule{display:flex;align-items:center;gap:16px;justify-content:center;
  margin:0 auto 20px;max-width:440px;color:#f0b8bc;font-family:Oswald,sans-serif;
  font-size:.82rem;letter-spacing:.2em;text-transform:uppercase}
.hero .date-rule::before,.hero .date-rule::after{content:"";flex:1;height:1px;
  background:rgba(255,255,255,.28)}
.hero h1{font-size:clamp(2.2rem,6.4vw,4.2rem);color:#fff;text-wrap:balance;
  line-height:1.02;text-shadow:0 2px 34px rgba(0,0,0,.5)}
.hero h1 em{font-style:normal;color:#f0b8bc}
.hero .sub{margin:18px auto 0;font-size:clamp(.98rem,1.7vw,1.1rem);color:#e4ece0;
  max-width:52ch;text-shadow:0 1px 16px rgba(0,0,0,.55)}
.hero .facts{display:flex;flex-wrap:wrap;gap:0;margin:26px auto 26px;
  justify-content:center;
  border-top:1px solid rgba(255,255,255,.26);border-bottom:1px solid rgba(255,255,255,.26)}
.hero .facts div{padding:14px 26px;border-right:1px solid rgba(255,255,255,.18)}
.hero .facts div:last-child{border-right:0}
.hero .facts b{display:block;font-family:Oswald,sans-serif;font-size:1.22rem;color:#fff;
  letter-spacing:.02em}
.hero .facts span{font-size:.8rem;color:#c5d3c1;letter-spacing:.06em;text-transform:uppercase}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* --- sections --- */
section{padding-block:clamp(40px,6vw,72px)}
section + section{padding-top:clamp(16px,2.4vw,28px)}
.eyebrow{font-family:Oswald,sans-serif;font-size:.76rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red);margin-bottom:10px}
h2{font-size:clamp(1.7rem,3.6vw,2.5rem);margin-bottom:14px}
p{margin:0 0 16px}
.lede{font-size:1.08rem;color:var(--mut)}

/* --- scorecard (pricing) --- */
.card{background:var(--card);border:1px solid var(--rule);border-radius:3px;
  box-shadow:var(--shadow)}
.score{overflow:hidden}
.score .head{background:var(--fairway);color:#fff;display:flex;
  justify-content:space-between;align-items:baseline;padding:15px 22px;
  font-family:Oswald,sans-serif;letter-spacing:.08em;text-transform:uppercase;font-size:.86rem}
.row{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;
  padding:18px 22px;border-top:1px solid var(--rule)}
.row:first-of-type{border-top:0}
.row .t{font-family:Oswald,sans-serif;font-size:1.16rem;letter-spacing:.02em}
.row .d{font-size:.92rem;color:var(--mut);margin-top:3px;line-height:1.5}
.row .p{font-family:Oswald,sans-serif;font-size:1.5rem;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.row .go{font-family:Oswald,sans-serif;font-size:.82rem;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;color:#fff;background:var(--azure);
  padding:9px 16px;border-radius:2px;white-space:nowrap}
.row .go:hover{background:var(--azure-d)}
.row.sold{opacity:.5}
.row.sold .go{background:var(--faint);pointer-events:none}
@media(max-width:600px){
  .row{grid-template-columns:1fr auto;row-gap:12px}
  .row .go{grid-column:1/-1;justify-self:start}
}

/* --- fairway progress --- */
.prog{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:600px){.prog{grid-template-columns:1fr}}
.meter{padding:20px 22px}
.meter .lab{display:flex;justify-content:space-between;align-items:baseline;
  font-family:Oswald,sans-serif;letter-spacing:.05em;text-transform:uppercase;
  font-size:.82rem;color:var(--mut);margin-bottom:9px}
.meter .lab b{font-size:1.5rem;color:var(--ink);font-variant-numeric:tabular-nums}
.meter .track{height:9px;background:var(--rule);border-radius:99px;overflow:hidden}
.meter .fill{height:100%;background:var(--fairway);width:0;transition:width .8s ease}
.meter .fill.blue{background:var(--azure)}
.meter .note{font-size:.85rem;color:var(--faint);margin-top:8px}

/* --- agenda --- */
.tee{border-left:2px solid var(--rule);padding-left:22px;display:flex;
  flex-direction:column;gap:22px}
.tee .item{position:relative}
.tee .item::before{content:"";position:absolute;left:-27px;top:7px;width:9px;height:9px;
  border-radius:50%;background:var(--red);box-shadow:0 0 0 3px var(--paper)}
.tee time{font-family:Oswald,sans-serif;font-size:.86rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--red)}
.tee b{display:block;font-family:Oswald,sans-serif;font-size:1.16rem;margin-top:2px}
.tee span{font-size:.94rem;color:var(--mut)}

/* --- two-up cards --- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:700px){.duo{grid-template-columns:1fr}}
.duo .card{padding:26px}
.duo h3{font-size:1.3rem;margin-bottom:8px}
.duo .greek{font-family:Oswald,sans-serif;font-size:2rem;letter-spacing:.06em;
  margin-bottom:6px;display:block}
.duo .greek.x{color:var(--red)}.duo .greek.a{color:var(--azure)}
.duo p{font-size:.96rem;color:var(--mut);margin:0}

/* --- footer --- */
footer{background:var(--fairway);color:#cfd8ca;padding-block:40px;margin-top:20px}
footer .in{display:flex;gap:28px;flex-wrap:wrap;justify-content:space-between}
footer a{color:#fff}
footer .fine{font-size:.84rem;color:#9fae9b;margin-top:18px;width:100%}

/* Tier perks, collapsed by default. Seven rows each listing four benefits is a
   wall; a sponsor deciding between $300 and $700 opens the two they care about. */
.row details{margin-top:8px}
.row summary{font-family:Oswald,sans-serif;font-size:.8rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--azure);cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;gap:6px}
.row summary::-webkit-details-marker{display:none}
.row summary::after{content:"+";font-size:1rem;line-height:1}
.row details[open] summary::after{content:"–"}
.row details ul{margin:10px 0 0;padding-left:18px;font-size:.9rem;color:var(--mut);
  line-height:1.55;display:flex;flex-direction:column;gap:5px}
.row details li::marker{color:var(--faint)}
.perks{background:#fff;border-left:3px solid var(--azure);padding:16px 20px;
  margin:-14px 0 28px;border-radius:0 2px 2px 0}
.perks b{font-family:Oswald,sans-serif;font-size:1.02rem;letter-spacing:.02em}
.perks ul{margin:8px 0 0;padding-left:18px;font-size:.92rem;color:var(--mut);
  line-height:1.55;display:flex;flex-direction:column;gap:4px}

/* Touch targets. Nav links and the perk toggles were 21-23px tall, under the
   44px Apple and WCAG both ask for, which on a phone means mis-taps on the two
   controls that matter most: Register, and the toggle a sponsor uses to compare
   tiers. Padding rather than font-size, so the visual weight is unchanged. */
@media(hover:none){
  .bar nav a{padding-block:11px}
  .row summary{padding-block:11px}
  .row .go{padding-block:13px}
}

@media(max-width:520px){
  .hero{min-height:auto;text-align:left}
  .hero .in{max-width:none}
  .hero .date-rule{justify-content:flex-start;margin-inline:0}
  .hero .date-rule::before{display:none}
  .hero .sub{margin-inline:0}
  .hero .cta{justify-content:flex-start}
  .hero .facts{display:grid;grid-template-columns:1fr 1fr;gap:0;text-align:left}
  .hero .facts div{padding:11px 14px 11px 0;margin-right:0;
    border-right:1px solid rgba(255,255,255,.16)}
  .hero .facts div:nth-child(2n){border-right:0}
  .hero .facts div:nth-child(3){grid-column:1/-1;border-right:0;
    border-top:1px solid rgba(255,255,255,.16)}
}