:root{
  --bg:#131110;
  --bg-2:#1A1815;
  --bg-3:#201D19;
  --ink:#EDE8DF;
  --mut:#A79E8E;
  --dim:#857A68;
  --accent:#F0A53A;
  --accent-ink:#1D1507;
  --hair:rgba(237,232,223,.12);
  --hair-2:rgba(237,232,223,.06);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Sora',system-ui,-apple-system,sans-serif;
  --wrap:1180px;
  --pad:clamp(1.25rem,4vw,2.5rem);
  --sec:clamp(4rem,9vw,7rem);
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}

html{color-scheme:dark;scroll-padding-top:96px}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 16px/1.7 var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:90;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

img{max-width:100%;height:auto;display:block}

a{color:var(--ink);text-decoration:none}

h1,h2,h3,h4,p,ul,blockquote,figure{margin:0}

ul{list-style:none;padding:0}

.skip{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100;
  background:var(--accent);
  color:var(--accent-ink);
  padding:.6rem 1rem;
  font:500 .8rem var(--mono);
}
.skip:focus{left:0}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding-inline:var(--pad);
}

.accent{color:var(--accent)}

.cursor{
  color:var(--accent);
  display:inline-block;
  margin-left:2px;
  font-weight:600;
}

/* ---------- nav ---------- */

.site-head{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(19,17,16,.82);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hair-2);
}

.head-inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:1.5rem;
  height:64px;
}

.brand{
  font:600 1.15rem var(--mono);
  letter-spacing:.02em;
  white-space:nowrap;
  justify-self:start;
}

.nav{
  justify-self:center;
  display:flex;
  gap:1.6rem;
}
.nav a{
  font:500 .86rem var(--mono);
  color:var(--mut);
  letter-spacing:.03em;
  transition:color .25s var(--ease);
}
.nav a:hover{color:var(--ink)}

.head-cta{justify-self:end}

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;
  width:42px;
  height:42px;
  background:none;
  border:1px solid var(--hair);
  border-radius:10px;
  cursor:pointer;
  padding:0;
}
.nav-toggle span{
  width:16px;
  height:2px;
  background:var(--ink);
  border-radius:2px;
  transition:transform .3s var(--ease);
}
.nav-toggle.is-open span:first-child{transform:translateY(4px) rotate(45deg)}
.nav-toggle.is-open span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* ---------- buttons ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border-radius:999px;
  padding:.72rem 1.35rem;
  font:600 .92rem var(--sans);
  letter-spacing:.01em;
  white-space:nowrap;
  cursor:pointer;
  transition:transform .25s var(--ease),background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.btn:active{transform:translateY(1px)}

.btn-solid{
  background:var(--accent);
  color:var(--accent-ink);
  border:1px solid var(--accent);
}
.btn-solid:hover{transform:translateY(-1px);background:#F7B458}

.btn-ghost{
  border:1px solid var(--hair);
  color:var(--ink);
  background:transparent;
}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}

.btn-lg{padding:1rem 1.8rem;font-size:1rem}

.btn-link{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font:500 .86rem var(--mono);
  color:var(--accent);
  letter-spacing:.04em;
  transition:opacity .25s var(--ease);
}
.btn-link:hover{opacity:.75}

/* ---------- ticker ---------- */

.ticker{
  overflow:hidden;
  border-bottom:1px solid var(--hair-2);
  background:var(--bg-2);
}
.ticker-track{
  display:flex;
  width:max-content;
}
.ticker-group{
  display:flex;
  align-items:center;
  gap:2.4rem;
  padding:.62rem 0;
  padding-right:2.4rem;
}
.tk{
  font:500 11px/1 var(--mono);
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--mut);
  white-space:nowrap;
}
.tk.sep{color:var(--accent)}

/* ---------- hero ---------- */

.hero{
  min-height:calc(100dvh - 104px);
  display:flex;
  align-items:center;
  padding:clamp(2.5rem,6vh,4.5rem) 0;
}

.hero-inner{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(2.5rem,6vw,5rem);
  align-items:center;
}

.kicker{
  font:500 12px var(--mono);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:1.6rem;
}

.hero h1{
  font:600 clamp(2.4rem,5.2vw,3.6rem)/1.06 var(--sans);
  letter-spacing:-.02em;
  max-width:13ch;
}

.lede{
  margin-top:1.4rem;
  max-width:52ch;
  color:var(--mut);
  font-size:1.05rem;
}

.cta-row{
  margin-top:2.2rem;
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
}

