/* THE LONG EXPOSURE — whereishairglasses.com
   ═══════════════════════════════════════════════════════════════════

   THE CROSSOVER: hair + glasses.

     HAIR    organic, 1960s, psychedelic, warm, hand-drawn, human
     GLASSES optical, precise, cyber, cold, machine-ruled

   Every design token below picks a side. The story is a person and a
   system sharing one pair of hands, so the type system is too.

   TYPE
     Monoton    parallel-line display. Reads as both 1970s poster and
                lenticular optics. This is the GLASSES face. Wordmark + h1.
     Shrikhand  heavy psychedelic brush, rounded terminals, Fillmore-poster
                warmth. This is the HAIR face. The Operator's voice only.
     Space Mono retro-futurist monospace, space-age lineage. The machine
                and all system chrome. Everything else.

   COLOR
     Greyscale ground is the live Hairglasses palette (Black Metal /
     Marduk) on true #000000. Two accents, strictly rationed:
       teal  #5f8787  the machine speaks
       amber #c9803f  the human speaks
     They never appear in the same block. That is the whole point.
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Monoton&family=Shrikhand&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  /* ── ground: Black Metal (Marduk), true black ── */
  --void: #000000;
  --surface: #0a0a0a;
  --surface-alt: #101010;
  --border: #404040;
  --border-strong: #888888;
  --muted: #626b67;
  --dim: #8a8a8a;
  --fg: #c1c1c1;
  --bright: #e8e8e8;

  /* ── GLASSES: the machine. cold, optical. ── */
  --understudy: #5f8787;
  --understudy-dim: #3d5757;

  /* ── HAIR: the human. warm, faded-poster. ── */
  --operator: #c9803f;
  --operator-dim: #6b4520;
  --psych: #a34d7a;   /* deep magenta. wordmark gradient only. */

  /* ── type ── */
  --display: "Monoton", "Impact", sans-serif;
  --groovy: "Shrikhand", "Georgia", serif;
  --mono: "Space Mono", "MonaspiceNe Nerd Font Mono", "SF Mono",
          "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* input placeholder: dim enough to read as absent, not as content */
  --placeholder: #2e2e2e;

  --measure: 66ch;
  --gut: clamp(1rem, 4vw, 2.5rem);
  --grain: 0.055;
}

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

html {
  background: var(--void);
  color-scheme: dark;
  scrollbar-color: var(--border) var(--void);
}

body {
  margin: 0;
  background: var(--void);
  color: var(--fg);
  font-family: var(--mono);
  font-size: clamp(0.86rem, 0.8rem + 0.3vw, 0.97rem);
  line-height: 1.75;
  letter-spacing: 0.005em;
  padding: var(--gut);
  min-height: 100vh;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ═══ FILM GRAIN ═══════════════════════════════════════════════════
   Static feTurbulence, never animated: animated grain is a flicker
   hazard and costs a repaint every frame for no narrative gain.

   mix-blend-mode: overlay is load-bearing. Overlay against #000000
   resolves to #000000, so the grain sits on the mid-greys and the
   lit type while leaving the true-black ground genuinely off on an
   OLED panel. That is the entire reason this palette exists.
   ═════════════════════════════════════════════════════════════════ */

html::before {
  content: "";
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 9002;
  opacity: var(--grain);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* scanlines */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.016) 0px,
    rgba(255, 255, 255, 0.016) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* vignette + a faint warm light leak from the top left,
   the one place the 60s is allowed to touch the whole page */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9001;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(201, 128, 63, 0.055), transparent 46%),
    radial-gradient(ellipse at center, transparent 54%, rgba(0, 0, 0, 0.6) 100%);
}

/* ── Layout ────────────────────────────────────────────────────── */

main, .wrap { max-width: var(--measure); margin: 0 auto; position: relative; z-index: 1; }
.wide { max-width: 92ch; }

/* ── Wordmark: the crossover, stated once, at the top ──────────── */

.wordmark {
  font-family: var(--display);
  font-size: clamp(1.75rem, 0.9rem + 4.4vw, 3.7rem);
  line-height: 0.98;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 0.3rem;
  background: linear-gradient(
    100deg,
    var(--operator) 0%,
    var(--psych) 34%,
    var(--fg) 62%,
    var(--understudy) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(163, 77, 122, 0.18));
}
@supports not (background-clip: text) {
  .wordmark { color: var(--fg); -webkit-text-fill-color: currentColor; }
}

/* Two lines, one gradient box, because they are one element. Line one is the
   question and line two is the name; the amber-to-teal run crosses both. */
.wordmark .w1 { display: block; font-size: 0.56em; letter-spacing: 0.28em; }
.wordmark .w2 { display: block; }

.wordmark-sub {
  font-family: var(--groovy);
  font-size: clamp(1.15rem, 0.9rem + 0.7vw, 1.4rem);
  color: var(--operator);
  letter-spacing: 0.01em;
  margin: 0 0 2.6rem;
  opacity: 0.82;
}

