/* ============ 1. Reset & Tokens ============ */
*,*::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,p,ul,ol,li,figure,blockquote,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
button{font:inherit;color:inherit}
img,svg{max-width:100%}
[hidden]{display:none!important}

:root{
  --ink:#08090C;
  --ink-2:#0E1014;
  --rock:#2A2D31;
  --bone:#F2EBDD;
  --gold:#D4AF37;
  --gold-deep:#6B4E12;
  --gold-light:#F4D77A;
  --violet:#8A4FFF;
  --blue:#2EC5FF;
  --amber:#FF8A3D;
  --moss:#5B6F5A;
  --clay:#B46A4A;

  --grad-gold:linear-gradient(135deg,#F4D77A 0%,#D4AF37 45%,#8A6B1C 100%);
  --hair:rgba(212,175,55,.22);
  --hair-soft:rgba(212,175,55,.12);
  --bone-70:rgba(242,235,221,.72);
  --bone-50:rgba(242,235,221,.52);

  --font-head:"Songti SC","Noto Serif CJK SC","Source Han Serif SC",Georgia,"Times New Roman",serif;
  --font-body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"SFMono-Regular","JetBrains Mono","Roboto Mono",Consolas,"Courier New",monospace;

  --gutter:clamp(16px,4vw,44px);
  --radius:2px;
}

/* ============ 2. Base & Typography ============ */
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  letter-spacing:.01em;
  overflow-x:hidden;
  min-height:100vh;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(212,175,55,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(212,175,55,.05) 1px, transparent 1px);
  background-size:96px 96px;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(58% 38% at 10% 0%, rgba(138,79,255,.14), transparent 70%),
    radial-gradient(52% 44% at 100% 6%, rgba(212,175,55,.14), transparent 72%),
    radial-gradient(46% 40% at 50% 104%, rgba(46,197,255,.09), transparent 70%);
}
main,header,footer{position:relative;z-index:1}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.16;font-weight:700;letter-spacing:.02em}
p{color:var(--bone-70)}
a{color:var(--blue);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--gold-light)}
strong{color:var(--bone)}
::selection{background:rgba(212,175,55,.35);color:#fff}

/* ============ 3. Layout Utilities ============ */
.wrap{width:min(1240px, calc(100% - var(--gutter) * 2));margin-inline:auto}
.section{padding-block:clamp(40px,6.5vw,92px)}
.section--tight{padding-block:clamp(24px,4vw,52px)}
.section__head{
  display:flex;flex-wrap:wrap;align-items:flex-end;
  gap:clamp(14px,2.4vw,32px);
  margin-bottom:clamp(20px,3vw,38px);
}
.section__head>*{flex:1 1 260px;min-width:0}
.section__head>.section__aside{flex:0 0 auto;margin-inline-start:auto}
.rule{height:1px;border:0;background:linear-gradient(90deg,rgba(212,175,55,.6),rgba(212,175,55,0));margin-block:clamp(18px,2.6vw,34px)}
.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.8vw,26px)}
.grid-12>*{grid-column:span 12;min-width:0}
.span-3{grid-column:span 3}
.span-4{grid-column:span 4}
.span-6{grid-column:span 6}
.span-8{grid-column:span 8}
.span-9{grid-column:span 9}

/* ============ 4. Typographic Components ============ */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold);
}
.eyebrow::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.display{font-family:var(--font-head);font-weight:700;line-height:1.08;letter-spacing:.02em;color:var(--bone)}
.display--xl{font-size:clamp(2.4rem,8vw,6.4rem)}
.display--lg{font-size:clamp(1.8rem,4.4vw,3.2rem)}
.display--gold{
  background:var(--grad-gold);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gold);
}
.lead{font-size:clamp(.98rem,1.35vw,1.12rem);line-height:1.9;color:var(--bone-70);max-width:64ch}
.metric{display:flex;flex-direction:column;gap:.3rem}
.metric__value{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:clamp(1.35rem,2.8vw,2.1rem);letter-spacing:.02em;color:var(--blue);
  text-shadow:0 0 22px rgba(46,197,255,.35);
}
.metric__unit{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.2em;
  color:rgba(242,235,221,.5);margin-left:.45rem;padding-left:.6rem;
  border-left:1px solid rgba(212,175,55,.45);
}
.metric__label{font-size:.76rem;letter-spacing:.12em;color:rgba(242,235,221,.58)}

