/* MilSpouseU™ — styles.css
   Type: EB Garamond (display) + Source Sans 3 (body)

   ── Two themes, both taken from real MSU walls ──────────────────────────
   Light  = the marble Advisory Board wall: warm calacatta field, gold
            veining, pewter crest, navy lettering.
   Dark   = the navy Advisory Board wall: deep navy field under a top
            light, gold crest and gold lettering.

   Colors below were sampled from those two source photographs, so the
   site, the Zoom background, and the printed wall all read as one brand.

   Every color in this file is a token. To recolor the site, edit the
   two blocks below and nothing else — no rule further down hard-codes a
   color that would fight you.
   ──────────────────────────────────────────────────────────────────────── */

/* LIGHT — marble wall (default) */
:root{
  /* Neutral greys, not creams. The marble photograph carries a warm cast
     (its field sits around hue 39deg); pairing it with a cream veil and cream
     cards compounded that into a pink page. The texture is now white
     balanced and these neutrals follow it, which leaves gold as the only
     warm color on the page — where it belongs, since it is the one warm
     thing on the real wall too.

     The page reads near-white so the stone is the thing you notice. The ink
     carries what little coolness there is: at hue 215 and a fifth
     saturation the old body gray tinted the whole page blue, since text is
     most of what covers it. It is close to neutral now, and the navy is
     kept for headings where it belongs. */
  --bg:#FDFDFB; --surface:#FFFFFF; --surface-2:#F0F0ED;
  --ink:#191E25; --ink-soft:#525456; --ink-faint:#535350;
  --navy:#1C1326; --navy-2:#30223F;
  --gold:#C9A24A; --gold-deep:#704D00; --gold-ink:#1B1401;
  --pewter:#50555A; --pewter-soft:#50555A16;
  --border:#E6E5E1; --border-strong:#D2D1CC;
  --hero-ink:#FDFDFB; --on-navy-soft:#C4B9CE;

  /* Hero + section surfaces that flip with the theme */
  /* The whole page is the marble wall. The hero carries no texture of its
     own — it just wears a thinner veil, so the same stone reads stronger
     there without a seam where two crops would have met. */
  --page-texture:url("assets/texture-marble.jpg");
  --page-veil:#FDFDFB59;
  --hero-bg:transparent; --hero-fg:var(--ink); --hero-soft:var(--ink-soft);
  --hero-texture:none; --hero-texture-opacity:1;
  --hero-veil:linear-gradient(180deg,#FDFDFB00 0%,#FDFDFB1F 62%,#FDFDFB4D 100%);
  /* Sections are separated by molding, not by tinted bands. */
  --band-bg:transparent; --band-brd:transparent;
  --rule:#896A25; --rule-soft:#896A2559;
  --news-bg:transparent; --news-fg:var(--ink); --news-soft:var(--ink-soft);
  --glass:#151C270A; --glass-brd:#151C271F;
  --gold-glow:rgba(201,162,74,.34); --nav-shadow:0 4px 18px rgba(19,27,38,.07);
  --badge-bg:var(--navy); --badge-fg:var(--hero-ink);
  --gilt-cast:rgba(19,27,38,.30);
  --crest-contact:rgba(19,27,38,.22); --crest-cast:rgba(19,27,38,.20);
  --mat:#F4F1E9; --mat-lip:rgba(0,0,0,.10);

  --shadow:0 1px 2px rgba(19,27,38,.06),0 8px 28px rgba(19,27,38,.09);
  --shadow-lg:0 20px 50px rgba(19,27,38,.16);

  --radius:16px; --radius-sm:12px; --maxw:1140px;
  --font-display:'EB Garamond',Georgia,'Times New Roman',serif;
  --font-body:'Source Sans 3',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color-scheme:light;
}

/* DARK — navy wall. Applied by the toggle, and by system preference for
   anyone who has not chosen explicitly. */
:root[data-theme="dark"]{
  --bg:#141C27; --surface:#1B2431; --surface-2:#222D3D;
  --ink:#EDEAE3; --ink-soft:#A6B0BC; --ink-faint:#8A94A2;
  --navy:#150D1D; --navy-2:#261A32;
  --gold:#DFA94F; --gold-deep:#E9BE74; --gold-ink:#17110A;
  --pewter:#9BA6B4; --pewter-soft:#9BA6B41F;
  --border:#2A3546; --border-strong:#3A4860;
  --hero-ink:#F2EFE8; --on-navy-soft:#BEB3C8;

  --page-texture:none; --page-veil:transparent;
  --band-bg:var(--surface-2); --band-brd:var(--border);
  --rule:#5FA9A9; --rule-soft:#5FA9A959;
  --news-bg:radial-gradient(120% 130% at 15% 0%,var(--navy-2) 0%,var(--navy) 62%);
  --news-fg:var(--hero-ink); --news-soft:var(--on-navy-soft);
  --hero-bg:#16202E; --hero-fg:var(--hero-ink); --hero-soft:var(--on-navy-soft);
  --hero-texture:url("assets/texture-navy.jpg"); --hero-texture-opacity:1;
  --hero-veil:linear-gradient(180deg,#16202E6E 0%,#16202EAD 58%,#141C27 100%);
  --glass:#FFFFFF12; --glass-brd:#FFFFFF26;
  --gold-glow:rgba(223,169,79,.28); --nav-shadow:0 4px 18px rgba(0,0,0,.38);
  --badge-bg:var(--gold); --badge-fg:var(--gold-ink);
  --gilt-cast:rgba(0,0,0,.55);
  --crest-contact:rgba(0,0,0,.45); --crest-cast:rgba(0,0,0,.34);
  --mat:#E6E2D8; --mat-lip:rgba(0,0,0,.22);

  --shadow:0 1px 2px rgba(0,0,0,.30),0 8px 28px rgba(0,0,0,.34);
  --shadow-lg:0 20px 50px rgba(0,0,0,.48);
  color-scheme:dark;
}
/* Theme swap should feel like a light coming on, not a page reload —
   but never animate for anyone who asked for less motion. */
@media (prefers-reduced-motion:no-preference){
  body,.card,.res,.ses,.partner,.join-card,footer,.hero{
    transition:background-color .35s ease,color .35s ease,border-color .35s ease}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* The page is a wall. Two fixed layers — the stone, then a veil that holds
   text contrast — sit behind everything and stay put while content scrolls
   over them, the way a real wall does. Fixed rather than tiled, so there are
   no repeat seams; `background-attachment` is avoided because it stutters on
   iOS. In the dark theme both tokens are empty and this costs nothing. */
body::before,body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none}
body::before{background-image:var(--page-texture);background-size:cover;background-position:center}
body::after{background:var(--page-veil)}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.1;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
.eyebrow{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin:0}
.center{text-align:center}
.muted{color:var(--ink-soft)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--font-body);
  font-weight:600;font-size:1rem;padding:.85em 1.6em;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease}
.btn-gold{background:var(--gold);color:var(--gold-ink);box-shadow:0 6px 18px var(--gold-glow)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 30px var(--gold-glow)}
.btn-ghost{background:transparent;color:var(--hero-ink);border-color:#ffffff44}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-navy{background:var(--navy);color:var(--hero-ink)}
.btn-navy:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-lg{padding:1em 2em;font-size:1.05rem}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* Skip link */
.skip{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;border-radius:8px;z-index:200}
.skip:focus{left:12px;top:12px}

/* NAV */
header.nav{position:sticky;top:0;z-index:80;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
header.nav.scrolled{border-color:var(--border);box-shadow:var(--nav-shadow)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:74px;gap:16px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:600;font-size:1.14rem;color:var(--ink)}
.brand small{display:block;font-family:var(--font-body);font-weight:500;font-size:.64rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:2px}
.nav-links{display:flex;align-items:center;gap:20px}
.nav-links a{font-size:.95rem;font-weight:500;color:var(--ink-soft)}
.nav-links a:hover{color:var(--gold-deep)}
.nav-cta{padding:.62em 1.2em}
/* `.nav-links a` outranks `.btn-gold`, so buttons in the nav need the ink
   restated at matching specificity or they inherit the link color. */
.nav-links a.btn-gold,.nav-links a.btn-gold:hover{color:var(--gold-ink)}
.nav-links a.btn-navy,.nav-links a.btn-navy:hover{color:var(--hero-ink)}
.menu-btn{display:none;background:none;border:1px solid var(--border-strong);border-radius:10px;padding:9px;cursor:pointer;color:var(--ink)}
.mobile-menu{display:none;flex-direction:column;gap:4px;padding:12px 24px 20px;background:var(--surface);border-bottom:1px solid var(--border)}
.mobile-menu.open{display:flex}
.mobile-menu a{padding:12px 8px;border-radius:10px;font-weight:500;color:var(--ink)}
.mobile-menu a:hover{background:var(--surface-2)}
/* Nav sizing. .nav-in also carries .wrap, so 24px of padding a side comes
   off the usable width — the row has viewport minus 48, capped at 1092, not
   the 1140 its box reports. Overrunning that does not overflow: flex shrinks
   the links instead and the labels break across lines, so the arithmetic
   has to be right rather than close.

   The bar has a floor rather than a fixed height, the brand tightens before
   it wraps, and the links fold into the burger while there is still room —
   which also covers a squeeze that predated all this, where the brand wrapped
   to three lines inside a rigid 74px bar and spilled over the hero. */
.nav-in{min-height:74px;height:auto}
@media(max-width:1240px){
  .brand{font-size:1rem}
  .nav-links{gap:16px}
}
@media(max-width:1040px){ .nav-links{display:none} .menu-btn{display:inline-flex} }

/* Theme switch. Sits in the nav at every width — the whole point is that a
   reader who needs the dark screen can reach it without hunting. Source
   order puts it before the links; `order` renders it after them.

   It reads as a physical switch: both destinations are always visible, and
   the knob sits over the one currently in use. An icon button would be
   smaller, but it hides the choice behind a guess about what the icon means. */
.nav-end{display:flex;align-items:center;gap:16px}
.nav-links{order:1}
.theme-btn{order:2}
.menu-btn{order:3}

.theme-btn{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;
  width:74px;height:34px;padding:0;border-radius:999px;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--border-strong);
  transition:background .3s ease,border-color .3s ease}
.theme-btn:hover{border-color:var(--gold-deep)}

/* The knob. Sits left over the sun, slides right over the moon. */
.theme-btn .ts-knob{position:absolute;z-index:0;top:3px;left:3px;width:26px;height:26px;border-radius:50%;
  background:var(--gold);box-shadow:0 2px 6px rgba(0,0,0,.28);
  transition:transform .3s cubic-bezier(.4,.9,.3,1.2),background .3s ease}

/* Both icons stay visible so the switch shows where it can go, not just
   where it is. The one under the knob takes the knob's ink. */
.theme-btn .ts-ico{position:absolute;z-index:1;top:0;display:grid;place-items:center;
  width:32px;height:32px;pointer-events:none;color:var(--ink-faint);
  transition:color .3s ease}
.theme-btn .ts-ico svg{width:16px;height:16px}
.theme-btn .ico-to-light{left:0}
.theme-btn .ico-to-dark{right:4px}
.theme-btn .ico-to-light{color:var(--gold-ink)}

/* Dark: knob travels to the moon, and the ink follows it. */
:root[data-theme="dark"] .theme-btn .ts-knob{transform:translateX(38px)}
:root[data-theme="dark"] .theme-btn .ico-to-light{color:var(--ink-faint)}
:root[data-theme="dark"] .theme-btn .ico-to-dark{color:var(--gold-ink)}
@media (prefers-reduced-motion:reduce){
  .theme-btn,.theme-btn .ts-knob,.theme-btn .ts-ico{transition:none}
}
/* Without JS the switch cannot do anything, so it should not be offered. */
html:not(.js) .theme-btn{display:none}

/* Phones. The nav has to hold the brand, the switch and the burger inside
   ~390px, and the brand alone wants 310px of that. Shrink the furniture
   rather than dropping the switch — a reader on a phone at night is exactly
   who needs it. Nothing here hides content. */
@media(max-width:560px){
  /* The brand wraps to two lines on a phone, so a fixed 74px nav spills
     over the hero. Let it size to its content instead. */
  .nav-in{height:auto;min-height:64px;padding-top:10px;padding-bottom:10px;gap:10px}
  .brand{line-height:1.25}
  .nav-end{gap:8px}
  .brand{font-size:1rem;gap:9px}
  .brand small{font-size:.58rem;letter-spacing:.1em}
  .theme-btn{width:60px;height:30px}
  .theme-btn .ts-knob{width:22px;height:22px;top:3px;left:3px}
  .theme-btn .ts-ico{width:28px;height:28px}
  .theme-btn .ts-ico svg{width:14px;height:14px}
  .theme-btn .ico-to-dark{right:3px}
  :root[data-theme="dark"] .theme-btn .ts-knob{transform:translateX(31px)}
}

/* HERO */
.hero{position:relative;background:radial-gradient(120% 90% at 82% 6%,var(--navy-2) 0%,var(--navy) 55%);
  color:var(--hero-ink);overflow:hidden}
.hero .compass{position:absolute;right:-120px;top:46%;transform:translateY(-50%);width:560px;height:560px;opacity:.10;color:var(--gold);pointer-events:none}
.hero-in{position:relative;padding:92px 0 84px;max-width:760px}
.hero .eyebrow{color:var(--gold)}
.hero h1{font-size:clamp(2.7rem,6.4vw,4.6rem);margin:.26em 0 .3em;letter-spacing:-.01em}
.hero .lede{font-size:clamp(1.1rem,2vw,1.35rem);color:var(--on-navy-soft);max-width:40ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:28px;font-size:.9rem;color:var(--on-navy-soft)}
.hero-meta span{display:inline-flex;align-items:center;gap:8px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--gold)}

/* COUNTDOWN */
.countdown{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.cd-cell{background:#ffffff12;border:1px solid #ffffff26;border-radius:14px;padding:14px 10px;min-width:78px;text-align:center}
.cd-num{font-family:var(--font-display);font-size:2rem;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;color:#fff}
.cd-lab{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-navy-soft);margin-top:6px}

.hero-live{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:34px;background:#ffffff12;border:1px solid #ffffff26;border-radius:14px;padding:14px 18px;color:#fff}
.hero-live[hidden]{display:none}
.hero-live a{color:var(--gold);font-weight:600;white-space:nowrap}
.live-dot{flex:none;width:10px;height:10px;border-radius:50%;background:#ff5a5a;animation:livepulse 1.6s ease-out infinite}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(255,90,90,.55)}70%{box-shadow:0 0 0 10px rgba(255,90,90,0)}100%{box-shadow:0 0 0 0 rgba(255,90,90,0)}}

/* SECTIONS */
section{padding:82px 0}
.sec-head{max-width:660px;margin-bottom:44px}
.sec-head.center{margin-left:auto;margin-right:auto}
.sec-head h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin:.25em 0 .4em}
.sec-head p{color:var(--ink-soft);font-size:1.08rem}
.alt{background:var(--band-bg);border-top:1px solid var(--band-brd);border-bottom:1px solid var(--band-brd)}
.navy-sec{background:var(--navy);color:var(--hero-ink)}

/* Section dividers, drawn as casing molding rather than a change of tint.
   Two hairlines with a step between them read as a milled profile: the
   stronger line is the edge, the softer one its shadow. Every block after
   the hero gets one, so the rhythm comes from the trim, not from banding
   alternate sections a different color. */
#main > * + *{position:relative}
#main > * + *::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(100% - 48px,var(--maxw));height:7px;pointer-events:none;
  background:
    linear-gradient(90deg,transparent 0,var(--rule) 6%,var(--rule) 94%,transparent 100%) 0 0/100% 1px no-repeat,
    linear-gradient(90deg,transparent 0,var(--rule-soft) 13%,var(--rule-soft) 87%,transparent 100%) 0 100%/100% 1px no-repeat}
/* The hero already meets the nav; it needs no trim above it. */
#main > .hero::before{display:none}

/* Wainscot panels: an inset line a few pixels in from the card edge, the way
   applied panel molding is set in from a wall's edge. */
.card,.res,.join-card,.partner{position:relative}
.card::after,.res::after,.join-card::after,.partner::after{
  content:"";position:absolute;inset:7px;pointer-events:none;
  border:1px solid var(--rule-soft);border-radius:calc(var(--radius-sm) - 4px)}
.navy-sec .sec-head h2{color:#fff}
.navy-sec .sec-head p{color:var(--on-navy-soft)}

/* LEAD STRIP */
.lead p{font-family:var(--font-display);font-size:clamp(1.3rem,2.6vw,1.95rem);line-height:1.4;color:var(--ink);max-width:26ch}
.lead .accent{color:var(--pewter)}

/* GRID + CARDS */
.grid{display:grid;gap:22px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.g3{grid-template-columns:1fr}.g2{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:30px;
  box-shadow:var(--shadow);transition:transform .18s ease,border-color .18s ease}
.card:hover{transform:translateY(-4px);border-color:var(--border-strong)}
@media (prefers-reduced-motion:reduce){.card:hover{transform:none}}
.card h3{font-size:1.4rem;margin-bottom:10px}
.card p{color:var(--ink-soft);font-size:1rem}
.tag{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:.42em .85em;border-radius:999px;margin-bottom:16px;
  /* One gold pill for every track badge. The hub badge used to take
     --badge-bg, which is navy on the marble and gold on the navy wall — so
     the three cards matched in dark and broke rank in light. Gold is the
     badge color on both walls now, and the row reads as a set. */
  background:var(--gold);color:var(--gold-ink)}

/* STEPS */
.step{display:flex;gap:18px;align-items:flex-start}
.step .n{flex:0 0 auto;width:44px;height:44px;border-radius:12px;background:var(--navy);color:var(--hero-ink);
  font-family:var(--font-display);font-weight:600;display:grid;place-items:center;font-size:1.15rem}
.step h3{font-size:1.2rem;margin-bottom:4px}
.step p{color:var(--ink-soft);font-size:.98rem}

/* CONTRAST */
/* The two halves used to be one card split down the middle, which left no
   edge to hang a frame on. They are separate panels now: the plain one for
   what exists today, the gilt one for what MSU adds. */
.contrast{--gilt-w:16px;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
@media(max-width:720px){.contrast{grid-template-columns:1fr}}
/* The framed panel standing on its own, with nothing set against it. */
.contrast.solo{grid-template-columns:minmax(0,620px);justify-content:center}
.contrast>div{padding:32px}
/* The comparison only works if one side recedes. This one sits on the muted
   surface with no shadow, so it reads as background against the framed
   panel's lift — greyed down, but still comfortably above 4.5:1. */
/* Inset by the frame's band so this box lines up with the navy panel inside
   the moulding, rather than with the moulding's outer edge. Top only — the
   left edge stays on the page margin with everything else. */
.contrast .them{margin-top:calc(var(--gilt-w) + 14px);
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:none;color:var(--ink-faint)}
/* Same moulding as the board wall, at a band sized for a panel this small.
   background-clip keeps the navy inside the frame instead of painting under
   the carving. */
/* A mat between the moulding and the navy, the way a framed picture is
   actually assembled. Two inset rings: the mat band itself, and one pixel
   more of a darker ring underneath it, so a hairline shows where the mat's
   bevel is cut. Shadows listed first paint on top, so the band covers all
   but that last pixel. The padding grows by the same amount, or the text
   would sit on the mat instead of on the artwork. */
.contrast .us{--mat-w:14px;
  background:var(--navy);background-clip:padding-box;color:var(--hero-ink);
  border:var(--gilt-w) solid transparent;
  border-image:url("assets/frame-gilt.svg") 64 round;
  box-shadow:inset 0 0 0 var(--mat-w) var(--mat),
             inset 0 0 0 calc(var(--mat-w) + 1px) var(--mat-lip),
             0 18px 40px var(--gilt-cast);
  padding:calc(28px + var(--mat-w))}
@media(max-width:640px){.contrast{--gilt-w:12px}
  .contrast .us{--mat-w:10px;padding:calc(22px + var(--mat-w))}
  .contrast .them{margin-top:calc(var(--gilt-w) + 10px)}}
.contrast h4{margin:0 0 16px;font-family:var(--font-body);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.contrast .them h4{color:var(--ink-faint);opacity:.85} .contrast .us h4{color:var(--gold)}
.clist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.clist li{display:flex;gap:10px;align-items:flex-start;font-size:1rem}
.contrast .us .clist li{color:var(--on-navy-soft)}
.ci{color:var(--gold);font-weight:700}
.them .ci{color:var(--ink-faint);opacity:.6}

/* SESSIONS */
.ses{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.ses-row{display:grid;grid-template-columns:132px 1fr auto;gap:20px;align-items:center;padding:20px 26px;border-top:1px solid var(--border)}
.ses-row:first-child{border-top:none}
.ses-row:hover{background:var(--surface-2)}
/* --navy is a background token everywhere else on the site; as text it goes
   invisible on the dark wall, where the navy is darker than the card under
   it. The date is a heading, so it takes the heading ink and flips with the
   theme. On the marble the two are a hair apart and read the same. */
.ses-date{font-family:var(--font-display);font-weight:600;color:var(--ink);font-size:1.05rem}
.ses-date small{display:block;font-family:var(--font-body);font-weight:600;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep);margin-top:2px}
.ses-title{font-weight:600;font-size:1.05rem}
.ses-title small{display:block;font-weight:500;color:var(--ink-faint);font-size:.9rem;margin-top:2px}
.ses-live{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pewter);white-space:nowrap}
@media(max-width:720px){.ses-row{grid-template-columns:1fr;gap:6px}.ses-live{display:none}}

/* RESOURCES GRID */
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.res-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.res-grid{grid-template-columns:1fr}}
.res{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:24px;transition:transform .16s,border-color .16s,box-shadow .16s}
.res:hover{transform:translateY(-3px);border-color:var(--pewter);box-shadow:var(--shadow)}
.res .ico{width:40px;height:40px;border-radius:10px;background:var(--pewter-soft);color:var(--pewter);display:grid;place-items:center;margin-bottom:14px}
.res h3{font-size:1.15rem;margin-bottom:6px}
.res p{color:var(--ink-soft);font-size:.94rem}
.res .soon{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep)}

/* About intro: copy with the crest alongside it. The crest is the one place
   the full artwork appears at size, so it gets room rather than being shrunk
   into an icon. It drops below the copy once the two no longer fit. */
.about-intro{display:flex;align-items:center;gap:52px}
.about-copy{flex:1 1 600px;max-width:760px;display:flex;flex-direction:column;gap:18px}
.about-crest{flex:0 0 auto;width:min(28vw,300px);height:auto}
/* Optical centring, because the box kind is already exact and still looks
   wrong. The artwork is bottom-heavy: the top quarter of the canvas carries
   7% of the ink — the owl and the torch tip against open sky — while the
   wreath and base carry the rest, which puts its center of mass 9.4% of the
   height below the middle of its own box. Center the boxes and the crest
   reads as sitting low against the copy.

   6% rather than the full 9.4%: the wreath's filigree covers more area than
   it carries weight, so correcting all the way swings the crest visibly high.
   A percentage of its own height, so it holds as the crest scales with the
   viewport. Only where the crest is beside the copy — once it stacks beneath,
   this is gap, not alignment. */
@media(min-width:901px){.about-crest{transform:translateY(-6%)}}
@media(max-width:900px){
  .about-intro{flex-direction:column;align-items:center;gap:34px}
  .about-copy{flex:1 1 auto}
  .about-crest{width:min(58vw,240px)}
}

/* ABOUT / FOUNDER */
.about{display:grid;grid-template-columns:280px 1fr;gap:40px;align-items:center}
@media(max-width:760px){.about{grid-template-columns:1fr;gap:24px}}
.about .photo{aspect-ratio:1;width:100%;object-fit:cover;border-radius:20px;background:linear-gradient(150deg,var(--pewter),var(--navy));
  display:grid;place-items:center;color:#fff;font-family:var(--font-display);font-size:3rem;box-shadow:var(--shadow)}
.about h2{font-size:clamp(1.7rem,3vw,2.4rem);margin-bottom:14px}
.about p{color:var(--ink-soft);margin-bottom:12px}

/* ADVISORS */
.adv{display:flex;gap:16px;align-items:center}
.adv .ph{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--pewter),var(--navy));
  flex:0 0 auto;display:grid;place-items:center;color:#fff;font-family:var(--font-display);font-size:1.4rem}
.adv h3{font-size:1.1rem} .adv p{color:var(--ink-faint);font-size:.9rem}

/* MSU Team grid (Leadership Team page) */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 28px}
@media(max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr);gap:34px 20px}}
@media(max-width:560px){.team-grid{grid-template-columns:1fr;gap:30px}}
.team-card{text-align:center}
/* height:auto is load-bearing. The width/height attributes on these <img> tags
   are presentational hints that map to the width and height properties, and
   author CSS only overrode width - so the height attribute won, aspect-ratio
   was ignored, and every portrait rendered at its own natural pixel height
   (150x142 for the 89x142 crops, 150x479 for a 300x479 one). */
.team-card img{width:100%;height:auto;max-width:150px;aspect-ratio:89/142;object-fit:cover;margin:0 auto 16px;
  border-radius:var(--radius-sm);border:1px solid var(--border-strong);box-shadow:var(--shadow)}
.team-card h3{font-size:1.05rem;letter-spacing:.055em;text-transform:uppercase;margin-bottom:5px}
.team-card .role{font-family:var(--font-body);font-weight:600;font-size:.9rem;color:var(--gold-deep)}

/* MEMBER QUOTES
   A quote is a card without the lift: these are not links, so borrowing
   .card's hover translate would promise a click that is not there. The gold
   mark is drawn with a pseudo-element rather than typed into the markup, so a
   screen reader reads the sentence and not a stray punctuation mark, and so
   the quote text itself stays exactly what the member wrote. */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.quotes.solo{grid-template-columns:minmax(0,680px);justify-content:center}
@media(max-width:900px){.quotes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.quotes{grid-template-columns:1fr}}
.quote{margin:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:30px;box-shadow:var(--shadow);display:flex;flex-direction:column;position:relative}
.quote::before{content:"“";position:absolute;top:2px;left:20px;font-family:var(--font-display);
  font-size:4.4rem;line-height:1;color:var(--gold);opacity:.36;pointer-events:none}
.quote blockquote{margin:0 0 20px;flex:1}
.quote blockquote p{font-family:var(--font-display);font-size:1.18rem;line-height:1.5;color:var(--ink);
  margin:0;position:relative}
.quote blockquote p + p{margin-top:.7em}
.quote figcaption{border-top:1px solid var(--border);padding-top:16px}
.q-name{display:block;font-family:var(--font-display);font-weight:600;font-size:1.02rem;color:var(--ink)}
.q-who{display:block;font-size:.85rem;font-weight:600;letter-spacing:.055em;text-transform:uppercase;
  color:var(--gold-deep);margin-top:4px}

/* CALL-TO-ACTION BAND */
.news{background:var(--news-bg);color:var(--news-fg);border-radius:var(--radius)}
.news-in{padding:52px 44px;display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:center}
@media(max-width:780px){.news-in{grid-template-columns:1fr;padding:38px 26px}}

/* A grid item defaults to min-width:auto, so its column cannot shrink below
   the item's min-content — and the email field's intrinsic width (~247px)
   was holding this column at 403px inside a 325px container. The page hid
   the result behind body{overflow-x:hidden}, so it read as a cut-off form
   rather than as overflow. Releasing the item's automatic minimum is the fix;
   the input's own min-width:0 was never the problem. */
.news-in > *{min-width:0}

.news h2{font-size:clamp(1.7rem,3vw,2.3rem);color:var(--news-fg)}
.news p{color:var(--news-soft);margin-top:10px}

/* FORM (register page) */
.form-wrap{max-width:720px;margin:0 auto}
.field{margin-bottom:22px}
/* First and last name sit side by side on a wide screen, and stack on a phone. */
.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media(max-width:560px){.field-pair{grid-template-columns:1fr}}
.field label{display:block;font-weight:600;font-size:.98rem;margin-bottom:8px}
.field .req{color:var(--gold-deep)}
.field .hint{font-weight:500;color:var(--ink-faint);font-size:.85rem}
.field input[type=text],.field input[type=email],.field select,.field textarea{
  width:100%;font-family:var(--font-body);font-size:1rem;color:var(--ink);background:var(--surface);
  border:1.5px solid var(--border-strong);border-radius:12px;padding:.8em 1em;transition:border-color .15s,box-shadow .15s}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--pewter);box-shadow:0 0 0 3px var(--pewter-soft)}
