/* ============================================================================
   Aden — the shell: header, drawer, footer, the horizontal spine, and the
   vertical page frame every sub-page wears.

   One shell. Every page carries the identical header and the identical drawer;
   no page grows a nav of its own. (shared spec 10a rules 1 and 2)
   ========================================================================= */

/* ---------------------------------------------------------------- header -- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 0 clamp(var(--s-4), 2.4vw, var(--s-7));
  background: linear-gradient(180deg, rgba(16, 22, 27, .80) 0%, rgba(16, 22, 27, .36) 68%, transparent 100%);
  backdrop-filter: blur(2px);
}

.brand { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }

/* The mark is artwork: img/wordmark-blackview.webp, the Blackview logo with
   its studio plate keyed out (assets/aden/key-logo.py did that, from
   assets/aden/logo-Blackview.jpg). It is 900x247 — wider and shorter than the
   Aden mark it replaces, because BLACKVIEW is nine letters where ADEN was
   four — so it is sized on width here rather than height, or the bar would
   have to grow to keep the type the same size. */
.brand img {
  height: auto;
  width: 200px;
  filter: drop-shadow(0 2px 6px rgba(10, 15, 19, .8));
  transition: filter .2s var(--ease);
}
.brand:hover img { filter: drop-shadow(0 2px 10px rgba(255, 240, 181, .35)); }
@media (max-width: 1099px) { .brand img { width: 172px; } }
@media (max-width: 899px)  { .brand img { width: 148px; } }
@media (max-width: 480px)  { .brand img { width: 124px; } }

.header__spacer { flex: 1 1 auto; }

.header__cluster { display: flex; align-items: center; gap: var(--s-2); flex: 0 0 auto; }

/* language switcher ------------------------------------------------------- */
.lang { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.lang__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  padding: .4rem .5rem;
  cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.lang__btn:hover { background: rgba(10, 15, 19, .6); color: var(--paper); }
.lang__btn[aria-pressed="true"] { background: var(--cream); color: var(--ink); }

/* account control — present at every width; changes only with session state */
.acct {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: .34rem .6rem .34rem .42rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .07);
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .16s var(--ease), border-color .16s var(--ease);
}
.acct:hover { background: rgba(10, 15, 19, .62); border-color: var(--line-strong); color: var(--paper); }
.acct svg { width: 15px; height: 15px; flex: 0 0 auto; }
@media (max-width: 660px) { .acct__label { display: none; } }

/* burger ------------------------------------------------------------------ */
.burger {
  appearance: none;
  width: 40px; height: 34px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .07);
  cursor: pointer;
  transition: background .16s var(--ease), border-color .16s var(--ease);
}
.burger:hover { background: rgba(10, 15, 19, .62); border-color: var(--line-strong); }
.burger span { display: block; width: 18px; height: 1.5px; background: var(--paper); }
.burger span + span { margin-top: 4px; }

/* ---------------------------------------------------------------- drawer -- */
.drawer-scrim {
  position: fixed; inset: 0;
  z-index: var(--z-drawer);
  background: rgba(12, 17, 21, .62);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s var(--ease);
}
.drawer-scrim[data-open="true"] { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: calc(var(--z-drawer) + 1);
  width: min(320px, 86vw);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(24, 31, 37, .97), rgba(19, 25, 30, .985));
  border-left: 1px solid var(--line);
  transform: translateX(101%);
  transition: transform .28s var(--ease);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
}
.drawer[data-open="true"] { transform: none; visibility: visible; }

.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line-soft);
}
.drawer__title {
  font-family: var(--font-display);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--text-dim);
}
.drawer__close {
  appearance: none; border: 0; background: transparent;
  color: var(--text-dim); cursor: pointer;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
}
.drawer__close:hover { background: rgba(10, 15, 19, .6); color: var(--paper); }
.drawer__close svg { width: 16px; height: 16px; }

.drawer__nav { padding: var(--s-3) 0; }

/* The nine entries. Same list, same order, every open, every width. */
.drawer__link {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%;
  padding: .78rem var(--s-5);
  border: 0; border-left: 2px solid transparent;
  background: transparent;
  color: var(--text-dim);
  font-size: var(--t-sm);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
/* Hover darkens the plate and lets the edge carry the highlight, so the label
   gains contrast rather than losing it. (shared spec 10a rule 5) */
.drawer__link:hover { background: rgba(10, 15, 19, .62); color: var(--paper); border-left-color: var(--cream-edge); }
.drawer__link[aria-current] { color: var(--cream); border-left-color: var(--cream); background: rgba(255, 240, 181, .07); }
.drawer__link svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: .78; }

.drawer__foot {
  margin-top: auto;
  padding: var(--s-5);
  border-top: 1px solid var(--line-soft);
  display: grid; gap: var(--s-3);
}
.drawer__who { font-size: var(--t-sm); color: var(--text-dim); }
.drawer__who strong { color: var(--gold-text); font-weight: 600; }

