/* ============================================================================
   BINARY GLYPH — STYLE CSS
   ----------------------------------------------------------------------------
   Implementation of the documented Visual Style Guide.
   Single source of truth for the brand's visual system.

   Maintained by Steve Ice, Principal.
   Governed by the Style Guide. When this CSS conflicts with the Guide,
   the Guide wins and this CSS gets corrected.

   Structure:
   00 — Self-hosted font declarations (@font-face)
   01 — Design tokens (custom properties)
   02 — Base reset and typography defaults
   03 — Typography classes (when semantic defaults need override)
   04 — Layout primitives (containers, grids, marginalia)
   05 — Site chrome (header, footer, navigation)
   06 — Components (buttons, callouts, blockquotes, forms, etc.)
   07 — Essay-specific visual moments
   08 — Motion (transitions, focus states, reduced-motion)
   09 — Accessibility utilities
   10 — Responsive behavior (breakpoints, fluid typography)
   ========================================================================= */


/* ============================================================================
   00 — SELF-HOSTED FONT DECLARATIONS
   ----------------------------------------------------------------------------
   Three typefaces, all SIL OFL licensed, served from /assets/fonts/.
   Self-hosting eliminates external dependencies (privacy, performance,
   resilience) and is documented as a Phase 1 commitment in Section 03
   of the Style Guide.

   Font file acquisition:
   - Tomorrow:       Google Fonts download or https://github.com/tonydemarco/Tomorrow
   - Source Serif 4: https://github.com/adobe-fonts/source-serif
   - JetBrains Mono: https://github.com/JetBrains/JetBrainsMono

   File format: .woff2 only. Modern browsers all support woff2; it compresses
   better than woff and legacy browsers are not a concern for this audience.

   font-display: swap
   -------------------
   Text remains readable in fallback fonts while web fonts load. This prevents
   FOIT (Flash of Invisible Text) and produces a better first-render experience
   than the default font-display: auto behavior.
   ========================================================================= */

/* ---- TOMORROW — technical sans-serif ----
   Used for wordmark, CTAs, assertion moments.
   Three weights: 400 Regular (navigation), 500 Medium (marginalia), 700 Bold (assertion).
   Italics exist in the family but are not used per Style Guide Section 03. */

@font-face {
  font-family: 'Tomorrow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/tomorrow/tomorrow-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Tomorrow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/tomorrow/tomorrow-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Tomorrow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/tomorrow/tomorrow-700.woff2') format('woff2');
}


/* ---- SOURCE SERIF 4 — editorial serif ----
   Used for body text, page titles, italic emphasis, ledes.
   Four weights: 300 Light (italic ledes), 400 Regular (body),
   500 Medium (emphasis), 600 Semibold (strong emphasis).
   Italic used extensively; reserved to this typeface only.
   Variable font covers full weight range (200–900) in two files. */

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/assets/fonts/source-serif-4/source-serif-4-roman.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('/assets/fonts/source-serif-4/source-serif-4-italic.woff2') format('woff2');
}


/* ---- JETBRAINS MONO — structural monospace ----
   Used for marginalia, metadata, labels, dates, footer text.
   Two weights: 400 Regular, 500 Medium.
   Italic variant exists but is not used per Style Guide Section 03. */

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono/jetbrains-mono-400.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono/jetbrains-mono-500.woff2') format('woff2');
}


/* ============================================================================
   01 — DESIGN TOKENS
   ----------------------------------------------------------------------------
   Every value in the system is defined here as a custom property.
   Future updates touch this section, not individual component styles.
   ========================================================================= */

:root {

  /* ---- COLOR ----
     Section 04 of the Style Guide.
     Nine colors total. No additions without revisiting the Guide. */

  /* Backgrounds — warm neutrals */
  --bg-paper:        #FAFAF7;  /* Default page background */
  --bg-cream:        #F4F2EB;  /* Set-apart blocks: pull quotes, callouts */
  --bg-stage:        #ECEAE3;  /* Reserved deeper neutral, used rarely */

  /* Text — four ink tones */
  --ink-black:       #0A0A0A;  /* Primary text, titles, headings */
  --ink-secondary:   #1F1F1F;  /* Default body text */
  --ink-tertiary:    #6B6B68;  /* Marginalia, metadata, captions */
  --ink-quiet:       #A8A6A0;  /* Legal text, placeholders, decorative */

  /* Rules — structural lines */
  --rule:            #D4D2CC;  /* Standard horizontal rule */
  --rule-soft:       #E8E6E0;  /* Tertiary divisions */

  /* Accent — voltage red-orange */
  --accent:          #DC4A1F;  /* Action moments, structural emphasis */
  --accent-deep:     #B23A14;  /* Hover state for primary CTAs */


  /* ---- TYPOGRAPHY ----
     Section 03 of the Style Guide.
     Three typefaces, each doing one specific job. */

  --font-editorial:  'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-technical:  'Tomorrow', system-ui, -apple-system, sans-serif;
  --font-mono:       'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;


  /* ---- TYPE SCALE ----
     Section 02 of the Style Guide.
     Display tier (subhead–display): derived from 18px × φ (1.618) in true φ steps.
     Reading tier (caption–lede): compressed progression optimized for legibility.
     Values rounded to whole pixels for crisp rendering. */

  --type-caption:    11px;     /* Marginalia, metadata, footer */
  --type-small:      14px;     /* Secondary text, button labels */
  --type-body:       18px;     /* Default paragraph text — the foundation */
  --type-lede:       22px;     /* Orientation paragraphs */
  --type-subhead:    29px;     /* H3 elements, minor headings */
  --type-heading:    47px;     /* H2 elements, major section headings */
  --type-title:      76px;     /* H1 page titles */
  --type-display:    123px;    /* Hero statements where type is the page */


  /* ---- LINE HEIGHTS ----
     Section 02 of the Style Guide.
     Inverted relative to type size — small reads loose, large reads tight. */

  --lh-body:         1.65;     /* Caption to body */
  --lh-lede:         1.5;      /* Lede paragraphs */
  --lh-subhead:      1.3;      /* Subheads */
  --lh-heading:      1.1;      /* Headings */
  --lh-title:        1.02;     /* Titles */
  --lh-display:      0.98;     /* Display sizes */


  /* ---- SPACING SCALE ----
     Section 02 of the Style Guide.
     From --space-snug upward: derived from base 16px × φ (1.618).
     First two steps (hairline, tight) use compressed values for fine-grain UI work. */

  --space-hairline:  4px;      /* Tight rule offsets */
  --space-tight:     6px;      /* Small inline padding */
  --space-snug:      10px;     /* Compact element spacing */
  --space-base:      16px;     /* Default element gaps */
  --space-loose:     26px;     /* Paragraph spacing, button padding */
  --space-wide:      42px;     /* Section internal padding, grid gaps */
  --space-section:   68px;     /* Between major content blocks */
  --space-page:      110px;    /* Between major page sections */


  /* ---- CONTAINERS ----
     Section 05 of the Style Guide.
     Three-tier nesting: page outer, article inner, reading column. */

  --container-page:     1280px;
  --container-article:  1080px;
  --container-reading:  720px;
  --container-marginalia: 200px;  /* Width of the marginalia label column */


  /* ---- BREAKPOINTS ----
     Section 02 and 05 of the Style Guide.
     Three breakpoints based on content needs, not device categories.
     Note: CSS custom properties cannot be used in @media queries directly,
     these values are documented here and used as literals in media queries. */

  --bp-compact:      720px;    /* Mobile foundation */
  --bp-standard:     1200px;   /* Multi-column patterns return */
  --bp-generous:     1280px;   /* Full composition available */


  /* ---- MOTION ----
     Section 07 of the Style Guide.
     Three timing values, two easing functions. */

  --motion-quick:    150ms;
  --motion-smooth:   600ms;
  --ease-default:    cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out:        cubic-bezier(0.0, 0.0, 0.2, 1);


  /* ---- TRACKING ----
     Section 03 of the Style Guide.
     Modified letter-spacing values for specific contexts. */

  --tracking-caps-mono:  0.12em;  /* All-caps JetBrains Mono small sizes */
  --tracking-caps-tech:  0.06em;  /* All-caps Tomorrow small sizes */
  --tracking-caps-wide:  0.16em;  /* Wider tracking for spaced labels */
  --tracking-caps-extra: 0.20em;  /* Extra-wide tracking for taglines */
  --tracking-display:    -0.025em; /* Negative tracking for large display type */
  --tracking-title:      -0.025em; /* Negative tracking for titles */
  --tracking-heading:    -0.02em;  /* Negative tracking for headings */
  --tracking-subhead:    -0.015em; /* Slightly negative for subheads */
  --tracking-lede:       -0.01em;  /* Slightly negative for ledes */
}


