components.css

/* ============================================================
   components.css. Simon Ives / Phronesis
   Component layer for the Material Design 3 refresh.
   Load order: fonts.css → tokens.css → components.css
   Replaces style.css and style-v2.css in full.
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-family: var(--font-body);
  font-size: 17.5px;      /* comfortably above the 16px floor */
  font-weight: 400;
  line-height: 1.75;      /* above the 1.5 floor */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--md-motion-medium) var(--md-motion-standard),
              color var(--md-motion-medium) var(--md-motion-standard);
}

::selection { background: rgba(196, 150, 42, .28); }

/* ============================================================
   TYPE SCALE
   M3's display / headline / title / body / label proportions,
   applied to Cormorant Garamond and Inter. Never justified.
   ============================================================ */

h1, h2, h3, .display, .headline {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  text-align: left;
  text-wrap: pretty;
}

h1 {
  font-size: clamp(40px, 5.2vw, 62px);
  line-height: 1.07;
  letter-spacing: -.012em;
  margin: 0 0 var(--space-7);
}

h2 {
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.15;
  letter-spacing: -.008em;
  margin: 0 0 var(--space-6);
}

h3 {
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.2;
  margin: 0 0 var(--space-5);
}

/* Title. Inter, for component headings inside cards */
h4, .title-large {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.45;
  letter-spacing: .01em;
  color: var(--md-sys-color-on-surface);
  margin: 0 0 var(--space-3);
}

p {
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.75;
  color: var(--md-sys-color-on-surface);
  margin: 0 0 var(--space-6);
  text-align: left;
  text-wrap: pretty;
}

.lead {
  font-size: clamp(16px, 1vw + 14px, 18px);
  line-height: 1.7;
  color: var(--md-sys-color-on-surface-variant);
}

/* Label. Tracked Inter. Metadata and eyebrows only, never body. */
.eyebrow, h5, .label-large {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
  margin: 0 0 var(--space-5);
}

code {
  font-family: var(--font-mono);
  font-size: 15.5px;
  padding: 2px 6px;
  border-radius: var(--md-shape-extra-small);
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
}

a {
  color: var(--md-sys-color-primary);
  text-decoration: none;
  transition: opacity var(--md-motion-short) var(--md-motion-standard),
              color var(--md-motion-short) var(--md-motion-standard);
}
a:hover { opacity: .78; }

/* Inline prose links get a hairline underline rather than colour alone.
   Also covers card body copy (the Now page's .card-filled/.card-outlined
   text isn't wrapped in .prose, since that would cap the card grid's width
   along with the reading column), wherever link-vs-text colour contrast
   alone would fall short of the WCAG 1.4.1 non-colour requirement. */
.prose p > a,
.prose li > a,
.card-filled p > a:not(.btn-filled):not(.btn-outlined):not(.cta-button),
.card-outlined p > a:not(.btn-filled):not(.btn-outlined):not(.cta-button) {
  border-bottom: 1px solid rgba(var(--md-state-rgb), .28);
}

/* ============================================================
   LAYOUT
   ============================================================ */

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

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

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

.alternate-bg { background-color: var(--md-sys-color-surface-container-low); }

/* ============================================================
   THE MIDNIGHT BAND
   The site has no photography, so full-bleed Midnight sections
   carry the visual weight instead: heroes, pull-quote bands,
   the footer, the 404. STYLE_GUIDE.md §2. No hero images.
   ============================================================ */

.on-midnight {
  position: relative;
  overflow: hidden;
  background-color: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
  border: none;
}
.on-midnight h1,
.on-midnight h2,
.on-midnight h3,
.on-midnight p,
.on-midnight li { color: var(--md-sys-color-inverse-on-surface); }
.on-midnight p { opacity: .92; }
.on-midnight .eyebrow,
.on-midnight a { color: var(--brand-aurum); }  /* 5.9:1 on Midnight */
.on-midnight .lead { color: var(--md-sys-color-inverse-on-surface); }

