/* ==========================================================================
   ARKADE LOUNGE — Base
   Reset, document defaults, typography and layout primitives.
   Depends on tokens.css. Contains no component styling.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchored sections must clear the fixed header rather than hide beneath it. */
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* A page must never scroll sideways. Components that genuinely need width
     scroll inside their own container, never the document. */
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button { background: none; border: none; }

p,
h1,
h2,
h3,
h4,
h5,
h6 { overflow-wrap: break-word; }

ul[role='list'],
ol[role='list'] {
  list-style: none;
  padding: 0;
}

/* --------------------------------------------------------------------------
   2. TYPOGRAPHY
   Headings carry no colour of their own so a section can recolour them.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { text-wrap: pretty; }

a {
  color: var(--accent-text);
  text-decoration-color: color-mix(in srgb, var(--accent-text) 40%, transparent);
  text-underline-offset: 0.2em;
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}

a:hover {
  color: var(--purple-200);
  text-decoration-color: currentColor;
}

strong, b { font-weight: var(--fw-semi); color: var(--text); }

::selection {
  background: var(--accent-fill);
  color: var(--text-on-accent);
}

/* The display face. Blanka has no lowercase, so anything using it is
   uppercased; the fallback stack compensates with weight and tracking.

   Tracking is positive and generous. Blanka's letterforms are geometric
   stencils, and set tight they merge into a single band — legibility comes
   almost entirely from the gaps between them.

   line-height is loosened slightly too. Wide tracking on a tight leading
   makes a two-line heading look like a grid rather than a sentence. */
.display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

/* The largest type gets the most air, because at hero size a cramped gap is
   the first thing the eye catches. The trailing letter's tracking is trimmed
   so a centred heading stays optically centred rather than sitting slightly
   left of where it should. */
.display--hero {
  font-size: var(--fs-hero);
  letter-spacing: var(--tracking-hero);
}

.display--hero,
.page-hero__title,
.final-cta__title {
  margin-inline-end: calc(var(--tracking-hero) * -1);
}

/* Press Start 2P at any real size wrecks readability, so it is confined to
   short uppercase markers and never inherits a body size. */
.pixel {
  font-family: var(--font-pixel);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-pixel);
  line-height: 1.6;
  text-transform: uppercase;
}

/* The small tracked label that opens most sections. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent-text);
}

.eyebrow::before {
  content: '';
  inline-size: 1.75rem;
  block-size: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

.lede {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  color: var(--text-2);
  max-inline-size: var(--container-text);
}

.muted { color: var(--text-muted); }
.dim   { color: var(--text-dim); }

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

.container {
  inline-size: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}

.container--narrow { --container: var(--container-narrow); }

.section { padding-block: var(--section-y); }

.section--sunken {
  background: var(--bg-sunken);
  border-block: 1px solid var(--line-soft);
}

/* Vertical rhythm without margin collapsing surprises. */
.stack > * + * { margin-block-start: var(--flow, var(--sp-4)); }

/* Wraps to a new line rather than overflowing — used for tag and meta rows. */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap, var(--sp-3));
}

/* Auto-fitting grid. --min governs when it breaks, so no card grid needs a
   media query of its own. */
.grid-auto {
  display: grid;
  gap: var(--gap, var(--sp-5));
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 17rem), 100%), 1fr));
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-block-end: var(--sp-7);
}

.section-head__title { max-inline-size: 22ch; }

/* --------------------------------------------------------------------------
   4. ACCESSIBILITY
   -------------------------------------------------------------------------- */

.visually-hidden:not(:focus):not(:active) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* One focus treatment for the entire site. It is deliberately loud: a dark
   interface hides a subtle ring, and keyboard users lose their place. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  inset-block-start: var(--sp-2);
  inset-inline-start: var(--sp-2);
  z-index: var(--z-toast);
  padding: var(--sp-3) var(--sp-4);
  background: var(--accent-fill);
  color: var(--text-on-accent);
  font-weight: var(--fw-semi);
  border-radius: var(--r-md);
  transform: translateY(-150%);
  transition: transform var(--dur-fast) var(--ease-out);
}

.skip-link:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   5. CHROME
   -------------------------------------------------------------------------- */

@supports (scrollbar-color: red blue) {
  html {
    scrollbar-color: var(--surface-high) var(--surface-void);
    scrollbar-width: thin;
  }
}

hr {
  border: none;
  block-size: 1px;
  background: var(--line-soft);
}

/* --------------------------------------------------------------------------
   HIDDEN MEANS HIDDEN
   --------------------------------------------------------------------------
   The `hidden` attribute is styled by the browser as `display: none`, but
   that comes from the user-agent stylesheet and loses to any class rule that
   sets display — `.btn { display: inline-flex }` among them.

   That is not a tidiness point. A "Try another card" button, correctly marked
   hidden by script, appeared on a CONFIRMED payment: the customer had just
   paid and was invited to pay again. The server refused a second charge, so
   nothing was taken, but the invitation should never have been on the screen.

   !important is used deliberately and is the right tool here. There is no
   case in this codebase where something marked hidden should be visible, and
   leaving it to specificity means every future author has to remember this.
   -------------------------------------------------------------------------- */

[hidden] {
  display: none !important;
}