@charset "UTF-8";
:root{--yellow:#ffd84a;--yellow-soft:#fff5bd;--navy:#101b3d;--ink:#17213a;--paper:#fffdf4;--white:#fff;--line:#d9d5bd;--mint:#d7f3e6;--shadow:0 14px 34px rgba(16,27,61,.12);font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;overflow-x:hidden;background:linear-gradient(180deg,#fffdf4 0,#fff9d9 46%,#eef5ff 100%);line-height:1.72}
a{color:inherit;text-decoration-thickness:.11em;text-underline-offset:.18em}
img{display:block;max-width:100%;height:auto}
button,select,textarea{font:inherit}
.skip-link{position:fixed;left:1rem;top:-6rem;background:var(--navy);color:#fff;padding:.75rem 1rem;z-index:100}
.skip-link:focus{top:1rem}
.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1rem;padding:.8rem clamp(1rem,4vw,4rem);background:rgba(255,253,244,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:.65rem;font-weight:900;text-decoration:none;white-space:nowrap}
.brand-mark{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50% 50% 45% 55%;background:var(--yellow);color:var(--navy);border:2px solid var(--navy);transform:rotate(-6deg)}
.genre-ribbon{display:flex;gap:.25rem;margin-left:auto;overflow-x:auto;scrollbar-width:thin}
.genre-ribbon a{padding:.48rem .7rem;border-radius:999px;text-decoration:none;font-size:.9rem;white-space:nowrap}
.genre-ribbon a:hover,.genre-ribbon a:focus-visible{background:var(--navy);color:#fff}
.nav-toggle{display:none;border:2px solid var(--navy);background:var(--yellow);border-radius:999px;padding:.4rem .8rem;font-weight:800}
main{width:min(1180px,calc(100% - 2rem));margin:0 auto;padding:clamp(2rem,5vw,5rem) 0}
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:clamp(1.4rem,4vw,4rem);align-items:center}
.hero-copy{padding:clamp(.5rem,2vw,1.5rem)}
.breadcrumb{font-size:.88rem;color:#4d5874;overflow-wrap:anywhere}
.eyebrow{margin:0 0 .4rem;text-transform:uppercase;letter-spacing:.13em;font-size:.76rem;font-weight:900;color:#52617d}
h1,h2,h3,p,li,small,strong{overflow-wrap:anywhere}
h1{font-size:clamp(2.5rem,8vw,6.2rem);line-height:.93;letter-spacing:-.055em;margin:.35rem 0 1.2rem;color:var(--navy)}
h2{font-size:clamp(1.45rem,3vw,2.25rem);line-height:1.16;margin:.25rem 0 1rem;color:var(--navy)}
.lead{font-size:clamp(1.02rem,2vw,1.28rem);max-width:42rem}
.hero-visual{margin:0;background:var(--navy);border:3px solid var(--navy);border-radius:2rem;overflow:hidden;box-shadow:var(--shadow);transform:rotate(1.2deg)}
.hero-visual figcaption{padding:.75rem 1rem;color:#dfe8ff;font-size:.82rem}
.status-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:1.4rem}
.status-grid div{border:1px solid var(--line);background:rgba(255,255,255,.7);border-radius:1rem;padding:.75rem}
.status-grid strong,.status-grid span{display:block}
.status-grid span{font-size:.82rem;color:#59637a}
.shelf{margin-top:clamp(3rem,7vw,6rem)}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:1rem;border-bottom:3px solid var(--navy);margin-bottom:1rem}
.issue-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.issue-card{position:relative;display:flex;flex-direction:column;gap:.55rem;min-height:13rem;padding:1.2rem;border:2px solid var(--navy);border-radius:.7rem 1.8rem .7rem .7rem;background:#fff;text-decoration:none;box-shadow:5px 6px 0 var(--yellow);transition:transform .18s ease}
.issue-card:hover,.issue-card:focus-visible{transform:translateY(-4px) rotate(-.5deg)}
.issue-card span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#60708e}
.issue-card strong{font-size:1.22rem;color:var(--navy)}
.issue-card small{color:#4f5c72}
.channel-card:nth-child(2n){background:var(--yellow-soft)}
.reading-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:clamp(3rem,7vw,6rem)}
.panel{border:1px solid var(--line);border-radius:1.5rem;background:rgba(255,255,255,.88);padding:clamp(1.2rem,3vw,2rem);box-shadow:var(--shadow)}
.panel ol{padding-left:1.2rem}
.caution{background:var(--mint);border-color:#83c5aa}
.evidence-note{display:grid;grid-template-columns:.75fr 1.25fr;gap:1.4rem;align-items:center;margin-top:3rem}
.evidence-note img{grid-column:1/-1;border-radius:1rem}
.demo{margin-top:2rem}
.demo label{display:block;margin:.7rem 0;font-weight:700}
.demo select,.demo textarea{display:block;width:100%;margin-top:.35rem;padding:.7rem;border:1px solid #8f98aa;border-radius:.7rem;background:#fff}
.demo button,.check-grid button{border:2px solid var(--navy);border-radius:.75rem;background:var(--yellow);color:var(--navy);font-weight:900;padding:.65rem .9rem;cursor:pointer}
.check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.check-grid button[aria-pressed="true"]{background:var(--navy);color:#fff}
footer{padding:2.2rem clamp(1rem,4vw,4rem);background:var(--navy);color:#e8edff}
footer p{margin:.35rem auto;width:min(1180px,100%)}
footer a{color:var(--yellow)}
@media (max-width:900px){.hero{grid-template-columns:1fr}.reading-grid{grid-template-columns:1fr 1fr}.reading-grid .caution{grid-column:1/-1}.issue-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.status-grid{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.site-header{flex-wrap:wrap}.nav-toggle{display:none;margin-left:auto}.genre-ribbon{display:flex;order:3;width:100%;margin-left:0;flex-direction:column}.js-ready .nav-toggle{display:block}.js-ready .genre-ribbon{display:none}.js-ready .genre-ribbon[data-open="true"]{display:flex}.genre-ribbon a{border:1px solid var(--line)}main{width:min(100% - 1.1rem,1180px);padding-top:1.4rem}.hero{gap:1rem}.hero-copy{padding:.25rem}.status-grid,.reading-grid,.issue-grid,.evidence-note{grid-template-columns:1fr}.status-grid div:nth-child(3){grid-column:1}.issue-card{min-height:10.5rem}.check-grid{grid-template-columns:1fr}.section-heading{display:block}h1{font-size:clamp(2.55rem,17vw,4.5rem)}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}