/* ============================================================================
   02 — BASE RESET AND TYPOGRAPHY DEFAULTS
   ----------------------------------------------------------------------------
   Reset browser defaults. Establish typography defaults so semantic HTML
   renders correctly without requiring class names on every element.
   ========================================================================= */

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

html {
  /* Smooth scroll for anchor links — Section 07 */
  scroll-behavior: smooth;

  /* Prevent font-size adjustments on iOS landscape */
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg-paper);
  color: var(--ink-secondary);
  font-family: var(--font-editorial);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  font-weight: 400;

  /* Improve text rendering across browsers */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* Prevent horizontal scroll from any rogue overflow */
  overflow-x: hidden;
}

/* Headings use the editorial serif as default. Type scale matches the system. */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-editorial);
  font-weight: 400;
  color: var(--ink-black);
}

h1 {
  font-size: var(--type-title);
  line-height: var(--lh-title);
  letter-spacing: var(--tracking-title);
  margin-bottom: var(--space-loose);
}

h2 {
  font-size: var(--type-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  margin-bottom: var(--space-loose);
}

h3 {
  font-size: var(--type-subhead);
  line-height: var(--lh-subhead);
  letter-spacing: var(--tracking-subhead);
  margin-bottom: var(--space-base);
}

h4 {
  font-size: var(--type-lede);
  line-height: var(--lh-lede);
  letter-spacing: var(--tracking-lede);
  margin-bottom: var(--space-base);
  font-weight: 500;
}

h5, h6 {
  font-size: var(--type-body);
  line-height: var(--lh-body);
  font-weight: 500;
  margin-bottom: var(--space-snug);
}

/* Paragraphs and body content */

p {
  font-family: var(--font-editorial);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  color: var(--ink-secondary);
  margin-bottom: var(--space-loose);
  max-width: var(--container-reading);
}

p:last-child {
  margin-bottom: 0;
}

em, i {
  font-style: italic;
}

strong, b {
  font-weight: 500;
  color: var(--ink-black);
}

/* Links */

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--motion-quick) var(--ease-default);
}

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

/* Lists */

ul, ol {
  font-family: var(--font-editorial);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  color: var(--ink-secondary);
  margin-bottom: var(--space-loose);
  padding-left: var(--space-loose);
  max-width: var(--container-reading);
}

ul li, ol li {
  margin-bottom: var(--space-snug);
}

ul li:last-child, ol li:last-child {
  margin-bottom: 0;
}

/* Definition lists */

dl {
  font-family: var(--font-editorial);
  margin-bottom: var(--space-loose);
}

dt {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-mono);
  color: var(--ink-tertiary);
  font-weight: 500;
  margin-bottom: var(--space-tight);
}

dd {
  font-size: var(--type-body);
  color: var(--ink-secondary);
  margin-bottom: var(--space-loose);
}

/* Blockquotes — semantic default styling */

blockquote {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 300;
  font-size: var(--type-subhead);
  line-height: var(--lh-subhead);
  color: var(--ink-black);
  margin: var(--space-section) 0;
  padding-left: var(--space-loose);
  border-left: 2px solid var(--rule);
  max-width: var(--container-reading);
}

blockquote p {
  font-size: inherit;
  line-height: inherit;
  font-style: inherit;
  color: inherit;
  margin-bottom: var(--space-base);
}

blockquote cite {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-mono);
  color: var(--ink-tertiary);
  font-style: normal;
  margin-top: var(--space-base);
}

/* Code */

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-cream);
  padding: 2px 6px;
  border-radius: 2px;
}

pre {
  display: block;
  padding: var(--space-base);
  overflow-x: auto;
  margin-bottom: var(--space-loose);
}

pre code {
  background: transparent;
  padding: 0;
}

/* Horizontal rules */

hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: var(--space-section) 0;
}

/* Time elements */

time {
  font-family: inherit;
}

/* Address elements */

address {
  font-style: normal;
}

/* Images */

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

/* Forms — semantic defaults */

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

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


/* ============================================================================
   03 — TYPOGRAPHY CLASSES
   ----------------------------------------------------------------------------
   When semantic defaults aren't enough, these classes apply specific
   typographic treatments. Used sparingly.
   ========================================================================= */

.t-caption {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-mono);
  color: var(--ink-tertiary);
  line-height: 1.5;
}

.t-tagline {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-extra);
  color: var(--accent);
  font-weight: 500;
}

.t-display {
  font-family: var(--font-editorial);
  font-size: var(--type-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--ink-black);
  font-weight: 400;
}

.t-lede {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 300;
  font-size: var(--type-lede);
  line-height: var(--lh-lede);
  color: var(--ink-tertiary);
  max-width: var(--container-reading);
}

.t-italic-emphasis {
  font-style: italic;
  color: var(--ink-secondary);
}

.t-tech-bold {
  font-family: var(--font-technical);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-tech);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-mono);
  color: var(--ink-tertiary);
}


/* ============================================================================
   04 — LAYOUT PRIMITIVES
   ----------------------------------------------------------------------------
   Containers, the marginalia grid, and the few approved grid patterns.
   Section 05 of the Style Guide.
   ========================================================================= */

/* Page container — outer wrapper, 1280px max */

.container-page {
  max-width: var(--container-page);
  margin-left: auto;
  margin-right: auto;
  padding-top: var(--space-loose);
  padding-left: var(--space-section);
  padding-right: var(--space-section);
}

/* Article container — narrower for long-form reading, 1080px max */

