/* One layout model: foreground media contain; only the backdrop covers. */
.project-overlay { position:fixed; inset:0; z-index:10; display:none; overflow:auto; padding:50px 140px; background:rgba(0,0,0,.88); backdrop-filter:blur(14px); }
.project-overlay.is-open { display:block; }
.project-panel { --gallery-gap:16px; position:relative; width:min(1370px,calc(50vh * 1.777778 + 325px),100%); margin:0 auto; padding:0 0 32px; }
.project-panel:focus { outline:none; }
.project-top { display:grid; grid-template-columns:minmax(0,1fr) clamp(200px,22vw,300px); gap:25px; align-items:start; }
.project-primary { min-width:0; }
.main-stage { position:relative; isolation:isolate; display:flex; justify-content:center; width:100%; height:var(--main-height); overflow:hidden; }
.stage-backdrop { position:absolute; z-index:-1; inset:-30px; width:calc(100% + 60px); height:calc(100% + 60px); object-fit:cover; filter:blur(28px) brightness(.55); opacity:.55; pointer-events:none; }
.main-video-wrap { position:relative; flex:none; width:var(--main-width); height:var(--main-height); margin:0; }
.modern-controls input[data-progress] { min-width:0; width:0; }
.main-video-wrap .project-main, .main-video-wrap .project-poster { position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; max-height:none; object-fit:contain; transform:none; background:transparent; }
.project-main { opacity:0; }
.project-poster { z-index:1; pointer-events:none; transition:none; }
.project-media.has-video-frame .project-main { opacity:1; }
.project-media.has-video-frame .project-poster { opacity:0; }
.project-info-frame { min-width:0; position:relative; }
.credits-scroll-track { display:none; position:absolute; top:10px; bottom:10px; right:7px; width:6px; background:rgba(255,255,255,.18); border-radius:4px; pointer-events:none; }
.credits-scroll-thumb { display:block; width:100%; border-radius:4px; background:rgba(255,255,255,.85); }
.project-info { height:var(--main-height,auto); min-height:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#555 transparent; --fade-top:0px; --fade-bottom:0px; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fade-top),#000 calc(100% - var(--fade-bottom)),transparent 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fade-top),#000 calc(100% - var(--fade-bottom)),transparent 100%); }
.project-info::-webkit-scrollbar { width:5px; }
.project-info::-webkit-scrollbar-thumb { background:#555; border-radius:9px; }
.project-info h1 { font-size:28px; letter-spacing:-.06em; font-weight:500; margin:0 0 18px; padding:0 0 18px; border-bottom:1px solid #555; }
.project-info dl { margin:0; }
.project-info dl:empty { display:none; }
.project-info dt { font-size:10px; letter-spacing:.1em; color:#909090; text-transform:uppercase; margin-top:16px; }
.project-info dt:first-child { margin-top:0; }
.project-info dd { font-size:13px; line-height:1.35; margin:4px 0 0; }
.project-description { font-size:13px; line-height:1.5; margin-top:25px; white-space:pre-line; }
.project-info dl:empty + .project-description { margin-top:0; }
.project-nav { height:0; }
.project-mobile-title { display:none; }
.project-back, .project-share { position:absolute; top:0; display:flex; align-items:center; justify-content:center; width:42px; height:42px; padding:0; border:1px solid #555; border-radius:22px; color:#fff; background:rgba(0,0,0,.65); cursor:pointer; white-space:nowrap; transition:width .18s ease; }
.project-back { right:calc(100% + 18px); }
.project-share { left:calc(100% + 18px); }
.project-back svg, .project-share svg { width:21px; height:21px; flex:0 0 21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.nav-label { max-width:0; opacity:0; overflow:hidden; font-size:12px; transition:max-width .18s,opacity .18s; }
.project-back .nav-label { order:-1; }
@media (min-width:901px) and (hover:hover) {
  .project-back:hover, .project-back:focus-visible { width:94px; }
  .project-share:hover, .project-share:focus-visible { width:120px; }
  .project-back:hover .nav-label, .project-back:focus-visible .nav-label { max-width:55px; opacity:1; margin-right:7px; }
  .project-share:hover .nav-label, .project-share:focus-visible .nav-label { max-width:90px; opacity:1; margin-left:7px; }
}
.share-feedback { position:absolute; z-index:5; left:calc(100% + 18px); top:50px; width:max-content; max-width:132px; padding:8px 10px; background:#111; border:1px solid #555; border-radius:4px; font-size:12px; line-height:1.4; opacity:0; pointer-events:none; transition:opacity .2s ease; }
.share-feedback.is-visible { opacity:1; }
.share-feedback.is-success::before { content:'✓'; margin-right:6px; font-weight:bold; }
.project-share.is-confirmed { animation:share-confirm .38s ease-out; }
@keyframes share-confirm { 0%,35% { background:#fff; color:#111; border-color:#fff; } 100% { background:rgba(0,0,0,.65); color:#fff; } }
.breakdowns { display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:var(--gallery-gap); width:100%; margin:clamp(24px,4.7vh,72px) 0 0; padding:0; background:transparent; }
.breakdowns.is-sparse { width:var(--primary-width); }
.breakdown-media { position:relative; flex:0 0 var(--asset-column); width:var(--asset-column); height:var(--asset-height); background:transparent; }
.breakdown-media img, .breakdown-media video { position:absolute; left:50%; top:0; display:block; width:var(--asset-width); height:var(--asset-height); transform:translateX(-50%); object-fit:contain; background:transparent; }
.breakdown-media video { opacity:1; }
.breakdown-media img { z-index:1; pointer-events:none; transition:opacity .15s; }
.breakdown-media.is-playing video { opacity:1; }
.breakdown-media.is-playing img { opacity:0; }
.media-wait { position:absolute; z-index:2; inset:0; display:grid; place-items:center; font-size:12px; color:#fff; text-shadow:0 1px 4px black; pointer-events:none; opacity:0; }
.project-media.is-waiting .media-wait { opacity:1; }
.project-media.is-playing .media-wait, .project-media.has-error .media-wait { opacity:0; }
.media-retry, .asset-retry { position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%,-50%); display:none; max-width:95%; border:1px solid #777; background:#111; color:white; padding:9px 12px; cursor:pointer; }
.project-media.has-error .media-retry, .project-media.is-stalled .media-retry, .breakdown-media.has-error .asset-retry, .breakdown-media.is-stalled .asset-retry, .breakdown-media.needs-play .asset-retry { display:block; }
.breakdown-loading { display:none; position:absolute; z-index:2; left:50%; top:50%; width:28px; height:28px; margin:-14px; border:2px solid #ffffff48; border-top-color:white; border-radius:50%; animation:breakdown-spin .8s linear infinite; pointer-events:none; }
.breakdown-media.is-waiting .breakdown-loading { display:block; }
.breakdown-media.is-playing .breakdown-loading, .breakdown-media.has-error .breakdown-loading { display:none; }
@keyframes breakdown-spin { to { transform:rotate(360deg); } }
.no-main { aspect-ratio:16/9; display:grid; place-items:center; color:#777; }
.main-video-wrap:fullscreen { width:100vw!important; height:100vh!important; background:black; }
@media (max-width:900px) {
  .project-overlay { padding:16px 14px 24px; }
  .project-panel { width:100%; padding:0; }
  .project-nav { position:relative; display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; gap:16px; height:auto; margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid #555; }
  .share-feedback { left:auto; right:0; top:calc(100% - 12px); max-width:min(260px,90vw); }
  .project-back, .project-share { position:relative; inset:auto; width:44px; height:44px; }
  .project-mobile-title { display:block; margin:0; font-size:23px; font-weight:500; line-height:1.15; letter-spacing:-.045em; overflow-wrap:anywhere; }
  .nav-label { display:none; }
  .project-top { display:flex; flex-direction:column; gap:24px; }
  .project-primary { width:100%; }
  .project-info { width:100%; height:auto; max-height:clamp(130px,23.4vh,208px); max-height:clamp(130px,23.4svh,208px); overflow-y:auto; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; }
  .project-info-frame { width:100%; border:1px solid rgba(255,255,255,.65); border-radius:4px; overflow:hidden; }
  .project-info { box-sizing:border-box; padding:12px; }
  .project-info h1 { display:none; }
  .breakdowns.is-sparse { width:100%; }
  .breakdowns { margin-top:24px; }
}
@media (max-width:900px), (hover:none) and (pointer:coarse) {
  .project-info { scrollbar-width:none; padding-right:26px; }
  .project-info::-webkit-scrollbar { display:none; }
  .project-info-frame.has-scroll .credits-scroll-track { display:block; }
}
@media (prefers-reduced-motion:reduce) {
  .share-feedback { transition:none; }
  .project-share.is-confirmed { animation:none; }
  .breakdown-loading { display:none; }
  .project-main, .breakdown-media video, .project-back, .project-share, .nav-label { transition:none; }
}
/* Touch tablets in landscape can retain the desktop columns, but still benefit
   from the requested credit-box outline. No breakpoint/column count changes. */
@media (min-width:901px) and (hover:none) and (pointer:coarse) {
  .project-info-frame { border:1px solid rgba(255,255,255,.65); border-radius:4px; overflow:hidden; }
  .project-info { box-sizing:border-box; padding:12px 26px 12px 12px; }
}