/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  --paper:       #F1F3F2;
  --paper-deep:  #E7EBE9;
  --white:       #FFFFFF;
  --ink:         #14232A;
  --ink-muted:   #4F5F66;
  --rule:        #CBD3D0;
  --accent:      #15564B;
  --accent-soft: #D7E4DF;
  --warn:        #8C3A1F;

  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;

  --t-hero: 60px;
  --t-h2: 28px;
  --t-h3: 21px;
  --t-body: 19px;
  --t-small: 15px;
  --t-micro: 13px;
  --t-figure: 40px;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --pad: 32px;
  --sec-pad: 64px;   /* doubles to 128px between adjacent sections */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --col: 640px;   /* shared measure: prose and photos */
  --shot-h: 560px; /* tallest a single photo may render */
  --t-hero-sm: 44px;
}

/* ============================================================
   2. RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body, h1, h2, h3, p, ul, ol, li, figure, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; border-radius: 2px; }
button, input { font: inherit; color: inherit; }
hr { border: 0; }

/* ============================================================
   3. BASE ELEMENTS
   ============================================================ */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t-body);
  line-height: 1.65;
  font-variant-numeric: tabular-nums slashed-zero;
  -webkit-font-smoothing: antialiased;
}

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

h1 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-hero);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 15ch;
}

main h2::before,
#contact h3::before {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background: var(--accent);
  margin-bottom: var(--s5);
}

h2 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h3 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: 1.3;
}

p { text-wrap: pretty; }
p + p { margin-top: 20px; }

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

.measure p,
.rail-body p,
.model-intro p { max-width: var(--col); }

.lead {
  font-family: var(--serif);
  font-size: var(--t-body);
  line-height: 1.65;
}

.micro {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-micro);
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
}

.caption,
.basis,
.outcome {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--ink-muted);
}

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--sans);
  font-size: var(--t-micro);
  padding: 10px 16px;
  text-decoration: none;
  border-radius: 2px;
}
.skip:focus { left: var(--s4); top: var(--s4); }

/* ============================================================
   4. LAYOUT PRIMITIVES
   ============================================================ */
.container {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--pad);
}

.measure { max-width: 640px; }

.sec { padding-block: var(--sec-pad); }

/* container-width dividers: only 03/04, 04/05, 07/08 */
.sec--ruled { position: relative; }
.sec--ruled::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1180px, 100% - (var(--pad) * 2));
  height: 1px;
  background: var(--rule);
}

.rail {
  display: grid;
  grid-template-columns: 168px 640px;
  column-gap: 56px;
  justify-content: start;
}

.rail-meta {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-micro);
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  padding-top: 6px;
}

.rail-body p { max-width: var(--col); }

.outcome {
  margin-top: var(--s3);
  padding-top: var(--s3);
  position: relative;
}
.outcome::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 1px;
  background: var(--accent);
}

/* ============================================================
   5. NAV
   ============================================================ */
#nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 64px;
  background: rgba(241, 243, 242, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-bottom-color 180ms linear;
}
#nav.is-scrolled { border-bottom-color: var(--rule); }

.nav-inner {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
}

.nav-name {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 28px;
}
.nav-links a {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-micro);
  color: var(--ink-muted);
  text-decoration: none;
  padding-block: 4px;
}
.nav-links a.is-active {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 6px;
}

.nav-email {
  display: none;
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-micro);
  color: var(--ink-muted);
  text-decoration: none;
}

/* ============================================================
   6. SECTION 01 HERO
   ============================================================ */
.hero { padding-top: var(--s8); padding-bottom: 80px; }

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  column-gap: 80px;
  align-items: start;
}

.hero-lead {
  color: var(--ink-muted);
  max-width: var(--col);
  margin-top: var(--s5);
}

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4) var(--s6);
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
  max-width: var(--col);
}
.facts dt {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-micro);
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  margin-bottom: 2px;
}
.facts dd {
  font-family: var(--sans);
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--ink);
}

.hero-portrait img { width: 300px; }

