.lore-reader,
[data-theme="archive"] { --lore-accent: 205 180 128; }
[data-theme="lands"] { --lore-accent: 155 190 145; }
[data-theme="coin"] { --lore-accent: 224 187 103; }
[data-theme="people"] { --lore-accent: 124 185 197; }
[data-theme="history"] { --lore-accent: 210 144 127; }
[data-theme="power"] { --lore-accent: 179 159 210; }
[data-theme="faith"] { --lore-accent: 185 159 211; }
[data-theme="myth"] { --lore-accent: 141 171 216; }

.lore-reader {
  --reader-padding: 32px;
  background: linear-gradient(145deg, #1c241e, #171e19 60%);
  border-color: rgb(var(--lore-accent) / .25);
  box-shadow: 0 15px 55px #0000001a;
  padding: var(--reader-padding);
}

.lore-entry-heading,
.lore-reader-intro {
  isolation: isolate;
  position: relative;
  padding: 25px var(--reader-padding) 23px;
  margin: calc(-1 * var(--reader-padding)) calc(-1 * var(--reader-padding)) 0;
  background: radial-gradient(ellipse at 90% 10%, rgb(var(--lore-accent) / .16), transparent 65%), linear-gradient(125deg, #2b3023, #1a241d 70%);
  border-bottom: 1px solid rgb(var(--lore-accent) / .32);
  overflow: hidden;
}

.lore-entry-heading::before,
.lore-reader-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #1d261de8, #1d261d70), url('assets/world-map.jpg') center 47% / 850px auto;
  opacity: .16;
  pointer-events: none;
}

.lore-entry-heading::after,
.lore-reader-intro::after {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px solid rgb(var(--lore-accent) / .13);
  pointer-events: none;
}

.lore-chapter-mark {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: max(calc(7 * var(--px)), var(--text-min));
  letter-spacing: 1.8px;
  color: rgb(var(--lore-accent) / .8);
  margin-bottom: 25px;
}
.lore-chapter-mark svg { width: 15px; height: 15px; }
.lore-chapter-mark span span { color: #778270; margin: 0 5px; }
.lore-entry-heading .lore-back { margin-bottom: 25px; font-size: max(calc(10 * var(--px)), var(--text-min)); }
.lore-entry-heading .eyebrow,
.lore-reader-intro .eyebrow { color: rgb(var(--lore-accent)); }
.lore-entry-heading h2,
.lore-reader-intro h2 { font-size: max(calc(47 * var(--px)), var(--text-min)); line-height: 1.06; color: #f1e9d5; margin: 12px 95px 18px 0; text-wrap: balance; }
#lore-entry-title:focus { outline: none; }
.lore-entry-heading .lore-path { max-width: 85%; color: #b0b8a0; }
.lore-entry-heading .lore-meta { margin-bottom: 2px; }
.lore-meta > span:first-child { background: rgb(var(--lore-accent) / .08); border-color: rgb(var(--lore-accent) / .3); color: rgb(var(--lore-accent)); }
.lore-meta > a { padding: 8px 11px; background: #121b14a6; border: 1px solid rgb(var(--lore-accent) / .24); border-radius: 4px; color: rgb(var(--lore-accent)); transition: background .2s, border-color .2s; }
.lore-meta > a:hover { background: rgb(var(--lore-accent) / .12); border-color: rgb(var(--lore-accent) / .65); }
.lore-entry-heading .lore-tags { margin-bottom: 0; margin-top: 15px; }

.lore-seal { position: absolute; right: 30px; top: 85px; width: 95px; height: 95px; color: rgb(var(--lore-accent)); pointer-events: none; }
.seal-orbit { position: absolute; inset: 0; border: 1px solid rgb(var(--lore-accent) / .3); border-radius: 50%; box-shadow: 0 0 30px rgb(var(--lore-accent) / .08), inset 0 0 25px rgb(var(--lore-accent) / .04); }
.seal-orbit::before { content: ''; position: absolute; inset: 9px; border: 1px dashed rgb(var(--lore-accent) / .4); border-radius: 50%; }
.seal-orbit::after { content: ''; position: absolute; inset: 18px; border: 1px solid rgb(var(--lore-accent) / .35); transform: rotate(45deg); }
.seal-center { display: grid; place-items: center; position: absolute; inset: 0; }
.seal-center svg { width: 35px; height: 35px; filter: drop-shadow(0 0 10px rgb(var(--lore-accent) / .3)); }
.seal-star { position: absolute; top: -10px; left: 41px; padding: 0 2px; font-size: max(calc(16 * var(--px)), var(--text-min)); }

.lore-measures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 calc(-1 * var(--reader-padding)) 30px; background: #131b15; border-bottom: 1px solid rgb(var(--lore-accent) / .2); }
.lore-measures > div { display: flex; align-items: center; gap: 11px; padding: 17px 20px; position: relative; min-width: 0; }
.lore-measures > div + div::before { content: ''; position: absolute; left: 0; height: 28px; width: 1px; background: rgb(var(--lore-accent) / .2); }
.lore-measures strong { font-family: var(--serif); color: rgb(var(--lore-accent)); font-size: max(calc(29 * var(--px)), var(--text-min)); font-weight: 500; white-space: nowrap; }
.lore-measures span { font-size: max(calc(8 * var(--px)), var(--text-min)); line-height: 1.7; color: #9faa91; max-width: 68px; }
.lore-reader-intro .lore-draft-note { background: #111a1396; border-color: rgb(var(--lore-accent) / .22); margin: 24px 0 0; }
.lore-reader-intro > p:not(.eyebrow) { color: #b9c0a9; max-width: 90%; }

.lore-subjects { gap: 12px; }
.lore-subjects button { position: relative; padding: 17px 14px; min-height: 79px; gap: 12px; background: linear-gradient(115deg, rgb(var(--lore-accent) / .07), #151d17); border-color: rgb(var(--lore-accent) / .22); overflow: hidden; transition: transform .2s, border-color .2s, box-shadow .2s; }
.lore-subjects button::after { content: ''; position: absolute; bottom: 0; left: 0; height: 2px; width: 25%; background: rgb(var(--lore-accent) / .55); transition: width .25s; }
.lore-subjects button:hover { transform: translateY(-3px); border-color: rgb(var(--lore-accent) / .6); box-shadow: 0 6px 20px #00000029; background: rgb(var(--lore-accent) / .09); }
.lore-subjects button:hover::after { width: 100%; }
.lore-subject-emblem { display: grid; place-items: center; color: rgb(var(--lore-accent)); width: 34px; height: 34px; flex-shrink: 0; border: 1px solid rgb(var(--lore-accent) / .22); border-radius: 5px; background: rgb(var(--lore-accent) / .07); }
.lore-subject-emblem svg { width: 21px; height: 21px; }
.lore-subjects button > span:not(.lore-subject-emblem) { font-size: max(calc(11 * var(--px)), var(--text-min)); line-height: 1.6; }
.lore-subjects strong { margin-left: auto; font-family: var(--serif); font-size: max(calc(28 * var(--px)), var(--text-min)); color: rgb(var(--lore-accent)); }
.lore-subjects strong span { font-family: var(--sans); font-size: max(calc(13 * var(--px)), var(--text-min)); }

.lore-entry-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.lore-group-heading { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding-top: 0; border-top: 0; margin: 17px 0 2px; color: rgb(var(--lore-accent)); }
.lore-group-heading::before { content: '✧'; font-family: var(--serif); font-size: max(calc(22 * var(--px)), var(--text-min)); }
.lore-group-heading::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgb(var(--lore-accent) / .3), transparent); }
.lore-field { padding: 21px; margin: 0; border: 1px solid #35402f; border-radius: 6px; background: linear-gradient(140deg, #26302266, #151d17aa); min-width: 0; }
.lore-field h4 { display: flex; align-items: center; gap: 10px; font-size: max(calc(24 * var(--px)), var(--text-min)); line-height: 1.25; color: #dfdfca; margin-bottom: 17px; }
.lore-field-detail { color: rgb(var(--lore-accent) / .8); flex-shrink: 0; }
.lore-field-detail svg { width: 19px; height: 19px; }
.lore-field ul { columns: 1; padding-left: 17px; }
.lore-field li { color: #c6cbb7; }
.lore-field li:last-child { margin-bottom: 0; }
.lore-field li::marker { color: rgb(var(--lore-accent) / .55); }
.lore-field[data-kind="narrative"],
.lore-field[data-kind="connections"],
.lore-field[data-kind="attributes"] { grid-column: 1 / -1; }
.lore-field[data-kind="narrative"] { padding: 25px; border-top: 2px solid rgb(var(--lore-accent) / .5); background: radial-gradient(ellipse at 0 0, rgb(var(--lore-accent) / .05), transparent 80%), #18201a; }
.lore-field[data-kind="narrative"] p { color: #c2c7b4; font-size: max(calc(13 * var(--px)), var(--text-min)); line-height: 2; }
.lore-field[data-kind="narrative"] p:last-child { margin-bottom: 0; }
.lore-field[data-kind="connections"] ul,
.lore-field[data-kind="tags"] ul { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; padding: 0; }
.lore-field[data-kind="connections"] li,
.lore-field[data-kind="tags"] li { margin: 0; border: 1px solid rgb(var(--lore-accent) / .18); border-radius: 4px; background: rgb(var(--lore-accent) / .04); padding: 7px 11px; font-size: max(calc(12 * var(--px)), var(--text-min)); line-height: 1.7; }
.lore-field[data-kind="tags"] li { background: #121b1580; border-color: #4a543c; color: #c6cbb7; }
.lore-field a { color: rgb(var(--lore-accent)); }
.lore-field[data-kind="metric"] ul { list-style: none; padding-left: 0; }
.lore-field[data-kind="metric"] li,
.lore-field[data-kind="metric"] p { font-family: var(--serif); font-size: max(calc(32 * var(--px)), var(--text-min)); line-height: 1.4; color: rgb(var(--lore-accent)); margin: 0; }
.lore-field[data-kind="attributes"] ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; list-style: none; padding: 0; }
.lore-field[data-kind="attributes"] li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 13px 8px; border: 1px solid rgb(var(--lore-accent) / .23); border-radius: 5px; background: #111b1499; margin: 0; }
.lore-field[data-kind="attributes"] li span { font-size: max(calc(9 * var(--px)), var(--text-min)); letter-spacing: .5px; color: #a5b197; }
.lore-field[data-kind="attributes"] li strong { font-family: var(--serif); font-size: max(calc(32 * var(--px)), var(--text-min)); font-weight: 500; color: rgb(var(--lore-accent)); line-height: 1.15; }
.lore-related { padding: 24px; border: 1px solid rgb(var(--lore-accent) / .25); border-radius: 6px; background: radial-gradient(ellipse at top right, rgb(var(--lore-accent) / .08), transparent 80%); }
.lore-related .eyebrow { color: rgb(var(--lore-accent)); }
.lore-related a { background: #172019; border-color: rgb(var(--lore-accent) / .25); transition: border-color .2s, background .2s; }
.lore-related a:hover { background: rgb(var(--lore-accent) / .08); border-color: rgb(var(--lore-accent) / .7); }
.lore-featured > a { padding: 21px; margin: 12px 0; border: 1px solid #3c4431; border-radius: 5px; background: linear-gradient(115deg, #29301f80, #162019); transition: border-color .2s, transform .2s; }
.lore-featured > a:last-child { border: 1px solid #3c4431; }
.lore-featured > a:hover { border-color: #a28e5f; transform: translateX(3px); }
.lore-featured > a:hover h3 { color: #e8d1a0; }
.lore-featured > a > span { font-size: max(calc(19 * var(--px)), var(--text-min)); }

.event-chronology {
  position: relative;
  padding: 25px;
  margin: 0 0 28px;
  border: 1px solid rgb(var(--lore-accent) / .35);
  border-radius: 7px;
  background: radial-gradient(ellipse at top right, rgb(var(--lore-accent) / .11), transparent 65%), linear-gradient(125deg, #262a21, #17201a);
  box-shadow: inset 0 1px rgb(var(--lore-accent) / .08);
}
.chronology-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.chronology-heading .eyebrow { color: rgb(var(--lore-accent)); font-size: max(calc(8 * var(--px)), var(--text-min)); letter-spacing: 1.5px; margin-bottom: 8px; }
.chronology-heading h3 { font-family: var(--serif); font-size: max(calc(29 * var(--px)), var(--text-min)); font-weight: 400; color: #e8dfc9; margin: 0; line-height: 1.2; }
.chronology-emblem { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgb(var(--lore-accent) / .3); border-radius: 50%; color: rgb(var(--lore-accent)); flex-shrink: 0; }
.chronology-emblem svg { width: 22px; height: 22px; }
.event-type-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 19px; }
.event-type-badges::before { content: 'EVENT TYPE'; width: 100%; color: #a6b098; font-size: max(calc(7 * var(--px)), var(--text-min)); letter-spacing: 1.3px; margin-bottom: 2px; }
.event-type-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid #8d82614d; border-radius: 4px; background: #b8a16f12; color: #d9c695; font-size: max(calc(9 * var(--px)), var(--text-min)); letter-spacing: .6px; }
.event-type-badge::before { content: '◆'; font-size: max(calc(6 * var(--px)), var(--text-min)); }
.event-type-badge[data-event-type="war"] { color: #edaf9d; border-color: #b46e556b; background: #9c4f3826; }
.event-type-badge[data-event-type="natural"] { color: #b6ceaa; border-color: #819e6366; background: #6e914a1f; }
.event-type-badge[data-event-type="recurring"] { color: #b0c6dc; border-color: #7296b566; background: #668eac1c; }
.event-timeline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; position: relative; list-style: none; padding: 0; margin: 31px 0 24px; }
.event-timeline::before { content: ''; position: absolute; left: 8px; right: 8px; top: 8px; height: 1px; background: linear-gradient(90deg, rgb(var(--lore-accent) / .85), rgb(var(--lore-accent) / .35)); }
.timeline-milestone { display: flex; flex-direction: column; align-items: flex-start; position: relative; padding-top: 35px; min-width: 0; }
.timeline-milestone:last-child { align-items: flex-end; text-align: right; }
.timeline-marker { position: absolute; top: 1px; left: 1px; width: 15px; height: 15px; border: 1px solid rgb(var(--lore-accent)); border-radius: 50%; background: #252c22; box-shadow: 0 0 0 5px rgb(var(--lore-accent) / .06), 0 0 17px rgb(var(--lore-accent) / .13); }
.timeline-marker::after { content: ''; position: absolute; inset: 4px; background: rgb(var(--lore-accent)); border-radius: 50%; }
.timeline-milestone:last-child .timeline-marker { left: auto; right: 1px; }
.timeline-label { color: #b3b9a3; font-size: max(calc(8 * var(--px)), var(--text-min)); text-transform: uppercase; letter-spacing: 1.4px; margin-bottom: 8px; }
.timeline-date { color: #f0dac1; font-family: var(--serif); font-size: max(calc(45 * var(--px)), var(--text-min)); font-weight: 400; line-height: 1.1; overflow-wrap: anywhere; }
.timeline-date-note { margin-top: 8px; color: #9da58f; font-size: max(calc(9 * var(--px)), var(--text-min)); }
.timeline-milestone.present .timeline-marker { box-shadow: 0 0 0 5px rgb(var(--lore-accent) / .1), 0 0 25px rgb(var(--lore-accent) / .25); }
.timeline-milestone.present .timeline-date { font-style: italic; color: rgb(var(--lore-accent)); }
.timeline-milestone.unrecorded .timeline-marker { border-style: dashed; border-color: #849077; box-shadow: none; }
.timeline-milestone.unrecorded .timeline-marker::after { display: none; }
.timeline-milestone.unrecorded .timeline-date { font-family: var(--sans); font-size: max(calc(13 * var(--px)), var(--text-min)); color: #939d86; line-height: 2; }
.timeline-caption { font-size: max(calc(8 * var(--px)), var(--text-min)); color: #8a957d; line-height: 1.8; letter-spacing: .2px; margin: 20px 0 0; border-top: 1px solid rgb(var(--lore-accent) / .15); padding-top: 13px; }

@keyframes lore-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.lore-entry-heading, .lore-reader-intro, .lore-field { animation: lore-reveal .35s ease-out both; }

@media (max-width: 1200px) {
  .lore-reader { --reader-padding: 25px; }
  .lore-entry-heading h2, .lore-reader-intro h2 { font-size: max(calc(40 * var(--px)), var(--text-min)); margin-right: 75px; }
  .lore-seal { width: 76px; height: 76px; right: 23px; top: 85px; }
  .seal-center svg { width: 27px; height: 27px; }
  .seal-star { left: 31px; }
  .lore-measures > div { padding: 15px 13px; gap: 8px; flex-direction: column; align-items: flex-start; }
  .lore-measures span { max-width: none; font-size: max(calc(8 * var(--px)), var(--text-min)); }
  .lore-subjects button { gap: 9px; padding: 14px 11px; }
  .lore-subjects strong { font-size: max(calc(25 * var(--px)), var(--text-min)); }
  .lore-subjects button > span:not(.lore-subject-emblem) { font-size: max(calc(10 * var(--px)), var(--text-min)); }
  .lore-subject-emblem { width: 29px; height: 32px; }
  .lore-field { padding: 17px; }
  .lore-field h4 { font-size: max(calc(22 * var(--px)), var(--text-min)); }
}

@media (max-width: 1050px) and (min-width: 851px) {
  .lore-entry-body { grid-template-columns: minmax(0, 1fr); }
  .lore-subjects { grid-template-columns: minmax(0, 1fr); }
  .lore-reader-intro h2, .lore-entry-heading h2 { margin-right: 0; }
  .lore-seal { opacity: .18; right: 20px; }
}

@media (max-width: 650px) {
  .lore-reader { --reader-padding: 19px; }
  .lore-chapter-mark { font-size: max(calc(6 * var(--px)), var(--text-min)); letter-spacing: 1.1px; gap: 6px; margin-bottom: 23px; }
  .lore-chapter-mark svg { width: 12px; height: 12px; }
  .lore-chapter-mark span span { margin: 0 3px; }
  .lore-entry-heading, .lore-reader-intro { padding-top: 23px; }
  .lore-entry-heading h2, .lore-reader-intro h2 { font-size: max(calc(35 * var(--px)), var(--text-min)); margin-right: 0; position: relative; }
  .lore-seal { opacity: .2; width: 83px; height: 83px; top: 80px; right: 20px; z-index: -1; }
  .lore-entry-heading .lore-path, .lore-reader-intro > p:not(.eyebrow) { max-width: 100%; }
  .lore-measures { margin-bottom: 24px; }
  .lore-measures > div { padding: 15px 11px; gap: 4px; }
  .lore-measures strong { font-size: max(calc(26 * var(--px)), var(--text-min)); }
  .lore-measures span { font-size: max(calc(7 * var(--px)), var(--text-min)); line-height: 1.6; }
  .lore-entry-body { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  .lore-field { padding: 19px 16px; }
  .lore-field[data-kind="narrative"] { padding: 21px 17px; }
  .lore-field h4 { font-size: max(calc(22 * var(--px)), var(--text-min)); }
  .lore-field-detail svg { width: 17px; height: 17px; }
  .lore-subjects { gap: 9px; }
  .lore-subjects button { flex-wrap: wrap; padding: 14px 12px; gap: 9px; }
  .lore-subjects button > span:not(.lore-subject-emblem) { width: calc(100% - 40px); font-size: max(calc(10 * var(--px)), var(--text-min)); }
  .lore-subjects strong { margin-left: 40px; font-size: max(calc(26 * var(--px)), var(--text-min)); }
  .lore-subject-emblem { width: 28px; height: 28px; }
  .lore-subject-emblem svg { width: 19px; height: 19px; }
  .lore-subjects strong span { margin-left: 5px; }
  .lore-field[data-kind="connections"] li { font-size: max(calc(12 * var(--px)), var(--text-min)); }
  .lore-related { padding: 21px 17px; }
  .lore-related a { font-size: max(calc(11 * var(--px)), var(--text-min)); }
  .lore-featured > a { padding: 18px 15px; }
  .event-chronology { padding: 22px 17px; }
  .chronology-heading h3 { font-size: max(calc(27 * var(--px)), var(--text-min)); }
  .chronology-heading .eyebrow { font-size: max(calc(6 * var(--px)), var(--text-min)); letter-spacing: 1.3px; }
  .chronology-emblem { width: 33px; height: 33px; }
  .chronology-emblem svg { width: 18px; height: 18px; }
  .event-timeline { grid-template-columns: 1fr; gap: 29px; margin-top: 25px; margin-bottom: 22px; }
  .event-timeline::before { left: 7px; right: auto; width: 1px; top: 9px; bottom: 33px; height: auto; background: linear-gradient(rgb(var(--lore-accent) / .85), rgb(var(--lore-accent) / .25)); }
  .timeline-milestone, .timeline-milestone:last-child { padding: 0 0 0 35px; align-items: flex-start; text-align: left; }
  .timeline-marker, .timeline-milestone:last-child .timeline-marker { left: 0; right: auto; top: 3px; }
  .timeline-label { margin-bottom: 6px; }
  .timeline-date { font-size: max(calc(41 * var(--px)), var(--text-min)); }
  .timeline-caption { font-size: max(calc(8 * var(--px)), var(--text-min)); }
}

@media (prefers-reduced-motion: reduce) {
  .lore-entry-heading, .lore-reader-intro, .lore-field { animation: none; }
  .lore-subjects button:hover, .lore-featured > a:hover { transform: none; }
}