/* ==========================================================================
   BRAD MOODY — design system
   Signal chain: a career read as a chain of connected stages.
   Palette: brand ink ground (#281817), light (#EFEFEF), tan signal line
   (#DDAC77), one rare red (#E74C32). Sourced from the Brad Moody logo guide.
   ========================================================================== */

:root{
  /* --- color (brand: ink #281817 / light #EFEFEF / tan #DDAC77 / red #E74C32) --- */
  --ink:        #281817;
  --ink-2:      #31201F;
  --ink-3:      #3C2827;
  --bone:       #EFEFEF;
  --bone-dim:   #C9C6C4;
  --brass:      #DDAC77;
  --brass-hi:   #ECC79A;
  --slate:      #9B928C;
  --slate-dim:  #6E645F;
  --signal:     #E74C32;
  --line:       rgba(239,239,239,0.12);
  --line-brass: rgba(221,172,119,0.35);

  /* --- type: editorial system — Fraunces display / Inter text / IBM Plex Mono labels --- */
  --f-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono:    'IBM Plex Mono', 'Space Mono', 'Courier New', monospace;

  /* --- scale --- */
  --container: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 3px;

  color-scheme: dark;
}

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

body{
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; cursor: pointer; }
h1,h2,h3,h4,p{ margin: 0; }

::selection{ background: var(--brass); color: var(--ink); }

:focus-visible{
  outline: 2px solid var(--brass-hi);
  outline-offset: 3px;
}

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

/* --- eyebrow / mono labels (catalog-style, used only where it encodes real info: dates, codes) --- */
.eyebrow{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
}
.eyebrow::before{
  content: "";
  width: 18px; height: 1px;
  background: var(--brass);
  display: inline-block;
}

.mono{ font-family: var(--f-mono); }

/* --- headings --- */
h1, h2, h3, .display{
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--bone);
}
h2{ font-size: clamp(28px, 4vw, 42px); font-weight: 600; }
h3{ font-size: clamp(20px, 2.4vw, 26px); font-weight: 600; }

.lede{
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--bone-dim);
  max-width: 62ch;
  line-height: 1.75;
}

p.body-text{ color: var(--bone-dim); max-width: 62ch; }

.hairline{
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}
.hairline.brass{ border-top: 1px solid var(--line-brass); }