/* ---------------------------------------------------------------- footer -- */
.site-footer {
  /* A positioned .page-figure with z-index 0 paints above a static block, so
     the footer claims its own layer rather than letting the character plate
     wash over the legal links. */
  position: relative;
  z-index: 2;
  /* The warm grey band, darkened: white type on the raw --ground-hi end
     measures 3.0:1, which fails. The overlay takes it to 5.6:1 at the top and
     10:1 at the foot while keeping the band warm. */
  background: linear-gradient(180deg, rgba(20, 27, 32, .38), rgba(20, 27, 32, .58)),
              linear-gradient(180deg, var(--ground-hi), var(--ground));
  color: #ffffff;
  padding: var(--s-6) clamp(var(--s-4), 2.4vw, var(--s-7));
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.site-footer__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
  align-items: center;
  text-align: center;
}
@media (min-width: 900px) {
  .site-footer__inner { grid-template-columns: auto minmax(0, 1fr) auto; text-align: left; }
}
.ncsoft-lockup {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: .14em;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
.ncsoft-lockup svg { width: 20px; height: 20px; }
.site-footer__legal { font-size: var(--t-sm); line-height: 1.55; color: #ffffff; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); justify-content: center; }
@media (min-width: 900px) { .site-footer__links { justify-content: flex-end; } }
.site-footer__links a {
  color: #ffffff;
  font-family: var(--font-display);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .4);
  padding-bottom: 1px;
}
.site-footer__links a:hover { border-bottom-color: #ffffff; color: #ffffff; }
.social { display: flex; gap: var(--s-3); justify-content: center; }
@media (min-width: 900px) { .social { justify-content: flex-end; } }
.social a { color: #ffffff; opacity: .92; }
.social a:hover { opacity: 1; color: #ffffff; }
.social svg { width: 18px; height: 18px; }

/* ================================================================ spine ==== */
/* Home only. Three full-viewport panels that page sideways above 900 px and
   stack into an ordinary vertical scroll below it. */

/* Below the breakpoint the spine is an ordinary vertical document: block flow,
   no flex row, no scroller — and no scroll-snap. (site prompt 3) */
.spine { position: relative; display: block; width: 100%; }

.panel {
  position: relative;
  flex: 0 0 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--slate-lo);
  background-size: cover;
  background-position: center;
  overflow-x: hidden;
}
.panel::after {                      /* the panel-wide veil */
  content: "";
  position: absolute; inset: 0;
  background: var(--veil-panel);
  pointer-events: none;
}
.panel > * { position: relative; z-index: 1; }

.panel__body {
  flex: 1 1 auto;
  display: flex; flex-direction: column; justify-content: center;
  width: 100%;
  padding: calc(var(--header-h) + var(--s-6)) clamp(var(--s-4), 4vw, var(--s-9)) var(--s-7);
}

@media (min-width: 900px) {
  body.spine-page { height: 100vh; overflow: hidden; }
  .spine {
    display: flex;
    height: 100vh;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;   /* the spine's own paging — see NOTES.md */
    scrollbar-width: none;
  }
  .spine::-webkit-scrollbar { display: none; }
  .panel { scroll-snap-align: start; height: 100vh; overflow-y: auto; }
}

/* chevrons — thin, doubled, outline only */
.chevron {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: calc(var(--z-header) - 1);
  appearance: none;
  border: 0;
  background: transparent;
  padding: var(--s-3);
  cursor: pointer;
  color: var(--paper);
  opacity: .66;
  filter: drop-shadow(0 1px 4px rgba(10, 15, 19, .8));
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.chevron:hover:not(:disabled) { opacity: 1; }
.chevron--prev { left: clamp(var(--s-1), 1vw, var(--s-4)); }
.chevron--next { right: clamp(var(--s-1), 1vw, var(--s-4)); }
.chevron--prev:hover:not(:disabled) { transform: translate(-3px, -50%); }
.chevron--next:hover:not(:disabled) { transform: translate(3px, -50%); }
.chevron:disabled { opacity: .16; cursor: default; }
.chevron svg { width: clamp(28px, 3vw, 44px); height: clamp(44px, 5vw, 74px); }
@media (max-width: 899px) { .chevron { display: none; } }

/* panel indicator */
.spine-dots {
  position: fixed;
  left: 50%; bottom: var(--s-5);
  transform: translateX(-50%);
  z-index: calc(var(--z-header) - 1);
  display: flex; align-items: center; gap: var(--s-3);
  padding: .45rem .9rem;
  background: rgba(14, 20, 25, .55);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  backdrop-filter: blur(3px);
}
.spine-dots button {
  appearance: none; border: 0; background: transparent;
  display: flex; align-items: center; gap: .4rem;
  padding: .15rem .2rem;
  cursor: pointer;
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}
.spine-dots button::before {
  content: "";
  width: 6px; height: 6px;
  border: 1px solid currentColor;
  transform: rotate(45deg);
  transition: background .18s var(--ease);
}
.spine-dots button:hover { color: var(--paper); }
.spine-dots button[aria-current="true"] { color: var(--cream); }
.spine-dots button[aria-current="true"]::before { background: var(--cream); }
.spine-dots .dot-label { display: none; }
@media (min-width: 1100px) { .spine-dots .dot-label { display: inline; } }
@media (max-width: 899px) { .spine-dots { display: none; } }

/* ========================================================== vertical page == */
/* Sub-pages look like the same site as the home panels: the same plate, the
   same veil, the same lockup. No white document shell behind a dark front. */

.page {
  min-height: 100vh;
  display: flex; flex-direction: column;
  background-color: var(--slate-lo);
  background-image: linear-gradient(180deg, rgba(20, 27, 32, .58), rgba(20, 27, 32, .80)), var(--page-plate, none);
  background-size: cover, cover;
  background-position: center, center;
  background-attachment: scroll, fixed;
}
@media (max-width: 899px) { .page { background-attachment: scroll, scroll; } }

.page__body {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: calc(var(--header-h) + var(--s-7)) clamp(var(--s-4), 3vw, var(--s-6)) var(--s-8);
}

/* The column veil. Sized to the column, so the text bed is the same darkness
   whatever the page height. (site prompt 9) */
.column {
  background: var(--veil-column);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: clamp(var(--s-5), 3vw, var(--s-7));
  box-shadow: var(--shadow-tile);
}
.column + .column { margin-top: var(--s-5); }

/* Content reaches the column's edges. Only running prose gets a measure, and
   it gets it on the prose element — never on the container. (10a rule 4) */
.prose { max-width: 68ch; }
.prose--center { margin-inline: auto; }

/* ------------------------------------------------- drawer: the open move -- */
/* The drawer slides in as a panel; its contents arrive after it, one at a time,
   so the eye lands on the nav rather than on nine rows appearing at once. Each
   entry carries its place in the queue as --i, set where it is built, and the
   two account buttons are the last two — they are what the drawer is for when
   you are signed out, so they close the sequence rather than opening it.

   The animation is bound to [data-open="true"], so it replays on every open and
   is simply absent when the drawer is shut. */
@keyframes drawer-enter {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: none; }
}

.drawer[data-open="true"] .drawer__link,
.drawer[data-open="true"] .drawer__foot > * {
  /* backwards, so the entry holds its start frame through its own delay
     instead of flashing at full opacity first */
  animation: drawer-enter .40s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 36ms + 90ms);
}

/* The two account buttons get the site's cream sweep on top of the slide — the
   same gesture the Download control uses, fired once as they land. */
.drawer__cta { position: relative; overflow: hidden; }
.drawer[data-open="true"] .drawer__cta::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 34%, rgba(255, 255, 255, .55) 50%, transparent 66%);
  transform: translateX(-130%);
  pointer-events: none;
  animation: drawer-sheen .8s var(--ease) calc(var(--i, 0) * 36ms + 320ms) backwards;
}
.drawer__cta.btn--primary::after { background: linear-gradient(100deg, transparent 34%, rgba(255, 255, 255, .8) 50%, transparent 66%); }
@keyframes drawer-sheen {
  from { transform: translateX(-130%); }
  to   { transform: translateX(130%); }
}

