@font-face{
  font-family:"Antonio";
  src:url("../fonts/antonio-var.woff2") format("woff2-variations");
  font-weight:200 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Overpass";
  src:url("../fonts/overpass-var.woff2") format("woff2-variations");
  font-weight:300 700; font-style:normal; font-display:swap;
}

@font-face{
  font-family:"Antonio Fallback";
  src:local("Arial Narrow"),local("Helvetica Neue Condensed"),local("Liberation Sans Narrow"),local("Arial");
  size-adjust:82%; ascent-override:98%; descent-override:22%; line-gap-override:0%;
}
@font-face{
  font-family:"Overpass Fallback";
  src:local("Helvetica Neue"),local("Liberation Sans"),local("Arial");
  size-adjust:98%; ascent-override:88.3%; descent-override:38.3%; line-gap-override:0%;
}


:root{
  --ink:#0a0a0b;
  --graphite:#17181a;
  --graphite-lift:#212328;
  --bone:#f2efe9;
  --bone-shade:#e7e3da;
  --bone-line:#d3cec3;
  --grey:#8d8d8f;
  --grey-dim:#8a8a8d;
  
  --lamp:#d9c8a6;

  --fg-dark:#eceae5;          
  --fg-dark-dim:#a3a3a4;
  --fg-light:#1a1a1c;         
  --fg-light-dim:#5c5c5f;

  --hair-dark:rgba(236,234,229,.18);
  --hair-light:rgba(26,26,28,.16);

  --display:"Antonio","Antonio Fallback",Arial Narrow,sans-serif;
  --text:"Overpass","Overpass Fallback",Helvetica Neue,Arial,sans-serif;

  
  --ease:cubic-bezier(.16,1,.3,1);
  --t-fast:220ms;
  --t-mid:520ms;
  --t-slow:1100ms;

  --gut:clamp(1.25rem,4vw,4.5rem);
  --maxw:1560px;
  --header-h:74px;
}


*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:clip}
body{
  margin:0; min-width:320px;
  background:var(--ink); color:var(--fg-dark);
  font-family:var(--text); font-weight:300;
  font-size:clamp(.975rem,.35vw + .9rem,1.0625rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0; font-family:var(--display); font-weight:300; letter-spacing:-.005em}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
::selection{background:var(--lamp); color:var(--ink)}
:focus-visible{outline:2px solid var(--lamp); outline-offset:3px}
html{scrollbar-color:var(--graphite-lift) var(--ink)}


figure.ai-image{margin:0; position:relative}
figure.ai-image picture{display:block; width:100%; height:100%}
figure.ai-image > figcaption{
  font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--grey-dim); padding-top:.5rem;
}
figure.ai-image[data-overlay] > figcaption{
  position:absolute; right:.7rem; bottom:.6rem; z-index:3;
  padding:.22rem .5rem; background:rgba(10,10,11,.55); color:rgba(255,255,255,.86);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}
.kicker{
  font-family:var(--text); font-weight:500;
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--fg-dark-dim);
}
.sec-light .kicker{color:var(--fg-light-dim)}
.lede{font-size:clamp(1rem,.5vw + .9rem,1.15rem); line-height:1.58; color:var(--fg-dark-dim); max-width:34ch}
.sec-light .lede{color:var(--fg-light-dim)}


.lede a,.prep__cap a,.sec p a:not(.link-arrow):not(.btn-ghost):not(.btn-solid){
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.22em;
  text-decoration-color:currentColor;
  transition:text-decoration-thickness var(--t-fast) var(--ease), text-underline-offset var(--t-fast) var(--ease);
}
.lede a:hover,.sec p a:not(.link-arrow):hover{text-decoration-thickness:2px; text-underline-offset:.18em}


