:root {
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-2xl:  30px;

  --shadow-1:
    0 1px 2px oklch(20% 0.03 265 / 0.04),
    0 2px 4px oklch(20% 0.03 265 / 0.04);
  --shadow-2:
    0 2px 6px oklch(20% 0.03 265 / 0.05),
    0 6px 16px oklch(20% 0.03 265 / 0.06);
  --shadow-3:
    0 4px 10px oklch(20% 0.03 265 / 0.06),
    0 12px 28px oklch(20% 0.03 265 / 0.08);
  --shadow-4:
    0 8px 16px oklch(20% 0.03 265 / 0.07),
    0 24px 52px oklch(20% 0.03 265 / 0.11);

  --shadow-overlay:
    0 12px 24px oklch(18% 0.02 265 / 0.09),
    0 32px 64px oklch(18% 0.02 265 / 0.16);

  --glass-bg:        color-mix(in oklab, var(--paper) 72%, transparent);
  --glass-bg-strong: color-mix(in oklab, var(--paper) 86%, transparent);
  --glass-blur:      blur(20px) saturate(180%);
  --glass-hairline:  color-mix(in oklab, var(--ink) 7%, transparent);

  --ease-apple: cubic-bezier(0.25, 0.1, 0.25, 1);

  --air-section: clamp(4.5rem, 7vw, 8rem);
  --air-hero:    clamp(5rem, 8vw, 9rem);

  scroll-behavior: smooth;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shadow-1: 0 1px 2px oklch(0% 0 0 / 0.28), 0 2px 4px oklch(0% 0 0 / 0.28);
    --shadow-2: 0 2px 6px oklch(0% 0 0 / 0.34), 0 6px 16px oklch(0% 0 0 / 0.40);
    --shadow-3: 0 4px 10px oklch(0% 0 0 / 0.40), 0 12px 28px oklch(0% 0 0 / 0.48);
    --shadow-4: 0 8px 16px oklch(0% 0 0 / 0.44), 0 24px 52px oklch(0% 0 0 / 0.56);
    --shadow-overlay: 0 12px 24px oklch(0% 0 0 / 0.44), 0 32px 64px oklch(0% 0 0 / 0.60);
    --glass-hairline: color-mix(in oklab, var(--ink) 14%, transparent);
  }
}
:root[data-theme="dark"] {
  --shadow-1: 0 1px 2px oklch(0% 0 0 / 0.28), 0 2px 4px oklch(0% 0 0 / 0.28);
  --shadow-2: 0 2px 6px oklch(0% 0 0 / 0.34), 0 6px 16px oklch(0% 0 0 / 0.40);
  --shadow-3: 0 4px 10px oklch(0% 0 0 / 0.40), 0 12px 28px oklch(0% 0 0 / 0.48);
  --shadow-4: 0 8px 16px oklch(0% 0 0 / 0.44), 0 24px 52px oklch(0% 0 0 / 0.56);
  --shadow-overlay: 0 12px 24px oklch(0% 0 0 / 0.44), 0 32px 64px oklch(0% 0 0 / 0.60);
  --glass-hairline: color-mix(in oklab, var(--ink) 14%, transparent);
}

.section {
  padding-block: var(--air-section);
}
.section--tight {
  padding-block: calc(var(--air-section) * 0.6);
}

.section--ruled {
  border-block-start-color: color-mix(in oklab, var(--ink) 5%, transparent);
}

.section-head {
  margin-block-end: clamp(2.5rem, 4vw, 4rem);
}

.display,
.hero__title,
.h1 {
  letter-spacing: -0.03em;
}

.eyebrow,
.card__eyebrow,
.section-head__eyebrow {
  letter-spacing: 0.18em;
}

