/* Externalized from inline css in public page bloat-reduction phase. Source marker: assets/css/oloropa-package-theatre.css. */
/* Inlined from assets/css/oloropa-package-theatre.css */
/* Oloropa Phase 4 — Packages Page Pinned Journey Theatre
   Dedicated controller styles for package rails, route image orbits, and mobile-safe fallback. */
:root{
  --pk4t-forest:#123323;
  --pk4t-deep:#06120d;
  --pk4t-gold:#c9a45d;
  --pk4t-ivory:#fff8ea;
  --pk4t-muted:rgba(255,248,234,.68);
  --pk4t-ink:#172119;
  --pk4t-line:rgba(201,164,93,.22);
  --pk4t-ease:cubic-bezier(.22,1,.36,1);
  --pk4t-top:clamp(72px,9svh,112px);
}
html.pk4t-ready #category-rails[data-pk4-theatre="phase4"]{
  overflow:clip;
  background:
    radial-gradient(circle at 12% 18%,rgba(201,164,93,.13),transparent 25%),
    linear-gradient(180deg,#fffaf1 0%,#f4ead8 48%,#fffaf1 100%);
}
html.pk4t-ready #category-rails[data-pk4-theatre="phase4"] .pk-inner{position:relative;z-index:2;}
.pk4t-master-status{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:.85rem;
  align-items:center;
  width:min(1040px,100%);
  margin:1.2rem 0 2rem;
  padding:.78rem .95rem;
  border:1px solid rgba(23,53,39,.12);
  border-radius:999px;
  background:rgba(255,255,255,.68);
  box-shadow:0 18px 50px rgba(23,53,39,.08);
  backdrop-filter:blur(18px);
  color:var(--pk4t-ink);
}
.pk4t-master-status span,.pk4t-master-status em{
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-style:normal;
  font-weight:900;
  color:rgba(23,53,39,.55);
}
.pk4t-master-status strong{
  font-family:Georgia,'Times New Roman',serif;
  color:var(--pk4t-forest);
  font-size:clamp(1.15rem,2.4vw,1.75rem);
  line-height:1;
}
.pk4t-chapter-mark{
  display:inline-flex;
  width:max-content;
  margin:0 0 .65rem;
  padding:.42rem .7rem;
  border-radius:999px;
  border:1px solid rgba(23,53,39,.12);
  background:#fff;
  color:var(--pk4t-gold);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:950;
}
#category-rails[data-pk4-theatre="phase4"] .pk4-category{
  position:relative;
  isolation:isolate;
  scroll-margin-top:var(--pk4t-top);
}
#category-rails[data-pk4-theatre="phase4"] .pk4-category[data-pk4t-mode="ready"]{
  min-height:var(--pk4t-section-height,auto);
}
.pk4t-stage{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,360px);
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:clamp(.8rem,1.6vw,1.25rem);
  align-items:stretch;
  min-height:min(820px,calc(100svh - var(--pk4t-top) - 18px));
  padding:clamp(.85rem,1.8vw,1.25rem);
  border:1px solid rgba(23,53,39,.10);
  border-radius:clamp(1.35rem,2.3vw,2rem);
  background:
    radial-gradient(circle at 4% 0%,rgba(201,164,93,.20),transparent 22%),
    linear-gradient(145deg,rgba(255,255,255,.82),rgba(247,237,217,.72));
  box-shadow:0 34px 100px rgba(23,53,39,.12);
  backdrop-filter:blur(20px);
  transform:translateZ(0);
}
#category-rails[data-pk4-theatre="phase4"] .pk4-category[data-pk4t-mode="ready"] .pk4t-stage{
  position:sticky;
  top:var(--pk4t-top);
}
.pk4t-stage .pk4-category-title,
.pk4t-stage .pk-category-title{
  grid-column:1;
  grid-row:1;
  margin:0!important;
}
.pk4t-shell{
  grid-column:1;
  grid-row:2;
  position:relative;
  min-width:0;
  overflow:hidden;
  border-radius:1.55rem;
  background:
    linear-gradient(90deg,rgba(23,53,39,.05),transparent 9%,transparent 91%,rgba(23,53,39,.05)),
    rgba(255,255,255,.32);
  border:1px solid rgba(23,53,39,.08);
}
.pk4t-shell::before,.pk4t-shell::after{
  content:"";
  position:absolute;
  top:0;bottom:0;
  width:clamp(34px,5vw,76px);
  z-index:3;
  pointer-events:none;
}
.pk4t-shell::before{left:0;background:linear-gradient(90deg,rgba(250,244,230,.96),rgba(250,244,230,0));}
.pk4t-shell::after{right:0;background:linear-gradient(270deg,rgba(250,244,230,.96),rgba(250,244,230,0));}
html.pk4t-ready #category-rails[data-pk4-theatre="phase4"] .pk4t-shell .pk4-rail,
html.pk4t-ready #category-rails[data-pk4-theatre="phase4"] .pk4t-shell .pk-rail{
  display:flex!important;
  gap:clamp(.95rem,1.3vw,1.2rem)!important;
  height:100%;
  overflow:visible!important;
  padding:1rem clamp(1rem,2vw,1.4rem) 2rem!important;
  transform:translate3d(var(--pk4t-x,0px),0,0)!important;
  will-change:transform;
  transition:none!important;
  scroll-behavior:auto!important;
  touch-action:pan-y;
  scrollbar-width:none;
}
html.pk4t-ready #category-rails[data-pk4-theatre="phase4"] .pk4t-shell .pk4-rail::-webkit-scrollbar{display:none;}
html.pk4t-ready #category-rails[data-pk4-theatre="phase4"] [data-pk4-theatre-card]{
  flex:0 0 clamp(330px,31vw,470px)!important;
  min-height:100%;
  scroll-snap-align:start;
  transform:translate3d(0,0,0)!important;
  opacity:.52;
  filter:saturate(.74) brightness(.82) blur(.35px);
  transition:
    opacity .38s ease,
    filter .38s ease,
    box-shadow .38s ease,
    outline-color .38s ease,
    translate .38s var(--pk4t-ease);
  backface-visibility:hidden;
}
html.pk4t-ready #category-rails[data-pk4-theatre="phase4"] [data-pk4-theatre-card].is-active{
  opacity:1;
  filter:saturate(1.08) brightness(1.04) blur(0);
  translate:0 -10px;
  outline:1px solid rgba(201,164,93,.68);
  outline-offset:8px;
  box-shadow:0 34px 86px rgba(23,53,39,.18);
}
html.pk4t-ready #category-rails[data-pk4-theatre="phase4"] [data-pk4-theatre-card].is-before,
html.pk4t-ready #category-rails[data-pk4-theatre="phase4"] [data-pk4-theatre-card].is-after{
  opacity:.68;
  filter:saturate(.88) brightness(.92);
}
.pk4t-active-chip{
  position:absolute;
  left:.8rem;
  bottom:.8rem;
  z-index:6;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.42rem .62rem;
  border-radius:999px;
  background:rgba(7,18,13,.72);
  color:var(--pk4t-ivory);
  border:1px solid rgba(255,255,255,.18);
  font-size:.62rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:900;
  opacity:0;
  transform:translateY(8px);
  transition:.32s var(--pk4t-ease);
  backdrop-filter:blur(14px);
}
[data-pk4-theatre-card].is-active .pk4t-active-chip{opacity:1;transform:none;}
.pk4t-progress{
  grid-column:1;
  grid-row:3;
  height:4px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(23,53,39,.12);
}
.pk4t-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pk4t-gold),#f8e8a7,var(--pk4t-gold));box-shadow:0 0 18px rgba(201,164,93,.38);}
.pk4t-hint{
  grid-column:1;
  grid-row:3;
  align-self:end;
  justify-self:end;
  margin:0;
  padding:.42rem .72rem;
  border-radius:999px;
  background:rgba(23,53,39,.08);
  color:rgba(23,53,39,.62);
  font-size:.68rem;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
  transform:translateY(2.2rem);
}
.pk4t-orbit{
  grid-column:2;
  grid-row:1 / span 3;
  position:relative;
  min-height:100%;
  border-radius:1.7rem;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 30%,rgba(201,164,93,.26),transparent 30%),
    radial-gradient(circle at 70% 78%,rgba(74,120,92,.26),transparent 28%),
    linear-gradient(150deg,#07120d,#173527 66%,#07120d);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 28px 80px rgba(7,18,13,.24);
  color:var(--pk4t-ivory);
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:1rem;
  transform:translateZ(0);
}
.pk4t-orbit::before{
  content:"";
  position:absolute;
  inset:1rem;
  border-radius:1.2rem;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(135deg,rgba(255,255,255,.04),transparent);
  pointer-events:none;
}
.pk4t-orbit-kicker{
  position:relative;
  z-index:4;
  display:flex;
  justify-content:space-between;
  gap:.7rem;
  align-items:center;
  color:rgba(255,248,234,.68);
  font-size:.64rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:900;
}
.pk4t-orbit-title{
  position:relative;
  z-index:4;
  align-self:start;
  display:grid;
  gap:.35rem;
}
.pk4t-orbit-title strong{
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(2rem,4vw,3.4rem);
  line-height:.9;
  color:var(--pk4t-ivory);
  text-shadow:0 12px 34px rgba(0,0,0,.26);
}
.pk4t-orbit-title strong.is-changing{animation:pk4tLabelPulse .55s var(--pk4t-ease) both;}
.pk4t-orbit-title em{font-style:normal;color:rgba(255,248,234,.64);line-height:1.45;font-size:.9rem;}
@keyframes pk4tLabelPulse{0%{opacity:0;transform:translateY(10px);filter:blur(6px)}100%{opacity:1;transform:none;filter:blur(0)}}
.pk4t-orbit-shell{
  position:relative;
  z-index:2;
  align-self:center;
  justify-self:center;
  width:min(260px,78%);
  height:min(260px,78%);
  min-height:220px;
  perspective:1200px;
  transform-style:preserve-3d;
}
.pk4t-orbit-ring{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  animation:pk4tOrbitSpin 20s linear infinite;
}
.pk4t-orbit:hover .pk4t-orbit-ring{animation-play-state:paused;}
@keyframes pk4tOrbitSpin{to{transform:rotateY(-360deg)}}
.pk4t-frame{
  position:absolute;
  left:50%;top:50%;
  width:clamp(112px,10vw,152px);
  aspect-ratio:4/5;
  margin-left:calc(clamp(112px,10vw,152px) / -2);
  margin-top:calc(clamp(112px,10vw,152px) * -0.625);
  border-radius:1rem;
  overflow:hidden;
  transform:rotateY(var(--pk4t-angle,0deg)) translateZ(clamp(135px,17vw,214px)) rotateY(calc(-1 * var(--pk4t-angle,0deg)));
  box-shadow:0 20px 48px rgba(0,0,0,.32);
  border:1px solid rgba(255,255,255,.22);
  background:#10261d;
}
.pk4t-frame img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.96) contrast(1.02);}
.pk4t-frame figcaption{position:absolute;left:.45rem;right:.45rem;bottom:.45rem;padding:.34rem .45rem;border-radius:.6rem;background:rgba(7,18,13,.62);color:#fff;font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;font-weight:900;backdrop-filter:blur(10px);}
.pk4t-route-thread{
  position:relative;
  z-index:4;
  display:flex;
  flex-wrap:wrap;
  gap:.38rem;
  align-content:end;
}
.pk4t-route-thread span{
  display:inline-flex;
  padding:.36rem .52rem;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,248,234,.82);
  font-size:.62rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:850;
}
.pk4t-family-summary{
  grid-column:2;
  position:absolute;
  left:1rem;right:1rem;bottom:1rem;
  z-index:5;
  padding:.72rem .84rem;
  border-radius:1rem;
  background:rgba(255,248,234,.10);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,248,234,.72);
  font-size:.82rem;
  line-height:1.45;
  backdrop-filter:blur(14px);
}
html.pk4t-ready #category-rails[data-pk4-theatre="phase4"] .pk4-category.is-pk4t-active .pk4t-stage{
  box-shadow:0 42px 120px rgba(23,53,39,.18);
}
html.pk4t-ready #category-rails[data-pk4-theatre="phase4"] .pk4-category.is-pk4t-complete .pk4t-stage{
  border-color:rgba(201,164,93,.28);
}
@media(max-width:1120px){
  .pk4t-stage{grid-template-columns:1fr;min-height:auto;}
  .pk4t-stage .pk4-category-title,.pk4t-shell,.pk4t-progress,.pk4t-hint,.pk4t-orbit{grid-column:1;}
  .pk4t-orbit{grid-row:auto;min-height:430px;}
  .pk4t-hint{justify-self:start;transform:none;margin-top:.65rem;}
}
@media(max-width:900px){
  html.pk4t-ready #category-rails[data-pk4-theatre="phase4"]{overflow:visible;}
  .pk4t-master-status{grid-template-columns:1fr;border-radius:1.2rem;}
  #category-rails[data-pk4-theatre="phase4"] .pk4-category[data-pk4t-mode]{min-height:auto!important;}
  #category-rails[data-pk4-theatre="phase4"] .pk4-category .pk4t-stage{position:relative!important;top:auto!important;display:block;padding:0;background:transparent;border:0;box-shadow:none;backdrop-filter:none;}
  .pk4t-shell{overflow:visible;border:0;background:transparent;border-radius:0;}
  .pk4t-shell::before,.pk4t-shell::after{display:none;}
  html.pk4t-ready #category-rails[data-pk4-theatre="phase4"] .pk4t-shell .pk4-rail,
  html.pk4t-ready #category-rails[data-pk4-theatre="phase4"] .pk4t-shell .pk-rail{
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory;
    touch-action:pan-x pan-y;
    transform:none!important;
    padding:1rem 1rem 2rem!important;
    scrollbar-width:thin;
  }
  html.pk4t-ready #category-rails[data-pk4-theatre="phase4"] [data-pk4-theatre-card]{flex-basis:86vw!important;opacity:1;filter:none;translate:none!important;}
  .pk4t-orbit{display:none!important;}
  .pk4t-progress{display:block;margin:.2rem 1rem 1rem;}
  .pk4t-hint{margin:0 1rem 1rem;display:inline-flex;}
}
@media(prefers-reduced-motion:reduce){
  .pk4t-orbit-ring{animation:none!important;}
  html.pk4t-ready #category-rails[data-pk4-theatre="phase4"] .pk4t-shell .pk4-rail,
  html.pk4t-ready #category-rails[data-pk4-theatre="phase4"] .pk4t-shell .pk-rail{transform:none!important;overflow-x:auto!important;scroll-snap-type:x mandatory;}
  #category-rails[data-pk4-theatre="phase4"] .pk4-category[data-pk4t-mode]{min-height:auto!important;}
  #category-rails[data-pk4-theatre="phase4"] .pk4-category .pk4t-stage{position:relative!important;top:auto!important;}
}