/* ==========================================================================
   Typography: the site's one type system, then the layout rhythm around it.
   Every size, line height, weight and tracking value comes from tokens.css.

   styles.css (the compiled Tailwind build) keeps all of its rules inside
   cascade layers. These rules are not layered, so they settle the type
   whatever size, weight or tracking utilities the markup carries. Heading
   levels carry meaning, not size: a heading looks the way its role says,
   and no level is changed to get a different size.

   Families: Outfit for headings and the text wordmark; DM Sans for
   everything else.
   ========================================================================== */

/* ---------- base: body copy ---------- */
body,
:where(button, input, select, textarea) {
  font-family: var(--sj-font-body);
  font-size: var(--sj-body);
  font-weight: 400;
  line-height: var(--sj-lh-body);
  letter-spacing: normal;
}

/* ---------- the template's size utilities, mapped onto the roles ----------
   Each utility in the markup resolves to one role. The template's large
   paragraph size marks section copy, which is introductory text; card copy
   is body copy, whatever size the template gave it. */
.text-base,
.text-\[15px\],
.md\:text-base {
  font-size: var(--sj-body);
  line-height: var(--sj-lh-body);
}
.text-lg,
.md\:text-lg {
  font-size: var(--sj-intro);
  line-height: var(--sj-lh-body);
}
.text-xs,
.text-sm,
.text-\[14px\],
.md\:text-sm {
  font-size: var(--sj-secondary);
  line-height: var(--sj-lh-body);
}
.text-xs.md\:text-base,
.text-sm.md\:text-base,
main :is(p, span).leading-relaxed:is(.text-xs, .text-sm) {
  font-size: var(--sj-body);
}
.text-sm.md\:text-lg {
  font-size: var(--sj-intro);
}
.text-\[10px\],
.text-\[11px\] {
  font-size: var(--sj-caption);
  line-height: var(--sj-lh-caption);
}

/* ---------- captions and small print ---------- */
figcaption,
.sj-caption {
  font-size: var(--sj-caption);
  line-height: var(--sj-lh-caption);
}

/* ---------- eyebrows and short labels ----------
   Uppercase is for short labels only, never sentences. */
[class*="uppercase"],
.sj-hero__back a,
.sj-wordmark-descriptor,
.sj-postnom {
  font-family: var(--sj-font-body);
  font-size: var(--sj-label);
  font-weight: 600;
  line-height: var(--sj-lh-label);
  letter-spacing: var(--sj-track-label);
}
.sj-hero__back a { text-transform: uppercase; }

/* ---------- headings ---------- */
:where(.font-serif),
h1, h2, h3, h4, h5, h6 {
  font-family: var(--sj-font-heading);
}
h1 {
  font-size: var(--sj-h1);
  font-weight: 700;
  line-height: var(--sj-lh-h1);
  letter-spacing: var(--sj-track-head);
}
/* the banner heading keeps its extra impact over a standard H1 */
.sj-hero h1 { font-size: var(--sj-h1-hero); }
h2 {
  font-size: var(--sj-h2);
  font-weight: 600;
  line-height: var(--sj-lh-h2);
  letter-spacing: var(--sj-track-head);
}
h3,
.sj-post-card__title {
  font-size: var(--sj-h3);
  font-weight: 600;
  line-height: var(--sj-lh-h3);
  letter-spacing: var(--sj-track-h3);
}
/* a heading that wraps splits evenly rather than leaving one word behind,
   as the banner and closing headings already do */
h2, h3 { text-wrap: balance; }
h4, h5, h6 {
  font-weight: 600;
  line-height: var(--sj-lh-sub);
  letter-spacing: var(--sj-track-h3);
}
h4 { font-size: var(--sj-h4); }
h5 { font-size: var(--sj-h5); }
h6 { font-size: var(--sj-h6); }
/* the one display line inside a blog post takes the section heading size */
.sj-article__body .sj-article__shout {
  font-size: var(--sj-h2);
  line-height: var(--sj-lh-h2);
}

/* ---------- banner subheading and supporting copy ---------- */
.editorial-subheading,
.sj-subheading {
  font-family: var(--sj-font-body);
  font-size: var(--sj-intro);
  font-weight: 500;
  line-height: var(--sj-lh-sub);
  letter-spacing: normal;
}
.sj-hero__body {
  font-size: var(--sj-body);
  line-height: var(--sj-lh-body);
}
/* the closing card's line introduces it, like a section's introduction */
.sj-closing__sub {
  font-size: var(--sj-intro);
  line-height: var(--sj-lh-body);
}

