/* The chapter pages (/world/{id}), the world hub, Our story and the home page's doorways.
   Each chapter is tinted by one of Vana'diel's elements (data-tint): Light for the relit world, Earth for the living
   one, Fire for the fights, Lightning for the interface, Wind for the road. The tint drives --element (the crystal
   glyphs, kickers, rules) and --tint-rgb (washes and glows). */

[data-tint="fire"] { --element: var(--el-fire); --tint-rgb: 240 122 107; }
[data-tint="earth"] { --element: var(--el-earth); --tint-rgb: 226 190 106; }
[data-tint="water"] { --element: var(--el-water); --tint-rgb: 119 174 235; }
[data-tint="wind"] { --element: var(--el-wind); --tint-rgb: 134 214 162; }
[data-tint="ice"] { --element: var(--el-ice); --tint-rgb: 169 230 242; }
[data-tint="lightning"] { --element: var(--el-lightning); --tint-rgb: 201 155 245; }
[data-tint="light"] { --element: var(--el-light); --tint-rgb: 255 244 214; }
[data-tint="dark"] { --element: var(--el-dark); --tint-rgb: 154 140 196; }

.kicker,
.zonein-kicker,
.region-kicker,
.door-kicker,
.next-zone-kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font: 600 0.75rem/1.2 var(--font-ui); letter-spacing: 0.28em; text-transform: uppercase; color: var(--element);
}
.zonein-kicker .crystal-glyph, .region-kicker .crystal-glyph, .door-kicker .crystal-glyph { width: 10px; height: 15px; }

.chapter-more { display: flex; flex-wrap: wrap; gap: 14px 32px; }

/* ---------- Zone in: the page opener ---------- */

.zonein {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(100svh, 1000px); display: grid; align-items: end;
  padding: 150px 0 clamp(80px, 11vw, 132px); background: var(--night-deep);
}
.zonein-art { position: absolute; inset: 0; z-index: -3; }
.zonein-img { width: 100%; height: 100%; object-fit: cover; }
.zonein-map { position: absolute; inset: 0; z-index: -2; display: grid; place-items: center; pointer-events: none; }
.zonein-map img {
  width: min(84vmin, 860px); max-height: 86%; height: auto; object-fit: contain; opacity: 0.14;
  filter: brightness(1.7) saturate(0.7) drop-shadow(0 0 22px rgb(var(--tint-rgb, 183 163 240) / 0.55));
  mix-blend-mode: screen;
}
.zonein-grade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgb(8 6 15 / 0.7) 0%, rgb(8 6 15 / 0) 26%, rgb(8 6 15 / 0.05) 50%, rgb(8 6 15 / 0.94) 100%),
    linear-gradient(90deg, rgb(8 6 15 / 0.65) 0%, rgb(8 6 15 / 0) 60%);
}
.zonein-inner { display: grid; gap: 20px; justify-items: start; }
.zonein-title {
  font-family: var(--font-inscription); font-size: clamp(3rem, 8.4vw, 7.4rem); line-height: 0.95; letter-spacing: 0.01em;
  max-width: 13ch; text-wrap: balance; text-shadow: 0 4px 60px rgb(8 6 15 / 0.75);
}
.zonein-rule { width: clamp(160px, 24vw, 340px); height: 1px; background: linear-gradient(90deg, var(--element), rgb(227 154 196 / 0.6) 60%, transparent); transform-origin: left; }
.zonein-lead { max-width: 640px; color: var(--mist); text-shadow: 0 1px 20px rgb(8 6 15 / 0.9); }
.zonein-story { max-width: 640px; color: var(--mist-80); font-size: clamp(1.3rem, 2.2vw, 1.75rem); text-shadow: 0 1px 20px rgb(8 6 15 / 0.9); }
.zonein-arrive {
  position: absolute; right: var(--gutter); bottom: 26px; display: flex; align-items: center; gap: 12px;
  font: 600 0.68rem/1 var(--font-ui); letter-spacing: 0.3em; text-transform: uppercase; color: var(--mist-60);
  opacity: 0; pointer-events: none;
}
.zonein-bar { position: relative; width: 120px; height: 2px; border-radius: 2px; background: var(--ash-20); overflow: hidden; }
.zonein-bar i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--petal), var(--element)); transform-origin: left; }
.zonein-arrive img { width: 24px; height: 24px; filter: drop-shadow(0 0 8px rgb(227 154 196 / 0.7)); }

