/* ===== Archive page. Colors come from theme variables, so it follows the light/dark toggle ===== */
:root{--a-fg:#22231f;--a-mute:#66695f;--a-soft:#4d4f47;--a-line:#bcbeb3;--a-line2:#aaad9f;--a-card:#d3d3ca;--a-head:#e8e6e0ea;--a-on:#f0efe8;--a-accent:#22231f}

.archive-page header{position:sticky;top:0;mix-blend-mode:normal;background:var(--a-head);color:var(--a-fg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--a-line)}
.archive-page header .site-name,.archive-page header nav a{color:var(--a-fg)}
.archive-page header nav a[aria-current=page]{border-bottom:1px solid currentColor}
.archive-page footer{border-top-color:var(--a-line);color:var(--a-mute)}
.archive-page footer a:hover{color:var(--a-fg)}

.archive-heading{padding:70px var(--pad) 45px}
.archive-heading h1{font-size:clamp(70px,11vw,170px);font-weight:400;letter-spacing:-.065em;line-height:1;margin:30px 0}
.archive-heading em{font-family:Georgia,serif;font-weight:400}
.archive-heading>div{display:flex;justify-content:space-between;align-items:end;gap:25px}
.archive-heading p{font-size:17px;color:var(--a-soft);margin:0}
.archive-heading>div>span{font:10px monospace;color:var(--a-mute)}
.archive-page .label{color:var(--a-mute)}

/* ----- toolbar: search + sort icons ----- */
.gallery-section{padding:0 var(--pad) 60px}
.gallery-toolbar{display:flex;justify-content:flex-end;align-items:center;gap:20px;border-top:1px solid var(--a-line);border-bottom:1px solid var(--a-line);padding:14px 0}
.gallery-controls{display:flex;align-items:center;gap:14px}
.gallery-controls input{font:12px Helvetica,Arial,sans-serif;background:transparent;border:1px solid var(--a-line2);padding:0 14px;color:var(--a-fg);height:40px;border-radius:30px;width:200px}
.gallery-controls input::placeholder{color:var(--a-mute)}
.gallery-controls input:focus{outline:none;border-color:var(--a-fg)}
.sort-icons{display:inline-flex;gap:6px}
.sort-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid var(--a-line2);border-radius:50%;background:transparent;color:var(--a-fg);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.sort-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sort-btn svg .sl{fill:currentColor;stroke:none;font:600 9.5px Helvetica,Arial,sans-serif}
.sort-btn:hover{border-color:var(--a-fg)}
.sort-btn[aria-pressed=true]{background:var(--a-fg);color:var(--a-on);border-color:var(--a-fg)}
.sort-btn:focus-visible{outline:2px solid var(--a-accent);outline-offset:3px}
.gallery-count,.gallery-note{font-size:11px;color:var(--a-mute);margin:20px 0}
.gallery-note{margin-top:45px}

/* ----- grid ----- */
.archive-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 22px}
.gallery-card{display:flex;flex-direction:column;text-align:left;width:100%;min-width:0;transition:opacity .3s}
.gallery-card:hover{text-decoration:none}
.gallery-card.feature{grid-column:span 2}
.gallery-card.feature .gallery-image{aspect-ratio:auto;flex:1;min-height:0}
.gallery-image{aspect-ratio:1.5;position:relative;overflow:hidden;background:var(--a-card)}
.gallery-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .4s}
.gallery-image::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 50%,#000a);opacity:0;transition:opacity .35s;pointer-events:none}
.gallery-card:hover .gallery-image::after,.gallery-card:focus-visible .gallery-image::after{opacity:1}
.gallery-card:hover img{transform:scale(1.045)}
.gallery-image>span{position:absolute;left:16px;bottom:16px;z-index:1;background:#ecebe4;color:#141512;border-radius:30px;padding:9px 16px;font-size:11px;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
.gallery-card:hover .gallery-image>span,.gallery-card:focus-visible .gallery-image>span{opacity:1;transform:none}
.gallery-caption{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:13px;border-top:1px solid var(--a-line);padding-top:11px;transition:border-color .3s}
.gallery-caption h2{font-size:20px;font-weight:400;letter-spacing:-.04em;margin:0;color:var(--a-fg)}
.gallery-caption>span{font:10px monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--a-mute)}
/* the project that is currently open stays fully visible and is marked */
.archive-grid .gallery-card.is-open{opacity:1}
.gallery-card.is-open .gallery-caption{border-top-color:var(--a-accent)}
.gallery-card.is-open .gallery-caption h2::after{content:"  ·  open";font:10px monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--a-mute)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
[hidden]{display:none!important}
#empty{padding:60px 0;text-align:center;color:var(--a-mute)}

/* last card stretches to close its row; a card alone in its row becomes a wide banner */
.gallery-card.fill .gallery-image{aspect-ratio:auto;flex:1;min-height:0}
.gallery-card.fill.alone .gallery-image{aspect-ratio:2.6/1;flex:none}

/* ===== Inline project panel: opens in place, under the row of the project you clicked ===== */
.lb-panel{grid-column:1/-1;display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1);scroll-margin-top:84px;margin:-6px 0 0}
.lb-panel.open{grid-template-rows:1fr}
.lb-inner{min-height:0;overflow:hidden;border-top:1px solid var(--a-line);border-bottom:1px solid var(--a-line)}
.lb-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:22px 0 18px}
.lb-head h2{margin:0;font-size:clamp(26px,3vw,40px);font-weight:400;letter-spacing:-.045em;line-height:1;color:var(--a-fg);outline:none}
#archive-meta{margin:9px 0 0;font:10px monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--a-mute)}

