:root {
  --bg: oklch(25% .006 285);
  /* Smoked glass: a warm, see-through near-black that blurs the background light behind it. */
  --surface: oklch(18% .008 60 / .55);
  --surface-2: oklch(24% .008 60 / .6);
  --glass-blur: blur(24px) saturate(140%);
  --glass-edge: oklch(100% 0 0 / .2);
  --fg: oklch(96.7% .004 90);
  --muted: oklch(68% .012 90);
  --soft: oklch(96.7% .004 90 / .74);
  --line: oklch(100% 0 0 / .12);
  --line-strong: oklch(100% 0 0 / .24);
  --amber: oklch(82% .15 78);
  --danger: oklch(72% .17 28);

  --display: Anton, Impact, ui-sans-serif, sans-serif;
  --serif: "Instrument Serif", ui-serif, Georgia, serif;
  --sans: "Inter Tight", ui-sans-serif, system-ui, sans-serif;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.55, 0, 1, .45);
  --ease-std: cubic-bezier(.2, 0, 0, 1);
  --pad-x: clamp(24px, 3vw, 48px);
  --shadow: 0 1px 2px oklch(0% 0 0 / .3), 0 12px 32px -12px oklch(0% 0 0 / .6);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font: 400 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

em { font-family: var(--serif); font-style: italic; font-weight: 400; }
a { color: inherit; text-decoration: none; }

.label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1;
}
.muted { color: var(--muted); }
.soft { color: var(--soft); }
.condensed { font-family: var(--display); letter-spacing: .02em; }

/* Background light: two soft fields, drifting slowly enough to read as still. */
.ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.field-light {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  animation: drift 40s ease-in-out infinite;
}
.field-warm { left: -20%; top: -35%; width: 80vw; height: 80vw; background: radial-gradient(closest-side, oklch(80% .17 72 / .42), oklch(80% .17 72 / .14) 55%, transparent); }
.field-cool { right: -28%; top: 6%; width: 66vw; height: 66vw; background: radial-gradient(closest-side, oklch(66% .23 258 / .6), oklch(66% .23 258 / .2) 55%, transparent); animation-delay: -20s; }
@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(2%, -2%, 0); }
}

/* Layout */
.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* The orbit is meant to run off the bottom edge; nothing inside needs to escape. */
  overflow: clip;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(24px, 3vw, 32px) var(--pad-x);
}
.logo { font-family: var(--display); font-size: clamp(24px, 2.4vw, 32px); letter-spacing: .02em; line-height: 1; }
.logo span { color: var(--amber); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }

.hero {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 var(--pad-x);
}
.hero-copy { position: relative; z-index: 2; max-width: 62vw; padding-top: 10vh; padding-bottom: 6vh; }

.headline { margin: 28px 0 32px; font-weight: 400; }
.headline .line {
  display: block;
  font-family: var(--display);
  font-size: clamp(60px, 9.2vw, 148px);
  line-height: .86;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.headline .line + .line { margin-top: .12em; }
.headline em {
  color: var(--amber);
  font-size: .78em;
  letter-spacing: -.03em;
  text-transform: none;
  margin-right: .04em;
}

.lede { margin: 0 0 40px; color: var(--muted); font-size: clamp(17px, 1.3vw, 20px); font-weight: 300; }
.lede em { color: var(--fg); font-size: 1.1em; }

.cta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

/* Buttons */
.btn {
  font: inherit;
  border: 0;
  cursor: pointer;
  color: inherit;
  background: none;
  -webkit-tap-highlight-color: transparent;
}
.btn-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px 48px;
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  box-shadow: var(--shadow);
  transition: background-color .25s var(--ease-std), transform .2s var(--ease-std), opacity .2s;
}
.btn-pill:hover { background: oklch(100% 0 0); }
.btn-pill:active { transform: scale(.98); }
.btn-pill:disabled { cursor: progress; }
.btn-icon { display: inline-block; transition: transform .35s var(--ease-out), opacity .2s; }
.btn:hover .btn-icon { transform: translateX(4px); }
.btn-block { width: 100%; padding: 20px 24px; margin-top: 8px; }
.btn-nav { display: none; }

