/* Child-page-only styles. The base design system is the live styles.css. */
.nav-links a.nav-shop { color: var(--white); font-weight: 600; }
.nav-toggle { display: none; position: fixed; top: 14px; right: 14px; z-index: 50; width: 44px; height: 44px; padding: 0; background: rgba(15,15,15,.92); border: 1px solid rgba(247,244,239,.5); border-radius: 6px; cursor: pointer; }
.nav-toggle .nt-bars, .nav-toggle .nt-bars::before, .nav-toggle .nt-bars::after { content: ""; position: absolute; left: 50%; width: 20px; height: 2px; background: var(--white); transform: translateX(-50%); }
.nav-toggle .nt-bars { top: 50%; transform: translate(-50%, -50%); }
.nav-toggle .nt-bars::before { top: -6px; }
.nav-toggle .nt-bars::after { top: 6px; }

.mag { --serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", STSong, SimSun, Georgia, "Times New Roman", serif; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(22px, 5vw, 68px); }
.cover { padding-top: clamp(116px,16vh,170px); }
.hero-inner { max-width: 52em; }
.overline { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; color: var(--silver); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; }
.overline .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--silver); }
.cover h1 { max-width: 9em; margin: 0 0 18px; font-family: var(--serif); font-weight: 500; font-size: clamp(52px,9.8vw,112px); line-height: 1.06; letter-spacing: .03em; }
.romaji { margin: 0 0 24px; color: var(--muted); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; }
.hero-lead { max-width: 36em; margin: 0; color: var(--white); font-size: clamp(16px,1.4vw,19px); line-height: 1.95; }
.hero-lead.lang-not-zh { color: rgba(247,244,239,.82); }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 32px; color: #000; background: var(--white); border: 1px solid var(--white); font-size: 14px; letter-spacing: .05em; transition: background .3s, color .3s; }
.btn:hover { color: var(--white); background: transparent; }
.btn-ghost { color: var(--white); background: transparent; border-color: var(--line); }
.btn-ghost:hover { color: var(--silver); border-color: var(--silver); }

.scent-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px,1.6vw,20px); margin: clamp(44px,8vh,86px) 0 clamp(56px,10vh,116px); }
.scent-mosaic figure { margin: 0; }
.scent-mosaic img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.scent-mosaic figcaption { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.scent-mosaic figcaption b { color: var(--white); font-weight: 500; }

.article { max-width: 850px; margin: 0 auto; padding: clamp(62px,10vh,126px) 0 0; border-top: 1px solid var(--line); }
.intro { max-width: 30em; margin: 0 0 clamp(50px,8vh,94px); font-family: var(--serif); color: var(--white); font-size: clamp(25px,4vw,42px); line-height: 1.55; }
.intro.lang-not-zh { max-width: 34em; }
.scent-row { display: grid; grid-template-columns: 150px 1fr; gap: clamp(24px,5vw,72px); padding: clamp(34px,5vh,60px) 0; border-top: 1px solid var(--line); }
.scent-row:last-of-type { border-bottom: 1px solid var(--line); }
.scent-name { margin: 0; color: var(--silver); font-size: 12px; line-height: 1.7; letter-spacing: .18em; text-transform: uppercase; }
.scent-name b { display: block; color: var(--white); font-family: var(--serif); font-size: 24px; font-weight: 500; letter-spacing: .06em; text-transform: none; }
.scent-copy { margin: 0; color: rgba(247,244,239,.82); font-size: clamp(16px,1.25vw,18px); line-height: 2; }
.quote { margin: clamp(66px,11vh,132px) auto; text-align: center; }
.quote blockquote { max-width: 17em; margin: 0 auto; color: var(--white); font-family: var(--serif); font-weight: 500; font-size: clamp(27px,5vw,48px); line-height: 1.45; }
.quote .rule { width: 44px; height: 1px; margin: 28px auto 0; background: var(--silver); opacity: .5; }
.closing { padding: clamp(66px,10vh,126px) 0; border-top: 1px solid var(--line); text-align: center; }
.closing p { max-width: 34em; margin: 0 auto; color: rgba(247,244,239,.82); font-size: 16px; line-height: 2; }
.closing .c-brand { margin: 0 0 24px; color: var(--silver); font-size: 12px; letter-spacing: .32em; text-transform: uppercase; }
.foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 30px; align-items: center; padding: clamp(38px,6vh,66px) 0 clamp(64px,10vh,110px); border-top: 1px solid var(--line); }
.foot a { color: var(--white); font-size: 14px; letter-spacing: .05em; }
.foot a:hover { color: var(--silver); }

@media (max-width: 700px) {
  .scent-mosaic { grid-template-columns: 1fr 1fr; }
  .cover h1 { max-width: 8em; font-size: clamp(44px,13.5vw,64px); }
  .scent-row { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 560px) {
  .nav-toggle { display: block; }
  .nav-links { position: absolute; top: 100%; right: 0; left: 0; display: none !important; flex-direction: column; gap: 0; padding: 6px 22px 14px; background: rgba(0,0,0,.96); border-top: 1px solid var(--line); backdrop-filter: blur(18px); }
  .site-header.nav-open .nav-links { display: flex !important; }
  .nav-links a { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
  .nav-links a:last-child { border-bottom: 0; }
}