/* youdots — one stylesheet. Generated from css/src/*.css in this order:
   fonts.css · colors.css · typography.css · spacing.css · base.css · components.css · shell.css
   Plain CSS, no build step, no dependencies. Safe to commit as-is. */


/* youdots — typefaces
   Newsreader  · the voice. Optical-size serif; everything the reader reads.
   Martian Mono · the apparatus. Years, labels, meta, client lists.
   Nothing else. Two families carry the whole system, at weights 400 and 500.

   Self-hosted variable files (latin subset) — the staging CSP allows
   first-party fonts only, so the original Google Fonts @import is replaced
   by these @font-face rules. Nothing else in the system changes. */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/newsreader-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 300 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/newsreader-italic-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Martian Mono";
  font-style: normal;
  font-weight: 300 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/martian-mono-latin.woff2") format("woff2");
}

/* youdots — colour
   A dossier printed on warm stock. Ink is near-black but never pure black;
   paper is never pure white. One accent — the youdots blue — carries
   emphasis, links, and the mono apparatus. No gradients, no shadows on paper. */
:root {
  /* paper */
  --paper:        #F5F3EE;  /* the page */
  --paper-deep:   #EDE9E0;  /* recessed band, quoted block, table zebra */
  --paper-white:  #FCFBF8;  /* specimen page plate and print stock only — never a surface on the reading page */

  /* ink */
  --ink:          #14140F;  /* headlines, entry titles */
  --ink-body:     #2B2B23;  /* running prose */
  --ink-soft:     #55554A;  /* secondary prose, org names */
  --ink-mute:     #5E5E50;  /* mono meta, captions, dormant labels — dark enough to stay AA at mono sizes */

  /* structure */
  --rule:         #14140F;  /* section rule — full-strength ink, hairline */
  --rule-soft:    #CDCABF;  /* entry divider */
  --rule-faint:   #E1DDD2;  /* internal grid, table cells */

  /* accent */
  --accent:       #0057FF;  /* youdots blue — labels, links, emphasised italics */
  --accent-deep:  #00308F;  /* accent hover / pressed */
  --accent-wash:  #E2E7F3;  /* accent-tinted fill, active nav, marker — blue mixed into the warm stock, not a cool screen tint */

  /* print — PDF templates flatten paper to white stock */
  --print-paper:  #FFFFFF;
}

/* youdots — typography
   One serif at many optical sizes, one mono at three.
   Sizes are fixed px: this system's primary output is a printed page,
   and the web page holds the same measure. */
:root {
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif; /* @kind font */
  --mono:  "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace; /* @kind font */

  /* scale — eight sizes, no near-duplicates */
  --fs-display:  76px;  /* name on the CV cover */
  --fs-title:    44px;  /* page / case title */
  --fs-lede:     31px;  /* pull statement */
  --fs-entry:    24px;  /* role or case heading; subtitle under the name (italic) */
  --fs-body:   18.5px;  /* running prose */
  --fs-body-sm:16.5px;  /* entry prose, dense columns, section head */
  --fs-mono:   10.5px;  /* years, meta */
  --fs-mono-sm:  10px;  /* labels, client lists */

  /* leading */
  --lh-display: 0.94; /* @kind other */
  --lh-lede:    1.34; /* @kind other */
  --lh-body:    1.66; /* @kind other */
  --lh-dense:   1.62; /* @kind other */
  --lh-mono:    1.7; /* @kind other */

  /* tracking */
  --tr-display: -0.02em;
  --tr-tight:  -0.01em;
  --tr-mono:    0.06em;  /* all lowercase/mixed mono */
  --tr-caps:    0.09em;  /* uppercase mono runs */
  --tr-label:   0.2em;   /* uppercase mono eyebrows */

  /* measure */
  --measure:      62ch;
  --measure-tight:56ch;
  --measure-lede: 20ch;
  --measure-lede-wide: 26ch;

  /* page */
  --page-width:  900px;
  --rail-width:  132px;
  --rail-gap:     34px;
}