.hero-fig{margin:0}
.hero-fig img{
  width:100%;
  border-radius:12px;
  border:1px solid var(--hair);
  aspect-ratio:2348/1848;
  object-fit:cover;
}
.hero-fig figcaption{
  margin-top:.7rem;
  font:500 11px var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dim);
}

/* ---------- stats ---------- */

.stats{
  border-top:1px solid var(--hair-2);
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}

.stat{
  padding:2.2rem var(--pad) 2.2rem 0;
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.stat + .stat{
  padding-left:var(--pad);
  border-left:1px solid var(--hair-2);
}

.num{
  font:600 clamp(1.9rem,3.4vw,2.6rem)/1 var(--mono);
  color:var(--ink);
  letter-spacing:-.02em;
}

.lab{
  font:500 11px var(--mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mut);
}

/* ---------- clubs ---------- */

.clubs{padding:var(--sec) 0}

.clubs h2,
.events h2,
.gallery h2{
  font:600 clamp(1.7rem,3.4vw,2.5rem)/1.15 var(--sans);
  letter-spacing:-.02em;
  margin-bottom:2.6rem;
}

.clubs-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:1.5rem;
  align-items:stretch;
}

.club{
  border:1px solid var(--hair);
  border-radius:12px;
  background:var(--bg-2);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.club-lead{background:var(--bg-3)}

.club-col{
  display:grid;
  gap:1.5rem;
}

.club-fig{margin:0}
.club-fig img{
  width:100%;
  object-fit:cover;
}
.club-lead .club-fig img{aspect-ratio:3/3.4}
.club-col .club-fig img{aspect-ratio:16/10}
.club-fig figcaption{
  padding:.6rem 1.2rem .9rem;
  font:500 11px var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dim);
  border-bottom:1px solid var(--hair-2);
}

.club-body{padding:1.3rem 1.2rem 1.5rem;display:flex;flex-direction:column;gap:.8rem}

.club-tag{
  font:500 11px var(--mono);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent);
}

.club h3{
  font:600 1.45rem/1.15 var(--sans);
  letter-spacing:-.01em;
}

.club-line{
  color:var(--mut);
  font-size:.95rem;
  max-width:46ch;
}

.club-stats{
  margin-top:.4rem;
  padding-top:1rem;
  border-top:1px solid var(--hair-2);
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1.6rem;
}
.club-stats li{
  font:500 12px var(--mono);
  color:var(--mut);
  letter-spacing:.05em;
}

/* ---------- events ---------- */

.events{padding:0 0 var(--sec)}

.event-band{
  border:1px solid var(--hair);
  border-radius:12px;
  background:var(--bg-2);
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:clamp(1.5rem,4vw,3rem);
  align-items:center;
  padding:clamp(1.5rem,4vw,2.6rem);
}

.event-date{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.2rem;
  padding-right:clamp(1.5rem,3vw,2.5rem);
  border-right:1px solid var(--hair);
}

.day{
  font:600 clamp(3rem,6vw,4.2rem)/1 var(--mono);
  color:var(--accent);
  letter-spacing:-.03em;
}

.mon{
  font:500 12px var(--mono);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mut);
}

.event-body h3{
  font:600 clamp(1.3rem,2.6vw,1.8rem)/1.2 var(--sans);
  letter-spacing:-.01em;
  margin-bottom:1.1rem;
}

.event-meta{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  margin-bottom:1.1rem;
}

.em{
  padding-right:1.6rem;
  margin-right:1.6rem;
  border-right:1px solid var(--hair-2);
  display:flex;
  flex-direction:column;
  gap:.15rem;
}
.em:last-child{border-right:0;margin-right:0;padding-right:0}

.emk{
  font:500 10px var(--mono);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--dim);
}

.emv{
  font:500 .95rem var(--sans);
  color:var(--ink);
}

.desc{
  color:var(--mut);
  max-width:58ch;
  font-size:.98rem;
}

.event-cta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.9rem;
}

/* ---------- about ---------- */

.about{
  border-top:1px solid var(--hair-2);
  padding:var(--sec) 0;
}

.about-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}

.about-lead h2{
  font:600 clamp(1.5rem,2.8vw,2rem)/1.2 var(--sans);
  letter-spacing:-.02em;
  margin-bottom:1.6rem;
  color:var(--dim);
}

.statement{
  font:600 clamp(1.7rem,3.6vw,2.6rem)/1.2 var(--sans);
  letter-spacing:-.02em;
  max-width:16ch;
}