.hero {
  --hero-bg:
    radial-gradient(125% 95% at 50% 8%,
      oklch(0.99 0.006 250) 0%,
      oklch(0.95 0.022 250) 52%,
      oklch(0.905 0.034 255) 100%);
  --hero-title-ink: var(--ink);
  --hero-lead-ink: var(--ink-2);
  --hero-dt-ink: var(--ink-3);
  --hero-dd-ink: var(--ink);
  --hero-icon: var(--accent);
  --hero-cd-ink: var(--ink);
  --hero-cd-label: var(--ink-3);
  --hero-halo-1: transparent;
  --hero-halo-2: oklch(1 0 0 / 0.34);
  --hero-halo-sm-1: transparent;
  --hero-halo-sm-2: oklch(1 0 0 / 0.42);
  --hero-hairline: color-mix(in oklab, var(--ink) 14%, transparent);
  --hero-glass-bg: color-mix(in oklab, var(--ink) 6%, transparent);
  --hero-glass-border: color-mix(in oklab, var(--ink) 20%, transparent);
  --hero-glass-ink: var(--ink);
  --hero-glass-bg-hover: color-mix(in oklab, var(--ink) 11%, transparent);
  --hero-glass-border-hover: color-mix(in oklab, var(--ink) 30%, transparent);
  --hero-glass-ink-hover: var(--ink);
  --hero-vignette: transparent;

  padding-block-start: clamp(1.5rem, 3vw, 2.5rem);
  padding-block-end: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--hero-bg);
  color: var(--hero-title-ink);
}

:root[data-theme="dark"] .hero {
  --hero-bg:
    radial-gradient(125% 95% at 50% 8%,
      #0a0e1c 0%, #070a14 55%, #04060e 100%);
  --hero-title-ink: oklch(0.985 0.004 250);
  --hero-lead-ink: oklch(0.92 0.008 250);
  --hero-dt-ink: oklch(0.82 0.012 250);
  --hero-dd-ink: oklch(0.97 0.006 250);
  --hero-icon: oklch(0.78 0.11 235);
  --hero-cd-ink: oklch(0.99 0.004 250);
  --hero-cd-label: oklch(0.8 0.012 250);
  --hero-halo-1: oklch(0 0 0 / 0.65);
  --hero-halo-2: oklch(0 0 0 / 0.6);
  --hero-halo-sm-1: oklch(0 0 0 / 0.9);
  --hero-halo-sm-2: oklch(0 0 0 / 0.72);
  --hero-hairline: oklch(1 0 0 / 0.14);
  --hero-glass-bg: oklch(1 0 0 / 0.14);
  --hero-glass-border: oklch(1 0 0 / 0.32);
  --hero-glass-ink: oklch(0.98 0.005 250);
  --hero-glass-bg-hover: oklch(1 0 0 / 0.2);
  --hero-glass-border-hover: oklch(1 0 0 / 0.42);
  --hero-glass-ink-hover: oklch(1 0 0);
  --hero-vignette:
    radial-gradient(circle at 50% 40%,
      transparent 30%,
      oklch(0.06 0.01 260 / 0.55) 72%,
      oklch(0.03 0.008 260 / 0.92) 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero {
    --hero-bg:
      radial-gradient(125% 95% at 50% 8%,
        #0a0e1c 0%, #070a14 55%, #04060e 100%);
    --hero-title-ink: oklch(0.985 0.004 250);
    --hero-lead-ink: oklch(0.92 0.008 250);
    --hero-dt-ink: oklch(0.82 0.012 250);
    --hero-dd-ink: oklch(0.97 0.006 250);
    --hero-icon: oklch(0.78 0.11 235);
    --hero-cd-ink: oklch(0.99 0.004 250);
    --hero-cd-label: oklch(0.8 0.012 250);
    --hero-halo-1: oklch(0 0 0 / 0.65);
    --hero-halo-2: oklch(0 0 0 / 0.6);
    --hero-halo-sm-1: oklch(0 0 0 / 0.9);
    --hero-halo-sm-2: oklch(0 0 0 / 0.72);
    --hero-hairline: oklch(1 0 0 / 0.14);
    --hero-glass-bg: oklch(1 0 0 / 0.14);
    --hero-glass-border: oklch(1 0 0 / 0.32);
    --hero-glass-ink: oklch(0.98 0.005 250);
    --hero-glass-bg-hover: oklch(1 0 0 / 0.2);
    --hero-glass-border-hover: oklch(1 0 0 / 0.42);
    --hero-glass-ink-hover: oklch(1 0 0);
    --hero-vignette:
      radial-gradient(circle at 50% 40%,
        transparent 30%,
        oklch(0.06 0.01 260 / 0.55) 72%,
        oklch(0.03 0.008 260 / 0.92) 100%);
  }
}

.hero__title {
  color: var(--hero-title-ink);
  text-shadow:
    0 1px 2px var(--hero-halo-1),
    0 0 16px var(--hero-halo-2),
    0 2px 34px var(--hero-halo-2);
}

.hero__lead {
  color: var(--hero-lead-ink);
  text-shadow:
    0 0 1px var(--hero-halo-sm-1),
    0 0 3px var(--hero-halo-sm-1),
    0 0 7px var(--hero-halo-sm-2),
    0 0 13px var(--hero-halo-sm-2),
    0 1px 22px var(--hero-halo-sm-2);
}

.hero .hero__facts dt {
  color: var(--hero-dt-ink);
}
.hero .hero__facts dd {
  color: var(--hero-dd-ink);
}
.hero .hero__facts .icon {
  color: var(--hero-icon);
}
.hero .countdown__value {
  color: var(--hero-cd-ink);
}
.hero .countdown__label,
.hero .countdown__sep {
  color: var(--hero-cd-label);
}
.hero .hero__facts dt,
.hero .hero__facts dd,
.hero .countdown__value,
.hero .countdown__label,
.hero .countdown__sep {
  text-shadow:
    0 0 1px var(--hero-halo-sm-1),
    0 0 3px var(--hero-halo-sm-1),
    0 0 8px var(--hero-halo-sm-2),
    0 1px 16px var(--hero-halo-sm-2);
}

.hero .hero__top {
  border-block-end-color: var(--hero-hairline);
}
.hero .hero__top .eyebrow {
  color: var(--hero-dt-ink);
}
.hero .hero__top .meta-stamp {
  color: var(--hero-cd-ink);
}
.hero .hero__top .meta-stamp__sep {
  color: var(--hero-cd-label);
}
.hero .hero__top .eyebrow,
.hero .hero__top .meta-stamp {
  text-shadow:
    0 0 1px var(--hero-halo-sm-1),
    0 0 3px var(--hero-halo-sm-1),
    0 1px 14px var(--hero-halo-sm-2);
}

.hero > .shell {
  position: relative;
  z-index: 1;
}

.hero .btn--secondary {
  background: var(--hero-glass-bg);
  border-color: var(--hero-glass-border);
  color: var(--hero-glass-ink);
  box-shadow:
    0 1px 2px oklch(0 0 0 / 0.18),
    inset 0 1px 0 oklch(1 0 0 / 0.22);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero .btn--secondary {
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    backdrop-filter: blur(10px) saturate(150%);
  }
}
@media (hover: hover) and (pointer: fine) {
  .hero .btn--secondary:hover {
    background: var(--hero-glass-bg-hover);
    border-color: var(--hero-glass-border-hover);
    color: var(--hero-glass-ink-hover);
  }
}

.hero__stamp {
  border-block-start-color: var(--hero-hairline);
}

.hero__orb {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: block;
}
.hero__orb-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero__orb-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--hero-vignette);
}
@media (prefers-reduced-motion: reduce) {
  .hero__orb-canvas { display: none; }
}

@media (max-width: 40rem) {
  .hero__orb-canvas,
  .hero__orb-vignette { display: none; }
}

.plate__box {
  border-radius: var(--r-lg);
}
.plate__img,
.plate__box > img {
  border-radius: var(--r-lg);
}

.plate__caption {
  display: none;
}

.btn {
  border-radius: var(--r-pill);
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    box-shadow var(--dur) var(--ease-apple),
    scale var(--dur-fast) var(--ease-apple);
}
.btn:active { translate: none; }
.btn--primary:active,
.btn--secondary:active,
.btn--on-accent:active,
.btn--ghost:active { scale: 0.97; }

.btn--primary {
  box-shadow: var(--shadow-1), inset 0 1px 0 oklch(100% 0 0 / 0.16);
}
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover {
    box-shadow: var(--shadow-2), inset 0 1px 0 oklch(100% 0 0 / 0.18);
  }
}
.btn--primary:active { box-shadow: var(--shadow-1); }

