/* Charcoal readers for the extended portfolio, scoped away from existing galleries. */
.legacy-section { isolation:isolate; touch-action:pan-y; }
.legacy-section .category-layout { min-width:0; grid-template-columns:minmax(240px,.85fr) minmax(0,1.2fr); }
.legacy-section .category-copy h2 { overflow-wrap:normal; }
.legacy-viewer { --legacy-accent:var(--orange,#f17640); width:100%; min-width:0; position:relative; align-self:center; color:#f4efea; }
.legacy-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 0 23px; }
.legacy-tabs button,.legacy-expand { font:inherit; font-size:12px; border:1px solid #ffffff28; border-radius:30px; color:#e8e2db; background:#ffffff06; padding:10px 17px; cursor:pointer; }
.legacy-tabs button[aria-selected="true"] { color:#191817; background:var(--legacy-accent); border-color:var(--legacy-accent); }
.legacy-stage { display:grid; grid-template-columns:38px minmax(0,1fr) 38px; align-items:center; gap:12px; min-width:0; }
.legacy-prev,.legacy-next { width:38px; height:38px; border-radius:50%; border:1px solid #ffffff35; color:#fff; background:#24211eef; font-size:19px; cursor:pointer; transition:background .2s,transform .2s; }
.legacy-prev:hover,.legacy-next:hover { background:var(--legacy-accent); transform:scale(1.06); }
.legacy-prev:disabled,.legacy-next:disabled { opacity:.28; cursor:default; transform:none; }
.legacy-frame { position:relative; min-width:0; margin:auto; width:100%; padding:8px; border:1px solid #67635e; border-radius:15px; background:linear-gradient(135deg,#3b3936,#171615); box-shadow:0 24px 50px #0005,inset 0 0 0 2px #0008; }
.legacy-chrome { height:24px; display:flex; align-items:center; gap:4px; padding:0 6px; }
.legacy-chrome i { width:4px; height:4px; border-radius:50%; background:#92908a; }
.legacy-chrome span { margin-left:auto; color:#a8a49e; font-size:7px; letter-spacing:1.5px; }
.legacy-screen { height:clamp(230px,40vw,470px); max-height:57svh; overflow:auto; scrollbar-width:thin; scrollbar-color:#77736d #222; border-radius:4px; background:#101010; overscroll-behavior:contain; touch-action:none; position:relative; z-index:1; cursor:grab; }
.legacy-screen:active { cursor:grabbing; }
.legacy-strip { transform:translateX(var(--drag,0px)); transition:filter .15s,opacity .15s; min-height:100%; }
.legacy-strip img { display:block!important; width:100%!important; height:auto!important; max-width:100%; border:0; margin:0!important; padding:0; border-radius:0; object-fit:contain; transform:none!important; filter:none!important; user-select:none; -webkit-user-drag:none; }
.legacy-strip video { display:block; width:100%; height:auto; max-height:57svh; background:#080808; object-fit:contain; touch-action:none; }
.legacy-viewer[data-frame="desktop"] .legacy-frame::after { content:''; position:absolute; left:36%; right:36%; height:13px; bottom:-14px; border-radius:0 0 4px 4px; background:linear-gradient(#383532,#65605a); z-index:-1; }
.legacy-viewer[data-frame="phone"] .legacy-frame { width:min(100%,266px); padding:9px; border-radius:34px; box-shadow:0 0 0 2px #080808,0 0 0 3px #77716a,0 24px 50px #0007; }
.legacy-viewer[data-frame="phone"] .legacy-chrome { height:15px; justify-content:center; padding:0 0 5px; }
.legacy-viewer[data-frame="phone"] .legacy-chrome i,.legacy-viewer[data-frame="phone"] .legacy-chrome span { display:none; }
.legacy-viewer[data-frame="phone"] .legacy-chrome::after { content:''; width:38px; height:4px; background:#080808; border-radius:5px; }
.legacy-viewer[data-frame="phone"] .legacy-screen { height:490px; max-height:57svh; border-radius:20px; scrollbar-width:none; }
.legacy-viewer[data-frame="phone"] .legacy-screen::-webkit-scrollbar { display:none; }
.legacy-viewer[data-frame="gallery"] .legacy-frame { padding:0; border:0; background:transparent; border-radius:0; box-shadow:none; }
.legacy-viewer[data-frame="gallery"] .legacy-chrome { display:none; }
.legacy-viewer[data-frame="gallery"] .legacy-screen { height:auto; max-height:57svh; background:transparent; border-radius:0; }
.legacy-viewer[data-frame="gallery"] .legacy-strip img { max-height:none; width:auto!important; max-width:100%; margin-inline:auto!important; }
.legacy-viewer[data-video="true"] .legacy-screen { display:grid; align-items:center; overflow:hidden; background:#080808; }
.legacy-viewer[data-video="true"] .legacy-strip { min-height:0; width:100%; }
.legacy-viewer[data-video="true"][data-frame="phone"] video { height:calc(min(490px,57svh) - 1px); max-height:100%; }
#videography .legacy-video-resume { position:absolute; z-index:4; left:50%; top:50%; transform:translate(-50%,-50%); width:clamp(54px,4.5vw,76px); aspect-ratio:1; display:grid; place-items:center; padding:0; border:1px solid #fff9; border-radius:50%; background:#17161588; color:#fff; backdrop-filter:blur(8px); box-shadow:0 5px 22px #0006; cursor:pointer; }
#videography .legacy-video-resume svg { width:48%; height:48%; fill:currentColor; }
#videography .legacy-video-resume:hover { background:#ff792dcc; }
#videography .legacy-video-resume:focus-visible { outline:2px solid var(--orange,#ff792d); outline-offset:4px; }
#videography .legacy-prev,#videography .legacy-next { position:relative; z-index:2; }
.legacy-title { text-align:center; font-size:14px; line-height:1.5; margin:27px 0 7px; }
.legacy-status { text-align:center; color:var(--legacy-accent); font-size:11px; letter-spacing:1px; margin:0; }
.legacy-hint { text-align:center; font-size:10px; color:#b8afa6; margin:10px 0 14px; line-height:1.7; }
.legacy-expand { display:block; margin:0 auto; padding:7px 15px; font-size:11px; }
.legacy-empty { text-align:center; padding:100px 15px; color:#b8afa6; border:1px dashed #ffffff20; border-radius:12px; }
.legacy-feedback { position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:30px; padding:10px 15px; color:#fff; background:#171615d9; border:1px solid #ffffff40; backdrop-filter:blur(10px); font-size:12px; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .15s; }
.legacy-frame.is-previewing .legacy-feedback { opacity:1; }
.legacy-frame.is-previewing .legacy-strip { filter:blur(1.5px); }
.legacy-viewer.is-changing .legacy-strip { filter:blur(7px); opacity:.3; }
.legacy-decor { position:absolute; width:28%; height:auto; max-height:40%; object-fit:contain; right:-12%; bottom:-6%; pointer-events:none; z-index:2; }
.legacy-viewer :is(button,[tabindex]):focus-visible,.legacy-dialog-close:focus-visible { outline:2px solid var(--legacy-accent,#f17640); outline-offset:4px; }
.legacy-dialog { width:100vw; max-width:100vw; height:100svh; max-height:100svh; border:0; padding:64px 5vw 24px; background:#191817f7; color:#fff; box-sizing:border-box; }
.legacy-dialog::backdrop { background:#000b; backdrop-filter:blur(12px); }
.legacy-dialog .legacy-viewer { max-width:1100px; margin:0 auto; }
.legacy-dialog .legacy-screen { height:65svh; max-height:65svh; }
.legacy-dialog .legacy-viewer[data-frame="phone"] .legacy-frame { width:min(100%,340px); }
.legacy-dialog .legacy-viewer[data-frame="phone"] .legacy-screen { height:65svh; max-height:65svh; }
.legacy-dialog .legacy-viewer[data-frame="gallery"] .legacy-screen { height:auto; }
.legacy-dialog .legacy-expand { display:none; }
.legacy-dialog-close { position:absolute; top:18px; right:25px; background:#2e2925; color:white; border:1px solid #ffffff35; border-radius:25px; padding:10px 17px; font:inherit; cursor:pointer; }
.legacy-viewer [hidden] { display:none!important; }
@media(max-width:900px) { .legacy-section .category-layout { grid-template-columns:1fr; gap:28px; } .legacy-section .category-copy { text-align:center; } .legacy-viewer { max-width:680px; margin:auto; } .legacy-screen { max-height:54svh; } }
@media(max-width:600px) { .legacy-stage { grid-template-columns:30px minmax(0,1fr) 30px; gap:7px; } .legacy-prev,.legacy-next { width:30px; height:30px; font-size:16px; } .legacy-tabs { gap:6px; margin-bottom:18px; } .legacy-tabs button { padding:8px 12px; font-size:11px; } .legacy-viewer[data-frame="phone"] .legacy-frame { max-width:236px; } .legacy-screen { height:300px; } .legacy-decor { right:-4%; } .legacy-dialog { padding-inline:10px; } }
@media(prefers-reduced-motion:reduce) { .legacy-viewer * { transition:none!important; animation:none!important; } .legacy-frame.is-previewing .legacy-strip,.legacy-viewer.is-changing .legacy-strip { filter:none; } }

/* Refined readers: active work supplies a soft, blurred section backdrop. */
/* Explicit image sizing accounts for rotated artwork and prevents grid overflow. */
#photography .legacy-viewer .legacy-screen{max-height:none;overflow:hidden;display:block}
#photography .legacy-viewer .legacy-strip{height:100%;min-height:0;display:flex;align-items:center;justify-content:center}
#photography .legacy-viewer .legacy-strip img{flex:none;object-fit:contain}
#drawing .legacy-viewer .legacy-screen{height:min(76svh,1050px);max-height:calc(100svh - 230px);display:block}
#drawing .legacy-viewer .legacy-strip{height:100%;min-height:0;display:flex;align-items:center;justify-content:center}
#drawing .legacy-viewer .legacy-strip img{flex:none}
#drawing .legacy-stage{position:relative;display:block;padding-inline:60px}
#drawing .legacy-prev,#drawing .legacy-next{position:absolute;top:50%;transform:translateY(-50%);z-index:3}
#drawing .legacy-prev:hover,#drawing .legacy-next:hover{transform:translateY(-50%) scale(1.06)}
@media(min-width:1100px){#drawing .category-layout{grid-template-columns:minmax(270px,.65fr) minmax(0,1.52fr)}#drawing .category-copy{transform:none}}
.legacy-section{position:relative;overflow:hidden;background:#181513!important}
.legacy-section::before{content:'';position:absolute;inset:-55px;background:var(--legacy-preview) center/cover no-repeat;filter:blur(34px) saturate(1.18);opacity:.2;transform:scale(1.12);transition:background-image .28s ease,opacity .28s ease;z-index:-1}
.legacy-section::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 45%,transparent 0,rgba(18,16,14,.38) 60%,rgba(18,16,14,.76) 100%);pointer-events:none;z-index:-1}
.legacy-section .category-layout{grid-template-columns:minmax(300px,.82fr) minmax(0,1.35fr);gap:clamp(30px,5vw,110px)}
.legacy-section .category-copy{justify-self:end;width:min(360px,25vw);transform:translateX(clamp(18px,4.2vw,110px))}
.legacy-section .category-copy .category-statement{font-size:clamp(15px,1.05vw,19px);line-height:1.75;max-width:30ch}
.legacy-section .category-copy .legacy-detail{font-size:clamp(12px,.82vw,15px);line-height:1.8;color:#d1c7bb;max-width:34ch;margin-top:20px}
.legacy-tabs{margin-bottom:28px}.legacy-tabs button,.legacy-expand{font-size:14px;padding:11px 20px}.legacy-title{font-size:17px;margin-top:30px}.legacy-status{font-size:13px}.legacy-hint{font-size:12px}.legacy-expand{font-size:12px}
.legacy-decor{display:none!important}
.legacy-viewer[data-frame="desktop"] .legacy-stage{grid-template-columns:46px minmax(0,1040px) 46px;gap:clamp(14px,2vw,34px);justify-content:center}.legacy-viewer[data-frame="desktop"] .legacy-frame{max-width:1040px}.legacy-viewer[data-frame="desktop"] .legacy-screen{height:min(56svh,640px);max-height:56svh}
.legacy-viewer[data-frame="phone"] .legacy-stage{grid-template-columns:42px auto 42px;gap:clamp(13px,2vw,30px);justify-content:center}.legacy-viewer[data-frame="phone"] .legacy-frame{width:clamp(300px,23vw,400px);max-width:calc(100vw - 150px)}.legacy-viewer[data-frame="phone"] .legacy-screen{height:min(61svh,720px);max-height:61svh}
.legacy-viewer[data-frame="phone"] .legacy-prev,.legacy-viewer[data-frame="phone"] .legacy-next{align-self:center}
.legacy-viewer[data-frame="phone"] .legacy-tabs{margin-bottom:12px}.legacy-viewer[data-frame="desktop"] .legacy-tabs{transform:translateY(-22px);margin-bottom:2px}
#drawing .legacy-screen,#photography .legacy-viewer[data-orientation="portrait"] .legacy-screen{height:min(62svh,700px);max-height:62svh;overflow:hidden;display:grid;place-items:center;background:transparent}
#drawing .legacy-strip,#photography .legacy-viewer[data-orientation="portrait"] .legacy-strip{height:100%;width:100%;display:grid;place-items:center;min-height:0}
#drawing .legacy-strip img,#photography .legacy-viewer[data-orientation="portrait"] .legacy-strip img{width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;object-fit:contain}
#photography .legacy-viewer[data-orientation="landscape"] .legacy-screen{height:auto;max-height:58svh}
#videography .legacy-viewer[data-frame="desktop"] .legacy-screen{height:auto;aspect-ratio:var(--active-ratio,16/9);max-height:59svh}
#videography .legacy-viewer[data-frame="desktop"] video{height:100%;max-height:none;object-fit:contain}
#store .legacy-viewer[data-frame="desktop"] .legacy-screen,#websites .legacy-viewer[data-frame="desktop"] .legacy-screen,#vis .legacy-viewer[data-frame="desktop"] .legacy-screen{height:min(59svh,690px);max-height:59svh}
#vis .legacy-viewer[data-frame="desktop"] .legacy-screen{min-height:min(52svh,590px)}
#store .legacy-viewer[data-frame="phone"] .legacy-frame,#websites .legacy-viewer[data-frame="phone"] .legacy-frame,#videography .legacy-viewer[data-frame="phone"] .legacy-frame{width:clamp(320px,25vw,430px)}
#store .legacy-viewer[data-frame="phone"] .legacy-screen,#websites .legacy-viewer[data-frame="phone"] .legacy-screen,#videography .legacy-viewer[data-frame="phone"] .legacy-screen{height:min(63svh,760px)}
@media(max-width:900px){.legacy-section .category-copy{justify-self:start;width:auto;transform:none}.legacy-section .category-copy .legacy-detail{max-width:44ch}.legacy-viewer[data-frame="desktop"] .legacy-stage{grid-template-columns:36px minmax(0,1fr) 36px}.legacy-viewer[data-frame="phone"] .legacy-frame{width:min(76vw,340px)}.legacy-viewer[data-frame="phone"] .legacy-stage{grid-template-columns:34px auto 34px;gap:10px}.legacy-tabs{margin-bottom:18px}.legacy-viewer[data-frame="desktop"] .legacy-tabs{transform:none;margin-bottom:18px}}
@media(max-width:600px){.legacy-tabs button,.legacy-expand{font-size:12px;padding:9px 14px}.legacy-title{font-size:15px}.legacy-viewer[data-frame="phone"] .legacy-frame{width:min(70vw,300px)}.legacy-viewer[data-frame="phone"] .legacy-stage{grid-template-columns:30px auto 30px;gap:8px}.legacy-viewer[data-frame="phone"] .legacy-screen{height:55svh}.legacy-section::before{opacity:.15}}
@media(min-width:1100px){
 #store .category-layout{grid-template-columns:minmax(240px,.48fr) minmax(0,1.69fr);gap:clamp(24px,3vw,70px)}
 #store .category-copy{transform:none;justify-self:center;width:min(100%,360px)}
 #store .legacy-viewer[data-frame="desktop"] .legacy-stage{grid-template-columns:42px minmax(0,1560px) 42px;gap:20px}
 #store .legacy-viewer[data-frame="desktop"] .legacy-frame{max-width:1560px}
 #store .legacy-viewer[data-frame="desktop"] .legacy-screen{height:min(88.5svh,1035px);max-height:calc(100svh - 270px)}
 #store .legacy-viewer[data-frame="phone"] .legacy-frame{width:clamp(480px,37.5vw,645px);max-width:calc(100% - 2px)}
 #store .legacy-viewer[data-frame="phone"] .legacy-screen{height:min(94.5svh,1140px);max-height:calc(100svh - 270px)}
}