/* One cinematic gallery, with room for every world. */
.twp-navigation { position: relative; z-index: 18; width: min(1120px, 100%); min-width: 0; margin: 0 auto; display: flex; align-items: center; gap: 24px; }
.twp-navigation .twp-rail { display: flex; flex: 1; width: auto; min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #ffffff45 transparent; padding-bottom: 6px; }
.twp-navigation .twp-rail button { flex: 0 0 145px; padding-inline: 10px; }
.twp-navigation .twp-rail button:focus-visible { outline-offset: -3px; }
.twp-world-chooser { flex: 0 0 205px; display: grid; gap: 7px; color: #d3d1cc; font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.twp-world-chooser select { width: 100%; min-height: 40px; border: 1px solid #ffffff38; border-radius: 5px; background: #121619; color: #f8f4ec; padding: 8px 10px; font: 12px/1.3 system-ui, sans-serif; cursor: pointer; }
.twp-world-chooser select:focus-visible { outline: 3px solid #cde7ff; outline-offset: 3px; }
.twp-gallery:not([data-enhanced]) .twp-navigation { visibility: hidden; }
.twp-project-world .twp-frame-brand { max-width: 62%; }
.twp-project-world .twp-frame-live { font-size: clamp(7px, .6vw, 10px); }
.twp-project-world .twp-frame-label { letter-spacing: .09em; }
.twp-project-world .twp-glass { background: linear-gradient(180deg, #00000065, transparent 26% 55%, #000000b8), linear-gradient(110deg, #ffffff12, transparent 24% 80%, #ffffff0c); }
.twp-project-scene { opacity: .22; }
.twp-project-orbit { width: 65%; aspect-ratio: 1; left: 17%; top: -20%; border: 1px solid var(--twp-accent); border-radius: var(--world-round, 50%); transform: rotate(var(--world-angle, 22deg)); box-shadow: 0 0 45px #00000022, inset 0 0 55px #ffffff08; }
.twp-project-trace { inset: 20% 4%; border-block: 1px solid var(--twp-accent); transform: rotate(calc(var(--world-angle, 22deg) * -1)); }
.twp-project-sign { bottom: 9%; left: 4%; font: 9px/1.5 monospace; letter-spacing: .2em; color: var(--twp-accent); }
.theme-lumenwake-isles { --world-round: 45% 60% 35% 70%; --world-angle: -14deg; }
.theme-bloomward { --world-round: 48% 12% 48% 12%; --world-angle: 35deg; }
.theme-aegis-meridian { --world-round: 5%; --world-angle: 45deg; }
.theme-breakline-bastion { --world-round: 0%; --world-angle: -8deg; }
.theme-sideplot { --world-round: 50% 0 50% 0; --world-angle: 25deg; }
.theme-cradle-and-cargo { --world-round: 8%; --world-angle: 14deg; }
.theme-sahne { --world-round: 50%; --world-angle: -27deg; }
.theme-notebook-duo { --world-round: 2%; --world-angle: -4deg; }
.theme-april { --world-round: 40% 60% 70% 30%; --world-angle: 10deg; }
.theme-civicline { --world-round: 22%; --world-angle: -30deg; }
.theme-arcadia-relay { --world-round: 0%; --world-angle: 45deg; }
.theme-overtime-echoes { --world-round: 50% 50% 0 0; --world-angle: 0deg; }
.theme-counterproof { --world-round: 2%; --world-angle: 12deg; }
.theme-wishbound-bureau { --world-round: 50%; --world-angle: -18deg; }
.theme-last-signal { --world-round: 15%; --world-angle: -12deg; }
.theme-the-anomaly-office { --world-round: 0%; --world-angle: 7deg; }
.theme-darkline-heist { --world-round: 1%; --world-angle: -38deg; }
.theme-seven-days-in-charge { --world-round: 0%; --world-angle: 0deg; }
.theme-echobound { --world-round: 25%; --world-angle: 45deg; }
@media (max-width: 620px) {
  .twp-navigation { flex-direction: column; align-items: stretch; gap: 10px; }
  .twp-navigation .twp-rail { flex: none; width: 100%; gap: 0; }
  .twp-navigation .twp-rail button { flex-basis: 128px; min-height: 56px; }
  .twp-world-chooser { flex: none; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
  .twp-world-chooser select { min-height: 44px; }
  .twp-project-world .twp-frame-brand { max-width: 60%; font-size: 9px; letter-spacing: .08em; }
  .twp-project-world .twp-frame-live { max-width: 35%; text-align: right; font-size: 6px; letter-spacing: .07em; }
  .twp-project-world .twp-frame-label { font-size: 8px; letter-spacing: .05em; }
  .twp-info h1 { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) { .twp-navigation .twp-rail { scroll-behavior: auto; } }

.twp-art-placeholder { display: none; position: absolute; z-index: 2; inset: 0; align-items: center; justify-content: center; background: radial-gradient(ellipse at 55% 40%, color-mix(in srgb, var(--twp-accent) 30%, #10151c), #0c1118 85%); color: #f8f4ec; font-size: clamp(11px, 1.1vw, 16px); letter-spacing: .12em; }
.is-art-loading .twp-art-placeholder { display: flex; }
.is-art-loading .twp-frame img { opacity: 0; }

/* Portfolio orientation is immediate; the projects form a visible, browsable arc. */
.twp-gallery { grid-template-rows: auto auto minmax(290px, 1fr) auto auto auto; min-height: 820px; }
.twp-portfolio-intro { position: relative; z-index: 18; display: flex; align-items: end; justify-content: space-between; gap: 24px; width: min(1120px, 100%); margin: 0 auto; padding: 23px 0 10px; }
.twp-portfolio-eyebrow { margin: 0 0 7px; color: #d7cdbd; font: 10px/1.5 system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.twp-portfolio-intro h1 { margin: 0; font-size: clamp(26px, 3.1vw, 44px); line-height: 1.08; letter-spacing: -.045em; color: #fffaf1; }
.twp-portfolio-summary { margin: 0 0 2px; color: #e1dbd2; font-size: 13px; line-height: 1.65; }
.twp-stage { perspective: 1250px; min-height: 290px; }
.twp-stage::before, .twp-stage::after { opacity: .2; pointer-events: none; }
.twp-world { top: 0; bottom: 56px; width: min(68vw, 1040px); transform: translateX(calc(-50% + var(--offset) * 45vw)) translateZ(-160px) rotateY(calc(var(--offset) * -24deg)) scale(.88); }
.twp-world:not(.is-active):not(.is-near):not(.is-leaving) { visibility: hidden; will-change: auto; }
.twp-world.is-active { transform: translateX(-50%) translateZ(0) rotateY(0deg) scale(1); }
.twp-world.is-near { opacity: .72; filter: brightness(.78) saturate(.85); pointer-events: auto; }
.twp-world .twp-frame { width: 80%; max-height: 100%; }
.twp-world.is-near .twp-frame { outline-color: #cbb17b99; }
.twp-world .twp-exhibit-plaque { display: none; }
.twp-browse-cue { position: absolute; z-index: 14; bottom: 13px; left: 50%; transform: translateX(-50%); margin: 0; color: #e1dbd2; font: 10px/1.5 system-ui, sans-serif; letter-spacing: .1em; white-space: nowrap; }
.twp-browse-cue span { padding-left: 9px; font-size: 16px; }
.twp-arrow { top: auto; bottom: 0; transform: none; width: 185px; height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; border-radius: 8px; opacity: 1; background: #0b1119c9; border-color: #d7cdbd55; }
.twp-arrow-prev { left: max(0px, calc((100% - 1120px) / 2)); }
.twp-arrow-next { right: max(0px, calc((100% - 1120px) / 2)); }
.twp-arrow .twp-direction-copy { display: grid; min-width: 0; text-align: left; gap: 4px; }
.twp-arrow-next .twp-direction-copy { text-align: right; }
.twp-direction-copy small { font-size: 8px; line-height: 1; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: #c7bfb3; }
.twp-direction-copy b { font-size: 11px; line-height: 1.2; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.twp-info { padding-top: 17px; padding-bottom: 17px; }
.twp-info h2 { margin: 0; font-size: clamp(30px, 3.4vw, 49px); line-height: 1; letter-spacing: -.055em; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .twp-portfolio-intro { align-items: start; flex-direction: column; gap: 9px; padding-top: 17px; }
  .twp-portfolio-summary { font-size: 12px; line-height: 1.5; }
  .twp-portfolio-summary br { display: none; }
  .twp-gallery { height: auto; min-height: 100svh; grid-template-rows: auto auto minmax(250px, 33svh) auto auto auto; }
  .twp-stage { min-height: 250px; }
  .twp-world { top: 0; bottom: 54px; width: 84vw; transform: translateX(calc(-50% + var(--offset) * 65vw)) translateZ(-110px) rotateY(calc(var(--offset) * -25deg)) scale(.88); }
  .twp-world .twp-frame { width: 94%; }
  .twp-world.is-near { opacity: .74; pointer-events: auto; }
  .twp-arrow { width: 135px; min-height: 46px; height: 46px; padding: 7px 9px; gap: 8px; }
  .twp-arrow-prev { left: 14px; }
  .twp-arrow-next { right: 14px; }
  .twp-direction-copy b { font-size: 10px; }
  .twp-direction-copy small { font-size: 7px; }
  .twp-browse-cue { bottom: 58px; background: #080d148c; padding: 4px 9px; border-radius: 20px; font-size: 8px; letter-spacing: .05em; }
  .twp-browse-cue span { font-size: 12px; }
  .twp-info h2 { font-size: clamp(30px, 8.4vw, 40px); }
  .twp-info { padding-top: 15px; }
}
@media (max-width: 360px) {
  .twp-portfolio-intro h1 { font-size: 26px; }
  .twp-arrow { width: 124px; }
  .twp-arrow-prev { left: 8px; }
  .twp-arrow-next { right: 8px; }
}

/* Phone-first spacing: retain the artwork arc while keeping navigation reachable. */
@media (max-width: 760px) {
  .twp-gallery { padding-inline: max(18px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-right)); padding-bottom: max(18px, env(safe-area-inset-bottom)); grid-template-rows: auto auto auto auto auto auto; }
  .twp-header .publisher-nav { padding-block: 0; }
  .twp-header .publisher-nav a, .twp-logo { min-height: 44px; display: inline-flex; align-items: center; }
  .twp-portfolio-intro { padding-top: 12px; gap: 7px; }
  .twp-portfolio-eyebrow { margin-bottom: 5px; }
  .twp-stage { height: clamp(210px, 57vw, 260px); min-height: 0; }
  .twp-info { gap: 10px; padding-top: 12px; padding-bottom: 14px; }
  .twp-description { min-height: 0; margin-top: 8px; font-size: 13px; line-height: 1.5; }
  .twp-kicker { margin-bottom: 7px; }
  .twp-world-chooser select { font-size: 16px; }
}
/* Short landscape screens need a compact stage, not the desktop 820px minimum. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1100px) {
  .twp-gallery { height: auto; min-height: 100svh; grid-template-rows: auto auto auto auto auto auto; padding: max(10px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
  .twp-header { padding-bottom: 4px; gap: 6px 16px; flex-wrap: wrap; }
  .twp-header .publisher-nav { width: auto; margin-left: auto; border: 0; padding: 0; gap: 14px; }
  .twp-header .publisher-nav a { min-height: 44px; display: inline-flex; align-items: center; font-size: 12px; }
  .twp-gallery-title { min-width: 0; margin-left: 0; }
  .twp-gallery-title > span:first-child, .twp-auto-progress { display: none; }
  .twp-portfolio-intro { flex-direction: row; align-items: center; padding: 10px 0 7px; gap: 18px; }
  .twp-portfolio-intro h1 { font-size: 26px; }
  .twp-portfolio-eyebrow { margin-bottom: 4px; font-size: 8px; }
  .twp-portfolio-summary { max-width: 230px; font-size: 11px; }
  .twp-stage { height: 235px; min-height: 0; }
  .twp-world { width: min(64vw, 540px); bottom: 54px; transform: translateX(calc(-50% + var(--offset) * 44vw)) translateZ(-110px) rotateY(calc(var(--offset) * -25deg)) scale(.88); }
  .twp-world .twp-frame { width: min(80%, 300px); }
  .twp-arrow { top: auto; bottom: 0; height: 46px; }
  .twp-browse-cue { bottom: 10px; font-size: 9px; }
  .twp-info { padding-top: 12px; gap: 18px; }
}
@media (max-width: 620px) {
  .twp-gallery { align-content: start; }
  .twp-info { gap: 8px; }
  .twp-info-copy { display: contents; }
  .twp-info .twp-kicker { order: 0; margin: 0; }
  .twp-info h2 { order: 1; }
  .twp-info .twp-enter { order: 2; margin-top: 2px; }
  .twp-info .twp-description { order: 3; margin-top: 0; }
}