:root {
  --night: #19222f;
  --night-2: #222d3c;
  --street-text: #ebe6dc;
  --street-muted: #b8bfca;
  --lamp: #f7e9c8;
  --lamp-deep: #e9c46a;
  --glow: rgba(240, 200, 120, 0.55);
  --wall: #f3f1ec;
  --wall-2: #eae6de;
  --ink: #1f2733;
  --ink-2: #4a5362;
  --rule: #d8cfc1;
  --display: "Prata", Georgia, serif;
  --text: "Golos Text", system-ui, sans-serif;
  --gutter: 16px;
  --measure: 68ch;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--wall);
  overflow-x: hidden;
}
::selection { background: var(--lamp-deep); color: var(--night); }
:focus-visible { outline: 3px solid var(--night); outline-offset: 3px; }
.street :focus-visible { outline-color: var(--lamp-deep); }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; }
a { color: inherit; }

/* ---------- The street ---------- */
.street {
  background: radial-gradient(120% 70% at 50% 100%, var(--night-2), var(--night) 60%);
  color: var(--street-text);
  padding: clamp(28px, 6vh, 64px) var(--gutter) clamp(48px, 10vh, 112px);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.title {
  font-size: clamp(2.1rem, 9.1vw, 8.4rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-align: center;
  color: var(--street-text);
  margin: 0 auto clamp(28px, 6vh, 72px);
  width: 100%;
  max-width: 1400px;
}
.window {
  margin: 0 auto;
  width: min(100%, 560px);
  padding: 10px;
  background: #0f1620;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 24px 90px 10px var(--glow), 0 2px 10px rgba(0, 0, 0, 0.5);
  animation: light-up 1.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.pane {
  background: var(--lamp);
  color: var(--night);
  padding: clamp(22px, 5vw, 40px) clamp(18px, 4vw, 36px) clamp(22px, 4vw, 32px);
  border-radius: 3px;
}
.lede { font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.35; font-weight: 500; margin-bottom: 0.6em; }
.support { color: #4a4330; margin-bottom: 1.4em; }
.facts { list-style: none; margin: 0 0 1.4em; padding: 0.9em 0 0; border-top: 1px solid rgba(25, 34, 47, 0.25); display: flex; flex-wrap: wrap; gap: 0.35em 1.4em; font-size: 0.95rem; font-weight: 500; }
.facts li { position: relative; }
.facts li + li::before { content: ""; position: absolute; left: -0.85em; top: 0.75em; width: 4px; height: 4px; border-radius: 50%; background: var(--night); opacity: 0.6; }
.facts li[hidden] + li::before { display: none; }
.pick { display: flex; gap: 6px; margin-bottom: 1.3em; }
.pick a { flex: 1; text-align: center; padding: 0.55em 0.4em; text-decoration: none; font-weight: 500; border: 1px solid var(--night); border-radius: 3px; color: var(--night); transition: background-color 0.25s, color 0.25s; }
.pick a:hover { background: rgba(25, 34, 47, 0.1); }
.pick a[aria-pressed="true"] { background: var(--night); color: var(--lamp); }
.more { display: inline-block; margin-top: 1em; color: var(--night); text-underline-offset: 0.2em; }

[data-only]:not([hidden]) { animation: relight 0.9s ease-out; }
@keyframes relight { from { background-color: var(--lamp-deep); } to { background-color: transparent; } }
@keyframes light-up {
  from { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 10px 30px 0 rgba(240, 200, 120, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5); filter: brightness(0.72); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .window, [data-only] { animation: none; }
  * { transition: none !important; }
}

/* ---------- Button, one style everywhere ---------- */
.btn {
  display: inline-block;
  font: 500 1.05rem/1.35 var(--text);
  background: var(--night);
  color: var(--lamp);
  padding: 0.95em 1.6em;
  border: 0;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 18px -6px rgba(25, 34, 47, 0.45);
  transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.pane .btn { display: block; width: 100%; text-align: center; font-size: 1.1rem; }
.btn:hover { background: #2a3648; box-shadow: 0 10px 22px -8px rgba(25, 34, 47, 0.55); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.6; cursor: progress; transform: none; }
.btn[data-loading]::after { content: "…"; }

/* ---------- The room ---------- */
.room { padding: 0 var(--gutter); }
.block {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(56px, 10vh, 112px) 0 0;
}
.block h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.3; margin-bottom: 0.7em; }
.block > p { max-width: var(--measure); }
.note { color: var(--ink-2); font-size: 0.95rem; }

.concepts { margin: 1.6em 0 0; padding: 0; }
.concepts div { display: grid; grid-template-columns: minmax(9ch, 14ch) 1fr; gap: 0 1.2em; padding: 0.85em 0; border-top: 1px solid var(--rule); }
.concepts div:last-child { border-bottom: 1px solid var(--rule); }
.concepts dt { font-family: var(--display); font-size: 1.15rem; }
.concepts dd { margin: 0; color: var(--ink-2); align-self: center; }

.steps { margin: 0 0 1.4em; padding-left: 1.6em; }
.steps li { padding: 0.35em 0; }
.steps li::marker { font-family: var(--display); color: var(--ink-2); }

.person { display: grid; grid-template-columns: 1fr; gap: 1.4em; }
@media (min-width: 560px) { .person { grid-template-columns: 180px 1fr; } }
.photo {
  margin: 0; aspect-ratio: 3 / 4; max-width: 180px;
  background: var(--wall-2); border: 1px dashed var(--rule); border-radius: 4px;
  display: grid; place-items: center; color: var(--ink-2); font-size: 0.9rem;
}
.name { font-family: var(--display); font-size: 1.3rem; margin-bottom: 0.4em; }

/* ---------- Form ---------- */
.register { padding-bottom: 0; }
.preview { color: var(--ink-2); font-size: 0.92rem; }
form { margin-top: 1.6em; }
fieldset { border: 0; margin: 0 0 1.4em; padding: 0; }
legend, .field label { display: block; font-weight: 500; margin-bottom: 0.5em; }
fieldset label { display: inline-flex; align-items: center; gap: 0.5em; margin: 0 1.4em 0.5em 0; cursor: pointer; }
.field { margin-bottom: 1.4em; }
input[type="text"], input[type="email"], textarea {
  width: 100%; font: inherit; color: var(--ink);
  padding: 0.7em 0.8em; background: #fffdf9;
  border: 1px solid #b9b0a2; border-radius: 4px;
  caret-color: var(--night);
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus { border-color: var(--night); }
input::placeholder, textarea::placeholder { color: #6d6557; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--night); width: 1.15em; height: 1.15em; margin: 0; }
.agree { display: flex; gap: 0.7em; align-items: flex-start; margin-bottom: 1.6em; }
.agree input { margin-top: 0.3em; flex: none; }
.micro { font-size: 0.9rem; color: var(--ink-2); margin-top: 1.2em; }
.done { margin-top: 1.6em; padding: 1.4em 1.5em; background: var(--lamp); border-radius: 4px; }
.done h3 { font-size: 1.5rem; margin-bottom: 0.5em; }
.done p:last-child { margin-bottom: 0; }

/* ---------- Where ---------- */
.countdown { margin: 1.6em 0 2em; padding: 1.2em 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.countdown p { margin: 0; }
.cd-label { color: var(--ink-2); font-size: 0.95rem; }
.cd-time { font-family: var(--display); font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.35; }
.cd-clock { font-variant-numeric: tabular-nums; }
.cd-live, .cd-ended { font-family: var(--display); font-size: 1.6rem; }
[data-countdown]:not([data-state]) { display: none; }
[data-countdown]:not([data-state="before"]) .cd-before { display: none; }
[data-countdown]:not([data-state="live"]) .cd-live { display: none; }
[data-countdown]:not([data-state="ended"]) .cd-ended { display: none; }

.faq { margin: 0; }
.faq dt { font-weight: 500; margin-top: 1em; }
.faq dd { margin: 0.2em 0 0; color: var(--ink-2); }

/* ---------- Footer ---------- */
.foot {
  max-width: var(--measure); margin: clamp(64px, 12vh, 128px) auto 0;
  padding: 2em var(--gutter) 3em; border-top: 1px solid var(--rule);
  color: var(--ink-2); font-size: 0.92rem;
}
.foot p { margin-bottom: 0.4em; }