/* Scroll-driven twin card lanes. Static two-column layout is the default. */
.card-wall { --wall-bg:#292d26; background:var(--wall-bg); color:#eae7da; }
.card-wall-stage { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.6fr); gap:7%; padding:75px var(--gutter); }
.card-wall-intro { align-self:start; padding:35px 0; min-width:0; }
.card-wall-intro .eyebrow { color:#a7ad9c; font-size:8px; margin-bottom:43px; }
.card-wall-intro .chapter-title { font-size:clamp(64px,6.5vw,110px); }
.card-wall-description { color:#b2b8a9; font-size:11px; line-height:1.9; margin-top:30px; }
.card-wall-seal { display:flex; width:145px; height:145px; border:1px solid #b8beaa45; border-radius:50%; justify-content:center; align-items:center; gap:14px; margin:48px 0; position:relative; }
.card-wall-seal::before { content:''; position:absolute; width:175px; height:1px; background:#b8beaa35; }
.card-wall-seal::after { content:''; position:absolute; height:175px; width:1px; background:#b8beaa35; }
.card-wall-seal span { font:400 12px var(--sans); position:relative; z-index:1; background:var(--wall-bg); }
.card-wall-seal i { font-style:normal; font-size:36px; line-height:1; position:relative; z-index:1; background:var(--wall-bg); padding:5px; }
.card-wall-meta { display:flex; align-items:center; justify-content:space-between; gap:25px; max-width:265px; }
.card-wall-meta .micro { font-size:8px; color:#aeb5a1; }
.card-wall-arrow { font-size:32px; }
.card-wall-progress { height:1px; background:#aeb5a133; max-width:265px; margin:22px 0; }
.card-wall-progress span { display:block; height:100%; background:#d7dabf; transform:scaleX(var(--wall-progress,.025)); transform-origin:left; }
.card-wall-footnote { color:#8b9580; font-size:7px; }
.card-wall-window { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:25px; min-width:0; }
.card-column { min-width:0; }
.card-cycle { display:flex; flex-direction:column; gap:25px; padding-bottom:25px; }
.card-cycle.is-clone { display:none; }
.archive-card { margin:0; min-width:0; padding:8px 8px 0; background:#e1e0d4; border:1px solid #f1eddf70; color:#33392d; }
.archive-media { position:relative; overflow:hidden; background:#939689; }
.archive-media.portrait { aspect-ratio:3 / 4; }
.archive-media img { display:block; width:100%; height:100%; object-fit:cover; object-position:77% center; }
.archive-media.inverted img { transform:rotate(180deg) scale(1.07); }
.archive-photo-mark { position:absolute; top:15px; left:17px; color:#eeeede; font-size:20px; line-height:1; }
.archive-media::after { content:''; position:absolute; inset:6%; border:1px solid #e4e5d93d; pointer-events:none; }
.archive-card figcaption { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 5px 14px; line-height:1.3; }
.archive-card figcaption > span:first-child { font-size:10px; letter-spacing:.015em; }
.archive-card figcaption > span:last-child { font-size:7px; color:#7a8170; white-space:nowrap; }
.archive-product { aspect-ratio:1; }
.archive-macro { aspect-ratio:1 / 1.15; background-image:url('assets/materials.png'); background-size:345% auto; background-repeat:no-repeat; }
.macro-chrome { background-position:0 center; }
.macro-amber { background-position:50% center; }
.archive-type { position:relative; overflow:hidden; aspect-ratio:1 / 1.08; padding:23px 22px 0; display:flex; flex-direction:column; justify-content:space-between; isolation:isolate; }
.archive-type > .micro { font-size:7px; }
.archive-type > p { font:400 clamp(46px,4.7vw,85px)/.95 var(--serif); letter-spacing:-.045em; margin:23px 0 0; }
.archive-type > p em { font-weight:400; }
.archive-type-cross { font-size:25px; align-self:end; padding:20px 0; }
.archive-type figcaption { border-top:1px solid #81876f40; padding-left:0; padding-right:0; margin-top:auto; }
.archive-type-dark { background:#353e31; color:#d8ddc9; border-color:#7684658c; }
.archive-type-dark > p { font-size:clamp(64px,7.4vw,126px); line-height:.8; margin-bottom:28px; }
.archive-type-dark > p em { margin-left:22%; }
.archive-type-dark figcaption > span:last-child { color:#a8b598; }
.archive-orbit-lines { position:absolute; inset:17% -30%; z-index:-1; rotate:-25deg; }
.archive-orbit-lines i { position:absolute; inset:0; border:1px solid #92a07833; border-radius:50%; }
.archive-orbit-lines i:last-child { rotate:75deg; }

html[data-motion=on] .card-wall.is-ready { height:340svh; }
html[data-motion=on] .card-wall.is-ready .card-wall-stage { position:sticky; top:0; height:100svh; min-height:520px; padding-top:0; padding-bottom:0; }
html[data-motion=on] .card-wall.is-ready .card-wall-intro { align-self:center; }
html[data-motion=on] .card-wall.is-ready .card-wall-window { overflow:hidden; height:100%; mask-image:linear-gradient(to bottom,transparent,#000 5%,#000 94%,transparent); }
html[data-motion=on] .card-wall.is-ready .card-lane { transform:translate3d(0,var(--lane-y,0px),0); will-change:transform; }
html[data-motion=on] .card-wall.is-ready .card-cycle.is-clone { display:flex; }
html[data-motion=on] .card-wall.is-ready .card-wall-seal i { rotate:var(--wall-angle,0deg); }
html[data-motion=off] .card-wall-meta { display:none; }
html[lang=zh-Hant] .card-wall-intro h2.chapter-title { font-size:clamp(48px,5.3vw,84px); line-height:1.2; }
html[lang=zh-Hant] .archive-type > p[data-i18n] { font-family:var(--serif),'PMingLiU',serif; font-size:clamp(25px,3vw,52px); line-height:1.2; }

@media(max-width:1100px) {
  .card-wall-stage { gap:5%; grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr); }
  .card-wall-intro .chapter-title { font-size:6.8vw; }
  .card-wall-window { gap:18px; }
  .card-cycle { gap:18px; padding-bottom:18px; }
  .card-wall-seal { width:115px; height:115px; margin:35px 0; }
  .card-wall-seal::before { width:140px; }
  .card-wall-seal::after { height:140px; }
  .archive-card figcaption { padding:11px 2px; }
  .archive-card figcaption > span:first-child { font-size:8px; }
  .archive-card figcaption > span:last-child { font-size:6px; }
  .archive-type { padding:18px 16px 0; }
}
@media(max-width:760px) {
  .card-wall-stage { display:flex; flex-direction:column; gap:0; padding:38px var(--gutter) 30px; }
  .card-wall-intro { padding:0 0 24px; width:100%; display:grid; grid-template-columns:1fr auto; align-items:end; gap:0 20px; }
  .card-wall-intro .eyebrow { grid-column:1 / -1; font-size:7px; margin-bottom:20px; }
  .card-wall-intro .chapter-title { font-size:12vw; }
  .card-wall-description { display:none; }
  .card-wall-seal { width:68px; height:68px; margin:0 8px 8px 0; gap:7px; }
  .card-wall-seal::before { width:82px; }
  .card-wall-seal::after { height:82px; }
  .card-wall-seal span { font-size:7px; }
  .card-wall-seal i { font-size:21px; padding:3px; }
  .card-wall-meta,.card-wall-footnote { display:none; }
  .card-wall-progress { grid-column:1 / -1; max-width:none; margin:22px 0 0; }
  .card-wall-window { gap:12px; flex:1; min-height:0; }
  .card-cycle { gap:13px; padding-bottom:13px; }
  .archive-card { padding:5px 5px 0; }
  .archive-card figcaption { padding:10px 1px; gap:4px; }
  .archive-card figcaption > span:first-child { font-size:7px; }
  .archive-card figcaption > span:last-child { font-size:5px; }
  .archive-photo-mark { top:9px; left:10px; font-size:15px; }
  .archive-type { padding:14px 12px 0; }
  .archive-type > .micro { font-size:5px; }
  .archive-type > p { font-size:10.5vw; margin-top:20px; }
  .archive-type-cross { font-size:18px; padding:18px 0; }
  .archive-type-dark > p { font-size:17vw; margin:24px 0 30px; }
  html[data-motion=on] .card-wall.is-ready { height:300svh; }
  html[data-motion=on] .card-wall.is-ready .card-wall-stage { min-height:0; padding-top:32px; }
  html[data-motion=on] .card-wall.is-ready .card-wall-window { height:auto; }
  html[lang=zh-Hant] .card-wall-intro h2.chapter-title { font-size:10.5vw; }
  html[lang=zh-Hant] .archive-type > p[data-i18n] { font-size:5.6vw; }
}
@media(max-height:640px) and (min-width:761px) {
  .card-wall-intro { padding:25px 0; }
  .card-wall-intro .eyebrow { margin-bottom:25px; }
  .card-wall-seal { display:none; }
  .card-wall-description { margin:20px 0 35px; }
}
@media(prefers-reduced-motion:reduce) {
  html .card-wall.is-ready { height:auto !important; }
  html .card-wall.is-ready .card-wall-stage { position:relative !important; height:auto !important; }
  html .card-wall.is-ready .card-wall-window { height:auto !important; overflow:visible !important; mask-image:none !important; }
  html .card-wall.is-ready .card-lane { transform:none !important; will-change:auto !important; }
  html .card-wall.is-ready .card-cycle.is-clone { display:none !important; }
}