/* ════════════════════════════════════════════════════════
   Layout Primitives
   ════════════════════════════════════════════════════════ */

/* View system — single-page app routing */
.view{display:none}
.view.active{display:block}
.view-stack.active{display:flex;flex-direction:column;min-height:100vh}

/* Section primitives */
.sec{padding:var(--s-8) 0}
.sec-sm{padding:var(--s-7) 0}
.sec-head{
  text-align:center;
  margin:0 auto var(--s-7);
  max-width:640px;
  padding:0 var(--s-6);
}

.wrap{
  max-width:1160px;
  margin:0 auto;
  padding:0 var(--s-6);
}
.wrap-narrow{
  max-width:820px;
  margin:0 auto;
  padding:0 var(--s-6);
}

/* Grids */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}

/* Public navigation */
.pub-nav{
  background:var(--ink);
  padding:var(--s-4) var(--s-6);
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:100;
  border-bottom:.5px solid var(--line-d);
}
.pub-nav-logo{color:#fff;font-weight:800;font-size:1.0625rem;letter-spacing:-.03em}
.pub-nav-logo span{color:var(--cyan)}
.pub-nav-links{display:flex;gap:1.5rem;align-items:center}
.pub-nav-links a{font-size:.8125rem;font-weight:500;color:rgba(255,255,255,.55);transition:color .2s}
.pub-nav-links a:hover{color:#fff}

/* Public footer */
.pub-footer{
  background:var(--ink);
  padding:var(--s-7) var(--s-6);
  text-align:center;
  color:rgba(255,255,255,.3);
  font-size:.75rem;
  line-height:1.7;
}

/* Detail nav */
.det-nav{
  background:#fff;
  border-bottom:.5px solid var(--bd);
  padding:.875rem var(--s-6);
  display:flex;
  align-items:center;
  gap:var(--s-4);
  position:sticky;
  top:0;
  z-index:100;
}