.choices{display:flex;flex-wrap:wrap;gap:10px}
/* Undated topics. Same pill language as .choice, but nothing to click:
   a topic is not bookable until it has a speaker and a date. */
.topics{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.topic{border:1.5px solid var(--border-strong);border-radius:999px;padding:11px 20px;
  font-weight:600;font-size:.95rem;color:var(--ink-soft);background:var(--surface)}
.choice{display:inline-flex;align-items:center;gap:9px;border:1.5px solid var(--border-strong);border-radius:999px;
  padding:.55em 1em;cursor:pointer;font-size:.94rem;background:var(--surface);transition:border-color .15s,background .15s}
.choice:hover{border-color:var(--pewter)}
.choice input{accent-color:var(--pewter);width:16px;height:16px}
.choice.has-check input{margin:0}
.form-note{color:var(--ink-faint);font-size:.88rem;margin-top:8px}
.success{display:none;background:var(--pewter-soft);border:1px solid var(--pewter);border-radius:var(--radius);padding:34px;text-align:center}
.success.show{display:block}
.success h2{color:var(--pewter);margin-bottom:10px}

/* The registration window, standing where the form was. Gold rather than the
   success panel's pewter, and the same left rule as .plainly: this is a
   "come back at ten", not a "you're done". */
.reg-closed{background:var(--surface-2);border:1px solid var(--border);
  border-left:3px solid var(--gold);border-radius:0 var(--radius) var(--radius) 0;padding:30px 32px}
.reg-closed h2{font-size:1.5rem;margin-bottom:12px}
.reg-closed p{color:var(--ink-soft);margin-bottom:12px}
.reg-closed .reg-when{color:var(--ink);font-size:1.05rem}
@media(max-width:560px){.reg-closed{padding:24px 22px}}

/* FOOTER
   One horizontal band, matching the Veterans OneSource footer: brand and
   copyright, then the links, then the certification mark. The three blocks
   sit on a single baseline and stack to centerd rows once there is no
   longer width for them. */
footer{background:var(--navy);color:var(--on-navy-soft);padding:40px 0}
.foot-in{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:26px}

.foot-brand{display:flex;align-items:center;gap:14px}
.foot-logo{width:auto;height:58px;object-fit:contain;flex:0 0 auto}
.foot-brand p{margin:0;font-size:.8rem;line-height:1.5;color:var(--hero-ink)}
/* Di Nola Consulting owns the copyright; MilSpouseU™ is the
   program it runs. Stacking them says that, where the middot ran the two
   names together as though they were one entity. */
.foot-name{display:block}
/* The marketing tagline is 435px wide on its own — wider than the links
   block can spare — and it already appears in the hero and on About. In
   this layout the brand block carries the credit line instead. */
.foot-tag{display:block;color:var(--on-navy-soft);margin-top:3px;font-size:.76rem}

.foot-cert{display:flex;align-items:center;gap:13px}
/* The certification artwork is dark, so it keeps its own light card to stay
   legible on the navy. */
.foot-cert img{width:124px;height:auto;background:#fff;border-radius:9px;
  padding:7px 9px;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.foot-cert span{font-size:.76rem;line-height:1.4;max-width:118px}

/* The two contact routes that exist nowhere else on the site take the middle
   of the band. flex:1 hands them everything the brand and the certification
   mark do not use, and they center inside it — the band had a hole there and
   they had a rule of their own underneath it. */
.foot-sub{flex:1 1 auto;display:flex;justify-content:center;flex-wrap:wrap;gap:8px 26px}
.foot-sub a{font-size:.85rem;color:var(--on-navy-soft);transition:color .15s}
.foot-sub a:hover{color:var(--gold)}

/* The band stacks earlier than it used to. Three blocks need about 930px of
   row before the certification mark drops to a second line on its own, which
   reads as a mistake rather than a stack — so the whole band goes to a centerd
   column while there is still room for it to look deliberate. */
@media(max-width:980px){
  .foot-in{flex-direction:column;text-align:center}
  .foot-brand{flex-direction:column;gap:10px}
  .foot-cert{flex-direction:column;gap:10px}
  .foot-cert span{max-width:none}
}

/* BACK TO TOP
   One fixed control, bottom right. It stays out of the way until the reader
   is most of a screen down — above that it would only offer to take them
   where they already are, and it would sit over the hero doing it. The gold
   pill and its glow are the Register Free button's, so the page has one
   primary shape rather than two.

   visibility, not just opacity: a transparent button is still in the tab
   order, and an invisible control that takes focus is worse than no control.
   Both are transitioned, so the visibility flip lands after the fade. */
.to-top{position:fixed;right:22px;bottom:22px;z-index:70;
  width:46px;height:46px;display:grid;place-items:center;padding:0;
  border:none;border-radius:50%;cursor:pointer;
  background:var(--gold);color:var(--gold-ink);box-shadow:0 6px 18px var(--gold-glow);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s,box-shadow .15s ease}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{transform:translateY(-2px);box-shadow:0 12px 30px var(--gold-glow)}
.to-top svg{width:20px;height:20px;display:block}
/* Same bargain as the theme switch: it does nothing without JS, so without
   JS it is not there to be pressed. */
html:not(.js) .to-top{display:none}
@media (prefers-reduced-motion:reduce){
  .to-top{transition:opacity .25s ease,visibility .25s}
  .to-top:hover{transform:none}
}
@media(max-width:560px){.to-top{right:14px;bottom:14px;width:42px;height:42px}}

/* reveal — progressive enhancement: sections hide only when JS is active */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}
:focus-visible{outline:2.5px solid var(--gold);outline-offset:2px;border-radius:4px}

/* --- Layout polish: more breathing room between sections --- */
section{padding:104px 0}
.sec-head{margin-bottom:52px}
section[id]{scroll-margin-top:90px}
#programming{border-top:1px solid var(--border)}
.lead-strip,.alt{padding-top:4px;padding-bottom:4px}

/* --- Tabs (About page) --- */
.tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:2px solid var(--border);margin-bottom:44px}
.tab{appearance:none;background:none;border:none;font-family:var(--font-body);font-weight:600;font-size:1.02rem;
  color:var(--ink-soft);padding:14px 22px;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;
  transition:color .15s,border-color .15s}