.hdr{
  position:fixed; inset:0 0 auto 0; z-index:50; height:var(--header-h);
  display:flex; align-items:center;
  background:transparent;
  transition:background var(--t-mid) var(--ease), backdrop-filter var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:rgba(15,16,18,.9);
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  border-bottom-color:var(--hair-dark);
}
.hdr__in{display:flex; align-items:center; gap:clamp(1rem,2.5vw,2.75rem); width:100%}
.brand{display:flex; align-items:baseline; gap:.7rem; text-decoration:none; flex:0 0 auto}
.brand__mark{font-family:var(--display); font-weight:400; font-size:1.5rem; letter-spacing:-.02em; line-height:1}
.brand__tag{font-size:.72rem; color:var(--fg-dark-dim); letter-spacing:.01em; white-space:nowrap}
.nav{margin-inline:auto}
.nav ul{display:flex; gap:clamp(.9rem,2vw,2.1rem)}
.nav a{
  text-decoration:none; font-size:.82rem; letter-spacing:.03em; color:var(--fg-dark);
  position:relative; padding-block:.35rem; display:inline-block;
}

.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-mid) var(--ease);
}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.btn-ghost{
  flex:0 0 auto; text-decoration:none; font-size:.78rem; letter-spacing:.06em;
  padding:.72rem 1.15rem; border:1px solid var(--hair-dark); color:var(--fg-dark);
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.btn-ghost:hover{border-color:var(--fg-dark); background:rgba(236,234,229,.06)}
.burger{display:none}


.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--ink)}
figure.hero__media{position:absolute; inset:0; z-index:0}
.hero__media img{width:100%; height:100%; object-fit:cover; object-position:62% 50%}
figure.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(8,8,9,.94) 0%, rgba(8,8,9,.82) 32%, rgba(8,8,9,.35) 62%, rgba(8,8,9,.5) 100%),
    linear-gradient(to top, rgba(8,8,9,.85) 0%, transparent 42%);
}

