:root {
  --bg: #080c14;
  --bg-2: #10182a;
  --fg: #f3efe6;
  --muted: #9c968c;
  --faint: #6e695f;
  --line: #2a2824;
  --line-strong: #45413a;
  --ember: #ff7a18;
  --hot: #fffaf3;
  --sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --display: clamp(3.7rem, 8.4vw, 7.15rem);
  --title: clamp(3.25rem, 7.4vw, 6.25rem);
  --statement: clamp(2.35rem, 5.6vw, 4.6rem);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  background: var(--bg);
  color: var(--fg);
  color-scheme: dark;
  scrollbar-color: var(--line-strong) var(--bg);
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  min-height: 100%;
  color: var(--fg);
  font-family: var(--sans);
  text-rendering: optimizeLegibility;
  background-color: #080c14;
  background-image:
    radial-gradient(ellipse 58% 48% at 92% 16%, rgb(36 72 150 / 0.5), transparent 68%),
    radial-gradient(ellipse 42% 36% at 0% 100%, rgb(18 48 110 / 0.42), transparent 70%),
    linear-gradient(180deg, #080c16 0%, #070b12 42%, #0b1426 100%);
}

::selection { background: var(--ember); color: #1a0c00; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
button, [role="button"] { cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.shell { display: flex; min-height: 100svh; flex-direction: column; }
.shell > main { flex: 1; }

.format {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  padding-right: 0.12em;
  background-image: linear-gradient(100deg, #ff6a00 0%, #ffb000 48%, #ffe08a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding-inline: 1.15rem;
  border-radius: 0.65rem;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.011em;
  line-height: 1;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--fg); color: var(--bg); }
.btn-primary:hover { background: var(--hot); }
.btn-ghost { color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn-ghost:hover { background: rgb(243 239 230 / 0.06); }

.link-ember {
  color: var(--ember);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: rgb(255 122 24 / 0.45);
}
.link-ember:hover { text-decoration-color: var(--ember); }

.kicker {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: rgb(7 7 8 / 0.8);
  backdrop-filter: blur(12px);
}
.bar, .wrap, .foot-in {
  width: min(72rem, calc(100% - 2.5rem));
  margin-inline: auto;
}
@media (min-width: 640px) {
  .bar, .wrap, .foot-in { width: min(72rem, calc(100% - 4rem)); }
}
.bar { display: flex; height: 4rem; align-items: center; gap: 1rem; }
.brand { display: flex; align-items: center; gap: 0.6rem; color: var(--fg); }
.brand img, .brand svg { height: 1.75rem; width: auto; display: block; }
.brand span { font-family: var(--serif); font-size: 1.125rem; letter-spacing: -0.02em; }

.desk { margin-left: auto; display: none; align-items: center; gap: 1.5rem; }
.desk a, .links-btn { font-size: 0.875rem; color: var(--muted); }
.desk a:hover, .links-btn:hover, .desk a.active { color: var(--fg); }
.links-btn { display: inline-flex; height: 2.75rem; align-items: center; gap: 0.35rem; }
.links-wrap { position: relative; }
.links-panel {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  width: 14rem;
  border: 1px solid var(--line);
  background: var(--bg-2);
  padding: 0.35rem;
}
.links-panel a, .mobile-links a { display: block; padding: 0.65rem 0.75rem; font-size: 0.875rem; color: var(--muted); }
.links-panel a:hover { background: var(--bg); color: var(--fg); }

.menu-btn { margin-left: auto; display: inline-flex; height: 2.75rem; align-items: center; font-size: 0.875rem; }
.mobile {
  position: fixed;
  inset: 4rem 0 0 0;
  overflow: auto;
  background: var(--bg);
  padding: 2rem 1.25rem;
}
.mobile nav a {
  display: block;
  border-bottom: 1px solid var(--line);
  padding: 1rem 0;
  font-family: var(--serif);
  font-size: 2.25rem;
  letter-spacing: -0.03em;
  color: var(--muted);
}
.mobile nav a.active, .mobile nav a:hover { color: var(--fg); }
.mobile-links { margin-top: 2rem; display: flex; flex-direction: column; }
.mobile-links .kicker { margin-bottom: 0.25rem; }
.mobile-links a { padding: 0.6rem 0; font-size: 1.125rem; color: var(--fg); }

@media (min-width: 768px) {
  .desk { display: flex; }
  .menu-btn, .mobile { display: none !important; }
}

.hero { position: relative; min-height: 100svh; }
.hero iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--bg); }
.hero-scrim {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 48% 58% at 84% 38%, rgb(48 92 180 / 0.38), transparent 70%),
    linear-gradient(180deg, rgb(8 12 22 / 0.82) 0%, rgb(8 14 28 / 0.16) 28%, rgb(10 22 48 / 0.08) 50%, rgb(8 16 36 / 0.5) 74%, rgb(8 12 24 / 0.94) 100%),
    linear-gradient(90deg, rgb(8 12 22 / 0.88) 0%, rgb(8 14 28 / 0.4) 34%, rgb(16 36 80 / 0.08) 64%, rgb(12 32 72 / 0.28) 100%);
}
@media (max-width: 800px) {
  .hero-scrim {
    background:
      radial-gradient(ellipse 70% 50% at 70% 30%, rgb(40 80 160 / 0.28), transparent 70%),
      linear-gradient(180deg, rgb(8 12 22 / 0.88) 0%, rgb(8 16 32 / 0.3) 32%, rgb(10 22 48 / 0.22) 55%, rgb(8 14 30 / 0.82) 80%, rgb(8 12 24 / 0.96) 100%);
  }
}
.hero-copy {
  pointer-events: none;
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 100svh;
  align-items: flex-end;
}
.hero-copy .inner { pointer-events: auto; max-width: 36rem; padding: 7rem 0 3.5rem; }
@media (min-width: 640px) { .hero-copy .inner { padding-bottom: 5rem; } }
.hero-mark { display: none; }
.display {
  font-family: var(--serif);
  font-size: var(--display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.035em;
  padding-bottom: 0.08em;
}
.lede { margin-top: 1.75rem; max-width: 28rem; font-size: 1.25rem; line-height: 1.35; color: var(--muted); }
@media (min-width: 640px) { .lede { font-size: 1.5rem; } }
.actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hint { margin-top: 1.5rem; max-width: 24rem; font-size: 0.75rem; line-height: 1.5; letter-spacing: 0.02em; color: var(--faint); }
@media (max-width: 767px) { .hint { display: none; } }

.band { border-top: 1px solid var(--line); background: transparent; }
.band-in { padding: 6rem 0; }
@media (min-width: 1024px) { .band-in { padding: 9rem 0; } }
.split { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) {
  .split { grid-template-columns: repeat(12, 1fr); gap: 4rem; }
  .split-copy { grid-column: span 5; }
  .split-text { grid-column: 7 / span 6; padding-top: 4rem; }
  .facts { grid-column: 1 / -1; margin-top: 2rem; }
}
.title {
  margin-top: 1rem;
  font-family: var(--serif);
  font-size: var(--title);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.035em;
  padding-bottom: 0.08em;
}
.prose { font-size: 1.125rem; line-height: 1.65; color: var(--muted); }
.facts { margin-top: 1rem; border-block: 1px solid var(--line); }
.fact { display: grid; gap: 0.25rem; border-top: 1px solid var(--line); padding: 1.25rem 0; }
.fact:first-child { border-top: 0; }
@media (min-width: 640px) {
  .fact { grid-template-columns: 4fr 8fr; align-items: baseline; gap: 1.5rem; }
}
.fact dt { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
.fact dd { margin: 0; font-family: var(--serif); font-size: 1.5rem; letter-spacing: -0.02em; }
@media (min-width: 640px) { .fact dd { font-size: 1.875rem; } }

.type {
  border-top: 1px solid var(--line);
  background:
    radial-gradient(ellipse 70% 80% at 80% 0%, rgb(32 64 140 / 0.35), transparent 60%),
    linear-gradient(180deg, #0c1630 0%, #121c36 100%);
}
.type-in { padding: 5rem 0; }
@media (min-width: 640px) { .type-in { padding: 7rem 0; } }
.statement {
  font-family: var(--serif);
  font-size: var(--statement);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.03em;
  padding-bottom: 0.08em;
}
.caret {
  display: inline-block;
  width: 0.055em;
  height: 0.78em;
  margin-left: 0.08em;
  background: var(--ember);
  vertical-align: -0.06em;
  animation: blink 0.85s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@keyframes nudge {
  0%, 100% { transform: translateY(-5px); }
  50% { transform: translateY(5px); }
}
.motif { display: inline-flex; animation: nudge 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .caret, .motif { animation: none; }
  .btn:active { transform: none; }
}

.page { padding: 7rem 0 6rem; }
@media (min-width: 640px) { .page { padding-top: 9rem; } }
.page-grid { display: grid; gap: 3.5rem; }
@media (min-width: 1024px) {
  .page-grid { grid-template-columns: 7fr 5fr; gap: 4rem; }
  .sheet { border-top: 0; border-left: 1px solid var(--line); padding-left: 3rem; }
}
.sheet { border-top: 1px solid var(--line); }
.sheet div { border-bottom: 1px solid var(--line); padding: 1.25rem 0; }
.sheet div:last-child { border-bottom: 0; }
.sheet dd { margin: 0.5rem 0 0; font-family: var(--serif); font-size: 1.5rem; letter-spacing: -0.02em; }
.sig { font-family: var(--serif); font-size: 1.5rem; line-height: 1.35; color: var(--fg); }
.stack { margin-top: 2rem; max-width: 36rem; display: grid; gap: 1.25rem; }

.manifesto {
  margin-top: 2.5rem;
  max-width: 48rem;
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.35;
}
@media (min-width: 640px) { .manifesto { font-size: 1.875rem; } }
.rule { margin: 4rem 0; display: flex; align-items: center; gap: 1.5rem; }
.rule i { height: 1px; flex: 1; background: var(--line); }
.person { display: grid; gap: 0.75rem; border-top: 1px solid var(--line); padding: 2.5rem 0; }
@media (min-width: 640px) {
  .person { grid-template-columns: 2fr 5fr 5fr; gap: 1.5rem; padding: 3rem 0; }
}
.person h2 { font-family: var(--serif); font-size: 2.25rem; letter-spacing: -0.03em; }
@media (min-width: 640px) { .person h2 { font-size: 3rem; } }
.role { margin-top: 0.75rem; max-width: 16rem; font-size: 0.875rem; line-height: 1.5; color: var(--faint); }
.bio { font-size: 1.125rem; line-height: 1.65; color: var(--muted); }
@media (min-width: 640px) { .bio { padding-top: 0.5rem; } }

.contact-grid { margin-top: 3rem; display: grid; border-top: 1px solid var(--line); }
@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid section:first-child { border-right: 1px solid var(--line); padding-right: 3.5rem; }
  .contact-grid section:last-child { padding-left: 3.5rem; }
  .contact-grid section:last-child h2 { border-top: 0; }
}
.contact-grid h2 { padding-top: 2rem; font-family: var(--serif); font-size: 1.875rem; letter-spacing: -0.02em; }
.contact-grid section:last-child h2 { border-top: 1px solid var(--line); }
.mail { border-bottom: 1px solid var(--line); padding: 2rem 0; }
.mail-row { margin-top: 0.75rem; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1.5rem; }
.mail a { font-family: var(--serif); font-size: 1.5rem; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.mail a:hover { color: var(--ember); }
@media (min-width: 640px) { .mail a { font-size: 1.875rem; } }
.copy {
  height: 2.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}
.copy:hover { color: var(--fg); }
.handle { margin-top: 0.75rem; font-family: var(--serif); font-size: 2.25rem; letter-spacing: -0.03em; }
@media (min-width: 640px) { .handle { font-size: 3rem; } }
.legal { max-width: 42rem; }
.legal .stack { margin-top: 2.5rem; }

.site-footer { border-top: 1px solid var(--line); }
.foot-in {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem 0;
  font-size: 0.875rem;
  color: var(--faint);
}
@media (min-width: 640px) {
  .foot-in { flex-direction: row; align-items: center; justify-content: space-between; }
}
.foot-in a:hover { color: var(--fg); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}