.about-body{
  display:flex;
  flex-direction:column;
  gap:1.8rem;
}

.about-body > p{
  color:var(--mut);
  font-size:1.02rem;
}

.quote{
  border-left:2px solid var(--accent);
  padding-left:1.4rem;
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.quote p{
  font:500 1.2rem/1.5 var(--sans);
  color:var(--ink);
  letter-spacing:-.01em;
}
.quote cite{
  font:500 12px var(--mono);
  letter-spacing:.1em;
  color:var(--dim);
  font-style:normal;
}

/* ---------- gallery ---------- */

.gallery{padding:0 0 var(--sec)}

.gallery-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:2.6rem;
}
.gallery-head h2{margin-bottom:0}

.gallery-grid{
  columns:3;
  column-gap:1.5rem;
}

.gallery-grid figure{
  break-inside:avoid;
  margin-bottom:1.5rem;
}

.gallery-grid img{
  width:100%;
  border-radius:12px;
  border:1px solid var(--hair);
  transition:transform .4s var(--ease);
}
.gallery-grid figure:hover img{transform:translateY(-3px)}

.gallery-grid figcaption{
  margin-top:.6rem;
  font:500 11px var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dim);
}

/* ---------- join ---------- */

.join{padding:0 0 var(--sec)}

.join-panel{
  border:1px solid var(--hair);
  border-radius:12px;
  background:var(--bg-2);
  text-align:center;
  padding:clamp(3rem,7vw,5.5rem) var(--pad);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.2rem;
}

.join-panel h2{
  font:600 clamp(1.9rem,4.4vw,3rem)/1.15 var(--sans);
  letter-spacing:-.02em;
  max-width:20ch;
}

.join-sub{
  color:var(--mut);
  font-size:1.05rem;
  margin-bottom:.6rem;
}

.join-meta{
  margin-top:.9rem;
  font:500 12px var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dim);
}

/* ---------- footer ---------- */

.site-foot{
  border-top:1px solid var(--hair-2);
  background:var(--bg-2);
  padding:var(--sec) 0 2rem;
}

.foot-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:clamp(2rem,5vw,4rem);
  padding-bottom:3rem;
}

.foot-brand p{
  margin-top:1rem;
  color:var(--mut);
  max-width:34ch;
  font-size:.95rem;
}

.foot-col h4{
  font:500 11px var(--mono);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--dim);
  margin-bottom:1.1rem;
}

.foot-col ul{
  display:flex;
  flex-direction:column;
  gap:.55rem;
}
.foot-col li a,
.foot-col p a{
  color:var(--mut);
  font-size:.95rem;
  transition:color .25s var(--ease);
}
.foot-col li a:hover,
.foot-col p a:hover{color:var(--ink)}
.foot-col p{color:var(--mut);font-size:.95rem;line-height:1.9}

.foot-base{
  border-top:1px solid var(--hair-2);
  padding-top:1.6rem;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.5rem 2rem;
}
.foot-base p{
  font:500 11px var(--mono);
  letter-spacing:.1em;
  color:var(--dim);
}

/* ---------- reveal ---------- */

.js .reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:calc(var(--d,0)*70ms);
}
.js .reveal.in{
  opacity:1;
  transform:none;
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}

  .cursor{animation:blink 1.15s steps(1) infinite}
  @keyframes blink{50%{opacity:0}}

  .ticker-track{animation:tick 32s linear infinite}
  @keyframes tick{to{transform:translateX(-50%)}}

  .hero .kicker{animation:rise .7s var(--ease) .05s both}
  .hero h1{animation:rise .7s var(--ease) .15s both}
  .hero .lede{animation:rise .7s var(--ease) .25s both}
  .hero .cta-row{animation:rise .7s var(--ease) .35s both}
  .hero-fig{animation:fade .9s var(--ease) .25s both}

  @keyframes rise{
    from{opacity:0;transform:translateY(16px)}
    to{opacity:1;transform:none}
  }
  @keyframes fade{
    from{opacity:0}
    to{opacity:1}
  }
}

/* ---------- responsive ---------- */