/* Arrival, as the zoning screen does it: the map draws in light, the bar fills, then the world fades up over it. */
@media (prefers-reduced-motion: no-preference) {
  .zonein-map img { animation: zonein-map 2.8s var(--ease-out) both; }
  .zonein-art { animation: zonein-art 1.9s var(--ease-out) 0.75s both; }
  .zonein-arrive { animation: zonein-arrive 3s ease both; }
  .zonein-bar i { animation: zonein-bar 2.1s var(--ease-out) 0.1s both; }
  .zonein-kicker, .zonein-title, .zonein-lead, .zonein-story { animation: zonein-rise 1s var(--ease-out) both; }
  .zonein-kicker { animation-delay: 0.25s; }
  .zonein-title { animation-delay: 0.4s; }
  .zonein-rule { animation: zonein-rule 1.2s var(--ease-out) 0.8s both; }
  .zonein-lead { animation-delay: 1s; }
  .zonein-story { animation-delay: 1.15s; }
}
@keyframes zonein-map {
  0% { opacity: 0; scale: 0.94; }
  22% { opacity: 0.95; }
  55% { opacity: 0.9; scale: 1; }
  100% { opacity: 0.14; scale: 1.02; }
}
@keyframes zonein-art { from { opacity: 0; scale: 1.07; filter: blur(10px) saturate(0.6); } to { opacity: 1; scale: 1; filter: none; } }
@keyframes zonein-arrive { 0% { opacity: 0; } 12%, 72% { opacity: 1; } 100% { opacity: 0; } }
@keyframes zonein-bar { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes zonein-rise { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes zonein-rule { from { scale: 0 1; } to { scale: 1 1; } }

/* The utility pages' opener: lower, a smaller title, the same arrival. */
.zonein-short { min-height: min(64svh, 640px); padding-bottom: clamp(56px, 7vw, 88px); }
.zonein-short .zonein-title { font-size: clamp(2.6rem, 6vw, 5rem); max-width: 18ch; }
.zonein-short .zonein-arrive { display: none; }

@media (max-width: 720px) {
  .zonein { min-height: 88svh; padding-top: 120px; }
  .zonein-short { min-height: 60svh; }
  .zonein-grade { background: linear-gradient(180deg, rgb(8 6 15 / 0.7) 0%, rgb(8 6 15 / 0.1) 30%, rgb(8 6 15 / 0.96) 92%); }
  .zonein-arrive { display: none; }
}

/* ---------- The menu list: the game's menu window, pointing hand and all ---------- */

.menu-list {
  position: relative; padding: 18px 16px 14px; border-radius: 14px;
  background: linear-gradient(180deg, rgb(37 29 69 / 0.72), rgb(23 18 44 / 0.88));
  border: 1px solid rgb(183 163 240 / 0.28);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 28px 60px -34px rgb(0 0 0 / 0.85);
}
.menu-list::before {
  content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--petal), transparent); opacity: 0.7;
}
.menu-list-title { margin-bottom: 8px; padding-left: 36px; font: 600 0.7rem/1 var(--font-ui); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ash); }
.menu-list ol, ul.menu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
ul.menu-list { padding: 10px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; }
.menu-list a {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 10px 9px 36px; border-radius: 8px; color: var(--mist-80); text-decoration: none; font-weight: 500; font-size: 0.9375rem;
  transition: color 120ms, background-color 120ms;
}
.menu-list a::before {
  content: ""; position: absolute; left: 4px; top: 50%; width: 26px; height: 18px;
  background: url("/img/cursor-hand.svg") no-repeat center / contain;
  opacity: 0; translate: -8px -50%; transition: opacity 120ms, translate 180ms var(--ease-out);
}
.menu-list a:hover, .menu-list a:focus-visible {
  outline: none; color: var(--mist);
  background: linear-gradient(90deg, rgb(var(--tint-rgb, 183 163 240) / 0.18), rgb(var(--tint-rgb, 183 163 240) / 0) 85%);
}
.menu-list a:hover::before, .menu-list a:focus-visible::before { opacity: 1; translate: 0 -50%; }
@media (prefers-reduced-motion: no-preference) {
  .menu-list a:hover::before, .menu-list a:focus-visible::before { animation: cursor-bob 0.9s ease-in-out 0.2s infinite; }
}
@keyframes cursor-bob { 0%, 100% { translate: 0 -50%; } 50% { translate: -3px -50%; } }
.menu-list .tag { flex: none; }
.tag-soon { border-color: rgb(var(--tint-rgb, 183 163 240) / 0.5); color: var(--element, var(--lilac)); }

