/* ============================================================
   MYSTIQUE COMPANIONS — Concept deck navigation
   Shared review chrome, loaded by all six concept pages.

   Deliberately neutral: a system typeface and its own dark palette,
   so it reads as a tool for moving through the deck rather than as
   part of any one concept's design. It carries the brand gold and
   nothing else. Loaded last, so its body padding wins.
   ============================================================ */

:root{
  --cnav-h: 3.4rem;
  --cnav-gold: #D6B774;
  --cnav-ink: #14110D;
  --cnav-text: rgba(241,234,221,.72);
}

/* Reserve the strip so the bar never sits on top of the footer, and
   keep in-page anchors from landing underneath it. */
body{ padding-bottom: var(--cnav-h); }
html{ scroll-padding-bottom: calc(var(--cnav-h) + 1rem); }

/* The index embeds every concept in an iframe. The bar is review chrome
   for the full-page view, so it is stamped out before first paint there
   rather than flashing and then hiding. */
html[data-framed] .cnav{ display: none; }
html[data-framed] body{ padding-bottom: 0; }

.cnav{
  position: fixed;
  inset: auto 0 0 0;
  z-index: 82;                       /* under drawers (90) and scrims (85) */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .5rem clamp(.75rem, 2vw, 2rem);
  min-height: var(--cnav-h);
  padding: .55rem clamp(.85rem, 2.5vw, 2.2rem);
  background: rgba(20, 17, 13, .93);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border-top: 1px solid rgba(214, 183, 116, .3);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--cnav-text);
}
.cnav a{
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  transition: color .35s cubic-bezier(.25,.8,.3,1);
}
.cnav a:hover{ color: var(--cnav-gold); }
.cnav a:focus-visible{
  outline: 1px solid var(--cnav-gold);
  outline-offset: 4px;
  color: var(--cnav-gold);
}
.cnav svg{ width: .72em; height: .72em; flex: 0 0 auto; fill: currentColor; }
/* "(previous concept)" / "(next concept)" — spoken, never shown, so the
   two pager links do not both read as a bare name out of context. */
.cnav__vh{
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---- Back to the index ---- */
.cnav__home{ justify-self: start; }
.cnav__home svg{ transition: transform .35s cubic-bezier(.25,.8,.3,1); }
.cnav__home:hover svg{ transform: translateX(-.25em); }

/* ---- Where you are ---- */
.cnav__now{
  justify-self: center;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: .7em;
  text-align: center;
}
.cnav__no{ color: var(--cnav-gold); font-variant-numeric: tabular-nums; }
.cnav__name{ color: #F5EFE3; font-weight: 700; letter-spacing: .16em; }
.cnav__tag{ color: rgba(241,234,221,.45); letter-spacing: .11em; }

/* ---- Previous / next concept ---- */
.cnav__pager{
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2.4vw, 2rem);
}
.cnav__prev:hover svg{ transform: translateX(-.25em); }
.cnav__next:hover svg{ transform: translateX(.25em); }
.cnav__pager svg{ transition: transform .35s cubic-bezier(.25,.8,.3,1); }

/* ============================================================
   NARROW SCREENS
   Two rows: the current concept on top, the controls beneath it,
   so nothing truncates and every target stays comfortably tappable.
   ============================================================ */
@media (max-width: 46rem){
  :root{ --cnav-h: 4.6rem; }
  .cnav{
    grid-template-columns: auto 1fr;
    grid-template-areas: "now now" "home pager";
    gap: .45rem .75rem;
    padding-block: .5rem .6rem;
    font-size: .625rem;
    letter-spacing: .1em;
  }
  .cnav__now{ grid-area: now; justify-self: center; }
  .cnav__home{ grid-area: home; }
  .cnav__pager{ grid-area: pager; }
  .cnav__tag{ display: none; }
}

/* Very small phones: the concept name alone carries the position. */
@media (max-width: 24rem){
  .cnav__homeLabel{
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* PHONE IN LANDSCAPE — a short screen cannot spare two rows, so the bar
   goes back to one line and drops the tagline. */
@media (orientation: landscape) and (max-height: 34rem){
  :root{ --cnav-h: 2.8rem; }
  .cnav{
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: none;
    padding-block: .4rem;
    font-size: .6rem;
  }
  .cnav__now{ grid-area: auto; }
  .cnav__home{ grid-area: auto; }
  .cnav__pager{ grid-area: auto; }
  .cnav__tag{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .cnav a, .cnav svg{ transition: none; }
}