/* ==========================================================================
   CSSA — Computer Science Students' Association
   Design system: cream paper, condensed display type, maroon + gold accent
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Source+Serif+4:wght@600;700&family=Work+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --bg:            #efe9dd;
  --bg-card:       #f6f1e6;
  --bg-card-alt:   #ece4d2;
  --ink:           #201c16;
  --ink-soft:      #4a453b;
  --maroon:        #7a1e1e;
  --maroon-dark:   #591313;
  --gold:          #a9822f;
  --gold-line:     #c7a35c;
  --line:          #d9d0bb;
  --radius:        14px;
  --max:           1400px;
  --f-display: 'Anton', sans-serif;
  --f-serif:   'Source Serif 4', serif;
  --f-body:    'Work Sans', sans-serif;
  --f-mono:    'IBM Plex Mono', monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(32,28,22,.05) 1px, transparent 0);
  background-size:22px 22px;
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:600; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

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

:focus-visible{ outline:3px solid var(--maroon); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

/* ---------- Eyebrow / section label ---------- */
.eyebrow{
  display:flex; align-items:center; gap:14px;
  font-family:var(--f-mono);
  font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold);
  margin-bottom:28px;
}
.eyebrow::after{ content:""; flex:1; height:1px; background:var(--gold-line); }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(239,233,221,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
  width:44px; height:44px; border-radius:10px;
  background:var(--maroon); color:#f6efe0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-weight:500; font-size:15px;
  flex:none;
}
.brand-text{ line-height:1.2; }
.brand-text .b1{ font-family:var(--f-serif); font-weight:700; font-size:19px; }
.brand-text .b2{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.03em; color:var(--ink-soft); }
 
.nav{ display:flex; align-items:center; gap:30px; }
.nav a{
  font-size:14.5px; font-weight:500; color:var(--ink);
  padding:6px 0; border-bottom:2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"]{ color:var(--maroon); border-color:var(--maroon); }
.nav-cta{
  background:var(--maroon); color:#f6efe0 !important;
  padding: 14px 32px; border-radius:999px; font-weight:600; font-size:16px;
  border:2px solid var(--maroon);
  letter-spacing: .02em;
}
.nav-cta:hover{ background:var(--maroon-dark); border-color:var(--maroon-dark); }
.nav-toggle{ display:none; }
 
@media (max-width: 880px){
  .nav{ position:fixed; top:72px; right:0; bottom:0; left:0; background:var(--bg); flex-direction:column;
    align-items:flex-start; padding:28px 32px; gap:22px; transform:translateX(100%);
    transition:transform .3s ease; overflow-y:auto; height:calc(100vh - 72px); }
  .nav.open{ transform:translateX(0); }
  .nav a{ font-size:19px; }
  .nav-toggle{
    display:flex; width:42px; height:42px; border-radius:8px; border:1px solid var(--line);
    background:none; align-items:center; justify-content:center; flex-direction:column; gap:5px;
  }
  .nav-toggle span{ width:20px; height:2px; background:var(--ink); display:block; }
}
 
/* ---------- Hero ---------- */
.hero{ padding:52px 0 0; }
.hero h1{
  font-family:var(--f-display);
  text-transform:uppercase;
  font-size:clamp(38px, 7vw, 74px);
  line-height:1.04;
  letter-spacing:.002em;
  max-width:920px;
}
.hero-meta{
  display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:flex-end;
  margin-top:24px; padding-bottom:18px; border-bottom:1px solid var(--line);
}
.hero-sub{ max-width:360px; color:var(--ink-soft); font-size:15.5px; }
.page-links{ display:flex; flex-wrap:wrap; gap:22px; align-items:center; font-size:14px; }
.page-links .label{ color:var(--ink-soft); }
.page-links a{ text-decoration:underline; text-underline-offset:3px; font-weight:500; }
 
.hero-figure{
  margin-top:24px; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line);
}

