/* The Resonant Heir — v16.138 consolidated page-owned presentation.

   CASCADE CONTRACT
   1. Page/stage modes own visibility and viewport behavior.
   2. Navigation owns only header/menu interaction.
   3. Chapter index owns book-navigation presentation.
   4. Character gallery owns carousel/frame/caption/control presentation.
   5. Geometry owners define desktop, fixed 2048×1152 touch, and compact desktop.
   6. Theme owns artwork/background treatment.
   7. Accessibility overrides stay last.

   Maintenance rule: a root-level exact selector has one owner block.
   Do not append a second root-level copy to patch an existing component;
   edit its owner or add an explicitly scoped mode/state override. */

.portal-card,.info-card,.feature-card,.record{
  padding:22px;
  border-radius:22px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(19,15,34,.92),rgba(12,10,23,.92));
  box-shadow:var(--shadow);
}

.portal-card h2,.feature-card h2,.record h2{
  margin:0 0 8px;
  font-size:1.65rem;
  color:var(--ivory);
}

.portal-card p,.info-card p,.feature-card p,.record p,.record li{
  color:var(--muted);
  line-height:1.75;
}

.feature-card{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:18px;
  align-items:center;
  margin-top:28px;
}

.feature-visual{
  aspect-ratio:16/6;
  border-radius:18px;
  background:url("../assets/trh-feature.webp") center/cover no-repeat;
  border:1px solid rgba(218,173,77,.22);
}

.cards-2{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
  margin-top:18px;
}

.trh-mobile-cover{
  display:none;
}

/*
   =========================================================
   TRH STAGED COMPOSITION
   Desktop and portrait-touch share the same visual component rules.
   Portrait master geometry is normalized later in its mode owner.
   =========================================================
*/

.trh-page .trh-desktop-artwork{
  display:none;
}

@media (min-width:768px), (orientation:portrait) and (hover:none) and (pointer:coarse){
  html{
    margin:0;
    padding:0;
    background:#080619;
  }

  body.trh-page{
    width:100%;
    margin:0;
    padding:0;
    overflow-x:hidden;
    overflow-y:auto;
    background:#080619;
  }

  body.trh-page > .skip-link,
  body.trh-page > .trh-mobile-cover,
  body.trh-page > .site-shell{
    display:none;
  }

  body.trh-page .trh-desktop-artwork{
    position:relative;
    display:block;
    width:100%;
    margin:0;
    padding:0;
    line-height:0;
    overflow:hidden;
    background:#080619;
  }
}

/*
   =========================================================
   TRH NAVIGATION
   Same visual language as Fiction; touch opening state is page-owned below.
   =========================================================
*/

@media (min-width:768px), (orientation:portrait) and (hover:none) and (pointer:coarse){
  .trh-page .trh-topbar{
    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index:20;
    pointer-events:none;
    display:flex;
    justify-content:space-between;
    gap:20px;
    background:transparent;
    color:var(--ivory);
    text-shadow:0 2px 12px rgba(0,0,0,.72);
  }

  .trh-page .trh-topbar-left{
    display:flex;
    flex:0 0 auto;
    pointer-events:auto;
  }

  .trh-page .trh-return-top{
    display:inline-block;
    text-transform:uppercase;
    white-space:nowrap;
    text-decoration:none;
    transition:color .2s ease,border-color .2s ease;
  }

  .trh-page .trh-return-top:hover,
  .trh-page .trh-return-top:focus-visible{
    color:#f0d494;
    border-color:rgba(230,189,104,.62);
    outline:none;
  }

  .trh-page .trh-topbar .brand-mini,
  .trh-page .trh-topbar .nav a{
    color:#f4e5c8;
  }

  .trh-page .trh-topbar .mini-sigil{
    background:rgba(8,6,15,.12);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
  }

  .trh-page .trh-topbar .nav a{
    border-color:transparent;
    background:transparent;
  }

  .trh-page .trh-topbar .nav a:hover,
  .trh-page .trh-topbar .nav a:focus-visible{
    border-color:rgba(239,198,107,.34);
    background:rgba(8,6,15,.16);
  }

  .trh-page .trh-nav-dropdown{
    position:relative;
    pointer-events:auto;
    display:inline-flex;
    flex-direction:column;
    align-items:flex-start;
  }

  .trh-page .trh-nav-trigger{
    position:relative;
    z-index:22;
  }

  .trh-page .trh-nav-dropdown::after{
    content:"";
    position:absolute;
    top:100%;
    left:-4px;
    width:153px;
    height:14px;
    z-index:20;
    background:transparent;
    pointer-events:auto;
  }

  .trh-page .trh-nav-menu{
    position:absolute;
    top:calc(100% + 4px);
    left:0;
    z-index:21;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    min-width:136px;
    padding:12px 14px 28px;
    box-sizing:border-box;
    clip-path:polygon(0 0,100% 0,100% 86%,50% 100%,0 86%);
    background:rgba(11,5,24,.50);
    -webkit-backdrop-filter:blur(5px) saturate(1.08);
    backdrop-filter:blur(5px) saturate(1.08);
    border-top:1px solid rgba(239,198,107,.58);
    box-shadow:inset 1px 0 0 rgba(239,198,107,.42),
      inset -1px 0 0 rgba(239,198,107,.42),
      inset 0 1px 0 rgba(255,226,151,.18),
      inset 0 0 20px rgba(98,49,132,.20),
      0 16px 30px rgba(0,0,0,.38);
    filter:drop-shadow(0 3px 4px rgba(239,198,107,.16));
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px);
    transform-origin:top left;
    transition:opacity .20s ease,transform .20s ease,visibility .20s ease;
  }

  .trh-page .trh-nav-menu a{
    display:block;
    width:100%;
    font-family:"Cormorant SC",Georgia,"Times New Roman",serif;
    padding:8px 12px;
    white-space:nowrap;
    text-align:center;
  }

  .trh-page .trh-nav-dropdown:hover .trh-nav-menu,
  .trh-page .trh-nav-dropdown:focus-within .trh-nav-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }
}

