.subpage-body {
  --accent: #b29a72;
  --accent-soft: rgba(178,154,114,.18);
  background:
    radial-gradient(circle at 50% 8%, rgba(40,55,78,.23), transparent 28rem),
    linear-gradient(rgba(4,9,19,.96), rgba(4,9,19,.98)),
    url("assets/images/hero-library.jpg") center / cover fixed;
}
.subpage-body.theme-manga { --accent: #b89b62; --accent-soft: rgba(184,155,98,.16); background-color: #070805; }
.subpage-body.theme-novel { --accent: #a88791; --accent-soft: rgba(116,56,78,.2); }
.subpage-body.theme-archive { --accent: #9aa9b3; --accent-soft: rgba(88,122,147,.18); }
.subpage-body.theme-store { --accent: #a89b86; --accent-soft: rgba(130,154,188,.14); }

.subpage-body .shared-header { position: absolute; border-bottom: 1px solid rgba(169,138,80,.3); background: linear-gradient(#050a15e8, #050a1590); }
.subpage-main { min-height: 70vh; }
.desktop-comp-hero { position: relative; padding-top: 76px; overflow: hidden; border-bottom: 1px solid var(--border); background: var(--ink-deep); }
.desktop-comp-hero > img { width: 100%; min-height: 250px; object-fit: cover; }
.desktop-comp-hero .accessible-title { position: absolute; width: 1px; height: 1px; clip: rect(0,0,0,0); overflow: hidden; }
.mobile-hero { display: none; }

.sub-shell { width: min(1120px, calc(100% - 48px)); margin: auto; }
.sub-section { padding: 62px 0; }
.sub-section + .sub-section { border-top: 1px solid rgba(169,138,80,.22); }
.sub-heading { margin: 0 0 28px; text-align: center; color: var(--accent); font: 500 clamp(30px,4vw,45px)/1.1 var(--serif-en); letter-spacing: .09em; }
.sub-heading span { font-family: var(--serif-jp); font-size: .68em; }
.sub-heading::after { content: "◇ ───────── ◇"; display: block; margin-top: 12px; color: var(--gold-dim); font-size: 12px; letter-spacing: .25em; }
.sub-lead { max-width: 720px; margin: -10px auto 30px; text-align: center; color: var(--muted); font-size: 13px; }
.panel { position: relative; border: 1px solid var(--border); background: rgba(8,16,31,.9); box-shadow: inset 0 0 0 4px rgba(169,138,80,.035), 0 16px 45px rgba(0,0,0,.23); }
.panel::before, .panel::after { position: absolute; z-index: 2; color: var(--accent); font-size: 18px; line-height: 1; pointer-events: none; }
.panel::before { content: "⌜"; left: 5px; top: 5px; }.panel::after { content: "⌟"; right: 5px; bottom: 5px; }
.sub-button { display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 42px; padding: 8px 28px; border: 1px solid var(--border); background: rgba(5,11,24,.86); color: var(--accent); transition: .2s; }
.sub-button:hover, .sub-button:focus-visible { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); }
.sub-button::after { content: "→"; }
.center-link { display: flex; width: fit-content; min-width: 260px; margin: 24px auto 0; }
.eyebrow-sub { margin: 0 0 5px; color: var(--accent); font: 500 12px/1 var(--serif-en); letter-spacing: .16em; text-transform: uppercase; }

/* ABOUT */
.about-intro-panel { display: grid; grid-template-columns: 1.05fr .95fr; overflow: hidden; }
.about-intro-panel img, .about-concept-panel img { width: 100%; height: 100%; object-fit: cover; }
.about-intro-copy { padding: clamp(28px,5vw,62px); align-self: center; }
.about-intro-copy h2, .concept-copy h2, .recorder-copy h2 { margin: 0 0 10px; color: var(--accent); font-weight: 500; letter-spacing: .12em; }
.about-intro-copy h2 span, .recorder-copy h2 span { display: block; margin-top: 6px; font: 500 11px/1 var(--serif-en); letter-spacing: .18em; }
.about-intro-copy p, .concept-copy p, .recorder-copy p { color: #c0bbc0; font-size: 13px; }
.about-concept-panel { display: grid; grid-template-columns: 1fr 1.05fr; margin-top: 28px; overflow: hidden; }
.concept-copy { padding: 38px 48px; }
.concept-copy .large-copy { color: var(--accent); font-size: clamp(24px,3vw,36px); line-height: 1.6; letter-spacing: .16em; }
.recorder-panel { display: grid; grid-template-columns: 190px 1fr .85fr; gap: 34px; align-items: center; margin-top: 28px; padding: 28px 38px; }
.recorder-panel img { width: 190px; border: 1px solid var(--gold-dim); }
.origin-box { padding: 24px; border: 1px solid rgba(169,138,80,.35); background: linear-gradient(135deg, transparent, var(--accent-soft)); }
.origin-box h3 { margin: 0 0 10px; color: var(--accent); font-weight: 500; }
.origin-box p { margin: 0; font-size: 11px; }
.mission-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; }
.mission-card { min-height: 190px; padding: 25px 17px; text-align: center; }
.mission-card i { display: block; color: var(--accent); font-style: normal; font-size: 35px; }
.mission-card h3 { color: var(--accent); font-size: 15px; font-weight: 500; }
.mission-card p { margin: 0; color: var(--muted); font-size: 10px; }
.experience-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; padding: 28px; }
.experience-item { text-align: center; }
.experience-item i { display: block; margin-bottom: 8px; color: var(--accent); font-style: normal; font-size: 42px; }
.experience-item h3 { margin: 0; color: var(--accent); }
.experience-item p { margin: 4px 0 0; font-size: 10px; color: var(--muted); }
.about-cta { padding: 48px 20px; text-align: center; background: linear-gradient(90deg, rgba(3,8,17,.9), rgba(3,8,17,.25), rgba(3,8,17,.9)), url("assets/images/subpages/about-concept.png") center / cover; }
.about-cta h2 { margin: 0 0 8px; color: var(--accent); font-weight: 500; letter-spacing: .14em; }

/* WORKS */
.filter-row { display: grid; grid-template-columns: repeat(6,1fr); gap: 8px; margin: 0 0 28px; }
.filter-row button { min-height: 54px; border: 1px solid var(--border); background: rgba(8,16,31,.86); color: var(--accent); cursor: pointer; }
.filter-row button.is-active { border-color: #d0c3aa; box-shadow: 0 0 14px rgba(182,205,228,.18), inset 0 0 10px rgba(182,205,228,.08); }
.featured-work { display: grid; grid-template-columns: 34% 1fr; overflow: hidden; }
.featured-work img { width: 100%; height: 100%; object-fit: cover; }
.featured-copy { padding: clamp(30px,5vw,62px); display: grid; grid-template-columns: 1fr 180px; gap: 28px; align-items: center; }
.featured-copy h2 { margin: 0; color: var(--grey); font: 500 clamp(45px,7vw,76px)/.9 var(--serif-en); }
.featured-copy h2 span { display: block; margin-top: 12px; font: 500 17px/1 var(--serif-jp); }
.featured-copy p { font-size: 12px; }
.featured-actions { display: grid; gap: 14px; }
.works-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-top: 24px; }
.work-library-card { padding: 12px 12px 18px; text-align: center; overflow: hidden; }
.work-library-card img { width: 100%; aspect-ratio: 1.2; object-fit: cover; border: 1px solid var(--gold-dim); }
.work-library-card h3 { margin: 10px 0 0; color: var(--grey); font: 500 24px/1.1 var(--serif-en); }
.work-library-card h3 span { display: block; margin-top: 5px; font: 500 12px/1.3 var(--serif-jp); }
.work-library-card p { min-height: 48px; margin: 9px 3px; color: var(--muted); font-size: 10px; }
.dual-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.dual-actions a { min-height: 34px; padding: 6px; border: 1px solid var(--border); color: var(--accent); font-size: 10px; }
.release-archive { display: grid; grid-template-columns: 1.4fr repeat(6,.55fr) .8fr; align-items: center; margin-top: 28px; padding: 18px 24px; text-align: center; }
.release-archive h2 { margin: 0; color: var(--accent); font: 500 24px/1 var(--serif-en); }
.release-archive div { border-left: 1px solid rgba(169,138,80,.3); }
.release-archive strong { display: block; font: 500 20px/1 var(--serif-en); }.release-archive small { color: var(--muted); }
.reading-order { margin-top: 28px; padding: 28px; }
.reading-order h2 { margin: 0 0 20px; text-align: center; color: var(--accent); font-weight: 500; }
.order-row { display: grid; grid-template-columns: repeat(6,1fr); gap: 18px; }
.order-item { position: relative; text-align: center; }
.order-item:not(:last-child)::after { content: "›"; position: absolute; right: -13px; top: 35%; color: var(--accent); font-size: 30px; }
.order-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--border); }
.order-item span { font-size: 11px; }

/* MANGA */
.manga-library-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; }
.manga-volume { padding: 10px 10px 16px; text-align: center; }
.manga-volume img { width: 100%; aspect-ratio: .96; object-fit: cover; border: 1px solid var(--gold-dim); }
.manga-volume h3 { min-height: 54px; margin: 10px 0 0; color: #d2c0a3; font-size: 17px; font-weight: 500; line-height: 1.55; }
.manga-volume p { margin: 3px 0; color: var(--muted); font-size: 9px; }
.chapter-strip { margin-top: 28px; padding: 18px 24px; display: flex; align-items: center; gap: 16px; overflow: hidden; }
.chapter-strip h3 { flex: 0 0 145px; margin: 0; color: var(--accent); }
.chapter-thumbs { display: grid; grid-template-columns: repeat(6,1fr); gap: 6px; flex: 1; }
.chapter-thumbs img { width: 100%; aspect-ratio: 1.5; object-fit: cover; filter: grayscale(.7); }
.manga-feature { position: relative; min-height: 260px; margin-top: 28px; overflow: hidden; background: url("assets/images/subpages/manga-feature.png") center / cover; }
.manga-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 35%, rgba(5,7,8,.92)); }
.manga-feature-copy { position: relative; z-index: 2; width: 46%; margin-left: auto; padding: 55px 50px; }
.manga-feature-copy h2 { margin: 0 0 10px; color: #eadbc1; font-size: 28px; }
.category-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 18px; }
.category-row a { min-height: 78px; padding: 20px; text-align: center; border: 1px solid var(--border); background: var(--accent-soft); color: var(--accent); }
.song-manga-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; }
.song-manga-grid .manga-volume img { aspect-ratio: 1.35; }
.crosslink-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.crosslink { min-height: 160px; padding: 32px; background: linear-gradient(90deg, rgba(5,10,20,.96), rgba(5,10,20,.35)), url("assets/images/subpages/novel-story.png") center / cover; }
.crosslink:nth-child(2) { background-image: linear-gradient(90deg, rgba(5,10,20,.96), rgba(5,10,20,.35)), url("assets/images/subpages/archive-map.png"); }
.crosslink h2 { color: var(--accent); }