/* ==========================================================================
   Nav
   ========================================================================== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(40,24,23,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
}
.wordmark{
  font-family: var(--f-display);
  font-size: 19px;
  letter-spacing: 0.04em;
  color: var(--bone);
  display: flex;
  align-items: center;
  gap: 10px;
}
.wordmark .dot{ color: var(--brass); }
.wordmark-mark{
  width: 28px;
  height: 28px;
  flex: none;
  display: block;
}

.nav-links{
  display: flex;
  gap: 34px;
  align-items: center;
}
.nav-links a{
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  position: relative;
  padding: 4px 0 8px;
  transition: color 0.2s ease;
}
.nav-links a::before{
  content: "";
  position: absolute;
  left: -13px; top: 2px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brass);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ color: var(--bone); }
.nav-links a[aria-current="page"]::before{ opacity: 1; }

.nav-toggle{
  display: none;
  background: none;
  border: 1px solid var(--line-brass);
  border-radius: var(--radius);
  color: var(--bone);
  padding: 8px 12px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
}

@media (max-width: 780px){
  /* backdrop-filter makes an element the containing block for its
     position:fixed descendants. Left on, it collapses the menu panel below to
     the height of the header, so the panel's background never covers the page
     and the links render on top of the page content. Solid header instead. */
  .site-header{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--ink);
  }
  .nav-links{
    position: fixed;
    inset: 66px 0 0 0;
    background: var(--ink);
    flex-direction: column;
    justify-content: flex-start;
    padding: 40px var(--gutter);
    gap: 4px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    overflow-y: auto;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .nav-links.open{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .nav-links a{
    font-size: 20px;
    letter-spacing: 0.08em;
    padding: 14px 0;          /* comfortable tap target */
    display: block;
  }
  .nav-links a::before{ left: -16px; top: 50%; margin-top: -2px; }
  .nav-toggle{ display: inline-block; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  padding: clamp(64px, 11vw, 128px) 0 clamp(48px, 8vw, 96px);
  position: relative;
  overflow: hidden;
}
.hero-grid{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: end;
}
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
}
.hero h1{
  font-size: clamp(48px, 8vw, 96px);
  line-height: 0.98;
  margin: 18px 0 22px;
}
.hero h1 em{
  font-style: italic; /* Fraunces has a true italic */
  color: var(--brass-hi);
}
.hero-role{
  font-family: var(--f-mono);
  font-size: clamp(13px, 1.4vw, 15px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 20px;
}
.hero-actions{
  display: flex;
  gap: 16px;
  margin-top: 34px;
  flex-wrap: wrap;
}

/* --- hero background video (scoped to the hero only) --- */
.hero-video{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-video video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(40,24,23,0.82) 44%, rgba(40,24,23,0.48) 100%),
    linear-gradient(180deg, rgba(40,24,23,0.30) 0%, rgba(40,24,23,0.55) 55%, var(--ink) 100%);
}
.hero .container{ position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce){
  .hero-video{ display: none; }   /* respect reduced-motion: fall back to the ink ground */
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: var(--radius);
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--line-brass);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn-primary{
  background: var(--brass);
  border-color: var(--brass);
  color: var(--ink);
}
.btn-primary:hover{ background: var(--brass-hi); border-color: var(--brass-hi); }
.btn-ghost{ color: var(--bone); }
.btn-ghost:hover{ border-color: var(--brass-hi); color: var(--brass-hi); }

/* ==========================================================================
   Signal chain (signature element)
   ========================================================================== */
.signal-chain{
  width: 100%;
  height: auto;
}
.signal-chain .node-dot{ fill: var(--ink); stroke: var(--brass); stroke-width: 1.4; }
.signal-chain .node-dot.filled{ fill: var(--brass); }
.signal-chain .chain-line{ stroke: var(--line-brass); stroke-width: 1; }
.signal-chain text{ font-family: var(--f-mono); fill: var(--slate); }
.signal-chain .node-label{ fill: var(--bone-dim); font-size: 11px; letter-spacing: 0.06em; }
.signal-chain .node-year{ fill: var(--brass); font-size: 10px; }

.chain-vertical{
  position: relative;
  padding-left: 34px;
  border-left: 1px solid var(--line-brass);
}
.chain-vertical .chain-node{
  position: relative;
  padding-bottom: 52px;
}
.chain-vertical .chain-node:last-child{ padding-bottom: 0; }
.chain-vertical .chain-node::before{
  content: "";
  position: absolute;
  left: -39px; top: 4px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ink);
  border: 1.5px solid var(--brass);
}
.chain-vertical .chain-node.is-current::before{ background: var(--brass); }
.chain-vertical .chain-node .yr{ font-family: var(--f-mono); font-size: 11px; color: var(--brass); }
.chain-vertical .chain-node .lbl{ font-size: 15.5px; color: var(--bone); font-weight: 600; margin-top: 6px; }
.chain-vertical .chain-node .sub{ font-size: 13px; color: var(--slate); margin-top: 4px; max-width: 46ch; line-height: 1.6; }

/* --- horizontal chain (hero, desktop) --- */
.chain-horizontal{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  margin-top: 8px;
  padding-top: 16px;
}
.chain-horizontal::before{
  content: "";
  position: absolute;
  left: 4px; right: 4px; top: 20px;
  height: 1px;
  background: var(--line-brass);
}
.chain-node-h{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 168px;
  background: var(--ink);
  padding-right: 10px;
}
.chain-node-h .dot{
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ink);
  border: 1.5px solid var(--brass);
}
.chain-node-h.current .dot{ background: var(--brass); }
.chain-node-h .yr{ font-family: var(--f-mono); font-size: 11px; color: var(--brass); }
.chain-node-h .lbl{ font-size: 13.5px; color: var(--bone); font-weight: 600; line-height: 1.3; }
.chain-node-h .sub{ font-size: 11.5px; color: var(--slate); line-height: 1.5; }

.show-mobile-chain{ display: none; }
@media (max-width: 900px){
  .chain-horizontal{ display: none; }
  .show-mobile-chain{ display: block; margin-top: 20px; }
}

/* ==========================================================================
   Sections
   ========================================================================== */
section{ padding: clamp(56px, 8vw, 108px) 0; }
.section-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: clamp(32px, 5vw, 56px);
  flex-wrap: wrap;
}

