/* ==========================================================================
   M5 · Paper bands with brushstroke edges + M6 · chapter intros and content components
   ========================================================================== */
/* ---------- Paper band: cream paper laid over the painting, dry-brush top and bottom edges ---------- */
.on-paper{position:relative;isolation:isolate}
.on-paper::before{content:"";position:absolute;z-index:-1;top:calc(var(--edge,110px) * -.72);bottom:calc(var(--edge,110px) * -.72);left:var(--pl,0px);width:100vw;pointer-events:none;
  background:var(--light) url(../img/paper.jpg) 0 0/384px;background-blend-mode:multiply;
  -webkit-mask-image:url(../img/brush-top.png),linear-gradient(#000,#000),url(../img/brush-bottom.png);
  -webkit-mask-size:2400px var(--edge,110px),100% calc(100% - var(--edge,110px) * 2 + 2px),2400px var(--edge,110px);
  -webkit-mask-position:var(--ex,0) 0,0 50%,var(--ex2,-600px) 100%;
  -webkit-mask-repeat:repeat-x,no-repeat,repeat-x;
  mask-image:url(../img/brush-top.png),linear-gradient(#000,#000),url(../img/brush-bottom.png);
  mask-size:2400px var(--edge,110px),100% calc(100% - var(--edge,110px) * 2 + 2px),2400px var(--edge,110px);
  mask-position:var(--ex,0) 0,0 50%,var(--ex2,-600px) 100%;
  mask-repeat:repeat-x,no-repeat,repeat-x}
.on-paper.open-top::before{top:0;-webkit-mask-image:linear-gradient(#000,#000),linear-gradient(#000,#000),url(../img/brush-bottom.png);mask-image:linear-gradient(#000,#000),linear-gradient(#000,#000),url(../img/brush-bottom.png)}
@media (min-width:769px){.on-paper{--edge:160px}}

/* ---------- 章节 ---------- */
.chapter{position:relative;display:flex;justify-content:flex-end}
.ch-inner{position:relative;width:100%}
@media (min-width:940px){.ch-inner{width:80%}}
.ch-intro{min-height:70svh;display:flex;flex-direction:column;justify-content:flex-end;padding-inline:12px}
@media (min-width:769px){.ch-intro{min-height:140svh;justify-content:center;padding-inline:70px}}
@media (min-width:940px){.ch-intro{padding-inline:0}}
.ch-title{display:flex;flex-direction:column;justify-content:center;padding-block:40px;color:var(--light);pointer-events:none;transition:opacity .3s}
@media (min-width:769px){.ch-title{flex-grow:1;padding-block:130px}}
@media (min-width:940px){.ch-title{padding-top:var(--pt,11vh);padding-bottom:0;flex-grow:0}}
.ch-title .t{display:block}
.ch-title .t .en{font-family:"Inter Tight",var(--f-sans)}
.ch-narr{margin-bottom:70px;color:var(--light);pointer-events:auto}
@media (min-width:940px){.ch-narr{width:75%;margin-bottom:40px;padding-top:var(--np,11vh)}}
.chapter.dark-intro .ch-title,.chapter.dark-intro .ch-narr{color:var(--dark)}

/* 内容块：满宽（100cqw），桌面向左偏移 20cqw，与侧栏下方对齐 */
.blk{position:relative;z-index:2;display:block;width:100cqw;padding-bottom:60px}
@media (min-width:769px){.blk{padding-bottom:120px}}
@media (min-width:940px){.blk{left:-20cqw;padding-bottom:80px}}
.blk>.g{padding-inline:var(--gs)}
@media (min-width:940px){.blk>.g{max-width:80%;margin-left:auto;padding-left:0;padding-right:var(--gs-md)}}
.blk.light{color:var(--light)}
.blk.dark{color:var(--dark)}
.subhead{padding-block:60px}
@media (min-width:940px){.subhead{max-width:80%;margin-left:auto}}

/* XXL features and feature articles (original: article.grid-cols-subgrid, text col-span-6/5/4) */
.feat{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center;row-gap:0}
.feat .txt{grid-column:1/-1}
.feat .media{grid-column:1/-1;margin-top:20px}
.feat .media.wide{margin-top:50px;margin-inline:calc(var(--gs) * -1);width:calc(100% + var(--gs) * 2)}
.feat.split .txt{padding-bottom:24px}
@media (min-width:769px){.feat .media.wide{margin-inline:0;width:100%}.feat.split .txt{padding-bottom:0}}
@media (min-width:940px){
  .feat .txt{grid-column:span 6}
  .feat.x5 .txt{grid-column:span 5}
  .feat .txt.t4c{grid-column:span 4}
  .feat.vintro .txt{grid-column:span 5}
  .feat .md-6r{grid-column:6/span 7}
  .feat .md-8r{grid-column:5/span 8}
  .feat .md-10{grid-column:2/span 10}
  .feat .m6,.feat .md-6{grid-column:7/span 6}
  .feat.split .media{margin-top:0}
  .feat.stack .media{grid-column:1/-1}
}
@media (min-width:1080px){.feat.vintro .txt{grid-column:span 4}}
.feat h3,.feat h4{margin-bottom:15px}
.feat .rich-text{margin-bottom:15px}
.group-h{grid-column:1/-1;margin-top:20px}
.group-2{margin-top:4rem}
.feat .pt{padding-top:var(--ft,0)}
.big-h{margin-bottom:40px!important}

/* Cards (original: .card-container space-y-10, h3.bodycopy-1 mb-10, text-grey-dark) */
.cc{grid-column:span 2;display:flex;flex-direction:column;gap:10px}
.cc .card-h{margin-bottom:10px}
.cc .desc{margin-bottom:10px}
@media (min-width:640px){.cc.half-sm{grid-column:span 1}}
@media (min-width:769px){.cc{grid-column:span 6}.cc.q{grid-column:span 3}.cc.t4{grid-column:span 4}}
.cc h3,.cc h4{margin-bottom:0}
.cc .desc{color:var(--grey-dark);margin-top:0}
.blk.light .cc .desc{color:#cfcfc2}
.card-w{max-width:30em}

/* CTA pill (original: rounded-3 bg-light border grey-light, py-3 pl-5 pr-3, min-h 26px -> 21px,
   bodycopy-2 label + 13px bordered box holding a 7px arrow). Stays light on paintings too. */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:3px 3px 3px 5px;min-height:26px;border-radius:3px;background:var(--light);border:1px solid var(--grey-light);color:var(--dark);text-decoration:none!important;transition:background-color .15s,border-color .15s;vertical-align:top}
.cta .bodycopy-2{color:var(--dark);text-align:left;transition:color .15s}
.cta .ic{width:13px;height:13px;margin-top:1px;border-radius:2px;display:grid;place-items:center;border:1px solid var(--grey-light);background:var(--light);color:var(--dark);flex:none;transition:border-color .15s}
.cta .ic svg{width:7px;height:7px}
@media (min-width:769px){.cta{min-height:21px}.cta .ic{margin-top:0}}
@media (hover:hover){.cta:hover{background:var(--grey-light)}}
.cta:active{background:var(--dark);border-color:var(--dark)}
.cta:active .bodycopy-2{color:var(--light)}
.cta:active .ic{border-color:var(--light)}
.rich-text a{text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.12em}
.tip{position:relative}
.tip::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 6px);translate:-50% 4px;width:max-content;padding:8px;border-radius:3px;background:#292919;color:var(--light);font:700 14px/1.1 var(--f-sans);opacity:0;pointer-events:none;transition:opacity .2s,translate .2s}
.tip:hover::after,.tip:focus-visible::after{opacity:1;translate:-50% 0}

/* "More updates" list (original: full-bleed bg-grey-light panel, 400px texture, py-40 -> 60,
   two columns of col-span-5 with even items starting at column 7, title 2/5 + text 3/5) */
.flist{grid-column:1/-1;position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gs);row-gap:30px;
  padding:40px var(--gs);margin-inline:calc(var(--gs) * -1);background:var(--grey-light);color:var(--dark)}
.flist::before{content:"";position:absolute;inset:0;z-index:-1;background:url(../img/paper.jpg) 0 0/400px auto repeat;mix-blend-mode:multiply;opacity:.3;pointer-events:none}
@media (min-width:769px){.flist{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gs-md);padding-inline:var(--gs-md);margin-inline:calc(var(--gs-md) * -1)}}
@media (min-width:1080px){.flist{padding-block:60px}}
.flist>.fi{grid-column:span 2}
@media (min-width:769px){.flist>.fi{grid-column:span 5}.flist>.fi:nth-child(even){grid-column:7/span 5}}
.flist article{display:flex;flex-direction:column;gap:10px}
@media (min-width:1080px){.flist article{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:var(--gs-md)}.flist h3{grid-column:span 2}.flist .d{grid-column:span 3}}
.flist h3 a{text-decoration:none}
.flist h3 a:hover{text-decoration:underline}
.flist .d{color:var(--grey-dark)}

/* 米色面板（原版 div.bg-light） */
.panel{position:relative;z-index:2;background:transparent;color:var(--dark);pointer-events:auto}
.panel>.grid12{padding-top:20px;padding-bottom:0}

/* 媒体容器 */
.media{position:relative;width:100%}
.frame-bg{position:relative;overflow:hidden;border-radius:0}
.frame-bg>.pbg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.02)}
.frame-bg>.ui{position:relative}
.show-media{transition:opacity .8s var(--ease-out-cubic),transform 1s var(--ease-out-cubic)}
.js .show-media.pre{opacity:.001;transform:translateY(24px) scale(.985)}

