/* =====================================================================
   四季品牌站 · 共享样式 /assets/site.css
   堆叠面板 · 切角画板 · 四季色带 · 等宽索引
   ===================================================================== */

:root{
  --paper:#F7F4EE;
  --mist:#E8E6E0;
  --white:#FFFDF8;
  --ink:#1E2624;
  --ink-soft:#5C665F;
  --rule:rgba(30,38,36,.14);
  --rule-soft:rgba(30,38,36,.08);

  --spring:#7FB59A;
  --spring-soft:#E4B8B1;
  --summer:#2F7F9E;
  --summer-soft:#F29B5B;
  --autumn:#D99A3D;
  --autumn-soft:#B55A45;
  --winter:#F4F8F8;
  --winter-deep:#2C3A5E;

  --electric:#00B3A4;
  --violet:#6C5CE7;

  --season:var(--electric);

  --font-display:"Songti SC","STKaiti","KaiTi",serif;
  --font-body:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  --font-mono:"SFMono-Regular","JetBrains Mono","Menlo",monospace;
  --font-narrow:"Arial Narrow","Roboto Condensed",sans-serif;

  --wrap:1200px;
  --gutter:clamp(18px,4vw,44px);
  --notch:18px;
}

[data-season="spring"]{--season:var(--spring);}
[data-season="summer"]{--season:var(--summer);}
[data-season="autumn"]{--season:var(--autumn);}
[data-season="winter"]{--season:var(--winter-deep);}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background-color:var(--paper);
  background-image:
    radial-gradient(circle at 8% 4%, rgba(127,181,154,.13), transparent 40%),
    radial-gradient(circle at 96% 96%, rgba(108,92,231,.09), transparent 42%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.85;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin-top:0;}
ul,ol{padding-left:0;}
a{color:var(--summer);}
img{max-width:100%;}
button{font:inherit;color:inherit;}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.32;
  letter-spacing:.02em;
  color:var(--ink);
}

/* ---------- 通用容器 ---------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{
  padding-block:clamp(44px,7vw,96px);
}

.prose{
  max-width:70ch;
  font-size:17px;
  line-height:1.9;
  color:var(--ink);
}
.prose h2{
  font-size:clamp(24px,2.6vw,32px);
  margin:2.1em 0 .7em;
}
.prose h3{
  font-size:clamp(19px,2vw,23px);
  margin:1.7em 0 .6em;
}
.prose p{margin:0 0 1.15em;}
.prose ul,.prose ol{padding-left:1.35em;margin:0 0 1.2em;}
.prose li{margin:.42em 0;}
.prose a{
  color:var(--summer);
  text-decoration:none;
  border-bottom:1px solid currentColor;
  transition:color .2s ease,border-color .2s ease;
}
.prose a:hover{color:var(--electric);}
.prose strong{font-weight:600;}

/* ---------- 装饰元件 ---------- */
.season-band{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  width:100%;
  height:4px;
}
.season-band span:nth-child(1){background:var(--spring);}
.season-band span:nth-child(2){background:var(--summer);}
.season-band span:nth-child(3){background:var(--autumn);}
.season-band span:nth-child(4){background:var(--winter-deep);}

