/* Pen Pals (was Your Historical Twin) — deep ink, aged gold, parchment. Sibling of /oracle
   (same dark-mystical family + Familjen Grotesk / JetBrains Mono), its own accent:
   candle-lit gold on warm ink-black, with a third voice — Cormorant Garamond —
   for the historical layer (epigraph, figure names, period quotes).
   The signature element is the parchment twin card dealt onto the table: the
   figures' signature PNGs are black ink on transparency, so they live on light
   parchment cards — the one bright object on a dark page. */

:root {
  --bg: #0e0b09;
  --bg2: #171108;
  --ink: #f0e9dc;
  --muted: #a3937d;
  --line: #3a3126;
  --gold: #d4a94e;
  --gold2: #f0d48a;
  --gold-dim: #8a6f34;
  --wax: #cd6f57;          /* sealing-wax red — the "unreadable" stamp */
  --good: #b5c98a;
  --parchment: #f2e8d5;
  --parchment2: #e6d7b8;
  --card-ink: #2b2118;
  --card-muted: #6d5c44;
  --card-line: #cbb890;
  --r: 16px;
  --maxw: 520px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(1100px 640px at 50% -12%, #33230f 0%, var(--bg2) 40%, var(--bg) 100%);
  color: var(--ink);
  font-family: 'Familjen Grotesk', system-ui, -apple-system, sans-serif;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
#app { min-height: 100%; max-width: var(--maxw); margin: 0 auto; padding: 24px 20px 44px;
  display: flex; flex-direction: column; }
.screen { display: none; flex: 1; flex-direction: column; }
.screen.active { display: flex; animation: fade .4s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

h1 { font-size: clamp(30px, 9vw, 44px); line-height: 1.05; margin: 0 0 14px; letter-spacing: -.02em;
  font-weight: 700; }
h1 .gild { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-style: italic;
  background: linear-gradient(100deg, var(--gold) 10%, var(--gold2) 55%, var(--gold) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .06em; }
.sub { color: var(--muted); font-size: 17px; margin: 0 0 26px; }
.sub b { color: var(--ink); }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.spacer { flex: 1; }

/* the epigraph — the literary voice opens the page */
.epigraph { margin: 6px 0 22px; padding: 2px 0 2px 16px; border-left: 1px solid var(--gold-dim); }
.epigraph p { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic;
  font-size: 20px; line-height: 1.4; color: var(--ink); margin: 0 0 6px; }
.epigraph cite { font-style: normal; font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; color: var(--muted); letter-spacing: .04em; }

/* buttons */
.btn { display: block; width: 100%; border: 0; border-radius: var(--r); padding: 18px 20px;
  font: 600 18px/1 'Familjen Grotesk', sans-serif; cursor: pointer; text-align: center;
  text-decoration: none; color: var(--ink); transition: transform .08s, filter .15s; }
.btn:active { transform: scale(.98); }
.btn-primary { background: linear-gradient(100deg, var(--gold), var(--gold2)); color: #241806; }
.btn-ghost { background: transparent; border: 1px solid var(--line); }
.btn:focus-visible, .chip:focus-visible, summary:focus-visible, select:focus-visible,
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.fineprint { color: var(--muted); font-size: 13px; margin: 16px 0 4px; text-align: center; }
.collect { font-size: 13px; color: var(--muted); text-align: center; }
.collect summary { cursor: pointer; color: var(--gold); display: inline-block; }
.collect p { text-align: left; margin: 10px 0 0; }

.mark { font-size: 56px; text-align: center; margin: 5vh 0 16px;
  filter: drop-shadow(0 0 22px rgba(212, 169, 78, .45)); }

/* perm + gate */
.perm { flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; }
.perm .mark { margin: 0 0 16px; }
.err { color: var(--wax); font-size: 14px; margin-top: 14px; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* the desktop gate: the QR on a parchment card — the pen-pal cards' one bright object */
.gate .sub { max-width: 430px; }
.qr-card { width: 224px; height: 224px; padding: 10px; border-radius: 14px; background: var(--parchment);
  box-shadow: 0 14px 44px rgba(0, 0, 0, .5), 0 0 0 1px var(--card-line); margin: 2px 0 24px; }
.qr-card:empty { display: none; }   /* nothing until qr.js has drawn it; the typed address stands alone */
.qr-card svg { display: block; width: 100%; height: 100%; }
.gate-how { margin-bottom: 6px; }
.nowrap { white-space: nowrap; }

/* draw run */
.draw-top { margin-bottom: 20px; }
.draw-progress { color: var(--muted); font-size: 13px; text-align: center; margin-bottom: 8px;
  letter-spacing: .05em; }
.draw-bar { width: 100%; height: 6px; background: #201810; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--line); }
.draw-bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-dim), var(--gold));
  border-radius: 6px; transition: width .3s ease; }
.cast { display: flex; flex: 1; flex-direction: column; align-items: center; text-align: center; }
.cast-glyph { font-size: 140px; font-weight: 600; line-height: 1.2; margin: 2vh 0 2px;
  /* Cormorant, not Familjen: the grotesk's flat-cut 't' terminal reads as a chopped-off
     letter at prompt size (JU 2026-08-25, probe: verify/tprobe.png) — the serif has the
     full curved tail, real descenders, and is the page's historical voice anyway */
  font-family: 'Cormorant Garamond', Georgia, serif;
  letter-spacing: 0; color: var(--ink); text-shadow: 0 0 32px rgba(212, 169, 78, .38); }
.cast-glyph.glyph-symbol { font-family: 'Noto Sans Symbols 2', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400; }
/* the written single-storey 'a' (Cormorant's italic a has no top hook) — people should
   draw the schoolbook form, not copy the print double-storey glyph (JU 2026-08-25) */
.cast-glyph.glyph-written { font-style: italic; }
.cast-glyph.cast-word { font-size: clamp(40px, 15vw, 64px); font-weight: 600; letter-spacing: normal; }
.cast-caption { color: var(--gold); font-size: 14px; letter-spacing: .05em; margin: 0 0 24px; }
.draw-pad { width: 100%; min-height: 150px; border: 2px solid var(--gold); border-radius: 18px;
  display: flex; align-items: center; justify-content: center; text-align: center; color: var(--ink);
  font: 700 22px 'Familjen Grotesk', sans-serif; touch-action: none; user-select: none;
  -webkit-user-select: none; background: #241a0e; box-shadow: 0 0 26px rgba(212, 169, 78, .18);
  transition: border-color .12s, background .12s, box-shadow .12s; padding: 18px; margin-top: 4px; }
.draw-pad.holding { border-color: var(--gold2); background: #322410; font-size: 18px;
  box-shadow: 0 0 36px rgba(240, 212, 138, .32); }
.cast-flash { min-height: 28px; margin-top: 12px; font-size: 15px; font-weight: 600;
  color: var(--gold2); letter-spacing: .03em; }

/* reading */
.reading { flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; }
.seal { width: 76px; height: 76px; border-radius: 50%; margin-bottom: 22px;
  background: conic-gradient(from 0deg, var(--gold-dim), var(--gold2), var(--gold-dim));
  animation: spin 1.3s linear infinite; filter: blur(1px); }
@keyframes spin { to { transform: rotate(360deg); } }
#reading-sub { font-size: 13px; }

/* ── result ─────────────────────────────────────────────────────────── */
.rblock { border-top: 1px solid var(--line); padding: 20px 0 22px; }
.rblock:first-child { border-top: 0; padding-top: 4px; }
.rlabel { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }

/* guesses — one ruled row per attribute */
.grow { padding: 12px 0 14px; border-bottom: 1px dashed #2b2318; }
.grow:last-child { border-bottom: 0; }
.ghead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.gname { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); }
.gval { font-size: 18px; font-weight: 600; }
.gbadge { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600;
  color: var(--gold2); margin-left: auto; white-space: nowrap; }
.stamp { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 12px;
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--wax);
  border: 1.5px solid var(--wax); border-radius: 4px; padding: 2px 8px 1px;
  transform: rotate(-2deg); opacity: .92; margin-left: auto; white-space: nowrap; }
.gsub { color: var(--muted); font-size: 14px; margin: 6px 0 0; line-height: 1.5; }
.gsub b { color: var(--ink); }
.gtaps { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.gtaps .tq { color: var(--muted); font-size: 12.5px; margin-right: 2px; }
.chip { border: 1px solid var(--line); background: #1c150d; color: var(--ink); border-radius: 999px;
  padding: 7px 13px; font: 600 14px 'Familjen Grotesk', sans-serif; cursor: pointer; }
.chip.sel { border-color: var(--gold); color: var(--gold2); }

.edu { margin-top: 16px; border: 1px dashed var(--line); border-radius: 12px; padding: 14px; }
.edu label { display: block; font-size: 14px; color: var(--ink); margin-bottom: 10px; }
.edu .opt-note { color: var(--muted); font-size: 12.5px; }
select { width: 100%; background: #1c150d; color: var(--ink); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; font: 500 15px 'Familjen Grotesk', sans-serif; }
.edu-thanks { color: var(--good); font-size: 12.5px; margin-top: 8px; }

/* mechanics — hairline percentile bars, gold fill, a tick at the population median */
.mrow { margin: 0 0 16px; }
.mtop { display: flex; align-items: baseline; gap: 10px; }
.mname { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); }
.mval { font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 600;
  color: var(--gold2); margin-left: auto; }
.mtrack { position: relative; height: 7px; background: #201810; border: 1px solid #2b2318;
  border-radius: 5px; margin: 8px 0 6px; overflow: hidden; }
.mfill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--gold-dim), var(--gold));
  border-radius: 4px; }
