/* V6: quieter controls and three film strands at a glance. */
.theme-control { display: flex; align-items: center; }
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.theme-toggle:hover { background: var(--wash); border-color: var(--muted); }
.theme-toggle svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle svg[hidden], .theme-toggle svg.is-hidden { display: none !important; }

/* The only full player remains in its own 16:9 frame. */
.work-visual.has-video .showreel-video { object-fit: contain; background: #101112; }
.ambient-video { display: block; width: 100%; object-fit: contain; background: #101112; }

/* Exhibition title artwork is allowed its complete original frame. */
.work-visual.title-cover { background: #000; }
.work-visual.title-cover .work-photo { object-fit: contain; object-position: 50% 50%; }
.work-visual.title-cover .media-shade, .work-visual.title-cover .visual-index { display: none; }

/* A solid iris uses the opposite tone of the surrounding page. */
#iris-body { fill: var(--ink); }
.iris-cover .iris-blade-line { stroke: var(--paper); opacity: .72; stroke-width: 1.4; }
.iris-cover .iris-rim { stroke: var(--paper); opacity: .65; stroke-width: 1; }

#story-film .story-body { padding-top: 36px; padding-bottom: 32px; }
#story-film .story-body > .eyebrow { margin-bottom: 18px; }
#story-film .story-body > h2 { font-size: clamp(36px, 4.4vw, 60px); line-height: .98; max-width: 850px; }
#story-film .story-lead { max-width: 680px; margin-top: 20px; font-size: 18px; line-height: 1.45; }
#story-film .film-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 24px; margin-top: 31px; min-width: 0; max-width: 100%; }
#story-film .film-grid .film-card { min-width: 0; padding: 0; border: 0; }
#story-film .film-grid .film-card + .film-card { padding-top: 0; border-top: 0; }
#story-film .film-grid .story-video { margin-top: 0; }
#story-film .film-grid video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
#story-film .film-grid figcaption { padding-top: 10px; font-size: 9px; letter-spacing: .055em; line-height: 1.4; }
#story-film .film-grid h3 { margin-top: 15px; font-size: 21px; line-height: 1.17; font-weight: 500; }
#story-film .film-grid p { margin-top: 10px; font-size: 15px; line-height: 1.45; }
#story-film .story-sequence { margin-top: 32px; padding-top: 25px; }
#story-film .inline-story-bottom { padding-top: 22px; padding-bottom: 35px; }

@media (min-width: 701px) and (max-width: 1000px) {
  #story-film .film-grid { gap: 18px; }
  #story-film .film-grid h3 { font-size: 19px; }
  #story-film .film-grid p { font-size: 14px; }
  #story-film .film-grid figcaption { font-size: 8px; }
}
@media (max-width: 700px) {
  .theme-control { margin-left: 0; }
  .theme-toggle svg { width: 22px; height: 22px; }
  #story-film .story-body { padding-top: 29px; padding-bottom: 28px; }
  #story-film .story-body > h2 { font-size: clamp(36px, 10.4vw, 55px); }
  #story-film .story-lead { font-size: 17px; margin-top: 18px; }
  #story-film .film-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 86%);
    gap: 20px;
    margin-top: 27px;
    overflow-x: auto;
    padding-bottom: 17px;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--muted) var(--wash);
  }
  #story-film .film-card { scroll-snap-align: start; }
  #story-film .film-grid h3 { font-size: 21px; }
  #story-film .film-grid p { font-size: 15px; }
  #story-film .story-sequence { margin-top: 26px; padding-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle { transition: none; }
  #story-film .film-grid { scroll-behavior: auto; }
}

/* The document already reserves the header through scroll-padding. */
.story-inline { scroll-margin-top: 0; }
#story-film .inline-story-top { min-height: 76px; padding-top: 16px; padding-bottom: 16px; }
#story-film .story-body { padding-top: 28px; }
#story-film .film-grid { margin-top: 24px; }

.work-panel.has-video .media-shade, .work-panel.has-video .visual-index { display: none; }
#story-film .film-grid:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

/* V7: language and biography join the existing shutter sequence. */
.theme-control { gap: 8px; }
.language-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  padding: 0; border: 1px solid var(--rule); border-radius: 50%;
  background: transparent; color: var(--ink); cursor: pointer;
  font: 500 12px/1 Body, Arial, sans-serif; letter-spacing: .025em;
  transition: background .2s, color .2s;
}
.language-toggle:hover { background: var(--ink); color: var(--paper); }
.language-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.portal-stage { flex-direction: column; gap: 20px; }
.portal-media.real-portal { flex: 0 0 auto; }
.portal-reveal { position: relative; z-index: 3; flex: 0 0 auto; width: min(100%, 680px); text-align: center; }
.bio-inner p { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; text-wrap: pretty; }
.bio-inner strong { font-weight: 600; }
.portal-reveal .approach-reveal-actions { padding: 22px 0 0; }
.motion .portal-stage {
  padding: 24px var(--gutter) calc(24px + 80px * (1 - var(--bio-progress, 0)));
  gap: calc(20px * var(--bio-progress, 0));
}
.motion .portal-media.real-portal {
  width: min(74vw, 72svh, 800px, calc(100svh - var(--header-height) - 128px + 52px * var(--bio-progress, 0) - var(--bio-height, 250px) * var(--bio-progress, 0)));
  max-height: none;
}
.motion .portal-reveal {
  max-height: calc(var(--bio-height, 250px) * var(--bio-progress, 0));
  overflow: clip; opacity: var(--bio-progress, 0);
  transform: translateY(calc(18px * (1 - var(--bio-progress, 0))));
}
.motion .portal-caption { opacity: var(--caption-opacity, 1); }
:root:not(.motion) .portal-stage { padding: 32px var(--gutter) 54px; }
:root:not(.js) .language-toggle, :root:not(.js) .theme-control { display: none; }
@media (max-width: 700px) {
  .portal-reveal { width: 100%; }
  .bio-inner p { font-size: 17px; line-height: 1.45; }
  .motion .portal-media.real-portal { width: min(calc(100vw - 2 * var(--gutter)), calc(100svh - var(--header-height) - 128px + 52px * var(--bio-progress, 0) - var(--bio-height, 250px) * var(--bio-progress, 0))); }
}
@media (max-width: 360px) {
  .site-header { column-gap: 12px; }
  .brand { font-size: 24px; }
  .bio-inner p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce), (max-height: 600px) {
  .motion .portal-reveal { max-height: none; overflow: visible; opacity: 1; transform: none; }
  .motion .portal-stage { padding: 32px var(--gutter) 54px; gap: 20px; }
  .motion .portal-media.real-portal { width: min(100%, 650px); }
  .motion .portal-caption { display: none; }
}

.portal-reveal .bio-reveal { padding: 0; }
.bio-inner .bio-intro { margin-bottom: 8px; }
.bio-inner .bio-intro strong { font: 800 28px/1.1 Display, Arial, sans-serif; }
/* The portrait changes size intentionally; browser anchoring must not move the reader. */
#sguardo { overflow-anchor: none; }