/* ============ 5. Buttons / Chips / Tags ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.78rem 1.5rem;font-family:inherit;font-size:.86rem;letter-spacing:.14em;
  border:1px solid transparent;border-radius:var(--radius);cursor:pointer;
  transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.btn--gold{background:var(--grad-gold);color:#1A1405;font-weight:700;box-shadow:0 12px 34px -18px rgba(212,175,55,.95)}
.btn--gold:hover{color:#1A1405;transform:translateY(-1px);box-shadow:0 16px 38px -16px rgba(212,175,55,1)}
.btn--ghost{border-color:rgba(212,175,55,.45);color:var(--gold);background:rgba(212,175,55,.05)}
.btn--ghost:hover{background:rgba(212,175,55,.14);color:var(--bone);border-color:var(--gold)}
.btn--blue{border-color:rgba(46,197,255,.45);color:var(--blue);background:rgba(46,197,255,.06)}
.btn--blue:hover{background:rgba(46,197,255,.16);color:#fff;border-color:var(--blue)}
.filter-bar{display:flex;flex-wrap:wrap;gap:.5rem;margin-block:1.1rem}
.chip{
  appearance:none;background:rgba(42,45,49,.6);border:1px solid rgba(212,175,55,.24);
  color:rgba(242,235,221,.72);font-family:inherit;font-size:.78rem;letter-spacing:.1em;
  padding:.42rem .85rem;border-radius:var(--radius);cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.chip:hover{border-color:rgba(138,79,255,.7);color:var(--bone)}
.chip[aria-pressed="true"]{
  background:linear-gradient(180deg,rgba(138,79,255,.32),rgba(138,79,255,.08));
  border-color:var(--violet);color:#fff;
  box-shadow:0 0 20px -6px rgba(138,79,255,.95);
}
.tag{
  display:inline-flex;align-items:center;gap:.4rem;padding:.2rem .6rem;
  border:1px solid rgba(46,197,255,.35);color:var(--blue);
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;border-radius:var(--radius);
}
[data-filter-item][data-filtered="in"]{animation:filterIn .34s ease both}
@keyframes filterIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ============ 6. Surfaces ============ */
.panel{
  background:linear-gradient(160deg, rgba(42,45,49,.75), rgba(8,9,12,.6));
  border:1px solid var(--hair);border-radius:var(--radius);
  padding:clamp(16px,2.4vw,28px);
}
.card{
  position:relative;display:flex;flex-direction:column;gap:.7rem;
  background:linear-gradient(165deg, rgba(42,45,49,.7), rgba(8,9,12,.55));
  border:1px solid var(--hair);border-radius:var(--radius);
  padding:clamp(16px,2.2vw,26px);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.card:hover{
  transform:translateY(-3px);
  border-color:rgba(212,175,55,.5);
  box-shadow:0 26px 46px -30px rgba(212,175,55,.85);
}

/* ============ 7. Breadcrumbs ============ */
.breadcrumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  padding-block:.9rem;font-family:var(--font-mono);font-size:.72rem;
  letter-spacing:.08em;color:rgba(242,235,221,.5);
}
.breadcrumbs li{display:flex;align-items:center;gap:.5rem}
.breadcrumbs li+li::before{content:"/";color:rgba(212,175,55,.5)}
.breadcrumbs a{color:inherit}
.breadcrumbs a:hover{color:var(--gold)}
.breadcrumbs [aria-current="page"]{color:var(--bone)}

/* ============ 8. Figure / Media Containers ============ */
.figure{
  position:relative;margin:0;overflow:hidden;
  background:linear-gradient(140deg,#14161A 0%,#0A0B0E 72%);
  border:1px solid rgba(212,175,55,.2);border-radius:var(--radius);
}
.figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(46,197,255,.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(46,197,255,.09) 1px, transparent 1px);
  background-size:44px 44px;
}
.figure img,.figure video,.figure picture>img{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:saturate(.92) contrast(1.06);
}
.figure--16x9{aspect-ratio:16/9}
.figure--4x3{aspect-ratio:4/3}
.figure--3x2{aspect-ratio:3/2}
.figure--1x1{aspect-ratio:1/1}
.figure--portrait{aspect-ratio:3/4}
.figure__caption{
  position:absolute;inset:auto 0 0 0;z-index:2;
  padding:.7rem .9rem;font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.08em;color:rgba(242,235,221,.82);
  background:linear-gradient(0deg, rgba(8,9,12,.94), rgba(8,9,12,0));
}
.figure-grid{display:grid;gap:clamp(10px,1.6vw,20px)}

