/* TRH PHONE COMPOSITION v16.151 — one owner, scoped to the dedicated phone shell.
   The shared stage and the desktop/tablet composition are not changed.
   Home pattern: full-bleed cover artwork; native-size UI above it. */
html.trh-phone-mode,
html.trh-phone-mode body.trh-page {
  width:100%;height:100%;min-height:100%;margin:0;padding:0;
  overflow:hidden;overscroll-behavior:none;background:#14132d;
}
html.trh-phone-mode body.trh-page > .skip-link,
html.trh-phone-mode body.trh-page > .site-shell,
html.trh-phone-mode body.trh-page > .trh-mobile-cover {display:none}
html.trh-phone-mode body.trh-page .trh-stage-viewport {
  position:fixed;inset:0;width:100%;height:100%;margin:0;padding:0;
  display:block;overflow:visible;background:#14132d;
}
/* The existing 2048px composition is retained in the DOM for desktop/tablet
   but never painted on the phone. Gallery and chapter HTML are moved to the
   phone shell by its dedicated script. */
html.trh-phone-mode body.trh-page .trh-fixed-stage {display:none}
html.trh-phone-mode body.trh-page .trh-phone-shell {
  position:absolute;top:0;left:0;box-sizing:border-box;overflow:hidden;
  margin:0;padding:0;transform-origin:0 0;isolation:isolate;
  color:#f4e5c8;background-color:#14132d;
  background-image:linear-gradient(180deg,rgba(8,8,27,.53),rgba(16,13,42,.19) 33%,rgba(14,10,32,.28) 76%,rgba(7,7,25,.69)),url('../assets/trh/trh-stage-artwork-v16.130.webp');
  background-size:cover;background-position:center center;background-repeat:no-repeat;
}
html.trh-phone-mode body.trh-page .trh-phone-shell::after {
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  box-shadow:inset 0 0 46px rgba(9,7,30,.30);
}
html.trh-phone-mode .trh-phone-header,
html.trh-phone-mode .trh-phone-gallery,
html.trh-phone-mode .trh-phone-chapters,
html.trh-phone-mode .trh-phone-scrim {position:absolute;z-index:1}
html.trh-phone-mode .trh-phone-header {
  inset:0 0 auto;height:50px;display:flex;align-items:center;
  gap:10px;padding:4px 16px 3px;box-sizing:border-box;
  background:linear-gradient(180deg,rgba(12,9,29,.72),rgba(12,9,29,0));
}
html.trh-phone-mode .trh-phone-back,
html.trh-phone-mode .trh-phone-chapters-button {
  display:inline-flex;align-items:center;justify-content:center;
  min-height:38px;box-sizing:border-box;text-decoration:none;
  border:1px solid rgba(224,190,118,.46);border-radius:22px;
  color:#f4e5c8;background:rgba(17,12,38,.73);
  font:600 12px/1.2 'Cinzel',Georgia,serif;letter-spacing:.06em;
  padding:8px 13px;white-space:nowrap;cursor:pointer;
}
html.trh-phone-mode .trh-phone-back {border-color:transparent;background:transparent}
html.trh-phone-mode .trh-phone-brand {
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#e9d39c;font:600 15px/1.1 'Cinzel',Georgia,serif;letter-spacing:.08em;text-align:center;
  text-shadow:0 2px 8px rgba(0,0,0,.8);
}
html.trh-phone-mode .trh-phone-gallery {inset:48px 0 6px;overflow:visible}
html.trh-phone-mode .trh-phone-gallery > .trh-character-gallery {
  display:block;position:absolute;inset:0;z-index:auto;width:auto;height:auto;
  min-width:0;max-width:none;overflow:visible;color:#f4e5c8;
}
html.trh-phone-mode .trh-phone-gallery .trh-character-carousel {
  position:absolute;inset:0 48px 16px;overflow:visible;touch-action:auto;
}
html.trh-phone-mode .trh-phone-gallery .trh-character-track {position:absolute;inset:0;overflow:visible}
html.trh-phone-mode .trh-phone-gallery .trh-character-card {
  --phone-frame-w:clamp(125px,calc(var(--trh-phone-h) * .38),162px);
  position:absolute;top:2px;left:50%;width:var(--phone-frame-w);height:auto;
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
  gap:0;opacity:0;pointer-events:none;z-index:0;
  transform:translateX(-50%) scale(.8);transform-origin:top center;
  transition:transform .26s ease,opacity .22s ease;filter:none;
}
html.trh-phone-mode .trh-phone-gallery .trh-character-card.is-active {
  left:50%;top:2px;z-index:3;opacity:1;pointer-events:auto;
  transform:translateX(-50%) scale(1);
}
html.trh-phone-mode .trh-phone-gallery .trh-character-card.is-prev,
html.trh-phone-mode .trh-phone-gallery .trh-character-card.is-next {
  top:38px;z-index:2;opacity:.83;pointer-events:auto;
  transform:translateX(-50%) scale(.71);
}
html.trh-phone-mode .trh-phone-gallery .trh-character-card.is-prev {left:calc(50% - var(--trh-phone-card-shift))}
html.trh-phone-mode .trh-phone-gallery .trh-character-card.is-next {left:calc(50% + var(--trh-phone-card-shift))}
html.trh-phone-mode .trh-phone-gallery .trh-character-frame {
  width:100%;height:auto;min-height:0;flex:0 0 auto;aspect-ratio:340/653;
  background:none;box-shadow:none;
}
html.trh-phone-mode .trh-phone-gallery .trh-portrait-window { /* preserve the approved arch image crop */ }
html.trh-phone-mode .trh-phone-gallery .trh-character-caption {
  margin-top:-8px;min-height:25px;padding:0;text-align:center;line-height:1.1;
}
html.trh-phone-mode .trh-phone-gallery .trh-character-caption h2 {
  font:600 12px/1.2 'Cinzel',Georgia,serif;letter-spacing:.08em;
  color:#f3d998;text-shadow:0 2px 9px rgba(0,0,0,.9);
}
html.trh-phone-mode .trh-phone-gallery .trh-character-caption p {display:none}
html.trh-phone-mode .trh-phone-gallery .trh-character-arrow {
  position:absolute;z-index:9;top:43%;width:42px;height:46px;min-width:42px;
  margin:0;border:1px solid rgba(233,193,111,.5);border-radius:25px;
  display:grid;place-items:center;background:rgba(16,10,36,.74);color:#efcf86;
  transform:translateY(-50%);box-shadow:0 2px 12px rgba(0,0,0,.28);
}
html.trh-phone-mode .trh-phone-gallery .trh-character-arrow--prev {left:8px;right:auto}
html.trh-phone-mode .trh-phone-gallery .trh-character-arrow--next {right:8px;left:auto}
html.trh-phone-mode .trh-phone-gallery .trh-character-arrow span {
  color:#efcf86;font:400 28px/1 Georgia,serif;margin:0;
}
html.trh-phone-mode .trh-phone-gallery .trh-character-pagination {
  position:absolute;top:auto;bottom:0;left:50%;right:auto;
  height:17px;width:auto;transform:translateX(-50%);
  display:flex;align-items:center;justify-content:center;gap:9px;padding:0;
  background:none;pointer-events:auto;
}
html.trh-phone-mode .trh-phone-gallery .trh-character-pagination::before,
html.trh-phone-mode .trh-phone-gallery .trh-character-pagination::after {display:none}
html.trh-phone-mode .trh-phone-gallery .trh-character-dot {
  width:9px;height:9px;min-width:9px;min-height:9px;padding:0;border-radius:50%;
}
/* Chapters are a readable overlay, not a tiny 55-item box squeezed into art. */
html.trh-phone-mode .trh-phone-scrim {inset:0;background:rgba(4,3,14,.67);z-index:18}
html.trh-phone-mode .trh-phone-chapters {
  right:9px;top:50px;bottom:9px;width:min(450px,calc(100% - 18px));
  display:flex;flex-direction:column;z-index:19;
  overflow:hidden;border:1px solid rgba(232,197,119,.8);border-radius:16px;
  background:linear-gradient(175deg,rgba(33,27,71,.98),rgba(18,18,46,.98));
  box-shadow:0 12px 45px rgba(0,0,0,.6);
}
html.trh-phone-mode .trh-phone-chapters[hidden],
html.trh-phone-mode .trh-phone-scrim[hidden] {display:none}
html.trh-phone-mode .trh-phone-chapters .trh-chapter-index {
  position:relative;display:flex;flex-direction:column;inset:auto;
  margin:0;border:0;border-radius:0;background:transparent;
  width:100%;height:100%;min-width:0;max-height:none;min-height:0;
  box-shadow:none;overflow:hidden;line-height:1.28;
}
html.trh-phone-mode .trh-phone-chapters .trh-chapter-index-head {
  flex:0 0 auto;padding:8px 38px 8px 16px;
}
html.trh-phone-mode .trh-phone-chapters .trh-chapter-index-work {font-size:11px}
html.trh-phone-mode .trh-phone-chapters .trh-chapter-index-subtitle {font-size:10px}
html.trh-phone-mode .trh-phone-chapters .trh-chapter-index-head h2 {font-size:16px;margin:2px 0}
html.trh-phone-mode .trh-phone-chapters .trh-chapter-index-nav {
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
/* The physical swipe axis becomes X after the shell rotates 90 degrees.
   A portrait-only touch owner scrolls the existing Y list; browser pinch stays native. */
html.trh-phone-mode .trh-phone-shell[data-orientation="portrait"] .trh-chapter-index-nav {
  touch-action:pinch-zoom;
}
html.trh-phone-mode .trh-phone-chapters .trh-chapter-index-list {margin:0;padding:4px 9px 10px;}
html.trh-phone-mode .trh-phone-chapters .trh-chapter-index-item {
  display:flex;align-items:center;min-height:36px;box-sizing:border-box;
  padding:6px 9px;text-decoration:none;
}
html.trh-phone-mode .trh-phone-chapters .trh-chapter-index-line {display:flex;align-items:center;min-width:0;gap:5px;}
html.trh-phone-mode .trh-phone-chapters .trh-chapter-index-number {
  font:600 10px/1.1 'Cinzel',Georgia,serif;letter-spacing:.02em;flex:0 0 auto;
}
html.trh-phone-mode .trh-phone-chapters .trh-chapter-index-name {
  font:500 14px/1.2 'Cormorant Garamond',Georgia,serif;letter-spacing:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
html.trh-phone-mode .trh-phone-chapters .trh-chapter-index-foot {display:none}
html.trh-phone-mode .trh-phone-chapters .trh-phone-close {
  position:absolute;right:7px;top:5px;z-index:3;display:grid;place-items:center;
  width:34px;height:32px;padding:0;cursor:pointer;
  border:1px solid rgba(232,197,119,.6);border-radius:50%;
  color:#f5dfb0;background:rgba(18,11,40,.9);font:22px/1 Georgia,serif;
}
@media (prefers-reduced-motion:reduce) {
  html.trh-phone-mode .trh-phone-gallery .trh-character-card {transition:none}
}

/* Phone landscape only: independent optical balance. Portrait layout stays v16.150.
   No desktop/tablet matches the phone shell; no shared stage CSS is changed. */
html.trh-phone-mode .trh-phone-shell[data-orientation="landscape"] .trh-phone-header {
  height:44px;
  padding:3px 18px;
}
html.trh-phone-mode .trh-phone-shell[data-orientation="landscape"] .trh-phone-gallery {
  inset:43px 0 10px;
}
html.trh-phone-mode .trh-phone-shell[data-orientation="landscape"] .trh-character-carousel {
  inset:0 54px 14px;
}
html.trh-phone-mode .trh-phone-shell[data-orientation="landscape"] .trh-character-card {
  --phone-frame-w:clamp(118px,calc(var(--trh-phone-h) * .385),156px);
}
html.trh-phone-mode .trh-phone-shell[data-orientation="landscape"] .trh-character-card.is-prev,
html.trh-phone-mode .trh-phone-shell[data-orientation="landscape"] .trh-character-card.is-next {
  top:24px;
  opacity:.9;
  transform:translateX(-50%) scale(.81);
}
/* Bring arrows beside the outer cards instead of pinning them to far screen edges. */
html.trh-phone-mode .trh-phone-shell[data-orientation="landscape"] .trh-character-arrow--prev {
  left:max(7px,calc(50% - var(--trh-phone-card-shift) - 104px));
}
html.trh-phone-mode .trh-phone-shell[data-orientation="landscape"] .trh-character-arrow--next {
  right:max(7px,calc(50% - var(--trh-phone-card-shift) - 104px));
}
/* A compact, genuinely side-aligned reading panel on short landscape screens. */
html.trh-phone-mode .trh-phone-shell[data-orientation="landscape"] .trh-phone-chapters {
  top:47px;
  bottom:8px;
  right:10px;
  width:min(330px,calc(100% - 20px));
}
html.trh-phone-mode .trh-phone-shell[data-orientation="landscape"] .trh-chapter-index-head {
  padding:5px 36px 5px 12px;
}
html.trh-phone-mode .trh-phone-shell[data-orientation="landscape"] .trh-chapter-index-ornament {
  height:12px;
  line-height:12px;
  margin-bottom:3px;
}
html.trh-phone-mode .trh-phone-shell[data-orientation="landscape"] .trh-chapter-index-work {
  font-size:10px;
}
html.trh-phone-mode .trh-phone-shell[data-orientation="landscape"] .trh-chapter-index-subtitle {
  margin-top:1px;
  font-size:9px;
}
html.trh-phone-mode .trh-phone-shell[data-orientation="landscape"] .trh-chapter-index-head h2 {
  margin-top:2px;
  font-size:15px;
}
html.trh-phone-mode .trh-phone-shell[data-orientation="landscape"] .trh-chapter-index-item {
  min-height:36px;
}