/* SAE Illinois Beta — Alumni site
   Built from the SAE Illinois Beta design system tokens (Claude Design handoff). */

/* ===== Fonts (SAE brand webfonts — licensed foundry files, do not redistribute) ===== */
@font-face{font-family:"Tungsten";src:url("../assets/fonts/Tungsten-Semibold.otf") format("opentype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Modesto Text";src:url("../assets/fonts/ModestoText-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Aktiv Grotesk";src:url("../assets/fonts/AktivGrotesk_Rg.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}

/* ===== Tokens ===== */
:root{
  /* Primary */
  --sae-purple:#6A498E;
  --sae-gold:#F4BD1D;
  /* Extended purple ramp */
  --purple-900:#2C1E3D;
  --purple-800:#46315E;
  --purple-700:#573C74;
  --purple-600:#6A498E;
  --purple-500:#8468A5;
  --purple-400:#A28CBD;
  --purple-300:#C2AFD5;
  --purple-200:#DCD1E7;
  --purple-100:#F0EAF5;
  /* Gold ramp */
  --gold-700:#A67B08;
  --gold-600:#D8A310;
  --gold-500:#F4BD1D;
  --gold-400:#F8D163;
  --gold-200:#FCEEC5;
  --gold-100:#FEF8E7;
  /* Neutrals */
  --ink-900:#0C0B0E;
  --ink-800:#1A181C;
  --ink-700:#2E2B32;
  --ink-500:#5B565F;
  --ink-400:#8A848F;
  --ink-300:#BDB9C0;
  --ink-200:#D8D5DA;
  --ink-100:#ECEBEC;
  --white:#FFFFFF;
  /* Semantic */
  --text-heading:var(--purple-800);
  --text-body:var(--ink-800);
  --text-muted:var(--ink-500);
  --border-subtle:var(--ink-200);
  --rule-gold:var(--sae-gold);
  --focus-ring:var(--sae-gold);

  /* Typography */
  --font-display:"Tungsten","Oswald","Arial Narrow",sans-serif;
  --font-serif:"Modesto Text",Georgia,"Times New Roman",serif;
  --font-sans:"Aktiv Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --text-2xs:11px;
  --text-xs:12px;
  --text-sm:14px;
  --text-md:16px;
  --text-lg:18px;
  --text-xl:21px;
  --text-2xl:26px;
  --display-xs:28px;
  --display-sm:40px;
  --display-md:56px;
  --display-lg:80px;
  --leading-display:0.88;
  --leading-tight:1.15;
  --leading-snug:1.35;
  --leading-body:1.55;
  --tracking-display:0.005em;
  --tracking-eyebrow:0.14em;
  --tracking-caps:0.06em;

  /* Spacing / layout */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px; --space-14:56px; --space-16:64px;
  --container-max:1200px;
  --gutter:24px;
  --gutter-lg:48px;
  --section-y:96px;
  --nav-height:72px;

  /* Radii / borders / elevation / motion */
  --radius-sm:2px;
  --border-thick:2px;
  --border-rule:4px;
  --shadow-sm:0 1px 2px rgba(12,11,14,.08);
  --shadow-md:0 2px 8px rgba(12,11,14,.10);
  --shadow-lg:0 8px 24px rgba(12,11,14,.14);
  --duration-fast:120ms;
  --ease-standard:cubic-bezier(.22,.61,.36,1);
}

/* ===== Base ===== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);font-weight:400;font-size:var(--text-md);line-height:var(--leading-body);color:var(--text-body);background:var(--white);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:var(--leading-display);letter-spacing:var(--tracking-display);color:var(--text-heading);text-transform:uppercase;margin:0}
p{margin:0;text-wrap:pretty}
img{max-width:100%}
a{color:var(--sae-purple);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--duration-fast) var(--ease-standard)}
a:hover{color:var(--purple-800)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.container{max-width:var(--container-max);margin:0 auto;padding:0 clamp(20px,4vw,var(--gutter-lg))}
.section{padding:clamp(48px,9vw,var(--section-y)) 0}
.section-narrow{max-width:720px;margin:0 auto;padding:0 clamp(20px,4vw,var(--gutter-lg))}
.bg-white{background:var(--white)}
.bg-paper{background:var(--ink-100)}
.bg-purple{background:var(--sae-purple)}
.bg-purple-800{background:var(--purple-800)}
.bg-purple-900{background:var(--purple-900)}

/* ===== Eyebrow / rule / section heading ===== */
.eyebrow{display:block;font-family:var(--font-serif);font-weight:700;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--text-muted)}
.rule{display:block;width:64px;height:var(--border-rule);background:var(--rule-gold);border:0}
.rule-center{margin-left:auto;margin-right:auto}

.section-heading{display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start;text-align:left}
.section-heading.is-center{align-items:center;text-align:center}
.section-heading h2{font-size:var(--display-sm);line-height:var(--leading-display);color:var(--text-heading)}
.section-heading p{max-width:560px;font-size:var(--text-md);line-height:var(--leading-body);color:var(--text-muted);margin:0}
.section-heading.is-dark .eyebrow{color:var(--sae-gold)}
.section-heading.is-dark h2{color:var(--white)}
.section-heading.is-dark p{color:var(--purple-300)}

/* ===== Header / nav ===== */
.site-header{position:sticky;top:0;z-index:30;min-height:var(--nav-height);background:var(--purple-800);border-bottom:1px solid rgba(255,255,255,.14)}
.nav-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-4) var(--space-6);padding:var(--space-3) clamp(20px,4vw,var(--gutter-lg))}
.brand{display:flex;align-items:center;gap:var(--space-4);text-decoration:none}
.brand-mark{height:18px;display:block}
.brand-tag{font-family:var(--font-serif);font-weight:700;font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--sae-gold);border-left:1px solid rgba(255,255,255,.24);padding-left:var(--space-4)}
.nav-toggle{margin-left:auto;width:48px;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:transparent;border:1px solid rgba(255,255,255,.24);border-radius:var(--radius-sm);cursor:pointer;padding:0}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--sae-gold)}
.nav-links{display:none;align-items:center;gap:var(--space-6);margin-left:auto}
.nav-link{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-caps);text-decoration:none;padding-bottom:2px;color:var(--purple-300)}
.nav-link:hover{color:var(--white)}
.nav-link.is-active{color:var(--sae-gold);box-shadow:inset 0 -2px 0 var(--sae-gold)}
.nav-mobile{display:none;flex-direction:column;background:var(--purple-900);border-top:1px solid rgba(255,255,255,.14);padding:var(--space-2) clamp(20px,4vw,var(--gutter-lg)) var(--space-5)}
.nav-mobile-link{display:flex;align-items:center;min-height:52px;font-size:var(--text-sm);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-caps);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.14);color:var(--purple-300)}
.nav-mobile-link.is-active{color:var(--sae-gold)}
body.nav-open .nav-mobile{display:flex}

