/* FIU KFSCIS Capstone — public shell, Direction B "Knight Command" (redesign CR §4,
   approved 2026-07-05). Cinematic dark: canvas stays inside the FIU Blue family
   (never black), glass panels with hairline borders, glowing gold primary CTA,
   AllCaps tracked headings. Tokens come from /static/brand/tokens.css (loaded
   first); this file maps the existing class vocabulary onto them — selector names
   are unchanged so templates and app.js behavior stay byte-compatible.
   Self-hosted fonts (no CDN dependency in production). */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("/static/fonts/space-grotesk-500.woff2") format("woff2");}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url("/static/fonts/space-grotesk-600.woff2") format("woff2");}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("/static/fonts/space-grotesk-700.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/static/fonts/inter-400.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("/static/fonts/inter-500.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/static/fonts/inter-600.woff2") format("woff2");}

:root{
  /* Local aliases over the brand tokens (tokens.css is the source of truth).
     --ink/--line/--bg/--mut flip to the DARK context here — inner content that
     needs a light "paper" surface declares it explicitly (.paper class below). */
  --navy2:#0d2440;--blue:#56A6FF;--blue2:#7cc0ff;
  --ink:var(--fg-dark);--line:var(--hair);--bg:transparent;--mut:var(--muted-dark);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-sans);color:var(--fg-dark);line-height:1.6;-webkit-font-smoothing:antialiased;
  background:linear-gradient(180deg,var(--deep) 0%,var(--fiu-blue) 34%,var(--fiu-blue) 72%,var(--deep) 100%);
  background-attachment:fixed;}
h1,h2,h3,.dh{font-family:var(--font-sans);font-weight:800;text-transform:uppercase;letter-spacing:.02em;line-height:1.1;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
/* visible keyboard focus for all interactive elements (WCAG 2.4.7) */
a:focus-visible,button:focus-visible,select:focus-visible,
.chip:focus-visible,.btn:focus-visible,.nlinks a:focus-visible,.mobilemenu a:focus-visible{
  outline:3px solid var(--fiu-cyan);outline-offset:2px;border-radius:6px;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
button,.btn,.chip,.pill{touch-action:manipulation;}

/* ambient glow field (§4) — two fixed drifting glows; static on mobile + reduced motion */
.amb{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.amb i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.14;}
.amb .ga{width:640px;height:640px;background:var(--fiu-gold);top:-220px;right:-140px;animation:drift 26s ease-in-out infinite alternate;}
.amb .gb{width:520px;height:520px;background:var(--fiu-cyan);bottom:6%;left:-200px;opacity:.09;animation:drift 32s ease-in-out infinite alternate-reverse;}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(40px,50px)}}
@media(max-width:768px){.amb .ga,.amb .gb{animation:none;}}
@media(prefers-reduced-motion:reduce){.amb .ga,.amb .gb{animation:none;}}
main,nav.site,footer.site,.pagehero,.hero{position:relative;z-index:1;}

/* nav — sticky glass (§4) */
nav.site{position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:blur(16px) saturate(150%);background:rgba(4,14,31,.62);border-bottom:1px solid var(--hair);transition:background .25s;}
nav.site.scrolled,body.inner nav.site{background:rgba(4,14,31,.82);}
/* §3 composed FIT-DETECTION header (CR 2026-07-06). The lockup is COMPOSED (official
   FIU mark + LIVE school text + Capstone tag). A ResizeObserver (public_base.html)
   adds .is-collapsed the instant markW + gaps + one-line schoolW + 32px + navW would
   exceed the row → the inline nav folds into a top-right ☰ BEFORE any collision, so
   name and nav NEVER overlap and the name NEVER wraps mid-word. Comfortable type is
   restored — fit is handled by collapsing, not shrinking. Strict L/R justification:
   lockup flush-left (flex:0 1 auto), controls flush-right (margin-left:auto). */
/* The header is a FULL-WIDTH masthead (not capped at the 1180 content column) so the
   lockup is flush to the left edge and the controls flush to the right edge (Part 2),
   and so the inline nav has room to show on wide screens before the observer collapses
   it. Content pages keep the 1180 .wrap; only the header's wrap goes edge-to-edge. */
nav.site .wrap{max-width:none;}
.nav{display:flex;align-items:center;gap:16px;min-height:64px;flex-wrap:nowrap;}
.brand.caplock{display:flex;align-items:center;gap:12px;flex:0 1 auto;min-width:0;text-decoration:none;text-transform:none;letter-spacing:normal;}
/* Official FIU block-letter mark (white finish on the dark shell), cropped via its
   own viewBox — unaltered artwork, comfortable optical size. */
.capmark{flex:0 0 auto;display:flex;align-items:center;}
.capmark .fmark{height:38px;width:auto;display:block;}
.capid{display:flex;flex-direction:column;min-width:0;gap:1px;}
/* A (fits): ONE clean line via nowrap. Collapsed: wrap on WORD boundaries only
   (overflow-wrap:normal;word-break:normal). No overflow:hidden/text-overflow ever. */
.school{white-space:nowrap;color:#fff;font-weight:700;font-size:13px;line-height:1.16;letter-spacing:.005em;transition:font-size .2s ease;}
.captag{color:var(--fiu-gold);font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase;}
.nlinks{flex:0 0 auto;margin-left:auto;transition:gap .2s ease;}
.logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--fiu-gold),var(--fiu-gold-bright));color:var(--fiu-blue);display:grid;place-items:center;font-weight:900;font-size:13px;box-shadow:0 0 24px var(--gold-glow);}
/* Comfortable nav type restored (the ae82272 emergency shrink is undone — the
   ResizeObserver now handles fit by collapsing to ☰, not by shrinking). */
