/*
Theme Name: OTOBON 音本倶楽部
Theme URI: https://marutakesyobou.com/
Author: 丸竹書房
Author URI: https://marutakesyobou.com/
Description: 文豪の物語を、聴く。観る。辿る。朗読・名作選・文豪競演・YouTube番組を統合する、音本倶楽部公式WordPressテーマ。
Version: 2.3.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: otobon-club
Tags: custom-logo, custom-menu, featured-images, editor-style, wide-blocks, accessibility-ready
*/

:root {
  --ink: #121713;
  --indigo: #17243a;
  --paper: #f2ede1;
  --paper-deep: #e8dfcf;
  --gold: #b79b64;
  --vermillion: #80372e;
  --body-size: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif; }
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
.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; }
.screen-reader-text:focus { z-index: 99999; top: 8px; left: 8px; width: auto; height: auto; padding: 12px 18px; clip: auto; background: var(--paper); color: var(--ink); }
.skip-link { position: fixed; }
.admin-bar .site-header { top: 32px; }
.site-shell { min-height: 100vh; font-size: var(--body-size); overflow: hidden; }
.font-大 { --body-size: 18px; }
.font-特大 { --body-size: 20px; }

.site-header {
  position: absolute; inset: 0 0 auto 0; z-index: 20; height: 92px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4.6vw; color: #f6f0e4; border-bottom: 1px solid rgba(255,255,255,.16);
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--gold); color: var(--gold); font-size: 1.35rem; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.05; }
.brand-copy strong { font-family: Georgia, serif; font-size: 1rem; letter-spacing: .22em; font-weight: 500; }
.brand-copy small { margin-top: 6px; font-size: .7rem; letter-spacing: .36em; opacity: .78; }
.main-nav { display: flex; align-items: center; gap: clamp(22px, 2.4vw, 46px); font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; font-size: .76rem; letter-spacing: .12em; }
.main-nav > ul, .main-nav .fallback-menu { display: flex; align-items: center; gap: clamp(22px, 2.4vw, 46px); margin: 0; padding: 0; list-style: none; }
.main-nav a { position: relative; padding: 35px 0; opacity: .82; transition: opacity .2s; }
.main-nav a:hover, .main-nav a:focus-visible { opacity: 1; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 25px; height: 1px; background: var(--gold); transition: right .25s; }
.main-nav a:hover::after { right: 0; }
.header-actions { display: flex; align-items: center; gap: 16px; }
.font-switcher { display: flex; align-items: center; gap: 4px; font-family: sans-serif; }
.font-switcher > span { font-size: .65rem; opacity: .68; margin-right: 4px; }
.font-switcher button { width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.28); color: inherit; background: transparent; font-size: .67rem; }
.font-switcher button.active { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.search-button, .menu-button { width: 38px; height: 38px; border: 0; color: inherit; background: transparent; }
.search-button { font: 1.8rem Georgia, serif; }
.menu-button { display: none; position: relative; }
.menu-button i { position: absolute; width: 22px; height: 1px; left: 8px; background: currentColor; }
.menu-button i:first-child { top: 14px; } .menu-button i:last-child { top: 23px; }

.hero { position: relative; min-height: 790px; height: 100svh; background: #101a20; color: #f7f1e5; overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: 0; opacity: .16; pointer-events: none; background-image: repeating-linear-gradient(90deg, transparent 0 3px, rgba(255,255,255,.07) 4px), repeating-linear-gradient(0deg, transparent 0 4px, rgba(0,0,0,.16) 5px); mix-blend-mode: overlay; }
.hero-art { position: absolute; inset: 0; overflow: hidden; background: #101820 url('assets/images/otobon-hero-bg.png') center center / cover no-repeat; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,12,15,.12), rgba(8,14,18,.1) 38%, rgba(8,13,18,.65) 68%, rgba(6,10,14,.96)); }
.moon { display: none; }
.shoji { display: none; }
.shoji::before, .shoji::after { content: ""; position: absolute; background: rgba(8,13,15,.82); }
.shoji::before { left: 49%; top: 0; bottom: 0; width: 9px; }
.shoji::after { left: 0; right: 0; top: 45%; height: 8px; }
.shoji span { flex: 1; border-right: 2px solid rgba(9,14,16,.65); }
.book { display: none; }
.book i { position: absolute; top: 0; width: 50%; height: 100%; background: linear-gradient(100deg,#a89572,#e2d5b8 35%,#b7a27d); border: 1px solid #6d604b; }
.book i:first-child { left: 0; transform: skewY(-7deg); transform-origin: right; }
.book i:last-child { right: 0; transform: skewY(7deg); transform-origin: left; }
.book::after { content: "〽　山　川　草　木　人　情"; position: absolute; z-index: 2; left: 26%; top: 27%; color: rgba(40,36,30,.58); font-size: 15px; letter-spacing: 8px; writing-mode: vertical-rl; }
.mist { position: absolute; height: 85px; border-radius: 50%; background: rgba(205,213,205,.14); filter: blur(24px); transform: rotate(-7deg); }
.mist-one { left: -8%; right: 28%; bottom: 27%; }.mist-two { left: 12%; right: 4%; bottom: 16%; opacity: .5; }
.hero-kicker { position: absolute; z-index: 3; left: 4.7vw; top: 127px; display: flex; align-items: center; gap: 14px; font: .62rem/1 Georgia, serif; letter-spacing: .22em; opacity: .62; }
.hero-kicker i { width: 52px; height: 1px; background: var(--gold); }
.hero-content { position: relative; z-index: 4; width: min(1180px, 86vw); height: 100%; margin: auto; display: flex; justify-content: flex-end; align-items: center; gap: clamp(70px, 8vw, 145px); padding-top: 70px; }
.hero-title { height: 500px; writing-mode: vertical-rl; text-orientation: upright; display: flex; gap: 22px; }
.hero-title p { margin: 16px 0 0; font-size: 1.05rem; letter-spacing: .28em; color: #d6c7aa; }
.hero-title h1 { margin: 0; font-size: clamp(3.5rem, 5.3vw, 5.9rem); line-height: 1.28; letter-spacing: .11em; font-weight: 400; }
.hero-intro { width: 310px; margin-top: 165px; align-self: center; font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; }
.hero-intro .eyebrow { font: .68rem Georgia, serif; color: var(--gold); letter-spacing: .22em; }
.hero-intro > p:not(.eyebrow) { margin: 22px 0 32px; font-size: .88rem; line-height: 2.1; letter-spacing: .08em; opacity: .82; }
.primary-button { width: 245px; min-height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px 0 24px; border: 1px solid rgba(212,190,145,.62); font-size: .79rem; letter-spacing: .15em; transition: background .2s, color .2s; }
.primary-button:hover { background: var(--paper); color: var(--ink); }
.primary-button b { font: 1.2rem Georgia, serif; }
.hero-side-label { position: absolute; z-index: 5; top: 46%; left: 3.7vw; display: flex; align-items: center; gap: 12px; writing-mode: vertical-rl; font-size: .62rem; letter-spacing: .32em; opacity: .46; }
.hero-side-label i { height: 45px; width: 1px; background: currentColor; }
.scroll-cue { position: absolute; z-index: 6; left: 50%; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; transform: translateX(-50%); font: .55rem Georgia, serif; letter-spacing: .28em; opacity: .58; }
.scroll-cue i { height: 54px; width: 1px; background: currentColor; }

.paper-section { position: relative; background: var(--paper); }
.paper-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .32; background: radial-gradient(circle at 20% 20%, rgba(128,55,46,.08), transparent 24%), repeating-linear-gradient(90deg, transparent 0 4px, rgba(69,56,39,.03) 5px); }
.section-heading { position: relative; z-index: 1; }
.split-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; }
.section-label { display: flex; align-items: center; gap: 18px; color: var(--vermillion); font: .7rem/1.2 Georgia, serif; letter-spacing: .28em; }
.section-label span { color: var(--ink); font-family: "Yu Mincho", serif; letter-spacing: .18em; }
.section-label::after { content: ""; width: 46px; height: 1px; background: currentColor; opacity: .55; }
.section-heading h2, .reader-copy h2, .authors-section h2 { margin: 27px 0 0; font-size: clamp(2.35rem, 4.1vw, 4.35rem); line-height: 1.46; letter-spacing: .1em; font-weight: 400; }
.section-lead { margin: 0 4vw 10px 0; font-family: "Hiragino Kaku Gothic ProN", sans-serif; font-size: .88rem; line-height: 2.2; letter-spacing: .09em; color: #575b55; }

.pathways-section { padding: 115px max(5vw, 28px) 125px; }
.pathways-section > * { position: relative; z-index: 1; max-width: 1320px; margin-left: auto; margin-right: auto; }
.pathways-intro { display: grid; grid-template-columns: 1fr 1.25fr .9fr; align-items: end; gap: 45px; }
.pathways-intro h2 { margin: 0; font-size: clamp(2.3rem, 4vw, 4.2rem); line-height: 1.45; letter-spacing: .1em; font-weight: 400; }
.pathways-intro > p:last-child { margin: 0 0 10px; color: #565a54; font: .86rem/2.15 "Hiragino Kaku Gothic ProN", sans-serif; letter-spacing: .07em; }
.pathway-grid { margin-top: 70px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #bdb2a1; border-left: 1px solid #bdb2a1; }
.pathway-card { min-height: 330px; padding: 28px 32px 30px; border-right: 1px solid #bdb2a1; border-bottom: 1px solid #bdb2a1; display: flex; flex-direction: column; transition: background .25s, color .25s, transform .25s; }
.pathway-card:hover { background: var(--indigo); color: #f2eadf; transform: translateY(-5px); }
.pathway-number { color: var(--vermillion); font-size: .72rem; letter-spacing: .2em; }
.pathway-card small { margin-top: 48px; color: var(--gold); font: .62rem sans-serif; letter-spacing: .18em; }
.pathway-card h3 { margin: 13px 0 20px; font-size: clamp(1.65rem, 2.4vw, 2.45rem); letter-spacing: .14em; font-weight: 400; }
.pathway-card p { margin: 0; max-width: 310px; color: #5e615b; font: .8rem/2 "Hiragino Kaku Gothic ProN", sans-serif; letter-spacing: .06em; }
.pathway-card:hover p { color: rgba(242,234,223,.72); }
.pathway-card b { margin-top: auto; padding-top: 28px; border-top: 1px solid currentColor; font: .68rem sans-serif; letter-spacing: .16em; font-weight: 400; }

.features-section { padding: 120px max(5vw, 28px) 145px; }
.features-section > * { max-width: 1320px; margin-left: auto; margin-right: auto; }
.feature-stage { position: relative; z-index: 2; margin-top: 70px; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 1px; background: rgba(32,31,26,.14); }
.feature-cards { min-width: 0; }
.feature-card[hidden] { display: none; }
.feature-card { position: relative; min-height: 570px; overflow: hidden; display: grid; grid-template-columns: 55% 45%; background: #24303d; color: #f5efe3; }
.feature-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 25%, rgba(7,11,14,.42) 72%, rgba(7,11,14,.78)); }
.feature-card.rust { background: #53352e; }.feature-card.moss { background: #283b35; }.feature-card.violet { background: #322d3c; }
.feature-card.has-image .feature-visual { background-position: center; background-size: cover; }
.feature-card.has-image .feature-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(6,9,12,.08),rgba(6,9,12,.45)); }
.feature-card.has-image .sun-disc, .feature-card.has-image .figure { display: none; }
.feature-number { position: absolute; z-index: 4; left: 26px; top: 25px; font: italic 1rem Georgia, serif; color: var(--gold); }
.feature-visual { position: relative; min-height: 570px; overflow: hidden; background: radial-gradient(circle at 42% 30%, rgba(212,171,94,.6), transparent 25%), linear-gradient(154deg, rgba(255,255,255,.08), transparent 40%), repeating-linear-gradient(110deg, rgba(255,255,255,.025) 0 1px, transparent 1px 8px); }
.feature-visual::before { content: ""; position: absolute; inset: 52% -10% -10% -10%; background: linear-gradient(165deg, #111a22 0 35%, transparent 36%), linear-gradient(194deg, #0d151b 0 36%, transparent 37%); filter: drop-shadow(0 -12px 30px rgba(0,0,0,.45)); }
.sun-disc { position: absolute; width: 260px; height: 260px; border-radius: 50%; left: 18%; top: 15%; border: 1px solid rgba(210,185,133,.32); box-shadow: inset 0 0 80px rgba(197,154,88,.22), 0 0 80px rgba(190,151,86,.12); }
.figure { position: absolute; bottom: 5%; width: 46px; height: 245px; background: linear-gradient(#111,#040506); border-radius: 45% 45% 5px 5px; filter: drop-shadow(0 12px 14px #000); }
.figure::before { content: ""; position: absolute; width: 48px; height: 48px; border-radius: 50%; top: -32px; left: 0; background: #090b0c; }
.figure::after { content: ""; position: absolute; width: 86px; height: 12px; left: 34px; top: 72px; background: #080a0b; transform: rotate(-24deg); transform-origin: left; }
.figure.one { left: 25%; }.figure.two { left: 48%; height: 215px; opacity: .82; transform: scale(.88); }.figure.two::after { transform: rotate(24deg); left: -72px; }
.feature-copy { position: relative; z-index: 3; padding: 75px 58px 60px 25px; display: flex; flex-direction: column; align-items: flex-start; }
.feature-copy > p { font-size: .72rem; letter-spacing: .24em; color: #d8c7a7; }
.feature-copy h3 { margin: 20px 0; writing-mode: vertical-rl; height: 230px; font-size: clamp(2.75rem,4vw,4.4rem); line-height: 1.2; letter-spacing: .12em; font-weight: 400; }
.feature-copy h3 span { display: block; }
.feature-copy small { max-width: 320px; font-size: .72rem; letter-spacing: .12em; line-height: 1.8; opacity: .72; }
.feature-copy blockquote { margin: auto 0 24px; padding-left: 17px; border-left: 1px solid var(--gold); font-size: .88rem; letter-spacing: .12em; }
.feature-copy a { min-width: 190px; padding: 15px 0; border-top: 1px solid rgba(255,255,255,.33); display: flex; justify-content: space-between; font-family: sans-serif; font-size: .73rem; letter-spacing: .15em; }
.feature-tabs { display: flex; flex-direction: column; background: #e6dece; }
.feature-tabs button { flex: 1; display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center; padding: 19px; border: 0; border-bottom: 1px solid rgba(35,36,31,.14); background: transparent; color: #585950; text-align: left; transition: .2s; }
.feature-tabs button span { font: italic .72rem Georgia, serif; color: var(--vermillion); }.feature-tabs button strong { font-size: .88rem; line-height: 1.45; letter-spacing: .08em; font-weight: 500; }
.feature-tabs button.active { background: var(--ink); color: #f3ecdf; padding-left: 27px; }.feature-tabs button.active span { color: var(--gold); }

.ink-section { background: #131a19; color: #f1eadf; }
.releases-section { padding: 120px max(5vw, 28px) 140px; position: relative; }
.releases-section::before { content: ""; position: absolute; inset: 0; opacity: .15; background: repeating-linear-gradient(90deg, transparent 0 5px, rgba(255,255,255,.035) 6px); }
.releases-section > * { position: relative; max-width: 1320px; margin-left: auto; margin-right: auto; }
.listen-heading-action { text-align: right; }
.listen-heading-action > p { margin: 0 3vw 22px 0; color: rgba(241,234,223,.58); font: .78rem/1.9 sans-serif; letter-spacing: .09em; }
.section-heading.light .section-label { color: var(--gold); }.section-heading.light .section-label span { color: #f1eadf; }.section-heading.light h2 { color: #f1eadf; }
.text-link { margin: 0 3vw 15px 0; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.3); font: .75rem sans-serif; letter-spacing: .13em; }.text-link span { margin-left: 38px; color: var(--gold); }
.release-grid { margin-top: 65px; display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.release-card { min-width: 0; }
.release-art { position: relative; aspect-ratio: 16/10; overflow: hidden; background: radial-gradient(circle at 65% 20%, rgba(234,191,101,.5), transparent 18%), linear-gradient(135deg,#303932,#121817 65%); box-shadow: 0 22px 45px rgba(0,0,0,.24); }
.release-art::before { content: ""; position: absolute; inset: 45% 0 0; background: repeating-linear-gradient(110deg, #0c1211 0 22px, #18211d 23px 48px); clip-path: polygon(0 50%, 18% 22%, 35% 55%, 52% 8%, 69% 40%, 85% 14%,100% 48%,100% 100%,0 100%); }
.release-art.obi { background: radial-gradient(circle at 28% 28%, rgba(206,146,112,.62), transparent 25%), linear-gradient(135deg,#622c2d,#151819 70%); }.release-art.rain { background: radial-gradient(circle at 70% 20%, rgba(166,186,183,.3), transparent 22%), linear-gradient(135deg,#23313a,#0d1418 70%); }
.release-art.rain::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(104deg, transparent 0 17px, rgba(215,230,228,.12) 18px, transparent 19px 35px); }
.release-art.has-image { background-position: center; background-size: cover; }
.release-art.has-image::before { background: linear-gradient(90deg,rgba(8,12,14,.08),rgba(8,12,14,.7)); clip-path: none; inset: 0; }
.release-date { position: absolute; z-index: 4; left: 18px; top: 18px; width: 48px; height: 58px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: rgba(242,237,225,.9); color: var(--ink); }.release-date b { font: 1.45rem Georgia, serif; }.release-date small { font: .55rem Georgia, serif; letter-spacing: .18em; }
.play-mark { position: absolute; z-index: 5; right: 20px; bottom: 20px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(242,237,225,.9); color: var(--ink); font-size: .72rem; padding-left: 3px; }
.vertical-cover-copy { position: absolute; z-index: 4; right: 20%; top: 14%; display: flex; gap: 12px; writing-mode: vertical-rl; text-shadow: 0 2px 12px #000; }.vertical-cover-copy small { font-size: .67rem; letter-spacing: .15em; }.vertical-cover-copy strong { font-size: clamp(1.45rem,2.2vw,2.25rem); letter-spacing: .13em; font-weight: 400; }
.release-meta { padding: 22px 4px; }.release-meta p { display: flex; justify-content: space-between; margin: 0; color: var(--gold); font: .66rem sans-serif; letter-spacing: .15em; }.release-meta p span { color: rgba(255,255,255,.45); }.release-meta h3 { margin: 13px 0 8px; font-size: 1.25rem; letter-spacing: .11em; font-weight: 400; }.release-meta small { opacity: .52; font-family: sans-serif; letter-spacing: .07em; }

.programs-section { position: relative; padding: 120px max(5vw, 28px) 135px; background: #202a35; color: #f2ebdf; overflow: hidden; }
.programs-section::before { content: "番組"; position: absolute; right: 3vw; top: -80px; color: rgba(255,255,255,.025); font-size: 26rem; writing-mode: vertical-rl; line-height: 1; }
.programs-section > * { position: relative; max-width: 1320px; margin-left: auto; margin-right: auto; }
.light-lead { color: rgba(242,235,223,.62); }
.program-list { margin-top: 65px; border-top: 1px solid rgba(255,255,255,.22); }
.program-row { min-height: 145px; display: grid; grid-template-columns: 52px minmax(210px,1.2fr) 1.6fr 130px 30px; align-items: center; gap: 25px; border-bottom: 1px solid rgba(255,255,255,.18); transition: background .2s, padding .2s; }
.program-row:hover { background: rgba(255,255,255,.055); padding: 0 18px; }
.program-row > span { color: var(--gold); font: italic .72rem Georgia, serif; }
.program-row div small { color: rgba(255,255,255,.48); font: .63rem sans-serif; letter-spacing: .15em; }
.program-row h3 { margin: 8px 0 0; font-size: 1.65rem; letter-spacing: .13em; font-weight: 400; }
.program-row > p { margin: 0; color: rgba(255,255,255,.64); font: .78rem/1.9 sans-serif; letter-spacing: .07em; }
.program-row > strong { color: var(--gold); font: .62rem Georgia, serif; letter-spacing: .13em; font-weight: 400; }
.program-row > b { color: var(--gold); font: 1.2rem Georgia, serif; font-weight: 400; }

.reader-section { padding: 135px max(5vw,28px); }
.reader-panel { position: relative; z-index: 1; max-width: 1260px; margin: auto; display: grid; grid-template-columns: 58% 42%; align-items: center; }
.reader-book { min-height: 530px; display: flex; align-items: center; justify-content: center; perspective: 1100px; filter: drop-shadow(0 30px 30px rgba(64,47,24,.22)); }
.reader-page { width: 43%; height: 430px; padding: 45px 34px; background: #eee4d1; border: 1px solid #cbbda4; box-shadow: inset 0 0 35px rgba(83,61,28,.09); writing-mode: vertical-rl; }
.reader-page p { margin: 0; letter-spacing: .2em; line-height: 2.2; }
.left-page { transform: rotateY(5deg); transform-origin: right; background: linear-gradient(90deg,#ddd0b8,#f0e7d5 65%); }.left-page p { font-size: 1.5rem; }
.right-page { transform: rotateY(-5deg); transform-origin: left; background: linear-gradient(90deg,#f0e7d5 35%,#d9cbb2); }.right-page p { font-size: 1rem; }.right-page i { display: block; width: 28px; height: 28px; margin-top: auto; border: 2px solid var(--vermillion); opacity: .7; }
.reader-copy { padding: 30px 0 30px 50px; }
.reader-copy > p:not(.section-label) { margin: 26px 0; max-width: 480px; color: #565a54; font: .9rem/2.2 "Hiragino Kaku Gothic ProN", sans-serif; letter-spacing: .08em; }
.reader-copy ul { list-style: none; padding: 0; margin: 0 0 34px; display: flex; flex-wrap: wrap; gap: 8px; }.reader-copy li { padding: 8px 12px; border: 1px solid #c8beac; font: .68rem sans-serif; letter-spacing: .08em; }
.dark-button { width: 245px; min-height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; background: var(--ink); color: #f4eee2; font: .75rem sans-serif; letter-spacing: .16em; }.dark-button b { color: var(--gold); font-size: 1.2rem; }

.music-section { min-height: 650px; display: grid; grid-template-columns: 48% 52%; background: #202a35; color: #f4eee4; position: relative; overflow: hidden; }
.music-art { position: relative; overflow: hidden; background: radial-gradient(circle at 55% 48%, rgba(181,137,75,.3), transparent 20%), linear-gradient(140deg,#321f21,#16222b 60%,#10171b); }
.music-art::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 11px, rgba(255,255,255,.025) 12px); }
.record { position: absolute; width: 390px; height: 390px; border-radius: 50%; left: 47%; top: 50%; transform: translate(-50%,-50%); background: repeating-radial-gradient(circle,#0a0e11 0 4px,#1a1d20 5px 8px); box-shadow: 0 32px 60px #000; }.record::after { content: ""; position: absolute; width: 110px; height: 110px; border-radius: 50%; inset: 0; margin: auto; background: var(--vermillion); border: 8px solid #c29f61; }.record i { position: absolute; z-index: 3; width: 18px; height: 18px; border-radius: 50%; inset: 0; margin: auto; background: #ded4c1; }
.wave { position: absolute; border: 1px solid rgba(193,161,99,.18); border-radius: 50%; }.w1 { width: 520px; height: 520px; left: 47%; top: 50%; transform: translate(-50%,-50%); }.w2 { width: 650px; height: 650px; left: 47%; top: 50%; transform: translate(-50%,-50%); }
.music-copy { display: flex; flex-direction: column; justify-content: center; padding: 90px 8vw 90px 6vw; background: linear-gradient(90deg,rgba(7,12,16,.45),transparent); }
.music-copy .section-label { color: var(--gold); }.music-copy .section-label span { color: #f4eee4; }
.music-title { margin-top: 48px; writing-mode: vertical-rl; height: 275px; }.music-title small { letter-spacing: .12em; opacity: .65; }.music-title h2 { margin: 0 23px; font-size: clamp(2.3rem,3.6vw,4rem); letter-spacing: .16em; font-weight: 400; }.music-title p { margin: 0 18px; font-size: .78rem; letter-spacing: .12em; line-height: 2; color: #d1c6b4; }
.music-actions { display: flex; align-items: center; gap: 15px; margin-top: 42px; font: .73rem sans-serif; letter-spacing: .12em; }.music-actions button { width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--gold); background: transparent; color: var(--gold); }.music-actions a { margin-left: auto; padding-bottom: 7px; border-bottom: 1px solid rgba(255,255,255,.3); }

.authors-section { padding: 125px max(5vw,28px) 140px; }
.authors-section > * { max-width: 1320px; margin-left: auto; margin-right: auto; }
.author-shelves { position: relative; z-index: 2; margin-top: 70px; border-top: 1px solid #c8bdac; display: grid; grid-template-columns: repeat(6,1fr); }
.author-shelves a { min-height: 350px; padding: 20px 16px 25px; border-right: 1px solid #c8bdac; display: flex; flex-direction: column; align-items: center; transition: background .2s,color .2s; }.author-shelves a:first-child { border-left: 1px solid #c8bdac; }.author-shelves a:hover { background: var(--ink); color: #f4eee3; }.author-shelves span { align-self: flex-start; color: var(--vermillion); font: italic .7rem Georgia,serif; }.author-shelves strong { margin: 30px auto; writing-mode: vertical-rl; font-size: 1.35rem; letter-spacing: .18em; font-weight: 400; }.author-shelves i { margin-top: auto; font: 1rem Georgia,serif; color: var(--gold); }

.closing-section { padding: 120px 25px; text-align: center; background: #17243a; color: #f3ecdf; position: relative; }.closing-section::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 35%,rgba(181,145,83,.15),transparent 35%),repeating-linear-gradient(90deg,transparent 0 5px,rgba(255,255,255,.025) 6px); }.closing-section > * { position: relative; }.closing-section > p { color: var(--gold); letter-spacing: .32em; }.closing-section h2 { margin: 30px 0 45px; font-size: clamp(2.2rem,4.2vw,4.2rem); line-height: 1.55; letter-spacing: .15em; font-weight: 400; }.closing-section div { display: flex; justify-content: center; gap: 12px; }.closing-section a { min-width: 190px; padding: 17px 24px; border: 1px solid rgba(255,255,255,.35); font: .75rem sans-serif; letter-spacing: .15em; }.closing-section a:first-child { background: var(--paper); color: var(--ink); }
.site-footer { padding: 65px 5vw 35px; display: grid; grid-template-columns: 1.1fr 1.6fr 1.3fr auto; align-items: center; gap: 30px; background: #0e1313; color: #ece5da; }.footer-brand { display: flex; align-items: center; gap: 12px; }.footer-brand p { display: flex; flex-direction: column; margin: 0; }.footer-brand strong { font: 1rem Georgia,serif; letter-spacing: .2em; }.footer-brand small { margin-top: 5px; font-size: .6rem; letter-spacing: .3em; }.site-footer > p { font-size: .77rem; line-height: 1.9; letter-spacing: .09em; opacity: .72; }.site-footer > p small { font-family: sans-serif; font-size: .62rem; }.site-footer nav { display: flex; gap: 22px; font: .65rem sans-serif; letter-spacing: .08em; opacity: .65; }.site-footer > small { font: .55rem Georgia,serif; opacity: .45; }
.site-footer nav ul { display: contents; list-style: none; margin: 0; padding: 0; }

/* WordPress inner pages */
.inner-header { position: relative; background: #0e1519; }
.content-shell, .single-shell { min-height: 70vh; background: var(--paper); }
.content-hero { padding: 165px max(5vw,28px) 80px; background: #17243a; color: #f3ecdf; }
.content-hero p, .single-hero-copy > p { margin: 0 0 20px; color: var(--gold); font: .68rem Georgia,serif; letter-spacing: .24em; }
.content-hero h1 { max-width: 1320px; margin: 0 auto; font-size: clamp(2.4rem,5vw,5rem); font-weight: 400; letter-spacing: .12em; }
.content-hero > p { max-width: 1320px; margin-left: auto; margin-right: auto; }
.content-grid { max-width: 1120px; margin: auto; padding: 85px max(5vw,25px) 120px; }
.content-card { display: grid; grid-template-columns: minmax(220px,38%) 1fr; gap: 42px; padding: 35px 0; border-bottom: 1px solid #c8bdac; }
.content-card-image { min-height: 230px; background: #202a35; }
.content-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.content-card small { color: var(--vermillion); letter-spacing: .12em; }.content-card h2 { margin: 12px 0; font-size: 1.8rem; font-weight: 400; }.content-card p { color: #565a54; line-height: 2; }
.text-link-dark { display: inline-block; margin-top: 12px; padding-bottom: 6px; border-bottom: 1px solid #8c806d; font-size: .75rem; letter-spacing: .12em; }
.single-hero { min-height: 560px; display: grid; grid-template-columns: 44% 56%; background: #17243a; color: #f3ecdf; }
.single-hero.compact { display: flex; min-height: 360px; }
.single-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 130px 6vw 70px; }
.single-hero-copy h1 { margin: 0 0 28px; font-size: clamp(2.5rem,5vw,5rem); font-weight: 400; line-height: 1.35; letter-spacing: .1em; }
.single-hero-copy div { color: rgba(243,236,223,.7); line-height: 2; }
.single-hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.single-content { max-width: 850px; margin: auto; padding: 90px 25px 130px; font-size: 1.06rem; line-height: 2.15; }
.single-content h2 { margin-top: 2.5em; font-size: 2rem; font-weight: 400; }.single-content h3 { margin-top: 2em; font-size: 1.4rem; }.single-content img { max-width: 100%; height: auto; }
.not-found { max-width: 850px; margin: auto; padding: 180px 25px; text-align: center; }.not-found > p { color: var(--gold); font: 2rem Georgia,serif; }.not-found h1 { margin: 25px 0 45px; font-size: clamp(2rem,5vw,3.8rem); font-weight: 400; }.not-found .dark-button { margin: auto; }
.nav-links { display: flex; gap: 8px; margin-top: 45px; }.page-numbers { padding: 9px 13px; border: 1px solid #c8bdac; }.page-numbers.current { background: var(--ink); color: var(--paper); }

@media (max-width: 1060px) {
  .main-nav { display: none; position: absolute; left: 0; right: 0; top: 92px; flex-direction: column; align-items: stretch; gap: 0; padding: 16px 5vw 24px; background: rgba(12,19,23,.98); }
  .main-nav.is-open { display: flex; }
  .main-nav > ul, .main-nav .fallback-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav a { padding: 14px 0; }
  .menu-button { display: block; }
  .release-grid { gap: 16px; }
  .pathways-intro { grid-template-columns: 1fr 1fr; }
  .pathways-intro > p:last-child { grid-column: 2; }
  .program-row { grid-template-columns: 40px 1fr 1.4fr 30px; }
  .program-row > strong { display: none; }
  .feature-stage { grid-template-columns: 1fr; }
  .feature-tabs { flex-direction: row; }.feature-tabs button { min-height: 84px; }.feature-tabs button strong { display: none; }
  .reader-panel { grid-template-columns: 52% 48%; }.reader-copy { padding-left: 25px; }
  .author-shelves { grid-template-columns: repeat(3,1fr); }.author-shelves a { min-height: 250px; border-bottom: 1px solid #c8bdac; }.author-shelves strong { font-size: 1.15rem; }
  .site-footer { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .admin-bar .site-header { top: 46px; }
  .site-header { height: 74px; padding: 0 20px; }
  .brand-mark { width: 35px; height: 35px; }
  .brand-copy strong { font-size: .86rem; }.brand-copy small { font-size: .58rem; }
  .font-switcher > span, .search-button { display: none; }
  .font-switcher button { width: 26px; height: 26px; }
  .main-nav { top: 74px; }
  .hero { min-height: 780px; }
  .hero-kicker { top: 102px; left: 22px; font-size: .52rem; }
  .hero-kicker span:last-child { display: none; }
  .hero-content { width: 100%; padding: 110px 25px 60px; align-items: flex-start; justify-content: space-between; gap: 22px; }
  .hero-title { height: 455px; margin-left: auto; order: 2; }
  .hero-title h1 { font-size: clamp(2.7rem, 13vw, 4rem); line-height: 1.2; }
  .hero-title p { font-size: .8rem; }
  .hero-intro { width: min(220px, 48vw); margin-top: auto; margin-bottom: 82px; order: 1; }
  .hero-intro > p:not(.eyebrow) { font-size: .75rem; line-height: 1.9; }
  .primary-button { width: 100%; padding: 0 14px; font-size: .67rem; }
  .shoji { width: 72%; left: -10%; height: 44%; }
  .book { width: 280px; left: -9%; bottom: 15%; }
  .hero-overlay { background: linear-gradient(90deg, rgba(7,12,15,.22), rgba(7,12,15,.55) 60%, rgba(7,12,15,.87)); }
  .hero-side-label { display: none; }
  .placeholder-section { padding: 85px 25px; }
  .split-heading { display: block; }.section-lead { margin-top: 28px; }
  .section-heading h2, .reader-copy h2, .authors-section h2 { font-size: clamp(2rem,10vw,3.1rem); }
  .features-section, .releases-section, .reader-section, .authors-section, .pathways-section, .programs-section { padding: 85px 20px; }
  .pathways-intro { display: block; }
  .pathways-intro h2 { margin-top: 28px; font-size: clamp(2rem,10vw,3.1rem); }
  .pathways-intro > p:last-child { margin-top: 25px; }
  .pathway-grid { grid-template-columns: 1fr; margin-top: 45px; }
  .pathway-card { min-height: 275px; }
  .pathway-card small { margin-top: 28px; }
  .feature-stage { margin-top: 45px; }.feature-card { min-height: 590px; grid-template-columns: 42% 58%; }.feature-visual { min-height: 590px; }.feature-copy { padding: 58px 23px 42px 13px; }.feature-copy h3 { height: 230px; font-size: 2.6rem; }.feature-copy small { font-size: .61rem; }.feature-copy blockquote { font-size: .72rem; line-height: 1.8; }.sun-disc { width: 180px; height: 180px; left: -5%; }.figure.one { left: 18%; }.figure.two { left: 54%; }.feature-tabs button { padding: 12px 7px; display: flex; justify-content: center; }.feature-tabs button.active { padding-left: 7px; }
  .text-link { display: inline-block; margin-top: 30px; }.release-grid { grid-template-columns: 1fr; gap: 35px; }.release-card { display: grid; grid-template-columns: 47% 53%; gap: 14px; align-items: center; }.release-meta { padding: 8px 0; }.release-meta p { display: block; line-height: 1.8; }.release-meta p span { display: block; }.release-meta h3 { font-size: 1.05rem; }.release-meta small { font-size: .6rem; line-height: 1.6; display: block; }.vertical-cover-copy { right: 13%; }.vertical-cover-copy small { display: none; }.vertical-cover-copy strong { font-size: 1.2rem; }.play-mark { width: 38px; height: 38px; right: 10px; bottom: 10px; }
  .listen-heading-action { text-align: left; margin-top: 30px; }
  .listen-heading-action > p { margin: 0 0 5px; }
  .program-list { margin-top: 45px; }
  .program-row { min-height: 170px; grid-template-columns: 30px 1fr 22px; gap: 12px; padding: 20px 0; }
  .program-row:hover { padding: 20px 8px; }
  .program-row > p { grid-column: 2 / 4; }
  .program-row h3 { font-size: 1.3rem; }
  .reader-panel { grid-template-columns: 1fr; }.reader-book { min-height: 350px; }.reader-page { height: 310px; padding: 25px 20px; }.left-page p { font-size: 1.15rem; }.reader-copy { padding: 40px 0 0; }
  .music-section { grid-template-columns: 1fr; min-height: 830px; }.music-art { min-height: 330px; }.record { width: 250px; height: 250px; }.record::after { width: 80px; height: 80px; }.w1 { width: 330px;height:330px }.w2 { width:440px;height:440px }.music-copy { padding: 60px 25px; }.music-title { height: 250px; margin-top: 35px; }.music-title h2 { font-size: 2rem; }.music-title p { font-size: .65rem; }
  .author-shelves { grid-template-columns: repeat(3,1fr); margin-top: 45px; }.author-shelves a { min-height: 220px; padding: 14px 8px; }.author-shelves strong { font-size: 1rem; }
  .closing-section { padding: 85px 20px; }.closing-section div { flex-direction: column; align-items: center; }.closing-section a { width: min(300px,100%); }
  .site-footer { grid-template-columns: 1fr; padding: 50px 25px 30px; }.site-footer nav { flex-wrap: wrap; }
  .content-hero { padding-top: 115px; }.content-card { grid-template-columns: 1fr; gap: 22px; }.content-card-image { min-height: 190px; }
  .single-hero { min-height: 620px; grid-template-columns: 1fr; }.single-hero-copy { padding: 115px 25px 55px; }.single-hero-image { min-height: 280px; }.single-hero.compact { min-height: 300px; }
}

/* ==========================================================
   OTOBON Club v2.1 — Publisher-first integration
   ========================================================== */
.release-grid-integrated { grid-template-columns: repeat(3, minmax(0,1fr)); row-gap: 72px; }
.work-primary-card .release-art { min-height: 365px; background-size: cover; background-position: center; }
.work-page-mark { position: absolute; left: 22px; bottom: 20px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.55); background: rgba(8,13,18,.72); color: #f7f1e5; font: .62rem/1 sans-serif; letter-spacing: .13em; }
.journey-dots { margin-top: 13px; display: flex; flex-wrap: wrap; gap: 6px; }
.journey-dot { display: inline-block; padding: 5px 8px; border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.68); font: .58rem/1.2 sans-serif; letter-spacing: .06em; }
.section-empty { max-width: 1320px; margin: 40px auto 0; padding: 28px; border: 1px solid rgba(128,110,80,.24); color: #777167; }

/* Music becomes a real, data-backed section while preserving v1 visual language. */
.music-section-data { min-height: 760px; align-items: stretch; }
.music-section-data .music-copy { display: flex; flex-direction: column; justify-content: center; }
.story-song-list { margin-top: 38px; border-top: 1px solid rgba(255,255,255,.22); }
.story-song-list article { display: grid; grid-template-columns: 1fr auto; gap: 25px; align-items: center; padding: 17px 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.song-work { display: grid; grid-template-columns: 120px 1fr auto; gap: 16px; align-items: center; color: #f3ecdf; }
.song-work small { color: var(--gold); font: .62rem/1.6 sans-serif; letter-spacing: .12em; }
.song-work strong { font-size: 1.05rem; font-weight: 400; letter-spacing: .08em; }
.song-work span { color: rgba(255,255,255,.55); font: .62rem/1 sans-serif; }
.song-play { min-width: 96px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.28); color: #f3ecdf; font: .62rem/1 sans-serif; text-align: center; }
.music-coming { margin-top: 32px; color: rgba(255,255,255,.62); font: .8rem/2 sans-serif; }
.music-youtube { display: inline-flex; margin-top: 28px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.28); color: #f3ecdf; font: .68rem/1.5 sans-serif; letter-spacing: .09em; }

/* Karaoke — intentionally light-weight until a dedicated Publisher field exists. */
.karaoke-section { padding: 125px max(5vw,28px); border-top: 1px solid #d3c7b5; }
.karaoke-inner { max-width: 1260px; margin: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10vw; align-items: end; }
.karaoke-inner h2 { margin: 27px 0 0; font-size: clamp(2.4rem,4.5vw,4.8rem); line-height: 1.45; letter-spacing: .12em; font-weight: 400; }
.karaoke-copy p { margin: 0 0 28px; color: #555950; font: .9rem/2.15 sans-serif; letter-spacing: .08em; }
.karaoke-status { display: inline-block; padding: 12px 18px; border: 1px solid #c8beac; color: #756d61; font: .68rem/1 sans-serif; letter-spacing: .1em; }

/* Integrated OTOBON Publisher work page navigation. */
.single-author-link { display: inline-block; margin: -8px 0 22px; font-size: .75rem; letter-spacing: .12em; }
.single-author-link a { color: #d7bc82; }
.work-journey-nav { background: #eee5d5; border-bottom: 1px solid #d0c2ab; }
.work-journey-inner { max-width: 1260px; margin: auto; padding: 42px max(3vw,24px); display: grid; grid-template-columns: minmax(230px,.7fr) 1.6fr; gap: 55px; align-items: center; }
.work-journey-inner > div p { margin: 0 0 8px; color: var(--vermillion); font: .62rem/1 Georgia,serif; letter-spacing: .2em; }
.work-journey-inner h2 { margin: 0; font-size: 1.45rem; font-weight: 400; letter-spacing: .08em; }
.work-journey-inner nav { display: flex; flex-wrap: wrap; gap: 8px; }
.journey-button { min-width: 145px; display: flex; justify-content: space-between; gap: 20px; padding: 13px 14px; border: 1px solid #bfb19c; background: rgba(255,255,255,.34); color: #242621; font: .67rem/1.2 sans-serif; letter-spacing: .06em; }
.journey-button-reader { background: #18232b; color: #f4eddf; border-color: #18232b; }
.single-reader-end { max-width: 1120px; margin: 30px auto 100px; padding: 38px 42px; display: flex; justify-content: space-between; align-items: center; gap: 35px; background: #17243a; color: #f3ecdf; }
.single-reader-end p { margin: 0 0 8px; color: var(--gold); font: .62rem/1 Georgia,serif; letter-spacing: .2em; }
.single-reader-end h2 { margin: 0 0 8px; font-size: 1.8rem; font-weight: 400; }
.single-reader-end span { color: rgba(255,255,255,.6); font: .75rem/1.8 sans-serif; }
.single-reader-end > a { flex: 0 0 auto; padding: 15px 20px; border: 1px solid rgba(255,255,255,.35); color: #f3ecdf; font: .68rem/1 sans-serif; }

/* Author pages are WordPress/Publisher-first; Library is only a capability. */
.author-integrated-page { min-height: 100vh; background: var(--paper); color: var(--ink); }
.author-integrated-hero { min-height: 510px; padding: 150px max(7vw,55px) 80px; display: flex; justify-content: space-between; align-items: end; background: #eee7d9; border-bottom: 1px solid #cfc3b2; }
.author-integrated-hero h1 { margin: 24px 0 20px; font-size: clamp(3.2rem,7vw,7rem); font-weight: 400; letter-spacing: .15em; }
.author-integrated-hero > div > p:last-child { color: #6b6b62; font: .82rem/2 sans-serif; letter-spacing: .08em; }
.author-integrated-hero > strong { color: #b09461; font: italic 4rem/1 Georgia,serif; font-weight: 400; }
.author-integrated-body { max-width: 1320px; margin: auto; padding: 60px max(3vw,28px) 130px; }
.author-back { display: inline-block; margin-bottom: 55px; color: #756f64; font: .68rem/1 sans-serif; letter-spacing: .08em; }
.author-work-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 55px 34px; margin-top: 45px; }
.author-work-card { min-width: 0; }
.author-work-cover { position: relative; display: block; min-height: 390px; overflow: hidden; background: #17243a; color: #f2ebdf; }
.author-work-cover img { width: 100%; height: 390px; display: block; object-fit: cover; transition: transform .35s ease; }
.author-work-cover:hover img { transform: scale(1.025); }
.author-work-cover > span { min-height: 390px; padding: 45px; display: grid; place-items: center; writing-mode: vertical-rl; font-size: 1.8rem; letter-spacing: .13em; }
.author-work-cover i { position: absolute; left: 20px; bottom: 18px; padding: 8px 12px; background: rgba(10,15,20,.82); color: white; font: normal .62rem/1 sans-serif; }
.author-work-card h3 { margin: 16px 0 8px; font-size: 1.2rem; font-weight: 400; letter-spacing: .06em; }
.author-work-card small { color: #8b8173; font-size: .65rem; }
.author-journey-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0 0; }
.author-journey-chips span { padding: 5px 7px; border: 1px solid #cfc4b3; color: #716a60; font: .58rem/1 sans-serif; }
.author-secondary { margin-top: 100px; }
.author-link-list { margin-top: 25px; border-top: 1px solid #cfc3b2; }
.author-link-list a { display: flex; justify-content: space-between; padding: 22px 3px; border-bottom: 1px solid #d7ccbb; font-size: 1.05rem; letter-spacing: .08em; }

/* Footer library link remains available but no longer dominates the header. */
.site-footer nav { display: flex; flex-wrap: wrap; gap: 18px; }

@media (max-width: 980px) {
  .release-grid-integrated { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .story-song-list article, .song-work { grid-template-columns: 1fr; }
  .karaoke-inner { grid-template-columns: 1fr; gap: 45px; }
  .work-journey-inner { grid-template-columns: 1fr; gap: 25px; }
  .author-work-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .release-grid-integrated { grid-template-columns: 1fr; }
  .work-primary-card .release-art { min-height: 430px; }
  .journey-dots { display: none; }
  .music-section-data { min-height: 900px; }
  .karaoke-section { padding: 85px 20px; }
  .single-reader-end { margin: 20px 20px 70px; padding: 28px 24px; align-items: flex-start; flex-direction: column; }
  .author-integrated-hero { min-height: 430px; padding: 120px 24px 55px; }
  .author-integrated-hero > strong { font-size: 2.4rem; }
  .author-work-grid { grid-template-columns: 1fr; }
  .author-work-cover, .author-work-cover img, .author-work-cover > span { min-height: 430px; height: 430px; }
}

/* ==========================================================
   OTOBON Club v2.2 — stable front page / Publisher-first shelf
   ========================================================== */
#listen, #features, #programs, #read, #music, #karaoke, #authors { scroll-margin-top: 100px; }
body.home .site-header { position: fixed; transition: background .28s ease, box-shadow .28s ease, backdrop-filter .28s ease; }
body.home .site-header.is-scrolled { background: rgba(8,14,18,.94); box-shadow: 0 10px 34px rgba(0,0,0,.18); backdrop-filter: blur(14px); }
.front-anchor-menu a.is-active { opacity: 1; color: #fff7e7; }
.front-anchor-menu a.is-active::after { right: 0; background: var(--gold); }

/* New works: portrait covers behave like a real bookshelf, but every cover opens
   the OTOBON Publisher work page — never the Reader directly. */
.front-library-shelf-section { padding-bottom: 116px; }
.front-bookshelf {
  max-width: 1460px; margin: 60px auto 0; padding: 0 0 38px;
  display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 34px 24px;
  position: relative; align-items: start;
}
.front-bookshelf::after {
  content:""; position:absolute; left:-16px; right:-16px; bottom:9px; height:13px;
  background: linear-gradient(180deg,#7c6748 0,#3a2e23 38%,#171b1a 42%,#0f1413 100%);
  box-shadow: 0 13px 22px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.16); opacity:.78;
}
.front-book-card { min-width:0; position:relative; z-index:1; }
.front-book-cover {
  display:block; position:relative; width:100%; aspect-ratio:5/8; overflow:hidden;
  border-radius:3px 7px 7px 3px; background:#222925;
  box-shadow:0 15px 28px rgba(0,0,0,.34), -4px 0 0 rgba(255,255,255,.045);
  transform-origin:50% 92%; transition:transform .24s cubic-bezier(.2,.7,.2,1), box-shadow .24s ease;
}
.front-book-cover:hover, .front-book-cover:focus-visible { transform:translateY(-9px) scale(1.025); box-shadow:0 25px 42px rgba(0,0,0,.48), -4px 0 0 rgba(255,255,255,.07); }
.front-book-cover img { display:block; width:100%; height:100%; object-fit:contain; background:#202522; }
.front-book-fallback { position:absolute; inset:0; display:flex; flex-direction:row-reverse; justify-content:center; align-items:flex-start; gap:20px; padding:28px 24px; writing-mode:vertical-rl; background:linear-gradient(145deg,#4f4330,#18211e 65%,#101514); color:#f3eadb; }
.front-book-fallback small { color:#c5a869; font-size:.62rem; letter-spacing:.12em; }
.front-book-fallback strong { font-size:1.3rem; line-height:1.65; font-weight:400; letter-spacing:.1em; }
.front-book-open { position:absolute; left:11px; right:11px; bottom:11px; padding:9px 10px; text-align:center; background:rgba(8,13,16,.84); border:1px solid rgba(255,255,255,.18); color:#f5eee2; font:.61rem/1 sans-serif; letter-spacing:.12em; opacity:0; transform:translateY(6px); transition:.2s ease; }
.front-book-cover:hover .front-book-open, .front-book-cover:focus-visible .front-book-open { opacity:1; transform:none; }
.front-book-meta { padding:15px 1px 0; }
.front-book-meta h3 { margin:0; color:#f3ede3; font-size:1rem; line-height:1.55; font-weight:400; letter-spacing:.045em; }
.front-book-meta p { margin:6px 0 0; color:rgba(255,255,255,.5); font:.63rem/1.55 sans-serif; letter-spacing:.06em; }
.front-book-capabilities { margin-top:9px; display:flex; flex-wrap:wrap; gap:5px; }
.front-book-capabilities span { padding:4px 6px; border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.58); font:.52rem/1 sans-serif; white-space:nowrap; }

/* Curated readings: replace the fragile oversized vertical composition with
   stable editorial cards. */
.stable-features-section { overflow:hidden; }
.theme-feature-grid { max-width:1320px; margin:60px auto 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:40px 28px; }
.theme-feature-card { min-width:0; border-top:1px solid #cbbda8; padding-top:12px; }
.theme-feature-visual { position:relative; display:block; width:100%; aspect-ratio:16/10; background:linear-gradient(145deg,#18232b,#4a3c2c); background-size:cover; background-position:center; overflow:hidden; }
.theme-feature-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(6,10,12,.6)); }
.theme-feature-number { position:absolute; z-index:2; left:18px; top:18px; color:#e7c785; font:italic .75rem/1 Georgia,serif; letter-spacing:.1em; }
.theme-feature-placeholder { position:absolute; z-index:2; inset:0; display:grid; place-items:center; color:#ede4d5; font-size:1.4rem; letter-spacing:.18em; }
.theme-feature-copy { padding:20px 2px 0; }
.theme-feature-copy > small { color:var(--vermillion); font:.62rem/1 sans-serif; letter-spacing:.15em; }
.theme-feature-copy h3 { margin:12px 0 9px; font-size:1.55rem; line-height:1.5; font-weight:400; letter-spacing:.06em; }
.theme-feature-author { margin:0 0 14px!important; color:#7c7469!important; font:.68rem/1.5 sans-serif!important; }
.theme-feature-copy > p { margin:0; color:#5b5d56; font:.8rem/1.95 sans-serif; letter-spacing:.04em; }
.theme-feature-link { display:inline-flex; margin-top:20px; padding-top:11px; border-top:1px solid #bfb39f; min-width:150px; justify-content:space-between; color:#2c2e29; font:.65rem/1 sans-serif; }

/* Reader section: long Japanese copy must remain readable at desktop sizes. */
.reader-copy h2 { font-size:clamp(2.15rem,3.25vw,3.65rem); line-height:1.52; letter-spacing:.075em; }
.reader-copy > p:not(.section-label) { max-width:640px; }
.reader-page p { text-wrap:balance; }

/* Story songs: the catalog is explicit (30 supplied titles) and cannot be
   polluted by unrelated Publisher works that happen to have music metadata. */
.story-song-catalog-section { min-height:0; padding:120px max(5vw,28px); display:block; background:#1d2834; color:#f3ede2; }
.story-song-catalog-inner { max-width:1420px; margin:auto; display:grid; grid-template-columns:minmax(280px,.68fr) minmax(0,1.45fr); gap:7vw; align-items:start; }
.story-song-catalog-heading { position:sticky; top:125px; }
.story-song-catalog-heading h2 { margin:28px 0 20px; font-size:clamp(2.5rem,4.2vw,4.8rem); line-height:1.5; font-weight:400; letter-spacing:.1em; }
.story-song-catalog-heading > p:not(.section-label) { max-width:410px; color:rgba(255,255,255,.62); font:.78rem/2 sans-serif; letter-spacing:.06em; }
.story-song-catalog { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid rgba(255,255,255,.22); }
.story-song-catalog-item { min-height:96px; display:grid; grid-template-columns:42px minmax(0,1fr); grid-template-rows:auto auto; gap:6px 13px; padding:18px 15px 17px 0; border-bottom:1px solid rgba(255,255,255,.16); }
.story-song-catalog-item:nth-child(odd) { border-right:1px solid rgba(255,255,255,.12); padding-right:22px; }
.story-song-catalog-item:nth-child(even) { padding-left:22px; }
.story-song-number { grid-row:1/3; color:#c9a762; font:italic .64rem/1.4 Georgia,serif; padding-top:3px; }
.story-song-title { min-width:0; }
.story-song-title strong { display:block; font-size:1.02rem; line-height:1.55; font-weight:400; letter-spacing:.055em; overflow-wrap:anywhere; }
.story-song-title small { display:block; margin-top:4px; color:rgba(255,255,255,.42); font:.58rem/1.4 sans-serif; }
.story-song-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.story-song-actions a, .story-song-actions span { color:rgba(255,255,255,.48); font:.58rem/1 sans-serif; }
.story-song-actions a { padding-bottom:3px; border-bottom:1px solid rgba(255,255,255,.24); }
.story-song-actions .story-song-play { color:#f1ddae; border-color:#a7894d; }
.story-song-catalog-item.is-ready .story-song-number { color:#e5bf6d; }

@media (max-width: 1180px) {
  .main-nav, .main-nav > ul, .main-nav .front-anchor-menu { gap:18px; }
  .main-nav { font-size:.68rem; }
  .front-bookshelf { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .story-song-catalog-inner { grid-template-columns:1fr; gap:55px; }
  .story-song-catalog-heading { position:static; }
}
@media (max-width: 820px) {
  .front-bookshelf { display:grid; grid-auto-flow:column; grid-auto-columns:min(42vw,180px); grid-template-columns:none; overflow-x:auto; scroll-snap-type:x mandatory; gap:20px; padding-bottom:42px; scrollbar-width:none; }
  .front-bookshelf::-webkit-scrollbar { display:none; }
  .front-book-card { scroll-snap-align:start; }
  .front-bookshelf::after { display:none; }
  .theme-feature-grid { grid-template-columns:1fr; }
  .story-song-catalog { grid-template-columns:1fr; }
  .story-song-catalog-item:nth-child(odd) { border-right:0; padding-right:0; }
  .story-song-catalog-item:nth-child(even) { padding-left:0; }
}
@media (max-width: 680px) {
  .reader-copy h2 { font-size:2rem; letter-spacing:.05em; }
  .story-song-catalog-section { padding:85px 20px; }
  .story-song-catalog-heading h2 { font-size:2.5rem; }
}

/* ==========================================================
   OTOBON Club v2.3 — Library shortcut / gojuon author directory
   ========================================================== */

/* Keep the now-expanded desktop navigation usable after adding Library. */
@media (min-width:1181px) {
  .site-header { padding-left:3.2vw; padding-right:3.2vw; }
  .main-nav, .main-nav > ul, .main-nav .front-anchor-menu { gap:clamp(13px,1.35vw,26px); }
  .main-nav { font-size:.7rem; }
  .main-nav a { letter-spacing:.095em; }
}
.library-nav-link,
.header-library-shortcut {
  color:#ead5a6!important;
}
.library-nav-link::before,
.header-library-shortcut::before {
  content:"▣";
  margin-right:.45em;
  color:var(--gold);
  font-size:.78em;
}
.header-library-shortcut {
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 11px;
  border:1px solid rgba(183,155,100,.45);
  font:600 .66rem/1 "Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  letter-spacing:.1em;
  white-space:nowrap;
}
.header-library-shortcut:hover,
.header-library-shortcut:focus-visible { background:rgba(183,155,100,.13); }
.library-direct-button::after { content:" OTOBON Library"; margin-left:.55em; color:#c5aa70; font-size:.68em; letter-spacing:.08em; }

/* Author directory: stable compact tiles in explicit Japanese gojuon order. */
.author-directory {
  margin-top:64px;
  border-top:1px solid #c8bdac;
  border-left:1px solid #c8bdac;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.author-directory .author-directory-card {
  min-height:250px;
  padding:20px 20px 22px;
  border-right:1px solid #c8bdac;
  border-bottom:1px solid #c8bdac;
  display:grid;
  grid-template-columns:36px 1fr;
  grid-template-rows:auto 1fr auto auto;
  align-items:start;
  column-gap:14px;
  position:relative;
  background:rgba(255,255,255,.045);
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.author-directory .author-directory-card:first-child { border-left:0; }
.author-directory .author-directory-card.is-active:hover,
.author-directory .author-directory-card.is-active:focus-visible {
  background:var(--ink);
  color:#f4eee3;
  transform:translateY(-2px);
}
.author-directory .author-index {
  grid-column:1;
  grid-row:1;
  align-self:start;
  color:var(--vermillion);
  font:italic .67rem/1.2 Georgia,serif;
  letter-spacing:.08em;
}
.author-directory strong {
  grid-column:2;
  grid-row:1/3;
  margin:0;
  justify-self:center;
  align-self:center;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-size:1.42rem;
  line-height:1.45;
  letter-spacing:.15em;
  font-weight:400;
}
.author-directory .author-reading {
  grid-column:1;
  grid-row:2;
  align-self:end;
  writing-mode:vertical-rl;
  color:#8b8275;
  font:.58rem/1.5 "Hiragino Kaku Gothic ProN",sans-serif;
  letter-spacing:.05em;
}
.author-directory .author-status {
  grid-column:2;
  grid-row:3;
  justify-self:center;
  color:#615b52;
  font:.65rem/1.3 "Hiragino Kaku Gothic ProN",sans-serif;
  letter-spacing:.08em;
}
.author-directory .author-directory-card.is-active:hover .author-status,
.author-directory .author-directory-card.is-active:hover .author-reading { color:rgba(244,238,227,.6); }
.author-directory i {
  grid-column:2;
  grid-row:4;
  justify-self:center;
  margin-top:17px;
  color:var(--gold);
  font:1rem/1 Georgia,serif;
}
.author-directory .is-coming-soon {
  color:#6d685e;
  background:linear-gradient(145deg,rgba(232,223,207,.56),rgba(242,237,225,.2));
}
.author-directory .is-coming-soon strong { color:#4d4b45; }
.author-directory .construction-label {
  padding:5px 9px;
  border:1px solid rgba(128,55,46,.34);
  color:var(--vermillion);
  background:rgba(128,55,46,.045);
}
.author-directory .is-coming-soon em {
  grid-column:1/3;
  grid-row:4;
  justify-self:center;
  margin-top:13px;
  color:#8b8478;
  font:normal .57rem/1.4 "Hiragino Kaku Gothic ProN",sans-serif;
  letter-spacing:.08em;
}

@media (max-width:1100px) {
  .author-directory { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .author-directory { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:44px; }
  .author-directory .author-directory-card { min-height:220px; padding:17px 14px 18px; }
  .author-directory strong { font-size:1.23rem; }
  .header-library-shortcut { display:none; }
}
@media (max-width:440px) {
  .author-directory { grid-template-columns:1fr 1fr; }
}