/* ==========================================================================
   凯旋游戏平台 — 共享站点样式 /assets/site.css
   曜石黑 × 鎏金 · 边塞凯旋 × 作战台
   ========================================================================== */

/* ---------- 1. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,blockquote,dl,dd,fieldset{margin:0;}
ul,ol{padding:0;list-style:none;}
img,svg,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;}
button{background:none;border:0;padding:0;cursor:pointer;}
table{width:100%;border-collapse:collapse;}
::-moz-selection{background:var(--gold);color:#141006;}
::selection{background:var(--gold);color:#141006;}

/* ---------- 2. 设计变量 ---------- */
:root{
  /* 品牌色 */
  --ink-900:#0E0F12;
  --ink-800:#1C1F24;
  --ink-700:#262A33;
  --gold:#D6A84B;
  --gold-bright:#F2C879;
  --gold-deep:#8C6420;
  --sand:#C9A57A;
  --cyan:#4E8C8A;
  --mist:#F4EFE6;
  --line:#6F747C;
  --alert:#B8503C;

  /* 透明度阶 */
  --gold-a06:rgba(214,168,75,.06);
  --gold-a10:rgba(214,168,75,.10);
  --gold-a18:rgba(214,168,75,.18);
  --gold-a30:rgba(214,168,75,.30);
  --gold-a50:rgba(214,168,75,.50);
  --mist-a70:rgba(244,239,230,.70);
  --mist-a55:rgba(244,239,230,.55);
  --mist-a38:rgba(244,239,230,.38);
  --cyan-a14:rgba(78,140,138,.14);
  --cyan-a45:rgba(78,140,138,.45);
  --sand-a14:rgba(201,165,122,.14);
  --alert-a16:rgba(184,80,60,.16);

  /* 字体 */
  --font-display:"PingFang SC","HarmonyOS Sans SC","Source Han Sans SC","Noto Sans SC","Microsoft YaHei","Heiti SC",system-ui,sans-serif;
  --font-body:"PingFang SC","Hiragino Sans GB","Source Han Sans SC","Noto Sans SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --font-mono:"SF Mono","JetBrains Mono","Roboto Mono",ui-monospace,Consolas,"Courier New",monospace;

  /* 尺度 */
  --shell:1280px;
  --gutter:clamp(16px,4vw,40px);
  --r-xl:30px;
  --r-lg:22px;
  --r-md:15px;
  --r-pill:999px;
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
  --shadow-1:0 26px 64px -38px rgba(0,0,0,.92);
  --bar-h:3px;
}

