:root {
  color-scheme: dark;
  --black: #020403;
  --surface: rgba(7, 10, 8, .82);
  --ink: #d7d2c7;
  --ink-soft: #797e76;
  --ink-faint: #4d554e;
  --line: rgba(151, 164, 150, .16);
  --line-active: rgba(174, 183, 169, .34);
  --moss: #748174;
  --serif: Iowan Old Style, Baskerville, Times New Roman, serif;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--black);
}

body {
  position: relative;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 16% 84%, rgba(43, 67, 51, .22), transparent 42%),
    radial-gradient(ellipse at 83% 15%, rgba(56, 66, 56, .18), transparent 39%),
    radial-gradient(circle at 54% 56%, rgba(33, 51, 39, .12), transparent 34%),
    var(--black);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

body::after {
  position: fixed;
  inset: 0;
  z-index: 1;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 48%, transparent 0, rgba(0, 0, 0, .02) 38%, rgba(0, 0, 0, .48) 100%),
    repeating-linear-gradient(0deg, rgba(143, 158, 143, .018) 0, rgba(143, 158, 143, .018) 1px, transparent 1px, transparent 4px);
}

#ambient,
#smoke,
#dispersion {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#ambient { z-index: 0; }
#smoke { z-index: 2; mix-blend-mode: screen; }
#dispersion { z-index: 20; }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: clamp(20px, 3vw, 34px) clamp(20px, 4vw, 58px);
}

.site-header a,
.site-header span {
  color: var(--ink-faint);
  font-size: .61rem;
  letter-spacing: .18em;
  text-decoration: none;
  text-transform: uppercase;
}

.site-header a {
  color: #a9a99f;
  font-family: var(--serif);
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 22px;
}

.sound-toggle {
  min-width: 0;
  min-height: 30px;
  padding: 0;
  border: 0;
  color: #59645a;
  background: transparent;
  font-size: .58rem;
  letter-spacing: .14em;
}

.sound-toggle:hover:not(:disabled),
.sound-toggle:focus-visible:not(:disabled) {
  color: #8b958a;
  border: 0;
  background: transparent;
}

.sound-toggle[aria-pressed="false"] { color: #3f4741; }

#interface {
  position: relative;
  z-index: 3;
  display: grid;
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  padding: clamp(68px, 10vh, 100px) 22px clamp(22px, 5vh, 52px);
  place-items: center;
  transition: opacity .75s ease, filter .75s ease, transform .75s cubic-bezier(.22,.8,.24,1);
}

body.releasing #interface {
  opacity: 0;
  filter: blur(8px);
  transform: scale(.985);
  pointer-events: none;
}

.ritual {
  width: min(100%, 650px);
  max-height: 100%;
}

h1 {
  margin: 0 0 clamp(26px, 5vh, 46px);
  color: #6f766e;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 3vw, 2.25rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.025em;
  opacity: .5;
}

form { width: 100%; }

.address-line {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr);
  align-items: center;
  gap: 13px;
  min-height: 44px;
  margin-bottom: clamp(14px, 3vh, 24px);
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 1rem;
  font-style: italic;
}

.address-line > label:not(.visually-hidden) { color: var(--ink-faint); }
.select-wrap { position: relative; width: fit-content; min-width: min(100%, 235px); }
.select-wrap::after {
  position: absolute;
  top: 48%;
  right: 3px;
  width: 6px;
  height: 6px;
  content: "";
  pointer-events: none;
  border-right: 1px solid var(--ink-faint);
  border-bottom: 1px solid var(--ink-faint);
  transform: translateY(-70%) rotate(45deg);
}

select,
input,
textarea,
button { font: inherit; }

select,
input {
  width: 100%;
  height: 44px;
  padding: 0 25px 0 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  outline: 0;
  color: #b3b5ac;
  background: transparent;
}

