:root {
  --ink: #0b1713;
  --paper: #f0ede5;
  --paper-2: #e7e1d6;
  --signal: #f0522d;
  --acid: #d7e45b;
  --muted: #68716b;
  --hairline: rgba(11, 23, 19, .2);
  --gridline: rgba(11, 23, 19, .085);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.5 var(--sans); }
button, textarea, input { font: inherit; }
button, a { color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--ink); color: var(--paper); }

.site-nav {
  height: 70px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 34px;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid rgba(240,237,229,.18);
}
.site-nav > span, .site-nav > a:last-child { font: 400 10px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.site-nav > span { opacity: .65; }
.site-nav > a:last-child { justify-self: end; text-decoration: none; }
.wordmark { font: 600 28px/1 var(--serif); letter-spacing: -.04em; text-decoration: none; }
.wordmark i { color: var(--signal); font-style: normal; }

.test-block {
  position: relative;
  min-height: calc(100svh - 70px);
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(560px, 1.28fr);
  gap: clamp(30px, 6vw, 110px);
  align-items: center;
  padding: clamp(70px, 8vw, 130px) 5vw;
  overflow: hidden;
  background: var(--signal);
}
.background-line { position: absolute; right: -8vw; bottom: -24vw; width: min(72vw, 1000px); fill: none; stroke: rgba(11,23,19,.11); stroke-width: 2; pointer-events: none; }
.block-intro, .dialog { position: relative; z-index: 1; }
.section-id, .dialog-head, .dialog-foot, .answer-form label, .answer-meta, .signal, .result-kicker, .lens-number {
  font: 400 10px/1.35 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.section-id { margin: 0; }
.block-intro h1 { margin: clamp(100px, 15vh, 190px) 0 30px; font: 300 clamp(54px, 6.2vw, 104px)/.88 var(--serif); letter-spacing: -.06em; }
.block-intro h1 em { color: var(--paper); font-weight: 500; }
.block-intro > p:not(.section-id) { max-width: 540px; margin: 0; }
.six-lines { display: grid; grid-template-columns: 1fr 1fr; max-width: 500px; margin-top: 50px; border-top: 1px solid var(--ink); }
.six-lines span { padding: 11px 0; border-bottom: 1px solid var(--hairline); font: 400 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }

.dialog {
  min-height: 680px;
  max-height: 790px;
  display: grid;
  grid-template-rows: 52px minmax(0, 1fr) 46px;
  border: 1px solid var(--ink);
  background: var(--paper);
  box-shadow: 18px 18px 0 rgba(11,23,19,.11);
}
.dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid var(--ink); background: var(--ink); color: var(--paper); }
.dialog-head div { display: flex; align-items: center; gap: 10px; }
.dialog-head i { width: 8px; height: 8px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 4px rgba(215,228,91,.12); }
.dialog-head > span { opacity: .58; }
.dialog-body {
  overflow-y: auto;
  padding: clamp(34px, 4.2vw, 68px);
  background-image: linear-gradient(var(--gridline) 1px, transparent 1px), linear-gradient(90deg, var(--gridline) 1px, transparent 1px);
  background-size: 56px 56px;
}
.intro-view { min-height: 100%; display: flex; flex-direction: column; justify-content: center; }
.intro-label { margin: 0 0 22px; color: var(--signal); font: 400 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.intro-view h2 { max-width: 850px; }
.intro-copy { max-width: 720px; margin: 24px 0 34px; color: var(--muted); font-size: 14px; }
.method-preview { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: rgba(240,237,229,.88); }
.method-preview div { min-height: 140px; padding: 16px; }
.method-preview div + div { border-left: 1px solid var(--ink); }
.method-preview b { display: block; margin-bottom: 32px; color: var(--signal); font: 400 10px/1 var(--mono); }
.method-preview span { display: block; font: 500 17px/1.1 var(--serif); }
.method-preview small { display: block; margin-top: 9px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.begin-button { align-self: flex-end; margin-top: 26px; padding: 17px 19px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; font: 500 10px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.begin-button b { margin-left: 32px; color: var(--signal); }
.time-note { align-self: flex-end; margin-top: 10px; color: var(--muted); font: 400 9px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.question-view { min-height: 100%; }
.palma-note { max-width: 640px; margin-bottom: clamp(30px, 4.5vh, 48px); padding: 14px 18px; border-left: 3px solid var(--signal); background: rgba(240,237,229,.92); color: var(--muted); font-size: 14px; }
.dialog-body h2 { max-width: 830px; margin: 0; font: 300 clamp(38px, 3.8vw, 60px)/.94 var(--serif); letter-spacing: -.05em; }
.answer-hint { max-width: 650px; margin: 18px 0 26px; color: var(--muted); font-size: 14px; }
.answer-form label { display: block; margin-bottom: 10px; color: var(--signal); }
.answer-form textarea {
  width: 100%;
  min-height: 104px;
  padding: 17px 0;
  resize: vertical;
  border: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  outline: 0;
  background: rgba(240,237,229,.83);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
}
.answer-form textarea:focus { border-color: var(--signal); box-shadow: inset 0 1px var(--signal), inset 0 -1px var(--signal); }
.answer-form textarea::placeholder { color: rgba(11,23,19,.35); }
.answer-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; color: var(--muted); }
.answer-meta button, .email-form button, .restart-button { padding: 15px 18px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; font: 500 10px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.answer-meta button b { margin-left: 24px; color: var(--signal); }
.inline-error { margin: 15px 0 0; color: #b72f10; font-size: 13px; }
.dialog-foot { display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-top: 1px solid var(--ink); color: var(--muted); }
.dialog-foot button { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; }

.thinking { min-height: 100%; display: flex; flex-direction: column; justify-content: center; }
.thinking .scan-number { color: var(--signal); font: 300 clamp(100px, 15vw, 230px)/.7 var(--serif); }
.thinking h2 { margin-top: 70px; }
.scan-track { height: 2px; margin-top: 50px; background: var(--hairline); }
.scan-track i { display: block; width: 14%; height: 100%; background: var(--signal); transition: width .45s ease; }

.result-view { margin: calc(clamp(34px, 4.2vw, 68px) * -1); }
.result-top { padding: clamp(40px, 5vw, 72px); background: var(--signal); border-bottom: 1px solid var(--ink); }
.result-kicker { display: flex; justify-content: space-between; }
.result-kicker strong { font-weight: 500; }
.result-top h2 { margin: 70px 0 26px; }
.result-top > p { max-width: 700px; margin: 0; font-size: 16px; }
.result-preview { display: grid; grid-template-columns: 1fr 1fr; background: var(--paper); border-bottom: 1px solid var(--ink); }
.result-preview article { padding: 34px; }
.result-preview article + article { border-left: 1px solid var(--ink); }
.result-preview small, .experiment small { color: var(--signal); font: 400 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.result-preview p { margin: 24px 0 0; font: 300 23px/1.08 var(--serif); }
.email-panel { padding: 42px; background: var(--ink); color: var(--paper); }
.email-panel h3 { margin: 0 0 30px; font: 300 38px/.95 var(--serif); }
.email-form { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
.email-form input { min-width: 0; padding: 13px 0; border: 0; border-bottom: 1px solid var(--paper); border-radius: 0; outline: 0; background: none; color: var(--paper); }
.email-form small { grid-column: 1 / -1; color: rgba(240,237,229,.45); font-size: 10px; }
.email-form button:disabled { cursor: wait; opacity: .58; }
.email-form .delivery-status { grid-column: 1 / -1; margin: 3px 0 0; color: #ff967e; font-size: 12px; }
.full-reading { background: var(--paper); }
.delivery-confirmation { margin: 0; padding: 18px 34px; border-bottom: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: 400 10px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.full-result-top { background: var(--paper-2); }
.reading-frame { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--ink); background: var(--paper); }
.reading-frame article { padding: 34px; }
.reading-frame article + article { border-left: 1px solid var(--ink); }
.reading-frame small, .reading-section-head span, .lens-detail small, .question-bank small, .reading-limit small { color: var(--signal); font: 400 9px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.reading-frame p { margin: 20px 0 0; font: 300 21px/1.15 var(--serif); }
.reading-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; padding: 28px 34px; border-bottom: 1px solid var(--ink); background: var(--ink); color: var(--paper); }
.reading-section-head p { max-width: 390px; margin: 0; color: rgba(240,237,229,.62); font-size: 11px; }
.lens-row { display: grid; grid-template-columns: 54px 1fr; gap: 20px; padding: 34px; border-bottom: 1px solid var(--ink); background: rgba(240,237,229,.96); }
.lens-number { padding-top: 5px; color: var(--signal); }
.lens-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; }
.lens-heading .signal { flex: none; margin-top: 4px; padding: 6px 8px; border: 1px solid var(--signal); color: var(--signal); }
.lens-row h3 { margin: 0; font: 300 31px/1 var(--serif); }
.lens-observation { max-width: 690px; margin: 17px 0 25px; color: var(--ink); font-size: 14px; }
.lens-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.lens-detail div + div { padding-left: 28px; border-left: 1px solid var(--hairline); }
.lens-detail p, .lens-detail ul { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.lens-detail ul { padding-left: 17px; }
.decision { padding: 44px; background: var(--signal); border-bottom: 1px solid var(--ink); }
.decision h3 { margin: 35px 0 0; font: 300 38px/.98 var(--serif); }
.experiment { padding: 44px; }
.experiment h3 { margin: 24px 0 15px; font: 500 27px/1 var(--serif); }
.experiment p { color: var(--muted); }
.experiment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--hairline); }
.experiment-grid div + div { padding-left: 32px; border-left: 1px solid var(--hairline); }
.question-bank { display: grid; grid-template-columns: 2fr 3fr; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.question-bank > div { padding: 40px 34px; }
.question-bank > div + div { border-left: 1px solid var(--ink); }
.question-bank ol { margin: 25px 0 0; padding-left: 22px; }
.question-bank li { margin: 0 0 16px; padding-left: 8px; font: 300 20px/1.2 var(--serif); }
.reading-limit { padding: 30px 34px; background: var(--paper-2); }
.reading-limit p { max-width: 670px; margin: 14px 0 0; color: var(--muted); font-size: 12px; }
.result-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 34px; background: var(--ink); }
.result-actions a, .result-actions .restart-button { margin: 0; padding: 15px 18px; border: 1px solid var(--paper); color: var(--paper); font: 500 10px/1 var(--mono); letter-spacing: .09em; text-decoration: none; text-transform: uppercase; }
.result-actions a { background: var(--paper); color: var(--ink); }

@media (max-width: 920px) {
  .site-nav { grid-template-columns: 1fr auto; padding: 0 20px; }
  .site-nav > span { display: none; }
  .test-block { grid-template-columns: 1fr; padding: 80px 22px; }
  .block-intro h1 { margin-top: 80px; font-size: clamp(55px, 15vw, 90px); }
  .six-lines { margin-bottom: 35px; }
  .dialog { min-height: 690px; max-height: none; box-shadow: 9px 9px 0 rgba(11,23,19,.11); }
  .dialog-body { padding: 34px 22px; background-size: 44px 44px; }
  .dialog-body h2 { font-size: clamp(39px, 10vw, 58px); }
  .method-preview { grid-template-columns: 1fr; }
  .method-preview div { min-height: auto; }
  .method-preview div + div { border-left: 0; border-top: 1px solid var(--ink); }
  .method-preview b { margin-bottom: 10px; }
  .begin-button, .time-note { align-self: stretch; text-align: center; }
  .dialog-foot > span { font-size: 8px; }
  .result-view { margin: -34px -22px; }
  .result-preview { grid-template-columns: 1fr; }
  .result-preview article + article { border-left: 0; border-top: 1px solid var(--ink); }
  .reading-frame, .lens-detail, .experiment-grid, .question-bank { grid-template-columns: 1fr; }
  .reading-frame article + article, .lens-detail div + div, .experiment-grid div + div, .question-bank > div + div { padding-left: 22px; border-left: 0; border-top: 1px solid var(--ink); }
  .reading-section-head { display: block; }
  .reading-section-head p { margin-top: 12px; }
  .email-form { grid-template-columns: 1fr; }
  .email-form small { grid-column: auto; }
  .lens-row { grid-template-columns: 34px 1fr; padding: 26px 22px; }
  .lens-heading { display: block; }
  .lens-heading .signal { display: inline-block; margin: 13px 0 0; }
  .decision, .experiment { padding: 36px 22px; }
  .result-actions { align-items: stretch; flex-direction: column; padding: 22px; }
  .result-actions a, .result-actions .restart-button { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
}