.hero__numeral{
  position:absolute; z-index:1; left:clamp(14rem,32vw,44rem); top:clamp(-1rem,1vw,2rem);
  font-family:var(--display); font-weight:400; line-height:.78;
  font-size:clamp(14rem,34vw,32rem); letter-spacing:-.045em;
  color:#fff; opacity:.085; pointer-events:none; user-select:none;
}
.hero__in{position:relative; z-index:2; width:100%; padding-top:calc(var(--header-h) + 3rem); padding-bottom:2rem}
.hero__kicker{display:block; margin-bottom:clamp(1.1rem,2vw,1.9rem)}
.hero h1{
  font-size:clamp(2.55rem,7.1vw,6.9rem); line-height:.955; font-weight:300;
  letter-spacing:-.018em; max-width:19ch;
}
.hero h1 .ln{display:block; overflow:hidden}
.hero h1 .ln > span{display:block}
.hero__lede{margin-top:clamp(1.2rem,2vw,1.9rem); color:#c9c7c2; max-width:37ch}
.hero__cta{display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.2rem); margin-top:clamp(1.6rem,2.6vw,2.4rem); flex-wrap:wrap}
.btn-solid{
  text-decoration:none; background:var(--bone); color:var(--ink);
  font-size:.84rem; letter-spacing:.04em; padding:1.02rem 1.7rem;
  transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn-solid:hover{background:#fff}
.link-arrow{
  text-decoration:none; font-size:.86rem; letter-spacing:.03em;
  display:inline-flex; align-items:center; gap:.7rem;
  border-bottom:1px solid currentColor; padding-bottom:.22rem;
}
.link-arrow .arw{display:inline-block; transition:transform var(--t-mid) var(--ease)}
.link-arrow:hover .arw,.link-arrow:focus-visible .arw{transform:translateX(6px)}


.nightline{margin-top:clamp(2.2rem,4vw,3.6rem)}
.nightline__track{position:relative; height:1px; background:var(--hair-dark)}
.nightline__lit{
  position:absolute; inset:0 auto 0 0; height:1px; background:var(--lamp); opacity:.55;
  transform:scaleX(0); transform-origin:left;
}
.nightline__marks{display:flex; justify-content:space-between; position:relative}
.nightline__marks li{position:relative; padding-top:1.05rem; text-align:left}
.nightline__marks li::before{
  content:""; position:absolute; top:-4.5px; left:0; width:8px; height:8px; border-radius:50%;
  background:var(--ink); border:1px solid rgba(236,234,229,.55);
}
.nightline__marks li:last-child{text-align:right}
.nightline__marks li:last-child::before{left:auto; right:0}
.nightline__t{display:block; font-family:var(--display); font-size:.95rem; letter-spacing:.02em; color:#d7d5d0}
.nightline__l{display:block; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--grey-dim); margin-top:.1rem}
.hero__note{
  margin-top:clamp(1.2rem,2vw,1.7rem); text-align:right;
  font-size:.64rem; letter-spacing:.09em; color:#9a9a9d;
}


.sec{position:relative; padding-block:clamp(3.5rem,7vw,7.5rem)}
.sec-light{background:var(--bone); color:var(--fg-light)}
.sec-dark{background:var(--graphite); color:var(--fg-dark)}
.sec-head{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(1.5rem,4vw,4rem); align-items:end}
.sec-head h2{font-size:clamp(2rem,4.3vw,4rem); line-height:1.02; font-weight:300}
.sec-head p{font-size:clamp(.95rem,.4vw + .85rem,1.08rem); line-height:1.55; color:var(--fg-light-dim); max-width:40ch}
.sec-dark .sec-head p{color:var(--fg-dark-dim)}


.pano{position:relative; margin-top:clamp(2rem,4vw,3.4rem)}
figure.pano__img{position:relative; aspect-ratio:24/9; overflow:hidden; background:var(--bone-shade)}
.pano__img img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.04)}
.elev{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none}
.elev__path{fill:none; stroke:#fff; stroke-width:1.15; vector-effect:non-scaling-stroke; opacity:.9}
.elev__shadow{fill:none; stroke:rgba(0,0,0,.45); stroke-width:2.6; vector-effect:non-scaling-stroke}
.elev-pts{position:absolute; inset:0; pointer-events:none}
.elev-pt{position:absolute; transform:translate(-50%,-100%); padding-bottom:1.35rem; white-space:nowrap}
.elev-pt::after{
  content:""; position:absolute; left:50%; bottom:0; width:9px; height:9px; margin-left:-4.5px;
  border-radius:50%; background:transparent; border:1.5px solid #fff;
  box-shadow:0 0 0 3px rgba(0,0,0,.25);
}
.elev-pt b{display:block; font-family:var(--display); font-weight:400; font-size:.78rem; letter-spacing:.08em; color:#fff; opacity:.85}
.elev-pt span{display:block; font-size:.8rem; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.6)}
.pano__more{margin-top:clamp(1.4rem,2.5vw,2rem)}


.still{position:relative; margin-top:clamp(2rem,4vw,3rem)}
figure.still__img{position:relative; aspect-ratio:3/1; overflow:hidden; background:#101113}
.still__img img{width:100%; height:100%; object-fit:cover; object-position:22% 60%; filter:grayscale(1)}
figure.still__img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(10,10,11,.15) 0%, rgba(10,10,11,.55) 42%, rgba(10,10,11,.82) 100%);
}

.beam{position:absolute; left:0; right:0; top:46%; height:2px; pointer-events:none; overflow:visible}
.beam__p{fill:none; stroke:var(--lamp); stroke-width:1.15; vector-effect:non-scaling-stroke; opacity:.42; filter:blur(.2px)}
.figures{
  position:absolute; z-index:2; right:clamp(1rem,4vw,4.5rem); top:50%; transform:translateY(-50%);
  display:flex; align-items:flex-start;
}
.fig{padding-inline:clamp(.85rem,2vw,2.1rem)}
.fig + .fig{border-left:1px solid rgba(236,234,229,.24)}
.fig b{
  display:block; font-family:var(--display); font-weight:200;
  font-size:clamp(2.4rem,5.4vw,4.6rem); line-height:.9; letter-spacing:-.02em; color:#fff;
}
.fig b i{font-style:normal; font-size:.36em; letter-spacing:.02em; margin-left:.12em; font-weight:300}
.fig span{display:block; margin-top:.45rem; font-size:.72rem; letter-spacing:.11em; color:#b6b5b2}


.prep{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(1.75rem,4vw,4.5rem); align-items:start; margin-top:clamp(1.75rem,3.5vw,3rem)}
.rows{border-top:1px solid var(--bone-line)}
.row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(1rem,2.5vw,2.2rem);
  padding:clamp(1.05rem,2vw,1.55rem) clamp(.5rem,1.4vw,1.1rem);
  border-bottom:1px solid var(--bone-line); text-decoration:none;
  transition:background var(--t-fast) var(--ease);
}
.row:hover,.row:focus-visible{background:rgba(26,26,28,.045)}
.row__n{font-family:var(--display); font-size:.92rem; letter-spacing:.06em; color:var(--fg-light-dim)}
.row__t{font-size:clamp(1rem,.6vw + .9rem,1.22rem); color:var(--fg-light)}
.row__a{display:inline-block; transition:transform var(--t-mid) var(--ease); color:var(--fg-light-dim)}
.row:hover .row__a,.row:focus-visible .row__a{transform:translateX(6px); color:var(--fg-light)}
.prep__aside figure{margin:0}
.prep__aside img{aspect-ratio:5/6; width:100%; object-fit:cover; filter:grayscale(1) contrast(1.03)}
.prep__cap{margin-top:.95rem; font-size:.8rem; line-height:1.5; color:var(--fg-light-dim); max-width:22ch}