.nlinks{display:flex;gap:14px;align-items:center;margin-left:auto;}
.nlinks a{color:var(--muted-dark);font-size:12.5px;font-weight:700;transition:color .18s var(--ease);}
.nlinks a:hover{color:#fff;}
/* Active top-nav tab: tint pill + gold underline (aria-current/.is-active driven). */
.nlinks a.nav-tab{position:relative;padding:8px 11px;border-radius:9px;transition:background .16s var(--ease),color .16s var(--ease);}
.nlinks a.nav-tab:hover{color:#fff;background:rgba(255,255,255,.07);}
.nlinks a.nav-tab.is-active{color:#fff;font-weight:800;background:rgba(255,255,255,.10);}
.nlinks a.nav-tab.is-active::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2.5px;border-radius:3px;background:var(--fiu-gold);}
.mobilemenu a.nav-tab.is-active{color:#fff;background:rgba(255,255,255,.07);box-shadow:inset 3px 0 0 var(--fiu-gold);}
.nlinks a.signin{background:var(--glass);border:1px solid var(--hair-strong);color:#fff;padding:8px 16px;border-radius:9px;font-weight:800;backdrop-filter:blur(8px);}
.nlinks a.signin:hover{border-color:var(--fiu-gold);}
/* "More ▾" priority+ overflow (Dissolve-History CR §6). ALL primary tabs render
   inline; the JS distributor (public_base.html) hides the overflow tail (.pp-out)
   and mirrors it into .moremenu — the button only exists while something overflows.
   It and the ☰ share one accessible pattern. Hidden when the row collapses to ☰. */
.nlinks a.nav-tab.pp-out{display:none;}
.moreWrap{position:relative;display:inline-flex;align-items:center;flex:0 0 auto;}
.moreWrap[hidden]{display:none;}
.morebtn{font:inherit;font-size:12.5px;font-weight:700;color:var(--muted-dark);background:none;border:0;cursor:pointer;padding:8px 11px;border-radius:9px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;transition:background .16s var(--ease),color .16s var(--ease);}
.morebtn:hover,.morebtn[aria-expanded="true"]{color:#fff;background:rgba(255,255,255,.08);}
.morebtn .car{font-size:9px;opacity:.85;}
.moremenu{position:absolute;top:calc(100% + 10px);right:0;background:#0B1D38;border:1px solid rgba(255,255,255,.12);border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.4);padding:8px;min-width:200px;z-index:60;}
.moremenu[hidden]{display:none;}
.moremenu a.nav-tab{display:block;padding:9px 14px;border-radius:8px;background:none;white-space:nowrap;}
.moremenu a.nav-tab::after,.moremenu a.nav-tab.is-active::after{content:none;}
.moremenu a.nav-tab:hover{background:rgba(255,255,255,.07);color:#fff;}
.moremenu a.nav-tab.is-active{color:var(--fiu-gold);background:rgba(255,255,255,.06);}
/* role-only nav items (gold dot accent) */
.nlinks a.role-link,.mobilemenu a.role-link{color:var(--blue2);position:relative;font-weight:700;}
.nlinks a.role-link:hover{color:#fff;}
.nlinks a.role-link::after{content:'•';color:var(--fiu-gold);position:absolute;top:-5px;right:-9px;font-size:12px;}
.navuser{color:var(--faint-dark);font-size:13.5px;font-weight:500;white-space:nowrap;}
.logoutform{margin:0;display:inline;}
.nlinks .logoutform button.signin,.mobilemenu .logoutform button.signin{font:inherit;border:1px solid var(--hair-strong);cursor:pointer;background:var(--glass);color:#fff;padding:8px 16px;border-radius:9px;font-weight:800;}
.nlinks .logoutform button.signin:hover,.mobilemenu .logoutform button.signin:hover{border-color:var(--fiu-gold);}
.mm-user{color:var(--faint-dark);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:10px 24px 4px;}

/* mobile hamburger + drawer (desktop: hidden) */
.navtoggle{display:none;background:transparent;border:0;width:44px;height:44px;border-radius:10px;cursor:pointer;align-items:center;justify-content:center;padding:0;}
.navtoggle:hover{background:rgba(255,255,255,.12);}
.navtoggle:focus-visible{outline:3px solid var(--fiu-cyan);outline-offset:2px;}
.navtoggle .bars,.navtoggle .bars::before,.navtoggle .bars::after{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .25s var(--ease),opacity .2s var(--ease);}
.navtoggle .bars{position:relative;}
.navtoggle .bars::before,.navtoggle .bars::after{content:"";position:absolute;left:0;}
.navtoggle .bars::before{top:-7px;}
.navtoggle .bars::after{top:7px;}
.navtoggle[aria-expanded="true"] .bars{background:transparent;}
.navtoggle[aria-expanded="true"] .bars::before{transform:translateY(7px) rotate(45deg);}
.navtoggle[aria-expanded="true"] .bars::after{transform:translateY(-7px) rotate(-45deg);}
.mobilemenu{position:absolute;top:64px;left:0;right:0;flex-direction:column;background:rgba(4,14,31,.97);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--hair-strong);box-shadow:0 26px 50px -20px rgba(0,0,0,.6);padding:8px 0 14px;animation:menuin .22s var(--ease);}
.mobilemenu{display:flex;}
.mobilemenu[hidden]{display:none;}
.mobilemenu a{color:#dce5f2;font-weight:600;font-size:16px;padding:14px 24px;border-bottom:1px solid rgba(255,255,255,.06);}
.mobilemenu a:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none;}
.mobilemenu a.signin{margin:12px 24px 2px;background:var(--fiu-gold);color:var(--fiu-blue);border-radius:10px;text-align:center;border-bottom:0;font-weight:800;}
.mobilemenu a.signin:hover{background:var(--fiu-gold-bright);}
.mobilemenu .logoutform{margin:12px 24px 2px;display:block;}
.mobilemenu .logoutform button.signin{display:block;width:100%;text-align:center;border-radius:10px;}
@keyframes menuin{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
/* COLLAPSED (fit-detection adds .is-collapsed to nav.site): the inline nav folds to
   the top-right ☰; a gold-gradient rule appears; the school name expands and wraps on
   WORD boundaries (never mid-word, never clipped). The ☰ is flush-right. */
nav.site.is-collapsed .nlinks{display:none;}
nav.site.is-collapsed .navtoggle{display:inline-flex;margin-left:auto;}
nav.site.is-collapsed .brand.caplock{flex:1 1 auto;}
nav.site.is-collapsed .school{white-space:normal;overflow-wrap:normal;word-break:normal;font-size:15px;}
nav.site.is-collapsed{border-bottom:3px solid transparent;
  border-image:linear-gradient(90deg,var(--fiu-gold) 0%,var(--fiu-bright-gold) 100%) 1;}
/* No-JS / pre-observer fallback: below 760px always show the ☰ (never a broken row). */
@media(max-width:760px){
  nav.site:not(.fit-ready) .nlinks{display:none;}
  nav.site:not(.fit-ready) .navtoggle{display:inline-flex;margin-left:auto;}
  nav.site:not(.fit-ready) .school{white-space:normal;overflow-wrap:normal;word-break:normal;}
}
@media(prefers-reduced-motion:reduce){
  .mobilemenu{animation:none;}
  .school,.nlinks{transition:none;}
  .navtoggle .bars,.navtoggle .bars::before,.navtoggle .bars::after{transition:none;}
}

/* buttons — gold primary with glow; glass secondary (§4) */
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:10px;font-weight:800;font-size:14px;letter-spacing:.05em;text-transform:uppercase;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease);cursor:pointer;border:1px solid transparent;}
.btn.primary{background:linear-gradient(120deg,var(--fiu-gold),#E0B95C);color:var(--fiu-blue);box-shadow:0 8px 30px -6px var(--gold-glow);}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 14px 40px -6px var(--gold-glow);}
.btn.ghost{background:var(--glass);border-color:var(--hair-strong);color:#fff;backdrop-filter:blur(8px);}
.btn.ghost:hover{border-color:var(--fiu-gold);}
.btn.solid{background:var(--elev);border-color:var(--hair-strong);color:#fff;}
.btn.solid:hover{border-color:var(--fiu-gold);}
@media(prefers-reduced-motion:reduce){.btn.primary:hover{transform:none;}}

/* hero */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;color:#fff;}
.aurora{position:absolute;inset:-20%;filter:blur(70px);opacity:.5;z-index:0;}
.blob{position:absolute;border-radius:50%;mix-blend-mode:screen;animation:float 18s ease-in-out infinite;}
.b1{width:560px;height:560px;background:radial-gradient(circle,rgba(209,166,68,.5),transparent 70%);top:-8%;left:-6%;}
.b2{width:620px;height:620px;background:radial-gradient(circle,rgba(0,183,213,.4),transparent 70%);bottom:-18%;right:-8%;animation-delay:-6s;}
.b3{width:460px;height:460px;background:radial-gradient(circle,#D1A64455,transparent 70%);top:30%;right:24%;animation-delay:-11s;}
@keyframes float{0%,100%{transform:translate(0,0) scale(1);}33%{transform:translate(40px,-30px) scale(1.08);}66%{transform:translate(-30px,25px) scale(.95);}}
.grid-ov{position:absolute;inset:0;z-index:1;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:60px 60px;-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000,transparent);mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000,transparent);}
.hero .wrap{position:relative;z-index:2;padding-top:96px;padding-bottom:60px;}
.kick{display:inline-flex;align-items:center;gap:10px;background:var(--glass);border:1px solid var(--hair);padding:8px 16px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-dark);margin-bottom:24px;backdrop-filter:blur(8px);}
.kick .dot{width:8px;height:8px;border-radius:50%;background:var(--fiu-gold);box-shadow:0 0 12px var(--fiu-gold);}
.hero h1{font-size:clamp(38px,6vw,74px);line-height:1.05;font-weight:900;max-width:16ch;}
.hero h1 .grad{background:linear-gradient(92deg,var(--fiu-gold),var(--fiu-gold-bright));-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero p.sub{font-size:clamp(16px,2vw,20px);color:var(--muted-dark);max-width:60ch;margin:22px 0 34px;}
.cta{display:flex;gap:14px;flex-wrap:wrap;}
.stats{display:flex;gap:38px;margin-top:54px;flex-wrap:wrap;}
.stat .n{font-size:38px;font-weight:900;color:var(--fiu-gold);line-height:1.05;}
.stat .n .gold{color:var(--fiu-gold);}
.stat .l{font-size:11px;color:var(--muted-dark);text-transform:uppercase;letter-spacing:.18em;font-weight:800;}
.scrollcue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;color:var(--faint-dark);font-size:12px;letter-spacing:.1em;text-transform:uppercase;animation:bob 2.4s infinite;}
@keyframes bob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}}

/* photo hero — cohort-photo crossfade rotator (FERPA-safe: scrim + blur; §7:
   navy multiply overlay >= .75 so text pairs keep AA). */
.photohero .photos{position:absolute;inset:0;z-index:0;}
.photohero .slide{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;
  opacity:0;transform:scale(1.04);filter:blur(2px) saturate(1.05);transition:opacity 1.6s ease;will-change:opacity;}
.photohero .slide.on{opacity:1;}
.photohero .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(110deg,rgba(4,14,31,.94),rgba(4,14,31,.85) 38%,rgba(8,30,63,.66) 70%,rgba(8,30,63,.5) 100%);}
.photohero .scrim2{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(4,14,31,.66),transparent 42%);}
.photohero .wrap{position:relative;z-index:2;}
.photohero .credit{position:absolute;right:14px;bottom:11px;z-index:2;color:rgba(255,255,255,.55);font-size:11px;letter-spacing:.02em;}
@media(prefers-reduced-motion:reduce){.photohero .slide{transition:none;}}

/* "A decade of builders" strip (gated; identifiable photos) */
.years .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;}
.pcard{position:relative;margin:0;border:1px solid var(--hair);border-radius:14px;overflow:hidden;background:var(--glass);backdrop-filter:blur(8px);box-shadow:0 14px 30px -22px rgba(0,0,0,.6);}
.pcard img{width:100%;height:175px;object-fit:cover;display:block;}
.pcard figcaption{padding:11px 15px;font-weight:700;color:var(--fg-dark);font-size:14px;}
@media(max-width:560px){.years .grid{grid-template-columns:1fr 1fr;}}

/* visually-hidden page <h1> (LAUNCH 2026-07-21 site-wide heroes) — the visible
   headline lives inside the hero rotator's <h2> slides, but every page still
   needs exactly one real <h1> for a11y/SEO. */
.vh-h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* live stats band under the Home/About hero (LAUNCH 2026-07-21) */
.statband{display:flex;gap:38px;flex-wrap:wrap;justify-content:center;padding:18px 0;}
.statband b{display:block;font-size:30px;font-weight:900;color:var(--fiu-gold);line-height:1.1;}
.statband span{font-size:11px;color:var(--muted-dark);text-transform:uppercase;letter-spacing:.14em;font-weight:800;}

/* compact page hero for inner pages */
.pagehero{color:#fff;position:relative;overflow:hidden;}
.pagehero .wrap{position:relative;z-index:2;padding:104px 24px 44px;}
.pagehero .eyebrow{color:var(--fiu-gold);}
.pagehero h1{font-size:clamp(28px,4.4vw,46px);margin:8px 0 10px;font-weight:900;}
.pagehero p{color:var(--muted-dark);max-width:64ch;font-size:17px;}

/* showcase band — gold-bordered glowing panel (§4) */
.band{margin:-70px auto 0;position:relative;z-index:5;}
.bandcard{border:1px solid rgba(209,166,68,.4);border-radius:20px;padding:30px 34px;color:#fff;display:flex;gap:30px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:radial-gradient(120% 160% at 90% -20%,rgba(209,166,68,.16),transparent 55%),var(--glass);
  backdrop-filter:blur(10px);box-shadow:0 30px 70px -30px rgba(0,0,0,.6);}
.bandcard .ev{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fiu-gold);font-weight:800;}
.bandcard h3{font-size:24px;margin:6px 0;text-transform:none;letter-spacing:0;font-weight:900;}
.bandcard .meta{color:var(--muted-dark);font-size:14.5px;display:flex;gap:18px;flex-wrap:wrap;}
.bandcard .meta b{color:#fff;font-weight:700;}

/* sections */
.sec{padding:92px 0 40px;}
.sec.tight{padding:56px 0 40px;}
.sechead{text-align:center;max-width:680px;margin:0 auto 40px;}
.eyebrow{color:var(--fiu-gold);font-weight:800;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;}
.sechead h2{font-size:clamp(28px,4vw,44px);margin:10px 0 12px;font-weight:900;}
.sechead p{color:var(--mut);font-size:17px;}

/* chips / filter pills */
.chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:34px;}
.chip{border:1px solid var(--hair-strong);background:transparent;padding:9px 18px;border-radius:999px;font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-dark);cursor:pointer;transition:.18s var(--ease);min-height:40px;}
.chip:hover{color:var(--fg-dark);border-color:var(--fg-dark);text-decoration:none;}
.chip.on{background:var(--fiu-gold);color:var(--fiu-blue);border-color:var(--fiu-gold);}

/* cards — glass (§4). Discipline chips keep their light pill backgrounds
   (their tinted bg + dark text pairs already pass AA and preserve the color code). */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:22px;}
.card{position:relative;background:var(--glass);border:1px solid var(--hair);border-radius:14px;padding:24px 24px 22px;overflow:hidden;transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);display:flex;flex-direction:column;backdrop-filter:blur(8px);}
.card:hover{transform:translateY(-5px);box-shadow:0 26px 60px -26px rgba(0,0,0,.65);border-color:rgba(209,166,68,.5);text-decoration:none;}
@media(prefers-reduced-motion:reduce){.card:hover{transform:none;}}
.card .bar{position:absolute;top:0;left:0;right:0;height:3px;background:var(--ac,var(--fiu-gold));opacity:.85;}
.card .tags{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;}
.tag{font-size:11px;font-weight:700;padding:4px 10px;border-radius:7px;}
.tag.disc{background:var(--acbg,#e8f0fe);color:var(--ac,#2f6fe0);}
.tag.crs{background:rgba(255,255,255,.1);color:var(--fg-dark);}
.tag.award{background:var(--fiu-gold);color:var(--fiu-blue);}
.card h3{font-size:18px;line-height:1.3;margin-bottom:10px;color:var(--fg-dark);text-transform:none;letter-spacing:0;}
.card p.snip{color:var(--mut);font-size:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1;}
.card .foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--hair);display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted-dark);font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.card .arrow{color:var(--fiu-gold);font-weight:800;opacity:0;transform:translateX(-6px);transition:.18s var(--ease);}
.card:hover .arrow{opacity:1;transform:translateX(0);}

/* ── unified dashboard: role panels rendered inside the shell ── */
.dashwrap{padding-top:30px;}
.rolenote{margin:6px 0 4px;padding:11px 16px;border-radius:12px;font-size:13.5px;background:rgba(209,166,68,.12);border:1px solid rgba(209,166,68,.4);color:#EAD7A4;}
.rolenote .k{font-weight:800;color:#fff;}
.dpanel{background:var(--glass);border:1px solid var(--hair);border-radius:18px;padding:22px 24px;margin:14px 0;box-shadow:0 18px 40px -28px rgba(0,0,0,.6);position:relative;overflow:hidden;backdrop-filter:blur(8px);}
.dpanel::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--fiu-gold);}
.dpanel .tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--fiu-gold);margin-bottom:4px;background:transparent;padding:0;}
.dpanel h2{font-size:19px;margin:0 0 3px;color:var(--fg-dark);text-transform:none;letter-spacing:0;}
.dpanel .psub{color:var(--mut);font-size:13.5px;margin-bottom:16px;}
.dgrid{display:grid;gap:13px;grid-template-columns:repeat(4,1fr);}
@media(max-width:760px){.dgrid{grid-template-columns:1fr 1fr;}}
.metric{background:rgba(255,255,255,.03);border:1px solid var(--hair);border-radius:13px;padding:14px;}
.metric .n{font-size:23px;font-weight:900;color:var(--fiu-gold);}
.metric .l{font-size:12.5px;color:var(--mut);margin-top:3px;}
.bars{display:flex;gap:5px;align-items:flex-end;height:30px;margin-top:8px;}
.bars i{flex:1;background:linear-gradient(180deg,rgba(209,166,68,.9),rgba(209,166,68,.4));border-radius:3px 3px 0 0;opacity:.9;min-height:3px;}
.pill{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;}
.pill.green{background:rgba(46,160,103,.2);color:#7ADFA9;}
.pill.amber{background:rgba(209,166,68,.18);color:#EAD7A4;}
.pill.red{background:rgba(224,82,82,.18);color:#F1A6A6;}
.row2{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px;}
.mini{font:inherit;font-size:13px;font-weight:700;border:1px solid var(--hair-strong);background:var(--glass);border-radius:8px;padding:7px 12px;cursor:pointer;color:var(--fg-dark);text-decoration:none;display:inline-block;}
.mini:hover{border-color:var(--fiu-gold);color:#fff;text-decoration:none;}
select.mini{padding:7px 10px;background:var(--elev);}
select.mini option{background:var(--elev);color:var(--fg-dark);}
.listrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--hair);font-size:14px;}
.listrow:last-child{border:0;}
.listrow .rmut{color:var(--mut);font-size:13px;}
.dpanel .comingsoon{opacity:.65;}
.dpanel .comingsoon .n{color:var(--mut);}
/* compact rounded hero for the dashboard's public section */
.dhero{background:radial-gradient(120% 140% at 15% 10%,var(--elev) 0%,var(--fiu-blue) 55%);color:#fff;border-radius:20px;padding:38px 34px;margin:18px 0 6px;position:relative;overflow:hidden;border:1px solid var(--hair);}
.dhero .kick{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-dark);margin-bottom:0;background:transparent;border:0;padding:0;}
.dhero h1{font-size:clamp(24px,3.2vw,33px);line-height:1.12;margin:10px 0 8px;max-width:22ch;font-weight:900;}
.dhero h1 .grad{background:linear-gradient(92deg,var(--fiu-gold),var(--fiu-gold-bright));-webkit-background-clip:text;background-clip:text;color:transparent;}
.dhero p{color:var(--muted-dark);max-width:56ch;font-size:15px;}
.sechead-min{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin:26px 0 12px;}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s,transform .6s;}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}.blob{animation:none;}.scrollcue{animation:none;}}

