/* =============================================================
   wepoker轻量版 · 共享站点样式  /assets/site.css
   复古出版色 × 折纸切角 × 左右分置导航 × 折叠地图节奏
   ============================================================= */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,h5,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg,picture{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;text-align:left}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}
hr{border:0;border-top:1px solid rgba(29,74,115,.22);margin:0}
::selection{background:var(--cyan-400);color:var(--ink-900)}

/* ---------- tokens ---------- */
:root{
  --cream-100:#F6F1E6;
  --cream-200:#EAE1CE;
  --ink-900:#122A42;
  --ink-700:#1D4A73;
  --azure-500:#2C86C8;
  --cyan-400:#17D1C8;
  --cyan-600:#0E9C97;
  --coral-500:#FF6B4A;
  --coral-700:#C8432A;
  --graphite-600:#6E7B87;
  --white:#FFFFFF;

  --line-soft:rgba(29,74,115,.18);
  --line-ink:rgba(246,241,230,.16);

  --font-display:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-body:"Inter","Noto Sans SC",system-ui,-apple-system,"PingFang SC",sans-serif;
  --font-mono:"JetBrains Mono","SFMono-Regular",ui-monospace,"Menlo",monospace;

  --cut-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
  --cut-path-sm:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);

  --shell-max:1320px;
  --pad-x:clamp(20px,5vw,96px);
  --rail:56px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:380ms;
}

/* ---------- base ---------- */
body{
  background-color:var(--cream-100);
  color:var(--ink-900);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.85;
  letter-spacing:.005em;
  overflow-x:hidden;
}
:focus-visible{outline:2px solid var(--cyan-600);outline-offset:3px}
.mono{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:.92em;
  letter-spacing:.01em;
}

/* ---------- layout shells ---------- */
.shell{
  width:100%;
  max-width:var(--shell-max);
  margin-inline:auto;
  padding-inline:var(--pad-x);
}
.section{
  position:relative;
  padding-block:clamp(64px,9vw,140px);
}
.section--tint{background-color:var(--cream-200)}
.section--ink{background-color:var(--ink-900);color:var(--cream-100)}
.section--ink .lede,.section--ink .text-body{color:rgba(246,241,230,.82)}
.section--ink .label{color:var(--cyan-400)}
.section-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px clamp(20px,4vw,56px);
  margin-bottom:clamp(28px,4vw,56px);
}
.section-head>*{max-width:46em}

/* ---------- bento grid ---------- */
.bento{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(16px,2vw,28px);
  align-items:start;
}
.bento>*{min-width:0}
.span-2,.span-3,.span-4,.span-5,.span-6,.span-7,.span-8,.span-9,.span-10,.span-12{grid-column:span 12}
@media (min-width:761px){
  .span-2{grid-column:span 2}
  .span-3{grid-column:span 3}
  .span-4{grid-column:span 4}
  .span-5{grid-column:span 5}
  .span-6{grid-column:span 6}
  .span-7{grid-column:span 7}
  .span-8{grid-column:span 8}
  .span-9{grid-column:span 9}
  .span-10{grid-column:span 10}
}
@media (max-width:980px){
  .bento{grid-template-columns:repeat(6,1fr)}
  .span-2,.span-3,.span-4,.span-5{grid-column:span 3}
  .span-6,.span-7,.span-8,.span-9,.span-10,.span-12{grid-column:span 6}
}
@media (max-width:600px){
  .bento{grid-template-columns:1fr}
  .bento>*{grid-column:1 / -1}
}

/* ---------- typography ---------- */
.display-title{
  font-family:var(--font-display);
  font-weight:700;
  font-stretch:condensed;
  font-size:clamp(40px,7vw,104px);
  line-height:.98;
  letter-spacing:-.02em;
  color:var(--ink-900);
}
.section-title{
  font-family:var(--font-display);
  font-weight:600;
  font-stretch:condensed;
  font-size:clamp(22px,3vw,40px);
  line-height:1.25;
  letter-spacing:-.015em;
  margin-top:.6em;
}
.section-title:first-child{margin-top:0}
.block-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(18px,2vw,24px);
  line-height:1.35;
  letter-spacing:-.01em;
}
.lede{
  font-size:clamp(17px,1.5vw,21px);
  line-height:1.72;
  color:var(--ink-700);
  max-width:34em;
}
.text-body{
  max-width:38em;
  color:var(--ink-900);
}
.text-body+.text-body{margin-top:1.05em}
.text-body a{
  color:var(--ink-700);
  box-shadow:inset 0 -2px 0 var(--cyan-400);
  transition:color 160ms var(--ease),box-shadow 160ms var(--ease);
}
.text-body a:hover{color:var(--coral-700);box-shadow:inset 0 -2px 0 var(--coral-500)}
.label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--ink-700);
}
.label::before{
  content:"";
  width:7px;
  height:7px;
  background:var(--coral-500);
  transform:rotate(45deg);
  flex:none;
}

/* ---------- panels ---------- */
.panel{
  position:relative;
  background-color:var(--cream-200);
  color:var(--ink-900);
  padding:clamp(20px,3vw,36px);
  clip-path:var(--cut-path);
}
.panel--ink{background-color:var(--ink-900);color:var(--cream-100)}
.panel--cyan{background-color:var(--cyan-400);color:var(--ink-900)}
.panel--line{background-color:transparent;box-shadow:inset 0 0 0 1px var(--line-soft)}
.panel--ink.panel--line{box-shadow:inset 0 0 0 1px rgba(246,241,230,.24)}
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.panel--ink .label{color:var(--cyan-400)}

/* ---------- buttons & links ---------- */
.btn{
  --btn-fill:var(--cyan-400);
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 22px;
  font-family:var(--font-display);
  font-size:15px;
  font-weight:600;
  letter-spacing:.02em;
  line-height:1.2;
  clip-path:var(--cut-path-sm);
  background-image:linear-gradient(135deg,var(--btn-fill) 50%,transparent 50%);
  background-size:260% 260%;
  background-position:100% 100%;
  background-repeat:no-repeat;
  transition:background-position 260ms var(--ease),color 160ms var(--ease);
}
.btn-solid{background-color:var(--coral-700);color:var(--white);--btn-fill:var(--cyan-400)}
.btn-solid:hover,.btn-solid:focus-visible{background-position:0 0;color:var(--ink-900)}
.btn-ghost{
  background-color:transparent;
  color:var(--ink-900);
  box-shadow:inset 0 0 0 1.5px rgba(18,42,66,.32);
  --btn-fill:var(--ink-900);
}
.btn-ghost:hover,.btn-ghost:focus-visible{background-position:0 0;color:var(--cream-100)}
.btn--block{width:100%}
.btn:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--cyan-400)}
.button-row{display:flex;flex-wrap:wrap;gap:12px}
.link-inline{
  color:var(--ink-700);
  font-weight:600;
  box-shadow:inset 0 -2px 0 var(--cyan-400);
  transition:color 160ms var(--ease),box-shadow 160ms var(--ease);
}
.link-inline:hover,.link-inline:focus-visible{color:var(--coral-700);box-shadow:inset 0 -2px 0 var(--coral-500)}

/* ---------- breadcrumbs ---------- */
.breadcrumbs{
  border-bottom:1px solid var(--line-soft);
  background-color:var(--cream-100);
  padding-block:clamp(12px,1.6vw,20px);
}
.breadcrumb-list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  letter-spacing:.04em;
  color:var(--graphite-600);
}
.breadcrumb-item{display:inline-flex;align-items:center;gap:6px}
.breadcrumb-item+.breadcrumb-item::before{
  content:"";
  width:12px;
  height:1px;
  background:var(--line-soft);
}
.breadcrumb-link{color:var(--ink-700);transition:color 160ms var(--ease)}
.breadcrumb-link:hover{color:var(--coral-700)}
.breadcrumb-item [aria-current="page"]{color:var(--ink-900);font-weight:600}

/* ---------- side index rail & trajectory ---------- */
.index-rail{
  position:fixed;
  right:clamp(8px,2vw,26px);
  top:50%;
  transform:translateY(-50%);
  width:var(--rail);
  display:flex;
  flex-direction:column;
  gap:6px;
  z-index:50;
}
.index-rail-link{
  display:flex;
  align-items:center;
  justify-content:center;
  height:34px;
  font-family:var(--font-mono);
  font-size:12px;
  font-variant-numeric:tabular-nums;
  color:var(--graphite-600);
  background-color:rgba(246,241,230,.72);
  clip-path:var(--cut-path-sm);
  transition:background-color 160ms var(--ease),color 160ms var(--ease);
}
.index-rail-link:hover{background-color:var(--cyan-400);color:var(--ink-900)}
.index-rail-link.is-active{background-color:var(--ink-900);color:var(--cyan-400)}
.index-rail-link:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--cyan-600)}
@media (max-width:1180px){.index-rail{display:none}}

