/* Selected storyboard: three sequential views, warm side light and paper on dark wood. */
.history-scene::before { background-image: url('../assets/history-study-v1.webp'); background-position: left center; }
.history-scene::after { background-image: url('../assets/history-desk-v1.webp'); background-position: center top; }
.history-scene { filter: brightness(1.1); animation: historyDaylight 14s ease-in-out infinite alternate; }
@keyframes historyDaylight { from { opacity: .82; } to { opacity: 1; } }
#historyPage { --history-line: #ba955b66; width: min(840px,calc(100% - 80px)); min-height: calc(100svh - 80px); margin: 40px auto; padding: 0 32px 30px; border: 1px solid #a3844eaa; background: #08060538; }
.history-page-nav { height: 65px; margin: 0 -12px 23px; padding: 0 12px; font-size: 14px; border-bottom-color: #b6975c80; }
.history-page-nav a { order: 2; text-decoration: none; }
.history-brand { font-family: 'History Youran','Songti SC',serif; letter-spacing: .2em; }
.history-brand img { width: 36px; height: 40px; }
#historyPage .history-header { position: relative; padding: 0 0 16px; gap: 16px; align-items: center; }
#historyTitle { font-size: 46px; line-height: 1.2; letter-spacing: .12em; color: #f5e9ca; }
.history-kicker { margin-bottom: 10px; font-family: 'History Youran','Songti SC',serif; font-size: 12px; letter-spacing: .2em; }
.history-intro { font: 14px/1.8 'History Youran','Songti SC',serif; margin: 8px 0 0; letter-spacing: .13em; }
.history-seal { width: 34px; height: 34px; margin-top: 11px; padding: 0; border: 0; outline: 0; object-fit: contain; filter: drop-shadow(0 2px 4px #0008); transform: none; }
.history-wall-caption { padding-top: 5px; margin-bottom: 8px; }
.history-wall-caption > span,#historyCount { font: 13px/1.6 'History Youran','Songti SC',serif; }
#historyDeleteHint { font: 12px/1.6 'Songti SC',serif; color: #b9a47d; margin-bottom: 10px; }
:is(#historyList,.history-wall-echo) { --sign-width: clamp(70px,17.1vw,112px); --row-height: calc(var(--sign-width)*2.5 + 62px); grid-template-columns: repeat(3,minmax(0,1fr)); padding: 0; }
:is(#historyList,.history-wall-echo) > li,:is(#historyList,.history-wall-echo) > li:last-child { padding-top: 28px; }
:is(#historyList,.history-wall-echo) > li::before { top: 1px; height: 9px; background: #3d2116 url('../assets/dark-wood-diff-1k.jpg') center 47%/520px auto; border: 1px solid #8a493747; box-shadow: 0 5px 7px #000b; }
:is(#historyList,.history-wall-echo) > li .history-entry-copy { margin-top: 0; }
.history-entry-copy { width: var(--sign-width); height: calc(var(--sign-width)*2.5); padding: calc(var(--sign-width)*.24) 5px 10px; background: url('../assets/history-sign-v3.png') center/100% 100% no-repeat; border: 0; box-shadow: none; transform-origin: 50% -24px; isolation: isolate; }
.history-entry-copy::before { top: -31px; left: calc(50% - 7px); width: 17px; height: 48px; background: url('../assets/history-cord-v2.webp') center/100% 100% no-repeat; box-shadow: none; }
.history-entry-copy::after { display: none; }
.history-entry-copy .history-entry-number { font-size: clamp(10px,2.6vw,13px); line-height: 1.4; color: #35281c; letter-spacing: .03em; }
.history-entry-copy .history-entry-allusion { font-size: clamp(17px,4.4vw,24px); margin-top: 12px; height: calc(var(--sign-width)*1.7); font-size: min(24px,calc(var(--sign-width)*1.7 / var(--allusion-length,5) / 1.35)); line-height: 1.2; letter-spacing: .12em; white-space: nowrap; color: #21170f; }
.history-entry-copy .history-entry-seal { background: url('../assets/history-seal-v2.webp') center/contain no-repeat; width: 18px; height: 22px; padding: 0; border: 0; outline: 0; color: transparent; font-size: 0; }
.history-sign-light { position: absolute; inset: 0; pointer-events: none; opacity: 0; border: 1px solid #fff0ba; box-shadow: inset 0 0 14px #ffdd9570,0 0 9px #ffbb5fb0,0 0 25px #ffab4440; transition: opacity .35s ease; }
.history-entry:is(:hover,:focus-visible,.is-pressing) .history-sign-light { opacity: 1; }
.history-entry-time { margin-top: 9px; font-size: 12px; line-height: 1.6; color: #d5b67b; }
.history-entry-action { display: none; }
#historyPrivacy { margin: 24px 0 0; font: 13px/1.8 'Songti SC',serif; color: #c2b193; }
#historyPrivacy .privacy-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: #d6cfbf; font-size: 14px; text-underline-offset: .2em; }
#historyPage[data-view='desk'] { width: min(1080px,calc(100% - 80px)); background: #06040325; }
#historyPage[data-view='desk'] .history-page-nav { margin-bottom: 20px; }
#historyPage[data-view='desk'] .history-header { padding-bottom: 14px; }
#historyPage[data-view='desk'] .history-kicker,#historyPage[data-view='desk'] .history-seal { display: none; }
#historyPage[data-view='desk'] .history-intro { display: block; }
#historyPage[data-view='desk'] #historyTitle { font-size: 46px; }
#historyBack { position: absolute; right: 14px; top: 10px; margin: 0; font-size: 14px; text-decoration: none; z-index: 2; }
#historyPage { position: relative; }
#historyPage[data-view='desk'] [data-history-home] { visibility: hidden; }
.history-detail-title { border-top: 1px solid #995137a0; padding-top: 12px; font: 23px/1.6 'History Youran','Songti SC',serif; letter-spacing: .07em; }
.history-detail-time { margin: 4px 0 20px; font: 12px/1.8 'Songti SC',serif; color: #b3a082; }
.history-detail-body { grid-template-columns: minmax(0,.98fr) minmax(0,1fr); gap: 30px; border: 0; padding-top: 0; }
.history-detail-body > .history-paper { width: 100%; max-width: 440px; position: relative; top: auto; box-shadow: 9px 14px 18px #000b,-1px -1px 1px #ffe5b755; }
.history-notes { padding: 0; background: none; border: 0; }
.history-notes > section > h4 { font: 17px/1.6 'History Youran','Songti SC',serif; color: #d9ad62; letter-spacing: .04em; margin-bottom: 14px; }
.history-guidance-pair { grid-template-columns: 1fr; gap: 21px; }
.history-guidance-item { border: 0; padding: 0; }
.history-notes .history-guidance-item h5 { color: #d2ac68; font: 15px/1.6 'Songti SC',serif; margin: 0 0 8px; }
.history-notes .history-guidance-item p { font: 19px/1.9 'Songti SC',serif; color: #f1e4cc; }
.history-notes .history-guidance-do p { font-size: 23px; line-height: 1.7; }
.history-notes .history-practice { padding-bottom: 22px; }
.history-notes > section:not(.history-practice) { padding: 20px 0; }
.history-notes .history-verse { font-size: 18px; }
.history-notes .history-traditional section p { font-size: 16px; }
.history-notes .history-context p { font-size: 12px; }
.history-desk-actions { display: grid; grid-template-columns: 1fr 1fr; margin-top: 12px; gap: 16px; }
.history-desk-actions a { border-radius: 1px; padding-inline: 10px; font-family: 'History Youran','Songti SC',serif; font-size: 16px; }
.history-desk-actions .history-save-paper { background: #641c12e8; border-color: #a45732; }
.history-flight { filter: drop-shadow(16px 28px 16px #0009); }
.history-flight .history-sign-light { opacity: .85; }
.history-flight .history-flight-face::before { top: -25px; height: 42px; }
.history-wall-echo { filter: blur(2px); }
@media (max-width: 600px) {
  #historyPage,#historyPage[data-view='desk'] { width: calc(100% - 26px); margin: 14px 13px; padding: 0 28px 24px; min-height: calc(100svh - 28px); }
  .history-page-nav { height: 51px; padding-inline: 0; margin: 0 0 8px; font-size: 14px; }
  .history-brand { gap: 8px; } .history-brand img { width: 29px; height: 32px; }
  #historyTitle,#historyPage[data-view='desk'] #historyTitle { font-size: 36px; }
  .history-kicker { font-size: 10px; margin-bottom: 8px; }
  .history-intro { font-size: 12px; margin-top: 6px; }
  #historyPage .history-header { padding-bottom: 10px; gap: 10px; }
  .history-wall-caption > span,#historyCount { font-size: 11px; }
  #historyDeleteHint { font-size: 12px; margin: 0 0 9px; }
  .history-entry-time { font-size: 12px; }
  .history-entry-copy .history-entry-allusion { margin-top: 11px; }
  .history-entry-copy .history-entry-seal { width: 14px; height: 17px; }
  .history-detail-title { font-size: 18px; padding-top: 10px; }
  .history-detail-time { font-size: 12px; margin-bottom: 18px; }
  #historyPage[data-view='desk'] .history-page-nav { margin-bottom: 15px; padding-bottom: 0; }
  .history-detail-body { grid-template-columns: minmax(0,.95fr) minmax(0,1fr); gap: 17px; }
  .history-detail-body > .history-paper { max-width: none; position: relative; top: 0; }
  .history-notes > section > h4 { font-size: 13px; margin-bottom: 10px; }
  .history-guidance-pair { gap: 18px; }
  .history-notes .history-guidance-item h5 { font-size: 12px; margin-bottom: 6px; }
  .history-notes .history-guidance-item p { font-size: 13px; line-height: 1.9; }
  .history-notes .history-guidance-do p { font-size: 16px; line-height: 1.8; }
  .history-notes .history-verse,.history-notes .history-traditional section p { font-size: 13px; }
  .history-notes > section:not(.history-practice) { padding: 17px 0; }
  .history-notes .history-headline { font-size: 12px; }
  .history-notes .history-context p { font-size: 11px; }
  .history-desk-actions { grid-template-columns: 1fr; gap: 10px; }
  .history-desk-actions a { font-size: 14px; }
  #historyBack { top: 2px; right: 16px; font-size: 14px; }
}
@media (max-width: 359px) {
  :is(#historyList,.history-wall-echo) { --sign-width: 64px; }
  .history-entry-copy .history-entry-allusion { font-size: 15px; letter-spacing: .08em; }
  .history-entry-copy .history-entry-number { font-size: 9px; }
  .history-detail-body { grid-template-columns: 1fr; }
  .history-detail-body > .history-paper { max-width: 240px; }
  .history-notes .history-guidance-item p { font-size: 16px; }
  .history-notes .history-guidance-do p { font-size: 20px; }
  .history-desk-actions { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .history-scene { animation: none; opacity: 1; } .history-sign-light { transition: none; } }

@media (max-width: 440px) { .history-detail-body { grid-template-columns: 1fr; } .history-detail-body > .history-paper { max-width: 280px; } .history-notes .history-guidance-item p,.history-notes .history-traditional section p { font-size: 16px; } .history-notes .history-guidance-do p { font-size: 21px; } .history-notes > section > h4 { font-size: 17px; } .history-notes .history-guidance-item h5 { font-size: 15px; } .history-desk-actions { grid-template-columns: 1fr 1fr; } }

#historyTitle { font-family: "Kaiti SC","STKaiti","History Youran",serif; font-weight: 400; }
/* Keep small labels legible; reserve the brush face for the hanging inscriptions. */
.history-brand { font-family: 'Songti SC',serif; letter-spacing: .12em; }
.history-kicker { font-family: 'Songti SC',serif; font-size: 12px; }
.history-intro { font-family: 'Kaiti SC','STKaiti',serif; font-size: 15px; }
.history-wall-caption > span,#historyCount { font-family: 'Songti SC',serif; }
.history-detail-title { font-family: 'Kaiti SC','STKaiti',serif; }
.history-notes > section > h4 { font-family: 'Kaiti SC','STKaiti',serif; }
.history-scene::after { background-position: right top; }
.history-paper.has-slip-artwork { padding-block: clamp(20px,5vw,45px); background: #ecdec0 url('../assets/history-paper-v1.webp') center/cover; }
.history-flight .history-flight-open { padding: 0; }
.history-flight-open .slip-artwork { object-fit: contain; }
@media (max-width: 600px) {
 .history-scene::before { background-position: -50px center; }
 #historyPage { background: #08060560; }
 .history-kicker { font-size: 11px; }
 .history-intro { font-size: 14px; }
 .history-notes > section > h4 { font-size: 16px; }
 .history-detail-title { font-size: 20px; }
}

@media(max-width:600px) { #historyPage[data-view="desk"] { padding-inline:16px; } #historyDeleteHint { margin-top:14px; } }
#historyPage .history-entry:focus-visible .history-entry-copy { outline: none; }
.history-entry:focus-visible .history-sign-light { border-width: 2px; }
.history-detail-title:focus { outline: none; }
.history-paper.has-slip-artwork { aspect-ratio: auto; padding-block: clamp(24px,9vw,48px); }
.history-flight .history-flight-open { padding: 0; }
.history-paper.has-slip-artwork::before { content: ''; position: absolute; z-index: 2; left: -8px; top: 14%; width: 14%; height: 48%; background: url('../assets/history-paperweight-v2.webp') center/contain no-repeat; filter: drop-shadow(4px 6px 3px #0008); transform: rotate(4deg); pointer-events: none; }
.history-flight-open::before { display: none; }

.history-notes .history-practice-summary { font: 25px/1.65 'Kaiti SC','STKaiti',serif; color: #f7ecd6; padding-bottom: 20px; margin-bottom: 18px; border-bottom: 1px solid var(--history-line); }
.history-notes .history-guidance-do p { font-size: 18px; line-height: 1.9; }
@media(max-width:600px) {
 .history-notes .history-practice-summary { font-size: 24px; line-height:1.55; margin-bottom:16px; padding-bottom:16px; }
 .history-notes .history-guidance-do p { font-size:14px; }
 .history-notes .history-guidance-avoid p { font-size:14px; }
 .history-scene::after { background-image:url('../assets/history-desk-v1.webp'),url('../assets/dark-wood-diff-1k.jpg'); background-size:150% auto,cover; background-position:right top,center; background-repeat:no-repeat; }
}
@media(max-width:440px) { .history-notes .history-guidance-do p,.history-notes .history-guidance-avoid p {font-size:16px;} }
.history-notes .history-practice-summary { text-wrap: balance; }
@media(max-width:600px) { .history-scene::after { background-image:url('../assets/history-desk-v1.webp'); background-size:cover; background-position:right top; } .history-notes .history-practice-summary { font-size:23px; } }

/* The on-desk typesetting uses the frozen text; download remains the original archived artwork. */
.history-paper.history-paper-live { display:flex; flex-direction:column; align-items:center; padding:26px 20px 22px; aspect-ratio: .53; container-type:inline-size; background:#ead5ad url('../assets/history-paper-v1.webp') center/cover; }
.history-paper.history-paper-live > .slip-artwork { display:none !important; }
.history-paper.history-paper-live > :not(.slip-artwork) { display:block; }
.history-paper-live figcaption { width:100%; font-family:'Kaiti SC','STKaiti',serif; color:#352518; }
.history-paper-live figcaption small { display:block; font-size:clamp(10px,5cqw,14px); letter-spacing:.4em; }
.history-paper-live figcaption strong { display:block; margin-top:12px; font-size:clamp(16px,8cqw,24px); font-weight:400; letter-spacing:.16em; }
.history-paper.history-paper-live blockquote { display:flex; flex-direction:row-reverse; justify-content:center; gap:clamp(8px,5cqw,20px); width:100%; height:47%; margin:auto 0; font:400 min(30px,12cqw,calc(96cqw / var(--poem-max,5))) /1.5 'Kaiti SC','STKaiti',serif; color:#241c13; }
.history-paper-live blockquote span { writing-mode:vertical-rl; text-orientation:upright; letter-spacing:.15em; margin:0; white-space:nowrap; }
.history-paper-live .history-paper-grade,.history-paper-live .history-paper-allusion { align-self:flex-start; font:12px/1.8 'Kaiti SC','STKaiti',serif; margin:0; letter-spacing:.15em; }
.history-paper-live .history-paper-allusion { margin:3px 0 8px; font-size:13px; }
.history-paper-live .history-paper-seal { width:21px; height:25px; object-fit:contain; align-self:flex-start; }
.history-flight .history-paper-live { padding:26px 20px 22px; }
@media(min-width:601px) { .history-paper.history-paper-live { padding:40px 34px 30px; } }
.history-paper.history-paper-live > blockquote { display: flex !important; flex-shrink: 0; }

.history-paper.history-paper-live.history-paper-long { aspect-ratio:auto; min-height:420px; }
.history-paper.history-paper-live.history-paper-long > blockquote { display:block !important; height:auto; padding:28px 0; margin:0; font-size:clamp(14px,7cqw,20px); line-height:1.8; }
.history-paper-long blockquote span { display:block; writing-mode:horizontal-tb; white-space:normal; text-wrap:balance; letter-spacing:.06em; margin-bottom:5px; }

/* v14: tactile paper and a reading layout that keeps using the full desk. */
.history-scene {
  filter: none;
  animation: historyDaylightV14 12s ease-in-out infinite alternate;
}
@keyframes historyDaylightV14 {
  from { opacity: .9; filter: brightness(.92) saturate(.94) contrast(1.06); }
  to { opacity: 1; filter: brightness(1.03) saturate(1.02) contrast(1.02); }
}

:is(#historyList,.history-wall-echo) > li:nth-child(3n + 1) { --paper-light: 1.08; }
:is(#historyList,.history-wall-echo) > li:nth-child(3n + 2) { --paper-light: 1; }
:is(#historyList,.history-wall-echo) > li:nth-child(3n) { --paper-light: .92; }
.history-entry-copy {
  background: transparent url('../assets/history-sign-v3.png') center/100% 100% no-repeat;
  box-shadow: none;
  filter: brightness(var(--paper-light,1)) saturate(1.02) drop-shadow(10px 16px 9px #020100c7);
  transition: filter .32s ease;
}
.history-entry:is(:hover,:focus-visible,.is-pressing) .history-entry-copy {
  filter: brightness(calc(var(--paper-light,1) * 1.07)) saturate(1.08) drop-shadow(12px 18px 10px #020100d6);
}
.history-sign-light {
  inset: 0;
  border: 0;
  box-shadow: none;
  background: url('../assets/history-sign-v3.png') center/100% 100% no-repeat;
  mix-blend-mode: soft-light;
  opacity: .08;
}
.history-entry:is(:hover,:focus-visible,.is-pressing) .history-sign-light { opacity: .46; }
:is(#historyList,.history-wall-echo) > li:nth-child(3n + 2) .history-entry-copy,
:is(#historyList,.history-wall-echo) > li:nth-child(3n + 2) .history-sign-light { background-size: 104% 104%; background-position: 46% 52%; }
:is(#historyList,.history-wall-echo) > li:nth-child(3n) .history-entry-copy,
:is(#historyList,.history-wall-echo) > li:nth-child(3n) .history-sign-light { background-size: 102% 102%; background-position: 56% 48%; }

#historyPage[data-view='desk'] {
  width: min(1180px,calc(100% - clamp(28px,5vw,80px)));
  padding-inline: clamp(24px,4vw,48px);
}
.history-detail-body {
  display: grid;
  grid-template-columns: minmax(300px,.88fr) minmax(0,1.12fr);
  gap: 28px clamp(28px,4vw,48px);
}
.history-detail-body > .history-paper {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: 420px;
  position: relative;
  top: auto;
  box-shadow: none;
  filter: drop-shadow(12px 19px 15px #020100ba);
}
.history-notes-primary { grid-column: 2; grid-row: 1; }
.history-notes-wide {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: minmax(0,1.18fr) minmax(280px,.82fr);
  gap: 8px clamp(34px,5vw,62px);
  align-items: start;
  padding-top: 4px;
}
.history-notes-wide .history-traditional { grid-column: 1; grid-row: 1 / span 2; }
.history-notes-wide .history-context { grid-column: 2; grid-row: 1; }
.history-notes-wide .history-desk-actions { grid-column: 2; grid-row: 2; }
.history-paper.history-paper-live {
  background: transparent url('../assets/history-sign-v3.png') center/100% 100% no-repeat;
  border: 0;
}
.history-paper-live .history-paper-grade,
.history-paper-live .history-paper-allusion,
.history-paper-live .history-paper-seal { margin-left: clamp(24px,11cqw,44px); }
.history-desk-actions a {
  font-family: 'Kaiti SC','STKaiti','KaiTi','STSong','Songti SC',serif;
  font-size: clamp(14px,1.35vw,17px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .16em;
  font-synthesis: none;
  white-space: nowrap;
}

@media (max-width: 820px) {
  #historyPage[data-view='desk'] { width: calc(100% - 26px); padding-inline: clamp(16px,5vw,28px); }
  .history-detail-body { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .history-detail-body > .history-paper { grid-column: 1; grid-row: auto; position: relative; top: auto; max-width: min(380px,88vw); }
  .history-notes-primary,.history-notes-wide { grid-column: 1; grid-row: auto; }
  .history-notes-wide { display: block; padding-top: 0; }
  .history-notes-wide .history-desk-actions { margin-top: 18px; }
}
@media (max-width: 440px) {
  .history-detail-body > .history-paper { max-width: min(300px,88vw); }
  .history-desk-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .history-desk-actions a { font-size: 14px; letter-spacing: .1em; }
}
@media (max-width: 340px) {
  .history-desk-actions { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .history-scene { animation: none; opacity: 1; filter: brightness(1) saturate(1); }
  .history-entry-copy { transition: none; }
}

/* Frozen sign artwork is the visible desk paper. Keep the text nodes only as
   accessible/error fallback so device-font loading can never redraw the sign. */
.history-paper.history-paper-live.has-slip-artwork {
  display: block;
  padding: 0;
  min-height: 0;
  aspect-ratio: 2/3;
  overflow: hidden;
  background: #e9e1ce url('../assets/paper-fibre.svg');
}
.history-paper.history-paper-live.has-slip-artwork::before { display: none; }
.history-paper.history-paper-live.has-slip-artwork > .slip-artwork {
  display: block !important;
  width: 100%;
  height: auto;
  margin: 0;
  object-fit: contain;
}
.history-paper.history-paper-live.has-slip-artwork > :not(.slip-artwork) { display: none !important; }