/* Store launch: one editorial layer over the preserved Archive and viewer. */
:root{--paper:#f2f0eb;--ink:#111e2d;--navy:#172b40;--ink-soft:#495d70;--ink-faint:#586b7c;--line:#c9d0d3;--surface:#f8f7f3}
body{background:var(--paper);color:var(--ink);font-family:var(--font-sans)}
a:focus-visible,button:focus-visible,select:focus-visible{outline:2px solid #355e7d;outline-offset:5px}
.site-header{background:rgba(242,240,235,.96);box-shadow:none;border-bottom:1px solid var(--line);height:82px}
.site-header .wordmark{font-size:14px;letter-spacing:.2em;font-weight:500}
.site-header button{border-radius:0;background:transparent;border:0;min-height:44px}
#archive-page.page{max-width:var(--measure);margin:0 auto;padding:0 var(--pad)}
#archive-page .hero{margin:0 calc(-1 * var(--pad));border-radius:0;box-shadow:none;background:transparent;overflow:visible;position:relative}
#archive-page .hero__art{margin:0;position:relative;overflow:hidden;border-radius:0}
#archive-page .hero__art picture{display:block}
#archive-page .hero__art img{width:100%;height:auto;aspect-ratio:1672/941;object-fit:contain;filter:none;transform:none}
#archive-page .hero__lead{position:static;inset:auto;max-width:none;width:auto;display:flex;align-items:baseline;justify-content:space-between;gap:24px;background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;padding:27px var(--pad) 32px;color:var(--ink)}
#archive-page .hero__title{font-size:clamp(25px,3.4vw,43px);font-weight:400;line-height:1.2;letter-spacing:.06em}
#archive-page .hero__text{font-size:11px;letter-spacing:.16em;color:var(--ink-soft);line-height:1.6;white-space:normal;margin:0}
#archive-page .generations{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0}
#archive-page .gen{position:relative;padding:27px 24px;min-height:288px;background:transparent;border:0;border-right:1px solid var(--line);border-radius:0;box-shadow:none;transform:none;transition:background .6s var(--ease),color .6s var(--ease);overflow:hidden}
#archive-page .gen:first-child{padding-left:0}
#archive-page .gen:last-child{border-right:0}
#archive-page .gen--primary{background:#e3e9ec;color:var(--navy)}
#archive-page .gen:hover,#archive-page .gen:focus-visible{background:#e9eae6;transform:none;box-shadow:none}
#archive-page .gen--primary:hover,#archive-page .gen--primary:focus-visible{background:#d9e3e9}
#archive-page .gen::after{left:24px;right:24px;bottom:0;height:2px;background:var(--navy);transform-origin:left}
#archive-page .gen__head{display:flex;flex-direction:column;align-items:flex-start;gap:15px;margin:0 0 20px}
#archive-page .gen__head .u-chip{padding:0;background:transparent;border:0;backdrop-filter:none;border-radius:0;font-size:9px;letter-spacing:.08em;font-weight:500;color:var(--ink-soft)}
#archive-page .gen__id{width:100%;display:flex;align-items:center;justify-content:space-between;gap:6px}
#archive-page .gen__id .u-label{padding:0;color:var(--ink-soft);font-size:10px;letter-spacing:.12em;font-weight:500}
#archive-page .gen__index,#archive-page .gen--primary .gen__index{position:static;color:var(--navy);font-size:42px;line-height:1;letter-spacing:-.04em;opacity:.26;transition:opacity .6s var(--ease)}
#archive-page .gen:hover .gen__index{opacity:.6}
#archive-page .gen__name,#archive-page .gen--primary .gen__name{font-size:18px;font-weight:500;letter-spacing:.06em;color:var(--ink);margin:0 0 12px}
#archive-page .gen__desc,#archive-page .gen--primary .gen__desc{font-size:12px;line-height:1.8;max-width:29em;color:var(--ink-soft);margin:0 0 25px}
#archive-page .gen__cta,#archive-page .gen--primary .gen__cta{font-size:10px;font-weight:500;letter-spacing:.06em;color:var(--navy);padding-top:14px;border-top:1px solid #c2cdd3;margin-top:auto}
#archive-page .foot{border:0;color:var(--ink-soft);font-size:9px;letter-spacing:.06em;padding:24px 0 32px}
.gateway{position:relative;isolation:isolate;min-height:calc(100dvh - 82px);overflow:hidden;background:var(--paper)}
.gateway__art{position:absolute;z-index:-1;right:-12%;top:-4%;width:100%;height:100%;object-fit:cover;object-position:right center;opacity:.28;mask-image:linear-gradient(to right,transparent 35%,#000 100%);pointer-events:none}
.gateway__inner{max-width:var(--measure);margin:0 auto;padding:28px var(--pad) 20px}
.gateway__back{display:inline-block;font-size:10px;letter-spacing:.09em;color:var(--ink-soft);padding:9px 0;border-bottom:1px solid var(--line)}
.gateway__heading{padding:46px 0 34px}
.gateway__heading .u-label{font-size:10px;font-weight:500;letter-spacing:.18em;margin-bottom:15px}
.gateway__heading h1{font-size:clamp(38px,5.3vw,68px);font-weight:400;letter-spacing:-.03em;line-height:1.12;outline:none}
.gateway__intro{font-size:12px;letter-spacing:.1em;margin-top:19px;color:var(--ink-soft)}
.experience-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.experience{display:flex;flex-direction:column;padding:29px 48px 25px 0;min-width:0}
.experience+.experience{padding-left:48px;border-left:1px solid var(--line)}
.experience__meta{font-size:9px;letter-spacing:.15em;display:flex;gap:24px;color:var(--ink-soft);margin-bottom:23px}
.experience h2{font-size:clamp(25px,3vw,39px);line-height:1.2;font-weight:500;letter-spacing:-.02em;margin-bottom:20px}
.experience__statement{font-size:13px;line-height:1.8;letter-spacing:.04em;white-space:pre-line;min-height:48px}
.experience__features{list-style:none;margin:23px 0 29px;padding:0;font-size:12px;line-height:2.1;color:var(--ink-soft)}
.experience__features li:before{content:'—';margin-right:10px;color:#718799}
.experience__action{display:flex;align-items:center;gap:10px;min-height:50px;border-top:1px solid #8fa2b0;border-bottom:1px solid #8fa2b0;font-size:11px;letter-spacing:.08em;font-weight:600;margin-top:auto;transition:background .5s var(--ease),padding .5s var(--ease)}
.experience__action>span:last-child{margin-left:auto;font-size:18px;font-weight:400}
.experience__action:hover{background:#dce5e98c;padding-left:10px;padding-right:10px}
.experience__note{font-size:10px;color:var(--ink-soft);margin-top:12px}
.gateway__footer{display:flex;justify-content:space-between;gap:18px;border-top:1px solid var(--line);padding:20px 0 3px;font-size:9px;letter-spacing:.13em;color:var(--ink-soft)}
.viewing .site-header{height:72px;background:linear-gradient(#f2f0ebeb,transparent);border:0}
.viewing .viewer-heading{top:82px}
.viewer-heading a{font-size:10px}
.viewer-heading p{font-size:9px;color:inherit;opacity:.75}
.bottom{gap:7px;bottom:64px}
.modes,.camera-nav{background:#f4f2edee;border:0;border-radius:0;box-shadow:0 2px 13px #12253d12;padding:3px}
.bottom button{min-height:42px;padding:10px 14px;font-size:10px;border-radius:0}
.modes button[aria-pressed=true],.primary{border-radius:0;background:var(--navy);color:#fff}
.camera-nav button[aria-current=true]{border-radius:0;background:#dce5e9}
.viewer-footer{border-radius:0;background:#f4f2edee;padding:7px 12px;color:var(--navy);min-height:34px;box-shadow:none}
.viewer-footer select{background:transparent;border-bottom:1px solid #8fa1af;border-radius:0;font-size:10px;min-height:28px}
.viewer-footer button{min-height:28px}
#loading,#mobile-note{background:#f4f2edf5;border-radius:0;box-shadow:0 4px 25px #142a4317}
.night .site-header{background:linear-gradient(#101f32dc,transparent)}
.night .modes,.night .camera-nav,.night .viewer-footer{background:#14283de8;color:#f2f0eb}
.night .viewer-footer select{color:#f2f0eb}
.night .viewer-footer option{color:var(--ink)}
.night .modes button[aria-pressed=true],.night .primary{background:#f2f0eb;color:var(--navy)}
.night .camera-nav button[aria-current=true]{background:#3d5269}
:lang(zh) .experience h2,:lang(zh) .gateway__heading h1{letter-spacing:.02em}
:lang(zh) .experience__statement{font-size:14px;line-height:1.85}
:lang(zh) .experience__action,:lang(zh) .gateway__intro{letter-spacing:.04em}
@media(max-width:899px){
 .site-header{height:72px}
 #archive-page .generations{grid-template-columns:1fr 1fr}
 #archive-page .gen{min-height:255px;padding:23px}
 #archive-page .gen:first-child{padding-left:23px}
 #archive-page .gen--primary{order:-1;grid-column:1/-1;border-right:0;border-bottom:1px solid var(--line);min-height:235px}
 #archive-page .gen:nth-child(2){border-right:0}
 .gateway{min-height:calc(100dvh - 72px)}
 .experience{padding-right:25px}.experience+.experience{padding-left:25px;padding-right:0}
 .gateway__heading{padding-top:33px}
 .gateway__heading h1{font-size:48px}
}
@media(max-width:600px){
 .site-header .wordmark{font-size:11px;letter-spacing:.13em}
 #archive-page .hero__lead{align-items:flex-start;flex-direction:column;gap:11px;padding-top:20px;padding-bottom:23px}
 #archive-page .hero__title{font-size:27px}
 #archive-page .hero__text{font-size:9px;letter-spacing:.1em}
 #archive-page .generations{grid-template-columns:1fr}
 #archive-page .gen,#archive-page .gen:first-child{padding:22px 17px;min-height:230px;border-right:0;border-bottom:1px solid var(--line)}
 #archive-page .gen:last-child{border-bottom:1px solid var(--line)}
 #archive-page .gen__head{gap:12px;margin-bottom:13px}
 #archive-page .gen__index{font-size:36px}
 #archive-page .gen__desc{font-size:12px;margin-bottom:20px}
 #archive-page .gen__name{font-size:17px}
 #archive-page .foot{align-items:flex-start;flex-direction:column;gap:8px;padding:22px 0}
 .foot__spacer{display:none}
 .gateway__inner{padding-top:19px}
 .gateway__art{opacity:.16;right:-35%;width:160%;height:70%;mask-image:linear-gradient(to right,transparent 30%,#000)}
 .gateway__heading{padding:32px 0 28px}
 .gateway__heading h1{font-size:36px}
 .gateway__intro{font-size:11px;letter-spacing:.07em}
 .experience-grid{grid-template-columns:1fr}
 .experience,.experience+.experience{padding:27px 0 25px;border-left:0}
 .experience+.experience{border-top:1px solid var(--line)}
 .experience__meta{margin-bottom:18px}
 .experience h2{font-size:28px;margin-bottom:16px}
 .experience__features{margin:19px 0 22px}
 .gateway__footer{font-size:8px;letter-spacing:.05em}
 .bottom{bottom:92px;gap:6px;width:calc(100% - 24px);max-width:none}
 .bottom button{font-size:10px;padding:9px 10px;min-height:40px}
 .primary{min-width:130px}
 .camera-nav{order:3}
 .viewer-footer{bottom:12px;left:12px;right:12px;font-size:8px}
 .viewer-heading{left:16px}
 .viewer-heading p{font-size:8px;max-width:260px}
 #loading{width:215px;bottom:240px}
}
/* Rounded, quieter finish requested after the first visual review. */
#archive-page .hero__art{border-radius:16px;overflow:hidden}
#archive-page .generations{gap:16px;border:0}
#archive-page .gen,#archive-page .gen:first-child{padding:26px;border:1px solid #d5d9d9;border-radius:16px;background:#faf9f6}
#archive-page .gen:last-child{border:1px solid #c9d3da}
#archive-page .gen--primary{background:#e4ebef}
#archive-page .gen:hover,#archive-page .gen:focus-visible{background:#f4f5f2}
#archive-page .gen--primary:hover,#archive-page .gen--primary:focus-visible{background:#dce7ed}
#archive-page .gen::after{display:none}
#archive-page .gen__cta{border-top:0;padding-top:8px}
.experience-grid{gap:24px;border:0}
.experience,.experience+.experience{padding:29px 30px 25px;border:1px solid #cbd3d8;border-radius:16px;background:#faf9f5d9}
.experience--web{background:#eef3f5bc}
.experience__action{padding:0 14px;border:1px solid #9bacb9;border-radius:9px;background:#f8f9f780}
.experience__action:hover{background:#dfe9ed;padding-left:14px;padding-right:14px}
.gateway__footer{border:0;padding-top:27px}
.modes,.camera-nav,.viewer-footer{border-radius:10px}
.bottom button,.modes button[aria-pressed=true],.camera-nav button[aria-current=true],.primary{border-radius:7px}
#loading,#mobile-note{border-radius:12px}
.site-header #language{border-radius:8px}
.site-header #language:hover{background:#dce5e97d}
@media(max-width:899px){#archive-page .gen--primary{border:1px solid #c9d3da}}
@media(max-width:600px){
 #archive-page .hero__art{border-radius:0 0 14px 14px}
 #archive-page .gen,#archive-page .gen:first-child,#archive-page .gen:last-child{padding:22px;border:1px solid #d5d9d9;border-radius:14px}
 #archive-page .generations{gap:12px}
 .experience-grid{gap:16px}
 .experience,.experience+.experience{padding:24px 21px;border:1px solid #cbd3d8;border-radius:14px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}