/* Busy state: the arrow gives way to a small spinner, width never changes. */
.btn.is-busy .btn-icon { position: relative; color: transparent; transform: none; }
.btn.is-busy .btn-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  color: var(--bg);
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn-round {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  font-size: 14px;
  transition: background-color .25s var(--ease-std), border-color .25s var(--ease-std), transform .2s var(--ease-std);
}
.btn-round:hover { background: oklch(100% 0 0 / .06); border-color: oklch(100% 0 0 / .32); }
.btn-round:active { transform: scale(.95); }

:is(.btn-pill, .btn-round, .chip, .modal-close, .btn-text, .link):focus-visible {
  outline: 2px solid oklch(96.7% .004 90 / .7);
  outline-offset: 3px;
}

/* Edition card */
.edition-card {
  position: absolute;
  z-index: 2;
  top: -3.5%;
  right: calc(var(--pad-x) + 2vw);
  width: 280px;
  padding: 22px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: border-color .5s var(--ease-out);
}
.edition-card > :not(.fill-layer) { position: relative; z-index: 1; }
.edition-card.is-filled { border-color: var(--fg); }

/* Fill effect (see attachFill): an inverted copy of the content, revealed by a circle that grows
   from where the pointer entered and shrinks toward where it left. */
.fill-layer {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  clip-path: circle(0px at var(--fx, 50%) var(--fy, 50%));
  transition: clip-path .6s var(--ease-out);
}
.fill-layer.no-transition { transition: none; }
.is-filled > .fill-layer { clip-path: circle(var(--fr, 400px) at var(--fx, 50%) var(--fy, 50%)); }

.card-invert { padding: 22px; background: var(--fg); color: var(--bg); }
.card-invert :is(.label, .edition-body, .spots-count, .edition-cta) { color: oklch(14.5% .006 285 / .62); }
.card-invert .spots-count strong { color: var(--bg); }
.card-invert .spots-track { background: oklch(14.5% .006 285 / .14); }
.card-invert .edition-top { border-color: oklch(14.5% .006 285 / .14); }
.card-invert .btn-round { border-color: oklch(14.5% .006 285 / .25); }
.edition-card:has(.btn-round:active) .card-invert .btn-round { transform: scale(.95); }

/* White buttons fill dark; a hairline keeps the pill's edge visible against the page. */
.btn-invert {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: inherit;
  background: var(--bg);
  color: var(--fg);
  box-shadow: inset 0 0 0 1px oklch(96.7% .004 90 / .85);
}
.btn-invert .btn-icon::after { color: var(--fg); }
.edition-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.edition-top .condensed { font-size: 20px; line-height: 1; }
.edition-title { margin: 18px 0 6px; font-size: 22px; font-weight: 500; letter-spacing: -.01em; line-height: 1.15; }
.edition-body { margin: 0 0 22px; color: var(--muted); font-size: 14px; line-height: 1.45; }

.spots { margin-bottom: 22px; }
.spots-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.spots-count { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.spots-count strong { color: var(--fg); font-size: 15px; font-weight: 500; }
.spots-track { height: 4px; border-radius: 4px; background: oklch(100% 0 0 / .1); overflow: hidden; }
.spots-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, oklch(80% .16 72), oklch(72% .12 300));
  transform: scaleX(calc(var(--claimed) / var(--total)));
  transform-origin: left;
  animation: spots-fill 1.4s var(--ease-out) 1s both;
}
@keyframes spots-fill { from { transform: scaleX(0); } }

.edition-foot { display: flex; justify-content: space-between; align-items: center; }
.edition-cta { font-size: 14px; font-weight: 500; color: var(--soft); }

/* Orbit: two rings of handles turning in opposite directions. Each pill travels its ring on its own
   transform (rotate out, push to the radius, rotate back so the text stays upright), offset by a
   negative delay. A shared rotating wrapper would inflate the page's scroll area at diagonal angles. */
