/* =====================================================================
   LORE ARCHIVE (lane 7): the Archive of Lost Histories.
   Landing hall -> shelves -> reader. Loaded after arena.css.
   ===================================================================== */
#lore { --lr-ink: #f1e7d0; --lr-ink-dim: #c9bda6; --lr-vellum: rgba(22, 14, 36, .94); overflow: hidden; }
#lore .top { gap: 16px; }
#lore .top h1 { font-size: 28px; max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
#lore .top .btn .ico { width: 18px; height: 18px; }
#lore .top .btn.small { min-height: 46px; display: inline-flex; align-items: center; gap: 8px; }
.lr-crumb { display: flex; align-items: center; gap: 8px; min-width: 0; font: 700 12px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); white-space: nowrap; overflow: hidden; }
.lr-crumb .ico { width: 12px; height: 12px; opacity: .6; flex: none; }
.lr-crumb b { color: var(--gold-1); font-weight: 800; overflow: hidden; text-overflow: ellipsis; max-width: 380px; }
.lr-search { position: relative; display: flex; align-items: center; flex: none; }
.lr-search .ico { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--gold-2); pointer-events: none; }
#lore .lr-search input { width: 290px; height: 46px; padding: 0 16px 0 42px; border-radius: 99px; font: 500 15px var(--font-ui); user-select: text; }
#lore .lr-search input::placeholder { color: rgba(201, 189, 166, .6); }
.lr-count { display: flex; align-items: baseline; gap: 5px; flex: none; position: relative; padding: 11px 16px; border-radius: 99px; background: linear-gradient(180deg, rgba(10, 6, 22, .9), rgba(26, 14, 50, .85));
  border: 1px solid rgba(232, 186, 90, .35); font: 800 18px/1 var(--font-title); color: #fff4d6; }
.lr-count .ico { width: 20px; height: 20px; align-self: center; margin-right: 3px; }
.lr-count span { font: 600 13px var(--font-ui); color: var(--ink-dim); }
.lr-count .lr-dot { position: absolute; right: -3px; top: -3px; }
.lr-tools:empty { display: none; }
.lr-fs { display: flex; border: 1px solid rgba(232, 186, 90, .3); border-radius: 99px; overflow: hidden; background: rgba(10, 6, 22, .8); }
.lr-fs button { appearance: none; border: 0; background: none; color: var(--gold-1); font: 700 19px/1 var(--font-card); min-width: 50px; height: 46px; cursor: pointer; transition: background .2s; }
.lr-fs button + button { border-left: 1px solid rgba(232, 186, 90, .22); font-size: 24px; }
.lr-fs button:hover { background: rgba(242, 193, 78, .12); }
.lr-fs sub, .lr-fs sup { font: 800 11px var(--font-ui); }

.lr-readbar { position: absolute; top: 84px; left: 0; right: 0; height: 3px; z-index: 6; pointer-events: none; opacity: 0; transition: opacity .3s; }
#lore[data-v="read"] .lr-readbar { opacity: 1; }
.lr-readbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-3), var(--gold-1), var(--gold-hi)); box-shadow: 0 0 12px rgba(242, 193, 78, .7); transition: width .12s linear; }
.lr-view { position: absolute; top: 84px; left: 0; right: 0; bottom: 0; overflow-y: auto; overflow-x: hidden; outline: none; scroll-behavior: auto; overscroll-behavior: contain; }

/* wax-seal "new" dot */
.lr-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; flex: none;
  background: radial-gradient(circle at 35% 30%, #ff9b7a, #c3281c 55%, #6e0f08); box-shadow: 0 0 0 2px rgba(20, 8, 10, .6), 0 0 10px rgba(255, 90, 60, .7); }
.lr-bar { display: block; height: 6px; border-radius: 6px; background: rgba(0, 0, 0, .45); box-shadow: 0 0 0 1px rgba(232, 186, 90, .2) inset; overflow: hidden; }
.lr-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold-3), var(--gold-1)); box-shadow: 0 0 8px rgba(242, 193, 78, .6); }

