/* Cyberdelia canonical site shell — 2026-08-24
   Structural UI rules only. Section themes may change atmosphere, not masthead geometry or core scale. */

:root{
  --shell-max:1180px;
  --shell-gutter:clamp(.75rem,2.2vw,1.5rem);
  --shell-header-h:72px;
  --shell-copy:900px;
}

/* One horizontal geometry across every room. */
.shell{
  width:min(calc(100% - (var(--shell-gutter) * 2)),var(--shell-max))!important;
  margin-inline:auto!important;
}
.narrow{max-width:var(--shell-copy)!important}

/* Canonical masthead. */
.site-header{
  position:sticky!important;
  top:0!important;
  z-index:80!important;
  min-height:var(--shell-header-h)!important;
  border-bottom:1px solid rgba(167,190,255,.16)!important;
  background:rgba(3,5,10,.94)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  box-shadow:0 10px 34px rgba(0,0,0,.22)!important;
}
.site-header .header-inner{
  min-height:var(--shell-header-h)!important;
  padding-block:.55rem!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:1.25rem!important;
}
.site-header .brand{
  display:flex!important;
  align-items:center!important;
  gap:.78rem!important;
  min-width:max-content!important;
  text-decoration:none!important;
}
.site-header .brand-mark{
  width:46px!important;
  height:46px!important;
  flex:0 0 46px!important;
  display:block!important;
  border:0!important;
  border-radius:0!important;
  clip-path:none!important;
  box-shadow:none!important;
  overflow:hidden!important;
  padding:0!important;
  color:transparent!important;
  font-size:0!important;
  background:url('/assets/cyberdelia-mark-header.svg?v=2') center/contain no-repeat!important;
}
.site-header .brand-mark>img,
.site-header .brand-mark>svg,
.site-header .brand-mark .brand-logo,
.site-header .brand-mark .brand-logo-raster{display:none!important}
.site-header .brand-copy{
  display:grid!important;
  gap:.25rem!important;
  line-height:1!important;
}
.site-header .brand-copy strong{
  font-size:.78rem!important;
  letter-spacing:.15em!important;
  white-space:nowrap!important;
  overflow-wrap:normal!important;
}
.site-header .brand-copy small{
  font:600 .56rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;
  color:var(--dim)!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  overflow-wrap:normal!important;
}
.site-header .nav{
  display:flex!important;
  align-items:center!important;
  gap:.9rem!important;
  min-width:0!important;
  overflow-x:auto!important;
  scrollbar-width:none!important;
  overscroll-behavior-inline:contain!important;
  padding:.2rem 0!important;
}
.site-header .nav::-webkit-scrollbar{display:none!important}
.site-header .nav a{
  flex:0 0 auto!important;
  white-space:nowrap!important;
  text-decoration:none!important;
  color:var(--muted)!important;
  font:700 .66rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;
  text-transform:uppercase!important;
  letter-spacing:.085em!important;
}
.site-header .nav a:hover,
.site-header .nav a[aria-current="page"]{color:var(--cyan)!important}
.site-header .nav a.nav-store{
  color:var(--lime)!important;
  border:1px solid rgba(183,255,85,.25)!important;
  padding:.48rem .6rem!important;
}

/* Unified page scale. The homepage may remain more theatrical. */
.page-hero{
  padding-block:clamp(4.75rem,8vw,7.25rem)!important;
}
.page-hero h1{
  font-size:clamp(3.4rem,7.5vw,6.7rem)!important;
  line-height:.88!important;
  letter-spacing:-.055em!important;
  max-width:15ch!important;
}
.page-hero .lede{
  max-width:780px!important;
  margin-top:1.5rem!important;
  font-size:clamp(1.05rem,1.7vw,1.32rem)!important;
  line-height:1.55!important;
}
.section{
  padding-block:clamp(4.25rem,6.5vw,6.25rem)!important;
}
.section-head{margin-bottom:2rem!important}
.section-head h2,
.lab-grid h2,
.origin-grid h2,
.channel-article h2,
.prose-card h2,
.crew-profile h2,
.style-sample h2{
  font-size:clamp(2rem,4.2vw,3.75rem)!important;
  line-height:1!important;
  letter-spacing:-.04em!important;
}
.prose-column{max-width:var(--shell-copy)!important}
.prose-card p{font-size:1rem!important;line-height:1.68!important}
.dispatch-card h3{font-size:clamp(1.18rem,2vw,1.4rem)!important}