@media (min-width:860px){
  .nav-toggle{display:none}
  .nav-links{display:flex}
  .nav-mobile{display:none !important}
}

/* ===== Buttons ===== */
.btn{font-family:var(--font-sans);font-weight:700;letter-spacing:var(--tracking-caps);text-transform:uppercase;border:var(--border-thick) solid transparent;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);cursor:pointer;text-decoration:none;transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard);white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-sm{font-size:var(--text-xs);padding:7px 14px}
.btn-md{font-size:var(--text-sm);padding:11px 22px}
.btn-lg{font-size:var(--text-md);padding:15px 32px}
.btn-full{width:100%}
.btn-primary{background:var(--sae-purple);color:var(--white);border-color:var(--sae-purple)}
.btn-primary:hover{background:var(--purple-800);border-color:var(--purple-800);color:var(--white)}
.btn-gold{background:var(--sae-gold);color:var(--purple-900);border-color:var(--sae-gold)}
.btn-gold:hover{background:var(--gold-600);border-color:var(--gold-600);color:var(--purple-900)}
.btn-secondary{background:transparent;color:var(--purple-800);border-color:var(--purple-800)}
.btn-secondary:hover{background:var(--purple-800);border-color:var(--purple-800);color:var(--white)}
.btn-ghost{background:transparent;color:var(--purple-700);border-color:transparent}
.btn-ghost:hover{background:var(--purple-100);color:var(--purple-700)}
.btn-inverse{background:transparent;color:var(--white);border-color:rgba(255,255,255,.55)}
.btn-inverse:hover{background:var(--white);color:var(--purple-800);border-color:var(--white)}

