/* S2 uses the approved H5 tokens and S1 shared shell. */
:root { --s2-ink:#0b0f0e; --s2-forest:#10271f; --s2-ivory:#f3efe7; --s2-paper:#e8e0d2; --s2-gold:#b38a50; --s2-shell:min(1368px, calc(100% - 72px)); }
html { background:var(--s2-ivory); } body { margin:0; min-width:320px; color:#1b211e; background:var(--s2-ivory); font-family:"Source Sans 3",Inter,"Segoe UI",sans-serif; line-height:1.6; } html[lang="zh-CN"] body { font-family:"Noto Sans CJK SC","Microsoft YaHei",sans-serif; line-height:1.75; } * { box-sizing:border-box; } img { display:block; width:100%; max-width:100%; } a { color:inherit; } .s2-shell { width:var(--s2-shell); margin-inline:auto; } .site-header[data-variant="OVERLAY"] { position:absolute; top:0; width:100%; background:linear-gradient(180deg,rgba(8,14,12,.88),transparent); } .s2-hero { position:relative; min-height:710px; display:grid; align-items:end; overflow:hidden; color:#fff; background:#10271f; } .s2-hero__media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.46; } .s2-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,12,9,.86),rgba(5,12,9,.38) 55%,rgba(5,12,9,.48)); } .s2-hero__inner { position:relative; z-index:1; padding:170px 0 98px; max-width:820px; } .s2-eyebrow { margin:0 0 18px; color:#d5bd93; font-size:.72rem; font-weight:750; letter-spacing:.16em; text-transform:uppercase; } .s2-hero h1,.s2-section h2,.s2-final h2 { margin:0; font-family:"Source Serif 4","Iowan Old Style",Georgia,serif; font-weight:500; letter-spacing:-.04em; line-height:.96; text-wrap:balance; } .s2-hero h1 { font-size:clamp(3.1rem,7vw,7rem); } .s2-hero p:not(.s2-eyebrow) { max-width:660px; margin:28px 0 34px; font-size:clamp(1.05rem,1.6vw,1.32rem); } .s2-buttons { display:flex; flex-wrap:wrap; gap:14px; } .s2-button { display:inline-flex; min-height:48px; align-items:center; justify-content:center; padding:12px 20px; border:1px solid transparent; font-weight:750; text-decoration:none; } .s2-button--gold { color:#111; background:#d1ba8e; } .s2-button--line { border-color:rgba(255,255,255,.72); color:#fff; } .s2-paths { color:#fff; background:#17352b; } .s2-paths__grid { display:grid; grid-template-columns:repeat(3,1fr); } .s2-path { min-height:180px; padding:34px 36px; border-right:1px solid rgba(255,255,255,.18); } .s2-path:last-child { border-right:0; } .s2-path__number { display:block; color:#d5bd93; font-family:Georgia,serif; font-size:2rem; } .s2-path h2 { margin:12px 0 8px; font-family:Georgia,serif; font-size:1.45rem; font-weight:500; } .s2-path p { margin:0; color:rgba(255,255,255,.72); } .s2-section { padding:clamp(70px,9vw,132px) 0; } .s2-section--paper { background:var(--s2-ivory); } .s2-section--dark { color:#fff; background:#10271f; } .s2-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,.55fr); gap:60px; align-items:end; margin-bottom:44px; } .s2-heading h2 { font-size:clamp(2.5rem,5vw,5.5rem); } .s2-heading p:not(.s2-eyebrow) { margin:0; color:#5b625d; font-size:1.06rem; } .s2-section--dark .s2-heading p:not(.s2-eyebrow) { color:rgba(255,255,255,.72); } .s2-discovery { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } .s2-discovery a { position:relative; min-height:350px; overflow:hidden; color:#fff; background:#17352b; text-decoration:none; } .s2-discovery img { height:100%; object-fit:cover; opacity:.58; transition:transform .5s ease; } .s2-discovery a:hover img { transform:scale(1.04); } .s2-discovery span { position:absolute; right:18px; bottom:18px; left:18px; display:flex; justify-content:space-between; gap:12px; font-family:Georgia,serif; font-size:1.5rem; line-height:1.1; } .s2-projects { background:#0b0f0e; color:#fff; } .s2-project-stack { display:grid; gap:0; } .s2-project { position:relative; min-height:360px; display:grid; grid-template-columns:150px minmax(0,1fr) minmax(38%,560px); align-items:stretch; margin-bottom:-22px; overflow:hidden; background:#17352b; border:1px solid rgba(255,255,255,.12); } .s2-project:nth-child(2) { margin-left:5%; background:#19352d; } .s2-project:nth-child(3) { margin-left:10%; background:#123126; } .s2-project__no { z-index:1; padding:28px; color:#d5bd93; font-family:Georgia,serif; font-size:4rem; } .s2-project__copy { z-index:1; align-self:center; padding:36px 24px 36px 0; } .s2-project__copy h3 { margin:10px 0 16px; font-family:Georgia,serif; font-size:clamp(1.75rem,3vw,3rem); font-weight:500; line-height:1.02; } .s2-project__copy p { max-width:520px; color:rgba(255,255,255,.72); } .s2-project__copy a { display:inline-flex; margin-top:10px; color:#e4cc9d; font-weight:750; } .s2-project__media { position:relative; min-height:100%; } .s2-project__media::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#17352b 0,transparent 36%); } .s2-project__media img { height:100%; object-fit:cover; } .s2-image-note { margin:8px 0 0; color:rgba(255,255,255,.58); font-size:.76rem; } .s2-activity { display:grid; grid-template-columns:1.1fr .9fr; background:#e8e0d2; } .s2-activity__media img { height:100%; min-height:480px; object-fit:cover; } .s2-activity__copy { padding:clamp(38px,7vw,96px); } .s2-activity h2 { font-size:clamp(2.4rem,4.4vw,4.8rem); } .s2-tags { display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:26px 0; list-style:none; } .s2-tags li { padding:6px 10px; border:1px solid rgba(27,33,30,.22); font-size:.78rem; } .s2-network { display:grid; grid-template-columns:.85fr 1.15fr .8fr; gap:34px; align-items:center; } .s2-network h2 { font-size:clamp(2.5rem,4.8vw,5rem); } .s2-network__earth { position:relative; } .s2-network__earth img { filter:saturate(.85) contrast(1.04); } .s2-network__earth p { margin:10px 0 0; color:rgba(255,255,255,.6); font-size:.76rem; } .s2-network__panel { display:grid; gap:0; border-top:1px solid rgba(255,255,255,.3); } .s2-network__panel a { display:flex; justify-content:space-between; gap:16px; padding:15px 0; border-bottom:1px solid rgba(255,255,255,.2); color:#fff; text-decoration:none; } .s2-trace-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(27,33,30,.18); } .s2-trace-card { min-height:270px; padding:28px; border-right:1px solid rgba(27,33,30,.18); } .s2-trace-card:last-child { border-right:0; } .s2-trace-card h3 { font-family:Georgia,serif; font-size:1.35rem; font-weight:500; } .s2-trace-card p { color:#59615b; } .s2-archive { position:relative; overflow:hidden; color:#fff; background:#10271f; } .s2-archive__media { position:absolute; inset:0; background-position:center; background-size:cover; opacity:.33; } .s2-archive__inner { position:relative; display:flex; align-items:end; justify-content:space-between; gap:60px; min-height:520px; padding-block:90px; } .s2-archive h2 { font-size:clamp(3rem,5.4vw,6.2rem); } .s2-archive__links { width:min(100%,430px); padding:0; margin:0; list-style:none; border-top:1px solid rgba(255,255,255,.4); } .s2-archive__links a { display:flex; justify-content:space-between; padding:20px 0; border-bottom:1px solid rgba(255,255,255,.25); text-decoration:none; } .s2-updates { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .s2-update { min-height:300px; padding:24px; background:#e8e0d2; border-top:3px solid #b38a50; } .s2-update__meta { display:flex; justify-content:space-between; gap:10px; color:#5c625c; font-size:.74rem; } .s2-update h3 { font-family:Georgia,serif; font-size:1.35rem; line-height:1.14; } .s2-update p { color:#555d56; } .s2-final { color:#fff; background:#0e2523; } .s2-final__inner { display:flex; align-items:end; justify-content:space-between; gap:50px; padding-block:clamp(70px,10vw,140px); } .s2-final h2 { max-width:780px; font-size:clamp(2.8rem,5vw,5.5rem); } .s2-final .s2-buttons { min-width:250px; flex-direction:column; } .s2-final .s2-button { width:100%; } .site-footer__base { font-size:.8rem; } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important;} }