/* ============================================================
   sumeetgokhale.com, design system
   One stylesheet. One token set. One grid. One left edge.
   ============================================================ */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Ink & surface */
  --ink:        #16181d;   /* headings, primary text            */
  --body:       #4b5158;   /* body copy, 7.9:1 on white        */
  --muted:      #5f666e;   /* captions, meta, 5.8:1 white, 5.5:1 on wash */
  --faint:      #9aa1a9;   /* HAIRLINES AND ICONS ONLY, never text (2.6:1) */
  --line:       #e4e7ea;   /* hairlines                         */
  --line-soft:  #eef0f2;
  --surface:    #f7f8f9;   /* section wash                      */
  --surface-2:  #f0f2f4;   /* image plates                      */
  --white:      #ffffff;

  /* Accent, one blue, one yellow. Nothing else. */
  --accent:      #2b4fd8;  /* 6.9:1 on white                    */
  --accent-ink:  #1e3aad;  /* hover / small text                */
  --accent-wash: #eef1fd;
  --mark:        #f7f0a0;  /* highlighter yellow                */

  /* Type */
  /* Body and headings: Inter, as before.
     Labels, meta and diagram type: SF Pro, requested from the operating
     system because Apple's licence forbids self-hosting it. On non-Apple
     devices it falls back to Inter, so nothing breaks. */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "Inter", "Segoe UI", system-ui, sans-serif;

  /* Fluid type scale, ratio ~1.25, anchored at 17px body.
     Every step is clamp(min, preferred, max) so it rides the viewport. */
  --t-eyebrow: 0.75rem;                                    /* 12  */
  --t-small:   0.875rem;                                   /* 14  */
  --t-body:    clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);   /* 16 to 17 */
  --t-lead:    clamp(1.125rem, 1.05rem + 0.34vw, 1.3125rem);/* 18 to 21 */
  --t-h4:      clamp(1.0625rem, 1.01rem + 0.24vw, 1.1875rem);
  --t-h3:      clamp(1.25rem, 1.13rem + 0.52vw, 1.5rem);   /* 20 to 24 */
  --t-h2:      clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem);    /* 28 to 40 */
  --t-h1:      clamp(2.125rem, 1.6rem + 2.3vw, 3.5rem);    /* 34 to 56 */
  --t-display: clamp(2.375rem, 1.65rem + 3.2vw, 4.25rem);  /* 38 to 68 */
  --t-figure:  clamp(2.5rem, 1.8rem + 3vw, 4rem);          /* big numbers */

  /* Space, 4px base */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 2.75rem;  --s-8: 3.5rem;
  --s-9: 5rem;     --s-10: 7rem;
  --section:  clamp(3.25rem, 2.25rem + 3.6vw, 5.5rem);
  --section-s: clamp(2.25rem, 1.75rem + 2.2vw, 3.5rem);

  /* Grid, ONE shell, ONE measure, sharing ONE left edge */
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  --shell:  min(72rem, 100% - (2 * var(--gutter)));  /* 1152px */
  --measure: 34rem;   /* ~62ch of prose                       */
  --measure-wide: 44rem;

  --header-h: 4rem;   /* the masthead's own height, used to tuck the hero under it */
  --radius: 10px;
  --radius-s: 8px;   /* buttons and pills: soft, not capsule */
  --focus: 0 0 0 3px var(--accent-wash), 0 0 0 5px var(--accent);
}

/* ---------- 2. Reset ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv05" 1, "cv08" 1; /* Inter: single-storey l, tail-less t */
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.015em; line-height: 1.24; }
h4 { font-size: var(--t-h4); letter-spacing: -0.01em; line-height: 1.32; }

p { text-wrap: pretty; }
p + p { margin-top: 1em; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-ink); }

strong, b { color: var(--ink); font-weight: 600; }

::selection { background: var(--mark); color: var(--ink); }

/* ---------- 3. Layout ---------------------------------------------------- */
.shell { width: var(--shell); margin-inline: auto; }

/* The single most important rule on this site:
   prose is capped for readability but NEVER re-centred, so every text
   block and every media block starts on the same left edge. */
.measure       { max-width: var(--measure); }
.measure-wide  { max-width: var(--measure-wide); }

