/* ===== Design tokens ===== */
:root {
  --bg: #FAF8F2;
  --panel: #F2EEE3;
  --ink: #1A1815;
  --secondary: #6E6759;
  --muted: #44403A;
  --rule-strong: #1A1815;
  --rule-mid: #C9C3B4;
  --rule-light: #D8D3C6;
  --photo-fill: #ECE9E0;
  --accent: #0E5A47;
  --selection: #E4DECB;
  --photo-tone: none;
  --serif: 'Newsreader', serif;
  --sans: 'Libre Franklin', sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

.redacted {
  background: var(--ink); color: var(--ink); border-radius: 2px; padding: 0 4px;
  cursor: default;
}

img { max-width: 100%; display: block; }

/* ===== Reveal-on-scroll ===== */
/* Breakout figures center themselves via --center-x (translateX); the reveal
   animation only ever touches --reveal-y, so the two effects compose in one
   transform instead of one clobbering the other. */
[data-anim] figure[data-reveal] { opacity: 0; --reveal-y: 10px; transition: opacity .7s ease, transform .7s ease; }
[data-anim] figure[data-reveal="in"] { opacity: 1; --reveal-y: 0px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-anim] figure[data-reveal] { opacity: 1; --reveal-y: 0px; transition: none; }
}

/* ===== Masthead ===== */
.masthead { padding: 52px 20px 0; text-align: center; }
.masthead-rules {
  max-width: 860px; margin: 0 auto; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); padding: 7px 0;
}
.masthead-title {
  border-top: 3px solid var(--rule-strong); border-bottom: 3px solid var(--rule-strong); padding: 10px 0;
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase;
}
.dateline-top {
  font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--secondary); margin: 14px 0 0;
}
.headline {
  font-family: var(--serif); font-optical-sizing: auto; font-size: clamp(42px, 7vw, 78px); font-weight: 600;
  line-height: 1.04; letter-spacing: -0.015em; margin: 26px auto 0; max-width: 820px;
}
.standfirst {
  font-family: var(--serif); font-size: clamp(19px, 2.4vw, 23px); line-height: 1.45; color: var(--muted);
  max-width: 640px; margin: 22px auto 0; text-wrap: pretty;
}
.byline-box { max-width: 420px; margin: 26px auto 0; border-top: 1px solid var(--rule-mid); border-bottom: 1px solid var(--rule-mid); padding: 12px 0; }
.byline-photo { max-width: 700px; margin: 34px auto 0; padding: 0 20px; text-align: left; }
.byline-photo figcaption { text-align: left; }
.byline {
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin: 0;
}
.byline-sub {
  font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--secondary); margin: 6px 0 0;
}

/* ===== Top nav (mobile/tablet) ===== */
.toc-top {
  position: sticky; top: 0; z-index: 50; background: rgba(250,248,242,0.96); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule-light); margin-top: 40px;
}
.toc-top-inner {
  display: flex; gap: 22px; overflow-x: auto; padding: 12px 24px; max-width: 1060px; margin: 0 auto;
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
}
.toc-top-inner a { color: var(--muted); text-decoration: none; }
.toc-top-inner a:hover, .toc-top-inner a.active { color: var(--accent); }

/* ===== Side TOC (desktop) ===== */
/* Shown once the viewport is wide enough that the centered column's natural
   side margin comfortably exceeds the sidebar's width, so it sits in that
   margin without needing to shift or resize the main column. */
.toc-side { display: none; }
@media (min-width: 1480px) {
  .toc-top { display: none; }
  .toc-side {
    display: block; position: fixed; top: 0; left: 0; width: 220px; height: 100vh; overflow-y: auto;
    padding: 52px 20px 40px 32px;
  }
  .toc-side-label {
    font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--secondary); margin: 0 0 16px; border-bottom: 1px solid var(--rule-light); padding-bottom: 10px;
  }
  .toc-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
  .toc-side a {
    font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0.03em; color: var(--muted);
    text-decoration: none; display: block; border-left: 2px solid transparent; padding-left: 12px; margin-left: -14px;
    transition: color .15s ease, border-color .15s ease;
  }
  .toc-side a:hover { color: var(--accent); }
  .toc-side a.active { color: var(--accent); border-left-color: var(--accent); }
}

