:root {
    --ink:#202b37;
    --muted:#697684;
    --paper:#fbfaf7;
    --white:#fff;
    --line:#e9e7e2;
    --orange:#f07559;
    --deep:#24394a;
    --radius:24px;
    --shadow:0 18px 50px rgba(33,48,63,.08)
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'DM Sans','Noto Sans SC',sans-serif;
    line-height:1.65
}
img {
    display:block;
    max-width:100%
}
a {
    color:inherit;
    text-decoration:none
}
button {
    font:inherit
}
.container {
    width:min(1180px,calc(100% - 48px));
    margin-inline:auto
}
.site-header {
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(251,250,247,.96);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(41,55,66,.08)
}
.header-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    min-height:78px
}
.brand {
    display:flex;
    align-items:center;
    gap:10px;
    white-space:nowrap;
    font-weight:800;
    font-size:18px;
    letter-spacing:-.04em
}
.brand img {
    width:42px;
    height:42px
}
.site-nav {
    display:flex;
    align-items:center;
    gap:3px
}
.site-nav a {
    display:flex;
    align-items:center;
    gap:5px;
    padding:10px 8px;
    border-radius:12px;
    color:#62707c;
    font-size:13px;
    white-space:nowrap;
    transition:.2s
}
.site-nav a:hover,.site-nav a.active {
    background:#fff1ea;
    color:#d6553d
}
.nav-icon {
    font-size:18px;
    line-height:1
}
.nav-toggle {
    display:none;
    border:0;
    background:transparent;
    font-size:25px;
    cursor:pointer
}
.hero {
    display:grid;
    grid-template-columns:.94fr 1.06fr;
    align-items:center;
    gap:72px;
    min-height:590px;
    padding-block:84px 66px
}
.hero-copy {
    max-width:540px
}
.hero-kicker,.eyebrow {
    font-size:12px;
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--orange)
}
.hero h1 {
    font-size:clamp(54px,7vw,92px);
    line-height:1.08;
    letter-spacing:-.08em;
    margin:24px 0
}
.hero h1 a:hover {
    color:var(--orange)
}
.hero-lead {
    font-size:20px;
    line-height:1.9;
    color:#52616e;
    max-width:500px
}
.hero-actions {
    display:flex;
    gap:12px;
    margin-top:34px
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:12px 22px;
    border-radius:999px;
    font-size:14px;
    font-weight:800;
    transition:.2s
}
.button:hover {
    transform:translateY(-2px)
}
.button.primary {
    background:var(--deep);
    color:white
}
.button.ghost {
    border:1px solid #c9d0d4;
    background:white
}
.hero-note {
    display:flex;
    gap:24px;
    margin-top:38px;
    font-size:12px;
    font-weight:700;
    color:#82909a
}
.hero-note span:before {
    content:'✦';
    color:var(--orange);
    margin-right:6px
}
.hero-art {
    position:relative;
    min-height:495px
}
.art-frame {
    overflow:hidden;
    border-radius:210px 210px 20px 20px;
    box-shadow:var(--shadow);
    background:#e8e7df
}
.art-frame img {
    width:100%;
    height:100%;
    object-fit:cover
}
.art-one {
    position:absolute;
    right:8%;
    top:0;
    width:67%;
    height:490px;
    transform:rotate(4deg)
}
.art-two {
    position:absolute;
    left:0;
    bottom:0;
    width:41%;
    height:300px;
    transform:rotate(-9deg);
    border:8px solid var(--paper)
}
.art-caption {
    position:absolute;
    right:0;
    bottom:0;
    background:#fff;
    border-radius:14px;
    padding:9px 14px;
    font-weight:700;
    font-size:12px;
    box-shadow:var(--shadow);
    transform:rotate(4deg)
}
.notice-strip {
    background:#24394a;
    color:#fff
}
.notice-inner {
    display:flex;
    align-items:center;
    gap:22px;
    padding-block:20px;
    font-size:13px
}
.notice-inner strong {
    color:#ffd7a7
}
.notice-inner p {
    margin:0;
    flex:1
}
.notice-inner a {
    font-weight:700
}
.section {
    padding-block:94px;
    scroll-margin-top:100px
}
.section-head {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:30px
}
.section-head h2,.ranking-aside h2,.editorial h2,.about-block h2,.subscribe-inner h2 {
    font-size:clamp(31px,4vw,48px);
    letter-spacing:-.05em;
    line-height:1.2;
    margin:10px 0 0
}
.section-head p {
    max-width:430px;
    color:var(--muted);
    margin:0
}
.category-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px
}
.category-tile {
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:235px;
    padding:26px;
    border-radius:var(--radius);
    overflow:hidden;
    transition:.2s
}
.category-tile:hover {
    transform:translateY(-5px);
    box-shadow:var(--shadow)
}
.peach {
    --tint:#fff0e9;
    --accent:#e78264
}
.lavender {
    --tint:#f1edff;
    --accent:#8979c7
}
.mint {
    --tint:#e7f5f1;
    --accent:#60a891
}
.sky {
    --tint:#e8f2fb;
    --accent:#6399c3
}
.category-tile {
    background:var(--tint)
}
.category-icon {
    width:47px;
    height:47px;
    border-radius:14px;
    background:rgba(255,255,255,.7);
    display:grid;
    place-items:center;
    font-size:27px;
    color:var(--accent);
    margin-bottom:21px
}
.category-tile strong {
    font-size:22px;
    letter-spacing:-.04em
}
.category-tile small {
    font-size:12px;
    color:#697781;
    line-height:1.55;
    margin-top:8px;
    max-width:185px
}
.category-arrow {
    position:absolute;
    right:22px;
    bottom:18px;
    font-size:25px;
    color:var(--accent)
}
.feature-section {
    padding-top:72px;
    padding-bottom:52px
}
.comic-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px
}
.comic-card {
    min-width:0;
    background:white;
    border:1px solid var(--line);
    border-radius:20px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:.2s
}
.comic-card:hover {
    transform:translateY(-4px);
    box-shadow:var(--shadow)
}
.comic-cover {
    position:relative;
    display:block;
    aspect-ratio:3/4;
    overflow:hidden;
    background:var(--tint)
}
.comic-cover img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .35s
}
.comic-card:hover img {
    transform:scale(1.035)
}
.cover-badge {
    position:absolute;
    top:13px;
    left:13px;
    border-radius:99px;
    background:rgba(255,255,255,.94);
    padding:5px 10px;
    font-size:11px;
    font-weight:800
}
.comic-body {
    display:flex;
    flex-direction:column;
    flex:1;
    padding:20px
}
.comic-body .eyebrow {
    font-size:10px;
    letter-spacing:.08em;
    color:var(--accent)
}
.comic-body h3 {
    font-size:19px;
    line-height:1.4;
    letter-spacing:-.035em;
    margin:8px 0
}
.comic-body h3 a:hover {
    color:var(--orange)
}
.comic-body p {
    font-size:12px;
    color:var(--muted);
    margin:0 0 20px;
    min-height:40px;
    line-height:1.7
}
.card-foot {
    margin-top:auto;
    padding-top:14px;
    border-top:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    gap:8px;
    font-size:11px;
    color:#8b949d
}
.card-foot a {
    color:#d56c55;
    font-weight:800
}
.section-more {
    text-align:right;
    margin-top:24px
}
.text-link {
    font-weight:800;
    color:#cf674e;
    font-size:14px
}
.text-link:hover {
    text-decoration:underline
}
.ranking-wrap {
    background:#f0f2ef;
    margin-top:68px
}
.ranking-layout {
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:80px
}
.ranking-aside p {
    font-size:15px;
    color:var(--muted);
    max-width:350px;
    line-height:1.9
}
.rank-deco {
    display:block;
    font-weight:800;
    color:#b8c2c4;
    font-size:62px;
    letter-spacing:-.09em;
    margin-top:75px
}
.ranking-main {
    background:white;
    padding:26px;
    border-radius:26px;
    box-shadow:var(--shadow)
}
.rank-tabs {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px;
    background:#f4f6f5;
    border-radius:15px;
    padding:5px
}
.rank-tab {
    border:0;
    background:transparent;
    color:#77848d;
    border-radius:11px;
    padding:11px 5px;
    cursor:pointer;
    font-size:13px;
    font-weight:800
}
.rank-tab.active {
    background:var(--deep);
    color:#fff
}
.rank-panel[hidden] {
    display:none
}
.rank-list {
    list-style:none;
    padding:6px 0 0;
    margin:0
}
.rank-list li {
    display:flex;
    align-items:center;
    gap:18px;
    padding:17px 4px;
    border-bottom:1px solid var(--line)
}
.rank-list li:last-child {
    border:0
}
.rank-number {
    font-size:25px;
    font-weight:800;
    color:#c6cdd0;
    min-width:42px
}
.rank-list li:first-child .rank-number {
    color:var(--orange)
}
.rank-list li div {
    flex:1
}
.rank-list a {
    display:block;
    font-weight:800
}
.rank-list a:hover {
    color:var(--orange)
}
.rank-list small {
    display:block;
    color:#97a0a6;
    margin-top:3px
}
.rank-arrow {
    color:var(--orange)
}
.guide-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}
.guide-grid article {
    padding:29px;
    border:1px solid var(--line);
    border-radius:22px;
    background:white
}
.guide-no {
    color:#e3a08e;
    font-weight:800
}
.guide-grid h3 {
    font-size:20px;
    margin:17px 0 8px
}
.guide-grid p {
    font-size:13px;
    color:var(--muted);
    margin:0
}
.editorial {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:72px
}
.editorial-image {
    height:410px;
    border-radius:26px;
    overflow:hidden;
    background:#e8e6df
}
.editorial-image img {
    width:100%;
    height:100%;
    object-fit:cover
}
.editorial-copy p {
    color:var(--muted);
    line-height:2;
    margin:25px 0
}
.about-block {
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:60px;
    border-top:1px solid var(--line)
}
.about-block p {
    color:var(--muted);
    line-height:2;
    margin:0 0 18px
}
.subscribe-wrap {
    background:#df755b;
    color:#fff;
    margin-top:25px
}
.subscribe-inner {
    min-height:300px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding-block:55px
}
.subscribe-inner .eyebrow {
    color:#ffe2d4
}
.subscribe-inner h2 {
    font-size:46px
}
.subscribe-inner p {
    color:#fff5ee
}
.button.light {
    background:white;
    color:#a94e38
}
.site-footer {
    background:#202e3b;
    color:#aeb8c0
}
.footer-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding-block:24px;
    font-size:11px
}
.footer-inner p {
    margin:0
}
.footer-inner a {
    color:#fff
}
.listing-hero {
    background:var(--tint);
    padding:38px 0 70px
}
.breadcrumbs {
    display:flex;
    align-items:center;
    gap:9px;
    font-size:12px;
    color:#8a949a;
    margin-bottom:45px
}
.breadcrumbs a:hover {
    color:var(--orange)
}
.listing-hero h1 {
    font-size:58px;
    letter-spacing:-.06em;
    line-height:1.2;
    margin:10px 0
}
.listing-hero p {
    color:#63717b;
    max-width:550px
}
.listing-count {
    display:inline-block;
    margin-top:15px;
    font-size:12px;
    font-weight:800;
    color:var(--accent)
}
.listing-grid {
    row-gap:28px
}
.back-strip {
    padding-bottom:80px
}
.back-strip a {
    font-weight:700;
    color:var(--orange)
}
.chapter {
    max-width:900px;
    padding-block:35px 110px
}
.chapter .breadcrumbs {
    margin-bottom:65px
}
.chapter-head {
    text-align:center
}
.chapter-head h1 {
    font-size:clamp(32px,5vw,54px);
    line-height:1.35;
    letter-spacing:-.05em;
    margin:16px auto 20px;
    max-width:760px
}
.chapter-meta {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:20px;
    color:#8a969c;
    font-size:12px
}
.chapter-intro {
    max-width:680px;
    margin:27px auto 35px;
    color:#5e6c78;
    line-height:1.9
}
.reading-note {
    background:#fff1ea;
    border-left:4px solid var(--orange);
    padding:18px 23px;
    border-radius:0 15px 15px 0;
    font-size:13px;
    margin-bottom:58px
}
.reading-note p {
    margin:5px 0 0;
    color:#68737b
}
.chapter-content {
    max-width:760px;
    margin:auto
}
.chapter-content h2 {
    font-size:25px;
    margin:0 0 26px
}
.chapter-prose p {
    font-size:16px;
    line-height:2.1;
    letter-spacing:.015em;
    color:#3d4b55;
    margin:0 0 25px
}
.chapter-image {
    margin:40px 0 32px
}
.chapter-image img {
    display:block;
    width:100%;
    aspect-ratio:3/4;
    object-fit:cover;
    border-radius:17px;
    background:#eceae5
}
.chapter-image figcaption {
    text-align:center;
    font-size:11px;
    color:#9aa2a6;
    margin-top:10px
}
.chapter-end {
    text-align:center;
    border-top:1px solid var(--line);
    padding-top:36px;
    margin-top:65px
}
.chapter-end span {
    font-size:21px;
    font-weight:800;
    color:var(--orange)
}
.chapter-end p {
    color:#8b979d;
    font-size:13px
}
.chapter-nav {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-top:37px
}
.chapter-control {
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:86px;
    border:1px solid var(--line);
    background:white;
    border-radius:15px;
    padding:15px;
    text-align:center
}
.chapter-control:hover {
    border-color:var(--orange)
}
.chapter-control small {
    font-size:11px;
    color:#9ba5a9
}
.chapter-control strong {
    font-size:13px
}
.chapter-control.disabled {
    opacity:.55
}
.chapter-control.middle {
    background:#f5ebe6
}
@media(max-width:1120px) {
    .header-inner {
    gap:12px
}
.site-nav a {
    font-size:11px;
    padding:9px 5px
}
.brand {
    font-size:16px
}
.hero {
    gap:35px
}
.comic-grid {
    gap:15px
}
.comic-body {
    padding:16px
}
}
@media(max-width:800px) {
    .header-inner {
    min-height:68px
}
.nav-toggle {
    display:block
}
.site-nav {
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:68px;
    background:var(--paper);
    box-shadow:0 15px 25px rgba(0,0,0,.08);
    padding:14px 24px;
    grid-template-columns:repeat(2,1fr);
    gap:6px
}
.site-nav.open {
    display:grid
}
.site-nav a {
    font-size:14px;
    padding:11px
}
.hero {
    grid-template-columns:1fr;
    gap:22px;
    padding-top:55px
}
.hero-art {
    min-height:430px
}
.art-one {
    right:9%;
    height:420px
}
.art-two {
    bottom:0;
    height:240px
}
.category-grid,.comic-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
}
.ranking-layout,.editorial,.about-block {
    grid-template-columns:1fr;
    gap:35px
}
.rank-deco {
    display:none
}
.editorial-image {
    height:360px
}
.section {
    padding-block:70px
}
.feature-section {
    padding-block:50px
}
.subscribe-inner {
    min-height:280px
}
.footer-inner {
    flex-wrap:wrap
}
}
@media(max-width:560px) {
    .container {
    width:min(100% - 30px,1180px)
}
.hero {
    padding-top:43px
}
.hero h1 {
    font-size:55px;
    margin:15px 0
}
.hero-lead {
    font-size:16px
}
.hero-art {
    min-height:310px
}
.art-one {
    width:65%;
    height:305px
}
.art-two {
    height:175px
}
.hero-note {
    gap:10px;
    font-size:10px
}
.notice-inner {
    align-items:flex-start;
    flex-wrap:wrap;
    gap:4px 14px
}
.notice-inner p {
    flex-basis:100%;
    order:3
}
.section-head {
    display:block
}
.section-head p {
    margin-top:10px
}
.category-grid {
    gap:10px
}
.category-tile {
    min-height:196px;
    padding:18px
}
.category-tile strong {
    font-size:18px
}
.category-tile small {
    font-size:11px
}
.comic-grid {
    gap:10px
}
.comic-card {
    border-radius:15px
}
.comic-body {
    padding:11px
}
.comic-body h3 {
    font-size:15px
}
.comic-body p {
    font-size:11px;
    min-height:54px
}
.card-foot {
    font-size:10px;
    flex-wrap:wrap
}
.cover-badge {
    font-size:9px;
    top:8px;
    left:8px
}
.ranking-main {
    padding:13px
}
.rank-tab {
    font-size:11px
}
.guide-grid {
    grid-template-columns:1fr
}
.editorial-image {
    height:260px
}
.subscribe-inner {
    display:block
}
.subscribe-inner h2 {
    font-size:33px
}
.subscribe-inner .button {
    margin-top:14px
}
.listing-hero h1 {
    font-size:45px
}
.listing-grid {
    row-gap:15px
}
.chapter .breadcrumbs {
    margin-bottom:38px
}
.chapter-meta {
    gap:8px
}
.chapter-intro {
    font-size:13px
}
.chapter-prose p {
    font-size:14px
}
.chapter-nav {
    gap:6px
}
.chapter-control {
    padding:8px
}
.chapter-control strong {
    font-size:11px
}
.footer-inner {
    display:block
}
.footer-inner p {
    margin-bottom:7px
}
}