/* ============================================================================
   joereynolds.cv — stylesheet
   Implements Lynne's design spec (2026-06-26). Monochrome by intent.
   The slate accent lives only in <meta theme-color> + the favicon — never in this file.
   ========================================================================== */

/* ----------------------------------------------------------------- Tokens */
:root {
  /* Monochrome palette (§3) */
  --paper:        #FAFAF8;
  --paper-2:      #F4F3F0;
  --ink:          #1A1A18;
  --ink-strong:   #000000;
  --ink-2:        #3D3D3A;
  --ink-3:        #6B6B66;
  --ink-4:        #8C8C86;
  --rule:         #E3E2DD;
  --rule-strong:  #C9C8C2;

  /* Type families (§2.1) */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Type scale (§2.2) */
  --fs-name:    2.5rem;     /* 40 */
  --fs-h2:      1.5rem;     /* 24 */
  --fs-role:    1.1875rem;  /* 19 */
  --fs-tagline: 1.1875rem;  /* 19 */
  --fs-body:    1.0625rem;  /* 17 */
  --fs-meta:    0.9375rem;  /* 15 */
  --fs-nav:     0.8125rem;  /* 13 */
  --fs-eyebrow: 0.75rem;    /* 12 */
  --fs-tag:     0.9375rem;  /* 15 */

  /* Spacing scale, 8px base (§4.3) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 40px;
  --sp-7: 64px;
  --sp-8: 88px;

  /* Layout (§4.2 / §4.4) */
  /* Frame width. Lynne specced 720px; on the laptop widths recruiters use
     (1366–1440) that read as cramped — small in a big white field. Widened to
     880px so the header, nav, section rules and headings use a fuller, more
     confident measure. Body TEXT stays capped at 66ch (see --measure below) so
     reading lines never exceed the readability ideal — the frame breathes, the
     prose doesn't run long. */
  --content-max: 880px;
  --measure: 66ch;         /* body-copy max line length — independent of frame */
  --page-gutter: 24px;     /* mobile; bumped at breakpoints */
  --nav-h: 56px;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Anchored jumps clear the fixed nav (§4.4) */
section[id], header[id] {
  scroll-margin-top: calc(var(--nav-h) + 16px);
}

/* ------------------------------------------------------------------- Links */
/* Body links: ink, underline does the work — no colour change (§8). */
a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule-strong);
  transition: text-decoration-color .15s ease;
}
a:hover { text-decoration-color: var(--ink); }

/* Global focus ring: ink, never blue (§8). */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* =====================================================================
   STICKY NAV (§7)
   ===================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
/* Frosted edge over scrolling text — degrades to solid --paper (§7.1). */
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  .nav {
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    -webkit-backdrop-filter: saturate(1) blur(8px);
    backdrop-filter: saturate(1) blur(8px);
  }
}

.nav-inner {
  max-width: calc(var(--content-max) + 40px);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--page-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Wordmark (§7.1)
   Made a full-height flex item so the JR caps sit DEAD-CENTRE in the 56px bar.
   `align-items:center` + `line-height:1` normalises the Newsreader cap height —
   without this the serif rides high against the sans nav labels. The wordmark
   keeps its own right-hand breathing room (margin-right) and never shrinks, so
   it can't butt up against the first nav link ("PROFILE"). */
.nav-mark {
  display: flex;
  align-items: center;
  height: 100%;
  flex-shrink: 0;
  margin-right: var(--sp-6);   /* guaranteed gap to the link row — no collision */
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.01em;
}

/* Nav link row (§7.1) */
.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}
.nav-links a {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--fs-nav);
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  padding: 6px 2px;
  position: relative;
  transition: color .15s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-links li + li { margin-left: 28px; }

/* Active state — the one near-black emphasis + ink underline (§7.2) */
.nav-links a.is-active { color: var(--ink-strong); }
.nav-links a.is-active::after {
  content: "";
  position: absolute;
  left: 2px; right: 2px; bottom: -2px;
  height: 2px;
  background: var(--ink);
}

/* Download link in nav — sits apart from the section links (§6) */
.nav-download { margin-left: 28px; }
.nav-download a { color: var(--ink); }

/* Mobile disclosure toggle — hidden on desktop (§7.3) */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 8px 4px;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--fs-nav);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.nav-toggle-icon line {
  stroke: var(--ink);
  stroke-width: 1.25;
}

/* =====================================================================
   CONTENT COLUMN (§4)
   ===================================================================== */
.content {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--page-gutter) var(--sp-8);
}

