/* =====================================================================
   Mosaic Paradigm — stylesheet
   Editorial layout: grotesque display + serif body, system font stacks.
   Palette: Outer Space #30373E + Fog #D8C5FE (7.66:1) with a violet text
   accent for light backgrounds. All design tokens live in :root; dark mode
   via prefers-color-scheme; motion respects prefers-reduced-motion.
   ===================================================================== */

:root {
  color-scheme: light dark;

  /* Heavy grotesque display (system). Weight + tracking + size do the work. */
  --font-display: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", system-ui, sans-serif;
  /* Serif reading face (system) — the magazine body texture. */
  --font-serif: Georgia, "Times New Roman", Times, "Liberation Serif", serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.2rem;
  --text-xl: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem);
  --text-2xl: clamp(1.8rem, 1.4rem + 1.8vw, 2.6rem);
  --text-hero: clamp(2.55rem, 1.3rem + 5.6vw, 6rem);
  --text-quote: clamp(1.9rem, 1.2rem + 3.2vw, 3.4rem);

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2.25rem; --space-7: 3.5rem; --space-8: 5.5rem; --space-9: 8rem;

  --wrap: 74rem;
  --header-h: 4rem;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 180ms;
  --dur-slow: 600ms;

  /* Light — fog-tinted paper + Outer Space ink + Fog/violet accent */
  --paper: #f6f4fb;                 /* faint Fog cast on the paper */
  --ink: #30373e;                   /* Outer Space */
  --muted: #545b66;
  --faint: #5f646e;                 /* AA on paper for small text */
  --line: #30373e;                  /* strong editorial rules stay ink */
  --line-soft: #dcd7e8;             /* quiet row separators, fog-tinted */
  --accent: #d8c5fe;                /* Fog — fills, underlines, art (non-text) */
  --accent-ink: #5847c0;            /* violet derived from Fog — AA+ as text on paper */
  --on-accent: #30373e;             /* text on a Fog fill (7.66:1 AAA) */
  --accent-on-invert: #d8c5fe;      /* accent marks on the inverted band */

  --focus-ring: 0 0 0 3px rgba(88, 71, 192, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #30373e;               /* Outer Space is the page itself */
    --ink: #edeaf5;                 /* fog-cast near-white */
    --muted: #aba9b8;
    --faint: #a6a4b4;               /* AA on Outer Space for small text */
    --line: #edeaf5;
    --line-soft: #454b56;
    --accent: #d8c5fe;              /* Fog */
    --accent-ink: #d8c5fe;          /* Fog as text — 7.66:1 AAA on Outer Space */
    --on-accent: #30373e;
    --accent-on-invert: #5847c0;    /* violet marks on the light inverted band */
    --focus-ring: 0 0 0 3px rgba(216, 197, 254, 0.5);
  }
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: 1.58;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

svg { display: block; }
p { margin: 0; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.028em;
}

a { color: var(--accent-ink); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--space-5); }

.rule { height: 0; border-top: 1px solid var(--line); }
.rule--top { border-top-width: 5px; }

.skip-link {
  position: absolute; left: var(--space-4); top: -4rem; z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--ink); color: var(--paper);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: var(--text-sm);
  text-decoration: none; transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--space-3); }

/* Kicker / eyebrow — uppercase mono-ish label */
.kicker {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: var(--text-sm);
  color: var(--muted);
}
.kicker__mark { color: var(--accent-ink); font-weight: 800; }

/* Mark tiles (sharp) */
.t { fill: var(--ink); }
.t--on { fill: var(--accent); }

/* ---------------------------------------------------------------------
   Vector-line art — decorative node/line fields (inline SVG, aria-hidden).
   Token-colored so it adapts to light/dark; kept faint so type leads.
   --------------------------------------------------------------------- */
.art { position: absolute; pointer-events: none; z-index: 0; }
.art__lines path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1;
  opacity: 0.16;
}
.art__nodes circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1; opacity: 0.35; }
.art__nodes--accent circle { fill: var(--accent); stroke: none; opacity: 0.85; }

.art--hero {
  top: 0; right: 0; bottom: 0;
  width: min(58vw, 40rem); height: 100%;
  -webkit-mask-image: linear-gradient(to left, #000 55%, transparent);
  mask-image: linear-gradient(to left, #000 55%, transparent);
}

/* On the inverted band the strokes flip to paper-on-ink. */
.art--statement { inset: 0; width: 100%; height: 100%; }
.art--statement .art__lines path { stroke: var(--paper); opacity: 0.22; }
.art--statement .art__nodes circle { fill: var(--ink); stroke: var(--paper); }
.art--statement .art__nodes--accent circle { fill: var(--accent-on-invert); stroke: none; }

/* ---------------------------------------------------------------------
   Masthead
   --------------------------------------------------------------------- */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
}
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--header-h); gap: var(--space-4);
}
.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--ink); text-decoration: none; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 1.18rem;
}
.masthead .rule--top { transition: border-top-color var(--dur) var(--ease); }