.container-article {
  max-width: var(--container-article);
  margin-left: auto;
  margin-right: auto;
}

/* Reading column — body text width, 720px max */

.container-reading {
  max-width: var(--container-reading);
}

/* Marginalia grid — 200px label column + content column with wide gap */

.grid-marginalia {
  display: grid;
  grid-template-columns: var(--container-marginalia) 1fr;
  gap: var(--space-wide);
  align-items: baseline;
}

/* Duality grid — two equal columns, no gap, used only on Technical + Creative */

.grid-duality {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

/* Multi-column structured display — flexible column count for terms grids */

.grid-cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-wide); }
.grid-cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-wide); }
.grid-cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-wide); }

/* CTA row — flex layout for primary + secondary button pairs */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-snug);
  margin-top: var(--space-section);
}

/* Section spacing helpers */

.section-spacing {
  margin-bottom: var(--space-page);
}

.section-spacing:last-child {
  margin-bottom: 0;
}


/* ============================================================================
   05 — SITE CHROME (HEADER, FOOTER, NAVIGATION)
   ----------------------------------------------------------------------------
   The invariant elements that appear on every page.
   Section 06 of the Style Guide.
   ========================================================================= */

/* Site header */

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-base) 0 var(--space-wide);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-section);
}

/* Wordmark — BINARY / GLYPH stacked, set in Tomorrow Bold */

.wordmark {
  font-family: var(--font-technical);
  font-weight: 700;
  font-size: var(--type-lede);
  line-height: 0.92;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--ink-black);
  display: inline-block;
}

.wordmark span {
  display: block;
}

.wordmark:hover {
  color: var(--ink-black);
}

/* Site navigation */

.site-nav {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-mono);
  color: var(--ink-tertiary);
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-wide);
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: inherit; /* Override the global ul { font-family: editorial } rule */
}

.site-nav li {
  margin: 0;
}

.site-nav a {
  font-size: var(--type-caption);
  color: var(--ink-tertiary);
  transition: color var(--motion-quick) var(--ease-default);
}

.site-nav a:hover {
  color: var(--ink-black);
}

.site-nav a[aria-current="page"],
.site-nav a.current {
  color: var(--ink-black);
  font-weight: 500;
}

.site-nav a.cta {
  color: var(--accent);
  font-weight: 500;
}

.site-nav a.cta:hover {
  color: var(--accent-deep);
}

/* Site footer */

.site-footer {
  margin-top: var(--space-page);
  padding-top: var(--space-wide);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-mono);
  color: var(--ink-tertiary);
}

.footer-main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-loose);
}

.footer-left {
  line-height: 1.8;
}

.footer-right {
  text-align: right;
  line-height: 1.8;
}

.footer-mark {
  font-family: var(--font-technical);
  font-weight: 700;
  font-size: var(--type-small);
  letter-spacing: 0.04em;
  color: var(--ink-secondary);
  display: block;
  margin-bottom: var(--space-hairline);
}

.footer-sig {
  font-family: var(--font-technical);
  font-weight: 700;
  font-size: var(--type-body);
  letter-spacing: -0.005em;
  color: var(--ink-secondary);
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--space-hairline);
}

.footer-legal {
  margin-top: var(--space-loose);
  padding-top: var(--space-base);
  border-top: 1px solid var(--rule-soft);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-snug);
  color: var(--ink-quiet);
  font-size: 10px;
}

.footer-legal a {
  color: var(--ink-quiet);
  transition: color var(--motion-quick) var(--ease-default);
}

.footer-legal a:hover {
  color: var(--ink-secondary);
}

.footer-legal .sep {
  color: var(--ink-quiet);
  opacity: 0.5;
}


/* ============================================================================
   06 — COMPONENTS
   ----------------------------------------------------------------------------
   The component vocabulary documented in Section 06 of the Style Guide.
   Each component implements one specific pattern.
   ========================================================================= */

/* ---- PAGE-OPENING TITLE BLOCK ---- */

.page-title-block {
  padding: var(--space-page) 0 var(--space-section);
  max-width: var(--container-article);
}

.page-title-block .page-tagline {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-extra);
  color: var(--accent);
  font-weight: 500;
  margin-bottom: var(--space-wide);
}

.page-title-block h1 {
  font-size: var(--type-title);
  line-height: var(--lh-title);
  letter-spacing: var(--tracking-title);
  margin-bottom: var(--space-wide);
}

.page-title-block .page-orientation {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 300;
  font-size: var(--type-lede);
  line-height: var(--lh-lede);
  color: var(--ink-tertiary);
  max-width: var(--container-reading);
}

/* ---- REFERENCE ARTICLE BYLINE ----
   Appears inside .page-title-block, after the h1, on reference articles only.
   Mirrors the essay-byline pattern — mono caps row with border-bottom rule. */

.article-byline {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-mono);
  color: var(--ink-tertiary);
  padding-bottom: var(--space-loose);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-wide);
  display: flex;
  gap: var(--space-loose);
  flex-wrap: wrap;
}

.article-byline .author {
  color: var(--ink-black);
  font-weight: 500;
}


/* ---- HOME PAGE STATEMENT ----
   Used exclusively on the home page. The two-line composition that
   functions as both title and brand assertion. Source Serif for line 1
   (technical-sans assertion), italic for line 2 (editorial warmth).
   Reserved pattern — home only. */

.home-statement {
  padding: var(--space-page) 0 var(--space-section);
  max-width: var(--container-article);
}

.home-statement-text {
  font-family: var(--font-editorial);
  font-size: var(--type-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--ink-black);
  font-weight: 400;
  margin: 0;
}

.home-statement-text .statement-line-1 {
  display: block;
  font-family: var(--font-technical);
  font-weight: 700;
  text-transform: uppercase;
  font-size: calc(var(--type-display) * 0.82);
  letter-spacing: -0.02em;
  line-height: 0.98;
  margin-bottom: var(--space-wide);
}

.home-statement-text .statement-line-2 {
  display: block;
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 300;
  font-size: calc(var(--type-display) * 0.75);
  letter-spacing: var(--tracking-display);
  line-height: 1.02;
  color: var(--ink-secondary);
}

/* Home movement blocks — marginalia bar + reading column content */

.home-movement {
  padding: var(--space-page) 0;
  border-top: 1px solid var(--rule);
}

.home-movement:first-of-type {
  border-top: 1px solid var(--rule);
}

.home-movement .marginalia-bar {
  border-top: none;
  padding-top: 0;
  margin-bottom: var(--space-wide);
}

.home-movement .container-reading p {
  font-size: var(--type-lede);
  line-height: 1.55;
  color: var(--ink-secondary);
  font-weight: 400;
}

.home-movement .container-reading p.t-lede {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 300;
  color: var(--ink-tertiary);
  font-size: var(--type-lede);
  margin-top: var(--space-wide);
}


/* ---- MARGINALIA LABEL ---- */

/* Inline marginalia bar — appears as a horizontal label above a section */

.marginalia-bar {
  display: flex;
  align-items: baseline;
  gap: var(--space-loose);
  padding: var(--space-loose) 0 var(--space-base);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-mono);
  color: var(--ink-tertiary);
}

