@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  --de-ink: #070b13;
  --de-navy: #0a1424;
  --de-panel: #101a29;
  --de-panel-2: #111722;
  --de-blue: #4b78ad;
  --de-blue-bright: #84b9ec;
  --de-silver: #c7d0da;
  --de-silver-dark: #77889b;
  --de-gold: #b99a54;
  --de-light: #f0f2f5;
  --de-text-muted: #aeb9c7;
  --de-display: 'Cinzel', Georgia, serif;
  --de-serif: 'Libre Baskerville', Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.de-page {
  margin: 0;
  color: var(--de-light);
  font-family: var(--de-serif);
  background: #b8a07a url('../images/Medium Parchment.png') repeat;
  background-size: 620px 620px;
}
.de-page img { display: block; max-width: 100%; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; padding: .8rem 1rem; background: white; color: black; }
.skip-link:focus { top: 1rem; }
.de-header { border-bottom-color: rgba(199, 208, 218, .28); background: rgba(5, 10, 18, .97); }
.de-header .brand-name { color: var(--de-silver); }
.de-header nav a:hover { color: var(--de-blue-bright); }
.de-header nav a::after { background: var(--de-silver); }
.de-header .menu-button { border-color: rgba(199, 208, 218, .5); }

.de-kicker { margin: 0 0 .7rem; color: var(--de-blue-bright); font-family: var(--de-display); font-size: .72rem; font-weight: 700; letter-spacing: .2em; }
.de-hero {
  min-height: clamp(650px, calc(100vh - 72px), 850px);
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(rgba(6, 12, 22, .86), rgba(6, 12, 22, .92)),
    url('../images/Dark Parchment.png') repeat;
  background-size: auto, 620px 620px;
  border-bottom: 2px solid var(--de-silver-dark);
}
.de-hero::before, .de-hero::after {
  content: "";
  position: absolute;
  width: 52vw;
  height: 52vw;
  border: 1px solid rgba(132, 185, 236, .14);
  border-radius: 50%;
  z-index: -1;
}
.de-hero::before { left: -30vw; top: -24vw; box-shadow: 0 0 80px rgba(75, 120, 173, .12); }
.de-hero::after { right: -32vw; bottom: -32vw; }
.de-hero-orbit { position: absolute; inset: 50% auto auto 50%; width: min(780px, 86vw); aspect-ratio: 1; transform: translate(-50%, -50%); border: 1px solid rgba(199, 208, 218, .12); border-radius: 50%; z-index: -1; }
.de-hero-orbit::before, .de-hero-orbit::after { content: "✦"; position: absolute; color: rgba(132, 185, 236, .55); font-size: 1rem; }
.de-hero-orbit::before { top: 15%; left: 14%; }.de-hero-orbit::after { right: 10%; bottom: 24%; }
.de-hero-orbit span { position: absolute; inset: 9%; border: 1px solid rgba(185, 154, 84, .1); border-radius: 50%; }
.de-hero-inner { width: min(1050px, calc(100% - 40px)); padding: 90px 20px; text-align: center; }
.de-hero h1 { margin: 0 auto; width: min(850px, 92vw); }
.de-hero h1 img { width: 100%; filter: drop-shadow(0 18px 30px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(73,127,184,.14)); }
.de-intro { max-width: 660px; margin: 1.4rem auto 1.9rem; color: #d6dce4; font-size: clamp(.95rem, 1.4vw, 1.14rem); line-height: 1.8; }
.de-rule { display: flex; align-items: center; gap: 14px; width: min(620px, 80%); margin: .8rem auto; color: var(--de-gold); }
.de-rule span { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--de-silver-dark)); }
.de-rule span:last-child { background: linear-gradient(90deg, var(--de-silver-dark), transparent); }
.de-rule.compact { width: 100%; margin: 1.25rem 0; }
.de-button { border-color: var(--de-silver-dark); background: linear-gradient(180deg, rgba(132,185,236,.12), rgba(7,11,19,.55)); color: var(--de-light); }
.de-button:hover, .de-button:focus-visible { border-color: var(--de-blue-bright); background: rgba(75,120,173,.24); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.3), 0 0 18px rgba(75,120,173,.16); }

