/* ==========================================================================
   shaulzuckerberg.com — direction 1c "Instrument, with a person in it"
   Plain CSS. No build step, no preprocessor.

   TYPE RULE (the whole system in one line):
   serif is the human register. Sans and mono are the instrument.

   Serif is used in exactly FIVE selectors, site-wide, reused across pages:
     1. .masthead__name   — his name in the masthead
     2. .hero__name       — his name in the hero (home only)
     3. .hero__diagnosis  — the one sentence (home only)
     4. .method__quote    — the method sentence (home only)
     5. .contact h2       — the contact question (every page's closing CTA
                             reuses this same selector — that's what keeps
                             the count at five as pages get added)
   All five are his name or his own words. Nothing else gets serif;
   a sixth *selector* dissolves the rule. Reusing one of the five on another
   page does not count as a sixth use.
   ========================================================================== */

:root {
  /* --- Colour: monochrome. No accent. ---------------------------------- */
  --paper:      #f4f4f2;  /* page ground */
  --band:       #eaeae6;  /* portrait field, contact band */
  --rule:       #d9d9d4;  /* hairlines, section divisions */
  --rule-hard:  #b9b9b2;  /* secondary button border, underlines */
  --faint:      #77776f;  /* mono labels, captions, footer */
  --soft:       #3d3d3b;  /* body copy */
  --ink:        #0e0e0e;  /* headings, primary action fill */
  --ink-invert: #f4f4f2;  /* type on the inverted band */
  --rule-invert:#55554f;  /* underline on the inverted band */

  /* --- Type ------------------------------------------------------------ */
  --font-human:  Georgia, "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif;
  --font-body:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-label:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* The only webfont: IBM Plex Mono 400/500, ~24KB, loaded with display=swap.
     It is used at 11–13px only — labels, nav, buttons, captions. Never body.
     If it fails to load, the monospace fallback holds the layout. */

  --step--1:  0.6875rem; /* 11px — mono labels, captions, footer */
  --step-0:   0.8125rem; /* 13px — buttons */
  --step-1:   1rem;      /* 16px — card copy, background entries */
  --step-2:   1.0625rem; /* 17px — body */
  --step-3:   1.25rem;   /* 20px — card headings, sub-headings in prose */
  --step-4:   1.5rem;    /* 24px — AI band */
  --step-5:   1.6875rem; /* 27px — his name */
  --step-6:   1.8125rem; /* 29px — method sentence */
  --step-7:   1.9375rem; /* 31px — contact question */
  --step-8:   3.25rem;   /* 52px — the diagnosis */
  --step-9:   2.25rem;   /* 36px — interior page titles (sans, not serif) */

  --lh-tight: 1.14;
  --lh-snug:  1.4;
  --lh-body:  1.65;

  --ls-display: -0.02em;
  --ls-tight:   -0.015em;
  --ls-label:    0.08em;
  --ls-byline:   0.12em;

  /* --- Spacing (4px base) --------------------------------------------- */
  --s-1: 0.25rem;   /* 4  */
  --s-2: 0.5rem;    /* 8  */
  --s-3: 0.75rem;   /* 12 */
  --s-4: 1rem;      /* 16 */
  --s-5: 1.375rem;  /* 22 */
  --s-6: 1.875rem;  /* 30 */
  --s-7: 3.5rem;    /* 56 */
  --s-8: 3.75rem;   /* 60 */
  --s-9: 4.25rem;   /* 68 */
  --s-10: 4.5rem;   /* 72 */

  /* --- Layout --------------------------------------------------------- */
  --rail:      8rem;    /* spec-sheet rail. Do not shrink — labels wrap. */
  --portrait:  560px;   /* hero portrait column */
  --measure:   34rem;   /* body measure ceiling — the hero obeys it too */
  --page:      1440px;  /* page cap. Without it the hero gutter grows
                           unbounded: at 1920 the copy strands left. */
  --pad-x:     var(--s-8);

  /* No radius, no shadow. Both are deliberately absent. */
}

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

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

body {
  margin: 0 auto;
  max-width: var(--page);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-2);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: var(--ls-display); font-size: var(--step-3); }
img { display: block; max-width: 100%; height: auto; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--soft); }

/* --- Shared primitives ------------------------------------------------ */

/* Mono label. Every 0N / Name marker and caption on the site. */
.label {
  font-family: var(--font-label);
  font-size: var(--step--1);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--faint);
}

