/* ==========================================================================
   Armenian Club of Purdue / Purdue ASA
   Design system: poster-native, built to match the @purduearmenians Instagram.
   Every palette value below was sampled off their own flyers, not eyeballed:
     blush  #FAF2EF  (My Sweet Land, exec-board posts)
     blush  #F5EAE4  (Xorovats cookout flyer)
     crimson #A72434 (Xorovats headline)
     crimson #C02432 (pomegranate roundel)
     ink     #261712 (flyer body copy)
   Type: Playfair Display (display) + Pinyon Script (one accent) + Inter (UI).
   Light-first, because the Instagram is. Dark theme is a wine-black variant.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* Brand constants (identical in both themes) */
  --pom:         #A72434;   /* poster crimson */
  --pom-bright:  #C02432;   /* roundel crimson */
  --pom-deep:    #8E1D2B;
  --arm-red:     #D90012;
  --arm-blue:    #0033A0;
  --arm-gold:    #F2A800;

  /* Type scale */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.1875rem;
  --fs-xl: 1.5rem;
  --fs-2xl: clamp(1.85rem, 1.2rem + 2.4vw, 2.9rem);
  --fs-3xl: clamp(2.5rem, 1.5rem + 3.4vw, 4rem);

  /* Poster label: wide-tracked caps, the flyers' most repeated device */
  --track-label: .22em;

  /* Spacing rhythm (4/8) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;

  --shell: 1180px;
  --dur: 240ms;
  --dur-slow: 420ms;
  --ease: cubic-bezier(.22,.61,.36,1);

  --z-nav: 100;
  --z-scrim: 90;
  --z-header: 80;
}

/* Light is the default: the Instagram is a blush-paper brand. */
[data-theme="light"] {
  --bg:            #FAF2EF;   /* sampled */
  --bg-alt:        #F5EAE4;   /* sampled */
  --surface:       #FFFFFF;
  --surface-2:     #FDF7F5;
  --text:          #241310;   /* 16.4:1 on --bg */
  --text-muted:    #5C4448;   /*  8.0:1 on --bg */
  --text-faint:    #6B5054;   /*  6.6:1 on --bg, 6.1:1 on --bg-alt */
  --border:        #EBD8D2;
  --border-strong: #DCC0B9;

  --accent:        var(--pom);      /* 6.5:1 on --bg */
  --accent-soft:   var(--pom-deep); /* darker on hover, keeps white legible */
  --on-accent:     #FFFFFF;         /* 7.1:1 on --accent */
  --accent-wash:   rgba(167,36,52,.07);
  --accent-line:   rgba(167,36,52,.26);

  --ring:          #A72434;
  --shadow:        0 1px 2px rgba(84,32,30,.07), 0 18px 40px -18px rgba(84,32,30,.28);
  --shadow-sm:     0 1px 2px rgba(84,32,30,.10);
  --shadow-photo:  0 2px 4px rgba(84,32,30,.10), 0 22px 44px -20px rgba(84,32,30,.42);
  --scrim:         rgba(38,18,16,.44);
  --header-bg:     rgba(250,242,239,.86);

  --ornament:      rgba(167,36,52,.16);
}

[data-theme="dark"] {
  --bg:            #150A0C;
  --bg-alt:        #1B0E10;
  --surface:       #201113;
  --surface-2:     #2A171A;
  --text:          #F7ECE9;   /* 16.8:1 on --bg */
  --text-muted:    #D9C4C2;   /* 11.7:1 on --bg */
  --text-faint:    #B49A99;   /*  7.4:1 on --bg, 7.0:1 on --surface */
  --border:        #38211F;
  --border-strong: #4C2C2A;

  --accent:        #E8949C;   /* 8.5:1 on --bg */
  --accent-soft:   #EFA9AF;
  --on-accent:     #2A0F12;   /* 7.8:1 on --accent */
  --accent-wash:   rgba(232,148,156,.11);
  --accent-line:   rgba(232,148,156,.28);

  --ring:          #E8949C;
  --shadow:        0 1px 2px rgba(0,0,0,.5), 0 18px 40px -16px rgba(0,0,0,.8);
  --shadow-sm:     0 1px 2px rgba(0,0,0,.45);
  --shadow-photo:  0 2px 4px rgba(0,0,0,.5), 0 22px 44px -20px rgba(0,0,0,.85);
  --scrim:         rgba(8,4,5,.7);
  --header-bg:     rgba(21,10,12,.84);

  --ornament:      rgba(232,148,156,.16);
}

