:root {
  --room:#10120f;
  --room-2:#171915;
  --room-3:#1d1f1a;
  --paper:#e9e4da;
  --paper-2:#f3efe7;
  --ink:#292923;
  --orange:#c86640;
  --orange-bright:#e2855d;
  --warm:#c3b9ad;
  --muted:#918b82;
  --line:#3d4038;
  --paper-line:#bdb5aa;
  --sans:'Instrument Sans',sans-serif;
  --serif:'Instrument Serif',serif;
  --mono:'DM Mono',monospace;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; background:var(--room); color:#eee8df; font-family:var(--sans); }
body:before { content:''; position:fixed; inset:0; z-index:-2; background:radial-gradient(circle at 72% 0,#23231d 0,transparent 34%),var(--room); }
body.needle-down:after { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(circle at 86% 12%,#dd6b3236,transparent 33%),radial-gradient(circle at 12% 72%,#a53f181d,transparent 39%); animation:safelight 2s ease both; }
@keyframes safelight { from { opacity:0; } to { opacity:1; } }
a,button { color:inherit; }
button { font:inherit; }
img { max-width:100%; }
.skip { position:fixed; left:12px; top:-100px; z-index:100; padding:10px 13px; background:white; color:black; }
.skip:focus { top:12px; }
.site-header,main { width:min(1500px,calc(100% - 72px)); margin:auto; }
.site-header { height:84px; display:flex; align-items:center; gap:28px; border-bottom:1px solid var(--line); }
.site-header>a { font-size:14px; font-weight:600; text-decoration:none; }
.site-header>span { color:#88847c; font:10px var(--mono); letter-spacing:.05em; }
.site-header nav { display:flex; gap:30px; margin-left:auto; font-size:14px; }
.site-header nav a { text-decoration:none; }
.site-header nav a:hover,.site-header nav a:focus-visible { color:var(--orange-bright); }
.eyebrow,.section-heading small,.context-summary small,.personal small,.outro small { color:var(--orange-bright); font:9px var(--mono); letter-spacing:.09em; }
.text-link { color:#efad89; text-underline-offset:6px; }

/* First screen */
.hero { min-height:calc(100vh - 84px); display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.75fr); gap:72px; align-items:center; padding:38px 28px 48px; border-inline:1px solid var(--line); }
.hero-copy { padding-left:2px; }
.hero-copy h1 { max-width:650px; margin:22px 0 27px; font:clamp(60px,5.5vw,88px)/.9 var(--sans); letter-spacing:-.065em; }
.hero-intro { max-width:580px; margin:0 0 28px; color:#c6bdb2; font-size:17px; line-height:1.58; }
.target { max-width:570px; margin:38px 0 0; padding-top:17px; border-top:1px solid var(--line); color:#8e887f; font:12px/1.6 var(--mono); }
.hero-receipt { align-self:center; display:grid; grid-template-columns:1fr auto; gap:24px 34px; padding:28px 0; border-block:1px solid var(--line); }
.hero-receipt>small { grid-column:1 / -1; color:#8f887f; font:9px var(--mono); letter-spacing:.08em; }
.hero-receipt>p { margin:0; color:#c9c0b5; font:18px/1.45 var(--sans); }
.hero-receipt>p strong { color:#f0ebe3; font-weight:500; }
.hero-receipt>div { grid-column:2; grid-row:2 / 4; align-self:center; text-align:right; }
.hero-receipt>div strong,.hero-receipt>div span { display:block; }
.hero-receipt>div strong { color:var(--orange-bright); font:76px/.82 var(--sans); letter-spacing:-.075em; }
.hero-receipt>div span { margin-top:12px; color:#918a81; font-size:10px; line-height:1.5; }
.hero-receipt>a { width:max-content; color:#efad89; text-underline-offset:6px; }

.hero-proof { position:relative; min-height:570px; display:grid; grid-template-columns:1.1fr .9fr; grid-template-rows:auto 1fr auto auto; gap:24px 36px; padding:35px 34px 34px 83px; background:var(--paper); color:var(--ink); box-shadow:0 28px 75px #000a; transform:rotate(.12deg); }
.film-edge { position:absolute; inset:0 auto 0 0; width:54px; display:flex; flex-direction:column; justify-content:space-between; align-items:center; padding:18px 0; border-right:1px solid #45463f; background:#0b0d0a; color:#d3cec5; }
.film-edge span { font:8px var(--mono); letter-spacing:.06em; writing-mode:vertical-rl; }
.film-edge span:first-child { color:var(--orange-bright); writing-mode:horizontal-tb; }
.proof-heading { grid-column:1 / 3; display:flex; justify-content:space-between; padding-bottom:17px; border-bottom:1px solid var(--paper-line); color:#746e66; font:9px var(--mono); }
.proof-question p { margin:0 0 11px; color:#8f4932; font:10px var(--mono); }
.proof-question h2 { margin:0; font:48px/.94 var(--serif); font-weight:400; letter-spacing:-.025em; }
.proof-result { align-self:end; text-align:right; }
.proof-result strong,.proof-result span { display:block; }
.proof-result strong { color:var(--orange); font:90px/.82 var(--sans); letter-spacing:-.08em; }
.proof-result span { margin-top:13px; color:#6e685f; font-size:11px; line-height:1.45; }
.proof-chain { grid-column:1 / 3; display:grid; grid-template-columns:1fr 22px 1fr 22px 1fr; gap:9px; align-items:center; padding:19px 0; border-block:1px solid var(--paper-line); }
.proof-chain span,.proof-chain small,.proof-chain strong,.proof-chain del { display:block; }
.proof-chain small { margin-bottom:8px; color:#7b756d; font:8px var(--mono); }
.proof-chain strong,.proof-chain del { font-size:14px; }
.proof-chain b { color:var(--orange); font-weight:400; text-align:center; }
.hero-proof>a { grid-column:1; align-self:center; color:#9f452b; text-underline-offset:5px; }
.proof-note { grid-column:2; justify-self:end; align-self:center; padding:8px 10px; background:var(--orange); color:#fff; font:9px var(--mono); transform:rotate(-1.4deg); }

/* Context and proof wall */
.work { border:1px solid var(--line); background:#0b0d0a; }
.section-heading { min-height:290px; display:grid; grid-template-columns:1fr .55fr; gap:70px; align-items:center; padding:65px 70px; background:var(--room-2); }
.section-heading h2 { max-width:850px; margin:20px 0 0; font:clamp(54px,5vw,78px)/.92 var(--sans); letter-spacing:-.06em; }
.section-heading>p { max-width:440px; color:#bdb4a9; font-size:17px; line-height:1.6; }
.context-picker { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; border-block:1px solid var(--line); background:var(--line); }
.context-picker button { min-height:128px; display:grid; grid-template-columns:34px 1fr; gap:7px 14px; align-content:center; padding:24px 30px; border:0; background:#131510; text-align:left; cursor:pointer; }
.context-picker button>span { grid-row:1 / 3; color:var(--orange-bright); font:10px var(--mono); }
.context-picker button strong { font-size:17px; font-weight:500; }
.context-picker button small { color:#8f897f; font-size:11px; }
.context-picker button:hover,.context-picker button:focus-visible { background:#1e201b; outline:2px solid #9e5438; outline-offset:-2px; }
.context-picker button[aria-pressed="true"] { background:var(--paper); color:var(--ink); }
.context-picker button[aria-pressed="true"] small { color:#726c64; }
.context-summary { min-height:450px; display:grid; grid-template-columns:1.25fr .75fr; gap:80px; align-items:center; padding:65px 70px; background:#171915; }
.context-summary h3 { max-width:800px; margin:18px 0 24px; font:clamp(56px,5vw,82px)/.9 var(--serif); font-weight:400; letter-spacing:-.035em; }
.context-summary>div>p { max-width:690px; color:#c2b9ae; font-size:17px; line-height:1.65; }
.context-summary aside { padding:32px; border:1px solid #5a584f; }
.context-summary aside>small { color:#8f8980; }
#context-signals { margin-top:23px; }
#context-signals span { display:block; padding:12px 0; border-top:1px solid #45473f; color:#d7d0c7; font-size:13px; }

.proof-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:12px; padding:12px; border-top:1px solid var(--line); }
.proof-card { position:relative; min-height:430px; display:grid; grid-template-columns:1fr .9fr; gap:30px; padding:48px 38px 38px 82px; border:1px solid #44463e; background:#181a16; overflow:hidden; }
.proof-card:first-child { grid-column:1 / -1; grid-row:auto; min-height:570px; }
.proof-card:nth-child(2),.proof-card:nth-child(3) { grid-column:span 6; min-height:560px; display:block; }
.proof-card .film-edge { border-color:#44463e; }
.proof-card-copy { display:flex; flex-direction:column; min-width:0; }
.proof-card-copy>small { color:#948e84; font:9px var(--mono); letter-spacing:.06em; }
.proof-card-copy h3 { margin:17px 0 21px; font:clamp(40px,4vw,62px)/.92 var(--serif); font-weight:400; letter-spacing:-.03em; }
.proof-card-copy>p { max-width:590px; margin:0; color:#bbb2a8; font-size:15px; line-height:1.6; }
.proof-card-copy>strong { display:block; margin-top:auto; color:var(--orange-bright); font:clamp(62px,7vw,106px)/.83 var(--sans); letter-spacing:-.08em; }
.proof-card-copy>span { margin-top:12px; color:#9d958b; font-size:11px; line-height:1.45; }
.proof-card-copy>a { width:max-content; margin-top:25px; padding:0 0 4px; border-bottom:1px solid currentColor; color:#efac88; text-decoration:none; }
.proof-card-copy>a:hover,.proof-card-copy>a:focus-visible { color:#fff; outline:0; }
.proof-card figure { align-self:center; margin:0; }
.proof-card figure img { display:block; width:100%; border:6px solid var(--paper-2); }
.proof-primary.no-proof-image { min-height:0; grid-template-columns:1fr; }
.proof-primary.no-proof-image .proof-card-copy { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(180px,.72fr); grid-template-rows:auto auto auto auto; column-gap:clamp(34px,5vw,76px); }
.proof-primary.no-proof-image .proof-card-copy>small { grid-column:1 / -1; }
.proof-primary.no-proof-image .proof-card-copy>h3 { grid-column:1; grid-row:2; }
.proof-primary.no-proof-image .proof-card-copy>p { grid-column:1; grid-row:3; }
.proof-primary.no-proof-image .proof-card-copy>strong { grid-column:2; grid-row:2; align-self:end; margin:0; text-align:right; }
.proof-primary.no-proof-image .proof-card-copy>span { grid-column:2; grid-row:3; margin-top:16px; text-align:right; }
.proof-primary.no-proof-image .proof-card-copy>a { grid-column:1; grid-row:4; }
.proof-paper { background:var(--paper); color:var(--ink); }
.proof-paper .proof-card-copy>small,.proof-paper .proof-card-copy>span { color:#756f67; }
.proof-paper .proof-card-copy>p { color:#5e5952; }
.proof-paper .proof-card-copy>strong { color:var(--orange); }
.proof-paper .proof-card-copy>a { color:#9e452b; }
.proof-image:first-child { grid-template-columns:.78fr 1.22fr; background:#12140f; }
.proof-card:nth-child(n+2) figure { margin-top:28px; }
.proof-card:nth-child(n+2) .proof-card-copy>strong { margin-top:34px; }

/* Judgment inspector */
.decision { display:grid; grid-template-columns:280px 1fr; gap:12px; padding:12px; border-top:1px solid var(--line); scroll-margin-top:20px; }
#decision-nav { min-height:0; padding:24px 12px; border:1px solid #3e4039; background:#131510; }
#decision-nav>small { display:block; margin:5px 8px 24px; color:#8d877e; font:9px var(--mono); }
#decision-nav button { width:100%; min-height:88px; display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:center; padding:14px 12px; border:0; border-top:1px solid #3d3f38; background:transparent; text-align:left; cursor:pointer; }
#decision-nav button:last-child { border-bottom:1px solid #3d3f38; }
#decision-nav button>span { color:var(--orange-bright); font:9px var(--mono); }
#decision-nav button strong { color:#bbb3a9; font-size:13px; font-weight:500; }
#decision-nav button small { color:#807a72; font:9px var(--mono); }
#decision-nav button:hover,#decision-nav button:focus-visible { background:#20221d; outline:0; }
#decision-nav button[aria-pressed="true"] { background:var(--paper); }
#decision-nav button[aria-pressed="true"] strong { color:var(--ink); }
#decision-nav button[aria-pressed="true"] small { color:#92462e; }
.decision-archive { display:block; width:max-content; margin:28px 8px 4px; color:#d98a65; font:9px var(--mono); text-underline-offset:5px; }
.decision-card { position:relative; min-height:0; display:grid; grid-template-columns:1fr .9fr; grid-template-rows:auto auto auto; gap:27px 54px; padding:38px 46px 38px 84px; background:var(--paper); color:var(--ink); box-shadow:0 24px 70px #0008; }
.decision-heading { grid-column:1 / 3; display:flex; justify-content:space-between; padding-bottom:19px; border-bottom:1px solid var(--paper-line); color:#746e66; font:9px var(--mono); }
.decision-question>p { margin:0 0 30px; color:#605b54; font-size:15px; line-height:1.55; }
.decision-question h3 { margin:0; font:clamp(45px,4.4vw,68px)/.93 var(--serif); font-weight:400; letter-spacing:-.03em; }
.decision-options { display:grid; gap:8px; align-self:start; }
.decision-options button { min-height:54px; display:grid; grid-template-columns:27px 1fr; align-items:center; padding:11px 14px; border:1px solid #aaa298; background:#f2ede4; text-align:left; cursor:pointer; }
.decision-options button b { color:var(--orange); font:10px var(--mono); }
.decision-options button:hover,.decision-options button:focus-visible { border-color:#91452d; outline:2px solid #be61412b; }
.decision-options button[aria-pressed="true"] { background:#282923; color:#f0ebe2; }
.decision-card>output { grid-column:2; min-height:42px; color:#756f66; font-size:12px; line-height:1.5; }
.decision-card>output b { color:#9e452b; }
.decision-result { grid-column:1 / 3; display:grid; grid-template-columns:130px 1fr .55fr; gap:22px 35px; align-items:start; padding-top:26px; border-top:1px solid var(--paper-line); }
.decision-result[hidden] { display:none; }
.decision-result>small { color:#9a4a31; font:9px var(--mono); }
.decision-result>p { margin:0; color:#4e4a44; font-size:14px; line-height:1.6; }
.decision-result blockquote { grid-column:2; margin:0; padding-left:17px; border-left:2px solid var(--orange); font:22px/1.2 var(--serif); }
.decision-result strong,.decision-result span { grid-column:3; }
.decision-result strong { grid-row:1; color:var(--orange); font:54px/.9 var(--sans); letter-spacing:-.06em; }
.decision-result span { grid-row:2; color:#6f6860; font-size:11px; }
.decision-result a { grid-column:3; color:#9d4329; text-underline-offset:5px; }

/* Personal frames */
.personal { min-height:690px; display:grid; grid-template-columns:1.05fr 1.25fr .78fr .72fr .82fr; gap:24px; align-items:center; padding:75px 28px 105px; border-inline:1px solid var(--line); border-bottom:1px solid var(--line); background:#131511; }
.personal-title h2 { margin:20px 0 24px; font:60px/.92 var(--serif); font-weight:400; }
.personal-title p { max-width:340px; color:#a9a197; font-size:13px; line-height:1.6; }
.personal figure { margin:0; padding:8px 8px 34px; background:#eee9e0; color:#32332d; box-shadow:0 18px 46px #0007; transform:rotate(-1.4deg); }
.personal figure img { display:block; width:100%; height:330px; object-fit:cover; }
.personal .photo-cat { transform:rotate(1.7deg); }
.personal figcaption { padding:9px 2px 0; font:8px var(--mono); }
.book,.music { padding:24px 0; border-block:1px solid var(--line); text-decoration:none; }
.book strong,.book span,.music strong,.music span { display:block; }
.personal-image { width:100%; margin:-8px 0 20px; overflow:hidden; border:1px solid #45473f; background:#0c0e0b; }
.personal-image img { display:block; width:100%; height:100%; object-fit:cover; }
.book-image { aspect-ratio:2.72; }
.book-image img { object-position:center top; }
.music-image { aspect-ratio:16 / 9; }
.book strong,.music strong { margin:16px 0 5px; font:34px var(--serif); font-weight:400; }
.book span,.music span { color:#aba399; font-size:11px; line-height:1.5; }
.book p,.music p { margin:25px 0 0; color:#d18561; font:9px/1.5 var(--mono); }
.outro { min-height:520px; display:grid; align-content:center; padding:70px 30px 115px; border-inline:1px solid var(--line); }
.outro h2 { max-width:1050px; margin:23px 0 30px; font:clamp(54px,6vw,92px)/.93 var(--sans); letter-spacing:-.06em; }
.outro a { width:max-content; color:#ef9a70; font:clamp(36px,4vw,62px) var(--serif); }

/* Needle and handpan */
.needle-control { position:fixed; right:20px; bottom:18px; z-index:60; width:130px; height:52px; display:grid; grid-template-columns:42px 1fr; align-items:center; padding:5px 8px; border:1px solid #5b594f; background:#1e201b; opacity:.78; text-align:left; cursor:pointer; transition:.35s; }
.needle-control:hover,.needle-control:focus-visible,.needle-down .needle-control { opacity:1; }
.mini-record { width:36px; height:36px; border:1px solid #777268; border-radius:50%; background:repeating-radial-gradient(#181a17 0 2px,#48473f 3px 4px); }
.mini-record:after { content:''; display:block; width:10px; height:10px; margin:12px; border-radius:50%; background:var(--orange); }
.mini-arm { position:absolute; left:39px; top:7px; width:2px; height:32px; background:#bbb3a7; transform:rotate(-15deg); transform-origin:top; transition:transform .35s; }
.needle-copy { margin-left:7px; }
.needle-copy small,.needle-copy strong { display:block; }
.needle-copy small { color:#918a80; font:7px var(--mono); }
.needle-copy strong { margin-top:3px; font-size:10px; font-weight:500; }
.needle-down .mini-arm { transform:rotate(27deg); }
.needle-down .mini-record { animation:spin 7s linear infinite; }
.needle-down .needle-control { border-color:#da744c; box-shadow:0 0 0 1px #d56a4140,0 0 36px #dd6e3c66; }
@keyframes spin { to { transform:rotate(360deg); } }
.handpan-deck { position:fixed; right:20px; bottom:82px; z-index:59; width:370px; padding:14px; border:1px solid #5c5145; background:#171914f5; box-shadow:0 18px 54px #000b; opacity:0; pointer-events:none; transform:translateY(10px) scale(.98); transform-origin:bottom right; transition:.35s ease; }
.needle-down .handpan-deck { border-color:#bd704e; box-shadow:0 18px 54px #000b,0 0 48px #df703d42; opacity:1; pointer-events:auto; transform:none; }
.handpan-copy { display:grid; grid-template-columns:1fr auto; align-items:end; margin-bottom:12px; }
.handpan-copy small { grid-column:1 / 3; color:#d17b55; font:8px var(--mono); letter-spacing:.09em; }
.handpan-copy strong { margin-top:4px; font:19px var(--serif); font-weight:400; }
.handpan-copy>span { color:#8f887e; font:8px var(--mono); }
.handpan-keys { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
.handpan-keys button { min-width:0; aspect-ratio:1; display:grid; place-items:center; padding:5px; border:1px solid #68665d; border-radius:50%; background:radial-gradient(circle at 35% 28%,#62665b,#292d27 65%,#171a16); cursor:pointer; box-shadow:inset 0 0 0 2px #171914,0 2px 6px #0008; transition:.14s ease; }
.handpan-keys kbd { font:10px var(--mono); }
.handpan-keys button>span { color:#aaa398; font:7px var(--mono); }
.handpan-keys button:hover,.handpan-keys button:focus-visible { border-color:#e48960; outline:0; box-shadow:inset 0 0 0 2px #171914,0 0 20px #df724855; transform:translateY(-2px); }
.handpan-keys button.struck { border-color:#f1a27e; box-shadow:inset 0 0 0 2px #171914,0 0 28px #f07d4b99; transform:scale(.91); }

@media (max-width:1150px) {
  .site-header,main { width:calc(100% - 40px); }
  .hero { grid-template-columns:1fr; padding-block:65px; }
  .hero-copy h1 { font-size:72px; }
  .hero-receipt { width:min(760px,100%); }
  .proof-card:first-child,.proof-card:nth-child(2),.proof-card:nth-child(3) { grid-column:1 / -1; grid-row:auto; min-height:520px; }
  .proof-primary.no-proof-image { min-height:0; }
  .personal { grid-template-columns:1fr 1fr; }
  .personal-title { grid-column:1 / 3; }
  .personal .music { grid-column:2; }
}

@media (max-width:820px) {
  .proof-card { display:block; min-height:0 !important; padding:50px 22px 35px 69px; }
  .proof-card-copy,.proof-primary.no-proof-image .proof-card-copy { display:flex; }
  .proof-card-copy>* { margin-bottom:20px; }
  .proof-card-copy>strong,.proof-primary.no-proof-image .proof-card-copy>strong { margin-top:35px; text-align:left; }
  .proof-primary.no-proof-image .proof-card-copy>span { margin-top:12px; text-align:left; }
  .proof-card figure { margin-top:30px; }
}

@media (max-width:760px) {
  .site-header { height:70px; }
  .site-header>span { display:none; }
  .site-header nav { gap:14px; font-size:12px; }
  .site-header nav a:nth-child(2) { display:none; }
  .hero { min-height:0; display:block; padding:55px 20px 95px; }
  .hero-copy { margin-bottom:58px; }
  .hero-copy h1 { font-size:50px; }
  .hero-receipt { grid-template-columns:1fr; }
  .hero-receipt>div { grid-column:1; grid-row:auto; text-align:left; }
  .hero-proof { min-height:0; display:block; padding:50px 21px 34px 69px; }
  .hero-proof>* { margin-bottom:25px; }
  .proof-heading { display:flex; }
  .proof-question h2 { font-size:42px; }
  .proof-result { text-align:left; }
  .proof-result strong { font-size:74px; }
  .proof-chain { display:block; }
  .proof-chain>* { margin-bottom:18px; }
  .proof-chain b { display:block; transform:rotate(90deg); text-align:left; }
  .proof-note { display:inline-block; }
  .section-heading,.context-summary { min-height:0; grid-template-columns:1fr; gap:35px; padding:55px 22px; }
  .section-heading h2,.context-summary h3 { font-size:48px; }
  .context-picker { grid-template-columns:1fr; }
  .context-picker button { min-height:95px; }
  .proof-grid { padding:8px; gap:8px; }
  .proof-card-copy>strong { font-size:75px; }
  .decision { grid-template-columns:1fr; padding:8px; gap:8px; }
  #decision-nav { min-height:0; }
  .decision-card { min-height:0; display:block; padding:52px 22px 38px 69px; }
  .decision-card>* { margin-bottom:35px; }
  .decision-heading { display:flex; }
  .decision-question h3 { font-size:46px; }
  .decision-result { display:block; }
  .decision-result>* { display:block; margin-bottom:20px; }
  .personal { display:block; padding:65px 20px 110px; }
  .personal>* { margin-bottom:34px; }
  .personal-title h2 { font-size:50px; }
  .personal figure img { height:auto; max-height:500px; }
  .outro { padding-inline:20px; }
  .needle-control { right:12px; bottom:12px; width:54px; grid-template-columns:1fr; }
  .needle-copy { display:none; }
  .handpan-deck { right:12px; bottom:74px; width:calc(100% - 24px); }
}

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