/* ============================================================
   THE Φ MARK
   Identity element, not decoration. STYLE_GUIDE.md §2.
   ============================================================ */

.phi-mark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  color: var(--md-sys-color-primary);
  position: relative;
  top: -1px;
}

/* Large background watermark. Always aria-hidden */
.phi-watermark {
  position: absolute;
  right: -.08em;
  top: 50%;
  transform: translateY(-48%);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(240px, 36vw, 520px);
  line-height: 1;
  color: var(--brand-aurum);
  opacity: .085;
  pointer-events: none;
  user-select: none;
}
.phi-watermark--centred {
  right: auto;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(320px, 46vw, 620px);
  opacity: .09;
}
.phi-watermark--card {
  right: -.1em;
  top: auto;
  bottom: -.34em;
  transform: none;
  font-size: 200px;
  opacity: .10;
}

/* Section divider. Φ between two hairlines */
.phi-break {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: var(--reading-max);
  margin: var(--space-14) auto;
}
.phi-break::before,
.phi-break::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--md-sys-color-outline-variant);
}
.phi-break > span {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--md-sys-color-gold-rule);
}
.on-midnight .phi-break::before,
.on-midnight .phi-break::after { background: rgba(196, 150, 42, .45); }

/* ============================================================
   THE POLYRHYTHM RULE
   Three Aurum hairlines of decreasing length. One per clock in
   the polyrhythm practice. This is the site's section mark, used
   in place of a plain <hr>. Decorative: aria-hidden.
   ============================================================ */

.phi-rhythm {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0 0 var(--space-7);
}
.phi-rhythm > i {
  display: block;
  height: 1.5px;
  background: var(--md-sys-color-gold-rule);
}
.phi-rhythm > i:nth-child(1) { width: 56px; }
.phi-rhythm > i:nth-child(2) { width: 32px; opacity: .55; }
.phi-rhythm > i:nth-child(3) { width: 14px; opacity: .30; }

/* The literal three-clock diagram, used once, on Approach */
.polyrhythm-diagram {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0 0 var(--space-6);
}
.polyrhythm-diagram > div { display: flex; gap: 5px; }
.polyrhythm-diagram > div > i { display: block; height: 2px; background: var(--md-sys-color-gold-rule); }
.polyrhythm-diagram > div:nth-child(1) > i { width: 34px; }
.polyrhythm-diagram > div:nth-child(2) > i { width: 52px; opacity: .6; }
.polyrhythm-diagram > div:nth-child(2) > i:last-child { width: 34px; }
.polyrhythm-diagram > div:nth-child(3) > i { width: 82px; opacity: .32; }
.polyrhythm-diagram > div:nth-child(3) > i:last-child { width: 64px; }

/* Legacy single-rule marker, retained where a lighter mark is wanted */
.section-marker {
  border: none;
  border-top: 1.5px solid var(--md-sys-color-gold-rule);
  width: 56px;
  margin: 0 0 var(--space-6);
}

/* ============================================================
   M3 TOP APP BAR
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--md-sys-color-surface);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  transition: box-shadow var(--md-motion-short) var(--md-motion-standard),
              background-color var(--md-motion-short) var(--md-motion-standard),
              border-color var(--md-motion-short) var(--md-motion-standard);
}

/* .scrolled is toggled in JS at scrollY > 10. M3 on-scroll elevation */
.site-header.scrolled {
  border-bottom-color: transparent;
  box-shadow: var(--md-elevation-1);
}

.site-header nav.container,
.site-header .container {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--md-sys-color-on-surface);
  white-space: nowrap;
}
.logo::before { content: none; }   /* kills the old gold hairline */

.nav-container { display: flex; align-items: center; gap: 2px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  display: inline-block;
  padding: var(--space-2) 14px;
  border-radius: var(--md-shape-small);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--md-sys-color-on-surface-variant);
  transition: background-color var(--md-motion-short) var(--md-motion-standard),
              color var(--md-motion-short) var(--md-motion-standard);
}
.nav-links a::after { content: none; }  /* kills the old sliding underline */

