/* Compact layouts use the same chapters in native document flow. */
.mobile-header-actions { display:none; }
@media (max-width:900px) {
  :root { scroll-padding-top:68px; }
  body { overflow-x:clip; }
  .site-header,.site-header.is-light { position:fixed; inset:0 0 auto; padding:calc(12px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left)); background:#10271ef2; color:#f3f0e6; gap:12px; }
  .site-header .brand { gap:8px; flex:none; min-height:44px; }
  .site-header .brand img,.site-header.is-light .brand img { filter:brightness(0) invert(94%) sepia(13%) saturate(191%); }
  .site-header .emblem { width:23px; height:34px; }
  .site-header .wordmark { width:94px; height:34px; }
  .mobile-header-actions { display:flex; align-items:center; gap:16px; pointer-events:auto; font:14px var(--sans); }
  .mobile-header-actions a { display:flex; align-items:center; min-height:44px; white-space:nowrap; }
  .mobile-menu-toggle { min-width:44px; min-height:44px; padding:0; border:0; border-bottom:1px solid #f3f0e64d; background:none; color:inherit; }
  .site-header .primary-navigation { display:none; position:absolute; top:100%; left:0; right:0; padding:12px 24px 24px; background:#10271e; color:#f3f0e6; border:0; border-top:1px solid #f3f0e626; max-height:calc(100dvh - 90px); overflow:auto; font-size:16px; }
  .site-header.menu-open .primary-navigation { display:flex; flex-direction:column; align-items:stretch; gap:4px; }
  .site-header .primary-navigation > a,.site-header .product-menu-trigger { display:flex; align-items:center; min-height:48px; width:100%; padding:10px 0; }
  .site-header .primary-navigation > .dealer-entry { display:none; }
  .site-header .product-menu-panel { position:static; width:100%; box-shadow:none; padding:0 16px; background:#18392c; color:#f3f0e6; }
  .site-header .product-menu-panel[hidden] { display:none; }
  .site-header .product-menu-panel a { min-height:48px; }
  .story,.stage { height:auto; }
  .chapter { height:auto; min-height:0; overflow:clip; scroll-margin-top:0; }
  .chapter-foot { position:relative; inset:auto; margin:40px 24px 0; padding:20px 0 24px; border-top:1px solid #b9c6b92b; gap:16px; font-size:11px; }
  .chapter-foot a { min-height:44px; gap:14px; }
  .chapter-count { display:none; }
  .chapter-link { min-height:44px; font-size:14px; gap:28px; margin-top:24px; padding:10px 0; }
  .chapter-copy,.heat-copy,.cold-copy,.cooltouch-copy { position:relative; inset:auto; width:auto; }
  .description { font-size:16px; line-height:1.9; letter-spacing:.02em; }
  .home-chapter { min-height:760px; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding-top:340px; background:#0b1b12; }
  .home-image img { object-position:88% top; }
  .home-shade { background:linear-gradient(180deg,#0b1b1200 28%,#0b1b121a 42%,#0b1b12e8 73%,#0b1b12 100%); }
  .home-copy { margin:0 24px; padding-top:44px; }
  .hero-wordmark { width:min(100%,300px); }
  .brand-slogan { font-size:24px; line-height:1.65; margin:24px 0 10px; white-space:normal; letter-spacing:0; }
  .home-copy .description { font-size:14px; }
  .home-copy .chapter-link { margin-top:18px; }
  .home-foot { margin-top:26px; border:0; }
  .home-foot > span:first-child { opacity:.7; }
  .herb-chapter { padding-top:240px; background:#10271e; }
  .herb-image { bottom:auto; height:430px; }
  .herb-image img { object-position:25% 30%; }
  .herb-shade { background:linear-gradient(180deg,transparent 100px,#10271e33 230px,#10271e 430px); }
  .herb-copy { margin:0 24px; }
  .herb-copy h2 { font-size:40px; line-height:1.35; white-space:normal; margin:0 0 20px; }
  .herb-copy .description { font-size:16px; }
  .herb-values { margin-top:28px; }
  .care-value { min-height:104px; padding:22px 66px 22px 0; }
  .value-name { font-size:20px; }
  .care-value p { white-space:normal; font-size:14px; margin:8px 0 0; }
  .value-glyph { width:46px; height:46px; right:2px; margin-top:-23px; }
  .moments-content { position:relative; inset:auto; padding:56px 24px 0; }
  .moments-intro { display:block; margin-bottom:28px; }
  .moments-intro h2 { font-size:32px; }
  .moments-lead { margin:18px 0 0; font-size:15px; }
  .moments-pair { grid-template-columns:1fr; gap:32px; }
  .moment-photo { height:auto; aspect-ratio:4/5; }
  .moment-question { left:22px; bottom:26px; }
  .moment-question h3 { font-size:32px; }
  .moment-caption { padding:18px 0; gap:12px; }
  .moment-caption p { font-size:14px; }
  .moment-temperature { flex:none; font-size:12px; }
  .heat-chapter,.cold-chapter { padding-top:0; }
  .heat-image,.cold-image,.cooltouch-image { position:relative; inset:auto; height:auto; aspect-ratio:1; }
  .heat-image img,.cold-image img,.cooltouch-image img { position:static; width:100%; height:100%; object-fit:cover; transform:none; mask-image:none; }
  .heat-image,.cold-image { aspect-ratio:5/4; }
  .heat-image img { object-position:0% center; }
  .cold-image img { object-position:0% center; }
  .heat-shade,.cold-shade,.cooltouch-shade,.heat-glow,.cold-light,.cooltouch-image::before { display:none; }
  .heat-copy,.cold-copy,.cooltouch-copy { padding:32px 24px 0; }
  .heat-copy h2,.cold-copy h2,.cooltouch-copy h2,.product-chapter h2 { font-size:34px; line-height:1.5; }
  .heat-tagline,.cold-tagline { font-size:22px; white-space:normal; margin:16px 0; }
  .heat-copy .chapter-link,.cold-copy .chapter-link { margin-top:18px; }
  .cold-intro,.cold-formula { font-size:15px; }
  .cold-situations { font-size:13px; }
  .master-heading-block,.master-provenance { position:relative; inset:auto; width:auto; margin:0 24px; }
  .master-heading-block { padding-top:56px; }
  .master-intro { font-size:16px; margin:22px 0; }
  .master-provenance { padding:28px 0 0; border-left:0; border-top:1px solid #64735940; }
  .master-seal { width:80px; margin-bottom:20px; }
  .master-team { font-size:16px; }
  .master-team strong { font-size:26px; white-space:normal; }
  .master-description { font-size:14px; }
  .master-watermark { display:none; }
  :root:not(.motion-enabled) .craft-chapter,:root:not(.motion-enabled) .ritual-chapter { min-height:0; padding-bottom:0; }
  .craft-opening,.craft-details { margin:0 24px; padding-top:48px; }
  .craft-opening-note,.layer-description { font-size:15px; line-height:1.9; }
  .craft-whole { width:100%; margin:0; mix-blend-mode:screen; }
  .craft-details { padding-top:0; }
  .craft-layer-detail { margin:0; padding:28px 0; border-top:1px solid #f3f0e629; scroll-margin-top:90px; }
  .craft-layer-detail h3 { font-size:28px; margin-bottom:16px; }
  .craft-layer-detail h3 br { display:none; }
  .craft-layer-detail .heat-timing { max-width:none; margin:20px 0 0; gap:24px; }
  .craft-cutaway { width:min(88%,420px); margin:12px auto 0; }
  .cutaway-focus,.cutaway-point { display:none; }
  .craft-disclaimer { font-size:12px; margin:12px 24px 28px; opacity:.7; }
  .ritual-ambient { display:none; }
  .ritual-heading-block { padding:56px 24px 0; }
  .ritual-heading-block h2 { font-size:30px; }
  .ritual-heading-block > p:last-child { font-size:15px; }
  .ritual-gallery { grid-template-columns:1fr; gap:24px; margin:28px 24px 0; }
  .ritual-window { aspect-ratio:4/5; border-radius:6px; }
  .ritual-window-caption { left:22px; bottom:24px; }
  .ritual-window-caption h3 { font-size:26px; }
  .ritual-navigation,.gallery-arrows,.gallery-help { display:none; }
  .cold-value { padding:22px 0; gap:20px; }
  .cold-value svg { width:36px; height:36px; }
  .cold-value h3 { font-size:20px; }
  .cold-value p { font-size:14px; }
  .cold-render-note { position:static; margin:24px; font-size:12px; }
  .coldlife-scenes { position:relative; }
  .coldlife-scene { position:relative; display:none; opacity:1; }
  .coldlife-scene.is-current { display:block; }
  .coldlife-scene > img { position:relative; display:block; height:410px; transform:none; object-position:68% center; }
  .coldlife-scene::after { display:none; }
  .coldlife-scene-copy { position:relative; inset:auto; width:auto; padding:28px 24px 0; transform:none; opacity:1; }
  .coldlife-scene-copy h3 { font-size:32px; }
  .coldlife-scene-copy > p:last-child { font-size:15px; margin-top:18px; }
  .coldlife-controls { position:relative; inset:auto; margin:24px; gap:12px; }
  .coldlife-controls button { flex:1; width:auto; min-height:48px; padding:8px 0; font-size:14px; }
  .coldlife-controls button > img,.coldlife-controls small,.coldlife-playback { display:none; }
  .product-progress,.stage.is-cold .cold-progress { display:none; }
  .brand-finale { min-height:620px; min-height:80svh; padding:100px 24px; }
  .finale-wordmark { width:min(100%,260px); }
  .finale-identity h2 { font-size:23px; letter-spacing:0; white-space:normal; }
  .finale-slogan-copy { letter-spacing:0; margin:0; }
  .finale-next { min-height:44px; bottom:40px; }
  .contact-footer { min-height:0; padding:56px 24px calc(24px + env(safe-area-inset-bottom)); }
  .contact-columns { grid-template-columns:1fr; padding:0; }
  .contact-item,.contact-item:first-child,.contact-item:last-child { padding:28px 0; }
  .contact-item + .contact-item { border-left:0; border-top:1px solid #dfe5cd22; }
  .contact-item h3 { margin-bottom:18px; }
  .contact-details a,.footer-action { min-height:44px; overflow-wrap:anywhere; white-space:normal; }
  .contact-legal { flex-wrap:wrap; margin-top:20px; gap:12px 20px; }
  .contact-legal a { min-height:44px; align-items:center; }
}
@media (max-width:359px) {
  .site-header { padding-inline:16px; gap:8px; }
  .site-header .wordmark { width:78px; }
  .mobile-header-actions { gap:10px; font-size:13px; }
  .home-copy,.herb-copy { margin-inline:20px; }
  .hero-wordmark { width:260px; }
  .brand-slogan { font-size:22px; }
  .finale-identity h2 { font-size:21px; }
}
@media (min-width:600px) and (max-width:900px) {
  .home-copy { max-width:440px; }
  .home-chapter { padding-top:48svh; }
  .herb-copy { max-width:560px; margin-inline:auto; padding-inline:24px; }
  .moments-pair { grid-template-columns:1fr 1fr; }
  .heat-image,.cold-image,.cooltouch-image { aspect-ratio:4/3; }
  .ritual-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ritual-window-caption { left:12px; bottom:16px; }
  .ritual-window-caption h3 { font-size:20px; }
}

.mobile-layer-markers,.mobile-cold-arrows { display:none; }
@media (max-width:900px) {
  /* See the complete construction first, then read the selected material. */
  .craft-opening { padding-top:32px; margin-bottom:12px; }
  .craft-opening h2 { font-size:30px; line-height:1.4; }
  .craft-opening-note { margin:12px 0 0; }
  .craft-whole { display:none; }
  .craft-cutaway { width:min(80%,300px); margin:0 auto; }
  .mobile-layer-markers { display:block; }
  .mobile-layer-markers button { position:absolute; z-index:2; left:var(--point-x); top:var(--point-y); transform:translate(-50%,-50%); display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; background:transparent; color:#f3f0e6; font:12px Georgia,serif; cursor:pointer; isolation:isolate; }
  .mobile-layer-markers button::before { content:""; position:absolute; inset:8px; z-index:-1; border:1px solid #e2d6b6; border-radius:50%; background:#10271ed9; }
  .mobile-layer-markers button[aria-current=step] { color:#183428; }
  .mobile-layer-markers button[aria-current=step]::before { background:#ecd6af; box-shadow:0 0 0 4px #ecd6af33; }
  :root:not(.motion-enabled) .layer-navigation { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin:8px 24px 0; }
  .layer-navigation button { display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; max-width:none; min-height:56px; padding:8px 0; font-size:12px; }
  .layer-navigation button::after { content:attr(data-mobile-name); font:12px var(--sans); white-space:nowrap; }
  .craft-details { margin:0 24px; min-height:226px; }
  .craft-layer-detail { display:none; border:0; padding:24px 0 12px; }
  .craft-layer-detail.is-current { display:block; }
  .craft-layer-detail .product-eyebrow { margin-bottom:12px; }
  .craft-layer-detail .layer-counter { display:inline; margin-right:8px; letter-spacing:.08em; }
  .craft-layer-detail h3 { font-size:26px; margin-bottom:10px; }
  .craft-layer-detail .layer-description { margin:10px 0; }
  .craft-layer-detail .heat-timing { margin-top:10px; }
  .craft-disclaimer { margin-top:12px; }
  /* The asset itself contains the complete crescent; never crop it to a square. */
  .cooltouch-image { aspect-ratio:auto; }
  .cooltouch-image img { display:block; width:100%; height:auto; object-fit:contain; }
  /* Both products share one native horizontal rail and the same control sizes. */
  .ritual-heading-block { padding:32px 24px 0; }
  .ritual-heading-block h2 { font-size:28px; }
  .ritual-heading-block > p:last-child { margin:12px 0 20px; }
  .ritual-gallery,.coldlife-scenes { display:flex; gap:0; margin:0; width:100%; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .ritual-gallery::-webkit-scrollbar,.coldlife-scenes::-webkit-scrollbar { display:none; }
  .ritual-window,.coldlife-scene,.coldlife-scene.is-current { display:block; position:relative; flex:0 0 100%; min-width:0; aspect-ratio:auto; border:0; border-radius:0; box-shadow:none; scroll-snap-align:start; scroll-snap-stop:always; opacity:1; pointer-events:auto; transition:none; }
  .ritual-window > img,.coldlife-scene > img { display:block; position:relative; width:100%; height:clamp(220px,35svh,320px); object-fit:cover; transform:none; filter:none; mask-image:none; opacity:1; transition:none; }
  .ritual-window::after { display:none; }
  .ritual-window-caption,.coldlife-scene-copy { position:relative; inset:auto; padding:22px 24px 0; }
  .ritual-window-caption h3,.coldlife-scene-copy h3 { font-size:28px; line-height:1.55; text-shadow:none; }
  .coldlife-scene-copy > p:last-child { margin:12px 0 0; }
  .ritual-navigation,.coldlife-controls { display:flex; position:relative; inset:auto; gap:12px; margin:20px 24px 0; }
  .ritual-navigation button,.coldlife-controls button { display:flex; align-items:center; justify-content:center; flex:1; min-width:0; width:auto; min-height:48px; padding:8px 0; font-size:14px; }
  .gallery-arrows { display:flex; position:relative; inset:auto; margin:14px 24px 0; justify-content:flex-end; gap:14px; }
  .gallery-arrows button,.mobile-cold-arrows button { width:44px; height:44px; }
  .gallery-arrows .gallery-playback { height:44px; margin-right:auto; font-size:12px; }
  .mobile-cold-arrows { display:flex; align-items:center; justify-content:flex-end; gap:14px; margin:14px 24px 0; height:44px; }
  .mobile-cold-arrows button { border:1px solid #c9e0e24d; border-radius:50%; background:transparent; color:#d6e4e5; font-size:17px; }
  .mobile-cold-index { font:12px Georgia,serif; color:#d6e4e5; }
  .coldlife-playback { display:block; position:relative; inset:auto; min-height:44px; margin:-44px 0 0 24px; padding:0 12px; font-size:12px; }
  .contact-item:first-child { text-align:center; }
  .contact-wechat-qr { margin-inline:auto; }
}

@media (max-width:900px) {
  [data-mobile-layer="0"] { --point-x:60%; --point-y:14%; }
  [data-mobile-layer="1"] { --point-x:78%; --point-y:23%; }
  [data-mobile-layer="2"] { --point-x:62%; --point-y:31%; }
  [data-mobile-layer="3"] { --point-x:76%; --point-y:40%; }
}