.btn--secondary {
  background: color-mix(in oklab, var(--ink) 5%, transparent);
  border-color: color-mix(in oklab, var(--ink) 9%, transparent);
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn--secondary:hover {
    background: color-mix(in oklab, var(--ink) 9%, transparent);
    border-color: color-mix(in oklab, var(--ink) 14%, transparent);
    color: var(--ink);
  }
}

.btn[aria-disabled="true"] {
  border-radius: var(--r-pill);
  box-shadow: none;
}

.card {
  border-radius: var(--r-xl);
  background: color-mix(in oklab, var(--paper-raised) 90%, transparent);
  border: var(--bw) solid var(--glass-hairline);
  box-shadow:
    var(--shadow-2),
    inset 0 1px 0 oklch(100% 0 0 / 0.5);
  transition: border-color var(--dur) var(--ease);
}
.card::after { display: none; }

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card {
    background: color-mix(in oklab, var(--paper-raised) 58%, transparent);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
}

@media (hover: hover) and (pointer: fine) {
  .card:has(a:hover),
  .card--link:hover {
    border-color: var(--accent-hover);
  }
}
.card:has(a:active),
.card--link:active {
  border-color: var(--accent-active);
}

.empty-state {
  border-radius: var(--r-xl);
  border: var(--bw) solid var(--glass-hairline);
  background: color-mix(in oklab, var(--paper-raised) 90%, transparent);
  box-shadow: var(--shadow-2), inset 0 1px 0 oklch(100% 0 0 / 0.5);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .empty-state {
    background: color-mix(in oklab, var(--paper-raised) 58%, transparent);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
}

.nav-group__panel {
  border-radius: var(--r-md);
}

.card__plate,
.card__plate img,
.card__media,
.card__media img {
  border-radius: calc(var(--r-xl) - var(--card-pad, 0px));
  overflow: clip;
}

@supports (backdrop-filter: blur(1px)) {
  .site-header::before {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
  .site-header[data-scrolled]::before {
    background: var(--glass-bg-strong);
  }
}
.site-header::before {
  box-shadow: inset 0 1px 0 var(--glass-hairline);
}
.site-header[data-scrolled] {
  box-shadow: var(--shadow-2);
}

.site-footer__mailto {
  flex-wrap: wrap;
}
.site-footer__email {
  overflow-wrap: anywhere;
}

.site-footer__mailto .icon {
  display: none;
}
@media (min-width: 75.0625rem) {
  .site-footer__nav     { grid-column: 4 / span 6; }
  .site-footer__contact { grid-column: 10 / span 3; }
}

.field__input,
.field__control,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="number"],
textarea,
select {
  border-radius: var(--r-md);
}

.disclose__panel.is-collapsed {
  display: none;
}

.disclose__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
  padding: 0.7em 1.25em;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  color: var(--accent);
  background: color-mix(in oklab, var(--ink) 4%, transparent);
  border: var(--bw) solid color-mix(in oklab, var(--ink) 9%, transparent);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur) var(--ease-apple),
    scale var(--dur-fast) var(--ease-apple);
}
@media (hover: hover) and (pointer: fine) {
  .disclose__toggle:hover {
    background: color-mix(in oklab, var(--ink) 7%, transparent);
    border-color: color-mix(in oklab, var(--accent) 40%, transparent);
    box-shadow: var(--shadow-1);
  }
}
.disclose__toggle:active { scale: 0.97; }

