/* The Booth / Playlist: one readable case-study system, with each project's own imagery. */
html { scroll-behavior:auto; }
.archive-refined { font-size:17px; line-height:1.6; }
.archive-refined .chapter-nav { grid-template-columns:repeat(var(--chapters,5),minmax(0,1fr)); }
.archive-refined .small-label { font-size:13px; line-height:1.45; }
.archive-refined figcaption { display:block; font-size:12px; line-height:1.5; margin-top:10px; padding-top:10px; }
.archive-refined .photo { max-width:var(--native-width,100%); }
.archive-refined .photo-plus { width:36px; height:36px; font-size:24px; }
.archive-refined .photo-button img { height:auto; aspect-ratio:auto; }
.archive-refined main section[id] { scroll-margin-top:8px; }
.archive-refined main section>div>* { min-width:0; }
.case-intro { padding-top:35px; }
.case-title { display:grid; grid-template-columns:minmax(0,1fr) 255px; gap:40px; align-items:end; margin:28px 0 36px; }
.archive-refined h1 { font-size:clamp(56px,6.6vw,104px); line-height:.95; }
.case-format { position:relative; border-top:1px solid var(--ink); padding:16px 70px 8px 0; }
.case-format .small-label { color:#756087; }
.case-format p { font-size:18px; line-height:1.35; margin-top:14px; }
.case-format img { width:60px; height:auto; position:absolute; right:0; bottom:12px; }
.case-hero { width:88%; }
.case-brief { display:grid; grid-template-columns:1fr 1.1fr; gap:8%; padding:65px 0 0; }
.case-brief h2 { font-size:clamp(42px,4.8vw,72px); margin-top:22px; }
.case-brief p { max-width:55ch; }
.case-summary { color:#4a4054; }
.case-section { padding-top:75px; padding-bottom:65px; }
.archive-refined .section-rail { margin-bottom:32px; }
.case-heading { display:grid; grid-template-columns:1.2fr 1fr; gap:8%; align-items:end; margin-bottom:36px; }
.case-heading h2,.case-section>h2 { font-size:clamp(46px,5.4vw,84px); }
.case-heading p { max-width:46ch; }
.case-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:35px; align-items:start; }
.case-pair>.photo:nth-child(2) { margin-top:45px; }
.case-pair>.photo.asset-portrait { width:76%; margin-left:auto; }
.case-row-space { margin-top:45px; }
.case-wide { width:88%; margin:45px auto 0; }
.case-medium-wide { width:88%; margin:0 auto; }
.case-marks { align-items:center; justify-items:center; }
.case-marks>.photo { width:100%; max-width:320px; }
.case-marks>.photo:nth-child(2) { margin-top:0; }
.case-marks>.photo.asset-portrait { width:100%; margin-left:0; }
.case-values { width:100%; margin-top:0; }
.case-subheading { display:grid; grid-template-columns:1.2fr 1fr; gap:8%; align-items:end; border-top:1px solid var(--line); padding-top:26px; margin:55px 0 30px; }
.case-subheading h3 { font-size:clamp(34px,4vw,60px); }
.case-subheading p { max-width:44ch; }
.case-feature { display:grid; grid-template-columns:1.35fr 1fr; gap:8%; align-items:center; margin-top:50px; }
.case-heading+.case-feature { margin-top:0; }
.case-feature h3 { font-size:clamp(34px,4vw,60px); margin-bottom:24px; }
.case-feature p { max-width:45ch; }
.case-reverse { grid-template-columns:1fr 1.35fr; }
.case-reverse>.photo { order:2; }.case-reverse>div { order:1; }
.case-short-note { font-size:16px; max-width:60ch; margin:26px 0 0 auto; }
.case-tint { background:#eeede9; }
.case-motion { min-width:0; }
.ply-motion-stage { position:relative; }
.ply-motion-stage>img { width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; }
.ply-motion-toggle { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:44px; font:12px/1.4 var(--type); width:100%; border:1px solid var(--line); padding:12px 16px; background:var(--sheet); }
.ply-motion-toggle:hover { background:var(--purple-tint); }.ply-motion-toggle span { font-size:18px; }
.case-archive-callout { font-size:15px; line-height:1.6; border-left:2px solid var(--purple); padding-left:18px; margin-bottom:30px; max-width:65ch; }
.case-archive-callout strong { font-size:12px; color:#756087; }
.case-long-screens { max-width:1000px; margin:0 auto; gap:8%; }
.case-long-screens>.photo.asset-portrait { width:100%; }
.case-outcomes { margin-top:35px; border-top:1px solid var(--ink); }
.case-outcomes>div { display:grid; grid-template-columns:1fr 1.4fr; gap:10%; border-bottom:1px solid var(--line); padding:26px 0; }
.case-outcomes dt { font-family:var(--display); font-size:32px; line-height:1.05; text-transform:uppercase; letter-spacing:-.02em; }
.case-outcomes dd>span { display:block; font-size:13px; color:var(--grey); line-height:1.5; margin-top:13px; }
.case-details { display:grid; grid-template-columns:1fr 1.65fr; gap:8%; padding-bottom:50px; }
.case-details h2 { font-size:40px; margin-top:18px; }
.case-details dl { border-top:1px solid var(--ink); }
.case-details dl>div { display:grid; grid-template-columns:140px 1fr; gap:22px; padding:16px 0; border-bottom:1px solid var(--line); }
.case-details dt { font-size:12px; color:var(--grey); }
.case-details dd { font-size:14px; line-height:1.6; }
.case-archive-note { font-size:13px; line-height:1.6; color:var(--grey); padding-bottom:30px; }
.case-related { padding-bottom:50px; }
.case-related>div { border-top:1px solid var(--ink); margin-top:20px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 35px; }
.case-related a { display:flex; gap:20px; align-items:center; border-bottom:1px solid var(--line); padding:18px 0; font-size:16px; line-height:1.4; }
.case-related a>span { font-size:12px; color:var(--grey); }.case-related b { font-weight:400; margin-left:auto; }
.case-related a[aria-current] { color:#756087; }.case-related a:hover { color:#756087; }
@media(max-width:1000px) {
 .case-title { grid-template-columns:minmax(0,1fr) 215px; gap:25px; }
 .case-format { padding-right:50px; }.case-format p { font-size:16px; }.case-format img { width:44px; }
 .case-brief,.case-heading,.case-subheading,.case-feature { gap:5%; }
 .case-pair { gap:25px; }
 .case-details { grid-template-columns:.7fr 1.5fr; gap:5%; }.case-details dl>div { grid-template-columns:105px 1fr; gap:15px; }
}
@media(max-width:760px) {
 .archive-refined { --gutter:22px; --header:102px; font-size:16px; line-height:1.65; }
 .archive-refined .header-bar { grid-template-columns:112px minmax(0,1fr); min-height:54px; }
 .archive-refined .wordmark { font-size:28px; padding:9px 17px 8px; }
 .archive-refined .wordmark>span:first-child { font-size:9px; }
 .archive-refined .header-arrow,.archive-refined .header-location,.archive-refined .breadcrumb>span { display:none; }
 .archive-refined .breadcrumb { padding:12px 18px; display:flex; flex-direction:row; align-items:center; justify-content:flex-end; }
 .archive-refined .work-menu summary { font-size:12px; }
 .archive-refined .work-menu-panel { right:-18px; left:auto; width:min(310px,86vw); top:calc(100% + 20px); }
 .archive-refined .work-menu-panel a { font-size:13px; padding:12px; }
 .archive-refined .nav-link { font-family:var(--display); font-size:15px; padding:13px 3px 12px; min-height:44px; white-space:nowrap; }
 .archive-refined .nav-link span { display:none; }
 .archive-refined .small-label,.archive-refined figcaption { font-size:12px; }
 .archive-refined .project-context>div { grid-template-columns:110px minmax(0,1fr); }
 .case-intro { padding-top:24px; }
 .case-title { grid-template-columns:1fr; gap:22px; margin:22px 0 26px; }
 .archive-refined h1 { font-size:clamp(34px,9.7vw,72px); line-height:1; }
 .case-format { display:flex; gap:17px; align-items:center; border-top:0; border-left:3px solid var(--purple); padding:0 48px 0 13px; min-height:48px; }
 .case-format .small-label { max-width:9ch; }
 .case-format p { font-size:14px; line-height:1.4; margin:0; }.case-format img { width:40px; bottom:4px; }
 .case-hero,.case-medium-wide { width:100%; }
 .case-brief { grid-template-columns:1fr; gap:24px; padding:40px 0 0; }
 .case-brief h2 { font-size:clamp(34px,9.5vw,42px); margin-top:15px; }
 .case-section { padding-top:50px; padding-bottom:45px; }
 .archive-refined .section-rail { margin-bottom:26px; gap:15px; }
 .archive-refined .section-rail>span:last-child { max-width:19ch; }
 .case-heading,.case-subheading { grid-template-columns:1fr; gap:22px; margin-bottom:26px; }
 .case-heading h2,.case-section>h2 { font-size:clamp(34px,9.7vw,58px); line-height:1.02; }
 .case-heading p,.case-brief p,.case-subheading p { max-width:none; }
 .case-pair { grid-template-columns:1fr; gap:27px; }
 .case-pair>.photo:nth-child(2) { margin-top:0; }
 .case-pair>.photo.asset-portrait { width:82%; max-width:340px; margin:0 auto; }
 .case-row-space { margin-top:30px; }.case-wide { width:100%; margin-top:30px; }
 .case-marks { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:center; }
 .case-marks>.photo.asset-portrait { width:100%; }
 .case-values { margin-top:0; }
 .case-subheading { margin-top:40px; padding-top:23px; }.case-subheading h3 { font-size:34px; }
 .case-feature { grid-template-columns:1fr; gap:25px; margin-top:35px; }
 .case-feature h3 { font-size:34px; margin-bottom:20px; }.case-feature p { max-width:none; }
 .case-reverse>.photo,.case-reverse>div { order:initial; }
 .case-short-note { font-size:16px; margin-top:22px; }
 .case-archive-callout { font-size:16px; }
 .case-long-screens { gap:30px; }.case-long-screens>.photo.asset-portrait { width:100%; max-width:400px; }
 .case-outcomes { margin-top:28px; }.case-outcomes>div { grid-template-columns:1fr; gap:15px; padding:24px 0; }
 .case-outcomes dt { font-size:28px; }.case-outcomes dd>span { font-size:13px; }
 .case-details { grid-template-columns:1fr; gap:25px; padding-bottom:35px; }
 .case-details h2 { font-size:34px; margin-top:12px; }
 .case-details dl>div { grid-template-columns:1fr; gap:8px; padding:16px 0; }.case-details dd { font-size:15px; }
 .case-related { padding-bottom:35px; }.case-related>div { grid-template-columns:1fr; }
 .case-related a { font-size:16px; gap:15px; padding:17px 0; }
 .archive-refined .footer-bottom,.archive-refined .back-top { font-size:12px; }
 .archive-refined .footer-main>p { font-size:15px; }
}
@media(max-width:390px) {
 .archive-refined { --gutter:18px; padding:7px; }
 .case-format { gap:12px; }.case-format p { font-size:14px; }
 .archive-refined .nav-link { font-size:14px; }
}
@media(prefers-reduced-motion:reduce) { .archive-refined .photo-button img { transition:none; } }