/* Shared numbered card layout, based on main. Scene artwork stays in folds/. */
@import url("./problem-panel-theme.css");
.problem-list{margin-top:90px;border-top:1px solid var(--line)}
.problem-row{display:grid;grid-template-columns:minmax(250px,.75fr) minmax(420px,1.25fr);gap:clamp(35px,7vw,100px);align-items:center;padding:60px 0;border-bottom:1px solid var(--line)}
.problem-copy{position:relative;padding-left:52px}
.problem-copy .n{position:absolute;left:0;top:6px;color:var(--accent);font:500 11px "IBM Plex Mono",monospace}
.problem-copy h3{margin-bottom:18px;font-size:clamp(28px,3vw,40px);font-weight:500;line-height:1.05;letter-spacing:-.035em}
.problem-copy p{margin:0;color:var(--muted);font-size:17px;line-height:1.6;max-width:60ch}
.problem-copy .who{display:block;margin-top:10px;color:var(--accent);font:500 11px/1.6 "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase}
.problem-layout{display:grid;gap:clamp(48px,6vw,84px);align-items:start;margin-top:90px;width:min(96vw,1880px);margin-inline:calc((100% - min(96vw,1880px))/2);grid-template-columns:minmax(260px,.32fr) minmax(0,1fr)}
.problem-layout .problem-list{margin-top:0}
.problem-nav{position:sticky;top:110px;margin:0;padding:0 0 150px;list-style:none}
.problem-nav button{position:relative;width:100%;padding:19px 28px 19px 0;border:0;border-top:1px solid var(--line);background:none;color:rgba(var(--ink-rgb),.42);font:500 17px/1.35 "Space Grotesk",sans-serif;text-align:left;cursor:pointer;transition:color .25s}
.problem-nav li:last-child button{border-bottom:1px solid var(--line)}
.problem-nav button::after{content:'';position:absolute;right:2px;top:26px;width:5px;height:5px;border-radius:50%;background:rgba(var(--ink-rgb),.3);transition:background .2s,transform .2s var(--ease-out)}
.problem-nav button:active{color:var(--cream)}
.problem-nav button.active{color:var(--cream);font-weight:600}
.problem-nav button.active::after{background:var(--accent);transform:scale(1.5)}
.problem-nav button .n{margin-right:14px;color:var(--accent);font:500 11px "IBM Plex Mono",monospace}
.problem-nav-detail{position:absolute;inset:auto 0 0;visibility:hidden;opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out),visibility 0s linear 200ms}
.problem-nav-detail p{margin:0;padding:20px 28px 0 0;border-top:1px solid var(--line);color:var(--muted);font-size:16px;line-height:1.65}
.problem-nav button.active+.problem-nav-detail{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.problem-layout .problem-row{display:block;min-height:70vh;padding:48px 0;scroll-margin-top:100px}
.problem-layout .problem-copy{display:none}
.problem-layout .fold{width:100%;aspect-ratio:16/9}
.problem-track{position:relative;height:500svh}
.problem-stage{position:sticky;top:0;height:100svh;overflow:hidden}
.problem-stage .wrap{display:flex;flex-direction:column;height:100%;padding-top:88px;padding-bottom:20px;box-sizing:border-box}
.problem-stage .problem-layout{flex:1;min-height:0;margin-top:0;align-items:stretch;grid-template-columns:minmax(230px,.24fr) minmax(0,1fr)}
.problem-stage .problem-nav{position:static;padding-bottom:0}
.problem-stage .problem-nav-detail{display:none}
.problem-deck{position:relative;min-height:0}
.problem-deck .problem-panel{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;transform:translateY(3.5%);visibility:hidden;transition:opacity .28s var(--ease-out),transform .28s var(--ease-out),visibility 0s linear .28s;pointer-events:none}
.problem-deck .problem-panel.is-active{opacity:1;transform:none;visibility:visible;transition-duration:.45s,.45s,0s;transition-delay:0s;pointer-events:auto}
.problem-deck .problem-panel.is-past{opacity:0;transform:translateY(-3.5%)}
.problem-stage .problem-copy{display:block;flex:none;padding-left:0;margin-bottom:10px}
.problem-stage .problem-copy .n{display:none}
.problem-stage .problem-copy h3{margin-bottom:10px;font-size:clamp(22px,2.2vw,32px)}
.problem-stage .problem-copy p{font-size:15px;line-height:1.55;max-width:70ch}
.problem-deck .fold{position:relative;flex:0 1 auto;width:100%;min-height:0}

/* Every animation uses the same frame and copy treatment. */
.problem-copy strong{color:var(--cream);font-weight:500}
.problem-layout .fold,html[data-theme=light] .problem-layout .fold{border:0;border-radius:18px;background:var(--problem-panel-bg);box-shadow:none;overflow:hidden}
.problem-deck .fold{aspect-ratio:16/9!important;align-self:stretch}
@media(max-width:820px){
 .problem-list{margin-top:55px}
 .problem-layout{display:block;margin-top:55px;width:100%;margin-inline:0}
 .problem-nav{display:none}
 .problem-layout .problem-row{display:grid;grid-template-columns:1fr;min-height:0;gap:28px;padding:42px 0}
 .problem-layout .problem-copy{display:block}
 .problem-layout .fold{order:2}
 .problem-copy{padding-left:40px}
}
/* The same rail-to-tabs breakpoint and spacing on both pages. */
@media(min-width:821px) and (max-width:1366px){
 .problem-stage .problem-layout{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:24px;width:100%;margin-inline:0}
 .problem-stage .problem-nav{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px}
 .problem-stage .problem-nav button{height:100%;padding:12px 15px 12px 0;font-size:13px;line-height:1.35;border-bottom:1px solid var(--line)}
 .problem-stage .problem-nav button .n{display:block;margin-bottom:8px}
 .problem-stage .problem-nav button::after{top:15px;right:3px}
 .problem-stage .wrap{padding:88px 24px 20px}
 .problem-stage .problem-copy h3{font-size:clamp(23px,2.7vw,32px)}
 .problem-stage .problem-copy p{max-width:90ch;font-size:15px;line-height:1.45}
 .problem-deck .fold{aspect-ratio:1047/650!important}
}
@media(prefers-reduced-motion:reduce){.problem-nav-detail{transition:none}}
@media(min-width:821px) and (max-width:1366px) and (prefers-reduced-motion:reduce){
 .problem-layout{display:block;width:100%;margin-inline:0}
 .problem-layout .problem-nav{display:none}
 .problem-layout .problem-copy{display:block;padding-left:40px;margin-bottom:24px}
 .problem-layout .problem-row{min-height:0}
}