/* =====================================================================
   DESIGN PLAN — Kevin Davison / senior UX & digital transformation site
   =====================================================================

   AUDIENCE & TONE
   Senior decision-makers, recruiters, and companies evaluating a
   consultant/leader, not a product. The site must read as authored by
   one person with taste and judgement — intelligent, restrained,
   confident — never as a startup landing page, an agency portfolio,
   or a generic "AI" pitch deck.

   COLOR — paper/ink, senior-consultant-portfolio register
   A warm paper background paired with a near-black ink for copy, a
   quiet warm-steel for secondary text/borders, and a single considered
   accent pulled from technical drawing pens: brass/ochre, not neon. A
   darkened structural indigo carries links and interactive states so
   the accent brass stays rare and meaningful. Finalized 2026-08-08
   after an A/B comparison against the AeroFrame-derived dark palette —
   light read as more "senior consultant portfolio," dark read as more
   "AI product."

     --color-bg          #f5f1e6   page background
     --color-surface      #fbf8ef   raised surface (cards, inputs)
     --color-text          #1c1810   primary text
     --color-muted         #6e6858   secondary text, muted labels
     --color-border          #8f8264   interactive component boundaries
     --color-hairline       #ddd6c4   decorative dividers, section seams
     --color-accent          #8c5a22   accent — brass/ochre, used sparingly
     --color-link              #33437a   links, focus, interactive ink-blue

   TYPE — technical display / clean body / utility mono
   Display: RX100 — a technical, spaceflight-inspired display face
   (lifted from the AeroFrame FPV brand system) for headings. Confident
   and precise without tipping into "editorial broadsheet" territory.
   Body: Roboto — neutral, credible, legible at length on a dark
   surface.
   Utility: IBM Plex Mono — for eyebrows, labels, captions, metadata.
   The monospace is the quiet nod to "technology" in the positioning:
   precise, drafted, not decorative.

   Type scale (1.25–1.333 modular, rem-based):
     --fs-xs   0.75rem   /12px  captions, fine print
     --fs-sm   0.875rem  /14px  utility labels, nav
     --fs-base 1rem      /16px  body copy
     --fs-md   1.125rem  /18px  lead paragraphs, pull quotes
     --fs-lg   1.5rem    /24px  h4
     --fs-xl   2rem      /32px  h3
     --fs-2xl  2.75rem   /44px  h2
     --fs-3xl  3.75rem   /60px  h1

   LAYOUT
   Container: 72rem (1152px) outer max-width, with prose content
   further constrained to ~38rem inside case studies for readability —
   deliberately NOT a multi-column hairline-rule newspaper grid.
   Spacing scale: 4px base unit, geometric-ish steps (4/8/12/16/24/
   32/48/64/96/128) for consistent rhythm at any density.
   Cards: flat, hairline border (--color-border), minimal radius
   (2–4px — enough to soften, not enough to feel like a soft SaaS
   tile), generous internal padding, no drop shadow at rest.
   Buttons: solid cream/brass primary, outline secondary, fully
   rounded (pill) radius — distinct from cards' minimal radius,
   no gradients, understated hover as a color/border shift rather
   than motion.

   SIGNATURE ELEMENT — the "seam"
   A recurring divider motif: a hairline rule interrupted by a small
   brass diamond node at its center — like a register mark or joint
   on a technical drawing. It stands in for the "connecting design,
   technology and business" positioning literally: a seam is where
   two things are joined with precision, not a circuit trace or a
   glowing node. Used between major sections (.seam) and as a small
   square/diamond marker preceding eyebrow labels (.eyebrow::before).
   ===================================================================== */

@font-face {
  font-family: "RX100";
  src: url("../fonts/rx100/rx100-regular.woff2") format("woff2"),
       url("../fonts/rx100/rx100-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Color */
  --color-bg: #f5f1e6;
  --color-surface: #fbf8ef;
  --color-text: #1c1810;
  --color-muted: #6e6858;
  /* Interactive component boundaries (form fields, buttons, tabs, linked
     cards, the mobile-nav drawer) — needs to actually be visible against
     bg/surface (WCAG 1.4.11, 3:1 minimum). #ddd6c4 measured ~1.3:1 here. */
  --color-border: #8f8264;
  /* Purely decorative dividers — section seams, list-row separators,
     card/callout framing that isn't itself a control boundary. Kept at
     the original quiet value so these stay hairline-subtle. */
  --color-hairline: #ddd6c4;
  --color-accent: #8c5a22;
  --color-link: #33437a;

  --color-text-on-accent: #f5f1e6;

  /* Type families */
  --font-display: "RX100", "Roboto", sans-serif;
  --font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.5rem;
  --fs-xl: 2rem;
  --fs-2xl: 2.75rem;
  --fs-3xl: 3.75rem;

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.6;

  /* Spacing scale */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-24: 6rem;    /* 96px */
  --space-32: 8rem;    /* 128px */

  /* Layout */
  --container-width: 72rem;
  --prose-width: 38rem;
  --container-pad: var(--space-6);

  /* Shape */
  --radius-sm: 2px;
  --radius-md: 4px;

  /* Motion (respects prefers-reduced-motion below) */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --duration-fast: 120ms;
  --duration-standard: 200ms;
}

/* =====================================================================
   Base
   ===================================================================== */

* {
  box-sizing: border-box;
}

html {
  background: var(--color-bg);
  color: var(--color-text);
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  letter-spacing: 0.01em;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

/* Visible keyboard focus everywhere — never suppressed */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

@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;
  }
}

/* =====================================================================
   Type scale — headings
   ===================================================================== */

h1,
.h1 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-6);
}

h2,
.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
}

h3,
.h3 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  font-weight: 400;
  margin: 0 0 var(--space-4);
}

h4,
.h4 {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  font-weight: 600;
  margin: 0 0 var(--space-3);
}

@media (max-width: 40rem) {
  h1, .h1 { font-size: var(--fs-2xl); }
  h2, .h2 { font-size: var(--fs-xl); }
  h3, .h3 { font-size: var(--fs-lg); }
}

/* Eyebrow — small utility label, precedes headings/sections */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 var(--space-3);
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* =====================================================================
   Layout
   ===================================================================== */

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

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

@media (max-width: 40rem) {
  .section {
    padding-block: var(--space-8);
  }
}

.prose {
  max-width: var(--prose-width);
}

/* Signature divider — a hairline seam with a joined brass node */
.seam {
  position: relative;
  border: none;
  border-top: 1px solid var(--color-hairline);
  margin-block: var(--space-16);
}

.seam::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--color-accent);
}

/* =====================================================================
   Card
   ===================================================================== */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: border-color var(--duration-standard) var(--ease-standard);
}

.card:hover {
  border-color: var(--color-muted);
}

/* =====================================================================
   Buttons
   ===================================================================== */

.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: var(--space-3) var(--space-6);
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.btn-primary {
  background: var(--color-text);
  color: var(--color-text-on-accent);
  border-color: var(--color-text);
}

.btn-primary:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-on-accent);
}

.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn-secondary:hover {
  border-color: var(--color-text);
}

/* =====================================================================
   Utility text
   ===================================================================== */

.caption,
small {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-muted);
  letter-spacing: 0.02em;
}

.lead {
  font-size: var(--fs-md);
  color: var(--color-muted);
  line-height: var(--lh-normal);
}