/* ---------- testimonials ----------
   DM Sans one step above body copy. The quote's opening mark hangs outside
   the text edge, and the attribution sits apart from it: the name at 600,
   then the context as a short label. No rules or colours are added.
   .sj-quote marks the partner quotes inside the Partnerships case studies. */
blockquote,
blockquote > p:first-child,
.sj-quote,
.sj-quote > p:first-child {
  font-family: var(--sj-font-body);
  font-size: var(--sj-quote);
  font-style: normal;
  font-weight: 400;
  line-height: var(--sj-lh-body);
  letter-spacing: normal;
}
blockquote > p:first-child,
blockquote:not(:has(> p)),
.sj-quote > p:first-child {
  text-indent: -.42em;
}
blockquote footer {
  display: grid;
  gap: .25rem;
  margin-top: 1.25rem;
}
blockquote footer > p { margin: 0; }
blockquote footer > p:first-child,
.sj-quote > p + p {
  font-size: var(--sj-secondary);
  font-style: normal;
  font-weight: 400;
  line-height: var(--sj-lh-caption);
}
blockquote footer > p:first-child,
.sj-quote > p.font-bold {
  font-weight: 600;
}
.sj-quote > p + p { margin-top: 1rem; }

/* ---------- form labels and inputs ----------
   Labels and the consent wording stay at body size; inputs never drop
   below 16px, so phones do not zoom on focus. */
.sj-form label {
  font-family: var(--sj-font-body);
  font-size: var(--sj-body);
  font-weight: 600;
  line-height: var(--sj-lh-body);
}
.sj-form input:not([type="checkbox"]),
.sj-form select,
.sj-form textarea {
  min-height: var(--sj-control-min-height);
  font-family: var(--sj-font-body);
  font-size: var(--sj-ui);
}
.sj-form textarea { min-height: 120px; }

/* ---------- navigation ----------
   "header .container > nav" is the desktop row; the menu panel has its own
   nav, outside the container, styled under #mobile-nav. */
header .container > nav a {
  font-family: var(--sj-font-body);
  font-size: var(--sj-nav);
  font-weight: 600;
  line-height: var(--sj-lh-label);
  letter-spacing: var(--sj-track-nav);
  text-transform: uppercase;
}
#mobile-nav a.font-serif {
  font-family: var(--sj-font-body);
  font-size: var(--sj-nav-menu);
  font-weight: 600;
  line-height: var(--sj-lh-label);
  letter-spacing: var(--sj-track-nav);
  text-transform: uppercase;
}

/* ---------- buttons ---------- */
.sj-btn {
  font-family: var(--sj-font-body);
  font-size: var(--sj-button);
  font-weight: 600;
  line-height: var(--sj-lh-ui);
  letter-spacing: normal;
}
/* the header and menu enquiry buttons are set in capitals, like the menu */
header .sj-btn,
#mobile-nav .sj-btn {
  text-transform: uppercase;
}
header .sj-btn,
#mobile-nav .sj-btn,
.sj-btn.uppercase {
  letter-spacing: var(--sj-track-nav);
}

/* ---------- timeline years and figures ---------- */
.sj-figure {
  font-family: var(--sj-font-body);
  font-size: var(--sj-figure);
  font-weight: 700;
  line-height: var(--sj-lh-figure);
  letter-spacing: normal;
}

/* ---------- text wordmark ---------- */
.sj-wordmark {
  font-family: var(--sj-font-heading);
  font-size: var(--sj-mark);
  font-weight: 700;
  line-height: var(--sj-lh-mark);
  letter-spacing: var(--sj-track-mark);
  text-transform: uppercase;
  white-space: nowrap;           /* the name stays on one line */
}
/* Below 360px the header cannot hold the 20px wordmark, the post-nominals and
   the menu button on one row, and the type does not shrink below its minimum.
   The post-nominals step out of the header there; they still follow her name
   in the footer on every page. */
@media (max-width: 359px) {
  header .sj-postnom { display: none; }
}

/* ---------- footer column headings ----------
   Their own small style, in capitals (20 Oct), so they never compete with
   the page headings above. */