.section    { padding-block: var(--section); }
.section-s  { padding-block: var(--section-s); }
.section--wash { background: var(--surface); }
.section--line { border-top: 1px solid var(--line); }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

/* ---------- 4. Type utilities -------------------------------------------- */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: var(--faint);
  flex: none;
}
.eyebrow--plain { display: block; }
.eyebrow--plain::before { display: none; }
.eyebrow .idx { color: var(--accent); }

.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--body); }
.small { font-size: var(--t-small); }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.mark {
  background: linear-gradient(transparent 62%, var(--mark) 62%);
  padding-inline: 0.1em;
}

/* Headings balance by default, which shortens the lines. Use .fill when a
   heading needs to occupy the same measure as the prose beneath it. */
.fill { text-wrap: pretty; }

.display {
  font-size: var(--t-display);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.06;
  color: var(--ink);
  text-wrap: balance;
}

/* ---------- 5. Buttons & links ------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.875rem;             /* 46px, clears WCAG 2.5.8 and HIG */
  padding: 0.6rem 1.4rem;
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.005em;
  border-radius: var(--radius-s);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-ink); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); background: transparent; }

/* External links carry the arrow from CSS, never typed into the label,
   so it can never drift between pages. */
.btn--ext::after { content: "↗"; font-size: .9em; line-height: 1; opacity: .7; }

/* Buttons go full width only on the narrowest phones, where a 46px pill
   next to another one leaves no comfortable tap gap. */
