:root { --ink:#151515; --paper:#f7f3ea; --cream:#ede6d8; --coral:#ff5b40; --blue:#3159d9; --gold:#f2bd3c; --line:rgba(21,21,21,.18); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.site-header { height:84px; max-width:1240px; margin:auto; padding:0 28px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid var(--line); }
.brand { font-family:Georgia,serif; font-size:29px; font-weight:800; letter-spacing:-2px; }
.brand span { color:var(--coral); }
nav { display:flex; gap:36px; font-size:14px; font-weight:650; }
nav a,.header-cta,.text-link { transition:color .2s ease; }
nav a:hover,.header-cta:hover,.text-link:hover { color:var(--coral); }
.header-cta { justify-self:end; font-size:13px; font-weight:700; border-bottom:1px solid; padding-bottom:3px; }
.hero { position:relative; min-height:calc(100svh - 84px); padding:90px max(28px,calc((100vw - 1184px)/2)); display:flex; align-items:flex-end; overflow:hidden; isolation:isolate; background:#13242c url('/posts/city-shore.jpg') center/cover no-repeat; color:#fff; }
.hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(8,14,17,.76) 0%,rgba(8,14,17,.46) 48%,rgba(8,14,17,.18) 100%),linear-gradient(0deg,rgba(8,14,17,.55) 0%,transparent 55%); }
.hero-video { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-copy { max-width:760px; padding-bottom:30px; }
.eyebrow { font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; margin:0 0 24px; }
.hero h1 { font-family:Georgia,"Songti SC",serif; font-size:clamp(58px,7vw,102px); line-height:1.02; letter-spacing:-.055em; margin:0; font-weight:600; text-shadow:0 2px 30px rgba(0,0,0,.22); }
.hero h1 em { color:var(--coral); font-weight:inherit; }
.intro { font-size:17px; line-height:1.9; max-width:590px; margin:30px 0 34px; color:rgba(255,255,255,.86); }
.hero-actions { display:flex; align-items:center; gap:30px; }
.primary-button { background:#fff; color:var(--ink); padding:15px 26px; font-size:14px; font-weight:700; transition:transform .2s,background .2s,color .2s; }
.primary-button:hover { background:var(--coral); color:#fff; transform:translateY(-2px); }
.text-link { font-size:14px; font-weight:750; }
.text-link span { margin-left:8px; }
.section-wrap { max-width:1240px; margin:auto; padding:110px 28px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:48px; }
.section-heading .eyebrow,.works-intro .eyebrow,.about-copy .eyebrow { color:var(--coral); margin-bottom:14px; }
h2 { font-family:Georgia,"Songti SC",serif; font-size:clamp(36px,4vw,54px); margin:0; letter-spacing:-.04em; }
.post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.post-card { border-top:1px solid var(--ink); padding-top:15px; }
.post-visual { height:250px; position:relative; overflow:hidden; margin-bottom:22px; background:#ddd6c8; }
.post-visual img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.post-visual img.workspace { object-position:58% 55%; }
.post-visual img.village { object-position:50% 58%; }
.post-visual img.road { object-position:50% 50%; }
.post-card:hover .post-visual img { transform:scale(1.045); }
.post-meta { display:flex; justify-content:space-between; font-size:11px; font-weight:750; letter-spacing:.08em; margin-bottom:16px; text-transform:uppercase; }
.post-card h3 { font-family:Georgia,"Songti SC",serif; font-size:25px; line-height:1.35; margin:0 0 12px; }
.post-card p { color:#65615a; font-size:14px; line-height:1.75; margin:0; }
.read-more { display:flex; justify-content:space-between; align-items:center; margin-top:22px; padding-top:15px; border-top:1px solid var(--line); font-size:12px; }
.arrow { font-size:19px; }
.arrow-link { display:grid; place-items:center; width:34px; height:34px; transition:color .2s ease,transform .2s ease; }
.arrow-link:hover,.arrow-link:focus-visible { color:var(--coral); transform:translate(2px,-2px); }
.works { border-top:1px solid var(--line); display:grid; grid-template-columns:.82fr 1.18fr; gap:90px; align-items:start; }
.works-intro>p:not(.eyebrow) { color:#666158; line-height:1.75; max-width:420px; margin:22px 0 0; }
.work-preview { position:relative; margin-top:38px; aspect-ratio:16/9; overflow:hidden; background:var(--cream); }
.work-preview>.preview-media { position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .3s ease,transform .45s ease; }
.work-preview img.preview-media { object-fit:cover; }
.work-preview>.preview-1 { opacity:1; }
.work-preview img.architecture,.work-detail img.architecture { object-position:50% 52%; }
.work-preview img.poster,.work-detail img.poster { object-position:50% 50%; }
.work-preview img.photography,.work-detail img.photography { object-position:50% 58%; }
.work-preview img.ui,.work-detail img.ui { object-position:50% 42%; }
.works:has(.work-row:nth-child(2):is(:hover,[open])) .work-preview>.preview-media { opacity:0; }
.works:has(.work-row:nth-child(2):is(:hover,[open])) .work-preview>.preview-2 { opacity:1; }
.works:has(.work-row:nth-child(3):is(:hover,[open])) .work-preview>.preview-media { opacity:0; }
.works:has(.work-row:nth-child(3):is(:hover,[open])) .work-preview>.preview-3 { opacity:1; }
.works:has(.work-row:nth-child(4):is(:hover,[open])) .work-preview>.preview-media { opacity:0; }
.works:has(.work-row:nth-child(4):is(:hover,[open])) .work-preview>.preview-4 { opacity:1; }
.work-list { border-top:1px solid var(--ink); }
.work-row { border-bottom:1px solid var(--line); }
.work-row summary { list-style:none; display:grid; grid-template-columns:54px 1fr auto; gap:18px; align-items:center; padding:25px 0; cursor:pointer; transition:padding .2s ease,color .2s ease; }
.work-row summary::-webkit-details-marker { display:none; }
.work-row summary:hover,.work-row summary:focus-visible { color:var(--coral); padding-left:9px; outline:none; }
.work-number { font:12px/1 Georgia,serif; letter-spacing:.12em; }
.work-heading { display:grid; gap:7px; }
.work-heading small { color:#6b665e; font-size:11px; font-weight:750; letter-spacing:.12em; }
.work-heading strong { font-family:Georgia,"Songti SC",serif; font-size:24px; font-weight:600; }
.work-toggle { font-size:22px; transition:transform .25s ease; }
.work-row[open] .work-toggle { transform:rotate(45deg); }
.work-detail { padding:0 0 28px 72px; }
.work-detail img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--cream); }
.work-gallery { outline:none; }
.work-gallery:focus-visible { box-shadow:0 0 0 2px var(--coral); }
.work-gallery-stage { position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--cream); touch-action:pan-y; }
.work-gallery-stage img { position:absolute; inset:0; height:100%; opacity:0; transform:scale(1.015); transition:opacity .36s ease,transform .5s ease; }
.work-gallery-stage img.is-active { opacity:1; transform:scale(1); }
.gallery-arrow { position:absolute; z-index:2; top:50%; width:42px; height:42px; border:1px solid rgba(255,255,255,.62); border-radius:50%; transform:translateY(-50%); background:rgba(15,15,15,.64); color:#fff; cursor:pointer; display:grid; place-items:center; backdrop-filter:blur(7px); transition:background .2s ease,opacity .2s ease; }
.gallery-arrow:hover { background:var(--coral); }
.gallery-arrow:disabled { opacity:0; pointer-events:none; }
.gallery-prev { left:16px; } .gallery-next { right:16px; }
.gallery-meta { display:flex; justify-content:space-between; align-items:center; padding-top:11px; font:11px/1.4 Georgia,serif; letter-spacing:.1em; }
.gallery-meta small { color:#777167; font:10px/1.4 "PingFang SC","Microsoft YaHei",sans-serif; letter-spacing:.08em; }
.work-detail p { color:#666158; line-height:1.75; margin:18px 0 0; max-width:560px; font-size:14px; }
.about { background:var(--cream); max-width:none; padding-left:max(28px,calc((100vw - 1184px)/2)); padding-right:max(28px,calc((100vw - 1184px)/2)); display:grid; grid-template-columns:220px 1fr 150px; align-items:center; gap:70px; }
.about-stamp { aspect-ratio:1; border:1px solid var(--ink); border-radius:50%; display:grid; place-content:center; text-align:center; transform:rotate(-7deg); }
.about-stamp span { font:72px/1 Georgia,serif; }
.about-stamp small { letter-spacing:.2em; margin-top:10px; }
.about-copy h2 { max-width:680px; }
.about-copy>p:not(.eyebrow) { color:#5f5b54; line-height:1.85; max-width:700px; }
.about-links { display:flex; flex-direction:column; gap:18px; font-size:13px; font-weight:700; }
.about-links a { border-bottom:1px solid; padding-bottom:7px; }
.subscribe { background:var(--coral); color:var(--ink); padding:78px max(28px,calc((100vw - 1184px)/2)); display:grid; grid-template-columns:1fr .85fr; align-items:end; gap:70px; }
.subscribe .eyebrow { margin-bottom:14px; }
.subscribe h2 { font-size:clamp(38px,4vw,58px); }
.subscribe p:last-child { margin:18px 0 0; line-height:1.7; }
.subscribe-form { display:flex; border-bottom:2px solid var(--ink); padding-bottom:8px; }
.subscribe-form input { flex:1; min-width:0; background:transparent; border:0; outline:0; padding:14px 4px; color:var(--ink); }
.subscribe-form input::placeholder { color:rgba(21,21,21,.68); }
.subscribe-form button { background:var(--ink); color:white; border:0; padding:13px 20px; cursor:pointer; font-weight:700; }
footer { max-width:1240px; margin:auto; padding:45px 28px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; font-size:12px; }
footer p { color:#6d6860; }
footer small { color:#6d6860; }
.footer-legal { justify-self:end; display:flex; align-items:flex-end; flex-direction:column; gap:5px; }
.footer-legal a { color:#6d6860; text-decoration:none; }
.footer-legal a:hover { color:#111; text-decoration:underline; text-underline-offset:3px; }
@media (max-width:850px) {
  .site-header { grid-template-columns:1fr auto; } nav { display:none; }
  .hero { min-height:720px; padding-top:70px; }
  .post-grid { grid-template-columns:1fr; gap:60px; } .post-visual { height:320px; }
  .works { grid-template-columns:1fr; gap:42px; } .work-preview { display:none; }
  .about { grid-template-columns:160px 1fr; } .about-links { grid-column:2; flex-direction:row; flex-wrap:wrap; }
  .subscribe { grid-template-columns:1fr; gap:40px; }
}
@media (max-width:560px) {
  .site-header { height:70px; padding:0 20px; } .header-cta { font-size:12px; }
  .hero { min-height:calc(100svh - 70px); padding:60px 20px 52px; } .hero h1 { font-size:50px; } .intro { font-size:15px; }
  .section-wrap { padding:78px 20px; } .section-heading { align-items:start; gap:24px; flex-direction:column; }
  .post-visual { height:240px; } .work-row summary { grid-template-columns:42px 1fr auto; gap:12px; } .work-heading strong { font-size:20px; } .work-detail { padding-left:0; } .work-detail img { max-height:none; } .gallery-arrow { width:36px; height:36px; } .gallery-meta small { font-size:9px; }
  .about { grid-template-columns:1fr; gap:42px; padding-left:20px; padding-right:20px; } .about-stamp { width:150px; } .about-links { grid-column:1; }
  .subscribe { padding:68px 20px; } .subscribe-form { flex-direction:column; gap:10px; border:0; } .subscribe-form input { border-bottom:2px solid var(--ink); }
  footer { padding:34px 20px; grid-template-columns:1fr auto; } footer p { display:none; } footer small, .footer-legal a { font-size:10px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } .hero-video { display:none; } }