
.reading.folio{--paper:#161614;--muted:#b8b2a7;--gold:#dfc697;background:var(--paper);color:#f1ecdf;padding:0 5vw 100px;max-width:none;scroll-margin-top:70px}
.folio-intro{max-width:1440px;margin:auto;padding:110px 0 64px;display:grid;grid-template-columns:1fr 1fr;gap:24px 6vw;border-bottom:1px solid #cfc3a830}
.folio-kicker{font-size:11px;letter-spacing:.13em;color:var(--gold);line-height:1.8;margin:0 0 22px}
.folio-intro>.folio-kicker{grid-column:1/-1;margin:0}
.folio-intro h2{font-size:clamp(40px,5.5vw,78px);font-weight:500;line-height:1.18;letter-spacing:-.04em;margin:0}
.folio-intro>p:not(.folio-kicker){font-size:clamp(17px,1.6vw,23px);line-height:1.8;align-self:end;color:var(--muted);margin:0 0 6px}
.folio-start{grid-column:2;width:fit-content;border-bottom:1px solid #dfc69766;padding:10px 0;font-size:14px}
.folio-layout{max-width:1440px;margin:auto;display:grid;grid-template-columns:170px minmax(0,1fr);gap:5vw;align-items:start}
.folio-navigation{position:sticky;top:110px;align-self:start;padding-top:64px;z-index:10;min-width:0}
.folio-navigation nav{display:flex;flex-direction:column;gap:5px}
.folio-navigation nav a{display:flex;align-items:center;gap:14px;min-height:48px;border-left:2px solid transparent;padding:10px 9px;color:#afa99e;font-size:14px;line-height:1.5}
.folio-navigation nav a span{font-size:10px;letter-spacing:.1em;font-variant-numeric:tabular-nums;color:#aaa091}
.folio-navigation nav a[aria-current=location]{border-color:var(--gold);color:#fff4dc;background:#dec59809}
.folio-location{margin:30px 11px 0;font-size:11px;line-height:1.8;color:var(--muted)}
.folio-progress{height:2px;margin-top:15px;background:#cfc3a82b;overflow:hidden}
.folio-progress>span{display:block;width:100%;height:100%;background:var(--gold);transform:scaleX(var(--folio-progress,0));transform-origin:left}
.folio-content{min-width:0}
.folio-rail:focus-visible,.folio summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.folio-case{padding:64px 0 70px;scroll-margin-top:100px;border-bottom:1px solid #cfc3a830}
.folio-case-heading{max-width:740px;margin-bottom:30px}
.folio-case h3{font-weight:500;letter-spacing:-.035em;line-height:1.3;font-size:clamp(30px,3.4vw,50px);margin:0 0 22px}
.folio-lead{font-size:17px;line-height:1.85;color:#c6c0b5;margin:0;max-width:34em}
.folio-gallery{margin:0;min-width:0}
.folio-rail{display:flex;align-items:flex-start;gap:18px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#776b55 #22211e;padding:0 0 12px;scroll-padding-left:0;touch-action:pan-x pan-y pinch-zoom}
.folio-rail[data-auto-height=true]{transition:height 200ms ease}
.folio-slide{flex:0 0 100%;min-width:0;margin:0;scroll-snap-align:start;scroll-snap-stop:normal}
.folio-image{height:clamp(300px,48vw,560px);background:#0e0f0e;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid #bba8881f;padding:18px}
.folio-image>img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.folio-crop{position:relative;overflow:hidden;aspect-ratio:var(--crop-ratio);width:min(100%,calc((clamp(300px,48vw,560px) - 48px)*var(--crop-ratio)));flex:none}
.folio-crop img{position:absolute;max-width:none;max-height:none;object-fit:fill;display:block}
.folio-slide figcaption{display:flex;justify-content:space-between;align-items:start;gap:20px;padding:18px 0 0;font-size:12px;line-height:1.75;color:#a9a398}
.folio-slide figcaption strong{color:#e8ddcb;font-size:14px;font-weight:500}
.folio-slide figcaption p{font-size:12px;line-height:1.75;max-width:42em;margin:5px 0 0}
.folio-slide figcaption>a{flex:none;min-height:44px;display:flex;align-items:center;font-size:12px;border-bottom:1px solid #bba88844;color:#dac9ab}
.folio-gallery-controls{display:flex;align-items:center;gap:16px;margin:10px 0 30px;font-size:12px;color:var(--muted)}
.folio-gallery-status{font-variant-numeric:tabular-nums;letter-spacing:.08em;margin:0;min-width:48px}
.folio-swipe-hint{margin-right:auto;font-size:11px}
.folio-gallery-controls button{display:none;width:48px;min-height:44px;border:1px solid #cfc3a844;border-radius:50%;font-size:21px}
.folio-gallery[data-enhanced=true] .folio-gallery-controls button{display:block}
.folio-gallery-controls button:disabled{cursor:default;opacity:.28}
.folio-gallery-controls button:hover:not(:disabled){background:#dfc697;color:#161614}
.folio-context{display:grid;grid-template-columns:1fr 1fr;gap:35px;margin:0 0 30px}
.folio-context h4{font-size:12px;font-weight:400;color:var(--gold);letter-spacing:.08em;margin:0 0 12px}
.folio-context p{font-size:14px;line-height:1.9;color:#c5bfb4;margin:0;max-width:38em}
.folio-decision,.folio-archive{border-top:1px solid #cfc3a82c}
.folio-decision>summary,.folio-archive>summary{cursor:pointer;list-style:none;min-height:56px;padding:17px 32px 17px 0;position:relative;font-size:14px;line-height:1.8;color:#e4d9c5}
.folio-decision>summary::-webkit-details-marker,.folio-archive>summary::-webkit-details-marker{display:none}
.folio-decision>summary::after,.folio-archive>summary::after{content:'＋';position:absolute;right:2px;top:17px;color:var(--gold)}
.folio-decision[open]>summary::after,.folio-archive[open]>summary::after{content:'−'}
.folio-decision>summary>span{display:block;font-size:10px;color:#aaa193;letter-spacing:.1em;margin-bottom:5px}
.folio-decision>p{max-width:58em;font-size:14px;line-height:1.9;color:#c5bfb4;margin:0;padding:0 24px 25px 0}
.folio-archive-body{padding:20px 0 0}
.folio-archive [id]{scroll-margin-top:120px}
.folio .folio-archive .case,.folio .folio-archive .selected-work{display:block;margin:0;padding:24px 0 40px;border:0;max-width:none;scroll-margin-top:120px}
.folio-archive .case-number{display:none}
.folio-archive .case h3,.folio-archive .selected-work h3{font-size:27px}
.folio-archive p{font-size:14px;line-height:1.9}
.folio-archive img{max-width:100%;height:auto;max-height:640px;object-fit:contain}
.folio-archive figure{margin:0}
.folio-archive .selected-gallery,.folio-archive .work-gallery,.folio-archive .recognition-gallery{display:flex;overflow-x:auto;gap:18px;scroll-snap-type:x proximity;margin:25px 0}
.folio-archive .selected-gallery>*,.folio-archive .work-gallery>*,.folio-archive .recognition-gallery>*{flex:0 0 min(85%,540px);min-width:0;scroll-snap-align:start}
.folio .folio-archive .workflow,.folio .folio-archive .metrics{margin:24px 0}
.folio-resources{padding:65px 0 10px}
.folio-resources h3{font-weight:500;font-size:30px;margin:0 0 16px}
.folio-resources p{color:var(--muted);font-size:15px;line-height:1.8}
.folio-resources>div{display:flex;flex-wrap:wrap;gap:16px 26px;margin-top:25px}
.folio-resources a{font-size:14px;padding:12px 0;border-bottom:1px solid #bba88844}
.portfolio-reading-active .top{background:#161614f5;border-bottom:1px solid #cfc3a822}
.portfolio-reading-active .top #sound,.portfolio-reading-active .top #volume{display:none}

.folio.reveal-enabled .folio-case-heading{transition:transform 480ms ease-out,opacity 480ms ease-out}
.folio.reveal-enabled .folio-case-heading[data-near=false]{opacity:.72;transform:translateY(12px)}
@media(min-width:1100px){.folio-image:has(.folio-crop){padding:24px}}
@media(max-width:800px),(max-height:600px){
 .reading.folio{padding:0 6vw 65px;scroll-margin-top:64px}
 .folio-intro{display:block;padding:90px 0 40px}
 .folio-intro>.folio-kicker{margin-bottom:25px}
 .folio-intro h2{font-size:45px;margin-bottom:22px}
 .folio-intro>p:not(.folio-kicker){font-size:16px;line-height:1.75;margin-bottom:18px}
 .folio-start{display:inline-block;font-size:13px}
 .folio-layout{display:block}
 .folio-navigation{top:calc(64px + env(safe-area-inset-top,0px));margin:0 -6vw;padding:8px 6vw 11px;background:#161614fa;border-bottom:1px solid #cfc3a833}
 .folio-navigation nav{flex-direction:row;overflow-x:auto;gap:7px;scrollbar-width:none}
 .folio-navigation nav a{white-space:nowrap;gap:6px;padding:10px 8px;font-size:12px;min-height:44px;border-left:0;border-bottom:2px solid transparent}
 .folio-navigation nav a[aria-current=location]{border-bottom-color:var(--gold)}
 .folio-navigation nav a span{font-size:9px}
 .folio-location{display:flex;align-items:center;gap:16px;margin:3px 0 0;font-size:10px;line-height:1.6}
 .folio-progress{flex:1;margin:0}
 .folio-case{padding:42px 0 45px;scroll-margin-top:calc(164px + env(safe-area-inset-top,0px))}
 .folio .folio-archive [id]{scroll-margin-top:calc(164px + env(safe-area-inset-top,0px))}
 .folio-case-heading{margin-bottom:24px}.folio-kicker{font-size:10px;margin-bottom:17px}
 .folio-case h3{font-size:30px;line-height:1.35;margin-bottom:18px}.folio-lead{font-size:15px;line-height:1.85}
 .folio-slide{flex-basis:100%}.folio-rail{gap:12px}
 .folio-image{height:clamp(280px,88vw,470px);padding:10px}
 .folio-crop{width:min(100%,calc((clamp(280px,88vw,470px) - 22px)*var(--crop-ratio)))}
 .folio-slide figcaption{gap:10px;padding-top:13px}.folio-slide figcaption strong{font-size:13px}.folio-slide figcaption p{font-size:11px}.folio-slide figcaption>a{font-size:11px}
 .folio-gallery-controls{margin-bottom:25px;gap:12px}
 .folio-context{grid-template-columns:1fr;gap:22px;margin-bottom:25px}.folio-context p{font-size:14px}.folio-context h4{margin-bottom:7px}
 .portfolio-reading-active .top{height:calc(64px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px)}.portfolio-reading-active .top nav{gap:16px}
 .folio-decision>summary,.folio-archive>summary{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.folio *{scroll-behavior:auto!important;transition:none!important;animation:none!important}.folio.reveal-enabled .folio-case-heading[data-near=false]{opacity:1;transform:none}}


.reading.folio .lotto-mobile-gallery{display:none}
@media(max-width:720px){
 .reading.folio .lotto-desktop-gallery{display:none}
 .reading.folio .lotto-mobile-gallery{display:block}
}