@media (max-width: 25rem) {
  .btn-row { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
  .btn-row .btn { width: 100%; }
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
}
.link-arrow::after { content: "→"; transition: transform .16s ease; }
.link-arrow:hover::after { transform: translateX(3px); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* ---------- 6. Focus & skip link ----------------------------------------- */
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff;
  padding: 0.75rem 1.25rem; text-decoration: none;
  font-size: var(--t-small);
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ---------- 7. Header ---------------------------------------------------- */
.masthead {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.masthead.is-stuck { border-bottom-color: var(--line); }
.masthead .shell {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); min-height: 4rem;
}

.brand {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 2.75rem; padding-inline: 0.4rem;
  font-family: var(--sans);
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
/* The yellow is a highlighter pass over the name, not an underline:
   it sits behind the full cap-height of the text. */
.brand { isolation: isolate; }
.brand .mark-bg {
  position: absolute;
  left: 0.1rem; right: 0.1rem;
  top: 50%; translate: 0 -50%;
  height: 1.05em;
  background: var(--mark);
  border-radius: 2px;
  z-index: -1;
}

.nav { display: flex; align-items: center; gap: clamp(.25rem, .1rem + 1.2vw, 1.25rem); }
.nav a {
  display: inline-flex; align-items: center;
  min-height: 2.75rem; padding-inline: 0.55rem;   /* 44px target */
  font-size: var(--t-small); font-weight: 450;
  color: var(--body); text-decoration: none;
  border-radius: var(--radius-s);
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav .btn { margin-left: 0.4rem; padding-block: .4rem; }
/* Narrow phones: the CTA drops, the row tightens, and as a last resort
   the nav wraps under the brand rather than pushing the page sideways. */
@media (max-width: 34rem) {
  .nav .btn { display: none; }
}
@media (max-width: 26rem) {
  :root { --header-h: 5.75rem; }   /* the nav wraps to a second row here */
  .masthead .shell { flex-wrap: wrap; row-gap: 0; }
  .brand { font-size: 0.8125rem; letter-spacing: 0.04em; }
  .nav { gap: 0; }
  .nav a { padding-inline: 0.4rem; font-size: 0.8125rem; }
}
@media (max-width: 20.5rem) {
  .nav { width: 100%; justify-content: space-between; }
  .nav a { padding-inline: 0; }
}

/* ---------- 8. Breadcrumb ------------------------------------------------ */
.crumb {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 2.75rem;
  font-family: var(--mono); font-size: var(--t-eyebrow);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
}
.crumb:hover { color: var(--ink); }
.crumb::before { content: "←"; }

/* ---------- 9. Hero (home) ----------------------------------------------- */
.hero { padding-block: clamp(2.75rem, 1.5rem + 4.5vw, 6rem) clamp(2rem, 1rem + 3vw, 3.5rem); }

@media (max-width: 60rem) {
  .hero .display { max-width: 18ch; }
}
/* Single column. The right-hand side is deliberately empty: the measure caps
   keep the headline and lead short, and the whitespace is the composition. */
.hero .display { max-width: 15ch; }
.hero .lead { max-width: 42ch; margin-top: var(--s-5); }
.hero .btn-row { margin-top: var(--s-7); }
.hero .avail { margin-top: var(--s-6); }

.avail {
  display: inline-flex; align-items: flex-start; gap: .55rem;
  font-family: var(--mono); font-size: var(--t-eyebrow);
  line-height: 1.6; letter-spacing: .06em; color: var(--body);
}
.avail .dot {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: #15803d; flex: none;
  margin-top: .45rem;              /* sits on the first line, not the block */
  box-shadow: 0 0 0 3px rgba(21,128,61,.15);
}

/* Glass status chip.
   The only capsule on the site: it reads as a live indicator rather than a
   control, so the pill shape is the point. A white page has nothing to
   refract, so the glass comes from a tinted translucent fill, a hairline,
   an inner top highlight and a soft drop shadow. */
.avail--glass {
  align-items: center;
  gap: .55rem;
  padding: .5rem 1rem .5rem .8rem;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: .005em;
  text-transform: none;
  color: var(--body);
  background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(243,245,248,.70) 100%);
  border: 1px solid rgba(22,24,29,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(22,24,29,.03),
    0 1px 2px rgba(16,24,40,.05),
    0 8px 20px rgba(16,24,40,.07);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
}
.avail--glass .dot {
  margin-top: 0;                   /* centred in the chip, not on a text line */
  background: #16a34a;
  box-shadow:
    0 0 0 3px rgba(22,163,74,.16),
    0 0 10px rgba(22,163,74,.55);
}

/* ---------- 10. Proof bar ------------------------------------------------ */
/* No rule closing the first fold: the credibility strip sits directly under
   the hero with space, not a border, separating them. */
.proof {
  border-bottom: 1px solid var(--line);
  padding-block: var(--section-s);
}
.hero + .proof { border-top: 0; padding-top: clamp(.5rem, .25rem + 1vw, 1.25rem); }
.proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--s-6) var(--s-8);
}
/* Every headline figure on the site is the accent blue, signs and ranges
   included. One colour, one meaning: this is a measured or modelled number. */
.stat .num {
  font-family: var(--sans);
  font-size: var(--t-figure);
  font-weight: 600; letter-spacing: -0.035em; line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.stat .num .sign,
.stat .num .rng { color: inherit; font-weight: 500; }
.stat .num .rng { padding-inline: .04em; }
.stat .label { margin-top: var(--s-3); font-size: var(--t-small); max-width: 26ch; }
.stat .src {
  margin-top: var(--s-2);
  font-size: var(--t-eyebrow);
  color: var(--muted); letter-spacing: .02em;
}

/* Client logos.
   These are third-party trademarks: never stretch, recolour or crop them.
   `align-items: flex-start` is load-bearing, without it the column flex
   container stretches each logo to the caption width and distorts it. */
.clients { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-5) var(--s-8); }

.client {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* do not stretch the logo. see above. */
  gap: .55rem;
}
.client .logo {
  display: flex;
  align-items: center;
  height: 2.25rem;              /* one optical baseline for every mark */
}
.client .logo img {
  width: auto;
  height: auto;
  max-height: 100%;
  max-width: 11rem;
  object-fit: contain;       /* belt and braces: ratio is preserved */
  flex: none;
}
/* Per-mark optical sizing. A wordmark and a solid pill at the same pixel
   height do not read at the same size, so each is tuned by eye. */
.client .logo--galls img { max-height: 88%; }
.client .logo--oleole img { max-height: 100%; }
.client .logo--glyph img { max-height: 78%; }

.client .role {
  font-family: var(--mono); font-size: var(--t-eyebrow);
  color: var(--muted); letter-spacing: .04em;
}

/* ---------- 11. Work cards ----------------------------------------------- */
.work-list { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); }

.work-card {
  position: relative;   /* anchors the whole-card link overlay below */
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
  padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-top: 1px solid var(--line);
}
.work-card:first-child { border-top: 0; }

.work-card .plate {
  position: relative;
  background: var(--surface-2);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.work-card .plate img { width: 100%; height: 100%; object-fit: cover; }
.work-card .plate .flag {
  position: absolute; top: .875rem; left: .875rem;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  background: rgba(255,255,255,.95); color: var(--ink);
  padding: .35rem .65rem; border-radius: 7px;
  backdrop-filter: blur(6px);
}
.work-card h2,
.work-card h3 { font-size: var(--t-h3); letter-spacing: -.015em; line-height: 1.24; }
.work-card h2 a,
.work-card h3 a { color: var(--ink); text-decoration: none; }
.work-card h2 a::after,
.work-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;             /* image included: the entire card is the target */
  z-index: 1;
}
/* The flag and the chips are labels, not controls. They sit above the
   overlay visually but must not intercept the click, or the card develops
   dead patches exactly where the eye is drawn. */
.work-card .outcome,
.work-card .flag { position: relative; z-index: 2; pointer-events: none; }
.work-card .body { position: static; }   /* the overlay anchors to the card, not here */
.work-card .kicker { margin-bottom: var(--s-3); }
.work-card .thesis { margin-top: var(--s-3); max-width: 42ch; }
.work-card .outcome {
  display: flex; flex-wrap: wrap; gap: .4rem .5rem;
  margin-top: var(--s-4);
}
.work-card .chip {
  font-size: 0.8125rem; font-weight: 450; letter-spacing: 0;
  color: var(--body); background: var(--surface);
  border: 1px solid var(--line-soft);
  padding: .3rem .65rem; border-radius: 7px;
  white-space: nowrap;
}
.work-card .link-arrow { margin-top: var(--s-3); }
.work-card:hover .plate img { transform: scale(1.015); }
.work-card .plate img { transition: transform .35s ease; }

@media (max-width: 46rem) {
  .work-card { grid-template-columns: 1fr; gap: var(--s-5); }
  .work-card .plate { order: -1; aspect-ratio: 16 / 10; }
}

/* ---------- 12. Approach / notes list ------------------------------------ */
.notes { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.note { border-top: 2px solid var(--ink); padding-top: var(--s-4); }
.note .n {
  display: block; font-family: var(--mono); font-size: var(--t-eyebrow);
  letter-spacing: .06em; color: var(--muted); margin-bottom: var(--s-3);
}
.note h3 { font-size: var(--t-h4); margin-bottom: var(--s-3); }
.note p { font-size: var(--t-small); }
.note .link-arrow { font-size: var(--t-eyebrow); min-height: 2.75rem; }

/* ---------- 13. Case study page ------------------------------------------ */
.cs-head { padding-block: var(--s-5) var(--section-s); }
.cs-head h1 { margin-top: var(--s-4); max-width: 20ch; }
.cs-head .thesis { margin-top: var(--s-5); max-width: 44ch; text-wrap: balance; }
.cs-head .btn-row { margin-top: var(--s-6); }

.meta-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--s-5) var(--s-6);
  padding-block: var(--s-6);
  border-block: 1px solid var(--line);
}
.meta-bar dt {
  font-family: var(--mono); font-size: var(--t-eyebrow);
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  margin-bottom: .4rem;
}
.meta-bar dd { font-size: var(--t-small); color: var(--ink); }
.meta-bar dd span { display: block; }