/* NOVEL */
.novel-tabs { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.novel-tabs a { padding: 18px; text-align: center; border: 1px solid var(--border); background: rgba(13,23,39,.92); color: var(--accent); }
.novel-tabs a:first-child { background: rgba(157,137,141,.6); color: #f0e6df; }
.novel-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 15px; margin-top: 18px; }
.novel-card { padding: 16px; text-align: center; }
.novel-card img { width: 100%; aspect-ratio: .88; object-fit: cover; }
.novel-card h3 { margin: 14px 0 0; color: var(--accent); font-size: 17px; }
.novel-card p { min-height: 58px; color: var(--muted); font-size: 10px; }
.novel-card strong { display: block; margin: 10px 0; color: #d8c7b8; font-weight: 500; }
.paper-excerpt { position: relative; margin-top: 28px; padding: 58px 15% 48px; color: #332a25; background: #c7b9a4; box-shadow: inset 0 0 50px rgba(67,43,28,.35); }
.paper-excerpt::before { content: "試し読み / EXCERPT"; position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 9px 35px; background: #172238; color: #c7b9a4; }
.paper-excerpt p { font-size: 14px; line-height: 2.4; }
.paper-excerpt .sub-button { color: #332a25; border-color: #66574b; background: transparent; }
.novel-story { display: grid; grid-template-columns: 1fr 1.1fr; margin-top: 28px; overflow: hidden; }
.novel-story-copy { padding: 45px; }.novel-story-copy h2 { color: var(--accent); font-weight: 500; }
.novel-story img { width: 100%; height: 100%; object-fit: cover; }
.product-formats { display: grid; grid-template-columns: repeat(3,1fr) .85fr; margin-top: 28px; }
.format-card { padding: 28px; border-right: 1px solid rgba(169,138,80,.3); }
.format-card h3 { color: var(--accent); }.format-card strong { color: #d7c4b5; font-size: 20px; }
.booth-card { display: grid; place-items: center; text-align: center; background: rgba(75,31,55,.32); }
.booth-card strong { font: 500 40px/1 var(--serif-en); color: var(--accent); }

/* ARCHIVE */
.character-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; }
.character-card { padding: 10px 10px 15px; text-align: center; }
.character-card img { width: 100%; aspect-ratio: 1.03; object-fit: cover; }
.character-card h3 { margin: 12px 0 3px; color: #c6c9ca; font-size: 15px; }
.character-card p { min-height: 65px; margin: 8px 4px; color: var(--muted); font-size: 9px; }
.tags { display: flex; justify-content: center; gap: 4px; }.tags span { padding: 2px 6px; border: 1px solid rgba(169,138,80,.35); font-size: 8px; }
.archive-dashboard { display: grid; grid-template-columns: 1.2fr .75fr .65fr; gap: 12px; }
.dashboard-card { padding: 24px; }.dashboard-card h2 { margin: 0 0 18px; text-align: center; color: var(--accent); font-weight: 500; }
.world-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.world-preview img { width: 100%; height: 150px; object-fit: cover; }
.world-preview p, .timeline-list, .glossary-list { color: var(--muted); font-size: 10px; }
.keyword-cloud { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }.keyword-cloud span { padding: 8px 4px; text-align: center; border: 1px solid rgba(169,138,80,.25); font-size: 9px; }
.glossary-card { grid-row: span 2; }.glossary-list { columns: 1; list-style: none; padding: 0; }.glossary-list li { display: flex; justify-content: space-between; border-bottom: 1px dotted rgba(169,138,80,.24); }
.relationship { min-height: 330px; background: radial-gradient(circle at center, rgba(78,102,122,.2), transparent 65%); }
.relationship-map { display: grid; grid-template-columns: repeat(3,80px); justify-content: center; gap: 22px 55px; }
.relation-person { text-align: center; }.relation-person img { width: 76px; height: 76px; object-fit: cover; border-radius: 50%; border: 1px solid var(--accent); }.relation-person span { font-size: 9px; }
.timeline-list { list-style: none; padding: 0; }.timeline-list li { position: relative; padding: 0 0 20px 20px; border-left: 1px solid var(--accent); }.timeline-list li::before { content: "◆"; position: absolute; left: -6px; top: -1px; color: var(--accent); }
.locations { grid-column: span 2; }.location-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 9px; }.location { text-align: center; }.location img { width: 100%; aspect-ratio: 1.25; object-fit: cover; }.location span { font-size: 9px; }
.symbols { grid-row: span 1; }.symbol-item { display: grid; grid-template-columns: 50px 1fr; gap: 12px; align-items: center; margin: 12px 0; }.symbol-item i { color: var(--accent); font-style: normal; font-size: 34px; }.symbol-item p { margin: 0; color: var(--muted); font-size: 9px; }

/* STORE */
.store-product-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.shop-card { padding: 12px 12px 17px; }
.shop-card img { width: 100%; aspect-ratio: 1.33; object-fit: cover; }
.shop-card h3 { min-height: 48px; margin: 12px 0 0; color: #d0c8bd; font-size: 14px; }
.shop-card strong { color: #d8c8b4; font-size: 18px; font-weight: 500; }
.shop-card button { float: right; width: 36px; height: 36px; border: 1px solid var(--border); background: transparent; color: var(--accent); cursor: pointer; }
.store-note { padding: 35px; display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.purchase-benefits { display: grid; grid-template-columns: 1fr repeat(4,.75fr); gap: 12px; margin-top: 24px; padding: 24px; }
.purchase-benefits h2 { color: var(--accent); font-weight: 500; }.benefit { text-align: center; }.benefit i { display: block; color: var(--accent); font-style: normal; font-size: 28px; }.benefit span { font-size: 9px; }
.join-card-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.join-card { padding: 12px 12px 18px; text-align: center; }.join-card img { width: 100%; aspect-ratio: 1.25; object-fit: cover; }.join-card h3 { color: var(--accent); }.join-card p { min-height: 55px; color: var(--muted); font-size: 10px; }
.resident-perks { display: grid; grid-template-columns: repeat(5,1fr); gap: 15px; margin-top: 28px; text-align: center; }.resident-perks i { display: block; color: var(--accent); font-style: normal; font-size: 38px; }.resident-perks span { font-size: 10px; }
.store-ending { min-height: 250px; display: flex; align-items: center; justify-content: flex-end; padding: 40px 8%; background: linear-gradient(90deg, transparent, rgba(4,9,18,.88) 60%), url("assets/images/subpages/store-ending.png") center / cover; }
.store-ending blockquote { width: min(470px,55%); margin: 0; color: #d4c7b8; font-size: 18px; line-height: 2.2; }

@media (max-width: 1023px) {
  .sub-shell { width: calc(100% - 36px); }
  .mission-grid { grid-template-columns: repeat(3,1fr); }
  .works-grid, .novel-grid, .store-product-grid { grid-template-columns: repeat(2,1fr); }
  .manga-library-grid, .song-manga-grid, .character-grid { grid-template-columns: repeat(3,1fr); }
  .archive-dashboard { grid-template-columns: 1fr 1fr; }
  .glossary-card { grid-row: auto; }.locations { grid-column: span 2; }
  .product-formats { grid-template-columns: repeat(2,1fr); }
  .release-archive { grid-template-columns: repeat(4,1fr); gap: 12px; }
  .release-archive h2 { grid-column: span 4; margin-bottom: 12px; }
}

@media (max-width: 767px) {
  .subpage-body .site-header { position: absolute; }
  .desktop-comp-hero { min-height: 560px; padding-top: 0; display: grid; place-items: center; background: linear-gradient(rgba(3,8,17,.54),rgba(3,8,17,.88)), url("assets/images/hero-library.jpg") 62% center / cover; }
  .desktop-comp-hero > img { display: none; }
  .mobile-hero { display: block; position: relative; z-index: 1; width: calc(100% - 44px); text-align: center; }
  .mobile-hero .crumb { color: var(--muted); font-size: 9px; }
  .mobile-hero h1 { margin: 18px 0 8px; color: #e2d8cb; font: 500 clamp(53px,17vw,74px)/1 var(--serif-en); letter-spacing: .08em; }
  .mobile-hero h1 span { display: block; margin-top: 14px; color: var(--accent); font: 500 21px/1 var(--serif-jp); }
  .mobile-hero p { font-size: 12px; }
  .sub-shell { width: calc(100% - 24px); }
  .sub-section { padding: 48px 0; }
  .sub-heading { font-size: 31px; }
  .about-intro-panel, .about-concept-panel, .recorder-panel, .featured-work, .novel-story { grid-template-columns: 1fr; }
  .about-intro-panel img, .about-concept-panel img { max-height: 310px; }
  .concept-copy { order: 2; padding: 28px 22px; }
  .recorder-panel { padding: 22px; text-align: center; }.recorder-panel img { margin: auto; }
  .mission-grid { grid-template-columns: repeat(2,1fr); }.mission-card:last-child { grid-column: 1 / -1; }
  .experience-grid { grid-template-columns: repeat(2,1fr); padding: 20px; }
  .filter-row { grid-template-columns: repeat(3,1fr); }
  .featured-copy { grid-template-columns: 1fr; padding: 28px 22px; }
  .featured-copy h2 { font-size: 50px; }
  .works-grid, .novel-grid, .store-product-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .work-library-card h3 { font-size: 19px; }.work-library-card p { min-height: 62px; }
  .release-archive { grid-template-columns: repeat(2,1fr); }.release-archive h2 { grid-column: span 2; }
  .order-row { grid-template-columns: repeat(3,1fr); }
  .manga-library-grid, .song-manga-grid, .character-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .manga-volume:last-child, .character-card:last-child { grid-column: 1 / -1; width: 55%; margin: auto; }
  .chapter-strip { display: block; }.chapter-thumbs { margin-top: 12px; grid-template-columns: repeat(3,1fr); }
  .manga-feature { min-height: 430px; background-position: 35% center; }.manga-feature::after { background: linear-gradient(0deg, rgba(5,7,8,.96), transparent); }.manga-feature-copy { position: absolute; left: 0; right: 0; bottom: 0; width: auto; padding: 30px 22px; }
  .category-row { grid-template-columns: repeat(2,1fr); }.crosslink-grid { grid-template-columns: 1fr; }
  .novel-tabs { grid-template-columns: repeat(2,1fr); }
  .paper-excerpt { padding: 60px 24px 35px; }.paper-excerpt p { font-size: 12px; }
  .novel-story-copy { padding: 28px 22px; }.product-formats { grid-template-columns: 1fr; }.format-card { border-right: 0; border-bottom: 1px solid rgba(169,138,80,.3); }
  .archive-dashboard { grid-template-columns: 1fr; }.locations { grid-column: auto; }.world-preview { grid-template-columns: 1fr; }.relationship-map { gap: 20px 30px; }.location-grid { grid-template-columns: repeat(2,1fr); }
  .purchase-benefits { grid-template-columns: repeat(2,1fr); }.purchase-benefits h2 { grid-column: 1 / -1; text-align: center; }
  .join-card-grid { grid-template-columns: repeat(2,1fr); }.resident-perks { grid-template-columns: repeat(2,1fr); }.resident-perks div:last-child { grid-column: 1 / -1; }
  .store-ending { justify-content: center; background-image: linear-gradient(rgba(4,9,18,.35),rgba(4,9,18,.9)),url("assets/images/subpages/store-ending.png"); }.store-ending blockquote { width: 100%; text-align: center; font-size: 15px; }
}

@media (max-width: 430px) {
  .mission-grid, .experience-grid, .works-grid, .novel-grid, .store-product-grid, .manga-library-grid, .song-manga-grid, .character-grid, .join-card-grid { grid-template-columns: 1fr; }
  .mission-card:last-child, .manga-volume:last-child, .character-card:last-child { grid-column: auto; width: 100%; }
  .filter-row { grid-template-columns: repeat(2,1fr); }
  .order-row { grid-template-columns: repeat(2,1fr); }
  .manga-volume h3 { min-height: 0; }
}