@font-face {
  font-family: "Big Shoulders";
  src: url("/fonts/BigShoulders.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* daylight: sky, the white it's cut back to, navy ink, one red signal */
  --sky: #BFE1F4;
  --paper: #F6FBFE;
  --ink: #0B2140;
  --ink-soft: #2C4768;
  --signal: #E0162B;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sky: #0B2140;
    --paper: #183B66;
    --ink: #BFE1F4;
    --ink-soft: #8DB6D4;
    --signal: #FF4155;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sky);
  color: var(--ink);
  font-family: "Big Shoulders", "Arial Narrow", "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.5rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.012em;
  -webkit-font-smoothing: antialiased;
}

p, h1, ol { margin: 0; padding: 0; }

.page {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(1.25rem, 3vh, 2.5rem);
  padding: clamp(1rem, 3vw, 2.75rem);
}

/* ---------- what it is, how to reach it ---------- */

.intro {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.35em 2.5rem;
}

.what {
  font-size: clamp(1.85rem, 1.3rem + 2vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0;
  max-width: 18ch;
}

.contact {
  max-width: 34ch;
  color: var(--ink-soft);
  text-align: right;
}

.contact a {
  color: var(--ink);
  font-weight: 800;
  text-decoration-line: underline;
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.16em;
  white-space: nowrap;
}

.contact a:hover { text-decoration-color: var(--signal); }

/* ---------- the wordmark on its frequency axis ---------- */

.stage { align-self: end; }

.plot {
  position: relative;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: ew-resize;
}

.wordmark { line-height: 0; }

.wordmark svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.wm-cut { fill: var(--paper); }
.wm-pass { fill: var(--ink); }

.curve {
  fill: none;
  stroke: var(--signal);
  stroke-width: 3px;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.handle {
  --size: 22px;
  position: absolute;
  left: 5.87%;   /* script.js positions this on the curve */
  top: 8%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
}

.handle::before {
  content: "";
  position: absolute;
  inset: calc((44px - var(--size)) / 2);
  border-radius: 50%;
  background: var(--signal);
  border: 4px solid var(--paper);
  box-shadow: 0 0 0 1.5px var(--signal);
}

.plot.is-sweeping, .plot.is-sweeping .handle { cursor: grabbing; }

/* the cutoff, read where you're looking */
.readout {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 4px);
  transform: translateX(-50%);
  font-size: clamp(0.9rem, 0.82rem + 0.3vw, 1.1rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
  color: var(--ink);
  pointer-events: none;
}

.handle.is-near .readout { left: 50%; transform: translateX(-11px); }
.handle.is-far .readout { left: auto; right: 50%; transform: translateX(11px); }

.ruler {
  position: relative;
  list-style: none;
  height: 2.1em;
  margin-top: 0.15em;
  font-size: clamp(0.78rem, 0.7rem + 0.3vw, 1rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink-soft);
  border-top: 1.5px solid var(--ink-soft);
}

.ruler li {
  position: absolute;
  top: 0;
  padding-top: 0.55em;
  transform: translateX(-50%);
  white-space: nowrap;
}

.ruler li::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1.5px;
  height: 0.4em;
  background: var(--ink-soft);
}

/* log positions: log10(f / 20) / 3 */
.ruler li:nth-child(1)  { left: 0;       transform: none; }
.ruler li:nth-child(2)  { left: 13.26%; }
.ruler li:nth-child(3)  { left: 23.30%; }
.ruler li:nth-child(4)  { left: 33.33%; }
.ruler li:nth-child(5)  { left: 46.60%; }
.ruler li:nth-child(6)  { left: 56.63%; }
.ruler li:nth-child(7)  { left: 66.67%; }
.ruler li:nth-child(8)  { left: 79.93%; }
.ruler li:nth-child(9)  { left: 89.97%; }
.ruler li:nth-child(10) { left: auto; right: 0; transform: none; }
.ruler li:nth-child(1)::before  { left: 0; }
.ruler li:nth-child(10)::before { left: auto; right: 0; }

/* ---------- the quiet row underneath ---------- */

.base {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25em 2rem;
  font-size: clamp(0.95rem, 0.88rem + 0.3vw, 1.15rem);
  color: var(--ink-soft);
}

.hint { flex: 1 1 22ch; max-width: 72ch; }

.legal { margin-left: auto; }

/* the filter is an extra: without script the page is just the mark and the copy */
html:not(.live) .handle,
html:not(.live) .hint { visibility: hidden; }

a:focus-visible, .handle:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.handle:focus-visible { outline-offset: -6px; }

@media (max-width: 40rem) {
  .intro { flex-direction: column; }
  .contact { text-align: left; }
  .stage { align-self: center; }
  .curve { stroke-width: 2px; }
  .handle { --size: 16px; }
  .handle::before { border-width: 3px; }
  .ruler li:nth-child(2),
  .ruler li:nth-child(4),
  .ruler li:nth-child(5),
  .ruler li:nth-child(7),
  .ruler li:nth-child(8),
  .ruler li:nth-child(9) { font-size: 0; padding: 0; }   /* keep the tick, drop the label */
  .legal { margin-left: 0; flex-basis: 100%; }
}