/* The rail marker: mono label with the 2px rule above it. */
.rail {
  font-family: var(--font-label);
  font-size: var(--step--1);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink);
  border-top: 2px solid var(--ink);
  padding-top: 10px;
}

/* Every content section: rail column + content column. */
.section {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: var(--s-6);
  padding: var(--s-8) var(--pad-x);
  border-bottom: 1px solid var(--rule);
}

.btn {
  font-family: var(--font-label);
  font-size: var(--step-0);
  letter-spacing: 0.04em;
  padding: 13px 20px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--ink-invert);
  display: inline-block;
}
.btn:hover { background: var(--soft); border-color: var(--soft); color: var(--ink-invert); }

.btn--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-hard);
}
.btn--secondary:hover { background: transparent; color: var(--ink); border-color: var(--ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: 10px; padding-top: var(--s-3); }

/* Mono text link with a hairline under it. */
.link-mono {
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--rule-hard);
  padding-bottom: 3px;
  align-self: flex-start;
  display: inline-block;
}
.link-mono:hover { border-bottom-color: var(--ink); color: var(--ink); }

/* --- Masthead --------------------------------------------------------- */

.masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-5) var(--pad-x);
  border-bottom: 1px solid var(--rule);
}

.masthead__name {
  font-family: var(--font-human);
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
}

.masthead__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.masthead__nav a { color: var(--soft); }
.masthead__nav a:hover,
.masthead__nav a[aria-current="page"] { color: var(--ink); border-bottom: 1px solid var(--ink); }

/* --- Hero (home only) --------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: 1fr var(--portrait);
  border-bottom: 1px solid var(--rule);
}

.hero__body {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: var(--s-6);
  padding: var(--s-10) var(--s-7) var(--s-9) var(--pad-x);
}

.hero__content { display: flex; flex-direction: column; gap: var(--s-5); }

.hero__id { display: flex; flex-direction: column; gap: 7px; }

/* His name — serif, sentence case, human scale. Not a byline. */
.hero__name {
  font-family: var(--font-human);
  font-size: var(--step-5);
  line-height: 1.15;
  letter-spacing: var(--ls-tight);
  font-weight: normal;
}

.hero__role {
  font-family: var(--font-label);
  font-size: var(--step--1);
  letter-spacing: var(--ls-byline);
  text-transform: uppercase;
  color: var(--faint);
}

/* The diagnosis. The only display serif on the site.
   Reading rhythm, not a slogan: 52px at line-height 1.14, no quote marks. */
.hero__diagnosis {
  font-family: var(--font-human);
  font-size: var(--step-8);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  margin-top: var(--s-2);
  max-width: var(--measure);
}

.hero__lede { max-width: var(--measure); color: var(--soft); margin-top: 10px; }

/* Portrait: a figure on the page ground, not an image block.
   The backdrop is knocked out to --paper, so there is no column to edge:
   no border-left, no --band fill. A vertical hairline here would re-assert
   a boundary the image itself denies (and would cut across his shoulder).
   Instead the figure stands on the hero's bottom rule — the edge treatment
   is horizontal, and that rule still closes the section.
   Do not restore object-fit: cover; cropping a cutout clips the silhouette. */
.hero__portrait {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 620px;
}
.hero__portrait img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

/* --- 02 Method (home only) ---------------------------------------------- */

.method { display: flex; flex-direction: column; gap: var(--s-4); max-width: 40rem; }

.method__quote {
  font-family: var(--font-human);
  font-size: var(--step-6);
  line-height: var(--lh-snug);
  letter-spacing: -0.012em;
  font-weight: normal;
}

/* --- 03 Engage (home) / two-up cards, reused wherever a 2-col split fits - */

.engage { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); }
.engage__item { display: flex; flex-direction: column; gap: var(--s-3); }
.engage__item h3 { font-size: var(--step-3); line-height: 1.25; }
.engage__item p { font-size: var(--step-1); line-height: 1.6; color: var(--soft); }
.engage__item .link-mono { margin-top: var(--s-1); }

/* --- Inverted band: at most one per page ------------------------------- */

.section--invert {
  background: var(--ink);
  color: var(--ink-invert);
  border-bottom: 0;
}
.section--invert .rail { color: var(--ink-invert); border-top-color: var(--ink-invert); }
.section--invert .link-mono { color: var(--ink-invert); border-bottom-color: var(--rule-invert); }
.section--invert .link-mono:hover { border-bottom-color: var(--ink-invert); }

.ai { display: flex; flex-direction: column; gap: var(--s-5); max-width: 38rem; }
.ai p { font-size: var(--step-4); line-height: 1.45; }