/* --- TRH small-view fallback. Active portrait stage is a separate owner. */

@media (max-width:767px){
  body.trh-page:not(.trh-portrait-stage){
    margin:0;
    padding:0;
    background:#05030a;
    overflow-x:hidden;
  }

  body.trh-page:not(.trh-portrait-stage) > .skip-link,
  body.trh-page:not(.trh-portrait-stage) > .site-shell{
    display:none;
  }

  body.trh-page:not(.trh-portrait-stage) .trh-mobile-cover{
    display:block;
    width:100vw;
    margin:0;
    padding:0;
  }

  body.trh-page:not(.trh-portrait-stage) .trh-desktop-artwork{
    display:none;
  }

  body.trh-page:not(.trh-portrait-stage) .trh-mobile-cover img{
    display:block;
    width:100%;
    height:auto;
    margin:0;
    padding:0;
  }

  body.trh-page:not(.trh-portrait-stage) .trh-topbar{
    display:none;
  }
}

/*
   Touch navigation state is independent of the CSS viewport width.
   Physical landscape uses a virtual 2048px viewport.
*/

html.trh-touch-nav-mode .trh-page .trh-nav-dropdown.szm-open .trh-nav-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

/*
   =========================================================
   TRH PORTRAIT TOUCH — 2048×1152 master landscape stage
   Shared stage engine owns rotation/contain scaling; TRH owns composition.
   =========================================================
*/

@media (orientation:portrait) and (hover:none) and (pointer:coarse){
  body.trh-page.trh-portrait-stage{
    --sz-stage-bg:#080619;
  }

  body.trh-page.trh-portrait-stage .trh-desktop-artwork{
    position:relative;
    display:block;
    width:2048px;
    height:1152px;
    margin:0;
    padding:0;
    line-height:0;
    overflow:hidden;
    background:#080619;
  }

  body.trh-page.trh-portrait-stage .trh-topbar{
    padding:24px 54px;
  }
}

/*
   =========================================================
   TRH TOUCH LANDSCAPE — 2048×1152 virtual master
   Specificity owns this mode; no priority overrides are required.
   =========================================================
*/

html.trh-virtual-landscape{
  width:2048px;
  min-width:2048px;
  overflow-x:hidden;
  overflow-y:auto;
  background:#07040f;
}

html.trh-virtual-landscape body.trh-page{
  width:2048px;
  min-width:2048px;
  height:auto;
  min-height:1152px;
  overflow-x:hidden;
  overflow-y:auto;
  background:#080619;
}

html.trh-virtual-landscape body.trh-page > .skip-link,
html.trh-virtual-landscape body.trh-page > .site-shell,
html.trh-virtual-landscape body.trh-page > .trh-mobile-cover{
  display:none;
}

html.trh-virtual-landscape body.trh-page .trh-desktop-artwork{
  position:relative;
  display:block;
  width:2048px;
  height:1152px;
  overflow:hidden;
}

.trh-page-title{
  font-size:clamp(2.9rem,5vw,5.2rem);
  color:#dcc8ff;
}

.trh-inside-title{
  font-size:1.6rem;
}

.trh-info-title{
  margin-top:0;
  color:var(--ivory);
}

.trh-clean-link{
  text-decoration:none;
}

/*
   =========================================================
   TRH VISIBLE CHAPTER INDEX — primary book navigation.
   The index is real HTML on first response; JS is not required to discover chapters.
   =========================================================
*/

.trh-chapter-index-ornament{
  position:relative;
  width:118px;
  height:18px;
  margin:0 auto 10px;
  color:#e8c875;
  font-family:Georgia,"Times New Roman",serif;
  font-size:16px;
  font-weight:400;
  line-height:18px;
  text-align:center;
  text-shadow:0 0 7px rgba(240,202,113,.28),0 0 16px rgba(126,71,186,.16);
}

.trh-chapter-index-ornament::before,
.trh-chapter-index-ornament::after{
  content:"";
  position:absolute;
  top:50%;
  width:42px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(219,177,91,.55));
}

.trh-chapter-index-ornament::before{
  left:0;
}

.trh-chapter-index-ornament::after{
  right:0;
  transform:scaleX(-1);
}

.trh-chapter-index-work,
.trh-chapter-index-subtitle,
.trh-chapter-index-head h2,
.trh-chapter-index-foot{
  margin:0;
}