/* ---------- Chapter page: the index under the opener ---------- */

.chapter-index { padding: clamp(64px, 9vw, 110px) 0; background: linear-gradient(var(--night-deep), var(--night)); border-bottom: 1px solid var(--ash-15); }
.chapter-index-inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.chapter-index-summary { font-family: var(--font-story); font-style: italic; font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.25; color: var(--mist); text-wrap: pretty; }
.chapter-index-summary::before { content: ""; display: block; width: 56px; height: 2px; margin-bottom: 24px; background: var(--element); }

@media (max-width: 900px) { .chapter-index-inner { grid-template-columns: 1fr; } }

.chapter-compare { padding: clamp(80px, 11vw, 140px) 0; background: radial-gradient(70% 50% at 50% 0%, rgb(var(--tint-rgb) / 0.07), transparent 70%), var(--night); }

/* ---------- Feature rows and the rest ---------- */

.feature-stack { padding: clamp(80px, 11vw, 140px) 0; }
.feature-stack > .wrap { display: grid; gap: clamp(80px, 11vw, 150px); }
.feature-stack .feature-text::before { content: ""; width: 44px; height: 2px; background: var(--element); }
.feature-stack .feature-media { display: block; }
.feature-stack .feature-media::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgb(var(--tint-rgb) / 0.18), inset 0 -80px 120px -60px rgb(8 6 15 / 0.6);
}
.feature-stack .blood-card { justify-self: start; }

/* The Blood Moon's row: a drawn moon until its sky captures cleanly. */
.blood-art { aspect-ratio: 16 / 10; background: radial-gradient(70% 60% at 60% 30%, #5d0f22 0%, #2a0710 55%, #0b0306 100%); }
.blood-art::before {
  content: ""; position: absolute; inset: 0; opacity: 0.6;
  background: radial-gradient(1px 1px at 20% 30%, #ffd5d5 50%, transparent 51%), radial-gradient(1px 1px at 75% 60%, #ffd5d5 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 80%, #ffd5d5 50%, transparent 51%), radial-gradient(1px 1px at 85% 20%, #ffd5d5 50%, transparent 51%),
    radial-gradient(1px 1px at 12% 70%, #ffd5d5 50%, transparent 51%), radial-gradient(1px 1px at 55% 12%, #ffd5d5 50%, transparent 51%);
}
.blood-disc {
  position: absolute; left: 60%; top: 40%; width: 34%; aspect-ratio: 1; translate: -50% -50%; border-radius: 999px;
  background: radial-gradient(circle at 38% 35%, #ff9b8a 0%, #d8343f 35%, #8c1124 70%, #4a0712 100%);
  box-shadow: 0 0 80px 20px rgb(216 52 63 / 0.55), 0 0 200px 60px rgb(140 17 36 / 0.45);
}
@media (prefers-reduced-motion: no-preference) { .blood-disc { animation: blood-breathe 6s ease-in-out infinite; } }
@keyframes blood-breathe { 50% { box-shadow: 0 0 110px 30px rgb(216 52 63 / 0.7), 0 0 260px 80px rgb(140 17 36 / 0.5); } }

.feature-more { padding: 0 0 clamp(80px, 11vw, 140px); }
.feature-more .eyebrow { margin-bottom: 22px; }
.more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.more-card {
  display: grid; gap: 12px; align-content: start; padding: 26px 24px; border-radius: 16px;
  background: linear-gradient(160deg, rgb(var(--tint-rgb) / 0.08), rgb(27 21 51 / 0.78) 45%); border: 1px solid var(--ash-20);
}
.more-card .crystal-glyph { width: 12px; height: 18px; }
.more-card p { color: var(--mist-80); font-size: 0.9375rem; line-height: 1.6; }
.more-card .title-3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }

/* ---------- The ledger (the tuned chapter) ---------- */

.ledger-section { padding: clamp(80px, 11vw, 140px) 0; background: radial-gradient(70% 45% at 15% 0%, rgb(var(--tint-rgb) / 0.09), transparent 70%), var(--night); border-bottom: 1px solid var(--ash-15); }
.ledger-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 44px) 28px; align-items: start; }
.ledger {
  width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden;
  border: 1px solid var(--ash-20); border-radius: 16px; background: var(--panel);
}
.ledger caption { caption-side: top; text-align: left; padding: 0 2px 14px; font-family: var(--font-inscription); font-size: clamp(1.35rem, 2vw, 1.7rem); color: var(--mist); }
.ledger th, .ledger td { padding: 14px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--ash-15); font-size: 0.9375rem; line-height: 1.45; }
.ledger thead th { border-top: 0; padding-block: 16px 12px; font: 600 0.68rem/1 var(--font-ui); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ash); }
.ledger thead th:last-child { color: var(--element); }
.ledger tbody th { width: 32%; font-weight: 600; color: var(--mist); }
.ledger-then { width: 22%; color: var(--ash); }
.ledger-now { color: var(--element); font-weight: 600; }
.ledger-note { display: block; margin-top: 4px; font-weight: 400; font-size: 0.875rem; line-height: 1.55; color: var(--mist-80); }
.ledger tbody tr:hover { background: rgb(var(--tint-rgb) / 0.05); }

