/* ==========================================================================
   ascendai.us — BASE
   --------------------------------------------------------------------------
   Reset, document defaults, element-level typography, and the accessibility
   primitives (focus rings, skip link, reduced motion, screen-reader helpers).

   Everything here applies to bare HTML elements. Nothing here knows about a
   specific section of the page — that is site.css's job.

   Load order matters: tokens.css -> base.css -> site.css -> assistant.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET
   Deliberately small. We are not normalising away browser behaviour we want.
   -------------------------------------------------------------------------- */

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

html,
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

/* Note this targets ul[class] only. An unclassed <ul> keeps its bullets —
   if you add a list and it renders with dots, that is why. Reset it in the
   component rather than widening this selector. */
ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

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

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

/* --------------------------------------------------------------------------
   2. DOCUMENT
   -------------------------------------------------------------------------- */

html {
  /* Anchor links land below the fixed masthead instead of underneath it. */
  scroll-padding-top: calc(var(--nav-h) + var(--space-lg));
  -webkit-text-size-adjust: 100%;
  /* Match the app ground so overscroll bounce on iOS doesn't flash white. */
  background-color: var(--void);
  color-scheme: dark;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  background-color: var(--void);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-md);
  line-height: var(--leading-normal);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Nothing on this page may cause a horizontal scrollbar. Ambient glows are
     deliberately oversized and would otherwise widen the document. */
  overflow-x: hidden;
  position: relative;
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY

   Display type is Sora with tight negative tracking — geometric sans needs it
   at large sizes or it reads loose. Body is Plus Jakarta Sans, which is
   warmer and holds up better across a paragraph.
   -------------------------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--track-display);
  text-wrap: balance;     /* progressive enhancement; ignored where unsupported */
  color: var(--text);
}

h1 {
  font-size: var(--step-hero);
}

h2 {
  font-size: var(--step-2xl);
}

h3 {
  font-size: var(--step-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-tight);
}

/* Card and subsection headings. These are real <h3> elements for document
   outline purposes (no h2 -> h4 jumps), but they sit at card scale, so they
   drop to the body face — at this size the display face reads as decoration
   rather than hierarchy. The .card-heading class carries the look; the tag
   carries the semantics. */
.card-heading, h4 {
  font-family: var(--font-sans);
  font-size: var(--step-md);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: -0.006em;
  color: var(--text);
}

p {
  max-width: var(--measure);
  color: var(--text-dim);
  text-wrap: pretty;      /* avoids single-word last lines where supported */
}

strong {
  font-weight: 600;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   4. LINKS
   Inline prose links are underlined. Navigation, buttons and cards opt out
   through their own classes — an underline there would be noise.
   -------------------------------------------------------------------------- */

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--dur-fast) var(--ease);
}

a:hover {
  color: var(--accent-bright);
}

/* --------------------------------------------------------------------------
   5. ACCESSIBILITY PRIMITIVES
   -------------------------------------------------------------------------- */

/* :focus-visible so pointer users never see the ring and keyboard users
   always do. The accent is bright enough to serve on every surface here,
   because every surface on this site is dark. */
:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

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

/* Skip link — hidden until focused, then pinned top-left. First tab stop. */
.skip-link {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: var(--z-skip);
  transform: translateY(-200%);
  padding: var(--space-sm) var(--space-md);
  background: var(--accent);
  color: var(--text-on-accent);
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: transform var(--dur-fast) var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--text-on-accent);
}

/* --------------------------------------------------------------------------
   6. REDUCED MOTION

   One global override. Anything animated anywhere in this codebase is
   neutralised here, so new animation is safe by default rather than needing
   someone to remember to opt in.

   site.js reads the same media query and reveals all content immediately
   instead of running the IntersectionObserver.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   7. PRINT
   A corporate page does get printed and PDF'd. Invert to ink-on-paper rather
   than consuming a toner cartridge on a near-black background.
   -------------------------------------------------------------------------- */

@media print {
  .site-nav,
  .assistant,
  .ambient,
  .hero-visual {
    display: none !important;
  }

  html,
  body {
    background: #fff !important;
    color: #000 !important;
  }

  h1, h2, h3, h4, p, li, td, th {
    color: #000 !important;
  }

  a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }
}