.reports{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); align-items:stretch; gap:0}
.reports__media{position:relative; min-height:clamp(20rem,44vw,34rem); background:#101113}
.reports__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%; filter:grayscale(1)}
.reports__body{padding:clamp(2rem,4.5vw,4.5rem); display:flex; flex-direction:column; justify-content:center; gap:clamp(1rem,2vw,1.5rem)}
.reports__body h2{font-size:clamp(1.7rem,2.9vw,2.7rem); line-height:1.07; max-width:33ch}
.years{display:flex; align-items:center; gap:.2rem; margin-top:.4rem}
.years button{
  appearance:none; background:none; border:0; cursor:pointer; font-family:var(--display);
  font-size:.95rem; letter-spacing:.05em; color:var(--grey-dim); padding:.35rem .55rem;
  transition:color var(--t-fast) var(--ease);
}
.years button:hover{color:var(--fg-dark)}
.years button[aria-current="true"]{color:var(--fg-dark); border-bottom:1px solid var(--lamp)}
.years .sep{color:#4a4a4d; font-size:.8rem}


.finale{background:var(--bone); color:var(--fg-light); padding-block:clamp(2.75rem,5.5vw,5rem)}
.finale__in{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(1.25rem,3vw,3rem); align-items:center}
.finale h2{font-size:clamp(1.5rem,2.85vw,2.55rem); line-height:1.1; max-width:56ch}
.finale__meta{margin-top:.7rem; font-size:.72rem; letter-spacing:.08em; color:var(--fg-light-dim)}


.ftr{background:var(--ink); border-top:1px solid var(--hair-dark); padding-block:clamp(1.75rem,3vw,2.5rem)}
.ftr__in{display:flex; align-items:center; gap:clamp(1rem,3vw,3rem); flex-wrap:wrap}
.ftr__id{display:flex; align-items:baseline; gap:.85rem}
.ftr__id b{font-family:var(--display); font-weight:400; font-size:1.25rem; letter-spacing:-.02em}
.ftr__id span{font-size:.72rem; color:var(--grey-dim)}
.ftr__nav{margin-left:auto; display:flex; align-items:center; gap:clamp(.8rem,2vw,1.6rem); flex-wrap:wrap}
.ftr__nav a{text-decoration:none; font-size:.76rem; color:var(--fg-dark-dim); transition:color var(--t-fast) var(--ease)}
.ftr__nav a:hover{color:var(--fg-dark)}
.ftr__off{padding-left:clamp(.8rem,2vw,1.6rem); border-left:1px solid var(--hair-dark); font-size:.76rem; color:var(--grey-dim)}
span.ftr__off a{color:var(--fg-dark-dim); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em}
span.ftr__off a:hover{color:var(--fg-dark); text-decoration-thickness:2px}


@media (prefers-reduced-motion:no-preference){
  .js .r-up{opacity:0; transform:translateY(18px)}
  .js .r-up.is-in{opacity:1; transform:none; transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease)}
  .js .r-up[data-d="1"].is-in{transition-delay:90ms}
  .js .r-up[data-d="2"].is-in{transition-delay:180ms}
  .js .r-up[data-d="3"].is-in{transition-delay:270ms}

  
  .js .hero h1 .ln > span{transform:translateY(102%)}
  .js .hero.is-lit h1 .ln > span{
    transform:none;
    transition:transform 900ms var(--ease);
  }
  .js .hero.is-lit h1 .ln:nth-child(2) > span{transition-delay:110ms}
  .js .hero.is-lit h1 .ln:nth-child(3) > span{transition-delay:220ms}

  .js .hero__media img{animation:slowzoom 26s var(--ease) forwards}
  @keyframes slowzoom{from{transform:scale(1)}to{transform:scale(1.032)}}

  .js .hero.is-lit .nightline__lit{transform:scaleX(1); transition:transform 2200ms var(--ease) 600ms}

  
  .js .elev__path,.js .elev__shadow,.js .beam__p{stroke-dasharray:var(--len); stroke-dashoffset:var(--len)}
  .js .is-in .elev__path,.js .is-in .elev__shadow,.js .is-in .beam__p{
    stroke-dashoffset:0; transition:stroke-dashoffset 2600ms var(--ease)
  }
  .js .elev-pt{opacity:0; transform:translate(-50%,-100%) translateY(6px)}
  .js .is-in .elev-pt{opacity:1; transform:translate(-50%,-100%); transition:opacity 700ms var(--ease), transform 700ms var(--ease)}
  .js .is-in .elev-pt:nth-of-type(1){transition-delay:700ms}
  .js .is-in .elev-pt:nth-of-type(2){transition-delay:1150ms}
  .js .is-in .elev-pt:nth-of-type(3){transition-delay:1600ms}
  .js .is-in .elev-pt:nth-of-type(4){transition-delay:2050ms}

  .lamp-pulse{animation:lamp 7s ease-in-out infinite}
  @keyframes lamp{0%,100%{opacity:.34}50%{opacity:.5}}
}