@media (max-width: 1000px) { .ledger-groups { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .ledger thead { display: none; }
  .ledger tr { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .ledger tbody th { grid-column: 1 / -1; width: auto; padding-bottom: 4px; }
  .ledger td { border-top: 0; padding-top: 4px; width: auto; }
  .ledger-then::before, .ledger-now::before { display: block; margin-bottom: 4px; font: 600 0.62rem/1 var(--font-ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ash); }
  .ledger-then::before { content: "Retail"; }
  .ledger-now::before { content: "Lotusreach"; color: var(--element); }
}

/* ---------- The log window (the journey chapter) ---------- */

.log-section { padding: clamp(80px, 11vw, 140px) 0; border-bottom: 1px solid var(--ash-15); background: radial-gradient(60% 60% at 90% 30%, rgb(var(--tint-rgb) / 0.08), transparent 70%); }
.log-section-inner { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.log-section .section-head { margin-bottom: 0; }
.logwin {
  border-radius: 14px; overflow: hidden; background: rgb(12 9 26 / 0.86);
  border: 1px solid rgb(183 163 240 / 0.26); box-shadow: 0 50px 90px -46px rgb(0 0 0 / 0.95), inset 0 1px 0 rgb(255 255 255 / 0.05);
}
.logwin-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px;
  border-bottom: 1px solid var(--ash-15); background: linear-gradient(90deg, rgb(227 154 196 / 0.16), transparent 60%);
  font: 600 0.7rem/1 var(--font-ui); letter-spacing: 0.22em; text-transform: uppercase; color: var(--mist-60);
}
.logwin-tabs { display: flex; gap: 14px; letter-spacing: 0.06em; text-transform: none; font-weight: 500; font-size: 0.78rem; }
.logwin-tabs i { font-style: normal; color: var(--ash); }
.logwin-tabs i:first-child { color: var(--mist); }
.logwin-lines { list-style: none; margin: 0; padding: 16px 18px 20px; display: grid; gap: 7px; font: 0.875rem/1.5 var(--font-mono); }
.log { color: var(--mist-80); }
.log-system { color: var(--mist); }
.log-lotus { color: var(--petal); }
.log-party { color: #8FD5F5; }
.log-skill { color: var(--crystal); }
.log-gain { color: #A9E3A0; }
@media (prefers-reduced-motion: no-preference) {
  .js .logwin .log { opacity: 0; }
  .js .logwin.is-in .log { animation: log-in 420ms var(--ease-out) both; }
  .js .logwin.is-in .log:nth-child(2) { animation-delay: 0.35s; }
  .js .logwin.is-in .log:nth-child(3) { animation-delay: 0.7s; }
  .js .logwin.is-in .log:nth-child(4) { animation-delay: 1.05s; }
  .js .logwin.is-in .log:nth-child(5) { animation-delay: 1.4s; }
  .js .logwin.is-in .log:nth-child(6) { animation-delay: 1.75s; }
  .js .logwin.is-in .log:nth-child(7) { animation-delay: 2.1s; }
  .js .logwin.is-in .log:nth-child(n + 8) { animation-delay: 2.45s; }
}
@keyframes log-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 900px) { .log-section-inner { grid-template-columns: 1fr; } }

/* ---------- Next zone: the band that leads to the next chapter ---------- */

.next-zone {
  position: relative; isolation: isolate; display: grid; min-height: clamp(380px, 50vw, 580px); overflow: hidden;
  color: var(--mist); text-decoration: none; border-top: 1px solid var(--ash-15);
}
.next-zone:hover { color: var(--mist); }
.next-zone-art { position: absolute; inset: 0; z-index: -2; }
.next-zone-art img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8) brightness(0.62); transition: scale 1.6s var(--ease-out), filter 0.6s; }
.next-zone::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(8 6 15 / 0.92), rgb(8 6 15 / 0.45) 62%, rgb(8 6 15 / 0.15)); }
.next-zone:hover .next-zone-art img, .next-zone:focus-visible .next-zone-art img { scale: 1.04; filter: saturate(1) brightness(0.8); }
.next-zone-inner { display: grid; gap: 16px; align-content: center; padding-block: 72px; }
.next-zone-place { color: var(--mist-80); }
.next-zone-title { font-family: var(--font-inscription); font-size: clamp(2.6rem, 6vw, 5.2rem); line-height: 1; max-width: 14ch; }
.next-zone-summary { max-width: 560px; color: var(--mist-80); font-size: 1.0625rem; line-height: 1.6; }
.next-zone-title::after {
  content: ""; display: inline-block; vertical-align: middle; width: 0.9em; height: 2px; margin-left: 0.35em;
  background: var(--element); transition: width 240ms var(--ease-out);
}
.next-zone:hover .next-zone-title::after { width: 1.4em; }