/* load animation */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* hidden only when JS can reveal it again */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
}
body.is-ready .reveal {
  opacity: 1;
  transform: none;
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
body.is-ready .hero-lead:nth-of-type(1) { transition-delay: 60ms; }
body.is-ready .hero-lead:nth-of-type(2) { transition-delay: 120ms; }
body.is-ready .facts { transition-delay: 180ms; }
body.is-ready .hero-portrait { transition-delay: 240ms; }

/* ============================================================
   7. SECTIONS 02 TO 09
   ============================================================ */

/* 02 why */
.why { padding-block: 0 var(--sec-pad); }

/* 03 work */
.work h2 { margin-bottom: var(--s7); }
.work .rail + .rail {
  margin-top: 56px;
  padding-top: var(--s6);
  border-top: 1px solid var(--rule);
}
.work .rail + .rail .rail-meta { padding-top: 6px; }
.rail-body h3 { margin-bottom: var(--s3); }

/* 05 learning */
.learning {
  background: var(--paper-deep);
  padding-block: var(--sec-pad);
}
.learning h2 { margin-bottom: var(--s5); }
.learning .model-intro { margin-bottom: var(--s7); }
.rail--tight + .rail--tight { margin-top: var(--s6); }

/* 06 recalc */
#recalc h2 { margin-bottom: var(--s5); }

/* 07 off the clock */
.off h2 { margin-bottom: var(--s7); }
.off .rail + .rail { margin-top: var(--s7); }

.shot { margin-block: var(--s6); max-width: var(--col); }
/* Photos keep the orientation they were shot in. A single photo is capped by
   the column width and by --shot-h, so tall frames stay a sensible height. */
.shot img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--shot-h);
}


/* 08 resume gap */
#resume-gap h2 { margin-bottom: var(--s5); }
#resume-gap .shot { margin-block: var(--s6); }
/* Two photos to a row: flex-grow is set to each image's aspect ratio, so the
   pair renders at one shared height and the row fills the column exactly,
   whatever mix of horizontal and vertical it contains. */
.shot--pair {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s4);
}
.shot--pair img {
  flex: var(--ar) 1 0;
  min-width: 0;
  width: 100%;
  max-height: none;
}
.shot--pair figcaption { flex: 0 0 100%; margin-top: 0; }

.shot figcaption {
  font-family: var(--sans);
  font-size: var(--t-micro);
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  margin-top: var(--s3);
}

/* ============================================================
   8. MODEL MODULE
   ============================================================ */
.model-sec h2 { margin-bottom: var(--s5); }
.model-intro p { max-width: var(--col); }
.model-sec .model-intro { margin-bottom: var(--s7); }

.model {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 360px;
  column-gap: var(--s8);
  align-items: start;
}

.field + .field { margin-top: var(--s5); }

.field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s3);
}

.field-head label,
.field-label {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-micro);
  letter-spacing: 0.01em;
  color: var(--ink-muted);
}

.field-head output {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-small);
  color: var(--ink);
}

.basis { margin-top: var(--s3); max-width: 56ch; }

/* toggles */
.toggle { display: flex; }
.toggle button {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-micro);
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 10px 16px;
  cursor: pointer;
}
.toggle button + button { margin-left: -1px; border-radius: 0 2px 2px 0; }
.toggle button:first-child { border-radius: 2px 0 0 2px; }
.toggle button[aria-checked="true"] {
  background: var(--accent-soft);
  color: var(--ink);
  border-color: var(--ink-muted);
  position: relative;
  z-index: 1;
}

/* output panel */
.model-output { border-left: 1px solid var(--rule); padding-left: var(--s8); }

.out-label { margin-bottom: var(--s2); }

.figure {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-figure);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--warn);
}
.figure.is-positive { color: var(--accent); }

.out-note {
  font-family: var(--sans);
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 34ch;
  margin-top: var(--s3);
}

.model-output hr {
  height: 1px;
  background: var(--rule);
  margin-block: 20px;
}

.out-rows > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
}
.out-rows > div + div { margin-top: 10px; }
.out-rows dt {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-micro);
  letter-spacing: 0.01em;
  color: var(--ink-muted);
}
.out-rows dd {
  font-family: var(--sans);
  font-size: var(--t-small);
  color: var(--ink);
}

.btn {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-micro);
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 10px 16px;
  cursor: pointer;
  transition: border-color 180ms linear;
}
.btn:hover { border-color: var(--ink); color: var(--ink); }