.mtick { position: absolute; top: -2px; bottom: -2px; left: 50%; width: 1px; background: #57452a; }
.mphrase { color: var(--muted); font-size: 13.5px; }
.mfact { border-left: 2px solid var(--gold-dim); padding: 2px 0 2px 12px; margin: 14px 0 0;
  color: var(--ink); font-size: 14px; line-height: 1.5; }
.mfact .mono { color: var(--gold); font-size: 12px; }

/* the twin card — parchment, dealt onto the table */
.twin-card { background: linear-gradient(160deg, var(--parchment), var(--parchment2));
  color: var(--card-ink); border-radius: 14px; padding: 22px 20px 20px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55), 0 2px 0 rgba(240, 212, 138, .25) inset;
  animation: deal .7s cubic-bezier(.2, .8, .3, 1); }
@keyframes deal {
  from { opacity: 0; transform: translateY(28px) rotate(-3deg) scale(.97); }
  to { opacity: 1; transform: none; }
}
.twin-sig { display: block; width: 100%; max-height: 130px; object-fit: contain; margin: 2px 0 14px; }
.twin-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 34px; font-weight: 700;
  line-height: 1.05; margin: 0; }
.twin-dates { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--card-muted);
  margin: 4px 0 0; letter-spacing: .05em; }