/* ============ 9. Header ============ */
.skip-link{
  position:absolute;left:50%;top:-120px;transform:translateX(-50%);
  z-index:200;padding:.7rem 1.2rem;background:var(--gold);color:#141007;
  font-size:.85rem;font-weight:700;letter-spacing:.08em;
  border-radius:0 0 2px 2px;transition:top .2s ease;
}
.skip-link:focus{top:0}

.site-header{
  position:sticky;top:0;z-index:70;
  background:rgba(8,9,12,.9);
  backdrop-filter:blur(16px) saturate(125%);
  border-bottom:1px solid var(--hair);
  transition:background .3s ease,box-shadow .3s ease;
}
.site-header::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(212,175,55,.65),rgba(138,79,255,.5),transparent);
}
.site-header[data-scrolled]{
  background:rgba(8,9,12,.97);
  box-shadow:0 20px 44px -32px rgba(212,175,55,1);
}

.header-top{
  background:linear-gradient(90deg, rgba(212,175,55,.08), rgba(138,79,255,.05) 48%, transparent 78%);
  border-bottom:1px solid var(--hair-soft);
}
.header-top__inner{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:clamp(12px,2vw,32px);padding-block:.6rem;
}

.brand{display:inline-flex;align-items:center;gap:.7rem;color:var(--bone);flex:0 0 auto}
.brand:hover{color:var(--bone)}
.brand__mark{
  width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center;
  font-family:var(--font-mono);font-size:.8rem;letter-spacing:.06em;color:var(--gold);
  border:1px solid rgba(212,175,55,.55);
  background:linear-gradient(150deg, rgba(212,175,55,.2), rgba(8,9,12,.2) 62%);
  box-shadow:inset 0 0 0 1px rgba(8,9,12,.75), 0 0 22px -8px rgba(212,175,55,.85);
}
.brand__body{display:flex;flex-direction:column;gap:.08rem;min-width:0}
.brand__name{
  font-family:var(--font-head);font-size:1.12rem;font-weight:700;
  letter-spacing:.08em;line-height:1.25;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gold);
}
.brand__line{
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(242,235,221,.45);white-space:nowrap;
}
.header-top__meta{
  margin-inline-start:auto;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;
  color:var(--bone-50);white-space:nowrap;
}
.header-top__index{display:flex;flex-wrap:wrap;gap:clamp(10px,1.6vw,22px)}
.header-top__index a{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;
  color:var(--bone-70);padding-bottom:2px;
  border-bottom:1px solid rgba(212,175,55,.35);
}
.header-top__index a:hover{color:var(--gold);border-color:var(--gold)}