/* M3 state layers */
.nav-links a:hover { background: rgba(var(--md-state-rgb), var(--md-state-hover)); color: var(--md-sys-color-on-surface); opacity: 1; }
.nav-links a:active { background: rgba(var(--md-state-rgb), var(--md-state-pressed)); }
.nav-links a.active {
  color: var(--md-sys-color-primary);
  background: rgba(var(--md-state-rgb), var(--md-state-focus));
}
.nav-links a.phronesis-link { color: var(--md-sys-color-primary); }

/* Icon buttons. 40px target, pill state layer */
#theme-toggle,
.menu-toggle,
.header-social a {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--md-shape-full);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  transition: background-color var(--md-motion-short) var(--md-motion-standard),
              color var(--md-motion-short) var(--md-motion-standard);
}
.menu-toggle { display: none; }
#theme-toggle:hover,
.menu-toggle:hover { background: rgba(var(--md-state-rgb), var(--md-state-hover)); }
.header-social a:hover {
  background: rgba(var(--md-state-rgb), var(--md-state-hover));
  color: var(--md-sys-color-primary);
  opacity: 1;
  transform: none;
}

.header-social {
  display: flex;
  align-items: center;
  gap: 0;
  padding-left: var(--space-2);
  border-left: none;
}

/* Divider between nav and controls */
.nav-divider {
  width: 1px;
  height: 24px;
  background: var(--md-sys-color-outline-variant);
  margin: 0 10px;
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  overflow: hidden;
  min-height: 0;
  display: block;
  padding: var(--space-26) 0 var(--space-22);
}
.hero::before, .hero::after { content: none; }  /* kills the old grid overlay */

.hero-content { position: relative; z-index: 2; }

.hero-headline {
  max-width: 17ch;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(44px, 5.6vw, 68px);
  line-height: 1.06;
  letter-spacing: -.012em;
  margin: 0 0 var(--space-7);
}

.hero-subheadline {
  max-width: 580px;
  border: none;
  padding: 0;
  font-size: 18px;
  line-height: 1.7;
  margin: 0 0 var(--space-10);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* ============================================================
   BUTTONS. M3 filled, outlined, text
   ============================================================ */

.cta-button,
.btn-filled,
.btn-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) 26px;
  border-radius: var(--md-shape-full);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .01em;
  text-transform: none;
  cursor: pointer;
  overflow: visible;
  transition: box-shadow var(--md-motion-short) var(--md-motion-standard),
              background-color var(--md-motion-short) var(--md-motion-standard),
              transform var(--md-motion-short) var(--md-motion-standard);
}
.cta-button::before, .btn-filled::before { content: none; }

/* Filled. On Midnight bands only, where Aurum has the contrast for it */
.btn-filled {
  background: var(--brand-aurum);
  color: #241B04;                 /* 9.4:1 on Aurum */
  border: none;
  box-shadow: var(--md-elevation-1);
}
/* .on-midnight a (an element+class selector) otherwise outranks the plain
   .btn-filled class at rest, painting the label the same Aurum as its own
   background, invisible until :hover's higher specificity takes over. */
