/* Interior Design Hong Kong — Editorial archive concept · 2026 */
:root{--paper:#f6f5f1;--white:#fffefa;--stone:#efede7;--ink:#242824;--muted:#686a64;--soft:#a2a39a;--line:#dcdcd4;--highlight:#8e7554;--green:#303d31;--serif:Georgia,'Iowan Old Style','Times New Roman',serif;--sans:Inter,'Segoe UI',Arial,sans-serif;--wrap:1320px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:var(--sans);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #947652;outline-offset:4px}button,input{font:inherit}img{display:block;width:100%;object-fit:cover}p{margin:0}.shell{width:min(var(--wrap),calc(100% - 96px));margin:0 auto}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:absolute;left:12px;top:-60px;z-index:999;padding:12px;background:#fff}.skip:focus{top:12px}.eyebrow{font-size:11px;line-height:1.45;letter-spacing:.19em;font-weight:650;color:#817c6e;text-transform:uppercase}.eyebrow-line{display:inline-block;vertical-align:middle;width:23px;border-top:1px solid currentColor;margin-right:10px}.underlined-link{display:inline-flex;align-items:center;gap:34px;font-size:14px;font-weight:600;border-bottom:1px solid var(--ink);padding-bottom:9px;transition:gap .2s}.underlined-link:hover{gap:45px}.underlined-link span{font-size:19px;font-weight:400}
/* NAV */
.site-header{height:86px;background:rgba(251,250,247,.985);border-bottom:1px solid var(--line);position:relative;z-index:20}.nav-wrap{max-width:1490px;padding:0 48px;height:100%;margin:0 auto;display:flex;align-items:center;gap:40px}.wordmark{display:flex;flex-direction:column;font-size:15px;line-height:1.13;font-weight:700;letter-spacing:.035em;white-space:nowrap;min-width:194px}.wordmark em{font-style:normal;font-size:12px;font-weight:500;letter-spacing:0;margin-left:4px}.main-nav{display:flex;align-items:center;justify-content:center;gap:29px;margin-left:auto}.main-nav>a{font-size:12px;font-weight:520;line-height:2.4;white-space:nowrap;position:relative}.main-nav>a:after{content:'';height:1px;background:var(--ink);position:absolute;left:0;right:100%;bottom:3px;transition:right .22s}.main-nav>a:hover:after,.main-nav>a.is-active:after{right:0}.head-actions{display:flex;align-items:center;gap:19px;margin-left:15px}.lang-link{padding:8px 12px;border-left:1px solid var(--line);font-size:13px;white-space:nowrap}.nav-cta{font-size:12px;border:1px solid var(--ink);padding:12px 15px;white-space:nowrap;transition:background .2s,color .2s}.nav-cta:hover{background:var(--ink);color:var(--white)}.nav-cta span{font-size:16px;margin-left:4px}.menu-toggle{display:none;background:transparent;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:6px}.menu-toggle span{display:block;width:25px;height:1px;background:var(--ink)}
/* ARCHIVE HERO */
.archive-hero{padding-top:64px;display:grid;grid-template-columns:49% 51%;min-height:560px}.hero-copy{padding:55px 35px 45px 0;align-self:center}.hero-copy h1{font-family:var(--serif);font-size:clamp(47px,5.3vw,84px);font-weight:400;letter-spacing:-.056em;line-height:1.08;margin:35px 0 25px}.hero-copy h1 em,.intro-left h2 em{font-weight:400}.hero-copy>p{font-size:16px;line-height:1.85;color:#5e625d;max-width:440px;margin-bottom:38px}.hero-photo{position:relative;min-height:475px;overflow:hidden;background:#ccc9c0}.hero-photo img{position:absolute;inset:0;height:100%;object-position:56% center}.photo-stamp{position:absolute;right:25px;bottom:23px;font-size:10px;letter-spacing:.17em;background:rgba(250,248,244,.91);padding:11px 13px;color:#373930}.archive-intro{display:grid;grid-template-columns:40% 60%;gap:20px;padding-top:110px;padding-bottom:34px}.intro-left h2{font-family:var(--serif);font-size:clamp(46px,5.1vw,72px);font-weight:400;letter-spacing:-.052em;line-height:1.09;margin:20px 0}.intro-right{padding-top:11px}.intro-right>p{font-size:16px;line-height:1.8;color:#595b55;max-width:620px;margin:0 0 34px}.filter-tools{display:flex;flex-direction:column;gap:22px}.filter-list{display:flex;flex-wrap:wrap;gap:8px}.filter{border:1px solid #d3d2c9;background:transparent;padding:9px 13px;font-size:12px;color:#53564f;cursor:pointer;transition:.2s}.filter:hover,.filter.is-selected{background:var(--ink);color:#fff;border-color:var(--ink)}.search-label{height:46px;max-width:405px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #bbbcb4;color:#767872}.search-label input{border:0;background:transparent;outline:none;min-width:0;flex:1;color:var(--ink);font-size:14px}.search-label input::placeholder{color:#9b9c95}.listing{padding-top:33px;padding-bottom:125px}.listing-count{border-top:1px solid var(--line);padding:15px 0 32px;display:flex;justify-content:space-between;gap:25px;font-size:11px;letter-spacing:.065em;color:#6f706b}.story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:30px;row-gap:70px}.story-card{min-width:0}.story-card[hidden]{display:none}.card-cover{display:block;position:relative;aspect-ratio:1.42;overflow:hidden;background:#c5c3bd}.card-cover img{height:100%;transition:transform .6s ease,filter .3s}.card-cover:hover img{transform:scale(1.045)}.cover-index{position:absolute;top:17px;left:17px;font:400 14px var(--serif);color:#fff;text-shadow:0 1px 6px #2228}.card-meta{display:flex;justify-content:space-between;gap:12px;margin-top:21px;color:#77776e;font-size:10px;text-transform:uppercase;letter-spacing:.12em}.story-card h3{font:400 clamp(23px,2.05vw,31px)/1.2 var(--serif);letter-spacing:-.034em;margin:13px 0 13px}.story-card h3 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}.story-card p{font-size:13px;line-height:1.7;color:#76766e;min-height:65px;max-width:95%}.card-read{display:inline-flex;align-items:center;gap:20px;font-size:12px;font-weight:600;border-bottom:1px solid var(--ink);padding-bottom:7px;margin-top:21px}.card-read span{font-size:17px;font-weight:400}.no-results{font-size:17px;color:#585852;text-align:center;padding:65px 15px}.no-results[hidden]{display:none}
/* ARTICLE */
.article-wrap{padding-top:30px}.breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:13px;color:#77786f;font-size:11px;padding-bottom:50px}.breadcrumbs a:hover{text-decoration:underline}.breadcrumbs span:last-child{color:#343731}.story-header{max-width:1010px;margin:0 auto;padding:5px 0 52px;text-align:center}.story-header h1{font:400 clamp(44px,5.9vw,84px)/1.08 var(--serif);letter-spacing:-.05em;margin:23px 0 29px}.story-deck{max-width:720px;margin:0 auto;color:#5f635d;line-height:1.8;font-size:17px}.story-byline{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:17px;color:#85877d;letter-spacing:.115em;font-size:10px;margin-top:30px}.sep{width:3px;height:3px;background:#92938a;border-radius:50%}.story-figure{margin:0}.story-figure>img{aspect-ratio:1.98;max-height:720px;object-position:center}.story-figure figcaption{font-size:11px;color:#8a8c83;margin-top:10px;text-align:right}.story-layout{display:grid;grid-template-columns:270px minmax(0,740px);gap:70px;justify-content:center;padding:85px 0 110px}.story-aside{min-width:0}.side-sticky{position:sticky;top:35px}.toc{padding:20px 15px 20px 0;list-style:none;border-top:1px solid var(--line);margin:15px 0 25px}.toc li{margin-bottom:12px}.toc a{font-size:12px;color:#74766f;line-height:1.6;display:block}.toc a:hover{color:var(--ink);text-decoration:underline}.side-contact{position:relative;background:#eae9e1;padding:22px 19px 47px;display:block}.side-contact span:first-child{font-size:10px;letter-spacing:.15em;color:#76796e}.side-contact strong{display:block;font:400 25px/1.2 var(--serif);margin-top:12px;max-width:185px}.side-contact .arrow{position:absolute;right:21px;bottom:18px;font:400 23px var(--serif)}
.article-body{font-size:16px;color:#454941;line-height:1.88;max-width:740px}.article-body>*:first-child{margin-top:0}.article-body p{margin:0 0 22px}.article-body strong{color:#2f332e;font-weight:650}.article-body h2{font:400 clamp(30px,3.2vw,44px)/1.19 var(--serif);letter-spacing:-.037em;color:#242824;margin:68px 0 24px;scroll-margin-top:25px}.article-body h3{font:400 25px/1.33 var(--serif);letter-spacing:-.025em;color:#30332e;margin:32px 0 12px}.article-body ul,.article-body ol{padding-left:24px;margin:15px 0 27px}.article-body li{margin:0 0 10px;padding-left:3px}.article-body a{text-decoration:underline;text-underline-offset:4px;color:#41574a}.quick-answer{background:#eaeae2;border-left:2px solid #7c886d;padding:27px 30px;margin-bottom:34px}.quick-answer>b{display:block;color:#4d654c;text-transform:uppercase;font-size:11px;letter-spacing:.16em;margin-bottom:8px}.quick-answer p{margin:0!important;color:#3a443c}.case-study{padding:24px 28px;background:#eeede7;border:1px solid #e0ded5;margin:17px 0 27px}.case-study h3{margin-top:0;font-size:23px}.case-study p{margin-bottom:0}.faq-item{border-top:1px solid #d5d6cc;margin:0}.faq-item:last-of-type{border-bottom:1px solid #d5d6cc}.faq-item summary{font-size:15px;line-height:1.5;color:#2c322b;list-style:none;cursor:pointer;padding:19px 34px 19px 0;position:relative;font-weight:550}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:'+';position:absolute;right:5px;top:15px;font:300 24px var(--sans)}.faq-item[open] summary:after{content:'−'}.faq-item p{padding:0 24px 13px 0;color:#666b63}.related-section{border-top:1px solid var(--line);padding:65px 0 105px}.related-title{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:32px}.related-title h2{font:400 clamp(34px,4vw,57px)/1.1 var(--serif);letter-spacing:-.04em;margin:12px 0 0}.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px}.related-grid .story-card h3{font-size:25px}.related-grid .story-card p{min-height:80px}.read-progress{position:fixed;top:0;left:0;width:0;height:2px;background:#8e7554;z-index:999;pointer-events:none}
/* FOOTER */
.final-cta{background:#313c32;color:#fff;padding:105px 0 100px}.cta-inner>p:last-of-type{font-size:15px;color:#d0d9ce;margin:8px 0 34px}.eyebrow.light{color:#c4cbbf}.cta-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:900px}.cta-heading h2{font:400 clamp(48px,7vw,104px)/1.06 var(--serif);letter-spacing:-.053em;margin:23px 0 29px}.cta-heading h2 i{font-weight:400}.circle-arrow{display:grid;place-items:center;border:1px solid #ffffff66;border-radius:50%;font-size:37px;width:95px;height:95px;flex:none;transition:background .25s}.circle-arrow:hover{background:#ffffff28}.text-underline{border-bottom:1px solid #bfc9bf;padding-bottom:8px;font-size:14px}.site-footer{background:#212a23;color:#e5e8e3;padding-top:70px}.footer-top{display:flex;gap:60px;justify-content:space-between;padding-bottom:65px}.footer-brand{font:600 24px/1.14 var(--sans);letter-spacing:-.04em;margin-bottom:24px}.footer-brand span{font-size:13px;letter-spacing:0}.site-footer address{font-style:normal;font-size:13px;color:#b9c3b9;line-height:1.8;margin-bottom:8px}.site-footer a{font-size:13px}.site-footer .eyebrow{color:#b7c1b4}.footer-nav{display:grid;grid-template-columns:repeat(2,minmax(90px,1fr));gap:17px 55px;margin-top:24px}.footer-nav a:hover{text-decoration:underline}.footer-bottom{border-top:1px solid #4e5a50;display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:24px;padding-bottom:25px;font-size:11px;color:#a6b0a6}
/* TABLET */
@media(max-width:1100px){.nav-wrap{padding:0 30px;gap:20px}.main-nav{gap:17px}.head-actions{gap:9px;margin-left:0}.nav-cta{display:none}.archive-hero{min-height:500px}.hero-photo{min-height:410px}.story-layout{grid-template-columns:230px minmax(0,680px);gap:38px}.shell{width:calc(100% - 64px)}}
@media(max-width:800px){.site-header{height:72px}.nav-wrap{padding:0 23px}.wordmark{font-size:13px;min-width:0}.wordmark em{font-size:10px}.menu-toggle{display:flex}.main-nav{position:absolute;display:none;top:72px;left:0;right:0;background:#fbfaf7;border-bottom:1px solid var(--line);padding:20px 28px 30px;flex-direction:column;align-items:stretch;gap:0;box-shadow:0 25px 30px #0000000b}.main-nav.is-open{display:flex}.main-nav>a{font-size:16px;padding:8px 0}.main-nav>a:after{display:none}.main-nav>a.is-active{text-decoration:underline;text-underline-offset:5px}.head-actions{margin-left:auto}.lang-link{font-size:12px}.shell{width:calc(100% - 46px)}.archive-hero{display:flex;flex-direction:column;min-height:0;padding-top:55px}.hero-copy{padding:0 0 40px;align-self:auto}.hero-copy h1{font-size:clamp(48px,8.6vw,72px);margin:25px 0 23px}.hero-photo{height:430px;min-height:unset}.archive-intro{grid-template-columns:1fr;gap:0;padding-top:80px}.intro-left h2{font-size:58px}.intro-right{padding:0}.intro-right>p{max-width:100%}.story-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:50px 23px}.story-card h3{font-size:26px}.listing{padding-bottom:80px}.story-layout{grid-template-columns:1fr;padding:55px 0 70px}.story-aside{display:none}.story-header{padding-bottom:37px}.breadcrumbs{padding-bottom:25px}.story-figure>img{aspect-ratio:1.48}.related-grid{gap:16px}.related-grid .story-card h3{font-size:21px}.related-grid .story-card p{min-height:95px}.final-cta{padding:70px 0}.cta-heading h2{font-size:68px}.circle-arrow{width:72px;height:72px;font-size:28px}}
@media(max-width:560px){.shell{width:calc(100% - 34px)}.site-header{height:67px}.nav-wrap{padding:0 17px}.main-nav{top:67px}.wordmark{font-size:12px}.lang-link{padding:7px 8px}.archive-hero{padding-top:36px}.hero-copy h1{font-size:clamp(42px,11.2vw,62px);margin:20px 0}.hero-copy>p{font-size:14px;line-height:1.7;margin-bottom:23px}.hero-photo{height:295px}.photo-stamp{font-size:8px;right:10px;bottom:10px}.archive-intro{padding-top:66px}.intro-left h2{font-size:50px;margin:15px 0}.intro-right>p{font-size:14px}.filter-list{flex-wrap:nowrap;overflow-x:auto;margin-right:-17px;padding-bottom:7px;scrollbar-width:thin}.filter{white-space:nowrap;flex:none}.search-label{max-width:100%}.listing{padding-top:10px}.listing-count{display:block;line-height:1.9;font-size:10px;padding-bottom:19px}.listing-count span+span{display:block}.story-grid{grid-template-columns:1fr;gap:45px}.card-cover{aspect-ratio:1.56}.story-card h3{font-size:29px}.story-card p{min-height:unset}.card-meta{margin-top:13px}.card-read{margin-top:13px}.breadcrumbs{font-size:10px;gap:9px}.story-header h1{font-size:clamp(39px,10vw,58px);margin:21px 0}.story-deck{font-size:15px;line-height:1.75}.story-byline{font-size:9px;gap:9px}.story-figure>img{aspect-ratio:1.26}.story-figure figcaption{font-size:10px;line-height:1.4;text-align:left}.story-layout{padding:39px 0 55px}.article-body{font-size:15px;line-height:1.85}.article-body h2{font-size:34px;margin:53px 0 19px}.article-body h3{font-size:23px;margin:28px 0 10px}.quick-answer{padding:20px}.case-study{padding:20px}.related-section{padding:50px 0 70px}.related-title h2{font-size:38px}.related-title .underlined-link{font-size:12px;gap:12px;white-space:nowrap}.related-grid{grid-template-columns:1fr;gap:36px}.related-grid .story-card h3{font-size:27px}.related-grid .story-card p{min-height:unset}.final-cta{padding:60px 0}.cta-heading h2{font-size:clamp(42px,11vw,62px)}.circle-arrow{width:56px;height:56px;font-size:24px}.site-footer{padding-top:50px}.footer-top{flex-direction:column;gap:45px;padding-bottom:42px}.footer-nav{gap:13px 35px}.footer-bottom{display:block;line-height:1.8}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
/* Prevent intrinsic min-content widths of horizontally-scrollable filter chips from widening mobile layouts. */
.archive-intro{grid-template-columns:minmax(0,40%) minmax(0,60%)}
.intro-left,.intro-right,.filter-tools{min-width:0}
.filter-list{max-width:100%;min-width:0}
@media(max-width:800px){.archive-intro{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){.filter-list{margin-right:0;width:100%}}