/* =========================================================
   C&B「玻璃与铜」样式 —— 移植自 Codex 设计交付 2026-10-21
   来源：CB-玻璃与铜-设计交付-20261021.zip / site/styles.css
   已移除：评审工具样式（review-strip / component-* / design-links / swatch*）
   保留：全部设计 token、排版阶梯、组件四态、断点、reduced-motion
   ⚠️ 全站不使用 backdrop-filter（性能预算）
   ========================================================= */
:root {
  --base:#edf1f1; --surface:#f8faf9; --ink:#263738; --muted:#59696a;
  --copper:#805033; --line:#c9d2d0; --amber:#ba803a; --dark:#233032;
  --white:#fff; --error:#a13232; --success:#286349;
  --body:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --display:"Songti SC","STSong","Noto Serif CJK SC","SimSun",serif;
  --numeric:Georgia,"Times New Roman",serif;
  --r-control:4px; --r-media:8px; --r-dialog:12px;
  --shadow-low:0 2px 8px rgb(38 55 56 / 6%);
  --shadow-high:0 24px 80px rgb(38 55 56 / 18%);
  --ease:cubic-bezier(.2,.7,.25,1); --fast:160ms; --normal:240ms; --slow:320ms;
  font-family:var(--body); color:var(--ink); background:var(--surface); font-synthesis:none;
}
*{box-sizing:border-box}
body{margin:0;font-size:16px;line-height:1.8}
body:has(dialog[open]){overflow:hidden}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-underline-offset:5px}
button,a,summary{touch-action:manipulation}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
img{display:block;max-width:100%;height:auto}
svg{width:20px;height:20px;flex-shrink:0}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{text-wrap:balance;overflow-wrap:break-word}
h1,h2{font-family:var(--display);font-weight:600;letter-spacing:0;line-height:1.35}
h1{font-size:56px}h2{font-size:36px}h3{font-size:20px;font-weight:600;line-height:1.5}
p{overflow-wrap:anywhere}
small{font-size:13px}
::selection{background:#dfc6af;color:var(--ink)}
:focus-visible{outline:2px solid var(--copper);outline-offset:4px}
[hidden]{display:none!important}
.container{width:min(1248px,calc(100% - 96px));margin-inline:auto}
.section{padding-block:96px}
.section.compact{padding-block:64px}
.section.white{background:var(--white)}
.section.base{background:var(--base)}
.section-head{display:flex;gap:32px;align-items:end;justify-content:space-between;margin-bottom:40px}
.section-head p{max-width:480px;color:var(--muted)}
.eyebrow{font-size:15px;line-height:1.6;color:var(--copper);margin-bottom:20px}
.lead{font-size:18px;line-height:1.8;color:var(--muted);max-width:640px;margin-top:24px}
.muted{color:var(--muted)}
.skip-link{position:fixed;left:24px;top:-100px;z-index:100;background:var(--white);padding:12px 20px}
.skip-link:focus{top:12px}
.site-header{height:88px;position:sticky;top:0;z-index:20;background:rgb(248 250 249 / 97%);border-bottom:1px solid var(--line);transition:box-shadow var(--fast)}
.site-header.scrolled{box-shadow:var(--shadow-low)}
.nav-inner{height:100%;width:calc(100% - 80px);margin:auto;display:flex;align-items:center;gap:32px}
.wordmark{display:flex;align-items:center;gap:14px;text-decoration:none;flex-shrink:0}
.wordmark img{width:48px;height:40px;object-fit:contain}
.wordmark span{font-family:Georgia,serif;font-size:18px;line-height:1.25}
.nav-main{display:flex;align-items:center;gap:20px;margin-left:auto}
.nav-group{display:flex;align-items:center;gap:24px;padding-right:20px;border-right:1px solid var(--line)}
.nav-main a{min-height:44px;display:flex;align-items:center;text-decoration:none;font-size:14px;position:relative}
.nav-main a:hover{color:var(--copper)}
.nav-main a[aria-current=page]{color:var(--copper)}
.nav-main .whisky-link{color:var(--copper);font-weight:600;padding-inline:8px}
.whisky-link:after{content:"";position:absolute;height:1px;bottom:2px;left:8px;right:8px;background:var(--copper)}
.nav-end{display:flex;align-items:center;gap:16px;margin-left:auto}
.account-link{display:flex;align-items:center;gap:8px;text-decoration:none;font-size:14px;min-height:44px;white-space:nowrap}
.menu-toggle{display:none}
.icon-button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:1px solid transparent;border-radius:var(--r-control);color:var(--ink);background:transparent}
.icon-button:hover{background:var(--base)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:10px 24px;border:1px solid var(--copper);border-radius:var(--r-control);font-size:15px;font-weight:500;line-height:1.6;text-decoration:none;background:var(--copper);color:var(--white);transition:background var(--fast),box-shadow var(--fast),transform var(--fast)}
.button:hover{background:#68402a;border-color:#68402a}
.button:active{transform:translateY(1px)}
.button.secondary{background:transparent;color:var(--copper)}
.button.secondary:hover{background:#e6dfd8}
.button.ghost{background:transparent;color:var(--ink);border-color:transparent;padding-inline:12px}
.button.ghost:hover{background:var(--base)}
.button:disabled,.button[aria-disabled=true]{color:#667374;background:#e2e6e5;border-color:#d3dbd9;transform:none}
.button.small{min-height:44px;padding:8px 16px}
.button.full{width:100%}
.text-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--copper);text-decoration:underline;text-decoration-thickness:1px}
.text-link:hover{text-decoration-thickness:2px}
.text-link:active{color:var(--ink)}
.actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px}
.hero{background:var(--base);border-bottom:1px solid var(--copper);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.12fr 1fr;align-items:center;min-height:624px;gap:32px}
.hero-copy{padding-block:64px;position:relative;z-index:1}
.hero h1{font-size:68px;line-height:1.28}
.hero .lead{max-width:440px}
.hero-figure{align-self:center;display:block;position:relative}
.hero-figure img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-media)}
.hero-figure figcaption{position:absolute;right:16px;bottom:20px;font-size:12px;color:#344243;background:rgb(248 250 249 / 94%);padding:4px 8px;border-radius:var(--r-control)}
.hero-caption{font-size:13px;color:var(--muted);margin-top:24px}
.flow-layout{display:grid;grid-template-columns:1fr 2.2fr;gap:48px}
.flow-layout h2{font-size:32px}
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.flow-number{font-family:var(--numeric);font-size:34px;color:var(--copper);line-height:1;margin-bottom:24px;display:flex;align-items:center;gap:20px}
.flow-number:after{content:"";height:1px;background:var(--line);flex:1}
.flow h3{font-size:18px;margin-bottom:12px}
.flow p{font-size:14px;line-height:1.8;color:var(--muted)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.split p+p{margin-top:16px}
.link-list{list-style:none;padding:0;margin:0}
.link-list li{border-bottom:1px solid var(--line)}
.link-list a{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:88px;text-decoration:none}
.link-list a:hover{color:var(--copper)}
.link-list strong{font-family:var(--display);font-size:24px;font-weight:600}
.link-list span{font-size:14px;color:var(--muted)}
.note{border-left:2px solid var(--copper);padding-left:24px;margin-top:32px;color:var(--muted);font-size:15px}
.dark-panel{background:var(--dark);color:var(--surface);padding:48px;border-radius:var(--r-media)}
.dark-panel p{color:#c7d1cf;margin-block:20px 24px}
.dark-panel .button.secondary{color:#f2d3ba;border-color:#be9270}
.dark-panel .button.secondary:hover{background:#344346}
.dark-panel :focus-visible{outline-color:#edc5a5}
.page-head{background:var(--base);padding-block:32px 64px;border-bottom:1px solid var(--line)}
.breadcrumb{list-style:none;display:flex;flex-wrap:wrap;gap:8px 12px;margin:0 0 40px;padding:0;font-size:13px;color:var(--muted)}
.breadcrumb a{min-height:32px;display:inline-flex;align-items:center;text-decoration:none}
.breadcrumb li{display:flex;align-items:center;gap:12px}
.breadcrumb li+li:before{content:"/";color:var(--muted)}
.page-head h1{max-width:880px}
.section-nav{display:flex;gap:8px 28px;flex-wrap:wrap;padding-block:16px;border-bottom:1px solid var(--line);margin-bottom:0}
.section-nav a{font-size:14px;min-height:44px;display:inline-flex;align-items:center;text-decoration:none}
.section-nav a[aria-current=page]{color:var(--copper);text-decoration:underline;text-underline-offset:8px}
.service-row{display:grid;grid-template-columns:72px 1fr 1.4fr;gap:32px;padding-block:36px;border-bottom:1px solid var(--line);align-items:start}
.service-row:first-child{padding-top:0}
.service-row p{color:var(--muted)}
.service-row .num{font-family:var(--numeric);font-size:30px;color:var(--copper);line-height:1.3}
.service-row h3{font-family:var(--display);font-size:28px}
.service-row ul{padding-left:20px;margin-block:16px 0;color:var(--muted)}
.person{display:grid;grid-template-columns:400px 1fr;gap:72px;align-items:center;padding-block:48px;border-bottom:1px solid var(--line)}
.person:first-child{padding-top:0}
.person img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-media);background:var(--base)}
.person h2{font-family:Georgia,serif;font-size:36px;font-weight:400}
.person .role{color:var(--copper);margin-block:12px 24px}
.person p{max-width:640px}
.case-toolbar{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:32px}
.segmented{display:flex;gap:8px;flex-wrap:wrap}
.filter-button{min-height:44px;padding:8px 20px;border:1px solid var(--line);border-radius:var(--r-control);background:transparent;color:var(--ink)}
.filter-button:hover{border-color:var(--copper)}
.filter-button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--white)}
.filter-button:disabled{background:var(--base);color:var(--muted);border-color:var(--line);cursor:not-allowed}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.case-card{min-width:0}
.case-image{display:block;overflow:hidden;background:#000;border-radius:var(--r-media);border:0;padding:0;width:100%}
.case-image img{width:100%;aspect-ratio:4/5;object-fit:contain;transition:transform var(--normal)}
.case-image:hover img{transform:scale(1.02)}
.case-card h3{margin-top:20px;font-size:20px}
.case-card p{color:var(--muted);font-size:14px;margin-top:8px}
.case-card .badge{margin-top:12px}
.badge{display:inline-block;background:var(--base);color:var(--muted);font-size:12px;line-height:1.5;padding:4px 8px;border-radius:var(--r-control)}
.case-detail img{max-height:60vh;max-width:100%;margin:24px auto;object-fit:contain}
.reading-layout{display:grid;grid-template-columns:220px minmax(0,720px);gap:64px;justify-content:center}
.reading-toc{position:sticky;top:120px;align-self:start;font-size:14px}
.reading-toc p{font-weight:600;margin-bottom:16px}
.reading-toc a{display:block;min-height:44px;padding:8px 16px;border-left:1px solid var(--line);color:var(--muted);text-decoration:none}
.reading-toc a:hover,.reading-toc a:focus{color:var(--copper);border-color:var(--copper)}
.prose{font-size:18px;line-height:1.85}
.prose h2{font-size:30px;margin-block:56px 24px;scroll-margin-top:120px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:20px;margin-block:32px 16px}
.prose p+p{margin-top:20px}
.prose ul{padding-left:24px}
.prose .summary{font-family:var(--display);font-size:24px;line-height:1.7;padding-left:24px;border-left:1px solid var(--copper);margin-block:32px}
.article-meta{display:flex;gap:24px;margin-top:24px;font-size:14px;color:var(--muted)}
.table-wrap{overflow-x:auto;margin-block:32px;border:1px solid var(--line);border-radius:var(--r-control)}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{text-align:left;padding:16px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--base);font-weight:600}
tr:last-child td{border-bottom:0}
.faq{max-width:880px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px;padding-block:20px;cursor:pointer;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{transition:transform var(--fast)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq details p{padding:0 40px 24px 0;color:var(--muted)}
.cta-band{display:flex;justify-content:space-between;align-items:center;gap:40px;padding-block:56px;border-top:1px solid var(--copper)}
.cta-band h2{font-size:32px}
.cta-band p{color:var(--muted);margin-top:12px}
.site-footer{background:var(--base);border-top:1px solid var(--line);padding-block:40px 24px}
.footer-top{display:flex;align-items:start;justify-content:space-between;gap:40px}
.footer-links{display:flex;flex-wrap:wrap;gap:24px}
.footer-links a{font-size:14px;text-decoration:none;min-height:44px;display:flex;align-items:center}
.footer-bottom{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--line);padding-top:24px;margin-top:32px;font-size:12px;color:var(--muted)}
.footer-bottom button{border:0;background:none;color:var(--muted);padding:0;min-height:32px;text-decoration:underline}
.form-layout{display:grid;grid-template-columns:1fr 1.35fr;gap:96px}
.form-panel{background:var(--white);padding:40px;border:1px solid var(--line);border-radius:var(--r-media)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field.wide{grid-column:1/-1}
label,.field-label{font-size:14px;font-weight:500;line-height:1.6}
input:not([type=checkbox]):not([type=radio]),select,textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid #849593;border-radius:var(--r-control);background:var(--white);color:var(--ink);font-size:16px;line-height:1.5}
input:hover,select:hover,textarea:hover{border-color:var(--copper)}
input::placeholder,textarea::placeholder{color:#6b7979}
textarea{min-height:144px;resize:vertical}
input:disabled,select:disabled,textarea:disabled{color:var(--muted);background:var(--base);border-color:var(--line)}
input[aria-invalid=true],textarea[aria-invalid=true],select[aria-invalid=true]{border-color:var(--error)}
.hint{color:var(--muted);font-size:13px;line-height:1.7}
.field-error{color:var(--error);font-size:13px;line-height:1.6}
.field .hint:empty,.field-error:empty{display:none}
.check-label{display:flex;align-items:start;gap:12px;font-size:14px;line-height:1.8;padding-block:4px;cursor:pointer}
input[type=checkbox],input[type=radio]{width:20px;height:20px;accent-color:var(--copper);flex-shrink:0;margin:3px 0}
.form-panel .actions{margin-top:24px}
.notice{font-size:14px;line-height:1.8;padding:16px 20px;border-radius:var(--r-control);background:var(--base);border-left:2px solid var(--copper);margin-bottom:24px}
.notice.error{border-color:var(--error);color:var(--error);background:#fbf0ef}
.notice.success{border-color:var(--success);background:#edf5ef;color:var(--success)}
.notice:empty{display:none}
.success-panel{padding-block:24px}
.success-panel h2{font-size:32px;margin-bottom:20px}
.success-panel p{color:var(--muted)}
.text-list{list-style:none;margin:32px 0 0;padding:0}
.text-list li{padding:16px 0;border-bottom:1px solid var(--line)}
.text-list strong{display:block;font-size:15px;margin-bottom:4px}
.text-list span{font-size:14px;color:var(--muted)}
.account-layout{display:grid;grid-template-columns:256px 1fr;gap:64px}
.account-nav{background:var(--dark);color:var(--surface);padding:24px;border-radius:var(--r-media);align-self:start}
.account-nav h2{font-family:var(--body);font-size:18px;margin:8px 12px 24px}
.account-nav button{display:block;width:100%;padding:12px;border:0;background:none;color:#cfdbd8;text-align:left;min-height:48px;border-radius:var(--r-control)}
.account-nav button[aria-pressed=true]{color:#f7d6bc;background:#344345;border-left:2px solid #d7a480}
.account-nav button:hover{background:#344345}
.account-nav :focus-visible{outline-color:#eac6a9}
.account-content{min-width:0}
.account-content h2{font-size:32px;margin-bottom:24px}
.empty-state{text-align:center;padding:64px 32px;background:var(--base);border-radius:var(--r-media)}
.empty-state h3{font-family:var(--display);font-size:28px;margin-bottom:16px}
.empty-state p{color:var(--muted);margin-bottom:24px}
dialog{border:1px solid var(--line);border-radius:var(--r-dialog);padding:40px;max-width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 48px);color:var(--ink);background:var(--surface);box-shadow:var(--shadow-high);overflow:auto}
dialog::backdrop{background:rgb(25 39 40 / 52%)}
dialog[open]{animation:dialog-in var(--normal) var(--ease)}
dialog h2{font-size:32px;margin-bottom:20px}
dialog p{color:var(--muted)}
.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.dialog-top h2{margin:0}
.age-mark{font-family:var(--numeric);font-size:48px;line-height:1;color:var(--copper);padding-bottom:24px;border-bottom:1px solid var(--copper);margin-bottom:32px}
.age-dialog .hint{margin-top:20px}
.mobile-menu{margin:0 0 0 auto;height:100dvh;max-height:100dvh;width:min(440px,100vw);max-width:100vw;border-radius:0;padding:24px;border:0}
.mobile-menu .dialog-top{padding-bottom:16px;border-bottom:1px solid var(--line)}
.mobile-group{padding-block:20px;border-bottom:1px solid var(--line)}
.mobile-group p{font-size:12px;color:var(--muted);margin-bottom:8px}
.mobile-group a{display:block;padding:10px 4px;text-decoration:none;font-size:18px;min-height:48px}
.mobile-group.business a{font-family:var(--display);font-size:28px;color:var(--copper)}
.mobile-group.business{border-bottom:1px solid var(--copper)}
.mobile-menu .button{margin-top:24px}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:60;padding:12px 24px;border-radius:var(--r-control);background:var(--ink);color:var(--white);box-shadow:var(--shadow-high);max-width:calc(100% - 32px);width:max-content;font-size:14px}
.pagination{display:flex;gap:8px;margin-top:24px}
.pagination button{width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--white);color:var(--ink)}
.pagination button[aria-current=page]{background:var(--ink);color:var(--white)}
.pagination button:disabled{color:var(--muted);background:var(--base);cursor:not-allowed}
.pagination button:hover:not(:disabled){border-color:var(--copper)}
@keyframes dialog-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1081px){.menu-toggle{display:none!important}}
@media(max-width:1200px) and (min-width:1081px){
  .wordmark span{display:none}.nav-inner{gap:24px}.nav-group{gap:20px}.nav-main{gap:16px}
}
@media(max-width:1080px){
  .nav-main{display:none}.menu-toggle{display:inline-flex}.nav-inner{width:calc(100% - 48px)}
  .site-header{height:72px}.container{width:calc(100% - 64px)}
  .hero-grid{grid-template-columns:1.1fr 1fr;gap:24px;min-height:560px}.hero h1{font-size:56px}
  .flow-layout{grid-template-columns:1fr;gap:40px}.flow-layout h2 br{display:none}
  .split{gap:48px}.person{grid-template-columns:240px 1fr;gap:48px}
  .form-layout{gap:48px}.form-panel{padding:32px}.account-layout{grid-template-columns:220px 1fr;gap:40px}
  .reading-layout{grid-template-columns:180px minmax(0,1fr);gap:40px}
}
@media(min-width:768px) and (max-width:900px){.hero h1{font-size:48px}}
@media(max-width:767px){
  .container{width:calc(100% - 40px)}.nav-inner{width:calc(100% - 32px);gap:16px}
  .site-header{height:64px}.wordmark img{width:38px;height:34px}.wordmark{gap:8px}.wordmark span{font-size:14px}
  .nav-end{gap:4px}.account-link{padding:10px 8px}.account-link span{display:none}
  .section{padding-block:56px}.section.compact{padding-block:40px}
  h1{font-size:38px}h2{font-size:30px}h3{font-size:18px}
  .hero-grid{display:flex;flex-direction:column;gap:0;min-height:0;align-items:stretch}
  .hero-copy{padding-block:40px 32px}.hero h1{font-size:44px;line-height:1.3}
  .eyebrow{font-size:14px;margin-bottom:20px}.lead{font-size:16px;margin-top:20px}
  .hero .lead{max-width:100%}.actions{gap:12px;margin-top:24px}
  .button{padding-inline:20px;min-height:48px}.hero-caption{margin-top:20px}
  .hero-figure{margin-bottom:32px;align-self:auto}.hero-figure img{aspect-ratio:5/4;object-fit:cover;object-position:50% 56%}
  .hero-figure figcaption{bottom:12px;right:12px}
  .flow-layout{gap:32px}.flow-layout h2{font-size:28px}
  .flow{grid-template-columns:1fr 1fr;gap:32px 24px}.flow-number{font-size:28px;margin-bottom:16px}
  .flow h3{font-size:17px;margin-bottom:8px}.flow p{font-size:14px}
  .split,.form-layout,.account-layout,.reading-layout,
  .section-head{display:block;margin-bottom:28px}.section-head p{margin-top:16px}
  .link-list a{min-height:80px}.link-list strong{font-size:22px}.link-list span{font-size:13px}
  .dark-panel{padding:32px 24px}.dark-panel h2{font-size:28px}
  .page-head{padding-block:20px 40px}.breadcrumb{margin-bottom:24px;font-size:12px;gap:4px 8px}.breadcrumb li{gap:8px}
  .page-head .eyebrow{margin-bottom:16px}.section-nav{gap:0 24px;padding-block:8px}
  .section-nav a{font-size:13px;min-height:44px}
  .service-row{grid-template-columns:32px 1fr;gap:16px;padding-block:28px}
  .service-row>div:last-child{grid-column:2}.service-row h3{font-size:24px}.service-row .num{font-size:24px}
  .person{grid-template-columns:1fr;gap:24px;padding-block:40px}.person img{max-width:100%;aspect-ratio:3/2}.person h2{font-size:32px}
  .person .role{font-size:14px;margin-block:8px 20px}
  .case-toolbar{align-items:start;flex-direction:column;gap:16px}.filter-button{padding-inline:16px}
  .case-grid{grid-template-columns:1fr;gap:40px}.case-card h3{font-size:20px}.case-image img{aspect-ratio:1}
  .reading-toc{position:static;border-bottom:1px solid var(--line);padding-bottom:24px}
  .reading-toc a{padding:8px 12px}.prose{font-size:17px;line-height:1.85}
  .prose h2{font-size:28px;margin-block:40px 20px;scroll-margin-top:88px}
  .prose .summary{font-size:22px;padding-left:20px}.article-meta{gap:16px;font-size:13px}
  th,td{padding:12px;font-size:14px}.faq summary{min-height:64px;font-size:16px}
  .faq details p{padding-right:24px;font-size:16px}
  .cta-band{display:block;padding-block:40px}.cta-band h2{font-size:28px}.cta-band .button{margin-top:24px}
  .footer-top{display:block}.footer-links{gap:8px 24px;margin-top:24px}.footer-bottom{display:block}
  .footer-bottom>p+div{margin-top:12px}
  .form-layout>.form-panel{order:-1}.form-panel{padding:24px 20px}.form-grid{grid-template-columns:1fr;gap:24px}
  .account-nav{padding:16px}.account-nav h2{margin:4px 8px 12px}
  .account-tabs{display:flex;gap:8px;flex-wrap:wrap}.account-nav button{width:auto;padding:8px 12px;min-height:44px}
  .account-content h2{font-size:28px}.empty-state{padding:40px 24px}.empty-state h3{font-size:24px}
  dialog{padding:28px 24px;max-height:calc(100dvh - 32px)}dialog h2{font-size:28px}
  .mobile-menu{padding:24px;max-height:100dvh}.mobile-group a{font-size:17px}
  .age-mark{font-size:40px;margin-bottom:24px;padding-bottom:24px}
  .toast{bottom:16px;max-width:calc(100% - 32px);font-size:13px;white-space:normal}
}
@media(max-width:359px){.wordmark span{display:none}h1{font-size:34px}.hero h1{font-size:38px}.hero .actions{flex-direction:column}.hero .actions .button{width:100%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.site-header,.site-footer,.section{padding-block:24px}.container{width:100%}.hero-grid{min-height:0}.hero-copy{padding-block:24px}}

/* === 移植补充：顶栏滚动阴影（Codex 规范：只加阴影、不缩高度）=== */
.site-header{transition:box-shadow var(--fast) var(--ease);}
.site-header.scrolled{box-shadow:var(--shadow-low);}

/* ============================================================
   迁移桥（2026-10-21）
   旧 main.css 仍设置 body 字体/底色与 h1-h3 字族，优先级压过本文件 ✗
   在旧样式完全退役前，用最小范围覆盖保证 Codex 设计生效 ✓
   旧 main.css 移除后，本段可整段删除 ✓
   ============================================================ */
body{
  font-family:var(--body) !important;
  background:var(--surface) !important;
  color:var(--ink) !important;
  font-size:16px;
  line-height:1.8;
}
h1,h2,h3{font-family:var(--display) !important;color:var(--ink) !important;}
a{color:inherit;}

/* 页脚补充（2026-10-21 移植）Codex 原设计无这两块，按同套 token 补齐 */
.footer-legal{display:flex;gap:20px;flex-wrap:wrap;align-items:center;font-size:14px;}
.footer-legal a,.footer-legal button{color:var(--muted);background:none;border:0;padding:0;font-size:14px;cursor:pointer;text-decoration:underline;text-underline-offset:4px;}
.footer-legal a:hover,.footer-legal button:hover{color:var(--copper);}
.footer-note{margin-top:16px;font-size:13px;color:var(--muted);}
.site-footer .footer-links{flex-wrap:wrap;}

/* ============================================================
   兼容层（2026-10-21）
   旧模板仍在用 .cf-* 包装类；这些类的样式原在我的追加块里，已随截断删除 ✗
   → 用 Codex token 重新定义，页面立刻回到新设计语言 ✓
   待模板逐个改套 Codex 原生结构后，本段可逐步删除 ✓
   ============================================================ */
.cf-wrap{max-width:1248px;margin:0 auto;padding:0 20px;}
@media(min-width:768px){.cf-wrap{padding:0 32px;}}
@media(min-width:1081px){.cf-wrap{padding:0 48px;}}

.cf-kicker{display:block;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--copper);margin-bottom:12px;}
.cf-lede{font-size:18px;line-height:1.8;color:var(--muted);max-width:38em;}
.cf-content{max-width:720px;font-size:17px;line-height:1.85;}
.cf-content h2{font-size:32px;margin:2em 0 .6em;}
.cf-content h3{font-size:22px;margin:1.6em 0 .5em;}
.cf-content p{margin:0 0 1.1em;}
.cf-content ul,.cf-content ol{margin:0 0 1.2em;padding-left:1.4em;}
.cf-content li{margin:.35em 0;}
.cf-content a{color:var(--copper);}

.cf-page-hero{padding:clamp(32px,5vw,64px) 0 clamp(20px,3vw,36px);background:var(--base);}
.cf-page-hero h1{font-size:clamp(32px,4.4vw,56px);margin:0;}
.cf-section{padding:clamp(40px,6vw,96px) 0;}

/* 面包屑 */
.cf-crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--muted);margin-bottom:clamp(20px,3vw,32px);}
.cf-crumbs a{color:var(--muted);text-decoration:none;}
.cf-crumbs a:hover{color:var(--copper);text-decoration:underline;text-underline-offset:4px;}
.cf-crumbs > span[aria-hidden]{opacity:.45;}

/* 科普 / 子页骨架 */
.cf-guide{padding:clamp(28px,4vw,48px) 0 clamp(48px,7vw,96px);}
.cf-guide__h1{font-size:clamp(28px,3.4vw,44px);line-height:1.3;margin:.4em 0 .9em;}
.cf-guide__body{max-width:760px;}
.cf-guide__cta{margin-top:clamp(32px,4vw,48px);padding:clamp(20px,2.6vw,32px);border:1px solid var(--line);border-radius:var(--r-media);background:var(--surface);}
.cf-guide__cta h2{margin:0 0 .5em;font-size:22px;}
.cf-guide__cta p{margin:0 0 1em;color:var(--muted);line-height:1.8;}
.cf-whisky-navwrap{margin-top:clamp(32px,4vw,48px);padding-top:clamp(18px,2.4vw,28px);border-top:1px solid var(--line);}

/* 按钮（旧模板用的 .cf-whero__cta） */
.cf-whero__cta{display:inline-flex;align-items:center;gap:.5em;min-height:48px;padding:10px 24px;border-radius:var(--r-control);background:var(--copper);color:#fff;font-size:15px;font-weight:500;text-decoration:none;transition:background var(--fast) var(--ease),transform var(--fast) var(--ease);}
.cf-whero__cta:hover{background:#68402a;}
.cf-whero__cta:active{transform:translateY(1px);}
.cf-whero__cta:focus-visible{outline:2px solid var(--copper);outline-offset:4px;}

/* FAQ（科普页 details） */
.cf-faq{margin:clamp(30px,4vw,44px) 0 0;padding-top:clamp(18px,2.4vw,26px);border-top:1px solid var(--line);}
.cf-faq h2{margin:0 0 .7em;font-size:26px;}
.cf-faq__item{border-bottom:1px solid var(--line);padding:.85em 0;}
.cf-faq__item summary{cursor:pointer;font-size:17px;font-weight:500;line-height:1.6;list-style:none;display:flex;justify-content:space-between;gap:1em;}
.cf-faq__item summary::-webkit-details-marker{display:none;}
.cf-faq__item summary::after{content:"+";color:var(--copper);transition:transform var(--fast) var(--ease);}
.cf-faq__item[open] summary::after{transform:rotate(45deg);}
.cf-faq__item p{margin:.6em 0 0;color:var(--muted);line-height:1.8;}

/* 会员制度页 */
.cf-member-cta{display:inline-flex;align-items:center;gap:.5em;min-height:48px;padding:10px 24px;border-radius:var(--r-control);background:var(--copper);color:#fff;font-weight:500;text-decoration:none;}
.cf-member-cta:hover{background:#68402a;}
.cf-member-note{font-size:13px;color:var(--muted);margin-top:14px;}

@media(max-width:767px){
  .cf-content{font-size:17px;line-height:1.85;}
  .cf-content h2{font-size:26px;}
  .cf-content h3{font-size:20px;}
  .cf-lede{font-size:16px;}
  .cf-guide__cta h2,.cf-faq h2{font-size:20px;}
  .cf-faq__item summary{font-size:16px;}
  .cf-faq__item p{font-size:16px;}
}
@media(prefers-reduced-motion:reduce){
  .cf-whero__cta,.cf-faq__item summary::after{transition:none;}
}

/* ============================================================
   焦点环统一（2026-10-21）
   旧 main.css 的 :focus-visible 用 --cf-gold(#B87333)，特异性高于 Codex 规则 ✗
   → 用更高特异性 + !important 统一为 Codex 铜 #805033 ✓（无障碍关键项）
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.hero a:focus-visible,
.nav-main a:focus-visible{
  outline:2px solid var(--copper) !important;
  outline-offset:4px !important;
}

/* ============================================================
   首页 50/50 双业务布局（2026-10-21 客户指示）
   左「雪茄会员」/ 右「威士忌单桶定制」
   桌面各半、移动堆叠；配色沿用 Codex token（浅底 + 铜线）✓
   ============================================================ */
.cb-home__intro{
  padding:clamp(36px,5vw,72px) clamp(20px,5vw,96px) clamp(20px,3vw,36px);
  max-width:1248px; margin:0 auto;
}
.cb-home__intro h1{
  font-size:clamp(30px,4.2vw,54px); line-height:1.26;
  margin:.2em 0 .45em; text-wrap:balance;
}
.cb-home__intro .lead{
  font-size:clamp(15px,1.5vw,18px); color:var(--muted); line-height:1.85;
}

.cb-split{
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
}
.cb-half{
  position:relative;
  display:flex; flex-direction:column;
  padding:clamp(32px,4.4vw,64px) clamp(22px,4vw,64px) clamp(28px,3.8vw,56px);
  min-height:clamp(400px,54vh,600px);
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
.cb-half--cigar{ background:var(--base); }
.cb-half--whisky{ background:var(--surface); border-left:1px solid var(--line); }
.cb-half::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--copper),transparent); opacity:.55;
}
.cb-half__kicker{
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--copper); margin:0 0 14px;
}
.cb-half h2{
  font-size:clamp(25px,3.1vw,42px); line-height:1.3;
  margin:0 0 .5em; color:var(--ink); text-wrap:balance;
}
.cb-half__lead{
  font-size:clamp(15px,1.3vw,16px); line-height:1.85;
  color:var(--muted); margin:0 0 1.3em; max-width:32em;
}
.cb-half__list{
  list-style:none; margin:0 0 auto; padding:0;
  display:flex; flex-direction:column; gap:9px;
}
.cb-half__list li{
  position:relative; padding-left:16px;
  font-size:14px; color:var(--muted); line-height:1.7;
}
.cb-half__list li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:6px; height:1px; background:var(--copper);
}
.cb-half__actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:18px;
  margin-top:clamp(20px,2.8vw,32px);
}
.cb-half__note{
  margin:14px 0 0; font-size:13px; color:var(--muted);
}
.cb-half__note{ color:#59696a; }

.cb-home__band{ background:var(--base); border-top:1px solid var(--line); }
.cb-home__band-in{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  padding-block:clamp(24px,3.2vw,38px);
}
.cb-home__band-in div{ display:flex; flex-direction:column; gap:6px; }
.cb-home__band-in strong{
  font-family:var(--display,-apple-system); font-size:clamp(18px,1.9vw,22px);
  color:var(--copper); font-weight:600;
}
.cb-home__band-in span{ font-size:13px; color:var(--muted); }

@media(max-width:980px){
  .cb-split{ grid-template-columns:1fr; }
  .cb-half{ min-height:0; padding-block:clamp(28px,6vw,44px); }
  .cb-half--whisky{ border-left:0; }
}
@media(max-width:600px){
  .cb-home__band-in{ grid-template-columns:1fr; gap:14px; }
  .cb-half__actions .button{ width:100%; justify-content:center; }
}

/* 移动端顶栏收纳（防溢出）✓ */
@media(max-width:1080px){
  .nav-end{ gap:6px !important; margin-left:auto; }
  .nav-end .account-link{ padding:8px !important; }
  .nav-end .account-link span{ display:none !important; }
  .menu-toggle{ display:inline-flex !important; }
  .nav-main{ display:none !important; }
}

/* 焦点环统一为铜色 ✓ */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--copper) !important;
  outline-offset:4px !important;
}