footer :is(h2, h3, h4) {
  font-family: var(--sj-font-heading);
  font-size: var(--sj-footer-head);
  font-weight: 600;
  line-height: var(--sj-lh-label);
  letter-spacing: var(--sj-track-label);
  text-transform: uppercase;
}

/* ---------- reading measure ----------
   Long-form paragraphs stop at about 55-70 characters a line. Narrower
   cards and columns simply use the width they have. */
:where(main) p { max-width: var(--sj-measure); }
:where(main) .sj-caption p,
:where(main) [class*="text-center"] p,
:where(main) p[class*="uppercase"] { max-width: none; }

/* ==========================================================================
   Layout rhythm
   ========================================================================== */

/* The descriptor is wider than the name itself and competes with the menu
   button on narrow screens, so it is dropped rather than shrinking the
   wordmark below its 20px minimum. */
@media (max-width: 560px) {
  .sj-wordmark-descriptor { display: none; }
}

.container {
  max-width: var(--sj-content-max);
  margin-inline: auto;
  padding-inline: var(--sj-gutter);
}
@media (max-width: 767px) {
  .container { padding-inline: var(--sj-gutter-mobile); }
}
@media (max-width: 360px) {
  .container { padding-inline: 16px; }
}

/* ---------- responsive visibility ----------
   .sj-btn sets display:inline-flex, which would otherwise defeat the
   responsive `hidden` / `sm:inline-flex` utilities on the header action.
   The mobile menu carries the same enquiry action below that breakpoint. */
.sj-btn.hidden { display: none; }
@media (min-width: 40rem) {
  .sj-btn.hidden.sm\:inline-flex { display: inline-flex; }
}

/* ---------- controls meet the minimum target ---------- */
.sj-btn {
  min-height: var(--sj-control-min-height);
  padding: 12px 24px;
  box-sizing: border-box;
}
/* The compact variant keeps tighter horizontal padding for the navigation bar,
   but not at the cost of the minimum target height (guidelines 5.1: 48px). */
.sj-btn-sm { min-height: var(--sj-control-min-height); padding: 10px 18px; }

/* ---------- focus ---------- */
:focus-visible {
  outline-width: var(--sj-focus-width);
  outline-offset: var(--sj-focus-offset);
}

/* ---------- icons: consistent stroke and interface size ---------- */
svg { stroke-width: 2; }
:where(nav, .sj-btn, footer) svg { width: 24px; height: 24px; }
.sj-btn svg { width: 20px; height: 20px; }