.trh-chapter-index-work{
  color:#f1d58d;
  font-family:"Cinzel",Georgia,"Times New Roman",serif;
  font-size:clamp(18px,1.22vw,25px);
  font-weight:700;
  letter-spacing:.09em;
  text-shadow:0 2px 3px rgba(0,0,0,.72);
}

.trh-chapter-index-subtitle{
  margin-top:8px;
  color:rgba(245,224,176,.74);
  font-family:"Cinzel",Georgia,"Times New Roman",serif;
  font-size:clamp(10px,.72vw,14px);
  font-weight:600;
  letter-spacing:.12em;
}

.trh-chapter-index-head h2{
  margin-top:11px;
  color:#fff0bd;
  font-family:"Cinzel",Georgia,"Times New Roman",serif;
  font-size:clamp(15px,.96vw,19px);
  font-weight:600;
  letter-spacing:.20em;
}

.trh-chapter-index-nav{
  position:relative;
  z-index:1;
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(226,190,106,.42) rgba(255,255,255,.035);
}

.trh-chapter-index-nav::-webkit-scrollbar{
  width:8px;
}

.trh-chapter-index-nav::-webkit-scrollbar-track{
  background:rgba(255,255,255,.025);
}

.trh-chapter-index-nav::-webkit-scrollbar-thumb{
  background:rgba(226,190,106,.32);
  border-radius:999px;
}

.trh-chapter-index-list{
  list-style:none;
  margin:0;
  padding:5px 20px 12px;
}

.trh-chapter-index-list li{
  margin:0;
  padding:0;
}

.trh-chapter-index-item{
  width:100%;
  min-height:52px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 8px;
  border-bottom:1px solid rgba(226,190,106,.12);
  color:#f5e7c8;
  text-decoration:none;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}

a.trh-chapter-index-item:hover,
a.trh-chapter-index-item:focus-visible{
  color:#fff2c3;
  background:rgba(123,65,154,.15);
  outline:none;
  transform:translateX(2px);
}

.trh-chapter-index-line{
  min-width:0;
  display:grid;
  grid-template-columns:18px 112px 10px minmax(0,1fr);
  align-items:center;
  gap:7px;
  font-family:"EB Garamond",Garamond,Georgia,"Times New Roman",serif;
  font-size:clamp(18px,1.15vw,22px);
  font-weight:400;
}

.trh-chapter-index-crown{
  color:#e9c66d;
  font-family:Georgia,"Times New Roman",serif;
  font-size:.83em;
  text-align:center;
  text-shadow:0 0 8px rgba(239,202,113,.20);
}

.trh-chapter-index-number{
  color:#e4c37b;
  font-family:"Cinzel",Georgia,"Times New Roman",serif;
  font-size:.68em;
  font-weight:600;
  letter-spacing:.045em;
  white-space:nowrap;
}

.trh-chapter-index-separator{
  color:rgba(239,210,143,.46);
  text-align:center;
}

.trh-chapter-index-name{
  min-width:0;
  overflow:hidden;
  color:inherit;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.trh-chapter-index-item--upcoming{
  color:rgba(231,218,196,.42);
  cursor:default;
}

.trh-chapter-index-item--upcoming .trh-chapter-index-crown,
.trh-chapter-index-item--upcoming .trh-chapter-index-number{
  color:rgba(214,184,111,.34);
}

.trh-chapter-index-soon{
  flex:0 0 auto;
  color:rgba(225,197,128,.36);
  font-family:"Cinzel",Georgia,"Times New Roman",serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.11em;
}

.trh-chapter-index-foot{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  padding:12px 22px 13px;
  border-top:1px solid rgba(226,190,106,.16);
  color:rgba(239,215,159,.54);
  font-family:"Cinzel",Georgia,"Times New Roman",serif;
  font-size:10px;
  font-weight:600;
  letter-spacing:.15em;
  text-align:center;
}

/*
   =========================================================
   TRH CHARACTER GALLERY — current carousel base
   Artwork is intentionally absent. The 16:9 stage uses a restrained
   black-purple field so portrait scale, spacing, navigation and chapter
   hierarchy can be finalized before the final Crystal Garden Hall is drawn.
   =========================================================
*/

.trh-desktop-artwork::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
}

.trh-desktop-artwork::after{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
}