/* ---------------- landing: archive hall ---------------- */
.lr-land { display: grid; grid-template-columns: 540px 1fr; gap: 28px; padding: 26px 36px 36px; max-width: 1760px; margin: 0 auto; min-height: 100%; box-sizing: border-box; }
.lr-hero { padding: 38px 40px 32px; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 14px; align-self: start; border-color: rgba(232, 186, 90, .45); }
.lr-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(180deg, rgba(14, 8, 28, .35) 0%, rgba(14, 8, 28, .82) 38%, rgba(14, 8, 28, .96) 70%), var(--art) var(--pos, 50% 20%) / cover no-repeat; }
.lr-realm { margin: 0; font: 900 64px/1 var(--font-title); letter-spacing: .08em;
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold-1) 40%, var(--gold-2) 70%, var(--gold-3) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .55)) drop-shadow(0 0 22px rgba(242, 193, 78, .3)); overflow-wrap: anywhere; }
.lr-tag { margin: 0; font: italic 22px/1.35 var(--font-card); color: #f3e3bf; }
.lr-intro p { margin: 0 0 10px; font: 17px/1.62 var(--font-card); color: var(--lr-ink-dim); }
.lr-acts { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 6px; }
.lr-acts .btn { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 12px 22px; font-size: 16px; max-width: 100%; }
.lr-acts .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-acts .btn .ico { width: 20px; height: 20px; flex: none; }
.lr-begin { font-size: 18px !important; }
.lr-overall { display: flex; align-items: center; gap: 16px; margin-top: 8px; padding-top: 18px; border-top: 1px solid rgba(232, 186, 90, .2); }
.lr-ring { position: relative; width: 72px; height: 72px; flex: none; display: grid; place-items: center; }
.lr-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.lr-ring circle { fill: none; stroke-width: 5; }
.lr-ring .trk { stroke: rgba(0, 0, 0, .5); }
.lr-ring .val { stroke: var(--gold-1); stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(242, 193, 78, .6)); }
.lr-ring b { font: 800 17px var(--font-title); color: #fff4d6; }
.lr-overall b { display: block; font: 800 19px/1.2 var(--font-title); color: #fff4d6; letter-spacing: .03em; }
.lr-overall span { font: 600 14px var(--font-ui); color: var(--ink-dim); }

.lr-shelves { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.lr-shelves > .af-title { font-size: 15px; }
.lr-shelfgrid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(236px, auto); gap: 18px; }
.lr-shelfgrid.n1, .lr-shelfgrid.n2, .lr-shelfgrid.n4 { grid-template-columns: repeat(2, 1fr); }
.lr-shelf { background: var(--art) var(--pos, 50% 30%) / cover no-repeat, #1a1030; appearance: none; font: inherit; color: inherit; text-align: left; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px 20px 18px; min-height: 236px; }
.lr-shelf:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 3px; }
.lr-num { position: absolute; left: 16px; top: 12px; font: 900 34px/1 var(--font-title); color: rgba(255, 240, 200, .85); text-shadow: 0 2px 10px rgba(0, 0, 0, .9); letter-spacing: .04em; }
.lr-seal { position: absolute; right: 14px; top: 14px; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 99px; display: grid; place-items: center; font: 900 15px/1 var(--font-title); color: #fff2e8;
  background: radial-gradient(circle at 35% 30%, #ff9b7a, #c3281c 55%, #6e0f08); box-shadow: 0 0 0 2px rgba(20, 8, 10, .6), 0 0 14px rgba(255, 90, 60, .6); }
.lr-sh-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lr-sh-txt b { font: 800 25px/1.1 var(--font-title); color: #fff4d6; letter-spacing: .05em; text-shadow: 0 2px 12px rgba(0, 0, 0, .9); }
.lr-sh-txt em { font: italic 15.5px/1.4 var(--font-card); color: #e6dac4; text-shadow: 0 1px 8px rgba(0, 0, 0, .9); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lr-sh-prog { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; margin-top: 6px; }
.lr-sh-prog small { font: 800 12px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-1); white-space: nowrap; }
.lr-sh-lock { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
.lr-sh-lock .ico { width: 13px; height: 13px; }
.lr-shelf.locked { filter: saturate(.35) brightness(.8); }

/* ---------------- category shelf ---------------- */
.lr-cat { padding: 24px 36px 40px; max-width: 1640px; margin: 0 auto; box-sizing: border-box; display: flex; flex-direction: column; gap: 22px; }
.lr-cathead { display: flex; align-items: flex-end; gap: 30px; padding: 30px 34px; overflow: hidden; isolation: isolate; min-height: 170px; box-sizing: border-box; }
.lr-cathead::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(90deg, rgba(14, 8, 28, .97) 30%, rgba(14, 8, 28, .55) 75%, rgba(14, 8, 28, .3)), var(--art) var(--pos, 50% 30%) / cover no-repeat; }
.lr-ch-txt { flex: 1; min-width: 0; }
.lr-ch-txt h2 { margin: 6px 0 6px; font: 900 44px/1.05 var(--font-title); letter-spacing: .06em;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-1) 50%, var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6)); }
.lr-ch-txt p { margin: 0; font: italic 19px/1.45 var(--font-card); color: #e8dcc4; max-width: 760px; }
.lr-ch-prog { width: 240px; flex: none; display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 10px; }
.lr-ch-prog b { font: 800 30px/1 var(--font-title); color: #fff4d6; }
.lr-ch-prog > span:not(.lr-bar) { font: 700 13px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-1); }
.lr-ch-prog .lr-bar { grid-column: 1 / -1; margin-top: 6px; }
.lr-ch-prog small { grid-column: 1 / -1; font: 600 13px var(--font-ui); color: var(--ink-dim); }

.lr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.lr-card { appearance: none; font: inherit; color: inherit; text-align: left; cursor: pointer; position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; padding: 0;
  border: 1px solid rgba(232, 186, 90, .3); background: linear-gradient(180deg, rgba(30, 17, 58, .92), rgba(14, 8, 28, .95)); box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
  transition: transform .3s var(--ease-back), border-color .25s, box-shadow .25s; }
.lr-card:hover { transform: translateY(-5px); border-color: var(--gold-1); box-shadow: 0 20px 40px rgba(0, 0, 0, .6), 0 0 22px rgba(242, 193, 78, .3); }
.lr-card:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 3px; }
.lr-card-art { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--art) var(--pos, 50% 28%) / cover no-repeat, linear-gradient(135deg, #2a1650, #120a24); }
.lr-card-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(14, 8, 28, .95)); }
.lr-card > .lr-dot { position: absolute; top: 12px; right: 12px; z-index: 2; }
.lr-card-txt { display: flex; flex-direction: column; gap: 5px; padding: 12px 18px 16px; min-width: 0; }
.lr-card-txt b { font: 800 20px/1.2 var(--font-title); color: #fff4d6; letter-spacing: .03em; }
.lr-card-txt em { font: italic 16px/1.35 var(--font-card); color: var(--lr-ink-dim); }
.lr-card-txt q { font: 15px/1.45 var(--font-card); color: #ddd0b8; quotes: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lr-card-txt q mark { background: rgba(242, 193, 78, .28); color: #fff4d6; border-radius: 3px; padding: 0 2px; }
.lr-card-txt small { display: flex; align-items: center; gap: 6px; margin-top: 4px; font: 700 12px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2); }
.lr-card-txt small .ico { width: 14px; height: 14px; }
.lr-readmark { display: inline-flex; align-items: center; gap: 4px; color: #9fe0b0; }
.lr-kicker { font: 800 11px/1 var(--font-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-2); }
.lr-card.read .lr-card-art { filter: saturate(.85); }
/* sealed page */
.lr-card.sealed { border-style: dashed; border-color: rgba(232, 186, 90, .28); background: linear-gradient(180deg, rgba(22, 14, 36, .9), rgba(10, 6, 20, .94)); }
.lr-card.sealed .lr-card-art::before { content: ""; position: absolute; inset: 0; z-index: 1; background: repeating-linear-gradient(0deg, rgba(232, 186, 90, .06) 0 1px, transparent 1px 22px); }
.lr-card.sealed b { color: #cfc2a8; }
.lr-wax { position: relative; z-index: 2; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; filter: none;
  background: radial-gradient(circle at 35% 30%, #d9523c, #8e1a10 60%, #4a0904); box-shadow: 0 0 0 3px rgba(60, 10, 6, .5), 0 6px 18px rgba(0, 0, 0, .6), inset 0 2px 3px rgba(255, 190, 160, .35); color: #ffd9c8; }
.lr-wax .ico { width: 26px; height: 26px; }
.lr-how { display: flex; flex-direction: column; gap: 4px; font: 600 15px/1.35 var(--font-ui); color: #f0e3c8; padding: 9px 12px; border-radius: 10px; background: rgba(242, 193, 78, .07); border-left: 3px solid var(--gold-2); margin-top: 2px; }
.lr-how small { font: 800 10.5px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2); margin: 0; }
/* sealed art: darkened and drained of colour (no filter, so the wax seal stays crisp) */
.lr-card.sealed .lr-card-art { background: linear-gradient(rgba(10, 6, 20, .62), rgba(10, 6, 20, .62)), var(--art) var(--pos, 50% 28%) / cover no-repeat, #120a24; background-blend-mode: normal, luminosity, normal; }

/* ---------------- reader ---------------- */
.lr-reader { --fs: 0; max-width: 1180px; margin: 0 auto; padding: 26px 36px 70px; box-sizing: border-box; }
.lr-rhead { position: relative; min-height: 340px; border-radius: 18px 18px 0 0; overflow: hidden; isolation: isolate; display: flex; align-items: flex-end; gap: 26px; padding: 34px 48px 30px;
  border: 1px solid rgba(232, 186, 90, .4); border-bottom: 0; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); box-sizing: border-box; }
.lr-rhead::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--art) var(--pos, 50% 25%) / cover no-repeat, linear-gradient(135deg, #2a1650, #120a24); }
.lr-rhead::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 8, 28, .1) 0%, rgba(14, 8, 28, .45) 45%, rgba(20, 13, 34, .98) 100%); }
.lr-medal { width: 150px; height: 150px; flex: none; border-radius: 50%; background: var(--m) var(--mpos, 50% 22%) / cover no-repeat, #1a1030;
  box-shadow: 0 0 0 3px #1a0f2e, 0 0 0 5px var(--gold-2), 0 0 0 7px rgba(26, 15, 46, .9), 0 0 30px rgba(242, 193, 78, .45), 0 16px 30px rgba(0, 0, 0, .7); }
.lr-rhead-txt { min-width: 0; flex: 1; }
.lr-rhead h2 { margin: 8px 0 4px; font: 900 52px/1.04 var(--font-title); letter-spacing: .04em; overflow-wrap: anywhere;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-1) 45%, var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .6)) drop-shadow(0 0 20px rgba(0, 0, 0, .6)); }
.lr-rhead h2.long { font-size: 42px; } .lr-rhead h2.xlong { font-size: 34px; }
.lr-rhead .af-eyebrow { text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 12px rgba(0, 0, 0, .9); }
.lr-sub { margin: 0; font: italic 23px/1.35 var(--font-card); color: #f3e3bf; text-shadow: 0 2px 10px rgba(0, 0, 0, .9); }
.lr-meta { display: flex; align-items: center; gap: 7px; margin-top: 12px; font: 700 12.5px/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-1); }
.lr-meta .ico { width: 15px; height: 15px; }

.lr-page { position: relative; padding: 40px 60px 50px; border-radius: 0 0 18px 18px; border: 1px solid rgba(232, 186, 90, .4); border-top: 0;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(242, 193, 78, .06), transparent 70%),
    radial-gradient(1px 1px at 20% 30%, rgba(255, 240, 200, .05), transparent), radial-gradient(1px 1px at 70% 60%, rgba(255, 240, 200, .05), transparent),
    linear-gradient(180deg, rgba(20, 13, 34, .98), rgba(15, 10, 26, .97));
  background-size: auto, 7px 7px, 11px 11px, auto; box-shadow: 0 30px 60px rgba(0, 0, 0, .5), inset 0 0 80px rgba(0, 0, 0, .35); }
