:root{
    --ink:#26312f;
    --muted:#71807b;
    --paper:#fbfaf6;
    --line:#e5e9e2;
    --green:#294e42;
    --accent:#d68d64;
    --soft:#eaf1eb;
    --radius:18px;
    font-family:Inter,"Noto Sans SC","Microsoft YaHei",sans-serif;
    color:var(--ink);
    background:var(--paper)
}
*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth
}
body{
    margin:0
}
a{
    color:inherit;
    text-decoration:none
}
button{
    font:inherit
}
img{
    display:block;
    width:100%;
    object-fit:cover
}
svg{
    width:1.15em;
    height:1.15em;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round
}
.wrap{
    width:min(1180px,calc(100% - 48px));
    margin-inline:auto
}
.skip-link{
    position:absolute;
    top:-70px;
    left:16px;
    background:#fff;
    padding:12px;
    z-index:100
}
.skip-link:focus{
    top:12px
}
.site-header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(251,250,246,.94);
    backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line)
}
.header-inner{
    min-height:82px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px
}
.brand{
    display:inline-flex;
    align-items:center;
    gap:11px;
    flex-shrink:0
}
.brand-mark{
    width:42px;
    height:42px;
    border-radius:13px;
    background:var(--green);
    color:#fff;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    justify-items:center;
    transform:rotate(-7deg);
    font-weight:800;
    font-size:16px;
    letter-spacing:-6px;
    padding-right:6px
}
.brand-mark span:last-child{
    transform:translateY(6px)
}
.brand-text{
    display:flex;
    flex-direction:column;
    line-height:1.2
}
.brand-text strong{
    font-size:17px;
    letter-spacing:.03em
}
.brand-text small{
    font-size:7px;
    letter-spacing:.16em;
    color:var(--muted);
    margin-top:5px
}
.main-nav{
    display:flex;
    align-items:center;
    gap:3px;
    overflow-x:auto;
    scrollbar-width:none
}
.main-nav::-webkit-scrollbar{
    display:none
}
.main-nav a{
    white-space:nowrap;
    display:flex;
    align-items:center;
    gap:6px;
    padding:10px 8px;
    border-radius:9px;
    color:#61716b;
    font-size:12px;
    font-weight:600;
    transition:.2s
}
.main-nav a:hover,.main-nav a.active{
    color:var(--green);
    background:#eaf1eb
}
.main-nav svg{
    width:15px;
    height:15px
}
.menu-toggle{
    display:none
}
.hero{
    margin-top:54px;
    min-height:525px;
    border-radius:26px;
    background:#e9f0e8;
    display:grid;
    grid-template-columns:53% 47%;
    overflow:hidden
}
.hero-copy{
    padding:62px 6% 48px 8%;
    position:relative;
    z-index:1
}
.eyebrow{
    color:#b6744c;
    letter-spacing:.17em;
    text-transform:uppercase;
    font-size:11px;
    font-weight:800;
    margin:0 0 16px
}
.hero-kicker{
    margin-bottom:24px
}
.hero h1{
    font-size:clamp(30px,4.5vw,58px);
    letter-spacing:-.045em;
    margin:0;
    color:#173b30;
    line-height:1.1
}
.hero-title{
    font-size:clamp(21px,2.3vw,31px);
    font-weight:700;
    line-height:1.35;
    margin:17px 0
}
.hero-desc{
    font-size:15px;
    line-height:1.9;
    color:#596e63;
    max-width:400px
}
.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:32px
}
.button{
    border:1px solid transparent;
    border-radius:999px;
    padding:13px 23px;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    transition:transform .2s,background .2s
}
.button:hover{
    transform:translateY(-2px)
}
.button.primary{
    background:var(--green);
    color:#fff
}
.button.ghost{
    border-color:#a9beb0;
    color:var(--green)
}
.hero-note{
    display:flex;
    gap:18px;
    margin-top:32px;
    font-size:11px;
    color:#748879
}
.hero-note span:before{
    content:'•';
    margin-right:8px;
    color:var(--accent)
}
.hero-visual{
    position:relative;
    min-height:525px
}
.hero-photo{
    position:absolute;
    inset:20px 20px 20px 0;
    border-radius:200px 18px 18px 200px;
    overflow:hidden
}
.hero-photo img{
    height:100%;
    aspect-ratio:4/5
}
.hero-float{
    position:absolute;
    bottom:45px;
    left:-35px;
    background:#fff;
    border-radius:16px;
    padding:19px 22px;
    box-shadow:0 16px 35px #263a2b22;
    display:flex;
    flex-direction:column;
    gap:5px
}
.hero-float strong{
    font-size:23px;
    color:var(--green)
}
.hero-float span{
    font-size:11px;
    color:var(--muted)
}
.quick-rail{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:30px;
    padding:23px;
    margin-top:20px;
    border-bottom:1px solid var(--line);
    font-size:12px
}
.quick-rail p{
    font-weight:700;
    color:var(--green)
}
.quick-rail a{
    color:#6a7771
}
.quick-rail a:hover{
    color:var(--accent)
}
.section{
    padding-block:88px 0;
    scroll-margin-top:105px
}
.section-head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:30px
}
.section-head h2,.about h2,.subscribe-inner h2{
    font-size:clamp(25px,3vw,37px);
    letter-spacing:-.035em;
    margin:0 0 10px;
    line-height:1.3
}
.section-intro{
    color:var(--muted);
    font-size:13px;
    line-height:1.8;
    margin:0
}
.text-link{
    color:var(--green);
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
    border-bottom:1px solid #9aac9d;
    padding-bottom:5px
}
.category-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px
}
.category-card{
    min-height:160px;
    border-radius:17px;
    padding:19px 22px;
    display:flex;
    flex-direction:column;
    position:relative;
    overflow:hidden;
    transition:transform .2s
}
.category-card:hover{
    transform:translateY(-4px)
}
.category-card.sky{
    background:#e7eef2
}
.category-card.coral{
    background:#f5e9e2
}
.category-card.gold{
    background:#f3edda
}
.category-card.rose{
    background:#f2e5e5
}
.category-card.mint{
    background:#e8f1e9
}
.category-card.jade{
    background:#e1eee9
}
.category-card.violet{
    background:#ece8f1
}
.category-card.blue{
    background:#e7eaf2
}
.cat-number{
    font-size:10px;
    color:#70817b
}
.cat-icon{
    position:absolute;
    right:21px;
    top:20px;
    color:#749186;
    font-size:25px
}
.category-card strong{
    font-size:18px;
    margin-top:auto
}
.category-card small{
    font-size:11px;
    color:#73807b;
    margin-top:7px
}
.cat-arrow{
    position:absolute;
    right:20px;
    bottom:22px;
    color:#547467
}
.story-grid{
    display:grid;
    gap:20px
}
.story-grid.four{
    grid-template-columns:repeat(4,minmax(0,1fr))
}
.story-card{
    min-width:0;
    display:flex;
    flex-direction:column
}
.cover-link{
    position:relative;
    overflow:hidden;
    border-radius:14px;
    display:block;
    background:#e5ece7;
    aspect-ratio:4/5
}
.cover{
    height:100%;
    aspect-ratio:4/5;
    transition:transform .35s
}
.cover-link:hover .cover{
    transform:scale(1.04)
}
.cover-badge{
    position:absolute;
    left:12px;
    top:12px;
    background:#fffdf0e8;
    backdrop-filter:blur(8px);
    border-radius:40px;
    padding:7px 10px;
    font-size:10px;
    font-weight:700
}
.story-copy{
    padding:16px 3px 0;
    display:flex;
    flex-direction:column;
    flex:1
}
.story-copy .eyebrow{
    font-size:10px;
    margin:0 0 8px
}
.story-copy h3{
    font-size:17px;
    margin:0;
    line-height:1.35;
    min-height:2.7em
}
.story-copy h3 a:hover{
    color:var(--accent)
}
.story-summary{
    color:var(--muted);
    font-size:12px;
    line-height:1.7;
    margin:9px 0 14px;
    min-height:4.9em
}
.read-link{
    font-size:11px;
    color:var(--green);
    font-weight:700;
    margin-top:auto
}
.feature-band{
    margin-top:90px;
    background:#e9eee7
}
.feature-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8%;
    align-items:center;
    min-height:450px
}
.feature-image{
    height:360px;
    align-self:end;
    overflow:hidden;
    border-radius:180px 180px 0 0;
    max-width:410px;
    margin-left:6%
}
.feature-image img{
    height:100%
}
.feature-copy{
    max-width:440px
}
.feature-copy h2{
    font-size:clamp(28px,3.4vw,43px);
    line-height:1.3;
    margin:0
}
.feature-copy p:not(.eyebrow){
    font-size:14px;
    color:#6d7c72;
    line-height:1.9;
    margin:20px 0 30px
}
.ranking-shell{
    border:1px solid var(--line);
    border-radius:19px;
    background:#fff;
    overflow:hidden
}
.rank-tabs{
    display:flex;
    border-bottom:1px solid var(--line);
    padding:12px 20px;
    gap:10px
}
.rank-tabs button{
    border:0;
    background:transparent;
    color:#77857e;
    padding:11px 16px;
    cursor:pointer;
    border-radius:8px;
    font-size:12px;
    font-weight:700
}
.rank-tabs button.active{
    background:var(--green);
    color:#fff
}
.rank-row{
    display:grid;
    grid-template-columns:70px 1fr 120px 30px;
    align-items:center;
    padding:17px 28px;
    border-bottom:1px solid #f0f1eb;
    gap:10px
}
.rank-row:last-child{
    border-bottom:0
}
.rank-row:hover{
    background:#f8faf6
}
.rank-num{
    font-family:Georgia,serif;
    font-size:24px;
    color:#bb9875
}
.rank-title{
    font-weight:700;
    font-size:14px
}
.rank-genre{
    font-size:11px;
    color:var(--muted)
}
.rank-arrow{
    color:var(--green)
}
.split-showcase{
    display:grid;
    grid-template-columns:38% 1fr;
    gap:7%;
    align-items:center
}
.split-copy>p{
    line-height:1.9;
    color:var(--muted);
    font-size:13px
}
.split-copy .section-head{
    display:block
}
.split-copy .text-link{
    display:inline-block;
    margin-top:22px
}
.split-cards{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px
}
.split-cards .story-summary{
    display:none
}
.split-cards .cover-link{
    aspect-ratio:4/4.2
}
.compact-feature{
    display:grid;
    grid-template-columns:1.3fr .7fr;
    gap:9%;
    align-items:center
}
.completed-image{
    height:360px;
    border-radius:160px 160px 16px 16px;
    overflow:hidden
}
.completed-image img{
    height:100%
}
.completed-links{
    border-top:1px solid var(--line)
}
.completed-links a{
    display:grid;
    grid-template-columns:40px 1fr 90px 20px;
    gap:10px;
    align-items:center;
    border-bottom:1px solid var(--line);
    padding:17px 0
}
.completed-links span:first-child{
    color:#b5896a;
    font:20px Georgia,serif
}
.completed-links strong{
    font-size:13px
}
.completed-links small{
    font-size:11px;
    color:var(--muted)
}
.about{
    display:grid;
    grid-template-columns:1fr 1.4fr;
    gap:10%;
    border-top:1px solid var(--line);
    margin-top:90px
}
.about-copy p{
    font-size:14px;
    line-height:2;
    color:#68776f;
    margin:0 0 17px
}
.subscribe-section{
    margin-top:90px;
    background:var(--green);
    color:#fff;
    scroll-margin-top:85px
}
.subscribe-inner{
    padding-block:60px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px
}
.subscribe-inner .eyebrow{
    color:#dfad83
}
.subscribe-inner h2{
    font-size:30px
}
.subscribe-inner p:not(.eyebrow){
    color:#c6d7cb;
    font-size:12px;
    line-height:1.7;
    margin:0
}
.button.light{
    background:#fff;
    color:var(--green);
    white-space:nowrap
}
.site-footer{
    background:#1d3b32;
    color:#fff
}
.footer-inner{
    padding-block:42px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:25px
}
.site-footer .brand-mark{
    background:#fff;
    color:var(--green)
}
.site-footer .brand-text small{
    color:#b9c9bd
}
.site-footer p{
    font-size:11px;
    color:#afc0b4
}
.footer-links{
    display:flex;
    gap:25px;
    font-size:11px;
    align-items:center;
    color:#cbd9cf
}
.copyright{
    grid-column:1/-1;
    border-top:1px solid #486357;
    padding-top:22px;
    margin:0
}
.interior-main{
    padding-top:40px
}
.breadcrumbs{
    font-size:11px;
    color:var(--muted);
    display:flex;
    gap:8px;
    margin-bottom:20px
}
.breadcrumbs a:hover{
    color:var(--green)
}
.listing-hero{
    border-radius:20px;
    padding:48px 5%;
    min-height:230px
}
.listing-hero.sky{
    background:#e7eef2
}
.listing-hero.coral{
    background:#f5e9e2
}
.listing-hero.gold{
    background:#f3edda
}
.listing-hero.rose{
    background:#f2e5e5
}
.listing-hero.mint{
    background:#e8f1e9
}
.listing-hero.jade{
    background:#e1eee9
}
.listing-hero.violet{
    background:#ece8f1
}
.listing-hero.blue{
    background:#e7eaf2
}
.listing-hero h1{
    font-size:39px;
    margin:0 0 12px
}
.listing-hero p:not(.eyebrow){
    font-size:13px;
    color:#68776f
}
.listing-count{
    font-size:11px;
    color:var(--green);
    font-weight:700
}
.back-home{
    padding:60px 0 80px
}
.article-main{
    padding-bottom:90px
}
.chapter{
    max-width:920px
}
.chapter-header{
    text-align:center;
    padding:35px 0 25px
}
.chapter-header h1{
    font-size:clamp(29px,4vw,48px);
    margin:0 0 13px
}
.chapter-lead{
    font-size:15px;
    color:#69796f;
    line-height:1.8
}
.chapter-meta{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:18px;
    color:#7b8981;
    font-size:11px;
    margin-top:20px
}
.reading-note{
    border-left:3px solid var(--accent);
    background:#f0f3ed;
    padding:17px 20px;
    margin:30px auto 60px;
    max-width:760px
}
.reading-note strong{
    font-size:12px
}
.reading-note p{
    font-size:12px;
    color:#68786c;
    line-height:1.8;
    margin:5px 0 0
}
.chapter-pages{
    max-width:760px;
    margin:auto
}
.chapter-panel{
    margin-bottom:65px
}
.chapter-panel figure{
    margin:0;
    background:#edf1eb;
    border-radius:16px;
    overflow:hidden
}
.chapter-panel img{
    aspect-ratio:4/5;
    max-height:720px
}
.chapter-panel figcaption{
    font-size:11px;
    color:#7a887f;
    padding:10px 15px;
    background:#f1f3ee
}
.panel-copy{
    display:flex;
    align-items:start;
    gap:22px;
    padding:22px 10px 0
}
.panel-copy span{
    color:#ad8769;
    font:24px Georgia,serif
}
.panel-copy p{
    margin:0;
    color:#46574c;
    font-size:14px;
    line-height:2
}
.chapter-end{
    text-align:center;
    background:#edf2eb;
    border-radius:16px;
    padding:50px 20px
}
.chapter-end span{
    font-size:11px;
    letter-spacing:.2em;
    color:#ac8167
}
.chapter-end h2{
    font-size:23px;
    margin:12px 0
}
.chapter-end p{
    font-size:12px;
    color:var(--muted)
}
.chapter-nav{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-top:25px;
    flex-wrap:wrap
}
.chapter-nav a,.chapter-nav .disabled{
    border:1px solid var(--line);
    border-radius:10px;
    padding:13px 16px;
    font-size:12px;
    background:#fff
}
.chapter-nav a:hover{
    border-color:var(--green);
    color:var(--green)
}
.chapter-nav .disabled{
    color:#a0aaa3
}
.chapter-nav .back-category{
    background:var(--green);
    color:#fff
}
.chapter-nav .back-category:hover{
    color:#fff
}
@media(max-width:1050px){
    .main-nav a{
        font-size:11px;
        padding:8px 5px
    }
    .main-nav svg{
        width:13px
    }
    .header-inner{
        gap:12px
    }
    .brand-text strong{
        font-size:15px
    }
    .story-grid.four,.category-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .story-copy h3,.story-summary{
        min-height:0
    }
}
@media(max-width:720px){
    .wrap{
        width:min(100% - 32px,1180px)
    }
    .header-inner{
        min-height:68px
    }
    .menu-toggle{
        display:flex;
        border:0;
        background:transparent;
        flex-direction:column;
        gap:5px;
        cursor:pointer;
        padding:10px
    }
    .menu-toggle span{
        width:22px;
        height:2px;
        background:var(--green)
    }
    .main-nav{
        display:none;
        position:absolute;
        left:0;
        right:0;
        top:68px;
        background:var(--paper);
        padding:16px;
        box-shadow:0 18px 25px #1e392324;
        max-height:70vh;
        overflow:auto;
        grid-template-columns:1fr 1fr
    }
    .main-nav.open{
        display:grid
    }
    .main-nav a{
        padding:12px;
        font-size:12px
    }
    .hero{
        margin-top:26px;
        display:flex;
        flex-direction:column;
        min-height:0
    }
    .hero-copy{
        padding:35px 28px 25px
    }
    .hero-visual{
        min-height:290px
    }
    .hero-photo{
        inset:0 18px 15px;
        border-radius:120px 120px 14px 14px
    }
    .hero-float{
        bottom:28px;
        left:8px
    }
    .hero-note{
        flex-wrap:wrap;
        gap:8px
    }
    .quick-rail{
        justify-content:flex-start;
        gap:14px;
        overflow-x:auto;
        white-space:nowrap;
        padding-inline:0
    }
    .quick-rail p{
        display:none
    }
    .section{
        padding-top:62px
    }
    .section-head{
        align-items:start
    }
    .section-head .text-link{
        margin-top:8px
    }
    .category-grid{
        gap:10px
    }
    .category-card{
        min-height:145px;
        padding:16px
    }
    .cat-icon{
        right:14px;
        top:14px
    }
    .cat-arrow{
        bottom:17px;
        right:16px
    }
    .story-grid.four{
        gap:16px 12px
    }
    .story-copy h3{
        font-size:14px
    }
    .story-summary{
        font-size:11px
    }
    .feature-band{
        margin-top:65px
    }
    .feature-grid{
        grid-template-columns:1fr;
        gap:0;
        padding-top:42px
    }
    .feature-copy{
        grid-row:1
    }
    .feature-copy h2{
        font-size:28px
    }
    .feature-image{
        height:290px;
        margin:30px auto 0;
        width:80%
    }
    .split-showcase,.compact-feature,.about{
        grid-template-columns:1fr;
        gap:25px
    }
    .split-cards{
        gap:12px
    }
    .completed-image{
        display:none
    }
    .rank-row{
        grid-template-columns:42px 1fr 30px;
        padding:15px
    }
    .rank-genre{
        display:none
    }
    .rank-tabs{
        padding:8px
    }
    .rank-tabs button{
        padding:9px;
        font-size:11px
    }
    .subscribe-inner{
        padding-block:46px;
        flex-direction:column;
        align-items:start
    }
    .footer-inner{
        grid-template-columns:1fr
    }
    .footer-links{
        flex-wrap:wrap
    }
    .chapter-meta{
        gap:8px
    }
    .chapter-panel{
        margin-bottom:45px
    }
    .chapter-nav{
        flex-direction:column
    }
    .chapter-nav a,.chapter-nav .disabled{
        text-align:center
    }
}
@media(max-width:380px){
    .story-grid.four{
        grid-template-columns:1fr
    }
    .category-grid{
        grid-template-columns:1fr 1fr
    }
    .category-card strong{
        font-size:15px
    }
    .story-card{
        max-width:360px
    }
    .hero-actions{
        flex-direction:column
    }
    .hero-actions a{
        text-align:center
    }
}