/* ---------- 3. 基础排版 ---------- */
body{
  min-height:100vh;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.8;
  color:var(--mist);
  background-color:var(--ink-900);
  background-image:
    radial-gradient(1100px 540px at 88% -12%,rgba(214,168,75,.14),transparent 62%),
    radial-gradient(820px 460px at -6% 4%,rgba(78,140,138,.12),transparent 66%),
    linear-gradient(180deg,#101116 0%,#0E0F12 44%,#0B0C0F 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--mist);
}
h1{font-size:clamp(32px,5.2vw,56px);}
h2{font-size:clamp(26px,3.6vw,40px);}
h3{font-size:clamp(20px,2.4px + 1.4vw,28px);}
h4{font-size:clamp(18px,1.6vw,22px);font-weight:600;}
p{max-width:68ch;}
strong{font-weight:800;color:var(--gold-bright);}
.mono{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
#main-content{scroll-margin-top:calc(96px + var(--bar-h));}
:focus-visible{
  outline:2px solid var(--gold-bright);
  outline-offset:3px;
  border-radius:8px;
}

/* ---------- 4. 跳转链接 ---------- */
.skip-link{
  position:fixed;
  top:-90px;
  left:50%;
  transform:translateX(-50%);
  z-index:200;
  padding:12px 24px;
  border-radius:0 0 16px 16px;
  background:linear-gradient(120deg,var(--gold-bright),var(--gold));
  color:#141006;
  font-family:var(--font-display);
  font-weight:800;
  font-size:15px;
  letter-spacing:.04em;
  box-shadow:0 16px 34px -18px rgba(0,0,0,.9);
  transition:top .22s ease;
}
.skip-link:focus,
.skip-link:focus-visible{top:0;}

/* ---------- 5. 页头 ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:90;
  padding:14px var(--gutter) 0;
  transition:padding .35s ease;
}
.read-progress{
  position:fixed;
  top:0;left:0;right:0;
  height:var(--bar-h);
  z-index:150;
  pointer-events:none;
}
.read-progress__bar{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright) 58%,var(--sand));
  box-shadow:0 0 14px rgba(242,200,121,.6);
  transition:width .12s linear;
}
.header-inner{
  position:relative;
  display:flex;
  align-items:center;
  gap:clamp(10px,1.6vw,22px);
  max-width:var(--shell);
  margin:0 auto;
  padding:11px clamp(14px,2vw,22px);
  background:linear-gradient(180deg,rgba(28,31,36,.94),rgba(14,15,18,.90));
  border:1px solid var(--gold-a18);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  backdrop-filter:blur(14px) saturate(1.1);
  transition:border-radius .38s ease,padding .38s ease,background .38s ease,box-shadow .38s ease;
}
.site-header.is-condensed{padding-top:8px;}
.site-header.is-condensed .header-inner{
  border-radius:var(--r-pill);
  padding-top:7px;
  padding-bottom:7px;
  background:linear-gradient(180deg,rgba(28,31,36,.98),rgba(14,15,18,.96));
  box-shadow:0 14px 40px -26px rgba(0,0,0,.95),0 0 0 1px rgba(214,168,75,.10) inset;
}

/* 品牌 */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  flex:none;
}
.brand__mark{
  position:relative;
  flex:none;
  width:40px;
  height:40px;
  border-radius:13px 13px 13px 4px;
  background:linear-gradient(145deg,var(--gold-bright) 0%,var(--gold) 44%,var(--gold-deep) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 10px 22px -14px rgba(242,200,121,.95);
  overflow:hidden;
  transition:transform .3s var(--ease-pop);
}
.brand:hover .brand__mark{transform:rotate(-4deg) scale(1.04);}
.brand__mark::before{
  content:"";
  position:absolute;
  inset:9px 9px auto 9px;
  height:4px;
  border-radius:2px;
  background:var(--ink-900);
  box-shadow:0 9px 0 -1px var(--ink-900);
  opacity:.88;
}
.brand__mark::after{
  content:"";
  position:absolute;
  left:9px;right:9px;bottom:8px;
  height:8px;
  border-radius:3px 3px 0 0;
  background:var(--ink-900);
  opacity:.32;
}
.brand__text{display:block;min-width:0;}
.brand__name{
  display:block;
  font-family:var(--font-display);
  font-weight:800;
  font-size:16.5px;
  line-height:1.25;
  letter-spacing:.04em;
  color:var(--mist);
  white-space:nowrap;
}
.brand__motto{
  display:block;
  margin-top:2px;
  font-size:11px;
  line-height:1.4;
  letter-spacing:.26em;
  color:var(--gold);
  white-space:nowrap;
}

/* 主导航 */
.site-nav{
  margin-left:auto;
  min-width:0;
}
.site-nav__list{
  display:flex;
  align-items:center;
  gap:2px;
}
.site-nav__item{display:block;}
.site-nav__link{
  display:block;
  padding:9px 13px;
  border-radius:var(--r-pill);
  font-family:var(--font-display);
  font-weight:600;
  font-size:14.5px;
  letter-spacing:.01em;
  color:var(--mist-a70);
  white-space:nowrap;
  transition:color .18s ease,background-color .18s ease,transform .18s var(--ease-pop);
}
.site-nav__link:hover{
  color:var(--gold-bright);
  background:var(--gold-a10);
}
.site-nav__link:active{transform:scale(.96);}
.site-nav__link[aria-current="page"]{
  color:#141006;
  font-weight:800;
  background:linear-gradient(120deg,var(--gold-bright),var(--gold) 70%,var(--gold-deep));
  box-shadow:0 10px 22px -16px rgba(242,200,121,.95);
}

/* 右侧动作区 */
.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:none;
}
.server-lamp{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 12px;
  border-radius:var(--r-pill);
  border:1px solid var(--cyan-a45);
  background:var(--cyan-a14);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:#8FC3C0;
  white-space:nowrap;
}
.server-lamp__dot{
  width:7px;height:7px;
  flex:none;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 10px rgba(78,140,138,.9);
  animation:lamp-pulse 2.6s ease-out infinite;
}
@keyframes lamp-pulse{
  0%{box-shadow:0 0 0 0 rgba(78,140,138,.55);}
  70%{box-shadow:0 0 0 7px rgba(78,140,138,0);}
  100%{box-shadow:0 0 0 0 rgba(78,140,138,0);}
}

/* 汉堡按钮 */
.nav-toggle{
  display:none;
  place-items:center;
  width:44px;height:44px;
  flex:none;
  border-radius:14px;
  border:1px solid var(--gold-a30);
  background:var(--gold-a10);
  transition:background-color .2s ease,transform .18s var(--ease-pop),border-color .2s ease;
}
.nav-toggle:hover{background:var(--gold-a18);border-color:var(--gold-a50);}
.nav-toggle:active{transform:scale(.94);}
.nav-toggle__bars{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.nav-toggle__bar{
  display:block;
  width:18px;height:2px;
  border-radius:2px;
  background:var(--gold-bright);
  transition:transform .26s var(--ease-pop),opacity .18s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ---------- 6. 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 22px;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  font-family:var(--font-display);
  font-weight:800;
  font-size:15px;
  line-height:1.4;
  letter-spacing:.02em;
  cursor:pointer;
  transition:transform .18s var(--ease-pop),background-color .2s ease,color .2s ease,border-color .2s ease,filter .2s ease;
}
.btn:active{transform:scale(.96);}
.btn--gold{
  background:linear-gradient(120deg,var(--gold-bright) 0%,var(--gold) 56%,var(--gold-deep) 100%);
  color:#141006;
  box-shadow:0 12px 26px -16px rgba(214,168,75,.95);
}
.btn--gold:hover{filter:brightness(1.07);}
.btn--ghost{
  background:transparent;
  border-color:var(--gold-a50);
  color:var(--gold-bright);
}
.btn--ghost:hover{background:var(--gold-a10);border-color:var(--gold-bright);}
.btn--nav{
  padding:10px 18px;
  font-size:14px;
  white-space:nowrap;
}
.btn--sm{
  padding:8px 16px;
  font-size:13.5px;
}

/* ---------- 7. 通用排版组件 ---------- */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{padding-block:clamp(40px,6vw,80px);}
.section-head{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:10px 18px;
  margin-bottom:clamp(20px,3vw,34px);
}
.section-head__num{
  font-family:var(--font-mono);
  font-size:clamp(26px,3.4vw,40px);
  font-weight:700;
  line-height:1;
  letter-spacing:-.04em;
  color:var(--gold);
}
.section-head__title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(22px,3vw,34px);
  letter-spacing:-.02em;
  color:var(--mist);
}
.section-head__desc{
  flex:1 1 260px;
  min-width:220px;
  font-size:15px;
  line-height:1.75;
  color:var(--mist-a55);
}
.num{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:clamp(30px,4vw,46px);
  line-height:1;
  letter-spacing:-.05em;
  color:var(--gold);
  transition:color .3s ease,text-shadow .3s ease;
}
[data-section]{scroll-margin-top:calc(96px + var(--bar-h));}
[data-section].is-current .num,
[data-section].is-current .section-head__num{
  color:var(--gold-bright);
  text-shadow:0 0 22px rgba(242,200,121,.45);
}

/* 标签 */
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 11px;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1.8;
  letter-spacing:.06em;
  white-space:nowrap;
}
.tag--gold{color:var(--gold-bright);border-color:var(--gold-a50);background:var(--gold-a10);}
.tag--sand{color:#E6C9A5;border-color:rgba(201,165,122,.48);background:var(--sand-a14);}
.tag--cyan{color:#95C9C6;border-color:var(--cyan-a45);background:var(--cyan-a14);}
.tag--alert{color:#E9A797;border-color:rgba(184,80,60,.55);background:var(--alert-a16);}
.pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 14px;
  border-radius:var(--r-pill);
  border:1px solid var(--gold-a18);
  background:var(--gold-a06);
  font-size:13px;
  color:var(--mist-a70);
}

/* 卡片 */
.card{
  position:relative;
  overflow:hidden;
  padding:clamp(18px,2.4vw,28px);
  border:1px solid var(--gold-a18);
  border-radius:var(--r-xl);
  background:linear-gradient(158deg,rgba(38,42,51,.92),rgba(14,15,18,.94));
  box-shadow:var(--shadow-1);
  transition:border-color .28s ease,transform .28s var(--ease-pop),box-shadow .28s ease;
}
.card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(242,200,121,.16) 48%,transparent 66%);
  transform:translateX(-135%);
  transition:transform .85s ease;
  pointer-events:none;
}
.card:hover{
  border-color:var(--gold-a50);
  transform:translateY(-3px);
  box-shadow:0 30px 66px -40px rgba(0,0,0,.98),0 0 0 1px rgba(214,168,75,.1) inset;
}
.card:hover::after{transform:translateX(135%);}
.card--slant{border-radius:var(--r-xl) var(--r-xl) var(--r-xl) 6px;}
.card__meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}