/* Duotone / pattern placeholder blocks (stand-in for real photography) */
.ph{
  position:relative; overflow:hidden; background:var(--maroon);
  display:flex; align-items:center; justify-content:center;
  color:rgba(246,239,224,.9); font-family:var(--f-mono);
}
.ph svg{ position:absolute; inset:0; width:100%; height:100%; }
.ph .ph-label{
  position:relative; z-index:2; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; background:rgba(32,28,22,.55);
  padding:8px 14px; border-radius:999px; border:1px solid rgba(246,239,224,.35);
}
.ph-hero{ aspect-ratio:16/8; }
.ph-square{ aspect-ratio:1/1; }
.ph-wide{ aspect-ratio:16/9; }
.ph-tall{ aspect-ratio:4/5; }

/* pattern variants — stand-ins for real photography, swap out later */
.ph-circuit{ background-color:var(--maroon);
  background-image:
    linear-gradient(rgba(32,28,22,.35),rgba(32,28,22,.15)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23f6efe0' stroke-opacity='0.35' stroke-width='1.4'%3E%3Cpath d='M10 10h30v30h30v-20h40'/%3E%3Cpath d='M110 110H80V80H50v20H10'/%3E%3Ccircle cx='40' cy='40' r='3'/%3E%3Ccircle cx='80' cy='90' r='3'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Ccircle cx='110' cy='110' r='2'/%3E%3C/g%3E%3C/svg%3E");
  background-size:auto, 120px 120px;
}
.ph-code{ background-color:var(--maroon);
  background-image:
    linear-gradient(rgba(32,28,22,.4),rgba(32,28,22,.2)),
    repeating-linear-gradient(180deg, rgba(246,239,224,.28) 0 2px, transparent 2px 22px),
    linear-gradient(90deg, rgba(246,239,224,.16) 0 42%, transparent 42%);
}
.ph-dotmap{ background-color:var(--maroon);
  background-image:
    radial-gradient(circle at 30% 30%, rgba(246,239,224,.28) 0, transparent 45%),
    radial-gradient(circle, rgba(246,239,224,.5) 1.4px, transparent 1.6px);
  background-size:auto, 16px 16px;
}
.ph-grid{ background-color:var(--maroon);
  background-image:
    linear-gradient(rgba(246,239,224,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246,239,224,.14) 1px, transparent 1px);
  background-size:auto, 26px 26px, 26px 26px;
}

/* member monogram placeholder (stands in for a headshot) */
.avatar-ph{
  aspect-ratio:4/5; background:var(--maroon);
  display:flex; align-items:center; justify-content:center;
  background-image:
    linear-gradient(rgba(32,28,22,.15),rgba(32,28,22,.35)),
    radial-gradient(circle at 50% 32%, rgba(246,239,224,.16) 0, transparent 55%);
}
.avatar-ph .mono{
  font-family:var(--f-display); font-size:44px; color:rgba(246,239,224,.85);
  letter-spacing:.04em;
}

/* ---------- Sections ---------- */
section{ padding:64px 0; }
section.tight{ padding:44px 0; }
.section-head{ margin-bottom:28px; }
.section-title{ font-family:var(--f-serif); font-weight:700; font-size:clamp(26px,3vw,36px); }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:56px; }
.three-col{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media (max-width:900px){ .two-col,.three-col{ grid-template-columns:1fr; } }

/* ---------- Objectives / numbered list ---------- */
.obj-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px 32px; }
@media (max-width:820px){ .obj-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .obj-grid{ grid-template-columns:1fr; } }
.obj{ display:flex; gap:16px; }
.obj-num{
  flex:none; width:28px; height:28px; border-radius:50%;
  background:var(--bg-card-alt); color:var(--maroon);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-size:13px; font-weight:500;
  border:1px solid var(--line);
}
.obj h4{ font-size:17px; margin-bottom:6px; }
.obj p{ color:var(--ink-soft); font-size:14.5px; }

