/* ==========================================================================
   Tandara brand guidelines
   Colour tokens match the variables in the Figma file (Tandara collection).
   Type sizes are given at the 1440 px desktop design and scale with the
   content column (cqi = 1% of the content width, 1080 px on desktop).
   ========================================================================== */

:root {
  /* Brand colours */
  --ivory: #F4EBDD;
  --plum: #45234F;
  --ink: #171513;
  --orange: #E87532;
  --sand: #D8C8B5;
  --lilac: #A996AE;
  --white: #FFFFFF;
  --black: #000000;

  /* Supporting tokens */
  --text-muted: #5E554E;
  --text-muted-inverse: #CDBFCF;
  --line: #D8C8B5;
  --line-inverse: #6A4F72;

  /* Typefaces */
  --font-display: "Spectral", Georgia, "Times New Roman", serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Type scale (desktop value / smallest value) */
  --fs-display-l: clamp(52px, 11.111cqi, 120px);
  --fs-heading-xl: clamp(36px, 5.926cqi, 64px);
  --fs-heading-l: clamp(26px, 3.704cqi, 40px);
  --fs-heading-m: clamp(21px, 2.593cqi, 28px);
  --fs-quote: clamp(34px, 5.185cqi, 56px);
  --fs-lead: clamp(20px, 2.778cqi, 30px);

  /* Layout */
  --pad-l: 320px;
  --pad-r: 40px;
  --space-section: 200px;
  --space-band: 160px;
  --space-block: 120px;
  --gutter: 24px;
  --sidebar-left: max(40px, calc((100vw - 1440px) / 2 + 40px));
  --topbar-h: 64px;
}

@media (max-width: 1023px) {
  :root {
    --pad-l: 40px;
    --pad-r: 40px;
    --space-section: 144px;
    --space-band: 120px;
    --space-block: 96px;
  }
}

@media (max-width: 767px) {
  :root {
    --pad-l: 20px;
    --pad-r: 20px;
    --space-section: 96px;
    --space-band: 96px;
    --space-block: 72px;
    --gutter: 16px;
  }
}

/* ---------- Base ---------- */

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

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

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3, h4 { font-weight: inherit; font-size: inherit; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

[data-theme="dark"] { color: var(--ivory); }

:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; }
[data-theme="dark"] :focus-visible,
.is-on-dark:focus-visible,
.is-on-dark :focus-visible { outline-color: var(--ivory); }

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--ivory);
  font: 500 12px/16px var(--font-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { top: 16px; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Type ---------- */

.t-display-l {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-display-l);
  line-height: 0.95;
  letter-spacing: -0.025em;
}

.t-heading-xl {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-heading-xl);
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.t-heading-l {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-heading-l);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.t-heading-m {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-heading-m);
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.t-quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: var(--fs-quote);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.t-lead {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: 1.35;
  letter-spacing: -0.005em;
}

.t-body-l { font-size: 18px; line-height: 29px; }
.t-body-m { font-size: 16px; line-height: 26px; }
.t-body-s { font-size: 14px; line-height: 22px; }
.t-spec { font-size: 13px; line-height: 20px; }

.t-label {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .t-body-l { font-size: 17px; line-height: 27px; }
}

.measure { max-width: 640px; }
.measure-560 { max-width: 560px; }

/* ---------- Layout primitives ---------- */

.wrap {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--pad-l) var(--pad-r);
  container-type: inline-size;
}

.block {
  display: flex;
  flex-direction: column;
  gap: var(--space-block);
  padding-top: var(--space-section);
}
.block--before-band { padding-bottom: var(--space-band); }
.block--after-band { padding-top: var(--space-band); }
.block--last { padding-bottom: var(--space-section); }

.band { background: var(--plum); color: var(--ivory); }
.band__inner { padding-block: var(--space-band); }

.stack { display: flex; flex-direction: column; }
.stack--8 { gap: 8px; }
.stack--12 { gap: 12px; }
.stack--16 { gap: 16px; }
.stack--20 { gap: 20px; }
.stack--24 { gap: 24px; }
.stack--28 { gap: 28px; }
.stack--32 { gap: 32px; }
.stack--40 { gap: 40px; }
.stack--48 { gap: 48px; }
.stack--56 { gap: 56px; }
.stack--72 { gap: 72px; }