.slant-rule{
  height:1px;
  background:var(--rule);
  transform:skewY(-.7deg);
  transform-origin:left center;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.22em;
  color:var(--ink-soft);
}
.eyebrow::before{
  content:"";
  width:26px;
  height:2px;
  background:var(--season);
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 11px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  line-height:1.6;
  background:rgba(0,179,164,.13);
  color:#0B6F68;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
}
.tag--violet{background:rgba(108,92,231,.15);color:#4B3FBF;}
.tag--spring{background:rgba(127,181,154,.24);color:#3A6F57;}
.tag--summer{background:rgba(47,127,158,.17);color:#1F5F78;}
.tag--autumn{background:rgba(217,154,61,.22);color:#8A5D13;}
.tag--winter{background:rgba(44,58,94,.15);color:#2C3A5E;}

/* ---------- 面包屑 ---------- */
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0 0 20px;
  padding:0;
  list-style:none;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.1em;
  color:var(--ink-soft);
}
.breadcrumb li{display:inline-flex;align-items:center;}
.breadcrumb li:not(:last-child)::after{
  content:"/";
  margin-left:8px;
  color:var(--violet);
  opacity:.65;
}
.breadcrumb a{
  color:var(--ink-soft);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
.breadcrumb a:hover{color:var(--electric);border-bottom-color:var(--electric);}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:13px 24px;
  font-family:var(--font-body);
  font-size:15px;
  letter-spacing:.04em;
  line-height:1.4;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  transition:background .22s ease,color .22s ease,border-color .22s ease;
}
.btn--primary{background:var(--ink);color:var(--paper);}
.btn--primary:hover{background:var(--electric);color:#062723;}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule);}
.btn--ghost:hover{border-color:var(--electric);color:var(--electric);}
.btn--season{background:var(--season);color:#FFFDF8;}
.btn--season:hover{background:var(--ink);color:var(--paper);}

/* ---------- 切角面板 ---------- */
.panel{
  position:relative;
  background:var(--mist);
  padding:clamp(20px,2.6vw,32px);
  clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,var(--notch) 100%,0 calc(100% - var(--notch)));
  transition:background .25s ease,transform .25s ease;
}
.panel::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:0;
  height:3px;
  background:var(--season);
  transition:width .3s ease;
}
.panel:hover{background:var(--white);transform:translateY(-3px);}
.panel:hover::after{width:56px;}

.panel--paper{background:var(--paper);}
.panel--spring{background:linear-gradient(150deg,rgba(127,181,154,.24),rgba(228,184,177,.20));}
.panel--summer{background:linear-gradient(150deg,rgba(47,127,158,.18),rgba(242,155,91,.17));}
.panel--autumn{background:linear-gradient(150deg,rgba(217,154,61,.22),rgba(181,90,69,.17));}
.panel--winter{background:linear-gradient(150deg,rgba(44,58,94,.14),rgba(244,248,248,.65));}

/* ---------- 图片容器（页面阶段放图用） ---------- */
.figure{
  position:relative;
  margin:0;
  overflow:hidden;
  background:var(--mist);
  clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,var(--notch) 100%,0 calc(100% - var(--notch)));
}
.figure img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.figure--wide{aspect-ratio:16/9;}
.figure--land{aspect-ratio:3/2;}
.figure--square{aspect-ratio:1/1;}
.figure--tall{aspect-ratio:3/4;}
.figure--ph{
  background-image:linear-gradient(135deg,
    rgba(127,181,154,.34),
    rgba(47,127,158,.26) 38%,
    rgba(217,154,61,.28) 70%,
    rgba(44,58,94,.22));
}
.figure figcaption{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:10px 14px;
  background:linear-gradient(to top,rgba(30,38,36,.74),rgba(30,38,36,0));
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
}

/* ---------- 网格 ---------- */
.grid{
  display:grid;
  gap:clamp(16px,2.4vw,28px);
}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}

.grid--stagger > *:nth-child(even){
  margin-top:clamp(12px,2.4vw,34px);
}

/* ---------- 滚动显现协议 ---------- */
@media (prefers-reduced-motion: no-preference){
  html[data-js] [data-reveal]{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .6s ease,transform .6s ease;
  }
  html[data-js] [data-reveal].is-revealed{
    opacity:1;
    transform:none;
  }
}

/* =====================================================================
   头部 · 紧凑命令栏
   ===================================================================== */
.skip-link{
  position:absolute;
  left:14px;
  top:-70px;
  z-index:140;
  padding:10px 16px;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.08em;
  text-decoration:none;
  transition:top .2s ease;
}
.skip-link:focus{top:14px;}

.site-header{
  position:sticky;
  top:0;
  z-index:90;
  background:rgba(247,244,238,.94);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
  transition:box-shadow .3s ease;
}
.site-header[data-condensed]{
  box-shadow:0 14px 34px -26px rgba(30,38,36,.7);
}

.scroll-meter{
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:2px;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg,var(--spring),var(--summer),var(--autumn),var(--winter-deep));
  pointer-events:none;
}

.header-rail{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  max-width:var(--wrap);
  margin-inline:auto;
  padding:6px var(--gutter);
  border-bottom:1px solid var(--rule-soft);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--ink-soft);
}
.header-rail__index{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.header-rail__seasons{
  display:inline-flex;
  align-items:center;
  gap:5px;
  flex:none;
}
.season-dot{
  display:block;
  width:7px;
  height:7px;
  background:var(--winter-deep);
}
.season-dot--spring{background:var(--spring);}
.season-dot--summer{background:var(--summer);}
.season-dot--autumn{background:var(--autumn);}
.season-dot--winter{background:var(--winter-deep);}

.header-bar{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  max-width:var(--wrap);
  margin-inline:auto;
  padding:12px var(--gutter);
}

.brand{
  display:inline-flex;
  align-items:baseline;
  gap:10px;
  flex:none;
  color:var(--ink);
  text-decoration:none;
}
.brand__mark{
  font-family:var(--font-display);
  font-size:26px;
  font-weight:600;
  letter-spacing:.2em;
  line-height:1;
}
.brand__tagline{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.26em;
  color:var(--ink-soft);
}
.brand:hover .brand__tagline{color:var(--electric);}

.nav-toggle{
  display:none;
  align-items:center;
  gap:9px;
  padding:9px 14px;
  background:transparent;
  border:1px solid var(--rule);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.16em;
  cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  transition:color .2s ease,border-color .2s ease;
}
.nav-toggle:hover{color:var(--electric);border-color:var(--electric);}
.nav-toggle__bars{
  position:relative;
  display:block;
  width:16px;
  height:1px;
  background:currentColor;
  box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor;
}
.nav-toggle__text{line-height:1;}

.site-nav{
  display:flex;
  align-items:center;
  gap:clamp(12px,2vw,26px);
}
.site-nav__list{
  display:flex;
  align-items:center;
  gap:clamp(9px,1.3vw,19px);
  margin:0;
  padding:0;
  list-style:none;
}
.site-nav__item{display:flex;}
.site-nav__link{
  position:relative;
  display:inline-flex;
  align-items:baseline;
  gap:5px;
  padding:6px 2px;
  border-bottom:2px solid transparent;
  color:var(--ink-soft);
  text-decoration:none;
  white-space:nowrap;
  transition:color .2s ease,border-color .2s ease;
}
.site-nav__index{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.06em;
  color:var(--violet);
  opacity:.8;
  transition:color .2s ease,opacity .2s ease;
}
.site-nav__label{
  font-family:var(--font-body);
  font-size:13.5px;
  line-height:1.2;
}
.site-nav__link:hover{
  color:var(--ink);
  border-bottom-color:var(--season);
}
.site-nav__link:hover .site-nav__index{color:var(--electric);opacity:1;}
.site-nav__link[aria-current="page"]{
  color:var(--ink);
  border-bottom-color:var(--electric);
}
.site-nav__link[aria-current="page"] .site-nav__index{color:var(--electric);opacity:1;}

.site-nav__quick{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:none;
  padding-left:clamp(12px,2vw,22px);
  border-left:1px solid var(--rule);
}
.quick-link{
  display:inline-block;
  padding:7px 12px;
  background:var(--mist);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.1em;
  line-height:1.5;
  text-decoration:none;
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));
  transition:background .2s ease,color .2s ease;
}
.quick-link:hover{background:var(--electric);color:#062723;}
.quick-link--violet{background:rgba(108,92,231,.14);color:#4B3FBF;}
.quick-link--violet:hover{background:var(--violet);color:#FFFDF8;}

/* =====================================================================
   页脚 · 深靛基底
   ===================================================================== */
.site-footer{
  position:relative;
  margin-top:clamp(56px,9vw,120px);
  background:var(--winter-deep);
  color:#E7EBF2;
}
.footer-band{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  height:6px;
}
.footer-band span{display:block;}
.footer-band span:nth-child(1){background:var(--spring);}
.footer-band span:nth-child(2){background:var(--summer);}
.footer-band span:nth-child(3){background:var(--autumn);}
.footer-band span:nth-child(4){background:var(--winter);}

.footer-inner{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(30px,5vw,72px);
  max-width:var(--wrap);
  margin-inline:auto;
  padding:clamp(40px,6vw,74px) var(--gutter) clamp(28px,4vw,46px);
}

.footer-brand__mark{
  margin:0 0 10px;
  font-family:var(--font-display);
  font-size:clamp(26px,3vw,36px);
  font-weight:600;
  letter-spacing:.2em;
  color:#FFFFFF;
}
.footer-brand__claim{
  margin:0 0 28px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.24em;
  color:#9FB3D9;
}

.footer-contact{
  display:grid;
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
}
.footer-contact__item{
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  gap:10px;
  align-items:baseline;
  font-size:14px;
  line-height:1.7;
}
.footer-contact__key{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:#8FA4C9;
}
.footer-contact__val{
  color:#E7EBF2;
  overflow-wrap:anywhere;
}

.footer-index__title{
  margin:0 0 18px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.24em;
  color:#8FA4C9;
}
.footer-index__list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 22px;
  margin:0;
  padding:0;
  list-style:none;
}
.footer-index__link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:4px 0;
  color:#D5DCEA;
  font-size:14.5px;
  line-height:1.6;
  text-decoration:none;
  transition:color .2s ease;
}
.footer-index__link::before{
  content:"";
  flex:none;
  width:6px;
  height:6px;
  background:var(--electric);
  opacity:.45;
  transition:opacity .2s ease,transform .25s ease;
}
.footer-index__link:hover{color:#FFFFFF;}
.footer-index__link:hover::before{opacity:1;transform:rotate(45deg);}

.footer-base{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 26px;
  max-width:var(--wrap);
  margin-inline:auto;
  padding:16px var(--gutter) 28px;
  border-top:1px solid rgba(255,255,255,.14);
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.12em;
  color:#8FA4C9;
}
.footer-base__icp,
.footer-base__copy{line-height:1.7;}

/* =====================================================================
   焦点状态
   ===================================================================== */
:focus-visible{
  outline:2px solid var(--electric);
  outline-offset:3px;
}
.site-footer :focus-visible{outline-color:#7FE7DD;}

/* =====================================================================
   响应式
   ===================================================================== */
@media (max-width:1080px){
  .nav-toggle{display:inline-flex;}

  .site-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:10px var(--gutter) 24px;
    background:var(--paper);
    border-bottom:1px solid var(--rule);
    box-shadow:0 26px 44px -32px rgba(30,38,36,.75);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px);
    transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
  }
  .site-nav[data-open]{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }

  .site-nav__list{
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .site-nav__item{border-bottom:1px solid var(--rule-soft);}
  .site-nav__link{
    width:100%;
    justify-content:flex-start;
    padding:14px 12px;
    border-bottom:0;
    border-left:2px solid transparent;
  }
  .site-nav__link:hover{
    border-left-color:var(--season);
    border-bottom-color:transparent;
  }
  .site-nav__link[aria-current="page"]{
    border-left-color:var(--electric);
    border-bottom-color:transparent;
  }
  .site-nav__label{font-size:15px;}

  .site-nav__quick{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    margin-top:16px;
    padding-left:0;
    padding-top:16px;
    border-left:0;
    border-top:1px solid var(--rule);
  }
  .quick-link{text-align:center;padding:11px 14px;}

  .footer-inner{grid-template-columns:minmax(0,1fr);}
}

@media (max-width:900px){
  body{font-size:16px;line-height:1.85;}
  .grid--3,
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:660px){
  .header-rail__index{letter-spacing:.12em;}
  .brand__mark{font-size:22px;}
  .brand__tagline{font-size:10px;letter-spacing:.2em;}

  .grid--2,
  .grid--3,
  .grid--4{grid-template-columns:minmax(0,1fr);}
  .grid--stagger > *:nth-child(even){margin-top:0;}

  .footer-index__list{grid-template-columns:minmax(0,1fr);}
  .footer-contact__item{grid-template-columns:52px minmax(0,1fr);}
  .footer-base{justify-content:flex-start;}
}

@media (max-width:420px){
  .brand__tagline{display:none;}
}

/* =====================================================================
   减少动态偏好
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .panel:hover{transform:none;}
  .panel:hover::after{width:56px;}
  .footer-index__link:hover::before{transform:none;}
}