/* Video cards + square play button (original: 54px, radius 6px, 2px #dcdcd0 border, #2929194d, blur) */
.vcard{grid-column:1/-1;position:relative;overflow:hidden;aspect-ratio:16/9;margin-inline:calc(var(--gs) * -1)}
@media (min-width:769px){.vcard{margin-inline:0}}
.vcard.full{margin-inline:calc(var(--gs) * -1);width:calc(100% + var(--gs) * 2)}
@media (min-width:769px){.vcard.full{margin-inline:calc(var(--gs-md) * -1);width:calc(100% + var(--gs-md) * 2)}}
.vcard .poster{position:absolute;inset:0}
.vcard .cap{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:20px var(--gs);pointer-events:none;color:var(--white);z-index:3}
@media (min-width:769px){.vcard .cap{padding-inline:var(--gs-md)}}
.vcard .cap p{max-width:26em;margin-bottom:10px}
.vplay{position:absolute;inset:0;display:grid;place-items:center;z-index:2}
.sq{width:3.375rem;height:3.375rem;border-radius:.375rem;display:grid;place-items:center;border:2px solid var(--grey-border);background:rgba(41,41,25,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--light);transition:background-color .15s,color .15s}
.sq svg{width:1.5rem;height:1.5rem}
.vplay:hover .sq,.vplay:focus-visible .sq{background:var(--light);color:var(--dark)}
.inline-video{grid-column:1/-1}
.inline-video .vcard{margin:0}