.twin-pct { font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 600;
  color: #7a5a1c; margin: 10px 0 0; }
/* the photo-finish disclosure (fires when #1−#2 ≤ 3 points — ~44% of runs, measured) */
.twin-close { font-size: 13.5px; color: #8a6a2c; margin: 6px 14px 0; line-height: 1.45; }
.twin-drivers { margin: 14px 0 0; border-top: 1px solid var(--card-line); }
.driver { padding: 12px 0; border-bottom: 1px solid var(--card-line); }
.driver:last-child { border-bottom: 0; padding-bottom: 2px; }
.driver-you { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--card-ink);
  margin: 0 0 6px; }
.driver-quote { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic;
  font-size: 18px; line-height: 1.35; margin: 0; }
.driver-src { font-size: 12px; color: var(--card-muted); margin: 4px 0 0; }
.driver-src a { color: var(--card-muted); }
.twin-ms { margin: 18px 0 0; }
.twin-ms img { display: block; width: 100%; border-radius: 10px; border: 1px solid var(--line); }
.ms-cap { color: var(--muted); font-size: 12.5px; margin: 8px 0 0; }
.attr-line { color: var(--muted); font-size: 11.5px; margin: 4px 0 0; }

/* runners-up — two smaller parchment cards */
#runners { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.runner { background: var(--parchment2); color: var(--card-ink); border-radius: 12px;
  padding: 14px 14px 12px; box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
  animation: deal .7s cubic-bezier(.2, .8, .3, 1) backwards; }
.runner:nth-child(1) { animation-delay: .15s; }
.runner:nth-child(2) { animation-delay: .26s; }
.runner-sig { display: block; width: 100%; height: 44px; object-fit: contain; margin-bottom: 8px; }
.runner-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 19px; font-weight: 700;
  line-height: 1.1; margin: 0; }