/* 渐变条带 */
.rule-band{
  height:6px;
  border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright) 30%,var(--sand) 58%,var(--cyan) 84%,var(--gold-deep));
  background-size:200% 100%;
  opacity:.9;
}
.rule-band--tall{height:10px;}

/* 网格 */
.grid{display:grid;gap:clamp(14px,2vw,22px);}
.grid--bento{grid-template-columns:repeat(12,minmax(0,1fr));}
.grid--two{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid--three{grid-template-columns:repeat(3,minmax(0,1fr));}

/* 面包屑 */
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding-block:16px;
  font-size:13px;
  line-height:1.6;
  color:var(--mist-a38);
}
.breadcrumb a{color:var(--mist-a70);transition:color .18s ease;}
.breadcrumb a:hover{color:var(--gold-bright);}
.breadcrumb__sep{color:var(--gold-deep);}
.breadcrumb__current{color:var(--gold);}

/* 图文容器（页面阶段放置占位图） */
.media{
  position:relative;
  overflow:hidden;
  aspect-ratio:16 / 10;
  border-radius:var(--r-xl);
  border:1px solid var(--gold-a18);
  background:
    radial-gradient(120% 120% at 18% 8%,rgba(214,168,75,.26),transparent 62%),
    radial-gradient(90% 90% at 88% 100%,rgba(78,140,138,.20),transparent 66%),
    linear-gradient(150deg,#262A33,#101116 72%);
}
.media::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(244,239,230,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(244,239,230,.06) 1px,transparent 1px);
  background-size:30px 30px;
  pointer-events:none;
}
.media > img{
  position:relative;
  width:100%;
  height:100%;
  object-fit:cover;
}
.media--wide{aspect-ratio:21 / 9;}
.media--portrait{aspect-ratio:3 / 4;}
.media--slant{border-radius:var(--r-xl) var(--r-xl) var(--r-xl) 6px;}
.media__caption{
  position:absolute;
  left:14px;
  bottom:14px;
  z-index:2;
  padding:5px 13px;
  border-radius:var(--r-pill);
  border:1px solid var(--gold-a30);
  background:rgba(14,15,18,.82);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--gold-bright);
}