/* ===== Print button ===== */
.print-btn {
  position: fixed; top: 16px; right: 16px; z-index: 60;
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--bg); color: var(--ink); border: 1px solid var(--rule-strong); padding: 9px 14px; cursor: pointer;
  border-radius: 2px;
}
.print-btn:hover { background: var(--ink); color: var(--bg); }
.print-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===== Main column ===== */
main { max-width: 700px; margin: 0 auto; padding: 0 20px; }

section, footer#contact { scroll-margin-top: 64px; }

.kicker {
  font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 10px;
}
.kicker-chapter { margin: 0 0 8px; border-top: 1px solid var(--rule-strong); padding-top: 14px; }

.h2 {
  font-family: var(--serif); font-size: clamp(30px, 4.5vw, 42px); font-weight: 600; line-height: 1.12;
  letter-spacing: -0.01em; margin: 0 0 4px;
}
.dateline { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--secondary); margin: 0 0 24px; }

.body-text { font-family: var(--serif); font-size: 19px; line-height: 1.68; margin: 0 0 26px; text-wrap: pretty; }
.body-text.aside-text { font-style: italic; font-size: 17.5px; color: var(--muted); }

/* ===== Figures / photos ===== */
figure {
  margin: 34px 0;
  --center-x: 0px; --reveal-y: 0px;
  transform: translate(var(--center-x), var(--reveal-y));
}
/* When a figure is the last thing in a section, the next section's own
   top padding already provides the gap before the chapter break, so drop
   the figure's own bottom margin to avoid stacking both. */
section > figure:last-child { margin-bottom: 0; }
.photo-frame {
  position: relative; aspect-ratio: 3 / 2; background: var(--photo-fill); border: 1px solid var(--rule-light);
  overflow: hidden; filter: var(--photo-tone);
}
figure.grid-4-3 .photo-frame, .cards-grid .photo-frame { aspect-ratio: 4 / 3; }
.photo-frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in;
}
.photo-frame.is-placeholder { cursor: default; }
.placeholder-inner {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 16px; text-align: center;
}
.placeholder-icon { width: 30px; height: 30px; opacity: 0.55; }
.placeholder-text {
  font-family: var(--sans); font-size: 11.5px; line-height: 1.4; color: var(--secondary); max-width: 220px;
}
figcaption {
  font-family: var(--sans); font-size: 12.5px; line-height: 1.55; color: var(--secondary); margin-top: 9px;
}
.cards-grid figcaption { font-size: 11.5px; min-height: 54px; }

.figure-break { width: min(92vw, 860px); margin: 38px 0 38px 50%; --center-x: -50%; }
.figure-fullbleed { width: 100vw; margin: 72px 0 0 calc(50% - 50vw); }
.figure-fullbleed .photo-frame {
  aspect-ratio: auto; height: clamp(320px, 52vh, 540px); border-left: none; border-right: none; border-top: 1px solid var(--rule-light); border-bottom: 1px solid var(--rule-light);
}
.figure-fullbleed.tall .photo-frame { height: clamp(340px, 58vh, 580px); }
.figure-fullbleed figcaption { margin: 9px auto 0; max-width: 660px; padding: 0 20px; text-align: center; }

.split-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }

.grid-2x2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 600px) {
  .grid-2x2 { grid-template-columns: 1fr; }
}

/* ===== Stats / failure panels ===== */
.panel {
  width: min(92vw, 920px); margin-left: 50%; transform: translateX(-50%);
  border-top: 4px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); background: var(--panel);
  padding: 26px 0 32px;
}
.panel.panel-narrow { width: min(92vw, 860px); padding-bottom: 36px; }
.panel .h2 { margin: 0 0 18px; }
/* Plain full-width child of .panel, padded to match .panel-content, so the
   heading and its first paragraph share a left edge with the panel's body
   copy below (stats, timeline dates) rather than the page's own column. */