.marginalia-bar .num {
  color: var(--accent);
  font-weight: 500;
}

.marginalia-bar .name {
  color: var(--ink-secondary);
  font-family: inherit;
  font-weight: 500;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  margin-bottom: 0;
}

/* Marginalia column meta — used in the 200px left column of the marginalia grid */

.marginalia-meta {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-mono);
  color: var(--ink-tertiary);
  line-height: 1.8;
}

.marginalia-meta .num {
  color: var(--accent);
  font-weight: 500;
}

.marginalia-meta .name {
  color: var(--ink-secondary);
  font-weight: 500;
  display: block;
}


/* ---- BUTTONS ---- */

/* Primary CTA — accent background, action button */

.btn-primary {
  display: inline-block;
  background: var(--accent);
  color: var(--bg-paper);
  font-family: var(--font-technical);
  font-weight: 700;
  font-size: var(--type-small);
  letter-spacing: var(--tracking-caps-tech);
  text-transform: uppercase;
  padding: var(--space-base) var(--space-loose);
  border: none;
  cursor: pointer;
  transition: background var(--motion-quick) var(--ease-default);
  min-height: 44px;  /* Accessibility: minimum touch target */
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--accent-deep);
  color: var(--bg-paper);
}

.btn-primary:active {
  transform: scale(0.98);
  transition: transform 100ms var(--ease-out), background var(--motion-quick) var(--ease-default);
}

/* Secondary CTA — outlined, less prominent */

.btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--ink-black);
  font-family: var(--font-technical);
  font-weight: 700;
  font-size: var(--type-small);
  letter-spacing: var(--tracking-caps-tech);
  text-transform: uppercase;
  padding: var(--space-base) var(--space-loose);
  border: 1px solid var(--ink-black);
  cursor: pointer;
  transition: background var(--motion-quick) var(--ease-default),
              color var(--motion-quick) var(--ease-default);
  min-height: 44px;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--ink-black);
  color: var(--bg-paper);
}


/* ---- PULL QUOTE ---- */

.pull-quote {
  margin: var(--space-section) calc(var(--space-section) * -1);
  padding: var(--space-section);
  background: var(--bg-cream);
}

.pull-quote-text,
.pull-quote p {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 300;
  font-size: var(--type-subhead);
  line-height: var(--lh-subhead);
  letter-spacing: var(--tracking-subhead);
  color: var(--ink-black);
  max-width: 880px;
  margin: 0;
}

.pull-quote strong {
  font-weight: 400;
  font-style: normal;
}


/* ---- PRINCIPAL CALLOUT ---- */

/* The dark-background block that marks the principal speaking */

.principal-callout {
  background: var(--ink-black);
  color: var(--bg-paper);
  padding: var(--space-section);
  margin: var(--space-section) 0;
}

.principal-callout .sig-label {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-mono);
  color: var(--accent);
  margin-bottom: var(--space-loose);
  font-weight: 500;
}

.principal-callout h3 {
  font-size: var(--type-subhead);
  line-height: var(--lh-subhead);
  color: var(--bg-paper);
  margin-bottom: var(--space-base);
}

.principal-callout p {
  color: rgba(250, 250, 247, 0.85);
  font-style: italic;
  font-size: var(--type-body);
  max-width: var(--container-reading);
  margin-bottom: var(--space-base);
}

.principal-callout .signature {
  margin-top: var(--space-loose);
  padding-top: var(--space-base);
  border-top: 1px solid rgba(250, 250, 247, 0.15);
  font-family: var(--font-technical);
  font-weight: 700;
  font-size: var(--type-small);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-tech);
  color: var(--bg-paper);
}


/* ---- TERMS GRID ---- */

.terms-grid {
  background: var(--bg-cream);
  padding: var(--space-section);
  margin: var(--space-section) 0;
}

.terms-grid .terms-label {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-mono);
  color: var(--ink-tertiary);
  margin-bottom: var(--space-loose);
}

/* .terms-items can be either a plain container or a <dl> semantic list.
   Reset dl base styles when used as terms-items. */
.terms-items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-loose);
  margin: 0;
  padding: 0;
  max-width: none;
}

.terms-item {
  margin: 0;
}

/* When terms-item wraps <dt> and <dd>, reset browser defaults */
.terms-item dt,
.terms-item dd {
  margin: 0;
  padding: 0;
}

.terms-item .t-label,
.terms-item dt.t-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-mono);
  color: var(--ink-tertiary);
  margin-bottom: var(--space-snug);
  font-weight: 500;
}

.terms-item .t-value,
.terms-item dd.t-value {
  font-family: var(--font-editorial);
  font-size: var(--type-lede);
  color: var(--ink-black);
  line-height: var(--lh-lede);
  font-weight: 400;
  margin: 0;
}

.terms-item .t-detail,
.terms-item dd.t-detail {
  font-family: var(--font-editorial);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-tertiary);
  font-style: italic;
  font-weight: 300;
  margin-top: var(--space-snug);
}


/* ---- FIT TABLE ---- */

.fit-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--rule);
  margin: var(--space-section) 0;
}

.fit-header {
  padding: var(--space-base) var(--space-loose);
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-mono);
  font-weight: 500;
  border-bottom: 1px solid var(--rule);
}

.fit-header.right {
  color: var(--accent);
}

.fit-header.wrong {
  color: var(--ink-tertiary);
  border-left: 1px solid var(--rule);
}

.fit-cell {
  padding: var(--space-base) var(--space-loose);
  font-family: var(--font-editorial);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-secondary);
  border-bottom: 1px solid var(--rule-soft);
}

.fit-cell.wrong {
  border-left: 1px solid var(--rule);
  color: var(--ink-tertiary);
}

.fit-cell:nth-last-child(-n+2) {
  border-bottom: none;
}


/* ---- MOVEMENT BLOCK ---- */
/* The marginalia-column section pattern used across interior pages.
   Left: 200px sidebar (section number + label). Right: content column. */

.movement-block {
  display: grid;
  grid-template-columns: var(--container-marginalia) 1fr;
  gap: var(--space-section);
  padding: var(--space-section) 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
}

.movement-body {
  max-width: var(--container-reading);
}

.movement-body p:not(.principal-sig) {
  font-size: var(--type-lede);
  line-height: 1.55;
  color: var(--ink-secondary);
  margin-bottom: var(--space-loose);
  font-weight: 400;
}

.movement-body p.opener {
  font-size: var(--type-subhead);
  line-height: var(--lh-subhead);
  letter-spacing: var(--tracking-subhead);
  color: var(--ink-black);
  margin-bottom: var(--space-loose);
}

p.italic-close {
  font-style: italic;
  font-weight: 300;
  color: var(--ink-tertiary);
  margin-top: var(--space-loose);
}

.movement-body p:last-child {
  margin-bottom: 0;
}

/* CTA row within a movement body */
.movement-body .cta-row,
.essay-close .cta-row {
  margin-top: var(--space-loose);
}


/* ---- DETAIL ROWS ---- */
/* Tabular label + value lists used in Practice terms and work categories. */

