/* Cards copy the media's own shape (Auto) or the resolution picked in the editor, with a slim caption strip flush underneath. */
/* Grid: left-aligned rows, every card sized from ONE base width x its own scale (set in the editor), so the same media always shows the same size. */
.project-grid{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start;justify-content:flex-start}
.project-card,.project-card:nth-child(n){grid-column:auto;margin-top:0;flex:0 0 auto;width:min(100%,calc(var(--card-base,360px) * var(--scale,1)))}
.empty-note{width:100%;opacity:.7;font-size:12px;text-transform:uppercase;letter-spacing:.08em;padding:30px 0}
@media(max-width:700px){.project-grid{gap:13px}.project-card,.project-card:nth-child(n){width:min(100%,calc((50% - 6.5px) * var(--scale,1)))}}
.project-media{position:relative;overflow:hidden;background:#090707;box-shadow:6px 7px 0 rgba(0,0,0,.65)}
.project-card .project-image{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:cover;background:transparent;box-shadow:none;transition:transform .35s,filter .35s}
.project-card .project-image.yt{aspect-ratio:16/9}
.project-card[data-frame] .project-image,.project-card[data-frame] .project-empty{aspect-ratio:var(--frame-ratio)}
.project-card[data-frame][data-fit=scale] .project-image{object-fit:contain;background:#090707}
.project-card[data-frame][data-fit=fill] .project-image{object-fit:cover}
.project-card[data-frame][data-fit=stretch] .project-image{object-fit:fill}
.project-card:hover .project-image{transform:scale(1.04);filter:contrast(1.15)}
.project-meta{margin:0;padding:8px 10px;background:rgba(0,0,0,.62);align-items:baseline}
.project-meta span{opacity:.75}
.project-count{position:absolute;right:10px;top:10px;z-index:2;background:rgba(0,0,0,.72);color:#fff;font-size:11px;font-weight:bold;padding:6px 8px}
.project-empty{width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,#25040a,#070304 60%);display:flex;flex-direction:column;justify-content:end;padding:18px;color:#fff;box-sizing:border-box}
.project-empty[hidden]{display:none}
.project-empty span{font-size:10px;letter-spacing:.14em}
.project-empty b{font:clamp(1rem,2vw,2rem) var(--display);line-height:.9;margin-top:8px}

/* Filters: collections as buttons, tags as a dropdown beside them */
.filter-divider{align-self:center;font-size:10px;text-transform:uppercase;font-weight:bold;letter-spacing:.1em;opacity:.7;margin-left:10px}
.collection-tag{background:var(--red);color:#fff}
.filter-select{font:12px var(--mono);font-weight:bold;text-transform:uppercase;color:var(--paper);background:rgba(0,0,0,.24);border:2px solid var(--paper);padding:9px 13px;cursor:pointer;border-radius:0}
.filter-select.active,.filter-select:hover{background:var(--red);border-color:var(--red)}
.filter-select option{background:#120406;color:#f5f1e9}

/* Modal: stage, carousel dots, prev/next arrows */
.modal{padding:5vh max(76px,5vw)}
.modal-media{min-width:0;width:100%;display:flex;flex-direction:column;align-items:center}
.modal-stage{width:100%;display:flex;justify-content:center;background:transparent}
.modal-stage.framed{background:#000;--fit:cover}
.modal-stage.framed>img,.modal-stage.framed>video,.modal-stage.framed>iframe,.modal-stage.framed>.project-empty{width:100%;height:100%;max-width:none;max-height:none;object-fit:var(--fit);margin:0;aspect-ratio:auto}
.modal-stage:not(.framed)>.modal-embed{width:100%;aspect-ratio:16/9;height:auto;border:0}
.modal-embed{border:0}
.modal-file{width:100%;height:auto;max-height:78vh;object-fit:contain;background:#000}
.modal-stage.framed>.modal-file{max-height:none}
.audio-note{font-size:11px;color:#f4d21f;margin:10px 0 0}
.modal-dots{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:14px;flex-wrap:wrap}
.modal-dots button{width:12px;height:12px;border-radius:50%;border:2px solid #fff;background:transparent;padding:0;cursor:pointer}
.modal-dots button.on{background:var(--red);border-color:var(--red)}
.modal-dots span{font-size:11px;font-weight:bold;margin-left:8px;opacity:.85}
.modal-nav{position:fixed;top:50%;transform:translateY(-50%);z-index:35;width:52px;height:76px;background:var(--red);color:#fff;border:0;font:bold 34px Arial;line-height:1;cursor:pointer;opacity:.92;padding:0 0 4px}
.modal-nav:hover{opacity:1;filter:brightness(1.15)}
.modal-nav.prev{left:12px}
.modal-nav.next{right:12px}
.modal-nav[hidden]{display:none}
@media(max-width:700px){.modal{padding:5vh 5vw 96px}.modal-nav{top:auto;bottom:16px;transform:none;width:52px;height:52px;font-size:28px}.modal-nav.prev{left:calc(50% - 60px)}.modal-nav.next{right:calc(50% - 60px)}}

/* Page copy: hero, section lead, contact, about */
.hero:after{content:none!important}
.hero-role{position:relative;z-index:1;margin:0 0 14px;font:bold clamp(.9rem,1.6vw,1.25rem) var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--yellow)}
.hero-tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px 0;padding:0;margin:20px 0 0;position:relative;z-index:1}
.hero-tags li{border:0;background:none;padding:0;font:bold 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(245,241,233,.74)}
.hero-tags li+li:before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--red);margin:0 14px;vertical-align:middle}
.section-title{margin-bottom:16px}
.section-lead{max-width:560px;line-height:1.7;margin:0 0 46px}
.footer .contact-title{margin:0 0 16px;font:clamp(2.4rem,6vw,5.5rem)/.9 var(--display);letter-spacing:-.05em;max-width:900px}
.contact-lead{max-width:520px;line-height:1.7;margin:0 0 28px}
.about-solo{grid-template-columns:1fr}
.about h2{font-size:clamp(2rem,4.2vw,3.8rem);line-height:.95;max-width:820px}
.about p{max-width:680px}
.areas-title{display:block;margin-top:36px}
.areas-title+.discipline-list{margin-top:12px}
.page-hero .eyebrow{display:block;margin-bottom:22px}

/* Hero: name sits higher; media carousel fades in from the right */
.hero{height:auto;min-height:min(100svh,800px);justify-content:flex-start;padding:clamp(104px,16vh,160px) 5vw clamp(48px,9vh,90px)}
.hero>*:not(.hero-carousel){position:relative;z-index:1}
.hero-carousel{position:absolute;top:0;right:0;bottom:0;width:68%;z-index:0;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.5) 38%,#000 80%);mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.5) 38%,#000 80%)}
@media(max-width:800px){.hero-carousel{width:100%;opacity:.55;-webkit-mask-image:linear-gradient(to right,transparent 12%,#000 100%);mask-image:linear-gradient(to right,transparent 12%,#000 100%)}.hero{padding-top:104px}}
@media(max-width:520px){.hero-tags{gap:6px 18px}.hero-tags li+li:before{display:none}}

/* Hero carousel slides: fade in on top, old one fades out underneath, media drifts right-to-left the whole time it is on screen */
.hc-slide{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity .6s ease .5s;will-change:opacity}
.hc-slide.in{opacity:1;transition:opacity 1.2s ease-out}
.hc-media{position:absolute;top:0;left:0;width:138%;height:100%;object-fit:cover;filter:saturate(.92) brightness(.84);will-change:transform;transform:translate3d(0,0,0)}
.hc-slide.live .hc-media{animation:hc-drift var(--hc-life,5.4s) linear forwards}
@keyframes hc-drift{from{transform:translate3d(4%,0,0)}to{transform:translate3d(-27.5%,0,0)}}
@media(prefers-reduced-motion:reduce){.hc-slide.live .hc-media{animation:none}.hc-media{width:100%}}

/* Work page: collections as labelled sections with soft start / end lines */
.coll-head,.coll-end{flex:0 0 100%;width:100%}
.coll-head{display:flex;align-items:baseline;gap:16px;margin-top:clamp(22px,4vw,44px);padding-top:18px;background:linear-gradient(to right,rgba(245,241,233,.3),rgba(245,241,233,.04) 85%) top left/100% 1px no-repeat}
.coll-head:first-child{margin-top:0}
.coll-title{display:inline-flex;align-items:center;gap:12px;font:clamp(1.05rem,1.9vw,1.5rem) var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--paper)}
.coll-title:before{content:'';width:9px;height:9px;background:var(--red);flex:0 0 auto}
.coll-count{font:bold 11px var(--mono);letter-spacing:.14em;color:rgba(245,241,233,.5)}
.coll-end{height:1px;margin-top:8px;background:linear-gradient(to right,rgba(245,241,233,.04),rgba(245,241,233,.2))}