/* 返回导航（键盘用户） */
.back-nav{position:relative;display:flex;justify-content:center;width:100%}
.back-nav button{position:absolute;left:2px;bottom:2px;transform:translateY(calc(100% + 2px));z-index:50;padding:8px 16px;border-radius:8px;background:var(--dark);color:var(--light);font:500 12px var(--f-sans);opacity:0;pointer-events:none}
.back-nav button:focus-visible{opacity:1;pointer-events:auto}

.note-s{font:500 11px/1.5 var(--f-sans);color:var(--grey-mid);margin-top:10px}
.blk.light .note-s{color:#cfcfc2}

/* ---------- motion details ---------- */
/* chapter titles rise out of the painting as they arrive, then drift slower than the page */
.ch-title{transform:translate3d(0,var(--py,0px),0);will-change:transform}
.js .ch-title .t{transform:translate3d(0,.32em,0);opacity:0;filter:blur(8px);transition:transform 1.4s var(--ease-out-cubic),opacity 1s var(--ease-out-cubic),filter 1.2s var(--ease-out-cubic)}
.js .ch-intro.in .ch-title .t{transform:none;opacity:1;filter:none}
.js .ch-narr .rich-text{transform:translate3d(0,24px,0);opacity:0;transition:transform 1.2s var(--ease-out-cubic) .25s,opacity 1s var(--ease-out-cubic) .25s}
.js .ch-intro.in .ch-narr .rich-text{transform:none;opacity:1}
.js .subhead{transition:transform 1s var(--ease-out-cubic),opacity .8s}
.js .subhead.pre{transform:translate3d(0,20px,0);opacity:0}
/* painted grounds settle in when a card appears and breathe on hover */
.frame-bg>.pbg{transition:transform 2.6s cubic-bezier(.2,.7,.2,1)}
.show-media.pre .frame-bg>.pbg{transform:scale(1.12)}
@media (hover:hover){
  .cc:hover .frame-bg>.pbg,.feat:hover .frame-bg>.pbg{transform:scale(1.06);transition-duration:4s}
  .frame-bg>.ui>*{transition:transform .6s var(--ease-out-cubic),box-shadow .6s var(--ease-out-cubic)}
  .cc:hover .frame-bg>.ui>*,.feat:hover .frame-bg>.ui>*{transform:translate3d(0,-5px,0)}
}
@media (prefers-reduced-motion:reduce){
  .js .ch-title .t,.js .ch-narr .rich-text,.js .subhead.pre{transform:none!important;opacity:1!important;filter:none!important}
  .ch-title{transform:none}
}