/* ==========================================================================
PAMA — Physics, Astronomy & Mathematics Association
Design system: futuristic minimalism. One accent, hairlines, quiet motion.
Everything is sized in rem, and the root size grows on large screens,
so the whole site scales up cleanly on big monitors.
Contents
1. Tokens 7. Sections & cards 13. Resources / FAQ / join
2. Reset & base 8. Home 14. Footer
3. Typography 9. Page heroes 15. Motion
4. Buttons & icons 10. Events 16. Utilities
5. Header & menu 11. News
6. Landing hero 12. Team / about
========================================================================== */
/* 1. Tokens ---------------------------------------------------------------- */
:root {
--bg: #04060c;
--bg-2: #080b15;
--surface: rgba(255, 255, 255, 0.03);
--surface-hover: rgba(255, 255, 255, 0.055);
--line: rgba(255, 255, 255, 0.09);
--line-strong: rgba(255, 255, 255, 0.2);
--text: #f0f2f7;
--text-2: #b8becd;
--text-3: #8e95a7; /* ≥ 6:1 on --bg */
--accent: #9edcff; /* one accent per page — see "Page themes" */
--accent-rgb: 158, 220, 255;
--accent-soft: rgba(var(--accent-rgb), 0.14);
--signal: #ffcf8f; /* "next up" / live only */
--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
--font-math: "STIX Two Text", "Cambria Math", "Latin Modern Math", Georgia, serif;
/* Type scale — keep to these steps */
--fs-micro: 0.6875rem; /* 11px */
--fs-label: 0.75rem; /* 12px */
--fs-sm: 0.9375rem; /* 15px */
--fs-body: 1rem;
--fs-h5: 1.0625rem;
--fs-h4: 1.25rem;
--fs-h3: clamp(1.5rem, 2.2vw, 1.875rem);
--track-label: 0.18em;
--track-caps: 0.15em;
--ease: cubic-bezier(0.19, 1, 0.22, 1);
--ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
--container: 80rem;
--gutter: clamp(1.25rem, 4vw, 3rem);
--section: clamp(4rem, 7.5vw, 7.5rem);
--radius: 0.875rem;
--radius-lg: 1.375rem;
--header-h: 5rem;
--hero-h: max(100svh, 40rem);
/* Inline icons (data URIs so they also work from file://) */
--i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M4 12h16m-6-6 6 6-6 6'/%3E%3C/svg%3E");
--i-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
--i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
color-scheme: dark;
}
@media (max-width: 640px) { :root { --hero-h: max(100svh, 34rem); --header-h: 4.25rem; } }
/* 2. Reset & base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .16) var(--bg); scrollbar-gutter: stable; -webkit-tap-highlight-color: transparent; }
@media (min-width: 1440px) { html { font-size: 106.25%; } } /* 17px */
@media (min-width: 1760px) { html { font-size: 112.5%; } } /* 18px */
@media (min-width: 2200px) { html { font-size: 125%; } } /* 20px */
body {
margin: 0; min-height: 100vh;
background: var(--bg); color: var(--text);
font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.65; font-weight: 400;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { font-weight: inherit; font-size: inherit; }
::selection { background: var(--accent); color: var(--bg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.skip-link {
position: fixed; top: 0.75rem; left: 0.75rem; z-index: 200;
padding: 0.625rem 1rem; border-radius: 999px; background: var(--text); color: var(--bg);
font-size: 0.8125rem; font-weight: 500;
transform: translateY(-160%); transition: transform .3s var(--ease);
}
.skip-link:focus { transform: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.starfield { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.page { position: relative; z-index: 1; }
/* 3. Typography ------------------------------------------------------------ */
/* Shared micro-label: every small mono caption uses this recipe */
.eyebrow, .card__kicker, .pillar__num, .event__mon, .post__meta, .article__date,
.sky__label, .contact-grid dt, .footer-col__title, .timeline__year, .person__role,
.placeholder-note, .month-label, .page-hero__meta, .offer__n, .label {
font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 400;
letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-3);
}
.eyebrow { display: inline-flex; align-items: center; gap: 0.75rem; }
.eyebrow::before { content: ""; width: 1.5rem; height: 1px; background: linear-gradient(90deg, rgba(var(--accent-rgb), .9), rgba(var(--accent-rgb), .35)); }
.eyebrow .idx { color: var(--accent); }
.eyebrow--plain::before { display: none; }
.display { font-size: clamp(2.75rem, 6.5vw, 6rem); font-weight: 300; line-height: 1.02; letter-spacing: -0.035em; }
.h1 { font-size: clamp(2.5rem, 5.4vw, 4.75rem); font-weight: 300; line-height: 1.04; letter-spacing: -0.03em; }
.h2 { font-size: clamp(2rem, 3.8vw, 3.25rem); font-weight: 300; line-height: 1.08; letter-spacing: -0.025em; }
.h3 { font-size: var(--fs-h3); font-weight: 400; line-height: 1.25; letter-spacing: -0.015em; }
.h4 { font-size: var(--fs-h4); font-weight: 500; line-height: 1.35; letter-spacing: -0.005em; }
.lead { font-size: clamp(1.0625rem, 1.25vw, 1.3rem); line-height: 1.6; color: var(--text-2); font-weight: 400; max-width: 58ch; }
.lead strong { color: var(--text); font-weight: 500; }
.statement { font-size: clamp(1.6rem, 3.1vw, 2.75rem); font-weight: 300; line-height: 1.22; letter-spacing: -0.022em; max-width: 26ch; }
.statement em { font-style: normal; color: var(--accent); }
/* One accent phrase per page headline, in the page's colour with a soft inner light */
.h1 em, .h2 em {
font-style: normal; color: var(--accent);
background: linear-gradient(105deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 62%, #fff) 55%, var(--accent) 100%);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
-webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* Headlines break into even lines; body copy avoids orphans */
.display, .h1, .h2, .h3, .statement, .cta__title, .person__name, .post h3, .event__title { text-wrap: balance; }
.lead, .prose p, .card p, .event__desc, .res__desc, .faq details > div, .step p, .value p, .offer p { text-wrap: pretty; }
/* Shared small body copy */
.card p, .pillar p, .offer p, .event__desc, .post p, .timeline__item p, .value p, .step p, .res__desc {
font-size: var(--fs-sm); line-height: 1.7; color: var(--text-2); font-weight: 400;
}
.prose { max-width: 64ch; }
.prose p { color: var(--text-2); font-size: 1.0625rem; line-height: 1.75; }
.prose p + p { margin-top: 1.1em; }
.prose strong { color: var(--text); font-weight: 500; }
.faint { color: var(--text-3); }
.accent { color: var(--accent); }
/* 4. Buttons, links & icons ------------------------------------------------ */
.btn {
--h: 3rem;
display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
height: var(--h); padding-inline: 1.5rem;
border: 1px solid var(--line-strong); border-radius: 999px;
font-size: 0.78rem; font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase;
color: var(--text); white-space: nowrap;
transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.btn:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn--solid { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn--solid:hover { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 2rem rgba(var(--accent-rgb), .35); }
.btn--sm { --h: 2.25rem; padding-inline: 1.125rem; font-size: 0.7rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.link {
display: inline-flex; align-items: center; gap: 0.5rem;
font-size: 0.78rem; font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text);
background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
padding-bottom: 3px;
transition: background-size .6s var(--ease), color .3s;
}
.link:hover { background-size: 100% 1px; color: var(--accent); }
.text-link { color: var(--text); border-bottom: 1px solid var(--line-strong); transition: border-color .3s, color .3s; }
.text-link:hover { color: var(--accent); border-color: var(--accent); }
/* Mask icons: */
.i { display: inline-block; width: 0.875rem; height: 0.875rem; flex-shrink: 0; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.i-arrow { --m: var(--i-arrow); transition: transform .5s var(--ease); }
.i-out { --m: var(--i-out); transition: transform .5s var(--ease); }
.i-plus { --m: var(--i-plus); }
:is(.btn, .link, .hero-col, .post):hover .i-arrow { transform: translateX(4px); }
:is(.btn, .link):hover .i-out { transform: translate(2px, -2px); }
.icon { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
.icon--sm { width: 0.875rem; height: 0.875rem; }
/* 5. Header & menu --------------------------------------------------------- */
/* At the top: an open, transparent bar. Once scrolled: a floating glass
capsule that tucks away while reading down and returns on scroll up. */
.site-header {
position: fixed; inset: 0 0 auto 0; z-index: 100; pointer-events: none;
transition: opacity .9s var(--ease), transform .7s var(--ease);
}
.site-header.is-hidden:not(:focus-within) { transform: translateY(calc(-100% - 1rem)); }
.site-header__inner {
pointer-events: auto;
height: var(--header-h); max-width: min(var(--container), 100%); margin: 0 auto; padding-inline: var(--gutter);
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
border: 1px solid transparent; border-radius: 0;
transition: max-width .8s var(--ease), height .8s var(--ease), margin .8s var(--ease), padding .8s var(--ease), border-radius .8s var(--ease),
background-color .5s var(--ease-soft), border-color .5s var(--ease-soft), box-shadow .5s var(--ease-soft);
}
.site-header.is-scrolled .site-header__inner {
height: 3.5rem; max-width: min(66rem, calc(100% - 1.5rem)); margin-top: 0.75rem; padding-inline: 1.375rem 1rem;
border-radius: 999px; border-color: rgba(255, 255, 255, 0.09);
background: rgba(12, 15, 25, 0.84);
-webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
box-shadow: 0 1rem 2.5rem -1rem rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.site-header__left { display: flex; align-items: center; gap: 1.375rem; }
.site-header__center { justify-self: center; }
.site-header__right { justify-self: end; display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 1.75rem); }
.site-header__center, .socials { transition: opacity .4s var(--ease-soft), visibility 0s linear 0s; }
.brand {
display: inline-flex; align-items: center; max-width: 6rem; overflow: hidden;
transition: opacity .5s var(--ease), transform .6s var(--ease), max-width .7s var(--ease), margin .7s var(--ease);
}
.brand img { height: 1.1rem; width: auto; max-width: none; }
.is-home .site-header:not(.is-scrolled) .brand { opacity: 0; transform: translateY(-6px); pointer-events: none; max-width: 0; margin-right: -1.375rem; }
.socials { display: flex; align-items: center; gap: 1.125rem; color: var(--text-2); }
.socials a { display: inline-flex; padding: 0.375rem; margin: -0.375rem; transition: color .3s; }
.socials a:hover { color: var(--text); }
/* Menu toggle: the word rolls from Menu to Close and the lines cross */
.menu-toggle {
display: inline-flex; align-items: center; gap: 0.75rem; height: 2.5rem; padding: 0 0.25rem;
font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-2);
transition: color .3s;
}
.menu-toggle:hover, .menu-open .menu-toggle { color: var(--text); }
.menu-toggle__words { display: grid; overflow: hidden; height: 1.2em; line-height: 1.2; }
.menu-toggle__words > span { grid-area: 1 / 1; transition: transform .6s var(--ease), opacity .4s var(--ease-soft); }
.menu-toggle__words > span:last-child { transform: translateY(110%); opacity: 0; }
.menu-open .menu-toggle__words > span:first-child { transform: translateY(-110%); opacity: 0; }
.menu-open .menu-toggle__words > span:last-child { transform: none; opacity: 1; }
.menu-toggle__icon { position: relative; width: 1.25rem; height: 0.625rem; }
.menu-toggle__icon span { position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform .6s var(--ease), top .6s var(--ease), left .6s var(--ease); }
.menu-toggle__icon span:nth-child(1) { top: 0; }
.menu-toggle__icon span:nth-child(2) { top: calc(100% - 1px); left: 0.4375rem; }
.menu-toggle:hover .menu-toggle__icon span:nth-child(2) { left: 0; }
.menu-open .menu-toggle__icon span:nth-child(1) { top: 50%; transform: rotate(45deg); }
.menu-open .menu-toggle__icon span:nth-child(2) { top: 50%; left: 0; transform: rotate(-45deg); }
/* While the menu is open the header returns to its open form; only the
logo and the Close button remain */
.menu-open .site-header .site-header__inner {
height: var(--header-h); max-width: min(var(--container), 100%); margin-top: 0; padding-inline: var(--gutter);
border-radius: 0; border-color: transparent; background: transparent; box-shadow: none;
-webkit-backdrop-filter: none; backdrop-filter: none;
}
.menu-open .site-header__center, .menu-open .socials { opacity: 0; visibility: hidden; transition: opacity .25s var(--ease-soft), visibility 0s linear .25s; }
.menu-open .brand { opacity: 1 !important; transform: none !important; max-width: 6rem !important; margin-right: 0 !important; pointer-events: auto !important; }
/* Scrim: a grey veil over the whole page */
.nav-scrim {
position: fixed; inset: 0; z-index: 94;
background: rgba(16, 18, 25, 0.78);
-webkit-backdrop-filter: blur(12px) saturate(70%); backdrop-filter: blur(12px) saturate(70%);
opacity: 0; visibility: hidden; transition: opacity .5s var(--ease-soft), visibility 0s linear .5s;
}
.menu-open .nav-scrim { opacity: 1; visibility: visible; transition: opacity .5s var(--ease-soft), visibility 0s; }
/* Drawer: large, clear links on the right-hand side */
.nav-drawer {
position: fixed; top: 0; right: 0; bottom: 0; z-index: 95; width: min(40rem, 100%);
display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
padding: calc(var(--header-h) + clamp(0.75rem, 3vh, 2.5rem)) clamp(1.75rem, 4vw, 3.5rem) clamp(1.5rem, 4vh, 2.5rem);
background:
radial-gradient(60% 40% at 100% 0%, rgba(var(--accent-rgb), .09), transparent 70%),
#0a0d16;
border-left: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: -3rem 0 6rem -2rem rgba(0, 0, 0, .6);
transform: translateX(100%); visibility: hidden;
transition: transform .6s var(--ease), visibility 0s linear .6s;
}
.menu-open .nav-drawer { transform: none; visibility: visible; transition: transform .9s var(--ease), visibility 0s; }
.nav-drawer__eyebrow {
display: flex; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1rem, 3vh, 2rem);
font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-3);
}
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-link { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.5rem); padding-block: clamp(0rem, 0.35vh, 0.375rem); }
.nav-link__num { width: 1.75rem; flex-shrink: 0; font-family: var(--font-mono); font-size: var(--fs-label); color: var(--text-3); transition: color .3s; }
.nav-link__mask { display: block; overflow: hidden; padding-block: 0.06em 0.1em; transition: transform .6s var(--ease); }
.nav-link__label {
display: block; font-size: clamp(2rem, min(4.2vw, 5.4vh), 3.75rem); font-weight: 300; line-height: 1.08; letter-spacing: -0.035em; color: var(--text);
transform: translateY(110%); transition: transform .45s var(--ease-soft), color .35s var(--ease-soft);
}
.menu-open .nav-link__label { transform: none; transition: transform 1s var(--ease) calc(160ms + var(--i) * 55ms), color .35s var(--ease-soft); }
.nav-link__go { margin-left: auto; width: 1.375rem; height: 1.375rem; color: var(--accent); opacity: 0; transform: translateX(-0.75rem); transition: opacity .3s var(--ease-soft), transform .6s var(--ease); }
/* Hover: the chosen link steps forward, the rest recede */
.nav-list:hover .nav-link:not(:hover) .nav-link__label { color: var(--text-3); }
.nav-link:is(:hover, :focus-visible) { outline: none; }
.nav-link:is(:hover, :focus-visible) .nav-link__mask { transform: translateX(0.75rem); }
.nav-link:is(:hover, :focus-visible) .nav-link__go { opacity: 1; transform: none; }
.nav-link:is(:hover, :focus-visible) .nav-link__num { color: var(--accent); }
.nav-link:focus-visible .nav-link__label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: rgba(var(--accent-rgb), .7); }
.nav-link[aria-current="page"] .nav-link__label { color: var(--accent); }
.nav-link[aria-current="page"] .nav-link__num { color: var(--accent); }
.nav-link[aria-current="page"] .nav-link__go { -webkit-mask: none; mask: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px rgba(var(--accent-rgb), .8); opacity: 1; transform: none; }
.nav-drawer__foot {
margin-top: auto; padding-top: clamp(1.75rem, 4.5vh, 3.5rem);
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2rem; align-items: start;
opacity: 0; transform: translateY(0.75rem); transition: opacity .3s var(--ease-soft), transform .6s var(--ease);
}
.menu-open .nav-drawer__foot { opacity: 1; transform: none; transition: opacity .8s var(--ease-soft) .5s, transform 1s var(--ease) .5s; }
.nav-drawer__label { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-3); }
.nav-drawer__label--signal { color: var(--signal); }
.nav-drawer__label--signal::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: pulse 2.4s var(--ease-soft) infinite; }
.nav-drawer__next { grid-column: 1 / -1; display: block; }
.nav-drawer__next-text { display: inline-flex; align-items: center; gap: 0.625rem; font-size: 1.125rem; font-weight: 300; letter-spacing: -0.01em; color: var(--text); transition: color .3s; }
.nav-drawer__next:hover .nav-drawer__next-text { color: var(--accent); }
.nav-drawer__next:hover .i-arrow { transform: translateX(4px); }
.nav-drawer__link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; color: var(--text); transition: color .3s; }
.nav-drawer__link:hover { color: var(--accent); }
.nav-drawer__cta { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 720px) {
.site-header__left .socials { display: none; }
.is-home .site-header:not(.is-scrolled) .site-header__left .socials { display: flex; }
.site-header__center .btn { --h: 2.125rem; padding-inline: 1rem; font-size: var(--fs-micro); }
.site-header.is-scrolled .site-header__inner { max-width: calc(100% - 1rem); margin-top: 0.5rem; padding-inline: 1.125rem 0.75rem; }
.nav-drawer { border-left: 0; }
.nav-link__label { font-size: clamp(2.1rem, min(8.5vw, 5.6vh), 3.25rem); }
.nav-drawer__cta { justify-self: stretch; }
}
/* 6. Landing hero ---------------------------------------------------------- */
.hero { position: relative; min-height: var(--hero-h); display: flex; flex-direction: column; }
/* Backdrop sits outside .page so the starfield canvas drifts over it */
.hero-backdrop { position: absolute; inset: 0 0 auto 0; height: var(--hero-h); z-index: -1; overflow: hidden; pointer-events: none; }
.hero__bg {
position: absolute; inset: -4% 0 0 0;
background: url("../img/space.avif") center / cover no-repeat;
transform: translate3d(0, var(--parallax, 0px), 0) scale(1.06);
will-change: transform;
transition: filter 1.6s var(--ease), opacity 1.6s var(--ease);
}
.hero-backdrop::after {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(ellipse 50% 32% at 50% 48%, rgba(4,6,12,.45), transparent 70%),
linear-gradient(180deg, rgba(4,6,12,.35) 0%, rgba(4,6,12,.2) 35%, rgba(4,6,12,.72) 78%, var(--bg) 100%);
}
.hero__main {
flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; padding: calc(var(--header-h) + 1.5rem) var(--gutter) 1.5rem;
}
.hero__logo-wrap { position: relative; width: min(72vw, 50rem); transition: transform 1.3s var(--ease); }
/* The logo's glow is a soft gradient behind it rather than a filter on the
image: iPad Safari can drop a filtered PNG's transparency when the layer is
rescaled (it showed as a white box once the intro ended) */
.hero__logo { position: relative; width: 100%; height: auto; }
.hero__logo-wrap::before {
content: ""; position: absolute; inset: -30% -10%; pointer-events: none;
background: radial-gradient(closest-side, rgba(var(--accent-rgb), .13), rgba(var(--accent-rgb), .04) 60%, transparent);
}
/* A single scanning light sweeps across the logo, then is removed (main.js) */
.hero__logo-wrap::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(100deg, transparent 36%, rgba(var(--accent-rgb), .75) 46%, rgba(255, 255, 255, .95) 50%, rgba(var(--accent-rgb), .75) 54%, transparent 64%) -150% 0 / 60% 100% no-repeat;
-webkit-mask-image: url("../img/pama-logo-white.png"); -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat;
mask-image: url("../img/pama-logo-white.png"); mask-position: center; mask-size: contain; mask-repeat: no-repeat;
animation: sweep 2.6s var(--ease-soft) 0.9s both;
}
.hero__logo-wrap.is-swept::after { content: none; }
.hero__logo-wrap.is-swept .hero__logo { animation: none; opacity: 1; transform: none; filter: none; }
@keyframes sweep { from { background-position: -150% 0; } to { background-position: 260% 0; } }
.hero__title, .hero__subtitle {
font-size: clamp(0.72rem, .85vw, 0.95rem); font-weight: 400; text-transform: uppercase;
letter-spacing: clamp(0.28em, 0.9vw, 0.52em); padding-left: 0.5em; text-wrap: balance;
transition: opacity 1s var(--ease), transform 1.2s var(--ease);
}
.hero__title { margin-top: clamp(1.25rem, 3vw, 2rem); color: var(--text-2); min-height: 1.6em; }
.hero__subtitle { margin-top: 0.5rem; color: var(--text-2); transition-delay: .25s; }
/* Viewfinder corners around the logo */
.hud { position: absolute; inset: -12% -6%; pointer-events: none; }
.hud i { position: absolute; width: 1.25rem; height: 1.25rem; border: 1px solid rgba(255,255,255,.35); transition: transform 1.2s var(--ease), opacity 1s var(--ease); }
.hud i:nth-child(1) { top: 0; left: 0; border-width: 1px 0 0 1px; }
.hud i:nth-child(2) { top: 0; right: 0; border-width: 1px 1px 0 0; }
.hud i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.hud i:nth-child(4) { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
.hero__foot {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
gap: clamp(1.5rem, 4vw, 4rem); align-items: stretch;
padding: 1.5rem var(--gutter) clamp(1.75rem, 4vw, 3rem);
max-width: var(--container); width: 100%; margin-inline: auto;
}
.hero__foot > * { transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.hero__foot > :nth-child(2) { transition-delay: .12s; }
.hero__foot > :nth-child(3) { transition-delay: .24s; }
.hero__foot > :nth-child(4) { transition-delay: .36s; }
.hero__foot .scroll-cue { align-self: end; }
/* Three matching columns: label, text, link — the links share a baseline */
.hero-col { display: flex; flex-direction: column; gap: 0.75rem; max-width: 34ch; }
.hero-col__label { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-3); }
.hero-col__text { font-size: 0.9375rem; line-height: 1.65; color: var(--text-2); text-wrap: pretty; }
.hero-col--next .hero-col__label { color: var(--signal); }
.hero-col--next .hero-col__label::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: pulse 2.4s var(--ease-soft) infinite; }
.hero-col--next .hero-col__text { font-size: clamp(1.125rem, 1.4vw, 1.375rem); font-weight: 300; line-height: 1.35; letter-spacing: -0.01em; color: var(--text); }
.hero-col__cta { margin-top: auto; padding-top: 0.5rem; display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text); transition: color .3s; }
.hero-col:hover .hero-col__cta { color: var(--accent); }
/* Intro state: nothing but the logo until the visitor scrolls, taps or presses a key */
.intro-cue {
position: absolute; left: 50%; bottom: clamp(1.5rem, 5vh, 3rem); translate: -50% 0;
display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .3em; text-transform: uppercase; color: var(--text-3);
opacity: 0; pointer-events: none; transition: opacity .8s var(--ease);
}
.intro-cue__line { width: 1px; height: 2.5rem; background: var(--line-strong); position: relative; overflow: hidden; }
.intro-cue__line::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: var(--text); animation: drip 2.4s var(--ease) infinite; }
.is-intro .intro-cue { opacity: 1; transition-delay: 2.4s; }
.is-intro .site-header { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.is-intro .hero__title, .is-intro .hero__subtitle { opacity: 0; transform: translateY(10px); }
.is-intro .hero__foot > * { opacity: 0; transform: translateY(18px); pointer-events: none; }
.is-intro .hero__logo-wrap { transform: translateY(2.6rem) scale(1.04); }
.is-intro .hud i { opacity: 0; }
.is-intro .hud i:nth-child(1) { transform: translate(-1.5rem, -1.5rem); }
.is-intro .hud i:nth-child(2) { transform: translate(1.5rem, -1.5rem); }
.is-intro .hud i:nth-child(3) { transform: translate(-1.5rem, 1.5rem); }
.is-intro .hud i:nth-child(4) { transform: translate(1.5rem, 1.5rem); }
.is-intro .hero__bg { filter: saturate(.75) brightness(.8); }
.is-intro .starfield { opacity: .6; }
.is-intro .brand { opacity: 0; }
@media (max-width: 960px) {
.hero__foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hero__foot .hero__col-3, .hero__foot .scroll-cue { display: none; }
}
@media (max-width: 640px) {
.hero__main { padding-bottom: 4vh; }
.hero__logo-wrap { width: 82vw; }
.hero__title, .hero__subtitle { letter-spacing: .2em; padding-left: .2em; }
.hero__foot { grid-template-columns: minmax(0, 1fr); }
.hero__foot .hero__col-2 { display: none; }
.hud { inset: -18% -5%; }
}
.scroll-cue {
display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .24em; text-transform: uppercase; color: var(--text-3);
writing-mode: vertical-rl; transition: color .3s, opacity 1s var(--ease), transform 1.2s var(--ease);
}
.scroll-cue:hover { color: var(--text); }
.scroll-cue__line { width: 1px; height: 3.5rem; background: var(--line-strong); position: relative; overflow: hidden; writing-mode: horizontal-tb; }
.scroll-cue__line::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: var(--text); animation: drip 2.6s var(--ease) infinite; }
@keyframes drip { from { transform: translateY(-100%); } to { transform: translateY(260%); } }
/* 7. Sections, layout & cards --------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: calc(var(--section) * .6); }
/* Sections are separated by space and rhythm, never by rules */
.section + .section { padding-top: calc(var(--section) * .5); }
.section + .section.cta { padding-top: var(--section); }
.stack > * + * { margin-top: var(--stack, 1rem); }
.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } }
/* Split: a heading column that stays in view while the content scrolls past */
.split { display: grid; gap: clamp(2rem, 6vw, 6rem); grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
.split__aside { position: sticky; top: calc(var(--header-h) + 2rem); }
@media (max-width: 900px) {
.split { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.split__aside { position: static; }
}
.section-head { display: grid; gap: 1.125rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-head--row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1.5rem 2.5rem; }
@media (max-width: 720px) { .section-head--row { grid-template-columns: minmax(0, 1fr); } }
.card {
position: relative; display: flex; flex-direction: column;
padding: clamp(1.5rem, 2.4vw, 2.125rem);
border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
overflow: hidden; isolation: isolate;
}
.card__icon { width: 2.75rem; height: 2.75rem; color: var(--accent); margin-bottom: 1.5rem; }
.card__icon svg { width: 100%; height: 100%; }
.card__kicker { margin-bottom: 0.875rem; }
.card h3 { margin-bottom: 0.75rem; }
.card__foot { margin-top: auto; padding-top: 1.5rem; }
.card--center { text-align: center; align-items: center; padding-block: 3.5rem; }
.card--center p { max-width: 48ch; }
/* Only interactive cards react to the pointer */
.card--interactive { --mx: 50%; --my: 50%; transition: border-color .6s var(--ease), background-color .6s var(--ease), transform .7s var(--ease); }
.card--interactive::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: radial-gradient(26rem circle at var(--mx) var(--my), rgba(var(--accent-rgb), .08), transparent 60%);
opacity: 0; transition: opacity .6s var(--ease-soft);
}
.card--interactive:hover { border-color: var(--line-strong); background: var(--surface-hover); transform: translateY(-4px); }
.card--interactive:hover::before { opacity: 1; }
/* Large outlined section numeral, at the top of each numbered heading block
(in the flow, so it can never run into the neighbouring sections) */
.ghost-num {
display: block; margin-bottom: -0.25rem; pointer-events: none; user-select: none;
font-family: var(--font-mono); font-size: clamp(3.75rem, 6.5vw, 6rem); line-height: 0.9; font-weight: 400; letter-spacing: -0.06em;
color: rgba(var(--accent-rgb), .07); -webkit-text-stroke: 1px rgba(var(--accent-rgb), .6);
}
/* .numbered puts the numeral in a right-hand column beside the heading;
.numbered__wide content runs full width underneath */
.numbered { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(1.5rem, 4vw, 4rem); }
.numbered > * { grid-column: 1; }
.numbered > .ghost-num { grid-column: 2; grid-row: 1; align-self: start; margin: 0; font-size: clamp(5rem, 10vw, 9rem); }
.numbered > .numbered__wide { grid-column: 1 / -1; }
/* The timeline stacks vertically below 1200px, so the numeral stays beside it the whole way down */
@media (min-width: 721px) and (max-width: 1199px) {
.numbered--timeline > .ghost-num { grid-row: 1 / span 3; position: sticky; top: calc(var(--header-h) + 2rem); font-size: clamp(7rem, 16vw, 12rem); }
}
@media (min-width: 1200px) { .numbered--timeline > :is(.timeline, .placeholder-note) { grid-column: 1 / -1; } }
/* Split layouts collapse to one column at 900px: pin the numeral to the right of the heading there too */
@media (min-width: 721px) and (max-width: 900px) {
.split__aside:has(> .ghost-num) { position: relative; top: 0; }
.split__aside > .ghost-num { position: absolute; top: 0; right: 0; font-size: clamp(5rem, 10vw, 9rem); }
.split__aside > .ghost-num + * { margin-top: 0; }
}
@media (max-width: 720px) {
.numbered { grid-template-columns: minmax(0, 1fr); }
.numbered > .ghost-num { grid-column: 1; font-size: clamp(3.75rem, 16vw, 5rem); margin-bottom: 1rem; }
}
/* 8. Home ----------------------------------------------------------------- */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(3rem, 6vw, 5rem); }
.pillar { position: relative; padding: 2rem clamp(0rem, 2vw, 2rem) 0.5rem 0; }
.pillar + .pillar { border-left: 1px solid var(--line); padding-left: clamp(1.25rem, 3vw, 2.5rem); }
.pillar__art { width: 100%; max-width: 14rem; height: 7rem; margin: 1.5rem 0; color: var(--text-2); }
.pillar h3 { font-size: 1.5rem; font-weight: 400; letter-spacing: -0.01em; margin-bottom: 0.625rem; }
.pillar p { max-width: 34ch; }
@media (max-width: 900px) {
.pillars { grid-template-columns: minmax(0, 1fr); }
.pillar { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0 1.25rem; padding: 1.5rem 0; }
.pillar + .pillar { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
.pillar__num { grid-column: 1 / -1; }
.pillar__art { grid-row: 2 / span 2; width: 7rem; height: 5rem; margin: 0.75rem 0 0; }
.pillar h3 { margin-top: 0.75rem; }
}
/* Keyword ticker */
.ticker {
position: relative; overflow: hidden; padding-block: clamp(1.25rem, 2.5vw, 2rem);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track { display: flex; width: max-content; animation: ticker 60s linear infinite; }
.ticker__list { display: flex; flex-shrink: 0; }
.ticker__list span {
font-size: clamp(1.5rem, 3.2vw, 2.75rem); font-weight: 300; letter-spacing: -0.02em; white-space: nowrap;
color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.35); padding-right: 0.9em;
}
.ticker__list span:nth-child(3n+2) { color: var(--text); -webkit-text-stroke: 0; }
.ticker__list span::after { content: "·"; color: var(--accent); -webkit-text-stroke: 0; margin-left: 0.9em; }
@keyframes ticker { to { transform: translateX(-50%); } }
.equation {
position: relative; isolation: isolate; text-align: center; padding: clamp(4rem, 8vw, 7rem) var(--gutter);
background: radial-gradient(ellipse 45% 70% at 50% 50%, rgba(var(--accent-rgb), .08), transparent 70%);
}
/* Wavefronts: faint rings drifting outward from the formula */
@property --ripple { syntax: ""; inherits: false; initial-value: 0px; }
.equation::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: repeating-radial-gradient(circle at 50% 50%, transparent 0 var(--ripple), rgba(var(--accent-rgb), .1) var(--ripple) calc(var(--ripple) + 1px), transparent calc(var(--ripple) + 1px) calc(var(--ripple) + 72px));
-webkit-mask-image: radial-gradient(ellipse 46% 60% at 50% 50%, #000 10%, transparent 100%); mask-image: radial-gradient(ellipse 46% 60% at 50% 50%, #000 10%, transparent 100%);
animation: ripple 9s linear infinite;
}
@keyframes ripple { to { --ripple: 72px; } }
.equation__meta {
display: flex; justify-content: center; gap: 0.75rem; margin-top: 0.875rem; min-height: 1.2em;
font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent);
transition: opacity .5s var(--ease-soft);
}
.equation__meta span + span { color: var(--text-3); }
.equation__meta span + span::before { content: "·"; margin-right: 0.75rem; color: var(--text-3); }
.equation__meta.is-swapping { opacity: 0; }
.equation__formula {
position: relative; font-family: var(--font-math); font-size: clamp(1.9rem, 5.5vw, 4.4rem); font-weight: 400; line-height: 1.2;
margin: 1.25rem auto 1rem; padding-block: 1.25rem; min-height: 1.3em; max-width: 100%;
display: flex; align-items: center; justify-content: center;
transition: opacity .5s var(--ease-soft), filter .5s var(--ease-soft), transform .8s var(--ease);
}
.equation__math { display: inline-block; white-space: nowrap; }
.equation__formula sub, .equation__formula sup { font-size: .55em; }
.equation__formula.is-swapping { opacity: 0; filter: blur(8px); transform: translateY(8px); }
.equation__formula [data-t] { transition: color .3s var(--ease-soft), text-shadow .3s var(--ease-soft); }
.equation__formula [data-t].is-lit { color: var(--accent); text-shadow: 0 0 1.25rem rgba(var(--accent-rgb), .45); }
/* Symbol labels on leader lines (placed by main.js) */
@media (min-width: 720px) { .equation__formula { padding-block: 3.75rem; margin-block: 0.25rem 0; } }
.eq-notes { position: absolute; inset: 0; pointer-events: none; }
.eq-note {
position: absolute; white-space: nowrap; line-height: 1;
font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2);
opacity: 0; animation: eq-note-in .7s var(--ease) forwards; animation-delay: calc(.2s + var(--i) * 80ms);
transition: color .3s var(--ease-soft);
}
.eq-note.is-lit { color: var(--accent); }
.eq-lead {
position: absolute; width: 1px; margin-left: -0.5px;
background: linear-gradient(180deg, rgba(var(--accent-rgb), .75), rgba(var(--accent-rgb), .15));
transform-origin: top; transform: scaleY(0); animation: eq-lead-in .6s var(--ease) forwards; animation-delay: calc(.1s + var(--i) * 80ms);
}
.eq-lead.is-up { background: linear-gradient(0deg, rgba(var(--accent-rgb), .75), rgba(var(--accent-rgb), .15)); transform-origin: bottom; }
.eq-lead::before { content: ""; position: absolute; left: -1.5px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.eq-lead.is-up::before { top: auto; bottom: -2px; }
.eq-lead.is-lit { background: var(--accent); }
@keyframes eq-note-in { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
@keyframes eq-lead-in { to { transform: scaleY(1); } }
/* Narrow screens: the same labels as a legend */
.eq-legend { display: none; }
@media (max-width: 719.98px) {
.eq-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.25rem; max-width: 30rem; margin: 0 auto 1.25rem; }
.eq-legend li { display: inline-flex; align-items: baseline; gap: 0.5rem; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.eq-legend__sym { font-family: var(--font-math); font-size: 1.125rem; letter-spacing: 0; text-transform: none; color: var(--accent); }
.eq-legend__sym sub, .eq-legend__sym sup { font-size: .6em; }
}
.equation__caption { color: var(--text-2); font-size: var(--fs-sm); max-width: 50ch; margin-inline: auto; min-height: 3.4em; transition: opacity .5s var(--ease-soft); }
.equation__caption.is-swapping { opacity: 0; }
.equation__nav { display: flex; justify-content: center; gap: 0.625rem; margin-top: 1.5rem; }
.equation__dot { position: relative; width: 1.75rem; height: 2px; border-radius: 2px; background: var(--text-3); transition: background-color .4s, width .6s var(--ease); }
.equation__dot::after { content: ""; position: absolute; inset: -0.875rem -0.25rem; }
.equation__dot:hover { background: var(--text-2); }
.equation__dot[aria-current="true"] { background: var(--accent); width: 2.75rem; }
/* Prev / next: quiet circles at the section edges */
.equation__arrow {
position: absolute; top: 50%; z-index: 1; width: 3.25rem; height: 3.25rem; margin-top: -1.625rem;
display: grid; place-items: center; border-radius: 50%;
border: 1px solid var(--line-strong); color: var(--text-2); background: rgba(4, 6, 12, .4);
transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .6s var(--ease);
}
.equation__arrow .i { width: 1rem; height: 1rem; transition: transform .6s var(--ease); }
.equation__arrow--prev { left: max(var(--gutter), calc(50% - 32rem)); }
.equation__arrow--next { right: max(var(--gutter), calc(50% - 32rem)); }
.equation__arrow--prev .i { transform: scaleX(-1); }
.equation__arrow:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.equation__arrow--prev:hover .i { transform: scaleX(-1) translateX(3px); }
.equation__arrow--next:hover .i { transform: translateX(3px); }
.equation__arrow:active { transform: scale(.94); }
@media (max-width: 720px) {
.equation__arrow { top: auto; bottom: clamp(4rem, 8vw, 7rem); margin: 0 0 -1.125rem; width: 2.5rem; height: 2.5rem; }
.equation__arrow--prev { left: var(--gutter); }
.equation__arrow--next { right: var(--gutter); }
}
@media (max-width: 640px) {
.equation__formula { font-size: clamp(1.5rem, 7.4vw, 2.3rem); min-height: 2.6em; }
.equation__math { white-space: normal; }
}
.cta { position: relative; text-align: center; overflow: hidden; }
.cta__orbit { position: absolute; left: 50%; top: 50%; width: min(70rem, 150vw); aspect-ratio: 1; translate: -50% -50%; z-index: -1; opacity: .5; color: var(--line-strong); pointer-events: none; }
.cta__orbit .spin { transform-origin: 200px 200px; animation: spin 90s linear infinite; }
.cta__title { max-width: 16ch; margin: 1.5rem auto 0; }
.cta .lead { margin: 1.5rem auto 0; }
.cta .btn-row { justify-content: center; margin-top: 2.5rem; }
@keyframes spin { to { transform: rotate(360deg); } }
/* 9. Page heroes — each page gets its own instrument ---------------------- */
.page-hero {
position: relative; isolation: isolate; overflow-x: clip; /* the photo may bleed downward */
padding: calc(var(--header-h) + clamp(3rem, 7vw, 6rem)) 0 clamp(3rem, 6vw, 5rem);
}
/* A faint nebula glow instead of repeating the photo on every page */
.page-hero::before {
content: ""; position: absolute; inset: -20% -10% 0; z-index: -2; pointer-events: none;
background:
radial-gradient(40% 55% at var(--gx, 78%) var(--gy, 30%), rgba(var(--accent-rgb), .13), transparent 70%),
radial-gradient(35% 45% at calc(var(--gx, 78%) - 18%) calc(var(--gy, 30%) + 25%), rgba(160,130,255,.08), transparent 70%);
}
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.page-hero .h1 { margin-top: 1.375rem; max-width: 14ch; }
.page-hero .lead { margin-top: 1.5rem; }
.page-hero__meta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; line-height: 1.6; letter-spacing: .12em; }
.page-hero__meta b { color: var(--accent); font-weight: 400; margin-left: 0.5em; }
.page-hero__visual { position: relative; min-height: 18rem; display: grid; place-items: center; }
@media (max-width: 900px) {
.page-hero__grid { grid-template-columns: minmax(0, 1fr); }
.page-hero__visual { min-height: 0; }
}
/* Instrument panel: every hero diagram sits on its own dark glass plate,
so it reads clearly over any photograph */
.instrument, .countdown, .scope {
background: rgba(6, 9, 17, 0.8);
-webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%);
box-shadow: 0 2.5rem 5rem -2rem rgba(0, 0, 0, .85);
}
.instrument { position: relative; width: min(100%, 27rem); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); }
.instrument--wide { width: min(100%, 34rem); }
.instrument__bar {
display: flex; justify-content: space-between; align-items: center; gap: 1rem;
padding: 0.875rem 1.125rem; border-bottom: 1px solid var(--line);
font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3);
}
.instrument__bar > :last-child { color: var(--accent); white-space: nowrap; }
.instrument__status { display: inline-flex; align-items: center; gap: 0.5rem; }
.instrument__status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: pulse 2.4s var(--ease-soft) infinite; }
.instrument__body { padding: clamp(1.25rem, 3vw, 2rem); }
.instrument__body > svg { width: 100%; height: auto; margin: 0; }
@media (max-width: 900px) { .instrument { margin-inline: auto; } }
/* About — orrery */
.orrery { width: min(100%, 30rem); aspect-ratio: 1; color: var(--text-2); }
.orrery text { font-family: var(--font-mono); font-size: 9px; letter-spacing: .18em; fill: var(--text-3); text-transform: uppercase; }
/* Events — "next up" strip under the hero, with a live countdown */
.nextup {
display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1.75rem;
margin-top: clamp(2rem, 4vw, 3.25rem); padding: 0.875rem 1.5rem;
border: 1px solid var(--line-strong); border-radius: 999px;
background: rgba(4, 6, 12, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
transition: border-color .4s var(--ease-soft);
}
.nextup[hidden] { display: none; }
.nextup:hover { border-color: rgba(var(--accent-rgb), .5); }
.nextup__label { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--signal); white-space: nowrap; }
.nextup__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: pulse 2s var(--ease-soft) infinite; }
.nextup__event { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.875rem; min-width: 0; }
.nextup__event strong { font-weight: 500; transition: color .3s; }
.nextup__event small { color: var(--text-2); font-size: var(--fs-sm); }
.nextup:hover .nextup__event strong { color: var(--accent); }
.nextup__clock { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nextup__clock b { font-weight: 400; }
.nextup__clock i { font-style: normal; color: var(--text-3); margin-left: 0.1em; }
.nextup:hover .i-arrow { transform: translateX(4px); }
@media (max-width: 760px) {
.nextup { border-radius: var(--radius-lg); padding: 1rem 1.125rem; }
.nextup__clock { margin-left: 0; order: 3; }
.nextup .i-arrow { margin-left: auto; order: 4; }
}
/* Events — the black hole (assets/js/blackhole.js). The canvas lives inside
the hero photo, so it shares its fade and its readability overlay. */
.bh-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 2.2s var(--ease-soft); }
.bh-on .bh-canvas { opacity: 1; }
.bh-active .page-hero__bg { animation: none; opacity: 1; }
/* A lighter veil on the right, so the render isn't dimmed; the text side keeps its contrast */
.bh-active .page-hero__bg::after {
background:
linear-gradient(90deg, rgba(4,6,12,.94) 0%, rgba(4,6,12,.74) 36%, rgba(4,6,12,.12) 62%, rgba(4,6,12,.18) 100%),
linear-gradient(180deg, rgba(4,6,12,.5) 0%, transparent 30%);
}
.bh-anchor { min-height: clamp(22rem, 33vw, 31rem); align-self: stretch; }
.bh-credit { display: none; }
.bh-on .bh-credit { display: inline; }
.bh-on .photo-credit { display: none; }
@media (max-width: 900px) { .bh-anchor { display: none; } }
.bh-toggle {
position: absolute; left: 50%; bottom: -0.5rem; transform: translateX(-50%); z-index: 2;
display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.5rem 1rem;
border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(4, 6, 12, .45);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-2);
opacity: 0; transition: opacity 1s var(--ease-soft) .8s, color .3s, border-color .3s;
}
.bh-toggle[hidden] { display: none; }
.bh-on .bh-toggle { opacity: 1; }
.bh-toggle:hover, .bh-toggle[aria-pressed="true"] { color: var(--text); border-color: rgba(var(--accent-rgb), .6); }
.bh-toggle__dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid currentColor; position: relative; }
.bh-toggle[aria-pressed="true"] .bh-toggle__dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 8px var(--accent); }
/* Physics labels: each one is pinned at (--x, --y) Schwarzschild radii from
the hole's centre; blackhole.js sets --bh-rs and the ring sizes to match.
A dot marks the spot, a short leader rises (or drops) from it, and the text
sits beside the leader's end — to the right, or to the left with --left. */
.bh-labels { position: absolute; inset: 0; pointer-events: none; }
.bh-labels[hidden] { display: none; }
.bh-ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); border: 1px dashed rgba(var(--accent-rgb), .75); }
.bh-ring--shadow { width: calc(2 * var(--bh-shadow, 60px)); height: calc(2 * var(--bh-shadow, 60px)); }
.bh-ring--einstein { width: calc(2 * var(--bh-einstein, 200px)); height: calc(2 * var(--bh-einstein, 200px)); border-color: rgba(255, 255, 255, .3); }
.bh-label {
position: absolute; width: 0; height: 0;
left: calc(50% + var(--x, 0) * var(--bh-rs, 20px)); top: calc(50% + var(--y, 0) * var(--bh-rs, 20px));
animation: bh-label-in .6s var(--ease-soft) both;
}
.bh-label--einstein { left: calc(50% + 0.7071 * var(--bh-einstein, 200px)); top: calc(50% + 0.7071 * var(--bh-einstein, 200px)); }
.bh-label i { position: absolute; left: -3.5px; top: -3.5px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(4, 6, 12, .55), 0 0 10px var(--accent); }
.bh-label::before { content: ""; position: absolute; left: 0; width: 1px; height: 1.6rem; background: rgba(var(--accent-rgb), .65); }
.bh-label--up::before { bottom: 5px; }
.bh-label--down::before { top: 5px; }
.bh-label__text {
position: absolute; left: 0.6rem; width: 11rem;
font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--text);
text-shadow: 0 1px 2px rgba(4, 6, 12, .95), 0 0 14px rgba(4, 6, 12, .95);
}
.bh-label--up .bh-label__text { bottom: 1.1rem; }
.bh-label--down .bh-label__text { top: 1.1rem; }
.bh-label--left .bh-label__text { left: auto; right: 0.6rem; text-align: right; }
.bh-label__text small { display: block; margin-top: 0.3rem; font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0; text-transform: none; color: var(--text-2); line-height: 1.4; }
@keyframes bh-label-in { from { opacity: 0; } to { opacity: 1; } }
.corner-ticks::after {
content: ""; position: absolute; inset: -1px; pointer-events: none; border-radius: inherit;
--t: 0.875rem; --c: rgba(var(--accent-rgb), .7);
background:
linear-gradient(var(--c), var(--c)) top left / var(--t) 1px no-repeat, linear-gradient(var(--c), var(--c)) top left / 1px var(--t) no-repeat,
linear-gradient(var(--c), var(--c)) top right / var(--t) 1px no-repeat, linear-gradient(var(--c), var(--c)) top right / 1px var(--t) no-repeat,
linear-gradient(var(--c), var(--c)) bottom left / var(--t) 1px no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 1px var(--t) no-repeat,
linear-gradient(var(--c), var(--c)) bottom right / var(--t) 1px no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 1px var(--t) no-repeat;
}
/* Team — mission patch */
.patch { width: min(100%, 27rem); margin: 0; display: grid; justify-items: center; gap: 1.5rem; }
.patch svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 1.5rem 3rem rgba(0, 0, 0, .7)); }
.patch__stitch { stroke: rgba(var(--accent-rgb), .55); stroke-width: 1.2; stroke-dasharray: 3 3.2; }
.patch__track { stroke: rgba(var(--accent-rgb), .28); stroke-dasharray: 1 5; }
.patch__orbit { fill: none; stroke: rgba(var(--accent-rgb), .45); }
.patch__orbit--2 { stroke: rgba(255, 255, 255, .16); stroke-dasharray: 2 4; }
.patch__sat { fill: var(--accent); }
.patch__text { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 3.2px; text-transform: uppercase; fill: var(--text-2); }
.patch__star { fill: var(--accent); }
.patch__est { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2.4px; fill: var(--text-3); }
.patch__m { cursor: pointer; outline: none; }
.patch__node { transition: transform .5s var(--ease); animation: patch-in .8s var(--ease) both; animation-delay: calc(600ms + var(--i) * 70ms); }
.patch__node circle { fill: #0b0e19; stroke: rgba(255, 255, 255, .45); stroke-width: 1; transition: fill .3s, stroke .3s; }
.patch__node text { font-family: var(--font-mono); font-size: 10px; letter-spacing: .5px; fill: var(--text); pointer-events: none; }
.patch__m--grad .patch__node circle { stroke: var(--accent); }
.patch__m--grad .patch__node text { fill: var(--accent); }
/* An open seat: dashed ring and a plus, on the patch and in the list */
.patch__m--open .patch__node circle { stroke-dasharray: 3 3; fill: rgba(var(--accent-rgb), .06); }
.patch__m--open .patch__node text { font-size: 15px; }
.patch__m:is(:hover, :focus-visible, .is-active) .patch__node { transform: scale(1.18); }
.patch__m:is(:hover, :focus-visible, .is-active) .patch__node circle { fill: rgba(var(--accent-rgb), .22); stroke: var(--accent); }
.patch__m:focus-visible .patch__node circle { stroke-width: 2; }
@keyframes patch-in { from { opacity: 0; transform: scale(.4); } }
.patch__tip { min-height: 3.2rem; text-align: center; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-2); }
.patch__tip strong { display: block; color: var(--text); font-weight: 500; }
@media (max-width: 900px) { .patch { width: min(100%, 22rem); margin-inline: auto; } }
/* Side by side with the hero text: hang the caption below the circle so the
text centres on the circle itself, whatever the length of the title */
@media (min-width: 901px) {
.patch { position: relative; }
.patch__tip { position: absolute; top: calc(100% + 1.5rem); inset-inline: 0; }
.page-hero__grid:has(.patch) { margin-bottom: 4.75rem; } /* room for the hanging caption */
}
/* Resources — periodic table. Columns are groups; tiles link out */
.pt__groups, .pt__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.pt__groups { margin-bottom: 0.75rem; }
.pt__groups a {
display: flex; align-items: baseline; gap: 0.5rem; padding-bottom: 0.5rem;
border-bottom: 1px solid var(--line);
font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3);
transition: color .3s, border-color .3s;
}
.pt__groups i { font-style: normal; color: var(--accent); letter-spacing: .04em; }
.pt__el {
position: relative; aspect-ratio: 1; display: flex; flex-direction: column; justify-content: space-between;
padding: 0.5rem 0.625rem 0.5625rem; border-radius: 0.5rem;
border: 1px solid rgba(var(--accent-rgb), .22);
background: linear-gradient(160deg, rgba(var(--accent-rgb), var(--t, .1)), rgba(var(--accent-rgb), .015));
transition: border-color .35s var(--ease-soft), background-color .35s, transform .5s var(--ease), box-shadow .5s var(--ease), opacity .35s;
animation: pt-in .9s var(--ease) both; animation-delay: calc(500ms + var(--i) * 45ms);
}
.pt__el[data-g="1"] { --t: .16; } .pt__el[data-g="2"] { --t: .11; } .pt__el[data-g="3"] { --t: .07; } .pt__el[data-g="4"] { --t: .035; }
.pt__n { font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1; color: var(--text-3); }
.pt__sym { align-self: center; font-size: clamp(1.35rem, 2.2vw, 1.9rem); font-weight: 300; line-height: 1; letter-spacing: -0.02em; color: var(--text); }
.pt__name { font-family: var(--font-mono); font-size: 0.625rem; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt__el:hover, .pt__el:focus-visible {
border-color: var(--accent); transform: translateY(-3px); outline: none;
box-shadow: 0 0.75rem 2rem -0.75rem rgba(var(--accent-rgb), .55), inset 0 0 0 1px rgba(var(--accent-rgb), .35);
}
.pt__el:hover .pt__sym, .pt__el:focus-visible .pt__sym { color: var(--accent); }
/* Hovering a group lights its column; hovering a tile lights its group */
.pt:has([data-g="1"]:hover) :is(.pt__el, .pt__groups a):not([data-g="1"]),
.pt:has([data-g="2"]:hover) :is(.pt__el, .pt__groups a):not([data-g="2"]),
.pt:has([data-g="3"]:hover) :is(.pt__el, .pt__groups a):not([data-g="3"]),
.pt:has([data-g="4"]:hover) :is(.pt__el, .pt__groups a):not([data-g="4"]) { opacity: .35; }
.pt:has([data-g="1"]:hover) .pt__groups [data-g="1"],
.pt:has([data-g="2"]:hover) .pt__groups [data-g="2"],
.pt:has([data-g="3"]:hover) .pt__groups [data-g="3"],
.pt:has([data-g="4"]:hover) .pt__groups [data-g="4"] { color: var(--text); border-color: var(--accent); }
@keyframes pt-in { from { opacity: 0; transform: translateY(6px) scale(.96); } }
@media (max-width: 600px) {
.pt__groups a { flex-direction: column; gap: 0.125rem; font-size: 0.5625rem; letter-spacing: .06em; }
.pt__el { aspect-ratio: auto; min-height: 4.75rem; gap: 0.25rem; padding: 0.375rem 0.375rem 0.4375rem; }
.pt__name { font-size: 0.5rem; letter-spacing: 0; white-space: normal; text-overflow: clip; }
}
/* News — oscilloscope */
.scope { position: relative; width: min(100%, 34rem); aspect-ratio: 16 / 9; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); overflow: hidden; }
.scope canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.scope__readout { position: absolute; left: 1.125rem; right: 1.125rem; bottom: 0.875rem; display: flex; justify-content: space-between; gap: 1rem; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.scope__readout b { color: var(--accent); font-weight: 400; }
/* Join — orbit insertion */
.insertion { width: min(100%, 28rem); aspect-ratio: 1; color: var(--text-2); }
.stat-trio { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0 clamp(1.5rem, 4vw, 3rem); margin-top: 2.25rem; }
.stat-trio div { border-left: 1px solid var(--line-strong); padding-left: 1rem; }
.stat-trio b { display: block; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 300; line-height: 1.1; letter-spacing: -0.03em; }
.stat-trio span { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); }
/* 10. Events -------------------------------------------------------------- */
.event + .event { border-top: 1px solid var(--line); }
.event {
position: relative;
display: grid; grid-template-columns: 7rem minmax(0, 1fr) 18rem auto; gap: clamp(1rem, 2.5vw, 2.25rem); align-items: center;
padding: 1.625rem 0.5rem;
transition: background-color .5s var(--ease-soft);
}
.event::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease); }
.event:hover { background: linear-gradient(90deg, rgba(var(--accent-rgb), .04), transparent 70%); }
.event:hover::before { transform: scaleX(1); }
.event:target { background: linear-gradient(90deg, rgba(var(--accent-rgb), .07), transparent 70%); }
.event__date { display: flex; align-items: baseline; gap: 0.625rem; }
.event__day { font-size: 2.5rem; font-weight: 200; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.event__mon { color: var(--text-2); line-height: 1.5; }
.event__mon small { display: block; color: var(--text-3); font-size: var(--fs-micro); }
.event__title { font-size: 1.25rem; font-weight: 400; letter-spacing: -0.01em; }
.event__desc { margin-top: 0.375rem; max-width: 62ch; }
.event__meta { font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.8; color: var(--text-3); }
.event__meta span { display: flex; gap: 0.5rem; align-items: flex-start; }
.event__meta .icon { margin-top: 0.3rem; }
.event__actions { display: flex; gap: 0.5rem; justify-self: end; }
.event__tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.625rem; }
.event.is-past .event__day, .event.is-past .event__title { color: var(--text-2); }
.event.is-past .event__desc { color: var(--text-3); }
.tag {
display: inline-flex; align-items: center; gap: 0.4375rem; height: 1.5rem; padding-inline: 0.625rem; border-radius: 999px;
border: 1px solid var(--line-strong);
font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); white-space: nowrap;
}
.tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); }
.tag--next { border-color: rgba(255,207,143,.5); color: var(--signal); }
.tag--next::before { background: var(--signal); }
.icon-btn {
width: 2.5rem; height: 2.5rem; display: inline-grid; place-items: center; border-radius: 50%;
border: 1px solid var(--line-strong); color: var(--text-2);
transition: background-color .4s var(--ease), color .4s, border-color .4s;
}
.icon-btn:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
@media (max-width: 1100px) {
.event { grid-template-columns: 5.5rem minmax(0, 1fr) auto; row-gap: 0.75rem; }
.event__meta { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.event__actions { grid-row: 1 / span 2; grid-column: 3; align-self: center; }
}
@media (max-width: 600px) {
.event { grid-template-columns: minmax(0, 1fr) auto; padding: 1.375rem 0; gap: 0.625rem 1rem; }
.event__date { grid-column: 1; grid-row: 1; }
.event__day { font-size: 2rem; }
.event__actions { grid-column: 2; grid-row: 1; }
.event__body, .event__meta { grid-column: 1 / -1; grid-row: auto; }
.event__meta { display: block; }
}
/* Filter chips: wrap on desktop, a swipeable row on phones */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
@media (max-width: 720px) {
.filters {
flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
-webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.filters::-webkit-scrollbar { display: none; }
.chip { flex-shrink: 0; }
}
.chip {
height: 2.375rem; padding-inline: 1rem; border-radius: 999px; border: 1px solid var(--line); color: var(--text-2);
font-size: 0.72rem; font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase;
transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.chip:hover { border-color: var(--line-strong); color: var(--text); }
.chip[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
[data-events-full] { transition: opacity .25s var(--ease-soft); }
[data-events-full].is-swapping { opacity: 0; }
.month-label { display: flex; align-items: center; gap: 1rem; margin: 3rem 0 0.5rem; }
.month-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent 70%); }
.month-label:first-child { margin-top: 0; }
.empty { padding: 3rem 0; color: var(--text-3); font-size: var(--fs-sm); }
.sky { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem; align-items: center; padding: 1.5rem 1.75rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.sky__moon { width: 4rem; height: 4rem; }
.sky__value { font-size: 1.15rem; margin-top: 0.25rem; }
.sky__note { font-size: var(--fs-sm); color: var(--text-2); margin-top: 0.25rem; }
/* Full-width strip version (Resources → Observing): one line, under the list */
.sky--strip { margin-top: clamp(1.75rem, 3vw, 2.5rem); padding: 1rem 1.5rem; gap: 1.25rem; }
.sky--strip .sky__moon { width: 2.75rem; height: 2.75rem; }
.sky--strip > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1.75rem; }
.sky--strip :is(.sky__value, .sky__note) { margin-top: 0; }
.sky--strip .sky__note { margin-left: auto; }
@media (max-width: 760px) { .sky--strip > div { display: block; } .sky--strip :is(.sky__value, .sky__note) { margin-top: 0.25rem; } }
/* Add-to-calendar popover */
.cal { position: relative; }
.cal[open] { z-index: 5; }
.cal > summary { list-style: none; cursor: pointer; }
.cal > summary::-webkit-details-marker { display: none; }
.cal[open] > summary { background: var(--text); color: var(--bg); border-color: var(--text); }
.cal__menu {
position: absolute; right: 0; top: calc(100% + 0.5rem); min-width: 14rem; padding: 0.375rem;
border: 1px solid var(--line-strong); border-radius: 0.75rem; background: #0b0e18;
box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .55);
animation: fade-down .4s var(--ease);
}
.cal__menu a, .cal__menu button {
display: flex; width: 100%; padding: 0.625rem 0.75rem; border-radius: 0.5rem;
font-size: 0.8125rem; color: var(--text-2); text-align: left; white-space: nowrap;
transition: background-color .25s, color .25s;
}
.cal__menu a:hover, .cal__menu button:hover { background: var(--surface-hover); color: var(--text); }
.archive-more > summary { list-style: none; cursor: pointer; margin: 1.75rem 0 0.5rem; }
.archive-more > summary::-webkit-details-marker { display: none; }
.archive-more[open] > summary { margin-bottom: 0; }
/* Home: a lighter events preview */
[data-events-upcoming] .event__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 1101px) {
.split :is([data-events-upcoming], [data-events-past]) .event { grid-template-columns: 6rem minmax(0, 1fr) auto; row-gap: 0.625rem; }
.split :is([data-events-upcoming], [data-events-past]) .event__meta { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.split :is([data-events-upcoming], [data-events-past]) .event__actions { grid-row: 1 / span 2; grid-column: 3; }
}
/* 11. News ---------------------------------------------------------------- */
/* News card: rows are shared across the grid (subgrid), so media, dates,
titles and excerpts line up and every card is the same height */
.post {
display: flex; flex-direction: column;
border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden;
transition: border-color .6s var(--ease), background-color .6s var(--ease), transform .7s var(--ease);
}
@supports (grid-template-rows: subgrid) {
.post { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; }
}
.post:hover { border-color: var(--line-strong); background: var(--surface-hover); transform: translateY(-4px); }
.post__media { aspect-ratio: 16 / 10; overflow: hidden; background: #080b15; border-bottom: 1px solid var(--line); }
.post__media svg { width: 100%; height: 100%; transition: transform 1.2s var(--ease); }
.post:hover .post__media svg { transform: scale(1.04); }
.post__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.875rem; align-items: center; padding: 1.375rem 1.5rem 0.75rem; }
.post h3 { padding-inline: 1.5rem; font-size: 1.25rem; font-weight: 400; letter-spacing: -0.012em; line-height: 1.35; text-wrap: balance; transition: color .3s; }
.post:hover h3 { color: var(--accent); }
.post p { padding: 0.625rem 1.5rem 1.625rem; }
@media (max-width: 900px) and (min-width: 601px) {
.grid--3[data-news-latest] > :nth-child(3) { display: none; }
}
.article + .article { border-top: 1px solid var(--line); }
.article > summary {
list-style: none; cursor: pointer;
display: grid; grid-template-columns: 11.5rem minmax(0, 1fr) 2.5rem; gap: 0.5rem clamp(1rem, 3vw, 2.5rem); align-items: start;
padding: 1.75rem 0;
}
.article > summary::-webkit-details-marker { display: none; }
.article > summary > .article__date { grid-column: 1; grid-row: 1 / span 2; padding-top: 0.375rem; line-height: 1.7; }
.article > summary > .article__title { grid-column: 2; grid-row: 1; }
.article > summary > .article__excerpt { grid-column: 2; grid-row: 2; }
.article > summary > .article__toggle { grid-column: 3; grid-row: 1 / span 2; }
.article__title { display: block; font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 300; letter-spacing: -0.015em; line-height: 1.3; transition: color .3s; }
.article > summary:hover .article__title { color: var(--accent); }
.article__excerpt { display: block; font-size: var(--fs-sm); color: var(--text-2); }
.article__toggle { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; transition: transform .6s var(--ease), background-color .4s; }
.article[open] .article__toggle { transform: rotate(45deg); background: var(--surface-hover); }
.article__body { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr) 2.5rem; gap: clamp(1rem, 3vw, 2.5rem); padding-bottom: 2.5rem; }
.article__body > div { grid-column: 2; }
.article__body p { color: var(--text-2); line-height: 1.8; max-width: 68ch; }
.article__body p + p { margin-top: 1em; }
.article[open] .article__body { animation: fade-down .6s var(--ease); }
@keyframes fade-down { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 720px) {
.article > summary, .article__body { grid-template-columns: minmax(0, 1fr) 2.5rem; }
.article > summary > .article__date { grid-column: 1 / -1; grid-row: 1; padding: 0; }
.article > summary > .article__title { grid-row: 2; grid-column: 1; }
.article > summary > .article__excerpt { grid-row: 3; grid-column: 1; }
.article > summary > .article__toggle { grid-row: 2 / span 2; grid-column: 2; }
.article__body > div { grid-column: 1; }
}
/* 12. Team & about -------------------------------------------------------- */
.person { align-items: flex-start; }
.person__head { display: flex; align-items: flex-start; gap: 1.125rem; margin-bottom: 1.25rem; }
.person__avatar {
position: relative; width: 3.75rem; height: 3.75rem; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
border: 1px solid var(--line-strong);
font-size: 1rem; font-weight: 400; letter-spacing: 0.06em; color: var(--text);
background: radial-gradient(circle at 30% 25%, rgba(var(--accent-rgb), .2), rgba(var(--accent-rgb), .04) 55%, transparent 75%);
}
.person__avatar::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px dashed rgba(255,255,255,.14); }
.person__role { color: var(--accent); margin-bottom: 0.25rem; letter-spacing: .1em; }
.person__name { font-size: var(--fs-h4); font-weight: 400; letter-spacing: -0.012em; line-height: 1.25; }
.person__program { font-size: 0.8125rem; color: var(--text-3); margin-top: 0.125rem; }
.person.is-lit { border-color: rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .04); }
.card.person { transition: border-color .5s var(--ease), background-color .5s var(--ease); }
.people-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; }
.people-row .who { display: flex; align-items: center; gap: 1rem; transition: opacity .3s; }
.people-row .person__avatar { width: 3.25rem; height: 3.25rem; font-size: .9rem; margin: 0; }
.people-row .who span { font-size: 1rem; }
.people-row .who small { display: block; color: var(--text-3); font-size: 0.8125rem; }
.people-row .who--open .person__avatar { border-style: dashed; border-color: rgba(var(--accent-rgb), .6); background: none; color: var(--accent); font-size: 1.375rem; font-weight: 300; }
.people-row .who--open .person__avatar::after { display: none; }
.people-row .who.is-lit .person__avatar { border-color: var(--accent); box-shadow: 0 0 1.5rem rgba(var(--accent-rgb), .25); }
@media (max-width: 480px) { .people-row { grid-template-columns: minmax(0, 1fr); } }
/* Timeline: vertical on small screens, a horizontal world-line on wide ones */
.timeline { position: relative; border-left: 1px solid var(--line); margin-left: 0.375rem; }
.timeline__item { position: relative; padding: 0 0 2.5rem 2.25rem; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before { content: ""; position: absolute; left: -4px; top: 0.375rem; width: 7px; height: 7px; border-radius: 50%; background: var(--bg); border: 1px solid var(--text-2); }
.timeline__item.is-now::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px var(--accent); }
.timeline__item.is-now .timeline__year { color: var(--accent); }
.timeline__item h3 { font-size: var(--fs-h4); font-weight: 400; margin: 0.375rem 0; }
.timeline__item p { max-width: 56ch; }
@media (min-width: 1200px) {
.timeline--h { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.75rem; border-left: 0; border-top: 1px solid var(--line); margin: 0; padding-top: 2.25rem; }
.timeline--h .timeline__item { padding: 0; }
.timeline--h .timeline__item::before { left: 0; top: calc(-2.25rem - 4px); }
.timeline--h .timeline__item.is-now::after { content: ""; position: absolute; left: 0; right: -1.75rem; top: calc(-2.25rem - 1px); height: 1px; background: linear-gradient(90deg, var(--accent), transparent); }
}
.values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.value { padding: 2rem clamp(1rem, 2vw, 1.75rem) 0.5rem 0; }
.value + .value { border-left: 1px solid var(--line); padding-left: clamp(1rem, 2vw, 1.75rem); }
.value__sym { display: block; font-family: var(--font-math); font-size: clamp(3rem, 5vw, 4.5rem); line-height: 1; color: var(--accent); font-style: italic; margin-bottom: 1.5rem; }
.value h3 { font-size: var(--fs-h4); font-weight: 500; margin-bottom: 0.5rem; }
@media (max-width: 1024px) {
.values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.value:nth-child(3) { border-left: 0; padding-left: 0; }
.value:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 1.5rem; }
}
@media (max-width: 560px) {
.values { grid-template-columns: minmax(0, 1fr); }
.value { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1rem; padding: 1.5rem 0 !important; border-left: 0 !important; margin-top: 0 !important; }
.value + .value { border-top: 1px solid var(--line); }
.value__sym { font-size: 2.25rem; margin: 0; }
}
/* A single rounded plate split by 1px gaps, like the resources directory */
.offer-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.offer { padding: clamp(1.5rem, 2.6vw, 2.25rem); background: var(--bg-2); transition: background-color .5s var(--ease-soft); }
.offer:hover { background: #0c1020; }
.offer__n { color: var(--text-3); }
.offer h3 { margin: 1.75rem 0 0.5rem; font-size: var(--fs-h4); font-weight: 400; letter-spacing: -0.01em; }
@media (max-width: 900px) { .offer-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .offer-list { grid-template-columns: minmax(0, 1fr); } .offer h3 { margin-top: 1rem; } }
/* 13. Resources, FAQ, join ------------------------------------------------ */
.res-group + .res-group { margin-top: clamp(4rem, 7vw, 6.5rem); }
.res + .res { border-top: 1px solid var(--line); }
.res {
display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) auto; gap: 1.5rem; align-items: center;
padding: 1.25rem 0.5rem;
transition: background-color .5s var(--ease-soft);
}
.res > span:not(.res__go) { transition: transform .6s var(--ease); }
a.res:hover { background: var(--surface); }
a.res:hover > span:not(.res__go) { transform: translateX(8px); }
.res__name { font-size: 1.0625rem; }
.res__go { color: var(--text-3); transition: color .3s; }
.res__go .i { width: 1rem; height: 1rem; }
a.res:hover .res__go { color: var(--accent); }
a.res:hover .i-out { transform: translate(2px, -2px); }
@media (max-width: 720px) {
.res { grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1rem; padding-inline: 0; }
.res__desc { grid-column: 1; grid-row: 2; }
.res__go { grid-row: 1 / span 2; grid-column: 2; }
}
.faq details + details { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1.5rem; align-items: center; padding: 1.375rem 0; font-size: 1.0625rem; transition: color .3s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq .plus { position: relative; width: 0.875rem; height: 0.875rem; flex-shrink: 0; }
.faq .plus::before, .faq .plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; }
.faq .plus::after { transform: rotate(90deg); transition: transform .6s var(--ease); }
.faq details[open] .plus::after { transform: rotate(0deg); }
.faq details > div { padding: 0 3rem 1.75rem 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.75; }
.faq details[open] > div { animation: fade-down .6s var(--ease); }
@media (max-width: 600px) { .faq details > div { padding-right: 0; } }
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.step { counter-increment: step; display: flex; flex-direction: column; align-items: flex-start; padding: 1.75rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.step::before { content: "0" counter(step); font-family: var(--font-mono); font-size: 2.25rem; line-height: 1; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1px var(--accent); }
.step h3 { font-size: 1.25rem; font-weight: 400; margin: 1.25rem 0 0.5rem; }
.step p { max-width: 34ch; margin-bottom: 1.5rem; }
.step .link { margin-top: auto; }
@media (max-width: 600px) { .steps { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 601px) and (max-width: 900px) { .step { padding: 1.25rem; } .step h3 { font-size: 1.1rem; } }
.checklist { display: grid; gap: 0.875rem; padding: 0; list-style: none; }
.checklist li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 0.875rem; font-size: 1rem; color: var(--text-2); }
.checklist li::before { content: ""; width: 0.875rem; height: 1px; background: var(--accent); margin-top: 0.8rem; }
.conduct { counter-reset: c; display: grid; padding: 0; list-style: none; }
.conduct li { counter-increment: c; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding: 1.125rem 0; font-size: 1rem; color: var(--text-2); }
.conduct li::before { content: counter(c, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--fs-label); color: var(--accent); padding-top: 0.25rem; }
.conduct li + li { border-top: 1px solid var(--line); }
.conduct strong { color: var(--text); font-weight: 500; }
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.contact-grid > div { padding: 2rem 1.5rem 0.5rem 0; }
.contact-grid > div + div { border-left: 1px solid var(--line); padding-left: 1.5rem; }
.contact-grid dt { margin-bottom: 0.625rem; }
.contact-grid dd { font-size: 1rem; }
@media (max-width: 760px) {
.contact-grid { grid-template-columns: minmax(0, 1fr); }
.contact-grid > div { padding: 1.5rem 0; }
.contact-grid > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
}
/* 14. Footer -------------------------------------------------------------- */
.site-footer { position: relative; isolation: isolate; padding: clamp(3.5rem, 7vw, 6rem) 0 2rem; overflow: hidden; background: linear-gradient(180deg, transparent, rgba(7,10,19,.9)); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); }
.footer-col__title { margin-bottom: 1.25rem; }
.footer-grid ul { list-style: none; padding: 0; display: grid; gap: 0.625rem; }
.footer-grid li { font-size: var(--fs-sm); color: var(--text-2); }
.footer-grid li a { transition: color .3s; }
.footer-grid li a:hover { color: var(--text); }
.footer-brand img { height: 1.375rem; width: auto; margin-bottom: 1.375rem; }
.footer-brand p { font-size: var(--fs-sm); color: var(--text-2); max-width: 38ch; }
.footer-ack { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.75rem; border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--text-3); line-height: 1.7; }
.footer-ack p { max-width: 90ch; }
.footer-bottom { margin-top: 1.75rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .08em; color: var(--text-3); }
.footer-bottom a { transition: color .3s; }
.footer-bottom a:hover { color: var(--text); }
.footer-watermark { position: absolute; left: 50%; bottom: -3.5vw; translate: -50% 0; width: min(90rem, 110vw); height: auto; z-index: -1; opacity: .035; pointer-events: none; }
.lst { display: inline-flex; flex-wrap: wrap; gap: 0.25rem 0.875rem; }
.lst b { color: var(--text-2); font-weight: 400; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer-bottom { flex-direction: column; gap: 0.625rem; } }
/* 15. Motion -------------------------------------------------------------- */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* Scroll reveal (only once JS is healthy — see chrome.js) */
/* A keyframe animation on `translate`, so it never fights a component's own
hover transform or transition */
.js .reveal { opacity: 0; }
.js .reveal.is-in { opacity: 1; animation: reveal-in 1.2s var(--ease) var(--d, 0ms) both; }
@keyframes reveal-in { from { opacity: 0; translate: 0 1.5rem; } to { opacity: 1; translate: none; } }
/* Above-the-fold intro — pure CSS, no JS dependency */
.intro { opacity: 0; transform: translateY(1rem); animation: intro 1.4s var(--ease) forwards; animation-delay: var(--d, 0ms); }
.hero__logo.intro { transform: translateY(10px) scale(.985); filter: blur(10px); animation-name: intro-logo; }
@keyframes intro { to { opacity: 1; transform: none; } }
@keyframes intro-logo { to { opacity: 1; transform: none; filter: none; } }
/* Page enter / exit */
.page { animation: page-in .5s var(--ease-soft) backwards; }
@keyframes page-in { from { opacity: 0; } }
body.is-leaving :is(.page, .hero-backdrop) { animation: page-out .24s var(--ease-soft) forwards; }
@keyframes page-out { to { opacity: 0; } }
main, site-footer { display: block; }
/* Native cross-document page transitions (Chrome/Edge 126+, Safari 18.2+) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-out .22s var(--ease-soft) both; }
::view-transition-new(root) { animation: page-in .45s var(--ease-soft) both; }
::view-transition-group(site-header) { animation-duration: 0s; }
.vt .page { animation: none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0ms !important; }
html { scroll-behavior: auto; }
.js .reveal, .intro { opacity: 1; transform: none; translate: none; filter: none; animation: none; }
.hero__bg { transform: scale(1.06); }
.hero__logo-wrap::after, .ticker__track { animation: none; }
@view-transition { navigation: none; }
}
/* 16. Utilities ----------------------------------------------------------- */
.mt-s { margin-top: 1rem; } .mt-m { margin-top: 2rem; } .mt-l { margin-top: 3rem; }
.nowrap { white-space: nowrap; }
.placeholder-note, .prose p.placeholder-note { display: block; margin-top: 1.5rem; font-size: var(--fs-micro); line-height: 1.6; letter-spacing: .12em; color: var(--text-3); }
.lost { min-height: 100svh; display: grid; place-items: center; }
/* Landing choreography — plays on load, or the moment the intro ends */
@keyframes rise { from { opacity: 0; transform: translateY(0.9rem); } }
html:not(.is-intro) :is(.hero__title, .hero__subtitle, .hero__foot > *) { animation: rise 1.3s var(--ease) both; }
html:not(.is-intro) .hero__title { animation-delay: .1s; }
html:not(.is-intro) .hero__subtitle { animation-delay: .3s; }
html:not(.is-intro) .hero__foot > :nth-child(1) { animation-delay: .5s; }
html:not(.is-intro) .hero__foot > :nth-child(2) { animation-delay: .6s; }
html:not(.is-intro) .hero__foot > :nth-child(3) { animation-delay: .7s; }
html:not(.is-intro) .hero__foot > :nth-child(4) { animation-delay: .8s; }
.person__name-sm { display: block; }
/* Phones: lighter heroes, compact news rows */
@media (max-width: 600px) {
.page-hero { padding-top: calc(var(--header-h) + 2.5rem); }
.instrument:not(.instrument--wide) { width: min(100%, 20rem); }
.grid--3[data-news-latest] { gap: 0.75rem; }
.grid--3[data-news-latest] .post { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); grid-template-rows: auto 1fr; grid-row: auto; gap: 0.25rem 1rem; padding: 0.875rem; }
.grid--3[data-news-latest] .post__media { grid-row: 1 / span 2; aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--radius); }
.grid--3[data-news-latest] .post__meta { padding: 0.125rem 0 0; font-size: var(--fs-micro); }
.grid--3[data-news-latest] .post h3 { padding: 0; font-size: 1.05rem; }
.grid--3[data-news-latest] .post p { display: none; }
}
/* ==========================================================================
Page themes — each page has its own accent, sky effect and photograph.
The sky effect is picked in main.js from body[data-theme].
========================================================================== */
[data-theme="about"] { --accent: #ffab7a; --accent-rgb: 255, 171, 122; } /* Carina — coral */
[data-theme="events"] { --accent: #aac3ff; --accent-rgb: 170, 195, 255; } /* Pillars — periwinkle */
[data-theme="team"] { --accent: #d9b3ff; --accent-rgb: 217, 179, 255; } /* Stephan's Quintet — lilac */
[data-theme="resources"] { --accent: #ffd88a; --accent-rgb: 255, 216, 138; } /* Deep Field — gold */
[data-theme="news"] { --accent: #7ff0d6; --accent-rgb: 127, 240, 214; } /* Crab — aqua */
[data-theme="join"] { --accent: #ff9ab0; --accent-rgb: 255, 154, 176; } /* Pleiades — rose */
/* Photograph behind each page hero */
.page-hero__bg {
position: absolute; inset: 0 0 clamp(-16rem, -18vw, -8rem) 0; z-index: -3; pointer-events: none;
background: var(--bg) center 35% / cover no-repeat;
opacity: .78;
/* Eased fade: the photo bleeds past the hero and dissolves into the page */
--fade: linear-gradient(180deg, #000 0%, #000 34%, rgba(0,0,0,.94) 41%, rgba(0,0,0,.85) 47%, rgba(0,0,0,.73) 53%, rgba(0,0,0,.6) 59%, rgba(0,0,0,.46) 65%, rgba(0,0,0,.33) 71%, rgba(0,0,0,.21) 77%, rgba(0,0,0,.12) 83%, rgba(0,0,0,.05) 90%, rgba(0,0,0,.015) 96%, transparent 100%);
-webkit-mask-image: var(--fade); mask-image: var(--fade);
animation: hero-drift 40s ease-in-out infinite alternate;
}
/* Keep the text column readable over bright nebulae */
.page-hero__bg::after {
content: ""; position: absolute; inset: 0;
background:
linear-gradient(90deg, rgba(4,6,12,.92) 0%, rgba(4,6,12,.7) 38%, rgba(4,6,12,.25) 70%, rgba(4,6,12,.35) 100%),
linear-gradient(180deg, rgba(4,6,12,.5) 0%, transparent 30%);
}
@keyframes hero-drift { from { transform: scale(1.04) translate3d(-0.6%, 0, 0); } to { transform: scale(1.1) translate3d(0.6%, -1%, 0); } }
.page-hero__credit {
position: absolute; right: var(--gutter); bottom: 1rem; z-index: 1;
font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .08em; color: var(--text-3);
text-align: right; max-width: 60%;
}
.page-hero__credit b { color: var(--text-2); font-weight: 400; }
@media (max-width: 900px) {
.page-hero__bg::after { background: linear-gradient(180deg, rgba(4,6,12,.55) 0%, rgba(4,6,12,.75) 50%, rgba(4,6,12,.9) 100%); }
.page-hero__credit { position: static; margin: 2rem var(--gutter) 0; max-width: none; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .page-hero__bg { animation: none; } }
.footer-credit { margin-top: 0.5rem; font-size: var(--fs-micro); font-family: var(--font-mono); letter-spacing: .06em; }
/* Events — tonight over Lethbridge (sky.js) */
.almanac { width: 100%; }
.alm-live { display: inline-block; width: 6px; height: 6px; margin-right: 0.625rem; border-radius: 50%; background: #7dffb0; box-shadow: 0 0 8px #7dffb0; vertical-align: 0.1em; animation: pulse 2.4s var(--ease-soft) infinite; }
[data-alm-now] { font-variant-numeric: tabular-nums; }
.alm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.alm-stat { padding: clamp(1.25rem, 2.2vw, 1.75rem) clamp(1.125rem, 2vw, 1.75rem); min-width: 0; }
.alm-stat + .alm-stat { border-left: 1px solid var(--line); }
.alm-stat--moon { display: flex; gap: 1rem; align-items: flex-start; }
.alm__moon { width: 2.5rem; height: 2.5rem; flex-shrink: 0; margin-top: 0.125rem; }
.alm-stat__k { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-3); }
.alm-stat__v { margin-top: 0.5rem; font-size: clamp(1.15rem, 1.6vw, 1.45rem); font-weight: 300; line-height: 1.25; letter-spacing: -0.015em; color: var(--text); font-variant-numeric: tabular-nums; }
.alm-stat__v small { font-size: 0.7em; color: var(--text-2); margin-left: 0.25rem; }
.alm-stat__s { margin-top: 0.375rem; font-size: 0.8125rem; line-height: 1.5; color: var(--text-2); }
.alm-chart { position: relative; padding: clamp(1.25rem, 2.4vw, 1.75rem) clamp(1.125rem, 2vw, 1.75rem) 0.5rem; }
.alm-row, .alm-axis { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1.25rem; align-items: center; }
.alm-row + .alm-row { margin-top: 0.625rem; }
.alm-row__label { min-width: 0; line-height: 1.3; }
.alm-row__label b { display: block; font-size: 0.875rem; font-weight: 500; color: var(--text); }
.alm-row__label span { display: block; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: .06em; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alm-row__track { position: relative; height: 1.25rem; border-radius: 999px; background: rgba(255, 255, 255, 0.035); overflow: hidden; }
.alm-bar { position: absolute; inset: 0; }
.alm-row--sky .alm-row__track { height: 2.25rem; border-radius: 0.625rem; overflow: visible; background: none; }
.alm-sky { position: absolute; inset: 0; border-radius: 0.625rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.alm-mark { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.35); }
.alm-mark span { position: absolute; left: 0.375rem; top: 50%; translate: 0 -50%; font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.alm-pass { position: absolute; top: 0.25rem; bottom: 0.25rem; border-radius: 999px; background: var(--signal); box-shadow: 0 0 10px var(--signal); }
.alm-axis { margin-top: 0.75rem; }
.alm-axis__track { position: relative; height: 1.25rem; }
.alm-tick { position: absolute; top: 0; width: 1px; height: 0.375rem; background: var(--line-strong); }
.alm-tick--minor { height: 0.25rem; background: var(--line); }
.alm-tick span { position: absolute; top: 0.5rem; left: 0; translate: -50% 0; font-family: var(--font-mono); font-size: 0.625rem; color: var(--text-3); white-space: nowrap; }
.alm-tick:first-child span { translate: 0 0; }
.alm-tick:last-child span { translate: -100% 0; }
/* "Now" spans the whole chart; --p is 0..1 across the tracks */
.alm-chart { --pad: clamp(1.125rem, 2vw, 1.75rem); --lab: 12.25rem; }
.alm-now { position: absolute; top: 1rem; bottom: 1.625rem; width: 1px; left: calc(var(--pad) + var(--lab) + (100% - 2 * var(--pad) - var(--lab)) * var(--p)); background: linear-gradient(180deg, transparent, var(--accent) 10%, var(--accent)); pointer-events: none; }
.alm-now span { position: absolute; bottom: -1.25rem; left: 0; translate: -50% 0; padding: 0 0.25rem; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); background: #070a13; }
.alm-foot { padding: 0.75rem clamp(1.125rem, 2vw, 1.75rem) 1.125rem; font-size: 0.75rem; color: var(--text-3); }
@media (max-width: 900px) {
.alm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.alm-stat:nth-child(3) { border-left: 0; }
.alm-stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 600px) {
.alm-row, .alm-axis { grid-template-columns: minmax(0, 1fr); gap: 0.375rem; }
.alm-row__label { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.alm-axis .alm-row__label { display: none; }
.alm-chart { --lab: 0rem; }
.alm-mark span { display: none; }
.alm-stat__v { font-size: 1.1rem; }
}
/* ==========================================================================
Features: event pages, problem of the week, logbook, search palette,
home hero depth
========================================================================== */
[data-theme="logbook"] { --accent: #c9f27e; --accent-rgb: 201, 242, 126; } /* Star trails — chartreuse */
/* Event rows: the title is the link, and it covers the whole row */
.event__link { color: inherit; }
.event__link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.event__actions { position: relative; z-index: 1; }
.event:has(.event__link:is(:hover, :focus-visible)) .event__title { color: var(--accent); }
.event__link:focus-visible { outline: none; }
.event:has(.event__link:focus-visible) { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .6); border-radius: 0.5rem; }
.event__title { transition: color .3s; }
/* Event page */
.back-link { display: inline-flex; align-items: center; gap: 0.625rem; color: var(--text-3); transition: color .3s; }
.back-link .i { transform: scaleX(-1); transition: transform .5s var(--ease); }
.back-link:hover { color: var(--text); }
.back-link:hover .i { transform: scaleX(-1) translateX(4px); }
.page-hero .eyebrow:has(.back-link)::before { display: none; }
.cal--start .cal__menu { left: 0; right: auto; }
.cal > summary.btn { list-style: none; }
.cal > summary.btn .icon { width: 1rem; height: 1rem; }
[data-ev-actions] { align-items: center; gap: 1rem; }
.pass { width: min(100%, 26rem); }
.pass__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 1rem; padding: 1.5rem 1.375rem; }
.pass__wide { grid-column: 1 / -1; }
.pass__k { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-3); }
.pass__v { margin-top: 0.375rem; font-size: 1rem; line-height: 1.35; color: var(--text); font-variant-numeric: tabular-nums; }
.pass__v--big { font-family: var(--font-mono); font-size: clamp(1.1rem, 1.6vw, 1.35rem); letter-spacing: -0.02em; color: var(--accent); }
/* Perforation with a notch cut from each side */
.pass__tear { position: relative; height: 1px; margin: 0 1.375rem; background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 11px); }
.pass__tear::before, .pass__tear::after { content: ""; position: absolute; top: -0.625rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-strong); }
.pass__tear::before { left: -2.05rem; clip-path: inset(0 0 0 50%); }
.pass__tear::after { right: -2.05rem; clip-path: inset(0 50% 0 0); }
.pass__stub { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.25rem; padding: 1.25rem 1.375rem 1.375rem; }
.pass__code { width: 8.5rem; height: 2.25rem; fill: rgba(255, 255, 255, .55); flex-shrink: 0; }
.ev-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 0; }
.ev-facts dt { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-3); margin-bottom: 0.5rem; }
.ev-facts dd { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--text); }
@media (max-width: 720px) { .ev-facts { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }
.ev-map { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); overflow: hidden; background: rgba(6, 9, 17, .8); }
.ev-map__frame { position: relative; min-height: 20rem; background: #0b0e18; }
.ev-map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: invert(.92) hue-rotate(180deg) saturate(.55) brightness(.92) contrast(.92); }
.ev-map__info { padding: clamp(1.5rem, 2.5vw, 2rem); border-left: 1px solid var(--line); }
.ev-map__name { margin-top: 0.625rem; font-size: 1.125rem; color: var(--text); }
.ev-map__addr { margin-top: 0.25rem; font-size: var(--fs-sm); color: var(--text-2); }
.ev-map__note { margin-top: 1rem; padding-left: 0.875rem; border-left: 1px solid var(--accent); font-size: var(--fs-sm); line-height: 1.65; color: var(--text-2); }
@media (max-width: 900px) { .ev-map { grid-template-columns: minmax(0, 1fr); } .ev-map__info { border-left: 0; border-top: 1px solid var(--line); } .ev-map__frame { min-height: 16rem; } }
/* Toast */
.toast {
position: fixed; left: 50%; bottom: 1.5rem; z-index: 300; translate: -50% 1rem;
padding: 0.75rem 1.125rem; border-radius: 999px; border: 1px solid var(--line-strong);
background: #0e1220; color: var(--text); font-size: 0.875rem; box-shadow: 0 1rem 2.5rem -1rem rgba(0, 0, 0, .8);
opacity: 0; pointer-events: none; transition: opacity .3s var(--ease-soft), translate .5s var(--ease);
}
.toast.is-shown { opacity: 1; translate: -50% 0; }
/* Problem of the week */
.pow { width: 100%; container-type: inline-size; }
.pow__body {
display: grid; grid-template-columns: minmax(0, 1fr) clamp(7.5rem, 26%, 11rem); gap: 0 clamp(1.5rem, 3vw, 2.5rem); align-items: start;
padding: clamp(1.5rem, 3vw, 2.25rem);
}
.pow__body > * { grid-column: 1; }
.pow__body > .pow__fig { grid-column: 2; grid-row: 1 / span 2; }
.pow__fig[hidden] { display: none; }
.pow__body:has(.pow__fig[hidden]) { grid-template-columns: minmax(0, 1fr); }
@container (max-width: 30rem) {
.pow__body { grid-template-columns: minmax(0, 1fr); }
.pow__body > .pow__fig { grid-column: 1; grid-row: auto; width: 9rem; margin-bottom: 1.25rem; }
}
/* Figure: hairline drawing, accent for the thing the problem is about */
.pow-fig { display: block; width: 100%; height: auto; overflow: hidden; }
.pow-fig .l { fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.pow-fig .l.d { stroke-dasharray: 2 4; }
.pow-fig .l.a { stroke: var(--accent); }
.pow-fig .l.thick { stroke-width: 2; }
.pow-fig .l.faint { stroke: rgba(255, 255, 255, .05); }
.pow-fig .g { fill: rgba(var(--accent-rgb), .05); }
.pow-fig .f { fill: rgba(255, 255, 255, .55); }
.pow-fig .af { fill: var(--accent); }
.pow-fig .glow { filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), .8)); }
.pow-fig text { font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; fill: var(--text-3); }
.pow-fig .m-shm { animation: pow-shm 2.6s cubic-bezier(.37, 0, .63, 1) infinite alternate; }
@keyframes pow-shm { from { transform: translateY(-56px); } to { transform: translateY(56px); } }
.pow-fig .m-spin { transform-box: view-box; transform-origin: 80px 80px; animation: pow-spin 40s linear infinite; }
@keyframes pow-spin { to { transform: rotate(360deg); } }
.pow-fig .m-flow { stroke-dasharray: 3 3; animation: pow-flow 1.6s linear infinite; }
@keyframes pow-flow { to { stroke-dashoffset: -12; } }
.pow-fig .m-pair { animation: pow-pair 6s var(--ease-soft) infinite; animation-delay: calc(var(--k) * -2s); }
@keyframes pow-pair { 0%, 100% { opacity: 0; } 12%, 40% { opacity: 1; } 55% { opacity: 0; } }
.pow-fig .m-row { animation: pow-row 9s var(--ease) calc(var(--k) * .9s) infinite backwards; }
@keyframes pow-row { 0% { opacity: 0; translate: -6px 0; } 8%, 70% { opacity: 1; translate: 0 0; } 82%, 100% { opacity: 0; translate: 0 0; } }
.pow__q { font-size: clamp(1.2rem, 1.9vw, 1.6rem); font-weight: 300; line-height: 1.45; letter-spacing: -0.012em; color: var(--text); text-wrap: pretty; }
.pow__fold { margin-top: 1.5rem; }
.pow__fold > summary {
list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.75rem;
font-size: 0.78rem; font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text); transition: color .3s;
}
.pow__fold > summary::-webkit-details-marker { display: none; }
.pow__fold > summary:hover { color: var(--accent); }
.pow__fold .plus { position: relative; width: 0.75rem; height: 0.75rem; }
.pow__fold .plus::before, .pow__fold .plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; }
.pow__fold .plus::after { transform: rotate(90deg); transition: transform .5s var(--ease); }
.pow__fold[open] .plus::after { transform: rotate(0); }
.pow__text { margin-top: 1rem; padding-left: 1rem; border-left: 1px solid var(--accent); font-size: var(--fs-sm); line-height: 1.75; color: var(--text-2); animation: fade-down .6s var(--ease); max-width: 62ch; }
.pow__last { padding: 1.25rem clamp(1.5rem, 3vw, 2.25rem) 1.5rem; border-top: 1px solid var(--line); }
.pow__label { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-3); }
.pow__label b { color: var(--text-2); font-weight: 400; }
.pow__last .pow__fold { margin-top: 0.875rem; }
/* Logbook — masonry of frames */
.gallery { columns: 3 18rem; column-gap: clamp(1rem, 2vw, 1.5rem); }
.frame { break-inside: avoid; margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); }
.frame__btn { position: relative; display: block; width: 100%; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #080b15; cursor: zoom-in; }
.frame__btn img { width: 100%; height: auto; transition: transform 1.2s var(--ease), filter .6s var(--ease-soft); }
.frame__btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(4, 6, 12, .55)); opacity: 0; transition: opacity .5s var(--ease-soft); }
.frame__zoom { position: absolute; right: 0.875rem; bottom: 0.875rem; z-index: 1; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); background: rgba(4, 6, 12, .5); opacity: 0; transform: scale(.9); transition: opacity .4s var(--ease-soft), transform .5s var(--ease); }
.frame__zoom::before, .frame__zoom::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.75rem; height: 1px; background: #fff; translate: -50% -50%; }
.frame__zoom::after { rotate: 90deg; }
.frame__btn:is(:hover, :focus-visible) img { transform: scale(1.035); }
.frame__btn:is(:hover, :focus-visible)::after, .frame__btn:is(:hover, :focus-visible) .frame__zoom { opacity: 1; transform: none; }
.frame figcaption { margin-top: 0.875rem; }
.frame__meta { display: block; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.frame figcaption b { display: block; margin-top: 0.25rem; font-size: 1.0625rem; font-weight: 400; color: var(--text); }
/* Logbook — full-screen viewer */
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(3, 5, 10, .96); color: var(--text); overflow: hidden; }
.lightbox::backdrop { background: rgba(3, 5, 10, .6); }
.lightbox[open] { display: grid; place-items: center; animation: page-in .35s var(--ease-soft); }
.lightbox__fig { margin: 0; display: grid; justify-items: center; gap: 1rem; padding: 4.5rem 5.5rem 1.5rem; max-height: 100dvh; }
.lightbox__fig img { max-width: min(100%, 1600px); max-height: calc(100dvh - 11rem); width: auto; height: auto; border-radius: 0.5rem; box-shadow: 0 2rem 5rem rgba(0, 0, 0, .6); transition: opacity .3s var(--ease-soft); }
.lightbox.is-loading img { opacity: .35; }
.lightbox__cap { display: grid; justify-items: center; gap: 0.25rem; text-align: center; max-width: 60ch; }
.lightbox__cap b { font-size: 1.125rem; font-weight: 400; }
.lightbox__cap span { font-size: var(--fs-sm); color: var(--text-2); }
.lightbox__cap small, .lightbox__count { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.lightbox__count { color: var(--accent); }
.lightbox__btn { position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--text-2); background: rgba(4, 6, 12, .5); transition: background-color .4s var(--ease), color .4s, border-color .4s; }
.lightbox__btn:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.lightbox__btn .i { width: 1rem; height: 1rem; }
.lightbox__btn--prev { left: clamp(0.75rem, 2vw, 1.5rem); top: 50%; translate: 0 -50%; }
.lightbox__btn--prev .i { transform: scaleX(-1); }
.lightbox__btn--next { right: clamp(0.75rem, 2vw, 1.5rem); top: 50%; translate: 0 -50%; }
.lightbox__btn--close { top: 1rem; right: 1rem; }
.lightbox__btn--close span, .lightbox__btn--close span::after { position: absolute; width: 1rem; height: 1px; background: currentColor; rotate: 45deg; }
.lightbox__btn--close span::after { content: ""; left: 0; top: 0; rotate: 90deg; }
@media (max-width: 720px) {
.lightbox__fig { padding: 4rem 0.75rem 5.5rem; }
.lightbox__btn--prev, .lightbox__btn--next { top: auto; bottom: 1rem; translate: none; }
}
/* Logbook — camera iris */
.exposure { width: min(100%, 24rem); }
.aperture { width: 100%; height: auto; overflow: visible; }
.aperture__blade { fill: #0c101c; stroke: rgba(255, 255, 255, .28); stroke-width: 0.8; stroke-linejoin: round; }
.aperture__trail { fill: none; stroke: #e8eeff; stroke-linecap: round; }
.aperture__trail.is-tint { stroke: var(--accent); }
.aperture__trail.is-warm { stroke: #ffd6a0; }
/* Camera settings, read like the EXIF strip under a photograph */
.exposure__read { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 0.75rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.exposure__read dt { font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.exposure__read dd { margin-top: 0.25rem; font-size: 0.8125rem; color: var(--text); }
.exposure .instrument__status { transition: color .4s; }
.exposure .instrument__status.is-idle { color: var(--text-3); }
.exposure .instrument__status.is-idle::before { animation: none; opacity: .4; }
/* Home hero depth layers (moved by main.js heroDepth) */
.hero__bg { scale: 1; animation: hero-breathe 60s ease-in-out infinite alternate; transform: translate3d(calc(var(--mx, 0) * -14px), calc(var(--parallax, 0px) + var(--my, 0) * -10px), 0) scale(1.08); }
@keyframes hero-breathe { to { scale: 1.06; } }
.hero__haze {
position: absolute; inset: -12%; pointer-events: none; mix-blend-mode: screen;
background:
radial-gradient(32% 28% at 28% 38%, rgba(90, 160, 255, .16), transparent 70%),
radial-gradient(28% 26% at 74% 60%, rgba(255, 120, 200, .10), transparent 70%),
radial-gradient(22% 20% at 58% 24%, rgba(255, 190, 120, .08), transparent 70%);
transform: translate3d(calc(var(--mx, 0) * -30px), calc(var(--parallax, 0px) * 0.6 + var(--my, 0) * -20px), 0);
animation: haze-drift 38s ease-in-out infinite alternate;
}
@keyframes haze-drift { from { translate: -1.5% 0; } to { translate: 1.5% -1%; } }
.hero__near { position: absolute; left: -60px; top: -60px; width: calc(100% + 120px); height: calc(100% + 120px); pointer-events: none; transform: translate3d(calc(var(--mx, 0) * -46px), calc(var(--parallax, 0px) * 0.25 + var(--my, 0) * -34px), 0); }
.hero__logo-wrap { translate: calc(var(--mx, 0) * 8px) calc(var(--my, 0) * 6px); }
.is-intro .hero__near { opacity: .5; }
@media (prefers-reduced-motion: reduce) { .hero__bg, .hero__haze { animation: none; } }
/* Header search button */
.search-btn { display: inline-flex; align-items: center; gap: 0.5rem; height: 2.25rem; padding: 0 0.625rem; margin-right: -0.25rem; border-radius: 999px; color: var(--text-2); transition: color .3s, background-color .3s; }
.search-btn:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.search-btn kbd { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.25rem; border: 1px solid var(--line-strong); border-radius: 0.3rem; font-family: var(--font-mono); font-size: 0.625rem; color: var(--text-3); }
.menu-open .search-btn { opacity: 0; visibility: hidden; }
@media (hover: none), (max-width: 720px) { .search-btn kbd { display: none; } }
/* Search palette */
.pal { width: min(40rem, calc(100vw - 1.5rem)); max-width: none; max-height: none; margin: 12vh auto auto; padding: 0; border: 0; background: transparent; color: var(--text); overflow: visible; }
.pal::backdrop { background: rgba(16, 18, 25, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pal[open] { animation: pal-in .35s var(--ease); }
@keyframes pal-in { from { opacity: 0; transform: translateY(-0.5rem) scale(.985); } }
.pal__box { border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: #0b0e17; box-shadow: 0 2.5rem 6rem -1.5rem rgba(0, 0, 0, .85); overflow: hidden; }
.pal__field { display: flex; align-items: center; gap: 0.875rem; padding: 0 1.25rem; border-bottom: 1px solid var(--line); }
.pal__icon { width: 1.25rem; height: 1.25rem; color: var(--text-3); flex-shrink: 0; }
.pal__input { flex: 1; min-width: 0; height: 3.75rem; border: 0; outline: none; background: transparent; color: var(--text); font: inherit; font-size: 1.125rem; font-weight: 300; }
.pal__input::placeholder { color: var(--text-3); }
.pal kbd { display: inline-grid; place-items: center; min-width: 1.375rem; height: 1.375rem; padding: 0 0.375rem; border: 1px solid var(--line-strong); border-radius: 0.3rem; font-family: var(--font-mono); font-size: 0.625rem; color: var(--text-3); }
.pal__list { list-style: none; margin: 0; padding: 0.5rem; max-height: min(26rem, 56vh); overflow-y: auto; overscroll-behavior: contain; }
.pal__group { padding: 0.875rem 0.75rem 0.375rem; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-3); }
.pal__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 1rem; padding: 0.625rem 0.75rem; border-radius: 0.625rem; cursor: pointer; }
.pal__title { font-size: 0.9375rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal__sub { grid-column: 1; font-size: 0.78rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal__go { grid-column: 2; grid-row: 1 / span 2; font-size: 0.8125rem; color: var(--accent); opacity: 0; }
.pal__item[aria-selected="true"] { background: rgba(255, 255, 255, .06); box-shadow: inset 2px 0 0 var(--accent); }
.pal__item[aria-selected="true"] .pal__go { opacity: 1; }
.pal__empty { padding: 1.5rem 0.75rem; color: var(--text-3); font-size: var(--fs-sm); }
.pal__foot { display: flex; gap: 1.25rem; padding: 0.75rem 1.25rem; border-top: 1px solid var(--line); font-size: 0.75rem; color: var(--text-3); }
.pal__foot span { display: inline-flex; align-items: center; gap: 0.375rem; }
@media (hover: none) { .pal__foot { display: none; } }
/* ==========================================================================
Refinements from the design and accessibility review
========================================================================== */
/* Cards sit on a dark base so the animated skies never run behind their text */
.card, .post, .step, .sky { background: linear-gradient(var(--surface), var(--surface)), rgba(6, 9, 17, .72); }
.card--interactive:is(:hover, :focus-visible), .post:is(:hover, :focus-visible) { background: linear-gradient(var(--surface-hover), var(--surface-hover)), rgba(6, 9, 17, .78); }
/* Every hover effect has a keyboard equivalent */
.card--interactive:focus-visible { border-color: var(--line-strong); transform: translateY(-4px); }
.card--interactive:focus-visible::before { opacity: 1; }
.post:focus-visible { border-color: var(--line-strong); transform: translateY(-4px); outline: none; }
.post:focus-visible h3 { color: var(--accent); }
a.res:focus-visible { background: var(--surface); outline: none; box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .5); }
a.res:focus-visible > span:not(.res__go) { transform: translateX(8px); }
a.res:focus-visible .res__go { color: var(--accent); }
.hero-col:focus-visible { outline: none; }
.hero-col:focus-visible .hero-col__cta { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.countdown:focus-visible strong, .nav-drawer__next:focus-visible .nav-drawer__next-text { color: var(--accent); }
/* Photo credits stay legible wherever the photo is bright */
.page-hero__credit { color: var(--text-2); text-shadow: 0 0 12px rgba(4, 6, 12, .9), 0 1px 2px rgba(4, 6, 12, .9); }
.page-hero__credit b { color: var(--text); }
/* Home photo dissolves with an eased curve, like the subpages */
.hero-backdrop::after {
background:
radial-gradient(ellipse 50% 32% at 50% 48%, rgba(4, 6, 12, .45), transparent 70%),
linear-gradient(180deg, rgba(4, 6, 12, .35) 0%, rgba(4, 6, 12, .2) 32%, rgba(4, 6, 12, .3) 50%, rgba(4, 6, 12, .48) 64%, rgba(4, 6, 12, .66) 76%, rgba(4, 6, 12, .82) 86%, rgba(4, 6, 12, .94) 94%, var(--bg) 100%);
}
/* The home logo link is out of the tab order while it is hidden */
.is-home .site-header:not(.is-scrolled) .brand { visibility: hidden; transition: opacity .5s var(--ease), transform .6s var(--ease), max-width .7s var(--ease), margin .7s var(--ease), visibility 0s linear .5s; }
.menu-open .brand { visibility: visible !important; }
/* Past events have no actions */
.event.is-past .event__actions { display: none; }
/* Periodic table: equal rows, readable names, numbered groups */
.pt__el { display: grid; grid-template-rows: auto 1fr auto; }
.pt__name { min-height: 2.4em; display: flex; align-items: flex-end; justify-content: center; white-space: normal; text-overflow: clip; }
@media (max-width: 1100px) { .pt__groups a span { display: none; } }
/* Resource rows stack their description when their column gets narrow */
.res-list { container-type: inline-size; }
@container (max-width: 40rem) {
.res { grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1rem; }
.res__desc { grid-column: 1; grid-row: 2; }
.res__go { grid-row: 1 / span 2; grid-column: 2; }
}
/* Hero instruments stay left-aligned under the text on tablets */
@media (max-width: 900px) {
.page-hero__visual { justify-items: start; }
.instrument, .countdown, .scope, .patch { margin-inline: 0; }
.instrument:not(.instrument--wide):not(.almanac):not(.pow), .countdown, .scope { width: min(100%, 24rem); }
.patch { width: min(100%, 20rem); }
}
/* …but on phones the round patch sits on the centre line, like its caption */
@media (max-width: 600px) {
.page-hero__visual:has(.patch) { justify-items: center; }
.page-hero__visual .patch { margin-inline: auto; }
}
/* Phones: full-width button pairs, tidy hero meta */
@media (max-width: 480px) {
.page-hero .btn-row .btn { flex: 1 1 100%; }
.page-hero__meta { display: grid; grid-template-columns: auto auto; justify-content: start; }
}
/* Touch screens: every target at least 44px */
@media (pointer: coarse) {
.btn--sm { --h: 2.75rem; }
.icon-btn, .article__toggle, .equation__arrow, .lightbox__btn { width: 2.75rem; height: 2.75rem; }
.chip { height: 2.75rem; }
.menu-toggle, .search-btn { height: 2.75rem; }
.socials a { padding: 0.75rem; margin: -0.75rem; }
.footer-grid ul { gap: 0; }
.footer-grid li a { display: inline-block; padding-block: 0.5rem; }
}
/* Motion off: the visitor's own switch (footer), same as reduced motion */
.motion-off *, .motion-off *::before, .motion-off *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0ms !important; }
.motion-off .equation::before, .motion-off .pow-fig *, .motion-off .ticker__track, .motion-off .hero__logo-wrap::after, .motion-off .page-hero__bg, .motion-off .hero__bg, .motion-off .hero__haze { animation: none !important; }
.motion-off .reveal, .motion-off .intro { opacity: 1; transform: none; translate: none; filter: none; }
.motion-toggle { display: inline-flex; align-items: center; gap: 0.5rem; font: inherit; letter-spacing: inherit; color: inherit; transition: color .3s; }
.motion-toggle:hover { color: var(--text); }
.motion-toggle b { font-weight: 400; color: var(--text-2); }
.motion-toggle::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #7dffb0; box-shadow: 0 0 6px #7dffb0; }
.motion-off .motion-toggle::before { background: var(--text-3); box-shadow: none; }
/* Print: everything visible, nothing animated */
@media print {
.starfield, .site-header, .nav-drawer, .nav-scrim, .hero-backdrop, .page-hero__bg, .intro-cue, .scroll-cue { display: none !important; }
.reveal, .intro { opacity: 1 !important; animation: none !important; transform: none !important; translate: none !important; }
body { background: #fff; color: #000; }
}
/* Home title: letters surface one after another (main.js letterReveal) */
.lr { opacity: 0; filter: blur(6px); animation: lr-in .7s var(--ease) forwards; animation-delay: calc(var(--i) * var(--lr, 30ms)); }
@keyframes lr-in { to { opacity: 1; filter: blur(0); } }
@media (max-width: 480px) {
.alm-stats { grid-template-columns: minmax(0, 1fr); }
.alm-stat + .alm-stat { border-left: 0; border-top: 1px solid var(--line); }
}