:root {
  --bg: #06070c;
  --bg-raised: #0c0f17;
  --line: rgba(196, 212, 255, 0.09);
  --line-strong: rgba(196, 212, 255, 0.16);
  --text: #eceef4;
  --muted: #9198ab;
  --faint: #626a7e;
  --pos: #ffb08a;
  --neg: #7fd8ff;
  --accent: #b9f3e4;
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --gutter: clamp(16px, 4vw, 48px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 20; background: var(--text); color: var(--bg); padding: 8px 12px; border-radius: 6px; }
.skip:focus { left: 8px; }

/* Top bar */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px var(--gutter);
  background: linear-gradient(to bottom, rgba(6, 7, 12, 0.82), rgba(6, 7, 12, 0));
}
.mark { font: italic 400 26px/1 var(--serif); letter-spacing: 0.01em; text-decoration: none; }
.topbar nav { display: flex; align-items: center; gap: clamp(14px, 3vw, 28px); font-size: 14px; color: var(--muted); }
.topbar nav a { text-decoration: none; transition: color 0.2s; }
.topbar nav a:hover { color: var(--text); }
.by { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 10px; border: 1px solid var(--line-strong); border-radius: 999px; }
.by img { width: 20px; height: auto; opacity: 0.92; }
.by span:first-child { color: var(--faint); }
.by span:last-child { color: var(--text); font-weight: 500; letter-spacing: 0.02em; }

/* Hero + bubble chamber */
.hero {
  position: relative; min-height: 100svh; display: grid; align-items: center;
  padding: 120px var(--gutter) 120px; isolation: isolate; overflow: hidden;
}
#chamber { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; cursor: crosshair; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at 22% 52%, rgba(6, 7, 12, 0.88), rgba(6, 7, 12, 0) 72%),
    linear-gradient(to bottom, rgba(6, 7, 12, 0) 70%, var(--bg));
}
.hero-copy { max-width: 620px; pointer-events: none; }
.hero-copy a, .hero-copy button { pointer-events: auto; }
.eyebrow { font: 500 12px/1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.hero h1 {
  font: italic 400 clamp(64px, 13vw, 168px)/0.92 var(--serif);
  letter-spacing: -0.02em;
  /* Gradient text only paints inside the element's box, and Safari clips strictly. This italic
     face reaches past its tight line box (the V's top, the p's descender, the slanted m), so pad
     the box around every glyph and cancel the padding with negative margins. */
  width: max-content; max-width: calc(100vw - 2 * var(--gutter) + 0.24em);
  padding: 0.14em 0.16em 0.24em 0.1em;
  margin: calc(18px - 0.14em) 0 calc(22px - 0.24em) calc(-0.04em - 0.1em);
  background: linear-gradient(100deg, #ffffff 30%, #cfe9ff 62%, #ffd9c7 98%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lead { font-size: clamp(17px, 2vw, 20px); line-height: 1.55; color: #c3c8d6; max-width: 34em; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px;
  border: 1px solid var(--line-strong); border-radius: 999px; text-decoration: none;
  font-size: 15px; font-weight: 500; color: var(--text); background: rgba(12, 15, 23, 0.6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.button:hover { border-color: rgba(196, 212, 255, 0.34); transform: translateY(-1px); }
.button.primary { background: var(--text); color: var(--bg); border-color: var(--text); }
.button.primary:hover { background: #fff; }

.chamber-caption {
  position: absolute; right: var(--gutter); bottom: 28px; left: var(--gutter);
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px;
  font: 400 11.5px/1.6 var(--mono); letter-spacing: 0.04em; color: var(--faint); text-align: right;
}
.live { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }
.b-field { color: var(--muted); }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
#collide { font: inherit; color: var(--text); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
#collide:hover { text-decoration-color: var(--text); }
@media (prefers-reduced-motion: reduce) { .live { animation: none; } }

/* Sections */
.section { padding: clamp(64px, 10vw, 120px) var(--gutter); max-width: 1240px; margin: 0 auto; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding-bottom: 22px; margin-bottom: 32px; border-bottom: 1px solid var(--line); }
.section-head h2 { font: 400 clamp(36px, 5vw, 52px)/1 var(--serif); letter-spacing: -0.01em; }
.section-head p { color: var(--muted); font-size: 15px; }

/* Project cards, in the style of a large social link preview */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 22px; }
.card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: 18px; background: var(--bg-raised);
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.card:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); }
.card-media { position: relative; aspect-ratio: 1200 / 630; overflow: hidden; border-bottom: 1px solid var(--line); background: #0a0d14; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(.2, .7, .2, 1); }
.card:hover .card-media img { transform: scale(1.025); }
.card-domain {
  position: absolute; left: 12px; bottom: 12px; padding: 3px 9px; border-radius: 6px;
  font: 500 12px/1.5 var(--mono); color: #fff; background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.card-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.card-author { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; font-size: 13.5px; color: var(--muted); }
.card-author img { width: 30px; height: 30px; padding: 6px; border-radius: 50%; border: 1px solid var(--line-strong); background: #11151f; object-fit: contain; }
.card-author strong { color: var(--text); font-weight: 600; }
.card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.card h3 a { text-decoration: none; }
.card h3 a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.card p { color: var(--muted); font-size: 15px; line-height: 1.55; }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; font: 400 12px/1 var(--mono); color: var(--faint); }
.tag { padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
.card-source { position: relative; z-index: 2; margin-left: auto; color: var(--muted); text-decoration: none; padding: 5px 0; }
.card-source:hover { color: var(--text); }

.card.upcoming { display: grid; place-items: center; min-height: 260px; border-style: dashed; border-color: var(--line-strong); background: transparent; text-align: center; padding: 32px; }
.card.upcoming:hover { transform: none; box-shadow: none; }
.card.upcoming p { max-width: 22em; }
.card.upcoming strong { display: block; color: var(--text); font: italic 400 26px/1.2 var(--serif); margin-bottom: 8px; }

/* Why */
.why-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 80px); align-items: start; }
.why-copy p { font-size: clamp(17px, 1.8vw, 19px); color: #c3c8d6; line-height: 1.7; }
.why-copy p + p { margin-top: 18px; }
.principles { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.principles li { display: grid; gap: 2px; padding: 16px 18px; background: var(--bg); }
.principles strong { font: 500 12px/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.principles span { color: var(--muted); font-size: 15px; }

/* Footer */
.footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 36px var(--gutter) 44px; border-top: 1px solid var(--line); color: var(--faint); font-size: 13px; }
.footer-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--muted); font-size: 14px; }
.footer-brand img { width: 26px; height: auto; opacity: 0.9; }
.footer-brand strong { color: var(--text); font-weight: 600; }
.footer-brand:hover strong { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 760px) {
  .topbar nav a:not(.by) { display: none; }
  .hero { align-items: end; padding-bottom: 140px; }
  .hero::before { background: linear-gradient(to bottom, rgba(6, 7, 12, 0.1) 20%, rgba(6, 7, 12, 0.86) 62%, var(--bg)); }
  .chamber-caption { justify-content: flex-start; text-align: left; }
  .why-grid { grid-template-columns: 1fr; }
}

/* 404 */
.notfound { min-height: 100svh; display: grid; align-content: center; gap: 22px; }
.notfound h1 { font: italic 400 clamp(40px, 7vw, 76px)/1.05 var(--serif); max-width: 14em; }