.on-midnight .btn-filled { color: #241B04; }
.btn-filled:hover { box-shadow: var(--md-elevation-2); transform: translateY(-1px); color: #241B04; opacity: 1; }
.btn-filled:active { transform: none; box-shadow: var(--md-elevation-1); }

/* Outlined. The default on surface */
.cta-button,
.btn-outlined {
  background: transparent;
  border: 1px solid var(--md-sys-color-outline);
  color: var(--md-sys-color-primary);
  padding: 10px 22px;
  font-size: 14px;
}
.cta-button:hover,
.btn-outlined:hover { background: rgba(var(--md-state-rgb), var(--md-state-hover)); color: var(--md-sys-color-primary); opacity: 1; }

.on-midnight .btn-outlined,
.on-midnight .cta-button {
  border-color: rgba(196, 150, 42, .62); /* 3:1 non-text floor on Midnight */
  color: var(--brand-aurum);
}

/* Back to top. Fixed, bottom-right, appears after scrolling past ~300px (site.js). */
.back-to-top {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--md-shape-full);
  background: var(--brand-aurum);
  color: #241B04;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  box-shadow: var(--md-elevation-1);
  transition: opacity var(--md-motion-short) var(--md-motion-standard),
              transform var(--md-motion-short) var(--md-motion-standard),
              visibility var(--md-motion-short) var(--md-motion-standard),
              box-shadow var(--md-motion-short) var(--md-motion-standard);
  z-index: 40;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { box-shadow: var(--md-elevation-2); }
.on-midnight .btn-outlined:hover,
.on-midnight .cta-button:hover { background: rgba(196, 150, 42, .10); color: var(--brand-aurum); }

/* Text button */
.cta-link {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--md-sys-color-primary);
}

/* ============================================================
   PULL QUOTES
   Two treatments. The band is the site's loudest visual move.
   one per page at most. STYLE_GUIDE.md §2.
   ============================================================ */

/* Full-bleed Midnight band with a large Φ */
.quote-band .container {
  display: flex;
  align-items: flex-start;
  gap: var(--space-7);
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}
.quote-band .quote-phi {
  flex: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 88px;
  line-height: .7;
  color: var(--brand-aurum);
}
.quote-band blockquote { margin: 0; max-width: 820px; }
.quote-band blockquote p {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.28;
  color: var(--md-sys-color-inverse-on-surface);
  opacity: 1;
  margin: 0;
}

/* Inline pull quote, for use inside a card or prose column */
.pullquote {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: 26px;
  line-height: 1.38;
  color: var(--md-sys-color-on-surface);
  border-left: 2px solid var(--md-sys-color-gold-rule);
  padding: 2px 0 2px 22px;
  margin: var(--space-8) 0;
}

/* ============================================================
   LONG-FORM READING. Track Record
   ============================================================ */

/* Hairline rail down the left of the reading column */
.reading-rail {
  max-width: var(--reading-max);
  border-left: 1px solid var(--md-sys-color-outline-variant);
  padding-left: 36px;
  margin-left: 2px;
}

/* Drop cap on the opening paragraph only */
.dropcap::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 74px;
  line-height: .78;
  margin: 6px 14px 0 0;
  color: var(--md-sys-color-primary);
}

/* ============================================================
   M3 CARDS
   ============================================================ */

/* Filled card. Tonal, no border */
.card-filled {
  position: relative;
  overflow: hidden;
  background: var(--md-sys-color-surface-container);
  border-radius: var(--md-shape-large);
  padding: var(--space-8);
  box-shadow: var(--md-elevation-1);
}
/* On Midnight, the card's own tonal fill must lose to the Midnight band,
   otherwise .card-filled's background shorthand (same specificity, later
   in source) wins and inverse-on-surface text renders on a pale surface. */
.card-filled.on-midnight {
  background: var(--md-sys-color-inverse-surface);
}

/* Outlined card. For secondary content */
.card-outlined {
  position: relative;
  overflow: hidden;
  background: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-shape-large);
  padding: var(--space-8);
}

/* Practice card with a ghosted display ordinal. Approach */
.practice-card {
  position: relative;
  overflow: hidden;
  background: var(--md-sys-color-surface-container);
  border-radius: var(--md-shape-large);
  padding: var(--space-10);
  box-shadow: var(--md-elevation-1);
  margin-bottom: var(--space-12);
}
.practice-card > .ordinal {
  position: absolute;
  right: var(--space-7);
  top: 14px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 130px;
  line-height: 1;
  color: var(--md-sys-color-gold-rule);
  opacity: .16;
  pointer-events: none;
  user-select: none;
}
.practice-card > .practice-body { position: relative; max-width: var(--reading-max); }