.detail-list {
  margin: var(--space-loose) 0 var(--space-base);
  border-top: 1px solid var(--rule);
}

.detail-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-loose);
  padding: var(--space-loose) 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}

.detail-label {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-mono);
  color: var(--accent);
  font-weight: 500;
}

.detail-value {
  font-family: var(--font-editorial);
  font-size: var(--type-lede);
  line-height: 1.35;
  color: var(--ink-black);
  font-weight: 400;
  margin-bottom: var(--space-snug);
}

.detail-note {
  font-family: var(--font-editorial);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-tertiary);
  font-style: italic;
  font-weight: 300;
}

.detail-body {
  font-family: var(--font-editorial);
  font-size: var(--type-body);
  line-height: 1.55;
  color: var(--ink-secondary);
}

.detail-action {
  margin-top: var(--space-loose);
}


/* ---- PRINCIPAL VOICE ---- */
/* Modifier class on .movement-body when the principal speaks in first person.
   Body paragraphs shift to italic; the opening intro stays upright. */

.principal-voice p:not(.principal-sig) {
  font-style: italic;
  color: var(--ink-secondary);
}

.principal-voice p:first-child {
  font-style: normal;
  color: var(--ink-black);
}

.principal-sig {
  margin-top: var(--space-loose);
  padding-top: var(--space-loose);
  border-top: 1px solid var(--rule);
  font-family: var(--font-technical);
  font-weight: 700;
  font-size: var(--type-small);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-tech);
  color: var(--ink-tertiary);
}


/* ---- DUALITY BLOCK ---- */
/* Reserved exclusively for the Technical + Creative page */

.duality-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--rule);
  margin: var(--space-section) 0;
}

.duality-half {
  padding: var(--space-section) var(--space-wide);
  min-height: 360px;
}

.duality-half.binary {
  background: var(--ink-black);
  color: var(--bg-paper);
}

.duality-half.glyph {
  background: var(--bg-cream);
  color: var(--ink-black);
}

/* Explicit colors on every duality element — do not rely on inheritance.
   Global p/h2 rules override inheritance; these must beat them explicitly. */

.duality-half .half-label {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-wide);
  margin-bottom: var(--space-loose);
  max-width: none;
  opacity: 0.55;
}

.duality-half.binary .half-label { color: var(--bg-paper); }
.duality-half.glyph  .half-label { color: var(--ink-black); }

.duality-half .half-name {
  font-family: var(--font-editorial);
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: var(--tracking-heading);
  font-weight: 400;
  margin-bottom: var(--space-loose);
  max-width: none;
}

.duality-half.binary .half-name { color: var(--bg-paper); }
.duality-half.glyph  .half-name { color: var(--ink-black); }

.duality-half.glyph .half-name {
  font-style: italic;
}

.duality-half .half-body p {
  font-size: 18px;
  line-height: 1.55;
  margin-bottom: var(--space-base);
  font-weight: 400;
  max-width: none;
}

.duality-half.binary .half-body p {
  font-family: var(--font-technical);
  font-weight: 400;
  color: rgba(250, 250, 247, 0.92);
  font-size: 17px;
  letter-spacing: -0.005em;
}

.duality-half.glyph .half-body p {
  font-family: var(--font-editorial);
  color: var(--ink-secondary);
}

.duality-half .half-body p.closing {
  margin-top: var(--space-loose);
  padding-top: var(--space-loose);
  border-top: 1px solid rgba(250, 250, 247, 0.18);
}

.duality-half.glyph .half-body p.closing {
  border-top: 1px solid var(--rule);
}

/* ---- DUALITY BLOCK — BRIEF MODIFIER ---- */
/* Used on /technical-creative/in-practice/ only.
   Preserves the full dark/light color treatment from the parent page.
   Only differences: no minimum height, tighter vertical margin. */

.duality-block.brief {
  margin: var(--space-base) 0;
}

.duality-block.brief .duality-half {
  min-height: 0;
}

.duality-block.brief .duality-half .half-body p.closing {
  border-top: 1px solid var(--rule);
}


/* ---- RESOLUTION BLOCK ---- */
/* Full-width text section used in Technical + Creative Movement 03.
   The resolution prose after the two duality columns. */

.resolution-block {
  max-width: var(--container-article);
  padding: var(--space-section) 0 var(--space-page);
}

.resolution-block p {
  font-family: var(--font-editorial);
  font-size: var(--type-lede);
  line-height: 1.55;
  color: var(--ink-secondary);
  margin-bottom: var(--space-loose);
  font-weight: 400;
}

.resolution-block p.opener {
  font-size: var(--type-subhead);
  line-height: var(--lh-subhead);
  letter-spacing: var(--tracking-subhead);
  color: var(--ink-black);
  margin-bottom: var(--space-loose);
}

.resolution-block p.pivot {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: var(--type-title);
  line-height: var(--lh-title);
  letter-spacing: var(--tracking-title);
  color: var(--ink-black);
  margin: var(--space-page) 0;
  font-weight: 500;
  max-width: none;
}

.resolution-block p:last-child {
  margin-bottom: 0;
}

.resolution-block .cta-row {
  margin-top: var(--space-section);
  padding-top: var(--space-loose);
  border-top: 1px solid var(--rule);
}


/* ---- IN PRACTICE — SERVICE SECTION ---- */
/* Prose wrapper for the framing and closing paragraphs within each service
   movement on /technical-creative/in-practice/. Lighter than resolution-block
   — body size, less vertical space, fits between repeating duality blocks. */

.practice-section {
  max-width: var(--container-article);
  padding: var(--space-loose) 0 var(--space-wide);
}


/* ---- CONTEXT LINK ---- */
/* Inline contextual navigation — italic line pointing to a related page.
   Appears after CTA rows or section closers. Visually separated from
   adjacent buttons with a soft rule and spacing. */

.context-link {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: var(--type-body);
  color: var(--ink-tertiary);
  margin-top: var(--space-wide);
  padding-top: var(--space-wide);
  border-top: 1px solid var(--rule-soft);
  max-width: var(--container-reading);
}

.context-link a {
  color: var(--ink-secondary);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--rule);
}

.context-link a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}


/* ---- JOURNAL ENTRY ---- */
/* Used in the Writing index */

.journal-entry {
  display: grid;
  grid-template-columns: var(--container-marginalia) 1fr;
  gap: var(--space-wide);
  padding: var(--space-wide) 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
  transition: background var(--motion-quick) var(--ease-default);
}

.journal-entry .journal-meta {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-mono);
  color: var(--ink-tertiary);
  line-height: 1.8;
}

.journal-entry .journal-meta .label {
  color: var(--accent);
  font-weight: 500;
  display: block;
  margin-bottom: var(--space-hairline);
}

.journal-entry .journal-meta .date {
  color: var(--ink-secondary);
  font-weight: 500;
  display: block;
  margin-bottom: var(--space-hairline);
}

.journal-entry .journal-content {
  max-width: var(--container-reading);
}