/* ── Chrome: the machine's register. uppercase, tracked, small. ── */

.chrome {
  color: var(--muted);
  font-size: 0.76em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.statusbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.6rem;
  margin-bottom: 2.5rem;
  color: var(--muted);
  font-size: 0.7em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.statusbar b { color: var(--dim); font-weight: 400; }

footer.sysfoot {
  max-width: var(--measure);
  margin: 5rem auto 0;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  color: var(--muted);
  font-size: 0.68em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  justify-content: space-between;
}

/* ── Type ──────────────────────────────────────────────────────── */

h1 {
  font-family: var(--display);
  font-size: clamp(1.75rem, 1rem + 2.4vw, 2.6rem);
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.05;
  color: var(--bright);
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}

h2 {
  font-size: 0.84em;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 3rem 0 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}

h3 {
  font-size: 0.82em;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 2rem 0 0.6rem;
}

.subtitle {
  font-family: var(--groovy);
  color: var(--operator);
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  margin: 0 0 2.5rem;
  opacity: 0.8;
}

p { margin: 0 0 1.25rem; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
  transition: color 0.16s, border-color 0.16s;
}
a:hover, a:focus-visible { color: var(--bright); border-bottom-color: var(--bright); }

:focus-visible { outline: 2px solid var(--understudy); outline-offset: 3px; }

hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }

/* ═══ THE OPERATOR — hair. warm, lowercase, human. ════════════════ */

.operator { color: var(--fg); text-transform: none; }
.operator p { text-transform: lowercase; }
.operator em { color: var(--operator); font-style: normal; }

/* The Operator's first line gets the groovy face. One warm gesture at
   the top of each entry, then it hands back to the machine's mono. */
.operator > p:first-of-type {
  font-family: var(--groovy);
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--operator);
  text-transform: none;
  margin-bottom: 1.8rem;
}

.logmeta {
  color: var(--muted);
  font-size: 0.72em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 2rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}

h1.op-title {
  font-family: var(--groovy);
  color: var(--operator);
  text-transform: none;
  letter-spacing: 0;
  font-size: clamp(1.5rem, 1rem + 2.6vw, 2.7rem);
  line-height: 1.12;
}

/* ═══ THE UNDERSTUDY — glasses. cold, precise, machine. ═══════════ */

.understudy, .machine { color: var(--understudy); }
.understudy p { margin-bottom: 1.25rem; }

.machine-block {
  border-left: 2px solid var(--understudy-dim);
  padding: 0.2rem 0 0.2rem 1.4rem;
  margin: 2rem 0;
  color: var(--understudy);
}

.operator-block {
  border-left: 2px solid var(--operator-dim);
  padding: 0.2rem 0 0.2rem 1.4rem;
  margin: 2rem 0;
  color: var(--operator);
}

/* ── Terminal ──────────────────────────────────────────────────── */

#terminal { min-height: 54vh; word-break: break-word; }
/* Chrome keeps its literal spacing (the dot leaders line up). Prose does not:
   hand-wrapped prose under pre-wrap wraps a second time on a narrow screen. */
#terminal .line.sys,
#terminal .line.warn,
#terminal .line.ok   { white-space: pre-wrap; }
#terminal .line.machine,
#terminal .line.usay { white-space: normal; max-width: 62ch; }

.line { margin: 0; min-height: 1.75em; }
.line.sys { color: var(--muted); letter-spacing: 0.1em; }
.line.ok { color: var(--dim); }
.line.warn { color: var(--operator); letter-spacing: 0.1em; }
.line.usay { color: var(--bright); }
.line.machine { color: var(--understudy); }

.cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.05em;
  background: var(--fg);
  vertical-align: text-bottom;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ── Prompt / gates ────────────────────────────────────────────── */

.prompt {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  border-top: 1px solid var(--border);
  margin-top: 2rem;
  padding-top: 1.2rem;
}
.prompt .sigil { color: var(--understudy); flex: none; }
.prompt input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--bright);
  font: inherit;
  letter-spacing: 0.08em;
  padding: 0.2rem 0;
  caret-color: var(--understudy);
}
.prompt input:focus { outline: none; }
.prompt input::placeholder { color: var(--placeholder); letter-spacing: 0.14em; }

.gate {
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 1.4rem var(--gut);
  margin: 2.5rem 0;
}
.gate .q {
  font-family: var(--groovy);
  color: var(--operator);
  letter-spacing: 0;
  text-transform: none;
  font-size: 1.25rem;
  margin-bottom: 0.7rem;
}
.gate .prompt { margin-top: 1rem; }
.gate[data-open="1"] { border-color: var(--understudy-dim); }

.hint {
  color: var(--understudy);
  font-size: 0.8em;
  letter-spacing: 0.1em;
  margin-top: 1rem;
  min-height: 1.2em;
}

