/* ==========================================================================
   chrislorensson.com — author styles
   Simple editorial baseline. Sits on top of H5BP base (h5bp-base.css).
   Intentionally minimal; to be workshopped after the initial build.
   ========================================================================== */

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }

/* --- Self-hosted fonts (woff2, OFL) -------------------------------------- */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/fraunces-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/fraunces-italic-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/spacemono-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/spacemono-700-latin.woff2") format("woff2");
}

/* --- Tokens -------------------------------------------------------------- */
:root {
  --paper: #fbfaf7;
  --ink: #1b1916;
  --ink-soft: #56514a;
  --ink-faint: #6c675e;   /* darkened to meet WCAG AA (≈5.4:1 on --paper) */
  --accent: #ab4f3a;   /* deep clay — AA-compliant on paper and the maker tint */
  --rule: #e4ded2;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --measure: 40rem;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
}

/* Dark mode — follows the OS setting automatically. Tokens re-mapped so every
   component inherits the new palette. Contrast verified to WCAG AA. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #15130f;       /* dark warm background */
    --ink: #efe9dd;         /* warm off-white text */
    --ink-soft: #bdb5a6;    /* secondary text (≈8.9:1) */
    --ink-faint: #8f897c;   /* meta / faint (≈5.3:1) */
    --accent: #e08a6f;      /* lightened clay (≈7:1) */
    --rule: #322d27;        /* subtle divider */
  }
}

/* --- Base ---------------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: 5rem; color-scheme: light dark; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

a { color: var(--accent); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }

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

/* Word flow: `pretty` smooths widows/orphans across body copy; `.nowrap`
   keeps hyphenated compounds and dash-bound phrases from breaking. */
p, li { text-wrap: pretty; }
.nowrap { white-space: nowrap; }

/* --- Layout -------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(3rem, 8vw, 5.5rem); }
.section + .section { border-top: 1px solid var(--rule); }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.section-title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); margin-bottom: 1.5rem; }

/* --- Skip link ----------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  background: var(--ink);
  color: var(--paper);
  padding: 0.5rem 0.85rem;
  border-radius: 0 0 4px 4px;
  font-family: var(--mono);
  font-size: 0.8rem;
  text-decoration: none;
  z-index: 100;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }

/* --- Sticky header / nav ------------------------------------------------- */
/* At the top of the page the header is transparent and borderless, so it reads
   as part of the page and the brand is hidden (the big H1 already names the
   page). Once scrolled, JS adds .is-scrolled: the bar gains a background +
   border and the brand fades in to keep orientation. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: saturate(1.1) blur(8px);
  border-bottom-color: var(--rule);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  align-content: center;       /* keep wrapped rows together; spare height goes outside */
  justify-content: flex-end;   /* links sit right while brand is hidden */
  gap: 0.1rem 1.25rem;
  min-height: 2.75rem;
  flex-wrap: wrap;
}
.site-header.is-scrolled .wrap { justify-content: space-between; }
/* On phones the header wraps to two rows; give it more height so the brand and
   nav read as a comfortable bar, while align-content keeps the two rows tight. */
@media (max-width: 36rem) {
  .site-header .wrap { min-height: 4.25rem; }
}
.site-header .brand {
  display: none;               /* hidden at the top of the page */
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.site-header.is-scrolled .brand { display: inline-block; }
.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-links a {
  display: inline-block;
  padding-block: 0.35rem;        /* ≥24px tap target (WCAG 2.2 SC 2.5.8) */
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
}
.nav-links a:hover { color: var(--accent); }

/* --- Hero ---------------------------------------------------------------- */
.hero { padding-block: clamp(3.5rem, 10vw, 7rem); }
.hero h1 {
  font-size: clamp(2.6rem, 1.8rem + 4vw, 5rem);
  line-height: 0.98;
  margin-bottom: 0.5rem;
}
.hero .tagline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3rem, 1rem + 1.2vw, 1.75rem);
  line-height: 1.25;
  color: var(--ink-soft);
  margin-bottom: 1.75rem;
}
.hero .lede {
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.35rem);
  line-height: 1.5;
  margin-bottom: 2rem;
}

/* proof-at-a-glance — stacked fact list (no inline separators to dangle) */
.proof {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 1.5rem 0 0;
  list-style: none;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
}
.proof li { padding-left: 1.1rem; position: relative; }
.proof li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--accent);
}

