/* Social Dividend. Elliot's direction, 2026-10-27: black on white, one sans in regular and bold,
   one big line per section, much more white space. The colour photo is the only colour on the page.
   "If it looks almost too empty, it's right." */

@font-face { font-family: 'Public Sans'; src: url(fonts/public-sans-normal-100-900.woff2) format('woff2'); font-style: normal; font-weight: 100 900; font-display: swap; }

:root {
  /* Colour: black on white. Grey only for small attribution and footer text. */
  --ink: #111111;
  --paper: #ffffff;
  --mute: #5f6368;    /* names under quotes, footer: 6.2:1 on white */
  --rule: #e6e6e6;

  --sans: 'Public Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Type: four sizes. Regular (400) and bold (700) only. */
  --display: clamp(min(2.5rem, 11vw), 1.35rem + 5vw, 5.25rem);    /* 40 → 84: the headline (capped by screen width for large-text settings) */
  --big:     clamp(1.75rem, 1.15rem + 2.6vw, 3.5rem);  /* 28 → 56: each section's one big line */
  --text:    clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);/* 17 → 19: everything else */
  --small:   clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem); /* 14 → 15: names under quotes, footer */
  --leading: 1.6;

  /* Space: multiples of one body line */
  --line: calc(var(--text) * var(--leading));
  --half: calc(var(--line) / 2);
  --two: calc(var(--line) * 2);
  --three: calc(var(--line) * 3);
  --four: calc(var(--line) * 4);
  --section: clamp(calc(var(--line) * 2), 4.5vw, calc(var(--line) * 4));   /* gap above and below each section (halved, Elliot 2026-10-29) */

  /* Layout */
  --margin: clamp(20px, 5vw, 64px);
  --content: 70rem;
  --measure: 36em;
  --header-h: 3.5rem;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text);
  font-weight: 400;
  line-height: var(--leading);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

p, li, blockquote { text-wrap: pretty; hyphens: manual; }
b, strong { font-weight: 700; }
h1, h2 { font-weight: inherit; font-size: inherit; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; overflow-wrap: anywhere; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.skip { position: absolute; left: var(--margin); top: -10em; z-index: 2; background: var(--paper); color: var(--ink); padding: var(--half) var(--line); }
.skip:focus { top: var(--half); }

.wrap { width: min(100% - 2 * var(--margin), var(--content)); margin-inline: auto; }

/* ---------- Header: thin, white. Logo left, email right ---------- */
.bar {
  position: sticky; top: 0; z-index: 1;
  background: var(--paper);
  font-size: var(--small);
}
.bar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 0.75em; min-height: var(--header-h); }
.bar a { display: inline-flex; align-items: center; min-height: 44px; }
.mark { text-decoration: none; }
/* Savva's logo (Nov 2026): the full lockup from 480px up; the SD seal alone on phones, where the lockup
   would shrink below a readable size beside the email. */
