/*
Theme Name: The Princess Alliance — Gaia
Theme URI: https://the-princess-alliance-gaia-preview.enjoyhobby.chatgpt.site
Author: The Princess Alliance
Description: ธีม WordPress ดาร์กแฟนตาซีสำหรับ The Princess Alliance พร้อมหน้าเนื้อเรื่อง ตัวละคร โลกไกอา รายชื่อตอน แกลเลอรี และหน้าอ่านทดลอง
Version: 1.0.1
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: tpa-gaia
License: GNU General Public License v2 or later
*/

:root { --ink:#05090d; --ink-2:#09121a; --paper:#ddd5c4; --muted:#8f969c; --gold:#c8a45c; --gold-pale:#e3c982; --blue:#4d7fa6; --line:rgba(211,177,103,.22); --serif:Georgia,"Times New Roman",serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }
body { margin:0; background:var(--ink); color:var(--paper); font-family:Tahoma,"Noto Sans Thai",Arial,sans-serif; line-height:1.65; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button { font:inherit; }
::selection { background:var(--gold); color:#081018; }

.section-shell { width:min(1180px, calc(100% - 80px)); margin-inline:auto; }
.eyebrow { margin:0 0 17px; color:var(--gold-pale); font:600 11px/1.2 Arial,sans-serif; letter-spacing:.28em; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:var(--serif); font-weight:400; line-height:1.16; }
h2 { font-size:clamp(36px,5vw,66px); letter-spacing:-.035em; }
h2 em { color:var(--gold-pale); font-weight:400; }
.site-header { position:absolute; z-index:50; top:0; left:0; right:0; height:84px; display:grid; grid-template-columns:260px 1fr 150px; align-items:center; padding:0 40px; border-bottom:1px solid rgba(255,255,255,.12); background:linear-gradient(#05090db8,transparent); }
.wordmark { display:flex; align-items:center; gap:12px; color:#eee6d4; }
.wordmark-gem { width:27px; height:34px; display:block; border:1px solid var(--gold); transform:rotate(45deg) scale(.62); position:relative; flex:0 0 auto; }
.wordmark-gem:after { content:""; position:absolute; inset:6px; border:1px solid var(--gold-pale); background:#244c6d; }
.wordmark b { display:block; font:600 11px/1 Arial,sans-serif; letter-spacing:.16em; }
.wordmark small { display:block; margin-top:5px; color:var(--gold); font:700 8px/1 Arial,sans-serif; letter-spacing:.52em; }
.desktop-nav { justify-self:center; display:flex; align-items:center; gap:clamp(20px,3vw,45px); }
.desktop-nav a { color:#c6c7c6; font-size:13px; transition:.2s; }
.desktop-nav a:hover { color:var(--gold-pale); }
.header-cta { justify-self:end; border-left:1px solid rgba(255,255,255,.18); padding-left:24px; font-size:12px; letter-spacing:.08em; }
.header-cta span { margin-left:8px; color:var(--gold); font:14px var(--serif); }
.menu-button,.mobile-nav { display:none; }

.home-hero { position:relative; min-height:760px; height:100svh; overflow:hidden; display:flex; align-items:center; isolation:isolate; }
.hero-backdrop { position:absolute; inset:0; z-index:-3; background-image:url('assets/images/market-duel.webp'); background-size:cover; background-position:72% 28%; filter:saturate(.68) contrast(1.12); transform:scale(1.04); }
.home-hero:before { content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,#04090ef7 0%,#07101be8 35%,#07101b85 60%,#06101a33 78%),linear-gradient(0deg,#05090d 0%,transparent 35%),radial-gradient(circle at 75% 30%,transparent,#05090d92 75%); }
.home-hero:after { content:""; position:absolute; inset:16px; border:1px solid rgba(211,177,103,.18); pointer-events:none; }
.hero-runes { position:absolute; right:1.6%; top:50%; writing-mode:vertical-rl; transform:translateY(-50%); color:rgba(219,190,124,.26); font:18px var(--serif); letter-spacing:1em; }
.hero-content { width:min(1180px,calc(100% - 80px)); margin:auto; padding-top:80px; }
.hero-logo { width:min(590px,55vw); height:clamp(210px,37vw,400px); object-fit:contain; object-position:left center; margin:-74px 0 -68px -60px; filter:drop-shadow(0 8px 20px #000); }
.hero-copy { max-width:540px; color:#c8c8c4; font-size:clamp(17px,1.5vw,21px); line-height:1.8; text-shadow:0 2px 10px #000; }
.hero-actions { display:flex; gap:16px; margin-top:34px; }
.button-gold,.button-outline,.button-ghost { min-height:50px; display:inline-flex; align-items:center; justify-content:center; gap:20px; padding:0 28px; font-size:13px; letter-spacing:.04em; transition:.25s; }
.button-gold { background:linear-gradient(135deg,#dfc47f,#a77932); color:#071017; box-shadow:0 10px 30px #0008; }
.button-gold:hover { transform:translateY(-2px); filter:brightness(1.1); }
.button-ghost { border:1px solid rgba(255,255,255,.32); background:#09101744; }
.button-ghost:hover,.button-outline:hover { border-color:var(--gold); color:var(--gold-pale); }
.button-outline { border:1px solid var(--line); color:var(--gold-pale); }
.hero-scroll { position:absolute; left:40px; bottom:30px; display:flex; align-items:center; gap:12px; color:#8a9093; font:9px Arial,sans-serif; letter-spacing:.22em; transform:rotate(-90deg); transform-origin:left center; }
.hero-scroll span { width:44px; height:1px; background:var(--gold); }

.intro-section { position:relative; padding:130px 0 115px; }
.section-kicker { position:absolute; left:-40px; top:154px; color:#5b6369; font:10px Arial,sans-serif; letter-spacing:.25em; transform:rotate(-90deg); }
.intro-grid { display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(50px,8vw,130px); align-items:start; }
.intro-grid h2 { margin-bottom:0; }
.intro-copy { border-left:1px solid var(--line); padding:8px 0 0 45px; color:#afb1b0; font-size:15px; }
.intro-copy p { margin-bottom:20px; }
.text-link { display:inline-flex; align-items:center; gap:12px; color:var(--gold-pale); font-size:12px; letter-spacing:.08em; border-bottom:1px solid var(--line); padding-bottom:8px; }
.feature-strip { margin-top:90px; border-block:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr); }
.feature-strip div { display:grid; grid-template-columns:42px auto; grid-template-rows:auto auto; column-gap:14px; padding:30px 8%; border-right:1px solid var(--line); }
.feature-strip div:last-child { border-right:0; }
.feature-strip svg { grid-row:1/3; align-self:center; color:var(--gold); width:24px; }
.feature-strip b { font:33px/1 var(--serif); color:#e6ddcb; }
.feature-strip span { color:#747c82; font-size:11px; }

.characters-section { padding:120px 0; background:linear-gradient(180deg,#08111a,#071017 70%,#05090d); border-block:1px solid #ffffff0a; }
.section-heading { margin-bottom:55px; }
.section-heading h2 { margin:0; }
.row-heading { display:flex; justify-content:space-between; align-items:end; }
.character-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.character-card { height:590px; position:relative; overflow:hidden; background:#101a21; border:1px solid rgba(255,255,255,.08); }
.character-card:nth-child(2) { transform:translateY(35px); }
.character-card img { width:100%; height:100%; object-fit:cover; filter:saturate(.62) brightness(.72); transition:.7s; }
.character-card:hover img { transform:scale(1.035); filter:saturate(.85) brightness(.82); }
.character-card:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,#050a0fe8 0%,transparent 55%); }
.character-overlay { position:absolute; z-index:2; left:30px; right:30px; bottom:30px; }
.character-overlay small { color:var(--gold); font:10px Arial,sans-serif; letter-spacing:.28em; }
.character-overlay h3 { font-size:39px; margin:5px 0; }
.character-overlay p { color:#9da3a7; font-size:12px; margin:0; }
.card-number { position:absolute; z-index:3; top:18px; right:20px; color:#fff9; font:15px var(--serif); }

.world-section { padding:140px 0; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(50px,8vw,105px); align-items:center; }
.map-frame { position:relative; height:690px; border:1px solid var(--line); overflow:hidden; background:#17130d; }
.map-frame img { width:100%; height:100%; object-fit:cover; object-position:center 14%; filter:sepia(.18) saturate(.65) brightness(.6); transform:scale(1.13); }
.map-vignette { position:absolute; inset:0; box-shadow:inset 0 0 90px 32px #05090d; background:radial-gradient(circle,transparent 40%,#05090d8f 100%); }
.map-label { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-shadow:0 3px 20px #000; }
.map-label svg { color:var(--gold); margin-bottom:15px; }
.map-label span { font:9px Arial,sans-serif; letter-spacing:.35em; }
.map-label b { font:55px/1.1 var(--serif); letter-spacing:.18em; margin-left:.18em; }
.world-copy > p:not(.eyebrow) { color:#929a9e; max-width:470px; }
.city-mini-list { margin:35px 0; border-top:1px solid var(--line); }
.city-mini-list div { display:grid; grid-template-columns:35px 1fr auto; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); }
.city-mini-list span { color:#5f686f; font:11px var(--serif); }
.city-mini-list b { font-size:14px; font-weight:400; }
.city-mini-list small { color:#686f74; font:9px Arial,sans-serif; letter-spacing:.14em; }

.latest-section { padding:40px 0 135px; }
.chapter-list { border-top:1px solid var(--line); }
.chapter-list a { display:grid; grid-template-columns:80px 1fr 150px 28px; align-items:center; padding:22px 18px; border-bottom:1px solid var(--line); transition:.25s; }
.chapter-list a:hover { background:#101820; padding-left:26px; }
.chapter-no { color:var(--gold); font:30px var(--serif); }
.chapter-list small,.archive-row small { color:#737c82; font:9px Arial,sans-serif; letter-spacing:.2em; }
.chapter-list h3 { font-size:22px; margin:4px 0 0; }
.chapter-status { color:#898f92; font-size:11px; }
.chapter-list svg { color:var(--gold); width:17px; }

.final-cta { min-height:610px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; text-align:center; background:radial-gradient(circle at 50% 80%,#183044,#071018 62%); border-top:1px solid var(--line); }
.final-cta:after { content:""; position:absolute; inset:20px; border:1px solid var(--line); }
.final-cta img { position:absolute; width:min(720px,70vw); height:100%; object-fit:cover; object-position:center 27%; opacity:.3; filter:saturate(.5); -webkit-mask-image:linear-gradient(0deg,transparent 0%,#000 30%,#000 75%,transparent); mask-image:linear-gradient(0deg,transparent 0%,#000 30%,#000 75%,transparent); }
.final-cta div { position:relative; z-index:2; }
.final-cta h2 { margin-bottom:35px; text-shadow:0 3px 18px #000; }

.site-footer { text-align:center; padding:65px 30px 40px; background:#030608; border-top:1px solid #ffffff0c; color:#70777b; }
.footer-emblem { display:flex; justify-content:center; align-items:center; gap:12px; color:#bfb8aa; font:10px Arial,sans-serif; letter-spacing:.22em; }
.footer-emblem .wordmark-gem { width:20px; height:26px; }
.site-footer p { font-size:11px; margin:22px 0; }
.footer-links { display:flex; justify-content:center; gap:30px; margin-bottom:32px; font-size:11px; color:#9b9e9f; }
.site-footer > small { font:8px Arial,sans-serif; letter-spacing:.16em; }

.page-hero { min-height:430px; padding:160px 30px 80px; text-align:center; position:relative; background:radial-gradient(circle at 50% 80%,#142b3b,#071019 50%,#05090d 76%); border-bottom:1px solid var(--line); }
.page-hero:after { content:""; position:absolute; inset:85px 18px 18px; border:1px solid rgba(211,177,103,.1); pointer-events:none; }
.page-hero h1 { font-size:clamp(55px,8vw,102px); margin:0 0 16px; letter-spacing:-.04em; }
.page-lead { color:#949b9f; font-size:15px; }
.ornament { display:flex; justify-content:center; align-items:center; gap:12px; color:var(--gold); margin-top:28px; }
.ornament span { height:1px; width:70px; background:linear-gradient(90deg,transparent,var(--gold)); }
.ornament span:last-child { transform:scaleX(-1); }
.ornament i { font-size:9px; font-style:normal; }

.story-feature { padding:120px 0; display:grid; grid-template-columns:.8fr 1.2fr; gap:9vw; align-items:center; }
.story-image { height:690px; position:relative; overflow:hidden; border:1px solid var(--line); }
.story-image:after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 65px #05090d; }
.story-image img { width:100%; height:100%; object-fit:cover; filter:saturate(.6) brightness(.75); }
.story-feature > div:last-child > p:not(.eyebrow) { color:#9ba1a4; max-width:580px; }
.story-feature .button-gold { margin-top:20px; }
.timeline-section { padding-bottom:140px; }
.timeline { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }
.timeline article { position:relative; padding:55px 28px 25px 0; border-right:1px solid var(--line); min-height:285px; }
.timeline article:not(:first-child) { padding-left:28px; }
.timeline article:last-child { border:0; }
.timeline article > span { position:absolute; top:-14px; left:0; background:var(--ink); padding-right:12px; color:var(--gold); font:22px var(--serif); }
.timeline article:not(:first-child) > span { left:28px; }
.timeline small { color:#687078; font:9px Arial; letter-spacing:.2em; }
.timeline h3 { font-size:25px; margin:15px 0; }
.timeline p { color:#8e9599; font-size:13px; }

.roster { padding:100px 0 135px; display:grid; gap:45px; }
.roster-card { min-height:520px; display:grid; grid-template-columns:1fr 1fr; background:linear-gradient(115deg,#0b151e,#070d12); border:1px solid color-mix(in srgb,var(--accent),transparent 65%); overflow:hidden; }
.roster-card:nth-child(even) .roster-image { order:2; }
.roster-image { height:520px; overflow:hidden; }
.roster-image img { width:100%; height:100%; object-fit:cover; filter:saturate(.6) brightness(.72); }
.roster-info { position:relative; padding:75px 65px; align-self:center; }
.roster-info:before { content:""; position:absolute; top:0; left:65px; height:3px; width:90px; background:var(--accent); }
.roster-no { position:absolute; right:40px; top:25px; color:#ffffff10; font:90px var(--serif); }
.roster-info > small { color:var(--accent); font:10px Arial; letter-spacing:.35em; }
.roster-info h2 { font-size:65px; margin:8px 0; }
.roster-info .role { color:#8e989e; font-size:12px; }
.roster-info blockquote { margin:55px 0 0; padding-left:25px; border-left:1px solid var(--accent); color:#bdb8ad; font:italic 18px/1.8 var(--serif); }
.supporting-cast { padding-bottom:140px; }
.supporting-cast h2 { margin-bottom:45px; }
.supporting-cast > div { display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid var(--line); }
.supporting-cast article { padding:35px; border-right:1px solid var(--line); }
.supporting-cast article:last-child { border:0; }
.supporting-cast b { display:block; font:25px var(--serif); }
.supporting-cast span { color:var(--gold); font:9px Arial; letter-spacing:.25em; }
.supporting-cast p { color:#828b90; font-size:12px; margin:17px 0 0; }

.world-map-wide { padding:90px 0 50px; text-align:center; }
.map-crop { height:min(72vw,760px); position:relative; overflow:hidden; border:1px solid var(--line); }
.map-crop img { width:100%; height:100%; object-fit:cover; object-position:center 8%; filter:sepia(.2) saturate(.7) brightness(.75); transform:scale(1.06); }
.world-map-wide > p { color:#6f787d; margin-top:13px; font-size:10px; letter-spacing:.08em; }
.city-grid { padding:65px 0 140px; display:grid; grid-template-columns:repeat(3,1fr); }
.city-grid article { min-height:270px; position:relative; padding:38px; border:1px solid var(--line); margin:-1px 0 0 -1px; }
.city-grid article:last-child { grid-column:2; }
.city-grid svg { color:var(--gold); width:18px; margin-bottom:14px; }
.city-grid small { display:block; color:#626d73; font:9px Arial; letter-spacing:.22em; }
.city-grid h2 { font-size:32px; margin:7px 0 15px; }
.city-grid p { color:#879095; font-size:12px; }
.city-index { position:absolute; top:25px; right:28px; color:#ffffff12; font:55px var(--serif); }
.world-banner { min-height:600px; display:grid; grid-template-columns:1fr 1fr; align-items:center; background:linear-gradient(90deg,#0a1924,#071018); overflow:hidden; }
.world-banner img { height:600px; width:100%; object-fit:cover; object-position:center 25%; filter:saturate(.55) brightness(.7); }
.world-banner > div { padding:70px 10vw 70px 7vw; }
.world-banner p:not(.eyebrow) { color:#91999e; }

.archive { padding:100px 0 140px; display:grid; grid-template-columns:330px 1fr; gap:7vw; align-items:start; }
.archive-cover { height:510px; overflow:hidden; border:1px solid var(--line); position:sticky; top:35px; }
.archive-cover img { width:100%; height:100%; object-fit:cover; object-position:center 12%; filter:saturate(.6) brightness(.75); }
.archive-list > .eyebrow { margin-bottom:25px; }
.archive-row { display:grid; grid-template-columns:70px 1fr 120px 24px; gap:20px; align-items:center; min-height:105px; border-block:1px solid var(--line); margin-top:-1px; padding:15px 10px; color:#777f84; }
.archive-row > span { font:30px var(--serif); color:#646e74; }
.archive-row h2 { font-size:24px; margin:4px 0 0; color:#a6a8a5; }
.archive-row em { font-size:10px; font-style:normal; }
.archive-row svg { width:16px; }
.archive-row.active { color:var(--gold); background:#0c151c; }
.archive-row.active h2 { color:#e3ddce; }

.gallery-grid { padding:100px 0 140px; display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:180px; gap:18px; }
.gallery-item { margin:0; position:relative; overflow:hidden; border:1px solid var(--line); }
.gallery-item img { width:100%; height:100%; object-fit:cover; filter:saturate(.65) brightness(.78); transition:.6s; }
.gallery-item:hover img { transform:scale(1.025); filter:saturate(.85) brightness(.88); }
.gallery-item:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,#030608d9,transparent 55%); }
.gallery-item figcaption { position:absolute; z-index:2; left:25px; bottom:22px; }
.gallery-item small { color:var(--gold); font:8px Arial; letter-spacing:.22em; }
.gallery-item h2 { font-size:24px; margin:4px 0 0; }
.gallery-1 { grid-column:span 7; grid-row:span 3; }.gallery-2 { grid-column:span 5; grid-row:span 2; }.gallery-3 { grid-column:span 5; grid-row:span 3; }.gallery-4 { grid-column:span 7; grid-row:span 2; }.gallery-5 { grid-column:span 7; grid-row:span 3; }.gallery-6 { grid-column:span 5; grid-row:span 2; }

.reader { min-height:100vh; background:#090d11; color:#dedbd2; transition:.25s; }
.reader-light { background:#d9d4c9; color:#17191a; }
.reader-header { height:72px; position:sticky; top:0; z-index:30; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 28px; background:#05080bed; border-bottom:1px solid #ffffff18; backdrop-filter:blur(10px); color:#d8d7d1; }
.reader-header > a { display:flex; align-items:center; gap:10px; font-size:11px; }
.reader-header > a svg { width:16px; }
.reader-header > div { text-align:center; }
.reader-header small { display:block; color:var(--gold); font-size:8px; letter-spacing:.2em; }
.reader-header b { display:block; font:16px var(--serif); }
.reader-header nav { justify-self:end; display:flex; gap:8px; }
.reader-header button { width:36px; height:36px; border:1px solid #ffffff20; background:transparent; color:#b5b7b6; display:grid; place-items:center; cursor:pointer; }
.reader-header button svg { width:16px; }
.reader-intro { min-height:500px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:60px 25px; }
.reader-intro > p:first-child { color:var(--gold); font:9px Arial; letter-spacing:.3em; }
.reader-intro > span { color:#6f777d; font-size:10px; letter-spacing:.16em; }
.reader-intro h1 { font-size:clamp(50px,8vw,85px); margin:20px 0 0; }
.reader-intro > p:last-child { color:#747c80; font-size:11px; }
.reader-pages { width:min(780px,100%); margin:auto; transition:.3s; box-shadow:0 15px 60px #0008; }
.reader-pages-wide { width:min(1024px,100%); }
.reader-pages img { width:100%; }
.reader-end { text-align:center; padding:120px 25px; }
.reader-end > span { color:var(--gold); font:9px Arial; letter-spacing:.28em; }
.reader-end h2 { font-size:42px; margin:24px 0 10px; }
.reader-end p { color:#747c80; font-size:12px; }
.reader-end a { display:inline-block; margin-top:25px; border-bottom:1px solid var(--gold); color:var(--gold); font-size:11px; padding-bottom:7px; }

@media (max-width:900px) {
  .section-shell { width:min(100% - 40px,680px); }
  .site-header { grid-template-columns:1fr auto; height:72px; padding:0 20px; }
  .desktop-nav,.header-cta { display:none; }
  .menu-button { display:grid; place-items:center; justify-self:end; width:40px; height:40px; border:0; background:transparent; color:#e0d9ca; }
  .mobile-nav { display:flex; position:absolute; top:72px; left:0; right:0; flex-direction:column; padding:25px 20px; background:#060b0ff8; border-bottom:1px solid var(--line); }
  .mobile-nav a { padding:13px 6px; border-bottom:1px solid #ffffff0d; font-size:13px; }
  .hero-content { width:calc(100% - 40px); }
  .hero-logo { width:min(630px,88vw); height:300px; margin:-60px 0 -55px -45px; }
  .home-hero:before { background:linear-gradient(90deg,#04090ef2,#07101bb8),linear-gradient(0deg,#05090d,transparent 40%); }
  .intro-grid,.world-section,.story-feature,.world-banner,.roster-card,.archive { grid-template-columns:1fr; }
  .intro-copy { padding-left:25px; }
  .character-grid { grid-template-columns:1fr; }
  .character-card { height:560px; }
  .character-card:nth-child(2) { transform:none; }
  .map-frame { height:570px; }
  .timeline { grid-template-columns:1fr 1fr; }
  .timeline article:nth-child(2) { border-right:0; }
  .city-grid { grid-template-columns:1fr 1fr; }
  .city-grid article:last-child { grid-column:auto; }
  .roster-card:nth-child(even) .roster-image { order:0; }
  .world-banner > div { padding:65px 35px; }
  .archive-cover { position:relative; top:0; height:440px; }
  .gallery-grid { grid-auto-rows:150px; }.gallery-1,.gallery-2,.gallery-3,.gallery-4,.gallery-5,.gallery-6 { grid-column:span 6; grid-row:span 3; }
}

@media (max-width:600px) {
  .section-shell { width:calc(100% - 32px); }
  .home-hero { min-height:690px; }
  .hero-content { width:calc(100% - 34px); padding-top:40px; }
  .hero-logo { width:105%; max-width:none; height:265px; margin:-48px 0 -50px -38px; }
  .hero-copy { font-size:15px; }
  .hero-copy br { display:none; }
  .hero-actions { flex-direction:column; width:100%; max-width:330px; }
  .hero-scroll { display:none; }
  .intro-section,.characters-section { padding-block:85px; }
  .intro-grid { gap:40px; }
  .section-kicker { display:none; }
  .feature-strip { grid-template-columns:1fr; margin-top:60px; }
  .feature-strip div { border-right:0; border-bottom:1px solid var(--line); }
  .feature-strip div:last-child { border:0; }
  .row-heading { align-items:start; gap:20px; }
  .row-heading .text-link { display:none; }
  .character-card { height:520px; }
  .world-section { padding-block:85px; }
  .map-frame { height:450px; }
  .latest-section { padding-bottom:90px; }
  .chapter-list a { grid-template-columns:54px 1fr 22px; padding:18px 4px; }
  .chapter-status { display:none; }
  .chapter-no { font-size:24px; }
  .chapter-list h3 { font-size:18px; }
  .final-cta { min-height:520px; padding:30px; }
  .page-hero { min-height:390px; padding-top:140px; }
  .story-feature { padding-block:80px; }
  .story-image { height:520px; }
  .timeline { grid-template-columns:1fr; }
  .timeline article { border-right:0; border-bottom:1px solid var(--line); padding:55px 0 25px !important; }
  .timeline article > span { left:0 !important; }
  .roster { padding-block:70px 90px; }
  .roster-image { height:470px; }
  .roster-info { padding:55px 28px; }
  .roster-info:before { left:28px; }
  .roster-info h2 { font-size:50px; }
  .roster-info blockquote { margin-top:35px; }
  .supporting-cast > div { grid-template-columns:1fr; }
  .supporting-cast article { border-right:0; border-bottom:1px solid var(--line); }
  .city-grid { grid-template-columns:1fr; padding-bottom:90px; }
  .city-grid article { min-height:230px; }
  .world-banner img { height:450px; }
  .archive { padding-block:70px 90px; gap:50px; }
  .archive-row { grid-template-columns:48px 1fr 18px; gap:10px; }
  .archive-row em { display:none; }
  .archive-row h2 { font-size:19px; }
  .gallery-grid { padding-block:70px 90px; display:block; }
  .gallery-item { height:480px; margin-bottom:16px; }
  .reader-header { grid-template-columns:40px 1fr 80px; padding:0 10px; }
  .reader-header > a { font-size:0; }
  .reader-header > div { overflow:hidden; white-space:nowrap; }
  .reader-intro { min-height:430px; }
}

@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; transition:none !important; } }

/* WordPress integration */
.desktop-nav ul,.mobile-nav ul { list-style:none; margin:0; padding:0; }
.desktop-nav ul { display:flex; align-items:center; gap:clamp(20px,3vw,45px); }
.desktop-nav li { margin:0; }
.mobile-nav[hidden] { display:none !important; }
.mobile-nav ul { width:100%; }
.mobile-reader { color:var(--gold-pale); }
.menu-button span { display:block; width:21px; height:1px; margin:4px auto; background:currentColor; transition:.2s; }
.menu-button.is-open span:nth-child(1) { transform:translateY(5px) rotate(45deg); }
.menu-button.is-open span:nth-child(2) { opacity:0; }
.menu-button.is-open span:nth-child(3) { transform:translateY(-5px) rotate(-45deg); }
.feature-strip i { grid-row:1/3; align-self:center; color:var(--gold); font:23px/1 var(--serif); font-style:normal; }
.map-label i { color:var(--gold); margin-bottom:15px; font:28px/1 var(--serif); font-style:normal; }
.city-grid article > i { display:block; color:var(--gold); margin-bottom:14px; font-style:normal; }
.chapter-list > a > i,.archive-row > i { color:var(--gold); font-style:normal; }
.admin-bar .site-header { top:32px; }
.wp-content,.post-index { min-height:50vh; padding-block:90px 130px; }
.wp-content { color:#aeb2b2; max-width:850px; }
.wp-content h2,.wp-content h3 { color:var(--paper); margin-top:1.6em; }
.wp-content a { color:var(--gold-pale); text-decoration:underline; }
.post-card { padding:35px 0; border-bottom:1px solid var(--line); }
.post-card small { color:var(--gold); font:9px Arial,sans-serif; letter-spacing:.18em; }
.post-card h2 { font-size:34px; margin:8px 0; }
.post-card div { color:#8f969c; }
.nav-links { display:flex; gap:14px; padding-top:35px; }
.nav-links a,.nav-links span { border:1px solid var(--line); padding:8px 13px; }
.error-page .button-gold { margin-top:30px; }
.screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (max-width:782px) { .admin-bar .site-header { top:46px; } }