/* filters (projects) */
form.filters{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;justify-content:center;margin-bottom:30px;}
form.filters .f{display:flex;flex-direction:column;gap:6px;}
form.filters label{font-size:11px;font-weight:800;color:var(--mut);text-transform:uppercase;letter-spacing:.12em;}
form.filters select{padding:10px 12px;border:1px solid var(--hair-strong);border-radius:10px;font-size:14px;background:var(--elev);color:var(--fg-dark);min-width:180px;font-family:inherit;}
form.filters .applybtn{padding:11px 18px;border-radius:10px;}
.resultcount{text-align:center;color:var(--mut);font-size:14px;margin-bottom:22px;}
.termgroup{margin-bottom:40px;}
.termgroup > h2{font-size:20px;color:var(--fg-dark);margin-bottom:18px;display:flex;align-items:center;gap:12px;}
.termgroup > h2 .ct{font-size:13px;font-weight:500;color:var(--mut);text-transform:none;letter-spacing:0;}

/* detail — top padding must clear the 64px fixed nav (like .pagehero).
   Long-form body text sits on an elevated panel to keep >=4.5:1 (§4). */
article.detail{padding:104px 0 64px;}
article.detail .crumbs{color:var(--mut);font-size:13.5px;margin-bottom:14px;}
article.detail .crumbs a:hover{color:var(--fiu-gold);text-decoration:underline;}
article.detail .meta{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 18px;}
article.detail h1{font-size:clamp(26px,3.8vw,40px);color:var(--fg-dark);line-height:1.12;max-width:24ch;font-weight:900;}
article.detail .accent{height:5px;width:64px;border-radius:6px;background:var(--ac,var(--fiu-gold));margin-bottom:18px;}
article.detail .heroimg{width:100%;aspect-ratio:16/9;max-height:440px;object-fit:cover;border-radius:16px;margin:10px 0 26px;border:1px solid var(--hair-strong);}
article.detail .abstract{font-size:17px;color:var(--fg-dark);white-space:pre-wrap;max-width:75ch;background:rgba(11,37,73,.8);border:1px solid var(--hair);border-radius:16px;padding:22px 24px;}
.kv{margin-top:26px;border-top:1px solid var(--hair);padding-top:18px;max-width:75ch;}
.kv div{margin:7px 0;color:var(--mut);}.kv b{color:var(--fg-dark);}
.backlink{display:inline-block;margin-top:30px;color:var(--fiu-gold);font-weight:700;}