/* ---------- The world hub: one region per chapter ---------- */

.regions { padding: clamp(80px, 11vw, 140px) 0; }
.region-list { list-style: none; padding: 0; display: grid; gap: clamp(88px, 12vw, 160px); }
.region { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 76px); align-items: center; }
.region.is-flipped .region-art { order: 2; }
.region-art { position: relative; display: block; border-radius: 18px; overflow: hidden; border: 1px solid var(--ash-20); }
.region-art img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: scale 1.2s var(--ease-out); }
.region-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(var(--tint-rgb) / 0.22); background: linear-gradient(180deg, transparent 60%, rgb(var(--tint-rgb) / 0.12)); }
.region:hover .region-art img { scale: 1.03; }
.region-text { display: grid; gap: 18px; justify-items: start; }
.region-text h2 a { color: var(--mist); text-decoration: none; }
.region-text h2 a:hover { color: var(--element); }
.region-text .menu-list { justify-self: stretch; }

@media (max-width: 900px) {
  .region { grid-template-columns: 1fr; }
  .region.is-flipped .region-art { order: 0; }
}
@media (max-width: 520px) { ul.menu-list { grid-template-columns: 1fr; } }

/* ---------- Home: the five doorways ---------- */

.doors { padding: clamp(80px, 11vw, 140px) 0 clamp(72px, 10vw, 130px); }
.door-row {
  list-style: none; margin: 0 auto; padding: 0 var(--gutter); max-width: 1680px;
  display: flex; gap: 12px; height: min(74svh, 660px); min-height: 500px;
}
.door { flex: 1 1 0; min-width: 0; transition: flex-grow 700ms var(--ease-out); }
.door:hover, .door:focus-within { flex-grow: 2.3; }
.door a {
  position: relative; isolation: isolate; display: block; height: 100%; overflow: hidden;
  border-radius: 18px; border: 1px solid var(--ash-20); color: var(--mist); text-decoration: none;
}
.door-art { position: absolute; inset: 0; z-index: -2; }
.door-art img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.75) brightness(0.72); transition: scale 1.2s var(--ease-out), filter 0.6s; }
.door:hover .door-art img, .door:focus-within .door-art img { scale: 1.04; filter: none; }
.door a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(8 6 15 / 0.05) 30%, rgb(8 6 15 / 0.9) 82%); }
.door a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--element);
  transform-origin: left; scale: 0 1; transition: scale 600ms var(--ease-out);
}
.door:hover a::after, .door:focus-within a::after { scale: 1 1; }
.door a:focus-visible { outline: 2px solid var(--element); outline-offset: 3px; }
.door-text { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 10px; padding: 22px 22px 26px; }
.door-kicker { font-size: 0.66rem; letter-spacing: 0.24em; gap: 8px; }
.door-title { font-family: var(--font-inscription); font-size: clamp(1.35rem, 1.9vw, 1.9rem); line-height: 1.05; text-shadow: 0 2px 20px rgb(8 6 15 / 0.8); }
.door-summary, .door-enter { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 600ms var(--ease-out), opacity 400ms; }
.door-summary { max-width: 46ch; font-size: 0.9375rem; line-height: 1.55; color: var(--mist-80); }
.door-enter { font-weight: 600; color: var(--element); display: inline-flex; align-items: center; gap: 8px; }
.door-enter::after { content: ""; width: 22px; height: 1px; background: currentColor; }
.door:hover .door-summary, .door:focus-within .door-summary, .door:hover .door-enter, .door:focus-within .door-enter { max-height: 9em; opacity: 1; }