.lr-page::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-line), transparent); }
/* one reading column: ~65 characters of Old Standard per line (34em), whatever the text size */
.lr-col { font-family: var(--font-card); font-size: calc(22px + var(--fs) * 2px); max-width: 34em; margin: 0 auto; }
.lr-body { line-height: 1.72; color: var(--lr-ink); hyphens: auto; -webkit-hyphens: auto; user-select: text; text-rendering: optimizeLegibility; font-kerning: normal; }
.lr-body p { margin: 0 0 1em; overflow-wrap: break-word; }
.lr-body p + p { text-indent: 1.4em; }
.lr-body h3 + p, .lr-body blockquote + p { text-indent: 0; }
.lr-body p.lr-first { text-indent: 0; }
.lr-body p.lr-first::first-letter { float: left; font: 900 4.1em/.82 var(--font-title); margin: .08em .1em 0 0; padding: .02em 0 0;
  color: var(--gold-1); background: linear-gradient(180deg, var(--gold-hi), var(--gold-1) 45%, var(--gold-3)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)); }
.lr-body p.lr-first::first-line { font-variant: small-caps; letter-spacing: .04em; }
.lr-body h3 { margin: 1.4em 0 .5em; font: 800 1.05em/1.2 var(--font-title); letter-spacing: .08em; color: var(--gold-1); text-transform: uppercase; }
.lr-body blockquote { margin: 1.2em 0; padding: .2em 0 .2em 1em; border-left: 3px solid var(--gold-2); font-style: italic; color: #f7ecd3; }
.lr-body em { color: #fff3d8; }
.lr-hist { box-sizing: border-box; margin-top: 30px; padding: 22px 26px 22px; border-radius: 14px; position: relative;
  background: linear-gradient(135deg, rgba(242, 193, 78, .11), rgba(242, 193, 78, .03)); border: 1px solid rgba(232, 186, 90, .4); box-shadow: inset 4px 0 0 var(--gold-2); }
.lr-hist-h { display: flex; align-items: center; gap: 10px; font: 800 13px/1 var(--font-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-1); margin-bottom: 12px; }
.lr-hist-h .ico { width: 22px; height: 22px; }
.lr-hist p { margin: 0; font: calc(18.5px + var(--fs) * 1.5px)/1.6 var(--font-ui); color: #efe6d6; user-select: text; }
.lr-end { display: flex; justify-content: center; margin-top: 30px; color: var(--gold-2); opacity: .8; }
.lr-orn { width: 180px; height: 24px; }
.lr-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }
.lr-links .btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; }
.lr-links .btn .ico { width: 18px; height: 18px; }
.lr-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 30px; }
.lr-pnb { appearance: none; font: inherit; color: inherit; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; min-height: 84px; border-radius: 14px; box-sizing: border-box;
  border: 1px solid rgba(232, 186, 90, .3); background: rgba(8, 4, 18, .55); transition: border-color .2s, background .2s, transform .25s var(--ease-back); min-width: 0; }