.de-section { padding: clamp(70px, 8vw, 112px) clamp(22px, 5vw, 78px); }
.de-party-section, .de-npcs-section {
  background:
    linear-gradient(rgba(7, 12, 20, .94), rgba(9, 16, 27, .96)),
    url('../images/Dark Parchment.png') repeat;
  background-size: auto, 600px 600px;
}
.de-section-heading { max-width: 800px; margin: 0 auto 42px; text-align: center; }
.de-section-heading h2 { margin: 0; color: var(--de-silver); font-family: var(--de-display); font-size: clamp(2.5rem, 6vw, 5.2rem); line-height: 1; text-shadow: 0 3px 16px rgba(0,0,0,.45); }
.de-section-heading > p:last-child { color: var(--de-text-muted); }
.light-heading h2, .light-heading > p:last-child { color: #131a25; text-shadow: none; }
.light-heading .de-kicker { color: #264c75; }

.party-portraits { max-width: 1260px; margin: 0 auto 45px; display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)); gap: clamp(9px, 1.4vw, 18px); }
.party-portrait { min-width: 0; padding: 0; border: 0; color: inherit; font: inherit; background: none; cursor: pointer; }
.portrait-frame { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--de-silver-dark); background: var(--de-ink); box-shadow: 0 10px 22px rgba(0,0,0,.34); transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease; }
.portrait-frame::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(199,208,218,.2); pointer-events: none; }
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease, filter .3s ease; }
.portrait-name { display: block; margin-top: 12px; color: var(--de-silver); font-family: var(--de-display); font-size: clamp(.62rem, .86vw, .8rem); line-height: 1.3; letter-spacing: .04em; }
.party-portrait:hover .portrait-frame, .party-portrait:focus-visible .portrait-frame, .party-portrait.is-selected .portrait-frame { transform: translateY(-6px) scale(1.045); border-color: var(--de-blue-bright); box-shadow: 0 14px 28px rgba(0,0,0,.46), 0 0 24px rgba(80,145,211,.5); }
.party-portrait:hover img, .party-portrait.is-selected img { transform: scale(1.035); filter: brightness(1.06); }
.party-portrait.is-selected .portrait-name { color: var(--de-blue-bright); }