.nav { display: flex; align-items: center; }
.nav__menu { display: flex; align-items: center; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.nav__menu a:not(.btn) {
  font-family: var(--font-display);
  font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: var(--text-xs);
  color: var(--ink); text-decoration: none;
  padding-bottom: 2px; border-bottom: 2px solid transparent;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__menu a:not(.btn):hover { border-bottom-color: var(--accent); color: var(--accent-ink); }

.nav__toggle {
  display: none; align-items: center; gap: var(--space-2);
  background: var(--paper); border: 2px solid var(--ink); color: var(--ink);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: var(--text-xs);
  padding: var(--space-2) var(--space-3); cursor: pointer;
}
.nav__toggle-bars, .nav__toggle-bars::before, .nav__toggle-bars::after {
  display: block; width: 17px; height: 2px; background: currentColor; position: relative;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav__toggle-bars::before, .nav__toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav__toggle-bars::before { top: -5px; }
.nav__toggle-bars::after { top: 5px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::before { transform: translateY(5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::after { transform: translateY(-5px) rotate(-45deg); }

/* ---------------------------------------------------------------------
   Buttons (sharp, uppercase)
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.7rem 1.4rem;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: var(--text-sm);
  color: var(--paper); background: var(--ink);
  border: 2px solid var(--ink); border-radius: 0;
  text-decoration: none; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn:active { transform: translateY(1px); }

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(var(--space-7), 8vw, var(--space-9));
  border-bottom: 1px solid var(--line);
}
.hero__inner { position: relative; z-index: 1; }
.hero__title {
  margin-top: var(--space-5);
  font-size: var(--text-hero);
  max-width: 15ch;
  text-wrap: balance;
}
.hero__standfirst {
  margin-top: var(--space-5);
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.42;
  max-width: 40ch;
  color: var(--muted);
}
.hero__cta { margin-top: var(--space-6); }

/* ---------------------------------------------------------------------
   Blocks (label / content, strong rule between)
   --------------------------------------------------------------------- */
.block { border-bottom: 1px solid var(--line); }
.block:last-of-type { border-bottom: 0; }
.block__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-4);
  padding-block: clamp(var(--space-6), 5vw, var(--space-8));
}
.block__label { display: flex; align-items: baseline; gap: var(--space-3); }
.block__index { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent-ink); }
.block__heading { font-size: var(--text-xl); text-transform: uppercase; letter-spacing: -0.01em; }
.block__body { min-width: 0; }

/* Capabilities — a mosaic of sharp cubes (keeps the dl semantics) */
.defs {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  counter-reset: cap;
}
.def {
  counter-increment: cap;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--line-soft);
  background: transparent;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.def:hover { border-color: var(--accent-ink); }
/* mono index, top-left — editorial numbering */
.def::before {
  content: "0" counter(cap);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent-ink);
}
/* small fog tile, top-right — the mosaic nod */
.def::after {
  content: "";
  position: absolute;
  top: var(--space-5); right: var(--space-5);
  width: 10px; height: 10px;
  background: var(--accent);
}
.def__term {
  margin-top: auto;                  /* index sits top, term+desc settle low */
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-lg); letter-spacing: -0.02em; color: var(--ink);
}
.def__desc { font-family: var(--font-serif); color: var(--muted); margin: calc(-1 * var(--space-4)) 0 0; }

@media (min-width: 40rem) {
  .defs { grid-template-columns: repeat(2, 1fr); }
  .def { aspect-ratio: 1; }          /* the cubes */
}
@media (min-width: 64rem) {
  .defs { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------------------------------------------------------------
   Statement / pull-quote (inverted)
   --------------------------------------------------------------------- */
.invert { background: var(--ink); color: var(--paper); }
.statement {
  position: relative;
  overflow: hidden;
  padding-block: clamp(var(--space-7), 7vw, var(--space-8));
}
.statement .wrap { position: relative; z-index: 1; }
.statement__quote {
  margin: 0;
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-quote); line-height: 1.04; letter-spacing: -0.03em;
  max-width: 22ch; color: var(--paper);
}
.statement__quote::before { content: "\201C"; color: var(--accent-on-invert); margin-right: 0.04em; }
.statement__quote::after { content: "\201D"; color: var(--accent-on-invert); }

/* ---------------------------------------------------------------------
   Prose (Studio) — serif with a red drop cap
   --------------------------------------------------------------------- */
.prose { max-width: 62ch; display: grid; gap: var(--space-4); font-size: var(--text-lg); color: var(--muted); }
.prose p { color: var(--muted); }
.prose p:first-of-type::first-letter {
  font-family: var(--font-display); font-weight: 800;
  font-size: 3.6em; line-height: 0.72;
  float: left; margin: 0.06em 0.1em 0 0; color: var(--accent-ink);
}

/* ---------------------------------------------------------------------
   Contact — a single prominent email, editorial scale
   --------------------------------------------------------------------- */
.contact__line { max-width: 60ch; font-family: var(--font-serif); color: var(--muted); }
.contact__email-line { margin-top: var(--space-4); overflow-wrap: anywhere; }
.contact__email {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 1rem + 2.6vw, 3rem);
  letter-spacing: -0.025em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 4px solid var(--accent);
  padding-bottom: 0.05em;
  transition: color var(--dur) var(--ease);
}
.contact__email:hover { color: var(--accent-ink); }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.footer__inner {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3) var(--space-6);
  padding-block: var(--space-6);
}
.footer__brand { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; }
.footer__meta { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--faint); }

/* ---------------------------------------------------------------------
   Reveal (JS-only, subtle)
   --------------------------------------------------------------------- */
.js [data-reveal] { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
@media print { .js [data-reveal] { opacity: 1 !important; transform: none !important; } }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (min-width: 52rem) {
  .block__grid {
    grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr);
    gap: clamp(var(--space-6), 6vw, var(--space-8));
  }
  .block__label { position: sticky; top: var(--header-h); align-self: start; }
}

@media (max-width: 51.99rem) {
  .js .nav__toggle { display: inline-flex; }
  .js .nav__menu {
    position: absolute; top: var(--header-h); right: var(--space-5); left: var(--space-5);
    flex-direction: column; align-items: stretch; gap: var(--space-4);
    padding: var(--space-5); background: var(--paper);
    border: 2px solid var(--ink);
  }
  .js .nav__menu[hidden] { display: none; }
}

/* ---------------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}