/* ---------- motion ---------- */
a, button, .sj-btn, .sj-type-card { transition-duration: 150ms; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- section and card rhythm ----------
   Every value is a token (tokens.css), so phones take their own set:
   sections 88/56px, banners 96/56px, closing call to action 72/48px,
   cards 28/20px with 24/16px between them. */
.sj-section {
  padding-block: var(--sj-section-y);
}
.sj-section-hero {
  padding-block: var(--sj-hero-y);
}

.sj-card {
  padding: var(--sj-card-pad);
}

/* A section's first and last pieces add nothing to its padding, so the gap
   between two sections is only their padding (22 October). */
.sj-section > .container > :first-child { margin-top: 0; }
.sj-section > .container > :last-child { margin-bottom: 0; }
/* a section holding only a quote is compact: the Story pull quotes and the
   Speaking testimonial */
.sj-section:has(> .container > :only-child:is(.sj-pullquote, .sj-testimonial)) {
  padding-block: var(--sj-section-y-compact);
}

/* ---------- the text rhythm inside a section ----------
   Eyebrow to heading 12px; heading to its description 20/16px; paragraph
   to paragraph, and text to its action, 20/16px; a heading block to the
   content it introduces 40/28px. These settle the spacing that the
   template's utilities set differently from page to page. */
main section:not(.sj-hero) [class*="uppercase"]:has(+ h2) {
  display: block;
  margin-block: 0 var(--sj-gap-label);
}
main section:not(.sj-hero) [class*="uppercase"] + h2 { margin-top: 0; }
main section:not(.sj-hero) h2:has(+ :is(p, ul, ol):not([class*="uppercase"])) { margin-bottom: var(--sj-gap-heading); }
main section:not(.sj-hero) h2 + :is(p, ul, ol):not([class*="uppercase"]) { margin-top: 0; padding-top: 0; }
.sj-hero .sj-hero__copy > h1 { margin-bottom: var(--sj-gap-heading); }
.sj-hero .sj-hero__copy > h1 + p { margin-top: 0; }
/* long-form text set straight in the container (Privacy) */
.sj-section .container.max-w-3xl > :is(p, ul):not(:last-child) { margin-bottom: var(--sj-gap-para); }
/* the introduction under a section heading is introductory text, whatever
   size the template gave it (Partnerships and Media causes and themes) */
.sj-section .container > div:has(> h2) > h2 + p:not([class*="uppercase"]) { font-size: var(--sj-intro); }
/* a heading block (eyebrow, heading, introduction) above the content it leads into */
.sj-section .container > div:has(> h2):not(:has(img, ul, ol, article, form, blockquote, figure, .sj-card, .sj-btn, .sj-link-arrow)):has(+ *) {
  margin-bottom: var(--sj-gap-content);
}

/* <picture> must not introduce a layout box: the img keeps its own classes
   and positioning exactly as before the responsive rewrite. */
picture { display: contents; }

/* ---------- navigation breakpoint ----------
   The guide's rule is to collapse navigation rather than shrink the wordmark,
   so the menu is used until the row genuinely fits. */
@media (max-width: 1279px) {
  header .container > nav { display: none; }
  #nav-toggle { display: inline-flex; }
  /* the panel's lg:hidden would otherwise keep it shut from 1024px, where
     the menu button still shows */
  #mobile-nav:not(.hidden) { display: block; }
}
@media (min-width: 1280px) {
  header .container > nav { display: flex; }
  #nav-toggle { display: none; }
  #mobile-nav { display: none; }
}

/* Keep the wordmark block from being squeezed by the nav row. */
header .container > a:first-child { flex: 0 0 auto; }
header .container > nav { flex: 1 1 auto; justify-content: flex-end; gap: clamp(1rem, 1.6vw, 2rem); }
header .container > div:last-child { flex: 0 0 auto; }
header .container > nav { flex-wrap: nowrap; }
header .container > nav a { white-space: nowrap; }
header .container { flex-wrap: nowrap; }

/* The descriptor is optional. It is shown only where the header row has room
   for it alongside the full navigation at the approved sizes. */
@media (max-width: 1499px) {
  .sj-wordmark-descriptor { display: none; }
}
@media (max-width: 1499px) {
  header .container > nav { gap: .875rem; }
}

/* Separate the navigation from the action group so the last link never runs
   into the enquiry button. */
header .container { gap: 1.5rem; }
@media (max-width: 1499px) {
  header .container { gap: .75rem; }
  header .container > nav { gap: .75rem; }
}

/* ---------- post-nominals ----------
   "OAM OLY" is an honorific suffix, not part of the name: it sits smaller,
   in Deep teal, and never breaks across lines. */
.sj-postnominal {
  font-size: .42em;
  font-weight: 600;
  letter-spacing: .06em;
  white-space: nowrap;
  color: var(--sj-text-link);
  vertical-align: .18em;
}

/* Hero standfirst carries the proposition on its own, so it gets room to
   breathe rather than competing with a second paragraph. */
@media (max-width: 1023px) {
  .sj-hero-editorial__copy { padding-top: var(--sj-space-6); }
}


/* enquiry type tiles are labels at body size, but keep a control's line height */
.sj-form .sj-type-card { line-height: var(--sj-lh-ui); }

/* the name in the footer is the same text wordmark, at the wordmark size */
footer .font-serif.text-2xl {
  font-size: var(--sj-mark);
  line-height: var(--sj-lh-mark);
}

/* show titles inside the Media image placeholders are card headings */
.sj-media-still__title {
  font-size: var(--sj-h3);
  line-height: var(--sj-lh-h3);
  letter-spacing: var(--sj-track-h3);
}

/* a phone number never breaks across lines */
a[href^="tel:"] { white-space: nowrap; }

/* timeline: where the year sits above its entry (phones), it takes the width
   it needs, so a range such as 2020–2021 stays on one line */
@media (max-width: 767px) {
  .sj-card > .w-24:has(> .sj-figure) { width: auto; }
}

/* a figure beside its description (Partnerships case studies) keeps to one line */
.flex > .sj-figure { flex-shrink: 0; white-space: nowrap; }

/* a pull quote set directly in its blockquote keeps the reading measure */
:where(main) blockquote:not(:has(> p)) { max-width: var(--sj-measure); }