/* cantfindmykeyboard.com — the press: shared bed, bars and type.
   Two ink runs (warm red, ultramarine) printed slightly out of register. */

:root {
  --paper: #f4efe3;
  --ink: #16150f;
  --red: #e8402a;
  --blue: #1b46f0;
  --dim: #6f6a5c;
  --rule: rgba(22, 21, 15, .22);
  --wash: 244, 239, 227;
  --ghost: rgba(27, 70, 240, .7);
  --hair: #cfc7b4;
  --dot: rgba(27, 70, 240, .5);
  --panelgrad: linear-gradient(180deg, rgba(var(--wash), .9) 0%, rgba(var(--wash), .28) 24%,
    rgba(var(--wash), .38) 44%, rgba(var(--wash), .93) 70%, rgba(var(--wash), .99) 100%);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --serif: Baskerville, "Iowan Old Style", Charter, "Palatino Linotype", Palatino, Georgia, serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font-family: var(--mono); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--red); }

/* ── the press bed ─────────────────────────────────────── */
.bed { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.bed canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; mix-blend-mode: multiply; }
#blue { transform: translate(4px, -3px); transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.halftone {
  position: absolute; inset: 0; mix-blend-mode: multiply; opacity: .5;
  background-image: radial-gradient(var(--dot) .8px, transparent .9px);
  background-size: 4px 4px;
}
.wash {
  position: absolute; inset: 0;
  background: radial-gradient(118% 88% at 46% 40%, rgba(var(--wash), .3) 22%, rgba(var(--wash), .92) 100%);
}

/* ── sheet, bars ───────────────────────────────────────── */
.sheet { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.bar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 0 clamp(16px, 3vw, 30px); height: 54px; flex: 0 0 auto;
  background: var(--paper); border-bottom: 2px solid var(--ink);
}
.foot {
  border-bottom: 0; border-top: 2px solid var(--ink); height: 40px;
  font-size: 9.5px; letter-spacing: .16em; color: var(--dim);
}
.mark {
  font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; font-weight: 600;
  text-shadow: 2px -1.5px 0 var(--ghost);
}
.nav {
  display: flex; gap: clamp(12px, 2vw, 20px); align-items: center;
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim);
}
.nav a { font-weight: 600; border-bottom: 1.5px solid var(--blue); padding-bottom: 1px; }
.divider { width: 1px; height: 14px; background: var(--hair); }
.up { color: var(--red); }
.reg { color: var(--blue); font-size: 12px; }
.keys { display: flex; gap: 18px; text-transform: uppercase; }

/* ── printed page (colophon, notes) ────────────────────── */
.page { flex: 1; padding: clamp(36px, 7vh, 84px) clamp(18px, 4vw, 48px) 60px; max-width: 1000px; width: 100%; }
.eyebrow { font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--blue); font-weight: 600; }
h1.title {
  margin: 18px 0 0; font-size: clamp(44px, 9vw, 104px); line-height: .92; letter-spacing: -.01em;
  font-weight: 600; text-shadow: 5px -4px 0 var(--ghost);
}
.lede {
  margin: 32px 0 0; font-family: var(--serif); font-size: clamp(19px, 2.1vw, 23px);
  line-height: 1.45; max-width: 34ch; text-wrap: pretty;
}

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

/* ── the day/night switch ──────────────────────────────── */
.switch {
  font: inherit; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600;
  background: none; border: 0; border-bottom: 1.5px solid var(--blue); padding: 0 0 1px;
  color: var(--ink); cursor: pointer;
}
.switch:hover { color: var(--red); }

/* ── night edition: the same run on deep blue stock ────── */
html[data-press="night"] {
  --paper: #0e1330;
  --ink: #f2ede1;
  --red: #ff3b2f;
  --blue: #5b74ff;
  --dim: #8b95c6;
  --rule: rgba(242, 237, 225, .22);
  --wash: 14, 19, 48;
  --ghost: rgba(91, 116, 255, .85);
  --hair: #2f3a72;
  --dot: rgba(91, 116, 255, .4);
}
html[data-press="night"] .bed canvas { mix-blend-mode: screen; }
html[data-press="night"] .halftone { mix-blend-mode: screen; opacity: .3; }
html[data-press="night"] .cols p,
html[data-press="night"] .entry p { color: #b9c1e6; }
html[data-press="night"] .blurb { color: #a8b1d8; }
html[data-press="night"] .value { color: #dfe4f7; }