@font-face { font-family: 'History Youran'; src: url('../assets/history-youran.woff') format('woff'); font-display: swap; }
.history-page-body { isolation: isolate; background: #090806; color-scheme: dark; }
.history-scene { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: #090806; }
.history-scene::before, .history-scene::after { content: ''; position: absolute; inset: 0; background-position: center; background-size: cover; }
.history-scene::before { background-image: linear-gradient(90deg,#08060430,#08060478 32%,#08060460 75%,#08060430),url('../assets/history-study-v1.webp'); }
.history-scene::after { background-image: linear-gradient(90deg,#09060430,#09060465),url('../assets/history-desk-v1.webp'); opacity: 0; transition: opacity .65s ease; }
body[data-history-view='desk'] .history-scene::after { opacity: 1; }
#historyPage { --history-ink: #ecdfc4; --history-muted: #bbac91; --history-line: #b9955938; width: min(1200px,100%); padding: 20px 56px 40px; }
.history-page-nav { margin: 0 0 40px; padding-bottom: 15px; border-bottom: 1px solid var(--history-line); color: #c6ae7b; font-size: 14px; letter-spacing: .12em; }
.history-brand { order: -1; display: inline-flex; align-items: center; gap: 12px; }
.history-brand img { width: 34px; height: 34px; object-fit: contain; }
#historyPage .history-header { border: 0; justify-content: flex-start; align-items: center; padding-bottom: 27px; gap: 20px; }
#historyTitle { font: 400 clamp(38px,4.6vw,57px)/1.3 'History Youran','Kaiti SC',serif; letter-spacing: .12em; }
.history-kicker { color: #c4a673; font-size: 12px; letter-spacing: .25em; margin: 0 0 12px; }
.history-intro { color: #bcad93; font: 15px/1.8 'Songti SC',serif; letter-spacing: .1em; margin: 14px 0 0; }
.history-seal { color: #e0b59a; border: 1px solid #ba7053; outline: 2px solid #7f2f20; background: #7b291ed9; padding: 4px 3px; font: 15px/1.2 'History Youran','Kaiti SC',serif; transform: rotate(-2deg); }
.history-wall-caption { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--history-line); padding-top: 14px; margin-bottom: 10px; }
.history-wall-caption > span, #historyCount { margin: 0; color: #c5ac7c; font: 12px/1.8 'Songti SC',serif; letter-spacing: .12em; }
#historyPrivacy { color: #ac9c82; font: 11px/1.9 system-ui; text-align: center; border-top: 1px solid var(--history-line); padding-top: 20px; margin: 32px 0 0; }
:is(#historyList,.history-wall-echo) { --row-height: 392px; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); padding: 0 6px; gap: 0; }
:is(#historyList,.history-wall-echo):empty { display: none; }
:is(#historyList,.history-wall-echo) > li, :is(#historyList,.history-wall-echo) > li:last-child { position: relative; min-width: 0; height: var(--row-height); padding: 49px 0 0; border: 0; }
:is(#historyList,.history-wall-echo) > li::before { content: ''; position: absolute; left: 0; right: 0; height: 9px; top: 8px; background: linear-gradient(#7b4633,#362019 24%,#553024 70%,#160e0a); border-top: 1px solid #a36b455e; box-shadow: 0 5px 7px #0008; }
#historyPage .history-entry { display: flex; flex-direction: column; gap: 0; padding: 0; width: 100%; border: 0; background: none; text-align: center; text-decoration: none; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
#historyPage .history-entry:hover { background: none; }
.history-entry-copy { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; width: 116px; height: 282px; padding: 22px 10px 14px; color: #30291d; border: 1px solid #856a40; border-radius: 0; background: #ead6ae url('../assets/history-paper-v1.webp') center/cover; box-shadow: 0 0 0 2px #22160d, 5px 10px 20px #0008; transform-origin: 50% -37px; }
.history-entry-copy::before { content: ''; position: absolute; top: -41px; left: calc(50% - 1px); width: 3px; height: 54px; z-index: 2; background: linear-gradient(90deg,#401b13,#9a4230,#411b15); box-shadow: 1px 0 1px #0009; }
.history-entry-copy::after { content: ''; position: absolute; top: 10px; left: calc(50% - 3px); width: 7px; height: 7px; border-radius: 50%; background: #372618; box-shadow: 0 1px #ffe4a1aa; }
.history-entry-copy .history-entry-number { color: #4d3923; font: 14px/1.6 'History Youran','Kaiti SC',serif; letter-spacing: .08em; white-space: nowrap; }
.history-entry-copy .history-entry-allusion { color: #292318; writing-mode: vertical-rl; text-orientation: upright; height: 192px; max-width: 100%; margin-top: 14px; font: 400 25px/1.25 'History Youran','Kaiti SC',serif; letter-spacing: .06em; }
.history-entry-copy .history-entry-theme { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.history-entry-copy .history-entry-seal { color: #fff0d4; background: #9b392a; outline: 1px solid #a24b33; border: 1px solid #e4b98e; font: 13px/1 'History Youran',serif; margin-top: auto; padding: 2px; }
.history-entry-time { margin-top: 15px; font: 11px/1.8 'Songti SC',serif; color: #cbb17d; font-variant-numeric: tabular-nums; }
.history-entry-action { color: #b6a389; font-size: 11px; opacity: 0; transition: opacity .18s; }
.history-entry:is(:hover,:focus-visible) .history-entry-action { opacity: 1; }
#historyPage .history-entry:focus-visible { outline: 0; }
.history-entry:focus-visible .history-entry-copy { outline: 2px solid #e0bd75; outline-offset: 5px; }
#historyMessage:not(:empty) { margin: 25px 0; padding: 50px 24px; text-align: center; background: #0b0906a8; border: 1px solid var(--history-line); }
#historyMore { display: block; margin: 16px auto 0; padding: 9px 28px; background: #170e09a0; }
#historyPage[data-view='desk'] .history-header { padding-bottom: 18px; }
#historyPage[data-view='desk'] .history-intro { display: none; }
#historyBack { margin-bottom: 14px; font-size: 13px; }
.history-detail-title { font: 24px/1.6 'History Youran','Songti SC',serif; letter-spacing: .05em; }
.history-detail-time { font-size: 11px; margin: 6px 0 26px; }
.history-detail-body { grid-template-columns: minmax(0,.92fr) minmax(0,1.1fr); gap: clamp(32px,5vw,70px); padding: 20px 0 30px; align-items: start; border-top: 1px solid var(--history-line); }
.history-paper { position: relative; width: 100%; max-width: 400px; min-height: 390px; aspect-ratio: 2/3; justify-self: center; box-shadow: 8px 18px 34px #0009; background: #ead6ae url('../assets/history-paper-v1.webp') center/cover; }
.history-paper.has-slip-artwork { min-height: 0; overflow: visible; border-radius: 0; }
.history-paper blockquote { font-family: 'History Youran','Kaiti SC',serif; }
.history-notes { padding: 15px 0 0; text-shadow: 0 2px 5px #000; }
.history-notes .history-headline { font: 24px/1.75 'Songti SC',serif; color: #f0e2c7; margin: 0 0 20px; }
.history-notes h4 { color: #d0ae6b; font-size: 17px; }
.history-notes p { font-size: 16px; line-height: 2.05; }
.history-notes .history-practice { padding: 0 0 25px; border: 0; }
.history-notes > section:not(.history-practice) { border-top: 1px solid var(--history-line); padding: 22px 0; }
.history-notes .history-traditional > section { padding: 8px 0 20px; border: 0; }
.history-notes > .history-context { padding: 22px 0; }
.history-notes .history-context p { font-size: 13px; }
.history-desk-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.history-desk-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid #967446; padding: 8px 20px; font-size: 13px; text-decoration: none; }
.history-desk-actions .history-save-paper { background: #70251abf; border-color: #a25232; }
.history-footnote { font-size: 11px; }
.history-legacy-note { min-height: 180px; padding: 35px; background: #0b0806a8; border: 1px solid var(--history-line); }
.history-flight { position: fixed; z-index: 100; pointer-events: none; transform-origin: 0 0; will-change: transform; contain: layout style; }
.history-flight .history-flight-face { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 0; }
.history-flight .history-flight-face::before { top: -8px; height: 20px; }
.history-flight .history-flight-open { position: absolute; left: 0; top: 0; margin: 0; max-width: none; min-height: 0; transform-origin: 0 0; opacity: 0; }
.history-flight-open .slip-artwork { width: 100%; height: 100%; object-fit: fill; }
#historyDetail.is-arriving .history-paper { visibility: hidden; }
#historyDetail.is-arriving .history-notes { opacity: 0; }
@media (min-width: 1001px) { :is(#historyList,.history-wall-echo) > li:nth-child(5n+2) .history-entry-copy { margin-top: 7px; } :is(#historyList,.history-wall-echo) > li:nth-child(5n+4) .history-entry-copy { margin-top: 3px; } }
@media (max-width: 1000px) { #historyPage { padding-inline: 36px; } :is(#historyList,.history-wall-echo) { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (max-width: 760px) { #historyPage { padding: 16px 28px 32px; } :is(#historyList,.history-wall-echo) { grid-template-columns: repeat(3,minmax(0,1fr)); } .history-detail-body { grid-template-columns: 1fr; gap: 24px; } .history-paper { max-width: 350px; } .history-notes { padding: 0; } }
@media (max-width: 540px) {
  #historyPage { padding: 12px 22px max(28px,env(safe-area-inset-bottom)); }
  .history-page-nav { margin-bottom: 28px; font-size: 12px; letter-spacing: .04em; }
  .history-brand { gap: 7px; } .history-brand img { width: 28px; height: 28px; }
  #historyTitle { font-size: 40px; } .history-kicker { font-size: 11px; }
  .history-intro { font-size: 13px; } .history-seal { font-size: 13px; }
  #historyPage .history-header { gap: 15px; padding-bottom: 24px; }
  :is(#historyList,.history-wall-echo) { grid-template-columns: repeat(2,minmax(0,1fr)); --row-height: 368px; padding: 0; }
  #historyPage .history-entry { padding: 0; gap: 0; }
  .history-entry-copy { width: 110px; height: 266px; padding: 21px 8px 12px; }
  .history-entry-copy .history-entry-allusion { font-size: 23px; height: 179px; margin-top: 12px; }
  .history-entry-time { font-size: 10px; } .history-entry-action { opacity: .8; font-size: 10px; }
  .history-scene::before { background-position: 40% center; }
  .history-scene::after { background-position: 60% center; }
  .history-wall-caption > span,#historyCount { font-size: 11px; letter-spacing: .04em; }
  .history-paper { max-width: 310px; } .history-detail-title { font-size: 21px; }
  .history-notes .history-headline { font-size: 21px; } .history-notes p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .history-scene::after,.history-entry-action { transition: none; } }

.history-wall-echo { list-style: none; font-family: "Songti SC",serif; }
.history-wall-echo .history-entry { display:flex; flex-direction:column; align-items:center; text-decoration:none; }

/* Reading hierarchy: advice first, then verse, original commentary and provenance. */
.history-notes { padding: 24px 28px; background: linear-gradient(110deg,#090705b8,#09070570); border-top: 1px solid var(--history-line); text-shadow: none; }
.history-notes > section > h4 { font: 400 15px/1.6 "Songti SC",serif; color: #cdb17c; letter-spacing: .12em; margin: 0 0 16px; }
.history-notes > section:not(.history-practice) { padding: 25px 0; }
.history-notes .history-practice { padding: 0 0 25px; }
.history-guidance-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.history-guidance-item { min-width: 0; padding-left: 13px; border-left: 2px solid #b49356; }
.history-guidance-avoid { border-left-color: #8f4836; }
.history-notes .history-guidance-item h5 { color: #e8d5ad; font: 400 19px/1.5 "Songti SC",serif; margin: 0 0 10px; }
.history-notes .history-guidance-item p { font-size: 16px; line-height: 1.9; color: #eee0c8; }
.history-notes .history-practice-lead { font-size: 19px; line-height: 1.9; }
.history-verse { margin: 0; padding: 2px 0; font: 19px/1.9 "Kaiti SC","STKaiti",serif; color: #efe0c1; }
.history-verse span { display: block; }
.history-notes .history-allusion-caption { font-size: 12px; color: #b9a98c; margin-top: 12px; letter-spacing: .08em; }
.history-notes .history-grade { display: inline-block; color: #c5ae83; font-size: 12px; padding: 2px 8px; border: 1px solid #b9955938; margin: 0 0 12px; }
.history-notes .history-headline { font: 15px/1.9 "Songti SC",serif; color: #d2c2a7; margin: 0 0 22px; }
.history-notes .history-traditional > section { padding: 0; margin-top: 19px; }
.history-notes .history-traditional h5 { font: 400 13px/1.6 "Songti SC",serif; color: #c2a36d; margin: 0 0 7px; letter-spacing: .08em; }
.history-notes .history-traditional section p { font-size: 15px; line-height: 1.95; color: #daccb5; }
.history-notes .history-context p { font-size: 12px; line-height: 1.85; color: #b7aa94; margin-bottom: 9px; }
.history-notes .history-context a { display: inline-block; font-size: 12px; min-height: 32px; padding-top: 5px; }
.history-desk-actions { margin-top: 2px; }
@media (min-width: 761px) { .history-detail-body > .history-paper { position: sticky; top: 24px; } }
@media (max-width: 1000px) and (min-width: 761px) { .history-guidance-pair { grid-template-columns: 1fr; gap: 20px; } .history-notes { padding: 22px; } }
@media (max-width: 760px) { .history-notes { padding: 24px 20px; } }
@media (max-width: 540px) { .history-guidance-pair { grid-template-columns: 1fr; gap: 20px; } .history-notes { padding: 22px 16px; } .history-notes .history-headline { font-size: 15px; } .history-notes .history-guidance-item p { font-size: 16px; } }

/* Responsive reading: keep the full paper reachable in short viewports. */
.history-page-body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
#historyPage { padding-left: max(24px,env(safe-area-inset-left)); padding-right: max(24px,env(safe-area-inset-right)); }
.history-notes { min-width: 0; container-type: inline-size; }
.history-detail-title,.history-notes p,.history-verse { overflow-wrap: anywhere; }
.history-notes .history-context a { min-height: 44px; display: inline-flex; align-items: center; padding-block: 8px; }
.history-desk-actions a { min-height: 48px; }
@container (max-width: 420px) { .history-guidance-pair { grid-template-columns: 1fr; gap: 20px; } }
@media (min-width: 1001px) { #historyPage { padding-inline: max(48px,env(safe-area-inset-left)); } }
@media (max-width: 900px) {
  .history-detail-body { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .history-detail-body > .history-paper { position: relative; top: auto; max-width: 340px; }
  #historyPage[data-view='desk'] .history-page-nav { margin-bottom: 20px; }
  #historyPage[data-view='desk'] .history-header { padding-bottom: 12px; }
  #historyPage[data-view='desk'] #historyTitle { font-size: 38px; }
  #historyPage[data-view='desk'] .history-kicker { margin-bottom: 6px; }
  #historyBack { margin-bottom: 8px; }
  .history-detail-time { margin-bottom: 16px; }
}
@media (max-width: 540px) {
  #historyPage { padding-left: max(16px,env(safe-area-inset-left)); padding-right: max(16px,env(safe-area-inset-right)); }
  #historyPage[data-view='desk'] .history-page-nav { margin-bottom: 15px; padding-bottom: 9px; }
  #historyPage[data-view='desk'] .history-header { padding-bottom: 4px; }
  #historyPage[data-view='desk'] #historyTitle { font-size: 34px; }
  #historyPage[data-view='desk'] .history-kicker { display: none; }
  #historyPage[data-view='desk'] .history-seal { font-size: 11px; }
  .history-detail-title { font-size: 20px; line-height: 1.6; }
  .history-detail-body { padding-top: 18px; gap: 22px; }
  .history-detail-body > .history-paper { max-width: 280px; }
  .history-notes { padding: 22px 16px; }
  .history-desk-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .history-desk-actions a { padding-inline: 8px; }
  .history-entry-time { font-size: 11px; }
  #historyPrivacy { overflow-wrap: anywhere; }
}
@media (max-height: 700px) { .history-detail-body > .history-paper { position: relative; top: auto; } }
@media (min-width: 700px) and (max-width: 1000px) and (max-height: 600px) {
  .history-detail-body { grid-template-columns: minmax(180px,.72fr) minmax(0,1.28fr); gap: 24px; }
  .history-detail-body > .history-paper { max-width: 260px; }
  #historyPage[data-view='desk'] .history-page-nav { margin-bottom: 12px; }
  #historyPage[data-view='desk'] .history-kicker { display: none; }
  .history-notes { padding: 20px; }
}

/* Long hold: paper tears into ink-washed fragments; no glass or sparks. */
#historyDeleteHint { margin: 0 0 7px; color: #bbaa8b; font: 11px/1.8 system-ui; }
.history-entry { -webkit-touch-callout: none; user-select: none; }
.history-hold-indicator { position: absolute; bottom: 0; left: 0; right: 0; padding: 7px 2px; background: #241b15eb; color: #f1debb !important; font: 11px/1.7 'Songti SC',serif !important; opacity: 0; pointer-events: none; }
.history-hold-indicator::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: #ae6646; transform: scaleX(0); transform-origin: left; }
.is-pressing .history-hold-indicator { opacity: 1; }
.is-pressing .history-hold-indicator::after { animation: historyHoldInk .78s linear forwards; }
@keyframes historyHoldInk { to { transform: scaleX(1); } }
.history-fracture { position: fixed; inset: 0; z-index: 110; overflow: hidden; contain: layout style paint; pointer-events: none; }
.history-ink-shard { position: absolute; transform-origin: 50% 35%; will-change: transform,opacity; }
.history-ink-shard .history-shard-face { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; transform: none; box-shadow: none; }
.history-shard-face::before,.history-shard-face::after,.history-shard-face .history-hold-indicator { display: none; }
.history-ink-wash { position: absolute; width: 70px; height: 110px; border-radius: 43% 57% 65% 35%; background: radial-gradient(ellipse at 30% 40%,#302d27b0,transparent 69%),radial-gradient(ellipse at 65% 65%,#85796460,transparent 64%); pointer-events: none; }
@media (pointer: coarse) { .history-key-hint { display: none; } }
@media (max-width: 540px) { #historyDeleteHint { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .is-pressing .history-hold-indicator::after { animation: none; } }