/* ==========================================================================
   ref.css : the design language of the home page (mirrors the reference's
   vocabulary: 14px caps, bracket labels, parenthesis marks, hairlines, a
   12-column grid and a huge tight heading scale). Tokens come from base.css.
   Load after base.css, before the page css. Reusable on any page.

   Type
     .t-14    14px / 500 / UPPERCASE / line-height .92   (nav, rail, labels)
     .t-12    12px / 500 / sentence case / line-height 1.15  (descriptions)
     .t-12u   same, UPPERCASE
     .t-body  14px sentence case, line-height 1.25 (prose inside sections)
     .t-m .t-l .t-xl .t-huge   heading scale (fluid, tight, sentence case)
   Marks
     .label   [ bracket label ]  (brackets drawn by CSS, text stays clean)
     .mark    (parenthesis mark)
   Structure
     .hairline        1px rule, colour via --hl (default currentColor)
     .hairline--top / --bottom   border on one side only
     .g-12            12-column grid with the page side padding
     .on-dark         white text on black sections
   Helpers: --rg (side padding), --hl, --dim (inactive opacity .4)
   ========================================================================== */

:root {
  --rg: clamp(16px, 2.1vw, 32px);   /* side padding: 16px mobile, ~30px at 1440 */
  --hl: currentColor;
  --hl-soft: #d4d4d4;               /* light-grey list hairlines on white */
  --dim: 0.4;
  --blue-curtain: var(--blue);
}

/* ---------- Small caps type ---------- */
.t-14 {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0;
}
.t-12 {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0;
}
.t-12u {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: 0;
}
.t-body {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

/* ---------- Heading scale (tight, 500, sentence case) ---------- */
.t-m,
.t-l,
.t-xl,
.t-huge {
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.t-m    { font-size: clamp(22px, 2.3vw, 36px); line-height: 1; letter-spacing: -0.03em; }
.t-l    { font-size: clamp(30px, 3.4vw, 52px); }
.t-xl   { font-size: clamp(40px, 5vw, 84px); }
.t-huge { font-size: clamp(56px, 11vw, 200px); letter-spacing: -0.05em; text-transform: uppercase; }

/* ---------- Marks ---------- */
.label::before { content: "[\00a0"; }
.label::after  { content: "\00a0]"; }
.label--tight::before { content: "["; }
.label--tight::after  { content: "]"; }
.mark::before { content: "("; }
.mark::after  { content: ")"; }

/* ---------- Hairlines ---------- */
.hairline { border: 0; border-top: 1px solid var(--hl); height: 0; margin: 0; }
.hairline--top { border-top: 1px solid var(--hl); }
.hairline--bottom { border-bottom: 1px solid var(--hl); }

/* ---------- 12-column grid ---------- */
.g-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 0;
  padding-inline: var(--rg);
}

/* ---------- Colour contexts ---------- */
.on-dark { background: var(--black); color: var(--white); }
.on-dark .hairline { --hl: rgba(255, 255, 255, 0.9); }

/* ---------- Focus (the reference is plain; ours stays visible) ---------- */
.home-hero a:focus-visible,
.home-work a:focus-visible,
.home-dossier :is(a, button, [tabindex]):focus-visible,
.home-founders a:focus-visible,
.home-process a:focus-visible,
.home-studies :is(a, button):focus-visible,
.home-footer :is(a, button):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.home-founders :is(a, button):focus-visible,
.home-footer :is(a, button):focus-visible,
.home-dossier__table :is(a, button):focus-visible { outline-color: var(--white); }