/* ==========================================================================
   Naavbharat demo chassis
   The only shared layer across the 14 sector drafts. It frames each draft as
   "a sheet from Naavbharat Design" without touching the draft's own design.
   Everything here is namespaced .nbx- so it can't collide with sector CSS.
   Requires the Bricolage Grotesque font (opsz,wdth,wght axes) in the page's
   Google Fonts link.
   ========================================================================== */

.nbx-bar, .nbx-close, .nbx-skip {
  --nbx-ink: #16204A;
  --nbx-ink-deep: #0F1736;
  --nbx-paper: #ECEDE8;
  --nbx-muted: #A9AFCB;
  --nbx-brick: #DC6A2A;
  --nbx-brick-hi: #E88148;
  font-family: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
.nbx-bar *, .nbx-close * { box-sizing: border-box; }

/* Skip link: first focusable element on every draft */
.nbx-skip {
  position: absolute; left: 12px; top: -64px; z-index: 1000;
  background: var(--nbx-brick); color: var(--nbx-ink);
  padding: 10px 16px; font-size: 15px; font-weight: 600; text-decoration: none;
}
.nbx-skip:focus { top: 8px; }

/* ─── Top strip (normal flow, 44px; the draft's own nav sits below it) ─── */
.nbx-bar {
  position: relative; z-index: 900;
  height: 44px;
  display: flex; align-items: center; gap: 16px;
  padding: 0 clamp(12px, 3vw, 32px);
  background: var(--nbx-ink); color: var(--nbx-paper);
  font-size: 14px; line-height: 1.2;
  font-variation-settings: "opsz" 14, "wdth" 90;
}
.nbx-bar a { color: inherit; text-decoration: none; }
.nbx-bar__home { display: flex; align-items: center; gap: 10px; margin-right: auto; min-width: 0; }
.nbx-bar__home img { width: 34px; height: auto; flex: none; }
.nbx-bar__studio { font-weight: 650; white-space: nowrap; }
.nbx-bar__sheet { color: var(--nbx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variation-settings: "opsz" 12, "wdth" 78; }
.nbx-bar__all { color: var(--nbx-muted); white-space: nowrap; padding: 8px 4px; transition: color .2s; }
.nbx-bar__all:hover { color: var(--nbx-paper); }
.nbx-bar__cta {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 2px;
  background: var(--nbx-brick); color: var(--nbx-ink) !important; font-weight: 650; white-space: nowrap;
  transition: background-color .2s;
}
.nbx-bar__cta:hover { background: var(--nbx-brick-hi); }
.nbx-bar :focus-visible, .nbx-close :focus-visible { outline: 2px solid var(--nbx-brick); outline-offset: 3px; }

@media (max-width: 640px) {
  .nbx-bar__studio, .nbx-bar__all { display: none; }
  .nbx-bar__sheet { font-size: 13px; }
}

/* ─── Closing band: the last element on every draft page ─── */
.nbx-close {
  background: var(--nbx-ink); color: var(--nbx-paper);
  padding: clamp(56px, 8vw, 96px) clamp(16px, 4vw, 56px);
}
.nbx-close__inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px 56px; align-items: end;
}
.nbx-close__label { color: var(--nbx-muted); font-size: 14px; font-variation-settings: "opsz" 12, "wdth" 78; margin: 0 0 12px; }
.nbx-close__title {
  margin: 0; font-size: clamp(30px, 4.4vw, 56px); line-height: .98; letter-spacing: -0.02em; font-weight: 720;
  font-variation-settings: "opsz" 96, "wdth" 78; text-wrap: balance;
}
.nbx-close__body { margin: 16px 0 0; color: #C9CDE0; font-size: 17px; line-height: 1.55; max-width: 34rem; }
.nbx-close__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.nbx-close__btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  border-radius: 2px; font-size: 16px; font-weight: 620; text-decoration: none; border: 1px solid transparent;
  font-variation-settings: "opsz" 14, "wdth" 90; transition: background-color .2s, border-color .2s;
}
.nbx-close__btn--primary { background: var(--nbx-brick); color: var(--nbx-ink); }
.nbx-close__btn--primary:hover { background: var(--nbx-brick-hi); }
.nbx-close__btn--ghost { color: var(--nbx-paper); border-color: rgba(236,237,232,.45); }
.nbx-close__btn--ghost:hover { border-color: var(--nbx-paper); }

@media (max-width: 800px) {
  .nbx-close__inner { grid-template-columns: 1fr; }
}