/* A shared mobile rhythm; panel geometry and image clipping stay in sync. */
@media (max-width: 800px) {
  :root {
    --page-gutter: clamp(1.25rem, 6vw, 2rem);
    --content-gutter: var(--page-gutter);
    --space-section: clamp(3.75rem, 10vw, 5rem);
    --space-heading: clamp(1.75rem, 5.5vw, 2.5rem);
    --space-content: clamp(1.5rem, 4.8vw, 2rem);
    --type-section-label: clamp(2.25rem, calc(1.5rem + 3.2vw), 2.75rem);
  }
  .c-section-heading { gap: .5rem 1rem; }
  .c-section-heading > .c-section-heading__title { font-size: var(--type-section-label); line-height: 1.15; }
  .c-section-heading__caption { font-size: .875rem; letter-spacing: .04em; }
  .c-arrow, .p-footer__link > span:first-child > .c-arrow { font-size: 1.125rem; line-height: 1.25; }
  .c-arrow--reveal { width: 1.25em; height: 1.25em; }
  .c-link, .c-text-link { gap: .875rem; font-size: .9375rem; }
  .is-menu-ready .l-header .c-wordmark, .p-mobile-menu__header .c-wordmark { font-size: min(1.75rem, 6.4vw); }
  .p-mobile-menu__sheet { --menu-gutter: var(--page-gutter); }
  .p-mobile-menu__nav { padding-block: clamp(1.25rem, 4dvh, 2.5rem); }
  .p-mobile-menu__nav > a { align-items: center; gap: 1rem; padding-block: clamp(.875rem, 2.2dvh, 1.25rem); }
  .p-mobile-menu__label { font-size: clamp(1.5rem, calc(1rem + 2.8vw), 2rem); line-height: 1.5; letter-spacing: .035em; }
  .p-mobile-menu__arrow { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; font-size: 1.125rem; }
  /* Selected vertical portrait layout. Intro 5.5rem + footer 4rem; the
     remaining height is divided equally, matching panelRects(). */
  .p-poster.p-panels { --band-height: calc((var(--stage-height) - 9.5rem) / 4); }
  .p-panels::before, .p-panels::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; background: var(--paper); pointer-events: none; opacity: var(--opening-label-opacity, 1); }
  .p-panels::before { top: 0; height: 5.5rem; }
  .p-panels::after { bottom: 0; height: 4rem; }
  .p-panels .p-panel { --panel-height: var(--band-height); --portrait-left: min(max(48%, 8rem), calc(100% - 3rem)); --band-anchor: 50%; left: 0; top: calc(5.5rem + var(--panel-order) * var(--band-height)); width: 100%; height: var(--band-height); border: 0; }
  .p-panels .p-person--gucci { --band-factor: 1.3; }
  .p-panels .p-person--momoyan { --band-factor: 1.25; --band-anchor: 55%; }
  .p-panels .p-person--nakamon { --band-factor: 1.34; --band-anchor: 58%; }
  .p-panels .p-person--tanaka { --band-factor: 1.85; }
  .p-panel .p-panel__art-window { inset: 0 0 0 var(--portrait-left); }
  .p-panel .p-panel__art { width: min(calc(var(--band-height) * var(--band-factor)), 100%); left: 50%; top: var(--band-anchor); transform: translate(-50%, calc(-1 * var(--band-anchor))); }
  .p-panels .p-panel:is(:hover, :focus-visible, :focus-within) .p-panel__art { transform: translate(-50%, calc(-1 * var(--band-anchor))); }
  .p-panel .p-panel__index { top: calc(50% - 2.4rem); left: var(--page-gutter); right: auto; justify-content: start; gap: .625rem; font-size: .6875rem; }
  .p-panel .p-panel__index > span { display: inline; font-size: .6875rem; letter-spacing: .06em; }
  .p-panel .p-panel__index > span::before { content: "—"; margin-right: .625rem; }
  .p-panel .p-panel__label { top: calc(50% - .875rem); left: var(--page-gutter); right: auto; bottom: auto; height: auto; padding: 0; border: 0; grid-template-columns: auto auto; justify-content: start; align-items: baseline; gap: .375rem .375rem; }
  .p-panel .p-panel__name { grid-column: 1 / 3; font-size: 1.375rem; line-height: 1.25; letter-spacing: .04em; }
  .p-panel .p-panel__detail { font-size: .75rem; line-height: 1.35; }
  .p-panel .p-panel__expand { display: inline; grid-column: 2; grid-row: 2; width: auto; height: auto; margin: 0; border: 0; border-radius: 0; font-size: .875rem; }
  .p-panels .p-panel::after { inset: 50% auto auto 0; width: 2px; height: 1.625rem; transform: translateY(-50%); }
  .p-hero__overlay { inset: 0 var(--page-gutter); display: block; }
  .p-hero__overlay .p-hero__description { position: absolute; top: 1.125rem; max-width: 18em; line-height: 1.75; }
  .p-hero__overlay .p-hero__actions { position: absolute; right: 0; bottom: .625rem; }
  .p-hero__overlay .p-hero__youtube { gap: .875rem; }
  .p-hero__scroll { left: var(--page-gutter); bottom: .25rem; transform: none; padding-inline: 0; gap: .75rem; font-size: .875rem; }
  .p-hero__scroll-arrow { width: .9375rem; height: 1.75rem; }
  .p-about__body { flex: 0 0 auto; gap: var(--space-content); margin-block: var(--space-heading); }
  .p-about__copy { font-size: min(3.25rem, 11.5cqw); line-height: 1.58; letter-spacing: .01em; }
  .p-about__prose { font-size: 1rem; line-height: 1.9; letter-spacing: .025em; }
  .p-about__footer { margin-top: auto; gap: 1rem 1.5rem; }
  .p-about__wordmark { font-size: 1.375rem; }
  .p-about__links { gap: 1.5rem; flex-wrap: wrap; }
  .p-about__links a { gap: .75rem; font-size: .9375rem; }
  .p-movie__intro, .p-journal__intro { gap: 1rem; margin-bottom: 1.75rem; }
  .p-movie__intro .c-jp-heading, .p-journal__intro .c-jp-heading { font-size: clamp(1.75rem, calc(1.15rem + 2.7vw), 2.375rem); line-height: 1.6; letter-spacing: .015em; }
  .p-movie .p-movie__play-icon { width: 3rem; height: 3rem; font-size: 1rem; }
  .p-movie .p-movie__play-label { font-size: .875rem; line-height: 1.6; }
  .p-movie .p-movie__figure figcaption { margin-top: 1.25rem; gap: .5rem 1.25rem; }
  .p-movie__figure figcaption strong { font-size: 1.0625rem; line-height: 1.75; }
  .p-movie__shuffle { font-size: .9375rem; gap: .625rem; }
  .p-movie__shuffle > span { font-size: 1.25rem; }
  .p-movie__links { margin-top: .75rem; gap: .25rem 1.25rem; }
  .p-movie__links a { gap: .75rem; font-size: .9375rem; }
  .p-movie__links .p-movie__archive { font-size: .875rem; }
  .p-journal__stories { gap: 1.5rem; container: journal-list / inline-size; }
  .p-story__link { grid-template-columns: clamp(4rem, 20vw, 6rem) minmax(0, 1fr); gap: 1rem; padding-block: .5rem; }
  .p-story h3 { font-size: 1.0625rem; line-height: 1.75; letter-spacing: .01em; }
  .p-story__meta { gap: .25rem .625rem; margin-bottom: .5rem; font-size: .8125rem; }
  .p-story__meta time { font-size: .75rem; }
  .p-story__read { align-items: center; gap: .75rem; margin-top: .625rem; font-size: .875rem; }
  .p-story--lead { margin-bottom: .5rem; }
  .p-story--lead .p-story__link { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .p-story--lead h3 { font-size: clamp(1.375rem, calc(1.05rem + 1.5vw), 1.75rem); line-height: 1.65; }
  .p-story--lead .p-story__meta { margin-bottom: .75rem; }
  .p-story--lead .p-story__read { margin-top: 1rem; font-size: .9375rem; }
  .p-journal__footer { margin-top: 2rem; }
  .l-footer { padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); }
  .p-footer__brand > p { font-size: 1rem; line-height: 1.85; }
  .p-footer__nav { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: 1.25rem 1.5rem; }
  .p-footer__link > span:first-child { font-size: 1.625rem; gap: .625rem; }
  .p-footer__link > span:last-child { font-size: .875rem; }
  .p-footer__legal { gap: .5rem 1.5rem; }
  .p-footer__legal > a, .p-footer__bottom .c-back-top { font-size: .875rem; }
  .p-footer__bottom .c-back-top { gap: .75rem; }
  .p-footer__bottom .c-back-top > span:last-child { font-size: 1.125rem; }
  .p-profile-sheet__inner { padding-inline: max(var(--page-gutter), env(safe-area-inset-left)) max(var(--page-gutter), env(safe-area-inset-right)); }
  .p-profile-sheet .p-profile__body { padding-block: 1.25rem; }
  .p-profile__facts { gap: 1rem; }
  .p-profile__facts > div { gap: .75rem; }
  .p-profile__facts dd { line-height: 1.8; }
  .p-profile__message { font-size: 1.0625rem; line-height: 1.85; margin-top: 1.5rem; }
  @container (max-width: 9rem) {
    .p-panel__name { font-size: 1rem; }
  }
  @container journal-list (max-width: 12rem) {
    .p-story__link { grid-template-columns: minmax(0, 1fr); }
  }
}