/* ---------- Cards ---------- */
.card{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px;
}
.pillar-card h3{ font-family:var(--f-display); letter-spacing:.02em; font-size:20px; margin-bottom:18px; }
.pillar-list li{ display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line); }
.pillar-list li:first-child{ border-top:none; }
.pillar-num{
  flex:none; width:22px; height:22px; border-radius:50%; background:var(--bg-card-alt);
  color:var(--maroon); font-family:var(--f-mono); font-size:11.5px;
  display:flex; align-items:center; justify-content:center; border:1px solid var(--line);
}
.pillar-list a{ font-weight:500; text-decoration:underline; text-underline-offset:2px; }
.card-link{ margin-top:20px; display:inline-flex; align-items:center; gap:8px; color:var(--maroon); font-weight:600; font-size:14.5px; }
.card-link .dot{
  width:20px; height:20px; border-radius:50%; background:var(--maroon); color:#f6efe0;
  display:flex; align-items:center; justify-content:center; font-size:10px;
}

/* ---------- Team / member grid ---------- */
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:820px){ .team-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .team-grid{ grid-template-columns:1fr; } }
.member{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--maroon); }
.member .ph{ aspect-ratio:4/5; filter:grayscale(1) contrast(1.05); }
.member-info{ position:relative; margin-top:-64px; z-index:2; padding:14px 16px 16px; color:#f6efe0;
  background:linear-gradient(180deg, rgba(32,28,22,0) 0%, rgba(20,17,13,.82) 60%); }