/* --- Numbered spec-sheet list: background, credentials, engagement scope,
       contact methods — any place a short numbered list of items belongs -- */

.background { max-width: 46rem; }

.background__row {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 20px;
  padding: var(--s-5) 0;
  border-top: 1px solid var(--rule);
}
.background__row:first-child { border-top: 0; padding-top: 0; }
.background__row:last-child { padding-bottom: 0; }

.background__n { font-family: var(--font-label); font-size: 0.75rem; color: var(--faint); padding-top: 2px; }
.background__body { display: flex; flex-direction: column; gap: 7px; }
.background__body strong { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.01em; }
.background__body p { font-size: var(--step-1); line-height: 1.6; color: var(--soft); }
.background__body .link-mono { margin-top: var(--s-1); }

/* --- Contact section: reused as every page's closing CTA --------------- */

.section--band { background: var(--band); border-top: 1px solid var(--rule); border-bottom: 0; }

.contact { display: flex; flex-direction: column; gap: var(--s-4); max-width: 34rem; }

.contact h2 {
  font-family: var(--font-human);
  font-size: var(--step-7);
  line-height: 1.22;
  letter-spacing: var(--ls-tight);
  font-weight: normal;
}
.contact p { color: var(--soft); }
.contact .btn { margin-top: var(--s-2); align-self: flex-start; }

/* --- Interior page titles: sans, not serif. Reused across About, Work
       With Me, For Organizations, Contact. Deliberately not on the serif
       list — it is structural, not his own words verbatim. --------------- */

.page-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--step-9);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  max-width: var(--measure);
}

.page-lede {
  max-width: var(--measure);
  color: var(--soft);
  font-size: var(--step-2);
  line-height: var(--lh-body);
  margin-top: var(--s-3);
}

/* A standalone intro sentence above a list, not tied to a page-title —
   same measure and voice as .page-lede, no forced top margin. */
.section-lede {
  max-width: var(--measure);
  color: var(--soft);
  font-size: var(--step-2);
  line-height: var(--lh-body);
  margin-bottom: var(--s-5);
}

/* Long-form prose block: bio paragraphs, engagement copy, etc. */
.prose {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  max-width: var(--measure);
  color: var(--soft);
}
.prose > :first-child { color: var(--ink); }
.prose h3 {
  font-size: var(--step-3);
  color: var(--ink);
  margin-top: var(--s-2);
}
.prose strong { color: var(--ink); }

/* --- Footer ----------------------------------------------------------- */

.footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-4);
  padding: var(--s-7) var(--pad-x) var(--s-5);
  border-top: 1px solid var(--rule);
  font-family: var(--font-label);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--faint);
}
.footer__nav { display: flex; flex-wrap: wrap; gap: 20px; }
.footer a { color: var(--faint); }
.footer a:hover { color: var(--ink); }

/* --- Responsive ------------------------------------------------------- */

@media (max-width: 1080px) {
  :root { --portrait: 420px; --step-8: 2.75rem; }
  .hero__body { padding: var(--s-9) var(--s-6) var(--s-8) var(--s-6); }
}

/* Portrait drops below the hero text and becomes a wide crop.
   Rail collapses to a full-width marker above its section. */
@media (max-width: 860px) {
  :root { --pad-x: var(--s-6); --step-8: 2.375rem; --step-9: 1.875rem; }

  .hero { grid-template-columns: 1fr; }
  .hero__portrait { min-height: 0; order: 2; }
  .hero__portrait img { max-height: 62vh; }
  .hero__body { grid-template-columns: 1fr; gap: var(--s-5); padding: var(--s-8) var(--pad-x); }

  .section { grid-template-columns: 1fr; gap: var(--s-5); padding: var(--s-8) var(--pad-x); }
  .rail { justify-self: start; }

  .engage { grid-template-columns: 1fr; gap: var(--s-6); }

  .masthead { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
  .masthead__nav { gap: var(--s-4); }
}

@media (max-width: 520px) {
  :root { --step-8: 2rem; --step-6: 1.5rem; --step-7: 1.625rem; --step-4: 1.3125rem; --step-9: 1.625rem; }
  .hero__diagnosis, .hero__lede { max-width: none; }
  .btn { width: 100%; text-align: center; }
}

/* --- Print ------------------------------------------------------------ */

@media print {
  body { background: #fff; }
  .section--invert { background: #fff; color: #000; }
  .section--invert .rail { color: #000; border-top-color: #000; }
  .masthead__nav, .footer__nav, .btn-row { display: none; }
}