@media (max-width: 767px) {
  .stack--40 { gap: 28px; }
  .stack--48 { gap: 32px; }
  .stack--56 { gap: 40px; }
  .stack--72 { gap: 48px; }
}

.ruled { border-top: 1px solid var(--line); padding-top: 24px; }
.ruled--inverse { border-top-color: var(--line-inverse); padding-top: 20px; }

.grid { display: grid; gap: var(--gutter); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--traits,
.grid--misuse,
.grid--rules-big { row-gap: 48px; }
.grid--stories,
.grid--principles { row-gap: 40px; }

/* Caption on the left, visual on the right (344 : 712 at desktop) */
.split {
  display: grid;
  grid-template-columns: minmax(0, 344fr) minmax(0, 712fr);
  gap: var(--gutter);
  align-items: end;
}
.split--top { align-items: start; }

@media (max-width: 1023px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--stories,
  .grid--principles,
  .grid--misuse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

@media (max-width: 767px) {
  .grid--2,
  .grid--3,
  .grid--stories,
  .grid--principles,
  .grid--misuse { grid-template-columns: minmax(0, 1fr); }
  .grid--swatches-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--traits { row-gap: 32px; }
  .grid--misuse,
  .grid--rules-big,
  .grid--stories,
  .grid--principles { row-gap: 32px; }
}

/* ---------- Components ---------- */

/* Eyebrow: number, short orange rule, label */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 12px/16px var(--font-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.eyebrow__num { color: var(--plum); }
.eyebrow__rule { width: 24px; height: 1px; flex: none; background: var(--orange); }
.eyebrow__label { color: var(--text-muted); }
[data-theme="dark"] .eyebrow__num { color: var(--ivory); }
[data-theme="dark"] .eyebrow__label { color: var(--text-muted-inverse); }

/* Section header */
.section-header {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--plum);
}
.section-header__lead { max-width: 760px; color: var(--ink); }

@media (max-width: 767px) {
  .section-header { gap: 24px; padding-top: 20px; }
}

/* Subsection header */
.sub-header { display: flex; flex-direction: column; gap: 20px; }
.sub-header h3 { color: var(--plum); }
.sub-header p { max-width: 640px; }

/* Caption */
.caption { display: flex; flex-direction: column; gap: 10px; }
.caption__title {
  font: 400 22px/1.3 var(--font-display);
  color: var(--plum);
}
.caption__body { font-size: 14px; line-height: 22px; }

/* Trait card (also used for principles and rules) */
.trait {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.trait__num {
  font: 500 12px/16px var(--font-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.trait__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-heading-m);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--plum);
}
.trait__body { font-size: 14px; line-height: 22px; }
.trait--big .trait__title {
  font-size: var(--fs-heading-l);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* "African, but not stereotypical" table */
.balance {
  font-family: var(--font-display);
  font-size: var(--fs-heading-l);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.balance__row {
  display: grid;
  grid-template-columns: minmax(0, 344fr) minmax(0, 712fr);
  gap: var(--gutter);
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.balance dt { color: var(--plum); }
.balance dd { margin: 0; color: var(--text-muted); }

@media (max-width: 767px) {
  .balance__row { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 16px 0; }
}

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chip {
  padding: 8px 16px;
  border: 1px solid var(--plum);
  border-radius: 999px;
  font-size: 14px;
  line-height: 22px;
  color: var(--plum);
}
.chip--struck {
  border-color: var(--line);
  color: var(--text-muted);
  text-decoration: line-through;
}
.keywords { padding-top: 24px; }

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  padding: 16px 20px 16px 24px;
  font: 500 12px/16px var(--font-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.button--primary { background: var(--ink); color: var(--ivory); }
.button--primary:hover { background: var(--plum); }
.button--secondary {
  padding: 15px 19px 15px 23px;
  border: 1px solid var(--ink);
  color: var(--ink);
}
.button--secondary:hover { background: var(--ink); color: var(--ivory); }

/* Icons (SVG files used as masks so they take the text colour) */
.icon {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / 16px 16px no-repeat;
  mask: var(--icon) center / 16px 16px no-repeat;
}
.icon--down { --icon: url("../icons/arrow-down.svg"); }
.icon--up { --icon: url("../icons/arrow-up.svg"); }
.icon--external { --icon: url("../icons/arrow-up-right.svg"); }
.icon--menu { --icon: url("../icons/menu.svg"); }
.icon--cross { --icon: url("../icons/cross.svg"); }

/* Logo / mark tiles */
.tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 220px;
  padding: 16px;
  overflow: hidden;
}
.tile--card { height: 360px; }
.tile--bordered { border: 1px solid var(--line); }
.tile img { position: relative; }
.tile--photo .tile__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center top;
}

@media (max-width: 767px) {
  .tile { height: 160px; }
  .tile--card { height: 240px; }
  .tile--card img { max-width: 70%; }
}

/* Clear-space diagram (positions match the Figma frame, 712 × 400) */
.clearspace {
  position: relative;
  aspect-ratio: 712 / 400;
  overflow: hidden;
  container-type: inline-size;
}
.clearspace__zone {
  position: absolute;
  left: 15.913%;
  top: 28.788%;
  width: 68.174%;
  height: 42.426%;
  border: 1px dashed var(--plum);
}
.clearspace__logo {
  position: absolute;
  left: 21.91%;
  top: 39.4625%;
  width: 56.18%;
  max-width: none;
}
.clearspace__x {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.997%;
  aspect-ratio: 1;
  background: rgba(69, 35, 79, 0.14);
  color: var(--plum);
  font-size: clamp(9px, 1.826cqi, 13px);
  line-height: 1;
}
.clearspace__x--left { left: 15.913%; top: 44.6625%; }
.clearspace__x--right { left: 78.09%; top: 44.6625%; }
.clearspace__x--top { left: 47.002%; top: 28.7875%; }
.clearspace__x--bottom { left: 47.002%; top: 60.5375%; }

/* Minimum-size diagram (real pixel sizes, so nothing here scales) */
.minsize {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 120px;
  height: 280px;
  padding-bottom: 72px;
  background: var(--ivory);
  border: 1px solid var(--line);
}
.minsize__item { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.minsize__item img { max-width: none; }
.minsize__dim { display: block; height: 1px; background: var(--plum); }

@media (max-width: 767px) {
  .minsize { gap: 56px; height: 220px; padding-bottom: 48px; }
}

/* Misuse examples */
.misuse { display: flex; flex-direction: column; gap: 16px; }
.misuse figcaption { font-size: 14px; line-height: 22px; }
.misuse__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 220px;
  overflow: hidden;
  background: var(--ivory);
  border: 1px solid var(--line);
}
.misuse__visual > img:not(.misuse__strike):not(.misuse__bg) {
  position: relative;
  max-width: calc(100% - 32px);
}
.misuse__strike {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  max-width: none;
  pointer-events: none;
}
.misuse__stretch { width: 300px; transform: scaleY(1.455); }
.misuse__rotate { width: 240px; transform: rotate(-14deg); }
.misuse__effects { width: 240px; filter: drop-shadow(6.5px 6.5px 3.3px rgba(0, 0, 0, 0.4)); }
.misuse__visual--photo { border: 1px solid var(--line); }
.misuse__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.misuse__visual--tight { gap: 2px; }
.misuse__visual--tight .t-label { position: relative; }
.misuse__visual--padded { padding: 0 32px; }
.misuse__visual--offpalette { background: #40BF70; }
.misuse__visual--offpalette .misuse__statement { color: #2E5CFF; }
.misuse__statement {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--fs-heading-l);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-align: center;
}
.misuse__visual--padded .t-body-s { position: relative; }

/* Colour swatches */
.swatch {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 360px;
  padding: 20px;
}
.swatch--short { height: 240px; }
.swatch--bordered { border: 1px solid var(--line); }
.swatch--light { color: var(--ink); }
.swatch--dark { color: var(--ivory); }
.swatch__name { font: 500 14px/22px var(--font-text); }
.swatch__role { margin-top: 4px; font-size: 13px; line-height: 20px; color: var(--text-muted); }
.swatch--dark .swatch__role { color: var(--text-muted-inverse); }
.swatch--ink-role .swatch__role { color: var(--ink); }
.swatch__values { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.swatch__values button {
  font-size: 13px;
  line-height: 20px;
  text-align: left;
  white-space: pre;
  cursor: copy;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s ease;
}
.swatch__values button:hover,
.swatch__values button:focus-visible { text-decoration-color: currentColor; }
.swatch--dark .swatch__values button:focus-visible { outline-color: var(--ivory); }

@media (max-width: 767px) {
  .swatch { height: 220px; padding: 16px; }
  .swatch--short { height: 160px; }
}

/* Colour ratio bar */
.ratio { display: flex; height: 320px; container-type: inline-size; }
.ratio__part {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  width: var(--w);
  padding: 0 4px 14px 14px;
  overflow: hidden;
  white-space: nowrap;
  color: var(--ink);
}
.ratio__part.c-ivory { color: var(--ivory); }
.ratio__part--bordered { border: 1px solid var(--line); }
.ratio__part--tiny { padding-left: 8px; }
.ratio__pct {
  font-family: var(--font-display);
  font-size: clamp(14px, 3.933cqi, 28px);
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.ratio__name { font-size: clamp(10px, 1.826cqi, 13px); line-height: 20px; }

@media (max-width: 767px) {
  .ratio { height: 200px; }
  .ratio__part { padding: 0 2px 10px 8px; }
  .ratio__part--tiny { padding-left: 3px; }
}

/* Colour combinations */
.combo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 200px;
  padding: 20px 24px;
}
.combo--bordered { border: 1px solid var(--line); }
.combo__sample {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-heading-xl);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.combo__label { font-size: 13px; line-height: 20px; }

@media (max-width: 767px) {
  .combo { height: 160px; padding: 16px; }
}

/* Typefaces */
.typeface {
  display: grid;
  grid-template-columns: minmax(0, 344fr) minmax(0, 712fr);
  gap: var(--gutter);
  align-items: start;
  padding: 40px 0 56px;
}
.typeface__name {
  font-size: var(--fs-heading-xl);
  line-height: 1.05;
  color: var(--plum);
}
.typeface__name--spectral { font-family: var(--font-display); font-weight: 300; letter-spacing: -0.015em; }
.typeface__name--inter { font-family: var(--font-text); font-weight: 400; letter-spacing: -0.03em; }
.typeface__specimen { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.typeface__aa { font-size: clamp(120px, 24.074cqi, 260px); line-height: 1; letter-spacing: -0.03em; }
.typeface__glyphs { line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.typeface__specimen--spectral .typeface__aa { font-family: var(--font-display); font-weight: 300; color: var(--plum); }
.typeface__specimen--spectral .typeface__glyphs {
  font-family: var(--font-display);
  font-size: clamp(17px, 2.593cqi, 28px);
  letter-spacing: 0.02em;
}
.typeface__specimen--inter .typeface__aa { font-family: var(--font-text); font-weight: 400; color: var(--ink); }
.typeface__specimen--inter .typeface__glyphs { font-family: var(--font-text); font-size: clamp(15px, 2.222cqi, 24px); }

@media (max-width: 767px) {
  .typeface { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 32px 0 40px; }
}

/* Band line in Inter */
.band__inter {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: clamp(40px, 9.259cqi, 100px);
  line-height: 1.1;
  letter-spacing: -0.04em;
}

/* Type hierarchy */
.level {
  display: grid;
  grid-template-columns: minmax(0, 344fr) minmax(0, 712fr);
  gap: var(--gutter);
  align-items: start;
  padding: 28px 0 40px;
}
.level__info { display: flex; flex-direction: column; gap: 8px; }
.level__sample--hero {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(72px, 14.815cqi, 160px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--plum);
}
.level__sample--headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 4.444cqi, 48px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--plum);
}
.level__sample--support { font-size: clamp(17px, 1.852cqi, 20px); line-height: 1.55; }

@media (max-width: 767px) {
  .level { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 20px 0 32px; }
}

/* Do / Don't lists */
.rules { display: flex; flex-direction: column; }
.rule {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  font-size: 16px;
  line-height: 26px;
}
.rule::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  -webkit-mask: var(--icon) center / 16px 16px no-repeat;
  mask: var(--icon) center / 16px 16px no-repeat;
}
.rule--do::before { --icon: url("../icons/check.svg"); background-color: var(--plum); }
.rule--dont::before { --icon: url("../icons/cross.svg"); background-color: var(--orange); }

/* Rewrites */
.rewrite {
  display: grid;
  grid-template-columns: minmax(0, 400fr) minmax(0, 656fr);
  gap: var(--gutter);
  align-items: start;
  padding: 32px 0;
  border-top: 1px solid var(--line);
}
.rewrite__instead,
.rewrite__say { display: flex; flex-direction: column; gap: 12px; }
.rewrite__instead { color: var(--text-muted); }

@media (max-width: 767px) {
  .rewrite { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 24px 0; }
}

/* Signature language */
.signature li {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--line-inverse);
}
.signature li:last-child { border-bottom: 1px solid var(--line-inverse); }
.signature__num { flex: none; width: 40px; font-size: 13px; line-height: 20px; color: var(--text-muted-inverse); }
.signature__line {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-heading-xl);
  line-height: 1.05;
  letter-spacing: -0.015em;
}

@media (max-width: 767px) {
  .signature li { gap: 12px; padding: 16px 0; }
  .signature__num { width: 24px; }
}

/* Photo mosaic */
.mosaic { display: grid; gap: var(--gutter); }
.mosaic--row1 { grid-template-columns: minmax(0, 344fr) minmax(0, 712fr); }
.mosaic--row2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.photo { display: flex; flex-direction: column; gap: 12px; }
.photo img { width: 100%; height: 460px; object-fit: cover; }

@media (max-width: 1023px) {
  .photo img { height: clamp(260px, 42vw, 460px); }
}

@media (max-width: 767px) {
  .mosaic--row1,
  .mosaic--row2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaic--row2 .photo:last-child { grid-column: 1 / -1; }
  .photo img { height: auto; aspect-ratio: 3 / 4; }
  .mosaic--row2 .photo:last-child img { aspect-ratio: 4 / 3; }
}

/* African identity */
.identity {
  display: grid;
  grid-template-columns: minmax(0, 712fr) minmax(0, 344fr);
  gap: var(--gutter);
  align-items: end;
}
.identity__photo { width: 100%; height: 460px; object-fit: cover; }

@media (max-width: 767px) {
  .identity { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .identity__photo { height: auto; aspect-ratio: 3 / 4; }
}

/* Formats diagram (Figma frame 712 wide: feed 288, stories 203, gap 64) */
.formats {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8.99cqi;
  padding: 48px 0 40px;
  container-type: inline-size;
}
.format { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.format--feed { width: 40.45cqi; }
.format--story { width: 28.51cqi; }
.format figcaption { text-align: center; white-space: nowrap; }

@media (max-width: 767px) {
  .format figcaption { white-space: normal; }
}
.format__frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--ivory);
  container-type: inline-size;
}
.format--feed .format__frame { aspect-ratio: 4 / 5; }
.format--story .format__frame { aspect-ratio: 9 / 16; }
.format__grid {
  position: absolute;
  inset: 6cqi;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3cqi;
  outline: 1px solid var(--orange);
}
.format__grid span { background: rgba(169, 150, 174, 0.22); }
.format__headline {
  position: absolute;
  left: 6cqi;
  right: 6cqi;
  top: calc(6cqi + 1.4cqi);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 10.4cqi;
  line-height: 0.95;
  color: var(--plum);
}
.format__logo {
  position: absolute;
  left: 6cqi;
  bottom: 6cqi;
  width: 22cqi;
  max-width: none;
}

/* Social posts. Sizes come from the 1080 × 1350 templates in Figma.
   --u is one design pixel: the post's content box is 952 px wide in the
   template (1080 minus 64 px padding each side), or 1080 px for the feature
   post, which has no padding. One set of rules works at any size. */
.post {
  --u: calc(100cqw / 952);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 4 / 5;
  padding: 5.926%;
  overflow: hidden;
  container-type: inline-size;
  background: var(--plum);
  color: var(--ivory);
}
.post--ink { background: var(--ink); }
.post__label {
  position: relative;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: calc(24 * var(--u));
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-muted-inverse);
}
.post--image .post__label,
.post--podcast .post__label { color: var(--ivory); }
.post__label--muted { color: var(--text-muted); }
.post__bottom {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(48 * var(--u));
}
.post__bottom--image { gap: calc(36 * var(--u)); }
.post__bottom--podcast { gap: calc(32 * var(--u)); }
.post__headline { font-family: var(--font-display); font-weight: 300; }
.post__headline--xl { font-size: calc(140 * var(--u)); line-height: 0.92; letter-spacing: -0.025em; }
.post__headline--l { font-size: calc(104 * var(--u)); line-height: 0.96; letter-spacing: -0.02em; }
.post__headline--m { font-size: calc(64 * var(--u)); font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; }
.post__body { max-width: calc(720 * var(--u)); font-size: calc(30 * var(--u)); line-height: 1.4; }
.post__body--announce { max-width: calc(760 * var(--u)); }
.post__rule { display: block; width: calc(96 * var(--u)); height: calc(4 * var(--u)); background: var(--orange); }
.post__logo { width: calc(240 * var(--u)); max-width: none; }
.post__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.post__shade { position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none; }
.post__shade--bottom {
  bottom: 0;
  height: 57.78%;
  background: linear-gradient(to bottom, rgba(23, 21, 19, 0), rgba(23, 21, 19, 0.78));
}
.post__shade--top {
  top: 0;
  height: 26.67%;
  background: linear-gradient(to bottom, rgba(23, 21, 19, 0.7), rgba(23, 21, 19, 0));
}
.post__shade--podcast { height: 56.3%; }

.post--quote {
  align-items: center;
  padding: 11.111% 5.926% 7.407%;
  background: var(--ivory);
  color: var(--plum);
  text-align: center;
}
.post__quote,
.post__signoff { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(40 * var(--u)); }
.post__quote-mark {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: calc(220 * var(--u));
  line-height: 0.7;
  letter-spacing: -0.025em;
  color: var(--orange);
}
.post__quote-text {
  max-width: calc(900 * var(--u));
  font-family: var(--font-display);
  font-weight: 300;
  font-size: calc(76 * var(--u));
  line-height: 1.14;
  letter-spacing: -0.015em;
}

.post--journal {
  justify-content: flex-start;
  gap: calc(40 * var(--u));
  background: var(--ivory);
  color: var(--plum);
}
.post__masthead {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(20 * var(--u));
  width: 100%;
  white-space: nowrap;
}
.post__masthead-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(40 * var(--u));
  line-height: 1;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.post--journal .post__label { color: var(--plum); }
.post__inset {
  flex: 1 1 0;
  width: 100%;
  height: 0;
  min-height: 0;
  max-width: none;
  object-fit: cover;
}
.post__text { display: flex; flex-direction: column; gap: calc(20 * var(--u)); }
.post--journal .post__body { max-width: none; color: var(--ink); }

.post--podcast { background: var(--ink); }

.post--feature {
  --u: calc(100cqw / 1080);
  justify-content: flex-start;
  padding: 0;
  background: var(--ivory);
  color: var(--plum);
}
.post__feature-photo { flex: none; width: 100%; height: calc(760 * var(--u)); max-width: none; object-fit: cover; }
.post__feature-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(56 * var(--u)) calc(64 * var(--u)) calc(64 * var(--u));
}
.post__copy { display: flex; flex-direction: column; gap: calc(24 * var(--u)); }
.post--feature .post__body { max-width: none; color: var(--ink); }
.post__logo--feature { width: calc(210 * var(--u)); }

.post--question {
  align-items: center;
  padding: 7.407% 5.926%;
  background: var(--lilac);
  color: var(--ink);
  text-align: center;
}
.post--question .post__label { color: var(--ink); }
.post--question .post__headline--xl { max-width: calc(900 * var(--u)); }
.post__mark { width: calc(96 * var(--u)); max-width: none; }

/* Feed grid */
.feed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.feed__photo { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

@media (max-width: 767px) {
  .feed { gap: 4px; }
}

/* Graphic-language sheet (positions match the Figma frame, 712 × 460) */
.sheet {
  position: relative;
  aspect-ratio: 712 / 460;
  overflow: hidden;
  container-type: inline-size;
  background: var(--ivory);
  border: 1px solid var(--line);
}
.sheet__line { position: absolute; background: var(--line); }
.sheet__line--v1 { left: 33.15%; top: 13.7%; width: 1px; height: 86.3%; }
.sheet__line--v2 { left: 66.43%; top: 0; width: 1px; height: 13.7%; }
.sheet__line--h { left: 0; top: 13.7%; width: 100%; height: 1px; }
.sheet__photo {
  position: absolute;
  left: 66.43%;
  top: 13.7%;
  width: 33.43%;
  height: 91.3%;
  max-width: none;
  object-fit: cover;
}
.sheet__label {
  position: absolute;
  top: 5%;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 1.685cqw;
  line-height: 1.333;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--plum);
}
.sheet__label--1 { left: 3.23%; }
.sheet__label--2 { left: 36.52%; }
.sheet__label--3 { left: 69.8%; color: var(--text-muted); }
.sheet__num {
  position: absolute;
  left: 2.11%;
  top: 18.04%;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 28.09cqw;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--plum);
}
.sheet__circle { position: absolute; left: 42%; top: 20.65%; width: 19.66%; max-width: none; }
.sheet__rule { position: absolute; left: 3.23%; top: 68.91%; width: 6.74%; height: 0.42cqw; background: var(--orange); }
.sheet__headline {
  position: absolute;
  left: 3.23%;
  top: 73.26%;
  width: 56.18%;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 5.056cqw;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--plum);
}
.sheet__small {
  position: absolute;
  left: 3.23%;
  top: 91.09%;
  font-size: 1.826cqw;
  line-height: 1.54;
  white-space: pre;
  color: var(--text-muted);
}