/* ============================================================
   ENGAGE CARDS. The standard end-of-page "where to next" block
   Present on every page, above the footer.
   ============================================================ */

.engage-section {
  background: var(--md-sys-color-surface-container-low);
  border-top: 1px solid var(--md-sys-color-outline-variant);
  padding: var(--space-18) 0;
}

.engage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--space-5);
  padding: 0;
}

.engage-block {
  display: block;
  background: var(--md-sys-color-surface-container);
  border: none;
  border-radius: var(--md-shape-large);
  padding: var(--space-7);
  color: var(--md-sys-color-on-surface);
  box-shadow: var(--md-elevation-1);
  transition: box-shadow var(--md-motion-short) var(--md-motion-standard),
              transform var(--md-motion-short) var(--md-motion-standard),
              background-color var(--md-motion-short) var(--md-motion-standard);
}
.engage-block:hover {
  background: var(--md-sys-color-surface-container-high);
  box-shadow: var(--md-elevation-2);
  transform: translateY(-2px);
  color: var(--md-sys-color-on-surface);
  opacity: 1;
}

.engage-tag {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: var(--space-3);
}

.engage-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  color: var(--md-sys-color-on-surface);
  margin-bottom: var(--space-3);
}

.engage-block p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--md-sys-color-on-surface-variant);
  margin: 0 0 var(--space-5);
}

.engage-link {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--md-sys-color-primary);
}

/* ============================================================
   NOW PAGE. M3 list rows with date chips
   ============================================================ */

.now-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: var(--space-6);
  align-items: start;
}
.now-grid > .full { grid-column: 1 / -1; }

.event-row {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 14px var(--space-4);
  margin: 0 calc(var(--space-4) * -1);
  border-radius: var(--md-shape-medium);
  color: var(--md-sys-color-on-surface);
  transition: background-color var(--md-motion-short) var(--md-motion-standard);
}
.event-row:hover { background: rgba(var(--md-state-rgb), .06); color: var(--md-sys-color-on-surface); opacity: 1; }
/* The row's flex layout must live on the <a> itself: components.css has
   no display override for `a`, so a bare anchor wrapping the date chip,
   title, and meta text would otherwise stack them instead of sitting them
   side by side. */
.event-row > a {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  width: 100%;
  color: inherit;
}

/* Muted via explicit token colours, not opacity: opacity composites text
   and chip backgrounds together toward the card surface and drops several
   of these pairings below WCAG AA (measured 2.33-3.75:1 against a 4.5:1
   floor). Each element below keeps its own already-verified pairing. */
.event-row--past .event-title { color: var(--md-sys-color-on-surface-variant); }
.event-row--past .event-date { background: var(--md-sys-color-surface-container-low); }
.event-status {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-3);
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--md-sys-color-surface-container-highest);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
  vertical-align: middle;
}

.event-date {
  flex: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 54px;
  padding: 6px 0;
  border-radius: 10px;
  background: var(--md-sys-color-surface-container-highest);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .04em;
  line-height: 1.35;
  color: var(--md-sys-color-on-surface-variant);
}
.event-date > strong {
  font-size: 17px;
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
}

.event-title {
  display: block;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--md-sys-color-on-surface);
}
.event-meta {
  display: block;
  font-size: 16px;
  line-height: 1.5;
  color: var(--md-sys-color-on-surface-variant);
}

.now-updated {
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: .04em;
  color: var(--md-sys-color-on-surface-variant);
  margin: 0;
}

/* ============================================================
   GOVERNANCE. Plain long-form, essay column, hairline clauses
   ============================================================ */

.governance-section + .governance-divider,
.governance-divider {
  border: none;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  margin: 0 0 var(--space-8);
}

.governance-section h2 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
  margin: 0 0 14px;
}
.governance-section p:last-child { margin-bottom: var(--space-8); }

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  background: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
  border-top: none;
  padding: 0;
}