.orbit {
  --rad-a: 48cqi;
  --rad-b: 26cqi;
  --spin-a: 140s;
  --spin-b: 90s;
  container-type: inline-size;
  position: absolute;
  z-index: 1;
  right: calc(2vw + min(5vw, 80px));
  bottom: -13vh;
  width: min(37vw, 520px);
  aspect-ratio: 1;
}
.ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid oklch(100% 0 0 / .07);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.ring-a { width: calc(var(--rad-a) * 2); height: calc(var(--rad-a) * 2); border-color: oklch(100% 0 0 / .1); }
.ring-b { width: calc(var(--rad-b) * 2); height: calc(var(--rad-b) * 2); border-color: oklch(100% 0 0 / .1); }
.orbit-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  transform: translate(-50%, -50%);
  font-size: clamp(22px, 2vw, 34px);
}
.pill {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: oklch(18% .008 60 / .78);
  color: var(--soft);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.pill-outer { --rad: var(--rad-a); --spin: var(--spin-a); --dir: normal; }
.pill-inner { --rad: var(--rad-b); --spin: var(--spin-b); --dir: reverse; }
@keyframes orbit {
  from { transform: rotate(0deg) translateX(var(--rad)) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(var(--rad)) rotate(-360deg); }
}
.orbit-label {
  position: absolute;
  top: 12%;
  right: -76px;
  writing-mode: vertical-rl;
}

.footer {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px var(--pad-x) clamp(24px, 3vw, 32px);
}
.early-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  color: var(--soft);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  line-height: 1;
  transition: color .25s var(--ease-std);
}
.early-link:hover { color: var(--fg); }
.early-link:focus-visible { outline: 2px solid oklch(96.7% .004 90 / .7); outline-offset: 4px; }
.socials { display: flex; gap: 24px; }
.link {
  color: var(--muted);
  padding: 4px 0;
  background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0 1px;
  transition: color .25s var(--ease-std), background-size .4s var(--ease-out);
}
.link:hover { color: var(--fg); background-size: 100% 1px; }

/* ---------- Entrance: one pass on load, then everything is still. ---------- */
.reveal, .reveal-line {
  animation: reveal .9s var(--ease-out) both;
  animation-delay: calc(var(--d, 0) * 80ms + 60ms);
}
.reveal-line { animation-name: reveal-line; animation-duration: 1.1s; }
/* Sits on the bottom edge, so it fades without rising to avoid a momentary scrollbar. */
.footer.reveal { animation-name: fade; }
@keyframes reveal {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
}
@keyframes reveal-line {
  from { opacity: 0; transform: translate3d(0, .35em, 0); }
}

.ring { animation: ring-in 1.4s var(--ease-out) both; }
.ring-b { animation-delay: .35s; }
.ring-a { animation-delay: .5s; }
@keyframes ring-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.92); }
}
.orbit-core { animation: fade .9s var(--ease-out) .3s both; }
.pill {
  animation: fade .8s var(--ease-out) both, orbit var(--spin) linear infinite var(--dir);
  animation-delay: calc(.7s + var(--i) * 60ms), var(--dl);
}
.orbit-label { animation: fade 1s var(--ease-out) 1.2s both; }
@keyframes fade { from { opacity: 0; } }