/* Five-second test */
.five {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 56px;
  background: var(--sand);
}
.five h3 { max-width: 900px; }
.five__list li {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid rgba(23, 21, 19, 0.15);
}
.five__num { flex: none; font-size: 13px; line-height: 20px; }
.five__q {
  font-family: var(--font-display);
  font-size: var(--fs-heading-m);
  line-height: 1.25;
  letter-spacing: -0.005em;
}

@media (max-width: 767px) {
  .five { gap: 28px; padding: 28px 20px; }
  .five__list li { gap: 14px; padding: 14px 0; }
}

/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 800fr) minmax(0, 640fr);
  height: clamp(720px, 100svh, 1000px);
  background: var(--plum);
  color: var(--ivory);
}
.hero__intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 64px 56px var(--sidebar-left);
  container-type: inline-size;
}
.hero__bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.hero__logo { width: 190px; }
.hero__title { display: flex; flex-direction: column; gap: 32px; }
.hero__h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(56px, 20.69cqi, 144px);
  line-height: 0.92;
  letter-spacing: -0.025em;
}
.hero__lede { max-width: 500px; }
.hero__cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  padding-top: 16px;
  text-decoration: none;
}
.hero__portrait {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 0 40px 56px;
  overflow: hidden;
}
.hero__portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.hero__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(23, 21, 19, 0) 55%, rgba(23, 21, 19, 0.55));
}
.hero__portrait figcaption { position: relative; z-index: 1; }