.tab:hover{color:var(--gold-deep)}
.tab.active{color:var(--navy);border-bottom-color:var(--gold)}
.tab-panel{display:block}
.js .tab-panel{display:none}
.js .tab-panel.active{display:block;animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.js .tab-panel.active{animation:none}}

/* --- Affiliated partners --- */
.partners{display:flex;flex-wrap:wrap;gap:18px}
.partner{flex:0 0 auto;width:250px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:26px 20px;
  text-align:center;color:var(--ink-soft);font-weight:600;box-shadow:var(--shadow);transition:transform .16s,box-shadow .16s}
.partner:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.partner .p-ph{width:48px;height:48px;border-radius:12px;background:var(--pewter-soft);color:var(--pewter);
  display:grid;place-items:center;margin:0 auto 12px}

/* --- Members' meeting room --- */
.join-card{background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius);
  padding:36px;box-shadow:var(--shadow);text-align:center;max-width:640px;margin:0 auto}
.join-card .kicker{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pewter)}
.join-card h3{font-size:1.7rem;margin:8px 0 6px}
.join-card p{color:var(--ink-soft);margin-bottom:20px}
.mr-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:760px){.mr-grid{grid-template-columns:1fr}}
.mr-note{background:var(--surface-2);border:1px dashed var(--border-strong);border-radius:12px;padding:16px 18px;
  color:var(--ink-soft);font-size:.94rem}