/* --- Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

body.nav-open { overflow: hidden; }

h1, h2, h3 {
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

/* Any element given `display` by a class outranks the user-agent
   `[hidden] { display: none }`, so hiding the sign-in gate, the officers grid
   or the email list left them on screen. Make `hidden` mean hidden. */
[hidden] { display: none !important; }

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

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

::selection { background: var(--accent); color: var(--on-accent); }

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -80px;
  z-index: 1000;
  padding: var(--sp-3) var(--sp-5);
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 999px;
  font-weight: 600;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
@media (min-width: 768px) { .shell { padding-inline: var(--sp-7); } }

/* --- Poster ornaments -----------------------------------------------------
   The flyers lean on three marks: a four-point sparkle, hairline rules that
   flank a caps label, and faint contour waves behind the whole sheet. */
.sparkle {
  position: absolute;
  color: var(--ornament);
  pointer-events: none;
  z-index: 0;
}
.sparkle svg { width: 100%; height: 100%; }

.waves {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  color: var(--ornament);
  opacity: .85;
}
.waves svg { position: absolute; width: 140%; height: 100%; left: -20%; }

/* Anything that must sit above the ornament layer. */
.section > .shell, .section-head, .hero-copy-inner { position: relative; z-index: 1; }

/* --- Shared type ---------------------------------------------------------- */
/* The flyers' signature: — WIDE CAPS LABEL — with a hairline on each side. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-4);
}
.eyebrow::before,
.eyebrow::after {
  content: "";
  height: 1px;
  background: var(--accent-line);
  flex: 1;
  max-width: 34px;
}
.eyebrow::before { max-width: 22px; }
/* Centered heads let the rules run the full width, poster-style. */
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .eyebrow::before,
.section-head--center .eyebrow::after { max-width: 60px; }

.section-title { font-size: var(--fs-2xl); margin-bottom: var(--sp-4); }
.section-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}

.prose {
  color: var(--text-muted);
  max-width: 62ch;
  margin-bottom: var(--sp-4);
}
.prose:last-child { margin-bottom: 0; }

/* Inline link in body copy. The global reset makes links inherit colour and
   drop their underline, so they are invisible without this. Shared with
   .events-note so the About link and the calendar link stay identical. */
.prose a,
.events-note a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness var(--dur) var(--ease);
}
.prose a:hover,
.events-note a:hover { text-decoration-thickness: 2px; }

.section { position: relative; padding-block: var(--sp-9); }
.section-alt { background: var(--bg-alt); border-block: 1px solid var(--border); }
.section-head { margin-bottom: var(--sp-7); }
.section-head--center {
  text-align: center;
  margin-inline: auto;
  max-width: 640px;
}
.section-head--center .prose { margin-inline: auto; }
.section-lede { margin-top: var(--sp-2); }

/* 108 rather than the full 128: two stacked sections put their padding back to
   back, so the boundary is always double whatever this is. */
@media (min-width: 1024px) { .section { padding-block: 108px; } }

/* --- Tricolor rule -------------------------------------------------------- */
.tricolor { display: flex; height: 3px; width: 100%; }
.tricolor i { flex: 1; }
.tricolor i:nth-child(1) { background: var(--arm-red); }
.tricolor i:nth-child(2) { background: var(--arm-blue); }
.tricolor i:nth-child(3) { background: var(--arm-gold); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  --btn-py: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 46px;
  padding: var(--btn-py) var(--sp-6);
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform 140ms var(--ease);
  touch-action: manipulation;
}
.btn:active { transform: scale(.975); }

.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-soft); }

.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--accent-wash); border-color: var(--accent); color: var(--accent); }

.btn-sm { min-height: 44px; padding: 11px var(--sp-4); font-size: var(--fs-xs); }
.btn-lg { min-height: 54px; padding: 16px var(--sp-7); font-size: var(--fs-base); }
.btn-block { width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn[disabled]:active { transform: none; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--accent-wash); border-color: var(--accent); color: var(--accent); }

#theme-toggle .icon-sun { display: none; }
[data-theme="light"] #theme-toggle .icon-sun { display: block; }
[data-theme="light"] #theme-toggle .icon-moon { display: none; }

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  padding-top: env(safe-area-inset-top);
}
.site-header.is-scrolled { border-bottom-color: var(--border); }

