/* ==========================================================================
   Sensecast — page frame: nav, sections, page headers, footer
   ========================================================================== */

main,.foot{position:relative;z-index:1}

.wrap{
  max-width:1160px;
  margin-inline:auto;
  padding-inline:24px;
  position:relative;
  z-index:1;
}
.wrap-narrow{max-width:900px}

/* one source of section rhythm — do not re-declare padding-block elsewhere */
.section{padding-block:clamp(76px,10vw,136px)}
.section-tight{padding-block:clamp(52px,7vw,90px)}
/* first section after a page header — the header already supplied top space */
.section-flush{padding-top:clamp(8px,1.5vw,20px);padding-bottom:clamp(52px,7vw,90px)}

.rule{height:1px;background:linear-gradient(90deg,var(--line),transparent);border:0;margin:0}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.nav{
  position:sticky;
  top:0;
  z-index:40;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  background:rgba(6,10,18,.72);
  border-bottom:1px solid var(--line-soft);
}
.nav-in{
  max-width:1160px;
  margin-inline:auto;
  padding:13px 24px;
  display:flex;
  align-items:center;
  gap:16px;
}
.brand{
  display:flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
  margin-right:auto;
}
.brand img{width:30px;height:30px;border-radius:8px;border:1px solid var(--line)}
.brand span{
  font-family:var(--disp);
  font-weight:700;
  font-variation-settings:"wdth" 120;
  font-size:16.5px;
  letter-spacing:.005em;
  text-transform:uppercase;
}
.nav-links{display:flex;gap:26px}
.nav-links a{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--haze);
  text-decoration:none;
  transition:color .18s;
  position:relative;
}
.nav-links a:hover{color:var(--paper)}
.nav-links a[aria-current="page"]{color:var(--signal)}
.nav-links a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-4px;
  height:1px;
  background:var(--signal);
}

/* --------------------------------------------------------------------------
   Interior page header
   -------------------------------------------------------------------------- */

.page-head{padding-top:clamp(56px,7vw,86px);padding-bottom:clamp(30px,4vw,48px)}
.page-head .lede{max-width:62ch}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.foot{
  border-top:1px solid var(--line-soft);
  padding-block:44px;
  font-size:14px;
  color:var(--haze-dim);
}
.foot-top{
  display:flex;
  flex-wrap:wrap;
  gap:26px 40px;
  justify-content:space-between;
  align-items:flex-start;
}
.foot a{color:var(--haze);text-decoration:none}
.foot a:hover{color:var(--paper)}
.foot-brand p{margin:10px 0 0;max-width:34ch;font-size:13.5px}
.foot-cols{display:flex;flex-wrap:wrap;gap:44px}
.foot-col h4{
  margin:0 0 12px;
  font-family:var(--mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--haze-dim);
}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.foot-col a{font-size:14px}

.attrib{
  margin-top:30px;
  padding-top:22px;
  border-top:1px solid var(--line-soft);
  max-width:84ch;
  line-height:1.68;
  font-size:12.5px;
}
.copyright{
  margin:22px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  align-items:center;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--haze-dim);
}
.copyright b{color:var(--haze);font-weight:500}

@media(max-width:640px){
  .nav-links{display:none}
}