/* "Lost your join link?" A pill holding a field and its button. It sits on a
   light card rather than the navy band, so it takes the register form's
   colors rather than the band's. */
.findform{display:flex;gap:10px;background:var(--surface);border:1.5px solid var(--border-strong);
  border-radius:999px;padding:6px;max-width:460px;margin:0 auto;transition:border-color .15s,box-shadow .15s}
.findform:focus-within{border-color:var(--pewter);box-shadow:0 0 0 3px var(--pewter-soft)}
.findform input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--ink);
  font-size:1rem;padding:.6em 1em;font-family:var(--font-body)}
.findform input::placeholder{color:var(--ink-faint)}
.findnote{font-size:.86rem;color:var(--ink-faint);margin-top:14px}
.findnote.ok{color:var(--gold-deep);font-weight:600}
.findnote.bad{color:var(--ink-soft);font-weight:600}
@media(max-width:480px){
  .findform{flex-wrap:wrap;border-radius:22px;padding:8px}
  .findform input{flex:1 1 100%;padding:.55em .9em}
  .findform .btn{flex:1 1 100%}
}

/* The plain facts about what MSU is. It is a free peer community, not a
   school, and saying so plainly and often is the strongest thing we can do.
   Quiet by design: this is a statement of fact, not a piece of marketing. */
