/* Open, legible middle sections, with a manually browsed example shelf. */
.middle-approach{padding:125px 5vw 100px;max-width:1800px;margin:auto}
.middle-opening{display:grid;grid-template-columns:1.45fr 1fr;gap:9vw;align-items:end;margin-bottom:75px}
.middle-opening h2{font:500 clamp(54px,6.7vw,110px)/.98 var(--heading-font);letter-spacing:-.055em;white-space:pre-line}
.middle-opening>p{font-size:17px;max-width:430px;padding-bottom:5px}
.method-composition{display:grid;grid-template-columns:1fr 1.25fr;gap:7vw;align-items:stretch}
.method-photo{margin:0;height:100%;min-height:470px;max-height:680px;overflow:hidden}
.method-photo img{display:block;object-fit:cover;width:100%;height:100%}
.method-story{align-self:center;position:relative;padding:10px 0 5px;min-width:0}
.method-tabs{display:flex;flex-direction:column;align-items:start;gap:12px;margin-bottom:36px}
.method-tabs button{font:500 clamp(29px,3.1vw,51px)/1.1 var(--heading-font);letter-spacing:-.035em;color:color-mix(in srgb,var(--ink) 42%,var(--paper));transition:color .3s,transform .3s;position:relative;padding:3px 35px 3px 0}
.method-tabs button[aria-selected=true]{color:var(--ink);transform:translateX(8px)}
.method-tabs button[aria-selected=true]:after{content:'↗';position:absolute;right:-8px;top:7px;font:23px 'DM Sans',sans-serif;color:var(--accent)}
.method-tabs button:hover{color:var(--ink)}
.method-panels article>h3{font:500 clamp(30px,3vw,47px)/1.07 var(--heading-font);margin-bottom:20px}
.method-panels p{font-size:19px;max-width:590px;line-height:1.6}
.method-composition[data-layout=focus] .method-panels{min-height:158px}
.method-composition[data-layout=focus] article h3{display:none}
.round-control{border:1px solid var(--rule);border-radius:50%;width:54px;height:54px;display:grid;place-items:center;font-size:25px;transition:color .25s,background .25s,transform .25s;flex-shrink:0}
.round-control:hover:not(:disabled){background:var(--ink);color:var(--paper);transform:rotate(-10deg)}
.round-control:disabled{opacity:.25;cursor:default}
.method-next{margin-top:25px}
.method-composition[data-layout=flow] .method-panels article+article{border-top:1px solid var(--rule);padding-top:30px;margin-top:30px}
.method-composition[data-layout=flow] .method-panels p{font-size:16px}
.method-composition[data-layout=columns]{grid-template-columns:1fr;gap:45px}
.method-composition[data-layout=columns] .method-photo{height:300px;min-height:0}
.method-composition[data-layout=columns] .method-panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.method-composition[data-layout=columns] .method-panels article{border-top:1px solid var(--rule);padding-top:30px}
.method-composition[data-layout=columns] .method-panels p{font-size:16px}
.pace-approach .middle-opening h2{text-transform:uppercase;font-weight:500}
.pace-approach .method-photo{border-radius:4px;object-position:left}
.kin-approach{padding-inline:8vw;padding-block:115px}
.kin-approach .middle-opening{grid-template-columns:1fr 1fr;gap:12vw}
.kin-approach .middle-opening h2{letter-spacing:-.03em;font-weight:400}
.kin-approach .method-composition{grid-template-columns:.9fr 1.1fr;gap:9vw;align-items:center}
.kin-approach .method-photo{height:500px;min-height:0;border-radius:140px 140px 18px 18px}
.kin-approach .method-tabs button{font-weight:400;letter-spacing:-.015em}
.kin-approach .method-panels p{font-size:17px}
.kin-approach .method-composition[data-layout=columns]{grid-template-columns:1fr}
.kin-approach .method-composition[data-layout=columns] .method-photo{height:300px;border-radius:20px}
.work-explorer{padding:100px 5vw 135px;border-top:1px solid var(--rule);overflow:clip}
.work-opening{display:grid;grid-template-columns:1.3fr 1fr;gap:8vw;align-items:end;margin-bottom:50px}
.work-opening h2{white-space:pre-line;font:500 clamp(55px,6vw,100px)/.98 var(--heading-font);letter-spacing:-.05em}
.work-opening>p{font-size:17px;max-width:410px;padding-bottom:5px}
.work-filters{display:flex;flex-wrap:wrap;gap:13px 28px;margin-bottom:35px}
.work-filters button{font-size:14px;padding:9px 0;border-bottom:1px solid transparent;opacity:.7;transition:opacity .25s,border-color .25s}
.work-filters button[aria-pressed=true],.work-filters button:hover{opacity:1;border-color:currentColor}
.work-stage{display:grid;grid-template-columns:1fr 2fr;gap:30px;align-items:start}
.work-photo{position:relative;margin:0;height:405px;overflow:hidden}
.work-photo img{width:100%;height:100%;object-fit:cover;display:block}
.work-photo figcaption{position:absolute;inset:auto 25px 28px;color:#fffaf1;font:400 35px/1.05 var(--heading-font);letter-spacing:-.035em;text-shadow:0 1px 14px #0008;z-index:1}

.work-browser{min-width:0}
.work-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:none;overscroll-behavior-x:contain;scrollbar-width:none;padding:0 2px 2px;cursor:grab;outline-offset:7px;touch-action:pan-x pan-y}
.work-track::-webkit-scrollbar{display:none}
.work-track.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.work-track.dragging *{cursor:grabbing}
.work-example{display:flex;flex-direction:column;align-items:start;flex:0 0 clamp(270px,27vw,430px);min-height:405px;scroll-snap-align:start;padding:33px 30px 26px;border:1px solid var(--rule);border-radius:3px;background:color-mix(in srgb,var(--ink) 3%,var(--paper));position:relative;transition:background .3s,border-color .3s;min-width:0}
.work-example:hover,.work-example:focus-visible{background:color-mix(in srgb,var(--accent) 8%,var(--paper));border-color:var(--accent)}
.work-example h3{font:500 clamp(30px,3vw,47px)/1.05 var(--heading-font);letter-spacing:-.04em;max-width:100%;overflow-wrap:break-word}
.work-example p{font:16px/1.55 'DM Sans',sans-serif;margin:26px 0 36px;max-width:350px}
.work-example .round-arrow{margin-top:auto;border-color:var(--ink);background:transparent;width:55px;height:55px;font:30px 'DM Sans',sans-serif;box-shadow:0 0 0 5px color-mix(in srgb,var(--ink) 4%,transparent)}
.work-example:hover .round-arrow{color:var(--paper);background:var(--ink);transform:rotate(4deg)}
.work-controls{display:flex;justify-content:center;align-items:center;gap:25px;padding-top:27px}
.work-controls .round-control{width:45px;height:45px;font-size:23px}
.work-progress{width:min(130px,30%);height:2px;position:relative;background:var(--rule);overflow:hidden}
.work-progress i{display:block;position:absolute;top:0;height:100%;background:var(--ink)}
.work-explorer[data-work-view=index] .work-stage,.work-explorer[data-work-view=columns] .work-stage{display:block}
.work-explorer[data-work-view=index] .work-photo,.work-explorer[data-work-view=columns] .work-photo,.work-explorer[data-work-view=index] .work-controls,.work-explorer[data-work-view=columns] .work-controls{display:none}
.work-explorer[data-work-view=index] .work-track{display:grid;grid-template-columns:1fr;overflow:visible;gap:0}
.work-explorer[data-work-view=index] .work-example{display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:40px;padding:30px 0;border:0;border-bottom:1px solid var(--rule);background:none;min-height:130px}
.work-explorer[data-work-view=index] .work-example h3{font-size:clamp(25px,3vw,47px)}
.work-explorer[data-work-view=index] .work-example p{margin:0;max-width:480px}
.work-explorer[data-work-view=index] .round-arrow{margin:0}
.work-explorer[data-work-view=columns] .work-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;gap:25px}
.work-explorer[data-work-view=columns] .work-example{min-height:330px}
.work-explorer[data-work-view=columns] .work-example h3{font-size:33px}
.kin-work{padding-inline:8vw;background:color-mix(in srgb,var(--accent) 5%,var(--paper));border:0}
.kin-work h2{font-weight:400;letter-spacing:-.025em}
.kin-work .work-photo{border-radius:15px}
.kin-work .work-example{border:0;border-radius:17px;background:var(--paper)}
.kin-work .work-example h3{font-weight:400;font-size:43px}
.kin-work .work-example:hover{background:color-mix(in srgb,var(--accent) 7%,var(--paper))}
.reading-content p+p{margin-top:22px}
.reading-content .example-context{font-size:14px;max-width:560px;margin-block:30px;opacity:.65}
.reading-content .action{margin-top:8px}
[data-art=false] .method-photo,[data-art=false] .work-photo{display:none}
[data-art=false] .method-composition,[data-art=false] .work-stage{grid-template-columns:1fr}
[data-art=false] .method-story{max-width:950px}
[data-density=compact] .middle-approach{padding-block:75px}
[data-density=compact] .work-explorer{padding-block:70px}
@media(max-width:1099px){
 .middle-opening{gap:5vw}.middle-opening h2{font-size:65px}.middle-opening>p{font-size:16px}
 .method-composition{gap:5vw}.method-photo{min-height:450px}.method-tabs button{font-size:33px}.method-panels p{font-size:17px}
 .kin-approach{padding-inline:6vw}.kin-approach .method-composition{gap:6vw}.kin-approach .method-photo{height:470px}
 .work-opening h2{font-size:67px}.work-opening>p{font-size:16px}.work-stage{grid-template-columns:.8fr 1.6fr;gap:23px}
 .work-example{flex-basis:310px;padding:28px 25px}.work-example h3{font-size:36px}.work-photo figcaption{font-size:30px;left:18px}
 .work-explorer[data-work-view=columns] .work-track{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:699px){
 .middle-approach,.kin-approach{padding:78px 25px}
 .middle-opening,.kin-approach .middle-opening{display:block;margin-bottom:38px}
 .middle-opening h2{font-size:clamp(43px,12vw,64px)}.middle-opening>p{margin-top:26px;font-size:15px;max-width:430px}
 .method-composition,.kin-approach .method-composition{grid-template-columns:1fr;gap:32px}
 .method-photo{min-height:0;height:270px;max-height:340px}
 .kin-approach .method-photo{height:290px;border-radius:100px 100px 12px 12px;max-width:85%;margin:auto;width:100%}
 .method-tabs{gap:8px;margin-bottom:23px}.method-tabs button{font-size:32px}.method-panels p,.kin-approach .method-panels p{font-size:16px}
 .method-composition[data-layout=focus] .method-panels{min-height:174px}.method-next{margin-top:18px;width:47px;height:47px;font-size:23px}
 .method-composition[data-layout=columns] .method-panels{grid-template-columns:1fr;gap:30px}
 .method-composition[data-layout=columns] .method-photo,.kin-approach .method-composition[data-layout=columns] .method-photo{height:250px}
 .method-composition[data-layout=columns] .method-panels article{padding-top:25px}
 .work-explorer,.kin-work{padding:73px 25px 85px}
 .work-opening{display:block;margin-bottom:30px}.work-opening h2{font-size:57px}.work-opening>p{margin-top:24px;font-size:15px}
 .work-filters{gap:2px 18px;margin-bottom:28px}.work-filters button{font-size:13px}
 .work-stage{grid-template-columns:1fr;gap:22px}
 .work-photo{height:195px}.work-photo figcaption{font-size:30px;bottom:24px;left:24px}
 .work-track{margin-right:-25px;padding-right:25px;gap:16px}.work-example{flex-basis:calc(100vw - 91px);min-height:355px;padding:26px 24px}
 .work-example h3,.kin-work .work-example h3{font-size:37px}.work-example p{font-size:15px;margin-block:23px 30px}.work-example .round-arrow{height:48px;width:48px;font-size:26px}
 .work-controls{padding-top:24px;gap:23px}
 .work-explorer[data-work-view=index] .work-track{margin:0;padding:0}
 .work-explorer[data-work-view=index] .work-example{grid-template-columns:1fr auto;gap:17px 22px;padding-block:25px}
 .work-explorer[data-work-view=index] .work-example h3{font-size:30px}.work-explorer[data-work-view=index] .work-example p{grid-column:1;grid-row:2;font-size:14px}.work-explorer[data-work-view=index] .round-arrow{grid-column:2;grid-row:1/3;width:43px;height:43px;font-size:24px}
 .work-explorer[data-work-view=columns] .work-track{grid-template-columns:1fr;margin:0;padding:0}
 .work-explorer[data-work-view=columns] .work-example{min-height:300px}
 [data-density=compact] .middle-approach,[data-density=compact] .work-explorer{padding-block:55px}
}
@media(prefers-reduced-motion:reduce){.method-tabs button,.round-control,.work-example{transition:none}}

.pace-approach .middle-opening h2{font-size:clamp(48px,5.3vw,86px)}
@media(max-width:699px){.pace-approach .middle-opening h2{font-size:clamp(43px,12vw,64px)}}