/* ===== Cards ===== */
.card{border-radius:var(--radius-sm);overflow:hidden;background:var(--white);border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm);color:var(--text-body)}
.card-outlined{border:var(--border-thick) solid var(--purple-800);box-shadow:none}
.card-inverse{background:var(--purple-800);border:1px solid rgba(255,255,255,.14);box-shadow:none;color:var(--white)}
.card-rule{display:block;height:var(--border-rule);background:var(--rule-gold)}
.card-body{padding:var(--space-6)}
.card-pad-lg{padding:var(--space-8)}
.card-pad-none{padding:0}
.card-eyebrow{font-family:var(--font-serif);font-weight:700;font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--text-muted)}
.card-inverse .card-eyebrow{color:var(--sae-gold)}
.card-title{font-family:var(--font-display);font-weight:600;font-size:var(--display-xs);text-transform:uppercase;color:var(--text-heading);margin:var(--space-3) 0 0}
.card-text{font-size:var(--text-sm);line-height:var(--leading-body);color:var(--text-muted);margin:var(--space-3) 0 0}
.card-img{width:100%;height:200px;object-fit:cover;display:block}

/* ===== Grids ===== */
.grid{display:grid;gap:var(--gutter)}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid-2-narrow{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--space-5) var(--gutter)}
.grid-media{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--space-12);align-items:center}
.grid-media-lg{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--space-16);align-items:center}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--gutter)}
.grid-cards-wide{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--gutter)}

/* ===== Photo grid (house through the years) ===== */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--space-2)}
.photo-grid.is-large{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.photo-tile{position:relative;margin:0}
.photo-tile img{width:100%;height:180px;object-fit:cover;display:block}
.photo-grid.is-large .photo-tile img{height:260px}
.photo-tile img.is-mono{filter:grayscale(1)}
.photo-tile figcaption{position:absolute;left:0;bottom:0;background:var(--purple-900);color:var(--sae-gold);font-family:var(--font-serif);font-weight:700;font-size:var(--text-2xs);letter-spacing:var(--tracking-eyebrow);padding:4px 8px;margin:0}

/* ===== Hero ===== */
.hero{position:relative;min-height:min(560px,86vh);display:flex;align-items:center;background-size:cover;background-position:center 40%}
.hero::before{content:"";position:absolute;inset:0;background:rgba(44,30,61,.35)}
.hero-inner{position:relative;max-width:var(--container-max);margin:0 auto;padding:var(--space-12) clamp(20px,4vw,var(--gutter-lg));width:100%}
.hero-panel{max-width:640px;background:rgba(44,30,61,.55);padding:clamp(20px,5vw,40px)}
.hero-eyebrow{font-family:var(--font-serif);font-weight:700;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--sae-gold)}
.hero-title{font-family:var(--font-display);font-weight:600;font-size:clamp(44px,9vw,var(--display-lg));line-height:var(--leading-display);text-transform:uppercase;color:var(--white);margin:var(--space-5) 0 var(--space-4)}
.hero-desc{font-size:clamp(17px,2.4vw,var(--text-lg));line-height:var(--leading-body);color:var(--purple-200);max-width:500px;margin:0}
.hero-actions{display:flex;gap:var(--space-3);margin-top:var(--space-8);flex-wrap:wrap}