/* ---------- Modal ---------- */
/* Top-anchored, so switching between steps of different heights never moves the top edge. */
dialog {
  margin: clamp(12px, 14vh, 150px) auto auto;
  width: min(460px, calc(100% - 24px));
  max-width: none;
  max-height: calc(100dvh - clamp(12px, 14vh, 150px) - 12px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 26px 30px 30px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  color: var(--fg);
  box-shadow: 0 1px 2px oklch(0% 0 0 / .3), 0 40px 80px -24px oklch(0% 0 0 / .7);
}
dialog[open] { animation: modal-in .5s var(--ease-out); }
dialog[open]::backdrop { animation: fade .5s var(--ease-out); }
dialog.closing { animation: modal-out .2s var(--ease-in) forwards; }
dialog.closing::backdrop { animation: fade-out .2s var(--ease-in) forwards; }
dialog::backdrop { background: oklch(14% .006 285 / .6); }
@keyframes modal-in  { from { opacity: 0; transform: translate3d(0, 16px, 0) scale(.97); } }
@keyframes modal-out { to   { opacity: 0; transform: translate3d(0, 8px, 0) scale(.98); } }
@keyframes fade-out  { to   { opacity: 0; } }

.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.modal-close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-right: -8px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: color .2s var(--ease-std), background-color .2s var(--ease-std), transform .3s var(--ease-out);
}
.modal-close:hover { color: var(--fg); background: oklch(100% 0 0 / .06); transform: rotate(90deg); }

.progress { height: 2px; margin-bottom: 26px; border-radius: 2px; background: var(--line); overflow: hidden; }
.progress span {
  display: block;
  height: 100%;
  background: var(--fg);
  transform: scaleX(var(--p, .333));
  transform-origin: left;
  transition: transform .6s var(--ease-out);
}

/* Each step's content arrives in a short stagger. */
[data-step]:not([hidden]) > * { animation: step-in .5s var(--ease-out) both; }
[data-step]:not([hidden]) > :nth-child(2) { animation-delay: 50ms; }
[data-step]:not([hidden]) > :nth-child(3) { animation-delay: 100ms; }
[data-step]:not([hidden]) > :nth-child(4) { animation-delay: 150ms; }
[data-step]:not([hidden]) > :nth-child(5) { animation-delay: 200ms; }
@keyframes step-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } }

:is(dialog, .gate) h2 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 38px;
  line-height: .95;
  letter-spacing: .005em;
  text-transform: uppercase;
}
:is(dialog, .gate) h2 em { color: var(--amber); text-transform: none; font-size: 1.08em; letter-spacing: -.02em; }
.modal-sub { margin: 0 0 24px; color: var(--muted); font-size: 15px; font-weight: 300; }
.modal-sub strong { color: var(--fg); font-weight: 500; word-break: break-all; }

.field { display: block; margin-bottom: 16px; }
.field-label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  transition: color .2s var(--ease-std);
}
.field:focus-within .field-label { color: var(--fg); }
input {
  display: block;
  width: 100%;
  padding: 14px 16px;
  font: 400 16px/1.3 var(--sans);
  color: var(--fg);
  background: oklch(100% 0 0 / .035);
  border: 1px solid oklch(100% 0 0 / .13);
  border-radius: 12px;
  outline: none;
  transition: border-color .2s var(--ease-std), background-color .2s var(--ease-std);
}
input::placeholder { color: oklch(68% .012 90 / .5); }
input:hover { border-color: var(--line-strong); }
input:focus { border-color: oklch(96.7% .004 90 / .55); background: oklch(100% 0 0 / .06); }