.trh-character-gallery-status{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.trh-character-carousel:focus-visible{
  border-radius:28px;
  box-shadow:inset 0 0 0 1px rgba(229,196,119,.30);
}

.trh-character-monogram{
  font-family:"Cinzel",Georgia,"Times New Roman",serif;
  font-size:clamp(54px,5vw,94px);
  font-weight:500;
  letter-spacing:.05em;
  color:rgba(222,192,128,.22);
  text-shadow:0 0 30px rgba(122,61,151,.16);
}

.trh-character-placeholder-note{
  font-family:"Cinzel",Georgia,"Times New Roman",serif;
  font-size:10px;
  font-weight:600;
  letter-spacing:.28em;
  color:rgba(224,201,154,.27);
}

.trh-character-caption h2,
.trh-character-caption p{
  margin:0;
}

.trh-character-card:not(.is-active) .trh-character-caption p{
  opacity:.48;
}

.trh-character-dot:hover,
.trh-character-dot:focus-visible{
  border-color:#efd28b;
  outline:none;
  transform:scale(1.18);
}

/* Chapter box remains the fixed right-hand owner of reading navigation. */

@media (max-width:1180px) and (min-width:768px){
  .trh-character-caption p{
    display:none;
  }
}

/*
   =========================================================
   TRH HEADER + COMPONENT DETAIL OWNER
   Typography, interaction states and decorative control details.
   Geometry is owned by the composition sections below.
   =========================================================
*/

/* Header geometry from the approved mockup. */

.trh-page .trh-author-name,
.trh-page .trh-return-top,
.trh-page .trh-section-nav a,
.trh-page .trh-section-nav span,
.trh-page .trh-topbar-divider{
  font-family:"Cinzel",Georgia,"Times New Roman",serif;
  font-weight:600;
  letter-spacing:.11em;
  line-height:1;
}

.trh-page .trh-author-name{
  color:#ead091;
  font-size:clamp(13px,.95vw,18px);
  text-decoration:none;
  white-space:nowrap;
  text-shadow:0 2px 12px rgba(0,0,0,.72);
}

.trh-page .trh-topbar-divider{
  color:rgba(232,199,121,.78);
  font-size:clamp(14px,.92vw,18px);
}

.trh-page .trh-return-top{
  padding:2px 0 5px;
  border-bottom:1px solid rgba(219,174,85,.30);
  color:rgba(235,210,158,.88);
  font-size:clamp(12px,.79vw,16px);
  letter-spacing:.12em;
}

.trh-page .trh-section-nav a{
  color:rgba(225,194,126,.84);
  font-size:clamp(11px,.72vw,15px);
  text-decoration:none;
  transition:color .18s ease,text-shadow .18s ease;
}

.trh-page .trh-section-nav span{
  color:rgba(220,183,103,.55);
  font-size:clamp(10px,.66vw,13px);
}

.trh-page .trh-section-nav .trh-section-nav-pending{
  color:rgba(225,194,126,.48);
  font-size:clamp(11px,.72vw,15px);
  letter-spacing:.11em;
  cursor:default;
}

.trh-page .trh-section-nav a:hover,
.trh-page .trh-section-nav a:focus-visible,
.trh-page .trh-author-name:hover,
.trh-page .trh-author-name:focus-visible{
  color:#f3d993;
  text-shadow:0 0 12px rgba(229,196,119,.18);
  outline:none;
}

.trh-character-pagination::before{
  right:100%;
}

.trh-character-pagination::after{
  left:100%;
  transform:scaleX(-1);
}

.trh-character-dot.is-active{
  background:#edcb78;
  box-shadow:0 0 10px rgba(236,202,118,.24);
}

/*
   =========================================================
   TRH DESKTOP COMPOSITION
   Geometry is locked against the approved UI reference image.
   Key correction: cards are no longer vertically centered inside the full
   16:9 artwork stage. Their visible composition is sized to the viewport,
   so the portrait rail and chapter panel sit inside the first screen exactly
   like the approved mockup instead of stretching toward the stage bottom.
   =========================================================
*/

/* Header in the reference sits very close to the top edge. */

.trh-page .trh-topbar{
  padding:4px 14px 0 13px;
  align-items:flex-start;
}

.trh-page .trh-topbar-left{
  align-items:center;
  gap:11px;
}

.trh-page .trh-topbar .mini-sigil{
  box-sizing:border-box;
  display:grid;
  place-items:center;
  border:1px solid rgba(235,197,104,.86);
  border-radius:50%;
  color:#efd07b;
  font-family:"Cinzel",Georgia,"Times New Roman",serif;
  font-weight:600;
  letter-spacing:.02em;
  width:50px;
  height:50px;
  font-size:21px;
}

.trh-page .trh-section-nav{
  pointer-events:auto;
  display:flex;
  align-items:center;
  padding:2px 3px 0 0;
  white-space:nowrap;
  margin-top:13px;
  padding-right:1px;
  gap:11px;
}

/*
   Gallery reference box. It intentionally follows viewport height, not the
   full 16:9 stage height, because the approved desktop composition is a
   single-screen hero.
*/

/*
   Reference portrait proportions:
   active frame ~350px wide; side frames are ~82% and begin ~72px lower.
*/

.trh-character-card.is-active,
.trh-character-card.is-prev,
.trh-character-card.is-next{
  opacity:1;
  pointer-events:auto;
}

/*
   Frame body: no rectangular panel behind it. The portrait surface itself is
   clipped to the same narrow royal-arch silhouette, while the gold frame artwork remains outside the clip and therefore stays delicate.
*/

.trh-character-card.is-active .trh-character-placeholder{
  box-shadow:inset 0 0 62px rgba(105,44,137,.07);
}

/*
   The approved frame is slender and architectural — not a rounded card.
   The crest is small and integrated; the base ornament rises only slightly.
*/

/*
   Navigation is vertically aligned to the portrait faces rather than to the
   full 16:9 stage.
*/

.trh-character-arrow span{
  display:block;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  line-height:.9;
  color:#f0d37f;
  margin-top:-3px;
  font-size:40px;
}

/* Rail belongs under the portraits, not at the bottom of the 16:9 canvas. */

.trh-character-dot{
  margin:0;
  padding:0;
  border:1px solid rgba(225,190,116,.68);
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  transition:background .18s ease,box-shadow .18s ease,transform .18s ease;
  -webkit-tap-highlight-color:transparent;
  border-color:rgba(222,181,91,.82);
  width:12px;
  height:12px;
}

/*
   Chapter panel in the reference is narrower and fully visible in the first
   viewport; it does not continue far below the fold.
*/

.trh-chapter-index::before{
  content:"";
  position:absolute;
  pointer-events:none;
  border:1px solid rgba(244,216,149,.16);
  border-radius:15px;
  inset:7px;
}

.trh-chapter-index-head{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  text-align:center;
  border-bottom:1px solid rgba(226,190,106,.18);
  background:linear-gradient(180deg,rgba(68,28,91,.16),rgba(18,7,31,.04));
  padding:16px 30px 18px;
}

/*
   Touch-owned 2048×1152 master keeps the same relative composition, but uses
   fixed stage coordinates so portrait and landscape remain isolated.
*/

html.trh-virtual-landscape body.trh-page .trh-character-frame,
body.trh-page.trh-portrait-stage .trh-character-frame{
  width:382px;
  height:704px;
  min-height:704px;
  flex-basis:704px;
}

/*
   =========================================================
   TRH PORTRAIT GEOMETRY
   The frame is no longer approximated with CSS arches.
   It uses the approved transparent frame artwork as a dedicated overlay asset.
   Desktop geometry is also re-locked to the reference proportions.
   =========================================================
*/

/*
   Reference master proportions (approved mockup: 1801 × 873):
   active frame ≈ 339 × 622, side portraits ≈ 82%, side top +70px,
   portrait-centre spacing ≈ 349px, pagination ≈ y796.
*/

.trh-character-carousel{
  position:absolute;
  outline:none;
  touch-action:pan-y;
  inset:0 34px 0;
  overflow:visible;
}

.trh-character-track{
  position:absolute;
  inset:0;
  overflow:visible;
}

.trh-character-card.is-active{
  z-index:3;
  filter:none;
  left:50%;
  top:0;
  transform:translateX(-50%) scale(1);
}

.trh-character-card.is-prev{
  z-index:2;
  left:calc(50% - var(--trh-card-shift));
  top:clamp(64px,3.88vw,76px);
  transform:translateX(-50%) scale(.82);
  filter:none;
  opacity:1;
}

.trh-character-card.is-next{
  z-index:2;
  left:calc(50% + var(--trh-card-shift));
  top:clamp(64px,3.88vw,76px);
  transform:translateX(-50%) scale(.82);
  filter:none;
  opacity:1;
}

/*
   Exact frame aspect from the approved centre portrait.
   The external frame artwork follows the approved screenshot silhouette;
   no CSS border, border-radius, or pseudo-element participates.
*/

.trh-character-frame::before,
.trh-character-frame::after{
  display:none!important;
  content:none!important;
}

/*
   Placeholder is deliberately subordinate to the frame. It follows the same
   tall portrait silhouette instead of reading as a rectangular purple card.
*/

.trh-character-placeholder{
  place-content:center;
  justify-items:center;
  gap:12px;
  color:rgba(229,196,119,.52);
  text-align:center;
  z-index:0;
  box-shadow:none;
}

.trh-character-card.is-prev .trh-character-placeholder,
.trh-character-card.is-next .trh-character-placeholder{
  opacity:.34;
  filter:saturate(.55) brightness(.72);
}

.trh-character-arrow:hover,
.trh-character-arrow:focus-visible{
  color:#fff0bd;
  border-color:#efd28b;
  background:rgba(47,21,61,.88);
  outline:none;
  transform:scale(1.055);
}

.trh-character-arrow:active{
  transform:scale(.96);
}

/* Reference rail centre y≈796 at 1801px width. */

.trh-character-pagination::before,
.trh-character-pagination::after{
  content:"";
  position:absolute;
  top:50%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(214,171,81,.48));
  width:clamp(150px,10.55vw,195px);
}