/* ---------- 8. 页脚 ---------- */
.site-footer{
  position:relative;
  margin-top:clamp(48px,8vw,104px);
  background:linear-gradient(180deg,rgba(14,15,18,.4) 0%,#0A0B0D 42%,#08090B 100%);
  color:var(--mist);
}
.footer-strip{
  height:8px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright) 20%,var(--gold) 44%,var(--sand) 64%,var(--cyan) 84%,var(--gold-deep));
  background-size:220% 100%;
  animation:band-drift 20s linear infinite;
}
@keyframes band-drift{to{background-position:220% 0;}}
.footer-inner{
  display:grid;
  grid-template-columns:minmax(230px,1fr) minmax(0,2.1fr);
  gap:clamp(26px,4vw,64px);
  padding-block:clamp(36px,5vw,64px) clamp(24px,3vw,40px);
}
.footer-brand{min-width:0;}
.brand--footer{gap:13px;}
.footer-tagline{
  margin-top:18px;
  max-width:30ch;
  font-size:14.5px;
  line-height:1.85;
  color:var(--mist-a55);
}
.footer-index-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:20px;
  padding:9px 18px;
  border-radius:var(--r-pill);
  border:1px solid var(--gold-a30);
  color:var(--gold-bright);
  font-family:var(--font-display);
  font-weight:700;
  font-size:13.5px;
  letter-spacing:.05em;
  transition:background-color .2s ease,border-color .2s ease,transform .18s var(--ease-pop);
}
.footer-index-link::before{
  content:"";
  width:6px;height:6px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 10px rgba(214,168,75,.9);
}
.footer-index-link:hover{background:var(--gold-a10);border-color:var(--gold-a50);}
.footer-index-link:active{transform:scale(.97);}
.footer-groups{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2.6vw,34px);
}
.footer-group{min-width:0;}
.footer-group__title{
  display:inline-block;
  margin-bottom:14px;
  padding-bottom:8px;
  border-bottom:2px solid var(--gold-a30);
  font-family:var(--font-display);
  font-weight:800;
  font-size:14.5px;
  letter-spacing:.06em;
  color:var(--gold-bright);
  transition:color .2s ease,border-color .2s ease;
}
.footer-group__title:hover{color:var(--mist);border-color:var(--gold-bright);}
.footer-group__list li{
  display:flex;
  align-items:baseline;
  gap:9px;
  font-size:13.5px;
  line-height:2.05;
  color:var(--mist-a55);
}
.footer-group__list li::before{
  content:"";
  flex:none;
  width:5px;height:5px;
  border-radius:50%;
  background:var(--gold-deep);
  transform:translateY(-2px);
}
.footer-meta{
  border-top:1px solid var(--gold-a18);
  background:rgba(28,31,36,.42);
}
.footer-meta__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px 34px;
  padding-block:22px;
  font-size:13px;
  line-height:1.85;
  color:var(--mist-a55);
}
.footer-meta__contact{max-width:62ch;}
.footer-meta__contact .mono{color:var(--gold-bright);}
.footer-legal{
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
}
.footer-legal a{
  color:var(--mist-a70);
  border-bottom:1px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.footer-legal a:hover{color:var(--gold-bright);border-bottom-color:var(--gold-a50);}
.footer-copy{
  flex:1 1 100%;
  padding-top:14px;
  border-top:1px dashed rgba(111,116,124,.28);
  font-size:12.5px;
  color:var(--mist-a38);
}
.footer-copy a{color:var(--mist-a70);}
.footer-copy a:hover{color:var(--gold-bright);}
.footer-copy .mono{color:var(--mist-a55);}

/* ---------- 9. 动效安全网 ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .card:hover{transform:none;}
  .card::after{display:none;}
  .site-header.is-condensed .header-inner{transition:none;}
}

/* ---------- 10. 响应式 ---------- */
@media (max-width:1180px){
  .site-nav__link{padding:9px 10px;font-size:14px;}
  .server-lamp{padding:6px 10px;font-size:11px;}
  .btn--nav{padding:10px 15px;font-size:13.5px;}
}
@media (max-width:1080px){
  .header-inner{flex-wrap:wrap;gap:10px 12px;}
  .brand{flex:1 1 auto;}
  .nav-toggle{display:grid;}
  .server-lamp__text{display:none;}
  .server-lamp{padding:8px;}
  .site-nav{
    order:3;
    flex:1 0 100%;
    margin-left:0;
    display:none;
    margin-top:6px;
    padding-top:12px;
    border-top:1px solid var(--gold-a18);
  }
  .site-nav[data-open="true"]{
    display:block;
    animation:nav-drop .24s ease-out both;
  }
  .site-nav__list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }
  .site-nav__link{
    padding:12px 14px;
    border-radius:14px;
    background:rgba(244,239,230,.05);
    font-size:15px;
    text-align:center;
  }
  .site-nav__link[aria-current="page"]{text-align:center;}
  .site-header.is-condensed .header-inner{border-radius:var(--r-lg);}
  .footer-inner{grid-template-columns:1fr;}
  .footer-groups{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@keyframes nav-drop{
  from{opacity:0;transform:translateY(-8px);}
  to{opacity:1;transform:none;}
}
@media (max-width:860px){
  body{font-size:16px;}
  .grid--three{grid-template-columns:repeat(2,minmax(0,1fr));}
  .brand__motto{letter-spacing:.2em;}
}
@media (max-width:720px){
  .site-header{padding:10px var(--gutter) 0;}
  .header-inner{padding:10px 12px;border-radius:18px;}
  .brand__mark{width:36px;height:36px;}
  .brand__name{font-size:15.5px;}
  .brand__motto{font-size:10px;letter-spacing:.18em;}
  .btn--nav{padding:9px 14px;font-size:13px;}
  .grid--two,.grid--three{grid-template-columns:1fr;}
  .grid--bento{grid-template-columns:repeat(6,minmax(0,1fr));}
  .footer-groups{grid-template-columns:1fr;}
  .footer-meta__inner{flex-direction:column;align-items:flex-start;}
  .footer-copy{flex:1 1 auto;width:100%;}
  .media,.media--wide{aspect-ratio:4 / 3;}
  .media--portrait{aspect-ratio:3 / 4;}
}
@media (max-width:520px){
  .site-nav__list{grid-template-columns:1fr;}
  .brand__motto{display:none;}
  .header-actions{gap:8px;}
  .tag{font-size:11px;padding:2px 9px;}
}