/* Inner pages (Treatments, Journey): header, hero, systems, viewer, close. */
body.inner { background: var(--bg); }
.inner-head { position: absolute; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; padding: 40px 48px; }
.inner-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); font-size: 1.05rem; font-weight: 300; letter-spacing: .34em; text-transform: uppercase; }
.inner-logo svg { width: 28px; height: auto; transition: transform .7s var(--ease-out); }
.inner-logo:hover svg { transform: rotate(-8deg) scale(1.06); }
.inner-head .nav-pill { opacity: 1; box-shadow: 0 1px 0 rgba(var(--line-rgb), .06); border: 1px solid rgba(var(--line-rgb), .08); }
.inner-head .nav-link, .inner-head .nav-book, .inner-head .nav-world { opacity: 1; transform: none; }
.inner-world i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .5); animation: iw-pulse 2.4s ease-in-out infinite; }
.inner-world span[aria-hidden] { transition: transform .5s var(--ease-out); }
.inner-world:hover span[aria-hidden] { transform: translateX(4px); }
@keyframes iw-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .45); } 50% { box-shadow: 0 0 0 5px rgba(var(--accent-rgb), 0); } }

.pfield { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.pfield canvas { display: block; }
main, .footer { position: relative; z-index: 2; }

.inner-hero { padding: 170px 24px 40px; text-align: center; max-width: 900px; margin: 0 auto; }
.ih-eyebrow { margin: 0 0 18px; font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; color: var(--label); }
.inner-hero h1 { margin: 0; font-size: 3.8rem; font-weight: 200; letter-spacing: -0.03em; line-height: 1.1; color: var(--heading); }
.ih-sub { margin: 22px auto 0; max-width: 720px; font-size: 1.05rem; line-height: 1.6; color: var(--muted); }
.ih-line { display: block; width: 60px; height: 2px; margin: 28px auto 0; background: linear-gradient(90deg, var(--accent), var(--accent-end)); transform-origin: center; }

.world[hidden] { display: none; }
.sys { max-width: 1140px; margin: 0 auto; padding: 90px 24px 40px; }
.sys-meta { display: flex; align-items: center; gap: 14px; font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; }
.sys-n { color: var(--label); font-variant-numeric: tabular-nums; }
.sys-rule { width: 28px; height: 1px; background: rgba(var(--line-rgb), .25); }
.sys-cat { color: var(--accent); font-weight: 500; }
.sys-head { display: flex; align-items: center; gap: 26px; margin-top: 22px; }
.sys-icon { width: 64px; height: 64px; color: var(--accent); flex-shrink: 0; display: inline-flex; }
.sys-icon svg { width: 100%; height: 100%; }
.sys-head h2 { margin: 0; font-size: 3rem; font-weight: 200; letter-spacing: -0.03em; line-height: 1.1; color: var(--heading); }
.sys-div { display: block; height: 1px; margin: 30px 0 30px; background: rgba(var(--line-rgb), .1); transform-origin: left; }
.sys-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-areas: "media text" "media gallery"; gap: 26px 44px; align-items: start; }
.sys-media { grid-area: media; position: relative; }
.sys-text { grid-area: text; }
.sys-gallery { grid-area: gallery; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-self: end; }
.sys .film.main { aspect-ratio: 4 / 5; max-height: none; }
.sys .film.main.tall { aspect-ratio: 9 / 13; }
.sys .film.main.land { aspect-ratio: 4 / 3; }
.sys-gallery figure { margin: 0; }
.sys-gallery img, .sys-gallery .film { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; box-shadow: 0 8px 24px rgba(0, 0, 0, .06); transition: transform .8s var(--ease-out), box-shadow .8s var(--ease-out); }
.sys-gallery .film.tall-s { aspect-ratio: 4 / 3; }
.sys-gallery figure:hover img, .sys-gallery figure:hover .film { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0, 0, 0, .1); }
.sys-gallery figcaption { margin-top: 9px; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--label); }
.sys-text h3 { margin: 4px 0 0; font-size: 1.5rem; font-weight: 300; line-height: 1.3; color: var(--heading); }
.sys-acc { display: block; width: 36px; height: 2px; margin: 16px 0 22px; background: var(--accent); }
.sys-text ul { margin: 0; padding: 0; list-style: none; }
.sys-text li { position: relative; padding: 0 0 0 18px; margin: 0 0 12px; font-size: .92rem; line-height: 1.5; color: var(--ink); }
.sys-text li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.sys-text p { margin: 20px 0 0; font-size: .92rem; line-height: 1.85; color: var(--muted); }
.sys-text .cta-link { margin-top: 2rem; }
.sys-text .cta-link::before, .inner-close .cta-link::before { display: none; }

