/* ---------- Cinematic Gallery (portfolio only): black room, wide screen, film grain ---------- */
.page-portfolio { --cine-black: #050507; --cine-ink: #0c0c11; background: var(--cine-black); }
html:has(.page-portfolio) { background: #050507; }
.cine-backdrop { position: fixed; inset: 0; z-index: -1; background: radial-gradient(120% 80% at 50% 0%, #15131c 0%, #08080c 55%, #050507 100%); pointer-events: none; }
/* fine static grain; a slow stepped drift keeps it alive without flicker */
.cine-grain { position: absolute; inset: -60px; opacity: 0.13; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-22px, 14px); } 40% { transform: translate(16px, -26px); } 60% { transform: translate(-30px, -10px); } 80% { transform: translate(24px, 28px); } 100% { transform: translate(0, 0); } }
.reduced .cine-grain { animation: none; }
.page-portfolio .site-header.is-solid { background: rgba(5, 5, 7, 0.8); }
.page-portfolio .site-footer { background: #050507; }

/* hero: a 2.39:1 screen with letterbox bars, one anamorphic flare, serif titles */
.cine-hero { padding: calc(var(--header-h) + clamp(1.2rem, 4vw, 3rem)) var(--gutter) clamp(1.5rem, 4vw, 3rem); }
.cine-hero__screen { position: relative; max-width: var(--w-wide); margin-inline: auto; min-height: min(41.8vw, 38rem); display: grid; align-content: center; justify-items: center; gap: clamp(0.7rem, 1.6vw, 1.3rem); text-align: center; padding: clamp(4.5rem, 9vw, 7.5rem) clamp(1rem, 5vw, 4rem); overflow: hidden; background: linear-gradient(180deg, #0b0a10, #100e17 50%, #0b0a10); border-block: clamp(1.4rem, 4.4vw, 4rem) solid #000; }
.cine-hero__flare { position: absolute; left: -10%; right: -10%; top: 46%; height: 2px; background: linear-gradient(90deg, transparent, rgba(120, 190, 255, 0.0) 12%, rgba(140, 200, 255, 0.75) 46%, #fff 50%, rgba(140, 200, 255, 0.75) 54%, rgba(120, 190, 255, 0) 88%, transparent); filter: blur(1.2px); opacity: 0.55; }
.cine-hero__flare::after { content: ""; position: absolute; left: 20%; right: 20%; top: -3.2rem; height: 6.4rem; background: radial-gradient(50% 50% at 50% 50%, rgba(110, 170, 255, 0.22), transparent 70%); filter: blur(10px); }
.cine-hero__mark { position: relative; font-family: var(--font-cine); font-size: clamp(0.72rem, 0.6rem + 0.4vw, 0.9rem); letter-spacing: 0.42em; text-indent: 0.42em; text-transform: uppercase; color: var(--gold); }
.cine-hero__title { position: relative; display: grid; gap: 0.5rem; font-family: var(--font-serif-tc); font-size: clamp(2rem, 1.1rem + 3.6vw, 4.2rem); font-weight: 800; letter-spacing: 0.22em; text-indent: 0.22em; line-height: 1.15; }
.cine-hero__title span { font-family: var(--font-cine); font-weight: 500; font-size: 0.5em; letter-spacing: 0.34em; text-indent: 0.34em; text-transform: uppercase; color: var(--text-2); }
.cine-hero__lede { position: relative; max-width: 34rem; color: var(--text-2); font-size: var(--fs-2); }
.cine-hero__meta { position: relative; color: var(--text-3); font-size: 0.78rem; letter-spacing: 0.06em; }

/* works: featured spans the content width, the rest sit in two columns (one on phones) */
.works { padding-bottom: clamp(3rem, 8vw, 7rem); }
.works__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.2rem, 5vw, 4.5rem) clamp(1.2rem, 3vw, 2.5rem); margin-top: clamp(2.5rem, 6vw, 5rem); }
@media (max-width: 860px) { .works__grid { grid-template-columns: minmax(0, 1fr); } }
.works__note { margin-top: clamp(2.5rem, 5vw, 4rem); max-width: 46rem; }

.work { display: grid; gap: clamp(0.9rem, 2vw, 1.4rem); scroll-margin-top: calc(var(--header-h) + 1rem); }
.work__frame { position: relative; overflow: hidden; background: #000; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 40px 90px -40px #000; isolation: isolate; }
.work__stage { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: pointer; border-radius: inherit; }
.work__stage:focus-visible { outline-offset: -4px; }
.work__still, .work__video, .work__fx { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.work__still { z-index: 1; }
.work__video { z-index: 2; visibility: hidden; background: transparent; }
.work__video.is-on { visibility: visible; }
.work__fx { z-index: 3; pointer-events: none; }
/* state chip + zoom: quiet until the frame is hovered, focused or busy */
.work__chip { position: absolute; z-index: 4; left: 0.8rem; bottom: 0.8rem; padding: 0.3rem 0.75rem; border-radius: var(--r-pill); background: rgba(5, 5, 7, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--text); opacity: 0; transform: translateY(4px); transition: opacity var(--t-med), transform var(--t-med) var(--ease-out); pointer-events: none; }
.work__zoom { position: absolute; z-index: 5; right: 0.8rem; top: 0.8rem; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.5rem; padding: 0 0.85rem 0 0.7rem; border-radius: var(--r-pill); background: rgba(5, 5, 7, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.16); font-size: 0.8rem; letter-spacing: 0.1em; opacity: 0; transition: opacity var(--t-med), background var(--t-fast); }
.work__zoom svg { width: 1.05rem; height: 1.05rem; }
.work__zoom:hover { background: rgba(40, 40, 52, 0.9); }
.work__frame:hover .work__chip, .work__frame:focus-within .work__chip, .work[data-state="loading"] .work__chip, .work[data-state="error"] .work__chip { opacity: 1; transform: none; }
.work__frame:hover .work__zoom, .work__frame:focus-within .work__zoom { opacity: 1; }
@media (hover: none) { .work__chip, .work__zoom { opacity: 1; transform: none; } }
.work[data-state="loading"] .work__chip::before { content: ""; display: inline-block; width: 0.7rem; height: 0.7rem; margin-right: 0.5rem; vertical-align: -1px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.3); border-top-color: var(--gold); animation: spin 800ms linear infinite; }
.work[data-state="error"] .work__chip { border-color: color-mix(in srgb, var(--err) 60%, transparent); color: var(--err); }
.work[data-state="video"] .work__chip { color: var(--gold); }

.work__info { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.8rem 2rem; align-items: start; }
.work__title { display: grid; gap: 0.3rem; font-family: var(--font-serif-tc); font-size: clamp(1.3rem, 1.05rem + 1vw, 1.9rem); font-weight: 700; letter-spacing: 0.08em; }
.work--featured .work__title { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.8rem); }
.work__latin { font-family: var(--font-cine); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.36em; text-transform: uppercase; color: var(--gold); }
.work__tagline { margin-top: 0.5rem; color: var(--text-2); max-width: 34rem; }
.work__specs { display: flex; gap: 1.4rem; padding-top: 0.35rem; font-size: 0.8rem; }
.work__specs div { display: grid; gap: 0.1rem; }
.work__specs dt { font-family: var(--font-sans); font-size: 0.68rem; letter-spacing: 0.16em; color: var(--text-3); }
.work__specs dd { margin: 0; color: var(--text); white-space: nowrap; }
.work__src { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.work__src summary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 0; cursor: pointer; font-size: 0.82rem; letter-spacing: 0.1em; color: var(--text-2); list-style: none; }
.work__src summary::-webkit-details-marker { display: none; }
.work__src summary::before { content: "+"; font-family: var(--font-mono); color: var(--gold); transition: transform var(--t-med) var(--ease-out); }
.work__src[open] summary::before { transform: rotate(45deg); }
.work__src dl { display: grid; gap: 0; padding-bottom: 0.6rem; font-size: 0.88rem; }
.work__src dl div { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); gap: 1rem; padding: 0.42rem 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.work__src dt { color: var(--text-3); }
.work__src dd { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }
@media (max-width: 560px) { .work__info { grid-template-columns: minmax(0, 1fr); } .work__specs { padding-top: 0; } }

/* lightbox */
.lightbox { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: env(safe-area-inset-top) clamp(0.6rem, 2vw, 1.5rem) env(safe-area-inset-bottom); border: 0; background: rgba(3, 3, 5, 0.97); color: var(--text); }
.lightbox::backdrop { background: #000; }
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(0.5rem, 1.4vw, 1rem); animation: lb-in 320ms var(--ease-out); }
@keyframes lb-in { from { opacity: 0; } }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.8rem; }
.lightbox__bar h2 { font-family: var(--font-serif-tc); font-size: var(--fs-3); letter-spacing: 0.08em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lightbox__tools { display: flex; align-items: center; gap: 0.6rem; flex: none; }
.seg { display: inline-flex; padding: 3px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--r-pill); }
.seg button { min-height: 2.3rem; padding: 0 1rem; border-radius: var(--r-pill); font-size: 0.86rem; letter-spacing: 0.1em; color: var(--text-2); }
.seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink-900); font-weight: 600; }
.lightbox__close { min-height: 2.6rem; padding: 0 1.1rem; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--r-pill); font-size: 0.86rem; letter-spacing: 0.1em; }
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, 0.1); }
.lightbox__stage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(0.3rem, 1vw, 1rem); min-height: 0; }
.lightbox__media { display: grid; place-items: center; height: 100%; min-height: 0; min-width: 0; }
.lightbox__media img, .lightbox__media video { max-width: 100%; max-height: 100%; width: auto; height: auto; aspect-ratio: var(--ar, 16 / 9); object-fit: contain; background: #000; }
.lightbox__media video { width: 100%; }
.lightbox__nav { width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); font-size: 1.1rem; }
.lightbox__meta { padding-bottom: 0.8rem; text-align: center; color: var(--text-3); font-size: 0.76rem; letter-spacing: 0.04em; }
@media (max-width: 640px) {
  .lightbox__stage { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .lightbox__media { grid-column: 1 / -1; grid-row: 1; }
  .lightbox__nav { grid-row: 2; justify-self: center; }
  .lightbox__hint { display: none; }
}