.journal-entry .journal-title {
  font-family: var(--font-editorial);
  font-size: var(--type-subhead);
  line-height: var(--lh-subhead);
  letter-spacing: var(--tracking-subhead);
  color: var(--ink-black);
  font-weight: 400;
  margin-bottom: var(--space-snug);
  transition: color var(--motion-quick) var(--ease-default);
}

.journal-entry .journal-description {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 300;
  font-size: var(--type-body);
  line-height: 1.55;
  color: var(--ink-tertiary);
}

.journal-entry:hover .journal-title {
  color: var(--accent);
}


/* ---- EMAIL LINK ---- */
/* Large underlined email address used on the Begin page */

.email-link {
  font-family: var(--font-editorial);
  font-size: var(--type-lede);
  color: var(--ink-black);
  border-bottom: 1px solid var(--rule);
  overflow-wrap: anywhere;
  padding-bottom: var(--space-hairline);
  transition: color var(--motion-quick) var(--ease-default),
              border-color var(--motion-quick) var(--ease-default);
}

.email-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}


/* ---- SUBSCRIBE BLOCK ---- */
/* Inline email subscription — cream background, used on Writing index */

.subscribe-block {
  background: var(--bg-cream);
  padding: var(--space-section);
  margin: var(--space-section) 0;
}

[data-getsitecontrol-inline] {
  margin: var(--space-section) 0;
}

.subscribe-block .subscribe-headline {
  font-family: var(--font-editorial);
  font-size: var(--type-subhead);
  line-height: var(--lh-subhead);
  letter-spacing: var(--tracking-subhead);
  color: var(--ink-black);
  font-weight: 400;
  margin-bottom: var(--space-base);
  max-width: none;
}

.subscribe-block .subscribe-orientation {
  font-family: var(--font-editorial);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  color: var(--ink-secondary);
  margin-bottom: var(--space-loose);
  max-width: var(--container-reading);
}

.subscribe-form {
  display: flex;
  gap: var(--space-snug);
  max-width: 540px;
  align-items: stretch;
}

.subscribe-form input[type="email"] {
  flex: 1;
  padding: var(--space-base);
  font-family: var(--font-editorial);
  font-size: var(--type-body);
  color: var(--ink-black);
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: 0;
  min-height: 44px;
  transition: border-color var(--motion-quick) var(--ease-default);
}

.subscribe-form input[type="email"]:focus {
  outline: none;
  border-color: var(--ink-black);
}

.subscribe-form button {
  background: var(--accent);
  color: var(--bg-paper);
  font-family: var(--font-technical);
  font-weight: 700;
  font-size: var(--type-small);
  letter-spacing: var(--tracking-caps-tech);
  text-transform: uppercase;
  padding: 0 var(--space-loose);
  border: none;
  cursor: pointer;
  min-height: 44px;
  transition: background var(--motion-quick) var(--ease-default);
}

.subscribe-form button:hover {
  background: var(--accent-deep);
}


/* ---- FORM ---- */

.form-field {
  margin-bottom: var(--space-loose);
}

.form-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-mono);
  color: var(--ink-tertiary);
  margin-bottom: var(--space-snug);
  font-weight: 500;
}

.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: var(--space-base);
  font-family: var(--font-editorial);
  font-size: var(--type-body);
  color: var(--ink-black);
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: 0;
  transition: border-color var(--motion-quick) var(--ease-default);
  min-height: 44px;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--ink-black);
}

.form-field textarea {
  min-height: 140px;
  resize: vertical;
  line-height: var(--lh-body);
}


/* ============================================================================
   07 — ESSAY-SPECIFIC VISUAL MOMENTS
   ----------------------------------------------------------------------------
   Components that appear only on long-form essay pages.
   Section 06 of the Style Guide.
   ========================================================================= */

/* ---- ESSAY OPENER ---- */

.essay-meta {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-mono);
  color: var(--ink-tertiary);
  margin-bottom: var(--space-loose);
  display: flex;
  gap: var(--space-loose);
  flex-wrap: wrap;
}

.essay-meta .label {
  color: var(--accent);
  font-weight: 500;
}

.essay-meta .item .highlight {
  color: var(--ink-secondary);
  font-weight: 500;
}

.essay-title {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: 88px;
  line-height: 0.98;
  letter-spacing: var(--tracking-display);
  color: var(--ink-black);
  margin-bottom: var(--space-wide);
  max-width: var(--container-article);
}

.essay-byline {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-mono);
  color: var(--ink-tertiary);
  padding-bottom: var(--space-loose);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-section);
  display: flex;
  gap: var(--space-loose);
  flex-wrap: wrap;
}

.essay-byline .author {
  color: var(--ink-black);
  font-weight: 500;
}


/* ---- EPIGRAPH BLOCK ---- */

.epigraph {
  padding: var(--space-wide) 0 var(--space-section);
  margin-bottom: var(--space-section);
  border-bottom: 1px solid var(--rule);
}

.epigraph .epigraph-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-wide);
  color: var(--ink-tertiary);
  margin-bottom: var(--space-loose);
}

.epigraph p {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 300;
  font-size: 36px;
  line-height: 1.25;
  letter-spacing: var(--tracking-subhead);
  color: var(--ink-black);
  max-width: 880px;
  margin: 0;
}


/* ---- DRAPER BLOCK ---- */

.draper-block {
  margin: var(--space-section) calc(var(--space-section) * -1);
  padding: var(--space-page) var(--space-section);
  background: var(--ink-black);
  color: var(--bg-paper);
}

.draper-block .draper-label {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-wide);
  color: var(--accent);
  margin-bottom: var(--space-wide);
}

.draper-block .draper-text {
  font-family: var(--font-technical);
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
  color: var(--bg-paper);
  margin-bottom: var(--space-loose);
}

.draper-block .draper-text span {
  display: block;
}

.draper-block .draper-attribution {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-mono);
  color: rgba(250, 250, 247, 0.55);
}


/* ---- DIAGNOSTIC BLOCK ---- */

.diagnostic-block {
  margin: var(--space-section) 0;
  padding: var(--space-section) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-align: center;
}

.diagnostic-block .diagnostic-label {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-extra);
  color: var(--accent);
  margin-bottom: var(--space-loose);
  font-weight: 500;
}

.diagnostic-block .diagnostic-question {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 300;
  font-size: 44px;
  line-height: 1.15;
  letter-spacing: var(--tracking-heading);
  color: var(--ink-black);
  max-width: var(--container-reading);
  margin: 0 auto;
}

.diagnostic-block .diagnostic-question span {
  display: block;
}


/* ---- SPIKE BLOCK ---- */

.spike-block {
  margin: var(--space-section) calc(var(--space-section) * -1);
  padding: 120px var(--space-section);
  background: var(--bg-cream);
  text-align: center;
}

.spike-block .spike-text {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: 56px;
  line-height: 1.15;
  letter-spacing: var(--tracking-heading);
  color: var(--ink-black);
  max-width: 880px;
  margin: 0 auto;
}

.spike-block .spike-text span {
  display: block;
}


/* ---- ESSAY PAGE WRAPPER ---- */

.essay-page {
  max-width: 1080px;
  padding: var(--space-section) 0 0;
}


