/* Inspectable studio work. Each choice changes the composition or the recommendation. */
:root { --work-preview-height:820px; }
.project-preview { margin:28px 0 100px; scroll-margin-top:90px; }
.project-preview__heading { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:end; padding-bottom:30px; }
.project-preview__heading h2 { font:700 clamp(36px,4.7vw,66px)/1.02 var(--font-display); letter-spacing:-.045em; max-width:14ch; }
.project-preview__heading > div > p:not(.proof-kicker) { font-size:18px; color:var(--muted); max-width:48ch; }
.project-preview__heading .link { display:inline-flex; align-items:center; min-height:44px; margin-top:16px; }
.project-preview__bar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 0; border-top:1px solid var(--rule); scroll-margin-top:90px; }
.project-preview button,.art-study button { scroll-margin-block:90px 100px; }
.project-preview__bar > span { font:11px/1.5 var(--font-mono); color:var(--muted); }
.project-preview__window { overflow:hidden; border:1px solid var(--ink); border-radius:12px; background:white; box-shadow:6px 8px 0 #10122512; }
.project-preview__window iframe { width:100%; height:var(--work-preview-height); display:block; border:0; }
.project-preview__window figure { margin:0; height:var(--work-preview-height); overflow:auto; overscroll-behavior-y:contain; }
.project-preview__window img { display:block; width:100%; height:auto; }
.project-preview__note { color:var(--muted); font-size:12px; line-height:1.65; margin-top:18px; max-width:90ch; }
.project-preview__note a { text-underline-offset:3px; }
.art-live { background:#eee4d7; border:1px solid #c8b9a8; border-radius:12px; overflow:hidden; }
.art-live[hidden],[data-project-panel][hidden] { display:none; }
.art-live__bar { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; align-items:center; padding:14px 20px; font:11px/1.5 var(--font-mono); }
.art-live__bar a { text-underline-offset:4px; padding:7px 0; }
.art-live iframe { display:block; width:100%; height:var(--work-preview-height); border:0; background:#f6efe4; }
.art-live > p { padding:14px 20px; font-size:12px; color:#665347; }
@media(max-width:700px){:root{--work-preview-height:800px}.project-preview{margin-bottom:66px}.project-preview__heading{grid-template-columns:1fr;gap:22px;padding-bottom:15px}.project-preview__heading>div>p:not(.proof-kicker){font-size:16px}.project-preview__bar{align-items:start;flex-direction:column;gap:12px}.project-preview__bar .proof-switch{width:100%}.project-preview__bar .proof-switch button{flex:1;padding-inline:12px;font-size:13px}.art-live__bar{padding:10px 14px;font-size:10px}}
.proof-head { display:grid; grid-template-columns:1.15fr 1fr; gap:40px; align-items:end; padding-bottom:42px; }
.proof-head .display-l { max-width:12ch; }
.proof-head .sub { max-width:42ch; }
.proof-kicker { font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.13em; margin-bottom:18px; }
.art-study { margin-bottom:70px; }
.art-study__controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; padding:20px 0; border-top:1px solid var(--rule); }
.proof-switch { display:flex; flex-wrap:wrap; gap:6px; }
.proof-switch button { min-height:46px; border:1px solid var(--rule); border-radius:100px; padding:10px 20px; font-size:15px; }
.proof-switch button[aria-pressed="true"] { background:var(--ink); color:var(--cream); border-color:var(--ink); }
.art-study__reading { display:grid; grid-template-columns:1fr 1fr; gap:40px; padding:24px 0; border-bottom:1px solid var(--rule); }
.art-study__reading h3 { font:700 25px/1.15 var(--font-display); letter-spacing:-.03em; }
.art-study__reading p { max-width:55ch; font-size:15px; color:var(--muted); }
.proof-founder { background:var(--ink); color:var(--cream); padding:clamp(26px,4vw,54px); align-self:stretch; display:flex; flex-direction:column; justify-content:center; }
.proof-founder h2 { font-family:var(--font-display); font-size:52px; line-height:1; letter-spacing:-.04em; }
.proof-founder .role { margin:14px 0 30px; color:#bcbed0; }
.proof-founder dl { display:grid; gap:0; }
.proof-founder dl > div { padding:20px 0; border-top:1px solid #ffffff30; }
.proof-founder dt { font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#bcbed0; }
.proof-founder dd { margin:8px 0 0; font-size:18px; }
.decision-bench { margin-block:80px; padding:clamp(24px,4vw,56px); background:var(--ink); color:var(--cream); position:relative; }
.decision-bench .proof-kicker { color:var(--lime); }
.decision-bench h2 { max-width:15ch; }
.decision-bench__lead { margin-top:20px; max-width:55ch; color:#c3c4d2; }
.decision-bench fieldset { min-width:0; border:0; margin:0; padding:0; }
.decision-bench legend { margin-bottom:20px; font-size:17px; }
.decision-bench select { width:100%; background:var(--charcoal); color:var(--cream); border:1px solid #858aa6; border-radius:0; min-height:48px; padding:10px; }
#decision-recommendation { scroll-margin-top:90px; }
.decision-bench { scroll-margin-top:80px; }
.decision-bench__trade { border-top:1px solid #ffffff30; margin-top:24px; padding-top:18px; color:#c3c4d2; }
.decision-bench__trade b { color:var(--cream); }
.decision-bench__save { min-height:46px; padding:10px 0; text-decoration:underline; text-underline-offset:5px; color:var(--cream); }
.decision-bench__status { font-size:13px; color:var(--lime); min-height:24px; }
.decision-bench__foot { margin-top:30px; font-size:13px; color:#b2b5c9; }
.case-proof { display:grid; gap:0; }
.case-proof div { padding:18px 0; border-bottom:1px solid var(--rule); }
.case-proof div:first-child { padding-top:0; }
.case-proof dt { font:700 23px/1.2 var(--font-display); letter-spacing:-.02em; }
.case-proof dd { margin:8px 0 0; color:var(--muted); }
@media (max-width:900px) {
  .proof-head { grid-template-columns:1fr; gap:24px; }
}
@media (max-width:560px) {
  .proof-head { padding-bottom:28px; }
  .art-study__controls { gap:8px; }
  .proof-switch { width:100%; }
  .proof-switch button { flex:1; padding:10px 13px; }
  .art-study__reading { grid-template-columns:1fr; gap:12px; }
  .decision-bench { margin-inline:calc(-1 * var(--margin)); padding:30px var(--margin); }
  .decision-bench h2 { font-size:38px; }
  .proof-founder h2 { font-size:42px; }
}