.trajectory{
  position:relative;
  height:1px;
  width:100%;
  background-image:linear-gradient(90deg,rgba(29,74,115,.22),rgba(23,209,200,.75));
}
.trajectory-dot{
  position:absolute;
  right:0;
  top:-3px;
  width:6px;
  height:6px;
  border-radius:50%;
  background-color:var(--cyan-400);
  box-shadow:0 0 0 4px rgba(23,209,200,.18);
}
.section--ink .trajectory{background-image:linear-gradient(90deg,rgba(246,241,230,.18),rgba(23,209,200,.8))}

/* ---------- media frames ---------- */
.media-frame{
  position:relative;
  overflow:hidden;
  background-color:var(--cream-200);
  clip-path:var(--cut-path);
  aspect-ratio:16/10;
  width:100%;
}
.media-frame img,.media-frame svg,.media-frame picture{
  width:100%;
  height:100%;
  object-fit:cover;
}
.media-frame--wide{aspect-ratio:21/9}
.media-frame--square{aspect-ratio:1/1}
.media-frame--tall{aspect-ratio:3/4}
.media-frame--slant{transform:rotate(-1.2deg)}
.media-frame--ink{background-color:var(--ink-900)}
.media-caption{
  margin-top:10px;
  font-size:12.5px;
  letter-spacing:.02em;
  color:var(--graphite-600);
}

/* ---------- scroll reveal ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
}
[data-reveal].is-visible{opacity:1;transform:none}

/* ---------- copy toast ---------- */
.copy-toast{
  position:fixed;
  z-index:220;
  padding:7px 12px;
  background-color:var(--ink-900);
  color:var(--cyan-400);
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1.2;
  letter-spacing:.02em;
  white-space:nowrap;
  clip-path:var(--cut-path-sm);
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,-100%);
  transition:opacity 160ms linear,transform 160ms var(--ease);
}
.copy-toast.is-on{opacity:1;transform:translate(-50%,-140%)}

/* ---------- skip link ---------- */
.skip-link{
  position:absolute;
  top:-120px;
  left:clamp(12px,4vw,32px);
  z-index:200;
  padding:10px 16px;
  background-color:var(--ink-900);
  color:var(--cyan-400);
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  clip-path:var(--cut-path-sm);
  transition:top 160ms var(--ease);
}
.skip-link:focus{top:12px;outline:none;box-shadow:inset 0 0 0 2px var(--cyan-400)}

