/* De Skylight LP — 方向 B「杂志编辑风」。中文页与英文页共用这一份。 */
:root{--bg:#F5F1EA;--bg2:#ECE6DB;--ink:#16181B;--mute:#6E6A62;--line:#D8D0C2;--blue:#0F6FA8;--sky:#1B90CF;--lime:#8DC63F;
  --serif:"Fraunces","Noto Serif SC",Georgia,serif;--sans:"Manrope","Noto Sans SC",system-ui,sans-serif;
  --pitch:polygon(50% 0,100% 22%,100% 100%,0 100%,0 22%)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 16px/1.75 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,blockquote{text-wrap:balance}
:lang(zh) h1,:lang(zh) h2,:lang(zh) h3{word-break:keep-all;line-break:strict}
.wrap{max-width:1240px;margin:0 auto;padding:0 16px}
@media(min-width:760px){.wrap{padding:0 40px}}
.eyebrow{font:600 11px/1.4 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--mute)}
.serif{font-family:var(--serif);font-weight:300;letter-spacing:-.02em;font-variation-settings:"opsz" 144}
.serif em{font-style:italic;color:var(--blue)}
/* 中文：衬线体不倾斜，字距放松一点，行高加大 */
:lang(zh) .eyebrow{letter-spacing:.2em;font-size:12px}
:lang(zh) .serif{letter-spacing:.01em;font-weight:400}
:lang(zh) .serif em{font-style:normal}
:lang(zh) body{font-size:16.5px;line-height:1.85}