.character-display { max-width: 1180px; min-height: 620px; margin: 0 auto; display: grid; grid-template-columns: minmax(340px, .9fr) minmax(360px, 1.1fr); align-items: center; border: 1px solid var(--de-silver-dark); outline: 1px solid rgba(199,208,218,.13); outline-offset: -10px; background: linear-gradient(135deg, rgba(17,26,41,.98), rgba(6,11,19,.98)); box-shadow: 0 28px 60px rgba(0,0,0,.42); overflow: hidden; opacity: 0; transform: translateY(16px); transition: opacity .34s ease, transform .34s ease; }
.character-display.is-visible { opacity: 1; transform: translateY(0); }
.character-art-stage { align-self: stretch; min-height: 620px; position: relative; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; background: radial-gradient(circle at 50% 42%, rgba(73,129,185,.22), transparent 42%); }
.character-art-stage::before { content: ""; position: absolute; width: 72%; aspect-ratio: 1; top: 15%; border: 1px solid rgba(199,208,218,.16); border-radius: 50%; box-shadow: inset 0 0 50px rgba(75,120,173,.08), 0 0 50px rgba(75,120,173,.08); }
.character-aura { position: absolute; left: 15%; right: 15%; bottom: 4%; height: 15%; border-radius: 50%; background: rgba(74, 131, 188, .28); filter: blur(32px); }
#character-art { position: relative; z-index: 1; max-width: 94%; width: auto; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 20px 24px rgba(0,0,0,.64)); }
#character-art[data-scale="short"] { height: 73%; }
#character-art[data-scale="standard"] { height: 88%; }
#character-art[data-scale="roland"] { height: 92%; max-width: 100%; }
#character-art[data-scale="tall"] { height: 98%; }
.character-copy { padding: clamp(35px, 5vw, 72px); position: relative; z-index: 2; }
.character-copy h3 { margin: 0; color: var(--de-silver); font-family: var(--de-display); font-size: clamp(2.25rem, 4.4vw, 4.5rem); line-height: .98; }
.character-display[data-character="talia"] .character-copy h3 { font-size: clamp(1.8rem, 3.35vw, 3.35rem); }
.character-meta { margin: .8rem 0 0; color: var(--de-blue-bright); font-family: var(--de-display); font-size: .85rem; letter-spacing: .08em; }
.character-copy > p:not(.de-kicker):not(.character-meta) { color: #c4ccd6; line-height: 1.8; }
.character-sheet-link { margin-top: 1rem; }
.disabled-button { opacity: .56; cursor: default; pointer-events: none; }
.rot-trigger { margin-top: 28px; padding: 11px 0; border: 0; border-bottom: 1px dashed rgba(132,185,236,.48); color: var(--de-blue-bright); background: none; font-family: var(--de-serif); font-style: italic; cursor: pointer; }
.rot-card { margin-top: 20px; display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: center; padding: 16px; border: 1px solid rgba(132,185,236,.34); background: rgba(4,9,17,.72); }
.rot-card[hidden] { display: none; }
.rot-card img { width: 120px; height: 140px; object-fit: contain; }
.rot-card h4 { margin: 0; color: var(--de-silver); font-family: var(--de-display); font-size: 1.15rem; }
.rot-card p:last-child { margin-bottom: 0; color: var(--de-text-muted); font-size: .83rem; }

.celestial-divider { display: flex; align-items: center; gap: 20px; padding: 17px clamp(22px, 5vw, 78px); color: #243f5e; background: url('../images/Light Parchment.png') repeat; background-size: 600px; }
.celestial-divider span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #6d7983, transparent); }
.celestial-divider b { letter-spacing: .15em; }
.de-locations-section { color: #151b23; background: linear-gradient(rgba(238,224,195,.68), rgba(221,202,167,.76)), url('../images/Light Parchment.png') repeat; background-size: auto, 620px 620px; }
.location-grid { max-width: 1180px; margin: auto; display: grid; grid-template-columns: 1.45fr .75fr; gap: 22px; }
.location-card { min-height: 430px; display: grid; grid-template-columns: 1.1fr 1fr; overflow: hidden; border: 2px solid #14243a; outline: 1px solid rgba(10,20,34,.32); outline-offset: -9px; color: var(--de-light); background: linear-gradient(145deg, #101d2e, #080e18); box-shadow: 0 18px 34px rgba(31,25,17,.27); }
.location-preview { position: relative; min-height: 360px; overflow: hidden; background: radial-gradient(circle at 52% 46%, rgba(126,178,222,.24), transparent 3%, rgba(33,70,109,.33) 4%, transparent 29%), repeating-radial-gradient(circle at 50% 50%, transparent 0 38px, rgba(182,200,217,.11) 39px 40px), linear-gradient(140deg,#1a3552,#09111d); }
.location-preview::before, .location-preview::after { content: ""; position: absolute; width: 75%; height: 1px; background: rgba(199,208,218,.18); left: 14%; top: 50%; transform: rotate(28deg); }
.location-preview::after { transform: rotate(-42deg); }
.location-map-preview { position:relative; min-height:360px; overflow:hidden; background:#07101b; }
.location-map-preview::after { content:""; position:absolute; inset:0; border:1px solid rgba(199,208,218,.25); box-shadow:inset 0 0 55px rgba(3,8,14,.58); pointer-events:none; }
.location-map-preview img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease,filter .45s ease; }
.location-map-preview:hover img,.location-map-preview:focus-visible img { transform:scale(1.035); filter:brightness(1.06); }
.map-ring { position: absolute; width: 50%; aspect-ratio: 1; left: 25%; top: 23%; border: 1px solid rgba(199,208,218,.25); border-radius: 50%; }
.map-star { position: absolute; inset: 0; display: grid; place-items: center; color: var(--de-gold); font-size: 2.4rem; }
.location-copy { align-self: center; padding: 42px; }
.location-copy h3 { margin: 0 0 1rem; color: var(--de-silver); font-family: var(--de-display); font-size: clamp(2rem, 4vw, 3.6rem); }
.location-copy p:not(.de-kicker) { color: var(--de-text-muted); line-height: 1.7; }
.location-card-future { display: block; }
.location-card-future .location-copy { height: 100%; display: flex; flex-direction: column; justify-content: center; }

.npc-grid { max-width: 900px; margin: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.npc-card { display: grid; grid-template-columns: 82px 1fr; gap: 16px; align-items: center; min-height: 132px; padding: 20px; border: 1px solid var(--de-silver-dark); background: linear-gradient(145deg, #111d2d, #080e18); box-shadow: 0 12px 28px rgba(0,0,0,.25); }
.npc-sigil { width: 72px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--de-silver-dark); border-radius: 50%; color: var(--de-silver); font-family: var(--de-display); font-size: 1.7rem; background: radial-gradient(circle, rgba(75,120,173,.26), transparent 70%); }
.npc-card h3 { margin: 0 0 7px; color: var(--de-silver); font-family: var(--de-display); font-size: 1rem; }
.npc-card p { margin: 0; color: var(--de-text-muted); font-size: .78rem; }

.de-footer { padding: 48px 22px 32px; text-align: center; border-top: 1px solid var(--de-silver-dark); color: var(--de-text-muted); background: linear-gradient(rgba(6,11,19,.96), rgba(3,7,12,.98)), url('../images/Dark Parchment.png') repeat; background-size: auto, 600px; }
.de-footer-mark { display: block; width: min(310px, 76vw); margin: 0 auto 8px; transition: transform .25s ease, filter .25s ease; }
.de-footer-mark:hover { transform: scale(1.03); filter: drop-shadow(0 0 15px rgba(76,135,192,.28)); }
.de-footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 26px; margin: 22px 0; font-family: var(--de-display); font-size: .7rem; letter-spacing: .08em; }
.de-footer-links a:hover { color: var(--de-blue-bright); }

@media (max-width: 1050px) {
  .party-portraits { grid-template-columns: repeat(4, 1fr); }
  .character-display { grid-template-columns: .85fr 1fr; }
  .location-grid { grid-template-columns: 1fr; }
  .location-card-future { min-height: 280px; }
}
@media (max-width: 760px) {
  .de-header nav.open { display: flex; }
  .de-hero { min-height: 600px; }
  .de-hero-inner { padding: 72px 0; }
  .de-intro { padding: 0 14px; }
  .de-section { padding-left: 16px; padding-right: 16px; }
  .party-portraits { grid-template-columns: repeat(3, 1fr); gap: 16px 9px; }
  .portrait-name { font-size: .62rem; }
  .character-display { grid-template-columns: 1fr; scroll-margin-top: 86px; }
  .character-art-stage { min-height: 500px; }
  #character-art[data-scale="short"] { height: 67%; }
  #character-art[data-scale="standard"] { height: 82%; }
  #character-art[data-scale="roland"] { height: 86%; max-width: 100%; }
  #character-art[data-scale="tall"] { height: 94%; }
  .character-copy { padding: 36px 28px 46px; }
  .character-display[data-character="talia"] .character-copy h3 { font-size: clamp(1.75rem, 8vw, 2.7rem); }
  .location-card { grid-template-columns: 1fr; }
  .location-preview { min-height: 280px; }
  .location-copy { padding: 34px 28px 42px; }
  .npc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .party-portraits { grid-template-columns: repeat(2, 1fr); }
  .character-art-stage { min-height: 430px; }
  .rot-card { grid-template-columns: 90px 1fr; }
  .rot-card img { width: 90px; height: 110px; }
  .celestial-divider b { font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}