/* youdots — spacing
   A slow rhythm. The large steps are the point: the page should feel
   unhurried and never crowd two ideas together. */
:root {
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  34px;
  --sp-7:  48px;
  --sp-8:  66px;   /* space above a section head */
  --sp-9:  96px;   /* page margin, major break */
  --sp-10:132px;   /* inside a chapter: between a section and its closing note */
  --sp-11:186px;   /* between chapters on the website — whitespace does the selling */

  --pad-page-x: 96px;
  --pad-page-y: 88px;

  --hair: 1px;
  --nudge: 6px;   /* baseline compensation: mono set beside a serif line */
}
@media (max-width: 640px) {
  :root { --pad-page-x: 24px; --pad-page-y: 48px; }
}

/* youdots — base
   Applies the paper and the serif to any page that links styles.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-body);
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-wrap: pretty;
}
h1, h2, h3, h4 { font-weight: 400; color: var(--ink); margin: 0; letter-spacing: var(--tr-tight); }
p { margin: 0; }
em { font-style: italic; }
a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color .15s; }
a:hover { color: var(--accent-deep); }
::selection { background: var(--accent-wash); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* youdots — component styles
   Every class is prefixed yd-. Components are typographic, not decorative:
   the page is made of rules, measure, and space. */

/* ---------- The rail grid (132px spine, shared by every railed component) ---------- */
.yd-role, .yd-cap, .yd-facts, .yd-case__head, .yd-case__body { display: grid; grid-template-columns: var(--rail-width) 1fr; gap: var(--rail-gap); }
.yd-case__head { grid-template-columns: var(--rail-width) 1fr auto; }

/* ---------- Label ---------- */
.yd-label { font-family: var(--mono); font-size: var(--fs-mono-sm); font-weight: 400; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--accent); margin: 0; }
.yd-label--mute { color: var(--ink-mute); }
.yd-label--ink  { color: var(--ink); }

/* ---------- Lede ---------- */
.yd-lede { font-family: var(--serif); font-size: var(--fs-lede); line-height: var(--lh-lede); letter-spacing: var(--tr-tight); color: var(--ink); max-width: var(--measure-lede); margin: 0; }
.yd-lede em { color: var(--accent); }
.yd-lede--wide { max-width: var(--measure-lede-wide); }

/* ---------- Prose ---------- */
.yd-prose { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-body); max-width: var(--measure); }
.yd-prose--sm { font-size: var(--fs-body-sm); line-height: var(--lh-dense); color: var(--ink-soft); max-width: var(--measure-tight); }
.yd-prose > * + * { margin-top: var(--sp-5); }

/* ---------- SectionHead ---------- */
.yd-sechead { display: flex; align-items: baseline; gap: var(--sp-5); padding-bottom: var(--sp-3); border-bottom: var(--hair) solid var(--rule); }
.yd-sechead__title { font-size: var(--fs-body-sm); font-weight: 500; color: var(--ink); }
.yd-sechead__note { margin-left: auto; font-family: var(--mono); font-size: var(--fs-mono-sm); letter-spacing: var(--tr-mono); color: var(--ink-mute); }

/* ---------- MetaRow ---------- */
.yd-meta { display: flex; flex-wrap: wrap; gap: var(--sp-6); font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--tr-mono); line-height: 1.6; color: var(--ink-mute); margin: 0; padding: 0; list-style: none; }
.yd-meta--ruled { padding-top: var(--sp-4); border-top: var(--hair) solid var(--rule); }
.yd-meta a { color: var(--accent); }
.yd-meta a:hover { color: var(--accent-deep); }