@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:2.5rem}
  .hero{min-height:auto}
  .clubs-grid{grid-template-columns:1fr}
  .event-band{grid-template-columns:1fr}
  .event-date{
    flex-direction:row;
    align-items:baseline;
    gap:.9rem;
    padding-right:0;
    border-right:0;
  }
  .event-cta{flex-direction:row;align-items:center}
  .about-grid{grid-template-columns:1fr;gap:2.5rem}
  .gallery-grid{columns:2}
  .foot-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:620px){
  .head-inner{grid-template-columns:1fr auto}
  .head-cta{display:none}
  .nav-toggle{display:flex;justify-self:end}
  .nav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--bg-2);
    border-bottom:1px solid var(--hair);
    flex-direction:column;
    gap:.2rem;
    padding:.8rem var(--pad) 1.1rem;
  }
  .nav.open{display:flex}
  .nav a{
    padding:.75rem 0;
    font-size:1rem;
    border-bottom:1px solid var(--hair-2);
  }
  .stats-grid{grid-template-columns:1fr 1fr}
  .stat{padding:1.5rem 0}
  .stat:nth-child(3){border-left:0;padding-left:0}
  .gallery-grid{columns:1}
  .foot-grid{grid-template-columns:1fr}
}

/* ---------- page hero ---------- */

.page-hero{
  padding:clamp(3rem,8vw,6rem) 0 clamp(2rem,5vw,3.5rem);
}
.page-hero h1{
  font:600 clamp(2.1rem,5vw,3.2rem)/1.08 var(--sans);
  letter-spacing:-.02em;
  max-width:20ch;
}
.page-hero .lede{
  margin-top:1.4rem;
  color:var(--mut);
  max-width:60ch;
  font-size:1.05rem;
}
.page-hero .kicker{margin-bottom:1.4rem}

/* ---------- club detail ---------- */

.club-hero{padding-bottom:2rem}
.club-hero h1{max-width:none}