/* ---- ESSAY MOVEMENTS ---- */
/* Single-column movements for long-form essays. Different from .movement-block
   which uses a two-column marginalia grid. */

.essay-movement {
  margin-bottom: var(--space-page);
}

.essay-movement-meta {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-mono);
  color: var(--ink-tertiary);
  margin-bottom: var(--space-base);
  display: flex;
  gap: var(--space-loose);
  align-items: baseline;
}

.essay-movement-meta .num {
  color: var(--accent);
  font-weight: 500;
}

.essay-movement-meta .name {
  color: var(--ink-secondary);
  font-family: inherit;
  font-weight: 500;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  margin: 0;
  padding: 0;
}

.essay-movement-body {
  max-width: 720px;
}

.essay-movement-body p {
  font-family: var(--font-editorial);
  font-size: 20px;
  line-height: 1.65;
  color: var(--ink-secondary);
  margin-bottom: var(--space-loose);
  font-weight: 400;
}

.essay-movement-body p:last-child {
  margin-bottom: 0;
}

.essay-movement-body p em {
  font-style: italic;
  color: var(--ink-secondary);
}

.essay-movement-body p strong {
  font-weight: 500;
  color: var(--ink-black);
}


/* ---- LEGAL PAGES ---- */

.legal-content {
  max-width: var(--container-reading);
  margin: var(--space-section) 0 var(--space-page);
}

.legal-content h2 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-mono);
  color: var(--ink-tertiary);
  margin-top: var(--space-section);
  margin-bottom: var(--space-base);
  padding-top: var(--space-loose);
  padding-bottom: var(--space-base);
  border-top: 1px solid var(--rule);
  border-bottom: none;
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content p {
  font-family: var(--font-editorial);
  font-size: var(--type-body);
  line-height: 1.65;
  color: var(--ink-secondary);
  margin-bottom: var(--space-base);
}

.legal-content p strong {
  color: var(--ink-black);
  font-weight: 600;
}

.legal-content ul {
  font-family: var(--font-editorial);
  font-size: var(--type-body);
  line-height: 1.65;
  color: var(--ink-secondary);
  padding-left: var(--space-loose);
  margin-bottom: var(--space-base);
}

.legal-content ul li {
  margin-bottom: var(--space-snug);
}

.legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-loose);
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.legal-content table th {
  text-align: left;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-mono);
  color: var(--ink-tertiary);
  padding: var(--space-snug) var(--space-base);
  border-bottom: 1px solid var(--rule);
  font-weight: 500;
}

.legal-content table td {
  padding: var(--space-snug) var(--space-base);
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-secondary);
  vertical-align: top;
}

.legal-content .legal-meta {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-mono);
  color: var(--ink-tertiary);
  margin-bottom: var(--space-section);
  padding-bottom: var(--space-base);
  border-bottom: 1px solid var(--rule-soft);
}

.legal-content .legal-contact {
  margin-top: var(--space-section);
  padding-top: var(--space-loose);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--ink-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-mono);
  line-height: 1.8;
}


/* ---- ESSAY CLOSE ---- */

.essay-close {
  margin-top: var(--space-section);
  padding-top: var(--space-section);
  border-top: 1px solid var(--rule);
}



/* ---- BACK LINK ---- */

.back-link {
  margin-top: var(--space-section);
  padding-top: var(--space-loose);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-mono);
  color: var(--ink-tertiary);
}

.back-link a {
  color: var(--ink-secondary);
  font-weight: 500;
  transition: color var(--motion-quick) var(--ease-default);
}

.back-link a:hover {
  color: var(--accent);
}


/* ---- ESSAY RESPONSIVE ---- */

@media (max-width: 719px) {
  .essay-movement-body p {
    font-size: 18px;
  }

  .essay-close .essay-close-cta-text {
    font-size: 18px;
  }
}

@media (min-width: 720px) and (max-width: 1199px) {
  .essay-movement-body p {
    font-size: 19px;
  }
}


/* ============================================================================
   08 — MOTION
   ----------------------------------------------------------------------------
   The five approved animation behaviors.
   Section 07 of the Style Guide.
   ========================================================================= */

/* Hover transitions are defined inline on the relevant components above.
   Focus states defined here. */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* Remove default focus ring; rely on focus-visible only */

:focus:not(:focus-visible) {
  outline: none;
}

/* Reduced motion override — Section 07 commitment to honoring user preferences */

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


/* ============================================================================
   09 — ACCESSIBILITY UTILITIES
   ----------------------------------------------------------------------------
   Helper classes for accessibility commitments.
   Section 08 of the Style Guide.
   ========================================================================= */

/* Visually hidden — content available to screen readers but not visually shown.
   Used for skip links and other accessibility-first content. */

.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 — visible only when focused, allows keyboard users to bypass nav */

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--ink-black);
  color: var(--bg-paper);
  padding: var(--space-base) var(--space-loose);
  font-family: var(--font-technical);
  font-weight: 700;
  font-size: var(--type-small);
  letter-spacing: var(--tracking-caps-tech);
  text-transform: uppercase;
  transform: translateY(-100%);
  transition: transform var(--motion-quick) var(--ease-default);
  z-index: 100;
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--bg-paper);
}


/* ============================================================================
   10 — RESPONSIVE BEHAVIOR
   ----------------------------------------------------------------------------
   Three breakpoints based on content needs, not device categories.
   Mobile-first base; progressive enhancement upward.
   Section 02 and 05 of the Style Guide.
   ========================================================================= */

/* ---- COMPACT (under 720px) — MOBILE FOUNDATION ----
   This is the base. The styles above describe the default, which targets
   larger viewports. The overrides below adjust for compact screens. */