.header-nav{background:linear-gradient(180deg, rgba(42,45,49,.5), rgba(8,9,12,.15))}
.header-nav__inner{display:flex;align-items:center;gap:clamp(10px,2vw,28px);padding-block:.35rem .45rem}
.nav-toggle{display:none}
.site-nav{flex:1 1 auto;min-width:0}
.site-nav__list{
  display:flex;align-items:center;gap:.25rem;
  overflow-x:auto;scrollbar-width:none;counter-reset:navitem;
}
.site-nav__list::-webkit-scrollbar{height:2px}
.site-nav__list::-webkit-scrollbar-thumb{background:rgba(212,175,55,.4)}
.site-nav__list>li{counter-increment:navitem;flex:0 0 auto}
.site-nav__list a{
  display:block;position:relative;padding:.58rem .9rem;
  font-size:.86rem;letter-spacing:.1em;color:var(--bone-70);
  border:1px solid transparent;border-radius:var(--radius);white-space:nowrap;
  transition:color .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.site-nav__list a::before{
  content:counter(navitem,decimal-leading-zero);
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.06em;
  color:rgba(212,175,55,.55);margin-right:.55em;vertical-align:.12em;
}
.site-nav__list a:hover{
  color:var(--bone);border-color:rgba(212,175,55,.45);
  background:linear-gradient(180deg, rgba(212,175,55,.13), rgba(212,175,55,.03));
}
.site-nav__list a[aria-current="page"]{
  color:var(--gold-light);border-color:rgba(212,175,55,.6);
  background:linear-gradient(180deg, rgba(212,175,55,.22), rgba(138,79,255,.1));
  box-shadow:0 16px 32px -24px rgba(212,175,55,1), inset 0 0 0 1px rgba(244,215,122,.16);
}
.site-nav__list a[aria-current="page"]::before{color:var(--blue)}
.header-nav__coord{
  flex:0 0 auto;font-family:var(--font-mono);font-size:.64rem;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(242,235,221,.3);
}

/* ============ 10. Edge Latency Meter ============ */
.edge-meter{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:80;
  display:flex;flex-direction:column;align-items:center;gap:.45rem;
  padding:.9rem .5rem;
  background:linear-gradient(180deg, rgba(8,9,12,.94), rgba(20,21,24,.94));
  border:1px solid rgba(46,197,255,.28);border-right:0;
  border-radius:2px 0 0 2px;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;
  color:rgba(242,235,221,.6);
  box-shadow:-12px 0 32px -20px rgba(46,197,255,.95);
}
.edge-meter__pulse{
  width:6px;height:6px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 10px var(--amber);
  animation:edgePulse 2.4s ease-in-out infinite;
}
.edge-meter__label,.edge-meter__unit{writing-mode:vertical-rl}
.edge-meter__value{
  writing-mode:vertical-rl;color:var(--blue);font-size:.94rem;letter-spacing:.1em;
  text-shadow:0 0 14px rgba(46,197,255,.55);
}
@keyframes edgePulse{
  0%,100%{opacity:.35;transform:scale(.82)}
  50%{opacity:1;transform:scale(1.16)}
}

/* ============ 11. Scroll Progress ============ */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:120;
  pointer-events:none;
  background:linear-gradient(90deg,var(--amber),var(--gold),var(--violet),var(--blue));
  box-shadow:0 0 14px rgba(46,197,255,.75);
  transition:width .12s linear;
}

/* ============ 12. Footer ============ */
.site-footer{
  position:relative;z-index:1;
  margin-top:clamp(48px,8vw,120px);
  border-top:1px solid rgba(212,175,55,.3);
  background:linear-gradient(180deg, rgba(42,45,49,.55) 0%, var(--ink) 44%);
  padding-block:clamp(34px,5vw,64px) clamp(18px,2.6vw,30px);
}
.site-footer::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(212,175,55,.9),rgba(138,79,255,.65),transparent);
}
.footer-inner{display:flex;flex-direction:column;gap:clamp(26px,4vw,46px)}
.footer-top{
  display:grid;grid-template-columns:minmax(240px,1.05fr) minmax(0,2fr);
  gap:clamp(24px,4vw,56px);
  padding-bottom:clamp(22px,3vw,38px);
  border-bottom:1px solid var(--hair-soft);
}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
.brand--footer .brand__mark{width:38px;height:38px}
.brand--footer .brand__name{font-size:1.05rem}
.footer-brand__note{font-size:.86rem;color:var(--bone-50);max-width:34ch}
.footer-legend{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.5rem .9rem;width:100%;
}
.footer-legend li{display:flex;align-items:baseline;gap:.5rem;font-size:.72rem}
.footer-legend__v{
  font-family:var(--font-mono);font-size:.98rem;letter-spacing:.04em;
  color:var(--gold);font-variant-numeric:tabular-nums;
}
.footer-legend__k{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;
  color:rgba(242,235,221,.45);
}
.footer-links{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:clamp(16px,2.4vw,30px);
}
.footer-col__title{
  font-family:var(--font-mono);font-size:.68rem;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  margin-bottom:.6rem;padding-bottom:.45rem;
  border-bottom:1px solid var(--hair-soft);
}
.footer-col ul{display:flex;flex-direction:column;gap:.35rem}
.footer-col a{
  font-size:.84rem;color:var(--bone-70);
  transition:color .2s ease,padding-left .2s ease;
}
.footer-col a:hover{color:var(--gold-light);padding-left:.25rem}