/* Keep the chapter panel on its own right-hand third, matching the reference. */

.trh-chapter-index{
  position:absolute;
  z-index:8;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1.5px solid rgba(221,184,104,.84);
  -webkit-backdrop-filter:blur(8px) saturate(1.05);
  backdrop-filter:blur(8px) saturate(1.05);
  color:#f5e7c8;
  line-height:1.2;
  bottom:auto;
  border-radius:22px;
  top:clamp(70px,4.0vw,76px);
  width:var(--trh-chapter-w);
  right:var(--trh-chapter-right);
  height:calc(100vh - 94px);
  max-height:790px;
  min-height:680px;
}

/* 2048 × 1152 touch/virtual-landscape owner: same approved proportions. */

html.trh-virtual-landscape body.trh-page .trh-character-arrow,
body.trh-page.trh-portrait-stage .trh-character-arrow{
  top:420px;
}

html.trh-virtual-landscape body.trh-page .trh-character-pagination,
body.trh-page.trh-portrait-stage .trh-character-pagination{
  top:846px;
}

/*
   =========================================================
   TRH FRAME + CAPTION GEOMETRY
   Re-traced directly against the approved UI reference crop.
   The frame now uses the reference's true proportions: narrow crest,
   shallow multi-arc crown line, straight sides, shallow bottom sweep.
   =========================================================
*/

