:root {
  --studio-column: 34%;
  --frame-line: #d9d5cb;
  --frame-paper: #f4f1e9;
  --frame-face: #fcfaf5;
  --frame-gutter: clamp(22px, 2.8vw, 48px);
}
html, body { background: #eae7df; }
body { min-width: 0; padding: 30px var(--frame-gutter) 50px; }
.site-shell {
  position: relative;
  grid-template-columns: minmax(0, 1fr) var(--studio-column);
  grid-template-rows: 52px minmax(0, 1fr) 56px;
  width: 100%;
  max-width: 1640px;
  height: 100%;
  max-height: 960px;
  margin: auto;
  overflow: hidden;
  border: 1px solid #cec9be;
  border-radius: 18px;
  background: var(--frame-paper);
  box-shadow: 0 12px 38px rgba(53, 45, 29, .045);
}
.topbar {
  position: relative;
  z-index: 4;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 0;
  padding: 0 26px;
  border-bottom: 1px solid var(--frame-line);
  background: var(--frame-paper);
  backdrop-filter: none;
}
.topbar-identity { display: flex; align-items: center; gap: 24px; min-width: 0; }
.back-link { min-height: 32px; font-size: 11px; font-weight: 500; color: #78766b; }
.back-link::before { color: #78766b; font-size: 15px; }
.portfolio-name { color: #44443a; font-size: 10px; font-weight: 600; letter-spacing: .13em; }
.topbar-note { color: #858174; font-size: 11px; letter-spacing: .06em; }
.project-panel {
  grid-column: 1;
  grid-row: 2;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  background: var(--frame-face);
}
.project-content { grid-template-rows: auto minmax(0, 1fr) auto; padding: 27px 28px 20px; gap: 19px; }
.project-heading { display: block; }
.eyebrow { margin: 0 0 11px; color: #9b7837; font-size: 10px; font-weight: 500; letter-spacing: .1em; line-height: 1.5; }
.eyebrow::before { display: none; }
h1 { font-size: clamp(30px, 2.7vw, 42px); font-weight: 600; line-height: 1.2; letter-spacing: -.04em; text-wrap: initial; }
.project-summary { max-width: 630px; margin-top: 12px; color: #7b7b70; font-size: 13px; line-height: 1.75; }
.project-details { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 27px; }
.project-tags { flex-wrap: wrap; justify-content: flex-start; gap: 0; max-width: none; padding: 0; }
.project-tag { min-height: 20px; padding: 0; border: 0; border-radius: 0; background: none; color: #8a877b; font-size: 10px; font-weight: 400; white-space: nowrap; letter-spacing: 0; }
.project-tag + .project-tag::before { content: '/'; margin: 0 9px; color: #c3bfb3; }
.original-links { flex: 0 0 auto; }
.original-link { padding: 5px 0; color: #555346; font-size: 12px; font-weight: 500; letter-spacing: 0; white-space: nowrap; background: none; }
.original-link:hover { color: #a67a26; }
.showcase-stage { border: 1px solid var(--frame-line); border-radius: 6px; background: #e9e9e2; box-shadow: none; }
.stage-screen { inset: 0 0 55px; background: #e9e9e2; }
.stage-image { padding: 10px; }
body[data-project="project-1"] .stage-image { object-fit: cover; object-position: center top; padding: 0; }
.stage-image.is-portrait { --slide-scale: 1; padding: 10px; }
.stage-footer { height: 55px; min-height: 0; padding: 7px 10px; gap: 12px; background: #f5f3ed; border-top: 1px solid var(--frame-line); backdrop-filter: none; }
.showcase-stage[data-single="true"] .stage-screen { bottom: 0; }
.showcase-stage[data-single="true"] .stage-footer { display: none; }
.filmstrip { gap: 6px; overflow-x: auto; scrollbar-width: none; }
.filmstrip::-webkit-scrollbar { display: none; }
.film-thumb { flex: 0 0 55px; height: 36px; border-radius: 3px; border-width: 1px; }
.film-thumb span { display: none; }
.film-thumb[aria-current="true"] { border-color: #a68a48; }
.transport-controls { flex: 0 0 auto; gap: 4px; }
.transport-button { width: 28px; height: 28px; border-color: transparent; background: transparent; font-size: 14px; font-weight: 400; }
.transport-button:hover { border-color: #d6ccb5; background: #fbfaf5; transform: none; }
.screen-count { margin-right: 6px; font-size: 8px; letter-spacing: .08em; font-weight: 500; }
.slide-progress { height: 2px; background: #bb9651; box-shadow: none; }

.studio-panel {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  border-left: 1px solid var(--frame-line);
  background: #dad5c9;
}
.studio-cover, #studio-frame { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border: 0; }
.studio-cover { object-fit: cover; object-position: center; pointer-events: none; }
#studio-frame { opacity: 0; }
.studio-panel[data-state="ready"] #studio-frame { opacity: 1; }
.studio-panel[data-state="ready"] .studio-cover { opacity: 0; visibility: hidden; }
.studio-panel[data-poster-active="true"] { z-index: 6; }
.studio-home { position: absolute; top: 16px; right: 16px; z-index: 2; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.52); border-radius: 50%; background: rgba(247,246,242,.7); color: #655d4c; cursor: pointer; opacity: .6; transition: opacity .2s ease, background .2s ease; }
.studio-home svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.studio-home:hover, .studio-home:focus-visible { opacity: 1; background: #f7f6f2; }
.studio-home:disabled { opacity: 0; pointer-events: none; }
.studio-hint { position: absolute; z-index: 2; left: 50%; bottom: 14px; margin: 0; padding: 7px 11px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: rgba(247,246,242,.78); color: #716956; font-size: 9px; line-height: 1.4; white-space: nowrap; transform: translateX(-50%); pointer-events: none; transition: opacity .4s ease; }
.studio-panel[data-interacted="true"] .studio-hint, .studio-panel[data-poster-active="true"] .studio-hint { opacity: 0; }
.showcase-footer { grid-column: 1 / -1; grid-row: 3; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 26px; border-top: 1px solid var(--frame-line); background: var(--frame-paper); }
.project-navigation { display: flex; align-items: center; gap: 22px; min-width: 0; }
.navigation-label { font-size: 10px; color: #8c887a; white-space: nowrap; }
.project-nav { gap: 14px; width: auto; overflow: visible; }
.project-nav-button { width: 30px; height: 30px; flex: 0 0 30px; font-size: 10px; font-weight: 500; border-radius: 4px; color: #9c978b; letter-spacing: .04em; }
.project-nav-button[aria-current="page"] { background: #e7dfcd; color: #8a672d; }
.project-nav-button::after { top: auto; bottom: calc(100% + 10px); }
.project-counter { min-height: 0; color: #9c978b; font-size: 10px; font-weight: 400; letter-spacing: .04em; }
.project-counter strong { color: #857650; font-size: 12px; font-weight: 500; }
.project-sweep { display: none; }
.icp-filing { position: fixed; inset: auto 0 15px; height: 20px; display: flex; align-items: center; justify-content: center; width: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; transform: none; backdrop-filter: none; font-size: 9px; }
.icp-filing a { color: #969284; }
.feedback-launcher { right: var(--frame-gutter); bottom: 14px; min-width: 0; min-height: 22px; padding: 0 8px; border-radius: 5px; background: transparent; box-shadow: none; color: #969284; font-size: 10px; font-weight: 400; }
.feedback-launcher:hover, .feedback-launcher:focus-visible { background: #e1ddd3; box-shadow: none; transform: none; }

@media (min-width: 1001px) and (max-height: 740px) {
  body { padding-top: 22px; padding-bottom: 42px; }
  .site-shell { grid-template-rows: 47px minmax(0,1fr) 49px; }
  .project-content { padding: 22px 24px 17px; gap: 15px; }
  h1 { font-size: 30px; }
  .eyebrow { margin-bottom: 8px; }
  .project-summary { margin-top: 10px; font-size: 12px; }
  .icp-filing { bottom: 10px; }
  .feedback-launcher { bottom: 9px; }
}
@media (max-width: 1000px) {
  html, body { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; }
  body { position: relative; padding: 16px 16px 48px; }
  .site-shell { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto auto; height: auto; min-height: 0; max-height: none; border-radius: 13px; }
  .topbar { grid-row: 1; min-height: 48px; padding: 6px 18px; }
  .topbar-identity { gap: 16px; }
  .portfolio-name { font-size: 9px; letter-spacing: .07em; }
  .topbar-note { display: none; }
  .back-link { font-size: 10px; }
  .project-panel { grid-row: 2; min-height: 0; height: auto; display: block; }
  .project-content { padding: 23px 18px 18px; grid-template-rows: auto auto auto; gap: 18px; }
  h1 { font-size: clamp(29px, 5vw, 36px); }
  .project-summary { margin-top: 10px; font-size: 13px; }
  .eyebrow { font-size: 9px; margin-bottom: 9px; }
  .showcase-stage { aspect-ratio: 4/3; border-radius: 5px; }
  .showcase-stage[data-layout="portrait"] { aspect-ratio: 3/4; max-height: 72svh; }
  .showcase-stage[data-layout="square"] { aspect-ratio: 1; }
  .stage-screen { bottom: 55px; }
  .stage-footer { padding: 7px 8px; gap: 8px; }
  .film-thumb { flex-basis: 44px; height: 33px; }
  .screen-count { display: none; }
  #play-toggle { display: none; }
  .transport-button { width: 32px; height: 32px; }
  .project-details { align-items: flex-start; flex-wrap: wrap; gap: 10px; }
  .project-tag { font-size: 9px; min-height: 20px; }
  .original-link { min-height: 0; padding: 0; font-size: 11px; }
  .showcase-footer { grid-row: 3; min-height: 52px; padding: 8px 18px; }
  .project-navigation { gap: 10px; }
  .navigation-label { display: none; }
  .project-nav { gap: 8px; }
  .project-nav-button { width: 32px; height: 32px; flex-basis: 32px; }
  .studio-panel { grid-column: 1; grid-row: 4; height: min(135vw, 670px); border-left: 0; border-top: 1px solid var(--frame-line); }
  .studio-home { top: 16px; right: 16px; }
  .icp-filing { position: absolute; bottom: 13px; font-size: 9px; }
  .feedback-launcher { position: absolute; right: 16px; bottom: 12px; font-size: 9px; }
}
@media (max-width: 370px) {
  body { padding-left: 10px; padding-right: 10px; }
  .topbar, .showcase-footer { padding-left: 14px; padding-right: 14px; }
  .project-content { padding-left: 14px; padding-right: 14px; }
  .project-nav { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { .studio-hint { transition: none; } }