/* Generated by tools/bundle_css.py - do not edit.
 *
 * One stylesheet for every page, so the first paint waits on a single request
 * instead of eight. Sources, in cascade order:
 *   - site.css
 *   - profiles.css
 *   - project-atmospheres.css
 *   - migration.css
 *   - profile-themes.css
 *   - page-layouts.css
 *   - bagley.css
 *   - module-directory.css
 *   - changelog.css
 *   - overrides.css

 * Edit the modules (and re-run tools/bundle_css.py && tools/bust_cache.py);
 * editing this file directly loses the change on the next build.
 */

/* ===== css/site.css ===== */
/* Base theme, shared UI, homepage, directories, and Venomous styles.
   Modules load in this order; see the root README for the stylesheet map. */

:root {
  --bg: #07090d;
  --bg-2: #0a0d13;
  --surface: rgba(20, 25, 35, .62);
  --surface-strong: rgba(18, 23, 32, .86);
  --surface-soft: rgba(255, 255, 255, .035);
  --line: rgba(255, 255, 255, .085);
  --line-strong: rgba(255, 255, 255, .14);
  --text: #f4f7f5;
  --muted: #929b96;
  --faint: #626a66;
  --blue: #5a9bf2;
  --blue-soft: rgba(90, 155, 242, .15);
  --green: #8cf77a;
  --green-soft: rgba(140, 247, 122, .14);
  --violet: #a78bfa;
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --max: 1240px;
  --pad: clamp(1.15rem, 4vw, 3.75rem);
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; min-width: 320px; overflow-x: hidden; color: var(--text); background: linear-gradient(180deg, #07090d 0%, #080b10 58%, #07090d 100%); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
/* <picture> is a wrapper, never a box: the inner <img> keeps the layout box it
   had before the WebP/fallback pair was introduced, in flex and grid contexts
   alike. The <source> child must not be laid out either - otherwise it leaks
   into the parent's flex/grid layout as a zero-size item and eats a gap slot. */
picture { display: contents; }
picture > source { display: none; }
button, input { font: inherit; }
button { color: inherit; }
svg { display: block; width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
::selection { color: #061006; background: var(--green); }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 1000; padding: .75rem 1rem; color: var(--bg); background: var(--green); border-radius: 10px; font-weight: 750; transform: translateY(-150%); transition: transform .2s ease; }
.skip-link:focus { transform: none; }
.shell { width: min(100%, var(--max)); margin-inline: auto; padding-inline: var(--pad); }
.site-glow { position: fixed; z-index: -1; width: min(70vw, 900px); aspect-ratio: 1; top: -35vw; right: -20vw; border-radius: 50%; filter: blur(80px); opacity: .18; pointer-events: none; }
.site-glow-blue { background: radial-gradient(circle, rgba(74, 137, 231, .65), transparent 66%); }
.site-glow-green { background: radial-gradient(circle, rgba(93, 223, 89, .5), transparent 66%); }

.glass-card { background: linear-gradient(145deg, rgba(28, 35, 47, .72), rgba(14, 18, 25, .66)); border: 1px solid var(--line); box-shadow: 0 24px 70px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .04); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }

.topbar { position: fixed; inset: 0 0 auto; z-index: 100; height: 78px; border-bottom: 1px solid transparent; transition: height .2s ease, background .2s ease, border-color .2s ease; }
.topbar.scrolled { height: 68px; background: rgba(7, 9, 13, .74); border-color: var(--line); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.topbar-inner { display: flex; height: 100%; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; min-width: 0; gap: .75rem; align-items: center; }
.brand > img, .brand > picture > img { width: 40px; height: 40px; flex: 0 0 auto; object-fit: cover; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.brand > span { display: flex; min-width: 0; flex-direction: column; gap: .25rem; }
.brand b { overflow: hidden; font-size: .78rem; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.brand small { color: #747d78; font-family: var(--mono); font-size: .5rem; letter-spacing: .1em; text-transform: uppercase; }
.main-nav { display: flex; gap: .35rem; align-items: center; padding: .3rem; background: rgba(17, 21, 29, .5); border: 1px solid rgba(255,255,255,.055); border-radius: 16px; backdrop-filter: blur(18px); }
.main-nav > a { display: inline-flex; min-height: 38px; padding: .65rem .8rem; gap: .45rem; align-items: center; justify-content: center; color: #9ba39e; border-radius: 11px; font-size: .7rem; font-weight: 650; transition: color .16s ease, background .16s ease; }
.main-nav > a:hover { color: var(--text); background: rgba(255,255,255,.055); }
.main-nav > a.active { color: var(--text); background: rgba(90,155,242,.12); box-shadow: inset 0 0 0 1px rgba(90,155,242,.1); }
.main-nav .project-link { color: #dbe0dc; }
.main-nav .project-link.active { background: rgba(140,247,122,.1); box-shadow: inset 0 0 0 1px rgba(140,247,122,.1); }
.project-link > span { display: grid; width: 25px; height: 25px; place-items: center; overflow: hidden; background: var(--green); border-radius: 7px; }
.project-link img { width: 23px; height: 23px; object-fit: contain; }
.main-nav .icon-link { width: 38px; padding: 0; color: #d9deda; background: rgba(255,255,255,.045); }
.menu-button { display: none; }

.status-pill { display: inline-flex; min-height: 31px; padding: .45rem .65rem; gap: .5rem; align-items: center; color: #a5ada8; background: rgba(20,25,34,.58); border: 1px solid var(--line); border-radius: 999px; font-size: .63rem; }
.status-pill i, .live-label i, .project-status i, .source-chip i, .sync-state i { display: block; width: 6px; height: 6px; flex: 0 0 auto; background: var(--blue); border-radius: 50%; box-shadow: 0 0 12px currentColor; }
.status-pill.green i, .live-label i, .project-status i, .source-chip i, .sync-state i { background: var(--green); }
.status-pill b { color: var(--text); font-family: var(--mono); font-size: .58rem; font-weight: 500; }
.button { display: inline-flex; min-height: 50px; padding: .85rem 1.15rem; gap: .65rem; align-items: center; justify-content: center; border: 1px solid; border-radius: 14px; font-size: .72rem; font-weight: 750; transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease; }
.button:hover { transform: translateY(-2px); }
.button svg { width: .95rem; height: .95rem; }
.button-blue { color: white; background: var(--blue); border-color: var(--blue); box-shadow: 0 10px 30px rgba(90,155,242,.16); }
.button-blue:hover { background: #70aaf5; box-shadow: 0 14px 34px rgba(90,155,242,.22); }
.button-green { color: #061006; background: var(--green); border-color: var(--green); box-shadow: 0 10px 30px rgba(140,247,122,.15); }
.button-green:hover { background: #a3fb94; box-shadow: 0 14px 34px rgba(140,247,122,.2); }
.button-glass { color: #d9dedb; background: rgba(24,29,39,.65); border-color: var(--line); }
.button-glass:hover { border-color: var(--line-strong); background: rgba(31,37,48,.78); }
.action-row { display: flex; margin-top: 2rem; flex-wrap: wrap; gap: .7rem; }

.org-hero { display: grid; min-height: 800px; padding-top: 125px; padding-bottom: 70px; grid-template-columns: minmax(0,1.05fr) minmax(430px,.95fr); gap: clamp(3rem,7vw,7rem); align-items: center; }
.org-hero-copy h1 { max-width: 720px; margin: 1.35rem 0 1.5rem; font-size: clamp(4rem,7.2vw,7rem); line-height: .9; letter-spacing: -.065em; }
.org-hero-copy h1 span { display: block; color: #aeb8b2; font-weight: 520; }
.org-hero-copy > p { max-width: 550px; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.75; }
.org-profile { padding: 1rem; overflow: hidden; border-radius: var(--radius-xl); }
.profile-topline, .visual-topline { display: flex; padding: .2rem .25rem 1rem; align-items: center; justify-content: space-between; color: #69716c; font-family: var(--mono); font-size: .5rem; letter-spacing: .1em; }
.live-label { display: inline-flex; gap: .4rem; align-items: center; }
.profile-identity { display: grid; min-height: 260px; padding: 1.5rem; grid-template-columns: 136px 1fr; gap: 1.5rem; align-items: center; background: linear-gradient(145deg, rgba(59,112,188,.14), rgba(255,255,255,.025)); border: 1px solid rgba(255,255,255,.06); border-radius: 20px; }
.profile-identity > img, .profile-identity > picture > img { width: 136px; height: 136px; object-fit: cover; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; box-shadow: 0 18px 50px rgba(0,0,0,.36); }
.profile-identity small { color: #6f7872; font-family: var(--mono); font-size: .54rem; }
.profile-identity h2 { margin: .55rem 0 .8rem; font-size: clamp(1.4rem,2.2vw,2rem); line-height: 1.05; letter-spacing: -.04em; }
.profile-identity a { display: inline-flex; gap: .4rem; align-items: center; color: #8f9993; font-size: .6rem; }
.profile-identity a svg { width: .7rem; height: .7rem; }
.profile-stats { display: grid; margin-top: .65rem; grid-template-columns: repeat(3,1fr); gap: .65rem; }
.profile-stats > div { display: grid; min-height: 96px; padding: .9rem; grid-template-columns: auto 1fr; gap: .35rem .6rem; align-content: center; background: rgba(255,255,255,.028); border: 1px solid rgba(255,255,255,.055); border-radius: 16px; }
.profile-stats svg { grid-row: 1 / 3; width: .95rem; height: .95rem; align-self: center; color: var(--blue); }
.profile-stats span { color: #737c77; font-size: .57rem; }
.profile-stats b { font-size: .9rem; }
.profile-foot { display: flex; min-height: 48px; margin-top: .65rem; padding: 0 .85rem; align-items: center; justify-content: space-between; color: #838c87; background: rgba(255,255,255,.02); border-radius: 13px; font-size: .62rem; }
.profile-foot:hover { color: var(--text); }
.profile-foot svg { width: .75rem; height: .75rem; }

.metric-dock { display: grid; padding-bottom: clamp(5rem,8vw,7rem); grid-template-columns: repeat(3,1fr); gap: .8rem; }
.metric-dock > div { display: flex; min-height: 96px; padding: 1rem 1.1rem; gap: .9rem; align-items: center; border-radius: var(--radius-md); }
.metric-icon { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 13px; }
.metric-icon.blue { color: var(--blue); background: var(--blue-soft); }
.metric-icon.violet { color: var(--violet); background: rgba(167,139,250,.14); }
.metric-icon.green { color: var(--green); background: var(--green-soft); }
.metric-icon svg { width: 1.1rem; height: 1.1rem; }
.metric-dock > div > span:last-child { display: flex; min-width: 0; flex-direction: column; gap: .35rem; }
.metric-dock small { color: #68716c; font-family: var(--mono); font-size: .49rem; letter-spacing: .08em; }
.metric-dock b { overflow: hidden; font-size: .85rem; text-overflow: ellipsis; white-space: nowrap; }

.content-section { padding-top: clamp(5rem,8vw,7.5rem); padding-bottom: clamp(5rem,8vw,7.5rem); scroll-margin-top: 70px; }
.section-heading { display: flex; margin-bottom: clamp(2.5rem,4vw,3.5rem); gap: 3rem; align-items: end; justify-content: space-between; }
.eyebrow { display: block; margin-bottom: .75rem; color: var(--blue); font-family: var(--mono); font-size: .58rem; font-weight: 650; letter-spacing: .11em; text-transform: uppercase; }
.eyebrow.green { color: var(--green); }
.section-heading h2, .install-panel h2 { margin: 0; font-size: clamp(2.7rem,5vw,4.7rem); line-height: .95; letter-spacing: -.055em; }
.section-heading > p { max-width: 360px; margin: 0 0 .25rem; color: var(--muted); font-size: .85rem; line-height: 1.65; }
.project-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 1rem; }
.project-card { display: flex; min-height: 340px; padding: 1.6rem; flex-direction: column; border-radius: var(--radius-lg); transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.project-card:hover { transform: translateY(-4px); border-color: rgba(90,155,242,.28); background: linear-gradient(145deg,rgba(35,43,57,.82),rgba(17,21,29,.76)); }
.project-card.featured:hover { border-color: rgba(140,247,122,.28); }
.project-card-top { display: flex; align-items: flex-start; justify-content: space-between; }
.project-icon { display: grid; width: 64px; height: 64px; place-items: center; border-radius: 18px; }
.project-icon.venom { overflow: hidden; background: var(--green); box-shadow: 0 10px 30px rgba(140,247,122,.13); }
.project-icon.venom img { width: 59px; height: 59px; object-fit: contain; }
.project-icon.web { color: var(--blue); background: var(--blue-soft); }
.project-icon svg { width: 1.35rem; height: 1.35rem; }
.project-card-top > .external { color: #68716c; }
.project-status { display: inline-flex; padding: .45rem .6rem; gap: .42rem; align-items: center; color: #9aa49e; background: rgba(255,255,255,.035); border: 1px solid var(--line); border-radius: 999px; font-size: .54rem; }
.card-label { color: #6d7670; font-family: var(--mono); font-size: .52rem; letter-spacing: .09em; text-transform: uppercase; }
.project-card > div:nth-child(2) { margin-top: auto; }
.project-card h3 { margin: .7rem 0 .65rem; overflow-wrap: anywhere; font-size: clamp(1.35rem,2.5vw,2rem); letter-spacing: -.04em; }
.project-card p { max-width: 490px; margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.65; }
.project-card footer { display: flex; margin-top: 2.2rem; padding-top: 1rem; align-items: center; justify-content: space-between; color: #737c77; border-top: 1px solid rgba(255,255,255,.055); font-size: .58rem; }
.project-card footer span { display: inline-flex; gap: .45rem; align-items: center; }
.project-card footer svg { width: .75rem; height: .75rem; transition: transform .16s ease; }
.project-card:hover footer span:last-child svg { transform: translateX(3px); }
.language-dot { width: 6px; height: 6px; border-radius: 50%; }
.language-dot.java { background: #b07219; }
.language-dot.css { background: #563d7c; }
.language-dot.html { background: #e34c26; }
.project-icon.privacy img, .project-icon.champion img { width: 59px; height: 59px; object-fit: contain; }
.members-section, .activity-section, .module-section { background: rgba(12,15,21,.54); border-block: 1px solid rgba(255,255,255,.045); }
.subpage-main { min-height: calc(100svh - 155px); padding: 150px 0 clamp(6rem,10vw,9rem); }
.subpage-heading { max-width: 790px; margin-bottom: clamp(3rem,6vw,5rem); }
.subpage-heading .breadcrumbs { margin-bottom: 2rem; }
.subpage-heading h1 { margin: 0; font-size: clamp(4.5rem,9vw,8rem); line-height: .88; letter-spacing: -.07em; }
.subpage-heading > p { max-width: 650px; margin: 1.4rem 0 0; color: var(--muted); font-size: .95rem; line-height: 1.75; }
.directory-status { display: flex; margin-top: 2rem; flex-wrap: wrap; gap: .65rem; align-items: center; }
.directory-status .status-pill i { background: var(--blue); }
.directory-grid { min-height: 340px; }
.members-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; }
.person-card { display: grid; min-height: 190px; padding: 1.5rem; grid-template-columns: auto 1fr auto; gap: 1.25rem; align-items: center; border-radius: var(--radius-lg); transition: transform .18s ease, border-color .18s ease; }
.person-card:hover { transform: translateY(-3px); border-color: rgba(90,155,242,.26); }
.person-card > img, .person-card > picture > img { width: 84px; height: 84px; object-fit: cover; border: 3px solid rgba(255,255,255,.09); border-radius: 50%; box-shadow: 0 12px 30px rgba(0,0,0,.28); }
.person-card > div > span { color: var(--blue); font-family: var(--mono); font-size: .5rem; letter-spacing: .09em; text-transform: uppercase; }
.person-card h3 { margin: .5rem 0 .35rem; font-size: 1.3rem; letter-spacing: -.03em; }
.person-card p { margin: 0; color: #727b76; font-size: .68rem; }
.person-card > svg { color: #626b66; }

/* Venomous project */
.venom-hero { display: grid; min-height: 850px; padding-top: 130px; padding-bottom: 70px; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2.5rem,4vw,4rem); align-items: center; }
.venom-copy, .venom-visual { min-width: 0; }
.breadcrumbs { display: flex; margin-bottom: 1.5rem; flex-wrap: wrap; gap: .5rem; color: #657069; font-family: var(--mono); font-size: .54rem; }
.breadcrumbs a:hover { color: var(--text); }
.breadcrumbs b { color: #9ca69f; font-weight: 500; }
.venom-copy h1 { max-width: 100%; margin: 1.2rem 0 .6rem; font-size: clamp(4.6rem,6.5vw,6.75rem); line-height: .88; letter-spacing: -.075em; overflow-wrap: anywhere; }
.venom-tagline { margin: 0; color: #dce2dd; font-size: clamp(1.45rem,2.4vw,2.2rem); font-weight: 550; line-height: 1.18; letter-spacing: -.04em; }
.venom-description { max-width: 540px; margin: 1.4rem 0 0; color: var(--muted); font-size: .9rem; line-height: 1.7; }
.requirement-row { display: flex; margin-top: 1.7rem; flex-wrap: wrap; gap: .5rem 1.25rem; color: #69726d; font-family: var(--mono); font-size: .57rem; }
.requirement-row span { position: relative; }
.requirement-row span:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -.7rem; width: 3px; height: 3px; background: #424a45; border-radius: 50%; }
.requirement-row b { color: #99a29c; font-weight: 500; }
.venom-visual { position: relative; isolation: isolate; min-height: 590px; overflow: hidden; border-radius: var(--radius-xl); }
.visual-topline { position: absolute; inset: 1.25rem 1.3rem auto; z-index: 3; padding: 0; }
.venom-logo-stage { position: absolute; top: 47%; left: 50%; z-index: 2; display: grid; width: min(72%,390px); aspect-ratio: 1; place-items: center; transform: translate(-50%,-50%); }
.venom-logo-stage::before { content: ""; position: absolute; inset: 11%; z-index: -1; background: url("../assets/venomous-icon.png") center/contain no-repeat;
  background-image: image-set(url("../assets/venomous-icon.webp") type("image/webp"), url("../assets/venomous-icon.png") type("image/png")); opacity: .42; filter: brightness(0) saturate(100%) invert(78%) sepia(52%) saturate(600%) hue-rotate(57deg) brightness(105%); transform: translate(15px,18px); }
.venom-logo-stage img { width: 78%; filter: invert(1) grayscale(1) brightness(.96) contrast(.92) drop-shadow(0 24px 34px rgba(0,0,0,.48)); }
.visual-metrics { position: absolute; inset: auto 1rem 1rem; z-index: 3; display: grid; overflow: hidden; grid-template-columns: repeat(3,1fr); background: rgba(7,10,9,.7); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; backdrop-filter: blur(18px); }
.visual-metrics > div { display: flex; min-height: 82px; padding: .9rem 1.05rem; flex-direction: column; gap: .45rem; justify-content: center; border-right: 1px solid rgba(255,255,255,.07); }
.visual-metrics > div:last-child { border: 0; }
.visual-metrics small { color: #5f6962; font-family: var(--mono); font-size: .47rem; letter-spacing: .1em; }
.visual-metrics b { font-size: .78rem; }
.venom-metrics { padding-bottom: clamp(5rem,8vw,7rem); }

.capability-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .8rem; }
.capability-card { position: relative; display: flex; min-height: 225px; padding: 1.4rem; gap: 1rem; border-radius: var(--radius-lg); transition: transform .18s ease,border-color .18s ease; }
.capability-card:hover { transform: translateY(-3px); border-color: rgba(140,247,122,.22); }
.capability-icon { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; color: var(--green); background: var(--green-soft); border-radius: 13px; }
.capability-icon svg { width: 1.1rem; height: 1.1rem; }
.capability-card h3 { margin: .25rem 0 .65rem; font-size: 1rem; }
.capability-card p { margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.65; }
.capability-card > b { position: absolute; right: 1.25rem; bottom: 1.1rem; color: #555f58; font-family: var(--mono); font-size: .55rem; font-weight: 500; }
.source-chip { display: inline-flex; padding: .55rem .7rem; gap: .5rem; align-items: center; color: #79837c; background: rgba(255,255,255,.035); border: 1px solid var(--line); border-radius: 999px; font-family: var(--mono); font-size: .52rem; }
.module-browser { padding: 1rem; border-radius: var(--radius-lg); }
.module-toolbar { display: flex; padding-bottom: 1rem; gap: 1rem; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.06); }
.module-filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.module-filters button { min-height: 36px; padding: .55rem .7rem; color: #858f88; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06); border-radius: 10px; cursor: pointer; font-size: .62rem; font-weight: 650; transition: color .15s ease,background .15s ease,border-color .15s ease; }
.module-filters button b { margin-left: .3rem; color: #59635c; font-family: var(--mono); font-size: .5rem; font-weight: 500; }
.module-filters button:hover { color: var(--text); }
.module-filters button.active { color: #071006; background: var(--green); border-color: var(--green); }
.module-filters button.active b { color: #2d5729; }
.module-search { display: flex; width: 200px; height: 38px; padding: 0 .75rem; flex: 0 0 auto; gap: .5rem; align-items: center; background: rgba(8,11,14,.55); border: 1px solid var(--line); border-radius: 10px; }
.module-search:focus-within { border-color: rgba(140,247,122,.38); }
.module-search svg { width: .85rem; height: .85rem; color: #5f6962; }
.module-search input { width: 100%; min-width: 0; padding: 0; color: var(--text); background: transparent; border: 0; outline: 0; font-size: .66rem; }
.module-search input::placeholder { color: #505951; }
.module-result-head { display: flex; min-height: 50px; padding: 1rem .25rem 0; align-items: center; justify-content: space-between; color: #68736b; font-family: var(--mono); font-size: .51rem; letter-spacing: .06em; text-transform: uppercase; }
.module-result-head b { font-weight: 500; }
.module-grid { display: grid; padding-top: .8rem; grid-template-columns: repeat(4,1fr); gap: .5rem; }
.module-grid > span { display: flex; min-width: 0; min-height: 62px; padding: .75rem .8rem; flex-direction: column; gap: .4rem; justify-content: center; background: rgba(255,255,255,.027); border: 1px solid rgba(255,255,255,.052); border-radius: 11px; font-family: var(--mono); font-size: .65rem; animation: module-in .24s both; transition: border-color .15s ease,background .15s ease; }
.module-grid > span:hover { background: rgba(255,255,255,.04); border-color: rgba(140,247,122,.2); }
.module-grid small { color: #5e6861; font-family: var(--sans); font-size: .5rem; text-transform: capitalize; }
@keyframes module-in { from { opacity: 0; transform: translateY(5px); } }
.empty-state { padding: 7rem 1rem; color: #68726b; text-align: center; font-size: .75rem; }
.show-all { display: flex; width: 100%; margin-top: .8rem; padding: .8rem; gap: .5rem; align-items: center; justify-content: center; color: #89938c; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.055); border-radius: 11px; cursor: pointer; font-size: .62rem; font-weight: 700; }
.show-all:hover { color: var(--text); border-color: rgba(140,247,122,.2); }
.show-all svg { width: .75rem; height: .75rem; transform: rotate(90deg); }
.show-all[hidden] { display: none; }

.release-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: .8rem; }
.release-card { position: relative; display: grid; min-height: 230px; padding: 1.5rem; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; gap: 1rem; border-radius: var(--radius-lg); }
.release-card.featured { background: linear-gradient(145deg,rgba(61,107,66,.2),rgba(15,20,18,.72)); border-color: rgba(140,247,122,.18); }
.release-icon { display: grid; width: 42px; height: 42px; place-items: center; color: var(--green); background: var(--green-soft); border-radius: 13px; }
.release-card h3 { margin: .5rem 0; overflow-wrap: anywhere; font-size: 1.45rem; letter-spacing: -.035em; }
.release-card p { margin: 0; color: var(--muted); font-size: .74rem; }
.release-info { display: flex; grid-column: 1 / -1; gap: 1rem; color: #616b64; font-family: var(--mono); font-size: .5rem; }
.release-card > a { position: absolute; right: 1.25rem; bottom: 1.25rem; display: grid; width: 40px; height: 40px; place-items: center; color: #061006; background: var(--green); border-radius: 12px; transition: transform .16s ease; }
.release-card > a:hover { transform: translateY(-2px); }
.release-card > a svg { width: .9rem; height: .9rem; }
.install-panel { display: grid; margin-top: clamp(4rem,7vw,6rem); padding: clamp(1.5rem,3.5vw,3rem); grid-template-columns: .55fr 1.45fr; gap: 3rem; border-radius: var(--radius-xl); }
.install-panel > div { align-self: center; }
.install-panel ol { display: grid; margin: 0; padding: 0; grid-template-columns: repeat(3,1fr); list-style: none; }
.install-panel li { min-height: 230px; padding: 1.1rem; border-left: 1px solid rgba(255,255,255,.065); }
.install-panel li > span { display: grid; width: 40px; height: 40px; margin-bottom: 2.5rem; place-items: center; color: var(--green); background: var(--green-soft); border-radius: 12px; }
.install-panel li > span svg { width: 1rem; height: 1rem; }
.install-panel li b { color: #5e6861; font-family: var(--mono); font-size: .5rem; font-weight: 500; }
.install-panel li h3 { margin: .6rem 0; font-size: .9rem; }
.install-panel li p { margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.6; }
.install-panel code { padding: .1rem .25rem; color: #bec7c0; background: rgba(255,255,255,.05); border-radius: 4px; font-family: var(--mono); }
.activity-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: .8rem; }
.activity-card { min-width: 0; padding: 1.15rem; border-radius: var(--radius-lg); }
.activity-card > header { display: flex; min-height: 43px; padding: .1rem .1rem .9rem; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.06); }
.activity-card > header > span { display: inline-flex; gap: .55rem; align-items: center; font-size: .78rem; font-weight: 700; }
.activity-card > header > span svg { width: .9rem; height: .9rem; color: var(--green); }
.activity-card > header > a { display: inline-flex; gap: .35rem; align-items: center; color: #727c75; font-size: .55rem; }
.activity-card > header > a:hover { color: var(--text); }
.activity-card > header > a svg { width: .65rem; height: .65rem; }
.commit-list > a, .contributor-list > a { display: flex; min-height: 72px; padding: .9rem .1rem; gap: .75rem; align-items: center; border-bottom: 1px solid rgba(255,255,255,.045); }
.commit-list > a:last-child, .contributor-list > a:last-child { border: 0; }
.commit-list i { width: 6px; height: 6px; flex: 0 0 auto; background: var(--green); border-radius: 50%; box-shadow: 0 0 9px rgba(140,247,122,.3); }
.commit-list span, .contributor-list span { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: .3rem; }
.commit-list b, .contributor-list b { overflow: hidden; font-size: .68rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.commit-list small, .contributor-list small { color: #626c65; font-size: .54rem; }
.commit-list code { color: #68726b; font-size: .52rem; }
.contributor-list img { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; }
.contributor-list strong { color: #69736c; font-family: var(--mono); font-size: .5rem; font-weight: 500; }

.site-footer { border-top: 1px solid rgba(255,255,255,.06); }
.footer-inner { display: grid; min-height: 155px; grid-template-columns: 1fr auto 1fr; gap: 2rem; align-items: center; }
.footer-inner nav { display: flex; gap: 1.4rem; }
.footer-inner nav a { color: #77817a; font-size: .62rem; font-weight: 600; }
.footer-inner nav a:hover { color: var(--text); }
.sync-state { display: inline-flex; gap: .5rem; align-items: center; justify-self: end; color: #7d8780; font-family: var(--mono); font-size: .5rem; }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .65s cubic-bezier(.2,.7,.2,1), transform .65s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity: 1; transform: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
body[data-page="venomous"] :focus-visible { outline-color: var(--green); }

@media (max-width: 1040px) {
  .org-hero, .venom-hero { min-height: auto; padding-top: 130px; grid-template-columns: 1fr; }
  .org-hero-copy, .venom-copy { max-width: 760px; }
  .org-profile, .venom-visual { min-height: 590px; }
  .project-grid { grid-template-columns: 1fr; }
  body[data-page="projects"] .project-grid { grid-template-columns: repeat(2,1fr); }
  .capability-grid { grid-template-columns: repeat(2,1fr); }
  .module-toolbar { align-items: stretch; flex-direction: column; }
  .module-search { width: 100%; }
  .module-grid { grid-template-columns: repeat(3,1fr); }
  .install-panel { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root { --pad: 1rem; --radius-xl: 22px; --radius-lg: 18px; }
  .topbar { height: 68px; }
  .brand > span { display: none; }
  .main-nav { position: fixed; inset: 0; z-index: -1; display: flex; padding: 6.5rem 1.2rem 2rem; flex-direction: column; align-items: stretch; justify-content: center; gap: .5rem; background: rgba(7,9,13,.96); border: 0; border-radius: 0; opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease; }
  .main-nav.open { opacity: 1; pointer-events: auto; transform: none; }
  .main-nav > a { min-height: 56px; padding: .9rem 1rem; justify-content: flex-start; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.055); border-radius: 16px; font-size: 1rem; }
  .main-nav .icon-link { width: auto; }
  .menu-button { position: relative; z-index: 2; display: grid; width: 42px; height: 42px; padding: 0; place-items: center; color: var(--text); background: rgba(24,29,39,.72); border: 1px solid var(--line); border-radius: 13px; }
  .menu-button svg { grid-area: 1/1; }
  .menu-close { opacity: 0; }
  .menu-button[aria-expanded="true"] .menu-open { opacity: 0; }
  .menu-button[aria-expanded="true"] .menu-close { opacity: 1; }
  .org-hero, .venom-hero { padding-top: 112px; padding-bottom: 52px; gap: 3.5rem; }
  .org-hero-copy h1 { font-size: clamp(3.65rem,17vw,5.8rem); }
  .venom-copy h1 { font-size: clamp(4.2rem,19vw,6rem); }
  .org-profile, .venom-visual { min-height: 500px; }
  .profile-identity { min-height: 245px; padding: 1.15rem; grid-template-columns: 105px 1fr; gap: 1rem; }
  .profile-identity > img, .profile-identity > picture > img { width: 105px; height: 105px; }
  .profile-identity h2 { font-size: 1.35rem; }
  .profile-identity a { overflow: hidden; max-width: 180px; text-overflow: ellipsis; white-space: nowrap; }
  .metric-dock { grid-template-columns: 1fr; gap: .6rem; }
  .metric-dock > div { min-height: 82px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .section-heading > p { max-width: 100%; }
  .members-grid, .release-grid, .activity-grid { grid-template-columns: 1fr; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-card { min-height: 190px; }
  .module-filters { flex-wrap: nowrap; margin-inline: -.1rem; padding-bottom: .3rem; overflow-x: auto; scrollbar-width: none; }
  .module-filters::-webkit-scrollbar { display: none; }
  .module-filters button { flex: 0 0 auto; }
  .module-grid { grid-template-columns: repeat(2,1fr); }
  .install-panel ol { grid-template-columns: 1fr; }
  .install-panel li { min-height: 185px; border-top: 1px solid rgba(255,255,255,.06); border-left: 0; }
  .install-panel li > span { margin-bottom: 1.5rem; }
  .footer-inner { padding-block: 3rem; grid-template-columns: 1fr; gap: 2rem; }
  .footer-inner .brand > span { display: flex; }
  .footer-inner nav { flex-wrap: wrap; }
  .sync-state { justify-self: start; }
}

@media (max-width: 460px) {
  .org-hero-copy h1 { font-size: 3.55rem; }
  .action-row { flex-direction: column; }
  .button { width: 100%; }
  .org-profile, .venom-visual { min-height: 445px; }
  .profile-identity { grid-template-columns: 82px 1fr; }
  .profile-identity > img, .profile-identity > picture > img { width: 82px; height: 82px; }
  .profile-identity h2 { font-size: 1.05rem; }
  .profile-stats > div { min-height: 80px; padding: .6rem; }
  .profile-stats svg { display: none; }
  .profile-stats span { font-size: .48rem; }
  .venom-logo-stage { width: 80%; }
  .visual-metrics { inset: auto .65rem .65rem; }
  .visual-metrics > div { min-height: 72px; padding: .65rem; }
  .visual-metrics small { font-size: .42rem; }
  .module-grid { grid-template-columns: 1fr; }
  .person-card { grid-template-columns: auto 1fr; }
  .person-card > img, .person-card > picture > img { width: 68px; height: 68px; }
  .person-card > svg, .commit-list code, .contributor-list strong { display: none; }
}

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

/* ===== css/profiles.css ===== */
/* Glass-card theme and shared project/member profile components.
   Modules load in this order; see the root README for the stylesheet map. */

/* Liquid glass system */
body::before { content:""; position:fixed; inset:0; z-index:-3; background:radial-gradient(ellipse at 15% 5%,rgba(76,131,255,.13),transparent 42%),radial-gradient(ellipse at 88% 38%,rgba(105,240,210,.08),transparent 38%),#07090d; pointer-events:none; }
body::after { content:""; position:fixed; inset:0; z-index:-2; opacity:.18; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(to bottom,black,transparent 75%); }
.glass-card { position:relative; isolation:isolate; overflow:hidden; background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.025) 38%,rgba(9,13,20,.52)); border-color:rgba(255,255,255,.13); box-shadow:0 22px 65px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.16),inset 1px 0 0 rgba(255,255,255,.045); backdrop-filter:blur(28px) saturate(145%); -webkit-backdrop-filter:blur(28px) saturate(145%); }
.glass-card::before { content:""; position:absolute; z-index:-1; width:62%; height:45%; left:-12%; top:-24%; border-radius:50%; background:radial-gradient(ellipse,rgba(150,195,255,.13),transparent 68%); filter:blur(10px); pointer-events:none; }
.topbar.scrolled,.main-nav { background:rgba(11,15,22,.56); backdrop-filter:blur(28px) saturate(150%); -webkit-backdrop-filter:blur(28px) saturate(150%); }
.project-icon.privacy,.project-icon.champion { color:#dffcff; font:700 .72rem var(--mono); letter-spacing:.08em; background:linear-gradient(145deg,rgba(93,235,211,.25),rgba(69,113,230,.13)); border:1px solid rgba(159,246,233,.2); }
.project-icon.champion { color:#f5eac8; background:linear-gradient(145deg,rgba(236,192,91,.22),rgba(123,81,211,.13)); border-color:rgba(241,207,128,.2); }
.project-status.muted { color:#9da39f; }
.language-dot.neutral { background:#77818a; }
.profile-page { padding-top:140px; padding-bottom:7rem; }
.profile-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,.62fr); gap:1rem; align-items:stretch; }
.profile-intro,.profile-sidebar,.detail-panel { border-radius:var(--radius-xl); }
.profile-intro { min-height:500px; padding:clamp(1.5rem,4vw,3.2rem); display:flex; flex-direction:column; justify-content:flex-end; }
.profile-intro .avatar { width:108px; height:108px; margin-bottom:auto; object-fit:cover; border-radius:30px; border:1px solid rgba(255,255,255,.2); box-shadow:0 20px 45px rgba(0,0,0,.3); }
.profile-intro h1 { margin:1rem 0 .5rem; font-size:clamp(3.5rem,7vw,6.5rem); line-height:.9; letter-spacing:-.07em; overflow-wrap:anywhere; }
.profile-intro .lead { max-width:660px; margin:1rem 0 0; color:var(--muted); line-height:1.75; }
.profile-sidebar { padding:1.4rem; display:flex; flex-direction:column; justify-content:space-between; }
.fact-list { display:grid; gap:.6rem; }
.fact { padding:1rem; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07); border-radius:15px; }
.fact small { display:block; color:var(--faint); font:500 .48rem var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.fact b { display:block; margin-top:.45rem; font-size:.76rem; }
.detail-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:1rem; }
.detail-panel { min-height:260px; padding:1.7rem; }
.detail-panel h2 { margin:.65rem 0 1rem; font-size:1.45rem; letter-spacing:-.04em; }
.detail-panel p,.detail-panel li { color:var(--muted); font-size:.78rem; line-height:1.75; }
.detail-panel ul { margin:0; padding-left:1.1rem; }
.project-page .profile-intro { min-height:540px; }
.project-mark { width:82px; height:82px; margin-bottom:auto; display:grid; place-items:center; border-radius:24px; color:#dffcff; background:linear-gradient(145deg,rgba(89,235,210,.24),rgba(80,109,240,.13)); border:1px solid rgba(255,255,255,.14); font:750 1rem var(--mono); }
@media(max-width:760px){.profile-hero,.detail-grid{grid-template-columns:1fr}.profile-page{padding-top:105px}.profile-intro{min-height:480px}.profile-sidebar{gap:2rem}.project-page .profile-intro{min-height:500px}}


.release-badge { width: fit-content; margin: .9rem 0 0; }
.release-badge b { color: var(--text); font-family: var(--mono); font-size: .58rem; font-weight: 500; }
.release-detail { min-height: 310px; }
.release-meta { display: flex; margin-top: 1.4rem; flex-wrap: wrap; gap: .6rem 1rem; color: #69736c; font: 500 .58rem var(--mono); }
.release-meta span { display: inline-flex; gap: .35rem; align-items: center; }
.release-meta b { color: #bfc9c1; font-weight: 500; }
.inline-link { display: inline-flex; margin-top: 1.25rem; gap: .4rem; align-items: center; color: var(--green); font-size: .68rem; font-weight: 700; }
.inline-link:hover { color: #b0f9a5; }
.inline-link svg { width: .8rem; height: .8rem; transition: transform .16s ease; }
.inline-link:hover svg { transform: translateX(3px); }
.activity-empty { padding: 2rem .1rem; color: #68726b; font-size: .68rem; }


.shadowban-notice { position: relative; z-index: 2; display: flex; width: 100%; min-height: 46px; margin: 0 0 1.15rem; padding: .8rem 1rem; gap: .55rem; align-items: center; color: #ffd4d4; background: linear-gradient(135deg, rgba(174, 67, 91, .24), rgba(97, 41, 65, .14)); border: 1px solid rgba(255, 137, 153, .3); border-radius: 14px; box-shadow: 0 12px 30px rgba(90, 20, 42, .16), inset 0 1px 0 rgba(255, 214, 220, .08); font-size: .72rem; font-weight: 750; line-height: 1.35; }
.shadowban-notice::before { content: ""; width: 7px; height: 7px; flex: 0 0 auto; background: #ff879a; border-radius: 50%; box-shadow: 0 0 12px rgba(255, 135, 154, .7); }
.shadowban-emoji { margin-left: .05rem; font-size: .95rem; line-height: 1; }
.person-card .shadowban-label { color: #ff9eae; text-transform: none; }


/* Member contribution pages */
.member-page .profile-intro { justify-content: flex-start; }
.member-page .profile-intro .avatar { margin-bottom: 1.5rem; }
.member-page .profile-intro .action-row { margin-top: auto; }
.member-page .profile-sidebar { justify-content: flex-start; }
.member-contributions { padding-top: clamp(4.5rem, 8vw, 7rem); padding-bottom: clamp(5rem, 9vw, 8rem); }
.member-contribution-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.member-contribution-metric { display: flex; min-height: 142px; padding: 1.25rem; flex-direction: column; justify-content: center; border-radius: var(--radius-lg); }
.member-contribution-metric small { color: var(--blue); font: 650 .52rem var(--mono); letter-spacing: .1em; }
.member-contribution-metric b { margin-top: .55rem; font-size: 1.8rem; letter-spacing: -.05em; }
.member-contribution-metric span { margin-top: .35rem; color: var(--muted); font-size: .65rem; }
.member-activity-grid { display: grid; margin-top: .8rem; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: .8rem; align-items: stretch; }
.member-activity-grid .activity-card { min-height: 100%; }
.member-contribution-note { min-height: 100%; }
.member-contribution-note li b { color: var(--text); font-family: var(--mono); font-size: .72rem; }
@media (max-width: 760px) {
  .member-contribution-metrics, .member-activity-grid { grid-template-columns: 1fr; }
  .member-contribution-metric { min-height: 112px; }
}

/* ===== css/project-atmospheres.css ===== */
/* Project atmosphere effects and Beacon-specific styling.
   Modules load in this order; see the root README for the stylesheet map. */

/* Project atmospheres: lightweight canvas effects stay local, original, and responsive. */
.atmosphere-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .72;
  mix-blend-mode: screen;
}
body[data-project="championscode"],
body[data-project="nulltrace"] {
  position: relative;
  background: #07090d;
}
body[data-page="organization"]::before {
  background: radial-gradient(ellipse at 66% 18%, rgba(40, 63, 97, .16), transparent 38%), #06080c;
}
body[data-project="championscode"]::before {
  background: radial-gradient(ellipse at 76% 18%, rgba(202, 137, 45, .16), transparent 36%), #07090d;
  opacity: .96;
}
body[data-project="championscode"]::after {
  opacity: .12;
  background-image: linear-gradient(rgba(255, 255, 255, .026) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .026) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black 0%, transparent 88%);
}
body[data-project="championscode"] .atmosphere-canvas { opacity: 1; filter: saturate(1.35) contrast(1.12); }
body[data-project="championscode"] .site-glow-blue {
  background: radial-gradient(circle, rgba(219, 157, 65, .36), transparent 66%);
  opacity: .16;
}
body[data-project="championscode"] .profile-intro,
body[data-project="championscode"] .profile-sidebar,
body[data-project="championscode"] .detail-panel {
  border-color: rgba(240, 194, 111, .2);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 244, 211, .1), inset 1px 0 0 rgba(255, 235, 190, .035);
}
body[data-project="championscode"] .eyebrow { color: #e9b965; }
body[data-project="championscode"] .project-mark {
  background: linear-gradient(145deg, rgba(236, 192, 91, .3), rgba(123, 81, 211, .18));
  border-color: rgba(241, 207, 128, .32);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .28), 0 0 42px rgba(232, 174, 71, .1);
}
body[data-project="nulltrace"]::before {
  background: radial-gradient(ellipse at 84% 16%, rgba(62, 193, 221, .14), transparent 36%), #050b10;
  opacity: .96;
}
body[data-project="nulltrace"]::after {
  opacity: .1;
  background-image: linear-gradient(rgba(140, 228, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(140, 228, 255, .025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black 0%, transparent 88%);
}
body[data-project="nulltrace"] .atmosphere-canvas { opacity: .98; }
body[data-project="nulltrace"] .profile-intro,
body[data-project="nulltrace"] .profile-sidebar,
body[data-project="nulltrace"] .detail-panel {
  border-color: rgba(102, 220, 237, .2);
}
body[data-project="nulltrace"] .site-glow-blue {
  background: radial-gradient(circle, rgba(52, 198, 224, .38), transparent 66%);
  opacity: .18;
}
body[data-project="championscode"] main,
body[data-project="championscode"] footer,
body[data-project="nulltrace"] main,
body[data-project="nulltrace"] footer {
  position: relative;
  z-index: 1;
}

.website-page .project-mark.website-mark {
  display: grid;
  color: #dffcff;
  background: linear-gradient(145deg, rgba(90, 155, 242, .3), rgba(117, 78, 214, .18));
  border-color: rgba(150, 211, 255, .28);
  font: 800 1.7rem var(--mono);
  letter-spacing: -.12em;
  text-indent: -.12em;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .28), 0 0 42px rgba(90, 155, 242, .1);
}

.account-status { display: flex; width: 100%; margin: .05rem 0 1rem; padding: .7rem .8rem; gap: .65rem; align-items: center; color: #ffd9dd; background: linear-gradient(135deg, rgba(174, 67, 91, .2), rgba(97, 41, 65, .12)); border: 1px solid rgba(255, 137, 153, .28); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 214, 220, .07); font-size: .68rem; line-height: 1.35; }
.account-status::before { content: ""; width: 7px; height: 7px; flex: 0 0 auto; background: #ff879a; border-radius: 50%; box-shadow: 0 0 12px rgba(255, 135, 154, .72); }
.account-status strong { color: #ffacb8; font-family: var(--mono); font-size: .62rem; letter-spacing: .03em; white-space: nowrap; }
.account-status span { color: #e9bfc5; }
.fact b.fact-danger { color: #ff9eae; }

/* Beacon project */
.project-icon.beacon {
  overflow: hidden;
  background: linear-gradient(145deg, rgba(115, 226, 255, .24), rgba(54, 122, 235, .14));
  border: 1px solid rgba(143, 230, 255, .24);
  box-shadow: 0 10px 30px rgba(72, 184, 255, .11);
}
.project-icon.beacon img { width: 59px; height: 59px; object-fit: contain; }
body[data-project="beacon"] { position: relative; background: #050c11; }
body[data-project="beacon"]::before {
  background: radial-gradient(ellipse at 78% 15%, rgba(66, 190, 244, .16), transparent 38%), #050c11;
  opacity: .98;
}
body[data-project="beacon"]::after {
  opacity: .11;
  background-image: linear-gradient(rgba(132, 226, 255, .026) 1px, transparent 1px), linear-gradient(90deg, rgba(132, 226, 255, .026) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black 0%, transparent 88%);
}
.beacon-video-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #050c11;
}
.beacon-video-background video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.82) contrast(1.05) brightness(.62);
}
.beacon-video-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 8, 13, .58) 0%, rgba(3, 9, 14, .38) 35%, rgba(3, 8, 13, .72) 100%),
    radial-gradient(circle at 50% 34%, transparent 0%, rgba(3, 9, 14, .18) 58%, rgba(3, 8, 13, .56) 100%);
}
body[data-project="beacon"] .glass-card {
  background: linear-gradient(145deg, rgba(20, 31, 40, .82), rgba(7, 14, 21, .72));
}
body[data-project="beacon"] .site-glow-blue {
  background: radial-gradient(circle, rgba(67, 199, 255, .42), transparent 66%);
  opacity: .18;
}
body[data-project="beacon"] .profile-intro,
body[data-project="beacon"] .profile-sidebar,
body[data-project="beacon"] .detail-panel { border-color: rgba(113, 220, 255, .2); }
body[data-project="beacon"] .eyebrow { color: #77dfff; }
body[data-project="beacon"] .project-mark {
  padding: .35rem;
  object-fit: contain;
  background: linear-gradient(145deg, rgba(127, 230, 255, .22), rgba(62, 119, 230, .14));
  border-color: rgba(151, 232, 255, .3);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .28), 0 0 42px rgba(75, 195, 255, .12);
}
body[data-project="beacon"] main,
body[data-project="beacon"] footer { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .beacon-video-background video { display: none; }
}
.detail-panel code { padding: .12rem .3rem; color: #c7eaf4; background: rgba(117, 214, 246, .08); border-radius: 5px; font: .9em var(--mono); }

/* ===== css/migration.css ===== */
/* Migration page and timeline styles.
   Modules load in this order; see the root README for the stylesheet map. */

/* Migration record */
.migration-page { padding-top: 140px; }
.migration-hero { padding-bottom: clamp(5rem, 9vw, 8rem); }
.migration-heading { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: clamp(2rem, 7vw, 7rem); align-items: end; }
.migration-heading h1 { margin: .8rem 0 0; font-size: clamp(4rem, 8.5vw, 8rem); line-height: .86; letter-spacing: -.075em; }
.migration-heading > p { max-width: 520px; margin: 0 0 .65rem; color: var(--muted); font-size: .94rem; line-height: 1.8; }
.migration-status { display: grid; margin-top: clamp(2.5rem, 5vw, 4.5rem); padding: 1.25rem 1.4rem; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; border-radius: var(--radius-lg); }
.migration-status-mark { width: 11px; height: 11px; background: #f2bd5d; border-radius: 50%; box-shadow: 0 0 22px rgba(242, 189, 93, .65); }
.migration-status small, .migration-timeline time, .ticket-state { color: var(--faint); font-family: var(--mono); font-size: .52rem; letter-spacing: .08em; text-transform: uppercase; }
.migration-status strong { display: block; margin: .25rem 0; font-size: .9rem; }
.migration-status p { margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.6; }
.migration-section { padding-top: clamp(5rem, 8vw, 7.5rem); padding-bottom: clamp(5rem, 8vw, 7.5rem); }
.migration-timeline { position: relative; display: grid; margin: 0; padding: 0; gap: .8rem; list-style: none; }
.migration-timeline::before { content: ""; position: absolute; top: 2rem; bottom: 2rem; left: calc(185px + 2rem); width: 1px; background: linear-gradient(transparent, rgba(90, 155, 242, .45) 12%, rgba(90, 155, 242, .2) 88%, transparent); }
.migration-timeline li { position: relative; display: grid; min-height: 180px; padding: 1.6rem; grid-template-columns: 185px 18px 1fr; gap: 1.25rem; align-items: start; border-radius: var(--radius-lg); }
.migration-timeline time { padding-top: .35rem; line-height: 1.5; }
.timeline-dot { position: relative; z-index: 2; width: 11px; height: 11px; margin-top: .25rem; background: var(--blue); border: 3px solid #182131; border-radius: 50%; box-shadow: 0 0 18px rgba(90,155,242,.55); }
.migration-timeline h3 { margin: 0 0 .7rem; font-size: 1.35rem; letter-spacing: -.035em; }
.migration-timeline p { max-width: 720px; margin: 0 0 1rem; color: var(--muted); font-size: .78rem; line-height: 1.75; }
.migration-timeline p b, .migration-timeline p strong { color: #d9dfdc; }
.ticket-state { display: inline-flex; padding: .45rem .6rem; color: #d7b979; background: rgba(242,189,93,.08); border: 1px solid rgba(242,189,93,.16); border-radius: 999px; }
.migration-band { background: rgba(12,15,21,.54); border-block: 1px solid rgba(255,255,255,.045); }
.migration-grid { display: grid; padding-top: clamp(5rem,8vw,7rem); padding-bottom: clamp(5rem,8vw,7rem); grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.migration-grid article { min-height: 330px; padding: clamp(1.5rem, 3vw, 2.4rem); border-radius: var(--radius-xl); }
.migration-grid h2, .migration-next h2 { margin: .75rem 0 1rem; font-size: clamp(2rem, 4vw, 3.5rem); line-height: .98; letter-spacing: -.055em; }
.migration-grid p, .migration-next p { color: var(--muted); font-size: .8rem; line-height: 1.75; }
.migration-next > .glass-card { display: grid; padding: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr auto; gap: 2.5rem; align-items: center; border-radius: var(--radius-xl); }
.migration-next > .glass-card p { max-width: 690px; margin-bottom: 0; }
.migration-next .button { white-space: nowrap; }
.migration-note { max-width: 800px; margin: 1.25rem auto 0; color: var(--faint); font-size: .62rem; line-height: 1.7; text-align: center; }
@media (max-width: 760px) {
  .migration-page { padding-top: 105px; }
  .migration-heading, .migration-grid, .migration-next > .glass-card { grid-template-columns: 1fr; }
  .migration-heading { align-items: start; }
  .migration-heading h1 { font-size: clamp(3.7rem, 18vw, 6rem); }
  .migration-timeline::before { left: 1.88rem; }
  .migration-timeline li { grid-template-columns: 18px 1fr; padding: 1.25rem; gap: .85rem; }
  .migration-timeline time { grid-column: 2; padding: 0; }
  .timeline-dot { grid-row: 1 / 3; grid-column: 1; }
  .migration-timeline li > div { grid-column: 2; }
  .migration-grid article { min-height: 270px; }
  .migration-next .button { width: 100%; }
}

/* ===== css/profile-themes.css ===== */
/* Starry-night and Matrix member profile themes.
   Modules load in this order; see the root README for the stylesheet map. */

/* StarryNightVibrant adaptation — espress0 profile
   Source: https://github.com/ElPioterro/StarryNightVibrant (MIT) */
body.starry-night-page {
  position: relative;
  isolation: isolate;
  background: #050713;
}
body.starry-night-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 18%, rgba(87, 111, 238, .34), transparent 35%),
    radial-gradient(circle at 82% 26%, rgba(183, 77, 209, .24), transparent 36%),
    radial-gradient(circle at 52% 88%, rgba(48, 174, 203, .2), transparent 42%),
    linear-gradient(145deg, #050713 5%, #10122d 48%, #160b25 100%);
  background-size: 135% 135%;
  animation: starrynight-gradient 18s ease-in-out infinite alternate;
}
body.starry-night-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3,5,13,.6), transparent 28%, transparent 72%, rgba(3,5,13,.7));
}
body.starry-night-page .site-glow { display: none; }
.starrynight-bg-container {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.starrynight-star {
  position: absolute;
  display: block;
  background: #f6f5ff;
  border-radius: 50%;
  box-shadow: 0 0 7px 1px rgba(194, 207, 255, .72);
}
.starrynight-twinkle-1 { animation: starrynight-twinkle-a 6s ease-in-out infinite; }
.starrynight-twinkle-2 { animation: starrynight-twinkle-b 7s ease-in-out infinite; }
.starrynight-twinkle-3 { animation: starrynight-twinkle-a 8s ease-in-out infinite reverse; }
.starrynight-twinkle-4 { animation: starrynight-twinkle-b 5s ease-in-out infinite reverse; }
.starrynight-shooting-star {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 0 4px rgba(174,193,255,.08), 0 0 0 8px rgba(174,193,255,.05), 0 0 20px rgba(204,214,255,.75);
  animation: starrynight-shoot 6s linear infinite;
}
.starrynight-shooting-star::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: min(300px, 35vw);
  height: 1px;
  transform: translateY(-50%);
  /* The star travels toward its local -X direction, so the tail extends +X. */
  background: linear-gradient(90deg, rgba(218,225,255,.9), transparent);
}
@keyframes starrynight-gradient {
  from { background-position: 0% 20%; filter: hue-rotate(0deg); }
  to { background-position: 100% 75%; filter: hue-rotate(18deg); }
}
@keyframes starrynight-twinkle-a {
  0%, 100% { opacity: .25; transform: scale(.75); }
  45% { opacity: 1; transform: scale(1.25); }
}
@keyframes starrynight-twinkle-b {
  0%, 100% { opacity: .8; }
  55% { opacity: .15; }
}
@keyframes starrynight-shoot {
  0%, 12% { opacity: 0; transform: rotate(315deg) translateX(0); }
  15%, 65% { opacity: 1; }
  100% { opacity: 0; transform: rotate(315deg) translateX(-1500px); }
}
@media (prefers-reduced-motion: reduce) {
  body.starry-night-page::before,
  .starrynight-star,
  .starrynight-shooting-star { animation: none !important; }
  .starrynight-shooting-star { display: none; }
}

/* Green Matrix background — 0xFFshell profile
   Adapted from https://codepen.io/wefiy/pen/WPpEwo */
body.matrix-rain-page {
  position: relative;
  isolation: isolate;
  background: #020704;
}
body.matrix-rain-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(1,7,3,.7), transparent 25%),
    linear-gradient(0deg, rgba(1,7,3,.78), transparent 30%);
}
body.matrix-rain-page .site-glow { display: none; }
.matrix-rain-canvas {
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: #020704;
}
body.matrix-rain-page .eyebrow { color: #64f889; }
body.matrix-rain-page .button-blue {
  color: #021006;
  background: #5cf47f;
  border-color: #5cf47f;
  box-shadow: 0 10px 30px rgba(62,235,105,.18);
}
body.matrix-rain-page .button-blue:hover { background: #7cff99; }

/* ===== css/page-layouts.css ===== */
/* Extended project pages, directories, and bespoke page layouts.
   Modules load in this order; see the root README for the stylesheet map. */

/* Extended project pages */
.project-deep-dive { padding-top: clamp(5rem, 8vw, 7.5rem); }
.project-deep-dive-muted { margin-top: clamp(5rem, 8vw, 7rem); padding: clamp(3rem, 5vw, 5rem); background: rgba(12,15,21,.46); border: 1px solid rgba(255,255,255,.05); border-radius: var(--radius-xl); }
.project-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.project-feature { min-height: 280px; padding: 1.5rem; border-radius: var(--radius-lg); }
.project-feature > span { display: inline-grid; width: 38px; height: 38px; place-items: center; color: var(--blue); background: var(--blue-soft); border-radius: 12px; font: 650 .58rem var(--mono); }
.project-feature h3, .project-info-grid h3 { margin: 2.6rem 0 .75rem; font-size: 1.2rem; letter-spacing: -.035em; }
.project-feature p, .project-info-grid p { margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.72; }
.project-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.project-info-grid > article { min-height: 230px; padding: 1.5rem; border-radius: var(--radius-lg); }
.project-info-grid h3 { margin-top: 0; }
.project-callout { display: grid; margin-top: clamp(5rem, 8vw, 7rem); padding: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr auto; gap: 3rem; align-items: center; border-radius: var(--radius-xl); }
.project-callout h2 { max-width: 760px; margin: .7rem 0 1rem; font-size: clamp(2.3rem, 4.5vw, 4rem); line-height: .96; letter-spacing: -.06em; }
.project-callout p { max-width: 740px; margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.75; }
.project-callout .button { white-space: nowrap; }
.project-page > .shell { padding-bottom: clamp(2rem, 5vw, 4rem); }
@media (max-width: 900px) {
  .project-feature-grid { grid-template-columns: 1fr; }
  .project-feature { min-height: 220px; }
  .project-feature h3 { margin-top: 1.8rem; }
}
@media (max-width: 760px) {
  .project-deep-dive-muted { margin-inline: -.25rem; padding: 2rem 1rem; }
  .project-info-grid, .project-callout { grid-template-columns: 1fr; }
  .project-info-grid > article { min-height: 190px; }
  .project-callout { gap: 2rem; }
  .project-callout .button { width: 100%; }
}

/* Pixel shimmer buttons ---------------------------------------------------
   <pixel-canvas> paints an animated pixel grid behind text on hover/focus.
   Hosts need a local stacking context so the canvas can sit above the
   button surface while staying below the icon and label. */
.button { position: relative; isolation: isolate; overflow: hidden; }
pixel-canvas { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; }

/* Full-page canvas effects ------------------------------------------------ */
.effect-background { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }

/* Pages with an effect canvas: the canvas is the page background. The body
   background is opaque and would paint over a negative z-index canvas, so it
   is cleared on those pages (html still provides the base color). */
body[data-page="venomous"],
body[data-member="0xffshell"] { background: transparent; }

/* Directories use an editorial grid instead of identical tiles. */
body[data-page="organization"] {
  background: #05090b url("../assets/homepage-community-background-v4.jpg") center top / cover fixed no-repeat;
  /* The stylesheet backdrop is what holds the page until the rotating media can
     paint; it was the one place still shipping the full-size JPEG to every
     browser. Same layer, compressed sibling first. */
  background-image: image-set(
    url("../assets/homepage-community-background-v4.webp") type("image/webp"),
    url("../assets/homepage-community-background-v4.jpg") type("image/jpeg")
  );
}
body[data-page="organization"]::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(4,8,11,.48), rgba(4,8,11,.78) 58%, #05090b 100%);
}

/* Project tiles are equal-sized so the grid stays balanced no matter how
   many projects exist (hardcoded 4/6/12-column spans used to leave gaps
   whenever a project was added or removed). Color accents still vary per
   project for visual flavor, just not their size. */
body[data-page="projects"] .project-grid { grid-template-columns: repeat(3,1fr); }
body[data-page="projects"] .project-card { grid-column: auto; min-height: 360px; }
body[data-page="projects"] .project-card.featured { border-top: 2px solid rgba(140,247,122,.35); }
body[data-page="projects"] .project-card[data-project-card="beacon"] { background: linear-gradient(145deg, rgba(49,145,191,.2), rgba(8,18,27,.78)); }
body[data-page="projects"] .project-card[data-project-card="championscode"] { background: linear-gradient(145deg, rgba(181,130,47,.16), rgba(14,16,22,.76)); }
body[data-page="projects"] .project-card[data-project-card="nulltrace"] { background: linear-gradient(145deg, rgba(46,164,187,.14), rgba(9,19,25,.76)); }
body[data-page="projects"] .project-card[data-project-card="home"] { background: linear-gradient(145deg, rgba(104,117,139,.14), rgba(14,17,23,.76)); }
body[data-page="projects"] .project-card[data-project-card="zonedout"] { background: linear-gradient(145deg, rgba(224,194,40,.16), rgba(14,16,22,.78)); }
.project-icon.zonedout { overflow: hidden; background: #080808; border: 1px solid rgba(255,220,40,.25); }
.project-icon.zonedout img { width: 59px; height: 59px; object-fit: cover; }

/* ZonedOut: hazard-yellow accents for a work-in-progress client mod. */
body[data-project="zonedout"]::before { background: radial-gradient(ellipse at 14% 8%, rgba(239,199,48,.16), transparent 39%), radial-gradient(ellipse at 88% 34%, rgba(239,199,48,.07), transparent 36%), #07090d; }
body[data-project="zonedout"] .profile-intro { background: linear-gradient(140deg, rgba(40,33,12,.86), rgba(11,14,19,.88) 68%); border-color: rgba(244,211,68,.2); }
body[data-project="zonedout"] .profile-intro::after { content: "ZONEDOUT / CLIENT MOD"; position: absolute; top: 2rem; right: 2rem; color: rgba(244,211,68,.58); font: 600 .52rem var(--mono); letter-spacing: .14em; }
body[data-project="zonedout"] .project-mark { border-radius: 22px; box-shadow: 0 0 0 9px rgba(244,211,68,.035), 0 18px 45px rgba(0,0,0,.38); }
body[data-project="zonedout"] .zonedout-status { color: #e4d78b; background: rgba(239,199,48,.07); border-color: rgba(239,199,48,.2); }
body[data-project="zonedout"] .zonedout-status i { background: #f0cf3d; box-shadow: 0 0 12px rgba(240,207,61,.6); }
body[data-project="zonedout"] .profile-sidebar .fact { background: rgba(239,199,48,.035); border-color: rgba(239,199,48,.09); }
body[data-project="zonedout"] .detail-panel { border-top: 2px solid rgba(239,199,48,.25); }
body[data-project="zonedout"] .detail-panel .eyebrow,
body[data-project="zonedout"] .section-heading .eyebrow { color: #e7cb52; }
body[data-project="zonedout"] .project-feature > span { color: #f1d95f; background: rgba(239,199,48,.1); }
.button-zonedout { color: #171306; background: linear-gradient(135deg, #ffe36a, #d3ad20); border-color: rgba(255,227,106,.75); box-shadow: 0 10px 30px rgba(211,173,32,.16); }
.button-zonedout:hover { color: #100d03; background: linear-gradient(135deg, #ffed91, #e0bd36); box-shadow: 0 14px 34px rgba(211,173,32,.23); }
body[data-project="zonedout"] .zonedout-callout { background: linear-gradient(145deg, rgba(42,34,12,.65), rgba(12,15,20,.72)); border-color: rgba(239,199,48,.17); }

body[data-page="members"] .members-grid { grid-template-columns: repeat(12,1fr); align-items: stretch; }
body[data-page="members"] .person-card { grid-column: span 4; }
body[data-page="members"] .person-card[data-member-card="0xffshell"] { grid-column: span 7; min-height: 230px; background: linear-gradient(145deg, rgba(28,120,53,.16), rgba(7,17,10,.78)); }
body[data-page="members"] .person-card[data-member-card="3spress0"] { grid-column: span 5; min-height: 230px; background: linear-gradient(145deg, rgba(91,88,190,.16), rgba(14,14,28,.78)); }
body[data-page="members"] .person-card[data-member-card="e-vdv-hu"] { border-top: 2px solid rgba(97,184,237,.28); }
body[data-page="members"] .person-card[data-member-card="xx-superivar-xx"] { border-top: 2px solid rgba(170,193,229,.28); }
body[data-page="members"] .person-card[data-member-card="midas735"] { border-top: 2px solid rgba(226,183,73,.3); }

/* Content-shaped project and member layouts ------------------------------ */
/* Beacon: cinematic product launch over the gameplay reel. */
body[data-project="beacon"] .profile-hero { position: relative; display: block; min-height: 720px; }
body[data-project="beacon"] .profile-intro { min-height: 700px; padding-right: min(34vw, 410px); justify-content: flex-end; background: linear-gradient(105deg, rgba(5,13,20,.94), rgba(8,19,28,.72) 55%, rgba(8,19,28,.34)); }
body[data-project="beacon"] .profile-intro h1 { font-size: clamp(5.5rem, 10vw, 9.5rem); text-shadow: 0 10px 45px rgba(0,0,0,.45); }
body[data-project="beacon"] .profile-intro .project-mark { position: absolute; top: 2rem; left: 2rem; width: 98px; height: 98px; }
body[data-project="beacon"] .profile-intro .lead { max-width: 730px; }
body[data-project="beacon"] .profile-sidebar { position: absolute; z-index: 3; top: 2rem; right: 2rem; width: min(31%, 360px); min-height: auto; background: rgba(5,13,20,.78); }
body[data-project="beacon"] .profile-sidebar .fact { background: rgba(111,220,255,.055); }
body[data-project="beacon"] .detail-grid { grid-template-columns: repeat(12, 1fr); }
body[data-project="beacon"] .detail-grid > :nth-child(1),
body[data-project="beacon"] .detail-grid > :nth-child(4) { grid-column: span 7; }
body[data-project="beacon"] .detail-grid > :nth-child(2),
body[data-project="beacon"] .detail-grid > :nth-child(3) { grid-column: span 5; }

/* NullTrace: a wide privacy dashboard with staggered protection layers. */
body[data-project="nulltrace"] .profile-hero { grid-template-columns: 1fr; }
body[data-project="nulltrace"] .profile-intro { min-height: 560px; padding-right: min(28vw, 330px); background: linear-gradient(120deg, rgba(5,20,27,.94), rgba(8,29,36,.64)); }
body[data-project="nulltrace"] .profile-intro::after { content: "PRIVACY SURFACE / MONITORED"; position: absolute; top: 2rem; right: 2rem; color: rgba(121,231,245,.58); font: 600 .54rem var(--mono); letter-spacing: .16em; writing-mode: vertical-rl; }
body[data-project="nulltrace"] .project-mark { border-radius: 50%; box-shadow: 0 0 0 12px rgba(82,210,231,.035), 0 0 0 24px rgba(82,210,231,.02), 0 18px 45px rgba(0,0,0,.32); }
body[data-project="nulltrace"] .profile-sidebar { min-height: auto; }
body[data-project="nulltrace"] .profile-sidebar .fact-list { grid-template-columns: repeat(3, 1fr); }
body[data-project="nulltrace"] .detail-grid { grid-template-columns: repeat(12, 1fr); }
body[data-project="nulltrace"] .detail-grid > :nth-child(1),
body[data-project="nulltrace"] .detail-grid > :nth-child(4) { grid-column: span 7; }
body[data-project="nulltrace"] .detail-grid > :nth-child(2),
body[data-project="nulltrace"] .detail-grid > :nth-child(3) { grid-column: span 5; }
body[data-project="nulltrace"] .detail-panel { border-left: 3px solid rgba(102,220,237,.32); }

/* ChampionsCode: terminal first, content second. */
body[data-project="championscode"] .profile-hero { grid-template-columns: minmax(290px,.62fr) minmax(0,1.38fr); }
body[data-project="championscode"] .profile-intro { order: 2; min-height: 610px; border-radius: 12px 28px 28px 12px; background: linear-gradient(145deg, rgba(31,23,12,.76), rgba(10,13,19,.84)); }
body[data-project="championscode"] .profile-intro h1 { font-family: var(--mono); font-size: clamp(3.4rem, 6vw, 6rem); letter-spacing: -.075em; }
body[data-project="championscode"] .profile-sidebar { order: 1; min-height: 610px; padding-top: 4.6rem; border-radius: 28px 12px 12px 28px; background: rgba(9,12,17,.9); }
body[data-project="championscode"] .profile-sidebar::after { content: "champions@research:~$ status --authorized"; position: absolute; inset: 1.4rem 1.3rem auto; padding-bottom: 1rem; color: #e9b965; border-bottom: 1px solid rgba(240,194,111,.16); font: 500 .54rem var(--mono); }
body[data-project="championscode"] .profile-sidebar .fact { border-left: 2px solid rgba(233,185,101,.32); border-radius: 4px 12px 12px 4px; }
body[data-project="championscode"] .detail-grid { grid-template-columns: repeat(12, 1fr); }
body[data-project="championscode"] .detail-grid > :nth-child(1) { grid-column: span 7; }
body[data-project="championscode"] .detail-grid > :nth-child(2) { grid-column: span 5; }
body[data-project="championscode"] .detail-grid > :nth-child(3) { grid-column: span 5; }
body[data-project="championscode"] .detail-grid > :nth-child(4) { grid-column: span 7; }
body[data-project="championscode"] .project-feature { border-top: 2px solid rgba(233,185,101,.24); }

/* Website: source browser and inspector. */
body[data-project="website"] .profile-hero { grid-template-columns: minmax(270px,.55fr) minmax(0,1.45fr); }
body[data-project="website"] .profile-intro { order: 2; min-height: 620px; padding-top: 6rem; background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 28px 28px; }
body[data-project="website"] .profile-intro::after { content: "index.html    css/site.css    script.js"; position: absolute; inset: 1.2rem 1.4rem auto; padding: .8rem 1rem; color: #84909b; background: rgba(5,9,14,.78); border: 1px solid rgba(255,255,255,.08); border-radius: 11px; font: 500 .55rem var(--mono); letter-spacing: .04em; }
body[data-project="website"] .profile-sidebar { order: 1; min-height: 620px; border-radius: 28px 10px 10px 28px; }
body[data-project="website"] .profile-sidebar::after { content: "INSPECTOR"; position: absolute; right: 1.3rem; bottom: 1.2rem; color: #505c67; font: 600 .5rem var(--mono); letter-spacing: .14em; }
body[data-project="website"] .detail-grid { grid-template-columns: repeat(12,1fr); }
body[data-project="website"] .detail-grid > :nth-child(1) { grid-column: span 8; }
body[data-project="website"] .detail-grid > :nth-child(2) { grid-column: span 4; }
body[data-project="website"] .detail-grid > :nth-child(3) { grid-column: span 5; }
body[data-project="website"] .detail-grid > :nth-child(4) { grid-column: span 7; }

/* 0xFF: one large operations card with a docked status strip. */
body[data-member="0xffshell"] .profile-hero { display: block; position: relative; padding-bottom: 4.4rem; }
body[data-member="0xffshell"] .profile-intro { min-height: 620px; padding: clamp(2rem,5vw,4rem); justify-content: flex-end; background: linear-gradient(135deg, rgba(3,19,8,.82), rgba(2,8,4,.74)); }
body[data-member="0xffshell"] .profile-intro::after { content: "ACTIVE NODE // GITLAB"; position: absolute; top: 2rem; right: 2rem; color: #64f889; font: 600 .56rem var(--mono); letter-spacing: .14em; }
body[data-member="0xffshell"] .profile-intro .avatar { position: absolute; top: 2rem; left: 2rem; width: 138px; height: 138px; border-radius: 22px; }
body[data-member="0xffshell"] .profile-intro h1 { font-family: var(--mono); font-size: clamp(4rem,8vw,7.5rem); }
body[data-member="0xffshell"] .profile-sidebar { position: absolute; z-index: 4; inset: auto 2rem 0; min-height: auto; padding: 1rem; transform: translateY(50%); background: rgba(2,12,5,.92); }
body[data-member="0xffshell"] .profile-sidebar .fact-list { grid-template-columns: repeat(5,1fr); }
body[data-member="0xffshell"] .profile-sidebar .fact { min-height: 88px; }
body[data-member="0xffshell"] .detail-grid { grid-template-columns: 1.35fr .65fr; margin-top: 4rem; }

/* espress0: contribution-led editorial layout. */
body[data-member="3spress0"] .profile-hero { grid-template-columns: minmax(260px,.58fr) minmax(0,1.42fr); }
body[data-member="3spress0"] .profile-intro { order: 2; min-height: 610px; }
body[data-member="3spress0"] .profile-sidebar { order: 1; min-height: 610px; justify-content: flex-end; }
body[data-member="3spress0"] .profile-sidebar::after { content: "PUBLIC BUILD LOG"; position: absolute; top: 1.4rem; right: 1.4rem; color: rgba(190,199,255,.48); font: 600 .5rem var(--mono); letter-spacing: .14em; writing-mode: vertical-rl; }
body[data-member="3spress0"] .profile-intro h1 { font-size: clamp(4.4rem,8vw,7.5rem); }
body[data-member="3spress0"] .detail-grid { grid-template-columns: 1.45fr .55fr; }
body[data-member="3spress0"] .member-contribution-metrics { grid-template-columns: 1.6fr .7fr .7fr; }
body[data-member="3spress0"] .member-contribution-metric:first-child { min-height: 190px; background: linear-gradient(145deg, rgba(102,118,246,.2), rgba(17,20,42,.7)); }
body[data-member="3spress0"] .member-activity-grid { grid-template-columns: 1.45fr .55fr; }

/* E: a Python notebook with a compact project rail. */
body[data-member="e-vdv-hu"] .profile-hero { grid-template-columns: minmax(0,1.35fr) minmax(270px,.65fr); align-items: start; }
body[data-member="e-vdv-hu"] .profile-intro { min-height: 660px; background: linear-gradient(145deg, rgba(16,27,35,.78), rgba(8,13,20,.76)); }
body[data-member="e-vdv-hu"] .profile-intro::after { content: "def build():\A    learn()\A    ship()"; position: absolute; top: 2rem; right: 2rem; padding: 1rem 1.15rem; white-space: pre; color: #98d7ff; background: rgba(3,11,18,.7); border: 1px solid rgba(126,199,245,.16); border-radius: 12px; font: 500 .68rem/1.7 var(--mono); }
body[data-member="e-vdv-hu"] .profile-intro h1 { font-size: clamp(7rem,14vw,12rem); line-height: .72; }
body[data-member="e-vdv-hu"] .profile-sidebar { min-height: 520px; margin-top: 70px; border-left: 3px solid rgba(105,191,245,.35); border-radius: 5px 24px 24px 5px; }
body[data-member="e-vdv-hu"] .profile-sidebar .fact { background: rgba(75,164,221,.065); }
body[data-member="e-vdv-hu"] .detail-grid { width: 88%; margin-top: -42px; grid-template-columns: .8fr 1.2fr; }

/* SuperIvar: a centered storm poster with a floating stat deck. */
body[data-member="superivar"] .profile-hero { display: block; position: relative; padding-bottom: 4.5rem; }
body[data-member="superivar"] .profile-intro { min-height: 680px; padding-inline: clamp(2rem,8vw,7rem); align-items: center; justify-content: center; text-align: center; background: linear-gradient(145deg, rgba(11,18,32,.72), rgba(5,10,18,.78)); }
body[data-member="superivar"] .profile-intro .avatar { width: 160px; height: 160px; margin: 0 0 1.5rem; border-radius: 50%; box-shadow: 0 0 0 10px rgba(180,205,241,.04), 0 25px 60px rgba(0,0,0,.4); }
body[data-member="superivar"] .profile-intro h1 { max-width: 900px; font-size: clamp(3.6rem,8vw,7rem); text-shadow: 0 0 34px rgba(175,203,245,.18); }
body[data-member="superivar"] .profile-intro .lead { max-width: 650px; }
body[data-member="superivar"] .profile-intro .action-row { margin-top: 2rem; }
body[data-member="superivar"] .profile-sidebar { position: absolute; z-index: 4; inset: auto 8% 0; min-height: auto; transform: translateY(50%); background: rgba(7,13,23,.9); }
body[data-member="superivar"] .profile-sidebar .fact-list { grid-template-columns: repeat(4,1fr); }
body[data-member="superivar"] .detail-grid { margin-top: 4.5rem; grid-template-columns: 1.25fr .75fr; }
body[data-member="superivar"] .detail-grid > :first-child { transform: translateY(-18px); }

/* Midas: a deliberately sparse gold membership card. */
body[data-member="midas735"]::before { background: radial-gradient(circle at 75% 14%, rgba(222,178,72,.16), transparent 34%), #07090d; }
body[data-member="midas735"] .profile-hero { grid-template-columns: minmax(250px,.55fr) minmax(0,1.45fr); gap: 1.3rem; }
body[data-member="midas735"] .profile-intro { order: 2; min-height: 590px; border-color: rgba(236,196,96,.24); background: linear-gradient(145deg, rgba(58,43,15,.3), rgba(13,15,20,.78)); transform: rotate(.35deg); }
body[data-member="midas735"] .profile-intro .avatar { width: 140px; height: 140px; border-radius: 50%; box-shadow: 0 0 0 12px rgba(224,182,77,.04), 0 20px 45px rgba(0,0,0,.35); }
body[data-member="midas735"] .profile-intro h1 { color: #f0d68c; font-size: clamp(4.2rem,8vw,7.5rem); }
body[data-member="midas735"] .profile-sidebar { order: 1; min-height: 590px; border-color: rgba(236,196,96,.24); transform: rotate(-.65deg); }
body[data-member="midas735"] .profile-sidebar .fact { border-bottom: 1px solid rgba(236,196,96,.12); border-radius: 0; }
body[data-member="midas735"] .eyebrow { color: #e0b64d; }
body[data-member="midas735"] .detail-grid { display: block; }
body[data-member="midas735"] .detail-panel { width: 72%; margin-bottom: 1rem; border-color: rgba(236,196,96,.18); }
body[data-member="midas735"] .detail-panel:last-child { margin-left: auto; }

/* Migration: a real continuous rail with numbered milestones. */
.migration-timeline { gap: 0; }
.migration-timeline::before { top: 1.05rem; bottom: 3.8rem; left: calc(170px + 1rem + 26px); z-index: 0; width: 3px; background: linear-gradient(180deg, #5a9bf2, #72d4ee 70%, #8cf77a); border-radius: 99px; box-shadow: 0 0 22px rgba(90,155,242,.4); }
.migration-timeline li { position: relative; z-index: 1; min-height: 0; padding: 0 0 2rem; grid-template-columns: 170px 52px minmax(0,1fr); gap: 1rem; background: transparent; border: 0; box-shadow: none; overflow: visible; }
.migration-timeline time { padding-top: .55rem; text-align: right; }
.timeline-dot { display: grid; width: 36px; height: 36px; margin: 0 auto; place-items: center; color: #dcecff; background: #0b1726; border: 2px solid #6caaf5; box-shadow: 0 0 0 7px #080c12, 0 0 24px rgba(90,155,242,.56); }
.timeline-dot b { font: 650 .48rem var(--mono); }
.timeline-content { min-height: 175px; padding: 1.6rem; border-radius: var(--radius-lg); overflow: visible; }
.migration-timeline li:nth-child(4) .timeline-dot,
.migration-timeline li:nth-child(5) .timeline-dot { color: #dfffd9; border-color: #8cf77a; box-shadow: 0 0 0 7px #080c12, 0 0 24px rgba(140,247,122,.4); }

@media (max-width: 900px) {
  body[data-page="organization"] {
  background: #05090b url("../assets/homepage-community-background-v4.jpg") center top / cover fixed no-repeat;
  /* The stylesheet backdrop is what holds the page until the rotating media can
     paint; it was the one place still shipping the full-size JPEG to every
     browser. Same layer, compressed sibling first. */
  background-image: image-set(
    url("../assets/homepage-community-background-v4.webp") type("image/webp"),
    url("../assets/homepage-community-background-v4.jpg") type("image/jpeg")
  );
}
body[data-page="organization"]::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(4,8,11,.48), rgba(4,8,11,.78) 58%, #05090b 100%);
}

body[data-page="projects"] .project-grid { grid-template-columns: 1fr; }
  body[data-page="projects"] .project-card,
  body[data-page="projects"] .project-card[data-project-card] { grid-column: auto; min-height: 320px; }
  body[data-page="members"] .members-grid { grid-template-columns: repeat(2,1fr); }
  body[data-page="members"] .person-card,
  body[data-page="members"] .person-card[data-member-card] { grid-column: auto; }
  body[data-project="beacon"] .profile-hero,
  body[data-member="0xffshell"] .profile-hero,
  body[data-member="superivar"] .profile-hero { min-height: 0; padding-bottom: 0; }
  body[data-project="beacon"] .profile-intro { min-height: 620px; padding-right: clamp(1.5rem,4vw,3rem); }
  body[data-project="beacon"] .profile-sidebar,
  body[data-member="0xffshell"] .profile-sidebar,
  body[data-member="superivar"] .profile-sidebar { position: relative; inset: auto; width: auto; margin-top: 1rem; transform: none; }
  body[data-project="beacon"] .profile-sidebar .fact-list,
  body[data-member="0xffshell"] .profile-sidebar .fact-list,
  body[data-member="superivar"] .profile-sidebar .fact-list,
  body[data-project="nulltrace"] .profile-sidebar .fact-list { grid-template-columns: repeat(2,1fr); }
  body[data-project="championscode"] .profile-hero,
  body[data-project="website"] .profile-hero,
  body[data-member="3spress0"] .profile-hero,
  body[data-member="e-vdv-hu"] .profile-hero,
  body[data-member="midas735"] .profile-hero { grid-template-columns: 1fr; }
  body[data-project="championscode"] .profile-intro,
  body[data-project="championscode"] .profile-sidebar,
  body[data-project="website"] .profile-intro,
  body[data-project="website"] .profile-sidebar,
  body[data-member="3spress0"] .profile-intro,
  body[data-member="3spress0"] .profile-sidebar,
  body[data-member="midas735"] .profile-intro,
  body[data-member="midas735"] .profile-sidebar { order: initial; min-height: auto; border-radius: var(--radius-xl); transform: none; }
  body[data-member="e-vdv-hu"] .profile-sidebar { min-height: auto; margin-top: 1rem; }
  body[data-member="e-vdv-hu"] .detail-grid { width: 100%; margin-top: 1rem; }
  body[data-member="midas735"] .detail-panel { width: 100%; }
  body[data-project="beacon"] .detail-grid,
  body[data-project="nulltrace"] .detail-grid,
  body[data-project="championscode"] .detail-grid,
  body[data-project="website"] .detail-grid { grid-template-columns: 1fr; }
  body[data-project="beacon"] .detail-grid > *,
  body[data-project="nulltrace"] .detail-grid > *,
  body[data-project="championscode"] .detail-grid > *,
  body[data-project="website"] .detail-grid > * { grid-column: auto !important; }
  body[data-member="3spress0"] .member-contribution-metrics,
  body[data-member="3spress0"] .member-activity-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body[data-page="members"] .members-grid { grid-template-columns: 1fr; }
  body[data-project="beacon"] .profile-intro .project-mark,
  body[data-member="0xffshell"] .profile-intro .avatar { position: static; width: 96px; height: 96px; }
  body[data-project="nulltrace"] .profile-intro { padding-right: 1.5rem; }
  body[data-project="nulltrace"] .profile-intro::after,
  body[data-member="e-vdv-hu"] .profile-intro::after { display: none; }
  body[data-member="superivar"] .profile-intro { min-height: 580px; padding-inline: 1.25rem; }
  body[data-member="superivar"] .profile-sidebar .fact-list,
  body[data-member="0xffshell"] .profile-sidebar .fact-list,
  body[data-project="beacon"] .profile-sidebar .fact-list,
  body[data-project="nulltrace"] .profile-sidebar .fact-list { grid-template-columns: 1fr; }
  body[data-member="0xffshell"] .detail-grid,
  body[data-member="3spress0"] .detail-grid,
  body[data-member="e-vdv-hu"] .detail-grid,
  body[data-member="superivar"] .detail-grid { grid-template-columns: 1fr; }
  .migration-timeline::before { top: .4rem; bottom: 3.5rem; left: 17px; }
  .migration-timeline li { grid-template-columns: 36px minmax(0,1fr); gap: .85rem; padding-bottom: 1.4rem; }
  .migration-timeline time { grid-column: 2; padding: .15rem 0 .35rem; text-align: left; }
  .timeline-dot { grid-row: 1 / 3; grid-column: 1; width: 32px; height: 32px; margin: 0; }
  .timeline-content { grid-column: 2; min-height: 0; padding: 1.25rem; }
}

/* ===== css/bagley.css ===== */
/* Bagley project palette and animated background.
   Modules load in this order; see the root README for the stylesheet map. */

/* Bagley project */
.project-icon.bagley { overflow: hidden; background: linear-gradient(145deg, rgba(90,155,242,.25), rgba(167,139,250,.15)); border: 1px solid rgba(138,184,246,.22); }
.project-icon.bagley img { width: 59px; height: 59px; object-fit: contain; }
body[data-project="bagley"]::before { background: radial-gradient(ellipse at 80% 16%, rgba(95,143,236,.17), transparent 38%), #07090d; }
body[data-project="bagley"] .project-mark { background: linear-gradient(145deg, rgba(90,155,242,.28), rgba(167,139,250,.16)); box-shadow: 0 16px 38px rgba(0,0,0,.28), 0 0 42px rgba(90,155,242,.1); }

/* Bagley: warm, fluid red-to-yellow background waves. */
body[data-project="bagley"] {
  background: #210603;
}
body[data-project="bagley"]::before,
body[data-project="bagley"]::after,
body[data-project="bagley"] .site-glow { opacity: 0; }
.bagley-wave-background {
  position: fixed;
  inset: -18vmax;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 18% 30%, #ff1f0f 0%, rgba(255, 36, 12, .82) 20%, transparent 52%),
    radial-gradient(ellipse at 78% 26%, #ffcf21 0%, rgba(255, 139, 0, .78) 24%, transparent 55%),
    radial-gradient(ellipse at 52% 86%, #e51608 0%, rgba(255, 65, 5, .72) 28%, transparent 60%),
    #4a0902;
  filter: blur(58px) saturate(1.35);
  transform: translateZ(0) scale(1.08);
  animation: bagley-wave-field 7s ease-in-out infinite alternate;
}
.bagley-wave-background span {
  position: absolute;
  width: 72vmax;
  aspect-ratio: 1.8;
  border-radius: 50%;
  filter: blur(72px);
  mix-blend-mode: screen;
  will-change: transform;
}
.bagley-wave-background span:nth-child(1) {
  top: 4%;
  left: -8%;
  background: rgba(255, 32, 10, .84);
  animation: bagley-wave-red 5s ease-in-out infinite alternate;
}
.bagley-wave-background span:nth-child(2) {
  top: 28%;
  right: -10%;
  background: rgba(255, 202, 20, .82);
  animation: bagley-wave-yellow 6s ease-in-out infinite alternate;
}
.bagley-wave-background span:nth-child(3) {
  bottom: -8%;
  left: 18%;
  background: rgba(255, 91, 4, .78);
  animation: bagley-wave-orange 8s ease-in-out infinite alternate;
}
@keyframes bagley-wave-field {
  0% { transform: translate3d(-3%, -2%, 0) scale(1.08) rotate(-3deg); }
  50% { transform: translate3d(3%, 1%, 0) scale(1.15) rotate(2deg); }
  100% { transform: translate3d(-1%, 4%, 0) scale(1.1) rotate(5deg); }
}
@keyframes bagley-wave-red {
  from { transform: translate3d(-12%, -8%, 0) rotate(-12deg) scale(1); }
  to { transform: translate3d(38%, 30%, 0) rotate(16deg) scale(1.3); }
}
@keyframes bagley-wave-yellow {
  from { transform: translate3d(15%, -15%, 0) rotate(10deg) scale(1.15); }
  to { transform: translate3d(-42%, 36%, 0) rotate(-18deg) scale(.92); }
}
@keyframes bagley-wave-orange {
  from { transform: translate3d(-18%, 24%, 0) rotate(-8deg) scale(.9); }
  to { transform: translate3d(32%, -32%, 0) rotate(20deg) scale(1.25); }
}

/* Keep Bagley's animated field above the body's paint layer, but below page content. */
body[data-project="bagley"] { isolation: isolate; }
body[data-project="bagley"] .bagley-wave-background { z-index: 0; }
body[data-project="bagley"] main,
body[data-project="bagley"] footer { position: relative; z-index: 1; }

/* Bagley motion override: fast, visible waves with a dimmer treatment. */
body[data-project="bagley"] .bagley-wave-background {
  opacity: .58;
  animation: bagley-wave-field 2.8s ease-in-out infinite alternate !important;
}
body[data-project="bagley"] .bagley-wave-background span:nth-child(1) {
  animation: bagley-wave-red 1.9s ease-in-out infinite alternate !important;
}
body[data-project="bagley"] .bagley-wave-background span:nth-child(2) {
  animation: bagley-wave-yellow 2.3s ease-in-out infinite alternate-reverse !important;
}
body[data-project="bagley"] .bagley-wave-background span:nth-child(3) {
  animation: bagley-wave-orange 3.1s ease-in-out infinite alternate !important;
}
@media (prefers-reduced-motion: reduce) {
  body[data-project="bagley"] .bagley-wave-background,
  body[data-project="bagley"] .bagley-wave-background span {
    animation-iteration-count: infinite !important;
  }
}

/* Bagley palette and motion: deep red/dark yellow, wide flowing sweeps. */
body[data-project="bagley"] .bagley-wave-background {
  opacity: .72;
  background:
    radial-gradient(ellipse at 12% 24%, rgba(105, 7, 12, .92) 0%, rgba(72, 4, 8, .76) 25%, transparent 58%),
    radial-gradient(ellipse at 84% 20%, rgba(112, 88, 3, .82) 0%, rgba(79, 58, 0, .68) 28%, transparent 60%),
    radial-gradient(ellipse at 48% 88%, rgba(91, 20, 3, .88) 0%, rgba(59, 8, 3, .7) 30%, transparent 64%),
    #160202;
  filter: blur(64px) saturate(1.08) brightness(.72);
  animation: bagley-dark-field 2.5s ease-in-out infinite alternate !important;
}
body[data-project="bagley"] .bagley-wave-background span {
  mix-blend-mode: normal;
  filter: blur(76px);
}
body[data-project="bagley"] .bagley-wave-background span:nth-child(1) {
  background: rgba(112, 5, 12, .8);
  animation: bagley-dark-red 1.7s ease-in-out infinite alternate !important;
}
body[data-project="bagley"] .bagley-wave-background span:nth-child(2) {
  background: rgba(126, 98, 2, .72);
  animation: bagley-dark-yellow 2.1s ease-in-out infinite alternate-reverse !important;
}
body[data-project="bagley"] .bagley-wave-background span:nth-child(3) {
  background: rgba(96, 31, 1, .75);
  animation: bagley-dark-orange 2.8s ease-in-out infinite alternate !important;
}
@keyframes bagley-dark-field {
  from { transform: translate3d(-12%, -9%, 0) scale(1.12) rotate(-8deg); }
  to { transform: translate3d(12%, 10%, 0) scale(1.32) rotate(9deg); }
}
@keyframes bagley-dark-red {
  from { transform: translate3d(-42%, -28%, 0) rotate(-22deg) scale(.72, 1.15); }
  to { transform: translate3d(72%, 58%, 0) rotate(25deg) scale(1.48, .82); }
}
@keyframes bagley-dark-yellow {
  from { transform: translate3d(48%, -38%, 0) rotate(24deg) scale(1.35, .68); }
  to { transform: translate3d(-78%, 64%, 0) rotate(-28deg) scale(.74, 1.5); }
}
@keyframes bagley-dark-orange {
  from { transform: translate3d(-55%, 58%, 0) rotate(-18deg) scale(.7, 1.4); }
  to { transform: translate3d(66%, -62%, 0) rotate(30deg) scale(1.52, .72); }
}

/* ===== css/module-directory.css ===== */
/* Beacon module directory (/projects/beacon/modules).
   Loads after the page-layout modules and before overrides.css. Every selector is
   scoped to body[data-page="directory"] so it cannot reach the Venomous module
   explorer, which uses its own .module-grid / .module-card vocabulary. */

body[data-page="directory"] .directory-hero {
  margin-top: 1.5rem;
  padding: clamp(1.6rem, 3.4vw, 2.8rem);
  border-radius: var(--radius-xl);
}

body[data-page="directory"] .directory-hero h1 {
  margin: .6rem 0 1rem;
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  line-height: .95;
  letter-spacing: -.055em;
}

body[data-page="directory"] .directory-hero .lead {
  max-width: 72ch;
  margin: 0 0 1.4rem;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.75;
}

body[data-page="directory"] .directory-note {
  max-width: 78ch;
  margin: 1.4rem 0 0;
  color: #7d8780;
  font-size: .72rem;
  line-height: 1.7;
}

/* Category jump chips, shared with the changelog page. */
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }

.chip {
  display: inline-flex;
  padding: .5rem .8rem;
  gap: .45rem;
  align-items: center;
  color: #cfd6d2;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 650;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.chip:hover { color: #fff; background: rgba(255, 255, 255, .07); border-color: var(--line-strong); }
.chip b { color: #8b958f; font-family: var(--mono); font-size: .6rem; font-weight: 500; }

body[data-page="directory"] .chip[href="#category-utility"] { border-color: rgba(90, 155, 242, .3); }
body[data-page="directory"] .chip[href="#category-render"] { border-color: rgba(126, 220, 255, .3); }
body[data-page="directory"] .chip[href="#category-world"] { border-color: rgba(140, 247, 122, .3); }
body[data-page="directory"] .chip[href="#category-misc"] { border-color: rgba(167, 139, 250, .3); }
body[data-page="directory"] .chip[href="#category-fun"] { border-color: rgba(238, 192, 106, .3); }

body[data-page="directory"] .module-section { margin-top: clamp(2.6rem, 5vw, 4.4rem); scroll-margin-top: 96px; }

body[data-page="directory"] .module-directory {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
  gap: .9rem;
}

body[data-page="directory"] .module-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-md);
  transition: transform .18s ease, border-color .18s ease;
}

body[data-page="directory"] .module-card:hover { transform: translateY(-3px); border-color: rgba(90, 155, 242, .28); }
body[data-page="directory"] .module-card:target { border-color: var(--blue); box-shadow: 0 0 0 1px rgba(90, 155, 242, .45), 0 24px 70px rgba(0, 0, 0, .3); }

/* Screenshot slot. Placeholder until a real capture exists: drop
   assets/modules/<id>.(png|webp) in and run tools/apply_module_shots.py to turn
   these into real <picture> elements. */
body[data-page="directory"] .module-shot {
  position: relative;
  display: grid;
  aspect-ratio: 16 / 9;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01) 55%),
    linear-gradient(180deg, #0b1018, #080b11);
  border-bottom: 1px solid var(--line);
}

body[data-page="directory"] .module-shot::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(circle at 50% 55%, #000 10%, transparent 72%);
}

body[data-page="directory"] .module-shot-tile {
  position: relative;
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .5);
}

body[data-page="directory"] .module-shot-label {
  position: absolute;
  right: .6rem;
  bottom: .5rem;
  color: #5b6b7a;
  font-family: var(--mono);
  font-size: .46rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

body[data-page="directory"] .module-shot img,
body[data-page="directory"] .module-shot video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-page="directory"] .module-body { display: flex; flex: 1; padding: 1rem 1.05rem .6rem; flex-direction: column; gap: .45rem; }

body[data-page="directory"] .module-body h3 { margin: 0; font-size: 1.02rem; letter-spacing: -.02em; }
body[data-page="directory"] .module-body h3 a { display: inline-block; }
body[data-page="directory"] .module-body h3 a:hover { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 4px; }
body[data-page="directory"] .module-body p { margin: 0; color: #9aa39d; font-size: .78rem; line-height: 1.6; }
body[data-page="directory"] .module-source { color: #5f6a64; font-size: .6rem; }
body[data-page="directory"] .module-source code { color: inherit; }

body[data-page="directory"] .module-links {
  display: flex;
  padding: .75rem 1.05rem 1rem;
  gap: 1rem;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, .05);
}

body[data-page="directory"] .module-link {
  display: inline-flex;
  gap: .35rem;
  align-items: center;
  color: var(--blue);
  font-size: .68rem;
  font-weight: 700;
}

body[data-page="directory"] .module-link.muted { color: #8d968f; }
body[data-page="directory"] .module-link:hover { color: #fff; }
body[data-page="directory"] .module-link svg { width: .8rem; height: .8rem; }

/* Category accents on the initials tile. */
body[data-page="directory"] .module-card.category-utility .module-shot-tile { color: #8ab8f6; }
body[data-page="directory"] .module-card.category-render .module-shot-tile { color: #7edcff; }
body[data-page="directory"] .module-card.category-world .module-shot-tile { color: #8cf77a; }
body[data-page="directory"] .module-card.category-misc .module-shot-tile { color: #a78bfa; }
body[data-page="directory"] .module-card.category-fun .module-shot-tile { color: #eec06a; }

body[data-page="directory"] .directory-foot {
  margin: clamp(2.6rem, 5vw, 4rem) 0 1rem;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border-radius: var(--radius-lg);
}

body[data-page="directory"] .directory-foot h2 { margin: 0 0 .8rem; font-size: 1.25rem; letter-spacing: -.02em; }
body[data-page="directory"] .directory-foot p { max-width: 84ch; margin: 0 0 .8rem; color: var(--muted); font-size: .82rem; line-height: 1.75; }
body[data-page="directory"] .directory-foot p:last-child { margin-bottom: 0; }
body[data-page="directory"] .directory-foot code { color: #cfe3ff; font-size: .92em; }
body[data-page="directory"] .directory-foot a { color: var(--blue); }

@media (max-width: 760px) {
  body[data-page="directory"] .module-directory { grid-template-columns: 1fr; }
  body[data-page="directory"] .module-shot { aspect-ratio: 2 / 1; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="directory"] .module-card { transition: none; }
}

/* ===== css/changelog.css ===== */
/* Combined changelog page (/changelog).
   Loads after the page-layout modules and before overrides.css. Scoped to
   body[data-page="changelog"] so the version <details> styling cannot leak into
   any other page. */

body[data-page="changelog"] .changelog-hero {
  margin-top: 1.5rem;
  padding: clamp(1.6rem, 3.4vw, 2.8rem);
  border-radius: var(--radius-xl);
}

body[data-page="changelog"] .changelog-hero h1 {
  margin: .6rem 0 1rem;
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  line-height: .95;
  letter-spacing: -.055em;
}

body[data-page="changelog"] .changelog-hero .lead {
  max-width: 76ch;
  margin: 0 0 1.4rem;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.75;
}

body[data-page="changelog"] .changelog-hero code,
body[data-page="changelog"] .changelog-body code {
  padding: .1rem .35rem;
  color: #cfe3ff;
  background: rgba(90, 155, 242, .12);
  border-radius: 5px;
  font-family: var(--mono);
  font-size: .78em;
}

body[data-page="changelog"] .directory-note {
  max-width: 78ch;
  margin: 1.4rem 0 0;
  color: #7d8780;
  font-size: .72rem;
  line-height: 1.7;
}

body[data-page="changelog"] .changelog-project {
  margin-top: clamp(1.4rem, 3vw, 2rem);
  padding: clamp(1.3rem, 2.8vw, 2rem);
  border-radius: var(--radius-lg);
  scroll-margin-top: 96px;
}

body[data-page="changelog"] .changelog-head {
  display: flex;
  margin-bottom: .8rem;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
}

body[data-page="changelog"] .changelog-head h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: -.035em; }
body[data-page="changelog"] .changelog-summary { margin: 0; color: #89938c; font-family: var(--mono); font-size: .58rem; letter-spacing: .04em; }
body[data-page="changelog"] .changelog-summary b { color: #cfe3ff; font-weight: 600; }

body[data-page="changelog"] .changelog-links { display: flex; margin: 0 0 1.1rem; gap: 1.2rem; flex-wrap: wrap; }
body[data-page="changelog"] .changelog-links a { display: inline-flex; gap: .35rem; align-items: center; color: #9aa9c6; font-size: .66rem; font-weight: 650; }
body[data-page="changelog"] .changelog-links a:hover { color: #fff; }
body[data-page="changelog"] .changelog-links svg { width: .78rem; height: .78rem; }

body[data-page="changelog"] .changelog-version {
  border-top: 1px solid rgba(255, 255, 255, .06);
}

body[data-page="changelog"] .changelog-version:last-child { border-bottom: 1px solid rgba(255, 255, 255, .06); }

body[data-page="changelog"] .changelog-version > summary {
  display: flex;
  padding: .85rem .2rem;
  gap: .6rem 1.2rem;
  flex-wrap: wrap;
  align-items: baseline;
  cursor: pointer;
  list-style: none;
}

body[data-page="changelog"] .changelog-version > summary::-webkit-details-marker { display: none; }

body[data-page="changelog"] .changelog-version > summary::before {
  content: "+";
  width: .9rem;
  color: #5f6a64;
  font-family: var(--mono);
  font-size: .8rem;
}

body[data-page="changelog"] .changelog-version[open] > summary::before { content: "–"; }
body[data-page="changelog"] .changelog-version > summary:hover .changelog-version-name { color: #fff; }

body[data-page="changelog"] .changelog-version-name { color: #dbe2de; font-size: .92rem; font-weight: 650; letter-spacing: -.015em; }
body[data-page="changelog"] .changelog-meta { color: #6f7972; font-family: var(--mono); font-size: .56rem; letter-spacing: .04em; }
body[data-page="changelog"] .changelog-meta a { color: #8ab8f6; }
body[data-page="changelog"] .changelog-meta a:hover { color: #fff; }
body[data-page="changelog"] .changelog-unreleased { color: #b08d5c; }

body[data-page="changelog"] .changelog-body { padding: .2rem 0 1.1rem 1.5rem; }

body[data-page="changelog"] .changelog-body h3 {
  margin: 1rem 0 .5rem;
  color: #a5b0a9;
  font-family: var(--mono);
  font-size: .58rem;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
}

body[data-page="changelog"] .changelog-body h3:first-child { margin-top: .3rem; }

body[data-page="changelog"] .changelog-body ul { margin: 0 0 .9rem; padding-left: 1.1rem; }
body[data-page="changelog"] .changelog-body ul ul { margin: .35rem 0 .4rem; }
body[data-page="changelog"] .changelog-body li { margin-bottom: .5rem; color: #9fb0ab; font-size: .8rem; line-height: 1.7; }
body[data-page="changelog"] .changelog-body li::marker { color: #4d5a53; }
body[data-page="changelog"] .changelog-body li strong { color: #dbe6e1; font-weight: 650; }
body[data-page="changelog"] .changelog-body a { color: #8ab8f6; }
body[data-page="changelog"] .changelog-body a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 760px) {
  body[data-page="changelog"] .changelog-body { padding-left: .6rem; }
  body[data-page="changelog"] .changelog-meta { font-size: .52rem; }
}

/* ===== css/overrides.css ===== */
/* Shared layout hardening and homepage background treatment.
 *
 * IMPORTANT: link this file last, after the ordered stylesheet modules in
 * /css/. These declarations intentionally override page styles; moving this
 * file earlier can reintroduce overlapping hero cards on profile pages.
 */

/* Prevent grid children from forcing their tracks wider than the viewport. */
.profile-hero > *,
.detail-grid > *,
.project-grid > *,
.members-grid > *,
.capability-grid > *,
.module-grid > *,
.release-grid > *,
.activity-grid > *,
.install-panel > *,
.project-info-grid > *,
.project-feature-grid > * {
  min-width: 0;
}

/* Keep normal page cards inside their allocated space. */
.profile-intro,
.profile-sidebar,
.detail-panel,
.project-card,
.person-card,
.capability-card,
.module-card,
.release-card,
.activity-card,
.install-panel,
.project-info-grid > article,
.project-feature {
  min-width: 0;
}

/* Beacon uses a cinematic hero, but the sidebar should not overlap the hero card. */
body[data-project="beacon"] .profile-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  min-height: 0;
  padding-bottom: 0;
}

body[data-project="beacon"] .profile-sidebar {
  position: relative;
  inset: auto;
  width: auto;
  margin-top: 0;
  transform: none;
}

body[data-project="beacon"] .detail-grid {
  margin-top: 1rem;
}

/* The Beacon fact rail was styled as a narrow column. Now that it sits in the
   flow at full width, lay the facts out in a responsive row instead of one
   very tall stack. */
body[data-project="beacon"] .profile-sidebar .fact-list {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

/* Docked member stat decks are moved back into document flow. */
body[data-member="0xffshell"] .profile-hero,
body[data-member="superivar"] .profile-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  min-height: 0;
  padding-bottom: 0;
}

body[data-member="0xffshell"] .profile-sidebar,
body[data-member="superivar"] .profile-sidebar {
  position: relative;
  inset: auto;
  width: auto;
  margin-top: 0;
  transform: none;
}

body[data-member="0xffshell"] .detail-grid,
body[data-member="superivar"] .detail-grid {
  margin-top: 1rem;
}

body[data-member="superivar"] .detail-grid > :first-child {
  transform: none;
}

/* Do not let the notebook/detail rail visually intrude into the hero. */
body[data-member="e-vdv-hu"] .profile-sidebar {
  margin-top: 0;
}

body[data-member="e-vdv-hu"] .detail-grid {
  width: 100%;
  margin-top: 1.5rem;
}

/* The gold cards are intentionally angled, but the rotation should not make
   their boxes collide with adjacent content. */
body[data-member="midas735"] .profile-intro,
body[data-member="midas735"] .profile-sidebar {
  transform: none;
}

/* Pinned hero marks (0xFFshell's avatar, Beacon's project mark) are taken out
   of flow with position:absolute, so the bottom-aligned hero copy underneath
   was free to rise up behind them — on 0xFFshell the eyebrow and the account
   status banner ran straight through the profile picture. Reserve the height
   of the pinned mark as top padding so the copy always starts below it.
   Below 760px both marks return to static flow and need no reservation. */
@media (min-width: 761px) {
  body[data-member="0xffshell"] .profile-intro {
    /* top offset + avatar height + breathing room */
    padding-top: calc(2rem + 138px + 1.5rem);
  }

  body[data-project="beacon"] .profile-intro {
    padding-top: calc(2rem + 98px + 1.5rem);
  }
}

/* Long text should wrap instead of expanding cards into neighbouring tracks. */
.profile-intro h1,
.profile-sidebar h2,
.detail-panel h2,
.detail-panel h3,
.project-card h3,
.person-card h3,
.module-card h3,
.release-card h3,
.activity-card h3,
.project-feature h3,
.project-info-grid h3 {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Homepage: keep the member collage behind the UI and blur only that layer. */
body[data-page="organization"] {
  position: relative;
  isolation: isolate;
  background: #05090b;
}

body[data-page="organization"]::before {
  content: "";
  position: fixed;
  inset: -32px;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4,8,11,.42), rgba(4,8,11,.7) 58%, #05090b 100%),
    url("../assets/homepage-community-background-v4.jpg") center top / cover no-repeat;
  /* Same two layers, with the compressed sibling in the bitmap slot. */
  background-image:
    linear-gradient(180deg, rgba(4,8,11,.42), rgba(4,8,11,.7) 58%, #05090b 100%),
    image-set(
      url("../assets/homepage-community-background-v4.webp") type("image/webp"),
      url("../assets/homepage-community-background-v4.jpg") type("image/jpeg")
    );
  filter: blur(6px);
  transform: scale(1.04);
}

/* The page already has a subtle grid overlay; keep it above the blurred photo. */
body[data-page="organization"]::after {
  z-index: -1;
}

/* Group multiple inline links (e.g. GitLab Releases and CurseForge) in one wrap-safe row. */
.inline-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
}

/* ---- Adaptive hero: the copy follows the backdrop ----
   Videos park the copy top-left (the clip carries the wordmark, so the <h1>
   stands down). Stills park it bottom-right; the collage has no name in it, so
   that one state shows the <h1>. The state lives as data-frame / data-wordmark
   on <html>: index.html's head script picks this visit's backdrop before the
   first style calculation, so the copy is laid out once, in its final place.
   (It used to be decided in easteregg.js after first layout, which moved a
   now-visible hero copy - CLS 0.21 on the homepage.) */
.hero-scrim { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

html[data-frame="video"] body.egg-bg .hero-scrim {
  background:
    linear-gradient(112deg, rgba(4,6,10,.74) 0%, rgba(4,6,10,.34) 26%, rgba(4,6,10,.06) 44%, rgba(4,6,10,0) 54%),
    linear-gradient(180deg, rgba(4,6,10,.44) 0%, rgba(4,6,10,.06) 8%, rgba(4,6,10,0) 14%);
}

html[data-frame="image"] body.egg-bg .hero-scrim {
  background:
    linear-gradient(292deg, rgba(4,6,10,.76) 0%, rgba(4,6,10,.36) 26%, rgba(4,6,10,.06) 44%, rgba(4,6,10,0) 54%),
    linear-gradient(0deg, rgba(4,6,10,.5) 0%, rgba(4,6,10,.08) 10%, rgba(4,6,10,0) 16%);
}

/* the hero is just the copy block now; the profile and metrics moved below */
.org-hero { display: flex; min-height: 100vh; padding-bottom: 0; }
html[data-frame="video"] .org-hero { align-items: flex-start; }
html[data-frame="image"] .org-hero { align-items: flex-end; justify-content: flex-end; }
.org-hero-copy { position: relative; z-index: 2; width: min(100%, 44ch); }
html[data-frame="video"] .org-hero-copy { margin-top: 14vh; }
html[data-frame="image"] .org-hero-copy { margin-bottom: 8vh; text-align: right; }
html[data-frame="image"] .org-hero-copy .action-row { justify-content: flex-end; }

/* the <h1> steps aside whenever the backdrop is already showing the name */
html[data-wordmark="yes"] .org-hero-copy h1 {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
html[data-wordmark="yes"] .org-hero-copy > p { margin-top: 0; }
html[data-wordmark="no"] .org-hero-copy h1 {
  margin: 0 0 .8rem; font-size: clamp(2.1rem, 4.2vw, 3.3rem); line-height: .98;
  letter-spacing: -.045em; color: #fff; text-shadow: 0 3px 30px rgba(0,0,0,.6);
}
html[data-wordmark="no"] .org-hero-copy h1 span { color: #b3cbff; }
.org-hero-copy > p { text-shadow: 0 2px 18px rgba(0,0,0,.55); }

/* The hero copy is the homepage's LCP element. It used to inherit .reveal, so it
   stayed at opacity 0 until the IntersectionObserver ran (and, with a media
   backdrop picked, until the clip could paint) - Lighthouse measured ~1.3 s of
   element render delay on a <p> that was in the first HTML response. The copy now
   paints with the first frame; only the backdrop fades in behind it. */
body[data-page="organization"] .org-hero-copy.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

/* The organization surface is a real, tinted liquid-glass panel over the fixed
   video/still backdrop. Keep the strong dark tint so the long dashboard stays
   legible, while blur, refraction highlights and a visible edge define the box. */
.below-fold {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-inline: clamp(10px, 1.8vw, 28px);
  padding: 3.4rem 0 5rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 30px;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(112, 164, 255, .15), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .035) 38%, rgba(7, 10, 17, .74));
  box-shadow: 0 26px 90px rgba(0, 0, 0, .38),
    inset 0 1px 0 rgba(255, 255, 255, .2),
    inset 1px 0 0 rgba(255, 255, 255, .055);
  backdrop-filter: blur(32px) saturate(160%);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
}
.below-fold::before {
  left: -10%;
  top: -22%;
  width: 70%;
  height: 38%;
  background: radial-gradient(ellipse, rgba(193, 218, 255, .16), transparent 70%);
}
@media (max-width: 760px) {
  .below-fold { margin-inline: 10px; padding-top: 2.6rem; border-radius: 24px; }
}
@media (prefers-reduced-transparency: reduce) {
  .below-fold {
    background: rgba(7, 10, 17, .96);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
.below-head { display: flex; margin-bottom: 1.5rem; gap: 2rem; align-items: baseline;
  justify-content: space-between; }
.below-head h2 { margin: 0; color: #fff; font-size: 1.15rem; letter-spacing: -.015em; }
.below-head p { margin: 0; color: rgba(190,205,225,.55); font-family: var(--mono);
  font-size: .49rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.below-fold .metric-dock { padding-bottom: 0; margin-top: 1rem; }

/* Keep the rotation on-brand: the clips keep their own colour, not the site grid. */
body.egg-bg[data-page="organization"]::after { display: none; }

/* ---- Easter egg + rotating homepage background ---- */
.egg-video,
.egg-photo {
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  object-position: var(--focus, 50% 50%);
  filter: brightness(1.02) saturate(1.05);
  transition: opacity .9s ease;
}

body.egg-ready .egg-video,
body.egg-ready .egg-photo {
  opacity: 1;
}

/* When a media background is live, retire the stylesheet background layers. */
body.egg-bg[data-page="organization"]::before {
  display: none;
}

/* Quiet sound toggle, wakes up on hover/focus. */
.egg-sound {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 110;
  width: 2.6rem;
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  line-height: 1;
  border-radius: 999px;
  border: 1px solid var(--line, rgba(255, 255, 255, .16));
  background: rgba(10, 14, 20, .55);
  cursor: pointer;
  opacity: .4;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: opacity .2s ease, transform .2s ease;
}

.egg-sound:hover,
.egg-sound:focus-visible {
  opacity: 1;
  transform: scale(1.06);
}

.egg-sound[aria-pressed="true"] {
  opacity: .85;
}

@media (prefers-reduced-motion: reduce) {
  .egg-video,
  .egg-photo {
    transition: none;
  }
}
/* ---- /Easter egg ---- */

/* ---- Activity page: platform badges, repo rows, member cards ---- */
.platform-badge {
  font-style: normal;
  font-family: var(--mono);
  font-size: .5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  padding: .18rem .5rem;
  border-radius: 999px;
  white-space: nowrap;
}

.platform-badge.gitlab { color: #ffb38a; background: rgba(252, 109, 38, .13); border: 1px solid rgba(252, 109, 38, .28); }
.platform-inline { font-weight: 700; }
.platform-inline.gitlab { color: #ffb38a; }

.platform-chip { gap: .45rem; }
.platform-chip svg { width: .75rem; height: .75rem; }
.platform-chip.gitlab svg { color: #fc6d26; }
.platform-chip i { background: var(--green); }

.activity-card > header em.platform-badge { margin-left: .15rem; }

/* Repo rows reuse the commit-list look: dot · label · trailing code. */
.repo-list > a {
  display: flex;
  min-height: 56px;
  padding: .75rem .1rem;
  gap: .75rem;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, .045);
}
.repo-list > a:last-child { border: 0; }
.repo-list i { width: 6px; height: 6px; flex: 0 0 auto; background: var(--green); border-radius: 50%; box-shadow: 0 0 9px rgba(140, 247, 122, .3); }
.repo-list span { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: .3rem; }
.repo-list b { overflow: hidden; font-size: .68rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.repo-list small { color: #626c65; font-size: .54rem; }
.repo-list code { color: #68726b; font-family: var(--mono); font-size: .52rem; }

/* Feed rows carry an extra platform badge before the hash. */
.feed-list > a { display: flex; min-height: 72px; padding: .9rem .1rem; gap: .75rem; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, .045); }
.feed-list > a:last-child { border: 0; }
.feed-list i { width: 6px; height: 6px; flex: 0 0 auto; background: var(--green); border-radius: 50%; box-shadow: 0 0 9px rgba(140, 247, 122, .3); }
.feed-list span:not(.platform-badge) { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: .3rem; }
.feed-list b { overflow: hidden; font-size: .68rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.feed-list small { color: #626c65; font-size: .54rem; }
.feed-list code { color: #68726b; font-family: var(--mono); font-size: .52rem; }
.feed-list em.platform-badge { flex: 0 0 auto; }

.member-activity-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .8rem;
}

.member-activity-cards .person-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}

.member-activity-summary {
  margin-top: .9rem;
  color: #79837c;
  font-size: .6rem;
}

.activity-note {
  margin-top: 1rem;
  max-width: 62ch;
  color: #79837c;
  font-size: .62rem;
  line-height: 1.6;
}

.activity-section-block { margin-top: 2.6rem; }
.activity-orgs { margin-top: 1.4rem; }
.platform-warning {
  display: flex;
  margin-top: 1.4rem;
  padding: 1rem 1.2rem;
  gap: .9rem;
  align-items: flex-start;
  border-color: rgba(242, 189, 93, .22);
  background: linear-gradient(145deg, rgba(75, 57, 26, .28), rgba(20, 23, 28, .72));
}
.platform-warning-mark {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  margin-top: .35rem;
  background: #f2bd5d;
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(242, 189, 93, .5);
}
.platform-warning strong { display: block; margin-bottom: .3rem; font-size: .77rem; }
.platform-warning p { max-width: 76ch; margin: 0; color: #c7b58e; font-size: .66rem; line-height: 1.65; }

@media (max-width: 460px) {
  .platform-warning { padding: .9rem; }
}

@media (max-width: 460px) {
  .feed-list em.platform-badge { display: none; }
  .repo-list code { display: none; }
}
/* ---- /Activity page ---- */

/* Amber status-pill variant, used for pending/under-review states
   (e.g. a storefront listing that has not cleared moderation yet). */
.status-pill.amber i { background: #f2c45a; }
.status-pill.amber { color: #d8b368; border-color: rgba(242, 196, 90, .35); }
/* ---- SEO-enriched homepage / directory sections (tools/enrich_content.py) ----
   Static, JS-free sections injected into /, /members and /activity reuse the
   existing grid and heading styles; this block only supplies vertical rhythm so
   consecutive sections do not stack flush. */
.home-directory { margin-top: clamp(3rem, 7vw, 5.5rem); }
.home-directory:first-of-type { margin-top: clamp(2rem, 5vw, 3.5rem); }
.home-directory .action-row { margin-top: 1.5rem; }
.home-directory > p { max-width: 68ch; margin-top: 1rem; }
.home-directory > p + p { margin-top: .75rem; }


/* Low-power feed controls */
.activity-paused-note {
  margin: .5rem 0;
  padding: .7rem .1rem;
  color: #929b96;
  font-size: .65rem;
  line-height: 1.55;
}
.activity-low-power-card {
  grid-column: 1 / -1;
  padding: 1.15rem;
  background: rgba(20, 25, 35, .78);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.activity-low-power-card p { max-width: 62ch; margin: 0 0 1rem; color: #929b96; font-size: .72rem; line-height: 1.6; }
/* Accessibility: breadcrumb text was #657069, 3.8:1 on --bg. Bumped to the
   site's own muted token (~7:1) - it is 8.6px type, so it needs the contrast. */
.breadcrumbs { color: var(--muted); }

/* Accessibility: white on the site blue (--blue, #5a9bf2) is 2.84:1, under the
   4.5:1 WCAG AA floor for button text. Deepen the filled blue button only - the
   --blue token itself is untouched, so links, borders and focus rings keep the
   brand colour. Base 4.70:1, hover 5.27:1, both with white text. */
.button-blue { background: #3f74c0; border-color: #3f74c0; }
.button-blue:hover { background: #3a6cb4; border-color: #3a6cb4; }

.activity-low-power-card .button,
.cf-low-power .button { width: auto; min-height: 42px; }
.cf-low-power .button { margin-top: .8rem; }
.egg-play-original { position: fixed; left: 1rem; bottom: 1rem; z-index: 110; }

/* Adaptive low-power mode: retain the tinted glass surfaces without the costly blur. */
html.low-end { scroll-behavior: auto; }
html.low-end .glass-card,
html.low-end .below-fold,
html.low-end .main-nav,
html.low-end .topbar.scrolled,
html.low-end .visual-metrics,
html.low-end .egg-sound {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html.low-end .glass-card {
  background: linear-gradient(145deg, rgba(34, 42, 55, .94), rgba(13, 17, 24, .92));
  box-shadow: 0 12px 30px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .06);
}
html.low-end .glass-card::before,
html.low-end .below-fold::before { display: none !important; }
html.low-end .below-fold {
  background: linear-gradient(145deg, rgba(26, 34, 47, .97), rgba(8, 12, 19, .96));
  box-shadow: 0 14px 40px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .08);
}
html.low-end .site-glow { display: none !important; }
html.low-end .atmosphere-canvas,
html.low-end .effect-background,
html.low-end #plus-rain,
html.low-end .beacon-video-background,
html.low-end .starrynight-bg-container,
html.low-end pixel-canvas { display: none !important; }
html.low-end body[data-page="organization"]::before {
  inset: 0;
  filter: none;
  transform: none;
}
html.low-end .egg-photo { filter: none; }
html.low-end body.plus-rain-page.plus-rain-fallback {
  background: radial-gradient(ellipse at 70% 20%, rgba(55, 114, 91, .22), transparent 46%), #07090d !important;
}
html.low-end body.storm-window-page {
  background: radial-gradient(ellipse at 72% 18%, rgba(86, 107, 142, .2), transparent 42%), #07090d !important;
}
html.low-end body[data-project="bagley"] .bagley-wave-background {
  inset: 0;
  filter: none !important;
  transform: none;
  opacity: 1;
  animation: none !important;
  background:
    radial-gradient(ellipse at 16% 24%, rgba(105, 7, 12, .9), transparent 52%),
    radial-gradient(ellipse at 84% 20%, rgba(112, 88, 3, .75), transparent 54%),
    radial-gradient(ellipse at 48% 88%, rgba(91, 20, 3, .82), transparent 58%),
    #160202;
}
html.low-end body[data-project="bagley"] .bagley-wave-background span { display: none; }
html.low-end body[data-project="bagley"] .bagley-wave-background,
html.low-end body[data-project="bagley"] .bagley-wave-background span { animation: none !important; }
html.low-end *,
html.low-end *::before,
html.low-end *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html.low-end .reveal { opacity: 1 !important; transform: none !important; }