/* Nu Prime Alumni Association — design system from approved concept v9 (2026-08-16) */
:root{
  --scarlet:#bf0d3e; --scarlet-deep:#8e1f2f; --emerald:#215732; --emerald-deep:#16351f;
  --night:#0f2417; --night-deep:#0a1a10;
  --gold:#c99700; --gold-bright:#e8b923; --ivory:#faf8f2; --panel:#f2efe6; --ink:#1d2420; --ink-soft:#4c554f;
  --stone:#a9a296; --stone-line:#ddd8cb;
  --display:'Goudy Old Style','Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --body:'Charter','Bitstream Charter','Sitka Text',Cambria,Georgia,serif;
  --sans:'Avenir Next','Segoe UI','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--body);line-height:1.6}
h1,h2,h3{font-family:var(--display);font-weight:600;margin:0;text-wrap:balance}
.in{max-width:1080px;margin:0 auto;padding:0 32px}
/* NAV */
nav{position:sticky;top:0;z-index:50;background:rgba(250,248,242,.95);backdrop-filter:blur(8px);border-bottom:2px solid var(--gold)}
nav .in{display:flex;align-items:center;gap:16px;padding:10px 32px}
nav img{height:40px}
nav .nm{font-family:var(--display);font-size:16.5px;color:var(--ink);text-decoration:none}
nav .lk{margin-left:auto;display:flex;gap:24px;font-family:var(--sans);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;flex-wrap:wrap}
nav .lk a{color:var(--ink-soft);text-decoration:none}
nav .lk a:hover{color:var(--scarlet)}
nav .lk a.active{color:var(--scarlet)}
nav .give{font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;background:var(--scarlet);color:#fff;padding:8px 18px;border-radius:2px;text-decoration:none}
@media(max-width:760px){nav .lk{gap:14px}}
/* HERO with the video bend */
.hero{position:relative;overflow:hidden;padding:96px 0 0;background:linear-gradient(180deg,#fffdf8,var(--ivory) 65%)}
.hero .eb{font-family:var(--sans);font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--emerald)}
.hero h1{font-size:clamp(46px,6.8vw,94px);line-height:.99;margin:22px 0 0;max-width:13ch;color:var(--ink)}
.hero h1 em{font-style:italic;color:var(--scarlet)}
.hero .sub{font-size:clamp(16px,1.5vw,19px);color:var(--ink-soft);max-width:47ch;margin:26px 0 34px}
.cta{display:inline-block;font-family:var(--sans);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
     background:var(--scarlet);color:#fff;padding:14px 30px;border-radius:2px;border:none;cursor:pointer;text-decoration:none}
.cta.ghost{background:transparent;border:1px solid var(--emerald);color:var(--emerald);margin-left:12px}
.cta:focus-visible,.ghost:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
/* the film-strip bend: rotated window, drifting track */
.bendwrap{position:relative;height:340px;margin-top:64px}
.bend{position:absolute;left:-6%;right:-6%;top:70px;height:190px;transform:rotate(-7deg);overflow:hidden;
      border-top:5px solid var(--gold);border-bottom:5px solid var(--gold);
      box-shadow:0 30px 70px rgba(29,36,32,.3);background:var(--emerald)}
.bend .track{position:absolute;top:0;bottom:0;left:0;display:flex;gap:3px;background:var(--gold);width:max-content;
      animation:drift 140s linear infinite}
.bend .track img{height:100%;width:auto;display:block;filter:saturate(.92)}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.bend .tint{position:absolute;inset:0;background:linear-gradient(90deg,rgba(22,53,31,.45),rgba(22,53,31,.05) 30%,rgba(22,53,31,.05) 70%,rgba(22,53,31,.45));pointer-events:none}
.bend .stars{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-evenly;pointer-events:none}
.bend .stars b{color:#fff;font-size:28px;opacity:.85;text-shadow:0 2px 12px rgba(0,0,0,.5)}
@media(prefers-reduced-motion:reduce){.bend .track{animation:none}}
@media(max-width:760px){.bendwrap{height:230px}.bend{height:130px;top:44px}.bend .stars b{font-size:20px}}
/* YEARS BAND */
.years{background:var(--scarlet);color:#fff}
.years .in{display:flex;align-items:center;gap:30px;flex-wrap:wrap;padding:32px}
.years .n{font-family:var(--display);font-size:clamp(46px,5.6vw,78px);line-height:1;font-weight:600}
.years .star{color:var(--gold-bright);font-size:clamp(22px,2.8vw,36px);display:flex;align-items:center}
.years .t{font-family:var(--sans);font-size:13px;max-width:40ch;color:#ffd9e3;line-height:1.55;margin-left:auto}
.years .t b{color:#fff;letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:4px;font-size:12.5px}
/* EDITORIAL INTERIOR: feature + columns, no boxes */
.stories{padding:88px 0 74px}
.stories .lead{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center;padding-bottom:56px;border-bottom:1px solid var(--stone-line)}
@media(max-width:840px){.stories .lead{grid-template-columns:1fr}}
.k{font-family:var(--sans);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--scarlet);display:flex;align-items:center;gap:10px;margin-bottom:14px}
.k::before{content:"";width:24px;height:2px;background:var(--gold)}
.stories .lead h2{font-size:clamp(30px,3.6vw,44px);line-height:1.06;margin-bottom:12px}
.stories .lead p{color:var(--ink-soft);font-size:16px;margin:0 0 18px}
.ph{position:relative;border:1px solid var(--stone-line);background:#fff;padding:10px 10px 12px}
.ph img,.ph video{width:100%;height:auto;display:block;object-fit:cover}
.ph .tag{position:absolute;left:12px;bottom:10px;font-family:var(--sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:rgba(22,53,31,.75);padding:4px 10px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding-top:52px}
.duo.trio{grid-template-columns:1fr 1fr 1fr;gap:40px}
@media(max-width:840px){.duo.trio{grid-template-columns:1fr}}
@media(max-width:840px){.duo{grid-template-columns:1fr}}
.duo h3{font-size:25px;margin-bottom:8px}
.duo p{color:var(--ink-soft);font-size:15px;margin:0 0 14px}
.lnk{font-family:var(--sans);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--emerald);text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:2px}
/* SIGNUP */
.signup{background:var(--panel);border-top:1px solid var(--stone-line);border-bottom:1px solid var(--stone-line);padding:54px 0}
.signup .in{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.signup h3{font-size:clamp(22px,2.6vw,30px);flex:1;min-width:260px}
.signup .field{display:flex;min-width:300px;flex:1}
.signup input{flex:1;border:1px solid var(--stone);border-right:none;background:#fff;color:var(--ink);padding:13px 15px;font-family:var(--sans);font-size:13.5px}
.signup button{border:none;background:var(--emerald);color:#fff;font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;padding:13px 24px;cursor:pointer}
/* CELESTIAL night treatment */
.cel{position:relative;overflow:hidden;color:#efe9d2;padding:96px 0 88px;
     background:radial-gradient(1000px 460px at 30% 0%, #16351f, var(--night-deep) 62%, #060f09)}
.cel .sky{position:absolute;inset:0;pointer-events:none}
.sky s{position:absolute;width:2px;height:2px;border-radius:50%;background:#e9e4d2;opacity:.35}
@keyframes tw{0%,100%{opacity:.2}50%{opacity:.85}}
@media(prefers-reduced-motion:no-preference){.sky s{animation:tw 5s infinite}}
.cel .eb{font-family:var(--sans);font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-bright)}
.cel h1,.cel h2{font-size:clamp(32px,4.2vw,50px);margin:16px 0 8px;color:#f7f3e2;line-height:1.05}
.cel .verse{font-style:italic;color:#a7bba2;font-size:clamp(15px,1.7vw,19px);max-width:48ch;margin:0 0 44px}
.roll{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:2px 40px}
.b{display:flex;align-items:baseline;gap:12px;padding:10px 2px;border-bottom:1px solid rgba(201,151,0,.16)}
.b .st{color:var(--gold);flex:none;font-size:12px}
.b .nm{font-family:var(--display);font-size:16.5px;color:#ece5cd}
.b .yr{margin-left:auto;font-family:var(--sans);font-size:10.5px;color:#6d8a74}
.b.newest .nm{color:#fff}
.b.newest .st{color:var(--gold-bright);text-shadow:0 0 10px rgba(232,185,35,.75)}
.cel .more{margin-top:38px}
.cel p{color:#b9c7b4}
.cel a{color:var(--gold-bright)}
.cta.starlight{background:transparent;border:1px solid rgba(201,151,0,.55);color:var(--gold-bright);margin-left:0}
/* PAGE HERO (interior light pages) */
.pagehero{padding:84px 0 42px;background:linear-gradient(180deg,#fffdf8,var(--ivory) 70%);border-bottom:1px solid var(--stone-line)}
.pagehero .eb{font-family:var(--sans);font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--emerald)}
.pagehero h1{font-size:clamp(38px,5vw,64px);line-height:1.02;margin:18px 0 0;max-width:18ch}
.pagehero h1 em{font-style:italic;color:var(--scarlet)}
.pagehero .sub{font-size:clamp(15.5px,1.4vw,18px);color:var(--ink-soft);max-width:58ch;margin:20px 0 0}
/* PROSE sections */
.prose{padding:64px 0}
.prose + .prose{padding-top:0}
.prose h2{font-size:clamp(26px,3vw,36px);margin-bottom:14px}
.prose h3{font-size:22px;margin:26px 0 8px}
.prose p{color:var(--ink-soft);font-size:16.5px;max-width:68ch;margin:0 0 16px}
.prose ul{color:var(--ink-soft);font-size:15.5px;max-width:64ch;margin:0 0 16px;padding-left:22px}
.prose li{margin-bottom:6px}
.rule{border:none;border-top:1px solid var(--stone-line);margin:56px 0 0}
/* two-column split with photo */
.split{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center}
@media(max-width:840px){.split{grid-template-columns:1fr}}
/* CREED / quote treatment */
.creedbox{padding:88px 0;text-align:center}
.creedbox .lines{font-family:var(--display);font-style:italic;font-size:clamp(20px,2.6vw,30px);line-height:1.6;color:var(--emerald);max-width:34ch;margin:0 auto}
.creedbox .lines b{color:var(--scarlet);font-style:italic;font-weight:600}
/* BOARD grid */
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2px 40px;padding-top:8px}
.board .m{display:flex;align-items:baseline;gap:12px;padding:12px 2px;border-bottom:1px solid var(--stone-line)}
.board .m .role{font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--scarlet);flex:none;min-width:104px}
.board .m .who{font-family:var(--display);font-size:17px}
/* TIMELINE */
.tl{list-style:none;margin:24px 0 0;padding:0;border-left:2px solid var(--gold);max-width:68ch}
.tl li{position:relative;padding:0 0 30px 28px}
.tl li::before{content:"";position:absolute;left:-7px;top:8px;width:12px;height:12px;border-radius:50%;background:var(--ivory);border:2px solid var(--scarlet)}
.tl .yr{font-family:var(--display);font-size:24px;color:var(--scarlet);display:block}
.tl p{color:var(--ink-soft);font-size:15.5px;margin:4px 0 0;max-width:60ch}
/* MISSING BROTHERS list */
.decade{font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--scarlet);margin:40px 0 6px;display:flex;align-items:center;gap:10px}
.decade::before{content:"";width:24px;height:2px;background:var(--gold)}
.names{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:0 40px}
.names .b{border-bottom:1px solid var(--stone-line)}
.names .b .nm{color:var(--ink);font-size:15.5px}
.names .b .st{color:var(--gold)}
.names .b .yr{color:var(--stone)}
/* PASS-IT-ON emerald band */
.band{background:var(--emerald-deep);color:#f2edda;padding:56px 32px}
.band .in{display:flex;align-items:center;gap:36px;flex-wrap:wrap;padding:0}
.band .k{color:var(--gold-bright)}
.band h3{font-size:clamp(22px,2.8vw,32px);color:#f7f3e2;margin:0 0 8px}
.band p{color:#b9c7b4;font-size:15px;max-width:56ch;margin:0}
/* MOTTO epigraph */
.motto{background:var(--ivory);padding:64px 32px;text-align:center}
.motto .q{font-family:var(--display);font-style:italic;font-size:clamp(19px,2.4vw,27px);color:var(--emerald);max-width:34ch;margin:0 auto;text-wrap:balance}
.motto .celink{font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:2px}
/* FOOTER */
footer{background:var(--night-deep);color:#7a9482;font-family:var(--sans);font-size:11px;letter-spacing:.06em;padding:22px 0}
footer .in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
footer b{color:#c9d3c4;font-weight:500}
footer .fl{width:100%;display:flex;gap:18px;flex-wrap:wrap;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid rgba(201,151,0,.14)}
footer .fl a{color:#8ba491;text-decoration:none;letter-spacing:.1em;text-transform:uppercase;font-size:10px}
footer .fl a:hover{color:var(--gold-bright)}