/* --- Leadership approach -------------------------------------------------- */
.approach-list { display: grid; gap: 2rem; }
.approach-item h3 {
  font-size: 1.4rem;
  margin-bottom: 0.4rem;
}
.approach-item p { color: var(--ink-soft); max-width: var(--measure); margin: 0; }

@media (min-width: 40rem) {
  .approach-list { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 3rem; }
}

/* --- Recommendations (stacked, alternating left/right) ------------------- */
.rec-list { display: flex; flex-direction: column; gap: 2.75rem; }
.rec {
  margin: 0;
  max-width: 26rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--accent);
}
/* every other quote mirrors to the right */
.rec:nth-child(even) {
  margin-left: auto;
  text-align: right;
  padding-left: 0;
  padding-right: 1.25rem;
  border-left: 0;
  border-right: 2px solid var(--accent);
}
.rec p { font-size: 1.15rem; line-height: 1.45; color: var(--ink); }
.rec-by { margin-top: 0.85rem; }
.rec-by cite {
  font-style: normal;
  font-weight: 600;
  color: var(--ink);
}
.rec-role {
  display: block;
  margin-top: 0.1rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
}
.rec-more {
  margin-top: 2.5rem;
  font-family: var(--mono);
  font-size: 0.85rem;
}

/* --- Featured work ------------------------------------------------------- */
.work-list { display: grid; gap: 2.5rem; }
.work-item h3 { font-size: 1.6rem; margin-bottom: 0.15rem; }
.work-item .role {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}
.work-item p { color: var(--ink-soft); margin: 0; }
.work-item .nda {
  display: inline-block;
  margin-top: 0.6rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* --- Career timeline (compact, date-anchored vertical rail) -------------- */
/* Career shares the Work section; this is a sub-block, not a new section,
   so it gets breathing room but no divider line. */
.subsection { margin-top: clamp(2.5rem, 6vw, 4rem); }

.timeline { margin: 0; padding: 0; list-style: none; }
.timeline-entry {
  display: grid;
  grid-template-columns: 6rem 1fr;   /* fits the longest range; dates right-align */
  column-gap: 1rem;
}
/* Date sits on the same line as the role + marker (top-aligned baselines). */
.t-date {
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--ink-faint);
  text-align: right;
  white-space: nowrap;
  padding-top: 0.34rem;
}
/* The rail: a continuous line on the left edge of each body, with a marker
   anchored to the role's first line. Bodies abut (padding lives inside) so the
   line is unbroken from first role to last. */
.t-body {
  position: relative;
  border-left: 1px solid var(--rule);
  padding: 0 0 1rem 1.25rem;
}
.timeline-entry:last-child .t-body { padding-bottom: 0; }
.t-body::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 0.45rem;
  width: 7px;
  height: 7px;
  background: var(--accent);
}
.t-body .role {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.15;
}
.t-body .org {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  margin-top: 0.1rem;
}
.t-body .desc {
  color: var(--ink-soft);
  font-size: 0.97rem;
  margin-top: 0.25rem;
}
.timeline-more {
  margin-top: 1.5rem;
  padding-left: calc(6rem + 1rem + 1.25rem);
  font-family: var(--mono);
  font-size: 0.85rem;
}
@media (max-width: 26rem) {
  .timeline-more { padding-left: 0; }
}

/* --- About + maker callout ----------------------------------------------- */
.about p { max-width: var(--measure); }
.about .portrait {
  display: block;
  width: 160px;
  height: auto;
  margin: 0 0 1.25rem;
  border: 1px solid var(--rule);
}
@media (min-width: 34rem) {
  .about .portrait {
    float: right;
    width: 200px;
    margin: 0.3rem 0 1rem 1.75rem;
  }
}
/* keep the maker aside below the floated portrait */
.about .maker { clear: right; }
.maker {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.maker p { margin: 0; max-width: var(--measure); }
.maker strong { font-family: var(--serif); }

/* --- Contact / footer ---------------------------------------------------- */
.contact-block {
  font-style: normal;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}
.contact .email-link {
  align-self: flex-start;   /* underline only as wide as the text */
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}
.contact .noscript-email {
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: 2rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
}