.trh-character-frame-art{
  position:absolute;
  z-index:5;
  display:block;
  overflow:visible;
  pointer-events:none;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.85));
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  opacity:.96;
}

.trh-character-card.is-active .trh-character-frame-art{
  opacity:1;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.90)) drop-shadow(0 0 4px rgba(236,196,106,.10));
}

.trh-character-card.is-prev .trh-character-frame-art,
.trh-character-card.is-next .trh-character-frame-art{
  opacity:.54;
  filter:brightness(.78) saturate(.72) drop-shadow(0 1px 1px rgba(0,0,0,.88));
}

.trh-character-caption h2{
  font-family:"Cinzel",Georgia,"Times New Roman",serif;
  text-shadow:0 2px 13px rgba(0,0,0,.76);
  margin:0;
  color:#d8b973;
  line-height:1.05;
  letter-spacing:.075em;
  font-weight:600;
  font-size:clamp(18px,1.08vw,20px);
}

.trh-character-card.is-active .trh-character-caption h2{
  color:#efd18a;
  font-size:clamp(21px,1.28vw,23px);
}

.trh-character-caption p{
  font-family:"Cinzel",Georgia,"Times New Roman",serif;
  font-weight:600;
  color:rgba(219,181,108,.62);
  letter-spacing:.11em;
  margin-top:6px;
  font-size:clamp(8px,.50vw,9px);
}

html.trh-virtual-landscape body.trh-page .trh-character-card,
body.trh-page.trh-portrait-stage .trh-character-card{
  height:700px;
  --trh-card-shift:398px;
  width:386px;
}

html.trh-virtual-landscape body.trh-page .trh-character-card.is-prev,
html.trh-virtual-landscape body.trh-page .trh-character-card.is-next,
body.trh-page.trh-portrait-stage .trh-character-card.is-prev,
body.trh-page.trh-portrait-stage .trh-character-card.is-next{
  top:80px;
}

/* Frame aspect is locked to the live transparent PNG asset. */

.trh-character-frame{
  position:relative;
  width:100%;
  height:auto;
  min-height:0;
  flex:0 0 auto;
  overflow:visible;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  aspect-ratio:340 / 653;
}

/* Approved desktop portrait geometry. */

.trh-character-gallery{
  position:absolute;
  z-index:7;
  min-width:0;
  color:var(--trh-ivory);
  line-height:1.2;
  right:calc(var(--trh-chapter-w) + var(--trh-chapter-right) + var(--trh-gallery-gap));
  left:clamp(25px,1.55vw,30px);
  bottom:auto;
  height:min(810px,calc(100vh - 56px));
  overflow:visible;
  top:clamp(45px,2.68vw,53px);
}

.trh-character-card{
  align-items:stretch;
  transition:transform .52s cubic-bezier(.2,.72,.18,1),opacity .42s ease,filter .42s ease;
  will-change:transform,opacity;
  position:absolute;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  opacity:0;
  pointer-events:none;
  transform:translateX(-50%) scale(.82);
  left:50%;
  top:0;
  height:auto;
  max-height:none;
  gap:0;
  transform-origin:top center;
  --trh-card-shift:clamp(336px,19.38vw,365px);
  width:clamp(312px,19.32vw,348px);
}

.trh-character-card.is-prev,
.trh-character-card.is-next{
  top:clamp(70px,4.10vw,76px);
  transform:translateX(-50%) scale(.81,.83);
}

.trh-character-caption{
  flex:0 0 auto;
  min-height:52px;
  padding-top:0;
  text-align:center;
  position:relative;
  z-index:6;
  margin-top:-14px;
}

.trh-character-card.is-prev .trh-character-caption,
.trh-character-card.is-next .trh-character-caption{
  opacity:.62;
  transform:translateY(10px);
}

.trh-character-arrow{
  position:absolute;
  z-index:9;
  margin:0;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid rgba(229,196,119,.82);
  border-radius:50%;
  color:#f0d68f;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,transform .18s ease,border-color .18s ease;
  -webkit-tap-highlight-color:transparent;
  box-shadow:0 8px 24px rgba(0,0,0,.46),
    inset 0 0 18px rgba(92,44,122,.15),
    0 0 13px rgba(225,181,88,.09);
  border-color:rgba(224,185,96,.82);
  background:rgba(13,7,21,.73);
  transform:none;
  width:clamp(54px,3.15vw,58px);
  height:clamp(54px,3.15vw,58px);
  top:clamp(327px,19.05vw,345px);
}

.trh-character-arrow--prev{
  left:8px;
}

.trh-character-arrow--next{
  right:8px;
}

.trh-character-pagination{
  position:absolute;
  z-index:9;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translateX(-50%);
  bottom:auto;
  left:50%;
  gap:12px;
  padding:9px 38px;
  top:clamp(721px,41.2vw,749px);
}

