@import url("portfolio-video-gallery.css?v=20261001-02");

:root {
  --reels-hero-max: var(--page-max);
}

.site-nav { position: absolute; z-index: 20; top: 0; right: 0; left: 0; display: flex; width: min(var(--reels-hero-max), calc(100vw - 2 * var(--page-gutter))); margin-inline: auto; padding: 25px 0; align-items: center; justify-content: space-between; gap: 24px; color: var(--text); }
.site-nav a { color: inherit; text-decoration: none; }
.site-nav__brand { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: .08em; }
.site-nav__links { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 30px); }
.site-nav__links a { position: relative; padding: 4px 0; color: var(--text-muted); font: 500 12px/1.2 var(--font-ui); letter-spacing: .01em; text-transform: none; transition: color var(--motion-fast) ease; }
.site-nav__links a::after { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: var(--accent); content: ''; transform: scaleX(0); transform-origin: left; transition: transform var(--motion-ui) var(--ease-out); }
.site-nav__links a:hover, .site-nav__links a:focus-visible, .site-nav__links a.is-active { color: var(--text); }
.site-nav__links a:hover::after, .site-nav__links a:focus-visible::after, .site-nav__links a.is-active::after { transform: scaleX(1); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.site-nav__brand, .site-nav__links a, .hero-action, .text-action { display: inline-flex; min-height: 44px; align-items: center; }

.reels-launch { display: none; }

/* Optional motion is a desktop pointer enhancement; the still image remains the baseline. */
.project-card__media picture { display: block; width: 100%; height: 100%; }
.project-card__hover-preview { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; object-fit: var(--thumb-fit); object-position: var(--focal-x) var(--focal-y); opacity: 0; transition: opacity 220ms ease; }
.project-card__play { z-index: 2; }
.project-card.is-hover-preview-ready .project-card__hover-preview { opacity: 1; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .project-card__hover-preview { display: none; }
}

/* The imported viewer uses an auto-sized dialog. Some landscape films can make
   that dialog a few pixels wider than its viewport cap, exposing a scrollbar. */
@media (min-width: 700px) {
  .project-viewer { width: min(94vw, 1600px); overflow: hidden; }
  .project-viewer__shell { max-height: calc(100dvh - 34px); max-width: 100%; overflow-x: hidden; overflow-y: auto; }
}
.project-viewer__media { position: relative; overflow: hidden; }
.project-viewer__media-frame { position: relative; display: grid; width: 100%; height: 100%; min-height: 0; place-items: center; background: #000; isolation: isolate; }
.project-viewer__media-frame > video, .project-viewer__media-frame > iframe, .project-viewer__cover { position: absolute; inset: 0; width: 100%; height: 100%; }
.project-viewer__media-frame > video, .project-viewer__media-frame > iframe { z-index: 1; opacity: 0; object-fit: contain; transition: opacity 220ms ease; }
.project-viewer__cover { z-index: 2; display: block; object-fit: contain; opacity: 1; pointer-events: none; transition: opacity 220ms ease, visibility 0s linear 220ms; }
.project-viewer__media-frame.is-ready > video, .project-viewer__media-frame.is-ready > iframe { opacity: 1; }
.project-viewer__media-frame.is-ready .project-viewer__cover { visibility: hidden; opacity: 0; }
.project-viewer__media-status { position: relative; z-index: 3; max-width: 30ch; margin: 0; color: var(--text-muted); font: 400 12px/1.35 var(--font-ui); text-align: center; pointer-events: none; }
.project-viewer__start, .project-viewer__retry { position: relative; z-index: 3; min-height: 44px; margin-top: 12px; padding: 0 12px; border: 0; border-bottom: 1px solid var(--accent); background: transparent; color: var(--text); cursor: pointer; font: 500 12px/1.2 var(--font-ui); }
.project-viewer__media-frame.is-ready .project-viewer__media-status { display: none; }

/* Keep the discipline choice beside the hero actions on wide screens. */
.portfolio-hero__content { width: min(var(--reels-hero-max), calc(100vw - 2 * var(--page-gutter))); transform-origin: top center; }
.portfolio-hero__stage { display: grid; width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.portfolio-hero__copy { max-width: none; }
.portfolio-hero__actions { display: grid; width: 100%; grid-template-columns: max-content minmax(600px, 700px); align-items: end; justify-content: space-between; gap: 28px 56px; }
.portfolio-hero__links { display: flex; flex-wrap: nowrap; gap: 16px 24px; white-space: nowrap; }
.portfolio-hero__actions .portfolio-hero__controls { width: min(100%, 760px); max-width: none; background: none; }
.portfolio-hero__actions .hero-control { min-width: 0; flex: 1 1 0; }
.portfolio-hero__actions .hero-control:last-child { padding-right: 0; }
.portfolio-hero__footer { justify-content: flex-start; }

/* A full-width contact sheet becomes less dense as the collection enters view. */
.collection { --collection-progress: 0; --collection-count-opacity-min: .85; padding-top: clamp(10px, 2vw, 24px); scroll-margin-top: 20px; }
.collection-reveal { width: 100%; transform: none; }
.collection h2 { font-size: clamp(34px, calc(34px + var(--collection-progress) * 14px), 48px); }
.collection-head__title { transform: none; }
.collection-head__title h2 { transform: none; }
.collection-count { opacity: calc(var(--collection-count-opacity-min) + var(--collection-progress) * (1 - var(--collection-count-opacity-min))); }
.filters { opacity: 1; }
.collection .filters { padding: 12px 0 6px; }
.collection .project-grid { padding-top: 8px; align-items: start; overflow-anchor: none; }
.collection .project-card, .collection .project-card__media, .collection .project-card__caption { transform-origin: top left; }
.collection-count, .work-footer { color: var(--text-muted); }
.eyebrow, .portfolio-hero__index, .hero-control__number, .filter__count, .collection-count, .work-footer { font-size: 11px; }
.hero-control__number, .filter__count { color: var(--text-muted); }
.project-viewer dt { color: var(--text-muted); font-size: 12px; }
.filter { display: inline-flex; min-height: 44px; align-items: center; padding-top: 0; padding-bottom: 8px; }

@media (min-width: 1200px) {
  .collection[data-density="7"] .project-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .collection[data-density="6"] .project-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .collection[data-density="5"] .project-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  /* Caption sizing follows the same eased scroll progress, not discrete column steps. */
  .collection .project-card__caption { padding-top: calc(8px + var(--collection-progress) * 6px); }
  .collection .project-card__topline { font-size: calc(11px + var(--collection-progress) * 1px); }
  .collection .project-card__title { margin-top: calc(4px + var(--collection-progress) * 2px); font-size: calc(14px + var(--collection-progress) * (clamp(16px, 1.15vw, 20px) - 14px)); line-height: 1.15; }
}

/* Card identities come from inline stable project ids; never fade the page root. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; }

@media (max-width: 1199px) {
  .collection h2 { font-size: clamp(34px, 3.6vw, 52px); }
}

@media (min-width: 1200px) {
  /* One desktop resting height lets WAAPI move the lower edge without fighting min-height. */
  .portfolio-hero { height: clamp(650px, 75svh, 800px); min-height: 0; }
  .portfolio-hero__content { transform: translateY(clamp(24px, 3vh, 34px)); }
  .portfolio-hero__actions .portfolio-hero__controls { transform: translateY(clamp(22px, 3vh, 34px)); }
}

@media (max-width: 1199px) and (min-width: 700px) {
  .portfolio-hero__actions { grid-template-columns: 1fr; gap: 22px; }
  .portfolio-hero__actions .portfolio-hero__controls { max-width: 700px; }
}

.reels-viewer { position: fixed; z-index: 100; inset: 0; width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; background: #000; color: var(--text); }
.reels-viewer::backdrop { background: #000; }
.reels-track { width: 100%; height: 100vh; height: 100dvh; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; scroll-behavior: auto; overscroll-behavior-y: none; scrollbar-width: none; }
.reels-track::-webkit-scrollbar { display: none; }
.reels-slide { position: relative; display: grid; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; place-items: center; scroll-snap-align: start; scroll-snap-stop: always; background: #000; }
.reels-slide__poster, .reels-slide__video-slot, .reels-slide__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.reels-slide__poster { object-fit: contain; opacity: .72; transition: opacity 200ms ease; }
.reels-slide__video { display: block; object-fit: contain; background: #000; opacity: 0; transition: opacity 200ms ease; }
.reels-slide.is-media-ready .reels-slide__poster { opacity: 0; }
.reels-slide.is-media-ready .reels-slide__video { opacity: 1; }
.reels-slide__shade { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .66), transparent 30%, transparent 55%, rgba(0, 0, 0, .86)); }
.reels-slide__play { position: relative; z-index: 2; display: grid; width: 64px; height: 64px; place-items: center; border: 1px solid rgba(232, 230, 224, .65); border-radius: 50%; background: rgba(0, 0, 0, .28); color: var(--text); cursor: pointer; font-size: 18px; opacity: 1; transition: background-color var(--motion-ui) ease, border-color var(--motion-ui) ease; }
.reels-slide__message { position: absolute; z-index: 3; top: 58%; right: 24px; left: 24px; margin: 14px auto 0; color: rgba(232, 230, 224, .82); font-size: 12px; text-align: center; }
.reels-selection-end { position: absolute; z-index: 3; right: max(20px, env(safe-area-inset-right)); bottom: max(128px, calc(env(safe-area-inset-bottom) + 110px)); left: max(20px, env(safe-area-inset-left)); display: grid; gap: 10px; justify-items: start; }
.reels-selection-end p { margin: 0; color: var(--text-muted); font: 400 12px/1.25 var(--font-mono); letter-spacing: .02em; }
.reels-selection-end button { min-height: 44px; padding: 0; border: 0; border-bottom: 1px solid var(--accent); background: transparent; color: var(--text); cursor: pointer; font: 500 12px/1.2 var(--font-ui); letter-spacing: .01em; text-transform: none; }
.reels-slide__copy { position: absolute; z-index: 2; right: max(20px, env(safe-area-inset-right)); bottom: max(68px, calc(env(safe-area-inset-bottom) + 52px)); left: max(20px, env(safe-area-inset-left)); max-width: 28rem; pointer-events: none; }
.reels-slide__copy p { margin: 0; color: var(--text); font: 400 12px/1.25 var(--font-mono); letter-spacing: .02em; }
.reels-slide__copy h2 { margin: 5px 0 0; font-family: var(--font-display); font-size: clamp(28px, 8vw, 42px); font-weight: 500; line-height: .96; letter-spacing: -.025em; }
.reels-viewer__top { position: absolute; z-index: 4; top: max(14px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); left: max(14px, env(safe-area-inset-left)); display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.reels-viewer__top > *, .reels-viewer__tools, .reels-progress, .reels-info-panel, .reels-hint { pointer-events: auto; }
.reels-icon-button { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(232, 230, 224, .42); border-radius: 50%; background: rgba(0, 0, 0, .28); color: var(--text); cursor: pointer; font-size: 21px; line-height: 1; }
.reels-icon-button svg, .reels-slide__play svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.reels-slide__play svg { width: 22px; height: 22px; }
.reels-viewer__status { margin: 0; color: var(--text); font: 400 12px/1.25 var(--font-mono); letter-spacing: .02em; text-transform: none; }
.reels-viewer__tools { position: absolute; z-index: 4; right: max(16px, env(safe-area-inset-right)); bottom: max(126px, calc(env(safe-area-inset-bottom) + 108px)); display: grid; gap: 12px; }
.reels-viewer__tools .reels-icon-button { width: 44px; height: 44px; font-size: 18px; }
.reels-icon-button:disabled { opacity: .35; cursor: default; }
.reels-icon-button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.reels-progress { position: absolute; z-index: 4; right: max(20px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); left: max(20px, env(safe-area-inset-left)); display: grid; gap: 7px; }
.reels-progress input { width: 100%; min-height: 44px; margin: 0; appearance: none; background: transparent; cursor: pointer; }
.reels-progress input::-webkit-slider-runnable-track { height: 3px; border-radius: 999px; background: rgba(232, 230, 224, .48); }
.reels-progress input::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4.5px; border: 1px solid var(--text); border-radius: 50%; appearance: none; background: var(--accent); }
.reels-progress input::-moz-range-track { height: 3px; border-radius: 999px; background: rgba(232, 230, 224, .48); }
.reels-progress input::-moz-range-thumb { width: 11px; height: 11px; border: 1px solid var(--text); border-radius: 50%; background: var(--accent); }
.reels-progress input:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.reels-progress p { margin: 0; color: rgba(232, 230, 224, .88); font: 400 12px/1.25 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: .02em; text-align: right; }
.reels-info-panel { position: absolute; z-index: 6; right: 0; bottom: 0; left: 0; max-height: min(70vh, 600px); padding: 36px max(24px, env(safe-area-inset-right)) max(34px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); overflow: auto; background: rgba(12, 12, 14, .98); border-top: 1px solid var(--line-strong); color: var(--text); transform: translateY(105%); transition: transform var(--motion-medium) var(--ease-out); }
.reels-info-panel.is-open { transform: translateY(0); }
.reels-info-panel__close { position: absolute; top: 13px; right: max(16px, env(safe-area-inset-right)); width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; font-size: 24px; }
.reels-info-panel h2 { max-width: 14ch; margin: 14px 0 18px; font-family: var(--font-display); font-size: clamp(35px, 11vw, 58px); font-weight: 500; line-height: .92; letter-spacing: -.025em; }
.reels-info-panel > p:not(.eyebrow) { max-width: 52ch; margin: 0; color: var(--text-muted); }
.reels-info-panel dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.reels-info-panel dt { color: var(--text-muted); font: 400 12px/1.25 var(--font-ui); letter-spacing: .01em; text-transform: none; }
.reels-info-panel dd { margin: 5px 0 0; font: 400 12px/1.35 var(--font-mono); }
.reels-hint { position: absolute; z-index: 5; bottom: max(104px, calc(env(safe-area-inset-bottom) + 86px)); left: 50%; margin: 0; padding: 9px 12px; border: 1px solid rgba(232, 230, 224, .35); background: rgba(0, 0, 0, .45); color: var(--text); font: 500 12px/1.2 var(--font-ui); letter-spacing: .01em; text-transform: none; transform: translateX(-50%); }
html.reels-open, html.reels-open body { overflow: hidden; }
.work-footer { display: flex; padding: 28px 0 max(28px, env(safe-area-inset-bottom)); align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); color: var(--text-muted); font: 400 11.5px/1.4 var(--font-ui); letter-spacing: .01em; text-transform: none; }
.work-footer p { margin: 0; }
.work-footer div { display: flex; gap: 22px; }
.work-footer a { display: inline-flex; min-height: 44px; align-items: center; color: var(--text); text-decoration: none; }
.work-footer a:hover, .work-footer a:focus-visible { color: var(--accent); }

@media (max-width: 699px) {
  .portfolio-hero__content { width: min(var(--reels-hero-max), calc(100vw - 40px)); }
  .portfolio-hero__actions { display: flex; align-items: flex-start; flex-direction: column; gap: 18px; }
  .portfolio-hero__links { flex-wrap: wrap; gap: 14px 20px; white-space: normal; }
  .portfolio-hero__actions .portfolio-hero__controls { width: 100%; }
  .collection { --collection-progress: 1; }
  .collection-head__title, .collection-head__title h2, .collection-count, .filters { transform: none; opacity: 1; }
  .site-nav { padding: max(18px, env(safe-area-inset-top)) 0 18px; }
  .site-nav__brand { font-size: 10px; letter-spacing: .12em; }
  .site-nav__links { gap: 14px; }
  .site-nav__links a { min-height: 44px; display: inline-flex; align-items: center; font-size: 12px; letter-spacing: .01em; }
  .reels-launch { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; margin: 22px 0 -8px; padding: 0 0 6px; border: 0; border-bottom: 1px solid var(--accent); background: transparent; color: var(--text); cursor: pointer; font: 500 12px/1.2 var(--font-ui); letter-spacing: .01em; text-transform: none; }
  .work-footer { align-items: flex-start; flex-direction: column; }
  .reels-slide__copy { bottom: max(120px, calc(env(safe-area-inset-bottom) + 104px)); }
  .reels-hint { bottom: max(188px, calc(env(safe-area-inset-bottom) + 170px)); }
  .reels-viewer__tools { bottom: max(172px, calc(env(safe-area-inset-bottom) + 154px)); }
}
@media (prefers-reduced-motion: reduce) {
  .reels-track { scroll-behavior: auto; }
  .reels-info-panel { transition: none; }
  .project-viewer__media-frame > video, .project-viewer__media-frame > iframe, .project-viewer__cover, .reels-slide__poster, .reels-slide__video { transition: none !important; }
  .collection { --collection-progress: 1; }
  .collection-head__title, .collection-head__title h2, .collection-count, .filters { transform: none !important; opacity: 1 !important; }
}

/* Keep the existing desktop composition, but let short viewports grow to their content. */
@media (min-width: 700px) and (max-height: 680px) {
  .site-nav { width: auto; margin-inline: max(var(--page-gutter), env(safe-area-inset-left)) max(var(--page-gutter), env(safe-area-inset-right)); padding-top: max(14px, env(safe-area-inset-top)); }
  .portfolio-hero, .portfolio-hero.is-about-open { height: auto; min-height: 100svh; overflow: visible; }
  .portfolio-hero__content { width: auto; height: auto; min-height: calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); margin-inline: max(var(--page-gutter), env(safe-area-inset-left)) max(var(--page-gutter), env(safe-area-inset-right)); padding-top: max(72px, calc(env(safe-area-inset-top) + 54px)); padding-bottom: max(32px, calc(env(safe-area-inset-bottom) + 24px)); transform: none; }
  .portfolio-hero__actions .portfolio-hero__controls { transform: none; }
  .hero-action, .hero-control { min-width: 44px; min-height: 44px; }
  .portfolio-hero.is-about-open .portfolio-hero__copy, .portfolio-hero__about, .portfolio-hero.is-about-open .portfolio-hero__about { transform: none; }
}

/* Keep all five 44 px Reel controls inside a short landscape viewport. */
@media (orientation: landscape) and (max-height: 600px) {
  .reels-viewer__tools { top: max(68px, calc(env(safe-area-inset-top) + 52px)); right: max(14px, env(safe-area-inset-right)); bottom: auto; grid-template-columns: repeat(3, 44px); grid-auto-rows: 44px; gap: 8px; }
  .reels-viewer__tools .reels-icon-button { width: 44px; height: 44px; }
  .reels-slide__copy { right: max(184px, calc(env(safe-area-inset-right) + 168px)); max-width: none; }
  .reels-hint { display: none !important; }
}

@media (max-width: 699px) {
  .portfolio-hero, .portfolio-hero.is-about-open { height: auto; min-height: 100svh; overflow: visible; }
  .portfolio-hero__content { width: auto; height: auto; min-height: calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); margin-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right)); padding-top: max(86px, calc(env(safe-area-inset-top) + 68px)); padding-bottom: max(32px, calc(env(safe-area-inset-bottom) + 24px)); }
  .hero-action, .hero-control { min-width: 44px; min-height: 44px; }
  .portfolio-hero__copy, .portfolio-hero__about { width: 100%; min-width: 0; max-width: 100%; }
  .portfolio-hero.is-about-open .portfolio-hero__copy, .portfolio-hero__about, .portfolio-hero.is-about-open .portfolio-hero__about { transform: none; }
  .filters { margin-inline: -8px; padding-inline: 8px; }
  .filter { padding: 0 0 8px; }
}

@media (max-width: 399px) {
  .portfolio-hero__actions .portfolio-hero__controls { flex-wrap: wrap; }
  .portfolio-hero__actions .hero-control { flex-basis: 30%; }
}