.plainly{max-width:720px;margin:0 auto;padding:18px 22px;border-left:3px solid var(--gold);
  background:var(--surface-2);border-radius:0 12px 12px 0;color:var(--ink-soft);font-size:.95rem}
.plainly strong{color:var(--ink)}

/* ===== Theme-aware surfaces =============================================
   Everything below reads from the tokens at the top of the file, so the
   hero, countdown and buttons follow whichever wall is showing. */

/* Hero: the marble wall in light, the navy wall in dark. The photograph
   sits behind a veil so headline text keeps its contrast either way. */
.hero{position:relative;background:var(--hero-bg);color:var(--hero-fg);
  border-bottom:1px solid var(--border);isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--hero-texture);background-size:cover;background-position:center;
  opacity:var(--hero-texture-opacity)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--hero-veil)}
/* A short gilt rule over an italic standfirst, in place of the uppercase
   letterspaced gold eyebrow. That eyebrow sitting directly above a serif
   headline was the most recognizable single piece of the hero we shared
   with joinmsop.org, and it is the cheapest one to give up. */
.hero-standfirst{font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(1.06rem,1.8vw,1.3rem);line-height:1.4;color:var(--hero-soft);margin:0 0 16px}
.hero-standfirst::before{content:"";display:block;width:56px;height:2px;
  background:var(--gold);margin-bottom:18px}