/*
   =========================================================
   TRH PORTRAIT CROP ANCHORS
   Current markup uses .trh-portrait-image inside .trh-portrait-window.
   Keep character-specific hooks on the live class so future crop changes do
   not accidentally target the retired .trh-character-portrait selector.
   =========================================================
*/

body.trh-page .trh-character-card[data-character="syveris"] .trh-portrait-image,
body.trh-page .trh-character-card[data-character="lyra"] .trh-portrait-image,
body.trh-page .trh-character-card[data-character="obewich"] .trh-portrait-image{
  object-position:center 35%;
}

/*
   =========================================================
   TRH CHAPTER WIDTH BALANCE
   Keep the approved right margin exactly where it is. Reduce the chapter
   panel by ~1/6 in width; because the gallery's right edge is derived from
   the chapter width, the portrait carousel gains that space automatically
   and recentres slightly to the right without changing portrait scale.
   =========================================================
*/

.trh-desktop-artwork{
  --trh-gold:#e5c477;
  --trh-gold-soft:#b99453;
  --trh-ivory:#f3e4c5;
  --trh-ink:#09050f;
  aspect-ratio:16/9;
  isolation:isolate;
  --trh-chapter-right:clamp(26px,2.0vw,36px);
  --trh-gallery-gap:clamp(30px,1.9vw,36px);
  --trh-chapter-w:clamp(475px,27.44vw,508px);
  /* --trh-chapter-right intentionally unchanged */
}

/*
   Touch / virtual-landscape uses fixed stage coordinates, so mirror the same
   5/6 chapter-width reduction while preserving the existing 41px right gap.
*/

html.trh-virtual-landscape body.trh-page .trh-desktop-artwork,
body.trh-page.trh-portrait-stage .trh-desktop-artwork{
  --trh-chapter-w:562px;
  --trh-chapter-right:41px;
  --trh-gallery-gap:39px;
}

html.trh-virtual-landscape body.trh-page .trh-character-gallery,
body.trh-page.trh-portrait-stage .trh-character-gallery{
  bottom:auto;
  top:58px;
  left:31px;
  height:932px;
  right:642px;
  /* 562 panel + 41 right margin + 39 gallery gap */
}

html.trh-virtual-landscape body.trh-page .trh-chapter-index,
body.trh-page.trh-portrait-stage .trh-chapter-index{
  bottom:auto;
  top:82px;
  height:1036px;
  max-height:none;
  min-height:0;
  right:41px;
  width:562px;
}

/* Inner arched portrait window; the ornate frame remains outside the crop. */