.mark img { display: block; height: 1.75rem; width: auto; }
.mark .logo-full { display: none; }
@media (min-width: 30em) {
  .mark .logo-seal { display: none; }
  .mark .logo-full { display: block; height: 1.5rem; }
}
@media (min-width: 60em) { .mark .logo-full { height: 1.75rem; } }
.bar a[href^="mailto"] { color: var(--mute); text-decoration: none; }
.bar a[href^="mailto"]:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Hero: the first screen shows only the headline and the line under it ---------- */
.hero {
  min-height: calc(100svh - var(--header-h));
  display: grid; align-content: center;
  padding-block: var(--three) var(--three);   /* Elliot's screenshot: left-aligned, centred in the first screen */
}
.hero h1 {
  font-size: var(--display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;   /* headlines: even lines, never one word alone (pretty does not guarantee it in Chrome) */
  max-width: 13em;
}
.nb { white-space: nowrap; }
.hero p { margin-top: var(--line); max-width: 28em; color: var(--mute); }

/* ---------- Sections: label, one big line, everything else small. No bands, no dividers ---------- */
.block { padding-block: var(--section); }
.block h2 { font-weight: 700; margin-bottom: var(--line); text-wrap: pretty; }
/* 2. A short black line, left-aligned, above each section title */
.block h2::before { content: ""; display: block; width: 2.5rem; height: 2px; background: var(--ink); margin-bottom: var(--line); }
/* 3. Desk and Close calls titles are big lines too (Elliot 2026-10-29) */
.big, .steps-section h2, .desk-section h2, .cases-section h2 {
  font-size: var(--big);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 20em;
}
.steps-section h2, .desk-section h2, .cases-section h2 { margin-bottom: calc(var(--two) * 2 / 3); }
.body { max-width: var(--measure); }
.body > * + * { margin-top: var(--line); }
.body > .big { max-width: 20em; }
.block h2.big { font-weight: 400; margin-bottom: 0; }   /* a big line used as the section heading (no small title) */
.body > .big + * { margin-top: calc(var(--two) * 2 / 3); }   /* a third less (Elliot, 2026-10-31) */
.body > .pull { margin-top: var(--two); }

/* What's on your desk: nine lines in bold, small numerals */
.desk { list-style: none; padding: 0; counter-reset: item; }
.desk li { display: grid; grid-template-columns: 1.6em 1fr; font-weight: 700; }
.desk li + li { margin-top: calc(var(--half) / 1.5); }
.desk li::before { counter-increment: item; content: counter(item); color: var(--mute); font-weight: 400; font-variant-numeric: tabular-nums; }

/* Quotes: one style everywhere. Left-aligned, upright, body size; the name small and grey beneath */
.pull p { text-indent: -0.3em; }
.pull footer { font-size: var(--small); color: var(--mute); margin-top: var(--half); }

/* Listen. Subtract. Decide.: step names in bold */
.steps > * + * { margin-top: var(--line); }
.steps b { display: block; }

/* Elliot: the one photograph, in colour, inside the margins at about 60% width (Elliot 2026-10-29) */
.portrait { display: block; width: 60%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 28%; }
.body > .portrait { margin-top: var(--two); }
.body > .portrait + p { margin-top: var(--two); }

/* ---------- Closing: the big line, a black button, one-line footer ---------- */
.ask { padding-block: var(--section) var(--two); }
.ask .body { max-width: none; }   /* one centre line for the big line, button and footer */
.ask .big { max-width: 16em; }
.ask .big + p { margin-top: var(--two); }
.button {
  display: inline-block;
  background: var(--ink); color: var(--paper);
  font-weight: 700; text-decoration: none;
  padding: 1em 2.75em;
  min-height: 44px;
}
.button:hover { background: #333; }
.button:focus-visible { outline-color: var(--ink); outline-offset: 4px; }
.foot { color: var(--mute); padding-block: var(--four) var(--three); }
.foot p { font-size: var(--small); }
.body p > a:only-child { display: inline-block; padding-block: 0.5em; margin-block: -0.5em; }   /* LinkedIn: 24px+ tap target */
.source { font-size: var(--small); color: var(--mute); }

/* ---------- Desktop: one column; the steps sit side by side ---------- */
@media (min-width: 60em) {
  .block .body, .block .side { max-width: none; }
  .block .body > * { max-width: var(--measure); }
  .block .body > .big { max-width: 20em; }

  /* Numerals hang into the margin so the nine lines align on their first letter */
  .desk li { display: block; position: relative; }
  .desk li::before { position: absolute; right: calc(100% + 0.8em); }

  /* Steps side by side */
  .block .body > .steps { max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--two); }
  .steps > * + * { margin-top: 0; }
}

/* Phones: the hero is a little over half the screen, so the top of the next section shows (Annie, 2026-10-29).
   Departs from Elliot's "first screen shows only the headline" on phones; desktop and tablet keep the full screen. */
@media (max-width: 39.99em) {
  .hero { min-height: 58svh; padding-block: var(--two) var(--two); }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}