/* One button, not two. A filled primary beside an outlined secondary of equal
   weight is the other half of the shared pattern; the schedule becomes a
   quiet link so the eye has somewhere to land first. */
.hero .hero-cta{align-items:center;gap:28px}
.hero-link{display:inline-flex;align-items:center;gap:.45em;font-family:var(--font-body);
  font-weight:600;font-size:1.02rem;color:var(--gold-deep);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:3px}
.hero-link:hover,.hero-link:focus-visible{color:var(--hero-fg)}
.hero .lede{color:var(--hero-soft)}
.hero-meta{color:var(--hero-soft)}
.hero .compass{opacity:.07;color:var(--gold)}
:root[data-theme="dark"] .hero .compass{opacity:.13}

/* Countdown + live strip: glass over whichever wall is behind them. */
.cd-cell{background:var(--glass);border:1px solid var(--glass-brd);box-shadow:var(--shadow)}
.cd-num{color:var(--hero-fg)}
.cd-lab{color:var(--hero-soft)}
.hero-live{background:var(--glass);border:1px solid var(--glass-brd);color:var(--hero-fg)}
.hero-live a{color:var(--gold-deep)}

.btn-ghost{background:transparent;color:var(--hero-fg);border-color:var(--glass-brd)}
.btn-ghost:hover{border-color:var(--gold-deep);color:var(--gold-deep)}
.mr-hero{background:var(--hero-bg);color:var(--hero-fg)}