@media (max-width:1080px){
  .sec-head{grid-template-columns:1fr; align-items:start}
  .prep{grid-template-columns:1fr}
  .prep__aside{order:-1}
  .prep__aside img{aspect-ratio:16/9}
  .prep__cap{max-width:none}
  .reports{grid-template-columns:1fr}
  .reports__media{min-height:clamp(15rem,58vw,24rem)}
  .figures{position:static; transform:none; margin-top:1.5rem; justify-content:flex-start}
  figure.still__img{aspect-ratio:16/10}
  figure.still__img::after{background:linear-gradient(to top, rgba(10,10,11,.7) 0%, rgba(10,10,11,.2) 60%)}
  .beam{top:60%}
}
@media (max-width:820px){
  :root{--header-h:64px}
  .nav,.btn-ghost{display:none}
  .brand__tag{display:none}
  .burger{
    display:inline-flex; align-items:center; gap:.55rem; margin-left:auto;
    appearance:none; background:none; border:0; color:var(--fg-dark); cursor:pointer;
    font-family:var(--text); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
    padding:.5rem 0;
  }
  .burger__glyph{display:block; width:22px; height:7px; border-top:1px solid currentColor; border-bottom:1px solid currentColor}
  body.menu-open{overflow:hidden}
  .sheet{
    position:fixed; inset:0; z-index:60; background:rgba(9,9,10,.985);
    display:flex; flex-direction:column; padding:var(--gut);
    opacity:0; visibility:hidden; transition:opacity var(--t-mid) var(--ease), visibility var(--t-mid)
  }
  .sheet[hidden]{display:none}
  .sheet.is-open{opacity:1; visibility:visible}
  .sheet__close{
    align-self:flex-end; appearance:none; background:none; border:0; color:var(--fg-dark); cursor:pointer;
    font-family:var(--text); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; padding:.5rem 0;
  }
  .sheet ul{margin-top:auto; margin-bottom:auto; display:grid; gap:.35rem}
  .sheet a{
    text-decoration:none; font-family:var(--display); font-weight:300;
    font-size:clamp(2rem,11vw,3.2rem); line-height:1.14; letter-spacing:-.01em;
  }
  .sheet__foot{font-size:.72rem; color:var(--grey-dim)}

  .hero{min-height:auto}
  .hero__media img{object-position:70% 50%}
  .hero__in{padding-top:calc(var(--header-h) + 2.25rem); padding-bottom:1.5rem}
  .hero h1{font-size:clamp(2.35rem,10.5vw,3.6rem); max-width:none}
  .hero__numeral{left:auto; right:-2vw; top:auto; bottom:34%; font-size:clamp(11rem,54vw,20rem); opacity:.075}
  .hero__note{text-align:left}
  .nightline{margin-inline:calc(var(--gut) * -1); padding-inline:var(--gut); overflow-x:auto; scrollbar-width:none}
  .nightline::-webkit-scrollbar{display:none}
  .nightline__marks{min-width:32rem}
  .nightline__track{min-width:32rem}
  figure.pano__img{aspect-ratio:4/3}
  .elev-pt b{font-size:.68rem}
  .elev-pt span{font-size:.7rem}
  .fig b{font-size:clamp(2rem,12vw,3rem)}
  .finale__in{grid-template-columns:1fr}
  .ftr__nav{margin-left:0; width:100%}
}
@media (max-width:520px){
  .figures{flex-wrap:wrap; gap:1rem 0}
  .fig{padding-inline:0; padding-right:1.1rem}
  .fig + .fig{padding-left:1.1rem}
  .elev-pt{padding-bottom:1.05rem}
  .elev-pt b{font-size:.62rem}
  .elev-pt span{font-size:.64rem; max-width:8rem; white-space:normal; line-height:1.25}
}