.panel-heading { padding: 0 clamp(20px, 4vw, 40px); }
.panel-content { padding: 0 clamp(20px, 4vw, 40px); }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 24px 28px; }
.stat { border-top: 1px solid var(--rule-mid); padding-top: 12px; }
.stat-num { display: block; font-family: var(--serif); font-size: 46px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.stat-label { display: block; font-family: var(--sans); font-size: 13px; line-height: 1.45; color: var(--muted); margin-top: 7px; }

.failure-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.failure-list li { border-top: 1px solid var(--rule-mid); padding-top: 14px; font-family: var(--serif); font-size: 17.5px; line-height: 1.6; }

/* ===== Pull quotes ===== */
blockquote {
  margin: 48px auto; max-width: 620px; border-top: 3px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong);
  padding: 26px 8px 28px; text-align: center;
}
blockquote p {
  font-family: var(--serif); font-style: italic; font-weight: 500; line-height: 1.3; margin: 0; color: var(--ink);
}
blockquote footer {
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--secondary); margin-top: 16px;
}

/* ===== Simple bulleted list (Industries I know) ===== */
.industry-list {
  list-style: disc; margin: 0 0 56px; padding-left: 1.3em; display: grid; gap: 16px;
}
.industry-list li {
  font-family: var(--serif); font-size: 19px; line-height: 1.68; padding-left: 4px;
}

/* ===== Reference-section grids ===== */
h3.section-label {
  font-family: var(--sans); font-size: 16px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  border-bottom: 2px solid var(--rule-strong); padding-bottom: 8px; margin: 0 0 22px;
}
.cards-grid {
  width: min(92vw, 980px); margin-left: 50%; transform: translateX(-50%);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px 24px; margin-bottom: 56px;
}
.cards-grid.beyond-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 34px 24px; margin-bottom: 0; }
.cards-grid.beyond-grid figcaption { min-height: 36px; }
.cards-grid figure { margin: 0 0 12px; }
.cards-grid p { font-family: var(--serif); font-size: 17px; line-height: 1.6; margin: 0; }

/* ===== Evidence rows (Stuff I'm good at / My skills) ===== */
.evidence-grid {
  width: min(92vw, 980px); margin-left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 44px; margin-bottom: 56px;
}
.evidence-row { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; }
.evidence-media h4 {
  font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.25; margin: 0 0 12px;
}
.evidence-media figure { margin: 0; }
.evidence-text { font-family: var(--serif); font-size: 17px; line-height: 1.6; margin: 0; }
@media (max-width: 640px) {
  .evidence-row { grid-template-columns: 1fr; }
}

/* ===== Footer ===== */
.site-footer { margin-top: 88px; padding: 0 0 72px; }
.footer-rule-outer { border-top: 3px solid var(--rule-strong); padding-top: 6px; }
.footer-rule-inner { border-top: 1px solid var(--rule-strong); padding-top: 28px; text-align: center; }
.footer-contact { font-family: var(--serif); font-size: 19px; line-height: 1.6; margin: 0 0 10px; }
.footer-signoff { font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.6; color: var(--secondary); margin: 0 0 26px; }
.footer-fine { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--secondary); margin: 0; }

/* ===== Lightbox modal ===== */
.lightbox {
  position: fixed; inset: 0; z-index: 100; background: rgba(26, 24, 21, 0.92);
  display: flex; align-items: center; justify-content: center; padding: 40px 20px;
  opacity: 0; visibility: hidden; transition: opacity .2s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox-figure { max-width: min(90vw, 1100px); max-height: 90vh; display: flex; flex-direction: column; align-items: center; }
.lightbox-figure img { max-width: 100%; max-height: 78vh; width: auto; object-fit: contain; filter: var(--photo-tone); }
.lightbox-caption {
  font-family: var(--sans); font-size: 13px; line-height: 1.55; color: #E4DECB; margin-top: 14px; text-align: center; max-width: 640px;
}
.lightbox-close {
  position: absolute; top: 20px; right: 24px; background: none; border: 1px solid #E4DECB; color: #E4DECB;
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 14px; cursor: pointer; border-radius: 2px;
}
.lightbox-close:hover { background: #E4DECB; color: var(--ink); }

/* ===== Print ===== */
@media print {
  .toc-top, .toc-side, .print-btn, .lightbox { display: none !important; }
  figure, aside, blockquote { break-inside: avoid; }
  [data-anim] figure[data-reveal] { opacity: 1 !important; --reveal-y: 0px !important; }
  figure { --center-x: 0px !important; }
  .figure-break, .figure-fullbleed { width: 100% !important; margin-left: 0 !important; }
  .panel, .cards-grid { width: 100% !important; margin-left: 0 !important; transform: none !important; }
  main { margin: 0 auto !important; }
  body.print-no-images figure { display: none !important; }
}