/* Brand accents: gold leads, pewter supports. No teal — it appears
   nowhere on the crest or either wall. */
section{padding:134px 0}
.sec-head{margin-bottom:60px}
.step .n{background:var(--badge-bg);color:var(--badge-fg)}
/* Picture-frame molding: an outer line with an inset line, the same profile
   as the wainscot panels on the navy wall. Any block that should read as a
   mounted panel rather than a tinted band gets it. */
.news,.framed{position:relative;border:1px solid var(--rule-soft);border-radius:var(--radius)}
.news::after,.framed::after{content:"";position:absolute;inset:9px;pointer-events:none;
  border:1px solid var(--rule-soft);border-radius:calc(var(--radius) - 6px)}
.news{background:var(--news-bg)}
/* A framed wall needs room between the molding and what it holds, or the
   portraits crowd the frame. */
.framed{padding:44px 36px}
@media(max-width:640px){.framed{padding:28px 18px}}

/* ── Gilt picture frame ─────────────────────────────────────────────────
   A traditional carved gilt moulding: acanthus volutes on a dark ground,
   a stepped shadow, then a flat polished liner down to the picture.

   The ornament is vector art in assets/frame-gilt.svg, drawn as a 192x192
   box with a 64-unit band so border-image can slice it 64 and repeat the
   edges. `round` scales each repeat to a whole number of tiles, so the
   carving never gets cut mid-motif at an odd width. The source is
   generated, not hand-drawn — see the generator note in the repo if the
   ornament ever needs retuning.

   Gilt is gilt on either wall, so this does not change between themes;
   only the drop shadow underneath does. */
/* Mounted on mat board rather than window-matted: there is no separate
   artwork panel here, so the mat is the ground the portraits sit on.
   background-clip keeps it inside the moulding instead of painting under
   the carving.

   The colors below are fixed values, not theme tokens, and that is the
   point. A framed picture does not restyle itself for the wall it hangs
   on. Left on the theme tokens, the names and roles would turn near-white
   in dark mode and disappear into a cream mat. */
