:root {
  --lore-sand: #eccd91;
  --lore-ink: #06101a;
}
.lore-page { background: #050a11; }
.lore-page .site-header { background: linear-gradient(180deg,rgba(3,7,13,.89),rgba(5,11,18,.65)); }
.lore-page .site-nav { gap: clamp(18px,3vw,42px); }
.lore-page .site-nav .is-active { color: #fff; }
.lore-page .site-nav .is-active:after { width: 100%; }
.lore-hero { position: relative; min-height: 760px; isolation: isolate; overflow: hidden; background: #060f18; }
.lore-hero-scene { position: absolute; inset: 0; z-index: -2; background: url("assets/home/hero-voyage.webp") center 39%/cover no-repeat; filter: saturate(.8) contrast(1.06); }
.lore-hero:after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,rgba(4,8,15,.98) 1%,rgba(4,9,16,.9) 32%,rgba(4,9,16,.43) 66%,rgba(4,9,16,.3)),linear-gradient(0deg,#050a11 0%,rgba(5,10,17,.03) 38%,rgba(5,10,17,.1) 75%,rgba(5,10,17,.63)); }
.lore-hero-layout { min-height: 760px; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(180px,.8fr); align-items: center; gap: 40px; padding: 150px 0 130px; }
.lore-bookmark { margin: -8px 0 20px; color: rgba(193,213,230,.72); font-size: 10px; letter-spacing: .3em; font-weight: 700; }
.lore-hero h1 { max-width: 760px; margin: 0; font: 400 clamp(54px,5.4vw,86px)/1.07 Georgia,"Times New Roman",serif; letter-spacing: -.044em; text-shadow: 0 12px 30px rgba(0,0,0,.5); }
.lore-hero h1 em,.lore-page h2 em { color: var(--lore-sand); font-style: normal; }
.lore-lead { max-width: 540px; margin: 28px 0 30px; color: #bdd0dd; font-size: clamp(16px,1.35vw,20px); line-height: 1.7; }
.lore-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.lore-cover-mark { justify-self: end; width: min(100%,320px); aspect-ratio: 1; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 21px; background: radial-gradient(circle,rgba(171,194,206,.17),transparent 67%); border: 1px solid rgba(226,198,138,.17); border-radius: 50%; box-shadow: 0 0 90px rgba(14,41,69,.35),inset 0 0 52px rgba(20,49,80,.11); }
.lore-cover-mark img { display: block; width: clamp(110px,11vw,160px); height: auto; opacity: .8; filter: drop-shadow(0 0 28px rgba(187,181,132,.34)); }
.lore-cover-mark span { font: 10px/1.3 Georgia,serif; color: var(--lore-sand); letter-spacing: .26em; }
.lore-hero-credit { position: absolute; left: max(47px,calc((100% - 1380px)/2)); bottom: 35px; color: #8ca3b4; font-size: 9px; letter-spacing: .2em; }
.lore-directory { position: relative; z-index: 5; border-top: 1px solid rgba(181,202,218,.16); border-bottom: 1px solid rgba(181,202,218,.16); background: #09121d; }
.lore-directory-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); }
.lore-directory a { min-height: 81px; padding: 21px 12px; display: flex; align-items: center; gap: 15px; text-decoration: none; color: #bad0de; font-size: 11px; letter-spacing: .055em; border-right: 1px solid rgba(181,202,218,.12); transition: background .2s,color .2s; }
.lore-directory a:last-child { border-right: 0; }
.lore-directory a:hover { color: #fff; background: rgba(77,125,157,.15); }
.lore-directory a span { color: var(--lore-sand); font: 400 23px Georgia,serif; }
.lore-prologue { padding: 125px 0 134px; display: grid; grid-template-columns: minmax(175px,.6fr) minmax(0,1.5fr); gap: clamp(30px,8vw,120px); }
.lore-side-note { display: flex; align-items: flex-start; gap: 18px; color: #7996a9; font-size: 9px; letter-spacing: .19em; padding-top: 40px; text-transform: uppercase; }
.lore-note-number { display: inline-grid; place-items: center; flex: 0 0 58px; height: 58px; border: 1px solid rgba(232,205,151,.45); color: var(--lore-sand); font: 34px Georgia,serif; }
.lore-prose { max-width: 875px; }
.lore-page h2 { font: 400 clamp(42px,4.4vw,70px)/1.14 Georgia,serif; letter-spacing: -.035em; }
.lore-prose h2 { margin: 0 0 35px; }
.lore-prose p:not(.eyebrow) { color: #b6c6d0; font-size: clamp(15px,1.25vw,17px); line-height: 1.95; margin: 0 0 23px; }
.lore-prose strong { color: #e8d09e; font-weight: 600; }
.lore-prose .lore-dropcap:first-letter { float: left; font: 72px/.75 Georgia,serif; padding: 11px 13px 0 0; color: var(--lore-sand); }
.lore-prose blockquote { position: relative; margin: 47px 0; padding: 25px 25px 27px 32px; border-left: 2px solid var(--lore-sand); color: #e4d4b4; background: linear-gradient(90deg,rgba(159,111,60,.12),transparent); font: italic 400 clamp(21px,2.2vw,29px)/1.45 Georgia,serif; }
.lore-outpost { background: linear-gradient(105deg,#0b1823,#07101b 70%); border-block: 1px solid rgba(135,181,214,.12); }
.lore-outpost-layout { padding: 118px 0; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,1fr); gap: clamp(40px,5vw,85px); align-items: center; }
.lore-outpost-visual { position: relative; overflow: hidden; min-height: 380px; border: 1px solid rgba(227,204,150,.25); box-shadow: 0 22px 90px rgba(0,0,0,.38); }
.lore-outpost-visual img { display: block; width: 100%; min-height: 380px; height: 100%; object-fit: cover; filter: brightness(.78) saturate(.83); }
.lore-outpost-visual span { position: absolute; bottom: 19px; left: 20px; background: rgba(5,12,20,.84); color: var(--lore-sand); font-size: 9px; letter-spacing: .16em; padding: 9px 12px; border: 1px solid rgba(232,204,146,.3); }
.lore-outpost-copy h2 { margin: 0 0 25px; }
.lore-outpost-copy>p:not(.eyebrow) { color: #b3c5d2; font-size: 15px; line-height: 1.9; }
.lore-outpost-copy strong { color: var(--lore-sand); }
.lore-note { margin-top: 27px; border-top: 1px solid var(--border); padding-top: 25px; color: #96b4c6; font-size: 11px; line-height: 1.75; }
.lore-note-pill { display: inline-block; color: #95e0b5; font-size: 9px; letter-spacing: .1em; padding: 3px 7px; margin-right: 7px; border: 1px solid rgba(149,224,181,.35); }
.lore-paths { padding: 131px 0; }
.lore-section-header { max-width: 860px; margin-bottom: 47px; }
.lore-section-header h2 { margin: 0 0 20px; }
.lore-section-header>p:last-child { color: #a8becd; font-size: 16px; line-height: 1.75; }
.lore-path-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 19px; }
.lore-path { position: relative; min-height: 415px; padding: 32px 31px; background: linear-gradient(145deg,rgba(18,31,43,.9),rgba(6,13,20,.98)); border: 1px solid rgba(194,213,228,.16); overflow: hidden; }
.lore-path:before { content: ""; position: absolute; top: 0; left: 0; width: 36%; height: 2px; background: var(--lore-sand); opacity: .65; }
.lore-path-count { display: block; color: #89a2b1; font-size: 10px; letter-spacing: .17em; }
.lore-path-symbol { width: 75px; height: 75px; margin: 24px 0 10px; display: grid; place-items: center; border: 1px solid rgba(222,198,146,.35); border-radius: 50%; color: var(--lore-sand); font: 39px Georgia,serif; background: radial-gradient(circle,rgba(196,160,99,.11),transparent 72%); }
.lore-path h3 { font: 400 35px Georgia,serif; margin: 0 0 3px; }
.lore-path h4 { color: var(--lore-sand); font: italic 400 15px Georgia,serif; margin: 0 0 22px; }
.lore-path p { color: #a6bdca; font-size: 13px; line-height: 1.75; }
.lore-path-weapon { position: absolute; bottom: 26px; left: 31px; font-size: 9px; letter-spacing: .16em; color: #93bfd8; }
.lore-mage { background: radial-gradient(circle at 80% 5%,rgba(56,126,182,.17),transparent 50%),#0a1420; }
.lore-archer { background: radial-gradient(circle at 80% 5%,rgba(82,153,106,.13),transparent 50%),#0a141a; }
.lore-land { background: #0a131f; border-block: 1px solid rgba(140,182,211,.18); }
.lore-land-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(40px,6vw,110px); align-items: center; padding: 124px 0; }
.lore-land-grid h2 { margin: 0 0 20px; }
.lore-land-grid p:not(.eyebrow) { font-size: 14px; color: #a7bdc9; line-height: 1.8; }
.lore-region-list { margin: 32px 0 22px; border-top: 1px solid rgba(171,205,230,.2); }
.lore-region-list>div { display: grid; grid-template-columns: minmax(130px,.7fr) minmax(0,1.1fr); gap: 15px; padding: 19px 0; border-bottom: 1px solid rgba(171,205,230,.14); }
.lore-region-list strong { font: 400 17px Georgia,serif; color: #e4d5b3; }
.lore-region-list span { color: #90a7b6; font-size: 12px; line-height: 1.5; }
.lore-page .lore-concept-label { color: #7790a2!important; font-size: 11px!important; }
.lore-map { margin: 0; position: relative; border: 1px solid rgba(208,189,142,.36); background: #06101b; overflow: hidden; box-shadow: 0 20px 85px rgba(0,0,0,.3); }
.lore-map:after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 90px rgba(2,8,16,.67); pointer-events: none; }
.lore-map img { display: block; width: 100%; aspect-ratio: 1.35; height: auto; object-fit: cover; filter: contrast(1.04) brightness(.83); }
.lore-map figcaption { position: absolute; bottom: 15px; left: 15px; right: 15px; z-index: 1; color: #e5c995; background: rgba(5,12,19,.9); border: 1px solid rgba(227,201,151,.3); font-size: 9px; letter-spacing: .13em; padding: 11px 13px; line-height: 1.5; }
.lore-chronicles { padding: 124px 0 130px; }
.lore-chronicle-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid var(--border); }
.lore-chronicle-grid article { position: relative; min-height: 285px; padding: 30px 29px 55px; border-right: 1px solid var(--border); background: linear-gradient(160deg,rgba(16,28,39,.8),rgba(5,12,20,.84)); }
.lore-chronicle-grid article:last-child { border: 0; }
.chronicle-index { font-size: 9px; letter-spacing: .17em; color: var(--lore-sand); }
.lore-chronicle-grid h3 { margin: 21px 0 12px; font: 400 27px Georgia,serif; }
.lore-chronicle-grid p { color: #a7bcc9; font-size: 13px; line-height: 1.75; }
.chronicle-status { position: absolute; bottom: 24px; left: 29px; color: #879caf; font-size: 9px; letter-spacing: .12em; }
.chronicle-status.current { color: #93d6b0; }
.lore-next { margin-top: 65px; border: 1px solid rgba(230,200,141,.36); padding: 35px; display: flex; gap: 24px; align-items: center; background: linear-gradient(100deg,rgba(126,85,38,.14),rgba(9,22,35,.82)); }
.lore-next img { opacity: .85; flex: 0 0 auto; }
.lore-next>div { flex: 1; }
.lore-next p { margin: 0 0 6px; font-size: 10px; letter-spacing: .17em; color: #a6bdca; }
.lore-next h2 { margin: 0; font-size: clamp(28px,3.2vw,43px); }
.lore-next .button { flex: 0 0 auto; }
@media (max-width: 1100px) {
  .lore-hero-layout { grid-template-columns: minmax(0,1fr) 190px; }
  .lore-cover-mark { width: 185px; }
  .lore-directory a { font-size: 10px; gap: 9px; padding-inline: 8px; }
  .lore-outpost-layout { grid-template-columns: 1fr 1fr; }
  .lore-path { padding: 26px; min-height: 435px; }
  .lore-path-weapon { left: 26px; }
}
@media (max-width: 850px) {
  .lore-hero-layout { min-height: 680px; grid-template-columns: 1fr; padding-top: 135px; padding-bottom: 85px; }
  .lore-hero { min-height: 680px; }
  .lore-hero h1 { max-width: 670px; }
  .lore-cover-mark { display: none; }
  .lore-directory-grid { display: flex; overflow-x: auto; scrollbar-width: thin; }
  .lore-directory a { flex: 0 0 auto; min-width: 145px; min-height: 68px; }
  .lore-prologue { grid-template-columns: 1fr; gap: 24px; padding: 85px 0; }
  .lore-side-note { padding-top: 0; }
  .lore-outpost-layout { grid-template-columns: 1fr; padding: 85px 0; }
  .lore-outpost-visual,.lore-outpost-visual img { min-height: 320px; max-height: 450px; }
  .lore-paths { padding: 90px 0; }
  .lore-path-grid { grid-template-columns: 1fr 1fr; }
  .lore-path:last-child { grid-column: span 2; }
  .lore-land-grid { grid-template-columns: 1fr; padding: 90px 0; }
  .lore-chronicles { padding: 90px 0; }
}
@media (max-width: 660px) {
  .lore-hero,.lore-hero-layout { min-height: 710px; }
  .lore-hero-layout { align-items: flex-end; padding: 128px 0 96px; }
  .lore-hero-scene { background-position: 65% center; }
  .lore-hero:after { background: linear-gradient(0deg,#050a11 0%,rgba(5,10,17,.94) 17%,rgba(5,10,17,.74) 48%,rgba(5,10,17,.26) 100%); }
  .lore-hero h1 { font-size: clamp(43px,9.6vw,60px); }
  .lore-lead { font-size: 15px; margin: 20px 0 25px; }
  .lore-bookmark { font-size: 9px; letter-spacing: .18em; }
  .lore-hero-actions { flex-direction: column; align-items: stretch; }
  .lore-hero-actions .button { width: 100%; }
  .lore-hero-credit { left: 18px; bottom: 21px; font-size: 7px; line-height: 1.6; }
  .lore-prologue { padding: 77px 0; }
  .lore-side-note { font-size: 8px; align-items: center; }
  .lore-note-number { width: 46px; height: 46px; flex-basis: 46px; font-size: 24px; }
  .lore-page h2 { font-size: clamp(37px,7vw,50px); }
  .lore-prose .lore-dropcap:first-letter { font-size: 59px; }
  .lore-path-grid,.lore-chronicle-grid { grid-template-columns: 1fr; }
  .lore-path,.lore-path:last-child { grid-column: 1; min-height: 350px; }
  .lore-path-weapon { bottom: 18px; }
  .lore-region-list>div { grid-template-columns: 1fr; gap: 6px; }
  .lore-chronicle-grid article { min-height: 230px; border-right: none; border-bottom: 1px solid var(--border); }
  .lore-next { align-items: flex-start; flex-direction: column; padding: 25px; }
  .lore-next .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .lore-directory a { transition: none; }
}

/* Character concept illustrations from the Xcess archive, not game-ready GLBs. */
.lore-visual-note {
  max-width:810px;margin:-23px 0 30px;color:#8fa9b9;
  font:12px/1.7 "Trebuchet MS",Arial,sans-serif;
}
.lore-path {min-height:575px;padding-bottom:70px;}
.lore-path-art {
  position:relative;display:grid;place-items:center;height:207px;
  padding:10px;margin:19px 0 24px;overflow:hidden;
  border:1px solid rgba(214,193,145,.24);
  background:radial-gradient(circle at 50% 40%,rgba(57,95,118,.24),rgba(4,11,20,.9) 74%);
}
.lore-path-art img {
  width:100%;height:100%;display:block;object-fit:contain;object-position:center;
  filter:saturate(.88) contrast(1.07);
  -webkit-mask-image:linear-gradient(0deg,transparent 0%,#000 16%,#000 100%);
  mask-image:linear-gradient(0deg,transparent 0%,#000 16%,#000 100%);
}
.lore-path-art figcaption {
  position:absolute;bottom:9px;right:11px;font:700 9px/1.25 Arial,sans-serif;
  letter-spacing:.16em;color:#d4b976;text-shadow:0 2px 8px #000;
}
.lore-warrior .lore-path-art {background:radial-gradient(circle at 50% 35%,rgba(125,64,52,.3),rgba(4,11,20,.96) 78%);}
.lore-mage .lore-path-art {background:radial-gradient(circle at 50% 35%,rgba(45,98,164,.31),rgba(4,11,20,.96) 78%);}
.lore-archer .lore-path-art {background:radial-gradient(circle at 50% 35%,rgba(58,113,77,.29),rgba(4,11,20,.96) 78%);}
@media(max-width:1100px) {.lore-path{min-height:590px}.lore-path-art{height:187px}}
@media(max-width:850px) {.lore-path{min-height:575px}.lore-path-art{height:200px}}
@media(max-width:660px) {
 .lore-visual-note{margin-top:-10px}
 .lore-path,.lore-path:last-child{min-height:545px;padding-bottom:64px}
 .lore-path-art{height:220px;}
}


/* Interlude: curated references from the original concept-art ZIP. */
.lore-archive{
  border-top:1px solid rgba(185,216,236,.14);
  border-bottom:1px solid rgba(185,216,236,.16);
  background:radial-gradient(ellipse at 76% 25%,rgba(79,95,120,.17),transparent 49%),#070f19;
}
.lore-archive-shell{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(40px,5vw,90px);align-items:center;
  padding-top:112px;padding-bottom:65px;
}
.lore-archive-copy h2{font-size:clamp(39px,4.15vw,64px);line-height:1.13;margin:14px 0 25px}
.lore-archive-copy>p:not(.eyebrow){
  color:#aabfcc;line-height:1.84;font-size:14px;margin-bottom:20px
}
.lore-archive-copy .button{margin-top:12px}
.lore-archive-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto;gap:14px}
.lore-archive-gallery figure{
  position:relative;margin:0;overflow:hidden;min-height:200px;
  border:1px solid rgba(211,181,116,.26);
  background:linear-gradient(125deg,#1c2831,#060d16)
}
.lore-archive-gallery .lore-archive-map{grid-column:1 / -1;height:290px}
.lore-archive-gallery figure:not(.lore-archive-map){height:215px}
.lore-archive-gallery img{
  width:100%;height:100%;display:block;object-fit:cover;object-position:center 30%;
  filter:brightness(.77) saturate(.78);
  transition:transform .5s,filter .3s
}
.lore-archive-gallery figure:not(.lore-archive-map) img{object-fit:contain}
.lore-archive-gallery figure:hover img{filter:brightness(.91) saturate(.9);transform:scale(1.03)}
.lore-archive-gallery figcaption{
  position:absolute;left:12px;bottom:12px;padding:8px 9px;
  color:#e9d19c;background:rgba(3,10,17,.88);
  border:1px solid rgba(223,195,123,.26);
  font:700 9px Arial,sans-serif;letter-spacing:.14em
}
.lore-archive-caveat{
  padding:0 0 29px;font:10px/1.7 Arial,sans-serif;
  letter-spacing:.12em;color:#809dae
}
@media(max-width:1100px){
  .lore-archive-shell{gap:28px}
  .lore-archive-gallery .lore-archive-map{height:260px}
}
@media(max-width:850px){
  .lore-archive-shell{grid-template-columns:1fr;padding-top:85px}
  .lore-archive-copy{max-width:700px}
  .lore-archive-gallery{max-width:840px}
}
@media(max-width:600px){
  .lore-archive-shell{padding-top:70px;padding-bottom:30px}
  .lore-archive-gallery .lore-archive-map{height:200px}
  .lore-archive-gallery figure:not(.lore-archive-map){height:170px;min-height:170px}
  .lore-archive-caveat{letter-spacing:.04em;font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  .lore-archive-gallery img{transition:none}
}