/* Page banner (interior page top section) */
.page-banner{background:var(--purple-900);padding:var(--space-16) 0}

/* ===== Quote blocks ===== */
.pull-quote{font-family:var(--font-serif);font-weight:700;line-height:var(--leading-snug);margin:0}
.quote-cite{font-size:var(--text-xs);color:var(--text-muted);margin:var(--space-4) 0 0}

/* ===== Footer ===== */
.site-footer{background:var(--purple-900);padding:var(--space-16) 0 var(--space-10)}
.footer-top{display:flex;gap:var(--space-10) var(--space-16);flex-wrap:wrap}
.footer-brand{display:flex;flex-direction:column;gap:var(--space-4)}
.footer-logo{height:72px;width:auto;align-self:flex-start;display:block}
.footer-address{font-size:var(--text-xs);color:var(--purple-400);max-width:240px;line-height:var(--leading-snug);margin:0}
.footer-cols{display:flex;flex-wrap:wrap;gap:var(--space-10) var(--space-16);margin-left:auto}
.footer-col{display:flex;flex-direction:column;gap:var(--space-1)}
.footer-col-title{font-family:var(--font-serif);font-weight:700;font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--sae-gold)}
.footer-link{font-size:var(--text-sm);color:var(--purple-300);text-decoration:none;display:flex;align-items:center;min-height:40px}
.footer-link:hover{color:var(--white)}
.footer-bottom{max-width:var(--container-max);margin:var(--space-12) auto 0;padding:0 clamp(20px,4vw,var(--gutter-lg))}
.footer-copy{border-top:1px solid rgba(255,255,255,.14);padding-top:var(--space-5);font-size:var(--text-2xs);color:var(--purple-500)}

/* ===== True Gold step cards ===== */
.step-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-4);padding-bottom:var(--space-4);border-bottom:1px solid var(--border-subtle)}
.step-num{font-family:var(--font-display);font-weight:600;font-size:var(--display-sm);line-height:.88;color:var(--sae-gold)}
.step-title{font-family:var(--font-display);font-weight:600;font-size:var(--display-xs);text-transform:uppercase;color:var(--text-heading);margin:0}
.step-timing{font-family:var(--font-serif);font-weight:700;font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--text-muted);margin-left:auto}
.step-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--gutter);margin-top:var(--space-5)}
.step-role{font-family:var(--font-serif);font-weight:700;font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--sae-purple)}
.step-body{font-size:var(--text-sm);line-height:var(--leading-body);color:var(--text-body);margin:var(--space-2) 0 0}

.rule-list{list-style:none;margin:var(--space-5) 0 0;padding:0;display:grid;gap:var(--space-3)}
.rule-list li{padding-left:var(--space-4);border-left:var(--border-thick) solid var(--sae-gold);font-size:var(--text-sm);line-height:var(--leading-body);color:var(--text-body)}
.plain-list{list-style:none;margin:var(--space-5) 0 0;padding:0;display:grid;gap:var(--space-4)}
.plain-list li{font-size:var(--text-sm);line-height:var(--leading-body);color:var(--white)}

/* ===== Events / standing dates ===== */
.date-row{display:flex;gap:var(--space-4);align-items:baseline}
.date-label{font-family:var(--font-serif);font-weight:700;font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--sae-purple);min-width:88px}
.date-value{font-size:var(--text-md);color:var(--text-body)}

/* ===== Roster ===== */
.roster-name{font-weight:700;color:var(--text-heading);font-size:var(--text-sm)}
.roster-place{font-size:var(--text-xs);color:var(--text-muted)}

/* ===== Misc ===== */
.badge-gold{display:inline-block;background:var(--sae-gold);padding:var(--space-3) var(--space-5)}
.badge-gold-text{font-family:var(--font-serif);font-weight:700;font-size:var(--text-sm);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--purple-900)}
.caption{font-size:var(--text-xs);color:var(--text-muted);margin:var(--space-3) 0 0}