.cs-hero { background: var(--surface-2); border-radius: var(--radius); overflow: hidden; }
.cs-hero img { width: 100%; }

/* section head used throughout case studies */
.sec-head { margin-bottom: var(--s-5); }
.sec-head h2 { margin-top: var(--s-3); max-width: 22ch; }
.sec-head .lead { margin-top: var(--s-4); }

/* figures */
figure { margin: 0; }
.fig { margin-top: var(--s-6); }
.fig .frame {
  background: var(--surface-2);
  border-radius: var(--radius);
  overflow: hidden;
}
.fig .frame--plain { background: transparent; border: 1px solid var(--line); }
.fig figcaption {
  margin-top: var(--s-3);
  font-size: var(--t-small); color: var(--muted);
  max-width: var(--measure-wide);
}
.fig-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

/* two-column compare */
.compare { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.panel { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-5); background: var(--white); }
.panel--bad { border-color: var(--line); background: var(--surface); }
.panel--good { border-color: var(--accent); }
.panel h3 { font-size: var(--t-h4); margin-bottom: var(--s-3); }
.panel ul { list-style: none; display: grid; gap: .6rem; font-size: var(--t-small); }
.panel li { display: grid; grid-template-columns: 1rem 1fr; gap: .55rem; }
.panel li::before { content: "•"; color: var(--faint); font-size: 1.1em; line-height: 1.35; }
.panel--good li::before { content: "→"; color: var(--accent); }