/* Equal outer tracks keep the brand optically centred regardless of how much
   sits on the right. `auto` in the middle lets the brand keep its natural
   width instead of being squeezed. */
/* minmax(0, 1fr), not 1fr: a bare `1fr` is `minmax(auto, 1fr)`, so the right
   column refuses to shrink below its content and steals width from the left,
   which pushed the brand ~35px off centre. */
.header-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-4);
  min-height: 72px;
}

.header-left { justify-self: start; display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.header-right { justify-self: end; display: flex; align-items: center; gap: var(--sp-2); }

.brand {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 44px;
}

/* Live section label next to the menu button, mobile only. */
.current-section {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 8ch;
}
.current-section:empty { display: none; }
.brand-mark { color: var(--pom-bright); flex: none; }
[data-theme="dark"] .brand-mark { color: var(--accent); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}
.brand-sub {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
}

.nav-desktop { display: none; gap: var(--sp-6); }
.nav-desktop a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  transition: color var(--dur) var(--ease);
}
.nav-desktop a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 18px;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav-desktop a:hover, .nav-desktop a.is-active { color: var(--text); }
.nav-desktop a:hover::after, .nav-desktop a.is-active::after { transform: scaleX(1); }

/* Mobile: menu + label on the left, brand centred, Join on the right. The
   flag and theme switch move into the drawer at this width. */
.nav-cta { display: inline-flex; }

/* 390px has to carry menu + label + brand + Join. Every part is trimmed so the
   centred brand never collides with the label on its left. */
@media (max-width: 899px) {
  .header-right > .flag-chip,
  .header-right > .theme-toggle { display: none; }
  .header-inner { gap: var(--sp-2); padding-inline: var(--sp-4); }
  .header-left { gap: var(--sp-2); }
  .brand { gap: var(--sp-2); }
  .brand-name { font-size: 0.875rem; }
  .brand-sub { font-size: 0.5rem; letter-spacing: .16em; }
  .brand-mark svg { width: 28px; height: 28px; }
  .current-section { max-width: 6ch; font-size: 0.5625rem; letter-spacing: .12em; }
  .nav-cta { padding-inline: var(--sp-4); }
}
/* Very narrow: the section label is the first thing to go. */
@media (max-width: 380px) {
  .current-section { display: none; }
}

/* Armenian flag in the utility bar. Rounded, hairline-framed so it reads as a
   chip rather than a loose image. */
.flag-chip {
  display: inline-flex;
  flex: none;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
  line-height: 0;
}
.flag-chip svg { display: block; }

/* Desktop is brand-left with everything on the right. The centred-brand version
   was tried and dropped: it only cleared the nav above 1400px, so it changed
   shape halfway down the range of real monitors. The centred layout survives on
   mobile, where there are only three things in the bar. */
@media (min-width: 900px) {
  .nav-desktop { display: flex; gap: var(--sp-5); }
  .nav-toggle { display: none; }
  .current-section { display: none; }
  .header-inner { grid-template-columns: auto 1fr; gap: var(--sp-6); }
  .header-left { display: none; }
  .brand { justify-self: start; grid-column: 1; }
  .header-right { grid-column: 2; gap: var(--sp-3); }
}

/* --- Mobile nav ----------------------------------------------------------- */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-scrim);
  background: var(--scrim);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.nav-scrim.is-open { opacity: 1; }

.mobile-nav {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: var(--z-nav);
  width: min(86vw, 340px);
  padding: calc(var(--sp-5) + env(safe-area-inset-top)) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom));
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease);
  overflow-y: auto;
}
.mobile-nav.is-open { transform: translateX(0); }

.mobile-nav-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.mobile-nav-head .eyebrow { margin-bottom: 0; margin-right: auto; }
.mobile-nav-head .eyebrow::before { display: none; }
.mobile-nav-head .eyebrow::after { max-width: 18px; }
.mobile-nav-head .flag-chip { flex: none; }