/* event page */
.eventgrid{display:grid;grid-template-columns:1.5fr 1fr;gap:30px;align-items:start;}
@media(max-width:820px){.eventgrid{grid-template-columns:1fr;}}
.panel{background:var(--glass);border:1px solid var(--hair);border-radius:16px;padding:26px 28px;backdrop-filter:blur(8px);}
.panel h2,.panel h3{color:var(--fg-dark);font-size:18px;margin-bottom:12px;text-transform:none;letter-spacing:0;}

/* Resource Center rich-content pages (Video Guidelines): rendered markdown inside
   the same .panel shell as the plain-text instruction pages. */
.md-body{font-size:16px;line-height:1.7;color:var(--fg-dark);}
.md-body h1{font-size:clamp(22px,3vw,28px);margin:0 0 14px;}
.md-body h2{font-size:20px;margin:26px 0 10px;color:var(--fiu-gold);}
.md-body h2:first-child{margin-top:0;}
.md-body h3{font-size:17px;margin:18px 0 8px;}
.md-body p{margin:0 0 14px;}
.md-body ul,.md-body ol{margin:0 0 14px;padding-left:22px;}
.md-body li{margin:4px 0;}
.md-body hr{border:0;border-top:1px solid var(--hair);margin:22px 0;}
.md-body a{color:var(--fiu-gold);font-weight:600;}
.md-body strong{color:var(--fg-dark);}
.md-body code{background:rgba(255,255,255,.08);border-radius:4px;padding:1px 5px;font-size:14px;}
.md-body table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:15px;}
.md-body th,.md-body td{border:1px solid var(--hair);padding:8px 12px;text-align:left;vertical-align:top;}
.md-body th{background:rgba(255,255,255,.06);color:var(--fg-dark);}
.heritage-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;border:1px solid var(--hair-strong);margin:10px 0 12px;}
.factline{display:flex;gap:10px;margin:10px 0;font-size:15px;color:var(--fg-dark);}
.factline .ic{color:var(--fiu-gold);font-weight:700;}
.pavilions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}
.pav{background:rgba(255,255,255,.08);color:var(--fg-dark);font-size:13px;font-weight:600;padding:6px 13px;border-radius:20px;border:1px solid var(--hair);}
.pav.kf{background:rgba(209,166,68,.15);color:#EAD7A4;border-color:rgba(209,166,68,.4);}
.ctastack{display:flex;flex-direction:column;gap:12px;}
.ada{font-size:13px;color:var(--mut);margin-top:18px;border-top:1px solid var(--hair);padding-top:14px;}

.empty{padding:46px;text-align:center;color:var(--mut);border:1px dashed var(--hair-strong);border-radius:16px;background:var(--glass);}

/* ── alumni / engage hubs ── */
.nugget{background:var(--glass);border:1px solid var(--hair);border-radius:16px;padding:20px 22px;display:flex;flex-direction:column;backdrop-filter:blur(8px);}
.nugget .ntag{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--fiu-gold);}
.nugget h3{font-size:17px;line-height:1.3;margin:8px 0;color:var(--fg-dark);text-transform:none;letter-spacing:0;}
.nugget p{color:var(--mut);font-size:14.5px;flex:1;}
.nugget .ndisc{margin-top:14px;padding-top:12px;border-top:1px solid var(--hair);font-size:12.5px;color:var(--faint-dark);}
.spot{background:radial-gradient(120% 160% at 90% -20%,rgba(209,166,68,.14),transparent 55%),var(--elev);color:#fff;border-radius:18px;padding:24px 26px;border:1px solid var(--hair-strong);}
.spot .sq{font-size:16px;line-height:1.55;}
.spot .swho{margin-top:14px;font-weight:700;}.spot .swho span{display:block;color:var(--muted-dark);font-weight:500;font-size:13.5px;}
.lane{background:var(--glass);border:1px solid var(--hair);border-radius:16px;padding:22px 24px;display:flex;flex-direction:column;backdrop-filter:blur(8px);}
.lane .lnum{width:30px;height:30px;border-radius:9px;background:var(--fiu-gold);color:var(--fiu-blue);display:grid;place-items:center;font-weight:900;margin-bottom:12px;}
.lane.free .lnum{background:#2EA067;color:#fff;}
.lane h3{font-size:17px;color:var(--fg-dark);margin-bottom:8px;text-transform:none;letter-spacing:0;}
.lane p{color:var(--mut);font-size:14.5px;flex:1;}
.lane .lcta{margin-top:14px;}
.freepill{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#7ADFA9;background:rgba(46,160,103,.18);border-radius:999px;padding:3px 10px;margin-left:8px;vertical-align:middle;}
.ltable{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--elev);border:1px solid var(--hair-strong);border-radius:14px;overflow:hidden;color:var(--fg-dark);}
.ltable th,.ltable td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--hair);}
.ltable th{background:rgba(255,255,255,.05);color:var(--fg-dark);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;}
.ltable tr:last-child td{border-bottom:0;}
.ltable .yes{color:#F1A6A6;font-weight:700;}.ltable .no{color:#7ADFA9;font-weight:700;}
.ltwrap{overflow-x:auto;}
@media(max-width:640px){.ltable{min-width:520px;}}
details.faq{background:var(--glass);border:1px solid var(--hair);border-radius:12px;margin-bottom:10px;padding:0 18px;backdrop-filter:blur(8px);}
details.faq summary{cursor:pointer;font-weight:700;color:var(--fg-dark);padding:15px 0;font-size:15.5px;list-style:none;}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::before{content:'+';color:var(--fiu-gold);font-weight:800;margin-right:10px;}
details.faq[open] summary::before{content:'–';}
details.faq p{color:var(--muted-dark);padding:0 0 16px;font-size:14.5px;}

/* ── public lead-capture forms (alumni opt-in, engage) ── */
.pform{max-width:680px;}
.pform .fr{margin-bottom:15px;}
.pform .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:560px){.pform .grid2{grid-template-columns:1fr;}}
.pform label.lbl{display:block;font-weight:700;font-size:14px;margin-bottom:6px;color:var(--fg-dark);}
.pform input[type=text],.pform input[type=email],.pform select,.pform textarea{
  width:100%;padding:11px 13px;border:1px solid var(--hair-strong);border-radius:10px;font:inherit;font-size:15px;background:rgba(255,255,255,.06);color:var(--fg-dark);}
