/* SILVR hero — dark base, warm↔cool living light. Mobile-first.
   A single master rhythm (--warmth) washes the whole scene slowly between
   warm amber/gold (inhale) and cool silver/platinum (exhale), phase-locked
   to the play button's breath so the page feels like one living thing. */

/* Master temperature: 1 = warm, 0 = cool. Registered so it can animate
   smoothly and be inherited by everything that tints with it.
   initial-value is a balanced warm-silver blend used as the static fallback. */
@property --warmth {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.58;
}

:root {
  color-scheme: dark;

  /* Warm + cool endpoints (premium silver, never neon/RGB) */
  --warm-key: #ffc48e;   /* amber / gold        */
  --cool-key: #cdddec;   /* platinum, cool-blue whisper */
  --warm-acc: #ff9b8f;   /* warm rose           */
  --cool-acc: #a8c4e8;   /* cool blue whisper   */
  --warm-tint: #1a1512;  /* warm dark room      */
  --cool-tint: #11151d;  /* cool dark room      */

  /* Live colours, recomputed every frame from --warmth */
  --key:  color-mix(in oklab, var(--cool-key), var(--warm-key) calc(var(--warmth) * 100%));
  --acc:  color-mix(in oklab, var(--cool-acc), var(--warm-acc) calc(var(--warmth) * 100%));
  --tint: color-mix(in oklab, var(--cool-tint), var(--warm-tint) calc(var(--warmth) * 100%));

  /* Wordmark gradient stops — washes warm-silver -> cool-platinum,
     both ends light enough on dark to stay fully legible. */
  --mark-hi:  color-mix(in oklab, #eef4fb, #fff7ec calc(var(--warmth) * 100%));
  --mark-mid: color-mix(in oklab, #cdd9e6, #e7d9c4 calc(var(--warmth) * 100%));
  --mark-lo:  color-mix(in oklab, #93a3b5, #b9a98f calc(var(--warmth) * 100%));

  --breath: 4s;   /* play button pulse           */
  --wash: 16s;    /* full warm->cool->warm cycle (4 breaths) */
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

/* The `hidden` attribute must always win, even over class rules that set
   `display` (e.g. .joined { display: flex }). Without this, hidden elements
   leak onto the page. */
[hidden] { display: none !important; }

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background:                                   /* fallback for older engines */
    radial-gradient(120% 90% at 50% 8%, #15110e 0%, #0d0b0a 55%, #070605 100%);
  background:
    radial-gradient(120% 90% at 50% 8%,
      rgb(from var(--tint) r g b) 0%, #0d0b0a 55%, #070605 100%);
  color: #e7d9c4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-y: auto;          /* allow scroll if content is taller than the screen */
  /* The master breath: drives --warmth for the whole page. */
  animation: wash var(--wash) ease-in-out infinite;
}
@keyframes wash {
  0%, 100% { --warmth: 1; }   /* warm inhale */
  50%      { --warmth: 0; }   /* cool exhale */
}

/* ---------- Living light field ---------- */
.aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.glow { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; }
.glow--warm {
  width: 70vmax; height: 70vmax; top: -18vmax; left: 50%;
  background: radial-gradient(circle, rgb(from var(--key) r g b / 0.42) 0%, rgb(from var(--key) r g b / 0) 65%);
  animation: drift-top 15s ease-in-out infinite;
}
.glow--rose {
  width: 50vmax; height: 50vmax; bottom: -14vmax; left: 16%;
  background: radial-gradient(circle, rgb(from var(--acc) r g b / 0.24) 0%, rgb(from var(--acc) r g b / 0) 65%);
  animation: drift 18s ease-in-out infinite reverse;
}
.glow--silver {
  width: 42vmax; height: 42vmax; top: 30%; right: -10vmax;
  background: radial-gradient(circle, rgb(from var(--key) r g b / 0.16) 0%, rgb(from var(--key) r g b / 0) 65%);
  animation: drift 22s ease-in-out infinite;
}
@keyframes drift-top {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translate(calc(-50% + 2vw), 4vh) scale(1.08); }
}
@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(3vw, 4vh) scale(1.08); }
}

/* ---------- Hero layout ---------- */
.hero {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(28px, 7vw, 64px) clamp(24px, 7vw, 64px);
  gap: clamp(24px, 5vh, 44px);
}

/* ---------- Brand wordmark: silver that warms & cools ---------- */
.brand {
  margin: 0;
  font-weight: 400;
  font-size: clamp(1.4rem, 7vw, 2.1rem);
  letter-spacing: 0.62em;
  text-indent: 0.62em;
}
.brand__text {
  background: #e7d9c4;   /* fallback: solid champagne, stays visible if gradient unsupported */
  background: linear-gradient(
    100deg,
    var(--mark-lo) 0%, var(--mark-mid) 30%,
    var(--mark-hi) 50%, var(--mark-mid) 70%, var(--mark-lo) 100%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 8s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ---------- Hook line: owns the screen, legible in every state ---------- */
.hook {
  margin: 0;
  max-width: 18ch;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(2.1rem, 9.5vw, 4.6rem);
  line-height: 1.16;
  letter-spacing: 0.005em;
  color: #f4ece0;                 /* constant high-contrast cream */
  text-wrap: balance;
  text-shadow: 0 0 38px rgb(from var(--key) r g b / 0.18);
}
.hook em {
  font-style: italic;
  color: #fffaf2;
  text-shadow: 0 0 26px rgb(from var(--key) r g b / 0.42);  /* key word catches the light */
}

/* ---------- Mixcloud strip: quiet "now playing / credit" at the foot ------- */
.footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: clamp(8px, 3vw, 18px) clamp(16px, 6vw, 32px) clamp(24px, 6vh, 40px);
}
.player {
  width: min(480px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0.6;                 /* de-emphasized; reads as a small credit element */
  transition: opacity 0.3s ease;
}
.player:hover, .player:focus-within { opacity: 0.95; }
.player iframe {
  display: block;
  width: 100%;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
.player__credit { margin: 0; font-size: 0.72rem; letter-spacing: 0.04em; }
.player__credit a {
  color: rgba(231, 217, 196, 0.5);
  text-decoration: none;
  border-bottom: 1px solid rgb(from var(--key) r g b / 0.25);
  padding-bottom: 1px;
  transition: color 0.2s ease;
}
.player__credit a:hover { color: rgba(231, 217, 196, 0.85); }

/* ---------- Play button: calm when paused, breathing while playing ---------- */
.play {
  position: relative;
  width: clamp(108px, 30vw, 150px);
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}
/* halo: a calm steady glow at rest; pulses while playing */
.play__halo {
  position: absolute; inset: -38%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(from var(--key) r g b / 0.45) 0%, rgb(from var(--key) r g b / 0) 68%);
  filter: blur(6px);
  opacity: 0.6; /* steady when paused */
}
.play__ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid rgb(from var(--key) r g b / 0.55);
  opacity: 0; /* hidden until playing */
}

/* playing state: pearl breathes, halo pulses, ring emits */
.play.is-playing { animation: breathe var(--breath) ease-in-out infinite; }
.play.is-playing .play__halo { animation: halo var(--breath) ease-in-out infinite; }
.play.is-playing .play__ring { animation: emit var(--breath) ease-out infinite; }

/* icon swap: play triangle <-> pause bars */
.play__icon--pause { display: none; }
.play.is-playing .play__icon--play { display: none; }
.play.is-playing .play__icon--pause { display: block; }
.play__core {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  /* core stays a light metal so the dark play glyph keeps its contrast,
     with just a whisper of the wash on its rim */
  background:
    radial-gradient(circle at 38% 30%,
      #fff7ee 0%,
      color-mix(in oklab, #dfe7ee, #ecdcc4 calc(var(--warmth) * 100%)) 44%,
      color-mix(in oklab, #8f9aa6, #9c8b72 calc(var(--warmth) * 100%)) 100%);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.7),
    inset 0 -10px 22px rgba(70, 60, 50, 0.4),
    0 10px 30px rgba(0, 0, 0, 0.55);
}
.play__core svg { fill: #241a12; filter: drop-shadow(0 1px 0 rgba(255,255,255,0.25)); }
.play__icon--play { margin-left: 4px; } /* optical centering for the triangle */

.play:hover .play__core, .play:focus-visible .play__core { filter: brightness(1.06); }
.play:active { transform: scale(0.96); }
.play:focus-visible { outline: none; }

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.055); }
}
@keyframes halo {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 0.95; transform: scale(1.12); }
}
@keyframes emit {
  0%   { transform: scale(0.92); opacity: 0.7; }
  70%  { transform: scale(1.5);  opacity: 0; }
  100% { transform: scale(1.5);  opacity: 0; }
}

/* ---------- Waitlist ---------- */
.join {
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* "online now" — live presence, understated, only shown above threshold */
.presence {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(231, 217, 196, 0.55);
}
.presence__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(from var(--key) r g b);
  box-shadow: 0 0 8px rgb(from var(--key) r g b / 0.85);
  animation: pulseDot 2.4s ease-in-out infinite;
}
.presence b { color: #fff7ec; font-weight: 500; font-variant-numeric: tabular-nums; }
@keyframes pulseDot {
  0%, 100% { opacity: 0.5; transform: scale(0.9); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* counter — premium social proof, only shown once it crosses the threshold */
.counter {
  margin: 0;
  font-size: clamp(0.72rem, 3.4vw, 0.82rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(231, 217, 196, 0.62);
}
.counter b {
  color: #fff7ec;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.waitlist { width: 100%; }
.waitlist__row {
  display: flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgb(from var(--key) r g b / 0.28);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.06),
    0 8px 30px rgba(0, 0, 0, 0.35),
    0 0 24px rgb(from var(--key) r g b / 0.10);   /* faint warm/cool glow on the capsule */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.waitlist__row:focus-within {
  border-color: rgb(from var(--key) r g b / 0.6);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.08),
    0 8px 30px rgba(0, 0, 0, 0.4),
    0 0 28px rgb(from var(--key) r g b / 0.22);
}
.waitlist__input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  padding: 0 14px;
  color: #f4ece0;
  font-family: inherit;
  font-size: 1rem; /* >=16px keeps iOS from zooming on focus */
  letter-spacing: 0.01em;
}
.waitlist__input::placeholder { color: rgba(231, 217, 196, 0.42); }

.waitlist__btn {
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
  padding: 0 22px;
  height: 44px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #241a12;
  background: linear-gradient(180deg,
    #fff7ee 0%,
    color-mix(in oklab, #dfe7ee, #ecdcc4 calc(var(--warmth) * 100%)) 55%,
    color-mix(in oklab, #b9c2cc, #cdbb9e calc(var(--warmth) * 100%)) 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.7), 0 4px 14px rgba(0,0,0,0.35);
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.2s ease, transform 0.1s ease;
}
.waitlist__btn:hover { filter: brightness(1.05); }
.waitlist__btn:active { transform: translateY(1px); }
.waitlist__btn:disabled { opacity: 0.6; cursor: default; }

.waitlist__msg {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  color: rgba(231, 217, 196, 0.7);
}
.waitlist__msg.is-error { color: #ffb4a8; }

/* honeypot — kept far off-screen, invisible to humans */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* elegant success state */
.joined {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgb(from var(--key) r g b / 0.3);
  box-shadow: 0 0 30px rgb(from var(--key) r g b / 0.12);
  animation: rise 0.6s ease both;
}
.joined__check {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 50%;
  color: #241a12;
  background: radial-gradient(circle at 38% 30%, #fff7ee 0%,
    color-mix(in oklab, #dfe7ee, #ecdcc4 calc(var(--warmth) * 100%)) 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.7), 0 4px 14px rgba(0,0,0,0.35);
}
.joined__text {
  margin: 0;
  text-align: left;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.15;
  color: #f4ece0;
}
.joined__text span {
  font-family: "Inter", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  color: rgba(231, 217, 196, 0.6);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Scroll cue (invites you down to the wall) ---------- */
.scrollcue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  text-decoration: none;
  color: rgba(231, 217, 196, 0.5);
  font-size: 0.62rem;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  animation: nudge 2.6s ease-in-out infinite;
}
.scrollcue:hover { color: rgba(231, 217, 196, 0.85); }
@keyframes nudge {
  0%, 100% { transform: translateY(0); opacity: 0.65; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* ---------- Message wall ---------- */
.wall {
  position: relative;
  z-index: 1;
  width: min(620px, 100%);
  margin: 0 auto;
  padding: clamp(40px, 9vh, 90px) clamp(20px, 6vw, 32px) clamp(64px, 12vh, 120px);
}
.wall__head { text-align: center; margin-bottom: clamp(24px, 5vh, 40px); }
.wall__eyebrow {
  margin: 0 0 10px;
  font-size: 0.64rem;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  text-transform: uppercase;
  color: rgb(from var(--key) r g b / 0.75);
}
.wall__title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(2rem, 8vw, 3rem);
  line-height: 1.1;
  color: #f4ece0;
}
.wall__sub {
  margin: 10px auto 0;
  max-width: 32ch;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(231, 217, 196, 0.6);
}

/* ---------- Compose / auth ---------- */
.compose { margin-bottom: clamp(20px, 4vh, 30px); }

.say {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  justify-content: center;
  padding: 14px 18px;
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: #efe6d8;
  background: rgba(255, 255, 255, 0.045);
  border: 1px dashed rgb(from var(--key) r g b / 0.4);
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.say:hover { background: rgba(255, 255, 255, 0.07); border-color: rgb(from var(--key) r g b / 0.65); }

.auth {
  padding: 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgb(from var(--key) r g b / 0.28);
  box-shadow: 0 0 28px rgb(from var(--key) r g b / 0.1);
  animation: rise 0.5s ease both;
}
.auth__title {
  margin: 0 0 6px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.5rem;
  color: #f4ece0;
}
.auth__hint {
  margin: 0 0 14px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(231, 217, 196, 0.62);
}
.auth__email { color: #ece0cd; }
.auth__msg {
  margin: 10px 0 0;
  min-height: 1.1em;
  font-size: 0.84rem;
  color: rgba(231, 217, 196, 0.7);
}
.auth__msg.is-error { color: #ffb4a8; }
.auth__resend {
  margin-top: 12px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: rgb(from var(--key) r g b / 0.8);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auth__resend:disabled { color: rgba(231, 217, 196, 0.35); cursor: default; text-decoration: none; }

.verified {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgb(from var(--key) r g b / 0.3);
  box-shadow: 0 0 28px rgb(from var(--key) r g b / 0.12);
  animation: rise 0.5s ease both;
}

/* composer */
.composer {
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgb(from var(--key) r g b / 0.3);
  box-shadow: 0 0 28px rgb(from var(--key) r g b / 0.12);
  animation: rise 0.5s ease both;
}
.composer__as {
  margin: 0 0 10px;
  font-size: 0.82rem;
  color: rgba(231, 217, 196, 0.6);
}
.composer__handle { color: #ece0cd; font-weight: 500; }
.signout {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 0.78rem;
  color: rgba(231, 217, 196, 0.42);
  text-decoration: underline; text-underline-offset: 2px;
}
.signout::before { content: "·"; margin: 0 8px; text-decoration: none; color: rgba(231, 217, 196, 0.3); }
.signout:hover { color: rgba(231, 217, 196, 0.8); }
.composer__body {
  width: 100%;
  resize: vertical;
  min-height: 64px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 14px;
  color: #f4ece0;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.45;
  outline: none;
  transition: border-color 0.3s ease;
}
.composer__body:focus { border-color: rgb(from var(--key) r g b / 0.55); }
.composer__body::placeholder { color: rgba(231, 217, 196, 0.4); }
.composer__row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.composer__loc {
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 0 14px;
  height: 44px;
  color: #f4ece0;
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.3s ease;
}
.composer__loc:focus { border-color: rgb(from var(--key) r g b / 0.55); }
.composer__loc::placeholder { color: rgba(231, 217, 196, 0.4); }
.composer__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.composer__count {
  font-size: 0.74rem;
  color: rgba(231, 217, 196, 0.4);
  font-variant-numeric: tabular-nums;
}

/* 18+ self-certification checkbox — small and muted */
.agecheck {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 2px 0;
  cursor: pointer;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: rgba(231, 217, 196, 0.6);
  user-select: none;
}
.agecheck input {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin: 0;
  border-radius: 5px;
  border: 1px solid rgb(from var(--key) r g b / 0.45);
  background: rgba(255, 255, 255, 0.04);
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.agecheck input::after {
  content: "";
  width: 9px;
  height: 9px;
  transform: scale(0);
  transition: transform 0.15s ease;
  border-radius: 2px;
  background: #241a12;
  clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 22%, 86% 8%, 38% 70%);
}
.agecheck input:checked {
  background: linear-gradient(180deg, #fff7ee 0%,
    color-mix(in oklab, #dfe7ee, #ecdcc4 calc(var(--warmth) * 100%)) 100%);
  border-color: transparent;
}
.agecheck input:checked::after { transform: scale(1); }
.agecheck input:focus-visible { outline: 2px solid rgb(from var(--key) r g b / 0.6); outline-offset: 2px; }

/* consent line (under Join and under posting) */
.consent {
  margin: 10px 0 0;
  font-size: 0.72rem;
  line-height: 1.4;
  color: rgba(231, 217, 196, 0.45);
}
.composer__foot .consent { margin: 0; text-align: right; }
.consent a { color: rgb(from var(--key) r g b / 0.85); text-decoration: underline; text-underline-offset: 2px; }

.wall__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* a message — elegant card, not a chat bubble */
.msg {
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
/* official house posts catch the warm-silver light a little more */
.msg--house {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgb(from var(--key) r g b / 0.32);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3), 0 0 26px rgb(from var(--key) r g b / 0.10);
}

.msg__top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
}
.msg__handle {
  font-size: 0.9rem;
  font-weight: 500;
  color: #ece0cd;
}
/* the official SILVR badge — clearly the brand voice, never disguised */
.msg__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 7px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #241a12;
  background: linear-gradient(180deg, #fff7ee 0%,
    color-mix(in oklab, #dfe7ee, #ecdcc4 calc(var(--warmth) * 100%)) 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.7), 0 0 16px rgb(from var(--key) r g b / 0.35);
}
.msg__badge svg { display: block; }
.msg__time {
  margin-left: auto;
  font-size: 0.74rem;
  color: rgba(231, 217, 196, 0.4);
  font-variant-numeric: tabular-nums;
}
.msg__body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #efe6d8;
  overflow-wrap: anywhere;
}
.msg__loc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: rgb(from var(--key) r g b / 0.78);
}
.msg__loc svg { display: block; opacity: 0.85; }

.wall__empty {
  text-align: center;
  color: rgba(231, 217, 196, 0.45);
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  .scrollcue { animation: none; }
}

/* ---------- Quiet "coming soon" ---------- */
.soon {
  margin: 0;
  font-size: clamp(0.62rem, 3vw, 0.74rem);
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  text-transform: uppercase;
  color: rgba(231, 217, 196, 0.42);
}

/* ---------- Larger screens: a little more air ---------- */
@media (min-width: 720px) {
  .hero { gap: clamp(36px, 6vh, 64px); }
  .hook { max-width: 16ch; }
}

/* ---------- Privacy / legal page ---------- */
.legal-body {
  overflow-y: auto;
  --warmth: 0.58;
  background: radial-gradient(120% 90% at 50% 0%, #15110e 0%, #0b0a09 60%, #070605 100%);
}
.legal {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(40px, 9vh, 90px) clamp(22px, 6vw, 32px) 100px;
  color: #d8cdbb;
}
.legal__back {
  display: inline-block;
  margin-bottom: 28px;
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  color: rgba(231, 217, 196, 0.6);
  text-decoration: none;
}
.legal__back:hover { color: #f4ece0; }
.legal__brand {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: #cdbb9e;
}
.legal__title {
  margin: 8px 0 4px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(2.2rem, 9vw, 3.2rem);
  color: #f4ece0;
}
.legal__note, .legal__updated {
  font-size: 0.82rem;
  font-style: italic;
  color: rgba(231, 217, 196, 0.45);
}
.legal h2 {
  margin: 30px 0 8px;
  font-size: 1.05rem;
  font-weight: 500;
  color: #ece0cd;
}
.legal p { margin: 0 0 12px; line-height: 1.6; font-size: 0.96rem; }
.legal ul { margin: 0 0 12px; padding-left: 1.25em; }
.legal li { margin: 0 0 6px; line-height: 1.55; font-size: 0.96rem; }
.legal a {
  color: #e7d9c4;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgb(from var(--key) r g b / 0.5);
}
.legal a:hover { color: #fff7ec; }

/* ---------- Admin dashboard ---------- */
.admin-body {
  overflow-y: auto;
  --warmth: 0.5;
  background: radial-gradient(120% 80% at 50% 0%, #14110e 0%, #0b0a09 60%, #070605 100%);
  color: #d8cdbb;
}
.admin { max-width: 1080px; margin: 0 auto; padding: 24px clamp(14px, 4vw, 28px) 80px; }
.admin__top { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.admin__brand { font-weight: 500; letter-spacing: 0.4em; color: #f4ece0; text-decoration: none; }
.admin__brand:hover { color: #fff7ec; text-shadow: 0 0 18px rgb(from var(--key) r g b / 0.4); }
.admin__view {
  font-size: 0.8rem; letter-spacing: 0.02em; text-decoration: none;
  color: #e7d9c4;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  padding: 5px 11px; border-radius: 999px;
}
.admin__view:hover { color: #fff7ec; border-color: rgb(from var(--key) r g b / 0.55); }
.admin__tag {
  font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  color: #241a12; background: linear-gradient(180deg,#fff7ee, #e7d9c4);
}
.admin__who { margin-left: auto; font-size: 0.8rem; color: rgba(231,217,196,0.6); }
.admin__signout {
  background: none; border: 0; cursor: pointer; font: inherit; font-size: 0.8rem;
  color: rgba(231,217,196,0.5); text-decoration: underline; text-underline-offset: 2px;
}
.admin__signout:hover { color: #f4ece0; }
.admin__loading { color: rgba(231,217,196,0.5); }

.admin__card {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
}
.admin__card h2 {
  margin: 0 0 14px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400; font-size: 1.6rem; color: #f4ece0;
}
.admin__cardhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.admin__cardhead h2 { margin: 0; }
.admin__count {
  font-family: "Inter", sans-serif; font-size: 0.9rem; font-weight: 500;
  color: #241a12; background: #e7d9c4; border-radius: 999px; padding: 2px 10px; margin-left: 6px;
  vertical-align: middle;
}

.admin__input {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px; padding: 10px 12px; color: #f4ece0;
  font: inherit; font-size: 1rem; outline: none;
}
.admin__input:focus { border-color: rgb(from var(--key) r g b / 0.6); }
.admin__input--search { width: 100%; margin: 14px 0; }

.admin__btn {
  display: inline-block; cursor: pointer; border: 0; border-radius: 10px;
  padding: 10px 16px; font: inherit; font-size: 0.9rem; font-weight: 500;
  color: #241a12; background: linear-gradient(180deg,#fff7ee,#e7d9c4);
  text-decoration: none; text-align: center;
}
.admin__btn:hover { filter: brightness(1.05); }
.admin__btn--ghost {
  background: rgba(255,255,255,0.06); color: #e7d9c4;
  border: 1px solid rgba(255,255,255,0.14);
}
.admin__btn--danger { background: linear-gradient(180deg,#ffb4a8,#e98e80); }
.admin__btn--sm { padding: 6px 10px; font-size: 0.8rem; margin: 2px 4px 2px 0; }

.admin__tablewrap { overflow-x: auto; }
.admin__table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.admin__table th, .admin__table td {
  text-align: left; padding: 9px 10px; vertical-align: top;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.admin__table th { color: rgba(231,217,196,0.5); font-weight: 500; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }
.admin__table td { color: #e7d9c4; }
.admin__table tr.is-hidden td { opacity: 0.5; }
.admin__empty { color: rgba(231,217,196,0.45); font-style: italic; }
.admin__pill {
  display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 0.66rem; font-weight: 600; color: #241a12; background: #e7d9c4;
}
.admin__pill--muted { background: rgba(231,217,196,0.3); color: #1a1410; }

.admin__pager { display: flex; align-items: center; gap: 14px; margin-top: 14px; font-size: 0.84rem; color: rgba(231,217,196,0.6); }
.admin__msg { margin: 8px 0 0; font-size: 0.84rem; color: rgba(231,217,196,0.7); min-height: 1em; }
.admin form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.admin code { background: rgba(255,255,255,0.08); padding: 1px 6px; border-radius: 5px; }

/* ---------- Respect reduced motion: settle on one balanced blend ---------- */
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }                 /* --warmth stays at its 0.58 blend */
  .glow, .brand__text, .play, .play__halo, .play__ring, .joined, .presence__dot { animation: none; }
  .play.is-playing, .play.is-playing .play__halo, .play.is-playing .play__ring { animation: none; }
  .play__ring { opacity: 0; }
}