.mobile-nav > a:not(.mobile-cta) {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding-inline: var(--sp-3);
  border-radius: var(--radius-sm);
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-size: 1.35rem;
  font-weight: 500;
  border-bottom: 1px solid var(--border);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mobile-nav > a:not(.mobile-cta):hover { background: var(--accent-wash); color: var(--accent); }
.mobile-cta { margin-top: var(--sp-5); }

/* --- Hero ------------------------------------------------------------------
   Split layout stays: copy on solid blush, photo in its own panel, undimmed.
   The source crop is 1021x571 and the panel is sized to stay at or under it,
   so the photograph never upscales. */
.hero {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  background: var(--bg);
  overflow: hidden;
}

.hero-media { margin: 0; order: -1; position: relative; }
.hero-media picture { display: block; height: 100%; }
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 38%;
}

.hero-copy { display: flex; align-items: center; position: relative; }
.hero-copy-inner {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: var(--sp-8) var(--sp-5);
}
@media (min-width: 768px) { .hero-copy-inner { padding-inline: var(--sp-7); } }

@media (min-width: 900px) {
  .hero {
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
    align-items: stretch;
    min-height: 520px;
    max-height: 600px;
  }
  .hero-media { order: 0; }
  .hero-copy-inner {
    max-width: calc(var(--shell) / 2 + 40px);
    margin-inline: auto 0;
    padding-block: var(--sp-7);
    padding-right: var(--sp-7);
  }
}

/* Mobile: the copy rides up over the bottom of the photo instead of sitting in
   its own band. The block carries a blush gradient that is transparent where it
   crosses the image and solid by the time body copy starts, so the photograph
   stays visible and the text never sits on raw image detail. The heading also
   takes a soft halo, since it is the part actually over the picture. */
@media (max-width: 899px) {
  .hero-media img { aspect-ratio: 3 / 2; height: auto; }

  /* Dissolve the photograph's own bottom edge into the page instead of
     stopping it on a hard line. The copy then rides up into that dissolve, so
     it reads on near-solid blush while the picture is still visible behind and
     around it. Cheaper and steadier than trying to make text legible over
     whatever pixels happen to be there. */
  .hero-media::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 190px;
    pointer-events: none;
    background: linear-gradient(to bottom,
                rgba(250,242,239,0) 0%,
                rgba(250,242,239,.55) 42%,
                rgba(250,242,239,.92) 78%,
                var(--bg) 100%);
  }

  .hero-copy { margin-top: -104px; }
  .hero-copy-inner { padding-top: var(--sp-4); }

  /* The heading is the only part far enough up to graze live image detail. */
  .hero-title { text-shadow: 0 1px 10px rgba(250,242,239,.75); }
  .hero-copy .eyebrow { text-shadow: 0 1px 8px rgba(250,242,239,.9); }
}

@media (max-width: 899px) {
  [data-theme="dark"] .hero-media::after {
    background: linear-gradient(to bottom,
                rgba(21,10,12,0) 0%,
                rgba(21,10,12,.58) 42%,
                rgba(21,10,12,.93) 78%,
                var(--bg) 100%);
  }
  [data-theme="dark"] .hero-title { text-shadow: 0 1px 10px rgba(21,10,12,.85); }
  [data-theme="dark"] .hero-copy .eyebrow { text-shadow: 0 1px 8px rgba(21,10,12,.9); }
}

.hero-title {
  font-size: var(--fs-3xl);
  max-width: 13ch;
  margin-bottom: var(--sp-5);
}
/* "Armenians" gets the flyers' script treatment, the way "My Sweet Land" does.
   One script word per page, never more. */
.hero-title .script {
  display: block;
  font-family: "Pinyon Script", "Playfair Display", ui-serif, Georgia, cursive;
  font-weight: 400;
  font-style: normal;
  color: var(--accent);
  font-size: 1.34em;
  line-height: .96;
  letter-spacing: .01em;
  padding-block: .06em;
}

.hero-lede {
  font-size: var(--fs-lg);
  color: var(--text-muted);
  max-width: 46ch;
  margin-bottom: var(--sp-6);
}

.hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* --- Instagram feed ------------------------------------------------------- */
.feed-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.feed-head .section-title { margin-bottom: 0; }

.feed-lede { margin-top: var(--sp-3); margin-bottom: 0; font-size: var(--fs-sm); }

/* 4x2 on desktop: seven posts plus the "view on Instagram" tile fill it
   exactly, no ragged last row. */
.feed-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (min-width: 640px)  { .feed-grid { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } }

/* Flyers are already the artwork. Frame them like prints, do not tint them. */
.feed-item a {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.feed-item a:hover { box-shadow: var(--shadow-photo); transform: translateY(-3px); }
.feed-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.feed-item a:hover img { transform: scale(1.04); }
/* Hairline frame instead of the old blanket gradient, which was flattening
   the flyers into grey rectangles. */
.feed-item a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 1px solid var(--border);
  border-radius: inherit;
  pointer-events: none;
}
.feed-item a::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  z-index: 1;
  background: linear-gradient(to top, rgba(30,10,12,.82) 0%, rgba(30,10,12,.42) 45%, transparent 100%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.feed-item a:hover::after, .feed-item a:focus-visible::after { opacity: 1; }

.feed-meta {
  position: absolute;
  left: var(--sp-3);
  bottom: var(--sp-3);
  z-index: 2;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.feed-item a:hover .feed-meta, .feed-item a:focus-visible .feed-meta { opacity: 1; transform: none; }
.feed-date {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #FBF3F1;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
/* --- "View on Instagram" tile --------------------------------------------
   Last cell of the grid. A real post sits underneath at heavy blur so the tile
   reads as more-of-this instead of a gap, with a crimson wash over it to keep
   the label at full contrast whatever the photo underneath is doing. */
.feed-more a::after { content: none; }
/* The source file is already blurred, so this only adds a slow drift on hover. */
.feed-more img { transform: scale(1.06); transition: transform var(--dur-slow) var(--ease); }
.feed-more a:hover img { transform: scale(1.12); }

.feed-more-inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-4);
  text-align: center;
  /* Light enough that the blurred room still shows through (the point is to
     suggest there is more to see), dark enough to hold white text. */
  background: color-mix(in srgb, var(--pom) 64%, transparent);
  color: #FFF;
  text-shadow: 0 1px 6px rgba(60,10,16,.55);
  transition: background-color var(--dur) var(--ease);
}
.feed-more a:hover .feed-more-inner {
  background: color-mix(in srgb, var(--pom) 74%, transparent);
}
.feed-more-mark { color: #FFF; opacity: .95; }
.feed-more-title {
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
}
.feed-more-sub {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .85;
  line-height: 1.4;
}

.feed-badge {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(20,8,10,.58);
  color: #FFF;
  backdrop-filter: blur(4px);
}

/* --- About ---------------------------------------------------------------- */
.about-grid { display: grid; gap: var(--sp-7); }
@media (min-width: 900px) {
  .about-grid { grid-template-columns: 1.05fr .95fr; gap: var(--sp-9); align-items: start; }
}

/* Poster photo frame: white mat, soft drop shadow. Straight off the flyers. */
.about-figure { margin: 0; }
.about-figure picture {
  display: block;
  padding: 10px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-photo);
}
.about-figure img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.about-figure figcaption {
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  font-style: italic;
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  color: var(--text-faint);
  text-align: center;
}

/* Pull quote, set like the flyers' closing line. */
.pull-quote {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--text);
  text-align: center;
}

/* --- Faded section backdrop ------------------------------------------------
   One photograph behind a section, washed back until it is texture rather than
   subject. The veil is what makes it safe: copy sits on near-solid page colour
   whatever the image underneath happens to be doing, so nothing has to gamble
   on contrast. */
.section-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.section-bg picture, .section-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.section-bg-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
              var(--bg-alt) 0%,
              color-mix(in srgb, var(--bg-alt) 84%, transparent) 18%,
              color-mix(in srgb, var(--bg-alt) 84%, transparent) 82%,
              var(--bg-alt) 100%);
}
/* Sections on the plain background fade toward that instead. */
.section:not(.section-alt) > .section-bg .section-bg-veil,
.cta-band > .section-bg .section-bg-veil {
  background: linear-gradient(to bottom,
              var(--bg) 0%,
              color-mix(in srgb, var(--bg) 84%, transparent) 18%,
              color-mix(in srgb, var(--bg) 84%, transparent) 82%,
              var(--bg) 100%);
}

/* Backdrops that only make sense with room to breathe. Narrow screens get the
   same photo as a framed image in the flow instead. */
.section-bg--wide { display: none; }
.narrow-only { display: block; }
@media (min-width: 1024px) {
  .section-bg--wide { display: block; }
  .narrow-only { display: none; }
}

.wwd-main { position: relative; z-index: 1; }