.pform ::placeholder{color:var(--faint-dark);}
.pform select option{background:var(--elev);color:var(--fg-dark);}
.pform textarea{min-height:110px;resize:vertical;}
.pform input:focus-visible,.pform select:focus-visible,.pform textarea:focus-visible{outline:3px solid var(--fiu-cyan);outline-offset:1px;border-color:var(--fiu-gold);}
.pform .checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px;}
.pform .check{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--hair);border-radius:10px;padding:11px 13px;background:var(--glass);cursor:pointer;font-size:14.5px;min-height:44px;color:var(--fg-dark);}
.pform .check:hover{border-color:var(--fiu-gold);}
.pform .check input{margin-top:2px;width:17px;height:17px;flex:0 0 auto;cursor:pointer;}
.pform .submitrow{margin-top:18px;}
.formmsg{margin:14px 0 0;padding:12px 15px;border-radius:10px;font-size:14.5px;display:none;}
.formmsg.show{display:block;}
.formmsg.ok{background:rgba(46,160,103,.16);color:#7ADFA9;border:1px solid rgba(46,160,103,.45);}
.formmsg.err{background:rgba(224,82,82,.14);color:#F1A6A6;border:1px solid rgba(224,82,82,.4);}

/* footer (§4) — readability CR 2026-07-05: navy gradient floor, white links (16.5:1),
   gold AllCaps labels (7.3:1 on navy), cyan hover/focus. No gold/cyan as resting text. */
footer.site{background:linear-gradient(180deg,#081E3F 0%,#040E1F 100%);color:#E8ECF2;margin-top:70px;padding:54px 0 30px;border-top:1px solid var(--hair);}
footer.site .ft{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;border-bottom:1px solid var(--hair);padding-bottom:26px;margin-bottom:22px;}
footer.site h4{color:#D1A644;font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;margin-bottom:10px;}
footer.site .fl{font-size:13.5px;line-height:2;color:#E8ECF2;}
footer.site .fl a{color:#FFFFFF;text-decoration:none;}
footer.site .fl a:hover,footer.site .fl a:focus-visible{color:#00B7D5;text-decoration:underline;}
footer.site .fl a:focus-visible{outline:2px solid #00B7D5;outline-offset:2px;}
footer.site .note{text-align:center;font-size:12px;color:#E8ECF2;margin-top:14px;}
footer.site .lockup{height:44px;width:auto;max-width:80vw;object-fit:contain;object-position:left center;margin-bottom:12px;}

/* [B1] standing footer — Prof. Sadjadi's photo + email + phone, sole contact. */
.organizer-contact{display:flex;align-items:center;gap:12px;justify-content:center;padding:16px 0;border-top:1px solid var(--hair);margin-top:4px}
.organizer-contact-photo{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid #D1A644}
.organizer-contact-text{font-size:12.5px;line-height:1.5;text-align:left}
.organizer-contact-text b{color:#fff;display:block}
.organizer-contact-text a{color:#E8ECF2;text-decoration:none}
.organizer-contact-text a:hover,.organizer-contact-text a:focus-visible{color:#00B7D5;text-decoration:underline}

/* Brand icon system. Line icons inline + inherit currentColor; tiles are <img>. */
.ico{vertical-align:middle}
.factline .ic{display:inline-flex;align-items:center;justify-content:center;color:var(--fiu-gold)}
.tile-ico{display:block}
.hero-tile{display:flex;align-items:center;gap:14px}
.hero-tile .tile-ico{filter:drop-shadow(0 6px 16px rgba(0,0,0,.4))}

/* ---- Knight Talent landing: audience framing (slice 8) ---- */
.sec.audiences{background:rgba(2,8,18,.35);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);}
.audgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px;}
.audcard{display:flex;flex-direction:column;gap:10px;background:var(--glass);border:1px solid var(--hair);border-radius:16px;padding:20px 18px;backdrop-filter:blur(8px);}
.audcard .audh{display:flex;align-items:center;gap:10px;color:var(--fg-dark);}
.audcard .audh svg{color:var(--fiu-gold);flex:0 0 auto;}
.audcard h3{font-size:16px;margin:0;color:var(--fg-dark);text-transform:none;letter-spacing:0;}
.audcard p{color:var(--mut);font-size:14px;line-height:1.55;flex:1;margin:0;}
.audcard .btn{margin-top:4px;width:100%;text-align:center;justify-content:center;}
.audnote{margin:22px auto 0;max-width:780px;text-align:center;color:var(--mut);font-size:13px;}
@media(max-width:900px){.audgrid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.audgrid{grid-template-columns:1fr;}}

/* ---- public-header account menu (mirrors the dashboard avatar menu) ---- */
/* The avatar lives in a PERSISTENT slot OUTSIDE .nlinks (CR 2026-07-06 Part 2), so
   it stays visible next to the ☰ when the inline nav collapses. .avmenu keeps its own
   positioning context for the dropdown; .avpersist is the always-on flex item. */
.avpersist{flex:0 0 auto;display:inline-flex;align-items:center;}
.avmenu{position:relative;}
.avbtn{background:none;border:0;padding:0;cursor:pointer;border-radius:50%;line-height:0;}
/* Initials-first base layer + photo overlay (CR Part E) — matches the portal chip:
   the initials always render; the eager <img> fades in on load (.ld). */
.savatar{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;width:34px;height:34px;background:var(--elev);color:#fff;font-weight:700;box-shadow:0 0 0 2px rgba(255,255,255,.35),0 0 0 4px var(--fiu-gold);}
.savatar img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .15s ease;}
.savatar img.ld{opacity:1;}
.savatar.init{font-family:var(--font-sans);}
/* Account dropdown stays a LIGHT surface (a floating "paper" menu reads best on
   the dark shell) — its internal pairs are the verified light-context tokens. */
.avdrop{position:absolute;right:0;top:46px;min-width:248px;max-width:300px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.5);padding:6px;display:none;z-index:120;color:var(--fiu-blue);}
.avdrop.open{display:block;}
.avdhead{display:flex;align-items:center;gap:10px;padding:9px 10px 10px;border-bottom:1px solid rgba(8,30,63,.1);margin-bottom:4px;}
.avdmeta{min-width:0;}
.avdname{font-weight:700;color:var(--fiu-blue);}
.avdemail{font-size:11.5px;color:var(--ink-60);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:210px;}
.avbadges{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;}
.avbadge{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px;background:#eef3fb;color:#1d4e89;}
.avbadge.ok{background:#e7f5ee;color:#13633a;}
.avbadge.alum{background:#f6edd6;color:#8a6516;}
.avsec{padding:3px 0;border-top:1px solid rgba(8,30,63,.1);}
.avsec:first-of-type{border-top:0;}
.avdrop a,.avdrop .avlogout{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:9px;color:#27344c;text-decoration:none;font-size:14px;width:100%;text-align:left;background:none;border:0;cursor:pointer;font:inherit;}
.avdrop a:hover,.avdrop .avlogout:hover{background:#eef3fb;}
.mm-acct{display:flex;align-items:center;gap:10px;padding:10px 24px;color:#fff;font-weight:600;}
.mm-acct .savatar{width:30px;height:30px;}

/* ---- "paper" escape hatch: self-contained light cards (judge journey forms,
   registration) keep navy-on-white internals on the dark canvas. ---- */
.paper{background:var(--surface);color:var(--fiu-blue);}

/* ---- Public-shell light-surface ink — root-cause fix (greyed-text CR 2026-07-06) ----
   STANDING RULE: on this dark shell the body default is the LIGHT reverse ink
   (--fg-dark #EDF1F7, for the hero/nav/footer). A white/light card that sets a
   background but forgets its own color inherits that light ink → light-on-white
   (~1.1:1, effectively invisible — e.g. the /judge/register checkbox labels). So
   EVERY light surface must set its own dark ink; never rely on inheritance from body.
   Prefer the .paper class on new cards; the judge-journey + history cards below
   predate it and are pinned here. Descendants inherit, so setting the CARD's color
   also fixes its incidental text (checkbox labels, hints). Dark/glass .card etc. are
   untouched (they keep --fg-dark). Do NOT use var(--ink) here — on the public shell it
   resolves to the light --fg-dark. Note .pcard is scoped to .ldetail so the dark
   showcase project cards on /projects are not recolored. */
.jr-card,.jr-welcomeback,.jr-ck,.je-card,.je-save,.je-lock,.ji-card,.ji-ack,.jh-next,
.jh-card,.jh-ping,.jt-cert,.consent,.ldetail .pcard,.semjump select{color:var(--fiu-blue);}
/* Belt-and-suspenders: secondary/hint copy on white → navy tint (≥7:1), not light ink. */
.form-hint,.field-note{color:#3A4A63;}

/* ═══════════ Archive Explorer v2 — shared explorer shell (slice 7 dedup) ═══════════
   ONE canonical copy of the calm-shell CSS that /projects and /showcase both use
   (previously duplicated verbatim in each template's head_extra). Selectors are
   byte-identical to the originals; genuinely page-specific rules (omnibox, search
   results, unlock whisper, past-showcase strips, …) stay in their templates. */

/* ── §2.0 calm stepper bar — ONE flex row, never wraps (one-line rule) ── */
.stepbar{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;margin:20px 0 0;min-width:0}
.steparrow{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:50%;font-size:26px;line-height:1;text-decoration:none;color:var(--fg-dark);
  background:var(--glass);border:1px solid var(--hair-strong);transition:border-color .15s,transform .08s}
.steparrow:hover{border-color:var(--fiu-gold);transform:scale(1.05)}
.steparrow.disabled{opacity:.35;pointer-events:none}
.stepmain{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.steplabel{font-weight:800;font-size:22px;letter-spacing:.02em;text-transform:uppercase;color:var(--fg-dark);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.todaytag{flex:0 0 auto;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:var(--fiu-gold);color:var(--navy);border-radius:5px;padding:2px 7px}
.stepct{color:var(--muted-dark);font-size:13.5px;white-space:nowrap}
.backtoday{color:var(--fiu-gold);font-weight:700;font-size:13px;text-decoration:none;white-space:nowrap;
  padding:8px 0;margin:-8px 0}
.backtoday:hover{text-decoration:underline}
.explorebtn{flex:0 0 auto;margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;
  padding:9px 16px;border-radius:12px;background:var(--glass);border:1px solid var(--hair-strong);
  color:var(--fg-dark);font-family:inherit;font-weight:700;font-size:13.5px;cursor:pointer;transition:border-color .15s}
.explorebtn:hover{border-color:var(--fiu-gold)}
.explorebtn kbd{font-family:var(--font-sans);font-weight:600;font-size:10.5px;line-height:1;color:var(--muted-dark);
  border:1px solid var(--hair-strong);border-radius:5px;padding:3px 5px;background:rgba(255,255,255,.04)}
@media(max-width:720px){
  .explorebtn kbd{display:none}
  .steplabel{font-size:17px}
  .steparrow{width:44px;height:44px;font-size:22px}
}

/* ── §2.2 Explore panel (power layer): collapsed glass panel under the stepper ── */
.expanel{overflow:hidden;max-height:0;opacity:0;visibility:hidden;margin-top:12px;border-radius:16px;
  transition:max-height .45s var(--ease),opacity .3s ease,visibility 0s linear .45s}
.expanel.open{max-height:1600px;opacity:1;visibility:visible;
  transition:max-height .5s var(--ease),opacity .35s ease}
.expanel.noanim,.expanel.noanim.open{transition:none}
@media(prefers-reduced-motion:reduce){.expanel,.expanel.open{transition:none}}
.expanel-in{background:var(--glass);border:1px solid var(--hair);border-radius:16px;padding:16px;
  display:grid;gap:16px;backdrop-filter:blur(14px)}

/* one-line rule: the ‹ › paddles + the chip rail share ONE non-wrapping flex row at every width */
.railrow{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;min-width:0}
.railpad{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--glass);
  border:1px solid var(--hair-strong);color:var(--fg-dark);font-size:20px;line-height:1;cursor:pointer}
.railpad:hover{border-color:var(--fiu-gold)}
.semrail{flex:1 1 0;min-width:0;display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;
  scroll-snap-type:x proximity;padding:4px 2px;scrollbar-width:thin}
.railchip{flex:0 0 auto;scroll-snap-align:start;display:inline-flex;align-items:center;gap:8px;min-height:44px;
  padding:8px 15px;border-radius:999px;background:var(--glass);border:1px solid var(--hair-strong);
  color:var(--fg-dark);font-weight:700;font-size:13px;text-decoration:none;white-space:nowrap}
.railchip:hover{border-color:var(--fiu-gold)}
.railchip .rc-ct{font-weight:600;font-size:11.5px;color:var(--muted-dark);background:rgba(255,255,255,.07);
  border-radius:999px;padding:1px 7px}
.railchip .rc-today{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:var(--fiu-gold);color:var(--navy);border-radius:4px;padding:2px 5px}
.railchip.active{background:var(--fiu-gold);border-color:var(--fiu-gold);color:var(--navy)}
.railchip.active .rc-ct{color:var(--navy);background:rgba(8,30,63,.12)}
.railchip.active .rc-today{background:var(--navy);color:var(--fiu-gold)}

/* ── §2.0 headline stat line + §3.3 "By the numbers" growth expander ── */
.archstat{margin-top:34px;padding-top:16px;border-top:1px solid var(--hair);font-size:14.5px;
  color:var(--muted-dark);display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.archstat b{color:var(--fg-dark)}
.archstat details.grow{flex:1 1 100%;min-width:0}
.grow summary{cursor:pointer;color:var(--fiu-gold);font-weight:700;font-size:13px;list-style:none;
  padding:8px 0;margin:-8px 0}
.grow summary::-webkit-details-marker{display:none}

/* ── §3.2 full-res photo lightbox (the init JS stays in showcase.html — /projects
      has no photo sets yet; promote the JS alongside when it grows them) ── */
.sbph .lbopen{display:block;width:100%;height:100%;cursor:zoom-in}
.sbph figcaption{pointer-events:none}
.lbx{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(4,10,22,.92);backdrop-filter:blur(6px)}
.lbx[hidden]{display:none}
.lbx figure{margin:0;max-width:min(1400px,92vw);display:flex;flex-direction:column;align-items:center;gap:10px}
.lbx img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:10px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8);animation:lbin .22s ease-out;user-select:none;touch-action:pan-y}
@keyframes lbin{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.lbx img{animation:none !important}}
.lbx .lb-meta{color:#e8edf5;font-size:13.5px;text-align:center;max-width:70ch}
.lbx .lb-meta .lb-credit{color:#9fb0c8;font-size:12px}
.lbx .lb-count{color:#9fb0c8;font-size:12px;letter-spacing:.06em}
.lb-btn{position:absolute;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
  border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;
  font-size:26px;line-height:1;cursor:pointer}
.lb-btn:hover{border-color:var(--fiu-gold)}
.lb-prev{left:14px;top:50%;transform:translateY(-50%)}
.lb-next{right:14px;top:50%;transform:translateY(-50%)}
.lb-close{top:14px;right:14px;font-size:20px}
@media(max-width:640px){.lb-prev{left:6px}.lb-next{right:6px}}