/* =========================================================
   成人短剧 | Cinema index visual system
   Midnight graphite + muted berry + mist blue-violet
   All content is served as HTML; responsive layout only.
   ========================================================= */
:root {
  color-scheme: dark;
  --bg: #191821;
  --deep: #15141D;
  --surface: #25232F;
  --surface-raised: #2c2936;
  --surface-dim: #201e29;
  --berry: #A54568;
  --berry-light: #d4819d;
  --blue: #8994C6;
  --blue-light: #b9c3eb;
  --gold: #E7B877;
  --text: #F2EFF5;
  --muted: #B3AEBD;
  --subtle: #8a8595;
  --line: rgba(234,224,244,.12);
  --line-strong: rgba(234,224,244,.21);
  --container: 1320px;
  --side: clamp(20px, 4.8vw, 78px);
  --ease: cubic-bezier(.2,.7,.2,1);
  font-family: "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, -apple-system, sans-serif;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background: var(--bg); color:var(--text); min-width: 320px; line-height:1.65; font-size: 15px; }
body::selection { color: #fff; background: var(--berry); }
img { max-width: 100%; display: block; }
a { text-decoration:none; color:inherit; }
button, input, select, textarea { font:inherit; }
button { cursor:pointer; }
:where(a,button):focus-visible { outline: 2px solid var(--gold); outline-offset:4px; }
:where(h1,h2,h3,h4,p) { margin-top:0; }
:where(h1,h2,h3) { line-height:1.24; letter-spacing:-.035em; }
:where(p) { line-height:1.86; }
:where(ul,ol) { padding-left:1.4em; }
[hidden] { display:none !important; }
.container { max-width:calc(var(--container) + 2 * var(--side)); margin-inline:auto; padding-inline:var(--side); }
.skip-link { position:absolute; z-index:110; top:-60px; left:20px; background:var(--gold); padding:9px 16px; color:var(--deep); }
.skip-link:focus { top:12px; }
::selection { background:rgba(165,69,104,.75); color:white; }
/* Shared header: quiet, thin, persistently readable. */
.site-header { position:relative; z-index:30; background:rgba(21,20,29,.97); border-bottom:1px solid var(--line); }
.header-bar { min-height:89px; display:flex; align-items:center; gap:clamp(22px,3vw,55px); }
.brand { display:inline-flex; align-items:center; gap:12px; min-width:fit-content; }
.brand img { width:42px; height:42px; border-radius:5px; object-fit:contain; color:var(--muted); }
.brand strong { font-size:21px; letter-spacing:.065em; font-weight:750; line-height:1.2; display:block; }
.brand small { display:block; color:var(--subtle); letter-spacing:.19em; font-size:8px; margin-top:4px; line-height:1.3; font-weight:650; }
.brand:hover strong { color:#fff; }
.primary-nav { display:flex; align-items:center; gap:clamp(18px,2.7vw,42px); margin-left:clamp(18px,4vw,82px); }
.primary-nav a { position:relative; display:inline-flex; align-items:center; min-height:89px; color:#c9c4d0; white-space:nowrap; font-size:13px; font-weight:650; transition:color .18s ease; }
.primary-nav a:hover, .primary-nav a[aria-current="page"] { color:#fff; }
.primary-nav a::after { content:""; position:absolute; bottom:0; height:2px; background:var(--berry); left:0; right:100%; transition:right .24s var(--ease); }
.primary-nav a:hover::after, .primary-nav a[aria-current="page"]::after { right:0; }
.header-note { margin-left:auto; padding-left:20px; font-size:11px; color:var(--subtle); letter-spacing:.1em; white-space:nowrap; }
.menu-button { display:none; appearance:none; border:1px solid var(--line); width:42px; height:42px; background:var(--surface); border-radius:4px; align-items:center; justify-content:center; flex-direction:column; gap:5px; padding:10px; }
.menu-button span { width:19px; display:block; border-top:1.5px solid var(--text); transition:transform .2s ease,opacity .2s ease; }
.menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-button[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.mobile-nav { display:none; }
/* Headers and content typography */
.section-index { margin:0 0 18px; display:flex; align-items:center; gap:13px; font-size:10px; font-weight:750; letter-spacing:.19em; line-height:1.4; text-transform:uppercase; color:var(--gold); }
.section-index.cool { color:var(--blue-light); }
.status-dot { width:5px; height:5px; display:inline-block; background:var(--berry-light); border-radius:100%; box-shadow:0 0 0 5px rgba(165,69,104,.12); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:26px; }
.section-heading h2 { max-width:720px; font-size:clamp(25px,2.6vw,37px); font-weight:750; margin:0; }
.section-heading .section-index { margin-bottom:12px; }
.section-aside { margin:0 0 3px; color:var(--muted); font-size:13px; }
.section-more { display:inline-flex; align-items:center; gap:18px; color:#eee9f0; border-bottom:1px solid rgba(231,184,119,.6); padding:0 0 8px; white-space:nowrap; font-size:12px; font-weight:650; transition:color .2s,border-color .2s; }
.section-more:hover { color:var(--gold); border-color:var(--gold); }
.section-more span { color:var(--gold); font-size:17px; }
.text-arrow { display:inline-flex; align-items:center; gap:12px; color:var(--gold); font-size:13px; font-weight:680; transition:gap .18s var(--ease); }
.text-arrow:hover { gap:19px; }
.meta { color:var(--muted); font-size:11px; font-weight:650; letter-spacing:.065em; }
.label-pill { color:#d7dffe; border:1px solid rgba(137,148,198,.4); background:rgba(137,148,198,.1); display:inline-flex; width:fit-content; border-radius:3px; padding:7px 10px; letter-spacing:.075em; font-size:10px; font-weight:700; }
/* HOME: hero built from work information, not a decorative banner */
.home-intro { padding-top:62px; display:grid; grid-template-columns:minmax(340px,.95fr) minmax(0,1.16fr); gap:clamp(35px,5.4vw,82px); align-items:center; }
.intro-copy { padding:18px 0 38px; }
.intro-copy h1 { font-weight:780; font-size:clamp(36px,3.8vw,59px); letter-spacing:-.055em; line-height:1.3; max-width:640px; margin:0 0 25px; }
.intro-copy h1 span { display:block; color:#c2bdcb; font-size:.68em; font-weight:490; margin-top:8px; letter-spacing:-.04em; line-height:1.36; }
.intro-lead { color:#c6c1ce; font-size:15px; line-height:2.05; max-width:495px; margin-bottom:27px; }
.intro-links { border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); max-width:500px; }
.line-link { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:54px; color:#e3dde8; font-size:13px; font-weight:650; }
.line-link + .line-link { border-top:1px solid var(--line); }
.line-link span { font-size:18px; color:var(--gold); transition:transform .18s ease; }
.line-link:hover { color:var(--gold); }
.line-link:hover span { transform:translate(3px,-3px); }
.intro-feature { min-width:0; }
.feature-image { display:block; position:relative; aspect-ratio:1.29; border-radius:4px; overflow:hidden; background:linear-gradient(145deg,#3b2839,#171720); }
.feature-image::after { content:""; position:absolute; inset:38% 0 0; background:linear-gradient(transparent,rgba(16,11,24,.75)); pointer-events:none; }
.feature-image img { width:100%; height:100%; object-fit:cover; transition:transform .75s var(--ease); }
.feature-image:hover img { transform:scale(1.04); }
.feature-float { position:absolute; bottom:23px; left:24px; right:24px; display:flex; justify-content:space-between; gap:10px; z-index:2; font-size:11px; letter-spacing:.18em; color:#fff; font-weight:700; }
.feature-float b { color:var(--gold); font-size:11px; font-weight:700; }
.feature-copy { padding:21px 2px 0; display:grid; grid-template-columns:1.1fr 1fr; column-gap:20px; align-items:center; }
.feature-copy .meta { grid-column:1 / -1; }
.feature-copy h2 { font-size:27px; margin:9px 0 0; }
.feature-copy h2 a:hover { color:var(--gold); }
.feature-copy p { color:var(--muted); font-size:12px; margin:10px 0 0; line-height:1.7; }
/* Continuous film index of core stories */
.home-shelf { padding-top:86px; padding-bottom:92px; }
.story-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:17px; }
.work-card { min-width:0; }
.work-card__image { aspect-ratio: .76; overflow:hidden; position:relative; display:block; background:linear-gradient(145deg,var(--surface-raised),var(--deep)); border-radius:3px; }
.work-card__image::after { content:""; inset:35% 0 0; position:absolute; background:linear-gradient(transparent,rgba(10,8,14,.46)); pointer-events:none; opacity:.75; }
.work-card__image img { width:100%; height:100%; object-fit:cover; transition:transform .65s var(--ease),filter .65s var(--ease); }
.work-card__image:hover img { transform:scale(1.065); filter:saturate(1.1); }
.work-card__view { position:absolute; z-index:2; bottom:12px; right:13px; font-size:21px; line-height:1; color:white; background:rgba(20,18,28,.65); padding:7px 10px; border:1px solid rgba(255,255,255,.2); border-radius:2px; opacity:0; transform:translateY(7px); transition:opacity .2s,transform .2s; }
.work-card__image:hover .work-card__view, .work-card__image:focus-visible .work-card__view { opacity:1; transform:translateY(0); }
.work-card__body { padding:13px 2px 4px; }
.work-card__body h3 { font-size:19px; margin:8px 0 7px; font-weight:730; }
.work-card__body h3 a:hover { color:var(--gold); }
.work-card__body p { margin:0; color:var(--muted); font-size:12px; line-height:1.8; }
/* Thematic narrative band: small dense editorial columns */
.narrative-band { padding:73px 0 81px; background:var(--deep); border-block:1px solid var(--line); }
.narrative-layout { display:grid; grid-template-columns:minmax(240px,.82fr) minmax(0,1.8fr); gap:clamp(40px,6vw,100px); }
.narrative-layout h2 { max-width:410px; font-size:clamp(25px,2.7vw,38px); line-height:1.4; }
.narrative-points { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.7vw,38px); }
.narrative-points article { padding-top:10px; border-top:1px solid var(--line-strong); }
.narrative-points span { display:block; color:var(--berry-light); font-weight:800; letter-spacing:.1em; font-size:12px; margin-bottom:23px; }
.narrative-points h3 { font-size:17px; margin-bottom:15px; font-weight:680; line-height:1.55; }
.narrative-points p { color:var(--muted); font-size:12px; margin:0; line-height:1.95; }
/* AI spotlight with horizontal cinematic frame */
.ai-highlight { padding-top:99px; padding-bottom:104px; }
.ai-split { display:grid; grid-template-columns:minmax(0,1.37fr) minmax(300px,.83fr); gap:0; background:var(--surface); border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.ai-cover { display:block; min-width:0; min-height:360px; overflow:hidden; background:#1c2233; }
.ai-cover img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.ai-cover:hover img { transform:scale(1.035); }
.ai-highlight-copy { padding:clamp(27px,3.6vw,58px); display:flex; flex-direction:column; justify-content:center; }
.ai-highlight-copy h3 { font-size:clamp(24px,2.5vw,37px); margin:23px 0 16px; }
.ai-highlight-copy h3 a:hover { color:var(--blue-light); }
.ai-highlight-copy > p { font-size:13px; color:#cbc7d6; line-height:2.0; margin-bottom:22px; }
.small-divider { border-top:1px solid var(--line-strong); margin:34px 0 22px; }
.ai-highlight-copy .mini-heading { color:var(--subtle); font-size:11px; font-weight:700; margin-bottom:8px; letter-spacing:.08em; }
.related-row { display:flex; justify-content:space-between; align-items:center; gap:10px; font-weight:700; font-size:15px; }
.related-row small { color:var(--muted); font-size:11px; display:block; margin-top:5px; font-weight:450; }
.related-row > span:last-child { color:var(--blue-light); }
.related-row:hover { color:var(--blue-light); }
/* Lower-weight comic inset */
.compact-feature { display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(40px,6vw,90px); align-items:center; padding-top:32px; padding-bottom:110px; }
.compact-feature h2 { font-size:clamp(27px,2.8vw,41px); margin-bottom:18px; max-width:520px; }
.compact-feature p:not(.section-index) { font-size:14px; color:var(--muted); max-width:480px; line-height:2; margin:0 0 25px; }
.compact-art { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.compact-art a { aspect-ratio:.79; overflow:hidden; display:block; background:var(--surface); border-radius:3px; }
.compact-art img { height:100%; width:100%; object-fit:cover; transition:transform .65s var(--ease); }
.compact-art a:hover img { transform:scale(1.045); }
.editorial-note { padding-bottom:64px; display:flex; align-items:baseline; gap:25px; }
.editorial-note span { white-space:nowrap; font-size:9px; color:var(--subtle); letter-spacing:.16em; font-weight:700; }
.editorial-note p { border-left:1px solid var(--line-strong); color:var(--subtle); font-size:11px; line-height:1.8; padding-left:20px; margin:0; }
/* Inner collections */
.breadcrumbs { color:var(--subtle); margin-bottom:44px; }
.breadcrumbs ol { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.breadcrumbs li { font-size:11px; display:inline-flex; align-items:center; gap:10px; }
.breadcrumbs li:not(:last-child)::after { content:'／'; color:#565260; }
.breadcrumbs a:hover { color:var(--gold); }
.breadcrumbs [aria-current="page"] { color:#d4d0d9; }
.collection-head { padding-top:44px; padding-bottom:62px; }
.collection-title-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(260px,.68fr); gap:clamp(40px,7vw,120px); align-items:end; }
.collection-title-grid h1, .comic-head h1 { font-size:clamp(40px,4.2vw,64px); letter-spacing:-.055em; line-height:1.28; margin:0; }
.collection-title-grid h1 span, .comic-head h1 span { color:#bdb7c8; display:block; font-size:.55em; line-height:1.5; letter-spacing:-.035em; font-weight:500; margin-top:13px; }
.collection-title-grid > p { color:var(--muted); font-size:14px; margin:0 0 3px; line-height:2.05; }
.collection-spotlight { display:grid; grid-template-columns:minmax(0,1.28fr) minmax(270px,.72fr); gap:clamp(28px,4.5vw,73px); align-items:center; padding-bottom:110px; }
.spotlight-visual { overflow:hidden; border-radius:3px; background:#242535; }
.spotlight-visual a { display:block; aspect-ratio:1.25; }
.spotlight-visual img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.spotlight-visual a:hover img { transform:scale(1.045); }
.spotlight-text { padding:12px 0; }
.spotlight-text .large-index { font-size:62px; line-height:1; font-weight:760; letter-spacing:-.08em; margin:35px 0 21px; color:var(--blue-light); }
.large-index span { font-size:15px; color:var(--subtle); letter-spacing:normal; font-weight:450; }
.spotlight-text h2 { font-size:clamp(29px,3vw,45px); margin-bottom:20px; }
.spotlight-text h2 a:hover { color:var(--blue-light); }
.spotlight-text > p:not(.large-index) { color:var(--muted); font-size:14px; margin:0 0 21px; line-height:2; }
.spotlight-facts { display:flex; flex-direction:column; gap:7px; border-left:2px solid var(--blue); padding-left:15px; margin:26px 0 25px; color:#c9c5d3; font-size:12px; }
.ai-second { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(35px,6vw,90px); align-items:center; background:var(--deep); padding-top:75px; padding-bottom:75px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.ai-second h2 { font-size:clamp(27px,3vw,44px); margin-bottom:17px; }
.ai-second p:not(.section-index) { color:var(--muted); font-size:14px; line-height:2; max-width:520px; margin-bottom:23px; }
.ai-second > a { display:block; aspect-ratio:1.5; overflow:hidden; border-radius:3px; }
.ai-second img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.ai-second a:hover img { transform:scale(1.04); }
.comparison-note { padding-top:90px; padding-bottom:105px; }
.comparison-note h2 { font-size:clamp(25px,2.7vw,38px); margin-bottom:40px; }
.comparison-grid { display:grid; grid-template-columns:1fr 1fr; gap:23px; }
.comparison-grid article { background:var(--surface); border:1px solid var(--line); padding:36px 38px; border-radius:3px; }
.comparison-grid article span { color:var(--blue-light); font-size:11px; font-weight:700; letter-spacing:.1em; }
.comparison-grid h3 { margin:20px 0 15px; font-size:21px; }
.comparison-grid p { margin:0; color:var(--muted); font-size:13px; line-height:1.95; }
.inline-back { display:flex; gap:28px; padding-top:35px; }
.inline-back a { font-size:13px; color:#dfd8e7; }
.inline-back a:hover { color:var(--gold); }
.inline-back span { color:var(--gold); }
/* Comics: frames have distinct vertical rhythm */
.comic-head { padding-top:44px; padding-bottom:58px; max-width:calc(1100px + 2 * var(--side)); }
.comic-head > p:last-child { margin:25px 0 0; font-size:14px; line-height:2.05; max-width:790px; color:var(--muted); }
.comic-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(26px,4vw,64px); padding-bottom:102px; }
.comic-feature { min-width:0; }
.comic-feature:nth-child(2) { padding-top:90px; }
.comic-visual { display:block; aspect-ratio:1.14; overflow:hidden; background:var(--surface); border-radius:3px; }
.comic-visual img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.comic-visual:hover img { transform:scale(1.045); }
.comic-caption { padding:28px 6px 0; }
.comic-caption h2 { font-size:clamp(27px,3vw,42px); margin:10px 0 16px; }
.comic-caption h2 a:hover { color:var(--blue-light); }
.comic-caption p { color:var(--muted); font-size:13px; line-height:2; max-width:530px; margin-bottom:19px; }
.comic-afterword { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:clamp(45px,7vw,100px); border-top:1px solid var(--line); padding-top:74px; padding-bottom:110px; }
.comic-afterword h2 { font-size:clamp(25px,2.8vw,39px); }
.comic-afterword > div:last-child p { color:var(--muted); font-size:14px; margin-bottom:20px; }
.comic-afterword .section-more { margin-top:10px; }
/* Work detail: the first fold balances synopsis and editorial film frame */
.work-detail { padding-top:44px; }
.detail-top { display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:clamp(35px,6vw,100px); align-items:center; padding-bottom:80px; }
.detail-content { padding:12px 0 24px; }
.detail-content h1 { font-size:clamp(45px,5.1vw,78px); margin:0 0 22px; letter-spacing:-.06em; }
.detail-tagline { font-size:clamp(18px,1.9vw,26px); color:#ddd6e2; line-height:1.6; margin:0 0 27px; font-weight:480; }
.detail-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.detail-chips span { padding:6px 11px; border:1px solid var(--line-strong); background:rgba(255,255,255,.025); color:#bfb8c9; font-size:11px; border-radius:2px; }
.detail-summary { font-size:14px; color:var(--muted); line-height:2.15; max-width:600px; margin-bottom:34px; }
.detail-actions { display:flex; flex-wrap:wrap; align-items:center; gap:24px; }
.primary-action { background:var(--berry); border:1px solid rgba(255,255,255,.09); color:#fff; display:inline-flex; justify-content:center; align-items:center; gap:23px; padding:12px 21px; border-radius:3px; font-weight:700; font-size:13px; min-height:46px; transition:background .2s,transform .2s; }
.primary-action:hover { background:#bd5278; transform:translateY(-2px); }
.quiet-action { color:#dfdbe6; font-size:13px; }
.quiet-action:hover { color:var(--gold); }
.detail-visual { height:min(52vw,650px); min-height:380px; max-height:650px; border-radius:4px; overflow:hidden; position:relative; background:linear-gradient(135deg,#342335,#11141e); }
.detail-visual img { width:100%; height:100%; object-fit:cover; }
.detail-visual::after { content:""; position:absolute; bottom:0; left:0; right:0; height:27%; background:linear-gradient(transparent,rgba(10,9,16,.22)); }
.detail-layout { border-top:1px solid var(--line-strong); display:grid; grid-template-columns:minmax(0,1.3fr) minmax(270px,.63fr); gap:clamp(55px,8vw,125px); padding-top:76px; padding-bottom:94px; }
.detail-main section { border-bottom:1px solid var(--line); padding-bottom:42px; margin-bottom:42px; }
.detail-main section:last-child { margin-bottom:0; border-bottom:none; padding-bottom:0; }
.detail-main .section-index { color:var(--berry-light); margin-bottom:15px; }
.detail-main h2 { font-size:clamp(24px,2.4vw,33px); margin-bottom:20px; }
.detail-main p:not(.section-index) { color:#c8c3d0; font-size:15px; line-height:2.15; margin:0; }
.detail-aside { background:var(--surface); padding:34px; align-self:start; border:1px solid var(--line); border-radius:3px; }
.detail-aside h2 { font-size:20px; margin-bottom:23px; }
.detail-aside > p { color:#d6d0dc; line-height:1.95; font-size:13px; border-top:1px solid var(--line); padding-top:15px; margin-bottom:16px; }
.detail-caveat { margin-top:32px; border-top:1px solid var(--line-strong); padding-top:23px; }
.detail-caveat span { color:var(--gold); font-size:11px; font-weight:700; }
.detail-caveat p { margin:10px 0 0; font-size:12px; line-height:1.9; color:var(--muted); }
.related-works { padding:38px 0 100px; }
.related-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:25px; max-width:700px; }
.related-grid .work-card { display:grid; grid-template-columns:minmax(0,165px) minmax(0,1fr); gap:19px; align-items:center; }
.related-grid .work-card__body h3 { font-size:20px; }
.related-grid .work-card__image { aspect-ratio:.82; }
/* Accessible 404 */
.error-panel { padding-top:100px; padding-bottom:150px; }
.error-number { font-size:clamp(90px,14vw,200px); font-weight:850; line-height:1; margin:0 0 4px; color:var(--berry); letter-spacing:-.1em; }
.error-panel h1 { font-size:clamp(27px,3vw,43px); margin-bottom:19px; }
.error-panel > p:not(.section-index):not(.error-number) { font-size:15px; color:var(--muted); margin-bottom:32px; }
.error-links { display:flex; align-items:center; gap:25px; }
/* Footer: low-contrast, text-first. */
.site-footer { background:var(--deep); border-top:1px solid var(--line); }
.footer-main { display:flex; align-items:start; justify-content:space-between; gap:40px; padding-top:48px; padding-bottom:41px; }
.footer-brand { font-size:21px; font-weight:800; margin:0 0 12px; letter-spacing:.07em; }
.footer-brand span { font-size:9px; font-weight:650; color:var(--subtle); letter-spacing:.14em; }
.footer-main > div > p:last-child { font-size:12px; color:var(--muted); max-width:620px; margin:0; }
.footer-main nav { display:flex; gap:24px; padding-top:8px; flex-wrap:wrap; }
.footer-main nav a { color:#c4beca; font-size:12px; white-space:nowrap; }
.footer-main nav a:hover { color:var(--gold); }
.footer-bottom { border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:20px; padding-top:18px; padding-bottom:21px; font-size:10px; color:var(--subtle); }
/* Refinements across common screen widths */
@media (min-width:1550px) {
  :root { --container: 1380px; }
  .home-intro { padding-top:75px; }
  .feature-image { aspect-ratio:1.36; }
  .story-grid { gap:21px; }
  .home-shelf { padding-top:102px; }
}
@media (max-width:1180px) {
  :root { --side:clamp(22px,3.4vw,50px); }
  .header-note { display:none; }
  .primary-nav { margin-left:auto; }
  .home-intro { grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:34px; }
  .intro-copy h1 { font-size:clamp(34px,4vw,48px); }
  .intro-lead { font-size:14px; }
  .story-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 17px; }
  .work-card__image { aspect-ratio:.95; }
  .narrative-layout { grid-template-columns:1fr; gap:30px; }
  .narrative-layout h2 { max-width:720px; }
  .ai-split { grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); }
  .ai-highlight-copy { padding:30px; }
  .detail-top { gap:44px; }
}
@media (max-width:900px) {
  .home-intro { align-items:start; padding-top:49px; }
  .intro-copy { padding-top:3px; padding-bottom:0; }
  .intro-copy h1 { font-size:clamp(31px,4.4vw,42px); }
  .intro-copy h1 span { font-size:.67em; }
  .feature-copy { display:block; }
  .feature-copy p { margin-top:8px; }
  .home-shelf { padding-top:65px; padding-bottom:70px; }
  .ai-highlight { padding-top:73px; padding-bottom:73px; }
  .ai-split { display:block; }
  .ai-cover { min-height:0; aspect-ratio:1.9; }
  .ai-highlight-copy { padding:30px; }
  .ai-highlight-copy h3 { margin:17px 0 9px; }
  .small-divider { margin:25px 0 16px; }
  .compact-feature { gap:25px; }
  .detail-top { align-items:start; }
  .detail-content h1 { font-size:clamp(39px,5vw,55px); }
  .detail-visual { min-height:360px; height:52vw; }
  .detail-layout { gap:40px; grid-template-columns:1.25fr .75fr; }
  .detail-aside { padding:23px; }
  .related-grid { max-width:unset; }
  .related-grid .work-card { grid-template-columns:120px 1fr; }
}
@media (max-width:760px) {
  :root { --side:20px; }
  .header-bar { min-height:66px; }
  .brand img { height:36px; width:36px; }
  .brand strong { font-size:18px; }
  .brand small { font-size:7px; }
  .primary-nav { display:none; }
  .menu-button { display:flex; margin-left:auto; }
  .mobile-nav:not([hidden]) { display:flex; gap:0; flex-direction:column; border-top:1px solid var(--line); background:var(--deep); padding-top:8px; padding-bottom:13px; }
  .mobile-nav a { display:block; font-size:14px; border-bottom:1px solid var(--line); padding:12px 5px; }
  .mobile-nav a:last-child { border:0; }
  .home-intro { display:flex; flex-direction:column; gap:30px; }
  .intro-copy { width:100%; }
  .intro-copy h1 { font-size:clamp(36px,8vw,52px); }
  .intro-lead { max-width:610px; }
  .intro-links { max-width:unset; }
  .intro-feature { width:100%; }
  .feature-image { aspect-ratio:1.52; }
  .feature-copy { display:grid; grid-template-columns:1fr 1fr; }
  .feature-copy .meta { grid-column:1 / -1; }
  .feature-copy p { margin:9px 0 0; }
  .home-shelf { padding-top:69px; }
  .section-heading { align-items:start; }
  .section-aside { display:none; }
  .narrative-points { grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
  .narrative-points h3 { font-size:15px; }
  .narrative-points p { font-size:12px; }
  .compact-feature { display:block; padding-bottom:74px; }
  .compact-feature > div:first-child { margin-bottom:32px; }
  .compact-art a { aspect-ratio:1.05; }
  .collection-title-grid { grid-template-columns:1fr; gap:18px; }
  .collection-title-grid h1 { font-size:clamp(38px,7vw,54px); }
  .collection-head { padding-top:29px; padding-bottom:45px; }
  .breadcrumbs { margin-bottom:32px; }
  .collection-spotlight { grid-template-columns:1fr; gap:25px; padding-bottom:72px; }
  .spotlight-visual a { aspect-ratio:1.58; }
  .spotlight-text .large-index { margin-top:21px; }
  .ai-second { grid-template-columns:1fr; gap:30px; padding-top:54px; padding-bottom:54px; }
  .ai-second > a { aspect-ratio:1.8; }
  .comparison-note { padding-top:65px; padding-bottom:73px; }
  .comparison-grid article { padding:25px; }
  .comic-head { padding-top:30px; }
  .comic-feature:nth-child(2) { padding-top:56px; }
  .comic-afterword { grid-template-columns:1fr; gap:13px; padding-top:55px; padding-bottom:70px; }
  .work-detail { padding-top:30px; }
  .detail-top { display:flex; flex-direction:column-reverse; gap:27px; padding-bottom:58px; }
  .detail-visual { min-height:0; height:auto; width:100%; aspect-ratio:1.75; }
  .detail-content { padding:0; }
  .detail-content h1 { margin-bottom:13px; font-size:clamp(40px,8vw,60px); }
  .detail-tagline { margin-bottom:19px; }
  .detail-chips { margin-bottom:18px; }
  .detail-summary { margin-bottom:24px; }
  .detail-layout { grid-template-columns:1fr; gap:35px; padding-top:49px; padding-bottom:69px; }
  .detail-main section { margin-bottom:30px; padding-bottom:30px; }
  .detail-aside { padding:25px; }
  .related-works { padding-bottom:75px; }
  .footer-main { display:block; }
  .footer-main nav { margin-top:23px; }
}
@media (max-width:560px) {
  :root { --side:17px; }
  body { font-size:14px; }
  .section-index { letter-spacing:.13em; font-size:9px; }
  .section-heading { flex-wrap:wrap; gap:12px; margin-bottom:22px; }
  .section-heading h2 { font-size:27px; }
  .section-heading .section-more { margin-left:0; }
  .home-intro { padding-top:34px; }
  .intro-copy h1 { font-size:35px; }
  .intro-copy h1 span { font-size:.69em; }
  .intro-lead { font-size:13px; }
  .feature-image { aspect-ratio:1.23; }
  .feature-float { bottom:14px; left:15px; right:15px; font-size:9px; }
  .feature-copy { display:block; padding-top:14px; }
  .feature-copy h2 { margin:5px 0 0; font-size:25px; }
  .feature-copy p { margin-top:6px; }
  .home-shelf { padding-top:60px; padding-bottom:56px; }
  .story-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 13px; }
  .work-card__image { aspect-ratio:.75; }
  .work-card__body h3 { font-size:16px; }
  .work-card__body p { font-size:11px; }
  .work-card__body .meta { font-size:10px; }
  .narrative-band { padding:51px 0 57px; }
  .narrative-layout h2 { font-size:28px; }
  .narrative-points { grid-template-columns:1fr; gap:24px; }
  .narrative-points article { padding-top:14px; }
  .narrative-points span { margin-bottom:8px; }
  .narrative-points h3 { font-size:17px; margin-bottom:8px; }
  .narrative-points p { font-size:13px; }
  .ai-highlight { padding-top:60px; padding-bottom:64px; }
  .ai-cover { aspect-ratio:1.3; }
  .ai-highlight-copy { padding:23px 20px 25px; }
  .ai-highlight-copy h3 { font-size:26px; }
  .ai-highlight-copy > p { font-size:12px; }
  .compact-feature { padding-top:0; padding-bottom:60px; }
  .compact-feature h2 { font-size:28px; }
  .compact-feature p:not(.section-index) { font-size:13px; }
  .compact-art { gap:11px; }
  .editorial-note { display:block; padding-bottom:50px; }
  .editorial-note p { border-left:0; border-top:1px solid var(--line); margin-top:8px; padding:10px 0 0; }
  .collection-title-grid h1, .comic-head h1 { font-size:37px; }
  .collection-title-grid h1 span, .comic-head h1 span { font-size:.63em; }
  .collection-title-grid > p { font-size:13px; }
  .spotlight-visual a { aspect-ratio:1.23; }
  .spotlight-text .large-index { font-size:47px; }
  .spotlight-text h2 { font-size:30px; }
  .spotlight-text > p:not(.large-index) { font-size:13px; }
  .ai-second h2 { font-size:30px; }
  .ai-second > a { aspect-ratio:1.35; }
  .comparison-note h2 { font-size:26px; }
  .comparison-grid { grid-template-columns:1fr; gap:13px; }
  .comparison-grid h3 { font-size:18px; }
  .inline-back { flex-direction:column; gap:14px; }
  .comic-head > p:last-child { font-size:13px; }
  .comic-grid { grid-template-columns:1fr; gap:43px; padding-bottom:69px; }
  .comic-feature:nth-child(2) { padding-top:0; }
  .comic-visual { aspect-ratio:1.2; }
  .comic-caption { padding-top:15px; }
  .comic-caption h2 { font-size:30px; margin-bottom:12px; }
  .comic-caption p { font-size:13px; }
  .detail-visual { aspect-ratio:1.3; }
  .detail-content h1 { font-size:43px; }
  .detail-tagline { font-size:19px; }
  .detail-summary { font-size:13px; }
  .detail-main h2 { font-size:26px; }
  .detail-main p:not(.section-index) { font-size:14px; }
  .related-grid { grid-template-columns:1fr; gap:19px; }
  .related-grid .work-card { grid-template-columns:112px 1fr; }
  .related-grid .work-card__body h3 { font-size:18px; }
  .footer-main { padding-top:36px; padding-bottom:32px; }
  .footer-main nav { gap:13px 20px; }
  .footer-bottom { display:block; }
  .footer-bottom span { display:block; margin:6px 0; }
  .error-panel { padding-top:70px; padding-bottom:100px; }
  .error-links { flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition-duration:.001ms !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}
/* Support high-contrast OS settings while retaining brand hierarchy. */
@media (prefers-contrast:more) {
  :root { --muted:#e4dfe7; --subtle:#cfc8d8; --line:rgba(255,255,255,.3); --line-strong:rgba(255,255,255,.48); }
  .work-card__view { opacity:1; }
  .section-index { color:#ffe1aa; }
  .section-index.cool { color:#dce4ff; }
}