/* Credit line for a photo that is only ever a backdrop. */
.section-credit {
  margin-top: var(--sp-6);
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--text-faint);
  text-align: center;
}

/* --- Cards ---------------------------------------------------------------- */
.cards { display: grid; gap: var(--sp-4); }
@media (min-width: 640px)  { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } }

.card {
  position: relative;
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover {
  border-color: var(--accent-line);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
/* Serif index numeral over a hairline, the way the flyers set "May 2" and
   "4:00 PM". Replaces the icon roundels, which read as generic UI furniture
   and had nothing to do with the club's own design language. */
.card-num {
  display: block;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-size: 1.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--accent);
}
.card h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.card p { color: var(--text-muted); font-size: var(--fs-sm); }

/* --- Events ----------------------------------------------------------------
   Each row reads like the flyer's date block: serif day over a caps month. */
.events { display: grid; gap: var(--sp-4); }

.event {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  align-items: center;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.event:hover { border-color: var(--accent-line); box-shadow: var(--shadow-sm); }
@media (min-width: 768px) {
  .event { grid-template-columns: 116px 1fr auto; gap: var(--sp-6); }
}

.event-date {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
}
@media (min-width: 768px) {
  .event-date {
    align-items: center;
    text-align: center;
    padding-right: var(--sp-5);
    border-right: 1px solid var(--border);
  }
}
.event-month {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
}
.event-day {
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-size: 1.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.event-year {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.event h3 { font-size: var(--fs-lg); margin-bottom: 3px; }
.event h3 em { font-style: italic; font-weight: 500; }
.event-meta { color: var(--text-muted); font-size: var(--fs-sm); }

/* Poster-framed, same white mat as the About photo. Source is 1350x900, and
   the frame is capped at 1080 so it always downscales. */
.events-figure {
  margin: var(--sp-7) auto 0;
  max-width: 1080px;
}
.events-figure picture {
  display: block;
  padding: 10px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-photo);
}
.events-figure img { width: 100%; height: auto; border-radius: 4px; }
.events-figure figcaption {
  margin-top: var(--sp-4);
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--text-faint);
  text-align: center;
}

.events-note {
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-align: center;
}

/* --- Join ----------------------------------------------------------------- */
.join-grid { display: grid; gap: var(--sp-8); }
@media (min-width: 950px) {
  .join-grid { grid-template-columns: 1.05fr .95fr; gap: var(--sp-9); align-items: start; }
}

.channels { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }

.channel {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 76px;
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.channel:hover { border-color: var(--accent-line); transform: translateX(4px); }
.channel-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--accent-line);
  background: var(--accent-wash);
  color: var(--accent);
}
.channel-icon svg { width: 21px; height: 21px; }
.channel-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.channel-text strong { font-weight: 600; font-size: var(--fs-base); }
.channel-text span { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.4; }
.channel-arrow { margin-left: auto; flex: none; color: var(--text-faint); transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.channel:hover .channel-arrow { color: var(--accent); transform: translate(2px, -2px); }

/* --- Officers --------------------------------------------------------------
   Portrait over a caps role and a serif name, echoing the club's own officer
   slides on Instagram. */
/* Flex rather than grid: the board is 1 person some years and 9 the next, and
   a fixed column count strands a lone officer in the left column. Centred wrap
   looks deliberate at any count. */
.officers-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-5);
}
@media (min-width: 700px) { .officers-grid { gap: var(--sp-6); } }

.officer {
  flex: 0 1 clamp(150px, 40vw, 216px);
  text-align: center;
}

.officer-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  margin-bottom: var(--sp-4);
  padding: 8px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-photo);
  overflow: hidden;
}
.officer-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}
/* No photo yet, or a dead URL: fall back to a monogram rather than a broken
   image icon. The board changes every spring and photos lag behind. */
.officer-photo.is-monogram {
  display: grid;
  place-items: center;
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  box-shadow: none;
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .02em;
}

.officer-role {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px;
}
.officer-name {
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.2;
}
.officer-note {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.officer-mail {
  display: inline-block;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-faint);
  word-break: break-word;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease);
}
.officer-mail:hover { color: var(--accent); }