.footer-band {
  padding: var(--space-18) var(--container-pad) var(--space-12);
  text-align: center;
}

.footer-tagline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.25;
  color: var(--md-sys-color-inverse-on-surface);
  opacity: 1;
  margin: 0 0 var(--space-4);
  text-align: center; /* the global `p { text-align: left }` rule targets
    this element directly, so .footer-band's inherited center never wins */
}

.footer-orient {
  font-size: 16px;
  margin: 0 0 var(--space-8);
  text-align: center; /* same override as .footer-tagline above */
}
.footer-orient a { color: var(--brand-aurum); }

.footer-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  border: none;
  padding: 0;
}

.site-footer p {
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--md-sys-color-inverse-on-surface);
  opacity: .85;
  margin: 0;
}

.social-links { display: flex; gap: var(--space-2); margin: 0; }
.social-links a {
  width: 40px;
  height: 40px;
  border-radius: var(--md-shape-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-aurum);
  transition: background-color var(--md-motion-short) var(--md-motion-standard);
}
.social-links a:hover { background: rgba(196, 150, 42, .14); color: var(--brand-aurum); opacity: 1; transform: none; }

/* ============================================================
   MOTION
   ============================================================ */

.reveal { transition: opacity 350ms var(--md-motion-standard), transform 350ms var(--md-motion-standard); }
.js-motion .reveal.is-hidden { opacity: 0; transform: translateY(10px); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .js-motion .reveal.is-hidden { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   FOCUS. WCAG 2.2 AA. Keyboard only, never suppressed.
   ============================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 3px;
  border-radius: var(--md-shape-extra-small);
}
.on-midnight a:focus-visible,
.on-midnight button:focus-visible { outline-color: var(--brand-aurum); }

/* SKIP LINK. WCAG 2.4.1 Bypass Blocks. Hidden until focused, first tab stop on every page. */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 100;
  padding: var(--space-2) var(--space-7);
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--md-shape-small) 0;
  transition: top var(--md-motion-short) var(--md-motion-standard);
}
.skip-link:focus {
  top: 0;
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 3px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .menu-toggle { display: inline-flex; }

  .nav-container {
    position: fixed;
    inset: 64px 0 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-4) var(--container-pad) var(--space-6);
    background: var(--md-sys-color-surface);
    border-top: 1px solid var(--md-sys-color-outline-variant);
    box-shadow: var(--md-elevation-2);
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--md-motion-short) var(--md-motion-standard),
                transform var(--md-motion-short) var(--md-motion-standard),
                visibility 0s linear var(--md-motion-short);
  }

  .nav-container.is-active {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--md-motion-short) var(--md-motion-standard),
                transform var(--md-motion-short) var(--md-motion-standard),
                visibility 0s linear 0s;
  }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    width: 100%;
  }

  .nav-links a { padding: var(--space-3) var(--space-2); }

  .nav-divider { width: 100%; height: 1px; margin: var(--space-3) 0; }

  .header-social { padding-left: 0; }
}

body.no-scroll { overflow: hidden; }

@media (max-width: 900px) {
  :root { --container-pad: 24px; }
  .practice-card { padding: var(--space-7); }
  .practice-card > .ordinal { font-size: 96px; right: var(--space-4); }
  .quote-band .container { gap: var(--space-5); }
  .quote-band .quote-phi { font-size: 64px; }
  .reading-rail { padding-left: 24px; }
}

@media (max-width: 640px) {
  .hero { padding: var(--space-18) 0 var(--space-14); }
  .hero-headline { max-width: none; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions > a { justify-content: center; }
  .section-padding { padding: var(--space-14) 0; }
  .footer-content { flex-direction: column; gap: var(--space-4); }
  .dropcap::first-letter { font-size: 58px; margin-right: 10px; }
  .quote-band .container { flex-direction: column; gap: var(--space-4); }
}