/* viewer */
.viewer { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 3px; overflow: hidden; background: radial-gradient(120% 90% at 50% 30%, rgba(var(--card-rgb), .9), rgba(var(--accent-rgb), .07) 70%, rgba(var(--line-rgb), .08)); box-shadow: 0 2px 4px rgba(0, 0, 0, .02), 0 8px 24px rgba(0, 0, 0, .06), 0 24px 48px rgba(0, 0, 0, .04); }
.viewer-stage { position: absolute; inset: 0; }
.viewer-stage:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.viewer-stage canvas { width: 100%; height: 100%; }
.vw-tag { position: absolute; left: 0; top: 0; pointer-events: none; white-space: nowrap; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); padding: 4px 8px 4px 22px; opacity: 0; margin-left: 46px; margin-top: -10px; }
.vw-tag::before { content: ""; position: absolute; left: -40px; top: 50%; width: 54px; height: 1px; background: rgba(var(--ink-rgb), .45); }
.vw-tag::after { content: ""; position: absolute; left: -44px; top: calc(50% - 3px); width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--accent); background: var(--bg); }
.viewer-ui { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; pointer-events: none; }
.viewer-hint { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(var(--ink-rgb), .55); display: inline-flex; align-items: center; gap: 8px; }
.viewer-hint::before { content: "⟲"; font-size: 13px; letter-spacing: 0; }
.viewer-btn { pointer-events: auto; display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px; border-radius: 100px; cursor: pointer; border: 1px solid rgba(var(--ink-rgb), .14); background: rgba(var(--card-rgb), .8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ink); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; transition: border-color .35s ease, transform .4s var(--ease-out), box-shadow .35s ease; }
.viewer-btn:hover { border-color: rgba(var(--accent-rgb), .5); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(var(--heading-rgb), .12); }
.vb-dot { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--accent); transition: background .3s ease; }
.viewer-btn[aria-pressed="true"] .vb-dot { background: var(--accent); }

.inner-close { position: relative; text-align: center; padding: 120px 24px 130px; }
.inner-close h2 { margin: 0; font-size: 2.6rem; font-weight: 300; letter-spacing: -0.02em; color: var(--heading); }
.inner-close h2 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--accent); }
.inner-close p { margin: 10px 0 0; font-size: .85rem; letter-spacing: .1em; color: var(--label); }
.inner-close .cta-link { margin-top: 2rem; }
.close-alt { width: auto; display: inline-flex; margin: 18px auto 0; padding: 10px 18px; }
.inner-close .close-alt { display: flex; width: max-content; }

@media (max-width: 1024px) {
  .inner-head { padding: 24px; }
  .inner-head .nav-pill { display: none; }
  .inner-hero { padding-top: 130px; }
  .inner-hero h1 { font-size: 2.6rem; }
  .sys-head h2 { font-size: 2.2rem; }
}
@media (max-width: 767px) {
  .inner-logo { font-size: .9rem; }
  .inner-hero { padding: 120px 20px 20px; }
  .inner-hero h1 { font-size: 2.2rem; }
  .ih-sub { font-size: .9rem; }
  .sys { padding: 64px 20px 20px; }
  .sys-head { gap: 16px; }
  .sys-icon { width: 46px; height: 46px; }
  .sys-head h2 { font-size: 1.8rem; }
  .sys-grid { grid-template-columns: 1fr; grid-template-areas: "media" "text" "gallery"; gap: 26px; }
  .sys .film.main.tall { aspect-ratio: 4 / 5; }
  .inner-close { padding: 90px 20px 100px; }
  .inner-close h2 { font-size: 1.9rem; }
}