/* Homepage additions. Case-study styling stays independent. */
body{background-image:none}
button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.5}
button:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid #b55b30;outline-offset:4px}
header nav a{padding:8px 0}.intro{padding-top:48px}
.hero-layout{display:block;padding:0 0 36px}
.hero-copy h1{font-size:clamp(2.25rem,5vw,3.5rem);font-weight:600;line-height:1.15;letter-spacing:-.035em}
.hero-statement{font-size:1.25rem;line-height:1.4;margin:16px 0 12px;letter-spacing:0}
.hero-copy>.muted{max-width:640px}.hero-copy .text-link{margin-top:10px}
.lab{background:#292c27;color:#ecebdf;min-width:0;border:1px solid #494d40;max-width:760px;margin:40px 0 0;scroll-margin-top:25px}
.lab-heading{display:flex;justify-content:space-between;gap:18px;padding:24px 24px 0}
.lab-heading .eyebrow{font-size:12px;letter-spacing:1px;color:#b7baa9;margin:0 0 12px}
.lab h2{font:600 1.5rem/1.3 "Segoe UI",sans-serif;margin:0}.lab-symbol{font-size:44px;line-height:1;color:#dc9b71}
.lab-description{padding:0 24px;color:#b7baa9;font-size:14px;margin:16px 0 18px}
.lab-viewport{position:relative;isolation:isolate;background:#22251f;margin:0 12px}
canvas{width:100%;height:auto;display:block;touch-action:pan-y}
.lab-overlay{position:absolute;inset:0;pointer-events:none;display:flex;justify-content:center;flex-direction:column;padding:25px 7%;background:#22251fea}
.lab-overlay[hidden]{display:none}.lab-overlay>span{font:12px monospace;letter-spacing:1.5px;color:#cba17c}
.lab-overlay>p{font:500 1.75rem/1.25 "Segoe UI",sans-serif;margin:12px 0}
.lab-readout{display:flex;justify-content:space-between;gap:12px;padding:12px 24px;font:12px/1.5 monospace;border-bottom:1px solid #505444;color:#b7baa9}
#lab-state{color:#ecebdf}
.lab-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:16px 24px 10px}
.lab button{border:1px solid #7e8371;background:transparent;color:#ecebdf;padding:8px 12px;min-height:44px;font-size:14px}
.lab button:hover:not(:disabled){background:#42483a}.lab #lab-start{background:#e2dfcc;border-color:#e2dfcc;color:#292c27}.lab #lab-start:hover:not(:disabled){background:#f8f4e4}
.debug-toggle{font-size:14px;display:flex;gap:6px;align-items:center;min-height:44px;margin-left:auto}.debug-toggle input{accent-color:#dc9b71;width:17px;height:17px}
.touch-controls{display:flex;gap:8px;padding:0 24px 12px}.touch-controls button{flex:1;touch-action:none;user-select:none;-webkit-user-select:none}
.lab-instructions{font-size:12px;line-height:1.8;color:#b7baa9;padding:0 24px;margin:0 0 14px}kbd{font:inherit;color:#ecebdf}
.lab-details{margin:0 24px 16px;border-color:#505444}.lab-details summary{font-size:14px;padding:10px 0}.lab-details>div{padding-bottom:8px}
.lab-details label{display:flex;justify-content:space-between;font-size:14px}.lab-details input{width:100%;accent-color:#dc9b71;min-height:30px}
.lab-details p{font-size:14px;line-height:1.6;color:#b7baa9;margin:8px 0}.lab noscript p{padding:0 24px;font-size:14px}
.project-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:6%}.project{padding-top:32px}
.project-copy h2{font-size:1.75rem;font-weight:600;line-height:1.2;letter-spacing:-.02em;margin-bottom:16px}
.token-panel{background:#d7d5c5;padding:24px;border:1px solid #aaa99a;display:flex;flex-direction:column}.token-panel .media-top{border-color:#aaa99a;font-size:12px}
.token-prompt{font-size:1.25rem;font-weight:600;line-height:1.4;letter-spacing:0;margin:24px 0 18px}
.token-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.token-options button{background:transparent;color:var(--ink);border:1px solid #969785;text-align:left;padding:12px 10px;font-size:14px;min-height:85px;transition:background .15s,color .15s,transform .15s}
.token-options button span{display:block;font:12px monospace;margin-bottom:12px}.token-options button:hover{transform:translateY(-3px);border-color:var(--ink)}.token-options button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.token-result{border-left:3px solid #a64f2a;padding:0 0 0 18px;margin:26px 0;min-height:145px}.token-result .eyebrow{font-size:12px;letter-spacing:1px}.token-result h3{font-size:28px;margin:10px 0}.token-result p{font-size:15px;margin:0;max-width:430px}
.token-panel .media-bottom{margin-top:auto;border-color:#aaa99a;font-size:12px}.secondary h2{font-size:1.5rem;font-weight:600;margin-bottom:14px}
.about .about-heading{font:600 1.75rem/1.3 "Segoe UI",sans-serif;letter-spacing:-.02em;margin:16px 0 0}
@media(max-width:1000px){.hero-layout{display:block;padding:0 0 36px}.debug-toggle{margin-left:0;width:100%}.lab-actions{padding-bottom:4px}.hero-copy h1{font-size:clamp(2.25rem,5vw,3.5rem);font-weight:600;line-height:1.15;letter-spacing:-.035em}}
@media(max-width:850px){.hero-layout{display:block;padding:0 0 36px}.hero-copy{max-width:580px}.hero-copy h1{font-size:clamp(2.25rem,5vw,3.5rem);font-weight:600;line-height:1.15;letter-spacing:-.035em}.hero-copy>.muted{max-width:640px}.lab{max-width:720px}.lab h2{font:600 1.5rem/1.3 "Segoe UI",sans-serif;margin:0}.lab-overlay>p{font:500 1.75rem/1.25 "Segoe UI",sans-serif;margin:12px 0}.debug-toggle{width:auto;margin-left:auto}.project-grid{grid-template-columns:1fr;gap:30px}.token-panel{max-width:720px}}
@media(max-width:560px){header{gap:14px}nav{gap:15px;font-size:14px}.intro{padding-top:32px}.hero-layout{display:block;padding:0 0 36px}.hero-copy h1{font-size:clamp(2.25rem,5vw,3.5rem);font-weight:600;line-height:1.15;letter-spacing:-.035em}.hero-statement{font-size:1.25rem;line-height:1.4;margin:16px 0 12px;letter-spacing:0}.lab-heading{padding:20px 16px 0}.lab-description{padding:0 16px}.lab h2{font:600 1.5rem/1.3 "Segoe UI",sans-serif;margin:0}.lab-actions,.touch-controls{padding-left:16px;padding-right:16px}.lab-readout{padding:12px 16px}.lab-readout>span:last-child{font-size:11px}.debug-toggle{margin-left:0;width:100%}.lab-overlay>p{font:500 1.75rem/1.25 "Segoe UI",sans-serif;margin:12px 0}.lab-details{margin-left:16px;margin-right:16px}.lab-instructions{padding:0 16px}.token-panel{padding:18px}.token-options{grid-template-columns:repeat(2,minmax(0,1fr))}.token-options button{min-height:72px}.token-prompt{font-size:1.25rem;font-weight:600;line-height:1.4;letter-spacing:0;margin:24px 0 18px}.token-result{min-height:165px}.token-panel .media-top{flex-wrap:wrap}.about .about-heading{font:600 1.75rem/1.3 "Segoe UI",sans-serif;letter-spacing:-.02em;margin:16px 0 0}}
@media(prefers-reduced-motion:reduce){.token-options button{transition:none}.token-options button:hover{transform:none}}