#reset { margin-top: var(--s5); }

.model-sec .caption { margin-top: 20px; max-width: var(--col); }

/* sliders */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 14px;
  background: transparent;
  cursor: pointer;
  display: block;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 0;
  background: linear-gradient(to right, var(--accent) var(--fill, 0%), var(--rule) var(--fill, 0%));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  margin-top: -6px;
}
input[type="range"]::-moz-range-track {
  height: 2px;
  background: var(--rule);
  border: none;
}
input[type="range"]::-moz-range-progress {
  height: 2px;
  background: var(--accent);
}
input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
}

/* ============================================================
   9. FOOTER
   ============================================================ */
#contact {
  border-top: 1px solid var(--rule);
  padding-top: var(--s8);
  padding-bottom: var(--s7);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s8);
  align-items: start;
}

.footer-note { max-width: var(--col); margin-top: var(--s3); }

.footer-email {
  font-family: var(--serif);
  font-size: var(--t-body);
  line-height: 1.65;
  margin-top: var(--s4);
}
.footer-email a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  text-align: right;
}
.footer-links li {
  display: grid;
  grid-template-columns: auto auto;
  gap: var(--s5);
  justify-content: end;
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-micro);
  letter-spacing: 0.01em;
  color: var(--ink-muted);
}
.footer-plain { color: var(--ink); }
.footer-links a {
  overflow-wrap: anywhere;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.footer-links a:hover,
.footer-email a:hover,
.measure p a:hover { text-decoration-thickness: 2px; }


/* ------------------------------------------------------------
   Type consistency: one line-height per size, applied last so it
   wins over the component rules above.
   ------------------------------------------------------------ */
.nav-links a,
.nav-email,
.btn,
.toggle button,
.out-rows dt,
.field-head label,
.field-label,
.footer-links li,
.footer-plain,
.skip,
.micro,
.rail-meta { line-height: 1.45; }

.nav-name,
.out-rows dd,
.field-head output,
.caption,
.basis,
.outcome,
.out-note { line-height: 1.55; }

.lead,
.footer-note,
.measure p,
.rail-body p:not(.outcome),
.model-intro p { line-height: 1.65; }

/* ============================================================
   10. MEDIA QUERIES
   ============================================================ */
@media (max-width: 1200px) {
  .rail { grid-template-columns: 168px minmax(0, 640px); }
  .model { grid-template-columns: 1fr 320px; column-gap: var(--s7); }
  .model-output { padding-left: var(--s7); }
}

@media (max-width: 900px) {
  :root { --pad: 24px; --sec-pad: 52px; --t-hero: 48px; }

  .hero-grid { grid-template-columns: 1fr; row-gap: var(--s7); }
  .hero-portrait img { width: 240px; }

  .rail { grid-template-columns: 1fr; }
  .rail-meta {
    flex-direction: row;
    gap: var(--s3);
    padding-top: 0;
    margin-bottom: var(--s2);
  }
  .rail-meta span + span::before { content: ""; }

  .model { grid-template-columns: 1fr; row-gap: var(--s6); padding: var(--s6); }
  .model-inputs { order: 2; }
  .model-output { order: 1; border-left: 0; padding-left: 0; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--s7); }
  .footer-links { text-align: left; }
  .footer-links li { justify-content: start; grid-template-columns: 104px minmax(0, 1fr); }
}

@media (max-width: 640px) {
  :root {
    --pad: 20px;
    --sec-pad: 40px;
    --t-hero: 36px;
    --t-h2: 24px;
    --t-h3: 19px;
    --t-body: 17px;
    --t-figure: 30px;
  }
  body { line-height: 1.6; }
  h1 { line-height: 1.08; }
  .hero { padding-top: var(--s7); }

  .nav-links { display: none; }
  .nav-email { display: block; }

  .model { padding: var(--s5); }
  .facts { grid-template-columns: 1fr; gap: var(--s4); }
  .footer-links li { grid-template-columns: 1fr; gap: 2px; }
  .shot--pair { flex-direction: column; }
  .shot--pair img { flex: none; width: 100%; }
}

/* ============================================================
   11. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }
  body.is-ready .reveal { transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}