/* ---------- RoleEntry ---------- */
.yd-role { padding: var(--sp-5) 0; border-bottom: var(--hair) solid var(--rule-soft); }
.yd-role__years { font-family: var(--mono); font-size: var(--fs-mono); line-height: var(--lh-mono); letter-spacing: var(--tr-mono); color: var(--accent); padding-top: var(--nudge); }
.yd-role__title { font-size: var(--fs-entry); font-weight: 400; letter-spacing: -0.005em; color: var(--ink); }
.yd-role__org { font-style: italic; color: var(--ink-soft); }
.yd-role__body { font-size: var(--fs-body-sm); line-height: var(--lh-dense); color: var(--ink-body); margin-top: var(--sp-2); max-width: var(--measure-tight); }
.yd-role__clients { font-family: var(--mono); font-size: var(--fs-mono-sm); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-mute); margin-top: var(--sp-3); line-height: 1.8; }
.yd-role__names { margin-top: var(--sp-3); }
.yd-role__names-label { font-family: var(--mono); font-size: var(--fs-mono-sm); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--accent); margin: 0 0 var(--sp-1); }
.yd-role__names-list { display: flex; flex-wrap: wrap; gap: 0 8px; list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: var(--fs-mono-sm); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-mute); line-height: 1.85; }
.yd-role__sep { color: var(--rule-soft); }
.yd-role--current .yd-role__years { font-weight: 500; }

/* ---------- CaseCard ---------- */
.yd-case { border-top: var(--hair) solid var(--rule-soft); padding: var(--sp-6) 0; }
.yd-case--lead { border-top: 0; }
.yd-case__head--static { cursor: default; }
.yd-case__head { align-items: baseline; width: 100%; background: none; border: 0; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.yd-case__years { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--tr-mono); color: var(--accent); }
.yd-case__title { font-size: var(--fs-entry); color: var(--ink); letter-spacing: -0.005em; }
.yd-case__role { font-style: italic; color: var(--ink-soft); font-size: var(--fs-body-sm); display: block; margin-top: var(--sp-1); }
.yd-case__sign { font-family: var(--mono); font-size: var(--fs-mono); color: var(--ink-mute); transition: color .15s; }
.yd-case__head:hover .yd-case__sign { color: var(--accent); }
.yd-case__body { margin-top: var(--sp-5); }
.yd-case__aside { font-family: var(--mono); font-size: var(--fs-mono-sm); letter-spacing: var(--tr-mono); color: var(--ink-mute); }
.yd-case__aside-label { margin: 0 0 var(--sp-2); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink); }
.yd-case__aside-list { list-style: none; margin: 0; padding: 0; }
.yd-case__aside-list li { padding: 7px 0; border-top: var(--hair) solid var(--rule-faint); line-height: 1.5; }
.yd-case__prose { font-size: var(--fs-body-sm); line-height: var(--lh-dense); color: var(--ink-body); max-width: var(--measure-tight); }
.yd-case__prose > * + * { margin-top: var(--sp-4); }
.yd-case__matters { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); background: var(--accent-wash); font-size: var(--fs-body-sm); line-height: var(--lh-dense); color: var(--accent-deep); max-width: var(--measure-tight); }
.yd-case__matters b { font-weight: 500; font-style: italic; }

/* ---------- CapabilityCard ---------- */
.yd-cap { padding: var(--sp-6) 0; border-bottom: var(--hair) solid var(--rule-soft); }
.yd-cap__num { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--tr-mono); color: var(--ink-mute); }
.yd-cap__title { font-size: var(--fs-entry); color: var(--ink); max-width: 22ch; }
.yd-cap__body { font-size: var(--fs-body-sm); line-height: var(--lh-dense); color: var(--ink-body); margin-top: var(--sp-3); max-width: var(--measure-tight); }
.yd-cap__principle { margin-top: var(--sp-4); padding-left: var(--sp-4); border-left: 2px solid var(--accent); font-style: italic; font-size: var(--fs-body-sm); line-height: var(--lh-dense); color: var(--accent); max-width: var(--measure-tight); }

