/* TENIMPER public visual polish v55.25.110
   Presentation only: no reader sizing/leading/width overrides, no header JS. */
:root{
  --ti-bg:#f5eee2;
  --ti-bg-deep:#eadcc7;
  --ti-surface:rgba(255,252,246,.9);
  --ti-surface-solid:#fffaf2;
  --ti-surface-soft:#f2e6d5;
  --ti-ink:#2f241d;
  --ti-muted:#75665a;
  --ti-gold:#9a6828;
  --ti-gold-strong:#b77a2d;
  --ti-gold-soft:#ddbb78;
  --ti-line:rgba(125,82,34,.20);
  --ti-line-strong:rgba(151,99,38,.35);
  --ti-shadow:0 22px 64px rgba(75,48,25,.12);
  --ti-shadow-soft:0 10px 34px rgba(75,48,25,.08);
  --ti-radius:24px;
  --ti-radius-sm:16px;
}
html[data-theme="dark"]{
  --ti-bg:#0d0b0a;
  --ti-bg-deep:#17110f;
  --ti-surface:rgba(24,19,17,.88);
  --ti-surface-solid:#171311;
  --ti-surface-soft:#211917;
  --ti-ink:#eee3d2;
  --ti-muted:#a99b8e;
  --ti-gold:#c5964f;
  --ti-gold-strong:#d8a654;
  --ti-gold-soft:#8d6738;
  --ti-line:rgba(208,157,83,.17);
  --ti-line-strong:rgba(208,157,83,.31);
  --ti-shadow:0 26px 74px rgba(0,0,0,.42);
  --ti-shadow-soft:0 10px 32px rgba(0,0,0,.28);
}
html{background:var(--ti-bg)}
body{
  overflow-x:hidden;
  color:var(--ti-ink);
  background:
    radial-gradient(circle at 10% 3%,rgba(184,125,48,.10),transparent 32rem),
    radial-gradient(circle at 92% 22%,rgba(122,52,36,.07),transparent 36rem),
    linear-gradient(180deg,var(--ti-bg) 0%,var(--ti-bg-deep) 160%);
}
html[data-theme="dark"] body{
  background:
    radial-gradient(circle at 12% 1%,rgba(161,99,38,.11),transparent 34rem),
    radial-gradient(circle at 88% 26%,rgba(89,27,24,.10),transparent 40rem),
    linear-gradient(180deg,#0d0b0a 0%,#120d0c 60%,#0b0908 100%);
}

/* Shared public controls */
.button,
a.button,
button.button{
  border-radius:999px;
  min-height:44px;
  padding:.76rem 1.24rem;
  border:1px solid var(--ti-line-strong);
  box-shadow:none;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.button:not(.secondary),a.button:not(.secondary){
  background:linear-gradient(135deg,var(--ti-gold-strong),#8d581e);
  color:#fff9ef;
  border-color:transparent;
  box-shadow:0 8px 24px rgba(132,83,30,.18);
}
html[data-theme="dark"] .button:not(.secondary),
html[data-theme="dark"] a.button:not(.secondary){color:#17100b}
.button.secondary,a.button.secondary{
  background:var(--ti-surface);
  color:var(--ti-ink);
  backdrop-filter:blur(12px);
}
.button:hover,a.button:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(111,68,26,.17)}
.button:active,a.button:active{transform:translateY(0)}
.text-link{color:var(--ti-gold);text-underline-offset:.22em;text-decoration-thickness:1px}
.eyebrow{color:var(--ti-gold)!important;letter-spacing:.16em}
.meta{color:var(--ti-muted)}
.meta span{border-color:var(--ti-line)!important}

/* Existing stable header/footer: presentation only. */
.site-header{
  border-bottom:1px solid var(--ti-line)!important;
  background:color-mix(in srgb,var(--ti-bg) 82%,transparent)!important;
  backdrop-filter:blur(18px) saturate(120%);
  box-shadow:0 8px 30px rgba(31,19,12,.05);
}
html[data-theme="dark"] .site-header{box-shadow:0 8px 30px rgba(0,0,0,.18)}
.site-header a{transition:color .18s ease,background .18s ease,border-color .18s ease}
.site-footer{
  margin-top:5rem;
  border-top:1px solid var(--ti-line)!important;
  background:linear-gradient(180deg,transparent,var(--ti-surface-soft));
}
.site-footer a{color:inherit}

/* Homepage */
.hero{
  position:relative;
  isolation:isolate;
  width:min(1180px,calc(100% - 40px));
  min-height:clamp(440px,64vh,720px);
  margin:clamp(22px,4vw,58px) auto clamp(44px,6vw,80px);
  display:grid;
  align-items:end;
  overflow:hidden;
  border:1px solid var(--ti-line);
  border-radius:clamp(24px,4vw,38px);
  background:
    linear-gradient(90deg,rgba(12,9,8,.90) 0%,rgba(17,11,10,.68) 45%,rgba(17,11,10,.20) 100%),
    url('/ten-imperatora-cover.png') center 31%/cover no-repeat;
  box-shadow:var(--ti-shadow);
}
.hero::before{
  content:"影";
  position:absolute;
  z-index:-1;
  right:clamp(-1rem,3vw,2rem);
  bottom:-.25em;
  font:400 clamp(13rem,31vw,31rem)/.8 Georgia,serif;
  color:rgba(218,169,91,.075);
  transform:rotate(-4deg);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;inset:auto 0 0;height:44%;z-index:-2;
  background:linear-gradient(transparent,rgba(7,5,5,.62));
}
.hero-inner{
  width:min(720px,100%);
  margin:0!important;
  padding:clamp(30px,6vw,72px)!important;
  color:#f4eadb;
  text-shadow:0 2px 16px rgba(0,0,0,.35);
}
.hero-inner h1{
  margin:0 0 .25em;
  font-size:clamp(3.1rem,8vw,7rem);
  line-height:.91;
  letter-spacing:-.045em;
  font-weight:500;
  text-wrap:balance;
}
.hero-inner>p{max-width:640px;margin:0 0 1.8rem;font-size:clamp(1rem,1.6vw,1.25rem);line-height:1.7;color:rgba(247,238,224,.86)}
.hero .button.secondary{background:rgba(20,15,13,.44);color:#f6ead5;border-color:rgba(227,187,119,.38)}

.section{
  width:min(1180px,calc(100% - 40px));
  margin-inline:auto;
}
.section-heading{gap:1.25rem;margin-bottom:1.35rem}
.section-heading h2{margin:.18rem 0 0;font-size:clamp(1.9rem,4vw,3rem);font-weight:500;letter-spacing:-.025em;text-wrap:balance}
.story-grid{gap:clamp(18px,2.5vw,30px)}
.story-card{
  position:relative;
  overflow:hidden;
  min-height:420px;
  border:1px solid var(--ti-line)!important;
  border-radius:var(--ti-radius)!important;
  background:var(--ti-surface)!important;
  box-shadow:var(--ti-shadow-soft);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.story-card:hover{transform:translateY(-4px);border-color:var(--ti-line-strong)!important;box-shadow:var(--ti-shadow)}
.story-card>img{height:clamp(260px,34vw,430px)!important;object-fit:cover;transition:transform .5s ease,filter .5s ease}
.story-card:hover>img{transform:scale(1.025)}
.story-card .card-body{padding:clamp(20px,3vw,32px)!important}
.story-card h3{margin:.3rem 0 .65rem;font-size:clamp(1.65rem,3vw,2.35rem);font-weight:500;letter-spacing:-.02em}
.story-card .card-body>p:not(.eyebrow):not(.status){color:var(--ti-muted);line-height:1.7}
.story-card .status{margin-top:1.2rem;color:var(--ti-gold);font-weight:700}
.latest{
  overflow:hidden;
  border:1px solid var(--ti-line)!important;
  border-radius:var(--ti-radius)!important;
  background:var(--ti-surface)!important;
  box-shadow:var(--ti-shadow-soft);
}
.latest-media{min-height:360px;overflow:hidden}
.latest-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.latest:hover .latest-media img{transform:scale(1.02)}
.latest-copy{padding:clamp(26px,4vw,48px)!important}
.latest-copy h3{font-size:clamp(2rem,4vw,3.5rem);line-height:1.02;font-weight:500;letter-spacing:-.035em}
.latest-copy>p:not(.eyebrow){color:var(--ti-muted);font-size:1.03rem;line-height:1.75}
.quote-panel{
  position:relative;
  margin-top:clamp(42px,7vw,90px);
  padding:clamp(30px,5vw,56px)!important;
  overflow:hidden;
  border:1px solid var(--ti-line)!important;
  border-radius:var(--ti-radius)!important;
  background:linear-gradient(135deg,var(--ti-surface),var(--ti-surface-soft))!important;
  box-shadow:var(--ti-shadow-soft);
}
.quote-panel .mark{color:var(--ti-gold)!important;font-size:clamp(3rem,7vw,6rem)!important;opacity:.42}
.quote-panel p{max-width:820px;font-size:clamp(1.05rem,2vw,1.4rem)!important;line-height:1.8!important;color:var(--ti-ink)}

/* Chapter landing header */
.chapter-hero{
  width:min(1180px,calc(100% - 40px));
  margin:clamp(24px,4vw,54px) auto clamp(30px,5vw,64px);
  display:grid!important;
  grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr)!important;
  gap:0!important;
  overflow:hidden;
  border:1px solid var(--ti-line)!important;
  border-radius:clamp(22px,3vw,34px)!important;
  background:var(--ti-surface)!important;
  box-shadow:var(--ti-shadow);
}
.chapter-hero-media{min-height:clamp(360px,54vw,690px);background:var(--ti-surface-soft);overflow:hidden}
.chapter-hero-media img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .6s ease}
.chapter-hero:hover .chapter-hero-media img{transform:scale(1.015)}
.chapter-hero-copy{
  position:relative;
  display:flex!important;
  flex-direction:column;
  justify-content:center;
  padding:clamp(32px,6vw,78px)!important;
  background:
    radial-gradient(circle at 100% 0,rgba(183,122,45,.10),transparent 20rem),
    var(--ti-surface);
}
.chapter-hero-copy::after{
  content:"影";position:absolute;right:.1em;bottom:-.06em;
  font:400 clamp(8rem,18vw,17rem)/.8 Georgia,serif;
  color:color-mix(in srgb,var(--ti-gold) 8%,transparent);pointer-events:none
}
.chapter-hero-copy h1{position:relative;z-index:1;margin:.32rem 0 .75rem;font-size:clamp(2.6rem,6vw,5.6rem);line-height:.94;font-weight:500;letter-spacing:-.045em;text-wrap:balance}
.chapter-hero-copy>p:not(.eyebrow){position:relative;z-index:1;color:var(--ti-muted);font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.75;max-width:620px}
.chapter-hero-copy .meta{position:relative;z-index:1;margin-top:1.35rem}

/* Reader shell. Important: do not force font-size, line-height or reader width. */
.reader-surface{
  position:relative;
  margin-bottom:clamp(36px,6vw,76px)!important;
}
.reader-toggle{
  border:1px solid var(--ti-line-strong)!important;
  box-shadow:0 8px 28px rgba(42,25,13,.12)!important;
  backdrop-filter:blur(12px);
  transition:transform .18s ease,box-shadow .18s ease!important;
}
.reader-toggle:hover{transform:translateY(-1px);box-shadow:0 12px 34px rgba(42,25,13,.18)!important}
.reader-panel{
  border:1px solid var(--ti-line)!important;
  border-radius:20px!important;
  box-shadow:var(--ti-shadow)!important;
}
.reader-panel button,.reader-panel input{accent-color:var(--ti-gold)}
.reader-stage{
  border-radius:clamp(12px,2vw,20px);
}
.chapter-body .scene-divider,
.chapter-body>.scene-divider{color:var(--ti-gold);opacity:.72}
.chapter-paragraph--quote blockquote{
  border-left:2px solid var(--ti-gold)!important;
  padding-left:1.35em!important;
}
.chapter-paragraph--heading h2,
.chapter-paragraph--heading h3,
.chapter-paragraph--heading h4{letter-spacing:-.02em;text-wrap:balance}

/* Chapter navigation */
.chapter-nav{
  width:min(1180px,calc(100% - 40px));
  margin:clamp(28px,5vw,62px) auto!important;
  gap:16px!important;
}
.chapter-nav__link{
  min-height:124px;
  display:flex!important;
  flex-direction:column;
  justify-content:center;
  padding:22px 26px!important;
  border:1px solid var(--ti-line)!important;
  border-radius:20px!important;
  background:var(--ti-surface)!important;
  box-shadow:var(--ti-shadow-soft);
  color:var(--ti-ink)!important;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease!important;
}
.chapter-nav__link:hover{transform:translateY(-2px);border-color:var(--ti-line-strong)!important;box-shadow:var(--ti-shadow)}
.chapter-nav__link small,.chapter-nav__link>span:first-child{color:var(--ti-gold)!important;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem}
.chapter-nav__link span:not(:first-child),.chapter-nav__link strong{margin-top:.45rem;font-size:clamp(1rem,2vw,1.25rem);line-height:1.35}

/* Selection / bookmark surfaces: visually quieter without changing behavior. */
.bookmark-tools button,.selection-note-prompt,.annotation-card{
  border-color:var(--ti-line)!important;
  box-shadow:var(--ti-shadow-soft)!important;
}

@media (max-width:900px){
  .hero{min-height:560px;background-position:58% 30%}
  .hero-inner{padding:42px!important}
  .chapter-hero{grid-template-columns:1fr!important}
  .chapter-hero-media{min-height:0;aspect-ratio:16/11}
  .chapter-hero-copy{padding:34px!important}
  .latest{grid-template-columns:1fr!important}
  .latest-media{min-height:0;aspect-ratio:16/10}
}

@media (max-width:760px){
  :root{--ti-radius:20px;--ti-radius-sm:14px}
  body{background-attachment:scroll}
  .site-header{backdrop-filter:blur(14px) saturate(115%)}
  .hero,.section,.chapter-hero,.chapter-nav{width:calc(100% - 24px)}
  .hero{
    min-height:72svh;
    margin:12px auto 36px;
    border-radius:22px;
    background:
      linear-gradient(180deg,rgba(11,8,7,.22) 0%,rgba(11,8,7,.35) 42%,rgba(11,8,7,.92) 100%),
      url('/ten-imperatora-cover.png') 58% 30%/cover no-repeat;
  }
  .hero::before{font-size:12rem;right:-.18em;opacity:.65}
  .hero-inner{align-self:end;padding:26px 22px 28px!important}
  .hero-inner h1{font-size:clamp(3rem,15vw,5rem);line-height:.92}
  .hero-inner>p{font-size:.98rem;line-height:1.62;margin-bottom:1.25rem}
  .hero .actions{display:grid!important;grid-template-columns:1fr;gap:9px!important}
  .hero .button{width:100%;justify-content:center}
  .section{margin-block:34px!important}
  .section-heading{align-items:flex-end!important}
  .section-heading h2{font-size:2rem}
  .section-heading>.text-link{font-size:.84rem;white-space:nowrap}
  .story-grid{grid-template-columns:1fr!important;gap:16px}
  .story-card{min-height:0;border-radius:20px!important}
  .story-card>img{height:auto!important;aspect-ratio:16/10}
  .story-card .card-body{padding:20px!important}
  .story-card h3{font-size:1.75rem}
  .latest{border-radius:20px!important}
  .latest-copy{padding:22px!important}
  .latest-copy h3{font-size:2.15rem}
  .quote-panel{padding:26px 22px!important;margin-top:34px}
  .quote-panel .mark{font-size:3.25rem!important}

  .chapter-hero{margin:12px auto 24px;border-radius:22px!important}
  .chapter-hero-media{aspect-ratio:4/3}
  .chapter-hero-copy{padding:24px 20px 28px!important}
  .chapter-hero-copy h1{font-size:clamp(2.35rem,12vw,4rem);line-height:.96}
  .chapter-hero-copy>p:not(.eyebrow){font-size:.97rem;line-height:1.65}
  .chapter-hero-copy::after{font-size:8.5rem;opacity:.65}
  .reader-toggle{width:50px!important;height:50px!important}
  .reader-panel{max-width:calc(100vw - 20px)!important;border-radius:18px!important}
  .chapter-nav{grid-template-columns:1fr!important;margin:28px auto 42px!important}
  .chapter-nav__link{min-height:96px;padding:18px 20px!important;border-radius:17px!important}
  .chapter-nav__link--next{text-align:left!important;align-items:flex-start!important}
  .site-footer{margin-top:3rem}
}

@media (max-width:430px){
  .hero,.section,.chapter-hero,.chapter-nav{width:calc(100% - 18px)}
  .hero{min-height:68svh}
  .hero-inner{padding:22px 18px 24px!important}
  .chapter-hero-copy{padding:22px 17px 26px!important}
  .latest-copy,.story-card .card-body{padding:18px!important}
}

@media (prefers-reduced-motion:reduce){
  .button,.story-card,.story-card>img,.latest-media img,.chapter-hero-media img,.chapter-nav__link,.reader-toggle{transition:none!important}
}


/* v55.25.111 — light-theme rebalance.
   Dark mode intentionally inherits v110 unchanged. */
html:not([data-theme="dark"]){
  --ti-bg:#f6efe5;
  --ti-bg-deep:#eadcc9;
  --ti-surface:rgba(255,251,244,.94);
  --ti-surface-solid:#fffaf2;
  --ti-surface-soft:#f1e4d2;
  --ti-ink:#2d2119;
  --ti-muted:#6f5f52;
  --ti-gold:#986323;
  --ti-gold-strong:#b87523;
  --ti-gold-soft:#d7ad69;
  --ti-line:rgba(119,76,31,.18);
  --ti-line-strong:rgba(143,91,32,.31);
}

html:not([data-theme="dark"]) body{
  background:
    radial-gradient(circle at 8% 0,rgba(183,124,51,.08),transparent 31rem),
    radial-gradient(circle at 94% 20%,rgba(126,67,44,.045),transparent 36rem),
    linear-gradient(180deg,#faf5ed 0%,#f3eadf 58%,#ebdecc 100%)!important;
}

/* Keep the light page light, but let the hero remain cinematic instead of washing the art out. */
html:not([data-theme="dark"]) .hero{
  opacity:1!important;
  filter:none!important;
  background-blend-mode:normal!important;
  border-color:rgba(126,82,35,.28)!important;
  background:
    linear-gradient(90deg,rgba(20,14,11,.88) 0%,rgba(28,19,15,.69) 43%,rgba(32,22,17,.22) 76%,rgba(32,22,17,.08) 100%),
    url('/ten-imperatora-cover.png') center 31%/cover no-repeat!important;
  box-shadow:
    0 30px 76px rgba(74,45,20,.18),
    0 2px 0 rgba(255,255,255,.58) inset!important;
}
html:not([data-theme="dark"]) .hero::after{
  height:48%;
  background:linear-gradient(transparent,rgba(9,6,5,.72))!important;
}
html:not([data-theme="dark"]) .hero::before{
  color:rgba(220,170,90,.07)!important;
}
html:not([data-theme="dark"]) .hero-inner{
  color:#f7eddf!important;
  text-shadow:0 2px 18px rgba(0,0,0,.42)!important;
}
html:not([data-theme="dark"]) .hero-inner h1{
  color:#fff4e4!important;
}
html:not([data-theme="dark"]) .hero-inner>p{
  color:rgba(250,239,224,.88)!important;
}
html:not([data-theme="dark"]) .hero .button:not(.secondary){
  background:linear-gradient(135deg,#d29a43,#a7671e)!important;
  color:#21150d!important;
  border-color:rgba(255,235,190,.24)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.20)!important;
}
html:not([data-theme="dark"]) .hero .button.secondary{
  background:rgba(18,13,11,.48)!important;
  color:#f7ead5!important;
  border-color:rgba(229,190,122,.42)!important;
  backdrop-filter:blur(12px) saturate(115%);
}
html:not([data-theme="dark"]) .hero .button.secondary:hover{
  background:rgba(18,13,11,.62)!important;
  border-color:rgba(229,190,122,.60)!important;
}

/* Light cards should read as warm paper, not grey UI panels. */
html:not([data-theme="dark"]) .story-card,
html:not([data-theme="dark"]) .latest,
html:not([data-theme="dark"]) .chapter-hero,
html:not([data-theme="dark"]) .chapter-nav__link,
html:not([data-theme="dark"]) .quote-panel{
  background:linear-gradient(180deg,rgba(255,252,247,.98),rgba(250,243,233,.96))!important;
  border-color:rgba(128,83,36,.20)!important;
  box-shadow:0 18px 48px rgba(76,48,24,.09)!important;
}
html:not([data-theme="dark"]) .story-card:hover,
html:not([data-theme="dark"]) .chapter-nav__link:hover{
  border-color:rgba(151,96,34,.36)!important;
  box-shadow:0 24px 58px rgba(76,48,24,.13)!important;
}

/* Chapter header: keep the cover rich and make the copy look like a facing paper page. */
html:not([data-theme="dark"]) .chapter-hero-media{
  background:#d9c9b5!important;
}
html:not([data-theme="dark"]) .chapter-hero-media img{
  opacity:1!important;
  filter:saturate(.96) contrast(1.035) brightness(.97)!important;
}
html:not([data-theme="dark"]) .chapter-hero-copy{
  background:
    radial-gradient(circle at 100% 0,rgba(184,122,42,.10),transparent 21rem),
    linear-gradient(145deg,#fffaf2 0%,#f6ead9 100%)!important;
}
html:not([data-theme="dark"]) .chapter-hero-copy h1{color:#2c2018!important}
html:not([data-theme="dark"]) .chapter-hero-copy>p:not(.eyebrow){color:#67564a!important}
html:not([data-theme="dark"]) .chapter-hero-copy::after{color:rgba(143,91,31,.055)!important}

/* Reader chrome in light mode: parchment, not flat white. Reader-selected typography is untouched. */
html:not([data-theme="dark"]) .reader-toggle,
html:not([data-theme="dark"]) .reader-panel{
  background:rgba(255,250,241,.96)!important;
  color:#30231b!important;
  border-color:rgba(137,88,36,.25)!important;
}
html:not([data-theme="dark"]) .reader-panel{
  box-shadow:0 22px 64px rgba(71,43,21,.15)!important;
}

@media (max-width:760px){
  html:not([data-theme="dark"]) .hero{
    background:
      linear-gradient(180deg,rgba(15,10,8,.10) 0%,rgba(15,10,8,.18) 34%,rgba(15,10,8,.54) 60%,rgba(10,7,6,.94) 100%),
      url('/ten-imperatora-cover.png') 58% 30%/cover no-repeat!important;
    box-shadow:0 20px 48px rgba(74,45,20,.16)!important;
  }
  html:not([data-theme="dark"]) .hero-inner{
    background:linear-gradient(180deg,transparent,rgba(9,6,5,.18));
    border-radius:0 0 22px 22px;
  }
  html:not([data-theme="dark"]) .chapter-hero-copy{
    background:linear-gradient(180deg,#fffaf2 0%,#f4e7d5 100%)!important;
  }
}