.club-detail{padding:0 0 var(--sec)}
.club-detail-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(2.5rem,6vw,4.5rem);
  align-items:start;
}
.club-detail .statement{
  font:600 clamp(1.6rem,3.4vw,2.3rem)/1.25 var(--sans);
  letter-spacing:-.02em;
  max-width:24ch;
}
.club-detail h2,
.club-leads h2,
.club-past h2,
.team-leaders h2,
.team-club h2,
.about-page .statement,
.events-page h2,
.events-past h2,
.contact-grid h2,
.about-stats + section h2{
  font:600 clamp(1.4rem,3vw,2rem)/1.2 var(--sans);
  letter-spacing:-.02em;
  margin-bottom:2rem;
}
.act-list{
  margin-top:1.8rem;
  display:grid;
  gap:1.1rem;
}
.act-list li{
  border:1px solid var(--hair);
  border-radius:12px;
  background:var(--bg-2);
  padding:1.1rem 1.3rem;
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.act-list strong{font:600 1.02rem var(--sans)}
.act-list span{color:var(--mut);font-size:.95rem}

.club-detail-side{display:flex;flex-direction:column;gap:1.4rem}
.club-detail-side .club-fig img{aspect-ratio:3/3.2;object-fit:cover}
.detail-stats{
  border:1px solid var(--hair);
  border-radius:12px;
  background:var(--bg-2);
  padding:1.2rem;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}
.detail-stats li{display:flex;flex-direction:column;gap:.25rem}
.detail-stats .num{font-size:1.4rem}

.club-leads{padding:0 0 var(--sec)}
.club-past{padding:0 0 var(--sec)}

/* ---------- person cards ---------- */

.persons-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}
.person{
  border:1px solid var(--hair);
  border-radius:12px;
  background:var(--bg-2);
  overflow:hidden;
}
.person img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
}
.person figcaption{
  padding:1rem 1.1rem 1.2rem;
  display:flex;
  flex-direction:column;
  gap:.3rem;
}
.person-name{font:600 1.05rem var(--sans)}
.person-role{font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.person-links{
  margin-top:.5rem;
  display:flex;
  gap:.9rem;
  font:500 11px var(--mono);
  letter-spacing:.06em;
}
.person-links a{color:var(--accent)}
.person-links a:hover{opacity:.75}

/* ---------- alumni ---------- */

.alumni-grid{
  columns:3;
  column-gap:1.5rem;
}
.alumni{
  break-inside:avoid;
  margin-bottom:1.5rem;
  border:1px solid var(--hair);
  border-radius:12px;
  background:var(--bg-2);
  overflow:hidden;
}
.alumni img{width:100%;aspect-ratio:4/5;object-fit:cover}
.alumni figcaption{
  padding:.9rem 1.1rem 1.1rem;
  display:flex;
  flex-direction:column;
  gap:.25rem;
}
.alumni-grid-section{padding:0 0 var(--sec)}

/* ---------- events page ---------- */

.events-page{padding:0 0 var(--sec)}
.event-list{display:grid;gap:1.2rem}
.events-page .event-band{grid-template-columns:auto 1fr auto}

.events-past{padding:0 0 var(--sec)}
.past-list{display:grid;gap:.9rem}
.past-row{
  display:grid;
  grid-template-columns:140px 1fr 150px;
  gap:1.5rem;
  align-items:center;
  border:1px solid var(--hair);
  border-radius:12px;
  background:var(--bg-2);
  padding:1rem 1.2rem;
}
.past-row img{
  width:150px;
  height:96px;
  object-fit:cover;
  border-radius:8px;
}
.past-date{font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.past-body h3{font:600 1.1rem var(--sans);margin-bottom:.3rem}
.past-body p{color:var(--mut);font-size:.94rem;max-width:60ch}

/* ---------- gallery page ---------- */

.gallery-page{padding:0 0 var(--sec)}
.gallery-filters{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-bottom:2.2rem;
}
.filter-pill{
  font:500 12px var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--mut);
  background:transparent;
  border:1px solid var(--hair);
  border-radius:999px;
  padding:.5rem 1.1rem;
  cursor:pointer;
  transition:border-color .25s var(--ease),color .25s var(--ease),background-color .25s var(--ease);
}
.filter-pill:hover{border-color:var(--accent);color:var(--ink)}
.filter-pill.is-active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

/* ---------- about page ---------- */

.about-page{padding:0 0 var(--sec)}
.about-page .statement{
  font:600 clamp(1.7rem,3.6vw,2.6rem)/1.2 var(--sans);
  letter-spacing:-.02em;
  max-width:20ch;
  margin-bottom:0;
}
.about-stats{border-top:1px solid var(--hair-2);border-bottom:1px solid var(--hair-2);margin-bottom:var(--sec)}
.about-stats .stats-grid{padding:1.5rem 0}

/* ---------- contact page ---------- */

.contact-grid{padding:0 0 var(--sec)}
.contact-grid-inner{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:clamp(2.5rem,6vw,5rem);
  align-items:start;
}
.contact-info{display:flex;flex-direction:column;gap:1.6rem}
.contact-block{display:flex;flex-direction:column;gap:.4rem}
.contact-block .emk{font:500 11px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.contact-block p{color:var(--mut);line-height:1.9}
.contact-block a{color:var(--ink)}
.contact-block a:hover{color:var(--accent)}
.contact-socials{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem}
.contact-socials a{font:500 12px var(--mono);letter-spacing:.06em;color:var(--accent)}

.contact-form{
  border:1px solid var(--hair);
  border-radius:12px;
  background:var(--bg-2);
  padding:clamp(1.6rem,4vw,2.4rem);
}
.contact-form h2{margin-bottom:1.4rem}
.contact-form .field{margin-bottom:1.1rem}
.contact-form label{display:block;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:.5rem}
.contact-form input,
.contact-form textarea{
  width:100%;
  background:var(--bg);
  color:var(--ink);
  border:1px solid var(--hair);
  border-radius:8px;
  padding:.75rem .9rem;
  font:400 .95rem var(--sans);
  transition:border-color .25s var(--ease);
}
.contact-form input:focus,
.contact-form textarea:focus{border-color:var(--accent)}
.contact-form input:focus-visible,
.contact-form textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.contact-form input::placeholder,
.contact-form textarea::placeholder{color:var(--dim)}
.form-note{font:500 .9rem var(--sans);padding:.8rem 1rem;border-radius:8px;margin-bottom:1.2rem}
.form-note.ok{background:rgba(240,165,58,.12);color:var(--accent);border:1px solid rgba(240,165,58,.4)}
.form-note.err{background:rgba(220,80,60,.12);color:#E8956A;border:1px solid rgba(220,80,60,.4)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- join pill variant ---------- */

.about .statement .accent,
.about-page .statement .accent{color:var(--accent)}

/* ---------- responsive additions ---------- */

@media (max-width:900px){
  .club-detail-grid{grid-template-columns:1fr}
  .persons-grid{grid-template-columns:1fr 1fr}
  .alumni-grid{columns:2}
  .past-row{grid-template-columns:1fr;gap:.8rem}
  .past-row img{width:100%;height:auto}
  .contact-grid-inner{grid-template-columns:1fr}
  .events-page .event-band{grid-template-columns:1fr}
}

@media (max-width:620px){
  .persons-grid{grid-template-columns:1fr}
  .alumni-grid{columns:1}
  .detail-stats{grid-template-columns:1fr 1fr 1fr}
}