:root {
  --cream: #FFFAEE;
  --cream-deep: #FFF2CF;
  --white: #FFFFFF;
  --paper: #F8F4E9;
  --dark: #15191C;
  --ink: #24282B;
  --text: #41484C;
  --muted: #626C70;
  --mango: #FFCD38;
  --yellow: #FFE07A;
  --gold: #C99018;
  --orange: #EF9A43;
  --sage: #7B9873;
  --mint: #85BBB1;
  --violet: #998BB7;
  --border: rgba(77,67,41,.13);
  --shadow: 0 14px 34px rgba(39,38,26,.09);
  --radius: 16px;
  --shell: 1240px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--cream); color: var(--text);
  font: 400 16px/1.75 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
  overflow-wrap: break-word;
}
img, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
a:hover { color: #8B6211; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid #B27511; outline-offset: 3px;
}
button { cursor: pointer; }
h1,h2,h3,h4,p,blockquote { margin-top: 0; }
h1,h2,h3,h4 { color: var(--ink); line-height: 1.3; letter-spacing: -.025em; }
h1 { font-size: clamp(29px, 3.2vw, 36px); }
h2 { font-size: clamp(22px, 2.5vw, 26px); }
h3 { font-size: 19px; }
p { margin-bottom: 1.05em; }
ul,ol { padding-left: 1.4em; }
small { font-size: 13px; }
.shell { width: min(var(--shell), calc(100% - 40px)); margin-inline: auto; min-width: 0; }
.skip-to {
  position: fixed; z-index: 500; top: 0; left: 16px; transform: translateY(-150%);
  background: var(--mango); padding: 10px 18px; border-radius: 0 0 10px 10px; font-weight: 700;
}
.skip-to:focus { transform: translateY(0); }
/* Header background belongs to the viewport, never to a narrowed content container. */
.site-header { width: 100%; background: #fff; position: relative; z-index: 80; }
.masthead { width: 100%; min-width: 0; background: #fff; border-bottom: 1px solid var(--border); }
.masthead-inner { height: 70px; display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }
.site-brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; line-height: 1.05; color: var(--ink); }
.site-brand:hover { color: var(--ink); }
.brand-image { display: block; max-width: 156px; width: auto; height: auto; max-height: 36px; object-fit: contain; object-position: center; }
.brand-mark {
  display: inline-flex; width: 37px; height: 37px; border-radius: 12px 12px 13px 5px;
  background: var(--mango); color: #25291e; justify-content: center; align-items: center;
  font-weight: 900; font-size: 20px; transform: rotate(-3deg);
}
.brand-word { white-space: nowrap; font-size: 21px; font-weight: 860; letter-spacing: -.045em; }
.brand-word > span { color: #AE7C14; margin-left: 2px; }
.brand-word small { display:block; font-size: 8px; letter-spacing: .31em; margin-top: 4px; color: #656967; }
.primary-nav { display: flex; align-items: stretch; justify-content: center; gap: 3px; flex: 1; align-self: stretch; min-width: 0; }
.primary-nav a {
  display: inline-flex; align-items: center; padding: 0 clamp(9px,1.45vw,18px); white-space: nowrap;
  color: #3C4347; font-size: 14px; font-weight: 680; border-bottom: 3px solid transparent;
}
.primary-nav a:hover, .primary-nav a.is-active { border-bottom-color: var(--mango); color: #1F2629; }
.header-actions { display:flex; align-items:center; gap: 7px; flex:0 0 auto; }
.icon-action {
  border: 1px solid var(--border); width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; justify-content:center; align-items:center; background:white; flex:0 0 44px; color:var(--ink);
}
.icon-action:hover, .drawer-close:hover { border-color: #C99018; background: #FFF7DD; color:var(--ink); }
.search-glyph { width: 17px; height: 17px; border: 2px solid currentColor; border-radius:50%; display:block; position:relative; transform: translate(-2px,-2px); }
.search-glyph:after { content:""; position:absolute; width:9px; height:2px; background:currentColor; border-radius: 2px; right:-7px; bottom:-4px; transform: rotate(47deg); }
.mobile-experience {
  background:#272D30; color: #FFF8E8; border-radius: 11px; font-size: 13px;
  font-weight:700; padding: 9px 15px; white-space:nowrap;
}
.mobile-experience:hover { background:#4A5358; color:#fff; }
.menu-glyph { display:flex; flex-direction:column; gap:4px; width:20px; }
.menu-glyph i { display:block; height:2px; width:20px; background:#353D40; border-radius: 4px; }
.menu-glyph i:nth-child(2) { width:14px; }
.genre-bar { width:100%; background:#FFF6E2; border-bottom:1px solid rgba(125,110,73,.11); }
.genre-track { display:flex; align-items:center; gap:clamp(16px,2.5vw,37px); height:44px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-inline:contain; scrollbar-width:none; }
.genre-track::-webkit-scrollbar { display:none; }
.genre-track a { display:flex; align-items:center; height:100%; white-space:nowrap; flex:0 0 auto; font-size:13px; color:#4D5050; font-weight:650; border-bottom:3px solid transparent; padding-top: 3px; }
.genre-track a:hover, .genre-track a.is-active { color: #292B23; border-bottom-color: var(--mango); }
.drawer-backdrop { position:fixed; inset:0; z-index:120; background:rgba(13,20,22,.57); visibility:hidden; opacity:0; pointer-events:none; transition:opacity .23s ease, visibility .23s ease; }
.channels-drawer {
  position:fixed; z-index:121; inset:0 0 0 auto; width:min(395px,86vw); display:flex; flex-direction:column;
  background:#FFFCF6; visibility:hidden; transform:translateX(105%); pointer-events:none;
  box-shadow: -20px 0 60px rgba(0,0,0,.14); transition:transform .25s ease,visibility .25s ease;
}
.menu-open { overflow:hidden; }
.menu-open .drawer-backdrop { visibility:visible; opacity:1; pointer-events:auto; }
.menu-open .channels-drawer { visibility:visible; transform:translateX(0); pointer-events:auto; }
.drawer-top { flex:0 0 auto; padding: 26px 25px 20px; border-bottom: 1px solid var(--border); display:flex; justify-content:space-between; gap:15px; align-items:center; }
.drawer-top strong { display:block; font-size:21px; margin-top:4px; color:var(--ink); }
.drawer-close { width:44px; height:44px; border-radius:12px; border:1px solid var(--border); background:white; color:var(--ink); font-size:28px; line-height:1; }
.drawer-scroll { overflow-y:auto; min-height:0; padding:10px 27px 35px; overscroll-behavior: contain; }
.drawer-scroll section { padding: 21px 0 16px; border-bottom:1px solid var(--border); }
.drawer-scroll h2 { font-size:14px; letter-spacing:.11em; margin-bottom: 10px; color:#8D6316; }
.drawer-scroll a { display:inline-flex; margin:5px 7px 5px 0; min-height:39px; align-items:center; padding: 6px 13px; border:1px solid var(--border); border-radius:9px; background:#fff; font-size:14px; font-weight:600; }
.drawer-scroll a:hover { background:#FFE9A4; color:#252829; }
/* Media: physical bitmap is printed only after PHP confirms the image exists. */
.media-frame { width:100%; overflow:hidden; background:#F7E8B8; position:relative; display:flex; align-items:center; justify-content:center; border-radius:inherit; }
.media-wide { aspect-ratio:16 / 9; }
.media-landscape { aspect-ratio:3 / 2; }
.media-poster { aspect-ratio:3 / 4; }
.media-phone { aspect-ratio:4 / 7; }
.media-square { aspect-ratio:1 / 1; }
.media-frame > img { display:block; width:100%; height:100%; object-fit:contain; object-position:center; background:#FAF5E9; }
.media-fallback { isolation:isolate; color:#624E25; background:linear-gradient(125deg,#FFF0BF,#F2D48E 60%,#F0B979); }
.media-fallback:before {
  content:""; position:absolute; width:45%; aspect-ratio:1; border-radius:35%; transform:rotate(23deg);
  top:-14%; right:-8%; background:rgba(255,255,255,.36); box-shadow:-43px 180px 0 rgba(255,255,255,.15);
}
.media-fallback:after {
  content:""; position:absolute; inset:auto auto 0 0; width:58%; height:25%;
  background:linear-gradient(180deg,transparent,rgba(74,57,39,.1)); clip-path:polygon(0 45%,80% 0,100% 100%,0 100%);
}
.media-ring { position:absolute; width:36%; aspect-ratio:1; border:13px solid rgba(255,255,255,.38); border-radius:50%; transform:rotate(-13deg); top:17%; left:15%; }
.media-spark { position:absolute; display:block; width:12px; height:12px; background:rgba(255,255,255,.76); transform:rotate(45deg); }
.media-spark-a { left:70%; top:26%; } .media-spark-b { width:7px; height:7px; top:57%; left:26%; }
.media-caption { position:absolute; left:8%; right:8%; bottom:10%; z-index:1; font-size:clamp(12px,1.55vw,17px); font-weight:800; letter-spacing:.04em; text-align:center; color:rgba(48,43,33,.76); }
.tone-sage { background:linear-gradient(135deg,#E9F0CF,#B3C8A6 65%,#8CA788); }
.tone-violet { background:linear-gradient(135deg,#F3E9FA,#C8B3DC 60%,#AF99BC); }
.tone-mint { background:linear-gradient(135deg,#E5F6ED,#B3D6CD 65%,#83B6AE); }
.tone-peach { background:linear-gradient(135deg,#FFF1DC,#F4C1AA 60%,#E9A27F); }
.tone-graphite { background:linear-gradient(135deg,#444C54,#262C34 60%,#171D22); color:#F8F0DB; }
.tone-graphite .media-caption { color:rgba(255,255,255,.88); }
/* Typography, layout systems */
.eyebrow { display:block; color:#966A15; font: 800 12px/1.5 -apple-system,BlinkMacSystemFont,Arial,sans-serif; letter-spacing:.15em; text-transform:uppercase; }
.section { padding-block: 52px; }
.section-alt { background:#FFF5DE; }
.section-white { background:white; }
.section-deep { background:var(--dark); color:#ECEBE4; }
.section-deep h2, .section-deep h3 { color:#FAFAF5; }
.section-deep .eyebrow { color: var(--yellow); }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:25px; margin-bottom:22px; }
.section-head h2 { margin:5px 0 0; }
.section-head p { max-width:710px; margin:6px 0 0; font-size:15px; color:var(--muted); }
.section-deep .section-head p, .section-deep .section-head { color:#E1E4E2; }
.section-head .text-link { flex:0 0 auto; }
.text-link { display:inline-flex; align-items:center; gap:9px; color:#775312; font-size:14px; font-weight:800; }
.text-link:hover { color:#382B0F; }
.section-deep .text-link { color:#FFE07A; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:11px 22px; gap:9px; text-align:center; border-radius:11px; font-size:14px; font-weight:780; line-height:1.4; transition:background .17s ease,transform .17s ease; }
.btn:hover { transform:translateY(-2px); }
.btn-primary { background:var(--mango); color:#202428; }
.btn-primary:hover { background:#FFDC5F; color:#202428; }
.btn-outline { background:#fff; color:#2B2F32; border:1px solid #D0AB54; }
.btn-outline:hover { background:#FFF8E9; color:#2B2F32; }
.btn-dark { background:#252B2E; color:#FFFCF2; }
.btn-dark:hover { background:#424A4E; color:white; }
.btn-row { display:flex; gap:10px; flex-wrap:wrap; }
.kicker-line { display:flex; align-items:center; gap:12px; font-size:13px; font-weight:750; color:#6A5C3D; }
.kicker-line:before { content:""; display:block; width:22px; height:3px; border-radius:3px; background:#EEB62D; }
.hero { padding:38px 0 31px; }
.hero-grid { display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); align-items:center; gap:34px; }
.hero-copy { padding:18px 0; }
.hero-copy h1 { max-width:590px; font-size:clamp(30px,3.45vw,40px); line-height:1.2; margin:12px 0 18px; }
.hero-copy .lead { color:#434D4F; max-width:580px; font-size:16px; line-height:1.86; }
.hero-art { position:relative; min-width:0; border-radius:21px; box-shadow:var(--shadow); }
.hero-art .media-frame { border-radius:21px; }
.hero-art:after { content:"原创故事 / AI辅助创作"; position:absolute; bottom:14px; right:14px; border-radius:9px; padding:5px 12px; font-size:12px; font-weight:720; background:rgba(26,33,34,.84); color:#FFF8E8; }
.hero-aside { display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin-top:21px; font-size:13px; color:#616B6A; }
.hero-aside span { display:inline-flex; align-items:center; }
.hero-aside span + span:before { content:""; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--sage); margin:0 10px 0 0; }
.story-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:17px; }
.story-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.story-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.story-card { min-width:0; border-radius:15px; overflow:hidden; border:1px solid var(--border); background:white; display:flex; flex-direction:column; }
.story-cover { display:block; overflow:hidden; background:var(--paper); }
.story-cover .media-frame { border-radius:0; }
.story-body { padding:17px 18px 19px; flex:1; display:flex; flex-direction:column; }
.story-meta { display:flex; gap:8px; flex-wrap:wrap; align-items:center; color:#687075; font-size:13px; line-height:1.6; margin-bottom:8px; }
.meta-dot { flex:0 0 3px; height:3px; background:#BBB8AB; border-radius:50%; }
.story-body h3 { margin:0 0 9px; font-size:18px; }
.story-body p { color:#50595B; font-size:14px; line-height:1.75; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:13px; }
.story-body .text-link { margin-top:auto; }
.story-card-compact { flex-direction:row; }
.story-card-compact .story-cover { width:42%; flex:0 0 42%; }
.story-card-compact .story-cover .media-frame { height:100%; min-height:170px; aspect-ratio:auto; }
.story-card-compact .story-body { padding:20px; }
.story-card-compact .story-body p { -webkit-line-clamp:2; }
.featured-stories { display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1.22fr); gap:17px; }
.featured-spotlight { background:#202628; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; color:#F8F3E8; min-width:0; }
.featured-spotlight .media-frame { border-radius:0; max-height:278px; }
.featured-spotlight .spotlight-body { padding:20px 24px 24px; display:flex; flex-direction:column; flex:1; }
.spotlight-highlights { display:grid; gap:14px; padding:15px 0; border-top:1px solid rgba(255,255,255,.16); margin-top:10px; }
.spotlight-highlights strong { display:block; font-size:13px; color:#FFE07A; margin-bottom:3px; }
.spotlight-highlights p { margin:0; font-size:13px; color:#D8E0DE; }
.spotlight-body > .text-link { margin-top:auto; padding-top:12px; }
.featured-spotlight .eyebrow { color:var(--yellow); }
.featured-spotlight h3 { color:#fff; font-size:23px; margin:10px 0 8px; }
.featured-spotlight p { font-size:14px; line-height:1.75; color:#E4E5E1; }
.featured-spotlight .text-link { color:var(--yellow); }
.featured-small { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.featured-small .story-cover .media-frame { aspect-ratio:16/10; }
.featured-small .story-body { padding:13px 16px 15px; }
.featured-small .story-body h3 { font-size:16px; }
.featured-small .story-body p { font-size:13px; -webkit-line-clamp:2; }
.genre-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.genre-tile { display:block; border-radius:13px; padding:20px 21px 19px; border:1px solid var(--border); background:#fff; min-height:147px; position:relative; overflow:hidden; }
.genre-tile:before { content:""; position:absolute; inset:0 auto 0 0; width:5px; background:var(--mango); }
.genre-tile.tone-violet:before { background:var(--violet); }.genre-tile.tone-peach:before{background:var(--orange);}
.genre-tile.tone-sage:before{background:var(--sage);}.genre-tile.tone-mint:before{background:var(--mint);}
.genre-tile.tone-graphite:before{background:#434F58;}
.genre-tile:hover { background:#FFF9EC; box-shadow:0 12px 20px rgba(36,39,33,.06); color:var(--ink); }
.genre-tile h3 { font-size:18px; margin:0 0 6px; }
.genre-tile p { margin:0 0 7px; color:#596165; font-size:14px; line-height:1.65; }
.genre-tile span { color:#876016; font-weight:800; font-size:13px; }
.horizontal-feature { display:grid; grid-template-columns:minmax(0,1.13fr) minmax(0,.87fr); gap:34px; align-items:center; }
.horizontal-feature.reverse { grid-template-columns:minmax(0,.87fr) minmax(0,1.13fr); }
.horizontal-feature.reverse >:first-child { order:2; }
.feature-visual { overflow:hidden; border-radius:18px; }
.feature-content h2 { margin:6px 0 12px; }
.feature-content p { max-width:570px; }
.feature-content .mini-list { display:grid; gap:10px; margin:19px 0; }
.mini-list a { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 15px; border-radius:11px; background:rgba(255,255,255,.86); border:1px solid var(--border); font-size:14px; font-weight:750; }
.mini-list a:hover { background:#FFEEBA; }
.mini-list a span { color:#9B711A; }
.section-deep .mini-list a { background:#252D30; border-color:rgba(255,255,255,.13); color:#ECEBE4; }
.section-deep .mini-list a:hover { background:#343F43; color:#fff; }
.double-feature { display:grid; grid-template-columns:1.16fr .84fr; gap:17px; }
.double-feature > article { min-width:0; border-radius:16px; overflow:hidden; background:#fff; border:1px solid var(--border); }
.double-feature .feature-visual .media-frame { border-radius:0; aspect-ratio:2.15 / 1; }
.double-feature .feature-content { padding:23px; }
.double-feature h3 { font-size:22px; margin-bottom:10px; }
.double-feature p { color:#51595C; font-size:15px; }
.double-feature > article:nth-child(2) { display:flex; flex-direction:column-reverse; }
.double-feature > article:nth-child(2) .feature-visual .media-frame { aspect-ratio:2 / 1; }
.dual-tone { display:grid; grid-template-columns:.91fr 1.09fr; gap:22px; }
.dual-tone > .tone-panel { border-radius:17px; padding:26px; min-width:0; }
.tone-panel-cream { background:#FFF1D8; }
.tone-panel-sage { background:#EAF1E3; }
.tone-panel-violet { background:#EFE8F7; }
.tone-panel-dark { background:#242D30; color:#F1F2EC; }
.tone-panel-dark h3 { color:#fff; }
.tone-panel h3 { font-size:22px; }
.tone-panel .media-frame { margin-bottom:18px; border-radius:12px; max-height:290px; }
.tone-panel p { font-size:15px; line-height:1.79; }
.timeline { border-left:2px solid #F0C868; margin:11px 0 0 11px; padding-left:28px; }
.timeline-item { position:relative; padding:0 0 19px; }
.timeline-item:last-child { padding-bottom:0; }
.timeline-item:before { content:""; position:absolute; left:-36px; top:9px; width:14px; height:14px; border-radius:50%; background:var(--mango); border:3px solid var(--cream); box-shadow:0 0 0 1px #E1BC59; }
.timeline-item .eyebrow { font-size:11px; }
.timeline-item h3 { font-size:16px; margin:4px 0 5px; }
.timeline-item p { color:#5E6668; font-size:14px; margin:0; }
.process-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.process-item { border-radius:14px; border:1px solid var(--border); background:white; padding:21px; }
.process-index { display:block; font-weight:900; font-size:30px; line-height:1; color:#B98215; margin-bottom:17px; }
.process-item h3 { margin-bottom:8px; }
.process-item p { font-size:14px; margin:0; }
.cast-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.cast-card { border:1px solid var(--border); border-radius:14px; background:white; padding:22px; }
.cast-avatar { width:52px; height:52px; background:linear-gradient(130deg,#FFEAB7,#C9DDC0); border-radius:17px; margin-bottom:14px; position:relative; overflow:hidden; }
.cast-avatar:after { content:""; position:absolute; width:23px; height:23px; background:rgba(255,255,255,.65); border-radius:50%; top:9px; left:14px; box-shadow:0 23px 0 8px rgba(255,255,255,.47); }
.cast-card h3 { margin-bottom:4px; }
.cast-card p { font-size:14px; margin-bottom:10px; }
.cast-card .text-link { font-size:13px; }
.related-links { display:flex; flex-wrap:wrap; gap:10px; margin-block:24px; }
.related-links a { padding:9px 13px; border-radius:9px; background:white; border:1px solid var(--border); font-size:14px; font-weight:710; }
.related-links a span { margin-left:10px; color:#A46C0D; }
.related-links a:hover { background:#FFF0CB; color:var(--ink); }
/* Inner pages: article tools and distinct editorial layouts */
.page-intro { padding-top:42px; padding-bottom:26px; }
.page-intro h1 { margin:10px 0 13px; }
.page-intro > p { max-width:930px; font-size:16px; line-height:1.82; color:#485155; margin:0; }
.page-intro + .section { padding-top:16px; }
.page-inner-section { padding-block:28px 42px; }
.page-inner-section:nth-of-type(2n) { background:#FFF4DC; }
.content-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.content-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.content-grid.four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.editor-panel { background:#fff; border:1px solid var(--border); border-radius:16px; padding:26px; min-width:0; }
.editor-panel h2 { margin:0 0 13px; }
.editor-panel h3 { margin:0 0 10px; }
.editor-panel p:last-child { margin-bottom:0; }
.editor-panel.small { padding:22px; }
.editor-panel .media-frame { border-radius:11px; margin:0 0 17px; }
.editor-panel .mini-list a { background:#FFF9E9; }
.prose { max-width:790px; }
.prose p { font-size:16px; line-height:1.83; }
.prose-wide { max-width:none; }
.story-inline { display:flex; align-items:center; gap:18px; border-radius:14px; border:1px solid var(--border); padding:18px; background:#fff; min-width:0; }
.story-inline > .media-frame { width:29%; flex:0 0 29%; border-radius:9px; }
.story-inline h3 { margin:3px 0 5px; }
.story-inline p { font-size:14px; margin:0 0 5px; }
.story-inline .text-link { font-size:13px; }
.essay-large { font-size:clamp(19px,2.25vw,25px); line-height:1.65; color:#3C4042; letter-spacing:-.015em; font-weight:580; }
.inline-marker { display:inline-flex; border-radius:6px; background:#FFF0C9; color:#876319; padding:3px 10px; font-size:13px; font-weight:750; }
.note-bar { border-left:4px solid #EEBC3F; background:#FFF4D5; border-radius:0 11px 11px 0; padding:18px 22px; }
.note-bar p { margin:0; }
.note-bar-dark { border-left-color:#FFE07A; background:#2B3437; color:#F8F4E9; }
.note-bar-dark p { color:#F8F4E9; }
.big-number { color:#B17B19; font-weight:850; font-size:34px; line-height:1; display:block; margin-bottom:14px; }
.scene-stops { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; counter-reset:stops; }
.scene-stop { background:white; border:1px solid var(--border); border-radius:15px; padding:25px 22px; position:relative; min-width:0; }
.scene-stop:before { counter-increment:stops; content:"0" counter(stops); display:block; color:#AA7724; font-weight:850; font-size:29px; margin-bottom:13px; }
.scene-stop h3 { font-size:19px; }
.scene-stop p { font-size:15px; }
.clue-board { background:#242A2E; color:#E3E5E2; border-radius:19px; padding:28px; }
.clue-board h2,.clue-board h3 { color:#FFF8E7; }
.clue-board .clue-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.clue-item { background:#333C40; border:1px solid #4C5559; border-radius:13px; padding:21px; }
.clue-item span { color:#FFE07A; font-size:13px; font-weight:750; }
.clue-item h3 { margin:8px 0; }
.clue-item p { margin:0; font-size:14px; color:#E5E6E1; }
.dark-cinema { background:#192024; color:#F1F0EA; border-radius:19px; padding:28px; }
.dark-cinema h2, .dark-cinema h3 { color:#fff; }
.dark-cinema p { color:#DFE5E3; }
.dark-cinema .note-bar { border-left-color:#FFE07A; background:#293339; }
.archive-strip { display:grid; grid-template-columns:1fr 2fr; gap:25px; padding:24px; border:1px solid var(--border); border-radius:15px; background:#fff; }
.archive-strip > .media-frame { border-radius:11px; }
.archive-strip h3 { font-size:22px; }
.archive-strip p { font-size:15px; }
.archive-strip + .archive-strip { margin-top:14px; }
.character-lines { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.character-line { background:#fff; border:1px solid var(--border); border-radius:13px; padding:19px; }
.character-line strong { display:block; color:var(--ink); }
.character-line span { display:block; color:#7C6535; font-size:13px; margin-top:4px; }
.character-line p { font-size:14px; margin:9px 0 0; }
.status-table { width:100%; border-collapse:collapse; background:white; border-radius:15px; overflow:hidden; }
.status-table th, .status-table td { padding:16px 15px; text-align:left; border-bottom:1px solid var(--border); font-size:14px; }
.status-table th { background:#FFF1CC; color:#2C3233; }
.status-table tbody tr:last-child td { border-bottom:0; }
.status-table a { font-weight:750; color:#815811; }
.status-table a:hover { text-decoration:underline; }
.badge-neutral { display:inline-block; font-size:13px; padding:4px 10px; border-radius:7px; background:#F3F0E8; color:#455054; }
.curated-row { border-radius:16px; background:#fff; border:1px solid var(--border); padding:27px; display:grid; grid-template-columns: 220px minmax(0,1fr); gap:24px; margin-bottom:15px; }
.curated-row:last-child { margin-bottom:0; }
.curated-row h2 { margin:0 0 10px; }
.curated-row .curated-tag { color:#956714; font-size:12px; font-weight:850; letter-spacing:.16em; }
.curated-row .curated-list { display:flex; flex-wrap:wrap; gap:10px; }
.curated-row .curated-list a { border-radius:9px; background:#FFF4D7; padding:9px 13px; font-size:14px; font-weight:750; }
.studio-steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; }
.studio-step { background:#fff; border:1px solid var(--border); border-radius:15px; padding:23px; display:grid; grid-template-columns:60px 1fr; gap:18px; }
.studio-step span { font-size:37px; font-weight:850; color:#B78014; line-height:1.15; }
.studio-step h3 { margin:1px 0 9px; }
.studio-step p { font-size:14px; margin:0; }
.studio-step .inline-marker { margin-top:12px; }
.episode-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.episode-tile { display:flex; flex-direction:column; align-items:start; gap:8px; min-width:0; padding:20px; border:1px solid var(--border); background:white; border-radius:13px; }
.episode-tile:hover { background:#FFF4D9; color:var(--ink); }
.episode-id { color:#936514; font-size:12px; font-weight:850; letter-spacing:.13em; }
.episode-tile strong { font-size:17px; color:var(--ink); }
.episode-line { font-size:14px; color:#596368; line-height:1.7; }
.episode-state { margin-top:auto; color:#775310; font-size:13px; font-weight:780; }
.detail-hero { display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:35px; align-items:start; }
.detail-hero .media-frame { border-radius:16px; }
.detail-hero .story-meta { margin:14px 0; }
.detail-hero p { max-width:820px; }
.detail-aside { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:19px 0; }
.detail-aside div { border-top:2px solid #EACA70; padding-top:10px; }
.detail-aside span { display:block; font-size:13px; color:#667075; }
.detail-aside strong { display:block; font-size:15px; color:#333B3D; }
.tag-list { display:flex; flex-wrap:wrap; gap:8px; padding:0; list-style:none; }
.tag-list li { display:inline-flex; font-size:13px; padding:5px 10px; color:#684B21; border:1px solid #E5C87C; border-radius:8px; }
.video-shell { background:#15191C; border-radius:18px; padding:22px; color:#F8F6EF; }
.video-shell video { width:100%; max-height:min(68vh,650px); background:black; border-radius:10px; }
.video-shell .missing-video { min-height:200px; border:1px dashed rgba(255,255,255,.25); border-radius:11px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:35px 22px; }
.missing-video .film-symbol { font-size:35px; color:#FFE07A; }
.missing-video strong { display:block; color:#fff; font-size:20px; margin:13px 0 3px; }
.missing-video p { color:#D4D9D6; margin:0; max-width:620px; }
.episode-pager { display:flex; justify-content:space-between; gap:10px; margin:20px 0; }
.episode-pager a { display:inline-flex; border:1px solid var(--border); background:#fff; border-radius:11px; padding:12px 14px; font-size:14px; font-weight:760; }
.episode-pager a:hover { background:#FFF0C4; }
.search-box { display:flex; gap:10px; margin:16px 0 21px; }
.search-box input { flex:1; min-width:0; padding:13px 16px; border:1px solid #C6BDB1; border-radius:11px; color:#292E30; background:white; font-size:16px; }
.search-box button { border:0; }
.search-help { font-size:14px; color:var(--muted); }
.faq-list { display:grid; gap:11px; }
.faq-list details { background:white; border:1px solid var(--border); border-radius:12px; padding:0 20px; }
.faq-list summary { cursor:pointer; font-size:16px; font-weight:730; color:#262E30; list-style:none; padding:19px 29px 19px 0; position:relative; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary:after { content:"+"; color:#926510; position:absolute; right:0; top:13px; font-size:25px; font-weight:400; }
.faq-list details[open] summary:after { content:"−"; }
.faq-list details p { padding-bottom:16px; margin:0; font-size:15px; }
.step-list { list-style:none; padding:0; counter-reset:steps; display:grid; gap:13px; }
.step-list li { display:grid; grid-template-columns:50px 1fr; gap:17px; align-items:start; background:#fff; border:1px solid var(--border); border-radius:14px; padding:20px; }
.step-list li:before { counter-increment:steps; content:counter(steps,decimal-leading-zero); color:#B47C13; font-size:25px; font-weight:850; }
.step-list h3 { margin:0 0 6px; }
.step-list p { margin:0; font-size:15px; }
.contact-roadmap { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.contact-roadmap .editor-panel p { font-size:15px; }
/* Site footer */
.site-footer { background:#15191C; color:#E1E4E0; margin-top:32px; padding:44px 0 25px; }
.footer-head { display:flex; gap:25px; justify-content:space-between; align-items:start; border-bottom:1px solid rgba(255,255,255,.14); padding-bottom:24px; }
.footer-brand { max-width:610px; }
.footer-brand-title { color:#FFDE72; font-size:25px; font-weight:850; }
.footer-brand-title span { color:white; font-size:16px; margin-left:7px; }
.footer-en { color:#EAD3A3; font-size:11px; letter-spacing:.19em; margin:3px 0 13px; }
.footer-brand p { font-size:14px; color:#D8DCDA; margin:0; }
.footer-side { font-size:23px; font-weight:750; color:#E4D6A6; line-height:1.45; padding-right:8px; }
.footer-nav { display:grid; grid-template-columns:repeat(4,1fr); gap:25px; padding:26px 0; }
.footer-nav h2 { color:#FFE07A; font-size:15px; margin:0 0 13px; }
.footer-nav a { display:block; font-size:13px; margin:6px 0; color:#D6DBD6; }
.footer-nav a:hover { color:#FFE07A; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; border-top:1px solid rgba(255,255,255,.14); padding-top:21px; font-size:13px; color:#C5CCC8; }
.mobile-bottom-nav { display:none; }
@media (max-width:1160px) {
  .primary-nav a { padding:0 10px; font-size:13px; }
  .mobile-experience { display:none; }
}
@media (max-width:1040px) {
  .primary-nav { display:none; }
  .masthead-inner { justify-content:space-between; }
  .featured-stories { grid-template-columns:1fr; }
  .featured-small { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .story-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .process-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .content-grid.four { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .genre-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:800px) {
  .hero-grid, .horizontal-feature, .horizontal-feature.reverse, .double-feature, .dual-tone, .detail-hero { grid-template-columns:1fr; }
  .horizontal-feature.reverse >:first-child { order:0; }
  .story-grid, .story-grid.three, .story-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .featured-small { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .genre-grid, .content-grid.three, .cast-grid, .clue-board .clue-grid, .scene-stops, .episode-grid, .contact-roadmap { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .archive-strip { grid-template-columns:1fr; }
  .archive-strip > .media-frame { max-height:280px; }
  .curated-row { grid-template-columns:160px minmax(0,1fr); }
  .footer-nav { grid-template-columns:repeat(2,1fr); }
  .section { padding-block:37px; }
  .hero { padding:24px 0 6px; }
  .hero-copy { padding:0; }
  .hero-art { max-width:100%; }
  .page-intro { padding:31px 0 23px; }
}
@media (max-width:600px) {
  .shell { width:calc(100% - 32px); }
  .masthead-inner { height:64px; gap:8px; }
  .brand-word { font-size:19px; }
  .brand-mark { width:33px; height:33px; font-size:18px; }
  .brand-image { max-width:125px; max-height:33px; }
  .header-actions { gap:6px; }
  .genre-track { height:41px; gap:23px; }
  .hero-copy h1 { font-size:29px; }
  .section-head { align-items:start; flex-direction:column; gap:10px; }
  .section-head p { font-size:14px; }
  .section-head .text-link { align-self:flex-start; }
  .section { padding-block:31px; }
  .story-grid, .story-grid.three, .story-grid.two, .featured-small, .content-grid, .content-grid.three, .content-grid.four,
  .dual-tone, .genre-grid, .scene-stops, .clue-board .clue-grid, .cast-grid, .episode-grid,
  .contact-roadmap, .studio-steps, .character-lines { grid-template-columns:1fr; }
  .story-grid .story-card { display:grid; grid-template-columns:minmax(0,120px) minmax(0,1fr); }
  .story-grid .story-cover { width:auto; min-width:0; }
  .story-grid .story-cover .media-frame { aspect-ratio:3 / 4; height:100%; }
  .story-grid .story-body { padding:15px; }
  .story-grid .story-body h3 { font-size:16px; }
  .story-grid .story-body p { font-size:13px; -webkit-line-clamp:2; }
  .story-grid .story-body .story-meta { font-size:12px; }
  .featured-small .story-card { display:grid; grid-template-columns:minmax(0,115px) minmax(0,1fr); }
  .featured-small .story-cover .media-frame { height:100%; aspect-ratio:3/4; }
  .featured-spotlight .media-frame { max-height:240px; }
  .genre-tile { min-height:0; padding:17px 18px; }
  .genre-tile h3 { font-size:17px; }
  .genre-tile p { font-size:13px; }
  .process-grid { grid-template-columns:1fr; }
  .process-item { padding:19px; }
  .editor-panel { padding:20px; }
  .footer-side { display:none; }
  .footer-nav { gap:13px; }
  .footer-bottom { flex-direction:column; gap:4px; }
  .site-footer { padding-bottom:108px; }
  .mobile-bottom-nav { position:fixed; z-index:90; bottom:0; left:0; right:0; display:grid; grid-template-columns:repeat(4,1fr); background:rgba(255,255,255,.98); border-top:1px solid #E3DBD0; padding:5px 0 calc(6px + env(safe-area-inset-bottom)); box-shadow:0 -5px 18px rgba(31,32,20,.04); }
  .mobile-bottom-nav a { min-height:55px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; color:#555E60; font-size:12px; font-weight:700; }
  .mobile-bottom-nav a[aria-current="page"] { color:#9B6913; }
  .mobile-nav-symbol { display:block; font-size:23px; line-height:1.2; }
  .page-intro h1 { font-size:26px; }
  .page-intro > p { font-size:16px; }
  .detail-aside { grid-template-columns:1fr; }
  .detail-hero >.media-frame { max-width:320px; }
  .story-inline { align-items:start; }
  .story-inline > .media-frame { width:33%; flex-basis:33%; }
  .archive-strip { padding:16px; }
  .curated-row { grid-template-columns:1fr; gap:8px; padding:21px; }
  .video-shell { padding:10px; }
  .video-shell .missing-video { min-height:190px; }
  .episode-pager { flex-wrap:wrap; }
  .status-table { display:block; overflow-x:auto; }
  .status-table th, .status-table td { min-width:100px; }
  .footer-brand-title { font-size:23px; }
}
@media (max-width:360px) {
  .masthead-inner { gap:5px; }
  .header-actions { gap:5px; }
  .icon-action { width:42px; height:44px; flex-basis:42px; }
  .brand-word { font-size:18px; }
  .brand-mark { width:30px; height:30px; font-size:16px; border-radius:9px; }
  .site-brand { gap:6px; }
  .brand-image { max-width:112px; }
  .story-grid .story-card { grid-template-columns:98px minmax(0,1fr); }
  .featured-small .story-card { grid-template-columns:98px minmax(0,1fr); }
  .story-body .story-meta { gap:5px; }
  .story-body { padding:12px; }
  .hero-copy h1 { font-size:27px; }
  .studio-step { grid-template-columns:42px 1fr; gap:12px; padding:17px; }
  .studio-step span { font-size:29px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *:before, *:after { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}