/* nav */
nav.top{position:absolute;top:0;left:0;right:0;z-index:20;color:#fff}
nav.top .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:76px}
nav.top .lang{justify-self:start;font:600 12px var(--sans);letter-spacing:.14em;text-decoration:none;display:inline-flex;gap:2px;border:1px solid rgba(255,255,255,.55);border-radius:99px;padding:2px}
nav.top .lang span,nav.top .lang a{padding:5px 10px;border-radius:99px;text-decoration:none}
nav.top .lang .on{background:#fff;color:var(--ink)}
nav.top .brand{display:flex;flex-direction:column;align-items:center;text-decoration:none}
nav.top .brand img{height:38px;width:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
nav.top .brand small{font:600 9.5px var(--sans);letter-spacing:.32em;margin-top:2px;text-shadow:0 1px 6px rgba(0,0,0,.4)}
nav.top .cta{justify-self:end;font:600 12.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.7);padding-bottom:3px}
@media(max-width:560px){nav.top .cta{display:none}}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:#2a3440}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);animation:drift 16s ease-out forwards}
@keyframes drift{to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.hero>img{animation:none;transform:none}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,20,.5) 0%,rgba(10,14,20,0) 28%,rgba(10,14,20,.18) 52%,rgba(10,14,20,.85) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%;padding-bottom:48px;text-align:center}
.hero .eyebrow{color:rgba(255,255,255,.85)}
.hero h1{font-size:clamp(46px,10.5vw,132px);line-height:1;margin:18px auto 20px;max-width:13ch}
:lang(zh) .hero h1{font-size:clamp(42px,9.6vw,112px);line-height:1.12;max-width:11em}
.hero h1 em{color:#fff}
:lang(zh) .hero h1 em{color:#BFE3F7}
.hero p{max-width:52ch;margin:0 auto 30px;font-size:17px;color:rgba(255,255,255,.9)}
:lang(zh) .hero p{max-width:30em}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;font:600 13px var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:18px 30px;border-radius:999px;background:#fff;color:var(--ink);border:1px solid #fff;transition:.25s;cursor:pointer}
:lang(zh) .btn{font-size:15px;letter-spacing:.12em}
.btn:hover{background:transparent;color:#fff}
.btn.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.dark:hover{background:transparent;color:var(--ink)}
.btn[disabled]{opacity:.6;pointer-events:none}
.hero .scroll{display:block;margin:34px auto 0;width:1px;height:46px;background:linear-gradient(#fff,transparent)}

/* intro */
.intro{padding:88px 0 72px;text-align:center}
.intro .big{font-family:var(--serif);font-weight:300;font-size:clamp(120px,26vw,280px);line-height:.8;color:var(--blue);letter-spacing:-.05em}
.intro h2{font-size:clamp(30px,5vw,52px);line-height:1.15;max-width:20ch;margin:18px auto}
.intro p{max-width:58ch;margin:0 auto;color:var(--mute);font-size:17px}
:lang(zh) .intro p{max-width:34em}
.rule{width:60px;height:1px;background:var(--ink);margin:28px auto}

/* three reasons — 图片裁成 logo 的屋顶形 */
.reasons{padding:24px 0 96px}
.reasons .grid{display:grid;gap:56px}
@media(min-width:900px){.reasons .grid{grid-template-columns:repeat(3,1fr);gap:40px}.reasons .grid>div:nth-child(2){margin-top:80px}}
.reasons figure{clip-path:var(--pitch);overflow:hidden;background:var(--bg2)}
.reasons figure img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.2s}
.reasons figure:hover img{transform:scale(1.06)}
.reasons .n{font:italic 300 15px var(--serif);color:var(--blue);margin:22px 0 6px;display:block}
.reasons h3{font:400 30px/1.15 var(--serif);letter-spacing:-.01em}
:lang(zh) .reasons h3{font-size:27px;letter-spacing:.01em}
.reasons p{color:var(--mute);margin-top:10px}

/* collection */
.coll{background:var(--ink);color:#EDE8DF;padding:96px 0}
.coll .head{display:grid;gap:18px;margin-bottom:48px}
@media(min-width:900px){.coll .head{grid-template-columns:1fr 1fr;align-items:end}}
.coll .eyebrow{color:#A39E94}
.coll h2{font-size:clamp(38px,6.6vw,80px);line-height:1.05}
.coll h2 em{color:var(--lime)}
.coll .head p{color:#A39E94;max-width:44ch}
.items{border-top:1px solid #34363A}
.item{display:grid;grid-template-columns:48px 1fr;gap:6px 18px;padding:26px 0;border-bottom:1px solid #34363A;align-items:center}
@media(min-width:900px){.item{grid-template-columns:90px 1.2fr 1.4fr 220px;gap:28px}}
.item .i{font:italic 300 18px var(--serif);color:#8E897F}
.item h3{font:300 clamp(28px,4.4vw,46px)/1.1 var(--serif);letter-spacing:-.02em}
:lang(zh) .item h3{font-weight:400;letter-spacing:.01em;font-size:clamp(26px,3.8vw,40px)}
.item p{grid-column:2;color:#A39E94;font-size:15px}
.item .thumb{grid-column:2;width:100%;max-width:340px}
.item .thumb img{aspect-ratio:3/2;object-fit:cover;width:100%;border-radius:2px}
@media(min-width:900px){.item p,.item .thumb{grid-column:auto}}
.item .badge{display:inline-block;font:600 10px var(--sans);letter-spacing:.2em;color:var(--ink);background:var(--lime);padding:5px 9px;border-radius:99px;margin-left:10px;vertical-align:middle;font-style:normal}

/* worry — 这一行该担心的不是价钱 */
.worry{padding:96px 0}
.worry .head{max-width:760px;margin:0 auto 48px;text-align:center}
.worry h2{font-size:clamp(34px,5.6vw,64px);line-height:1.1;margin-top:12px}
.worry .head p{color:var(--mute);margin-top:16px}
.yrs{display:grid;border-top:1px solid var(--line)}
@media(min-width:900px){.yrs{grid-template-columns:repeat(3,1fr)}}
.yrs article{padding:30px 0;border-bottom:1px solid var(--line)}
@media(min-width:900px){.yrs article{padding:36px 32px;border-bottom:0}.yrs article+article{border-left:1px solid var(--line)}}
.yrs b{display:block;font:300 64px/1 var(--serif);color:var(--blue);letter-spacing:-.03em}
.yrs b small{font-size:.32em;letter-spacing:.06em;color:var(--mute);margin-left:6px}
.yrs h3{font:400 24px/1.25 var(--serif);margin:14px 0 8px}
.yrs p{color:var(--mute);font-size:15.5px}
.yrs .ours{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);font-size:15px;color:var(--ink)}
.yrs .ours::before{content:"De Skylight — ";font-weight:700;color:var(--blue)}

/* quote */
.pull{padding:110px 0;text-align:center;background:var(--bg2)}
.pull blockquote{font:300 clamp(30px,5.2vw,62px)/1.18 var(--serif);letter-spacing:-.02em;max-width:22ch;margin:0 auto;font-style:italic}
:lang(zh) .pull blockquote{font-style:normal;font-weight:400;letter-spacing:.02em;max-width:16em}
.pull blockquote::before{content:"“";display:block;font-size:2.2em;line-height:.6;color:var(--blue);font-style:normal}
.pull cite{display:block;margin-top:28px;font:600 12px var(--sans);letter-spacing:.24em;text-transform:uppercase;font-style:normal;color:var(--mute)}

/* spread gallery */
.spread{padding:96px 0}
.spread .head{text-align:center;margin-bottom:48px}
.spread h2{font-size:clamp(34px,6vw,70px);line-height:1.08;margin-top:12px}
.sg{display:grid;gap:12px}
@media(min-width:900px){.sg{grid-template-columns:1.5fr 1fr 1fr;grid-template-rows:300px 300px}.sg .a{grid-row:span 2}.sg .d{grid-column:span 2}}
.sg figure{overflow:hidden;position:relative}
.sg img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
@media(min-width:900px){.sg img{aspect-ratio:auto}}
.sg figcaption{position:absolute;left:16px;bottom:14px;color:#fff;font:italic 300 18px var(--serif);text-shadow:0 1px 10px rgba(0,0,0,.6)}
:lang(zh) .sg figcaption{font-style:normal;font-weight:400;font-size:16px}

/* film */
.film{padding:0 0 100px}
.film .box{display:grid;gap:36px;align-items:center}
@media(min-width:900px){.film .box{grid-template-columns:400px 1fr;gap:80px}}
.film .frame{clip-path:var(--pitch);background:#000}
.film video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block}
.film h2{font-size:clamp(32px,5vw,58px);line-height:1.1;margin:14px 0 18px}
.film p{color:var(--mute);max-width:46ch}
.film .note{font-size:13px;margin-top:10px}
.awards{display:flex;gap:22px;align-items:center;margin-top:34px;padding-top:26px;border-top:1px solid var(--line);flex-wrap:wrap}
.awards img{height:78px;width:auto;mix-blend-mode:multiply}
.awards span{font-size:13px;color:var(--mute);max-width:26ch}

/* promise */
.promise{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.promise .wrap{display:grid}
@media(min-width:900px){.promise .wrap{grid-template-columns:1fr 1fr}}
.promise article{padding:56px 0;text-align:center}
@media(min-width:900px){.promise article{padding:80px 48px}.promise article+article{border-left:1px solid var(--line)}}
.promise article+article{border-top:1px solid var(--line)}
@media(min-width:900px){.promise article+article{border-top:0}}
.promise .num{font:italic 300 64px/1 var(--serif);color:var(--blue)}
.promise h3{font:400 30px/1.2 var(--serif);margin:14px auto 12px;max-width:16ch}
:lang(zh) .promise h3{font-size:28px;max-width:12em}
.promise p{color:var(--mute);max-width:40ch;margin:0 auto}
:lang(zh) .promise p{max-width:24em}

/* steps */
.steps{padding:88px 0 40px}
.steps .head{text-align:center;margin-bottom:40px}
.steps h2{font-size:clamp(32px,5vw,56px);line-height:1.1;margin-top:12px}
.steps ol{list-style:none;display:grid;gap:0;counter-reset:s}
@media(min-width:900px){.steps ol{grid-template-columns:repeat(4,1fr)}}
.steps li{padding:22px 0;border-top:1px solid var(--line);counter-increment:s}
@media(min-width:900px){.steps li{padding:26px 26px 0 0}}
.steps li::before{content:counter(s,lower-roman) ".";font:italic 300 28px var(--serif);color:var(--blue);display:block;margin-bottom:6px}
.steps h3{font:400 22px/1.3 var(--serif)}
.steps p{color:var(--mute);font-size:15px;margin-top:6px}

/* stats strip */
.stats{display:grid;grid-template-columns:repeat(2,1fr);text-align:center;padding:64px 0;gap:36px 0}
@media(min-width:900px){.stats{grid-template-columns:repeat(4,1fr)}}
.stats b{display:block;font:300 56px/1 var(--serif);letter-spacing:-.03em}
.stats span{font-size:13.5px;color:var(--mute);letter-spacing:.04em}

/* form */
.enq{background:#fff;padding:96px 0}
.enq .box{display:grid;gap:44px}
@media(min-width:960px){.enq .box{grid-template-columns:1fr 1.4fr;gap:90px}}
.enq h2{font-size:clamp(38px,6vw,72px);line-height:1.08;margin:14px 0 20px}
.enq .side p{color:var(--mute);max-width:40ch}
.enq .contact{margin-top:30px;font-size:15px;line-height:2}
[data-lead-fields]{display:grid;gap:26px 32px}
@media(min-width:760px){[data-lead-fields]{grid-template-columns:1fr 1fr}.f-wide{grid-column:1/-1}}
.f-label{display:block;font:600 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
:lang(zh) .f-label{font-size:13.5px;letter-spacing:.06em;color:#4F4B44}
.f-label .req{color:#B3261E;margin-left:3px}
.f-opt{letter-spacing:.04em;text-transform:none;font-weight:500}
.f-input{width:100%;font:400 19px var(--serif);color:var(--ink);background:transparent;border:0;border-bottom:1px solid #BDB4A5;border-radius:0;padding:10px 0;outline:none;appearance:none;-webkit-appearance:none}
:lang(zh) .f-input{font:500 17px var(--sans)}
select.f-input{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2316181B' fill='none'/%3E%3C/svg%3E") no-repeat right 4px center;padding-right:26px}
select.f-input:invalid,select.f-input.empty{color:#A79E90}
select.f-input option{color:var(--ink)}
textarea.f-input{resize:vertical}
.f-input:focus{border-bottom-color:var(--blue);border-bottom-width:2px;padding-bottom:9px}
.f-input::placeholder{color:#B3AB9D}
.is-bad .f-input{border-bottom-color:#B3261E}
.f-err{display:block;font-size:13px;color:#B3261E;margin-top:4px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.enq form .btn{margin-top:36px;width:100%}
.fine{text-align:center;font-size:12.5px;color:var(--mute);margin-top:14px}
.ferr{display:none;margin-top:16px;padding:14px 16px;background:#FBEAE8;color:#7A1D16;border-radius:10px;font-size:14.5px}
.ferr.on{display:block}
.ferr a{font-weight:700}

footer{background:var(--ink);color:#BDB7AC;padding:64px 0 120px;text-align:center}
@media(min-width:760px){footer{padding-bottom:56px}}
footer .logo{height:64px;width:auto;margin:0 auto 18px;background:#fff;padding:8px 14px;border-radius:2px}
footer p{font-size:14px;line-height:1.9}
.wa{display:inline-flex;align-items:center;gap:12px;margin:28px 0 22px;background:#25D366;color:#05301A;font:700 15px var(--sans);text-decoration:none;padding:16px 28px;border-radius:999px}
.wa svg{width:22px;height:22px}
footer .tiny{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#7F7A71;margin-top:26px}
.mbar{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;display:flex;transition:transform .3s,opacity .3s}
.mbar a{flex:1;text-align:center;padding:16px;border-radius:999px;font:600 13px var(--sans);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;background:var(--ink);color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.25)}
:lang(zh) .mbar a{font-size:15px}
.mbar.hide{transform:translateY(120%);opacity:0;pointer-events:none}
@media(min-width:760px){.mbar{display:none}}

/* thank-you */
.ty{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto}
.ty header{padding:22px 0;text-align:center}
.ty header img{height:56px;width:auto;margin:0 auto}
.ty main{display:grid;align-items:center;padding:20px 0 60px}
.ty .card{display:grid;gap:40px;align-items:center}
@media(min-width:900px){.ty .card{grid-template-columns:1fr 1fr;gap:80px}}
.ty figure{clip-path:var(--pitch);max-width:460px;width:100%;margin:0 auto;order:2}
.ty figure img{aspect-ratio:4/3;object-fit:cover;width:100%}
@media(min-width:900px){.ty figure{order:0}.ty figure img{aspect-ratio:4/5}}
.ty h1{font-size:clamp(36px,7vw,80px);line-height:1.12;margin:14px 0 18px}
.ty h1 .who{display:block;font-size:.55em;color:var(--mute);margin-top:6px}
.ty .lead{color:var(--mute);font-size:17px;max-width:40ch}
.ty ol{list-style:none;counter-reset:s;margin:28px 0 30px;border-top:1px solid var(--line)}
.ty li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;padding:14px 0;border-bottom:1px solid var(--line)}
.ty li::before{content:counter(s,lower-roman) ".";font:italic 300 22px var(--serif);color:var(--blue)}
.ty .acts{display:flex;gap:12px;flex-wrap:wrap}
.ty .acts .wa{margin:0}
.ty .back{display:inline-flex;align-items:center;padding:16px 8px;font-size:14px;color:var(--mute)}
.ty footer{padding:28px 0}