@media (max-width: 1023px) {
  .hero { height: auto; min-height: 640px; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }
  .hero__bar { display: none; }
  .hero__intro { justify-content: flex-end; padding: calc(var(--topbar-h) + 96px) 40px 48px; }
}

@media (max-width: 767px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero__intro { padding: calc(var(--topbar-h) + 56px) 20px 40px; }
  .hero__title { gap: 24px; }
  .hero__portrait { aspect-ratio: 390 / 440; padding: 0 20px 24px; }
}

/* ---------- Top bar (below 1024 px) ---------- */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: space-between;
  height: var(--topbar-h);
  padding: 0 var(--pad-r) 0 var(--pad-l);
  background: var(--ivory);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.topbar.is-on-dark { background: var(--plum); border-bottom-color: var(--line-inverse); color: var(--ivory); }
.topbar__logo img { width: 132px; }
.topbar__menu { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; }

@media (max-width: 1023px) {
  .topbar { display: flex; }
}

/* Logo that swaps to the inverted version over dark sections */
.logo-swap { display: block; text-decoration: none; }
.logo-swap__dark { display: none; }
.is-on-dark .logo-swap__light { display: none; }
.is-on-dark .logo-swap__dark { display: block; }

/* ---------- Sidebar (1024 px and up) ---------- */

