/* =========================================================
   NostalgiaNet — Layout (Responsive)
   Desktop-first, mobile optimized
   ========================================================= */

.page{
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: color-mix(in oklab, #000 25%, transparent);
  border-bottom: 1px solid var(--stroke);
}

.topbar__inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
}

.brand{
  display:flex; align-items:center; gap: 10px;
  font-weight: 700;
  letter-spacing: .2px;
}
.brand__logo{
  width: 30px; height: 30px;
  border-radius: 10px;
  background: var(--glass);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-1);
  display:grid; place-items:center;
}
.brand__logo img{ width: 18px; height: 18px; }

.hud{
  display:flex; align-items:center; gap: var(--s-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.shell{
  width: min(1240px, calc(100% - 2*var(--s-4)));
  margin: var(--s-5) auto;
  display:grid;
  grid-template-columns: 240px 1fr 320px;
  gap: var(--s-4);
}

@media (max-width: 1040px){
  .shell{ grid-template-columns: 240px 1fr; }
  .rightcol{ display:none; }
}
@media (max-width: 820px){
  .shell{ grid-template-columns: 1fr; }
  .leftcol{ order: 2; }
  .rightcol{ display:block; order: 3; }
}

.footer{
  border-top: 1px solid var(--stroke);
  padding: var(--s-4);
  background: color-mix(in oklab, #000 18%, transparent);
}

.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
@media (max-width: 720px){ .grid-2{ grid-template-columns: 1fr; } }