/* ── Direction D2 · "Aerospace Plate, with presence" ──────────────────
   D's hero and typography — Besley slab, Source Sans 3 small caps,
   tabular figures, RTX navy — plus the structural devices from E:
   tonal bands, the career timeline, a pull-quote, a deep navy footer.
   ──────────────────────────────────────────────────────────────────── */

@font-face{font-family:'Besley';src:url('fonts/besley.woff2')format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('fonts/srcsans3.woff2')format('woff2');font-weight:300 700;font-display:swap}

:root{
  --ground:#f7f6f3; --band:#edebe5; --deep:#1f2a44;
  --ink:#1f2a44; --secondary:#55585c; --hairline:#d4d6d8; --accent:#8a1c22;
  --slab:'Besley',Georgia,serif;
  --sans:'Source Sans 3',-apple-system,BlinkMacSystemFont,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  font-variant-numeric:tabular-nums lining-nums;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 30px}

.label{
  font-family:var(--sans);font-variant:small-caps;font-weight:600;
  font-size:15px;letter-spacing:.18em;color:var(--secondary);margin:0 0 16px;
}
.scale{
  font-family:var(--sans);font-variant:small-caps;font-weight:600;
  font-size:14px;letter-spacing:.09em;color:var(--secondary);margin:0 0 12px;
}
h1{font-family:var(--slab);font-size:clamp(36px,5.2vw,52px);font-weight:500;line-height:1.05;letter-spacing:-.012em;margin:0 0 18px}
h3{font-family:var(--slab);font-size:19px;font-weight:600;line-height:1.3;margin:0 0 5px}
p{margin:0 0 16px;max-width:660px}
p:last-child{margin-bottom:0}

/* ── hero: unchanged from D ──────────────────────────────────────── */
.hero{padding:88px 0 0}
.hero-grid{display:grid;grid-template-columns:1fr 340px;gap:64px;align-items:start}
.hero-lede{font-size:19.5px;line-height:1.5;max-width:34ch;margin:0 0 22px;color:var(--ink)}
.portrait{width:340px}
.portrait picture{display:block;position:relative;width:100%;padding-top:114.4%;
  background:#eceae6;border:1px solid var(--hairline)}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 16%}
.plate-rule{margin:46px 0 0;border:0;border-top:2px solid var(--ink)}
.plate-rule + .plate-rule{margin-top:3px;border-top:1px solid var(--hairline)}

/* ── tonal band: the thesis + pull-quote ─────────────────────────── */
.band{background:var(--band);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);margin-top:56px}
.band-inner{padding-block:66px}
.thesis-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:start}
.thesis p{font-size:21px;line-height:1.5;max-width:36ch;margin:0 0 20px}
.thesis p:last-child{font-size:17.5px;color:var(--secondary);max-width:46ch;margin:0}
.quote{
  border-left:2px solid var(--accent);padding:2px 0 2px 24px;
  font-family:var(--slab);font-size:19px;line-height:1.48;max-width:34ch;margin:0;
}
.quote cite{
  display:block;margin-top:14px;font-style:normal;font-family:var(--sans);
  font-variant:small-caps;font-weight:600;font-size:13px;letter-spacing:.16em;color:var(--secondary);
}

/* ── the timeline ────────────────────────────────────────────────── */
.timeline{padding-block:64px 70px;border-bottom:1px solid var(--hairline)}
.track{display:grid;grid-template-columns:repeat(5,1fr);margin-top:30px;position:relative}
.track::before{content:"";position:absolute;left:0;right:0;top:0;border-top:1px solid var(--ink)}
.stop{padding:20px 18px 0 0;position:relative}
.stop::before{content:"";position:absolute;left:0;top:-4px;width:1px;height:9px;background:var(--ink)}
.stop .yr{
  font-family:var(--sans);font-variant:small-caps;font-weight:700;font-size:15px;
  letter-spacing:.07em;display:block;margin-bottom:6px;
}
.stop .what{font-size:15.5px;line-height:1.35;display:block}
.stop .who{font-size:14px;line-height:1.35;color:var(--secondary);display:block;margin-top:3px}