.officers-empty, .contact-empty {
  margin-top: var(--sp-5);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.officers-empty a, .contact-empty a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Officer email list (Join section) ------------------------------------ */
.contact-card {
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
@media (min-width: 768px) { .contact-card { padding: var(--sp-7); } }

.officer-emails { display: grid; gap: var(--sp-2); }
.officer-email-row {
  display: grid;
  gap: 2px;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.officer-email-row:hover { border-color: var(--accent-line); background: var(--accent-wash); }
.officer-email-role {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
}
.officer-email-name {
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-weight: 700;
  font-size: var(--fs-base);
}
.officer-email-addr { font-size: var(--fs-sm); color: var(--text-muted); word-break: break-word; }

.form-title { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.form-sub { color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-6); }

.field input, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px var(--sp-4);
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 1rem;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { resize: vertical; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field input:hover, .field textarea:hover { border-color: var(--text-faint); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #C42A2A; }
[data-theme="dark"] .field input[aria-invalid="true"] { border-color: #FF8A8A; }

/* --- FAQ ------------------------------------------------------------------ */
.faq-shell { max-width: 820px; }
.faq { border-top: 1px solid var(--border); }

.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 64px;
  padding-block: var(--sp-4);
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-size: var(--fs-lg);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }

.chev {
  position: relative;
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--accent);
  transition: transform var(--dur) var(--ease);
}
.chev::before, .chev::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 2px;
  transition: opacity var(--dur) var(--ease);
}
.chev::before { top: 9px; left: 2px; width: 16px; height: 2px; }
.chev::after  { left: 9px; top: 2px; width: 2px; height: 16px; }
.faq details[open] .chev { transform: rotate(90deg); }
.faq details[open] .chev::after { opacity: 0; }

.faq-body { padding-bottom: var(--sp-5); }
.faq-body p { color: var(--text-muted); max-width: 68ch; }
.faq details[open] .faq-body { animation: faq-in var(--dur) var(--ease); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* --- Closing CTA ---------------------------------------------------------- */
/* Plain background, not --bg-alt: the FAQ above it is alt, and two alt-coloured
   bands touching turns the padding between them into dead space. */
.cta-band {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-9);
  background: var(--bg);
  border-top: 1px solid var(--border);
  text-align: center;
}
.cta-outer { position: relative; z-index: 1; display: flex; justify-content: center; }
.cta-inner { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); max-width: 680px; }
.cta-title { font-size: var(--fs-2xl); max-width: 22ch; }
.cta-sub { color: var(--text-muted); margin-bottom: var(--sp-3); }
/* Closing mark, the way the flyers sign off with the roundel. */
.cta-mark { color: var(--accent); margin-bottom: var(--sp-4); }

/* 548x357 native, so the frame is capped at 460 and only ever downscales. */
.cta-figure { margin: 0 0 var(--sp-5); max-width: 460px; }
.cta-figure picture {
  display: block;
  padding: 9px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-photo);
}
.cta-figure img { width: 100%; height: auto; border-radius: 4px; }

/* --- Footer --------------------------------------------------------------- */
.site-footer { background: var(--bg); border-top: 1px solid var(--border); }
.site-footer .tricolor { margin-top: -1px; }

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
  padding-block: var(--sp-7);
}
.footer-brand { display: flex; align-items: center; gap: var(--sp-3); margin-right: auto; }
.footer-brand .brand-mark { color: var(--accent); }
.footer-name { font-family: "Playfair Display", ui-serif, Georgia, serif; font-weight: 700; font-size: var(--fs-base); }
.footer-note { font-size: var(--fs-xs); color: var(--text-muted); }

.footer-links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.footer-links a {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--dur) var(--ease);
}
.footer-links a:hover { color: var(--accent); }

.footer-social { display: flex; gap: var(--sp-2); }
.footer-social a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.footer-social a:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-wash); }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-5);
  padding-bottom: calc(var(--sp-7) + env(safe-area-inset-bottom));
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --- Scroll reveal -------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 70ms; }
.reveal[data-delay="2"] { transition-delay: 140ms; }
.reveal[data-delay="3"] { transition-delay: 210ms; }
.reveal[data-delay="4"] { transition-delay: 280ms; }
.reveal[data-delay="5"] { transition-delay: 350ms; }

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* --- Print ---------------------------------------------------------------- */
@media print {
  .site-header, .mobile-nav, .nav-scrim, .skip-link, .sparkle, .waves { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  body { background: #fff; color: #000; }
}