/* ==========================================================================
   global.css — Base typography, layout primitives and the Tembeka Frame.
   ========================================================================== */

body {
  background-color: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  font-weight: 400;
  /* Tabular figures keep financial and numbered content aligned. */
  font-variant-numeric: proportional-nums;
  font-synthesis-weight: none;
  overflow-x: hidden;
}

/* Locks background scrolling while the mobile menu is open without the
   layout shift that `overflow: hidden` alone causes on iOS. */
body[data-scroll-locked] {
  position: fixed;
  inline-size: 100%;
  overflow-y: scroll;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--ink-strong);
}

h5, h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: 0;
}


.t-lead {
  font-size: var(--step-1);
  line-height: 1.58;
  color: var(--ink-muted);
}

.t-body  { font-size: var(--step-0); color: var(--ink-muted); }
.t-small { font-size: var(--step--1); color: var(--ink-muted); }

/* Uppercase metadata labels — the connective tissue of the layout. */
.t-label {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-subtle);
  line-height: 1.4;
}

.t-label--accent { color: var(--accent); }

/* Section numerals: 01 — 05. Tabular so the pairs stay optically aligned. */
.t-numeral {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-wide);
  color: var(--accent);
}


/* --------------------------------------------------------------------------
   Prose — used on long-form pages (About, Privacy)
   -------------------------------------------------------------------------- */
.prose { max-inline-size: var(--measure); color: var(--ink-muted); }
.prose > * + * { margin-block-start: var(--space-m); }
.prose h2 { font-size: var(--step-3); color: var(--ink-strong); margin-block-start: var(--space-xl); }
.prose h3 { font-size: var(--step-2); color: var(--ink-strong); margin-block-start: var(--space-l); }
.prose strong { color: var(--ink-strong); font-weight: 600; }
.prose ul, .prose ol { padding-inline-start: var(--space-m); }
.prose li + li { margin-block-start: var(--space-2xs); }
.prose a { color: var(--ink-strong); text-decoration-color: var(--accent); text-underline-offset: 0.2em; }

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

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

.section {
  padding-block: var(--section-space);
  background-color: var(--surface);
  color: var(--ink);
  position: relative;
}

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

/* The editorial grid. Twelve columns on desktop, collapsing honestly. */
.grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* Width and starting column are set as separate longhands on purpose. The
   `grid-column: span N` shorthand writes the span into grid-column-START, so a
   `.start-*` class alongside it would overwrite the width and collapse the item
   to a single track. Using grid-column-end keeps the two composable. */
.span-4,
.span-5,
.span-6,
.span-7 { grid-column-end: span 12; }

@media (min-width: 48em) {
  .span-4 { grid-column-end: span 6; }
  .span-6 { grid-column-end: span 6; }
}

@media (min-width: 64em) {
  .span-4 { grid-column-end: span 4; }
  .span-5 { grid-column-end: span 5; }
  .span-6 { grid-column-end: span 6; }
  .span-7 { grid-column-end: span 7; }

  .start-7 { grid-column-start: 7; }
  .start-9 { grid-column-start: 9; }
}


/* --------------------------------------------------------------------------
   The Tembeka Frame
   A right-angle bracket derived from the logo mark. It appears as a corner
   detail on imagery, quotations and section markers. Decorative only — it is
   never the sole carrier of meaning.
   -------------------------------------------------------------------------- */
.frame {
  position: relative;
  isolation: isolate;
}

.frame::before,
.frame::after {
  content: "";
  position: absolute;
  inline-size: var(--frame-reach);
  block-size: var(--frame-reach);
  pointer-events: none;
  z-index: 2;
}

/* Gold bracket, top-left, sitting proud of the subject. */
.frame::before {
  inset-block-start: calc(var(--frame-offset) * -1);
  inset-inline-start: calc(var(--frame-offset) * -1);
  border-block-start: var(--frame-stroke) solid var(--accent-rule);
  border-inline-start: var(--frame-stroke) solid var(--accent-rule);
}

/* Navy (or inverse) bracket, bottom-right, closing the composition. */
.frame::after {
  inset-block-end: calc(var(--frame-offset) * -1);
  inset-inline-end: calc(var(--frame-offset) * -1);
  border-block-end: var(--frame-stroke) solid var(--rule-strong);
  border-inline-end: var(--frame-stroke) solid var(--rule-strong);
}

.frame--gold-only::after { content: none; }

/* A single bracket used as a quiet marker beside headings. */
.frame-mark {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  border-block-start: var(--frame-stroke) solid var(--accent-rule);
  border-inline-start: var(--frame-stroke) solid var(--accent-rule);
  flex: none;
}

/* --------------------------------------------------------------------------
   Accessibility helpers
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-block-start: var(--space-s);
  inset-inline-start: var(--space-s);
  z-index: var(--z-skip);
  padding: var(--space-xs) var(--space-m);
  background: var(--navy-900);
  color: var(--ivory-50);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-1);
  transform: translateY(-200%);
  transition: transform var(--duration-fast) var(--ease-out);
}

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

/* --------------------------------------------------------------------------
   Entrance motion — a single, restrained reveal used site-wide.
   Elements are visible by default; JS opts them in, so the content is never
   hidden from users without JavaScript or from search engines.
   -------------------------------------------------------------------------- */
[data-reveal] { --reveal-delay: 0ms; }

.js [data-reveal] {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity var(--duration-reveal) var(--ease-editorial) var(--reveal-delay),
    transform var(--duration-reveal) var(--ease-editorial) var(--reveal-delay);
}

.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
}