/* ── sections ────────────────────────────────────────────────────── */
section{padding:60px 0}
section + section{border-top:1px solid var(--hairline)}
.section-grid{display:grid;grid-template-columns:210px 1fr;gap:40px;align-items:start}
.areas{list-style:none;margin:0;padding:0;columns:2;column-gap:40px;max-width:660px}
.areas li{break-inside:avoid;padding:0 0 11px;font-size:16.5px;line-height:1.4}
.entry{max-width:660px;margin:0 0 40px}
.entry:last-of-type{margin-bottom:0}
.entry p{font-size:16.5px}
.entry-note{font-size:15.5px;color:var(--secondary);margin-top:34px;max-width:60ch}
.creds{list-style:none;margin:0;padding:0;max-width:660px}
.creds li{padding:0 0 11px;font-size:16.5px;line-height:1.4}
.creds-tail{font-size:15.5px;color:var(--secondary);margin-top:14px;max-width:60ch}

/* ── deep navy footer ────────────────────────────────────────────── */
.foot{background:var(--deep);color:#dfe3e8}
.foot-inner{padding:58px 0 64px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.foot img{width:70px;height:88px;object-fit:cover;object-position:50% 14%;display:block}
.foot .name{font-family:var(--slab);font-size:21px;line-height:1.2;margin:0;color:#fff}
.foot .links{font-size:15px;margin:8px 0 0}
.foot .links a{color:#dfe3e8;text-decoration:underline;text-decoration-color:#9aa5b5;text-underline-offset:3px;text-decoration-thickness:1px}
.foot .links a:hover{text-decoration-color:#dfe3e8}
.foot .links .sep{color:#4a5468;margin:0 12px}
.mockup-tag{font-variant:small-caps;font-size:13px;letter-spacing:.2em;color:#5d6678;margin:0;padding:0 0 34px}
.mockup-tag a{color:#5d6678}

@media (max-width:880px){
  .hero{padding:40px 0 0}
  .hero-grid{grid-template-columns:1fr;gap:28px}
  .portrait{width:100%;max-width:270px;order:-1}
  .plate-rule{margin-top:34px}
  .band{margin-top:36px}
  .band-inner{padding-block:44px}
  .thesis-grid{grid-template-columns:1fr;gap:30px}
  .thesis p{font-size:18.5px;max-width:none}
  .thesis p:last-child{max-width:none}
  .quote{font-size:17.5px;max-width:none}
  .timeline{padding-block:44px 48px}
  .track{grid-template-columns:1fr;margin-top:22px}
  .track::before{display:none}
  .stop{padding:14px 0 14px 18px;border-left:1px solid var(--ink)}
  .stop::before{left:-1px;top:18px;width:9px;height:1px}
  section{padding:44px 0}
  .section-grid{grid-template-columns:1fr;gap:14px}
  .areas{columns:1}
  body{font-size:16.5px}
}

/* ── print ───────────────────────────────────────────────────────── */
@media print{
  @page{margin:13mm 13mm}
  body{background:#fff;font-size:9pt;line-height:1.38;
       -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .wrap{max-width:none;padding:0}

  /* the print viewport is ~816px, which trips the mobile query — undo it */
  .hero{padding:0}
  .hero-grid{display:grid;grid-template-columns:1fr 42mm;gap:9mm;align-items:start}
  .portrait{order:0;width:42mm;max-width:none;margin:0}
  h1{font-size:21pt;line-height:1.02;margin:0 0 3.5mm}
  .hero-lede{font-size:11pt;max-width:none;margin:0 0 3mm}
  .plate-rule{margin-top:6mm}

  .band{background:#fff;margin-top:6mm;border-color:#c9ccd0}
  .band-inner{padding:5mm 0}
  .thesis-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:9mm}
  .thesis p{font-size:11pt;max-width:none}
  .thesis p:last-child{font-size:9.5pt;max-width:none}
  .quote{font-size:10.5pt;max-width:none}

  .timeline{padding:5mm 0;break-inside:avoid;page-break-inside:avoid}
  .track{display:grid;grid-template-columns:repeat(5,1fr);margin-top:5mm;break-inside:avoid;page-break-inside:avoid}
  .track::before{display:block}
  .stop{padding:4mm 3mm 0 0;border-left:0}
  .stop::before{left:0;top:-4px;width:1px;height:9px}
  .stop .yr{font-size:9pt}
  .stop .what{font-size:8.5pt}
  .stop .who{font-size:8pt}

  section{padding:3.5mm 0;break-inside:avoid;page-break-inside:avoid}
  .section-grid{display:grid;grid-template-columns:34mm 1fr;gap:7mm}
  .areas{columns:2}
  .entry{break-inside:avoid;page-break-inside:avoid;margin-bottom:4mm;max-width:none}
  .entry p,.areas li,.creds li{font-size:9pt}
  .entry-note,.creds-tail{font-size:9pt}

  .foot{background:#fff;color:#1f2a44;border-top:1px solid #c9ccd0;break-inside:avoid}
  .foot-inner{padding:5mm 0 0;display:block}
  .foot img{display:none}
  .foot .name{color:#1f2a44;font-size:12pt}
  .foot .links{font-size:9pt;margin-top:1.5mm}
  .foot .links a{color:#1f2a44;border-bottom:0}
  .foot .links a[href^="http"]::after{content:" — " attr(href);color:#63666a}
}

/* ── document pages (privacy, accessibility) ─────────────────────── */
.doc{max-width:660px;padding:64px 0 0}
.doc h1{font-size:clamp(28px,4vw,38px);margin-bottom:8px}
.doc .updated{font-family:var(--sans);font-variant:small-caps;font-weight:600;
  font-size:14px;letter-spacing:.09em;color:var(--secondary);margin:0 0 34px}
.doc h2{font-family:var(--slab);font-size:20px;font-weight:600;line-height:1.3;
  margin:34px 0 8px;color:var(--ink)}
.doc p,.doc li{font-size:16.5px;line-height:1.62;max-width:660px}
.doc ul{margin:0 0 16px;padding-left:20px}
.doc li{margin-bottom:7px}
.doc a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--accent)}
.doc a:hover{color:var(--accent)}
.doc .back{display:inline-block;font-family:var(--sans);font-variant:small-caps;
  font-weight:600;font-size:14px;letter-spacing:.12em;color:var(--secondary);
  border:0;margin:0 0 40px}
.doc .back:hover{color:var(--accent)}
.doc-end{margin:48px 0 0}
@media (max-width:880px){
  .doc{padding-top:36px}
  .doc p,.doc li{font-size:16px}
}
@media print{
  .doc{padding-top:0;max-width:none}
  .doc .back{display:none}
}

/* ── footer legal line ───────────────────────────────────────────── */
.foot-legal{font-size:13.5px;margin:22px 0 0;color:#a9b3c2}
.foot-legal a{color:#a9b3c2;text-decoration:none;border-bottom:1px solid #8f9bb3;display:inline-block;padding:2px 0}
.foot-legal a:hover{color:#dfe3e8;border-bottom-color:#dfe3e8}
.foot-legal .sep{color:#8f9bb3;margin:0 10px}
@media print{ .foot-legal{color:#63666a;font-size:8.5pt} .foot-legal a{color:#63666a;border-bottom:0} }

/* ── headings that look like rail labels (B3) ────────────────────── */
h2.label{font-family:var(--sans);font-variant:small-caps;font-weight:600;
  font-size:15px;letter-spacing:.18em;color:var(--secondary);
  margin:0 0 16px;line-height:1.6}

/* ── focus (S3) ──────────────────────────────────────────────────── */
a:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
.foot a:focus-visible{outline-color:#ffd166}

/* ── timeline as a real list (S6) ────────────────────────────────── */
ol.track{list-style:none;margin:30px 0 0;padding:0}
li.stop{list-style:none}

/* ── the pull-quote label (N4) ───────────────────────────────────── */
.cite-label{display:block;margin-top:14px;font-family:var(--sans);
  font-variant:small-caps;font-weight:600;font-size:13px;
  letter-spacing:.16em;color:var(--secondary)}
.meta-note{font-size:.82em;color:#a9b3c2}

/* ── 881–1023: five timeline columns need breathing room ─────────── */
@media (min-width:881px) and (max-width:1023px){
  .hero-grid{gap:44px}
  .stop{padding-right:12px}
  .stop .yr{font-size:14px;letter-spacing:.05em}
  .stop .what{font-size:14.5px}
  .stop .who{font-size:13px}
}

/* ── WCAG 2.2 target size on touch (2.5.8) ───────────────────────── */
@media (max-width:880px){
  .foot .links a,.foot-legal a{display:inline-block;padding:6px 0}
}