/* ---------- FactList ---------- */
.yd-facts { gap: var(--sp-3) var(--rail-gap); margin: 0; }
.yd-facts dt { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--tr-mono); color: var(--ink-mute); padding-top: var(--nudge); }
.yd-facts dd { margin: 0; font-size: var(--fs-body-sm); line-height: var(--lh-dense); color: var(--ink-body); max-width: var(--measure-tight); }
.yd-facts dd b { font-weight: 500; color: var(--ink); }
.yd-facts--ruled dd { padding-bottom: var(--sp-4); border-bottom: var(--hair) solid var(--rule-faint); }
.yd-facts--ruled dt { padding-bottom: var(--sp-4); border-bottom: var(--hair) solid var(--rule-faint); }

/* ---------- YearRail ---------- */
.yd-rail { position: sticky; top: var(--sp-9); display: flex; flex-direction: column; gap: var(--sp-2); font-family: var(--mono); font-size: var(--fs-mono-sm); letter-spacing: var(--tr-mono); }
.yd-rail__item { display: flex; align-items: center; gap: var(--sp-3); background: none; border: 0; padding: var(--sp-1) 0; font: inherit; letter-spacing: inherit; color: var(--ink-mute); cursor: pointer; text-align: left; transition: color .15s; }
.yd-rail__item:hover { color: var(--accent); }
.yd-rail__tick { display: block; width: 14px; height: 1px; background: var(--rule-soft); transition: width .2s, background .2s; flex: none; }
.yd-rail__item--on { color: var(--ink); }
.yd-rail__item--on .yd-rail__tick { width: 26px; background: var(--accent); }

/* ---------- Portrait ---------- */
.yd-portrait { display: block; margin: 0; }
.yd-portrait__frame { display: block; width: 100%; aspect-ratio: 5 / 6; object-fit: cover; background: var(--paper-deep); border: var(--hair) solid var(--rule-soft); }
.yd-portrait__empty { display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--mono); font-size: var(--fs-mono-sm); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--ink-mute); line-height: 1.9; padding: var(--sp-4); }
.yd-portrait figcaption { font-family: var(--mono); font-size: var(--fs-mono-sm); letter-spacing: var(--tr-mono); color: var(--ink-mute); margin-top: var(--sp-3); line-height: 1.8; }

/* ---------- Print: the tinted argument becomes a ruled argument on white stock ---------- */
@media print {
  .yd-case__matters { background: none; padding: 0 0 0 var(--sp-4); border-left: 2px solid var(--accent); color: var(--accent-deep); }
}

/* ---------- Small screens: the rail column folds above its entry ---------- */
@media (max-width: 640px) {
  .yd-role, .yd-cap, .yd-facts, .yd-case__body { grid-template-columns: 1fr; gap: var(--sp-2); }
  .yd-facts { gap: var(--sp-1) 0; }
  .yd-facts dd { margin-bottom: var(--sp-4); }
  .yd-case__head { grid-template-columns: 1fr auto; gap: var(--sp-2) var(--sp-4); }
  .yd-case__years { grid-column: 1 / -1; }
  .yd-role__years, .yd-facts dt { padding-top: 0; }
  .yd-rail { display: none; }
}

/* youdots — page shell
   Handoff-only. The design-system prototypes inline these rules per template;
   here they are classes so the four pages stay short and consistent.
   Nothing below is decorative: it is page frame, sticky column, and the
   responsive collapse. */

.yd-doc { background: var(--paper); color: var(--ink-body); font-family: var(--serif); min-height: 100vh; padding: 0 48px var(--sp-11); }

/* ---------- Header ---------- */
.yd-header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-6); max-width: 1140px; margin: 0 auto; padding: var(--sp-6) 0 0; font-family: var(--mono); font-size: var(--fs-mono-sm); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
.yd-header__mark { color: var(--ink); }
.yd-header__langs { display: flex; gap: var(--sp-4); flex: none; }
.yd-header__langs span { opacity: 0.45; }
.yd-header__langs .on { opacity: 1; color: var(--ink); }

/* ---------- Two-column page ---------- */
.yd-page { display: grid; grid-template-columns: 150px 1fr; gap: 60px; max-width: 1140px; margin: 0 auto; align-items: start; }
.yd-side { position: sticky; top: 88px; padding-top: 58px; }
.yd-side__name { font-family: var(--mono); font-size: var(--fs-mono-sm); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--accent); margin: 0 0 30px; line-height: 1.5; }
.yd-side__aside { margin-top: var(--sp-7); font-family: var(--mono); font-size: var(--fs-mono-sm); letter-spacing: var(--tr-mono); line-height: 1.9; color: var(--ink-mute); }
.yd-side__aside p + p { margin-top: 20px; }
.yd-side__aside .on { color: var(--ink); }
.yd-side .yd-portrait { margin-top: var(--sp-7); }
.yd-main { min-width: 0; max-width: var(--page-width); padding-top: var(--sp-9); }

/* ---------- Chapter rhythm ---------- */
.yd-chapter { padding-top: var(--sp-11); }

/* ---------- Hero ---------- */
.yd-hero { display: flex; align-items: flex-start; gap: 28px; }
.yd-hero__text { min-width: 0; flex: 1 1 auto; }
.yd-hero__name { font-size: clamp(42px, 11vw, var(--fs-display)); line-height: var(--lh-display); letter-spacing: var(--tr-display); margin-top: 26px; }
.yd-hero__role { font-size: var(--fs-entry); line-height: 1.3; font-style: italic; color: var(--ink-soft); margin-top: 14px; max-width: 28ch; }
.yd-hero__portrait { display: none; flex: none; width: 96px; aspect-ratio: 5 / 6; object-fit: cover; object-position: 50% 22%; border: var(--hair) solid var(--rule-soft); }

/* ---------- Engagement paths, quotes ---------- */
.yd-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); max-width: 820px; }
.yd-path__label { font-family: var(--mono); font-size: var(--fs-mono-sm); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--accent); margin: 0 0 var(--sp-3); padding-bottom: 10px; border-bottom: var(--hair) solid var(--rule-soft); }
.yd-path p { font-size: var(--fs-body-sm); line-height: var(--lh-dense); }
.yd-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.yd-quote { font-size: var(--fs-body-sm); line-height: 1.6; margin: 0; padding-left: var(--sp-4); border-left: 2px solid var(--accent); }

/* ---------- Call to action ---------- */
.yd-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); margin-top: var(--sp-7); }
.yd-cta { display: inline-block; background: var(--accent); color: var(--paper); text-decoration: none; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; padding: 18px 28px; transition: background .15s; }
.yd-cta:hover { background: var(--accent-deep); color: var(--paper); }
.yd-cta-row span { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--tr-mono); color: var(--ink-mute); }

/* ---------- Collapse ----------
   Below 860px the sticky column goes away entirely and the portrait moves
   into the hero above the name. Nothing reflows into a narrower rail. */
@media (max-width: 860px) {
  .yd-doc { padding: 0 24px var(--sp-9); }
  .yd-side { display: none; }
  .yd-page { grid-template-columns: 1fr; gap: 0; }
  .yd-main { padding-top: var(--sp-8); }
  .yd-chapter { padding-top: var(--sp-9); }
  .yd-hero { flex-direction: column-reverse; align-items: flex-start; gap: var(--sp-5); }
  .yd-hero__text { flex: 1 1 100%; width: 100%; }
  .yd-hero__portrait { display: block; }
  .yd-pair, .yd-quotes { grid-template-columns: 1fr; }
  .yd-role, .yd-cap, .yd-facts, .yd-case__head, .yd-case__body { grid-template-columns: 1fr; gap: var(--sp-3); }
}
@media print { .no-print { display: none; } }