:root {
  --page: #eae5db;
  --surface: #f5f1e9;
  --ink: #182027;
  --muted: #6e7472;
  --line: #b8b1a5;
  --accent: #c9783e;
  --dark: #17212b;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--page); color: var(--ink); font: 16px/1.55 "IBM Plex Sans", sans-serif; }
a { color: inherit; }
button, input, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.skip-link { position: absolute; left: -999px; top: 12px; background: var(--accent); padding: 8px 12px; }
.skip-link:focus { left: 12px; z-index: 10; }
h1, h2, h3, .wordmark, .eyebrow, dt, small { font-family: "Space Grotesk", sans-serif; }
h1, h2, h3 { line-height: 1; letter-spacing: -.055em; }
h1 { font-size: clamp(3.1rem, 7vw, 6.7rem); max-width: 760px; margin: 0; }
h2 { font-size: clamp(2.2rem, 5vw, 4.4rem); margin: 0; }
h3 { font-size: 1.45rem; margin: 14px 0 8px; }
.eyebrow { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 16px; }
.site-header { height: 70px; padding: 0 5vw; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.wordmark { font-weight: 700; letter-spacing: .04em; text-decoration: none; }
.site-header nav { display: flex; gap: 25px; }
.site-header nav a, .text-link { text-underline-offset: 5px; }
.signal-header { min-height: 650px; position: relative; display: grid; align-items: end; padding: 8vw 7vw; overflow: hidden; }
.observatory { position: absolute; inset: 0; background: var(--dark); }
.observatory svg { width: 100%; height: 100%; }
.hero-copy { position: relative; z-index: 1; max-width: 800px; background: var(--surface); padding: 32px; border-left: 5px solid var(--accent); }
.hero-copy > p:not(.eyebrow) { font-size: 19px; max-width: 560px; margin: 22px 0; }
.hero-code { position: absolute; right: 25px; bottom: 22px; color: var(--surface); font: 11px/1.6 "Space Grotesk", sans-serif; letter-spacing: .08em; }
.archive, .notes, .kit, .contact { padding: 105px 7vw; border-bottom: 1px solid var(--line); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 35px; margin-bottom: 42px; }
.section-head > p { max-width: 470px; margin: 0; color: var(--muted); font-size: 18px; }
.filters { display: flex; border-bottom: 1px solid var(--line); }
.filters button { border: 0; border-bottom: 3px solid transparent; padding: 10px 13px; background: none; color: var(--muted); cursor: pointer; }
.filters button.is-active { border-color: var(--accent); color: var(--ink); font-weight: 600; }
.contact-sheet { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 245px; gap: 12px; }
.photo { position: relative; overflow: hidden; border: 0; padding: 0; cursor: pointer; background: var(--dark); }
.photo[hidden] { display: none; }
.photo-tall { grid-row: span 2; }
.photo-wide { grid-column: span 2; }
.photo span, .lightbox-image { display: block; width: 100%; height: 100%; }
.photo small { position: absolute; left: 12px; bottom: 10px; padding: 3px 6px; background: var(--dark); color: var(--surface); font-size: 10px; letter-spacing: .06em; }
.scene-nebula, .scene-galaxy, .scene-orion, .scene-milky { background: radial-gradient(circle at 65% 35%, #c9783e 0 2%, transparent 3%), radial-gradient(ellipse at 58% 40%, #a3472c 0 10%, transparent 30%), linear-gradient(135deg, #17212b, #354c61 48%, #182027); }
.scene-nebula span, .scene-galaxy span { background: repeating-linear-gradient(135deg, transparent 0 22px, #c9783e44 23px 25px); }
.scene-moon, .scene-eclipse { background: #27333b; }
.scene-moon span, .scene-eclipse span { width: 54%; height: auto; aspect-ratio: 1; position: absolute; top: 22%; left: 23%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f5f1e9 0 8%, #c7c1b7 9% 15%, #f5f1e9 16% 32%, #a8aaa4 33% 38%, #e3ded2 39%); box-shadow: 0 0 35px #f5f1e988; }
.scene-eclipse span { background: radial-gradient(circle, #c9783e 0 42%, #17212b 44% 56%, #c9783e 58% 62%, #17212b 64%); }
.gallery-note { color: var(--muted); font: 11px "Space Grotesk", sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.note-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; border-top: 1px solid var(--line); }
.note-grid article { padding: 24px 0; border-bottom: 1px solid var(--line); }
.note-grid span { color: var(--accent); font: 600 13px "Space Grotesk", sans-serif; }
.note-grid p { color: var(--muted); margin: 0; }
.kit { background: var(--dark); color: var(--surface); }
.kit .eyebrow { color: #b8b1a5; }
.kit h2 { max-width: 720px; margin-bottom: 55px; }
.kit dl { max-width: 850px; margin: 0; }
.kit dl div { display: grid; grid-template-columns: 160px 1fr; padding: 16px 0; border-top: 1px solid #71808a; }
dt { color: #b8b1a5; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; } dd { margin: 0; }
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; }
.contact > div > p:last-child { max-width: 470px; color: var(--muted); font-size: 18px; }
form { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
label { display: grid; gap: 7px; font: 600 11px "Space Grotesk", sans-serif; text-transform: uppercase; letter-spacing: .06em; }
input, textarea { width: 100%; border: 1px solid var(--line); padding: 11px; background: var(--surface); color: var(--ink); }
.full { grid-column: 1 / -1; }
.accent-button { border: 0; padding: 13px; background: var(--accent); color: var(--ink); font-weight: 600; cursor: pointer; }
.form-status { color: var(--accent); margin: 0; }
.site-footer { display: flex; justify-content: space-between; padding: 30px 7vw; font: 11px "Space Grotesk", sans-serif; letter-spacing: .05em; }
.lightbox { width: min(900px, calc(100% - 30px)); padding: 0; border: 0; background: var(--surface); color: var(--ink); }
.lightbox::backdrop { background: #182027dd; }
.close { position: absolute; z-index: 2; right: 16px; top: 16px; border: 1px solid var(--ink); border-radius: 50%; width: 40px; height: 40px; background: var(--surface); cursor: pointer; font-size: 22px; }
.lightbox-image { height: min(65vh, 600px); }
.lightbox-caption { display: flex; justify-content: space-between; align-items: end; padding: 22px; gap: 20px; }
.lightbox-caption p { color: var(--muted); font: 11px "Space Grotesk", sans-serif; }
.lightbox-caption h2 { font-size: 28px; }
.lightbox-caption button { width: 42px; height: 42px; border: 1px solid var(--ink); background: var(--surface); cursor: pointer; }
@media (max-width: 800px) { .section-head, .contact { display: block; } .section-head > p { margin-top: 20px; } .filters { margin-top: 25px; overflow-x: auto; } .contact-sheet { grid-template-columns: repeat(2, 1fr); } .note-grid { grid-template-columns: 1fr; } .contact form { margin-top: 40px; } }
@media (max-width: 540px) { .site-header { padding: 0 18px; } .site-header nav { gap: 12px; font-size: 13px; } .signal-header { min-height: 680px; padding: 18px; } .hero-copy { padding: 22px; } .hero-code { font-size: 9px; } .archive, .notes, .kit, .contact { padding: 75px 18px; } .contact-sheet { grid-template-columns: 1fr; grid-auto-rows: 280px; } .photo-tall, .photo-wide { grid-column: auto; grid-row: auto; } form { grid-template-columns: 1fr; } .full { grid-column: auto; } .kit dl div { grid-template-columns: 110px 1fr; } .site-footer { padding: 25px 18px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }