/* Signal on the web. One stylesheet, shared by the home page and the
   server-rendered share page, because they are the same object seen twice. */

/* The seven-segment face, served from here: one small file, and a readout
   that falls back to a mono if it is slow rather than to nothing. */
@font-face {
  font-family: 'DSEG7';
  src: url('/DSEG7Classic-BoldItalic.woff2') format('woff2');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ground: #07090c;
  --raised: #12161d;
  --rule: #1a1f28;
  --text: #f2f3f7;
  --dim: #868d9d;
  --micro: #5a6271;
  --violet: #7c6bf5;
  --amber: #e8a05c;
  --glass: #090c11;

  /* The brand's type, the same as the app's: Geist, light, for everything;
     Geist Mono for the instrument's small print; and the seven-segment face,
     italic, for the frequency alone. */
  --sans: 'Geist', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --digits: 'DSEG7', 'Geist Mono', ui-monospace, monospace;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 300 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  text-wrap: balance;
}

a {
  color: inherit;
}

/* ── the set ──────────────────────────────────────────────────────────
   A faceplate, not a page: one object lit from above, with the dial
   recessed into it behind glass. */
.set {
  position: relative;
  min-height: 100dvh;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.4vw, 18px);
  padding: clamp(14px, 3.4vw, 30px);
  background:
    radial-gradient(120% 80% at 50% -10%, #12161d 0%, transparent 60%),
    linear-gradient(180deg, #0c1016 0%, var(--ground) 38%);
}

.plate-top {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.mark {
  font: 500 13px/1 var(--sans);
  letter-spacing: 0.24em;
  flex: 0 0 auto;
}

.eyebrow {
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--micro);
}

/* The glass. Inset, warm behind, with a reflection running across it.
   Cosmetic in the strict sense: it cannot receive a pointer, so the page
   never implies a gesture it has no way to keep. */
.glass {
  position: relative;
  border-radius: 7px;
  overflow: hidden;
  background: var(--glass);
  border: 1px solid #000;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 5%),
    inset 0 -14px 26px rgb(0 0 0 / 70%),
    0 1px 0 rgb(255 255 255 / 4.5%);
  pointer-events: none;
  user-select: none;
}

.glass svg {
  display: block;
  width: 100%;
  height: auto;
}

.glass::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(103deg, rgb(255 255 255 / 5.5%) 0%, transparent 42%);
}

.readout {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.readout .n {
  font: italic 400 clamp(38px, 10vw, 60px) / 1 var(--digits);
  letter-spacing: -0.012em;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}

.readout .u {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.16em;
  color: var(--micro);
}

/* The share page's column takes the room between the glass and the action and
   centres in it, the same way the home page's hero does. Left at its natural
   height the readout sat hard against the title above a dead band. */
.set > .body-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: clamp(8px, 2vw, 20px) 0;
}

.title {
  font: 300 clamp(20px, 5.4vw, 32px) / 1.25 var(--sans);
  max-width: 21ch;
  margin: 0;
}

.meta {
  font: 400 10.5px/1.6 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--micro);
  margin: 0;
}

/* Where a radio has a speaker, this has the waveform — the one place the
   page shows the recording itself. */
.grille {
  border-radius: 6px;
  padding: 13px 14px;
  background:
    repeating-linear-gradient(
      180deg,
      rgb(255 255 255 / 2.2%) 0,
      rgb(255 255 255 / 2.2%) 1px,
      transparent 1px,
      transparent 4px
    ),
    #0a0d12;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 3.5%);
}

.wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 38px;
}

.wave i {
  flex: 1;
  background: var(--violet);
  border-radius: 1px;
  opacity: 0.5;
}

.foot {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: auto;
}

.cta {
  display: block;
  text-align: center;
  text-decoration: none;
  background: var(--violet);
  color: #0a0714;
  font: 500 13px/1 var(--mono);
  padding: 15px 20px;
  border-radius: 9px;
  flex: 0 0 auto;
}

.cta:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

.sub {
  text-align: center;
  font: 400 10px/1.5 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--micro);
  margin: 0;
}

.locked {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--dim);
  font-size: 12px;
}

.locked svg {
  flex: 0 0 auto;
}

/* One breakpoint. Below it a column with a full-width button; above it the
   action sits beside its own small print and the reading column stops. */
@media (min-width: 560px) {
  .body-col {
    max-width: 620px;
  }

  .foot {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
  }

  .cta {
    display: inline-block;
  }

  .sub {
    text-align: left;
  }

  .locked {
    flex: 1 1 100%;
  }
}

/* ── home ─────────────────────────────────────────────────────────── */
/* The hero takes the room between the glass and the principles and centres
   itself in it. Left to its natural height it sat against the dial with a
   dead band beneath, which reads as a page that failed to finish loading. */
.home .body-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(10px, 3vw, 28px) 0;
}

.home h1 {
  font: 300 clamp(32px, 7.4vw, 60px) / 1.05 var(--sans);
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  max-width: 15ch;
}

.home .lede {
  color: var(--dim);
  max-width: 46ch;
  margin: 0 0 22px;
  font-size: clamp(13.5px, 1.8vw, 16px);
}

.row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn {
  text-decoration: none;
  font: 500 12px/1 var(--mono);
  padding: 13px 18px;
  border-radius: 8px;
}

.btn.solid {
  background: var(--violet);
  color: #0a0714;
}

.btn.ghost {
  border: 1px solid var(--rule);
  color: var(--dim);
}

.four {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 9px;
  overflow: hidden;
  margin-top: auto;
}

.four div {
  background: var(--ground);
  padding: 15px 16px;
}

.four h3 {
  font: 500 10px/1.3 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 7px;
}

.four p {
  margin: 0;
  color: var(--dim);
  font-size: 12.5px;
  line-height: 1.55;
}

@media (min-width: 560px) {
  .four {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .four {
    grid-template-columns: repeat(4, 1fr);
  }
}

footer.legal {
  padding-top: 18px;
  color: var(--micro);
  font-size: 11.5px;
}

footer.legal a {
  color: var(--dim);
}

footer.legal a[aria-current='page'] {
  color: var(--text);
  text-decoration: none;
}

/* ── the fine print ───────────────────────────────────────────────────
   Privacy and terms. The same faceplate with nothing recessed into it and
   nothing lit, because the one thing these pages are for is being read to
   the end — so the column starts at the top instead of centring, and the
   small capitals that label the principles on the home page label the
   sections here. */
.plate-top a.mark {
  color: inherit;
  text-decoration: none;
}

.paper > .body-col {
  justify-content: flex-start;
  gap: 0;
  padding-top: clamp(18px, 5vw, 44px);
}

.paper h1 {
  font: 300 clamp(30px, 6.4vw, 48px) / 1.08 var(--sans);
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  max-width: 18ch;
}

.paper .lede {
  color: var(--dim);
  margin: 22px 0 6px;
}

.paper h2 {
  font: 500 10.5px/1.3 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 40px 0 12px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}

.paper h3 {
  font: 500 14px/1.4 var(--sans);
  color: var(--text);
  margin: 22px 0 6px;
}

.paper p,
.paper li {
  color: var(--dim);
  max-width: 64ch;
}

.paper p {
  margin: 0 0 12px;
}

.paper ul {
  margin: 0 0 14px;
  padding-left: 18px;
}

.paper li {
  margin-bottom: 7px;
}

.paper li::marker {
  color: var(--micro);
}

.paper strong {
  color: var(--text);
  font-weight: 400;
}

.paper .body-col a {
  color: var(--text);
  text-decoration-color: var(--micro);
  text-underline-offset: 3px;
}

.paper .body-col a:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}