@media (hover: none) {
  .door-summary, .door-enter { max-height: none; opacity: 1; }
}
@media (max-width: 1100px) {
  .door-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; min-height: 0; }
  .door { min-height: 380px; }
  .door:last-child { grid-column: 1 / -1; }
  .door-summary, .door-enter { max-height: none; opacity: 1; }
}
@media (max-width: 640px) {
  .door-row { grid-template-columns: 1fr; }
  .door { min-height: 340px; }
}

/* ---------- Home: kept and changed ---------- */

.kept { padding: clamp(80px, 11vw, 140px) 0; border-top: 1px solid var(--ash-15); background: linear-gradient(var(--night), var(--night-deep)); }
.kept-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--ash-20); border-radius: 18px; overflow: hidden; }
.kept-col { padding: clamp(28px, 4vw, 52px); }
.kept-col-changed { border-left: 1px solid var(--ash-20); background: radial-gradient(90% 90% at 100% 0%, rgb(227 154 196 / 0.13), transparent 70%), rgb(37 29 69 / 0.45); }
.kept-head { margin-bottom: 22px; font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--lilac); }
.kept-col-changed .kept-head { color: var(--petal); }
.kept-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.kept-list li { position: relative; padding-left: 30px; font-size: 1.0625rem; line-height: 1.5; color: var(--mist); }
.kept-list li::before { content: ""; position: absolute; left: 2px; top: 0.42em; width: 10px; height: 10px; border: 1px solid var(--lilac); border-radius: 2px; }
.kept-col-changed .kept-list li::before { border: 0; background: var(--petal); rotate: 45deg; box-shadow: 0 0 10px rgb(227 154 196 / 0.6); }
.kept-more { display: flex; flex-wrap: wrap; gap: 14px 32px; margin-top: 30px; }
@media (max-width: 760px) {
  .kept-grid { grid-template-columns: 1fr; }
  .kept-col-changed { border-left: 0; border-top: 1px solid var(--ash-20); }
}

/* ---------- Home: tonight in Vana'diel ---------- */

.tonight { padding: clamp(80px, 11vw, 140px) 0; border-top: 1px solid var(--ash-15); }
.tonight-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tonight-card { display: grid; gap: 12px; align-content: start; padding: 24px 22px; }
.tonight-card.blood-card { margin: 0; }
.tonight-big { display: flex; align-items: center; gap: 10px; font: 600 1.2rem/1.3 var(--font-ui); color: var(--mist); }
.tonight-big.blood-count { font: 500 clamp(1.4rem, 2.2vw, 1.8rem)/1.15 var(--font-mono); color: #ffd2c8; }
@media (max-width: 1100px) { .tonight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tonight-grid { grid-template-columns: 1fr; } }

/* ---------- Our story ---------- */

.principles { padding: clamp(80px, 11vw, 140px) 0; border-top: 1px solid var(--ash-15); }
.principle-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.principle { display: grid; gap: 14px; align-content: start; padding: 28px 26px 30px; border-radius: 16px; border: 1px solid var(--ash-20); background: var(--panel); }
.principle p { color: var(--mist-80); }
.principle-mark { justify-self: start; padding: 6px 11px; border-radius: 999px; border: 1px solid; font: 600 0.66rem/1 var(--font-ui); letter-spacing: 0.22em; text-transform: uppercase; }
.principle.is-kept .principle-mark { color: var(--lilac); border-color: rgb(183 163 240 / 0.45); }
.principle.is-tuned { background: linear-gradient(160deg, rgb(227 154 196 / 0.09), rgb(27 21 51 / 0.78) 50%); }
.principle.is-tuned .principle-mark { color: var(--petal); border-color: rgb(227 154 196 / 0.5); background: rgb(227 154 196 / 0.08); }
@media (max-width: 1000px) { .principle-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .principle-list { grid-template-columns: 1fr; } }

.road-stages-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .road-stages-two { grid-template-columns: 1fr; } }