.runner-pct { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600;
  color: #7a5a1c; margin: 3px 0 6px; }
.runner-hook { font-size: 12.5px; color: var(--card-muted); line-height: 1.4; margin: 0; }

/* how / cta / share */
.how-details summary { cursor: pointer; font-weight: 600; font-size: 16px; color: var(--ink); }
.how-body { margin-top: 10px; }
.how-body p { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin: 0 0 10px; }
.how-body a { color: var(--gold); }
.cta { text-align: center; }
.cta-line { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-style: italic;
  margin: 0 0 14px; }
.cta-line em { color: var(--gold2); font-style: inherit; }
#share { border-top: 0; padding-top: 0; }

.result-empty { color: var(--muted); font-size: 14.5px; border: 1px dashed var(--line);
  border-radius: 12px; padding: 14px; }

/* wider screens (560 headless floor + desktop) stay a centred column */
@media (min-width: 560px) {
  #app { padding-top: 36px; }
  .mark { margin-top: 4vh; }
  .twin-name { font-size: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .screen.active, .twin-card, .runner { animation: none; }
  .seal { animation: none; }
  .draw-bar-fill { transition: none; }
}

/* the grip instruction on the intro (John, 2026-08-25) — the TV-remote hold is
   also what the 349-subject baseline used, so it is load-bearing, not just UX */
.grip { border: 1px solid var(--gold-dim); border-radius: 10px; padding: 12px 14px;
        color: var(--ink); font-size: 15.5px; line-height: 1.45; margin: 0 0 22px; }
.grip-how { display: block; font-family: 'JetBrains Mono', ui-monospace, monospace;
            font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
            color: var(--gold); margin-bottom: 4px; }

/* the in-app browser notice (LinkedIn / Facebook / Instagram WebViews; inapp.js) */
.inapp { border: 1px solid var(--wax); border-radius: 10px; padding: 12px 14px; margin: 0 0 22px;
         color: var(--ink); font-size: 15px; line-height: 1.45; }
.inapp-label { display: block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
               letter-spacing: .14em; text-transform: uppercase; color: var(--wax); margin-bottom: 4px; }
.inapp p { margin: 0; }
.inapp p.inapp-how { color: var(--muted); font-size: 14px; margin-top: 6px; }
.inapp .btn { width: 100%; margin-top: 12px; }
#inapp-open-perm { margin-top: 14px; }

/* ── the cursive lane ─────────────────────────────────────────────────── */

/* a whole word has to fit the width a single glyph had, on a phone */
.cast-glyph.glyph-wordprompt {
  font-size: clamp(38px, 13vw, 72px);
  letter-spacing: 0.01em;
  line-height: 1.15;
  word-break: keep-all;
}

/* the payoff block: the figure's real ink beside the user's rendered hand */
.bh-pair {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bh-half {
  margin: 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.bh-half img,
.bh-half svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 110px;
  object-fit: contain;
  object-position: left center;
}
/* the figure's ink is a photographic crop — keep it on its own paper tone */
.bh-half img {
  background: #f6f1e4;
  border-radius: 4px;
  padding: 6px 8px;
}
/* the rendered hand inherits the page ink colour via stroke:currentColor */
.bh-half svg { color: var(--ink, #e9e6df); padding: 6px 8px; }
.bh-half figcaption {
  margin-top: 8px;
  font-size: 13px;
  letter-spacing: 0.02em;
  opacity: 0.85;
}
.bh-half .bh-sub {
  display: block;
  font-size: 12px;
  opacity: 0.6;
  margin-top: 2px;
}
.bh-half .gloss { font-style: italic; }
.bothhands-note {
  margin: 12px 2px 0;
  font-size: 12.5px;
  line-height: 1.5;
  opacity: 0.62;
}
@media (min-width: 560px) {
  .bh-pair { flex-direction: row; }
  .bh-half { flex: 1 1 0; min-width: 0; }
}

/* ── validation study: covariate chips + finish ─────────────────────────── */
.finish-q { margin: 14px 0 6px; font-size: 15px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chips .chip { font-size: 14px; padding: 8px 14px; }
.chips .chip.sel { outline: 2px solid currentColor; }
#finish-btn { margin-top: 18px; width: 100%; }

/* ── validation study: the paper screen ─────────────────────────────────── */
/* an author `display:` beats the UA's [hidden]{display:none} — .paper-actions (flex) and
   .photo-preview (block) both shipped visible on a fresh screen until this guard. */
[hidden] { display: none !important; }
.paper-line { font-family: 'Cormorant Garamond', serif; font-size: 34px; margin: 10px 0 14px; letter-spacing: .01em; }
.paper-field { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 10px 0 14px; font-size: 15px; }
.paper-field select { font: inherit; padding: 8px 10px; border-radius: 8px; }
.photo-preview { display: block; max-width: 100%; max-height: 46vh; margin: 12px auto; border-radius: 8px; }
.paper-actions { display: flex; gap: 10px; margin-top: 8px; }
.paper-actions .btn { flex: 1; }
.btn.small { font-size: 13px; padding: 8px 12px; margin-top: 14px; opacity: .8; }
.btn:disabled { opacity: .45; pointer-events: none; }

/* ── validation study: blind judging. Same box, greyscale, no names — the ink alone. ─── */
.judge-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin-top: 16px; }
.jvs { opacity: .6; font-size: 13px; }
.jcard { display: block; width: 100%; background: #fff; border: 1px solid rgba(0,0,0,.18); border-radius: 10px; padding: 10px; cursor: pointer; }
.jcard img { display: block; width: 100%; height: 84px; object-fit: contain; filter: grayscale(1) contrast(1.08); }
.jcard.sel { outline: 3px solid #d9a441; }
.judge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 16px; }
.judge-grid .jcard { padding: 6px; }
.judge-grid .jcard img { height: 52px; }
#grid-confirm { width: 100%; }