/* Dense editorial surfaces: remove manufactured whitespace, preserve copy. */
.visual-card-grid,
.dispatch-grid,
.archive-grid,
.drop-grid,
.ops-grid,
.case-grid,
.board-grid,
.crew-rail,
.night-stack{
  gap:.7rem!important;
}

.dispatch-card,
.archive-card,
.drop-card,
.ops-card,
.case-panel,
.pin-note{
  min-height:0!important;
}

.dispatch-card{
  padding:1rem 1.05rem!important;
}
.dispatch-card h3{
  margin:.7rem 0 .45rem!important;
}
.dispatch-card p{
  margin:0!important;
}
.dispatch-card b{
  margin-top:.85rem!important;
  padding-top:0!important;
}

.visual-card{
  grid-template-rows:125px 1fr!important;
}
.visual-card div{
  padding:.9rem!important;
}
.visual-card h3{
  margin:.55rem 0 .35rem!important;
}

.archive-card{
  padding:1.15rem 1.2rem!important;
}
.archive-card h2{
  margin:.2rem 0 .7rem!important;
}
.archive-card blockquote{
  margin:1rem 0 0!important;
  padding:.75rem .9rem!important;
}

.drop-card{
  padding:1rem!important;
}
.drop-card h2{
  margin:.65rem 0 .45rem!important;
}

.ops-card{
  padding:1rem!important;
}
.ops-card h2{
  margin:.7rem 0 .45rem!important;
}
.ops-card .status{
  padding:.3rem .45rem!important;
}

.pin-note{
  padding:1rem!important;
}
.pin-note h2{
  margin:.7rem 0 .45rem!important;
}
.pin-note small{
  margin-top:.7rem!important;
}

.case-panel{
  padding:1rem!important;
}
.case-panel h3{
  margin:.55rem 0 .4rem!important;
}

.crew-tile{
  padding-bottom:.75rem!important;
}
.crew-tile img{
  aspect-ratio:4/4.45!important;
}
.crew-tile span{
  margin-top:.7rem!important;
}
.crew-tile h3{
  margin-top:.4rem!important;
}

.prose-card{
  padding:clamp(1rem,2vw,1.4rem)!important;
}
.prose-card blockquote{
  margin:1rem 0!important;
  padding:.8rem 1rem!important;
}

.retro-panel{
  min-height:190px!important;
  padding:1rem!important;
}
.lab-window div{
  min-height:66px!important;
}
.lab-window p{
  padding:.75rem .9rem!important;
}

/* Make media obey the same box model rather than blowing up old layouts. */
main img,main video,main iframe{max-width:100%}

/* Footer shares the same structural rhythm. */
.site-footer .footer-grid{
  grid-template-columns:minmax(190px,.75fr) minmax(0,2fr) max-content!important;
  align-items:start!important;
  gap:1.25rem 2rem!important;
}
.site-footer .footer-links{
  min-width:0!important;
  display:flex!important;
  flex-wrap:wrap!important;
  gap:.6rem 1rem!important;
}
.site-footer .footer-status{white-space:nowrap!important;justify-self:end!important}

@media(max-width:1050px){
  .site-header .header-inner{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:.45rem!important;
    padding-block:.55rem .65rem!important;
  }
  .site-header .nav{width:100%!important}
  .site-footer .footer-grid{grid-template-columns:1fr!important}
  .site-footer .footer-status{justify-self:start!important}
}

@media(max-width:680px){
  :root{--shell-gutter:.65rem;--shell-header-h:64px}
  .site-header .brand-mark{
    width:38px!important;
    height:38px!important;
    flex-basis:38px!important;
  }
  .site-header .brand-copy strong{font-size:.69rem!important;letter-spacing:.12em!important}
  .site-header .brand-copy small{font-size:.5rem!important;letter-spacing:.1em!important}
  .site-header .nav{gap:.8rem!important}
  .site-header .nav a{font-size:.62rem!important}
  .page-hero{padding-block:3.7rem!important}
  .page-hero h1{
    font-size:clamp(2.75rem,15vw,4.75rem)!important;
    max-width:none!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  .section{padding-block:3.7rem!important}
  .visual-card{grid-template-rows:105px 1fr!important}
}

@media(max-width:390px){
  .site-header .brand-copy small{display:none!important}
  .site-header .brand-mark{width:36px!important;height:36px!important;flex-basis:36px!important}
}