/* base.css — reset, typography, focus, accessibility modes */

@import url('../fonts/fonts.css');

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

* { margin: 0; }

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--void);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  font-weight: 400;
  min-height: 100vh;
  overflow-x: hidden;
}

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

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

/* ---------- typography ---------- */

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; text-wrap: balance; }

h1 { font-size: var(--size-h1); line-height: var(--leading-h1); letter-spacing: -.015em; }
h2 { font-size: var(--size-h2); line-height: var(--leading-h2); letter-spacing: -.01em; }
h3 { font-size: var(--size-h3); line-height: 1.2; }

/* long copy never centred, capped at a readable measure */
p { max-width: var(--measure); }

a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--ember); }

strong { font-weight: 700; }
em { font-family: var(--font-display); font-style: italic; font-weight: 300; }

.jk-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--size-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--dim);
}

.jk-arabic {
  font-family: var(--font-arabic);
  font-weight: 400;
}

/* ---------- focus ---------- */

:focus { outline: none; }

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: 2px;
}

/* keyboard users inside the drawer always see focus, even on mouse-focus */
.jk-drawer :focus {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ---------- skip link ---------- */

.jk-skip {
  position: absolute;
  top: -100px;
  left: var(--space-3);
  z-index: calc(var(--z-toast) + 1);
  background: var(--gold);
  color: var(--void);
  font-weight: 700;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-s);
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease);
}

.jk-skip:focus { top: var(--space-3); color: var(--void); }

/* ---------- scroll reveal ---------- */

.jk-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

.jk-reveal.is-in { opacity: 1; transform: none; }

/* ---------- reduced motion: honour the OS *and* the site toggle independently ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .jk-reveal { opacity: 1; transform: none; }
}

html.stillmode { scroll-behavior: auto; }
html.stillmode *, html.stillmode *::before, html.stillmode *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}
html.stillmode .jk-reveal { opacity: 1; transform: none; }

/* ---------- high contrast mode (target ≥7:1) ---------- */

html.hc {
  --void: #000000;
  --dusk: #0a0a0a;
  --panel: #0a0a0a;
  --line: rgba(255, 255, 255, .38);
  --bone: #ffffff;
  --dim: #e8e8e8;
  --dimmer: #cfcfcf;
  --gold: #ffd27d;
  --ember: #ff9b6a;
  --signal: #6ff0e8;
}

html.hc img { filter: contrast(1.08); }

/* ---------- calm mode: quieter surfaces, no glows ---------- */

html.calm {
  --ember: #c98a63;
  --gold: #d6bd93;
}

html.calm * { text-shadow: none !important; box-shadow: none !important; }

/* ---------- kinetic mode: hide the OS cursor, we draw our own ---------- */

@media (pointer: fine) and (min-width: 860px) {
  html.kinetic, html.kinetic * { cursor: none !important; }
}

/* ---------- utilities ---------- */

.jk-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.jk-container {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.jk-flow > * + * { margin-top: var(--space-3); }

::selection { background: var(--gold); color: var(--void); }