/* Hallmark · custom · Ink & Seal (Zhang Yimou Hero x Song handscroll) · hero: left column over landscape · nav: edge-aligned seal wordmark + one action · footer: one line · posture: committed · signature: ink mountains + vermilion approval seal · material: live copy, real beta screenshots; absent: metrics, logos, quotes */
/* Hallmark · waive 80 · ink landscape · layered ink-wash ridges are the brand material of 山海司, generated as the scene, not a decorative illustration */
/* critique: one signal colour, monumental serif display, real screenshots only */
:root{--ridge1:#2a2926;--ridge2:#33312d;--numc:#4d4943;--cnlight:#e8806b;--paper:#e6e6e2;--paper2:#e6dfcf;--ink:#1c1b19;--ink2:#4a4741;--mute:#6a655c;--line:#cfc6b3;--red:#b3121e;--red2:#8f0e18;--en:"Cormorant Garamond",Georgia,serif;--cn:"Noto Serif SC",serif;--sans:"Hanken Grotesk",system-ui,sans-serif;--max:1240px;--k0:#fff8ee;--k1:rgba(230,230,226,.92);--k2:rgba(230,230,226,.6);--k3:rgba(230,230,226,0);--k4:rgba(230,230,226,.85);--k5:rgba(230,230,226,.7);--k6:rgba(255,252,244,.8);--k7:rgba(179,18,30,.25);--k8:#3d3a35;--k9:#a8a194;--k10:#6f6a60;--k11:#b9b2a4;--k12:#f2c9a8;--k13:#fff4e6;--k14:#fbf7ee;--k15:rgba(40,30,10,.35);--k16:rgba(179,18,30,.07)}
*{box-sizing:border-box;margin:0}html,body{overflow-x:clip}
html{background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}:focus-visible{outline:2px solid var(--red);outline-offset:3px}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.nav{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;gap:36px;padding:16px clamp(20px,4vw,48px);mix-blend-mode:multiply}
.mark{display:flex;align-items:center;gap:12px;font:600 22px var(--en)}
.seal-s{display:grid;place-items:center;width:36px;height:36px;background:var(--red);color:var(--paper);font:900 11px/1.05 var(--cn);text-align:center;border-radius:3px}
.nav nav{display:flex;gap:28px;margin-left:auto;font-size:15px;color:var(--ink2)}.nav nav a:hover{color:var(--red)}
.btn{display:inline-flex;align-items:center;height:44px;padding:0 20px;border:1px solid var(--ink);font:500 15px var(--sans);background:none;color:var(--ink);cursor:pointer;transition:background-color .2s,color .2s,transform .15s}.btn:hover{background:var(--ink);color:var(--paper)}.btn:active{transform:scale(.97)}
.btn.red{background:var(--red);border-color:var(--red);color:var(--k0)}.btn.red:hover{background:var(--red2)}.btn.big{height:62px;padding:0 40px;font-size:18px}
.hero{position:relative;height:100svh;min-height:680px;overflow:hidden;isolation:isolate}
.mtn{position:absolute;inset:0;width:100%;height:100%;z-index:-2}.mtn .r{opacity:.95}
.mist{position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,var(--k1) 0%,var(--k2) 38%,transparent 60%),linear-gradient(to bottom,var(--paper) 22%,var(--k3) 55%),radial-gradient(70% 18% at 30% 72%,var(--k4),transparent 70%),radial-gradient(60% 14% at 80% 84%,var(--k5),transparent 70%);pointer-events:none}
.sun{position:absolute;right:16%;top:20%;width:120px;height:120px;border-radius:50%;background:var(--red);z-index:-3;opacity:.92}
.hero-copy{position:relative;padding:21vh clamp(20px,6vw,96px) 0;max-width:900px}
.cn{font:600 20px var(--cn);color:var(--red);letter-spacing:.3em}
h1{font:500 clamp(54px,8.2vw,128px)/.92 var(--en);letter-spacing:-.02em;margin-top:16px;overflow-wrap:break-word;min-width:0}
.lede{max-width:520px;margin-top:24px;font-size:18px;color:var(--ink2)}
.keyword{display:flex;max-width:540px;margin-top:32px;background:var(--k6);border:1px solid var(--ink)}.keyword input{flex:1;min-width:0;border:0;background:none;padding:0 16px;font:16px var(--sans);color:var(--ink)}.keyword input:focus-visible{outline:none}.keyword:focus-within{box-shadow:0 0 0 3px var(--k7)}.keyword .btn{height:54px;border:0}
.fine{margin-top:12px;color:var(--ink2);font-size:14px}
h2{font:500 clamp(42px,6vw,92px)/.98 var(--en);letter-spacing:-.015em}
.scroll{height:420vh;position:relative;background:var(--ink);color:var(--paper)}.pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.rail{display:flex;width:max-content;height:70vh}
.panel{width:min(560px,82vw);flex:none;padding:0 56px;border-right:1px solid var(--k8);display:flex;flex-direction:column;justify-content:flex-end;position:relative}
.panel.intro{width:min(760px,90vw);justify-content:center;padding-left:clamp(20px,6vw,96px)}.panel.intro p{margin-top:28px;color:var(--k9)}
.num{font:900 120px/1 var(--cn);color:transparent;-webkit-text-stroke:1px var(--k10);margin-bottom:auto}
.panel h3{font:500 54px/1 var(--en);margin-bottom:16px}.panel p{color:var(--k11);max-width:400px}.panel em{display:block;margin-top:20px;font:italic 500 24px var(--en);color:var(--k12)}
.approve{position:absolute;top:8%;right:56px;width:130px;height:130px;display:grid;place-items:center;background:var(--red);color:var(--k13);font:900 82px var(--cn);border-radius:6px;transform:rotate(-8deg);box-shadow:inset 0 0 0 5px var(--red),inset 0 0 0 8px var(--k13)}
.ink-line{position:absolute;left:0;right:0;bottom:7vh;height:1px;background:var(--k8)}.ink-line i{display:block;height:3px;margin-top:-1px;width:100%;background:var(--red);transform-origin:0 50%;transform:scaleX(0)}
.gallery{max-width:var(--max);margin:0 auto;padding:160px clamp(20px,4vw,48px)}.g-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:end;margin-bottom:72px}.g-head p{color:var(--ink2)}
.wall{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px 32px;align-items:start}
.wall figure{background:var(--k14);padding:16px 16px 16px;box-shadow:0 1px 0 var(--line),0 32px 48px -30px var(--k15)}
.wall img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.w1{grid-column:1/8}.w2{grid-column:8/13;margin-top:120px}.w3{grid-column:2/7}.w4{grid-column:7/13;margin-top:-60px}.w5{grid-column:1/6;margin-top:-20px}.w6{grid-column:6/12;margin-top:60px}
figcaption{margin-top:12px;font:500 22px var(--en);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}figcaption span{font:14px var(--sans);color:var(--mute);align-self:center}
.keep{max-width:var(--max);margin:0 auto;padding:80px clamp(20px,4vw,48px) 160px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:64px;align-items:center}
.big-seal{aspect-ratio:1;max-width:400px;width:100%;display:grid;place-items:center;background:var(--red);color:var(--k13);font:900 clamp(60px,9vw,120px)/1 var(--cn);writing-mode:vertical-rl;border-radius:10px;box-shadow:inset 0 0 0 10px var(--red),inset 0 0 0 14px var(--k13);transform:rotate(-3deg)}
dl{margin-top:40px}dt{font:500 30px var(--en);padding-top:16px;border-top:1px solid var(--line)}dd{margin:8px 0 24px;color:var(--ink2)}
.price{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,4vw,48px) 140px}.tw{overflow-x:auto;margin-top:48px}
table{border-collapse:collapse;width:100%;min-width:760px;font-size:15px}th,td{text-align:left;padding:16px 16px;border-bottom:1px solid var(--line);font-weight:400;vertical-align:top}thead th{color:var(--mute)}td{color:var(--ink2)}.us{color:var(--ink);background:var(--k16)}thead .us{color:var(--red);font-weight:500}
.tiers{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:64px;color:var(--ink2);font-size:15px}.tiers li{border-left:1px solid var(--line);padding:0 20px}.tiers b{display:block;font-weight:500;color:var(--ink)}.tiers span{display:block;font:500 68px/1.1 var(--en);color:var(--ink)}.tiers .hl span{color:var(--red)}
.final{min-height:80svh;display:grid;place-content:center;justify-items:center;gap:28px;text-align:center;background:var(--ink);color:var(--paper)}.final h2{font-size:clamp(56px,10vw,160px)}
footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:28px clamp(20px,4vw,48px);font-size:14px;color:var(--k9);background:var(--ink)}
@media (max-width:760px){.nav nav{display:none}.nav .btn{margin-left:auto;height:38px;font-size:14px;padding:0 12px}.sun{width:70px;height:70px;right:10%;top:auto;bottom:38%}.hero-copy{padding-top:15vh}.cn{font-size:15px}.keyword{flex-direction:column}.keyword input{height:52px}
.scroll{height:auto}.pin{position:static;height:auto;padding:100px 0}.rail{flex-direction:column;width:auto;height:auto;gap:56px}.panel{width:auto;border:0;padding:0 20px}.num{font-size:64px;margin-bottom:12px}.approve{position:static;margin-top:24px;width:90px;height:90px;font-size:56px}.ink-line{display:none}
.g-head,.keep{grid-template-columns:minmax(0,1fr)}.wall{grid-template-columns:minmax(0,1fr)}.wall figure{grid-column:auto!important;margin-top:0!important}.tiers{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}.big-seal{max-width:220px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

h1,h2,h3{text-wrap:balance}.btn:disabled,.keyword input:disabled{opacity:.45;cursor:not-allowed}.num,.p,.tiers span{font-variant-numeric:tabular-nums}
.btn{white-space:nowrap}.btn.big{height:52px}.hero-copy{padding-left:max(clamp(20px,6vw,96px),calc(50% - 680px))}.g-head,.keep,.wall{column-gap:40px}.num{font-variant-numeric:tabular-nums}
tbody th{position:sticky;left:0;background:var(--paper)}
.hero .cn{position:absolute;right:clamp(20px,4vw,48px);top:22vh;writing-mode:vertical-rl;letter-spacing:.4em;font-size:22px}
.tiers{margin-top:160px}.final .cn{color:var(--cnlight)}.hero{display:flex;align-items:center}.hero-copy{padding-top:0;margin-top:4vh}h1{font-size:clamp(54px,9vw,148px)}
.btn.red:focus-visible{outline-color:var(--ink)}.final .btn.red:focus-visible{outline-color:var(--paper)}
.tiers{margin-top:360px}
.scroll .pin{padding:0 clamp(20px,4vw,48px)}.final{padding:120px 20px}
.wall figure{box-shadow:none}.panel{border-right:0}
@media (max-width:760px){h1{font-size:46px}h2,.final h2{font-size:38px}}
.hero-copy{max-width:1160px}dt{border-top:0;padding-top:8px}.tiers{margin-top:200px}
@media (max-width:760px){.tiers{grid-template-columns:minmax(0,1fr)}}
.nav{mix-blend-mode:normal;transition:color .3s}.nav.dark{color:var(--paper)}.nav.dark nav{color:var(--line)}.nav.dark .btn{border-color:var(--paper);color:var(--paper)}
.num{-webkit-text-stroke:0;color:var(--numc)}
.scroll-mtn{position:absolute;left:0;bottom:0;width:100%;height:45vh;z-index:0;pointer-events:none}.rail{position:relative;z-index:1}.ink-line{z-index:1}
@media (max-width:760px){.hero .cn{writing-mode:horizontal-tb;position:static;letter-spacing:.2em;font-size:14px;margin:0 0 8px}.hero{flex-direction:column;justify-content:center;align-items:flex-start}.hero .cn{padding-left:20px}.nav{background:var(--paper)}.nav.dark{background:var(--ink)}}
@media (max-width:760px){.keyword input{min-height:52px;flex:none}.hero .cn{padding-left:0;margin-left:clamp(20px,6vw,96px)}}