@media (max-width:900px){
  .burger__glyph{
    position:relative; display:block; width:22px; height:1px; border:0;
    background:currentColor; overflow:visible;
    transition:background .18s var(--ease);
  }
  .burger__glyph::before,
  .burger__glyph::after{
    content:''; position:absolute; left:0; width:22px; height:1px;
    background:currentColor; transition:transform .22s var(--ease);
  }
  .burger__glyph::before{top:-6px}
  .burger__glyph::after{top:6px}

  .burger[aria-expanded="true"] .burger__glyph{background:transparent}
  .burger[aria-expanded="true"] .burger__glyph::before{transform:translateY(6px) rotate(45deg)}
  .burger[aria-expanded="true"] .burger__glyph::after{transform:translateY(-6px) rotate(-45deg)}

  
  .burger[aria-expanded="true"] .burger__lbl{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap;
  }

  
  body.menu-open .hdr{z-index:70}
  body.menu-open .sheet__close{display:none}
}
@media (prefers-reduced-motion:reduce){
  .burger__glyph,.burger__glyph::before,.burger__glyph::after{transition:none}
}


@media (max-width:900px){
  .burger{
    position:relative;                 
    align-items:center; gap:.55rem; margin-left:auto;
    appearance:none; background:none; border:0; color:var(--fg-dark); cursor:pointer;
    font-family:var(--text); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
    padding:.5rem 0;
  }
  body.menu-open{overflow:hidden}
  .sheet{
    position:fixed; inset:0; z-index:60; background:rgba(9,9,10,.985);
    display:flex; flex-direction:column; padding:var(--gut);
    opacity:0; visibility:hidden;
    transition:opacity var(--t-mid) var(--ease), visibility var(--t-mid);
  }
  .sheet[hidden]{display:none}
  .sheet.is-open{opacity:1; visibility:visible}
  .sheet__close{
    align-self:flex-end; appearance:none; background:none; border:0; color:var(--fg-dark); cursor:pointer;
    font-family:var(--text); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; padding:.5rem 0;
  }
  .sheet ul{margin-top:auto; margin-bottom:auto; display:grid; gap:.35rem}
  .sheet a{
    text-decoration:none; font-family:var(--display); font-weight:300;
    font-size:clamp(2rem,11vw,3.2rem); line-height:1.14; letter-spacing:-.01em;
  }
}