.footer-contact{
  display:grid;gap:1rem;
  padding:clamp(18px,2.6vw,26px);
  border:1px solid var(--hair-soft);border-radius:var(--radius);
  background:linear-gradient(150deg, rgba(42,45,49,.5), rgba(8,9,12,.35));
}
.footer-contact__title{
  font-family:var(--font-mono);font-size:.7rem;font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;color:var(--blue);
}
.contact-list{display:grid;gap:.7rem}
.contact-list li{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;font-size:.86rem}
.contact-list__k{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(242,235,221,.42);min-width:5.6em;
}
.contact-list__v{color:var(--bone-70);word-break:break-word}
.copy-btn{
  background:transparent;border:1px solid rgba(46,197,255,.4);color:var(--blue);
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;
  padding:.18rem .55rem;border-radius:var(--radius);cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.copy-btn:hover{background:rgba(46,197,255,.14);color:#fff}
.copy-btn[data-copied]{
  border-color:var(--gold);color:var(--gold);background:rgba(212,175,55,.14);
}

.footer-bottom{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:.6rem clamp(14px,3vw,34px);
  padding-top:clamp(16px,2.4vw,26px);
  border-top:1px solid var(--hair-soft);
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;
  color:rgba(242,235,221,.42);
}
.footer-bottom__legal{color:var(--gold);opacity:.85}
.footer-bottom__note{margin-inline-start:auto}

/* ============ 13. Reveal & Motion ============ */
[data-reveal]{
  opacity:0;transform:translateY(14px);
  transition:opacity .6s ease,transform .6s ease;
}
[data-reveal="in"]{opacity:1;transform:none}

:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:var(--radius)}
.skip-link:focus-visible{outline-color:var(--gold-light)}

/* ============ 14. Responsive ============ */
@media (max-width:1180px){
  .header-nav__coord{display:none}
}
@media (max-width:960px){
  .header-top__meta{display:none}
  .header-top__index{margin-inline-start:auto}
  .header-nav__inner{flex-wrap:wrap;padding-block:.4rem}
  .nav-toggle{
    display:inline-flex;align-items:center;gap:.6rem;
    padding:.5rem .85rem;
    background:rgba(212,175,55,.07);
    border:1px solid rgba(212,175,55,.45);color:var(--gold);
    border-radius:var(--radius);cursor:pointer;
    font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
    transition:background .2s ease,color .2s ease;
  }
  .nav-toggle:hover{background:rgba(212,175,55,.16);color:var(--gold-light)}
  .nav-toggle__bars{display:inline-flex;flex-direction:column;gap:3px;width:16px}
  .nav-toggle__bars i{display:block;height:1px;background:currentColor;transition:transform .25s ease,opacity .25s ease}
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1){transform:translateY(4px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3){transform:translateY(-4px) rotate(-45deg)}
  .site-nav{
    order:3;flex:1 1 100%;max-height:0;opacity:0;overflow:hidden;
    border-top:1px solid transparent;
    transition:max-height .34s ease,opacity .3s ease;
  }
  .site-nav[data-open]{
    max-height:70vh;opacity:1;overflow-y:auto;
    padding-top:.5rem;border-top-color:var(--hair-soft);
  }
  .site-nav__list{flex-direction:column;align-items:stretch;gap:.15rem;overflow:visible}
  .site-nav__list a{padding:.7rem .6rem;font-size:.92rem}
  .site-header[data-nav-open]{box-shadow:0 26px 52px -32px rgba(0,0,0,.95)}
  .footer-top{grid-template-columns:minmax(0,1fr)}
  .edge-meter{
    top:auto;bottom:14px;right:14px;transform:none;
    flex-direction:row;gap:.4rem;padding:.4rem .6rem;
    border-right:1px solid rgba(46,197,255,.28);
    border-radius:var(--radius);
  }
  .edge-meter__label,.edge-meter__unit,.edge-meter__value{writing-mode:horizontal-tb}
}
@media (max-width:900px){
  .span-3,.span-4,.span-6,.span-8,.span-9{grid-column:span 12}
  .footer-links{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .brand__line{display:none}
  .footer-legend{grid-template-columns:minmax(0,1fr)}
  .footer-bottom__note{margin-inline-start:0}
}

/* ============ 15. Reduced Motion ============ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  [data-reveal]{opacity:1;transform:none}
  .scroll-progress{transition:none}
}