select { appearance: none; cursor: pointer; }
select option { color: #bfc5ba; background: #070a08; }
input { grid-column: 2; padding-right: 0; }
input[hidden] { display: none; }
select:focus,
input:focus { border-bottom-color: var(--line-active); }

textarea {
  display: block;
  width: 100%;
  height: clamp(128px, 25svh, 230px);
  min-height: 100px;
  resize: none;
  padding: clamp(14px, 2.5vh, 22px) 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  color: var(--ink);
  caret-color: var(--moss);
  background: transparent;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.5vw, 1.62rem);
  line-height: 1.55;
  text-shadow: 0 0 18px rgba(107, 126, 110, .08);
  transition: color .25s ease, text-shadow .25s ease;
}

textarea::placeholder { color: #3e4840; font-style: italic; }
textarea:focus {
  text-shadow: 0 0 22px rgba(112, 137, 117, .14);
}

.form-line {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  min-height: 52px;
  padding-top: 13px;
}

#count,
#form-error {
  margin: 0;
  color: var(--ink-faint);
  font-size: .59rem;
  letter-spacing: .08em;
}

#form-error {
  overflow: hidden;
  color: #8e736d;
  text-overflow: ellipsis;
  white-space: nowrap;
}

button {
  min-width: 104px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--line);
  color: #9fa39a;
  background: rgba(6, 9, 7, .42);
  cursor: pointer;
  font-size: .6rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  transition: color .25s ease, border-color .25s ease, background .25s ease, opacity .25s ease;
}

button:hover:not(:disabled),
button:focus-visible:not(:disabled) {
  color: #d4d5ce;
  border-color: var(--line-active);
  background: rgba(22, 29, 23, .48);
}

button:focus-visible { outline: 1px solid var(--moss); outline-offset: 4px; }
button:disabled { cursor: default; opacity: .24; }

#release-stage {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: clamp(32px, 8vw, 110px);
  pointer-events: none;
  opacity: 0;
  transform: scale(.985);
  transition: opacity .7s ease, transform 1s cubic-bezier(.2,.75,.2,1);
}

#release-stage.active {
  opacity: 1;
  transform: scale(1);
}

#release-recipient {
  margin: 0 0 clamp(22px, 4vh, 42px);
  color: #5c665c;
  font-size: .63rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: opacity .6s ease;
}

#release-copy {
  width: min(90vw, 1180px);
  max-height: 70svh;
  overflow: hidden;
  color: #bfc0b7;
  font-family: var(--serif);
  font-size: clamp(2rem, 5.2vw, 5.4rem);
  font-weight: 400;
  line-height: 1.13;
  letter-spacing: -.035em;
  text-align: center;
  text-wrap: balance;
  white-space: pre-wrap;
  transition: opacity .18s ease;
}

#release-stage.dusting #release-copy,
#release-stage.dusting #release-recipient { opacity: 0; }

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

@media (max-width: 620px) {
  .site-header { padding: 20px 18px; }
  .site-header span { display: none; }
  #interface { padding: 66px 18px 20px; }
  h1 { margin-bottom: 25px; font-size: clamp(1.3rem, 7vw, 1.8rem); }
  textarea { height: clamp(150px, 30svh, 250px); font-size: 1.3rem; }
  .form-line { grid-template-columns: auto 1fr auto; gap: 11px; }
  button { min-width: 94px; padding: 0 14px; }
  #release-stage { padding: 28px 18px; }
  #release-copy { width: 94vw; font-size: clamp(2rem, 10vw, 3.7rem); }
}

@media (max-height: 650px) {
  #interface { padding-top: 58px; padding-bottom: 10px; }
  h1 { margin-bottom: 16px; font-size: clamp(1.2rem, 5vh, 1.8rem); }
  .address-line { margin-bottom: 9px; }
  textarea { height: clamp(100px, 24svh, 150px); padding-block: 12px; }
  .form-line { min-height: 45px; padding-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  #ambient { opacity: .55; }
  #smoke { display: none; }
  #dispersion { display: none; }
}