@media (prefers-reduced-motion: reduce) {
  .drawer[data-open="true"] .drawer__cta::after { display: none; }
}

/* The header's account control, as a full-width block. Log in is the same
   destination in both places, so it is the same control in both places. */
.acct--block {
  display: flex;
  width: 100%;
  justify-content: center;
  padding: .58rem .8rem;
  font-size: var(--t-sm);
}

/* Register swaps its colours rather than fading them: a cream plate wipes in
   from the left, carrying its own ink copy of the label. Clipping the plate and
   its text together means every pixel of the sweep is either gold on dark or
   ink on cream — 8.4:1 either side, with no low-contrast moment in the middle
   the way a plate that wipes under a single label has. */
.drawer__cta--swap:hover,
.drawer__cta--swap:focus-visible {
  background: transparent;            /* the wipe is the fill */
  border-color: var(--cream);
  box-shadow: none;
}

.drawer__cta-fill {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  color: var(--ink);
  /* the label inside is centred in the same box as the one underneath, so the
     two land on exactly the same pixels */
  clip-path: inset(0 100% 0 0);
  transition: clip-path .4s var(--ease);
}
.drawer__cta--swap:hover .drawer__cta-fill,
.drawer__cta--swap:focus-visible .drawer__cta-fill { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  .drawer__cta-fill { transition: none; }
}