.member-info .name{ font-weight:600; font-size:15px; }
.member-info .role{ font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#e7ddc4; }

/* ---------- Events list ---------- */
.events-tools{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:8px; }
.field label{ display:block; font-size:13px; color:var(--ink-soft); margin-bottom:6px; }
.field select, .field input{
  font-family:var(--f-body); font-size:14.5px; background:none; border:none;
  border-bottom:1px solid var(--ink); padding:6px 2px; min-width:200px;
}
.reset-link{ font-size:13px; text-decoration:underline; margin-top:8px; display:inline-block; color:var(--ink-soft); }

.event-row{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:26px 0; border-bottom:1px solid var(--line);
}
.event-row:first-of-type{ border-top:1px solid var(--line); margin-top:20px; }
.event-meta{ font-family:var(--f-mono); font-size:12.5px; color:var(--maroon); letter-spacing:.04em; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.event-meta .tag{ color:var(--ink-soft); text-transform:uppercase; }
.event-title{ font-family:var(--f-serif); font-weight:700; font-size:22px; margin-top:8px; }
.event-plus{
  flex:none; width:34px; height:34px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:18px;
}
.pagination{ display:flex; align-items:center; gap:14px; margin-top:26px; }
.pagination .num{
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-family:var(--f-mono);
}
.pagination .num.active{ background:var(--maroon); color:#f6efe0; }
.events-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; flex-wrap:wrap; gap:16px; }

/* ---------- Statement / duotone photo section ---------- */
.statement{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
@media (max-width:900px){ .statement{ grid-template-columns:1fr; } }
.statement h2{
  font-family:var(--f-display); text-transform:uppercase; font-size:clamp(34px,5vw,58px); line-height:1.05;
}
.statement p{ color:var(--ink-soft); margin-top:18px; max-width:46ch; }
.statement p + p{ margin-top:14px; }
.globe-wrap{ display:flex; justify-content:center; }
.globe{ width:min(420px,100%); aspect-ratio:1/1; border-radius:50%; overflow:hidden; }

/* ---------- Footer ---------- */
.site-footer{ padding:0 0 40px; }
.footer-card{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 36px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.social{ display:flex; gap:12px; }
.social a{
  width:38px; height:38px; border-radius:8px; background:var(--maroon); color:#f6efe0;
  display:flex; align-items:center; justify-content:center; font-size:15px;
}
.social a:hover{ background:var(--maroon-dark); }
.copyright{ text-align:center; font-size:12.5px; color:var(--ink-soft); margin-top:22px; }

/* ---------- Misc ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; background:var(--maroon); color:#f6efe0;
  padding:13px 26px; border-radius:999px; font-weight:600; font-size:14.5px; border:2px solid var(--maroon);
}
.btn:hover{ background:var(--maroon-dark); border-color:var(--maroon-dark); }
.btn-outline{ background:none; color:var(--ink); border-color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--bg); }

.page-hero{ padding:56px 0 40px; border-bottom:1px solid var(--line); }
.page-hero .eyebrow{ margin-bottom:18px; }
.page-hero h1{ font-family:var(--f-display); text-transform:uppercase; font-size:clamp(32px,5.5vw,56px); line-height:1.04; }
.page-hero p{ max-width:56ch; color:var(--ink-soft); margin-top:18px; font-size:16px; }

.form-grid{ display:grid; gap:20px; max-width:620px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }
.form-grid label{ font-size:13.5px; color:var(--ink-soft); display:block; margin-bottom:6px; }
.form-grid input, .form-grid textarea{
  width:100%; font-family:inherit; font-size:15px; background:var(--bg-card);
  border:1px solid var(--line); border-radius:8px; padding:12px 14px;
}
.form-grid textarea{ resize:vertical; min-height:130px; }

.info-list{ display:grid; gap:18px; }
.info-list .row{ display:flex; gap:14px; align-items:flex-start; }
.info-list .k{ font-family:var(--f-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--gold); flex:none; width:110px; padding-top:2px; }

.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:200px; gap:18px; }
@media (max-width:820px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .gallery-grid{ grid-template-columns:1fr; } }
.gallery-grid .ph{ border-radius:10px; border:1px solid var(--line); height:100%; width:100%; }
.g-tall{ grid-row:span 2; }

.filter-bar{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:32px; }
.filter-chip{
  font-family:var(--f-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:.04em;
  padding:9px 16px; border:1px solid var(--line); border-radius:999px; background:var(--bg-card);
}
.filter-chip.active{ background:var(--maroon); color:#f6efe0; border-color:var(--maroon); }

.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:left; }
@media (max-width:760px){ .stat-row{ grid-template-columns:1fr 1fr; } }
.stat-num{ font-family:var(--f-display); font-size:clamp(30px,4vw,44px); color:var(--maroon); }
.stat-label{ font-family:var(--f-mono); font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-top:4px; }

/* ---------- Hero image strip (events-style thumbnail row) ---------- */
.hero-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:760px){ .hero-strip{ grid-template-columns:repeat(2,1fr); } }
.hero-strip .ph{ border-radius:10px; aspect-ratio:1/1; }

/* ---------- Reach-us box ---------- */
.reach-box .eyebrow{ margin-bottom:14px; justify-content:flex-start; }
.reach-box .eyebrow::after{ max-width:140px; }
.reach-item + .reach-item{ margin-top:16px; }
.reach-item .rk{ font-weight:600; font-size:15px; }
.reach-item .rv{ font-size:14.5px; color:var(--ink-soft); margin-top:2px; }
.reach-item .rv a{ text-decoration:underline; }

/* ---------- FAQ / list rows (reuses event-row visual language) ---------- */
.list-row{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px 0; border-bottom:1px solid var(--line); cursor:default; }
.list-row:first-of-type{ border-top:1px solid var(--line); margin-top:20px; }
.list-tags{ font-family:var(--f-mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); display:flex; gap:8px; flex-wrap:wrap; }
.list-tags span:not(:last-child)::after{ content:"|"; margin-left:8px; color:var(--line); }
.list-title{ font-family:var(--f-serif); font-weight:700; font-size:21px; margin-top:8px; }
.list-plus{ flex:none; width:34px; height:34px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:18px; }

/* ---------- Sticky side-nav layout ---------- */
.side-layout{ display:grid; grid-template-columns:220px 1fr; gap:56px; align-items:flex-start; }
@media (max-width:880px){ .side-layout{ grid-template-columns:1fr; } }
.side-nav{ position:sticky; top:104px; }
@media (max-width:880px){ .side-nav{ position:static; display:flex; overflow-x:auto; gap:8px; padding-bottom:8px; margin-bottom:12px; } }
.side-nav .side-title{ font-family:var(--f-display); font-size:15px; letter-spacing:.04em; margin-bottom:16px; color:var(--ink-soft); }
@media (max-width:880px){ .side-nav .side-title{ display:none; } }
.side-nav a{
  display:block; padding:10px 0; font-size:14.5px; font-weight:500; color:var(--ink-soft);
  border-left:2px solid var(--line); padding-left:16px; margin-bottom:2px;
}
.side-nav a:hover{ color:var(--ink); }
.side-nav a.active{ color:var(--maroon); border-color:var(--maroon); font-weight:600; }
@media (max-width:880px){
  .side-nav a{ border-left:none; border-bottom:2px solid var(--line); padding:8px 14px; white-space:nowrap; flex:none; }
}
.side-section{ scroll-margin-top:100px; padding-bottom:64px; border-bottom:1px solid var(--line); margin-bottom:64px; }
.side-section:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.side-section h3.section-title{ margin-bottom:16px; }

/* ---------- Project cards ---------- */
.project-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px 28px; }
@media (max-width:880px){ .project-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .project-grid{ grid-template-columns:1fr; } }
.project-card .pc-date{ font-family:var(--f-mono); font-size:12px; color:var(--gold); letter-spacing:.04em; margin-bottom:8px; }
.project-card .pc-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.project-card h4{ font-family:var(--f-serif); font-weight:700; font-size:18px; line-height:1.3; }
.project-card .pc-arrow{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--maroon); color:#f6efe0; display:flex; align-items:center; justify-content:center; font-size:13px; }
.project-card p{ color:var(--ink-soft); font-size:14px; margin-top:10px; }
.project-card .list-tags{ margin-top:14px; }

/* ---------- Flat-color lead/VP cards ---------- */
.member-color .avatar-ph{ background:var(--card-color, var(--maroon)); background-image:linear-gradient(rgba(32,28,22,.1),rgba(32,28,22,.28)); }
.member-color{ background:var(--card-color, var(--maroon)); }
.color-1{ --card-color:#a8574f; }
.color-2{ --card-color:#8a7a3a; }
.color-3{ --card-color:#9c5da0; }
.color-4{ --card-color:#4f8a5f; }
.color-6{ --card-color:#7a1e1e; }

/* ---------- Sticky Column About Layout ---------- */
.two-col-layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 80px;
  align-items: start;
}

.about-left-sticky {
  position: sticky;
  top: 120px;
  align-self: start;
}

.about-right-scroll {
  display: flex;
  flex-direction: column;
  gap: 88px;
}

.scroll-content-block {
  padding-bottom: 24px;
}

.about-right-scroll .obj-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.about-right-scroll .team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

@media (max-width: 1024px) {
  .two-col-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .about-left-sticky {
    position: static;
  }
  .about-right-scroll {
    gap: 56px;
  }
  .about-right-scroll .obj-grid {
    grid-template-columns: 1fr;
  }
  .about-right-scroll .team-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .about-right-scroll .team-grid {
    grid-template-columns: 1fr;
  }
}


/* ---------- Event Row Accordion Styles ---------- */
.event-row {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
  cursor: pointer;
}
.event-row .event-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.event-row .event-plus {
  font-size: 24px;
  transition: transform 0.3s ease;
  flex: none;
}
.event-row.open .event-plus {
  transform: rotate(45deg);
}
.event-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, margin-top 0.3s ease;
  padding: 0;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.6;
}
.event-row.open .event-accordion-body {
  max-height: 200px;
  margin-top: 14px;
}

/* ---------- Page Fade-In Transition ---------- */
body {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}
body.loaded {
  opacity: 1;
}

/* ---------- Global Interactive Transitions ---------- */
a, button, .nav-cta, .card, .event-row, .accordion-icon, .nav-toggle {
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Card hover animation */
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(32, 28, 22, 0.04);
}

/* ---------- Hamburger to X Cross Transformation ---------- */
.nav-toggle span {
  transition: transform 0.3s ease, opacity 0.3s ease;
  position: relative;
}

.nav-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- List Row Accordion Styles ---------- */
.list-row {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
  cursor: pointer;
}
.list-row .list-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.list-row .list-plus {
  font-size: 24px;
  transition: transform 0.3s ease;
  flex: none;
}
.list-row.open .list-plus {
  transform: rotate(45deg);
}
.list-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, margin-top 0.3s ease;
  padding: 0;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.6;
}
.list-row.open .list-accordion-body {
  max-height: 200px;
  margin-top: 14px;
}