:root { --paper:#f7f4ef; --warm-white:#fbfaf7; --ink:#24211e; --muted:#726d66; --line:rgba(47,42,36,.14); --gold:#b99a6d; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:74px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Noto Serif SC","Songti SC",STSong,SimSun,serif; }
a { color:inherit; text-decoration:none; }
button,a { -webkit-tap-highlight-color:transparent; }
.shell { width:min(1180px,calc(100% - 96px)); margin:0 auto; }

.hero { position:relative; min-height:720px; background:linear-gradient(90deg,rgba(250,248,243,.85) 0%,rgba(250,248,243,.45) 34%,rgba(250,248,243,0) 61%),url('images/hero.png') center/cover no-repeat; }
.site-header { position:absolute; z-index:5; top:0; left:0; width:100%; height:78px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 64px; }
.brand { font-family:Georgia,'Times New Roman',serif; font-size:22px; font-weight:600; letter-spacing:.28em; }
.site-header nav,.footer-inner nav { display:flex; align-items:center; gap:48px; }
.site-header nav a,.footer-inner nav a { font-size:14px; transition:opacity .2s ease; }
.site-header nav a:hover,.footer-inner nav a:hover { opacity:.55; }
.header-actions { justify-self:end; display:flex; gap:22px; font-family:sans-serif; }
.header-actions a { width:28px; height:28px; display:grid; place-items:center; font-size:22px; }
.hero-copy { padding-top:196px; }
.eyebrow { margin:0 0 14px; font-family:Arial,sans-serif; font-size:12px; letter-spacing:.14em; color:var(--muted); }
.hero-copy .eyebrow { display:none; }
h1,h2,h3,p { margin-top:0; }
.hero h1 { margin-bottom:23px; font-size:clamp(44px,4.2vw,66px); line-height:1.27; font-weight:400; letter-spacing:.04em; }
.hero-lead { margin-bottom:34px; color:#4e4943; font-size:16px; letter-spacing:.13em; }
.outline-button,.dark-button,.light-button,.gold-button { display:inline-flex; align-items:center; justify-content:center; gap:30px; min-height:46px; padding:0 25px; border:1px solid rgba(35,32,28,.5); border-radius:999px; font-size:14px; letter-spacing:.05em; transition:background-color .2s ease,color .2s ease,border-color .2s ease; }
.outline-button:hover { background:var(--ink); color:white; border-color:var(--ink); }
.hero-pages { position:absolute; left:max(48px,calc((100% - 1180px)/2)); bottom:34px; font-family:Arial,sans-serif; font-size:15px; letter-spacing:.12em; color:white; text-shadow:0 1px 8px rgba(0,0,0,.24); display:flex; align-items:center; gap:12px; }
.hero-pages span { width:42px; height:1px; background:currentColor; }
.sound-chip { position:absolute; right:65px; bottom:30px; min-width:130px; padding:13px 22px; border-radius:999px; background:rgba(255,255,255,.88); text-align:center; font-family:Arial,sans-serif; font-size:14px; }

.highlights { min-height:150px; display:grid; grid-template-columns:repeat(4,1fr); align-items:stretch; }
.highlight { display:grid; grid-template-columns:58px 1fr; gap:16px; align-items:center; padding:35px 24px; border-right:1px solid var(--line); }
.highlight:last-child { border-right:0; }
.line-icon { width:48px; height:48px; border:1px solid #8e8982; border-radius:50%; display:grid; place-items:center; color:#6f6962; font-family:sans-serif; font-size:25px; }
.highlight h2 { margin-bottom:7px; font-size:18px; font-weight:400; }
.highlight p { margin-bottom:0; color:var(--muted); font-size:12px; line-height:1.8; }

.series { display:grid; grid-template-columns:48% 30% 22%; min-height:450px; background:var(--warm-white); }
.series-photo { position:relative; background:url('images/hero.png') center/cover no-repeat; }
.play-link { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:14px; font-size:13px; white-space:nowrap; }
.play-link span { width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; padding-left:4px; box-shadow:0 8px 22px rgba(50,40,30,.1); }
.series-copy { padding:58px 48px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.series-copy h2 { margin-bottom:11px; font-size:34px; font-weight:400; letter-spacing:.08em; }
.short-rule { width:28px; height:1px; background:#9a948b; margin:0 0 26px; }
.series-copy>p:not(.eyebrow) { color:var(--muted); font-size:13px; line-height:2; }
.mini-features { display:flex; gap:18px; margin:12px 0 27px; font-family:sans-serif; }
.mini-features span,.support-points span { display:flex; flex-direction:column; align-items:center; gap:7px; font-size:22px; }
.mini-features small,.support-points small { font-family:"Songti SC",STSong,serif; font-size:11px; white-space:nowrap; }
.dark-button { min-height:40px; background:#272522; color:#fff; border-color:#272522; }
.dark-button:hover { background:#504a43; border-color:#504a43; }
.series-detail { background:url('images/fabric.png') center/cover no-repeat; }

.product-section { padding:70px 0 82px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:34px; }
.section-heading h2 { margin-bottom:0; font-size:34px; font-weight:400; letter-spacing:.08em; }
.section-heading>p { margin-bottom:0; color:var(--muted); font-size:13px; line-height:1.9; text-align:right; }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.product-card { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#faf8f4; }
.recommend { position:absolute; z-index:2; top:16px; left:16px; padding:6px 12px; background:var(--gold); color:white; font-size:12px; }
.product-shot { height:230px; background-image:url('images/collection.png'); background-repeat:no-repeat; background-size:300% 100%; }
.product-low { background-position:left center; }
.product-curve { background-position:center center; }
.product-high { background-position:right center; }
.product-card-copy { position:relative; padding:23px 24px 27px; }
.product-card-copy h3 { margin-bottom:8px; font-size:19px; font-weight:400; }
.product-card-copy p,.product-card-copy small { display:block; margin-bottom:7px; color:var(--muted); font-size:12px; }
.product-card-copy a { position:absolute; right:22px; bottom:24px; width:36px; height:36px; border:1px solid #8b857e; border-radius:50%; display:grid; place-items:center; font-family:sans-serif; transition:background-color .2s,color .2s; }
.product-card-copy a:hover { background:var(--ink); color:white; }

.experience { display:grid; grid-template-columns:42% 58%; min-height:540px; background:#f3eee7; }
.experience-copy { padding:82px max(50px,calc((100vw - 1180px)/2)); padding-right:70px; }
.experience-copy h2 { margin-bottom:23px; font-size:37px; line-height:1.5; font-weight:400; letter-spacing:.08em; }
.experience-copy>p:not(.eyebrow) { color:var(--muted); font-size:13px; line-height:2; }
.experience-photo { background:url('images/sleep.png') center/cover no-repeat; }
.support-points { display:flex; gap:42px; margin:28px 0 32px; }
.experience .outline-button { border-radius:2px; }

.materials { display:grid; grid-template-columns:46% 54%; min-height:490px; background:#fbfaf7; }
.shell-narrow { width:min(470px,calc(100% - 80px)); margin:auto; }
.materials-copy { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.materials-copy h2 { margin-bottom:13px; font-size:34px; font-weight:400; letter-spacing:.08em; }
.materials-copy>p:not(.eyebrow) { color:var(--muted); font-size:13px; }
.materials-copy ul { list-style:none; padding:0; margin:20px 0 28px; color:#676159; font-size:13px; line-height:2.4; }
.materials-copy li span { margin-right:10px; color:var(--gold); }
.outline-button.compact { min-height:38px; padding:0 18px; border-radius:0; font-size:12px; }
.material-photo { background:url('images/fabric.png') center/cover no-repeat; }

.comparison { display:grid; grid-template-columns:1fr 1.2fr 64px 1.2fr; align-items:center; min-height:330px; padding-top:52px; padding-bottom:52px; }
.comparison-title h2 { font-size:30px; line-height:1.5; font-weight:400; letter-spacing:.07em; }
.comparison-title p { color:var(--muted); font-size:13px; line-height:1.9; }
.compare-card { min-height:190px; padding:27px 32px; background:rgba(255,255,255,.46); }
.compare-card.preferred { background:white; box-shadow:0 14px 50px rgba(76,63,48,.06); }
.compare-card h3 { margin-bottom:16px; color:#7f6d54; font-size:16px; font-weight:400; }
.compare-card p { margin-bottom:8px; color:var(--muted); font-size:12px; }
.vs { position:relative; z-index:2; width:64px; height:64px; border-radius:50%; display:grid; place-items:center; margin:0 -4px; background:linear-gradient(135deg,#d2bb95,#a98b63); color:white; font-family:Georgia,serif; }

.soundscape { position:relative; min-height:420px; background:linear-gradient(90deg,rgba(12,9,7,.75),rgba(12,9,7,.1)),url('images/night.png') center/cover no-repeat; color:white; }
.sound-copy { padding-top:86px; }
.sound-copy .eyebrow { color:rgba(255,255,255,.64); }
.sound-copy h2 { margin-bottom:18px; font-size:42px; font-weight:400; letter-spacing:.08em; }
.sound-copy>p:not(.eyebrow) { margin-bottom:28px; color:rgba(255,255,255,.74); font-size:13px; }
.light-button { min-height:42px; border-color:rgba(255,255,255,.62); }
.light-button:hover { background:white; color:var(--ink); }

.about { min-height:300px; display:grid; grid-template-columns:1.2fr 1fr auto; align-items:center; gap:80px; }
.about h2 { font-size:34px; line-height:1.5; font-weight:400; letter-spacing:.08em; }
.about>p { margin-bottom:0; color:var(--muted); font-size:13px; line-height:2; }
.gold-button { border-radius:2px; background:var(--gold); color:white; border-color:var(--gold); }
.gold-button:hover { background:#927650; border-color:#927650; }

footer { border-top:1px solid var(--line); background:#efebe5; }
.footer-inner { min-height:145px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:40px; }
.footer-brand { display:inline-block; margin-bottom:12px; }
.footer-inner p { margin-bottom:0; color:var(--muted); font-family:Arial,sans-serif; font-size:11px; }
.back-top { justify-self:end; font-size:12px; }

@media (max-width:980px) {
  .shell { width:min(100% - 48px,860px); }
  .site-header { padding:0 28px; }
  .site-header nav { gap:25px; }
  .hero { min-height:640px; background-position:58% center; }
  .highlights { grid-template-columns:repeat(2,1fr); }
  .highlight:nth-child(2) { border-right:0; }
  .highlight:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .series { grid-template-columns:1fr 1fr; }
  .series-photo { min-height:420px; }
  .series-detail { display:none; }
  .experience-copy { padding:64px 38px; }
  .comparison { grid-template-columns:1fr 1fr; gap:18px; }
  .vs { display:none; }
  .about { gap:35px; }
  .footer-inner { grid-template-columns:1fr auto; }
  .footer-inner nav { display:none; }
}

@media (max-width:680px) {
  html { scroll-padding-top:64px; }
  .shell { width:calc(100% - 36px); }
  .site-header { position:relative; height:64px; padding:0 18px; grid-template-columns:1fr auto; }
  .brand { font-size:18px; }
  .site-header nav { position:absolute; top:64px; left:0; width:100%; justify-content:center; gap:22px; padding:12px 10px; background:rgba(250,248,244,.87); backdrop-filter:blur(10px); }
  .site-header nav a { font-size:12px; }
  .header-actions { display:none; }
  .hero { min-height:650px; background-position:66% center; }
  .hero::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(250,248,243,.86),rgba(250,248,243,.28)); pointer-events:none; }
  .hero-copy { position:relative; z-index:2; padding-top:165px; }
  .hero h1 { font-size:42px; }
  .hero-lead { max-width:230px; font-size:14px; line-height:1.8; }
  .hero-pages { z-index:2; left:18px; }
  .sound-chip { z-index:2; right:18px; }
  .highlights { grid-template-columns:1fr; padding-top:12px; padding-bottom:12px; }
  .highlight,.highlight:nth-child(2) { border-right:0; border-bottom:1px solid var(--line); padding:24px 0; }
  .highlight:last-child { border-bottom:0; }
  .series { grid-template-columns:1fr; }
  .series-photo { min-height:320px; }
  .series-copy { padding:50px 26px; }
  .series-copy h2 { font-size:30px; }
  .product-section { padding:54px 0; }
  .section-heading { align-items:flex-start; flex-direction:column; gap:15px; }
  .section-heading>p { text-align:left; }
  .product-grid { grid-template-columns:1fr; }
  .product-shot { height:210px; }
  .experience,.materials { grid-template-columns:1fr; }
  .experience-copy { padding:56px 24px; }
  .experience-photo,.material-photo { min-height:360px; }
  .materials-copy { min-height:440px; }
  .comparison { grid-template-columns:1fr; padding-top:50px; padding-bottom:50px; }
  .soundscape { min-height:460px; background-position:64% center; }
  .sound-copy { padding-top:72px; }
  .sound-copy h2 { font-size:34px; }
  .about { grid-template-columns:1fr; gap:20px; padding-top:54px; padding-bottom:54px; }
  .about h2 { margin-bottom:0; }
  .gold-button { justify-self:start; }
  .footer-inner { min-height:150px; grid-template-columns:1fr auto; }
}

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }