/* Homepage-only composition. Other destinations retain their existing styles. */
.portrait-hub {
  block-size: 100svh;
  block-size: 100dvh;
  min-block-size: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  place-items: stretch;
  padding: max(30px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  overflow: hidden;
  isolation: isolate;
}
.portrait-heading { text-align: center; padding-block: 0 8px; z-index: 1; }
.portrait-heading h1 {
  color: #ddd;
  font-size: clamp(1rem, 1.7vw, 1.4rem);
  font-weight: 400;
  letter-spacing: .16em;
  line-height: 1.5;
}
.portrait-audio { position: absolute; inset-inline-end: 0; bottom: calc(100% - var(--nav-gap) + 4px); }
.portrait-music { display: grid; justify-items: center; align-content: center; gap: 3px; min-inline-size: 48px; min-block-size: 48px; padding: 4px 0; color: #aaa; background: transparent; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.portrait-music-label { font: 9px/1.2 "Helvetica Neue", Arial, sans-serif; letter-spacing: .08em; }
.portrait-music[data-available="false"] { color: #888; }
.portrait-music .music-waves { display: none; }
.portrait-music[data-playing="true"] .music-waves { display: initial; }
.portrait-music[data-playing="true"] .music-muted { display: none; }
.portrait-music:focus-visible { outline: 1px solid #aaa; outline-offset: 1px; }
.portrait-music-status { position: absolute; inset: auto 0 100% auto; inline-size: max-content; max-inline-size: 180px; margin: 0 0 8px; padding: 8px 10px; color: #ccc; background: #0b0b0b; border: 1px solid #242424; font-size: .65rem; line-height: 1.4; white-space: nowrap; }
.portrait-music-status[hidden] { display: none; }
.portrait-stage { position: relative; min-inline-size: 0; min-block-size: 0; overflow: hidden; }
.portrait-surface { position: relative; inline-size: 100%; block-size: 100%; }
.portrait-hub[data-switching="true"] .portrait-surface { will-change: transform, opacity; }
#self-portrait {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 350ms ease;
}
.portrait-stage[data-state="ready"] #self-portrait { opacity: 1; }
#self-portrait[hidden] { display: none; }
#self-portrait:active { cursor: grabbing; }
#self-portrait:focus-visible { outline: 1px solid #777; outline-offset: -4px; }
.portrait-navigation { --nav-gap: 16px; position: relative; z-index: 1; inline-size: min(100%, 38rem); justify-self: center; padding-block-start: var(--nav-gap); }
.portal-navigation { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 12px; }
.portal-arrow { min-inline-size: 48px; min-block-size: 48px; display: grid; place-items: center; background: transparent; border: 0; color: #ccc; cursor: pointer; padding: 12px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.portal-enter { display: grid; place-items: center; min-block-size: 48px; padding: 10px 8px; color: #c6c6c6; font-size: clamp(.72rem, 2.6vw, .85rem); letter-spacing: .12em; line-height: 1.4; text-align: center; text-decoration: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.portal-enter[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.portal-arrow:focus-visible,.portal-enter:focus-visible { outline: 1px solid #aaa; outline-offset: 2px; }
@media (hover: hover) { .portal-arrow:hover,.portal-enter:hover { color: #fff; background: #080808; } }
.portal-arrow:active { transform: scale(.94); }
.portal-pending { position: absolute; inset: 0; display: grid; place-content: center; gap: 12px; text-align: center; pointer-events: none; }
.portal-pending[hidden] { display: none; }
.portal-pending p { margin: 0; font-size: .7rem; color: #8f8f8f; letter-spacing: .08em; }
.portal-pending .portal-pending-name { color: #ccc; font-size: .9rem; letter-spacing: .12em; }
.portrait-navigation .menu { flex-direction: row; inline-size: min(100%, 38rem); gap: clamp(0px, 2vw, 20px); justify-content: center; }
.portrait-navigation .menu-link {
  flex: 1 1 auto;
  min-block-size: 48px;
  padding: 12px clamp(6px, 1vw, 14px);
  color: #b7b7b7;
  font-size: clamp(.625rem, 1.9vw, .8rem);
  letter-spacing: .12em;
  white-space: nowrap;
}
.portrait-navigation .menu-link::before { display: none; }
.portrait-navigation .menu-link:hover { transform: none; }
.portrait-status { position: absolute; inset: 50% 10px auto; margin: 0; text-align: center; color: #999; font-size: .7rem; letter-spacing: .08em; pointer-events: none; }
.portrait-stage[data-state="ready"] .portrait-status,
.portrait-stage[data-state="fallback"] .portrait-status,
.portrait-stage[data-state="pending"] .portrait-status { display: none; }
.portrait-fallback { position: absolute; inset: 0; text-align: center; }
.portrait-fallback[hidden] { display: none; }
.portrait-fallback picture { display: block; block-size: calc(100% - 44px); }
.portrait-fallback img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; }
.portrait-retry { min-block-size: 44px; padding: 10px 18px; border: 0; background: transparent; color: #aaa; font: inherit; font-size: .7rem; cursor: pointer; }
.portrait-retry:focus-visible { outline: 1px solid #aaa; }
.portrait-sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 600px) {
  .portrait-hub { padding-block-start: max(24px, env(safe-area-inset-top)); padding-block-end: max(16px, env(safe-area-inset-bottom)); }
  .portrait-heading { padding-block-end: 8px; }
  .portrait-navigation { --nav-gap: 8px; }
  .portrait-heading h1 { font-size: .95rem; letter-spacing: .12em; }
  .portrait-stage { margin-inline: -14px; }
}
@media (max-height: 460px) {
  .portrait-hub { padding-block: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-bottom)); }
  .portrait-heading { padding-block: 0; }
  .portrait-heading h1 { font-size: .85rem; }
  .portrait-navigation { --nav-gap: 0px; }
  .portrait-navigation .menu-link { min-block-size: 44px; padding-block: 6px; }
}
@media (prefers-reduced-motion: reduce) { #self-portrait { transition: none; } }