@font-face { font-family: Manrope; src: url('assets/fonts/Manrope-variable.ttf') format('truetype'); font-weight: 200 800; font-display: swap; }

/* 已确认的浅石灰与窗光覆盖整页；只有真实商品和摄影封面提供金色，不引入黄色界面底。 */
:root { --paper: #e7e5df; --ink: #302a23; --muted: #625c53; --line: #c8c4ba; --accent: #765336; --ease: cubic-bezier(.16,1,.3,1); --page: clamp(24px,4vw,80px); --stage-max: 2200px; --panel-max: 1240px; --stage-inset: max(var(--page),calc((100vw - var(--stage-max))/2)); --header-height: 88px; --scene-bottom-space: 40px; --travel: 700ms; color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Manrope,sans-serif; -webkit-font-smoothing: antialiased; isolation: isolate; }
/* 独立4K背景只包含石灰与窗光，按视口覆盖；不再平铺小补丁或叠加模拟光带。 */
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: url('assets/home-stone/window-light-generated-v2.webp') center / cover no-repeat; }
:root { --environment-ink: #17140f; }
::selection { background: var(--accent); color: white; }
html { scrollbar-color: #a18c71 var(--paper); scrollbar-width: thin; }
/* 桌面为滚动条预留固定槽位，打开摘要/切换页面时页眉与页脚不会横移；手机不使用槽位。 */
@media (min-width: 701px) { html { scrollbar-gutter: stable; } }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 7px; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; }
h1,h2,p,figure,dl,dd { margin: 0; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.3; flex-shrink: 0; }
/* 跳过链接只在键盘用户聚焦时出现，避免重复穿过品牌和外部购买入口。 */
.skip-link { position: fixed; left: 20px; top: 12px; z-index: 60; transform: translateY(-150%); padding: 10px 14px; background: var(--ink); color: #fffefa; font-size: 12px; text-decoration: none; transition: transform 160ms var(--ease); }
.skip-link:focus-visible { transform: translateY(0); }
main:focus { outline: none; }
.site-header { position: sticky; top: 0; z-index: 10; height: var(--header-height); padding: 0 var(--stage-inset); display: flex; align-items: center; justify-content: space-between; gap: 32px; background: #f7f6f1; border-bottom: 1px solid var(--line); }
.brand { font: 39px/1 Georgia,serif; letter-spacing: -.035em; text-decoration: none; color: var(--ink); }
.brand-mark { display: inline-block; font-family: Georgia,serif; font-size: clamp(13px,.42em,17px); font-weight: 700; line-height: .9; vertical-align: .52em; margin-left: 5px; letter-spacing: 0; color: currentColor; }
/* 页眉只保留字标、账户入口和亚马逊购买图标；政策/隐私/条款统一降到页脚，不再占页首位置。 */
.header-tools { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.amazon-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; min-height: 44px; color: var(--ink); text-decoration: none; }
.amazon-icon svg { width: 62px; height: 28px; overflow: visible; }
.amazon-icon:hover,.amazon-icon:focus-visible { color: var(--accent); }
.amazon-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.login-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 5px; font-size: 12px; font-weight: 500; color: var(--ink); text-decoration: none; }
.login-link:hover,.login-link:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.header-shop { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; padding: 0 18px; border: 1px solid var(--ink); background: var(--ink); color: #fffefa; font: 600 12px/1 Manrope,sans-serif; text-decoration: none; }
.header-shop svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform 180ms var(--ease); }
.header-shop:hover { background: #66503c; }
.header-shop:hover svg { transform: translateX(3px); }
.header-shop:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* 删除页脚后保留构图底部呼吸空间，避免商品和章节因文案删除而整体位移。 */
.universe { position: relative; min-height: 410px; height: calc(100svh - var(--header-height)); isolation: isolate; overflow: clip; }
/* 窄屏沿用原有文档流；超宽屏才让舞台成为真正的居中画布。 */
.home-stage { display: contents; }
.home-intro { position: absolute; z-index: 2; left: var(--page); top: 14%; transition: opacity 260ms; }
.home-intro h1 { font: 400 clamp(48px,5.5vw,96px)/1.08 Georgia,serif; letter-spacing: -.03em; }
.home-intro span { display: block; margin-top: 18px; font-size: clamp(12px,1vw,20px); color: var(--muted); }
/* 购买操作跟随文案组：规格下方 28px，不独立横在瓶身下面。 */
.home-intro .hero-purchase { display: inline-flex; justify-content: center; width: 220px; min-width: 0; min-height: 48px; margin-top: 28px; padding: 0 20px; font-size: 13px; }
.home-intro .hero-purchase svg { display: none; }
/* 价格与购买动作成组；手机仍把商品实拍放在购买组之前。 */
.hero-buy { margin-top: 24px; }
.hero-price { margin: 0; color: var(--environment-ink,var(--ink)); font-size: 20px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.hero-price small { margin-left: 4px; font-size: 12px; }
.home-intro .hero-buy .hero-purchase { margin-top: 12px; }
/* 桌面舞台让空白区域穿透点击，但首页购买按钮必须单独恢复命中；章节打开后不恢复隐藏入口。 */
body[data-view=home] .home-intro .hero-purchase { pointer-events: auto; }
.hero-product { position: absolute; z-index: 5; left: 34%; top: 60%; width: min(18%,280px); transform: translate(-50%,-50%); transition: opacity 260ms,transform 650ms var(--ease); text-align: center; }
/* 瓶身后面一层极淡的柔光：保留石纹，但减弱玻璃边缘与颗粒的相互干扰。 */
.hero-product::before { content: ''; position: absolute; z-index: 0; inset: -7% -12% -3%; background: radial-gradient(closest-side, #f2efe7ad, #f2efe700 72%); filter: blur(10px); pointer-events: none; }
.product-turn { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 0; border: 0; background: transparent; position: relative; z-index: 1; }
/* 双图叠放保证切换不改变商品与购买按钮的位置，淡化仅表达正背状态而不模拟三维旋转。 */
.product-views { position: relative; display: grid; height: clamp(200px,46svh,570px); aspect-ratio: 595 / 1409; filter: drop-shadow(0 3px 5px #3b352a3d) drop-shadow(12px 18px 12px #51493f26); animation: bottle-enter 850ms var(--ease) both; }
/* 瓶底短而柔的接触阴影由 drop-shadow 跟随瓶身轮廓生成，见 .product-views 的 filter。 */
.product-views img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: contain; transition: opacity 220ms ease-out; }
.product-back,.product-turn[data-face=back] .product-front { opacity: 0; }
.product-turn[data-face=back] .product-back { opacity: 1; }
.product-turn-label { display: inline-flex; align-items: center; gap: 9px; min-height: 28px; margin-top: 9px; font-size: 12px; color: var(--muted); }
.product-turn-label svg { width: 16px; height: 16px; }
.hero-product .product-turn-label { margin-top: 16px; font-size: 14px; }
.hero-product .product-turn-label { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.hero-product .product-turn-label svg { display: inline-flex; }
.hero-product .product-turn-label svg { width: 16px; height: 16px; }
.product-turn:hover .product-turn-label { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.product-turn-status { margin-top: 8px; font-size: 11px; line-height: 1.6; color: var(--muted); }
.purchase { border: 1px solid var(--ink); border-radius: 0; background: var(--ink); color: #fffefa; display: inline-flex; justify-content: space-between; align-items: center; gap: 36px; min-width: 206px; min-height: 52px; padding: 14px 22px; font-size: 12px; margin-top: 16px; transition: background 180ms; }
.purchase:hover { background: #66503c; }
.purchase svg { transition: transform 180ms var(--ease); }
.purchase:hover svg { transform: translateX(4px); }
/* 四张长页按真实叠放关系只露出页签一侧；原生按钮负责打开/返回，避免整屏不可达的装饰层。 */
.bubble-navigation { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.bubble { position: absolute; left: var(--x); top: var(--y); width: 19%; height: 76%; padding: 0; border: 0; background: transparent; border-radius: 0; transform: translate(-50%,-50%) rotate(var(--tilt)); transform-origin: 50% 90%; pointer-events: auto; transition: transform var(--travel) var(--ease),width var(--travel) var(--ease),height var(--travel) var(--ease),opacity 240ms; animation: paper-unfold 900ms var(--entry-delay) var(--ease) backwards; }
.bubble-oil { --x: 55.5%; --y: 54%; --tilt: 0deg; --page-fill: #f7f6f1; --entry-delay: 0ms; z-index: 4; }
.bubble-brand { --x: 66.2%; --y: 55%; --tilt: 0deg; --page-fill: #f4f3ee; --entry-delay: 60ms; z-index: 3; }
.bubble-gallery { --x: 76.2%; --y: 56%; --tilt: 0deg; --page-fill: #e3ddd0; --entry-delay: 120ms; z-index: 2; }
.bubble-film { --x: 85.5%; --y: 56.5%; --tilt: 0deg; --page-fill: #f2f1ec; --entry-delay: 180ms; z-index: 1; }
.bubble-surface { position: relative; height: 100%; width: 100%; padding: 26px 18px; display: flex; flex-direction: column; align-items: flex-end; overflow: hidden; background: var(--page-fill); color: var(--ink); box-shadow: 7px 12px 18px #3b352a26; transition: box-shadow 220ms; }
/* 封面是装饰图，标题与编号始终位于独立的浅色露出带；第一封面上部保留留白。 */
.chapter-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 180ms; }
.bubble-oil .chapter-cover { top: 28%; height: 72%; object-position: 54% center; }
.bubble-brand .chapter-cover { object-position: 65% center; }
.bubble-gallery .chapter-cover { object-position: 30% center; }
.bubble-film .chapter-cover { object-position: 56% center; }
.bubble:not(.bubble-oil) .bubble-surface::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 24%; background: #f5f3edf2; }
.chapter-number { position: absolute; z-index: 1; left: 22px; top: 25px; font: 21px/1 Georgia,serif; }
.bubble:not(.bubble-oil) .chapter-number { left: auto; right: 33%; padding: 4px; background: #f7f6f1e8; color: var(--ink); }
.bubble-title { position: relative; z-index: 1; font: 400 clamp(28px,2.5vw,44px)/1.15 Georgia,serif; letter-spacing: -.025em; white-space: nowrap; writing-mode: vertical-rl; }
.chapter-play { position: absolute; bottom: 10%; right: 32%; z-index: 1; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #fff; border-radius: 50%; color: #fff; background: #25231e7a; }
.chapter-play svg { width: 24px; height: 24px; fill: currentColor; stroke: none; }
.bubble-subtitle { position: absolute; bottom: 30px; left: 26px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.bubble:not(.is-active) .bubble-subtitle { opacity: 0; }
.bubble:hover,.bubble:focus-visible { transform: translate(-50%,calc(-50% - 10px)) rotate(var(--tilt)); }
.bubble:hover .bubble-surface { box-shadow: 8px 18px 26px #3b352a30; }
.bubble:focus-visible { z-index: 6; }
/* 鼠标悬停的首页封面临时置于所有同组卡片之上；移开即恢复原层序，不改变章节返回态或触屏排列。 */
@media (hover: hover) and (pointer: fine) {
  body[data-view=home] .bubble:hover { z-index: 7; }
}
/* 首页右侧目录按印刷目录排布：编号与标题在左、约2:1的横向缩略图居中、短说明在右，分隔线只出现在章节之间。 */
.chapter-index { position: absolute; left: auto; right: var(--page); top: 3.5%; bottom: auto; width: min(37.5%,500px); display: flex; flex-direction: column; pointer-events: none; z-index: 4; }
.chapter-index-heading { margin-bottom: 10px; font: 500 clamp(14px,1.17vw,20px)/1.4 Manrope,sans-serif; letter-spacing: 0; text-transform: none; color: var(--ink); }
.chapter-index::before { content: ''; position: absolute; inset: -12px -14px; z-index: 0; background: #f7f6f180; filter: blur(16px); pointer-events: none; }
.chapter-index-list { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; }
.chapter-index .bubble { position: relative; left: auto; top: auto; width: 100%; height: auto; padding: 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; transform: none; animation: none; pointer-events: auto; text-align: left; transition: border-color 180ms ease-out; }
.chapter-index .bubble:last-child { border-bottom: 0; }
.chapter-index .bubble-surface { display: grid; grid-template-columns: 28% 40% minmax(0,1fr); grid-template-areas: "label cover meta"; column-gap: 0; row-gap: 0; align-items: center; height: auto; padding: 8px 0; background: transparent; box-shadow: none; overflow: visible; }
.chapter-index .bubble-surface::after,.chapter-index .bubble:not(.bubble-oil) .bubble-surface::after { display: none; }
.chapter-index .chapter-label { grid-area: label; align-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding-top: 11px; }
.chapter-index .chapter-number { position: static; left: auto; right: auto; top: auto; padding: 0; background: none; font: 400 clamp(14px,1.25vw,22px)/1 Manrope,sans-serif; letter-spacing: 0; color: var(--ink); }
/* 非首章的封套样式原本给编号加了浅色底块；目录里四个编号必须保持裸文字、同一基线。 */
.chapter-index .bubble:not(.bubble-oil) .chapter-number { left: auto; right: auto; padding: 0; background: none; color: var(--ink); }
.chapter-index .bubble-title { position: static; writing-mode: horizontal-tb; font: 400 clamp(26px,2.6vw,52px)/1.05 Georgia,"Times New Roman",serif; letter-spacing: -.02em; white-space: nowrap; color: var(--ink); transition: color 180ms; }
.chapter-index .chapter-cover { position: static; inset: auto; grid-area: cover; width: 100%; height: auto; aspect-ratio: 2.15; object-fit: cover; background: #d8d4ca; transition: transform 260ms var(--ease); }
.chapter-index .bubble-subtitle,.chapter-index .bubble:not(.is-active) .bubble-subtitle { position: static; inset: auto; grid-area: meta; align-self: center; max-width: none; opacity: 1; padding-left: clamp(16px,1.9vw,26px); font-size: clamp(12px,1.1vw,20px); line-height: 1.5; color: var(--ink); }
.chapter-index .bubble:hover,.chapter-index .bubble:focus-visible { transform: none; }
.chapter-index .bubble:hover .bubble-surface,.chapter-index .bubble:focus-visible .bubble-surface { background: transparent; box-shadow: none; }
.chapter-index .bubble:hover .chapter-cover,.chapter-index .bubble:focus-visible .chapter-cover { transform: scale(1.035); }
.chapter-index .bubble:hover .bubble-title,.chapter-index .bubble:focus-visible .bubble-title { color: var(--accent); }
.chapter-index .bubble:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* 照片暗部比阅读纸面更深，叠在环境上的小字单独加深；不改变浅底正文或封面配色。 */
.home-intro span,.hero-product .product-turn-label,.hero-product .product-turn:hover .product-turn-label,.hero-product .product-turn-status { color: var(--environment-ink); }
/* 入口切换为返回态时隐藏照片；实际内部工具栏外观由后加载的book.css定义，其他入口退出指针和焦点树。 */
body:not([data-view=home]) .bubble:not(.is-active) { opacity: 0; pointer-events: none; transform: translate(-50%,-50%) rotate(0deg) scale(.9); }
.bubble.is-active { width: clamp(130px,13vw,180px); height: 190px; z-index: 7; transform: translate(calc(-50% + var(--dock-x,0px)),calc(-50% + var(--dock-y,0px))) rotate(0deg); }
.bubble.is-active .bubble-surface { align-items: flex-start; padding: 26px; }
.bubble.is-active .chapter-cover,.bubble.is-active .chapter-number,.bubble.is-active .chapter-play,.bubble.is-active .bubble-surface::after { opacity: 0; visibility: hidden; }
.bubble.is-active .bubble-surface { background: #f7f6f1; }
.bubble.is-active .bubble-title { writing-mode: horizontal-tb; font-size: 32px; }
.bubble.is-active .bubble-subtitle { opacity: 1; bottom: 26px; left: 26px; }
body:not([data-view=home]) .hero-product { opacity: 0; transform: translate(-50%,-50%) scale(.94); pointer-events: none; }
body:not([data-view=home]) .home-intro { opacity: 0; visibility: hidden; pointer-events: none; }
body[data-arrived=true] .bubble { animation: none; }
/* 章节共用上下安全边与文字起点；长内容在宽屏内部滚动，主要动作保持在摘要附近。 */
.content-panel { position: absolute; z-index: 2; width: min(71%,1080px); height: calc(100% - 48px); max-height: calc(100% - 48px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #a6a095 #f7f6f1; left: 25%; top: 24px; padding: clamp(24px,3vw,44px); background: #f7f6f1; box-shadow: 8px 16px 32px #3b352a19; animation: panel-open 650ms 80ms var(--ease) both; }
.content-panel h1 { font: 400 clamp(46px,4.5vw,72px)/1.02 Georgia,serif; letter-spacing: -.04em; overflow-wrap: anywhere; }
.content-panel h1:focus { outline: none; }
.content-panel h1:focus-visible { outline: 2px solid var(--accent); outline-offset: 7px; }
.content-panel.is-leaving { animation: panel-close 220ms ease-out both; pointer-events: none; }
.panel-brand { left: 25%; width: min(71%,1120px); }
.oil-layout { display: grid; grid-template-columns: 1fr .9fr; gap: clamp(32px,4vw,64px); align-items: start; }
.oil-image { position: sticky; top: 14px; padding: 35px 20px 24px; background: #e7e5df; }
.oil-image img { height: clamp(280px,45svh,470px); width: auto; margin: auto; filter: drop-shadow(6px 15px 12px #58594518); }
.brand-rule { height: 1px; background: var(--line); width: 75px; margin: 30px 0 20px; }

/* 正文来自用户提供的英文资料，保持可选择文本和自然换行，而不是把资料图当成全部正文。 */
.slot-note { margin-top: 18px; font-size: 12px; line-height: 1.8; color: var(--muted); }
.product-price { margin-top: 14px; font-size: 20px; line-height: 1.4; font-weight: 600; color: var(--ink); }
.product-description { margin-top: 22px; font: 22px/1.45 Georgia,serif; max-width: 32ch; }
.product-benefits { margin: 20px 0 0; padding-left: 17px; color: var(--muted); font-size: 13px; line-height: 1.9; }
.body-copy { margin-top: 14px; max-width: 65ch; font-size: 14px; line-height: 1.85; color: var(--muted); }
.usage-slot { margin: 28px 0; }
.content-panel h2 { font-size: 15px; line-height: 1.5; font-weight: 500; }
.content-detail { border-top: 1px solid var(--line); }
.content-detail:last-of-type { border-bottom: 1px solid var(--line); }
.content-detail summary { cursor: pointer; padding: 15px 3px; font-size: 14px; }
.content-detail summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.content-detail p { color: var(--muted); font-size: 14px; line-height: 1.8; padding: 0 3px 20px; }
.ingredient-notes { padding: 0 3px 18px; font-size: 13px; line-height: 1.7; }
.ingredient-notes > div + div { margin-top: 12px; }
.ingredient-notes dd { color: var(--muted); }
/* Oil 面板文案更长；在面板内部收紧间距，让主要卖点和购买入口留在首屏。 */
.content-panel.panel-oil .oil-copy { padding: 2px 16px 8px 4px; }
.content-panel .oil-title { font: 400 clamp(42px,4vw,60px)/1.05 Georgia,serif; letter-spacing: -.035em; overflow-wrap: normal; }
.product-variant { margin-top: 10px; font-size: 15px; line-height: 1.7; color: var(--muted); }
.panel-oil .product-price { margin-top: 8px; }
.panel-oil .product-description { margin-top: 14px; font-size: 21px; line-height: 1.42; }
.panel-oil .product-benefits { margin-top: 12px; line-height: 1.75; }
.panel-oil .purchase { margin-top: 12px; }
.panel-oil .usage-slot { margin: 18px 0; }
.panel-oil .content-detail summary { padding: 11px 3px; }
/* 品牌图保持完整比例，在内容面板内放大展示，不裁切包装与瓶身。 */
.brand-composition { display: grid; grid-template-columns: .95fr 1.05fr; gap: 32px; align-items: center; margin-top: 40px; }
.brand-copy .brand-statement { font: 32px/1.16 Georgia,serif; letter-spacing: -.025em; }
.brand-portrait img { width: 100%; height: auto; }
.brand-portrait figcaption { margin-top: 14px; font-size: 11px; color: var(--muted); }
.brand-signature { margin-top: 30px; font: 20px/1.5 Georgia,serif; }
.brand-signature span { font: 12px/1.7 Manrope,sans-serif; color: var(--muted); }
/* 图库仅保留主图与缩略条，主图弹性让位，删除原图链接后不再保留底部空行。 */
.panel-gallery { display: grid; grid-template-rows: minmax(160px,1fr) auto; gap: 12px; left: 25%; top: 24px; bottom: 24px; width: 71%; max-height: none; padding: 20px; }
/* 原辅图含完整文字，主图使用contain不裁掉信息，缩略图横向滚动避免十余张素材挤成网格。 */
.gallery-switch { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; margin: 0; padding: 4px 2px 10px; }
.gallery-switch button { flex: 0 0 84px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 5px; min-height: 89px; background: transparent; border: 1px solid transparent; padding: 5px; font-size: 11px; color: var(--muted); }
.gallery-switch button img { width: 60px; height: 60px; object-fit: contain; }
.gallery-switch button:focus-visible { outline-offset: -2px; }
.gallery-switch button[aria-pressed=true] { border-color: var(--accent); color: var(--ink); background: #e7e5df; text-decoration: underline; text-underline-offset: 5px; }
.gallery-frame { position: relative; min-height: 0; overflow: hidden; background: #fff; border-bottom: 1px solid var(--line); display: flex; justify-content: center; padding: 16px; }
.gallery-frame img { height: 100%; width: 100%; object-fit: contain; }
.gallery-status { margin-top: 15px; font-size: 14px; line-height: 1.8; }
.image-retry,.text-action { background: transparent; border: 0; padding: 12px 6px; min-height: 44px; text-decoration: underline; text-underline-offset: 5px; font-size: 14px; }
.panel-film { width: min(71%,1080px); }
.panel-film h1 { font-size: clamp(40px,4vw,64px); margin-bottom: 28px; }
.film-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 36px; align-items: start; }
/* 并排时文字整体相对影片垂直居中；手机单列各占一行，不使用固定偏移挤压播放画面。 */
.film-intro { align-self: center; }
.film-description { font: 24px/1.4 Georgia,serif; }
/* 原视频为1080×1920竖屏，按真实比例建立画布，保留完整画面而不强行裁成横屏。 */
.film-frame { aspect-ratio: 9/16; width: min(100%,calc((100svh - 238px)*.5625),348.75px); height: auto; background: #242820; position: relative; overflow: hidden; }
.film-frame video { width: 100%; height: 100%; background: #242820; object-fit: contain; }
.film-placeholder { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; }
.film-placeholder::before { content: ''; position: absolute; inset: 20px; border: 1px solid #5e6654; }
.film-word { position: absolute; left: 7%; top: 21%; color: #f6f5ef; font: clamp(36px,5vw,80px)/1 Georgia,serif; letter-spacing: -.04em; }
.film-pending { position: absolute; left: 7%; bottom: 12%; display: flex; align-items: center; gap: 12px; color: #eeeee8; }
.film-pending p { font-size: 15px; }
.film-pending span { display: block; margin-top: 7px; font-size: 12px; color: #c0c6b6; }

/* 摘要是明确的非交易预览层，限制自身滚动并由原生 dialog 提供模态语义。 */
.purchase-sheet { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(500px,100%); height: 100%; max-height: 100%; max-width: 100%; border: 0; border-left: 1px solid var(--line); padding: clamp(24px,4vw,44px); background: var(--paper); color: var(--ink); overflow-y: auto; overscroll-behavior: contain; box-shadow: -15px 0 45px #25272218; }
.purchase-sheet[open] { animation: sheet-open 450ms var(--ease); }
.purchase-sheet::backdrop { background: #2527224d; }
body:has(.purchase-sheet[open]) { overflow: hidden; }
.sheet-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.sheet-header h2 { font: 400 clamp(30px,3vw,40px)/1.1 Georgia,serif; letter-spacing: -.04em; }
.sheet-close { display: flex; align-items: center; gap: 8px; min-height: 44px; background: transparent; border: 0; padding: 10px 0 10px 10px; font-size: 12px; }
.sheet-close svg { width: 16px; height: 16px; }
.selection-product { display: flex; align-items: center; gap: 36px; margin: 40px 0; }
.selection-product img { height: 210px; width: auto; }
.selection-product p { font-size: 14px; line-height: 1.8; }
.selection-product span { display: block; margin-top: 12px; font-size: 12px; color: var(--muted); }
.selection-facts { font-size: 14px; }
.selection-facts > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding: 19px 0; border-top: 1px solid var(--line); }
.selection-facts dd { color: var(--muted); }
.selection-facts dd.price-value { color: var(--ink); font-weight: 600; }
.price-unit { margin-left: 4px; font-size: 11px; font-weight: 400; color: var(--muted); }
.checkout-entry { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; min-height: 48px; margin-top: 28px; padding: 14px 20px; color: #fffefa; background: var(--ink); text-decoration: none; font-size: 12px; }
.checkout-entry:hover { background: #66503c; }
.checkout-test-note { margin-top: 12px; font-size: 10px; line-height: 1.7; color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.noscript-note { position: absolute; bottom: 0; background: var(--paper); padding: 20px; font-size: 12px; }
/* 首屏保持整屏；登录、政策、联系与 Amazon 入口集中放在首屏下方的信息页脚。 */
/* 页脚压缩为四列信息带：品牌/Explore/Care/Account，文字和高度都收小。 */
.site-footer { margin: 0; padding: 0 var(--page); background: #f7f6f1; border-top: 1px solid var(--line); color: var(--muted); }
.footer-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: clamp(24px,3.5vw,56px); padding: 34px 0 26px; }
.footer-brand { display: inline-block; font: 30px/1 Georgia,serif; letter-spacing: -.04em; color: var(--ink); text-decoration: none; }
.footer-heading { margin-bottom: 9px; font: 400 15px/1.3 Georgia,serif; letter-spacing: -.01em; color: var(--ink); }
.footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.footer-column a,.footer-column button { display: inline-flex; align-items: center; min-height: 32px; border: 0; padding: 3px 0; background: none; color: #4c463d; font: 500 12px/1.5 Manrope,sans-serif; text-align: left; text-decoration: none; }
.footer-column a:hover,.footer-column button:hover,.footer-column a:focus-visible,.footer-column button:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.footer-column button.is-current { color: var(--accent); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 120px 24px 0; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.6; color: var(--muted); }
.footer-bottom nav { display: flex; gap: 18px; }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 24px; color: var(--ink); text-decoration: none; }
.footer-bottom a:hover,.footer-bottom a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
@keyframes paper-unfold { from { opacity: .45; transform: translate(-50%,-50%) rotate(0deg); } to { opacity: 1; transform: translate(-50%,-50%) rotate(var(--tilt)); } }
@keyframes bottle-enter { from { opacity: .15; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes panel-open { from { opacity: 0; clip-path: inset(0 0 15% 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes panel-close { from { opacity: 1; } to { opacity: 0; } }
@keyframes sheet-open { from { transform: translateX(40px); opacity: .3; } to { transform: none; opacity: 1; } }
/* 系统减少动态直接落到完整状态，不把入场中的纸页或内容停在半透明画面。 */
body[data-paused=true] .bubble,body[data-paused=true] .product-views,body[data-paused=true] .content-panel,body[data-paused=true] .purchase-sheet { animation: none; transition: none; }
body[data-paused=true] .hero-product,body[data-paused=true] .bubble-surface { transition: none; }
body[data-paused=true] .bubble:not(.is-active):hover { transform: translate(-50%,-50%) rotate(var(--tilt)); }

/* 平板与手机收起页眉章节导航，保留登录/政策/购买；页脚改为两列，品牌独占一行。 */
@media (max-width: 1050px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 24px 32px; }
  .footer-brand-column { grid-column: 1 / -1; }
}

/* 手机把扇开的纸页重排为四条完整封套；保留每个章节，不靠缩小桌面画布适配。 */
@media (max-width: 700px) {
  :root { --page: 20px; --header-height: 64px; --scene-bottom-space: 52px; }
  .brand { font-size: 30px; }
  .site-header { display: flex; gap: 12px; }
  .header-tools { margin-left: auto; gap: 12px; }
  .login-link { font-size: 11px; }
  .header-shop { min-height: 40px; padding: 0 14px; gap: 10px; font-size: 11px; }
  .header-shop svg { width: 14px; height: 14px; }
  .amazon-icon { width: 58px; height: 30px; }
  .amazon-icon svg { width: 56px; height: 26px; }
  .universe { height: auto; min-height: calc(100svh - var(--header-height) - var(--scene-bottom-space)); padding: 8px var(--page) 24px; display: flex; flex-direction: column; gap: 20px; }
  /* 手机改单列：标题 → 规格 → 产品 → 购买；home-intro 拆成独立条目参与排序。 */
  .home-intro { position: static; display: contents; }
  .home-intro h1 { order: 1; font-size: 40px; }
  .home-intro span { order: 2; max-width: none; margin: 0; font-size: 13px; line-height: 1.7; }
  .hero-buy { order: 4; margin-top: 0; }
  .hero-product { position: relative; left: auto; top: auto; width: 100%; transform: none; order: 3; }
  .home-intro .hero-purchase { order: 4; width: min(240px,100%); min-height: 48px; margin-top: 0; justify-self: start; }
  .chapter-index { order: 5; }
  .content-panel { order: 6; }
  .product-views { height: clamp(230px,32svh,330px); }
  .product-turn-label { margin-top: 4px; font-size: 11px; }
  .purchase { min-width: 160px; min-height: 46px; margin-top: 8px; padding: 12px 18px; gap: 24px; }
  .hero-product .purchase { width: min(240px,100%); min-height: 48px; margin-top: 6px; }
  .hero-product .product-turn-label { margin-top: 4px; }
  .bubble-navigation { position: relative; inset: auto; display: grid; grid-template-columns: 1fr; gap: 7px; }
  /* 手机返回直接恢复文档流，避免桌面的尺寸过渡使焦点滚动按中间帧计算。 */
  .bubble,.bubble:hover,.bubble:focus-visible,body[data-paused=true] .bubble:not(.is-active):hover { position: relative; left: auto; top: auto; width: 100%; height: 68px; transform: none; animation: none; transition: none; }
  /* 手机封面收为独立左侧缩略图，文字在纯色区横排，保留全部章节且避免照片降低文字对比。 */
  .bubble-surface { padding: 14px 16px 14px 104px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; box-shadow: 3px 5px 12px #3b352a17; }
  .chapter-cover,.bubble-oil .chapter-cover { inset: 0 auto 0 0; width: 88px; height: 100%; object-position: center; }
  .bubble:not(.bubble-oil) .bubble-surface::after { display: none; }
  .chapter-number,.bubble:not(.bubble-oil) .chapter-number { position: static; padding: 0; font-size: 15px; background: none; }
  .chapter-play { width: 28px; height: 28px; left: 30px; bottom: 20px; right: auto; }
  .chapter-play svg { width: 16px; height: 16px; }
  .bubble-title { writing-mode: horizontal-tb; font-size: 25px; }
  .bubble:not(.is-active) .bubble-subtitle { display: none; }
  .bubble-subtitle { position: static; font-size: 11px; margin: 0; }
  /* 手机目录改为两列：左侧编号与标题，右侧横向缩略图；说明文字让位给更紧的节奏。 */
  .chapter-index { position: relative; inset: auto; width: 100%; margin-top: 4px; display: flex; flex-direction: column; pointer-events: auto; }
  .chapter-index-heading { margin-bottom: 4px; }
  .chapter-index .bubble-surface { grid-template-columns: minmax(0,1fr) 96px; grid-template-areas: "label cover"; gap: 12px; min-height: 82px; padding: 10px 0; box-shadow: none; }
  .chapter-index .chapter-label { align-self: start; padding-top: 5px; gap: 4px; }
  .chapter-index .chapter-cover { width: 96px; height: 58px; aspect-ratio: auto; }
  .chapter-index .bubble-title { font-size: 23px; }
  .chapter-index .chapter-number { font-size: 11px; }
  /* 手机仍保留副标题，但压缩成目录标签下的一行，避免四个入口失去定位信息。 */
  .chapter-index .bubble-subtitle,.chapter-index .bubble:not(.is-active) .bubble-subtitle { display: block; position: absolute; left: 0; bottom: 9px; max-width: calc(100% - 108px); padding-left: 0; font-size: 10px; line-height: 1.3; color: var(--muted); }
  .chapter-index .bubble:not(.is-active) .bubble-subtitle { display: block; }
  .content-panel h1 { font-size: 46px; }
  .oil-layout { grid-template-columns: 1fr; gap: 24px; }
  .oil-image { position: relative; top: auto; padding: 24px; }
  .oil-image img { height: 250px; }
  .brand-composition { grid-template-columns: 1fr; gap: 28px; margin-top: 28px; }
  .brand-portrait { max-width: 100%; }
  .brand-copy .brand-statement { font-size: 30px; }
  .film-layout { grid-template-columns: 1fr; gap: 28px; }
  .film-description { font-size: 22px; }
  .film-frame { width: min(100%,320px); max-height: none; margin: auto; }
  body:not([data-view=home]) .home-intro,body:not([data-view=home]) .hero-product { display: none; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 18px 20px; padding: 24px 0 18px; }
  .footer-heading { margin-bottom: 7px; font-size: 14px; }
  .footer-column a,.footer-column button { min-height: 32px; font-size: 11px; line-height: 1.5; }
  .footer-bottom { flex-wrap: wrap; padding: 12px 56px 24px 0; font-size: 11px; }
}
@media (min-width: 701px) and (max-width: 1050px) {
  /* 新标题比原来的两词标题长得多；平板保持左右构图时按可用宽度收小，避免压到瓶身。 */
  .home-intro { top: 50%; transform: translateY(-50%); }
  .home-intro h1 { font-size: clamp(24px, 3.3vw, 36px); }
  .home-intro span { max-width: 16ch; line-height: 1.6; margin-top: 14px; }
  .home-intro .hero-purchase { width: 190px; min-height: 44px; margin-top: 22px; font-size: 12px; }
  .hero-product { left: 42%; top: 50%; }
  .product-views { height: min(46svh,420px); }
  /* 平板目录略加宽并下移一档起点，短说明换行时仍不挤压编号与标题。 */
  .chapter-index { width: 42%; top: 4%; }
  .chapter-index .bubble-surface { grid-template-columns: 30% 39% minmax(0,1fr); padding: 8px 0; }
  .chapter-index .chapter-label { padding-top: 9px; gap: 6px; }
  .chapter-index .chapter-number { font-size: 14px; }
  .chapter-index .bubble-title { font-size: clamp(24px,2.65vw,27px); }
  .chapter-index .bubble-subtitle,.chapter-index .bubble:not(.is-active) .bubble-subtitle { padding-left: 12px; font-size: 12px; line-height: 1.45; }
  .bubble-title { font-size: 28px; }
  .bubble-surface { padding: 24px 10px; }
  .chapter-number { font-size: 17px; left: 14px; }
  .bubble:not(.bubble-oil) .chapter-number { right: 30%; }
  .hero-product .purchase { font-size: 12px; }
  .oil-layout { grid-template-columns: 1fr .7fr; gap: 24px; }
  .oil-image { padding: 24px 12px; }
  .oil-image img { height: auto; max-height: 320px; max-width: 100%; }
}
/* 宽屏把整组首屏构图收进居中舞台：右侧目录不再贴角，瓶身中心与目录中心落在同一水平线。 */
@media (min-width: 900px) {
  .home-stage { display: block; position: absolute; inset: 0; width: min(calc(100% - var(--page)*2),var(--stage-max)); height: 100%; margin-inline: auto; z-index: 1; pointer-events: none; }
  /* 左侧文案组与瓶身共用同一垂直中心：标题、规格、购买按钮成组，右侧目录独立。 */
  .home-intro { left: 0; top: 50%; transform: translateY(-50%); }
  .home-intro h1 { font-size: clamp(34px,3.6vw,48px); letter-spacing: -.025em; }
  .hero-product { left: 43%; top: 50%; pointer-events: auto; }
  .product-views { height: clamp(230px,50svh,620px); }
  .chapter-index { right: 0; top: 50%; bottom: auto; width: min(42%,780px); transform: translateY(-50%); }
}
@media (min-width: 1200px) {
  /* 桌面按方案给定区间：标题 52–58px，避免与右侧目录争抢注意力。 */
  .home-intro h1 { font-size: clamp(52px,3.9vw,58px); line-height: 1.08; }
}
@media (max-width: 360px) {
  :root { --page: 16px; }
  .home-intro h1 { font-size: 35px; }
  .bubble-title { font-size: 23px; }
}
/* 和JS共享自然流边界：长文档自然滚动，不被桌面定高截断；内部返回行由book.css管理。 */
@media (max-height: 760px), (max-width: 900px) {
  body:not([data-view=home]) .universe { display: block; height: auto; min-height: calc(100svh - var(--header-height) - var(--scene-bottom-space)); overflow: visible; padding: 0; }
  body:not([data-view=home]) .bubble-navigation { position: sticky; display: block; inset: auto; top: 0; height: 88px; background: var(--paper); z-index: 8; }
  body:not([data-view=home]) .content-panel { position: relative; left: auto; top: auto; bottom: auto; transform: none; width: min(calc(100% - var(--page)*2),var(--panel-max)); height: auto; max-height: none; overflow: visible; margin: 0 auto 24px; padding: 28px 24px; }
  body:not([data-view=home]) .bubble.is-active,body[data-paused=true]:not([data-view=home]) .bubble.is-active:hover { position: absolute; left: 50%; top: 42px; width: calc(100% - var(--page)*2); height: 60px; transform: translate(-50%,-50%); animation: none; }
  body:not([data-view=home]) .bubble.is-active .bubble-surface { align-items: center; flex-direction: row; justify-content: space-between; padding: 14px 22px; }
  body:not([data-view=home]) .bubble.is-active .bubble-title { font-size: 26px; }
  body:not([data-view=home]) .bubble.is-active .bubble-subtitle { position: static; font-size: 12px; margin: 0; }
  body:not([data-view=home]) .bubble:not(.is-active) { position: absolute; visibility: hidden; }
  .panel-gallery { grid-template-rows: auto auto; gap: 16px; }
  .gallery-frame { height: clamp(240px,44svh,500px); padding: 10px; }
  .gallery-switch button { flex-basis: 76px; }
  .film-frame { width: min(100%,320px); }
  .selection-product { margin: 24px 0; }
  .selection-product img { height: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .bubble,.product-views,.content-panel,.content-panel.is-leaving,.purchase-sheet[open] { animation: none; transition: none; }
  .site-header { transition: none; }
  .amazon-icon svg { transition: none; }
  .bubble-surface,.hero-product,.purchase svg { transition: none; }
  .chapter-cover { transition: none; }
  .product-views img { transition-duration: 100ms; }
  .purchase:hover svg { transform: none; }
}