/* Core design tokens */
:root{
    --brand:#7C5CFC;
    --brand-dark:#5f42dc;
    --pink:#E98FB3;
    --ink:#211D2B;
    --text:#302C38;
    --muted:#746E7D;
    --bg:#F8F6FB;
    --soft:#EEEAF5;
    --accent:#F2A33A;
    --white:#FFFFFF;
    --line:rgba(48,44,56,.14);
    --deep-line:rgba(255,255,255,.14);
    --shadow:0 18px 55px rgba(33,29,43,.11);
    --radius-xl:30px;
    --radius-lg:22px;
    --radius-md:16px;
    --radius-sm:10px;
    --shell:min(1180px,calc(100% - 48px));
    --narrow:min(760px,calc(100% - 48px));
}

*,
*::before,
*::after{box-sizing:border-box}

html{
    scroll-behavior:smooth;
    background:var(--bg);
}

body{
    margin:0;
    color:var(--text);
    background:var(--bg);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
    line-height:1.75;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

body.modal-open{overflow:hidden}

img{
    max-width:100%;
    height:auto;
    display:block;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input{
    font:inherit;
}

button{cursor:pointer}

code{
    padding:.1em .35em;
    border-radius:6px;
    background:var(--soft);
    font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
    font-size:.92em;
}

.shell{width:var(--shell);margin-inline:auto}
.narrow{width:var(--narrow);margin-inline:auto}
.site-main{min-height:58vh}
.section-block{padding:88px 0}

.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

.skip-link{
    position:fixed;
    left:16px;
    top:-80px;
    z-index:1000;
    padding:10px 16px;
    border-radius:10px;
    color:#fff;
    background:var(--ink);
}
.skip-link:focus{top:16px}

/* Header */
.site-header{
    position:sticky;
    top:0;
    z-index:80;
    border-bottom:1px solid rgba(48,44,56,.08);
    background:rgba(248,246,251,.93);
    backdrop-filter:blur(18px);
}

.header-inner{
    min-height:74px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:26px;
}

.brand-mark{
    display:flex;
    align-items:center;
    gap:11px;
    min-width:max-content;
}
.brand-mark img{
    width:44px;
    height:44px;
    object-fit:cover;
    border-radius:13px;
    box-shadow:0 6px 16px rgba(124,92,252,.22);
}
.brand-mark span{display:grid;line-height:1.2}
.brand-mark strong{
    color:var(--ink);
    font-size:1.02rem;
    letter-spacing:.05em;
}
.brand-mark small{
    margin-top:5px;
    color:var(--muted);
    font-size:.68rem;
}

.primary-nav{
    justify-self:center;
    display:flex;
    align-items:center;
    gap:4px;
}
.primary-nav a{
    position:relative;
    padding:9px 12px;
    border-radius:10px;
    color:#514b5b;
    font-size:.91rem;
    font-weight:650;
    transition:.2s ease;
}
.primary-nav a:hover,
.primary-nav a[aria-current="page"]{
    color:var(--ink);
    background:rgba(124,92,252,.09);
}
.primary-nav a[aria-current="page"]::after{
    content:"";
    position:absolute;
    left:12px;
    right:12px;
    bottom:4px;
    height:2px;
    border-radius:9px;
    background:var(--brand);
}

.search-trigger,
.menu-toggle{
    border:0;
    color:var(--ink);
    background:transparent;
}
.search-trigger{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:9px 12px;
    border:1px solid var(--line);
    border-radius:999px;
    font-size:.88rem;
    font-weight:700;
}
.search-trigger:hover{border-color:rgba(124,92,252,.42);background:rgba(124,92,252,.06)}
.search-trigger span[aria-hidden]{font-size:1.15rem}
.menu-toggle{display:none;font-size:1.35rem}

/* Buttons and links */
.button{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 18px;
    border:1px solid transparent;
    border-radius:999px;
    font-weight:750;
    font-size:.92rem;
    transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.button:hover{transform:translateY(-1px)}
.button.primary{
    color:#fff;
    background:var(--brand);
    box-shadow:0 10px 22px rgba(124,92,252,.22);
}
.button.primary:hover{background:var(--brand-dark)}
.button.secondary{
    color:var(--ink);
    border-color:rgba(48,44,56,.17);
    background:rgba(255,255,255,.7);
}
.button.secondary:hover{background:#fff;box-shadow:0 8px 24px rgba(33,29,43,.08)}
.button.light{
    color:var(--ink);
    background:#fff;
}
.button.full{width:100%}

.button-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
}

.text-link{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:var(--brand-dark);
    font-weight:750;
    line-height:1.4;
}
.text-link::after{content:"→";transition:transform .18s ease}
.text-link:hover::after{transform:translateX(3px)}
.on-dark-link{color:#fff}

/* Common typography */
.eyebrow{
    margin:0 0 10px;
    color:var(--brand-dark);
    font-size:.78rem;
    font-weight:850;
    letter-spacing:.13em;
    text-transform:uppercase;
}
.on-dark .eyebrow,
.creation-notebook .eyebrow,
.recommend-compare .eyebrow,
.faq-help-band .eyebrow,
.about-principle-band .eyebrow,
.guide-article-list .eyebrow{color:#e1d8ff}

h1,h2,h3{
    margin:0;
    color:var(--ink);
    line-height:1.25;
    letter-spacing:-.025em;
}
h1{
    font-size:clamp(2.25rem,5vw,4.6rem);
    max-width:16ch;
}
h2{font-size:clamp(1.65rem,3vw,2.55rem)}
h3{font-size:1.16rem}
p{margin:0 0 1em}
.lead-text{
    max-width:760px;
    margin-top:20px;
    color:#514b5b;
    font-size:clamp(1rem,1.35vw,1.16rem);
}
.section-heading{
    max-width:760px;
    margin-bottom:32px;
}
.section-heading p:last-child{
    margin-top:12px;
    margin-bottom:0;
    color:var(--muted);
}
.split-heading{
    max-width:none;
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:30px;
}
.split-heading>div{max-width:740px}
.on-dark h2,
.on-dark p,
.creation-notebook h2,
.recommend-compare h2,
.faq-help-band h2,
.about-principle-band h2,
.guide-article-list h2{color:#fff}
.on-dark p,
.creation-notebook .section-heading p,
.recommend-compare .section-heading p,
.guide-article-list .section-heading p{color:#cec8d7}

.meta-line{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    color:var(--muted);
    font-size:.75rem;
    font-weight:750;
}
.meta-line>*{
    display:inline-flex;
    align-items:center;
    gap:4px;
}
.meta-line>*+*::before{
    content:"";
    width:3px;
    height:3px;
    border-radius:50%;
    margin-right:4px;
    background:var(--pink);
}

.focus-line{
    color:#554f60;
    font-size:.88rem;
}
.focus-line strong{color:var(--ink)}

/* Breadcrumbs */
.breadcrumbs{
    margin:0 0 28px;
    color:var(--muted);
    font-size:.8rem;
}
.breadcrumbs ol{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    align-items:center;
    padding:0;
    margin:0;
    list-style:none;
}
.breadcrumbs li:not(:last-child)::after{
    content:"/";
    margin-left:7px;
    color:#a39daa;
}
.breadcrumbs a:hover{color:var(--brand-dark)}

/* Search modal */
.search-modal[hidden]{display:none !important}
.search-modal{
    position:fixed;
    inset:0;
    z-index:200;
    display:grid;
    place-items:start center;
    padding:12vh 24px 40px;
}
.search-backdrop{
    position:absolute;
    inset:0;
    background:rgba(20,16,28,.74);
    backdrop-filter:blur(8px);
}
.search-dialog{
    position:relative;
    z-index:1;
    width:min(660px,100%);
    padding:34px;
    border-radius:26px;
    background:var(--bg);
    box-shadow:0 40px 100px rgba(0,0,0,.25);
}
.search-dialog h2{font-size:1.8rem}
.search-dialog>p:not(.eyebrow){
    margin-top:12px;
    color:var(--muted);
}
.search-close{
    position:absolute;
    top:18px;
    right:18px;
    width:38px;
    height:38px;
    border:0;
    border-radius:50%;
    color:var(--ink);
    background:var(--soft);
    font-size:1.35rem;
}
.search-form{margin-top:24px}
.search-form label,
.search-page-form label{
    display:block;
    margin-bottom:7px;
    color:var(--ink);
    font-size:.8rem;
    font-weight:750;
}
.search-row{
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
}
.search-row input{
    min-width:0;
    min-height:46px;
    padding:0 15px;
    border:1px solid rgba(48,44,56,.18);
    border-radius:14px;
    color:var(--text);
    background:#fff;
    outline:none;
}
.search-row input:focus{
    border-color:var(--brand);
    box-shadow:0 0 0 4px rgba(124,92,252,.11);
}

/* Home lead */
.home-lead{
    padding:58px 0 70px;
    display:grid;
    grid-template-columns:1.03fr .97fr;
    gap:46px;
    align-items:center;
}
.lead-copy .button-row{margin-top:28px}
.lead-facts{
    display:flex;
    flex-wrap:wrap;
    gap:10px 20px;
    padding:0;
    margin:28px 0 0;
    color:var(--muted);
    font-size:.78rem;
    list-style:none;
}
.lead-facts li{position:relative;padding-left:14px}
.lead-facts li::before{
    content:"";
    position:absolute;
    left:0;
    top:.75em;
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--accent);
}
.lead-visual{
    position:relative;
    margin:0;
    padding:16px 16px 42px;
    border-radius:var(--radius-xl);
    background:var(--soft);
    transform:rotate(1.2deg);
}
.lead-visual::before{
    content:"";
    position:absolute;
    width:110px;
    height:110px;
    left:-28px;
    bottom:42px;
    border-radius:50%;
    background:rgba(233,143,179,.24);
    z-index:-1;
}
.lead-visual img{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:22px;
}
.lead-visual figcaption{
    position:absolute;
    left:28px;
    right:28px;
    bottom:12px;
    color:var(--muted);
    font-size:.76rem;
}

/* Work cards and mosaics */
.featured-mosaic{
    display:grid;
    grid-template-columns:1.35fr repeat(2,1fr);
    gap:18px;
    align-items:stretch;
}
.work-card{
    overflow:hidden;
    border:1px solid rgba(48,44,56,.08);
    border-radius:var(--radius-lg);
    background:#fff;
    box-shadow:0 8px 30px rgba(33,29,43,.055);
}
.work-thumb{display:block;overflow:hidden}
.work-thumb img{
    width:100%;
    aspect-ratio:16/10;
    object-fit:cover;
    transition:transform .35s ease;
}
.work-card:hover .work-thumb img{transform:scale(1.025)}
.work-copy{padding:18px}
.work-copy h3{margin-top:8px}
.work-copy h3 a:hover{color:var(--brand-dark)}
.work-copy>p{
    margin:10px 0 0;
    color:var(--muted);
    font-size:.88rem;
}
.work-copy .focus-line{color:#544e5e}
.work-copy .text-link{
    margin-top:14px;
    font-size:.82rem;
}
.work-card--lead{
    grid-row:span 2;
}
.work-card--lead .work-thumb img{aspect-ratio:4/3}
.work-card--lead .work-copy{padding:24px}
.work-card--lead h3{font-size:1.45rem}
.work-card--compact .work-copy>p:not(.focus-line){
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.work-card--compact .focus-line{display:none}
.work-card--compact .text-link{display:none}

/* Category band */
.category-band{
    padding:78px 0;
    background:var(--ink);
}
.category-index{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}
.category-index__item{
    display:grid;
    grid-template-columns:74px 1fr;
    gap:15px;
    align-items:center;
    min-height:112px;
    padding:13px;
    border:1px solid var(--deep-line);
    border-radius:18px;
    color:#fff;
    background:rgba(255,255,255,.035);
    transition:.2s ease;
}
.category-index__item:hover{
    transform:translateY(-2px);
    border-color:rgba(233,143,179,.5);
    background:rgba(255,255,255,.07);
}
.category-index__item img{
    width:74px;
    height:82px;
    object-fit:cover;
    border-radius:13px;
}
.category-index__item span{display:grid;gap:6px}
.category-index__item strong{font-size:1rem}
.category-index__item small{
    color:#c9c3d0;
    line-height:1.55;
    font-size:.76rem;
}

/* Editorial stream */
.editorial-stream{
    border-top:1px solid var(--line);
}
.stream-row{
    display:grid;
    grid-template-columns:210px 1fr;
    gap:26px;
    padding:24px 0;
    border-bottom:1px solid var(--line);
}
.stream-image img{
    width:100%;
    aspect-ratio:16/10;
    object-fit:cover;
    border-radius:16px;
}
.stream-row h3{
    margin:8px 0 10px;
    font-size:1.25rem;
}
.stream-row h3 a:hover{color:var(--brand-dark)}
.stream-row p{margin-bottom:8px;color:var(--muted)}

/* Recommendation strip */
.recommend-strip{
    padding:82px 0;
    background:linear-gradient(110deg,var(--brand-dark),#7259d9 55%,#9a6aaf);
}
.recommend-strip__inner{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:44px;
    align-items:start;
}
.recommend-intro,
.recommend-intro h2,
.recommend-intro .eyebrow{color:#fff}
.recommend-intro p:not(.eyebrow){color:#eee9f6}
.recommend-intro .button{margin-top:12px}
.recommend-quick{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}
.recommend-quick a{
    min-height:150px;
    padding:22px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:18px;
    color:#fff;
    background:rgba(255,255,255,.08);
}
.recommend-quick a:hover{background:rgba(255,255,255,.14)}
.recommend-quick span{display:block;margin-top:8px;color:#ece6f3;font-size:.82rem}

/* Directory */
.directory-list{
    border-top:1px solid var(--line);
}
.directory-list a{
    display:grid;
    grid-template-columns:240px 1fr;
    gap:26px;
    padding:22px 8px;
    border-bottom:1px solid var(--line);
}
.directory-list a:hover .directory-title{color:var(--brand-dark)}
.directory-title{font-weight:850}
.directory-desc{color:var(--muted)}

/* Creation home */
.creation-window{
    padding:90px 0;
    background:var(--soft);
}
.creation-window__grid{
    display:grid;
    grid-template-columns:.82fr 1.18fr;
    gap:52px;
    align-items:center;
}
.creation-image img{
    width:100%;
    aspect-ratio:4/5;
    object-fit:cover;
    border-radius:26px 26px 90px 26px;
    box-shadow:var(--shadow);
}
.creation-copy>p:not(.eyebrow){margin-top:14px;color:var(--muted)}
.topic-mini-list{
    margin:26px 0;
    border-top:1px solid var(--line);
}
.topic-mini-list a{
    display:grid;
    grid-template-columns:200px 1fr;
    gap:16px;
    padding:13px 0;
    border-bottom:1px solid var(--line);
}
.topic-mini-list a:hover strong{color:var(--brand-dark)}
.topic-mini-list span{color:var(--muted);font-size:.82rem}

/* 3D home */
.three-d-preview{
    display:grid;
    grid-template-columns:1.06fr .94fr;
    gap:50px;
    align-items:center;
}
.three-d-preview figure{margin:0}
.three-d-preview figure img{
    width:100%;
    aspect-ratio:4/5;
    object-fit:cover;
    border-radius:80px 26px 26px 26px;
}
.three-d-preview figcaption{margin-top:10px;color:var(--muted);font-size:.75rem}
.check-list{
    display:grid;
    gap:14px;
    padding:0;
    margin:26px 0;
    list-style:none;
}
.check-list li{
    display:grid;
    gap:4px;
    padding-left:18px;
    border-left:3px solid rgba(124,92,252,.28);
}
.check-list strong{font-size:.9rem}
.check-list span{color:var(--muted);font-size:.82rem}

/* Guide close */
.guide-columns{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}
.guide-columns a{
    display:grid;
    gap:6px;
    min-height:170px;
    padding:20px;
    border:1px solid var(--line);
    border-radius:16px;
    background:rgba(255,255,255,.45);
}
.guide-columns a:hover{background:#fff;box-shadow:0 10px 30px rgba(33,29,43,.07)}
.guide-columns span{color:var(--pink);font-weight:850;font-size:.75rem}
.guide-columns small{color:var(--muted);line-height:1.55}
.guide-close .button-row{margin-top:22px}

/* Watch */
.watch-header{
    padding:54px 0 48px;
    background:var(--soft);
}
.watch-header__grid{
    display:grid;
    grid-template-columns:1.25fr .75fr;
    gap:54px;
    align-items:start;
}
.watch-note{
    padding:24px;
    border-radius:20px;
    background:#fff;
    box-shadow:0 12px 40px rgba(33,29,43,.06);
}
.watch-note strong{color:var(--ink)}
.watch-note p{margin:8px 0 0;color:var(--muted);font-size:.88rem}
.filter-shell{padding:32px 0 0}
.filter-heading{
    display:flex;
    justify-content:space-between;
    gap:30px;
    align-items:end;
}
.filter-heading h2{font-size:1.3rem}
.filter-heading p{max-width:600px;margin:0;color:var(--muted);font-size:.85rem}
.filter-nav{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:18px;
}
.filter-nav a{
    padding:9px 13px;
    border:1px solid var(--line);
    border-radius:999px;
    color:#554f60;
    background:#fff;
    font-size:.82rem;
    font-weight:700;
}
.filter-nav a:hover,
.filter-nav a[aria-current="page"]{
    color:#fff;
    border-color:var(--brand);
    background:var(--brand);
}
.filter-nav span{opacity:.72}
.watch-list-section{padding-top:54px}
.watch-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}
.work-card--watch .work-copy>p:not(.focus-line){
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.watch-bottom{
    padding:70px 0;
    background:var(--ink);
}
.watch-bottom__grid{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:40px;
}
.watch-bottom h2,
.watch-bottom .eyebrow{color:#fff}
.watch-bottom p:not(.eyebrow){max-width:700px;color:#cbc5d3}

/* Recommend page */
.recommend-hero{padding:56px 0 72px}
.recommend-hero__grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:54px;
    align-items:center;
}
.recommend-hero figure{margin:0}
.recommend-hero figure img{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:26px;
    box-shadow:var(--shadow);
}
.recommend-hero figcaption{margin-top:10px;color:var(--muted);font-size:.76rem}
.recommend-hero .button-row{margin-top:26px}
.recommend-tracks{display:grid;gap:22px}
.recommend-track{
    padding:28px;
    border:1px solid var(--line);
    border-radius:22px;
    background:#fff;
}
.recommend-track__head{
    display:grid;
    grid-template-columns:54px 1fr;
    gap:20px;
}
.track-number{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:var(--brand-dark);
    background:rgba(124,92,252,.1);
    font-weight:850;
}
.recommend-track__head h3{font-size:1.35rem}
.recommend-track__head p{margin:7px 0 0;color:var(--muted)}
.method-note{padding-left:12px;border-left:2px solid var(--pink)}
.track-work-list{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin:22px 0 18px 74px;
}
.track-work-list a{
    display:grid;
    grid-template-columns:72px 1fr;
    gap:10px;
    align-items:center;
    padding:9px;
    border-radius:14px;
    background:var(--bg);
}
.track-work-list a:hover{background:var(--soft)}
.track-work-list img{
    width:72px;
    height:72px;
    object-fit:cover;
    border-radius:10px;
}
.track-work-list span{display:grid;gap:4px}
.track-work-list strong{font-size:.85rem;line-height:1.35}
.track-work-list small{color:var(--muted);font-size:.7rem;line-height:1.4}
.recommend-track>.text-link{margin-left:74px}
.recommend-compare{
    padding:78px 0;
    background:var(--ink);
}
.compare-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}
.compare-grid article{
    padding:24px;
    border:1px solid var(--deep-line);
    border-radius:18px;
    background:rgba(255,255,255,.04);
}
.compare-grid h3{color:#fff}
.compare-grid p{margin:9px 0 0;color:#c9c2d1;font-size:.88rem}
.editor-note-panel{
    display:flex;
    justify-content:space-between;
    gap:36px;
    align-items:center;
    padding:34px;
    border-radius:24px;
    background:var(--soft);
}
.editor-note-panel>div:first-child{max-width:720px}
.editor-note-panel p:not(.eyebrow){margin-top:12px;color:var(--muted)}

/* Site index */
.site-index-hero{
    padding:52px 0 54px;
    border-bottom:1px solid var(--line);
}
.site-index-hero .lead-text{max-width:820px}
.route-table{border-top:1px solid var(--line)}
.route-row{
    display:grid;
    grid-template-columns:50px 220px 1fr 26px;
    gap:18px;
    align-items:center;
    padding:20px 6px;
    border-bottom:1px solid var(--line);
}
.route-row:hover strong{color:var(--brand-dark)}
.route-number{color:var(--pink);font-weight:850;font-size:.78rem}
.route-row>span:nth-child(3){color:var(--muted);font-size:.87rem}
.route-arrow{font-size:1.2rem}
.index-focus-band{
    padding:78px 0;
    background:var(--soft);
}
.index-focus-band__grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:50px;
    align-items:center;
}
.index-focus-band figure{margin:0}
.index-focus-band img{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:26px;
}
.index-focus-band p:not(.eyebrow){margin-top:12px;color:var(--muted)}
.definition-list{margin:24px 0 0}
.definition-list>div{
    display:grid;
    grid-template-columns:100px 1fr;
    gap:18px;
    padding:12px 0;
    border-top:1px solid var(--line);
}
.definition-list dt{font-weight:850}
.definition-list dd{margin:0;color:var(--muted)}
.index-category-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}
.index-category-list a{
    display:grid;
    grid-template-columns:100px 1fr;
    gap:16px;
    align-items:center;
    padding:12px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff;
}
.index-category-list a:hover{border-color:rgba(124,92,252,.35)}
.index-category-list img{
    width:100px;
    height:100px;
    object-fit:cover;
    border-radius:13px;
}
.index-category-list span{display:grid;gap:4px}
.index-category-list small{color:var(--muted);line-height:1.45}
.index-category-list em{color:var(--brand-dark);font-size:.74rem;font-style:normal}
.deep-link-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
}
.deep-link-grid a{
    min-height:150px;
    display:flex;
    flex-direction:column;
    padding:18px;
    border-radius:16px;
    background:var(--soft);
}
.deep-link-grid a:hover{background:#e6e0f1}
.deep-link-grid span{color:var(--brand-dark);font-size:.72rem;font-weight:800}
.deep-link-grid strong{margin-top:7px}
.deep-link-grid small{margin-top:auto;padding-top:18px;color:var(--muted);line-height:1.45}

/* Creation page */
.creation-hero{padding:56px 0 72px}
.creation-hero__grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:54px;
    align-items:center;
}
.creation-hero figure{margin:0}
.creation-hero img{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:30px 90px 30px 30px;
}
.creation-hero figcaption{margin-top:10px;color:var(--muted);font-size:.76rem}
.principle-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}
.principle-grid article{
    padding:24px;
    border:1px solid var(--line);
    border-radius:20px;
    background:#fff;
}
.principle-grid span{color:var(--pink);font-size:.78rem;font-weight:850}
.principle-grid h3{margin-top:8px}
.principle-grid p{margin:9px 0 0;color:var(--muted);font-size:.88rem}
.creation-notebook{
    padding:82px 0;
    background:var(--ink);
}
.notebook-list{
    border-top:1px solid var(--deep-line);
}
.notebook-entry{
    display:grid;
    grid-template-columns:66px 1fr;
    gap:20px;
    padding:26px 0;
    border-bottom:1px solid var(--deep-line);
}
.notebook-number{
    color:var(--pink);
    font-weight:850;
    font-size:.78rem;
}
.notebook-entry h3{color:#fff;font-size:1.28rem}
.notebook-entry p{max-width:860px;margin:8px 0 0;color:#cfc8d7}
.notebook-entry .notebook-lead{color:#f2edf7;font-weight:700}
.practice-note{
    padding-left:14px;
    border-left:2px solid var(--accent);
}
.creation-example-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
}
.work-card--creation{
    display:grid;
    grid-template-columns:190px 1fr;
}
.work-card--creation .work-thumb img{height:100%;aspect-ratio:auto}
.work-card--creation .focus-line{display:none}
.creation-close__grid{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:44px;
    align-items:center;
}
.creation-close figure{margin:0}
.creation-close img{
    width:100%;
    aspect-ratio:16/10;
    object-fit:cover;
    border-radius:22px;
}
.creation-close p:not(.eyebrow){margin-top:12px;color:var(--muted)}
.creation-close .button-row{margin-top:20px}

/* 3D page */
.three-d-hero{padding:56px 0 76px}
.three-d-hero__grid{
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:52px;
    align-items:center;
}
.three-d-hero figure{margin:0}
.three-d-hero img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:50% 30px 30px 30px;
}
.three-d-hero figcaption{margin-top:10px;color:var(--muted);font-size:.76rem}
.three-d-hero .button{margin-top:18px}
.three-d-note-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
}
.three-d-note-grid article{
    min-height:210px;
    padding:20px;
    border-radius:18px;
    background:var(--soft);
}
.three-d-note-grid span{color:var(--brand-dark);font-size:.74rem;font-weight:850}
.three-d-note-grid h3{margin-top:8px}
.three-d-note-grid p{margin:10px 0 0;color:var(--muted);font-size:.84rem}
.three-d-stage{
    padding:80px 0;
    background:var(--ink);
}
.three-d-stage__grid{
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    gap:50px;
    align-items:center;
}
.three-d-stage figure{margin:0}
.three-d-stage img{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:24px;
}
.three-d-stage h2,
.three-d-stage .eyebrow{color:#fff}
.three-d-stage p:not(.eyebrow){color:#cfc9d7}
.step-list{
    display:grid;
    gap:8px;
    padding:0;
    margin:24px 0 0;
    list-style:none;
    counter-reset:steps;
}
.step-list li{
    display:grid;
    grid-template-columns:130px 1fr;
    gap:18px;
    padding:12px 0;
    border-top:1px solid var(--deep-line);
    color:#fff;
}
.step-list span{color:#c7c0cf}

/* Work detail */
.work-detail__header{
    padding:48px 0 58px;
    background:var(--soft);
}
.work-detail__hero{
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:50px;
    align-items:center;
}
.work-detail__copy h1{
    max-width:14ch;
    margin-top:10px;
    font-size:clamp(2.1rem,4.5vw,4rem);
}
.detail-focus{
    margin-top:24px;
    padding:14px 16px;
    border-left:3px solid var(--accent);
    border-radius:0 12px 12px 0;
    background:rgba(255,255,255,.55);
}
.tag-row{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:20px;
}
.tag-row span{
    padding:5px 9px;
    border-radius:999px;
    color:#5d5667;
    background:#fff;
    font-size:.72rem;
    font-weight:750;
}
.work-detail__hero figure{margin:0}
.work-detail__hero img{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:26px;
}
.work-detail__hero figcaption{margin-top:9px;color:var(--muted);font-size:.72rem}
.work-detail__layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 290px;
    gap:60px;
    padding-top:70px;
    padding-bottom:80px;
}
.article-body{max-width:760px}
.article-body section{
    padding:0 0 48px;
    margin-bottom:48px;
    border-bottom:1px solid var(--line);
}
.article-body section:last-child{margin-bottom:0}
.article-body h2{font-size:1.75rem}
.article-body p:not(.eyebrow){
    margin-top:14px;
    color:#4f4958;
    font-size:1rem;
}
.inline-note,
.media-truth-note{
    margin-top:24px;
    padding:20px;
    border-radius:16px;
    background:var(--soft);
}
.inline-note p,
.media-truth-note p{margin-bottom:0 !important}
.question-line{
    margin-top:24px !important;
    color:var(--ink) !important;
}
.work-sidebar{position:relative}
.sticky-panel{
    position:sticky;
    top:100px;
    padding:22px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff;
}
.sticky-panel dl{margin:14px 0 20px}
.sticky-panel dl>div{
    display:grid;
    grid-template-columns:90px 1fr;
    gap:12px;
    padding:9px 0;
    border-top:1px solid var(--line);
}
.sticky-panel dt{color:var(--muted);font-size:.76rem}
.sticky-panel dd{margin:0;color:var(--ink);font-size:.82rem;font-weight:700}
.related-section{
    padding:76px 0;
    background:var(--soft);
}
.related-work-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:12px;
}
.work-card--related .work-copy{padding:13px}
.work-card--related .work-copy h3{font-size:.94rem}
.work-card--related .work-copy>p,
.work-card--related .focus-line,
.work-card--related .text-link{display:none}
.work-card--related .work-thumb img{aspect-ratio:4/3}

/* Guide */
.guide-hero{padding:52px 0 70px}
.guide-hero__grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:50px;
    align-items:center;
}
.guide-hero figure{margin:0}
.guide-hero img{
    width:100%;
    aspect-ratio:16/10;
    object-fit:cover;
    border-radius:26px;
}
.guide-anchor-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
}
.guide-anchor-grid a{
    display:flex;
    align-items:flex-start;
    gap:10px;
    min-height:84px;
    padding:14px;
    border:1px solid var(--line);
    border-radius:13px;
    background:#fff;
}
.guide-anchor-grid a:hover{border-color:rgba(124,92,252,.4)}
.guide-anchor-grid span{color:var(--pink);font-size:.72rem;font-weight:850}
.guide-anchor-grid strong{font-size:.83rem;line-height:1.4}
.guide-article-list{
    padding:82px 0;
    background:var(--ink);
}
.guide-entry-list{border-top:1px solid var(--deep-line)}
.guide-entry{
    display:grid;
    grid-template-columns:70px 1fr;
    gap:22px;
    padding:25px 0;
    border-bottom:1px solid var(--deep-line);
}
.guide-entry__number{color:var(--pink);font-size:.77rem;font-weight:850}
.guide-entry h3{color:#fff;font-size:1.18rem}
.guide-entry p{max-width:850px;margin:8px 0 0;color:#c9c3d0}
.guide-entry .guide-entry__summary{color:#f1edf5;font-weight:650}
.guide-entry .tip-note{
    padding-left:12px;
    border-left:2px solid var(--accent);
    font-size:.86rem;
}
.guide-next-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}
.guide-next-grid article{
    padding:28px;
    border-radius:20px;
    background:var(--soft);
}
.guide-next-grid p:not(.eyebrow){margin-top:10px;color:var(--muted)}
.guide-next-grid .button{margin-top:6px}

/* FAQ */
.faq-hero{
    padding:54px 0 58px;
    background:var(--soft);
}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item>button{
    width:100%;
    min-height:66px;
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:center;
    padding:16px 0;
    border:0;
    color:var(--ink);
    background:transparent;
    text-align:left;
    font-weight:780;
}
.faq-item>button span:last-child{
    color:var(--brand-dark);
    font-size:1.25rem;
    transition:transform .2s ease;
}
.faq-item>button[aria-expanded="true"] span:last-child{transform:rotate(45deg)}
.faq-answer{padding:0 48px 18px 0}
.faq-answer[hidden]{display:none}
.faq-answer p{margin:0;color:var(--muted)}
.faq-help-band{
    padding:62px 0;
    background:var(--brand-dark);
}
.faq-help-band__grid{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:36px;
}
.faq-help-band h2{max-width:780px}

/* Search page */
.search-page-hero{
    padding:54px 0;
    background:var(--soft);
}
.search-page-form{max-width:720px;margin-top:24px}
.search-results{padding-top:56px}
.empty-state{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:40px;
    align-items:center;
    padding:30px;
    border-radius:24px;
    background:#fff;
}
.empty-state img{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:18px;
}
.empty-state p:not(.eyebrow){margin-top:10px;color:var(--muted)}
.empty-state .button-row,
.empty-state .button{margin-top:10px}
.search-result-list{border-top:1px solid var(--line)}
.search-result-list article{
    padding:24px 4px;
    border-bottom:1px solid var(--line);
}
.search-result-list article>span{
    color:var(--pink);
    font-size:.74rem;
    font-weight:850;
}
.search-result-list h3{margin-top:5px}
.search-result-list h3 a:hover{color:var(--brand-dark)}
.search-result-list p{max-width:850px;margin:9px 0;color:var(--muted)}
.search-result-list .text-link{font-size:.82rem}

/* Plain / auxiliary pages */
.plain-hero{padding:52px 0 70px}
.plain-hero__grid{
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:50px;
    align-items:center;
}
.plain-hero figure{margin:0}
.plain-hero img{
    width:100%;
    aspect-ratio:16/10;
    object-fit:cover;
    border-radius:26px;
}
.prose-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:50px;
}
.prose-grid h2{font-size:1.75rem}
.prose-grid p:not(.eyebrow){margin-top:12px;color:var(--muted)}
.about-principle-band{
    padding:76px 0;
    background:var(--ink);
}
.about-principles{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}
.about-principles article{
    padding:24px;
    border:1px solid var(--deep-line);
    border-radius:17px;
}
.about-principles h3{color:#fff}
.about-principles p{margin:8px 0 0;color:#c8c2d0}
.contact-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}
.contact-grid article{
    padding:24px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff;
}
.contact-grid article>span{color:var(--pink);font-size:.74rem;font-weight:850}
.contact-grid h3{margin-top:6px}
.contact-grid p{margin:9px 0 0;color:var(--muted)}
.contact-note-band{
    padding:72px 0;
    background:var(--soft);
}
.contact-note-band__grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:50px;
}
.contact-note-band p:not(.eyebrow){color:var(--muted)}
.contact-note-band aside{
    padding:25px;
    border-radius:20px;
    background:#fff;
}
.contact-note-band ul{
    padding-left:20px;
    margin:12px 0 0;
    color:var(--muted);
}
.legal-prose{max-width:860px}
.legal-prose section{
    padding:0 0 44px;
    margin-bottom:44px;
    border-bottom:1px solid var(--line);
}
.legal-prose section:last-child{border-bottom:0}
.legal-prose h2{font-size:1.7rem}
.legal-prose p:not(.eyebrow){margin-top:12px;color:#514b5a}
.safety-grid .section-heading{margin-bottom:26px}
.safety-list{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}
.safety-list article{
    padding:22px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff;
}
.safety-list span{color:var(--brand-dark);font-size:.74rem;font-weight:850}
.safety-list h3{margin-top:8px}
.safety-list p{margin:9px 0 0;color:var(--muted);font-size:.87rem}
.safety-band{
    padding:72px 0;
    background:var(--ink);
}
.safety-band__grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
}
.safety-band h2,
.safety-band .eyebrow{color:#fff}
.safety-band p:not(.eyebrow){color:#c9c3d0}
.safety-band__grid>div:last-child{
    display:grid;
    gap:8px;
}
.safety-band__grid>div:last-child a{
    display:grid;
    gap:3px;
    padding:16px;
    border:1px solid var(--deep-line);
    border-radius:14px;
    color:#fff;
}
.safety-band__grid>div:last-child span{color:#c9c3d0;font-size:.8rem}

/* 404 */
.error-panel{
    min-height:58vh;
    padding:90px 0;
}
.error-panel h1{font-size:3rem}
.error-panel>p:not(.eyebrow){max-width:620px;margin-top:18px;color:var(--muted)}
.error-panel .button-row{margin-top:24px}

/* Footer */
.site-footer{
    color:#d8d3df;
    background:#18141f;
}
.footer-grid{
    display:grid;
    grid-template-columns:1.2fr .9fr .9fr;
    gap:54px;
    padding:62px 0 48px;
}
.site-footer h2{
    margin-bottom:14px;
    color:#fff;
    font-size:1rem;
    letter-spacing:0;
}
.footer-brand p{
    max-width:470px;
    color:#aaa3b3;
    font-size:.85rem;
}
.footer-brand .text-link{color:#d9ceff;font-size:.82rem}
.site-footer nav{display:grid;align-content:start;gap:8px}
.site-footer nav a{
    color:#afa8b7;
    font-size:.83rem;
}
.site-footer nav a:hover{color:#fff}
.footer-bottom{
    min-height:68px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    border-top:1px solid rgba(255,255,255,.1);
}
.footer-bottom p{margin:0;color:#817a89;font-size:.75rem}
.back-top{
    border:0;
    color:#cfc8d7;
    background:transparent;
    font-size:.76rem;
}

/* Motion */
@media (prefers-reduced-motion:no-preference){
    .work-card,
    .category-index__item,
    .guide-columns a,
    .route-row,
    .deep-link-grid a{transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease}
}
@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
        transition:none !important;
        animation:none !important;
    }
}

/* <= 1200 */
@media (max-width:1200px){
    :root{--shell:min(1120px,calc(100% - 40px))}
    .primary-nav a{padding-inline:9px;font-size:.86rem}
    .search-trigger span:last-child{display:none}
    .related-work-grid{grid-template-columns:repeat(4,1fr)}
    .related-work-grid .work-card:nth-child(5){display:none}
}

/* <= 1024 */
@media (max-width:1024px){
    .header-inner{
        grid-template-columns:auto auto 1fr auto;
        gap:14px;
    }
    .menu-toggle{display:block;order:2}
    .primary-nav{
        position:absolute;
        left:20px;
        right:20px;
        top:calc(100% + 8px);
        display:none;
        padding:12px;
        border:1px solid var(--line);
        border-radius:18px;
        background:var(--bg);
        box-shadow:var(--shadow);
    }
    .primary-nav.is-open{display:grid;grid-template-columns:repeat(3,1fr)}
    .primary-nav a{text-align:center}
    .search-trigger{justify-self:end}
    .home-lead,
    .recommend-hero__grid,
    .creation-hero__grid,
    .three-d-hero__grid,
    .work-detail__hero,
    .guide-hero__grid,
    .plain-hero__grid{
        gap:34px;
    }
    h1{font-size:clamp(2.1rem,5vw,3.7rem)}
    .featured-mosaic{grid-template-columns:1.15fr 1fr}
    .work-card--lead{grid-row:auto;grid-column:span 2}
    .category-index{grid-template-columns:repeat(2,1fr)}
    .guide-columns{grid-template-columns:repeat(2,1fr)}
    .recommend-strip__inner{grid-template-columns:1fr}
    .three-d-preview{gap:34px}
    .watch-grid{grid-template-columns:repeat(2,1fr)}
    .track-work-list{grid-template-columns:1fr;margin-left:74px}
    .track-work-list a{grid-template-columns:82px 1fr}
    .route-row{grid-template-columns:40px 190px 1fr 20px}
    .deep-link-grid{grid-template-columns:repeat(2,1fr)}
    .three-d-note-grid{grid-template-columns:repeat(2,1fr)}
    .guide-anchor-grid{grid-template-columns:repeat(3,1fr)}
    .related-work-grid{grid-template-columns:repeat(3,1fr)}
    .related-work-grid .work-card:nth-child(4){display:none}
    .safety-list{grid-template-columns:repeat(2,1fr)}
}

/* <= 768 */
@media (max-width:768px){
    :root{
        --shell:min(100% - 32px,720px);
        --narrow:min(100% - 32px,700px);
    }
    .section-block{padding:66px 0}
    .header-inner{min-height:66px}
    .brand-mark small{display:none}
    .primary-nav.is-open{grid-template-columns:repeat(2,1fr)}
    .home-lead,
    .recommend-hero__grid,
    .creation-hero__grid,
    .three-d-hero__grid,
    .work-detail__hero,
    .guide-hero__grid,
    .plain-hero__grid,
    .creation-window__grid,
    .three-d-preview,
    .index-focus-band__grid,
    .three-d-stage__grid,
    .creation-close__grid,
    .contact-note-band__grid,
    .safety-band__grid{
        grid-template-columns:1fr;
    }
    .home-lead{padding-top:42px}
    .lead-visual{max-width:560px}
    .lead-facts{display:grid;gap:6px}
    .split-heading{
        display:grid;
        align-items:start;
        gap:16px;
    }
    .featured-mosaic{grid-template-columns:1fr 1fr}
    .work-card--lead{grid-column:span 2}
    .category-index{grid-template-columns:1fr}
    .stream-row{grid-template-columns:150px 1fr;gap:18px}
    .recommend-quick{grid-template-columns:1fr}
    .directory-list a{grid-template-columns:1fr;gap:5px}
    .topic-mini-list a{grid-template-columns:1fr;gap:4px}
    .three-d-preview figure{order:-1}
    .guide-columns{grid-template-columns:1fr 1fr}
    .watch-header__grid{grid-template-columns:1fr}
    .filter-heading{display:grid;gap:8px}
    .watch-bottom__grid{display:grid}
    .compare-grid{grid-template-columns:1fr}
    .editor-note-panel{display:grid}
    .route-row{
        grid-template-columns:40px 1fr 22px;
        gap:10px;
    }
    .route-row>span:nth-child(3){
        grid-column:2/4;
        grid-row:2;
    }
    .route-arrow{grid-column:3;grid-row:1}
    .index-category-list{grid-template-columns:1fr}
    .principle-grid{grid-template-columns:1fr}
    .work-card--creation{grid-template-columns:150px 1fr}
    .work-detail__layout{
        grid-template-columns:1fr;
        gap:30px;
        padding-top:55px;
    }
    .work-sidebar{order:-1}
    .sticky-panel{position:static}
    .sticky-panel dl{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:0 18px;
    }
    .related-work-grid{grid-template-columns:repeat(2,1fr)}
    .related-work-grid .work-card:nth-child(4){display:block}
    .guide-anchor-grid{grid-template-columns:repeat(2,1fr)}
    .guide-next-grid{grid-template-columns:1fr}
    .faq-help-band__grid{display:grid}
    .empty-state{grid-template-columns:1fr}
    .empty-state img{max-width:420px}
    .prose-grid{grid-template-columns:1fr}
    .about-principles{grid-template-columns:1fr}
    .contact-grid{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1.2fr 1fr 1fr;gap:28px}
}

/* <= 600 */
@media (max-width:600px){
    :root{
        --shell:calc(100% - 28px);
        --narrow:calc(100% - 28px);
    }
    body{font-size:15px}
    h1{font-size:2.25rem}
    h2{font-size:1.65rem}
    .brand-mark img{width:38px;height:38px}
    .brand-mark strong{font-size:.92rem}
    .header-inner{grid-template-columns:auto auto 1fr auto}
    .menu-toggle{padding:4px}
    .search-trigger{padding:8px 10px}
    .search-trigger span:last-child{display:none}
    .primary-nav{left:14px;right:14px}
    .primary-nav.is-open{grid-template-columns:1fr 1fr}
    .section-block{padding:56px 0}
    .home-lead{padding:34px 0 52px}
    .button-row{align-items:stretch}
    .button-row .button{flex:1 1 auto}
    .lead-visual{padding:10px 10px 38px}
    .featured-mosaic{grid-template-columns:1fr}
    .work-card--lead{grid-column:auto}
    .work-card--compact .text-link{display:inline-flex}
    .category-band{padding:60px 0}
    .stream-row{grid-template-columns:1fr}
    .stream-image img{aspect-ratio:16/9}
    .recommend-strip{padding:62px 0}
    .guide-columns{grid-template-columns:1fr}
    .watch-grid{grid-template-columns:1fr}
    .track-work-list{margin-left:0}
    .recommend-track>.text-link{margin-left:0}
    .recommend-track__head{grid-template-columns:1fr}
    .track-number{width:40px;height:40px}
    .route-row{grid-template-columns:34px 1fr 18px}
    .deep-link-grid{grid-template-columns:1fr}
    .creation-example-grid{grid-template-columns:1fr}
    .work-card--creation{grid-template-columns:130px 1fr}
    .three-d-note-grid{grid-template-columns:1fr}
    .step-list li{grid-template-columns:1fr;gap:4px}
    .work-detail__header{padding-top:38px}
    .work-detail__layout{padding-bottom:60px}
    .article-body section{padding-bottom:38px;margin-bottom:38px}
    .sticky-panel dl{grid-template-columns:1fr}
    .related-work-grid{grid-template-columns:1fr 1fr}
    .guide-anchor-grid{grid-template-columns:1fr}
    .guide-entry{grid-template-columns:42px 1fr;gap:12px}
    .search-row{grid-template-columns:1fr}
    .search-dialog{padding:28px 22px}
    .safety-list{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr;padding-top:48px}
    .footer-bottom{align-items:flex-start;padding:18px 0}
}

/* <= 375 */
@media (max-width:375px){
    :root{
        --shell:calc(100% - 22px);
        --narrow:calc(100% - 22px);
    }
    h1{font-size:2rem}
    .brand-mark span{display:none}
    .header-inner{grid-template-columns:auto auto 1fr auto}
    .primary-nav.is-open{grid-template-columns:1fr}
    .lead-copy .button-row{display:grid}
    .category-index__item{grid-template-columns:66px 1fr}
    .category-index__item img{width:66px;height:76px}
    .work-card--creation{grid-template-columns:1fr}
    .work-card--creation .work-thumb img{aspect-ratio:16/9}
    .related-work-grid{grid-template-columns:1fr}
    .footer-bottom{display:grid}
}

/* Deep work reading */
.article-body .deep-reading{
    max-width:none;
}
.deep-reading__grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-top:22px;
}
.deep-reading__grid article{
    padding:20px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#fff;
}
.deep-reading__grid h3{
    font-size:1rem;
}
.deep-reading__grid p{
    margin-top:8px !important;
    font-size:.9rem !important;
    line-height:1.78;
}
@media (max-width:600px){
    .deep-reading__grid{grid-template-columns:1fr}
}

.review-checkpoints{
    margin-top:18px;
    padding:22px;
    border-radius:18px;
    background:var(--soft);
}
.review-checkpoints h3{font-size:1.05rem}
.review-checkpoints ol{
    display:grid;
    gap:12px;
    padding-left:22px;
    margin:16px 0 0;
}
.review-checkpoints li{
    padding-left:5px;
    color:#514b5a;
    font-size:.9rem;
    line-height:1.78;
}
.review-checkpoints li::marker{
    color:var(--brand-dark);
    font-weight:850;
}

/* Homepage category entries stay text-led to keep image use focused. */
.category-index__item{grid-template-columns:1fr;min-height:96px;padding:18px}