.bone-section{
  background: var(--bone);
  color: var(--ink);
}
.bone-section h2, .bone-section h3{ color: var(--ink); }
.bone-section .lede, .bone-section p.body-text{ color: #4A3634; }
.bone-section .eyebrow{ color: #A5793C; }
.bone-section .eyebrow::before{ background: #A5793C; }
.bone-section .hairline{ border-top-color: rgba(40,24,23,0.14); }

/* ==========================================================================
   Pillar / card grid
   ========================================================================== */
.grid-4{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 900px){ .grid-4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .grid-4{ grid-template-columns: 1fr; } }

.pillar{
  background: var(--ink);
  padding: 30px 26px;
  transition: background 0.25s ease;
}
.pillar:hover{ background: var(--ink-2); }
.pillar .pillar-num{
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--brass);
  margin-bottom: 22px;
  display: block;
}
.pillar h3{ margin-bottom: 12px; font-size: 19px; }
.pillar p{ color: var(--slate); font-size: 14.5px; line-height: 1.65; }
.pillar .pillar-link{
  display: inline-block;
  margin-top: 18px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass);
}

/* ==========================================================================
   Marquee / credential strip
   ========================================================================== */
.credential-strip{
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 26px 0;
}
.credential-strip ul{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 44px;
  justify-content: space-between;
}
.credential-strip li{
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
}
.credential-strip li strong{ color: var(--bone); font-weight: 400; }

/* ==========================================================================
   Two-column prose + aside (About page)
   ========================================================================== */
.prose-layout{
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 64px;
}
@media (max-width: 900px){ .prose-layout{ grid-template-columns: 1fr; } }
.prose h2{ font-size: 26px; margin-bottom: 16px; }
.prose > * + *{ margin-top: 18px; }
.prose p{ color: var(--bone-dim); max-width: 62ch; }

.glossary{
  border: 1px solid var(--line-brass);
  border-radius: var(--radius);
  padding: 22px;
  align-self: start;
  position: sticky;
  top: 100px;
}
.glossary h4{
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 16px;
}
.glossary dt{ color: var(--bone); font-size: 14px; font-weight: 600; margin-top: 14px; }
.glossary dt:first-of-type{ margin-top: 0; }
.glossary dd{ margin: 4px 0 0; color: var(--slate); font-size: 13px; line-height: 1.55; }

/* ==========================================================================
   CV / ledger
   ========================================================================== */
.cv-category{ padding: 40px 0; }
.cv-category + .cv-category{ border-top: 1px solid var(--line); }
.cv-category-title{
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 26px;
}
.cv-category-title .num{ font-family: var(--f-mono); color: var(--brass); font-size: 13px; }

.cv-entry{
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 20px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.cv-entry:first-child{ border-top: 0; }
.cv-entry .yr{
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: var(--brass);
  padding-top: 2px;
}
.cv-entry .role{ color: var(--bone); font-weight: 600; font-size: 15.5px; }
.cv-entry .org{ color: var(--slate); font-size: 13.5px; margin-top: 3px; }
.cv-entry .desc{ color: var(--slate); font-size: 13.5px; margin-top: 8px; line-height: 1.6; max-width: 64ch; }
@media (max-width: 640px){
  .cv-entry{ grid-template-columns: 1fr; gap: 6px; }
}

.cv-list-simple .cv-row{
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.cv-list-simple .cv-row:first-child{ border-top: 0; }
.cv-list-simple .yr{ font-family: var(--f-mono); color: var(--brass); font-size: 12.5px; }
.cv-list-simple .item-title{ color: var(--bone); }
.cv-list-simple .item-place{ color: var(--slate); }

.cv-download-bar{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.pill-tags{
  display: flex; flex-wrap: wrap; gap: 10px;
}
.pill-tags span{
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  padding: 7px 13px;
  border: 1px solid var(--line-brass);
  border-radius: 999px;
  color: var(--bone-dim);
}

/* ==========================================================================
   Practice / portfolio
   ========================================================================== */
.practice-block{ padding: 50px 0; }
.practice-block + .practice-block{ border-top: 1px solid var(--line); }
.media-frame{
  aspect-ratio: 16/10;
  border: 1px solid var(--line-brass);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(135deg, var(--ink-2), var(--ink-2) 10px, var(--ink) 10px, var(--ink) 20px);
  color: var(--slate);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.media-frame .rec-dot{
  position: absolute;
  top: 14px; left: 14px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px rgba(231,76,50,0.18);
}
.media-embed{
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--line-brass);
  border-radius: var(--radius);
}
.media-embed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.media-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
@media (max-width: 720px){ .media-grid{ grid-template-columns: 1fr; } }
.media-caption{ margin-top: 12px; }
.media-caption .title{ color: var(--bone); font-size: 14.5px; font-weight: 600; }
.media-caption .meta{ font-family: var(--f-mono); font-size: 11.5px; color: var(--slate); margin-top: 3px; }

.soundcloud-embed{
  border: 1px solid var(--line-brass);
  border-radius: var(--radius);
  overflow: hidden;
}
.soundcloud-embed iframe{ display: block; width: 100%; border: 0; }

.field-card{
  border: 1px solid var(--line-brass);
  border-radius: var(--radius);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.field-card .field-links{ display: flex; gap: 20px; margin-top: 6px; }
.field-card .field-links a{
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass);
  border-bottom: 1px solid var(--line-brass);
  padding-bottom: 2px;
}
.field-card .field-links a:hover{ color: var(--brass-hi); border-color: var(--brass-hi); }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
@media (max-width: 860px){ .contact-grid{ grid-template-columns: 1fr; } }

.contact-list{ margin-top: 30px; display: flex; flex-direction: column; gap: 18px; }
.contact-list a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
}
.contact-list a:first-child{ border-top: 0; }
.contact-list .arrow{ font-family: var(--f-mono); color: var(--brass); transition: transform 0.2s ease; }
.contact-list a:hover .arrow{ transform: translateX(4px); }

.form-field{ margin-bottom: 20px; }
.form-field label{
  display: block;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 8px;
}
.form-field input, .form-field textarea{
  width: 100%;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 14px;
  color: var(--bone);
  font-family: var(--f-body);
  font-size: 15px;
  transition: border-color 0.2s ease;
}
.form-field input:focus, .form-field textarea:focus{
  outline: none;
  border-color: var(--brass);
}
.form-field textarea{ resize: vertical; min-height: 130px; }
.form-note{ font-size: 12.5px; color: var(--slate-dim); margin-top: 4px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  border-top: 1px solid var(--line);
  padding: 44px 0;
}
.footer-grid{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.footer-links{ display: flex; gap: 26px; flex-wrap: wrap; }
.footer-links a{
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
}
.footer-links a:hover{ color: var(--brass-hi); }
.footer-fine{ font-family: var(--f-mono); font-size: 11.5px; color: var(--slate-dim); }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal{ opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in{ opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Page intro block (shared across inner pages)
   ========================================================================== */
.page-intro{ padding-top: clamp(52px, 8vw, 88px); padding-bottom: 20px; }
.page-intro h1{ font-size: clamp(38px, 6vw, 64px); margin: 16px 0 20px; line-height: 1.02; }

.placeholder-note{
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--slate-dim);
  border: 1px dashed var(--line-brass);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-top: 14px;
  display: inline-block;
}

/* ==========================================================================
   PRINT — renders cv.html and courses.html as downloadable PDF documents.
   The screen design is a dark ground; for paper it inverts to ink-on-white
   so it is legible and printable, while keeping the brand type and accents.
   ========================================================================== */

.print-header{ display: none; }

/* Top level, not nested in @media print — Chrome's headless print-to-pdf
   ignores an @page rule nested inside a media query and renders edge-to-edge. */
@page{ size: letter; margin: 15mm 16mm 17mm; }

@media print{
  /* Academic document convention: black and white only. No brand colour —
     these get photocopied, scanned and read by search committees. The brand
     typography carries the identity instead. Font size is set larger than the
     finished document because the pages are scaled down on imposition (see
     make_pdfs.py) to produce true margins on every page. */
  :root{
    color-scheme: light;   /* otherwise viewers render the page's blank areas dark */
    --ink:        #FFFFFF;
    --ink-2:      #FFFFFF;
    --ink-3:      #FFFFFF;
    --bone:       #000000;
    --bone-dim:   #1A1A1A;
    --brass:      #444444;
    --brass-hi:   #444444;
    --slate:      #333333;
    --slate-dim:  #555555;
    --line:       rgba(0,0,0,0.22);
    --line-brass: rgba(0,0,0,0.30);
  }

  html, body{
    background: #fff !important;
    color: #000 !important;
    font-size: 12.4pt;
  }

  /* Site furniture that has no place in a document */
  .site-header, .site-footer, .nav, .nav-toggle,
  .cv-download-bar, .hero-video, .hero-overlay,
  .pillar-link, .placeholder-note{ display: none !important; }

  /* Scroll-reveal never fires in print — force everything visible */
  .reveal, .reveal.in{ opacity: 1 !important; transform: none !important; }

  main{ padding-top: 0 !important; }
  .container{ max-width: none; padding: 0; }
  a{ color: inherit !important; text-decoration: none !important; }
  .bone-section{ background: #fff !important; }

  /* Document letterhead */
  .print-header{
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--line);
  }
  .print-header img{ width: 34px; height: 34px; }
  .print-header .ph-name{
    font-family: var(--f-display);
    font-size: 17pt;
    line-height: 1.1;
  }
  .print-header .ph-meta{
    font-family: var(--f-mono);
    font-size: 8pt;
    color: var(--slate);
    margin-top: 3px;
  }

  .page-intro{ padding: 0 0 6px !important; }
  .page-intro h1{ font-size: 24pt; margin-bottom: 6px; }
  .page-intro .lede{ font-size: 10pt; max-width: none; }

  /* Keep records intact across page breaks */
  .cv-category{ padding: 16px 0; break-inside: auto; }
  .cv-category-title{ break-after: avoid; margin-bottom: 12px; }
  .cv-entry, .cv-list-simple .cv-row{ break-inside: avoid; padding: 7px 0; }
  h1, h2, h3{ break-after: avoid; }
  .cv-entry .desc{ max-width: none; }
}