:root {
  color-scheme: dark;
  --bg: #050505;
  --ink: #f3f0ea;
  --muted: #a49d93;
  --dim: #5c5751;
  --line: rgba(243, 240, 234, 0.17);
  --hard-line: rgba(243, 240, 234, 0.32);
  --red: #b31322;
  --red-soft: rgba(179, 19, 34, 0.72);
  --panel: rgba(7, 7, 7, 0.76);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  background: #020202 url("/assets/img/ronwa-og-20260529-card.png") center / cover fixed no-repeat;
  font-family: Arial, Helvetica, sans-serif;
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.7) 48%, rgba(0, 0, 0, 0.94)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.018) 1px, transparent 1px, transparent 5px);
}

#signalCanvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0.42;
}

.page-shell {
  position: relative;
  z-index: 2;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  padding: clamp(0.65rem, 2.6vw, 2.25rem);
  overflow: hidden;
}

.reveal-panel {
  width: min(1080px, 100%);
  max-height: calc(100dvh - clamp(1.3rem, 5.2vw, 4.5rem));
  padding: clamp(0.9rem, 2.8vw, 2.35rem);
  background: linear-gradient(180deg, rgba(4, 4, 4, 0.84), rgba(4, 4, 4, 0.58));
  border: 1px solid var(--line);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(8px);
  overflow: hidden;
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: clamp(0.8rem, 3.4vw, 2.4rem);
}

.mark {
  width: clamp(40px, 6.2vw, 66px);
  height: clamp(40px, 6.2vw, 66px);
  object-fit: contain;
  opacity: 0.92;
}

.classification,
.project,
.pretitle,
.intel-strip,
.truth-form label,
.truth-form button {
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.classification {
  display: inline-block;
  margin: 0 0 0.28rem;
  color: var(--red);
  font-size: clamp(0.56rem, 1.4vw, 0.72rem);
  font-weight: 700;
}

.project {
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.66rem, 1.5vw, 0.82rem);
}

.pretitle {
  margin: 0 0 0.55rem;
  color: var(--muted);
  font-size: clamp(0.72rem, 1.6vw, 0.86rem);
}

h1 {
  max-width: 980px;
  margin: 0;
  font-size: clamp(2.05rem, 7.2vw, 6.25rem);
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: 0;
}

.countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--hard-line);
  border-bottom: 1px solid var(--hard-line);
  margin: clamp(0.9rem, 3vw, 2.1rem) 0 0.75rem;
}

.countdown div {
  min-width: 0;
  padding: clamp(0.5rem, 1.7vw, 1rem) clamp(0.35rem, 1.3vw, 0.8rem);
  border-right: 1px solid var(--line);
}

.countdown div:last-child {
  border-right: 0;
}

.countdown strong {
  display: block;
  font-size: clamp(1.72rem, 5.8vw, 5.1rem);
  line-height: 0.88;
  font-family: "Courier New", Courier, monospace;
  font-weight: 400;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.countdown span {
  display: block;
  margin-top: 0.35rem;
  color: var(--dim);
  font-size: clamp(0.56rem, 1.3vw, 0.7rem);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.intel-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(0.75rem, 2vw, 1.4rem);
  color: var(--muted);
  font-size: clamp(0.56rem, 1.2vw, 0.68rem);
}

.intel-strip span {
  border: 1px solid var(--line);
  padding: 0.32rem 0.48rem;
  background: rgba(0, 0, 0, 0.3);
}

.intel-strip span:first-child {
  color: var(--red);
  border-color: rgba(179, 19, 34, 0.55);
}

.truth-form {
  max-width: 820px;
  border-top: 1px solid var(--line);
  padding-top: 0.8rem;
}

.truth-form label {
  display: block;
  margin-bottom: 0.48rem;
  color: var(--ink);
  font-size: clamp(0.62rem, 1.35vw, 0.76rem);
  font-weight: 700;
}

.input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.55rem;
}

textarea {
  width: 100%;
  min-height: 58px;
  max-height: 16dvh;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.56);
  color: var(--ink);
  padding: 0.65rem;
  font: clamp(0.82rem, 1.6vw, 0.95rem)/1.28 "Courier New", Courier, monospace;
  outline: none;
}

textarea:focus {
  border-color: var(--red-soft);
  box-shadow: 0 0 0 1px var(--red-soft);
}

button {
  border: 1px solid var(--red-soft);
  border-radius: 0;
  background: var(--red);
  color: white;
  min-width: 94px;
  padding: 0 1rem;
  font-weight: 700;
  cursor: pointer;
}

button:hover {
  background: #d0182a;
}

.truth-form p {
  margin: 0.55rem 0 0;
  color: var(--muted);
  font-size: clamp(0.72rem, 1.5vw, 0.9rem);
}

.truth-form a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--red-soft);
}

.seo-copy {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.seo-copy h2 {
  margin: 0 0 0.35rem;
  color: rgba(243, 240, 234, 0.58);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.seo-copy p {
  margin: 0;
}

@media (max-width: 760px) {
  .page-shell {
    align-items: center;
  }

  .reveal-panel {
    max-height: calc(100dvh - 1rem);
    padding: 0.78rem;
  }

  .brand-row {
    margin-bottom: 0.7rem;
  }

  .mark {
    width: 38px;
    height: 38px;
  }

  .pretitle {
    font-size: 0.62rem;
  }

  h1 {
    font-size: clamp(1.55rem, 8.6vw, 2.65rem);
    line-height: 0.92;
  }

  .countdown {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0.75rem 0 0.55rem;
  }

  .countdown div:nth-child(2) {
    border-right: 0;
  }

  .countdown div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .input-row {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  textarea {
    min-height: 46px;
    max-height: 12dvh;
  }

  button {
    min-height: 38px;
  }
}

@media (max-width: 380px), (max-height: 690px) {
  .classification,
  .project,
  .pretitle {
    display: none;
  }

  .brand-row {
    margin-bottom: 0.45rem;
  }

  h1 {
    font-size: clamp(1.35rem, 7.8vw, 2.1rem);
  }

  .countdown strong {
    font-size: clamp(1.35rem, 9vw, 2.3rem);
  }

  .intel-strip {
    display: none;
  }

  .truth-form {
    padding-top: 0.55rem;
  }

  .truth-form p {
    display: none;
  }
}