.disclose__toggle-chevron {
  inline-size: 0.5em;
  block-size: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  rotate: 45deg;
  translate: 0 -0.12em;
  transition: rotate var(--dur) var(--ease-apple);
}
.disclose__toggle.is-open .disclose__toggle-chevron {
  rotate: -135deg;
  translate: 0 0.12em;
}

@keyframes disclose-in {
  from { opacity: 0; translate: 0 0.75rem; }
  to   { opacity: 1; translate: 0 0; }
}
.disclose__panel.is-revealing {
  animation: disclose-in var(--dur) var(--ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  .btn--primary:active,
  .btn--secondary:active,
  .btn--on-accent:active,
  .btn--ghost:active { scale: 1; }
  .btn, .card { transition-duration: 1ms; }
  .disclose__toggle:active { scale: 1; }
  .disclose__toggle-chevron { transition-duration: 1ms; }
  .disclose__panel.is-revealing { animation: none; }
}

@media (prefers-reduced-transparency: reduce) {
  body::before { display: none; }
  .site-header::before { background: var(--paper); }
  .card,
  .empty-state { background: var(--paper-raised); }
  .nav-group__panel { background: var(--paper-raised); }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header::before,
    .card,
    .empty-state,
    .nav-group__panel {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
    .site-header[data-scrolled]::before { background: var(--paper); }
    .card,
    .empty-state { background: var(--paper-raised); }
    .nav-group__panel { background: var(--paper-raised); }
  }
}

@media (prefers-contrast: more) {
  .card,
  .empty-state { border-color: var(--rule-strong); background: var(--paper-raised); }
  .btn--secondary { border-color: var(--rule-strong); }
  .section--ruled { border-block-start-color: var(--rule); }
  .hero__stamp { border-block-start-color: var(--rule); }
  body::before { display: none; }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .card,
    .empty-state {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }
}