/* ---------- header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:90;
  background-color:var(--cream-100);
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow 200ms var(--ease);
}
.site-header.is-condensed{box-shadow:0 16px 34px -26px rgba(18,42,66,.85)}
.header-shell{
  width:100%;
  max-width:var(--shell-max);
  margin-inline:auto;
  padding:14px var(--pad-x);
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(16px,3vw,56px);
  transition:min-height 220ms var(--ease),padding 220ms var(--ease);
}
.site-header.is-condensed .header-shell{min-height:62px;padding-block:9px}
.brand-block{display:flex;align-items:center;gap:clamp(10px,1.5vw,18px);flex:none}
.brand{display:inline-flex;align-items:baseline;gap:10px}
.brand-mark{
  font-family:var(--font-display);
  font-weight:700;
  font-stretch:condensed;
  font-size:clamp(17px,1.6vw,21px);
  letter-spacing:-.01em;
  color:var(--ink-900);
  white-space:nowrap;
}
.brand-suffix{
  font-size:12.5px;
  letter-spacing:.14em;
  color:var(--cyan-600);
  white-space:nowrap;
  transition:opacity 200ms var(--ease);
}
.site-header.is-condensed .brand-suffix{opacity:.45}
.version-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:5px 11px;
  background-color:var(--cream-200);
  color:var(--ink-700);
  clip-path:var(--cut-path-sm);
  transition:background-color 160ms var(--ease),color 160ms var(--ease);
}
.version-badge:hover,.version-badge:focus-visible{background-color:var(--cyan-400);color:var(--ink-900)}
.version-badge:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--cyan-600)}
.version-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background-color:var(--coral-500);
  flex:none;
}
.version-text{font-size:12.5px;white-space:nowrap}

.nav-toggle{
  display:none;
  align-items:center;
  gap:9px;
  padding:9px 14px;
  background-color:var(--ink-900);
  color:var(--cream-100);
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  clip-path:var(--cut-path-sm);
}
.nav-toggle-label{line-height:1}
.nav-toggle-bar{
  position:relative;
  display:block;
  width:16px;
  height:1.5px;
  background-color:var(--cyan-400);
  transition:background-color 180ms var(--ease);
}
.nav-toggle-bar::before,.nav-toggle-bar::after{
  content:"";
  position:absolute;
  left:0;
  width:16px;
  height:1.5px;
  background-color:var(--cyan-400);
  transition:transform 200ms var(--ease),top 200ms var(--ease);
}
.nav-toggle-bar::before{top:-5px}
.nav-toggle-bar::after{top:5px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar{background-color:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after{top:0;transform:rotate(-45deg)}
.nav-toggle:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--cyan-400)}

.site-nav{
  display:flex;
  align-items:center;
  gap:clamp(16px,2.4vw,38px);
  flex:1 1 auto;
  justify-content:flex-end;
}
.nav-list{display:flex;align-items:center;gap:clamp(12px,1.8vw,30px)}
.nav-item{display:block}
.nav-link{
  position:relative;
  display:inline-block;
  padding:6px 2px;
  font-size:14.5px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--ink-900);
  white-space:nowrap;
  transition:color 160ms var(--ease),font-size 200ms var(--ease);
}
.site-header.is-condensed .nav-link{font-size:13.5px}
.nav-link::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:2px;
  background-color:var(--cyan-400);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 200ms var(--ease),background-color 160ms var(--ease);
}
.nav-link:hover::after,.nav-link:focus-visible::after{transform:scaleX(1)}
.nav-link[aria-current="page"]{color:var(--ink-700)}
.nav-link[aria-current="page"]::after{transform:scaleX(1);background-color:var(--coral-500)}
.nav-link[aria-current="page"]::before{
  content:"";
  position:absolute;
  left:-11px;
  top:50%;
  width:5px;
  height:5px;
  border-radius:50%;
  background-color:var(--coral-500);
  transform:translateY(-50%);
}
.nav-actions{display:flex;align-items:center;gap:10px;flex:none}
.site-header.is-condensed .nav-actions .btn-ghost{display:none}
.header-progress{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  overflow:hidden;
  pointer-events:none;
}
.header-progress-bar{
  display:block;
  width:0;
  height:100%;
  background-image:linear-gradient(90deg,var(--cyan-600),var(--cyan-400) 62%,var(--coral-500));
  transition:width 120ms linear;
}

/* ---------- footer ---------- */
.site-footer{
  position:relative;
  overflow:hidden;
  background-color:var(--ink-900);
  color:var(--cream-100);
  padding-block:clamp(48px,7vw,92px) clamp(26px,4vw,42px);
}
.site-footer::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background-image:linear-gradient(90deg,var(--cyan-400),var(--coral-500) 62%,rgba(255,107,74,0));
}
.site-footer::after{
  content:"";
  position:absolute;
  right:-10%;
  top:-34%;
  width:44%;
  height:130%;
  background-image:linear-gradient(180deg,rgba(23,209,200,.14),rgba(23,209,200,0) 72%);
  transform:rotate(-12deg);
  pointer-events:none;
}
.footer-shell{
  position:relative;
  z-index:1;
  width:100%;
  max-width:var(--shell-max);
  margin-inline:auto;
  padding-inline:var(--pad-x);
}
.footer-top{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:14px 24px;
  padding-bottom:clamp(24px,3vw,38px);
  border-bottom:1px solid var(--line-ink);
}
.footer-brand-line{
  font-family:var(--font-display);
  font-weight:600;
  font-stretch:condensed;
  font-size:clamp(18px,2.2vw,26px);
  letter-spacing:-.01em;
  color:var(--cream-100);
}
.footer-stamp{
  padding:5px 11px;
  background-color:rgba(23,209,200,.12);
  color:var(--cyan-400);
  font-size:12.5px;
  clip-path:var(--cut-path-sm);
  transition:background-color 160ms var(--ease),color 160ms var(--ease);
}
.footer-stamp:hover,.footer-stamp:focus-visible{background-color:var(--cyan-400);color:var(--ink-900)}
.footer-stamp:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--cyan-400)}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(120px,.8fr) minmax(120px,.8fr) minmax(300px,1.8fr);
  gap:clamp(26px,3.4vw,60px);
  padding-block:clamp(30px,4.5vw,58px);
}
.footer-group{min-width:0}
.footer-group-title{
  margin-bottom:14px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.1em;
  color:var(--cyan-400);
}
.footer-list{display:flex;flex-direction:column;gap:9px}
.footer-item{display:block}
.footer-link{
  position:relative;
  display:inline-block;
  padding-left:0;
  font-size:14.5px;
  color:rgba(246,241,230,.8);
  transition:color 160ms var(--ease),padding-left 200ms var(--ease);
}
.footer-link::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:0;
  height:1.5px;
  background-color:var(--cyan-400);
  transform:translateY(-50%);
  transition:width 200ms var(--ease);
}
.footer-link:hover,.footer-link:focus-visible{color:var(--cyan-400);padding-left:14px}
.footer-link:hover::before,.footer-link:focus-visible::before{width:9px}