body.trh-page .trh-character-frame .trh-portrait-window{
  position:absolute;
  z-index:1;
  top:13.4%;
  right:7.5%;
  bottom:calc(10.5% - 10px);
  left:7.5%;
  box-sizing:border-box;
  padding:2px;
  overflow:hidden;
  border-radius:50% 50% 0 0 / 12% 12% 0 0;
  background:linear-gradient(145deg,#f0d18b,#aa7a37 52%,#e1bb72);
  box-shadow:0 0 0 1px rgba(16,8,22,.85),0 2px 12px rgba(0,0,0,.38);
}

body.trh-page .trh-portrait-window .trh-character-placeholder{
  position:relative!important;
  inset:auto!important;
  display:flex;
  width:100%;
  height:100%;
  min-height:0;
  box-sizing:border-box;
  border:0;
  border-radius:50% 50% 0 0 / 12% 12% 0 0!important;
  clip-path:none!important;
  overflow:hidden;
  background:linear-gradient(180deg,#291733,#110b19)!important;
}

body.trh-page .trh-portrait-window .trh-character-placeholder::before,
body.trh-page .trh-portrait-window .trh-character-placeholder::after{
  display:none!important;
  content:none!important;
}

/* For future artwork, add an image within the arch. Never stretch source images. */

body.trh-page .trh-portrait-window .trh-portrait-image{
  position:absolute;
  inset:2px;
  width:calc(100% - 4px);
  height:calc(100% - 4px);
  display:block;
  object-fit:cover;
  object-position:center 35%;
  border-radius:50% 50% 0 0 / 12% 12% 0 0;
}

body.trh-page .trh-character-frame .trh-character-frame-art{
  z-index:5;
  pointer-events:none;
}

/* Current sapphire-twilight page treatment. */

html:has(body.trh-page),body.trh-page{
  background:#17234b!important;
}

body.trh-page .trh-desktop-artwork::before{
  background:linear-gradient(90deg,rgba(7,15,39,.22),transparent 27%,transparent 64%,rgba(13,18,47,.25))!important;
  opacity:1!important;
}

/* Full-bleed TRH world artwork. */

body.trh-page .trh-desktop-artwork{
  background:linear-gradient(90deg,rgba(8,9,27,.34) 0%,rgba(9,10,30,.20) 50%,rgba(9,8,24,.37) 100%),url("../assets/trh/trh-stage-artwork-v16.130.webp") center center / cover no-repeat!important;
}

body.trh-page .trh-desktop-artwork::after{
  box-shadow:inset 0 0 105px rgba(5,5,20,.25),inset 0 -50px 85px rgba(5,5,20,.19)!important;
}

/* Chapter panel background remains translucent; text and borders stay opaque. */

body.trh-page .trh-chapter-index{
  box-shadow:0 24px 64px rgba(9,12,35,.35),0 0 0 1px rgba(120,104,160,.3),inset 0 1px 0 rgba(255,241,196,.12)!important;
  background:radial-gradient(ellipse at 45% -12%,rgba(104,112,183,.175),transparent 56%),linear-gradient(165deg,rgba(30,29,72,.70),rgba(18,21,53,.70))!important;
}

/* Desktop gallery vertical offset; touch modes own their geometry separately. */

@media (min-width:768px) and (hover:hover) and (pointer:fine){
  html:not(.trh-virtual-landscape) body.trh-page:not(.trh-portrait-stage) .trh-character-gallery{
    top:calc(clamp(45px,2.68vw,53px) + 25px);
  }
}

/*
   =========================================================
   TRH DESKTOP CONTAINMENT OWNER
   Desktop artwork is a 16:9 stage. Below 1600px, vertical placement is
   derived from the stage height (56.25vw) instead of 100vh so controls and
   the chapter panel cannot drift below the artwork on taller viewports.
   Touch portrait/virtual-landscape keep their fixed 2048×1152 geometry.
   =========================================================
*/

@media (min-width:768px) and (max-width:1599px) and (hover:hover) and (pointer:fine){
  html:not(.trh-virtual-landscape) body.trh-page:not(.trh-portrait-stage) .trh-character-gallery{
    height:calc(56.25vw - 70px);
  }

  html:not(.trh-virtual-landscape) body.trh-page:not(.trh-portrait-stage) .trh-character-pagination{
    top:calc(56.25vw - 118px);
  }

  html:not(.trh-virtual-landscape) body.trh-page:not(.trh-portrait-stage) .trh-chapter-index{
    height:calc(56.25vw - 92px);
    min-height:0;
    max-height:none;
  }
}

/*
   Compact desktop/laptop owner. This block intentionally comes last so the
   old 1180/1320 historical tuning cannot override the current geometry.
*/

@media (min-width:768px) and (max-width:1320px) and (hover:hover) and (pointer:fine){
  html:not(.trh-virtual-landscape) body.trh-page:not(.trh-portrait-stage) .trh-desktop-artwork{
    --trh-chapter-w:clamp(320px,31vw,410px);
    --trh-chapter-right:clamp(18px,2vw,26px);
    --trh-gallery-gap:clamp(18px,2vw,26px);
  }

  html:not(.trh-virtual-landscape) body.trh-page:not(.trh-portrait-stage) .trh-character-gallery{
    top:clamp(50px,5vw,65px);
    left:clamp(16px,2vw,24px);
    right:calc(var(--trh-chapter-w) + var(--trh-chapter-right) + var(--trh-gallery-gap));
    height:calc(56.25vw - 70px);
  }

  html:not(.trh-virtual-landscape) body.trh-page:not(.trh-portrait-stage) .trh-character-carousel{
    left:clamp(24px,2.5vw,34px);
    right:clamp(24px,2.5vw,34px);
  }

  html:not(.trh-virtual-landscape) body.trh-page:not(.trh-portrait-stage) .trh-character-card{
    --trh-card-shift:clamp(235px,24vw,315px);
    width:clamp(220px,21.6vw,286px);
  }

  html:not(.trh-virtual-landscape) body.trh-page:not(.trh-portrait-stage) .trh-character-card.is-prev,
  html:not(.trh-virtual-landscape) body.trh-page:not(.trh-portrait-stage) .trh-character-card.is-next{
    top:clamp(45px,4vw,56px);
  }

  html:not(.trh-virtual-landscape) body.trh-page:not(.trh-portrait-stage) .trh-character-arrow{
    top:clamp(225px,20vw,280px);
    width:clamp(48px,4vw,54px);
    height:clamp(48px,4vw,54px);
  }

  html:not(.trh-virtual-landscape) body.trh-page:not(.trh-portrait-stage) .trh-character-pagination{
    top:calc(56.25vw - 110px);
  }

  html:not(.trh-virtual-landscape) body.trh-page:not(.trh-portrait-stage) .trh-character-pagination::before,
  html:not(.trh-virtual-landscape) body.trh-page:not(.trh-portrait-stage) .trh-character-pagination::after{
    width:clamp(92px,10vw,132px);
  }

  html:not(.trh-virtual-landscape) body.trh-page:not(.trh-portrait-stage) .trh-chapter-index{
    top:clamp(50px,4vw,58px);
    right:var(--trh-chapter-right);
    width:var(--trh-chapter-w);
    height:calc(56.25vw - 76px);
    min-height:0;
    max-height:none;
  }
}

/*
   =========================================================
   TRH ACCESSIBILITY OWNER — reduced motion
   Kept last so motion preferences cannot be re-enabled by component rules.
   =========================================================
*/

@media (prefers-reduced-motion:reduce){
  .trh-chapter-index-item,
  .trh-character-card,
  .trh-character-arrow,
  .trh-character-dot{
    transition:none;
  }
}