* { box-sizing: border-box; }
body { overflow-x: hidden; }
.portfolio-page { position:relative; width:100%; height:100svh; margin:0; padding-top:clamp(64px,8vh,92px); color:#bdbdbd; overflow:hidden; }
.portfolio-head,
.portfolio-note { width:min(920px,calc(100vw - 420px)); margin-inline:auto; }
.portfolio-head { display:flex; justify-content:space-between; padding-bottom:5px; font-size:11px; }
.portfolio-head button { padding:0; color:inherit; background:transparent; border:0; cursor:pointer; }
.portfolio-note { margin-top:9px; font-size:9px; opacity:.5; }
.portfolio-tags {
  position:absolute;
  left:clamp(42px,5vw,96px);
  top:22vh;
  z-index:42;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  width:145px;
  margin:0;
  padding:8px 7px;
  font-size:9px;
  filter:drop-shadow(0 0 12px var(--corp020-nav-bg));
}
.portfolio-tags button { padding:0; color:inherit; background:transparent; border:0; border-bottom:1px dotted transparent; cursor:pointer; opacity:.45; }
.portfolio-tags button:hover,
.portfolio-tags button:focus-visible,
.portfolio-tags button.is-active { border-bottom-color:currentColor; opacity:1; }
.portfolio-resolver {
  position:absolute;
  left:clamp(214px,23vw,470px);
  right:clamp(145px,10vw,230px);
  top:22vh;
  z-index:26;
  display:grid;
  grid-template-columns:minmax(360px,1fr) minmax(200px,300px);
  gap:clamp(34px,5vw,92px);
  align-items:center;
  height:22vh;
  min-height:150px;
  max-height:230px;
  pointer-events:none;
}
.portfolio-resolver.is-resolved .portfolio-resolver-info { align-self:center; font-size:9px; line-height:1.4; text-align:right; opacity:.62; transition:opacity .16s ease; }
.portfolio-resolver.is-resolved .portfolio-resolver-info { opacity:.96; }
.portfolio-resolver-info p { margin:0 0 5px; }
.portfolio-resolver-name { font-size:13px; }
.portfolio-resolver-info a { display:inline-block; max-width:100%; overflow:hidden; color:inherit; border-bottom:1px dotted currentColor; text-overflow:ellipsis; white-space:nowrap; pointer-events:auto; }
.portfolio-viewport {
  position:absolute;
  left:178px;
  right:0;
  top:54vh;
  bottom:24px;
  z-index:18;
  min-height:210px;
  overflow:visible;
  border:0;
  perspective:1550px;
  perspective-origin:48% 44%;
  touch-action:none;
  cursor:ew-resize;
  isolation:isolate;
}
.portfolio-loop { position:absolute; inset:0; transform-style:preserve-3d; will-change:transform; }
.portfolio-card {
  position:absolute;
  left:50%;
  top:50%;
  width:clamp(260px,23vw,390px);
  height:clamp(170px,21vh,230px);
  margin:0;
  padding:16px 7px 27px;
  overflow:visible;
  color:inherit;
  background:color-mix(in srgb,var(--corp020-nav-bg) 76%,transparent);
  border:1px solid color-mix(in srgb, currentColor 55%, transparent);
  font:inherit;
  text-align:left;
  transform-style:preserve-3d;
  cursor:crosshair;
  will-change:transform,opacity,filter;
}
.panel-label { display:none; }
.portfolio-media { display:block; width:100%; height:100%; overflow:hidden; }
.portfolio-card img,
.portfolio-card video { display:block; width:100%; height:100%; object-fit:cover; opacity:.2; filter:grayscale(1) blur(2px); transition:opacity .16s ease,filter .18s ease,transform .9s cubic-bezier(.16,1,.3,1); }
.portfolio-card img[hidden],.portfolio-card video[hidden] { display:none; }
.portfolio-caption { position:absolute; left:7px; right:7px; bottom:4px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:end; opacity:.42; transition:opacity .16s ease; }
.portfolio-title { overflow:hidden; font-size:9px; white-space:nowrap; text-overflow:ellipsis; }
.portfolio-tags-line { font-size:7px; text-align:right; white-space:nowrap; }
.portfolio-description { position:absolute; left:8px; right:8px; top:100%; margin-top:5px; font-size:8px; opacity:0; transform:translateY(-3px); transition:opacity .16s ease,transform .3s ease; }
.portfolio-card:hover,.portfolio-card:focus-visible { outline:0; filter:drop-shadow(0 14px 24px rgba(0,0,0,.38)); }
.portfolio-card:hover img,.portfolio-card:focus-visible img,
.portfolio-card:hover video,.portfolio-card:focus-visible video { opacity:1; filter:none; transform:scale(1.012); }
.portfolio-card:hover .portfolio-caption,.portfolio-card:focus-visible .portfolio-caption { opacity:1; }
.portfolio-card:hover .portfolio-description,.portfolio-card:focus-visible .portfolio-description { opacity:.8; transform:none; }
.portfolio-depth-label { position:absolute; right:18vw; bottom:2px; margin:0; font-size:7px; opacity:.28; pointer-events:none; }
.portfolio-empty { position:absolute; left:42%; top:50%; margin:0; font-size:10px; opacity:.6; transform:translate(-50%,-50%); }
html[data-theme="light"] .portfolio-page { color:#222; }
@media (max-width:900px) {
  .portfolio-head,.portfolio-note { width:calc(100vw - 150px); margin-left:120px; }
  .portfolio-tags { left:10px; top:145px; width:105px; gap:5px; }
  .portfolio-resolver { left:124px; right:18px; top:125px; grid-template-columns:1fr; height:120px; min-height:0; }
  .portfolio-resolver-info { display:none; }
  .portfolio-viewport { left:102px; right:-65vw; top:48vh; bottom:88px; }
  .portfolio-card { width:min(72vw,370px); height:min(43vw,225px); }
}
@media (prefers-reduced-motion:reduce) { .portfolio-card img,.portfolio-card video,.portfolio-description { transition-duration:.01ms; } }

/* Watch overlay (YouTube embed / local muted clip). */
.portfolio-watch { position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:clamp(16px,4vw,60px); visibility:hidden; opacity:0; background:rgba(0,0,0,.86); backdrop-filter:blur(6px); pointer-events:none; transition:opacity .3s ease, visibility 0s linear .3s; }
.portfolio-watch.open { visibility:visible; opacity:1; pointer-events:auto; transition-delay:0s; }
.portfolio-watch-frame { width:min(1100px,100%); aspect-ratio:16/9; background:#000; }
.portfolio-watch-frame iframe, .portfolio-watch-frame video { width:100%; height:100%; border:0; display:block; object-fit:contain; background:#000; }
.portfolio-watch-title { margin:10px 0 0; color:#bdbdbd; font-size:10px; text-align:center; }
.portfolio-watch-close { position:fixed; left:18px; top:12px; padding:10px; color:#bdbdbd; background:transparent; border:0; font-size:20px; line-height:1; cursor:pointer; opacity:.7; }
.portfolio-watch-close:hover { opacity:1; }

/* ---- Resolver preview: the work's own short clip, not three stills ---- */
.portfolio-resolver-media { display:grid; grid-template-columns:1fr; gap:8px; height:100%; min-height:0; }
.portfolio-resolver-media.has-still { grid-template-columns:1.5fr 1fr; }
/* cropped to the slot so the preview can never spill over the wheel */
.portfolio-resolver-media video,
.portfolio-resolver-media img { width:100%; height:100%; min-height:0; object-fit:cover; opacity:.94; }
.portfolio-resolver-name { display:block; width:100%; padding:0; color:inherit; background:transparent; border:0; font:inherit; font-size:13px; text-align:right; cursor:pointer; border-bottom:1px dotted transparent; }
.portfolio-resolver-name:hover, .portfolio-resolver-name:focus-visible { border-bottom-color:currentColor; outline:none; }
.portfolio-resolver-caption { margin:5px 0; }
.portfolio-resolver-link { display:inline-block; margin-top:6px; border-bottom:1px dotted currentColor; pointer-events:auto; }

/* Clickable tag chips (portfolio bios), styled like the gallery tags. */
.portfolio-resolver-tags, .work-view-tags { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; margin:6px 0; pointer-events:auto; }
.work-view-tags { justify-content:flex-start; }
.portfolio-chip { padding:1px 5px; color:inherit; background:color-mix(in srgb, currentColor 8%, transparent); border:0; border-bottom:1px dotted currentColor; font:inherit; font-size:8px; letter-spacing:.04em; cursor:pointer; opacity:.7; }
.portfolio-chip:hover, .portfolio-chip:focus-visible, .portfolio-chip.is-active { opacity:1; background:color-mix(in srgb, currentColor 16%, transparent); }
.work-view-tags .portfolio-chip { font-size:10px; padding:2px 7px; }

/* Panel currently on show */
.portfolio-card.is-current { outline:1px solid currentColor; outline-offset:2px; }

/* ---- Expanded work view ---- */
.work-view { position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:clamp(16px,4vw,54px); visibility:hidden; opacity:0; background:color-mix(in srgb, var(--corp020-nav-bg,#000) 92%, transparent); backdrop-filter:blur(8px); pointer-events:none; transition:opacity .3s ease, visibility 0s linear .3s; }
.work-view.open { visibility:visible; opacity:1; pointer-events:auto; transition-delay:0s; }
.work-view-panel { width:min(1000px,100%); max-height:88vh; overflow:auto; color:var(--corp020-nav-ink,#bdbdbd); }
.work-view-title { margin:0 0 10px; font-size:17px; font-weight:400; }
.work-view-media { width:100%; aspect-ratio:16/9; margin-bottom:12px; background:#000; }
.work-view-media iframe, .work-view-media video, .work-view-media img { width:100%; height:100%; border:0; display:block; object-fit:contain; background:#000; }
.work-view-media .is-zoomable { cursor:zoom-in; }
.work-view-caption { margin:0 0 6px; font-size:11px; opacity:.85; }
.work-view-link { display:inline-block; margin:4px 0 10px; font-size:11px; border-bottom:1px dotted currentColor; }
.work-view-credits { font-size:10px; opacity:.8; }
.work-view-credits summary { cursor:pointer; opacity:.7; }
.work-view-credits summary:hover { opacity:1; }
.work-view-credits p { margin:6px 0 0; line-height:1.6; }
.work-view-close { position:fixed; left:18px; top:12px; padding:10px; color:inherit; background:transparent; border:0; font-size:20px; line-height:1; cursor:pointer; opacity:.7; }
.work-view-close:hover { opacity:1; }

/* Zoomed preview (bigger, still in-page) */
.work-zoom { position:fixed; inset:0; z-index:320; display:grid; place-items:center; padding:24px; visibility:hidden; opacity:0; background:rgba(0,0,0,.9); pointer-events:none; transition:opacity .3s ease, visibility 0s linear .3s; }
.work-zoom.open { visibility:visible; opacity:1; pointer-events:auto; transition-delay:0s; }
.work-zoom video, .work-zoom img { max-width:min(1400px,96vw); max-height:90vh; object-fit:contain; }
.work-zoom-close { position:fixed; left:18px; top:12px; padding:10px; color:#bdbdbd; background:transparent; border:0; font-size:20px; cursor:pointer; opacity:.7; }

/* ---- Index below the hero: 3 per row, video index then photo index ---- */
.portfolio-grid-section { position:relative; z-index:20; width:min(1200px, calc(100vw - 48px)); margin:0 auto; padding:56px 0 40px; color:var(--corp020-nav-ink,#bdbdbd); background:transparent; }
.portfolio-grid-section:last-of-type { padding-bottom:110px; }
.portfolio-grid-heading { margin:0 0 14px; font-size:12px; font-weight:400; opacity:.7; letter-spacing:.06em; }
.portfolio-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.portfolio-grid-item { display:block; padding:0; color:inherit; background:transparent; border:0; font:inherit; text-align:left; cursor:pointer; }
.portfolio-grid-media { display:block; aspect-ratio:16/10; overflow:hidden; background:#000; }
.portfolio-grid-media video, .portfolio-grid-media img { width:100%; height:100%; object-fit:cover; display:block; opacity:.9; transition:opacity .25s ease; }
.portfolio-grid-item:hover .portfolio-grid-media video, .portfolio-grid-item:hover .portfolio-grid-media img { opacity:1; }
.portfolio-grid-year { display:block; padding:4px 6px; font-size:9px; opacity:.55; }
@media (max-width:900px) { .portfolio-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px) { .portfolio-grid { grid-template-columns:1fr; } }

/* Work view: media left, information right; media keeps its own aspect ratio. */
.work-view-panel { width:min(1180px,100%); max-height:88vh; overflow:auto; color:var(--corp020-nav-ink,#bdbdbd); display:grid; grid-template-columns:minmax(0,1.6fr) minmax(230px,.9fr); gap:22px; align-items:start; }
.work-view-media { width:100%; margin:0; background:transparent; }
.work-view-media.is-ratio-free { aspect-ratio:auto; }
.work-view-media iframe { width:100%; aspect-ratio:16/9; border:0; display:block; }
.work-view-media video, .work-view-media img { width:auto; max-width:100%; height:auto; max-height:76vh; object-fit:contain; display:block; margin:0 auto; background:transparent; }
.work-view-side { min-width:0; }
.work-view-title { margin:0 0 8px; font-size:16px; font-weight:400; }
.work-view-year { margin:0 0 8px; font-size:10px; opacity:.6; }
/* credits: one role per line, with air between them, and 020baby's own roles bold */
.work-view-credits p { margin:6px 0 0; line-height:1.75; white-space:pre-line; }
.work-view-credits .is-mine { font-weight:900; opacity:1; letter-spacing:.02em; }
@media (max-width:800px) { .work-view-panel { grid-template-columns:1fr; } }

/* Panels: media cropped to the panel, brighter when focused. */
.portfolio-media video, .portfolio-media img { width:100%; height:100%; object-fit:cover; }
.portfolio-card .portfolio-media { opacity:.62; transition:opacity .25s ease; }
.portfolio-card.is-current .portfolio-media,
.portfolio-card:hover .portfolio-media { opacity:1; }
.portfolio-title { cursor:pointer; }
.portfolio-title:hover { text-decoration:underline; }

/* Index: year subheaders + a lightly asymmetric rhythm. */
.portfolio-grid { display:block; }
.portfolio-grid-year-heading { margin:22px 0 8px; font-size:11px; font-weight:400; opacity:.55; letter-spacing:.08em; }
.portfolio-grid-row { display:grid; grid-template-columns:repeat(6, 1fr); gap:14px; align-items:start; }
.portfolio-grid-item.is-plain { grid-column:span 2; }
.portfolio-grid-item.is-wide  { grid-column:span 3; }
.portfolio-grid-item.is-tall  { grid-column:span 2; }
.portfolio-grid-item.is-wide .portfolio-grid-media { aspect-ratio:16/9; }
.portfolio-grid-item.is-tall .portfolio-grid-media { aspect-ratio:1/1; }
@media (max-width:900px) {
  .portfolio-grid-row { grid-template-columns:repeat(4, 1fr); }
  .portfolio-grid-item.is-wide { grid-column:span 4; }
}
@media (max-width:560px) { .portfolio-grid-row { grid-template-columns:1fr; } .portfolio-grid-item { grid-column:span 1 !important; } }

/* Photo works: every still in a grid beside the text. */
.work-view-media.is-still-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; background:transparent; max-height:76vh; overflow:auto; }
.work-view-media.is-still-grid img { width:100%; height:auto; max-height:none; cursor:zoom-in; }

/* The old rules dim the media element itself (opacity .2 + grayscale/blur), so
   the focused panel has to clear those too — not just the wrapper. */
.portfolio-card.is-current img,
.portfolio-card.is-current video,
.portfolio-card:hover img,
.portfolio-card:hover video,
.portfolio-card:focus-visible img,
.portfolio-card:focus-visible video { opacity:1; filter:none; }
.portfolio-card:not(.is-current):not(:hover) img,
.portfolio-card:not(.is-current):not(:hover) video { opacity:.34; filter:grayscale(1) blur(1.2px); }

/* The resolver is pointer-events:none so the wheel stays draggable through it —
   the interactive bits have to opt back in. */
.portfolio-resolver-name,
.portfolio-resolver-media { pointer-events: auto; }
.portfolio-resolver-media > :first-child { cursor: pointer; }

/* Wheel preview media: clip + two vertical crops, slightly larger slot. */
.portfolio-resolver { height:32vh; max-height:340px; }
.portfolio-resolver-media { display:grid; grid-template-columns:1fr; gap:6px; }
.portfolio-resolver-media.has-still { grid-template-columns:2.15fr .52fr .34fr; }
.portfolio-resolver-still { width:100%; height:100%; object-fit:cover; }

/* Panel thumbnails: desaturated + softly blurred until focused. */
.portfolio-card:not(.is-current):not(:hover) img,
.portfolio-card:not(.is-current):not(:hover) video { opacity:.34; filter:grayscale(1) blur(2.4px); }

/* Full index preview: proper 16:9 for embeds and wide clips. */
.work-view-media iframe { width:100%; aspect-ratio:16/9; height:auto; }
.work-view-media.is-wide-media { display:grid; grid-template-columns:1fr; }
.work-view-media.is-wide-media video { width:100%; height:auto; max-height:72vh; background:transparent; }
/* a wide clip gets a thin vertical still beside it to fill the gap */
.work-view-media.has-side-still { grid-template-columns:1fr .3fr; gap:8px; }
.work-view-media.has-side-still .work-side-still { width:100%; height:100%; object-fit:cover; }

/* Photo-series viewer: arrows, counter, large-view link. */
.work-zoom [data-zoom-frame] { position:relative; display:grid; place-items:center; }
.work-zoom img { max-width:min(1600px,96vw); max-height:92vh; object-fit:contain; }
.work-zoom-nav { position:fixed; top:50%; z-index:2; padding:16px 18px; color:#ddd; background:transparent; border:0; font:300 30px/1 "Helvetica Neue",Helvetica,Arial,sans-serif; cursor:pointer; opacity:.5; transform:translateY(-50%); }
.work-zoom-nav:hover { opacity:1; }
.work-zoom-nav.is-prev { left:14px; }
.work-zoom-nav.is-next { right:14px; }
.work-zoom-count { position:fixed; left:50%; bottom:18px; color:#bdbdbd; font-size:10px; transform:translateX(-50%); }
.work-zoom-large { position:fixed; right:20px; top:14px; color:#ddd; font-size:11px; border-bottom:1px dotted currentColor; }

/* Active panel: blurred + mosaicked + choppy (canvas redraw at 8fps). */
.portfolio-mosaic { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  image-rendering:pixelated; filter:blur(2.6px) contrast(1.12) saturate(.6) brightness(.72); opacity:.85; pointer-events:none; }
.portfolio-card .portfolio-media { position:relative; }
.portfolio-card.is-current video { opacity:0; }
.work-view-large { display:inline-block; margin:2px 0 12px; font-size:11px; border-bottom:1px dotted currentColor; cursor:pointer; }
.work-view-large[hidden] { display:none; }