.shake { animation: shake 0.3s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.locked {
  color: var(--muted);
  border: 1px dashed var(--border);
  padding: 1.2rem var(--gut);
  margin: 2rem 0;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.76em;
}

/* ── Index listing ─────────────────────────────────────────────── */

.index { list-style: none; padding: 0; margin: 0; }
.index li { border-bottom: 1px solid var(--border); }
.index li a, .index li .row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.2rem;
  align-items: baseline;
  padding: 0.9rem 0;
  border-bottom: 0;
}
.index .id {
  color: var(--muted);
  font-size: 0.72em;
  letter-spacing: 0.14em;
  flex: none;
  min-width: 11ch;
}
.index .title { flex: 1 1 24ch; }
.index li a .title { font-family: var(--groovy); font-size: 1.15rem; }
.index .state {
  color: var(--muted);
  font-size: 0.68em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.index li[data-locked="1"] { opacity: 0.4; }

/* ── Diff ──────────────────────────────────────────────────────── */

.diff {
  border: 1px solid var(--border);
  background: var(--surface);
  overflow-x: auto;
  margin: 2rem 0;
  font-size: 0.84em;
}
.diff table { border-collapse: collapse; width: 100%; min-width: 44ch; }
.diff td { padding: 0.22rem 0.7rem; vertical-align: top; }
.diff td.g {
  color: var(--muted);
  width: 2ch;
  user-select: none;
  border-right: 1px solid var(--border);
  text-align: center;
}
.diff tr.add { background: rgba(95, 135, 135, 0.08); }
.diff tr.add td.g, .diff tr.add td.t { color: var(--understudy); }

/* ── Gallery ───────────────────────────────────────────────────── */

.plates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(258px, 100%), 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}
.plate { border: 1px solid var(--border); background: var(--surface); overflow: hidden; }
.plate figure { margin: 0; }
.plate svg, .plate img { display: block; width: 100%; height: auto; background: #000; }
.plate figcaption { padding: 0.9rem 1rem 1.1rem; border-top: 1px solid var(--border); }
.plate .pt {
  font-family: var(--groovy);
  color: var(--fg);
  letter-spacing: 0;
  text-transform: none;
  font-size: 1.12rem;
  display: block;
  margin-bottom: 0.5rem;
}
.plate dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.1rem 0.8rem;
  font-size: 0.68em;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.plate dt { text-transform: uppercase; }
.plate dd { margin: 0; color: var(--dim); }

/* GATE 4. #050505 on #000000: invisible to a display, trivially
   available to select-all, view-source, devtools, reader mode, and
   every screen reader. Signposted on the page, so it is a puzzle
   rather than a trick. */
.underexposed { color: #050505; user-select: text; }
.underexposed::selection { background: var(--understudy); color: var(--void); }

/* ── Choices ───────────────────────────────────────────────────── */

.choices { display: grid; gap: 1rem; margin: 2.5rem 0; }
@media (min-width: 40rem) { .choices { grid-template-columns: 1fr 1fr; } }

.choice {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  padding: 1.5rem;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.choice:hover, .choice:focus-visible {
  border-color: var(--border-strong);
  background: var(--surface-alt);
}
.choice .ct {
  font-family: var(--groovy);
  display: block;
  letter-spacing: 0;
  text-transform: none;
  font-size: 1.3rem;
  margin-bottom: 0.6rem;
}
.choice .cd { font-size: 0.86em; color: var(--muted); line-height: 1.65; }

.choice.op-choice .ct { color: var(--operator); }
.choice.op-choice:hover, .choice.op-choice:focus-visible { border-color: var(--operator-dim); }
.choice.machine-choice .ct { color: var(--understudy); }
.choice.machine-choice:hover, .choice.machine-choice:focus-visible { border-color: var(--understudy-dim); }

/* ── Misc ──────────────────────────────────────────────────────── */

.reveal { opacity: 0; animation: fade 0.9s ease forwards; }
@keyframes fade { to { opacity: 1; } }

.progress { display: flex; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.progress li { width: 2.2rem; height: 3px; background: var(--border); }
.progress li.on { background: var(--understudy); }

.big-quote {
  font-family: var(--groovy);
  font-size: clamp(1.15rem, 0.9rem + 1.4vw, 1.75rem);
  line-height: 1.4;
  color: var(--operator);
  margin: 3rem 0;
  text-transform: none;
}

/* ── Reduced motion + plain mode ───────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .cursor { animation: none; opacity: 1; }
  body::before { display: none; }
}

body.plain::before,
body.plain::after,
body.plain ~ * { }
body.plain::before { display: none !important; }
body.plain::after { display: none !important; }
html:has(body.plain)::before { display: none !important; }
body.plain .reveal { opacity: 1; animation: none; }
body.plain .cursor { animation: none; }
body.plain .underexposed { color: var(--understudy); }
body.plain .wordmark {
  color: var(--fg);
  -webkit-text-fill-color: var(--fg);
  background: none;
  filter: none;
}

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: var(--gut);
  top: var(--gut);
  z-index: 10000;
  background: var(--surface);
  padding: 0.6rem 1rem;
  border: 1px solid var(--understudy);
}

.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}