.contact-list{display:flex;flex-direction:column;gap:14px}
.contact-item{display:flex;flex-direction:column;gap:4px}
.contact-label{
  font-size:11.5px;
  letter-spacing:.1em;
  color:rgba(246,241,230,.5);
}
.contact-value{
  align-self:flex-start;
  font-size:14.5px;
  color:var(--cyan-400);
  box-shadow:inset 0 -1px 0 rgba(23,209,200,.45);
  transition:color 160ms var(--ease),box-shadow 160ms var(--ease);
  word-break:break-all;
}
.contact-value:hover{color:var(--coral-500);box-shadow:inset 0 -1px 0 rgba(255,107,74,.6)}
.contact-value:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--cyan-400)}
.contact-text{
  font-size:14.5px;
  line-height:1.7;
  color:rgba(246,241,230,.8);
}
.footer-note{
  margin-top:16px;
  max-width:42em;
  font-size:13px;
  line-height:1.75;
  color:rgba(246,241,230,.56);
}
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 26px;
  padding-top:20px;
  border-top:1px solid var(--line-ink);
}
.footer-legal{
  font-size:12.5px;
  letter-spacing:.04em;
  color:rgba(246,241,230,.6);
}
.footer-copy{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.footer-icp{white-space:nowrap}

/* ---------- bottom quickbar ---------- */
.quickbar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:95;
  display:none;
  background-color:rgba(18,42,66,.97);
  border-top:1px solid rgba(23,209,200,.34);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.quickbar-list{display:grid;grid-template-columns:repeat(4,1fr)}
.quickbar-item{display:block}
.quickbar-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  padding:9px 4px 10px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.06em;
  color:rgba(246,241,230,.78);
  transition:color 160ms var(--ease),background-color 160ms var(--ease);
}
.quickbar-link:hover,.quickbar-link:focus-visible{background-color:rgba(23,209,200,.14);color:var(--cyan-400)}
.quickbar-link[aria-current="page"]{color:var(--cyan-400)}
.quickbar-index{font-size:10px;color:rgba(23,209,200,.85);letter-spacing:.08em}

/* ---------- responsive shell ---------- */
@media (max-width:1080px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-contact{grid-column:1 / -1}
}
@media (max-width:980px){
  .nav-toggle{display:inline-flex}
  .site-header.is-condensed .nav-actions .btn-ghost{display:inline-flex}
  .site-nav{
    position:absolute;
    left:0;
    right:0;
    top:100%;
    display:none;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:22px;
    padding:22px var(--pad-x) 30px;
    background-color:var(--ink-900);
    box-shadow:0 26px 40px -30px rgba(18,42,66,.9);
  }
  .site-nav[data-open]{display:flex}
  .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .nav-item{border-bottom:1px solid rgba(246,241,230,.14)}
  .nav-item:first-child{border-top:1px solid rgba(246,241,230,.14)}
  .nav-link{
    display:block;
    width:100%;
    padding:14px 2px;
    font-size:16px;
    color:var(--cream-100);
  }
  .site-header.is-condensed .nav-link{font-size:16px}
  .nav-link::after{display:none}
  .nav-link[aria-current="page"]{color:var(--cyan-400)}
  .nav-link[aria-current="page"]::before{left:auto;right:2px}
  .nav-actions{flex-direction:column;align-items:stretch}
  .nav-actions .btn{width:100%}
  .btn-ghost{color:var(--cream-100);box-shadow:inset 0 0 0 1.5px rgba(246,241,230,.4)}
  .btn-ghost:hover,.btn-ghost:focus-visible{color:var(--ink-900)}
  body.nav-open{overflow:hidden}
  .quickbar{display:block}
  .site-footer{padding-bottom:112px}
}
@media (max-width:600px){
  .header-shell{min-height:64px;padding-block:10px}
  .brand-suffix{display:none}
  .footer-grid{grid-template-columns:1fr;gap:30px}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none;transition:opacity 120ms linear}
  .header-progress-bar{transition:none}
  .btn{transition:color 120ms linear}
  .btn:hover,.btn:focus-visible{background-position:100% 100%}
  .nav-toggle-bar,.nav-toggle-bar::before,.nav-toggle-bar::after{transition:none}
  .footer-link{transition:color 120ms linear}
  .footer-link:hover,.footer-link:focus-visible{padding-left:0}
  .copy-toast{transition:opacity 120ms linear,transform 120ms linear}
}