/* decisions / rejected directions */
.decisions { display: grid; gap: var(--s-5); counter-reset: d; }
.decision {
  display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--s-4);
  padding-top: var(--s-5); border-top: 1px solid var(--line);
}
.decision::before {
  counter-increment: d; content: counter(d, decimal-leading-zero);
  font-family: var(--mono); font-size: var(--t-eyebrow); color: var(--accent);
  padding-top: .35rem; letter-spacing: .04em;
}
.decision h3 { font-size: var(--t-h4); margin-bottom: var(--s-2); }
.decision p { font-size: var(--t-small); max-width: 58ch; }
.decision .verdict {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: var(--s-4);
  font-size: 0.8125rem; font-weight: 500;
  padding: .4rem .8rem; border-radius: 8px;
}
.verdict--out {
  background: var(--surface); color: var(--muted);
  border: 1px solid var(--line-soft);
}
.verdict--out::before { content: "✕"; font-size: .75em; opacity: .7; }

/* The direction that was actually built is the point of the section.
   It gets the ink treatment so it cannot be mistaken for another option. */
.verdict--in {
  background: var(--ink); color: #fff;
  border: 1px solid var(--ink);
  font-weight: 600; letter-spacing: .01em;
  padding: .45rem .9rem;
}
.verdict--in::before { content: "✓"; font-size: .85em; }
.decision:has(.verdict--in) {
  border-top-color: var(--ink);
  border-top-width: 2px;
}
.decision:has(.verdict--in)::before { color: var(--ink); font-weight: 700; }