.gilt{--gilt-w:34px;--mat-w:24px;
  --mat-ink:#1C2027;--mat-gold:#704D00;--mat-edge:#D2D1CC;
  position:relative;padding:calc(12px + var(--mat-w));
  background:var(--mat);background-clip:padding-box;color:var(--mat-ink);
  border:var(--gilt-w) solid transparent;
  border-image:url("assets/frame-gilt.svg") 64 round;
  box-shadow:0 26px 56px var(--gilt-cast)}
.gilt .team-card h3{color:var(--mat-ink)}
.gilt .team-card .role{color:var(--mat-gold)}
.gilt .team-card img{border-color:var(--mat-edge)}
/* Sinks the picture below the face of the frame. */
.gilt::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 2px 9px rgba(0,0,0,.26)}
@media(max-width:900px){.gilt{--gilt-w:26px;--mat-w:18px}}
@media(max-width:640px){.gilt{--gilt-w:18px;--mat-w:14px;padding:calc(8px + var(--mat-w))}}

.join-card .kicker{color:var(--gold-deep)}
.lead .accent{color:var(--gold-deep)}

/* Standalone About sub-pages (tab-style nav between separate pages) */
.subtabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:2px solid var(--border);margin-bottom:56px}
.subtabs a{font-family:var(--font-body);font-weight:600;font-size:1.02rem;color:var(--ink-soft);padding:14px 22px;
  text-decoration:none;border-bottom:3px solid transparent;margin-bottom:-2px;transition:color .15s,border-color .15s}
.subtabs a:hover{color:var(--pewter)}
.subtabs a.active{color:var(--ink);border-bottom-color:var(--pewter)}
a.card{text-decoration:none;color:inherit;display:block}
a.card:hover{border-color:var(--pewter)}
a.card .go{color:var(--pewter);font-weight:700}

/* Real section spacing fix: .wrap (a class) was overriding section (an element)
   on top/bottom padding. section.wrap is more specific, and padding-block keeps
   the side padding from .wrap intact. This is what actually separates sections. */
section.wrap{padding-block:104px}
.alt{padding-top:0;padding-bottom:0}
@media(max-width:640px){section.wrap{padding-block:72px}}

/* ===== Seal logo + hero centerpiece + portrait ===== */
/* The full crest, not the square crop the nav used to carry: that asset is
   a 168px box cropped hard around the figure, so the laurel wreath, the two
   doves and the oak sprays were cut off the mark that appears on every
   page. The crest is near-square (160x145) but not square, so the height is
   what gets set and the width follows the intrinsic ratio. It runs taller
   than the old crop because the wreath now has to fit inside the same box. */
.brand-mark{width:auto;height:62px;object-fit:contain;flex:0 0 auto}
/* The step-downs live here rather than in the nav media blocks above: this
   rule is later in the file at equal specificity, so anything set up there
   loses to it. The old ones did, silently — the mark stayed 56px at every
   width, which is what pushed the brand onto a third line on a phone. */
@media(max-width:1240px){.brand-mark{height:56px}}
@media(max-width:560px){.brand-mark{height:46px}}

/* Home hero: two columns, seal as centerpiece */
.hero{padding:0}
.hero-split{max-width:var(--maxw);margin:0 auto;padding:84px 24px;display:flex;align-items:center;gap:64px;justify-content:space-between}
.hero-split .hero-copy{flex:1 1 520px;max-width:600px}
/* The crest leads. It sits left and takes more width than it used to: it is
   the one element of this identity no generator can reproduce, so it gets
   the room. `order` rather than DOM order, so the copy still comes first
   for screen readers and stacks first on a phone. */
.hero-split .hero-seal{flex:0 0 auto;order:-1;width:min(40vw,430px)}
/* The crest is a transparent PNG with an irregular outline, so it takes a
   drop-shadow that follows its alpha rather than a box-shadow around a
   rectangle, and no border-radius. */
/* Two stacked drop-shadows, not one. A single soft shadow makes the crest
   float; a real plaque on a real wall has a tight contact shadow hard
   against its edge and a wider, weaker cast beyond it. Both follow the
   PNG's alpha, and both are offset down-right, because the page's light
   comes from the upper left. */
.hero-split .hero-seal img{width:100%;height:auto;
  filter:drop-shadow(3px 4px 2px var(--crest-contact))
         drop-shadow(12px 16px 24px var(--crest-cast))}
@media(max-width:900px){.hero-split{display:block;padding:58px 24px}.hero-split .hero-seal{display:none}}

/* Lead strip with portrait */
.lead-split{display:flex;align-items:center;gap:36px}
.lead-split .lead-portrait{flex:0 0 auto;width:150px;height:150px;border-radius:50%;object-fit:cover;box-shadow:var(--shadow);border:3px solid var(--surface)}
.lead-split p{margin:0}
@media(max-width:640px){.lead-split{flex-direction:column;text-align:center;gap:22px}.lead-split .lead-portrait{width:130px;height:130px}}


/* Next-session countdown and session-list states (post-launch) */
.cd-lead{margin:30px 0 -18px;font-size:.78rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-deep)}
.cd-lead[hidden]{display:none}
.countdown[hidden]{display:none}
.ses-row[hidden]{display:none}
#voices[hidden]{display:none}
.ses-row.past{opacity:.5}
.ses-row.past .ses-live{color:var(--ink-faint)}
.ses-row.next{background:var(--pewter-soft);box-shadow:inset 3px 0 0 var(--gold)}
.ses-row.next .ses-live{color:var(--gold-deep)}

.choice[hidden]{display:none}

.field[hidden]{display:none}

/* The registration form and its closed notice trade places, and each one
   is put away with the hidden attribute. Stated rather than left to the
   browser default, in the same spirit as the lines above: a display rule
   added to either later would otherwise silently override it. */
#regForm[hidden]{display:none}
.reg-closed[hidden]{display:none}


.tm{font-size:.5em;vertical-align:super;line-height:0;letter-spacing:0;font-weight:600}