/* ============================================================
   BASE — Reset, @font-face, Typography, Utilities
   ============================================================ */

/* Space Mono is loaded from index.html's <head> with preconnect. An @import
   here would chain HTML -> base.css -> googleapis -> gstatic before any
   monospace text could paint. */

/* --- Modern CSS Reset --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%; /* 16px base */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-weight: var(--fw-book);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Tabular figures only. The old list also carried 'ss01' and 'ss04' for ABC
     Oracle's alternate a and t — in Modern Era those tags are a different
     alternate a and an alternate y, so carrying them over would have quietly
     restyled the page. 'lnum' is gone too: Modern Era ships no oldstyle
     figures, so lining is already all there is. See ss01-ss05 in the family if
     you want alternates — they are opt-in, not inherited from the old font. */
  font-feature-settings: 'tnum' 1;
  overflow-x: clip; /* clip instead of hidden — preserves position:sticky on children */
  transition: background-color var(--duration-slow) var(--ease-standard),
              color var(--duration-slow) var(--ease-standard);
}

/* The robot hand in #solution deliberately runs off the right edge, and the
   page's scrollWidth ran 73-91px past the viewport because of it. body's
   overflow-x: clip already stopped it scrolling, but only by propagating to
   the viewport, which leaves the overhang counted and which some tablet
   browsers have not honoured. main spans the viewport and does not propagate,
   so clipping here takes it out cleanly. clip — not hidden — keeps the y axis
   visible and creates no scroll container, so position: sticky still works. */
main {
  overflow-x: clip;
}

/* A deep link (#problem) or a nav click would otherwise land the section's
   top edge under the fixed nav, with the eyebrow hidden behind it. */
section[id] {
  scroll-margin-top: var(--nav-height);
}

/* The UA's [hidden] { display: none } loses to any author display rule —
   .footer__link is display: block — so a hidden link would quietly reappear.
   This puts the attribute back in charge. */
[hidden] {
  display: none !important;
}

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

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

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}


/* --- @font-face — Modern Era (OMSE Type) ---
   Static instances, not a variable font: every weight is a separate file, and
   a browser downloads only the faces a page actually renders. The family ships
   twelve; these four are what the pages measurably render. No Bold: the legal
   pages' <b> runs are styled to 500 by css/legal.css, not 700, so a Bold face
   would ship and never be fetched. The italic is Light, not Regular — the one
   <i> on the site sits in 300 prose, and a 400 italic beside it read heavy.

   The other seven faces sit in fonts/ and are git-ignored. To enable one: add
   a block below and drop its line from .gitignore. */
@font-face {
  font-family: 'Modern Era';
  src: url('../fonts/ModernEra-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Modern Era';
  src: url('../fonts/ModernEra-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Modern Era';
  src: url('../fonts/ModernEra-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* --- @font-face — ABC Oracle (Dinamo), display headings only ---
   One face, Light 300: the hero headline and the four section headings are
   all set at --fw-light. A static Light is 65KB against 270KB for the
   variable file the site used to load. Its alternate a and t (ss01, ss04)
   are switched on where it is used, in home.css.

   This is Dinamo's trial build. When the licensed file replaces it, bump
   ?v= here AND on the preload in index.html (they must match, or the preload
   is wasted): a cached copy of the old URL is never re-checked otherwise. */
@font-face {
  font-family: 'ABC Oracle';
  src: url('../fonts/ABCOracle-Light.woff2?v=1') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Modern Era';
  src: url('../fonts/ModernEra-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}



/* --- Typography --- */
.text-hero {
  font-size: var(--fs-hero);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.text-h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
}

.text-h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-book);
  line-height: var(--lh-snug);
}

.text-h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
}

.text-body {
  font-size: var(--fs-body);
  font-weight: var(--fw-book);
  line-height: var(--lh-relaxed);
}

.text-body-sm {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-book);
  line-height: var(--lh-relaxed);
}

.text-label {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  line-height: var(--lh-normal);
}

.text-micro {
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  line-height: var(--lh-normal);
}


/* --- Annotation layer (Space Mono technical metadata) --- */
.annotation {
  font-family: 'Space Mono', monospace;
  font-size: 0.625rem; /* 10px */
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: var(--lh-normal);
  color: var(--text-primary);
  opacity: 0.45;
}

/* Red brand accent square on annotations — must punch through parent opacity */
.annotation__marker {
  color: var(--red-400);
  filter: brightness(1.4);
  margin-right: 0.25em;
}

.annotation--11 {
  font-size: 0.6875rem; /* 11px */
}

.annotation--bright {
  opacity: 0.45;
}

.annotation--dim {
  opacity: 0.25;
}

/* Section identifier — "01 // CAPABILITY" style */
.section-id {
  font-family: 'Space Mono', monospace;
  font-size: 0.6875rem; /* 11px */
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
  opacity: 0.7;
  margin-bottom: var(--space-xs);
}

/* Each eyebrow pairs the visible "02 // PROBLEM" (aria-hidden) with a
   spoken "Section 2: Problem". Some browsers fold text-transform into the
   accessible name, so the spoken copy is kept in its own case. */
.section-id .sr-only {
  text-transform: none;
}

/* --- Text colors --- */
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-faint     { color: var(--text-faint); }
.text-red       { color: var(--accent-primary); }
.text-orange    { color: var(--orange-500); }
.text-green     { color: var(--green-500); }
.text-blue      { color: var(--blue-500); }


/* --- Layout utilities --- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-padding-x);
}

.content {
  max-width: var(--content-max);
  margin-inline: auto;
}

.section {
  padding-block: var(--section-gap);
  padding-inline: var(--section-padding-x);
}

.section--full {
  padding-inline: 0;
}

/* Two-column layout */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

.two-col--reverse {
  direction: rtl;
}

.two-col--reverse > * {
  direction: ltr;
}

@media (max-width: 48rem) {
  .two-col,
  .two-col--reverse {
    grid-template-columns: 1fr;
    direction: ltr;
  }
}

/* Auto-fit grid */
.grid {
  display: grid;
  gap: var(--space-xl);
}

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }


/* Flex utilities */
.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-xs  { gap: var(--space-xs); }
.gap-sm  { gap: var(--space-sm); }
.gap-md  { gap: var(--space-md); }
.gap-lg  { gap: var(--space-lg); }
.gap-xl  { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }
.gap-3xl { gap: var(--space-3xl); }
.gap-4xl { gap: var(--space-4xl); }

/* Positioning */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }

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

/* Text alignment */
.text-center { text-align: center; }
.text-left   { text-align: left; }

/* Max-width for readable text blocks */
.max-w-prose { max-width: 40rem; }
.max-w-narrow { max-width: 30rem; }
.max-w-wide { max-width: 50rem; }


/* --- Custom scrollbar --- */
::-webkit-scrollbar {
  width: 0.5rem;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-full);
}

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}


/* --- Selection --- */
::selection {
  background: var(--accent-primary);
  color: #ffffff;
}


/* ============================================================
   LIGHT MODE OVERRIDES
   ============================================================ */

/* Annotation marker: use full red, no brightness boost needed on light bg */
[data-theme="light"] .annotation__marker {
  color: var(--red-500);
  filter: none;
}

/* Annotation text: boost opacity so labels are legible on white */
[data-theme="light"] .annotation {
  opacity: 0.7;
}