/* every button in the panel shares this style */
.lb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 18px;border:1px solid var(--a-line2);border-radius:30px;background:transparent;color:var(--a-fg);font:12px Helvetica,Arial,sans-serif;letter-spacing:.01em;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.lb-btn:hover{border-color:var(--a-fg)}
.lb-btn[aria-pressed=true]{background:var(--a-fg);color:var(--a-on);border-color:var(--a-fg)}
.lb-btn:focus-visible,.lb-arrow:focus-visible{outline:2px solid var(--a-accent);outline-offset:3px}

/* the stage is always the same 16:9 box, whatever it is showing */
.lb-stage{position:relative;aspect-ratio:16/9;width:min(100%,calc((100svh - 300px) * 16 / 9));min-width:min(100%,520px);margin:0 auto;background:#000}
.lb-stage iframe,.lb-stage img{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.lb-stage img{object-fit:contain}
.lb-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border:1px solid #ffffff55;border-radius:50%;background:#0009;color:#fff;font-size:22px;line-height:1;cursor:pointer;transition:background .2s,color .2s}
.lb-arrow.prev{left:12px}.lb-arrow.next{right:12px}
.lb-arrow:hover{background:#ecebe4;color:#141512}

.lb-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0 4px}
#clip-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
#clip-list:empty{display:none}
#clip-list .lb-btn{min-width:42px;padding:0 14px}
#clip-list .lb-btn .lb-play{font-size:9px}
#lb-count{font:10px monospace;letter-spacing:.08em;color:var(--a-mute);white-space:nowrap}

/* project text: one full-width collapsible section, closed by default */
#archive-info{padding:12px 0 6px}
.lb-toggle{width:100%;justify-content:space-between;padding:0 18px}
.lb-toggle .lb-plus{font-size:16px;line-height:1}
#archive-body{padding:18px 4px 6px}
#archive-text{max-width:none;margin:0;font-size:16px;line-height:1.7;color:var(--a-soft)}
#archive-credit{display:inline-block;margin-top:14px;font-size:12px;color:var(--a-fg);border-bottom:1px solid var(--a-line2);padding-bottom:3px}

.lb-foot{display:flex;justify-content:space-between;gap:12px;padding:16px 0 22px}
.lb-foot .lb-btn{max-width:48%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;line-height:38px}

@media(prefers-reduced-motion:reduce){.lb-panel{transition:none}}
@media(max-width:900px){.gallery-toolbar{justify-content:flex-start}.archive-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:750px){
 .lb-stage{width:100%;min-width:0}
 .lb-arrow{width:38px;height:38px;font-size:18px}.lb-arrow.prev{left:8px}.lb-arrow.next{right:8px}
 .lb-head{padding:18px 0 14px}#archive-text{font-size:14.5px}
}
@media(max-width:550px){
 .archive-heading{padding-top:40px}.archive-heading>div{display:block}.archive-heading>div>span{display:block;margin-top:25px}
 .archive-grid{gap:26px 12px}.gallery-caption h2{font-size:16px}.gallery-caption>span{font-size:9px}
 .gallery-controls{width:100%;justify-content:space-between}.gallery-controls label{flex:1;min-width:0}.gallery-controls input{width:100%}
 .gallery-card.feature .gallery-image,.gallery-card.fill .gallery-image{aspect-ratio:1.5;flex:none}.gallery-image>span{display:none}
}

/* once the open animation has run, hold the panel at full height (also the safe fallback if animations are off) */
.lb-panel.settled{grid-template-rows:1fr;transition:none}

/* slightly larger sort icons so A-Z and Z-A are easy to tell apart */
.sort-btn svg{width:23px;height:23px}
.sort-btn svg .sl{font:700 10.5px Helvetica,Arial,sans-serif}

/* the stage takes the exact shape of whatever it shows, so there is never a black backdrop */
.lb-stage{background:transparent;aspect-ratio:var(--ar,16/9);width:min(100%,calc((100svh - 300px) * var(--arn,1.7778)))}
@media(max-width:750px){.lb-stage{width:100%}}
.lb-stage{min-width:min(100%,240px)}

/* thumbnails read as past work: softly tinted in the theme's color, true color on hover or when open */
.gallery-image{isolation:isolate}
.gallery-image .tint{position:absolute;inset:0;background:var(--af-tone,#a39682);mix-blend-mode:color;opacity:.7;pointer-events:none;transition:opacity .6s ease}
.gallery-image img{filter:contrast(.84) brightness(1.07)}
.gallery-card:hover .gallery-image .tint,.gallery-card:focus-visible .gallery-image .tint,.gallery-card.is-open .gallery-image .tint,.gallery-card:active .gallery-image .tint{opacity:0}
.gallery-card:hover .gallery-image img,.gallery-card:focus-visible .gallery-image img,.gallery-card.is-open .gallery-image img,.gallery-card:active .gallery-image img{filter:none}
@media(prefers-reduced-motion:reduce){.gallery-image .tint{transition:none}}

/* safety: a wide card that ends up alone in its row keeps a normal shape instead of collapsing */
@media(max-width:900px){.gallery-card.feature .gallery-image{aspect-ratio:1.5;flex:none}}