/* Body copy never exceeds the ideal measure (§2.3).
   Capped independently of the frame: the column widened to 880px but reading
   lines stay ≤66ch so the profile paragraphs and bullets never run long. */
.lede, .role-context, .bullets li,
#profile p, .tag-run {
  max-width: var(--measure);
}

/* =====================================================================
   HEADER (§5.1)
   ===================================================================== */
.header {
  padding-top: var(--sp-7);
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: var(--sp-6);
  margin-bottom: var(--sp-8);
}

.header-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--fs-name);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

.tagline {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-tagline);
  line-height: 1.4;
  color: var(--ink-2);
  margin: var(--sp-2) 0 0;
}

.contact {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--fs-meta);
  line-height: 1.4;
  color: var(--ink-3);
  margin: var(--sp-4) 0 0;
}
.contact a { color: var(--ink-3); }
.contact a:hover { color: var(--ink); }
.contact .dot { color: var(--ink-4); margin: 0 0.4em; }

/* Download button — quiet outline, the only "interactive object" styling (§6) */
.btn-download {
  font: 500 0.875rem/1 var(--sans);   /* 14px */
  letter-spacing: 0.02em;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  padding: 10px 16px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: border-color .15s ease, background-color .15s ease;
}
.btn-download:hover,
.btn-download:focus-visible {
  border-color: var(--ink);
  background: var(--paper-2);
}
.btn-download:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn-download-icon {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =====================================================================
   SECTION HEADINGS (§5.2)
   ===================================================================== */
section { margin-top: var(--sp-7); }

.section-heading {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.25rem;          /* 20px — caps read larger, so step down (§5.2) */
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--rule);
}

/* =====================================================================
   PROFILE (§5.3)
   ===================================================================== */
#profile p {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 var(--sp-4);
}
#profile p:last-child { margin-bottom: 0; }
/* The opening paragraph sits as a lede — a touch more air beneath it. */
.lede { margin-bottom: var(--sp-5) !important; }

/* =====================================================================
   CORE EXPERTISE + tag runs (§5.4 / §5.7)
   Wrapped inline list, middot-separated. No chips.
   ===================================================================== */
.tag-run {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-tag);
  line-height: 1.7;
  color: var(--ink-2);
}
.tag-run li { display: inline; }
.tag-run li::after {
  content: " · ";
  color: var(--ink-4);
}
.tag-run li:last-child::after { content: ""; }

/* The one permitted zone fill — Expertise only (§5.4) */
.tag-run.band {
  background: var(--paper-2);
  padding: var(--sp-5);
  border-radius: 2px;
  max-width: none;
}

/* =====================================================================
   EXPERIENCE (§5.5)
   ===================================================================== */
.entry { margin-top: var(--sp-6); }
.entry:first-of-type { margin-top: var(--sp-5); }

.role-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--fs-role);
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}

/* Company — location left, dates right, justified to the column edges. */
.meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--fs-meta);
  line-height: 1.4;
  color: var(--ink-3);
  margin: var(--sp-2) 0 0;
}
.meta-where { color: var(--ink-3); }
.date {
  color: var(--ink-3);
  white-space: nowrap;
  flex-shrink: 0;
}

.role-context {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-2);   /* recessive so the bullets hold primacy */
  margin: var(--sp-3) 0 0;
}

/* Achievement bullets — dashed marker, hanging indent (§5.5) */
.bullets {
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: 0;
}
.bullets li {
  position: relative;
  padding-left: 1.25em;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  margin-top: var(--sp-3);
}
.bullets li:first-child { margin-top: 0; }
.bullets li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--ink-3);
}

/* =====================================================================
   EDUCATION (§5.6) — meta pattern, no bullets
   ===================================================================== */
.edu { color: var(--ink); margin-top: var(--sp-4); }
.edu:first-of-type { margin-top: var(--sp-5); }
.edu .meta-where { color: var(--ink); }

/* =====================================================================
   QUALIFICATIONS & TECHNOLOGY (§5.7)
   ===================================================================== */
.cred-block { margin-top: var(--sp-5); }
.cred-block:first-of-type { margin-top: var(--sp-5); }

.cred-label {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin: 0 0 var(--sp-2);
}

/* =====================================================================
   RESPONSIVE (§9) — mobile-first; layer up
   ===================================================================== */