@media (max-width: 719px) {

  /* Container padding tightens */
  .container-page {
    padding-left: var(--space-loose);
    padding-right: var(--space-loose);
  }

  /* Typography scales down using clamp would be cleaner, but explicit
     sizing for compact viewports gives more control */

  h1 {
    font-size: 44px;
    line-height: 1.05;
  }

  h2 {
    font-size: 32px;
  }

  h3 {
    font-size: var(--type-lede);
  }

  p {
    font-size: 17px;
  }

  .page-title-block h1 {
    font-size: 44px;
  }

  .page-title-block .page-orientation {
    font-size: 18px;
  }

  /* Home statement scales down significantly on compact viewports */
  .home-statement {
    padding: var(--space-section) 0 var(--space-loose);
  }

  .home-statement-text .statement-line-1 {
    font-size: 48px;
    margin-bottom: var(--space-base);
  }

  .home-statement-text .statement-line-2 {
    font-size: 44px;
  }

  .home-movement {
    padding: var(--space-section) 0;
  }

  .home-movement .container-reading p {
    font-size: 18px;
  }

  /* Site header stacks vertically on compact */
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-base);
  }

  /* .site-nav ul is the flex container, not .site-nav */
  .site-nav ul {
    flex-wrap: wrap;
    gap: var(--space-base);
  }

  /* Marginalia grid collapses to single column */
  .grid-marginalia {
    grid-template-columns: 1fr;
    gap: var(--space-base);
  }

  /* Duality grid stacks vertically */
  .duality-block {
    grid-template-columns: 1fr;
  }

  .duality-half {
    padding: var(--space-loose);
    min-height: auto;
  }

  /* Multi-column grids collapse */
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr;
  }

  .grid-cols-2 {
    grid-template-columns: 1fr;
  }

  .terms-items {
    grid-template-columns: 1fr 1fr;
  }

  /* Pull quote and other negative-margin breakouts adjust */
  .pull-quote,
  .draper-block,
  .spike-block {
    margin-left: calc(var(--space-loose) * -1);
    margin-right: calc(var(--space-loose) * -1);
    padding-left: var(--space-loose);
    padding-right: var(--space-loose);
  }

  .pull-quote-text,
  .pull-quote p {
    font-size: var(--type-lede);
  }

  /* Essay-specific responsive adjustments */
  .essay-title {
    font-size: 44px;
  }

  .epigraph p {
    font-size: 22px;
  }

  .draper-block .draper-text {
    font-size: 32px;
  }

  .diagnostic-block .diagnostic-question {
    font-size: 26px;
  }

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

  .spike-block .spike-text {
    font-size: 28px;
  }

  /* Journal entry stacks */
  .journal-entry {
    grid-template-columns: 1fr;
    gap: var(--space-snug);
  }

  /* Subscribe form stacks vertically on compact */
  .subscribe-form {
    flex-direction: column;
    max-width: 100%;
  }

  .subscribe-form input[type="email"],
  .subscribe-form button {
    width: 100%;
  }

  /* Footer stacks */
  .footer-main {
    flex-direction: column;
  }

  .footer-right {
    text-align: left;
  }

  /* Movement block collapses to single column */
  .movement-block {
    grid-template-columns: 1fr;
    gap: var(--space-loose);
  }

  /* Detail rows collapse */
  .detail-row {
    grid-template-columns: 1fr;
    gap: var(--space-snug);
  }

  /* Fit table stacks */
  .fit-table {
    grid-template-columns: 1fr;
  }

  .fit-header.wrong,
  .fit-cell.wrong {
    border-left: none;
    border-top: 1px solid var(--rule);
  }

  /* Reduce inner padding on heavy blocks */
  .principal-callout,
  .subscribe-block,
  .terms-grid {
    padding: var(--space-loose);
  }

  /* Page title block needs less top padding on compact */
  .page-title-block {
    padding-top: var(--space-section);
  }

  /* CTA row buttons need more breathing room when stacked */
  .cta-row {
    gap: var(--space-base);
  }
}


/* ---- STANDARD (720px to 1199px) — MULTI-COLUMN PATTERNS RETURN ----
   Default styles above apply at this range with minor adjustments. */

@media (min-width: 720px) and (max-width: 1199px) {

  /* Container padding tightens at tablet so content has room */
  .container-page {
    padding-left: var(--space-wide);
    padding-right: var(--space-wide);
  }

  /* Nav wraps at tablet if items don't fit in one line */
  .site-nav ul {
    flex-wrap: wrap;
    gap: var(--space-base);
  }

  /* Terms grid uses 2 columns at tablet sizes */
  .terms-items {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Some titles slightly smaller at tablet */
  .essay-title {
    font-size: 64px;
  }

  /* Movement block sidebar narrows slightly at tablet */
  .movement-block {
    gap: var(--space-wide);
  }

  /* Fluid scaling for large display type at tablet range */
  .home-statement-text .statement-line-1 {
    font-size: clamp(48px, 7vw + 1rem, calc(var(--type-display) * 0.82));
  }

  .home-statement-text .statement-line-2 {
    font-size: clamp(44px, 6vw + 1rem, calc(var(--type-display) * 0.75));
  }

  .epigraph p {
    font-size: clamp(24px, 3vw + 0.5rem, 36px);
  }

  .draper-block .draper-text {
    font-size: clamp(36px, 5vw + 0.5rem, 64px);
  }

  .diagnostic-block .diagnostic-question {
    font-size: clamp(32px, 4vw + 0.5rem, 44px);
  }

  .spike-block .spike-text {
    font-size: clamp(32px, 4vw + 0.5rem, 48px);
  }
}


/* ---- GENEROUS (1200px and above) — FULL COMPOSITION ----
   Base styles apply at full intended scale. No additional overrides needed. */

@media (max-width: 719px) {
  .resolution-block p.pivot {
    font-size: 44px;
    margin: var(--space-section) 0;
  }
}

@media (min-width: 720px) and (max-width: 1199px) {
  .resolution-block p.pivot {
    font-size: clamp(44px, 5vw + 1rem, var(--type-title));
  }
}


/* ---- INTERMEDIATE TABLET (720px to 1023px) — NARROW MULTI-COLUMN ----
   Overrides the standard block for layouts that need to simplify before
   reaching full sidebar widths. Inserted after standard so it wins at
   720–1023px while standard applies at 1024–1199px. */

@media (min-width: 720px) and (max-width: 1023px) {

  /* Stack the header at narrow tablet to prevent nav wrapping */
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-base);
  }

  /* Movement block and journal sidebar narrow to fit */
  .movement-block {
    grid-template-columns: 120px 1fr;
    gap: var(--space-loose);
  }

  .journal-entry {
    grid-template-columns: 120px 1fr;
  }

  /* Detail rows collapse at narrow tablet */
  .detail-row {
    grid-template-columns: 1fr;
    gap: var(--space-snug);
  }

  /* Duality block stacks vertically */
  .duality-block {
    grid-template-columns: 1fr;
  }

  .duality-half {
    padding: var(--space-loose);
    min-height: auto;
  }

  /* Negative-margin breakouts reduced to match container padding */
  .pull-quote,
  .draper-block,
  .spike-block {
    margin-left: calc(var(--space-wide) * -1);
    margin-right: calc(var(--space-wide) * -1);
    padding-left: var(--space-wide);
    padding-right: var(--space-wide);
  }

  /* Fit table stacks */
  .fit-table {
    grid-template-columns: 1fr;
  }

  .fit-header.wrong,
  .fit-cell.wrong {
    border-left: none;
    border-top: 1px solid var(--rule);
  }
}


/* ---- FLUID TYPOGRAPHY ----
   Smooth interpolation between breakpoints using clamp().
   Applied selectively to type that benefits from smooth scaling. */

@media (min-width: 720px) {
  h1, .page-title-block h1 {
    font-size: clamp(44px, 4vw + 1rem, var(--type-title));
  }

  h2 {
    font-size: clamp(32px, 3vw + 0.5rem, var(--type-heading));
  }

  .essay-title {
    font-size: clamp(48px, 5vw + 1rem, 88px);
  }
}

/* Terms grid steps through 3 columns at the narrow-generous range before
   expanding to 4 at the generous breakpoint */

@media (min-width: 1200px) and (max-width: 1279px) {
  .terms-items {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ============================================================================
   END OF STYLESHEET

   Total: ~1,100 lines of organized, commented CSS.
   Implements: every documented decision from the Visual Style Guide.

   To extend: read the relevant section of the Style Guide first.
   To modify tokens: update Section 01 only.
   To add components: follow the patterns established in Section 06.
   ========================================================================= */