.sidebar { display: none; }

@media (min-width: 1024px) {
  .sidebar {
    position: fixed;
    top: 40px;
    left: var(--sidebar-left);
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 220px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  }
  .past-hero .sidebar { opacity: 1; visibility: visible; transform: none; }
  .past-hero.at-footer .sidebar { opacity: 0; visibility: hidden; transform: translateY(-8px); }
}

.sidebar__logo img { width: 168px; }
.sidebar__label { margin-bottom: 12px; color: var(--text-muted); }
.nav-list { display: flex; flex-direction: column; gap: 6px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.nav-item__arrow { color: var(--orange); opacity: 0; transition: opacity 0.2s ease; }
.nav-item__num { width: 18px; font-size: 13px; line-height: 20px; }
.nav-item:hover { color: var(--ink); }
.nav-item.is-active { color: var(--ink); }
.nav-item.is-active .nav-item__label { font-weight: 500; }
.nav-item.is-active .nav-item__num { color: var(--plum); }
.nav-item.is-active .nav-item__arrow { opacity: 1; }
.sidebar__download {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s ease;
}
.sidebar__version { color: var(--text-muted); transition: color 0.2s ease; }

/* Sidebar over Plum sections */
.sidebar__label.is-on-dark,
.sidebar__version.is-on-dark,
.nav-item.is-on-dark { color: var(--text-muted-inverse); }
.nav-item.is-on-dark:hover,
.nav-item.is-on-dark.is-active,
.nav-item.is-on-dark.is-active .nav-item__num,
.sidebar__download.is-on-dark { color: var(--ivory); }

/* ---------- Contents menu (below 1024 px) ---------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--ivory);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; }
.menu__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  height: var(--topbar-h);
  padding: 0 var(--pad-r) 0 var(--pad-l);
  border-bottom: 1px solid var(--line);
}
.menu__bar img { width: 132px; }
.menu__close { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; }
.menu__nav { padding: 32px var(--pad-r) 0 var(--pad-l); }
.menu-list { margin-top: 16px; }
.menu-list a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  color: var(--plum);
  text-decoration: none;
}
.menu-list__num { flex: none; width: 20px; font-size: 13px; line-height: 20px; color: var(--text-muted); }
.menu-list__label {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.menu-list__arrow { color: var(--orange); opacity: 0; }
.menu-list a.is-active .menu-list__num { color: var(--plum); }
.menu-list a.is-active .menu-list__arrow { opacity: 1; }
.menu__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 32px var(--pad-r) 40px var(--pad-l);
}
body.menu-open { overflow: hidden; }

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

.footer { background: var(--plum); color: var(--ivory); }
.footer__inner {
  display: flex;
  flex-direction: column;
  gap: 64px;
  max-width: 1440px;
  margin-inline: auto;
  padding: 40px;
}
.footer__top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 16px 40px; }
.footer__links a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.footer__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer__logo { width: 100%; }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line-inverse);
}

@media (max-width: 767px) {
  .footer__inner { gap: 40px; padding: 32px 20px; }
  .footer__links { gap: 12px 24px; }
}

/* ---------- Toast (copy confirmation) ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 70;
  padding: 14px 18px;
  background: var(--ink);
  color: var(--ivory);
  font: 500 12px/16px var(--font-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 16px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Colour helpers (last, so they win over component defaults) ---------- */

.c-plum { color: var(--plum); }
.c-ink { color: var(--ink); }
.c-ivory { color: var(--ivory); }
.c-orange { color: var(--orange); }
.c-muted { color: var(--text-muted); }
.c-muted-inv { color: var(--text-muted-inverse); }

.bg-ivory { background-color: var(--ivory); }
.bg-plum { background-color: var(--plum); }
.bg-ink { background-color: var(--ink); }
.bg-orange { background-color: var(--orange); }
.bg-sand { background-color: var(--sand); }
.bg-lilac { background-color: var(--lilac); }