/* Base (<768px): nav collapses to a disclosure menu. */
@media (max-width: 767.98px) {
  .nav-toggle { display: inline-flex; }

  /* Collapsed full-width panel dropping from the bar (§7.3) */
  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: var(--sp-2) var(--page-gutter);
  }
  .nav.is-open .nav-links { display: flex; }

  .nav-links li { margin: 0 !important; }
  .nav-links li + li { border-top: 1px solid var(--rule); }
  .nav-links a {
    display: flex;
    align-items: center;
    min-height: 44px;           /* touch target */
    padding: 6px 0;
    color: var(--ink);
  }
  .nav-links a.is-active::after {
    left: 0; right: auto;
    width: 1.5em;
  }
  .nav-download { border-top: 1px solid var(--rule); }

  /* Header stacks; button goes full-width-left beneath contact (§5.1) */
  .header-top { display: block; }
  .btn-download {
    display: inline-flex;
    margin-top: var(--sp-4);
  }

  /* Meta lines stack: text then date below (§5.5 / §5.6) */
  .meta {
    flex-direction: column;
    gap: var(--sp-1);
  }
  .date { align-self: flex-start; }

  section { margin-top: var(--sp-6); }
}

/* ≥768px */
@media (min-width: 768px) {
  :root { --page-gutter: 40px; }
  .nav-toggle { display: none; }
  .nav-links { display: flex !important; }
}

/* ≥1100px — the "expensive" view: lots of paper around a tight column. */
@media (min-width: 1100px) {
  :root { --page-gutter: 48px; }
}

/* =====================================================================
   MOTION (§8) — honour reduced-motion
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* =====================================================================
   PRINT / PDF (§10) — designed, not inherited.
   The downloadable PDF is generated from THIS stylesheet.
   ===================================================================== */
@media print {
  /* Ground & ink: pure for print economy + crispness */
  :root { --paper:#fff; --paper-2:#fff; }
  body { background:#fff; color:#000; font-size:10.5pt; line-height:1.4; }

  /* Kill the chrome */
  .nav, .btn-download, .nav-toggle { display:none !important; }

  /* Single column, full page width within margins */
  .content { max-width:none; margin:0; padding:0; }
  .lede, .role-context, .bullets li, #profile p, .tag-run { max-width:none; }

  /* Page setup */
  @page { size:A4; margin:18mm 18mm 16mm 18mm; }

  /* Reclaim the screen header's generous vertical rhythm for paper.
     The 64–88px screen gaps are right on screen, far too loose on A4. */
  .header { padding-top:0; margin-bottom: 14pt; padding-bottom: 10pt; }
  section { margin-top: 16pt; }
  .section-heading { margin-bottom: 8pt; padding-bottom: 6pt; }
  #profile p { margin: 0 0 7pt; }
  .lede { margin-bottom: 9pt !important; }
  .entry { margin-top: 12pt; }
  .entry:first-of-type { margin-top: 8pt; }
  .meta { margin-top: 3pt; }
  .role-context { margin-top: 5pt; }
  .bullets { margin-top: 5pt; }
  .bullets li { margin-top: 5pt; }
  .bullets li:first-child { margin-top: 0; }
  .edu { margin-top: 6pt; }
  .edu:first-of-type { margin-top: 8pt; }
  .cred-block { margin-top: 9pt; }
  .cred-block:first-of-type { margin-top: 8pt; }
  .cred-label { margin-bottom: 3pt; }

  /* Type for paper. NB: several body elements carry their own font-size
     (var(--fs-body) = 17px) which would otherwise beat the body-level print
     size and balloon the page count — so set them explicitly here. */
  .name { font-size: 22pt; line-height: 1.1; }
  .tagline { font-size: 12pt; }
  .contact { font-size: 9.5pt; }
  .section-heading { font-size:12pt; letter-spacing:0.08em; border-bottom:1px solid #bbb; }
  .role-title { font-size:11pt; }
  .meta, .date { font-size:9.5pt; color:#333; }
  .cred-label { font-size:8.5pt; color:#333; }

  /* Body-copy elements: force paper size + tighter leading. */
  #profile p,
  .lede,
  .role-context,
  .bullets li,
  .tag-run,
  .tag-run li { font-size:10.5pt; line-height:1.36; }

  /* Expertise band reads as plain text on paper */
  .tag-run.band { background:none; padding:0; }
  .tag-run { color:#000; }
  .role-context { color:#222; }

  /* Page-break discipline */
  section { break-inside:auto; }
  .entry { break-inside:avoid; }                          /* never split a role across pages */
  .role-title, .section-heading { break-after:avoid; }    /* heading never orphaned at page foot */
  .bullets li { break-inside:avoid; }
  p { orphans:3; widows:3; }

  /* Links: strip underlines, do NOT print URLs in parentheses */
  a { color:#000; text-decoration:none; }
  a[href]::after { content:"" !important; }
}