:root {
 --bg:#fffaee; --white:#fff; --cream:#fff2cf; --ink:#24282b; --body:#41484c; --muted:#626c70;
 --mango:#ffcd38; --soft-yellow:#ffe07a; --gold:#c99018; --orange:#ef9a43; --sage:#7b9873;
 --mint:#85bbb1; --lilac:#998bb7; --night:#15191c; --border:rgba(77,67,41,.13);
 --shadow:0 14px 34px rgba(39,38,26,.09); --radius:16px;
}
*,*::before,*::after {box-sizing:border-box}
html {scroll-behavior:smooth;scroll-padding-top:86px}
body {margin:0;min-width:0;background:var(--bg);color:var(--body);font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;font-size:16px;line-height:1.74;overflow-wrap:anywhere}
body.drawer-open {overflow:hidden}
img,video {max-width:100%}
img {height:auto}
a {color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible {outline:3px solid #a87808;outline-offset:3px}
button,input {font:inherit}
button {cursor:pointer}
p {margin:0 0 1em}
h1,h2,h3,h4 {color:var(--ink);line-height:1.3;letter-spacing:-.025em;margin:0}
h1 {font-size:clamp(26px,3.5vw,36px);font-weight:850}
h2 {font-size:clamp(21px,2.5vw,26px);font-weight:800}
h3 {font-size:18px;font-weight:780}
.wrap {width:min(1240px,calc(100% - 40px));margin-inline:auto}
.sr-only {position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden;white-space:nowrap;clip-path:inset(50%)}
.skip-link {position:fixed;top:-100px;left:15px;background:var(--ink);color:#fff;padding:12px;z-index:120}
.skip-link:focus {top:10px}
.eyebrow {display:inline-flex;align-items:center;gap:8px;color:#84620e;font-size:13px;line-height:1.5;letter-spacing:.09em;font-weight:760;text-transform:uppercase}
.eyebrow::before {content:"";display:inline-block;width:14px;height:2px;background:var(--gold);flex-shrink:0}
.btn {min-height:46px;padding:10px 22px;display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:11px;font-size:14px;line-height:1.3;font-weight:800;transition:transform .2s,box-shadow .2s,background .2s;white-space:normal;text-align:center}
.btn:hover {transform:translateY(-2px)}
.btn-primary {background:var(--mango);color:#202428;box-shadow:0 7px 18px rgba(167,116,11,.14)}
.btn-primary:hover {background:#ffdc64}
.btn-ghost {background:#fff;border:1px solid #dbbc6a;color:#2b2f32}
.btn-night {color:var(--night);background:var(--soft-yellow)}
.text-link {font-size:14px;font-weight:800;color:#745008}
.section {margin-top:58px}
.section-tight {margin-top:40px}
.section-heading {display:flex;align-items:end;justify-content:space-between;gap:22px;margin-bottom:22px}
.section-heading h2 {margin-top:9px}
.section-heading>p {max-width:460px;margin:0;color:var(--muted);font-size:14px}
.panel {background:#fff;border:1px solid var(--border);border-radius:var(--radius)}
/* full-viewport header independent of content width */
.site-header {position:relative;z-index:31;width:100%;min-width:0;background:#fff;border-bottom:1px solid var(--border)}
.header-inner {min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand {display:inline-flex;align-items:center;min-width:135px;max-width:200px;flex-shrink:0}
.brand-logo {display:block;max-height:36px;width:auto;max-width:170px;object-fit:contain;object-position:left center;border:0;background:transparent}
.brand-text {display:flex;align-items:center;white-space:nowrap;gap:5px;color:var(--ink);font-size:20px;font-weight:950;letter-spacing:-.08em}
.brand-dot {width:10px;height:20px;background:var(--mango);border-radius:10px 2px 8px 2px;display:inline-block;transform:rotate(18deg);margin-right:2px}
.brand-en {font-size:9px;letter-spacing:.05em;align-self:flex-end;padding-bottom:6px;color:#8b751d;margin-left:3px}
.primary-nav {display:flex;align-items:center;gap:clamp(12px,1.7vw,27px);white-space:nowrap;flex-shrink:1}
.primary-nav a {display:flex;align-items:center;min-height:44px;font-weight:740;font-size:14px;color:#343c40;position:relative}
.primary-nav a:hover,.primary-nav a[aria-current=page] {color:#936c04}
.primary-nav a[aria-current=page]::after {position:absolute;content:"";background:var(--mango);height:3px;bottom:3px;left:15%;right:15%;border-radius:8px}
.header-actions {display:flex;align-items:center;gap:10px;flex-shrink:0}
.icon-action {width:44px;height:44px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #e9e4d8;color:var(--ink);background:#fff;position:relative}
.icon-action:hover {background:var(--cream)}
.search-shape {display:block;width:17px;height:17px;border:2px solid currentColor;border-radius:50%;position:relative;transform:translate(-2px,-2px)}
.search-shape::after {content:"";position:absolute;width:8px;height:2px;right:-6px;bottom:-3px;background:currentColor;transform:rotate(45deg);border-radius:4px}
.menu-bars {display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.menu-bars i {height:2px;width:20px;background:currentColor;border-radius:5px}
.menu-bars i:nth-child(2) {width:15px}
.mobile-experience {font-size:12px;color:#3b403b;font-weight:760;background:#ffe9a0;padding:9px 12px;border-radius:10px;white-space:nowrap}
.genre-strip {background:#fff5d8;border-bottom:1px solid #efdfaf;width:100%;min-width:0}
.genre-inner {display:flex;align-items:center;gap:30px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#e4c978 transparent;white-space:nowrap;min-height:43px}
.genre-inner a {font-size:13px;display:flex;align-items:center;flex:none;position:relative;min-height:43px;color:#565044;font-weight:650}
.genre-inner a:hover,.genre-inner a[aria-current=page] {color:#2a2923}
.genre-inner a[aria-current=page]::after {content:"";height:3px;left:26%;right:26%;bottom:0;position:absolute;background:#e6a91e;border-radius:4px}
.drawer-overlay {position:fixed;z-index:70;inset:0;background:rgba(18,21,23,.55);visibility:hidden;opacity:0;pointer-events:none;transition:opacity .25s,visibility .25s}
.site-drawer {position:fixed;z-index:71;top:0;right:0;bottom:0;width:min(390px,86vw);background:#fffaf0;box-shadow:-20px 0 70px rgba(0,0,0,.18);transform:translateX(105%);visibility:hidden;pointer-events:none;display:flex;flex-direction:column;transition:transform .26s,visibility .26s}
.drawer-open .drawer-overlay {opacity:1;visibility:visible;pointer-events:auto}
.drawer-open .site-drawer {transform:none;visibility:visible;pointer-events:auto}
.drawer-head {padding:24px 25px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);gap:12px}
.drawer-head b {display:block;color:var(--ink);font-size:22px;letter-spacing:-.05em}
.drawer-head span {display:block;color:var(--muted);font-size:13px}
.drawer-close {font-size:27px;font-weight:300;flex:none}
.drawer-content {padding:20px 25px 42px;overflow-y:auto;overscroll-behavior:contain}
.drawer-search {display:flex;gap:8px;background:#fff;padding:6px;border-radius:11px;border:1px solid #e2d6b3}
.drawer-search input {min-width:0;flex:1;border:0;outline:none;background:transparent;padding:8px;color:var(--ink);font-size:14px}
.drawer-search button {border:0;background:var(--mango);border-radius:8px;padding:8px 13px;font-weight:750;color:var(--ink)}
.drawer-group {padding:22px 0 4px;border-bottom:1px solid var(--border)}
.drawer-group h2 {font-size:15px;margin:0 0 12px}
.drawer-links {display:grid;grid-template-columns:1fr 1fr;gap:8px}
.drawer-links a {background:#fff;border:1px solid #eee4d1;border-radius:9px;font-size:13px;font-weight:650;display:flex;justify-content:space-between;gap:5px;align-items:center;min-height:42px;padding:7px 11px}
.drawer-links a:hover {background:var(--cream)}
/* Brand stage and images */
.hero {position:relative;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:35px;margin-top:30px;background:#fff5df;border:1px solid #f1dfa9;border-radius:23px;padding:24px 28px;overflow:hidden}
.hero::before {content:"";width:270px;height:270px;border-radius:50%;background:rgba(255,207,56,.28);position:absolute;top:-150px;left:-60px;pointer-events:none}
.hero-copy {position:relative;z-index:1}
.hero h1 {margin:14px 0 16px;font-size:clamp(30px,4vw,40px);letter-spacing:-.055em}
.hero .lede {max-width:525px;line-height:1.8;color:#424447;margin-bottom:22px}
.hero-actions {display:flex;gap:11px;flex-wrap:wrap}
.hero-stamp {display:flex;gap:14px;align-items:center;color:#725e24;font-size:12px;font-weight:750;margin-top:21px}
.hero-stamp span {display:inline-flex;gap:6px;align-items:center}
.hero-stamp span::before {content:"";width:5px;height:5px;border-radius:50%;background:#c19a38}
.media-slot {position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(126deg,#fff0c4,#f5d79a 50%,#f6bc80);border-radius:14px;min-width:0;isolation:isolate}
.media-slot img {display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;object-position:center;position:relative;z-index:2;background:transparent}
.media-art {position:absolute;inset:0;overflow:hidden;background:radial-gradient(circle at 20% 80%,rgba(255,255,255,.46),transparent 33%),linear-gradient(135deg,#ffe9a6,#f4c57d 55%,#e9a877)}
.media-art span {position:absolute;width:50%;aspect-ratio:1;top:-23%;right:-9%;border-radius:50%;border:34px solid rgba(255,255,255,.25)}
.media-art i {position:absolute;display:block;width:45%;height:70%;border:2px solid rgba(255,255,255,.4);transform:rotate(32deg);bottom:-48%;left:3%;border-radius:48%}
.media-art b {position:absolute;display:block;width:100%;height:32%;bottom:-17%;left:-10%;transform:rotate(-12deg);background:rgba(41,47,45,.09)}
.media-caption {z-index:1;position:absolute;bottom:15px;left:16px;right:12px;color:rgba(54,55,39,.61);font-size:10px;font-weight:900;letter-spacing:.11em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.media-caption em {font-style:normal;color:rgba(83,67,25,.65);font-weight:600}
.work-card:nth-child(3n+2) .media-art {background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.42),transparent 32%),linear-gradient(135deg,#e6e9c5,#a7c0af 65%,#8ead9e)}
.work-card:nth-child(3n) .media-art {background:radial-gradient(circle at 15% 70%,rgba(255,255,255,.4),transparent 33%),linear-gradient(135deg,#e8dcf2,#c2b8d3 55%,#e1c9bc)}
.work-card:nth-child(5n) .media-art {background:linear-gradient(135deg,#ffead2,#e7ad7d 55%,#f1d2a4)}
.hero-media {aspect-ratio:1.8/1;width:100%;border-radius:18px;background:#e6c676}
.hero-media .media-caption {font-size:13px;left:22px;bottom:19px}
/* works */
.work-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.work-card {min-width:0;border-radius:15px;background:#fff;border:1px solid var(--border);overflow:hidden;box-shadow:0 6px 18px rgba(39,38,26,.035);transition:transform .2s,box-shadow .2s}
.work-card:hover {transform:translateY(-3px);box-shadow:var(--shadow)}
.work-card-link {display:flex;flex-direction:column;height:100%}
.work-media {width:100%;aspect-ratio:1.42/1;border-radius:0}
.work-card-body {display:flex;flex:1;flex-direction:column;gap:8px;padding:16px 17px 17px}
.work-card .eyebrow {font-size:13px;letter-spacing:.01em;font-weight:600}
.work-card .eyebrow::before {width:10px}
.work-title {font-size:18px;line-height:1.38;font-weight:820;letter-spacing:-.01em;color:var(--ink)}
.work-summary {font-size:13px;line-height:1.68;color:#626c70;display:-webkit-box;line-clamp:3;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-bottom {margin-top:auto;padding-top:10px;display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap}
.status-tag {border-radius:7px;padding:4px 8px;font-size:13px;font-weight:760;background:#f7efd8;color:#6d5a30;line-height:1.5}
.work-card .text-link {font-size:13px}
.featured-grid {display:grid;grid-template-columns:minmax(0,1.24fr) minmax(0,1fr);gap:17px}
.featured-grid .feature-main .work-card-link {display:grid;grid-template-columns:1fr 1fr}
.featured-grid .feature-main .work-media {aspect-ratio:auto;min-height:330px}
.featured-grid .feature-main .work-card-body {padding:24px;justify-content:center;gap:15px}
.featured-grid .feature-main .work-summary {font-size:14px;-webkit-line-clamp:6}
.featured-grid .feature-main .work-title {font-size:24px}
.featured-minis {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}
.featured-minis .work-card-body {padding:10px 13px 12px;gap:5px}
.featured-minis .work-media {aspect-ratio:1.65/1}
.featured-minis .work-title {font-size:15px}
.featured-minis .work-summary {display:none}
.featured-minis .card-bottom {padding:0}
.featured-minis .status-tag {font-size:13px}
.featured-minis .text-link {font-size:13px}
.genre-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.genre-card {position:relative;min-height:129px;padding:21px 22px 18px;background:#fff;border-radius:13px;border:1px solid var(--border);display:flex;flex-direction:column;justify-content:space-between;gap:13px;overflow:hidden}
.genre-card::before {content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--accent,var(--mango))}
.genre-card:hover {border-color:#d3b875;background:#fffbf1}
.genre-card h3 {font-size:18px}
.genre-card p {font-size:13px;color:var(--muted);margin:0}
.genre-card .genre-arrow {position:absolute;right:18px;top:18px;color:var(--accent,var(--gold));font-size:22px}
.accent-sage {--accent:var(--sage)}.accent-purple {--accent:var(--lilac)}.accent-orange {--accent:var(--orange)}.accent-yellow {--accent:var(--mango)}.accent-mint {--accent:var(--mint)}
.reading-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.reading-card {padding:23px;border:1px solid var(--border);border-radius:15px;background:#fff;display:flex;flex-direction:column;gap:12px}
.reading-index {font-size:12px;font-weight:800;color:#a17b16;letter-spacing:.1em}
.reading-card h3 {font-size:20px}
.reading-card p {font-size:14px;color:var(--muted);flex:1;margin:0}
.reading-card a {font-weight:780;color:#80620d;font-size:14px}
.feature-story {display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:stretch}
.feature-story .media-slot {aspect-ratio:1.6/1}
.feature-story-copy {padding:28px;background:#fff;border:1px solid var(--border);border-radius:15px;display:flex;flex-direction:column;gap:13px}
.feature-story-copy h2 {font-size:26px}
.feature-story-copy p {font-size:14px;color:#596167}
.feature-story-copy ul {list-style:none;margin:5px 0 0;padding:0;display:grid;gap:7px}
.feature-story-copy li a {font-size:14px;font-weight:740;display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px dashed #ddd9c8}
.double-themes {display:grid;grid-template-columns:1.08fr .92fr;gap:20px}
.theme-panel {display:flex;flex-direction:column;padding:24px;background:#f8ecdc;border-radius:15px;border:1px solid #e8d7c3;gap:15px}
.theme-panel:nth-child(2) {background:#edf2e8;border-color:#d7e0cd}
.theme-panel .media-slot {aspect-ratio:2/1}
.theme-panel h3 {font-size:22px}
.theme-panel p {font-size:14px;margin:0}
.theme-panel .text-link {margin-top:auto}
.offset-pair {display:grid;grid-template-columns:.8fr 1.2fr;gap:20px;align-items:start}
.offset-story {padding:24px;border-radius:15px;background:#f4edff;border:1px solid #e2d6f1}
.offset-story:first-child {margin-top:34px;background:#f5efce;border-color:#e5ddbc}
.offset-story h3 {font-size:22px;margin:9px 0}
.offset-story p {font-size:14px;margin:0 0 14px}
.timeline {position:relative;display:grid;gap:0;max-width:980px}
.timeline::before {content:"";position:absolute;left:13px;top:11px;bottom:15px;width:2px;background:#e4c776}
.timeline-item {position:relative;padding:0 0 25px 45px}
.timeline-item::before {content:"";position:absolute;width:14px;height:14px;background:var(--mango);border:3px solid #fff;box-shadow:0 0 0 1px #d5b562;border-radius:100%;top:4px;left:7px}
.timeline-item .timeline-body {background:#fff;border:1px solid var(--border);padding:15px 19px;border-radius:12px;display:flex;justify-content:space-between;gap:20px;align-items:center}
.timeline-item strong {color:var(--ink)}.timeline-item p {font-size:13px;margin:5px 0 0}
.timeline-item small {color:#695725;background:#fff1cd;padding:5px 10px;border-radius:7px;white-space:nowrap}
.empty-library {padding:30px 35px;background:#fff;border:1px dashed #cfb977;border-radius:15px}
.empty-library h3 {font-size:23px;margin-bottom:11px}
.empty-library p {max-width:760px;font-size:14px;color:var(--muted)}
.process-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.process-card {padding:22px;background:#fff;border-radius:14px;border:1px solid var(--border)}
.process-num {display:block;font-size:13px;font-weight:850;color:#a48117;margin-bottom:16px;letter-spacing:.08em}
.process-card h3 {margin-bottom:8px}.process-card p {font-size:13px;margin:0;color:var(--muted)}
.characters {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.character-strip {padding:18px;background:#fff;border-radius:13px;border:1px solid var(--border);min-height:130px}
.character-strip b {display:inline-block;width:36px;height:36px;line-height:36px;text-align:center;border-radius:50%;background:#ffe7a4;color:#70530f;margin-bottom:8px}
.character-strip h3 {font-size:17px}.character-strip p {font-size:13px;margin:6px 0 0;color:#5f686c}
.picks-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.pick-card {padding:23px;border-radius:15px;background:#fff;border:1px solid var(--border)}
.pick-card .pick-number {color:#aa8120;font-size:13px;font-weight:800}
.pick-card h3 {font-size:19px;margin:18px 0 8px}.pick-card p {font-size:13px;color:var(--muted)}
.pick-card a {font-size:13px;font-weight:800;color:#75590d}
.mobile-feature {display:grid;grid-template-columns:.9fr 1.1fr;gap:25px;align-items:center;padding:32px;background:#e7f0e6;border:1px solid #d4e0d1;border-radius:19px}
.mobile-visuals {display:flex;gap:15px;align-items:center;min-height:290px}
.mobile-visuals .media-slot:first-child {width:58%;aspect-ratio:3/4}
.mobile-visuals .media-slot:last-child {width:32%;aspect-ratio:1/1}
.mobile-feature p {font-size:14px;margin-top:13px}.mobile-feature .btn {margin-top:6px}
.faq-brief {display:grid;grid-template-columns:1fr 1fr;gap:13px}
.faq-brief details {border:1px solid var(--border);background:#fff;border-radius:12px;padding:14px 18px}
.faq-brief summary {cursor:pointer;color:var(--ink);font-size:14px;font-weight:800}
.faq-brief p {font-size:13px;color:var(--muted);margin-top:11px}
.notice-strip {padding:23px 27px;border:1px solid #e5d3a8;background:#fffae9;border-radius:14px;display:flex;justify-content:space-between;align-items:center;gap:24px}
.notice-strip p {margin:0;font-size:14px}
/* Inner pages */
.page-lead {display:grid;grid-template-columns:minmax(0,1.2fr) minmax(230px,.8fr);align-items:center;gap:35px;margin-top:31px;padding:29px 32px;background:#fff4da;border:1px solid #f1dfb1;border-radius:19px;min-height:270px;overflow:hidden}
.page-lead h1 {margin:11px 0 15px}
.page-lead p {font-size:15px;line-height:1.85;margin:0;max-width:720px}
.page-lead-media {aspect-ratio:1.7/1;width:100%}
.lead-decor {border-radius:50%;width:min(220px,60%);aspect-ratio:1;margin:auto;border:22px solid rgba(255,208,63,.55);background:rgba(255,255,255,.4);display:flex;flex-direction:column;justify-content:center;align-items:center;color:#bd8c16}
.lead-decor span {font-size:98px;line-height:1;font-weight:950;letter-spacing:-.2em;margin-right:13px}.lead-decor small {font-size:9px;font-weight:800;letter-spacing:.09em}
.inner-layout {display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:28px;margin-top:36px;align-items:start}
.inner-primary {min-width:0}
.inner-sidebar {position:sticky;top:20px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:20px}
.inner-sidebar h2 {font-size:17px;margin-bottom:14px}
.inner-sidebar a {display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid #f1ecdf;font-size:13px;font-weight:650}
.inner-sidebar small {font-size:12px;color:var(--muted)}
.essay {padding:29px;background:#fff;border:1px solid var(--border);border-radius:15px;margin-bottom:23px}
.essay h2 {margin:10px 0 18px}
.essay p {line-height:1.88;margin-bottom:13px}
.essay p:last-child {margin-bottom:0}
.editorial-quote {position:relative;padding:27px 28px;background:#e7efe7;border-left:5px solid #779c77;border-radius:0 14px 14px 0;margin:18px 0 23px;font-size:17px;color:#334943;font-weight:670}
.editorial-quote.purple {background:#f0e9f5;border-color:#a391b9;color:#55445f}
.editorial-quote.orange {background:#fbeddc;border-color:#d89a57;color:#604a31}
.editorial-quote.night {background:var(--night);color:#fff3c7;border-color:var(--mango)}
.story-notes {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin:20px 0}
.note-tile {padding:20px;background:#fff;border:1px solid var(--border);border-radius:14px}
.note-tile strong {display:block;color:var(--ink);font-size:17px;margin-bottom:9px}
.note-tile p {font-size:14px;margin:0}
.topic-index {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.topic-index a {background:#fff;border:1px solid var(--border);border-radius:13px;padding:19px;display:flex;justify-content:space-between;gap:14px;font-weight:760}
.topic-index a span {color:#9b791d}
.related-links {display:flex;gap:10px;flex-wrap:wrap;margin-top:19px}
.related-links a {min-height:44px;display:inline-flex;align-items:center;gap:12px;padding:9px 15px;font-size:13px;font-weight:700;background:#fff;border:1px solid #e4d7b7;border-radius:9px}
.related-links a:hover {background:#fff0c3}
.channel-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.channel-grid .work-media {aspect-ratio:1.7/1}
.channel-grid .work-card-body {padding:20px}
.dark-feature {background:var(--night);border-radius:16px;padding:28px;color:#fafaf5;margin:20px 0}
.dark-feature h2,.dark-feature h3 {color:#fff6dc}.dark-feature p {color:#d6dad8}
.dark-feature .eyebrow {color:var(--soft-yellow)}
.clue-stack {display:grid;gap:10px;margin:20px 0}
.clue-row {display:grid;grid-template-columns:57px 1fr;gap:15px;align-items:start;border-radius:12px;background:#fff;padding:18px;border:1px solid var(--border)}
.clue-row b {width:46px;height:46px;border-radius:50%;background:#f0e3f9;display:flex;align-items:center;justify-content:center;color:#746280}
.clue-row h3 {margin:0 0 6px}.clue-row p {font-size:14px;margin:0}
.episode-list {display:grid;gap:11px}
.episode-item {display:flex;justify-content:space-between;align-items:center;gap:16px;border:1px solid var(--border);background:#fff;border-radius:12px;padding:17px 19px}
.episode-item .episode-number {font-size:13px;font-weight:780;letter-spacing:.06em;color:#a3790f}
.episode-item strong {display:block;font-size:16px;color:var(--ink)}
.episode-item p {font-size:13px;margin:5px 0 0;color:#626c70}
.episode-item .btn {flex-shrink:0}
.progress-card {display:grid;grid-template-columns:1fr auto;gap:15px;align-items:center;padding:18px 21px;margin:14px 0;border:1px solid var(--border);background:#fff;border-radius:12px}
.progress-card strong {color:var(--ink)}.progress-card p {margin:6px 0 0;font-size:13px}
.progress-card a {font-size:13px;font-weight:780;color:#7b5c06}
/* detail, search, playback */
.detail-shell {margin-top:30px}
.breadcrumbs {font-size:13px;color:#657174;margin-bottom:18px;display:flex;flex-wrap:wrap;gap:9px}
.breadcrumbs a:hover {color:#a67d12}
.detail-hero {display:grid;grid-template-columns:minmax(230px,.8fr) minmax(0,1.2fr);gap:30px;align-items:stretch;background:#fff;border:1px solid var(--border);padding:23px;border-radius:18px}
.detail-poster {aspect-ratio:3/3.7;width:100%;border-radius:12px}
.detail-summary {padding:8px 0}
.detail-summary h1 {margin:10px 0 15px}
.detail-summary>p {font-size:15px;margin-bottom:20px}
.detail-meta {display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.detail-meta span {padding:6px 11px;font-size:12px;font-weight:680;background:#f8f1dc;border-radius:7px;color:#665536}
.detail-actions {display:flex;gap:11px;flex-wrap:wrap}
.detail-description {display:grid;grid-template-columns:minmax(0,1.35fr) minmax(240px,.65fr);gap:22px;margin-top:25px}
.detail-description>.panel {padding:25px}
.detail-description h2 {margin-bottom:17px}.detail-description p {font-size:15px}
.cast-mini {display:grid;gap:11px}.cast-mini div {padding-bottom:12px;border-bottom:1px solid #eee9dc;font-size:14px}
.cast-mini strong {display:block;color:var(--ink)}
.episode-section {margin-top:38px}
.cinema {background:var(--night);border-radius:16px;padding:28px;margin:22px 0;color:#fafaf5}
.cinema h1,.cinema h2 {color:#fff}.cinema p {color:#dadcdd}
.cinema-frame {width:100%;border:1px solid #555c61;border-radius:12px;overflow:hidden;background:#0b0c0e;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}
.cinema-frame video {width:100%;height:100%;max-height:65vh;object-fit:contain;display:block}
.video-unavailable {display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column;gap:10px;padding:23px;width:100%;height:100%;background:radial-gradient(circle at 30% 30%,#3d403c,#111518 70%)}
.video-unavailable strong {color:#ffe07a;font-size:23px}.video-unavailable p {font-size:14px;max-width:520px;margin:0}
.play-backlinks {display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:17px}
.play-backlinks a {font-size:14px;color:#f9eebf;border:1px solid #72736e;padding:10px 13px;border-radius:9px;min-height:44px;display:inline-flex;align-items:center}
.search-form {display:flex;gap:10px;margin:22px 0 25px}
.search-form input {min-width:0;flex:1;background:#fff;border:1px solid #dccfa9;padding:11px 15px;border-radius:10px;color:var(--ink)}
.search-form button {border:0}
.search-note {font-size:14px;color:var(--muted)}
/* long-form and FAQ */
.text-layout {display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:30px;margin-top:30px;align-items:start}
.text-layout .essay {margin-bottom:18px}
.text-layout .essay ul,.essay ol {padding-left:22px;margin:13px 0}
.text-layout .essay li {margin-bottom:10px}
.long-copy {line-height:1.92;font-size:15px}
.long-copy p {margin:0 0 15px}
.faq-list {display:grid;gap:12px;margin-top:25px}
.faq-item {background:#fff;border:1px solid var(--border);border-radius:13px;padding:17px 21px}
.faq-item summary {font-weight:820;color:var(--ink);cursor:pointer;font-size:16px;line-height:1.55}
.faq-item p {font-size:14px;line-height:1.85;color:#4d565a;margin:13px 0 0}
.info-table {width:100%;border-collapse:collapse;margin:14px 0 20px}
.info-table th,.info-table td {padding:12px;text-align:left;border-bottom:1px solid #e5e0d5;font-size:14px}
.info-table th {background:#faf4df;color:var(--ink)}
.steps-list {list-style:none;padding:0;margin:0;display:grid;gap:12px;counter-reset:stage}
.steps-list li {position:relative;background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px 18px 18px 63px;counter-increment:stage}
.steps-list li::before {content:counter(stage,decimal-leading-zero);position:absolute;left:17px;top:18px;color:#8d690d;font-weight:850;font-size:15px}
.steps-list strong {display:block;color:var(--ink)}
.steps-list p {font-size:14px;margin:6px 0 0}
/* footer */
.site-footer {background:var(--night);color:#ebeeea;margin-top:70px;padding:48px 0 18px;border-top:4px solid var(--mango)}
.footer-main {display:grid;grid-template-columns:minmax(220px,.85fr) minmax(0,2.15fr);gap:50px}
.footer-name {font-size:25px;font-weight:950;color:#fff;letter-spacing:-.06em;display:inline-flex;gap:8px;align-items:baseline}
.footer-name span {font-size:10px;letter-spacing:.1em;color:#f8d365}
.footer-brand p {font-size:14px;color:#c4c9c6;line-height:1.82;margin-top:13px}
.footer-brand .footer-trust {font-size:13px;color:#aeb8b4}
.footer-navigation {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:19px}
.footer-col h2 {font-size:15px;color:#ffe07a;margin-bottom:16px;border-bottom:1px solid rgba(255,205,56,.22);padding-bottom:10px}
.footer-col a {display:block;font-size:13px;line-height:1.4;margin-bottom:14px;color:#cfd4d2}
.footer-col a:hover {color:#ffe07a}
.footer-bottom {display:flex;justify-content:space-between;gap:15px;border-top:1px solid #343a3a;padding-top:15px;margin-top:26px;color:#a6b0ac;font-size:13px}
.mobile-bottom {display:none}
@media (min-width:1460px) {.hero{min-height:370px}}
@media (max-width:1110px) {
 .header-inner {gap:10px}.primary-nav{gap:12px}.primary-nav a{font-size:13px}
 .mobile-experience{display:none}.brand{min-width:116px}.brand-text{font-size:18px}
 .featured-grid {grid-template-columns:1fr}.featured-grid .feature-main .work-card-link{grid-template-columns:.9fr 1.1fr}.feature-main .work-media{min-height:260px}
 .work-grid,.picks-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .footer-main {gap:28px}
}
@media (max-width:800px) {
 .primary-nav {display:none}
 .header-inner{min-height:66px}
 .genre-inner {gap:22px}
 .hero{grid-template-columns:1fr;gap:24px;padding:25px}
 .hero-media{max-height:350px}
 .genre-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .reading-grid,.process-grid,.characters {grid-template-columns:repeat(2,minmax(0,1fr))}
 .feature-story {grid-template-columns:1fr}
 .featured-grid .feature-main .work-card-link{grid-template-columns:.9fr 1.1fr}
 .offset-pair {grid-template-columns:1fr 1fr}
 .mobile-feature {grid-template-columns:1fr 1fr}
 .page-lead {grid-template-columns:1fr minmax(200px,.6fr);gap:18px;padding:26px}
 .inner-layout,.text-layout {grid-template-columns:1fr}
 .inner-sidebar {position:static;display:none}
 .footer-main{grid-template-columns:1fr}
 .footer-navigation {grid-template-columns:repeat(4,minmax(0,1fr))}
 .detail-description{grid-template-columns:1fr}
}
@media (max-width:600px) {
 html{scroll-padding-top:15px}
 body {font-size:15px;padding-bottom:calc(68px + env(safe-area-inset-bottom))}
 .wrap {width:calc(100% - 32px)}
 .site-header {width:100%;background:#fff}
 .header-inner {min-height:63px;gap:8px}
 .brand{min-width:0;max-width:calc(100% - 116px);flex:1}
 .brand-text{font-size:19px;gap:3px}.brand-en{font-size:8px;padding-bottom:5px}
 .brand-logo{max-width:136px;max-height:33px}
 .header-actions{gap:7px}
 .icon-action{width:44px;height:44px;flex-shrink:0}
 .genre-strip {width:100%}
 .genre-inner {min-height:41px;gap:20px}
 .genre-inner a{min-height:41px;font-size:13px}
 .section{margin-top:35px}.section-tight{margin-top:28px}
 .section-heading{align-items:flex-start;flex-direction:column;gap:7px;margin-bottom:15px}
 .section-heading>p{font-size:13px}
 .hero{margin-top:15px;padding:20px 17px;border-radius:16px;gap:18px}
 .hero h1{font-size:29px;margin:10px 0}.hero .lede{font-size:16px;margin-bottom:15px}
 .hero-stamp{gap:7px;flex-wrap:wrap;margin-top:12px;font-size:13px}
 .hero-media{aspect-ratio:1.65/1;border-radius:12px}
 .btn {min-height:44px;padding:11px 13px;font-size:13px}
 .hero-actions .btn{flex:1 1 135px}
 .featured-grid{gap:12px}.featured-grid .feature-main .work-card-link{display:flex;flex-direction:column}
 .featured-grid .feature-main .work-media{min-height:0;aspect-ratio:1.7/1}
 .featured-grid .feature-main .work-card-body{padding:18px;gap:9px}
 .featured-grid .feature-main .work-title{font-size:21px}
 .featured-minis{gap:10px}.featured-minis .work-title{font-size:14px}.featured-minis .work-card-body{padding:12px}
 .featured-minis .work-card .eyebrow{font-size:13px}
 .featured-minis .work-card .card-bottom{margin-top:4px}
 .work-grid,.genre-grid,.reading-grid,.process-grid,.characters,.channel-grid,.story-notes,.picks-grid,.faq-brief,.topic-index {grid-template-columns:1fr}
 .work-grid{gap:12px}
 .work-card-body{gap:8px}.work-media{aspect-ratio:1.74/1}
 .genre-card{min-height:0;gap:8px;padding:18px}
 .reading-card{padding:19px}
 .feature-story-copy{padding:19px}
 .double-themes,.offset-pair,.mobile-feature {grid-template-columns:1fr;gap:15px}
 .theme-panel{padding:18px}
 .offset-story:first-child{margin-top:0}
 .timeline-item .timeline-body{align-items:flex-start;flex-direction:column;gap:9px}
 .notice-strip{flex-direction:column;align-items:flex-start;gap:12px;padding:20px}
 .mobile-feature{padding:21px}
 .mobile-visuals{min-height:0;max-height:280px}
 .page-lead{margin-top:15px;grid-template-columns:1fr;min-height:0;gap:18px;padding:21px;border-radius:15px}
 .page-lead h1{font-size:27px;margin:10px 0}.page-lead p{font-size:16px}
 .page-lead-media{max-height:255px}
 .lead-decor{display:none}
 .inner-layout,.text-layout {margin-top:20px}
 .essay{padding:20px;margin-bottom:15px}.essay p{font-size:16px}
 .story-notes{margin:12px 0}.topic-index a{padding:16px}
 .detail-shell{margin-top:20px}
 .detail-hero{grid-template-columns:1fr;padding:14px;gap:16px}
 .detail-poster{aspect-ratio:1.6/1}
 .detail-summary{padding:0 5px 8px}
 .detail-summary h1{font-size:26px}
 .detail-summary>p{font-size:14px}
 .detail-description{margin-top:16px}.detail-description>.panel{padding:19px}
 .episode-item{flex-direction:column;align-items:stretch;gap:12px;padding:15px}
 .episode-item .btn{align-self:flex-start}
 .cinema {padding:14px;border-radius:12px}
 .cinema h1{font-size:23px}.cinema-frame{aspect-ratio:16/11}
 .video-unavailable strong{font-size:20px}
 .video-unavailable p{font-size:12px}
 .play-backlinks{justify-content:flex-start}
 .search-form {gap:8px}.search-form input{max-width:100%}
 .search-form button{padding:11px 14px}
 .progress-card {grid-template-columns:1fr;gap:8px}
 .steps-list li{padding-left:55px}
 .site-footer{margin-top:45px;padding-top:35px}
 .footer-main{gap:18px}.footer-navigation{grid-template-columns:repeat(2,minmax(0,1fr));gap:21px}
 .footer-bottom{flex-direction:column;gap:4px}
 .mobile-bottom {position:fixed;z-index:40;bottom:0;left:0;right:0;min-width:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;background:#fff;border-top:1px solid #e6decb;box-shadow:0 -8px 20px rgba(0,0,0,.04);height:calc(62px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}
 .mobile-bottom a{min-width:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;font-size:13px;font-weight:750;color:#74716d;min-height:54px}
 .mobile-bottom a span {font-size:24px;line-height:1.1}
 .mobile-bottom a[aria-current=page] {color:#9e760e}
 .site-drawer{width:86vw}
 .drawer-head {padding:18px}.drawer-content{padding:18px}
}
@media (max-width:350px) {
 .brand-text{font-size:17px}.brand-en{font-size:7px}
 .header-actions{gap:4px}
 .work-card .work-title{font-size:16px}
 .featured-minis .work-title{font-size:15px}
 .featured-minis .card-bottom{flex-direction:column;align-items:flex-start}
 .hero h1{font-size:26px}
 .hero-actions{gap:7px}
 .drawer-links {gap:5px}.drawer-links a{font-size:12px;padding:7px}
}
@media (prefers-reduced-motion:reduce) {html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}