/* outcomes */
.outcomes { display: grid; gap: var(--s-6) var(--s-8); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.evidence-note {
  margin-top: var(--s-5);
  font-family: var(--mono); font-size: var(--t-eyebrow);
  color: var(--muted); line-height: 1.6;
  padding-left: .75rem; border-left: 2px solid var(--line);
  max-width: 60ch;
}

/* quotes */
.quotes { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
blockquote { border-left: 2px solid var(--ink); padding-left: var(--s-4); }
blockquote p { font-size: var(--t-lead); color: var(--ink); letter-spacing: -.012em; line-height: 1.45; }
blockquote cite {
  display: block; margin-top: var(--s-3);
  font-family: var(--mono); font-size: var(--t-eyebrow);
  font-style: normal; color: var(--muted); letter-spacing: .04em;
}

/* data table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.table-wrap:focus-visible { box-shadow: var(--focus); }
table.data { border-collapse: collapse; width: 100%; font-size: var(--t-small); min-width: 34rem; }
table.data th, table.data td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--line-soft); }
table.data thead th {
  font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); background: var(--surface);
  border-bottom: 1px solid var(--line);
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td:first-child { color: var(--ink); font-weight: 500; }

/* checklist, marker is positioned, NOT a grid item, so wrapped
   text stays in one flow instead of breaking into a second column. */
.checks { list-style: none; display: grid; gap: var(--s-4); }
.checks li {
  position: relative;
  padding-left: 1.75rem;
  font-size: var(--t-small);
}
.checks li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: var(--accent); font-weight: 600; line-height: 1.65;
}
.checks b { display: block; color: var(--ink); margin-bottom: .15rem; }

/* ---------- 14. Diagrams (inline SVG wrapper) ---------------------------- */
.diagram {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  padding: clamp(1rem, .5rem + 1.6vw, 2rem);
  overflow-x: auto;
}
.diagram svg { width: 100%; height: auto; min-width: 30rem; display: block; }
.diagram:focus-visible { box-shadow: var(--focus); }
.dg-box { fill: var(--white); stroke: var(--line); stroke-width: 1; }
.dg-box--ink   { fill: var(--ink);   stroke: var(--ink); }
.dg-box--acc   { fill: var(--accent-wash); stroke: #cdd7fa; }
.dg-box--mark  { fill: var(--mark);  stroke: #e6dc84; }
.dg-box--wash  { fill: var(--surface); stroke: var(--line); }
.dg-t   { font-family: var(--mono); font-size: 11px; fill: var(--ink); letter-spacing: .01em; }
.dg-t--w { fill: #fff; }
.dg-t--m { fill: var(--muted); }
.dg-t--a { fill: var(--accent-ink); }
.dg-lbl { font-family: var(--mono); font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; fill: var(--muted); }
.dg-line { stroke: var(--faint); stroke-width: 1; fill: none; }
.dg-line--acc { stroke: var(--accent); stroke-width: 1.25; }
.dg-line--dash { stroke-dasharray: 3 3; }

/* ---------- 15. Next / contact ------------------------------------------- */
.next-card {
  display: grid; grid-template-columns: minmax(0, 12rem) 1fr;
  gap: var(--s-5); align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-5); position: relative;
}
.next-card .plate { background: var(--surface-2); border-radius: var(--radius-s); overflow: hidden; aspect-ratio: 4/3; }
.next-card .plate img { width: 100%; height: 100%; object-fit: cover; }
.next-card h3 { font-size: var(--t-h4); margin-top: var(--s-2); }
.next-card h3 a { color: var(--ink); text-decoration: none; }
.next-card h3 a::after { content: ""; position: absolute; inset: 0; }
.next-card p { font-size: var(--t-small); margin-top: var(--s-2); max-width: 46ch; }
.next-card:hover { border-color: var(--ink); }
@media (max-width: 40rem) { .next-card { grid-template-columns: 1fr; } }

.contact-band { background: var(--ink); color: #d5d9de; }
.contact-band h2 { color: #fff; max-width: 20ch; }
.contact-band .lead { color: #aab1b9; max-width: 44ch; margin-top: var(--s-4); }

/* The eyebrow on the dark band. This lived as an inline style on every page,
   which meant a new page could silently ship it at 3.05:1. It belongs here.
   #8b939b measures 5.7:1 on --ink, the index and rule are lighter still. */
.contact-band .eyebrow { color: #8b939b; }
.contact-band .eyebrow .idx { color: #fff; }
.contact-band .eyebrow::before { background: #6b727a; }
.contact-band .btn--primary { background: #fff; color: var(--ink); }
.contact-band .btn--primary:hover { background: #e9ecef; color: var(--ink); }
.contact-band .btn--ghost { color: #fff; border-color: #3a3f47; }
.contact-band .btn--ghost:hover { border-color: #fff; color: #fff; }
.contact-band .btn-row { margin-top: var(--s-6); }
.contact-band .direct {
  margin-top: var(--s-6); font-family: var(--mono); font-size: var(--t-small);
  color: #8b939b;
}
.contact-band .direct a { color: #fff; text-decoration-color: #555b63; }
.contact-band :focus-visible { box-shadow: 0 0 0 3px #2b3138, 0 0 0 5px #fff; }

/* ---------- 16. Footer --------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); padding-block: var(--s-8) var(--s-7); }
.footer-grid {
  display: grid; gap: var(--s-6) var(--s-8);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.footer-grid h2 {
  font-family: var(--mono); font-size: var(--t-eyebrow); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  margin-bottom: var(--s-2);
}
.footer-grid ul { list-style: none; }
.footer-grid a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  font-size: var(--t-small); color: var(--body); text-decoration: none;
}
.footer-grid a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.footer-base {
  margin-top: var(--s-8); padding-top: var(--s-5);
  border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  justify-content: space-between; align-items: center;
  font-size: var(--t-eyebrow); font-family: var(--mono); color: var(--muted);
}

/* ---------- 17. Personal (compact) --------------------------------------- */
.aside-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); align-items: start; }
.aside-card { display: grid; gap: var(--s-4); }
/* No fixed ratio and no cropping. One of these is a three-part collage;
   cropping it to a square cut a person in half. Images size to their own
   proportions and the grid aligns to the top instead. */
.aside-card .plate { background: var(--surface-2); border-radius: var(--radius-s); overflow: hidden; }
.aside-card .plate img { width: 100%; height: auto; display: block; }
.aside-card h3 { font-size: var(--t-h4); }
.aside-card p { font-size: var(--t-small); margin-top: var(--s-2); }

/* ---------- 18. About ---------------------------------------------------- */
.about-grid {
  display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 52rem) { .about-grid { grid-template-columns: 1fr; } }
.portrait { border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.portrait img { width: 100%; }

.cv { display: grid; }
.cv-row {
  display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: var(--s-3) var(--s-5);
  padding-block: var(--s-5);
  border-top: 1px solid var(--line);
}
.cv-row .when {
  font-family: var(--mono); font-size: var(--t-eyebrow);
  color: var(--muted); letter-spacing: .03em; padding-top: .2rem;
}
.cv-row h3 { font-size: var(--t-h4); }
.cv-row .where { font-size: var(--t-small); color: var(--muted); margin-top: .15rem; }
.cv-row p { font-size: var(--t-small); margin-top: var(--s-3); max-width: 56ch; }
@media (max-width: 34rem) { .cv-row { grid-template-columns: 1fr; } }

.tags { display: flex; flex-wrap: wrap; gap: .45rem; }
.tag {
  font-size: 0.8125rem; font-weight: 450;
  color: var(--body); background: var(--surface);
  border: 1px solid var(--line-soft);
  padding: .35rem .7rem; border-radius: 8px;
}

/* ---------- 19. Motion --------------------------------------------------- */
.rise { opacity: 0; transform: translateY(14px); }
.rise.in { opacity: 1; transform: none; transition: opacity .5s cubic-bezier(.2.6.2,1), transform .5s cubic-bezier(.2.6.2,1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .rise { opacity: 1; transform: none; }
}

/* ---------- 20. Print ---------------------------------------------------- */
@media print {
  .masthead, .contact-band, .next-card, .skip { display: none; }
  body { color: #000; font-size: 11pt; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ---------- 21. Figures panel -------------------------------------------
   The one place the site goes dark. Numbers are the only thing on the site
   that earn a full change of ground, so they get it and nothing else does.

   --accent (#2b4fd8) measures 2.9:1 on black and would fail, so the panel
   swaps in a brighter blue that clears AA at 5.8:1. Everything inside the
   panel inherits from these two rules, which is why no page needs its own
   colour overrides. */
.section--figures {
  --accent:      #0a84ff;
  --accent-ink:  #3d9dff;
  --ink:         #ffffff;
  --body:        #c3cbd6;
  --muted:       #98a2ae;
  --faint:       #6c7681;
  --line:        #26262a;
  background: #000;
  color: var(--body);
  border-top: 0;
}
.section--figures h2 { color: #fff; }
.section--figures .eyebrow { color: var(--body); }
.section--figures .eyebrow .idx { color: var(--accent); }
.section--figures .eyebrow::before { background: var(--faint); }
.section--figures .lead { color: var(--body); }
.section--figures .stat .label { color: var(--body); }
.section--figures .evidence-note { color: var(--muted); border-left-color: var(--accent); }
.section--figures .evidence-note b { color: #fff; }
.section--figures .link-arrow { color: var(--accent); }
.section--figures .link-arrow:hover { color: var(--accent-ink); }
.section--figures a:focus-visible { outline-color: var(--accent); }

/* The figures run larger here, because the dark ground can carry it. Capped so
   that a range like "15-20%", the widest figure on the site, still fits its
   column at 1152px without wrapping. Ranges must never break across lines: the
   dash would read as a minus sign on the second line. */
.section--figures .stat .num {
  font-size: clamp(3rem, 2.1rem + 3.4vw, 5.25rem);
  letter-spacing: -.05em;
  white-space: nowrap;
}
.section--figures .outcomes,
.section--figures .proof-grid {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}