/* ============ 青林艺术 · 关于页 ============ */
/* 字体系统：均为页面用字子集（改文案后需重新子集化，见 README） */
@font-face{font-family:"QL Serif";src:url(../fonts/serif-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"QL Serif";src:url(../fonts/serif-900.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"QL Sans";src:url(../fonts/sans-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"QL Sans";src:url(../fonts/sans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"QL Sans";src:url(../fonts/sans-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"QL Kai";src:url(../fonts/kai-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(../fonts/instrument.woff2) format("woff2");font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(../fonts/instrument-italic.woff2) format("woff2");font-style:italic;font-display:swap}
@font-face{font-family:"Jost";src:url(../fonts/jost-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/jetbrains-mono-var.woff2) format("woff2");font-weight:100 800;font-display:swap}
:root{
  --bg:#efe9dd; --fg:#1b1a17; --muted:#6d665a; --accent:#1f3b36; --line:rgba(27,26,23,.18);
  --serif:"Instrument Serif","QL Serif","Songti SC",serif;
  --sans:"QL Sans","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --kai:"Instrument Serif","QL Kai","Kaiti SC",serif;
  --en:"Instrument Serif","Times New Roman",serif;
  --geo:"Jost","Futura","Avenir Next",sans-serif;
  --mono:"JetBrains Mono","QL Sans",Menlo,monospace;
  --gutter:clamp(16px,4vw,64px);
  --bh-red:#d6281f; --bh-yellow:#f1c232; --bh-blue:#1c4fa0;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  background:var(--bg); color:var(--fg); font-family:var(--sans);
  font-size:clamp(15px,1vw,17px); font-weight:300; line-height:1.8; letter-spacing:.01em; overflow-x:hidden;
  transition:color .6s ease;
}
img{display:block;max-width:100%}
a{color:inherit}
.mono{font-family:var(--mono);letter-spacing:.02em;font-weight:400}
.en{font-family:var(--en);font-style:italic;font-weight:400;letter-spacing:0}
b,strong{font-weight:700}
body{font-synthesis-weight:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:var(--bg)}

/* ---------- 背景层 ---------- */
#bg{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;display:block}
.grain{position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}}
main{position:relative;z-index:2}

.cursor{position:fixed;left:0;top:0;z-index:60;pointer-events:none;mix-blend-mode:difference}
.cursor span{display:block;width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid #fff;border-radius:50%;
  transition:width .3s,height .3s,margin .3s,background .3s}
.cursor.is-link span{width:64px;height:64px;margin:-32px 0 0 -32px;background:#fff}
.cursor.is-drag span{width:84px;height:84px;margin:-42px 0 0 -42px}
.cursor.is-drag span::after{content:"DRAG";font:600 10px var(--mono);color:#fff;position:absolute;inset:0;display:grid;place-items:center}
@media (hover:none){.cursor{display:none}}

/* ---------- 导航 ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;
  padding:18px var(--gutter);mix-blend-mode:difference;color:#fff}
.nav__logo{font:900 19px/1 var(--serif);letter-spacing:.04em;text-decoration:none;display:flex;align-items:baseline;gap:10px}
.nav__logo small{font:10px var(--mono);letter-spacing:.2em;opacity:.7}
.nav__links{display:flex;gap:clamp(12px,2vw,32px);font-size:14px}
.nav__links a{text-decoration:none;position:relative}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1px;background:currentColor;transition:right .35s}
.nav__links a:hover::after{right:0}
.nav__progress{position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.15)}
.nav__progress i{display:block;height:100%;background:#fff;transform-origin:0 50%;transform:scaleX(0)}
@media (max-width:720px){.nav__links{display:none}}

/* ---------- 固定章节标签 ---------- */
.chapter-tag{position:fixed;left:var(--gutter);bottom:28px;z-index:40;display:flex;align-items:baseline;gap:12px;
  mix-blend-mode:difference;color:#fff;pointer-events:none}
.chapter-tag__no{font-size:12px;opacity:.7}
.chapter-tag__name{font:400 14px var(--sans);letter-spacing:.2em;display:inline-block}

/* ---------- 通用 ---------- */
.chapter{position:relative;padding:clamp(80px,14vh,160px) var(--gutter)}
.kicker{display:block;font-size:12px;letter-spacing:.18em;opacity:.65;margin-bottom:18px}
.h2{font:900 clamp(34px,4.8vw,76px)/1.12 var(--serif);letter-spacing:-.02em}
.h2 .en{display:block;font-size:.42em;line-height:1.2;margin-top:.35em;opacity:.6}
.split .ch{display:inline-block;will-change:transform}
.split .ln{overflow:hidden;padding-bottom:.06em}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;background:var(--fg);color:var(--bg);
  text-decoration:none;font-size:14px;font-weight:400;letter-spacing:.06em;transition:transform .3s,background .3s}
.btn:hover{transform:translateY(-2px)}
.btn--line{background:transparent;border:1px solid currentColor;color:inherit}
.btn--big{font-size:clamp(15px,1.4vw,19px);padding:16px 30px}

/* ---------- §00 Hero ---------- */
.hero{min-height:100vh;display:grid;grid-template-rows:auto 1fr auto;padding-top:96px;overflow:hidden}
.hero__meta{display:flex;justify-content:space-between;gap:12px;font-size:11px;border-top:1px solid var(--line);padding-top:10px;flex-wrap:wrap}
.hero__title{position:relative;z-index:5;font:900 clamp(56px,11vw,172px)/1 var(--serif);letter-spacing:-.04em;margin-top:5vh;pointer-events:none}
.hero__title .line{display:block;overflow:hidden}
.hero__title .line--sub{font:300 clamp(15px,1.7vw,26px)/1.4 var(--sans);letter-spacing:.62em;margin-top:1.1em;padding-left:.3em}
.hero__title .line--en{font:italic 400 clamp(18px,2.2vw,34px)/1.2 var(--en);letter-spacing:0;margin-top:.5em;padding-left:.2em;opacity:.7}
/* ⑤ grid + z-index：编辑级层叠 */
.hero__collage{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(8,minmax(40px,6vh));gap:12px;margin-top:-18vh;position:relative}
.hc{margin:0;position:relative}
.hc img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.hc figcaption{position:absolute;left:0;bottom:-20px;font-size:10px;opacity:.7;white-space:nowrap}
.hc--a{grid-column:6/11;grid-row:1/7;z-index:1}
.hc--b{grid-column:9/13;grid-row:4/9;z-index:3;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.hc--c{grid-column:1/5;grid-row:4/9;z-index:4;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.hc--txt{grid-column:5/9;grid-row:7/9;z-index:6;align-self:end;padding:14px 18px;background:var(--bg);font:300 clamp(14px,1.2vw,18px)/1.8 var(--sans)}
.hc--txt b{background:linear-gradient(transparent 60%,rgba(214,40,31,.25) 60%)}
.hero__scroll{display:flex;align-items:center;gap:12px;font-size:11px;margin-top:40px;justify-self:end}
.hero__scroll i{width:60px;height:1px;background:currentColor;transform-origin:0 50%;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%{transform:scaleX(0)}50%{transform:scaleX(1);transform-origin:0 50%}51%{transform-origin:100% 50%}100%{transform:scaleX(0);transform-origin:100% 50%}}
@media (max-width:720px){
  .hero__title{margin-top:6vh}
  .hero__collage{margin-top:4vh;grid-template-rows:repeat(8,34px)}
  .hc--a{grid-column:3/13;grid-row:1/6}
  .hc--b{grid-column:8/13;grid-row:4/9}
  .hc--c{grid-column:1/7;grid-row:5/9}
  .hc--txt{grid-column:1/9;grid-row:1/4;font-size:15px;background:var(--bg);padding:8px;align-self:start}
  .hc figcaption{display:none}
}

/* ---------- §01 Statement ---------- */
.statement{min-height:100vh;display:flex;align-items:center}
.statement__text{font:400 clamp(22px,3vw,46px)/1.55 var(--serif);max-width:24em;letter-spacing:-.01em}
.statement__text em{font-style:normal;font-family:var(--kai);color:var(--bh-yellow)}
.statement__text u{text-decoration:none;border-bottom:2px solid currentColor}
.reveal-words .w{opacity:.14;transition:none}

/* ---------- §02 Why（① sticky） ---------- */
.why{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gutter)}
.why__sticky{position:sticky;top:18vh;align-self:start}
.why__lead{margin-top:24px;max-width:18em;opacity:.8}
.why__counter{margin-top:48px;font-size:14px}
.why__counter b{font:italic 400 56px var(--en)}
.why__list{list-style:none}
.why__list li{min-height:62vh;display:flex;flex-direction:column;justify-content:center;border-top:1px solid rgba(239,233,221,.2)}
.why__list li span{font-size:12px;color:#e2574c;margin-bottom:12px}
.why__list h3{font:400 clamp(24px,3vw,46px)/1.35 var(--serif);letter-spacing:-.01em}
.why__close{grid-column:1/-1;font:300 clamp(16px,1.5vw,22px)/1.9 var(--sans);max-width:30em;margin-left:auto;padding-top:10vh}
@media (max-width:820px){
  .why{grid-template-columns:1fr}
  .why__sticky{top:70px;padding:12px 0;z-index:2}
  .why__counter{margin-top:12px}.why__counter b{font-size:28px}
  .why__list li{min-height:44vh}
}

/* ---------- §03 Focus（① sticky 产品） ---------- */
.focus__body{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);margin-top:8vh}
.focus__stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;perspective:1400px}
.book{position:relative;width:min(34vw,440px);aspect-ratio:3/4;transform-style:preserve-3d;transform:rotateY(-18deg) rotateX(6deg)}
.book__page{position:absolute;inset:0;overflow:hidden;border-radius:4px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);
  clip-path:inset(100% 0 0 0);transition:clip-path 1s cubic-bezier(.7,0,.2,1)}
.book__page.is-on{clip-path:inset(0 0 0 0)}
.book__page img{width:100%;height:100%;object-fit:cover;transform:scale(1.15);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.book__page.is-on img{transform:scale(1)}
.book__page span{position:absolute;left:16px;bottom:14px;font-size:12px;color:#fff;background:rgba(0,0,0,.45);padding:4px 8px}
.book__spine{position:absolute;top:0;bottom:0;left:-26px;width:26px;background:#10231f;color:#cfe3d9;font-size:10px;
  writing-mode:vertical-rl;display:grid;place-items:center;letter-spacing:.3em;transform:rotateY(90deg);transform-origin:right}
.focus__item{min-height:100vh;display:flex;flex-direction:column;justify-content:center;max-width:30em}
.focus__item .num{font:italic 400 clamp(40px,4vw,64px)/1 var(--en);opacity:.5}
.focus__item h3{font:900 clamp(26px,2.8vw,44px)/1.2 var(--serif);margin:12px 0 18px;letter-spacing:-.02em}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tags span{font-size:12px;border:1px solid currentColor;padding:3px 10px;border-radius:999px;opacity:.8}
@media (max-width:820px){
  .focus__body{grid-template-columns:1fr}
  .focus__stage{top:60px;height:44vh;z-index:1}
  .book{width:52vw}
  .focus__item{min-height:70vh;position:relative;z-index:2}
  .focus__item>*{background:var(--bg)}
}

/* ---------- §04 Topics（横向胶片） ---------- */
.topics{padding:0;height:100vh;overflow:hidden}
.topics__hint{position:absolute;top:80px;left:var(--gutter);right:var(--gutter);z-index:10;display:flex;justify-content:space-between;font-size:12px;
  color:#fff;mix-blend-mode:difference;pointer-events:none}
.topics__count b{font-size:22px;font-weight:400}
.topics__track{display:flex;height:100%;width:max-content;will-change:transform;cursor:grab}
.topics__track:active{cursor:grabbing}
.slide{position:relative;width:100vw;height:100vh;flex:none;overflow:hidden;user-select:none}
.slide img{-webkit-user-drag:none;pointer-events:none}
/* ③ object-fit:cover 全屏 */
.slide__img{position:absolute;inset:0;overflow:hidden}
.slide__img img{width:100%;height:100%;object-fit:cover}
.slide__card{position:absolute;z-index:5;padding:clamp(20px,3vw,44px);max-width:min(460px,86vw)}
.slide__card>span{font-size:11px;letter-spacing:.14em;display:block;margin-bottom:14px}
.slide__card ul{list-style:none;margin:18px 0 26px;font-size:13px;line-height:2}
.slide__card ul li::before{content:"— "}
.slide__card p{margin:16px 0 24px}

/* 包豪斯 */
.slide--bauhaus{background:#efe9dd}
.slide--bauhaus .slide__img{left:38%;clip-path:polygon(0 0,100% 0,100% 100%,14% 100%)}
.slide--bauhaus .slide__img img{filter:grayscale(1) contrast(1.15)}
.slide--bauhaus .slide__card{left:var(--gutter);top:50%;transform:translateY(-50%);background:#efe9dd;color:#111;border:3px solid #111}
.bh-title{font:700 clamp(52px,6.6vw,104px)/.84 var(--geo);letter-spacing:-.02em;text-transform:uppercase}
.bh-title small{display:block;font:700 15px var(--sans);letter-spacing:.4em;margin-top:14px;color:var(--bh-red)}
.slide--bauhaus .btn{background:var(--bh-red);color:#fff;border-radius:0}
.bh-shapes i{position:absolute;z-index:4;mix-blend-mode:multiply}
.bh-circle{width:26vmin;height:26vmin;border-radius:50%;background:var(--bh-yellow);right:8%;top:10%}
.bh-square{width:18vmin;height:18vmin;background:var(--bh-blue);right:30%;bottom:8%}
.bh-tri{width:0;height:0;border-left:13vmin solid transparent;border-right:13vmin solid transparent;border-bottom:22vmin solid var(--bh-red);right:4%;bottom:14%;mix-blend-mode:normal!important;opacity:.92}
.bh-bar{width:40vw;height:14px;background:#111;left:34%;top:62%;transform:rotate(-8deg)}

/* 顾恺之 */
.slide--gu{background:#d8c9a6;color:#2a2217}
.gu-scroll{position:absolute;left:0;top:50%;height:62vh;transform:translateY(-50%);filter:sepia(.25) contrast(1.05);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.gu-scroll img{height:100%;width:auto;max-width:none}
.slide--gu .slide__card{right:var(--gutter);top:6vh;bottom:6vh;display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(90deg,rgba(216,201,166,0),rgba(216,201,166,.94) 18%);padding-left:80px}
.gu-title{font:500 clamp(52px,6.4vw,100px)/1.05 var(--kai)}
.gu-quote{font:500 clamp(18px,1.6vw,24px)/1.7 var(--kai);letter-spacing:.2em;border-left:3px solid #9b2c1f;padding-left:14px}
.slide--gu .btn{background:#9b2c1f;color:#f4ecd8}
.seal{position:absolute;left:6vw;bottom:9vh;z-index:6;width:74px;height:74px;border:3px solid #b3261e;color:#b3261e;font:500 26px/1.1 var(--kai);
  display:grid;place-items:center;writing-mode:vertical-rl;transform:rotate(-6deg);letter-spacing:.1em}
@media (max-width:720px){.slide--gu .slide__card{left:0;right:0;top:auto;bottom:0;background:rgba(216,201,166,.94);padding:20px var(--gutter)}.gu-title{font-size:56px}.gu-scroll{top:30%;height:40vh}}

/* 敦煌 */
.slide--dh{background:#7a3421;color:#f3e3c3}
.dh-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(12,1fr);padding:6vh 4vw}
.dh-grid .slide__img{position:relative}
.dh-a{grid-column:5/11;grid-row:2/12;z-index:1;border:10px solid #3f7d6e}
.dh-b{grid-column:9/13;grid-row:6/12;z-index:2;border:6px solid #e8c68a;box-shadow:-30px 30px 60px -20px rgba(0,0,0,.5)}
.slide--dh .slide__card{left:var(--gutter);bottom:10vh;z-index:3}
.dh-title{font:900 clamp(68px,9.5vw,148px)/1 var(--serif);letter-spacing:.06em;color:#e8c68a;text-shadow:0 10px 40px rgba(0,0,0,.35)}
.slide--dh .btn{background:#3f7d6e;color:#f3e3c3}
@media (max-width:720px){.dh-a{grid-column:2/13;grid-row:1/8}.dh-b{grid-column:7/13;grid-row:5/9}.slide--dh .slide__card{bottom:4vh}}

/* 文艺复兴 */
.slide--rn{background:#18244a;color:#efe2c0}
.slide--rn .slide__img{left:auto;right:0;width:56%;border-radius:50vw 50vw 0 0 / 40vw 40vw 0 0;top:10vh;height:90vh;margin-right:4vw}
.rn-arch{position:absolute;right:calc(4vw - 14px);top:calc(10vh - 14px);width:calc(56% + 28px);height:calc(90vh + 14px);border:1px solid #c9a24a;border-bottom:0;border-radius:50vw 50vw 0 0 / 40vw 40vw 0 0;z-index:2;pointer-events:none}
.slide--rn .slide__card{left:var(--gutter);top:50%;transform:translateY(-50%)}
.rn-title{font:italic 400 clamp(40px,4.6vw,72px)/1 var(--en);color:#c9a24a;letter-spacing:-.01em}
.rn-title small{display:block;font:300 15px var(--sans);font-style:normal;color:#efe2c0;letter-spacing:.4em;margin-top:14px}
.slide--rn .btn{background:#c9a24a;color:#18244a}
@media (max-width:720px){.slide--rn .slide__img{width:92%;height:60vh;top:auto;bottom:0}.rn-arch{display:none}.slide--rn .slide__card{top:18%;transform:none}}

/* 滑块控件（按钮 / 圆点） */
.arrow{width:48px;height:48px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;font:400 18px var(--mono);
  transition:background .3s,color .3s,transform .2s,opacity .3s}
.arrow:active{transform:scale(.92)}
.arrow[disabled]{opacity:.25;pointer-events:none}
.topics__nav{position:absolute;right:var(--gutter);bottom:26px;z-index:10;display:flex;align-items:center;gap:14px;color:#fff;mix-blend-mode:difference}
.topics__nav .arrow:hover{background:#fff;color:#000;box-shadow:none}
.dots{display:flex;gap:8px}
.dots button{width:8px;height:8px;border-radius:99px;background:currentColor;opacity:.35;transition:width .4s,opacity .4s;padding:0}
.dots button.on{width:32px;opacity:1}
.dots button::before{content:"";display:block;margin:-10px;height:28px}
.tl__ctrl{display:flex;align-items:center;gap:12px}
.tl__ctrl .arrow:hover{background:var(--fg);color:var(--bg);box-shadow:none}
.tl__bar{height:2px;background:var(--line);margin-top:40px;position:relative;overflow:hidden}
.tl__bar i{position:absolute;inset:0;background:var(--fg);transform-origin:0 50%;transform:scaleX(.2)}
@media (max-width:720px){.topics__nav{bottom:18px;right:16px}.arrow{width:40px;height:40px}.timeline__tip{display:none}}

/* ---------- §05 Method（④ 固定标题 + ② 等宽） ---------- */
.method{color:#d7f5d3;min-height:100vh}
.method__pin{height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;pointer-events:none}
.method__word{font:900 clamp(110px,20vw,300px)/1 var(--serif);color:transparent;-webkit-text-stroke:1px rgba(215,245,211,.55)}
.method__sub{font-size:clamp(12px,1.2vw,16px);opacity:.75;margin-top:10px}
.method__list{position:relative;z-index:3;max-width:760px;margin:-40vh auto 0}
.check{display:flex;gap:18px;padding:4vh 0;min-height:36vh;align-items:center;border-bottom:1px dashed rgba(215,245,211,.25)}
.check p,.check__box{background:rgba(6,16,10,.82);box-shadow:0 0 0 10px rgba(6,16,10,.82);border-radius:2px}
.check__box{color:#7ee787;flex:none;font-size:clamp(16px,2vw,26px)}
.check p{font:300 clamp(18px,2.1vw,30px)/1.5 var(--sans)}
.check b{color:#fff;background:rgba(126,231,135,.15);padding:0 .15em}
.diag{position:relative;z-index:3;max-width:760px;margin:16vh auto 0;border:1px solid rgba(215,245,211,.3);background:rgba(4,12,8,.72);backdrop-filter:blur(6px)}
.diag__bar{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:1px solid rgba(215,245,211,.2);font-size:12px}
.diag__bar i{width:10px;height:10px;border-radius:50%;background:#e2574c}.diag__bar i:nth-child(2){background:#f1c232}.diag__bar i:nth-child(3){background:#7ee787}
.diag__bar span{margin-left:10px;opacity:.6}
.diag__body{padding:22px;font-size:clamp(12px,1.25vw,15px);line-height:2;white-space:pre-wrap;min-height:20em}
.diag__body em{font-style:normal}.diag__body .w{color:#ffb86b}.diag__body .o{color:#7ee787}
.diag__body.typing::after{content:"▋";animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.diag .btn{margin:0 22px 22px;color:#d7f5d3}

/* ---------- §06 Timeline（可拖拽） ---------- */
.timeline{overflow:hidden}
.timeline__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px}
.timeline__tip{font-size:12px;opacity:.6}
.tl{position:relative;margin-top:8vh}
.tl__rail{position:absolute;left:calc(-1 * var(--gutter));right:calc(-1 * var(--gutter));top:calc(min(34vw,300px) + 22px);height:1px;background:var(--fg);opacity:.35}
.tl__track{display:flex;gap:clamp(16px,2.4vw,36px);width:max-content;cursor:grab;touch-action:pan-y}
.tl__track:active{cursor:grabbing}
.tl__card{width:clamp(220px,24vw,340px);user-select:none;position:relative}
.tl__card figure{height:min(34vw,300px);overflow:hidden;margin-bottom:34px;background:#ddd;position:relative}
.tl__card img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;transform:scale(1.08);transition:transform .8s}
.tl__card:hover img{transform:scale(1)}
.tl__card>span{font-size:12px;color:var(--muted);position:relative}
.tl__card>span::before{content:"";position:absolute;left:0;top:-19px;width:9px;height:9px;border-radius:50%;background:var(--fg)}
.tl__card h4{font:900 clamp(18px,1.5vw,24px)/1.3 var(--serif);margin:6px 0}
.tl__card p{font-size:14px;color:var(--muted)}
.tl__card--key>span::before{background:var(--bh-red);width:13px;height:13px;top:-21px}
.bh-mini{background:#efe9dd!important;border:3px solid #111}
.bh-mini i{position:absolute}
.bh-mini i:nth-child(1){width:46%;aspect-ratio:1;border-radius:50%;background:var(--bh-yellow);left:10%;top:12%}
.bh-mini i:nth-child(2){width:34%;aspect-ratio:1;background:var(--bh-blue);right:10%;bottom:12%}
.bh-mini i:nth-child(3){border-left:40px solid transparent;border-right:40px solid transparent;border-bottom:70px solid var(--bh-red);right:14%;top:12%}
.memphis{background:
  radial-gradient(circle at 20% 30%,#111 2px,transparent 3px) 0 0/22px 22px,
  linear-gradient(135deg,transparent 40%,#ff4f9a 40%,#ff4f9a 60%,transparent 60%) 0 0/60px 60px,
  #ffd23f!important;position:relative}
.memphis::before{content:"";position:absolute;width:40%;aspect-ratio:1;border-radius:50%;background:#2fb7ec;right:12%;top:18%;border:4px solid #111}
.memphis::after{content:"";position:absolute;left:10%;bottom:14%;width:60%;height:18px;background:repeating-linear-gradient(90deg,#111 0 10px,transparent 10px 20px);transform:rotate(-10deg)}
.timeline__cta{margin-top:8vh}

/* ---------- §07 Fit ---------- */
.fit__grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:6vh;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.fit__cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(20px,3vw,44px);min-height:26vh;display:flex;flex-direction:column;justify-content:space-between;gap:20px;transition:background .4s,color .4s}
.fit__cell:hover{background:var(--fg);color:var(--bg)}
.fit__cell b{font-size:14px;font-weight:400;opacity:.6}
.fit__cell p{font:300 clamp(16px,1.4vw,21px)/1.7 var(--sans)}
.fit__cell b.mono{font:italic 400 32px/1 var(--en)}
.fit__cell--cta{background:var(--accent);color:#efe9dd}
.fit__cell--cta a{text-decoration:none;border-bottom:1px solid rgba(239,233,221,.3);padding:6px 0;display:block}
.fit__cell--cta:hover{background:var(--accent)}
@media (max-width:820px){.fit__grid{grid-template-columns:1fr}}

/* ---------- §08 Next ---------- */
.next{color:#f7e9dc;overflow:hidden}
.marquee{margin:4vh calc(-1 * var(--gutter));white-space:nowrap;overflow:hidden}
.marquee__in{display:inline-block;font:900 clamp(40px,6vw,96px)/1.2 var(--serif);letter-spacing:-.02em;padding-right:1em;will-change:transform}
.next__list{list-style:none;margin-top:6vh;border-top:1px solid rgba(247,233,220,.3)}
.next__list li{display:grid;grid-template-columns:60px 1fr auto;align-items:center;padding:18px 0;border-bottom:1px solid rgba(247,233,220,.3);font:400 clamp(15px,1.5vw,21px) var(--sans);transition:padding .3s}
.next__list li:hover{padding-left:16px}
.next__list span{font-size:12px;opacity:.6}
.next__list em{font-style:normal;font-size:11px;border:1px solid currentColor;padding:2px 10px;border-radius:999px}
.next__note{margin:5vh 0 3vh;opacity:.8}
.next .btn{background:#f7e9dc;color:#8e2a1b}

/* ---------- Footer ---------- */
.foot{position:relative;background:#0d0d0c;color:#b9b2a4;padding:60px var(--gutter) 32px}
.foot__brand{font:900 36px var(--serif);color:#efe9dd;display:flex;flex-direction:column}
.foot__brand small{font-size:11px;letter-spacing:.2em;color:#8a8375;margin-top:6px}
.foot__credits{margin:36px 0;font-size:11px}
.foot__credits summary{cursor:pointer;opacity:.7}
.foot__credits ul{list-style:none;margin-top:12px;line-height:1.9;opacity:.65}
.foot__legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px;border-top:1px solid #2a2a27;padding-top:18px}
.foot__legal a{text-decoration:none}

@media (prefers-reduced-motion:reduce){
  .grain,.hero__scroll i{animation:none}
}
.topics__track.is-dragging .slide__card{pointer-events:none}