.lr-pnb:hover { border-color: var(--gold-1); background: rgba(242, 193, 78, .08); transform: translateY(-2px); }
.lr-pnb.next { text-align: right; align-items: flex-end; }
.lr-pnb small { display: inline-flex; align-items: center; gap: 6px; font: 800 11.5px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2); }
.lr-pnb small .ico { width: 14px; height: 14px; }
.lr-pnb b { font: 800 19px/1.2 var(--font-title); color: #fff4d6; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-pnb em { font: 600 13.5px/1.3 var(--font-ui); font-style: normal; color: var(--ink-dim); }
.lr-pnb.sealed b { color: #b9ab92; }
.lr-rel { margin-top: 34px; }
.lr-rel .af-title { font-size: 13px; margin-bottom: 14px; }
.lr-relrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.lr-relc { appearance: none; font: inherit; color: inherit; cursor: pointer; text-align: left; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; min-height: 72px; border-radius: 14px; box-sizing: border-box;
  border: 1px solid rgba(232, 186, 90, .25); background: rgba(8, 4, 18, .5); transition: border-color .2s, transform .25s var(--ease-back); min-width: 0; }
.lr-relc:hover { border-color: var(--gold-1); transform: translateY(-2px); }
.lr-relc > span:last-child { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lr-relav { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--art) var(--pos, 50% 25%) / cover no-repeat, #1a1030; box-shadow: 0 0 0 2px var(--gold-3), 0 0 12px rgba(242, 193, 78, .25); color: #ffd9c8; }
.lr-relav .ico { width: 20px; height: 20px; }
.lr-relc.sealed .lr-relav { filter: grayscale(.8) brightness(.6); }
.lr-relc b { font: 800 16px/1.2 var(--font-title); color: #fff4d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-relc small { font: 500 13px/1.3 var(--font-ui); color: var(--ink-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* page-turn entrance */
.lr-reader.turn .lr-rhead { animation: lrHead .6s var(--ease-out) both; }
.lr-reader.turn .lr-page { transform-origin: 0 0; animation: lrTurn .75s var(--ease-out) .08s both; }
@keyframes lrHead { from { opacity: 0; transform: translateY(10px) scale(.99); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes lrTurn { from { opacity: 0; transform: perspective(1800px) rotateY(-9deg) translateX(24px); filter: brightness(1.35) blur(2px); } 60% { opacity: 1; } to { opacity: 1; transform: none; filter: none; } }

/* ---------------- sealed page view ---------------- */
.lr-sealedpage { max-width: 820px; margin: 60px auto; padding: 56px 60px 48px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; overflow: hidden; isolation: isolate; border-style: dashed; box-sizing: border-box; }
.lr-sealedpage::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(rgba(14, 8, 28, .86), rgba(14, 8, 28, .94)), var(--art) var(--pos, 50% 30%) / cover no-repeat; filter: grayscale(.7); }
.lr-sealedpage.turn { animation: lrTurn .7s var(--ease-out) both; }
.lr-bigwax { width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; color: #ffd9c8;
  background: radial-gradient(circle at 35% 30%, #e0593f, #8e1a10 60%, #4a0904); box-shadow: 0 0 0 4px rgba(60, 10, 6, .5), 0 12px 30px rgba(0, 0, 0, .7), inset 0 3px 5px rgba(255, 190, 160, .35), 0 0 40px rgba(220, 70, 40, .35); }
.lr-bigwax .ico { width: 44px; height: 44px; }
.lr-sealedpage h2 { margin: 0; font: 900 42px/1.1 var(--font-title); color: #e8dcc4; letter-spacing: .05em; }
.lr-teaser { margin: 0; font: italic 23px/1.45 var(--font-card); color: #f3e3bf; max-width: 32em; }
body.mobile .lr-teaser { font-size: 36px; }
.lr-sealtxt { margin: 0; font: italic 20px/1.55 var(--font-card); color: var(--lr-ink-dim); max-width: 36em; }
.lr-howbig { display: flex; flex-direction: column; gap: 8px; padding: 16px 26px; border-radius: 14px; background: rgba(242, 193, 78, .08); border: 1px solid rgba(232, 186, 90, .45); }
.lr-howbig small { font: 800 12px/1 var(--font-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-2); }
.lr-howbig b { font: 800 22px/1.3 var(--font-title); color: #fff4d6; letter-spacing: .02em; }
.lr-sealedpage .lr-acts { justify-content: center; margin-top: 8px; }

/* ---------------- search results ---------------- */
.lr-search-res { padding: 26px 36px 40px; max-width: 1640px; margin: 0 auto; box-sizing: border-box; display: flex; flex-direction: column; gap: 18px; }
.lr-sr-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.lr-sr-head > span { display: inline-flex; align-items: center; gap: 7px; font: 600 14px var(--font-ui); color: var(--ink-dim); }
.lr-sr-head .ico { width: 15px; height: 15px; }
.lr-grid-s { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.lr-grid-s .lr-card-art { aspect-ratio: 21 / 8; }

.lr-empty { max-width: 640px; margin: 60px auto; padding: 44px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lr-empty > .ico { width: 48px; height: 48px; color: var(--gold-1); }
.lr-empty h2 { margin: 4px 0 0; font: 800 28px var(--font-title); color: var(--gold-1); letter-spacing: .05em; }
.lr-empty p { margin: 0; font: 17px/1.5 var(--font-card); color: var(--lr-ink-dim); }

/* ---------------- entry points in other screens ---------------- */
.lr-hbtn { position: relative; }
.lr-hbadge { position: absolute; right: -4px; top: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center; font: 900 12px/1 var(--font-ui); color: #fff2e8; box-sizing: border-box;
  background: radial-gradient(circle at 35% 30%, #ff9b7a, #c3281c 55%, #6e0f08); box-shadow: 0 0 0 2px rgba(10, 5, 20, .9), 0 0 10px rgba(255, 90, 60, .6); pointer-events: none; }
.lr-inwrap { margin: 10px 0 4px; }
.lr-inwrap.lr-instory { display: inline-block; vertical-align: middle; margin: 0 0 0 10px; }
.lr-instory .lr-inlink { min-height: 40px; padding: 7px 14px; font-size: 13px; }
body.mobile .lr-instory .lr-inlink { min-height: 72px; font-size: 20px !important; }
.lr-inlink { display: inline-flex !important; align-items: center; gap: 8px; min-height: 44px; }
.lr-inlink .ico { width: 18px; height: 18px; }
.lr-inlink.lr-intag { margin-left: auto; min-height: 44px; padding: 6px 16px; }
body.mobile .lr-inlink.lr-intag { min-height: 80px; padding: 8px 24px; }
.lr-count { overflow: visible; }
.lr-profbtn { display: inline-flex; align-items: center; gap: 7px; }
.lr-profbtn .ico { width: 17px; height: 17px; }

/* ---------------- phone landscape (stage scaled ~0.43) ---------------- */
body.mobile #lore .top h1 { font-size: 36px; max-width: 560px; }
body.mobile #lore .top .btn.small { min-height: 96px; padding: 0 28px; font-size: 26px; }
body.mobile #lore .top .btn .ico { width: 28px; height: 28px; }
body.mobile .lr-crumb { display: none; }
body.mobile #lore .lr-search .ico { left: 24px; width: 30px; height: 30px; }
body.mobile #lore .lr-search input { width: 420px; height: 96px; font-size: 28px; padding-left: 68px; }
body.mobile .lr-count { padding: 0 26px; height: 96px; align-items: center; font-size: 30px; box-sizing: border-box; }
body.mobile .lr-count span { font-size: 22px; }
body.mobile .lr-count .ico { width: 32px; height: 32px; }
body.mobile .lr-fs button { min-width: 96px; height: 96px; font-size: 32px; }
body.mobile .lr-fs button + button { font-size: 40px; }
body.mobile .lr-fs sub, body.mobile .lr-fs sup { font-size: 18px; }
body.mobile .lr-readbar { top: 100px; height: 6px; }
body.mobile .lr-view { top: 100px; }
body.mobile .lr-dot { width: 24px; height: 24px; }

body.mobile .lr-land { grid-template-columns: 760px 1fr; padding: 28px 36px 40px; gap: 30px; }
body.mobile .lr-hero { padding: 40px 44px 36px; gap: 18px; }
body.mobile .lr-realm { font-size: 84px; }
body.mobile .lr-tag { font-size: 34px; }
body.mobile .lr-intro p { font-size: 28px; line-height: 1.5; }
body.mobile .lr-acts .btn { min-height: 100px; font-size: 28px !important; padding: 16px 30px; }
body.mobile .lr-acts .btn .ico { width: 32px; height: 32px; }
body.mobile .lr-ring { width: 110px; height: 110px; } body.mobile .lr-ring b { font-size: 26px; }
body.mobile .lr-overall b { font-size: 30px; } body.mobile .lr-overall span { font-size: 23px; }
body.mobile .lr-shelves > .af-title { font-size: 24px; }
body.mobile .lr-shelfgrid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(330px, auto); gap: 24px; }
body.mobile .lr-shelf { min-height: 330px; padding: 24px 28px; }
body.mobile .lr-num { font-size: 50px; left: 22px; top: 18px; }
body.mobile .lr-seal { min-width: 54px; height: 54px; font-size: 24px; }
body.mobile .lr-sh-txt b { font-size: 38px; }
body.mobile .lr-sh-txt em { font-size: 25px; }
body.mobile .lr-sh-prog small, body.mobile .lr-sh-lock { font-size: 19px; }
body.mobile .lr-sh-lock .ico { width: 20px; height: 20px; }
body.mobile .lr-bar { height: 10px; }

body.mobile .lr-cat, body.mobile .lr-search-res { padding: 28px 36px 44px; gap: 26px; }
body.mobile .lr-cathead { padding: 36px 40px; min-height: 220px; }
body.mobile .lr-ch-txt h2 { font-size: 64px; }
body.mobile .lr-ch-txt p { font-size: 29px; max-width: 1100px; }
body.mobile .lr-ch-prog { width: 360px; } body.mobile .lr-ch-prog b { font-size: 46px; }
body.mobile .lr-ch-prog > span:not(.lr-bar) { font-size: 20px; } body.mobile .lr-ch-prog small { font-size: 21px; }
body.mobile .lr-grid { grid-template-columns: repeat(3, 1fr); gap: 26px; }
body.mobile .lr-grid-s { grid-template-columns: repeat(2, 1fr); }
body.mobile .lr-card-txt { padding: 18px 24px 24px; gap: 8px; }
body.mobile .lr-card-txt b { font-size: 32px; }
body.mobile .lr-card-txt em { font-size: 26px; }
body.mobile .lr-card-txt q { font-size: 24px; }
body.mobile .lr-card-txt small, body.mobile .lr-kicker { font-size: 18px; }
body.mobile .lr-card-txt small .ico { width: 20px; height: 20px; }
body.mobile .lr-card > .lr-dot { top: 16px; right: 16px; }
body.mobile .lr-wax { width: 96px; height: 96px; } body.mobile .lr-wax .ico { width: 40px; height: 40px; }
body.mobile .lr-how { font-size: 24px; padding: 14px 18px; } body.mobile .lr-how small { font-size: 16px; }
body.mobile .lr-sr-head > span { font-size: 22px; } body.mobile .lr-sr-head .af-eyebrow { font-size: 20px; }

body.mobile .lr-reader { max-width: 1640px; padding: 28px 40px 90px; }
body.mobile .lr-rhead { min-height: 420px; padding: 40px 60px 36px; gap: 36px; }
body.mobile .lr-medal { width: 200px; height: 200px; }
body.mobile .lr-rhead h2 { font-size: 76px; }
body.mobile .lr-rhead h2.long { font-size: 60px; } body.mobile .lr-rhead h2.xlong { font-size: 48px; }
body.mobile .lr-sub { font-size: 36px; }
body.mobile .lr-meta { font-size: 20px; } body.mobile .lr-meta .ico { width: 24px; height: 24px; }
body.mobile .lr-rhead .af-eyebrow { font-size: 20px; }
body.mobile .lr-page { padding: 50px 70px 60px; }
body.mobile .lr-col { font-size: calc(44px + var(--fs) * 4px); }
body.mobile .lr-body { line-height: 1.66; }
body.mobile .lr-hist { padding: 30px 36px; }
body.mobile .lr-hist-h { font-size: 21px; } body.mobile .lr-hist-h .ico { width: 32px; height: 32px; }
body.mobile .lr-hist p { font-size: calc(34px + var(--fs) * 3px); }
body.mobile .lr-orn { width: 280px; height: 36px; }
body.mobile .lr-links .btn { min-height: 100px; font-size: 26px; padding: 0 30px; } body.mobile .lr-links .btn .ico { width: 30px; height: 30px; }
body.mobile .lr-pnb { min-height: 130px; padding: 22px 28px; gap: 10px; }
body.mobile .lr-pnb small { font-size: 18px; } body.mobile .lr-pnb small .ico { width: 20px; height: 20px; }
body.mobile .lr-pnb b { font-size: 32px; } body.mobile .lr-pnb em { font-size: 22px; }
body.mobile .lr-rel .af-title { font-size: 21px; }
body.mobile .lr-relrow { grid-template-columns: repeat(2, 1fr); gap: 18px; }
body.mobile .lr-relc { min-height: 110px; gap: 18px; }
body.mobile .lr-relav { width: 84px; height: 84px; }
body.mobile .lr-relc b { font-size: 27px; } body.mobile .lr-relc small { font-size: 21px; }

body.mobile .lr-sealedpage { max-width: 1300px; padding: 60px 70px 56px; gap: 22px; }
body.mobile .lr-bigwax { width: 160px; height: 160px; } body.mobile .lr-bigwax .ico { width: 64px; height: 64px; }
body.mobile .lr-sealedpage h2 { font-size: 62px; }
body.mobile .lr-sealtxt { font-size: 32px; }
body.mobile .lr-howbig { padding: 24px 36px; } body.mobile .lr-howbig small { font-size: 18px; } body.mobile .lr-howbig b { font-size: 36px; }
body.mobile .lr-empty h2 { font-size: 44px; } body.mobile .lr-empty p { font-size: 28px; }

body.mobile .lr-hbadge { min-width: 34px; height: 34px; font-size: 18px; }
body.mobile .lr-inlink { min-height: 96px; font-size: 24px !important; }
body.mobile .lr-inlink .ico, body.mobile .lr-profbtn .ico { width: 28px; height: 28px; }

/* motion preferences */
body.fx-low .lr-reader.turn .lr-rhead, body.fx-low .lr-reader.turn .lr-page, body.fx-low .lr-sealedpage.turn { animation: none !important; }
body.fx-low .lr-card, body.fx-low .lr-pnb, body.fx-low .lr-relc { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .lr-reader.turn .lr-rhead, .lr-reader.turn .lr-page, .lr-sealedpage.turn { animation: none !important; }
  .lr-card, .lr-pnb, .lr-relc, .lr-readbar i { transition: none; }
}
body.theme-midnight .lr-page, body.theme-midnight .lr-card { background: rgba(4, 2, 8, .94); }