.prefixed { position: relative; display: block; }
.prefix { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.prefixed input { padding-left: 34px; }

.otp-input { text-align: center; font-size: 26px; letter-spacing: .5em; padding-left: calc(16px + .5em); font-variant-numeric: tabular-nums; }

#turnstile:not(:empty) { margin: 4px 0 16px; min-height: 65px; }

.form-error { margin: 0 0 10px; color: var(--danger); font-size: 14px; }
.form-error:not([hidden]) { animation: error-in .3s var(--ease-out); }
@keyframes error-in { from { opacity: 0; transform: translate3d(0, -4px, 0); } }
.form-error.shake { animation: shake .4s var(--ease-std); }
@keyframes shake {
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

.btn-text {
  display: block;
  margin: 18px auto 0;
  padding: 6px 4px;
  border: 0;
  background: none;
  color: var(--muted);
  font: 400 14px/1.4 var(--sans);
  cursor: pointer;
  transition: color .2s var(--ease-std);
}
.btn-text:hover { color: var(--fg); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chip {
  padding: 10px 16px;
  font: 400 14px/1 var(--sans);
  color: var(--soft);
  background: oklch(100% 0 0 / .035);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .25s var(--ease-std), border-color .25s var(--ease-std), color .25s var(--ease-std), transform .15s var(--ease-std);
}
.chip:hover { border-color: var(--line-strong); color: var(--fg); }
.chip:active { transform: scale(.96); }
.chip[aria-checked="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }

/* ---------- Welcome (/welcome) ---------- */
.status-label { display: inline-flex; align-items: center; gap: 10px; }

.welcome { flex: 1; display: grid; place-items: center; padding: 2vh var(--pad-x) 0; text-align: center; }
.welcome-stage { position: relative; display: flex; flex-direction: column; align-items: center; }

/* One soft ring behind the headline: amber glow inside, a hairline that shifts from cool to warm. */
.welcome-ring {
  position: absolute;
  z-index: -1;
  top: 38%;
  left: 50%;
  width: min(74vh, 92vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, oklch(78% .13 72 / .16), oklch(78% .13 72 / .05) 70%, transparent);
  transform: translate(-50%, -50%);
  animation: ring-in 1.4s var(--ease-out) .2s both;
}
.welcome-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: linear-gradient(200deg, oklch(68% .2 258 / .6), oklch(96.7% .004 90 / .06) 45%, oklch(82% .15 78 / .55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.welcome-title { margin: 0; font-weight: 400; }
.welcome-big {
  display: block;
  font-family: var(--display);
  font-size: clamp(84px, 16vw, 250px);
  line-height: .84;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.welcome-early {
  display: block;
  margin-top: -.14em;
  color: var(--amber);
  font-size: clamp(76px, 14vw, 220px);
  line-height: .9;
  letter-spacing: -.03em;
}
.welcome-lede { margin: 18px 0 28px; color: var(--soft); font-size: clamp(17px, 1.4vw, 21px); font-weight: 300; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 9px 24px 9px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  text-align: left;
  box-shadow: var(--shadow);
}
.badge-check {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--amber);
}
.badge-check svg { fill: none; stroke: var(--bg); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.badge-check path { stroke-dasharray: 16; stroke-dashoffset: 16; animation: draw .6s var(--ease-out) 1s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.badge-text { display: grid; gap: 7px; }

.ig-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 7px 20px 7px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  text-align: left;
  animation: reveal .8s var(--ease-out) both;
}
.ig-chip[hidden] { display: none; }
.ig-chip img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.ig-chip > span { display: grid; gap: 2px; }
.ig-handle { font-size: 14px; font-weight: 500; }
.ig-stats { color: var(--muted); font-size: 12.5px; }

.welcome-note { max-width: 40ch; margin: 30px 0 0; color: var(--muted); font-weight: 300; }
.welcome-note em { display: block; color: var(--fg); font-size: 1.15em; }

/* ---------- Connections (/connections) ---------- */
.admin { position: relative; z-index: 2; flex: 1; padding: 0 var(--pad-x) 48px; }

.gate {
  width: min(440px, 100%);
  margin: clamp(24px, 10vh, 120px) auto 0;
  padding: 28px 30px 30px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 1px 2px oklch(0% 0 0 / .3), 0 40px 80px -24px oklch(0% 0 0 / .7);
  animation: modal-in .5s var(--ease-out);
}
.gate .label { display: block; margin-bottom: 14px; }
.gate [data-gate]:not([hidden]) > * { animation: step-in .5s var(--ease-out) both; }

.board { animation: reveal .7s var(--ease-out) both; }
.board-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin: 8px 0 28px; }
.board-title {
  margin: 14px 0 0;
  font-family: var(--display);
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 400;
  line-height: .9;
  text-transform: uppercase;
}
.board-count { margin: 0; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }

.board-tools { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.board-search { flex: 1; max-width: 420px; border-radius: 999px; padding-inline: 20px; }
.board-search::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }
.view-toggle { display: flex; gap: 6px; margin-left: auto; }
.view-toggle .chip[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.board-filters { margin-bottom: 26px; }
.board-empty { margin: 48px 0; color: var(--muted); text-align: center; }

.creators { display: grid; gap: 14px; }
.creators[data-view="cards"] { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.creators-header { display: none; }

.creator {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "id id id"
    "category followers posts"
    "email email joined";
  gap: 18px 12px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  transition: border-color .25s var(--ease-std), transform .35s var(--ease-out);
}
.creator:hover { border-color: var(--line-strong); }
.creators[data-view="cards"] .creator:hover { transform: translateY(-2px); }

.creator-id { grid-area: id; display: flex; align-items: center; gap: 14px; min-width: 0; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.creator-avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.creator-avatar-empty { display: grid; place-items: center; border: 1px solid var(--line); font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--soft); }
.creator-who { min-width: 0; }
.creator-name { margin: 0 0 3px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.creator-handle { color: var(--muted); font-size: 13.5px; transition: color .2s var(--ease-std); }
.creator-handle:hover { color: var(--amber); }

.creator-cell { display: grid; gap: 8px; min-width: 0; }
.creator-category { grid-area: category; }
.creator-followers { grid-area: followers; }
.creator-posts { grid-area: posts; }
.creator-cell-value { font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.creator-email { grid-area: email; align-self: end; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s var(--ease-std); }
.creator-email:hover { color: var(--fg); }
.creator-joined { grid-area: joined; align-self: end; justify-self: end; color: var(--muted); font-size: 13px; white-space: nowrap; }

/* List view: the same cells laid out as one row each, with a shared header. */
.creators[data-view="list"] { gap: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); overflow: hidden; }
.creators[data-view="list"] :is(.creator, .creators-header) {
  grid-template-columns: minmax(220px, 2.2fr) 1fr .9fr .7fr minmax(160px, 1.8fr) 1fr;
  grid-template-areas: "id category followers posts email joined";
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
}
.creators[data-view="list"] .creators-header { display: grid; padding-block: 16px; border-bottom: 1px solid var(--line); }
.creators[data-view="list"] .creators-header span:last-child { justify-self: end; }
.creators[data-view="list"] .creator { border: 0; border-radius: 0; background: none; }
.creators[data-view="list"] .creator + .creator { border-top: 1px solid var(--line); }
.creators[data-view="list"] .creator:hover { background: oklch(100% 0 0 / .03); }
.creators[data-view="list"] .creator-id { padding: 0; border: 0; }
.creators[data-view="list"] .creator-avatar { width: 38px; height: 38px; font-size: 18px; }
.creators[data-view="list"] .creator-cell-label { display: none; }
.creators[data-view="list"] .creator-cell-value { font-size: 15px; font-weight: 400; }
.creators[data-view="list"] :is(.creator-email, .creator-joined) { align-self: center; }

/* ---------- Glass panels ---------- */
/* Every boxed surface blurs what is behind it and catches light along its top edge. */
.edition-card, .orbit-core, dialog, .badge, .ig-chip, .gate,
.creators[data-view="cards"] .creator, .creators[data-view="list"] {
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-top-color: var(--glass-edge);
}

/* Tablet: card would collide with the headline. */
@media (max-width: 1100px) {
  .edition-card { display: none; }
  .cta { flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* Mobile: everything in one column, orbit below the CTA. */
@media (max-width: 760px) {
  .hero { flex-direction: column; align-items: stretch; padding-top: 12px; }
  .hero-copy { max-width: none; padding-top: 2vh; padding-bottom: 0; }
  .headline { margin: 20px 0 24px; }
  .headline .line { font-size: clamp(46px, 14vw, 72px); }
  .lede { margin-bottom: 32px; }
  .cta { gap: 16px; }
  .cta { display: none; }
  /* Sized to the logo row: roughly the logo's cap height plus comfortable tap padding. */
  .btn-nav { display: inline-flex; padding: 12px 22px; font-size: 11px; letter-spacing: .2em; box-shadow: none; }
  /* Wider than the screen so the two rings sit far enough apart; the outer ring's sides run off-screen. */
  .orbit { --rad-a: 37cqi; --rad-b: 17cqi; position: relative; right: auto; bottom: auto; width: 124vw; margin: -28px 0 0 calc((100% - 124vw) / 2); }
  .orbit-label { display: none; }
  .orbit-core { width: 12%; font-size: 22px; }
  .pill { padding: 7px 10px; font-size: 9.5px; letter-spacing: .14em; }
  /* Six handles fit a phone-sized ring without touching. */
  .pill-outer:nth-child(n + 7 of .pill-outer), .pill-inner:nth-child(n + 4 of .pill-inner) { display: none; }
  .pill-outer:nth-child(1 of .pill-outer) { --a: -90deg !important; --dl: -105.0s !important; }
  .pill-outer:nth-child(2 of .pill-outer) { --a: -30deg !important; --dl: -128.33s !important; }
  .pill-outer:nth-child(3 of .pill-outer) { --a: 30deg !important; --dl: -11.67s !important; }
  .pill-outer:nth-child(4 of .pill-outer) { --a: 90deg !important; --dl: -35.0s !important; }
  .pill-outer:nth-child(5 of .pill-outer) { --a: 150deg !important; --dl: -58.33s !important; }
  .pill-outer:nth-child(6 of .pill-outer) { --a: 210deg !important; --dl: -81.67s !important; }
  .pill-inner:nth-child(1 of .pill-inner) { --a: -90deg !important; --dl: -22.5s !important; }
  .pill-inner:nth-child(2 of .pill-inner) { --a: 30deg !important; --dl: -82.5s !important; }
  .pill-inner:nth-child(3 of .pill-inner) { --a: 150deg !important; --dl: -52.5s !important; }
  .footer .label { letter-spacing: .14em; }
  /* Compact modal: the details step must still fit above an open phone keyboard. */
  dialog { margin-top: 12px; max-height: calc(100dvh - 24px); padding: 18px 20px 20px; border-radius: 20px; }
  .modal-head { margin-bottom: 10px; }
  .progress { margin-bottom: 20px; }
  dialog h2 { font-size: 28px; margin-bottom: 8px; }
  .modal-sub { font-size: 14px; margin-bottom: 18px; }
  .field { margin-bottom: 12px; }
  .field-label { font-size: 12.5px; margin-bottom: 6px; }
  /* 16px keeps iOS Safari from zooming into the field on focus. */
  input { padding: 12px 14px; font-size: 16px; }
  .prefix { left: 14px; }
  .prefixed input { padding-left: 31px; }
  .otp-input { font-size: 22px; padding-left: calc(14px + .5em); }
  .btn-block { padding: 16px 20px; margin-top: 6px; font-size: 12px; }
  .chips { gap: 6px; margin-bottom: 16px; }
  .chip { padding: 9px 14px; font-size: 13.5px; }
  .btn-text { margin-top: 12px; font-size: 13.5px; }

  .welcome-ring { width: 118vw; top: 40%; }
  .welcome-lede { margin: 14px 0 22px; }
  .badge { padding-right: 18px; }
  .welcome-note { margin-top: 24px; font-size: 15px; }

  .gate { padding: 22px 20px 24px; border-radius: 20px; }
  .board-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .board-tools { flex-wrap: wrap; }
  .board-search { max-width: none; flex-basis: 100%; }
  .view-toggle { margin-left: 0; }
  /* A six-column row does not fit a phone; list view keeps the essentials only. */
  .creators[data-view="list"] :is(.creator, .creators-header) {
    grid-template-columns: 1fr auto;
    grid-template-areas: "id followers";
  }
  .creators[data-view="list"] :is(.creator-category, .creator-posts, .creator-email, .creator-joined),
  .creators[data-view="list"] .creators-header span:not(:first-child):not(:nth-child(3)) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pill { animation: none !important; transform: rotate(var(--a)) translateX(var(--rad)) rotate(calc(-1 * var(--a))); }
  *, *::before, *::after, dialog::backdrop {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}