@layer tokens, base, layout, text, components, pages, utilities;

/* fds-tokens.css */
@layer tokens {
/*
 * FDS tokens. The only file that knows concrete values; everything else
 * refers to these. Rules: docs/fds.md, section 3.
 */

:root {
  /* Palette: three colours, nothing else is ever introduced. */
  --fds-blue: #0056d3;
  --fds-orange: #ff6900;
  --fds-white: #ffffff;

  /* Tints: the palette at a given opacity, nothing else. */
  --fds-blue-50: color-mix(in srgb, var(--fds-blue) 50%, transparent);
  --fds-blue-10: color-mix(in srgb, var(--fds-blue) 10%, transparent);
  --fds-orange-50: color-mix(in srgb, var(--fds-orange) 50%, transparent);
  --fds-orange-10: color-mix(in srgb, var(--fds-orange) 10%, transparent);
  --fds-white-70: color-mix(in srgb, var(--fds-white) 70%, transparent);

  /* Semantic colours: components use only these. */
  --fds-text: var(--fds-blue);
  --fds-text-muted: var(--fds-blue-50);
  --fds-accent: var(--fds-orange);
  --fds-accent-muted: var(--fds-orange-50);
  --fds-bg: var(--fds-white);
  --fds-surface: var(--fds-blue-10);
  --fds-surface-accent: var(--fds-orange-10);
  --fds-line: var(--fds-blue-10);
  --fds-inverse-bg: var(--fds-blue);
  --fds-inverse-text: var(--fds-white);
  --fds-shadow: rgb(0 0 0 / 0.16);

  /* Radius scale, in clothing sizes; M is the project card. Mobile changes
     live on the components that need them. */
  --fds-radius-s: 1em;
  --fds-radius-m: 1.4em;
  --fds-radius-l: 2em;
  --fds-radius-pill: 100em;

  /* Motion. */
  --fds-duration-fast: 0.2s;
  --fds-duration-slow: 0.3s;
  --fds-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Stacking. */
  --fds-z-reveal: 0;
  --fds-z-sheet: 1;
  --fds-z-sound: 3;
  --fds-z-tip: 1000;
  --fds-z-header: 1100;
  --fds-z-menu: 1200;
  --fds-z-menu-top: 1300;

  /* Type ladder: H1–H4, text, caption. From the root, so a style looks the
     same wherever it sits. Headings shrink on mobile, text and caption do not. */
  --fds-type-h1: 3rem;
  --fds-type-h2: 2rem;
  --fds-type-h3: 1.5rem;
  --fds-type-h4: 1.25rem;
  --fds-type-text: 1rem;
  --fds-type-caption: 0.75rem;
  --fds-type-h1-leading: 1;
  --fds-type-h2-leading: 1.05;
  --fds-type-h3-leading: 1.15;
  --fds-type-h4-leading: 1.2;
  --fds-type-text-leading: 1.3;
  --fds-type-caption-leading: 1.25;

  /* Component sizes: the two chips and the header logo. */
  --fds-size-chip-m: 0.8rem;
  --fds-size-chip-s: 0.7rem;
  --fds-size-logo: clamp(3.4em, 13.2vw, 10em);
  --fds-size-logo-folded: 3.5em; /* the header folded into the burger */

  /* Weights: two, named as in type. */
  --fds-weight-regular: 400;
  --fds-weight-medium: 500;

  /* Spacing scale, in clothing sizes, from the root. New steps only at the
     ends (3xs, 2xl), never between two existing ones. */
  --fds-space-2xs: 0.25rem;
  --fds-space-xs: 0.5rem;
  --fds-space-s: 1rem;
  --fds-space-m: 2rem;
  --fds-space-l: 3rem;
  --fds-space-xl: 5rem;

  /* Layout. */
  --fds-gutter: var(--fds-space-s);
  --fds-reveal-height: clamp(220px, 28vw, 380px);
}

@media (width <= 768px) {
  :root {
    --fds-type-h1: 2.3rem;
    --fds-type-h2: 1.8rem;
    --fds-type-h3: 1.3rem;
    --fds-type-h4: 1.1rem;
    --fds-size-chip-m: 1rem;
    --fds-size-chip-s: 0.9rem;
    --fds-gutter: var(--fds-space-xs);
    --fds-reveal-height: 14em;
  }
}
}

/* fds-normalize.css */
@layer base {
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

 html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/**
 * IDS additional resets
 */

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

  &:focus:not(:focus-visible) {
    outline: none;
  }
}

img {
  display: block;
  width: 100%;
}
}

/* fds-settings.css */
@layer base {
* {
  box-sizing: border-box;
}

/* Fonts */

@font-face {
  font-family: "Sona";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Sona.woff2") format("woff2");
}

body {
  color: var(--fds-text);
  background-color: var(--fds-bg);
  font-family: "Sona", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
}

/* Density */

:root {
  --fds-density: 1.3;
}

body {
  font-size: 1em;
  line-height: var(--fds-density);
}

/*
 * Base size. Everything is in em/rem of it, so the page scales as a whole.
 * Phone layout: 14px at 320, growing as in 1.0 but held at 20px from 469px,
 * so a tablet in the phone layout gets no giant text. Desktop layout: 11px
 * at 768 to 22.5px at 1500 as in 1.0, but never below 14px, so tablets and
 * phones held sideways stay readable; from 959px on nothing changed.
 */
html {
  font-size: clamp(14px, calc(14px + 18 * (100vw - 320px) / 448), 20px);

  @media (width > 768px) {
    font-size: clamp(14px, calc(11px + 11.5 * (100vw - 768px) / 732), 22.5px);
  }
}

/* Smooth scroll for anchored links */

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

/* fds-transition.css */
@layer base {
html.is-page-enter-prep body {
  opacity: 0;
  transform: translateY(0.35em);
}

html.is-page-entering body {
  animation: fd-page-enter var(--fds-duration-slow) var(--fds-ease) both;
}

html.is-page-leaving body {
  animation: fd-page-leave var(--fds-duration-slow) var(--fds-ease) both;
  pointer-events: none;
}

@keyframes fd-page-enter {
  from {
    opacity: 0;
    transform: translateY(0.35em);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fd-page-leave {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-0.25em);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.is-page-enter-prep body,
  html.is-page-entering body,
  html.is-page-leaving body {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: fd-vt-out var(--fds-duration-slow) var(--fds-ease) both;
}

::view-transition-new(root) {
  animation: fd-vt-in var(--fds-duration-slow) var(--fds-ease) both;
}

@keyframes fd-vt-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fd-vt-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}
}

/* fds-layout.css */
@layer layout {
/*
 * Spacer: an empty div that sets the vertical rhythm between blocks.
 * Without a modifier it is M; --mobile-s takes S on mobile.
 */
.fds-space {
  height: var(--fds-space-m);
}

.fds-space--2xs {
  height: var(--fds-space-2xs);
}

.fds-space--xs {
  height: var(--fds-space-xs);
}

.fds-space--s {
  height: var(--fds-space-s);
}

.fds-space--l {
  height: var(--fds-space-l);
}

.fds-space--xl {
  height: var(--fds-space-xl);
}

@media (width <= 768px) {
  .fds-space--mobile-s {
    height: var(--fds-space-s);
  }
}

/* Wrap: a centred column. Without a modifier it is M (70%). */
.fds-wrap {
  position: relative;
  width: 70%;
  margin: 0 auto;

  @media (width <= 768px) {
    width: 100%;
    padding: 0 var(--fds-gutter);
  }

  &.fds-wrap--l {
    width: 100%;
    padding: 0 var(--fds-gutter);
  }

  &.fds-wrap--s {
    width: 60%;
    padding: 0 var(--fds-gutter);

    @media (width <= 768px) {
      width: 100%;
    }
  }

  &.fds-wrap--xs {
    width: 50%;
    padding: 0 var(--fds-gutter);

    @media (width <= 768px) {
      width: 100%;
    }
  }
}

html,
body {
  min-height: 100%;
}

body {
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/*
 * The sheet: main and the footer. position: relative + z-index: 1 puts
 * both one paint layer above .fds-reveal (position: fixed,
 * z-index: 0 — see css/fds-footer.css), and background-color makes
 * them genuinely opaque boxes rather than relying on the body/html
 * "canvas background" fallback (when html has no background of its own,
 * the spec paints body's white as the canvas — a layer further back than
 * any positioned element, so it would never block that panel from showing
 * through). Together these keep the panel hidden behind the sheet's
 * entire content — every paragraph, every gap between lines — until
 * js/footer-reveal.js lifts it past the end of the page.
 */
main {
  position: relative;
  z-index: var(--fds-z-sheet);
  flex: 1 0 auto;
  background-color: var(--fds-bg);
}

[data-fds-footer] {
  position: relative;
  z-index: var(--fds-z-sheet);
  margin-top: auto;
}

/*
 * Grid. Columns and gaps are modifiers; on mobile four columns become
 * two, three and two become one unless --mobile-2 says otherwise. Items span
 * one column, --l two, --xl all four.
 */
.fds-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.fds-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fds-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Gaps: any step of the spacing scale, both ways or one way. */
.fds-grid--gap-2xs {
  gap: var(--fds-space-2xs);
}

.fds-grid--gap-xs {
  gap: var(--fds-space-xs);
}

.fds-grid--gap-s {
  gap: var(--fds-space-s);
}

.fds-grid--gap-m {
  gap: var(--fds-space-m);
}

.fds-grid--gap-l {
  gap: var(--fds-space-l);
}

.fds-grid--gap-xl {
  gap: var(--fds-space-xl);
}

.fds-grid--row-gap-2xs {
  row-gap: var(--fds-space-2xs);
}

.fds-grid--row-gap-xs {
  row-gap: var(--fds-space-xs);
}

.fds-grid--row-gap-s {
  row-gap: var(--fds-space-s);
}

.fds-grid--row-gap-m {
  row-gap: var(--fds-space-m);
}

.fds-grid--row-gap-l {
  row-gap: var(--fds-space-l);
}

.fds-grid--row-gap-xl {
  row-gap: var(--fds-space-xl);
}

.fds-grid--col-gap-2xs {
  column-gap: var(--fds-space-2xs);
}

.fds-grid--col-gap-xs {
  column-gap: var(--fds-space-xs);
}

.fds-grid--col-gap-s {
  column-gap: var(--fds-space-s);
}

.fds-grid--col-gap-m {
  column-gap: var(--fds-space-m);
}

.fds-grid--col-gap-l {
  column-gap: var(--fds-space-l);
}

.fds-grid--col-gap-xl {
  column-gap: var(--fds-space-xl);
}

.fds-grid--top {
  align-items: start;
}

.fds-grid__item {
  box-sizing: border-box;
  min-width: 0;
  grid-column: span 1;
}

.fds-grid__item--l {
  grid-column: span 2;
}

.fds-grid__item--xl {
  grid-column: span 4;
}

/* Two photos side by side. */
.fds-photo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--fds-radius-l);
  object-fit: cover;
}

@media (width <= 768px) {
  .fds-grid,
  .fds-grid--2,
  .fds-grid--3 {
    grid-template-columns: 1fr;
  }

  .fds-grid:not(.fds-grid--2):not(.fds-grid--3),
  .fds-grid--mobile-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fds-grid__item,
  .fds-grid__item--l,
  .fds-grid__item--xl {
    grid-column: span 1;
  }

  .fds-grid:not(.fds-grid--2):not(.fds-grid--3) .fds-grid__item--l,
  .fds-grid:not(.fds-grid--2):not(.fds-grid--3) .fds-grid__item--xl {
    grid-column: span 2;
  }

  .fds-photo {
    border-radius: var(--fds-radius-s);
  }
}

/* A narrower text column inside a wrap. */
.fds-wrap__text {
  width: 50%;
  max-width: 100%;
  box-sizing: border-box;
}

.fds-wrap__text--l {
  width: 72%;
}

.fds-wrap {
  overflow-wrap: anywhere;
}

main {
  width: 100%;
  max-width: 100%;
}

@media (width <= 768px) {
  .fds-wrap__text,
  .fds-wrap__text--l {
    width: 100%;
  }

  .fds-wrap__text {
    margin-bottom: var(--fds-space-l);
  }

  .fds-wrap,
  .fds-wrap--l,
  .fds-wrap--s,
  .fds-wrap--xs {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}
}

/* fds-text.css */
@layer text {
p {
  margin-top: 0;
  margin-bottom: calc(var(--fds-density) * 0.4em);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

/*
 * The type ladder: H1–H4, text, caption. The tag says what a thing is,
 * the class says how it looks; a bare h1–h4 looks like its level. A
 * heading's bottom margin follows its look, a paragraph keeps its own
 * whatever style it is set in.
 */
h1,
.fds-h1 {
  font-size: var(--fds-type-h1);
  line-height: var(--fds-type-h1-leading);
  font-weight: var(--fds-weight-medium);
}

h2,
.fds-h2 {
  font-size: var(--fds-type-h2);
  line-height: var(--fds-type-h2-leading);
  font-weight: var(--fds-weight-medium);
}

h3,
.fds-h3 {
  font-size: var(--fds-type-h3);
  line-height: var(--fds-type-h3-leading);
  font-weight: var(--fds-weight-medium);
}

h4,
.fds-h4 {
  font-size: var(--fds-type-h4);
  line-height: var(--fds-type-h4-leading);
  font-weight: var(--fds-weight-medium);
}

h5,
h6,
.fds-text {
  font-size: var(--fds-type-text);
  line-height: var(--fds-type-text-leading);
}

h5,
h6 {
  font-weight: var(--fds-weight-medium);
}

.fds-caption {
  font-size: var(--fds-type-caption);
  line-height: var(--fds-type-caption-leading);
}

h1,
:is(h1, h2, h3, h4).fds-h1,
h2,
:is(h1, h2, h3, h4).fds-h2 {
  margin-bottom: 0.4em;
}

h3,
:is(h1, h2, h3, h4).fds-h3 {
  margin-bottom: 0.3em;
}

h4,
:is(h1, h2, h3, h4).fds-h4,
h5,
h6 {
  margin-bottom: 0.5em;
}

/* Two weights only: regular and medium. Headings are medium; text and caption
   are regular unless they take --medium. */
.fds-text--regular,
.fds-caption--regular {
  font-weight: var(--fds-weight-regular);
}

.fds-text--medium,
.fds-caption--medium {
  font-weight: var(--fds-weight-medium);
}

strong,
b {
  font-weight: var(--fds-weight-medium);
}

ul,
ol {
  margin: 0 0 calc(var(--fds-density) * 0.75em) 0;
  padding: 0;

  & li {
    position: relative;
    margin-bottom: calc(var(--fds-density) * 0.5em);
  }
}

ul {
  & li {
    list-style-type: none;
    padding-left: calc(var(--fds-density) * 0.75em);

    &:before {
      position: absolute;
      left: 0;
      content: "⋅ ";
    }
  }
}

ol {
  & li {
    list-style: decimal inside none;
  }
}

blockquote {
  font-size: var(--fds-type-h4);
  line-height: var(--fds-type-h4-leading);
  margin: 0;
  padding-left: calc(var(--fds-density) * 0.75em);
  margin-bottom: calc(var(--fds-density) * 1em);
}

aside {
  margin: 0;
  margin-bottom: calc(var(--fds-density) * 0.5em);
  background: var(--fds-surface);
  padding-top: calc(var(--fds-density) * 0.4em);
  padding-right: calc(var(--fds-density) * 1.5em);
  padding-bottom: calc(var(--fds-density) * 0.4em);
  padding-left: calc(var(--fds-density) * 0.5em);
  border-radius: var(--fds-radius-s);

  code {
    background: none;
    padding: 0;
  }
}

code {
  font-family: inherit;
  letter-spacing: 0.02em;
  font-weight: var(--fds-weight-regular);
  padding: 0.1em 0.25em;
  border-radius: var(--fds-radius-s);
  color: var(--fds-text-muted);
  background: var(--fds-surface);
}

figure {
  margin: 0 0 calc(var(--fds-density)) 0;

  & figcaption {
    margin-top: calc(var(--fds-density) * 0.25em);
    font-size: var(--fds-type-caption);
    line-height: var(--fds-type-caption-leading);
    opacity: 0.7;
  }
}

hr {
  border-top-color: var(--fds-line);
  border-bottom: 0;
}

.fds-divider {
  display: block;
  width: 100%;
  height: 1px;
  margin: 1em 0;
  padding: 0;
  border: 0;
  background-color: var(--fds-text-muted);
}

iframe,
video{
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}
}

/* fds-link.css */
@layer text {
/*
 * Links. The <a> element is the block: ink with a faint underline, accent
 * on hover and focus. Everything else is a modifier on top of that.
 */
a {
  color: var(--fds-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  text-decoration-color: var(--fds-line);
}

a:hover,
a:focus-visible {
  color: var(--fds-accent);
  text-decoration-color: var(--fds-accent);
}

/* Call to action: a solid underline, usually with an arrow. */
.fds-link--cta {
  text-decoration-color: var(--fds-text);
}

/* Anchor link: the arrow stays plain, the words carry a hairline. */
.fds-link--anchor {
  text-decoration: none;
  transition: opacity var(--fds-duration-fast) var(--fds-ease);
}

.fds-link--anchor span:not(.fds-link__arrow) {
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 0.3em;
}

.fds-link--anchor:hover,
.fds-link--anchor:focus-visible {
  opacity: 0.6;
}

.fds-link__arrow {
  display: inline-block;
  text-decoration: none;
  transition: transform var(--fds-duration-fast) var(--fds-ease);
}

.fds-link--anchor:hover .fds-link__arrow,
.fds-link--anchor:focus-visible .fds-link__arrow {
  transform: translateX(0.25em);
}

.fds-link--cta:hover .fds-link__arrow,
.fds-link--cta:focus-visible .fds-link__arrow {
  transform: translateX(0.1em);
}

/* A paragraph that holds a call to action, after a spacer. The block
   before that spacer takes fds-flush, so only the spacer sets the gap. */
p.fds-cta {
  margin-bottom: 0;
}

/* A term with a tooltip (js/quote-tooltip.js). */
.fds-term {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-color: var(--fds-text);
  text-decoration-thickness: 0.01em;
}

.fds-term:hover,
.fds-term.is-active {
  color: var(--fds-accent);
  text-decoration-color: var(--fds-accent);
}

.fds-quote--accent .fds-term {
  color: var(--fds-accent);
  text-decoration-color: var(--fds-accent);
}

.fds-quote--accent .fds-term:hover,
.fds-quote--accent .fds-term.is-active {
  color: var(--fds-text);
  text-decoration-color: var(--fds-text);
}

@media (width <= 768px) {
  p.fds-toc .fds-link--anchor {
    display: inline-block;
    margin-bottom: 1em;
  }
}
}

/* fds-chip.css */
@layer components {
/*
 * Chip: a small pill label in two sizes. Without a modifier a chip is M,
 * --s is the small one. Rows of chips sit in .fds-chips. The bottom padding
 * is larger because lowercase Sona sits low in its line box.
 */
.fds-chips {
  display: inline-flex;
  align-items: baseline;
  vertical-align: baseline;
  flex-wrap: wrap;
  gap: 0.4em;
  margin: 0;
}

.fds-chip {
  display: inline-flex;
  align-items: center;
  background-color: var(--fds-surface);
  color: var(--fds-text);
  border-radius: var(--fds-radius-pill);
  padding: 0.1em 0.7em 0.2em;
  font-size: var(--fds-size-chip-m);
  line-height: 1.2;
}

.fds-chip--s {
  padding: 0.05em 0.6em 0.15em;
  font-size: var(--fds-size-chip-s);
}

@media (width <= 768px) {
  .fds-chips {
    gap: 0.35em;
  }

  .fds-chip {
    line-height: 1.15;
  }

  .fds-chip--s {
    padding: 0.05em 0.55em 0.15em;
  }
}
}

/* fds-header.css */
@layer components {
header {
  padding: 0 var(--fds-gutter);
  display: flex;
  width: 100%;
  max-width: 100%;
  position: sticky;
  top: 0;
  z-index: var(--fds-z-header);
  background: var(--fds-bg);
}

header.is-fixed {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  transition: transform var(--fds-duration-slow) var(--fds-ease);
}

header.is-hidden {
  transform: translateY(-110%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  header.is-fixed {
    transition: none;
  }
}

.fds-header {
  font-size: 1em;
  font-weight: var(--fds-weight-medium);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.2em;
  width: 100%;
  max-width: 100%;
}

[data-fds-header] {
  display: block;
  width: 100%;
  max-width: 100%;
  /* Reserve space before async partial injects (avoids empty strip / layout jump) */
  min-height: 3.25em;
}

.fds-header__left {
  display: flex;
  align-items: flex-end;
  gap: 1em;
  flex: 1 1 auto;
  min-width: 0;
}

/* On cases js/header-scroll.js shrinks the logo while scrolling through the
   --fds-logo-* properties; the mobile rules below simply win over them. */
.fds-header__left .fds-header__logo a {
  display: block;
  font-size: var(--fds-logo-size, var(--fds-size-logo));
  line-height: 0.9;
  white-space: nowrap;
  margin-top: var(--fds-logo-top, 0.05em);
  margin-bottom: var(--fds-logo-bottom, 0);
  transition: none;
}

.fds-header__logo-image {
  display: block;
  width: auto;
  height: 1em;
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

.fds-header:not(.is-menu-open) .fds-header__left .fds-header__logo a:hover .fds-header__logo-image,
.fds-header:not(.is-menu-open) .fds-header__left .fds-header__logo a:focus-visible .fds-header__logo-image {
  filter: brightness(0) saturate(100%) invert(58%) sepia(93%) saturate(3082%) hue-rotate(3deg) brightness(101%) contrast(102%);
}

.fds-header__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 2.5em;
  margin-top: var(--fds-header-right-top, clamp(0.4em, 2.6vw, 2.5em));
  min-width: max-content;
  transition: none;
}

.fds-header__nav {
  display: flex;
  align-items: center;
  gap: 2em;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.fds-header a {
  color: var(--fds-text);
  text-decoration: none;
}

.fds-header__right .fds-header__link,
.fds-header__right .fds-lang__btn {
  font-size: var(--fds-type-h3);
  font-weight: var(--fds-weight-medium);
  white-space: nowrap;
}

.fds-header__nav .fds-header__link:hover,
.fds-header__nav .fds-header__link:focus-visible {
  color: var(--fds-accent);
}

.fds-lang {
  display: flex;
  align-items: center;
}

.fds-header__burger {
  display: none;
}

.fds-lang__btn {
  min-width: 1.4em;
  min-height: 1.4em;
  background: transparent;
  border: none;
  font-size: inherit;
  font-family: inherit;
  color: var(--fds-text);
  cursor: pointer;
  opacity: 0.5;
  transition: none;
}

.fds-lang__btn.is-active {
  color: var(--fds-text);
  opacity: 1;
}

.fds-lang__btn:hover,
.fds-lang__btn:focus-visible {
  color: var(--fds-accent);
}

/*
 * The header folds into the burger up to 1024px, its own border apart from
 * the 768px layout one: below it the menu does not fit next to the logo.
 * js/header-scroll.js uses the same number.
 */
@media (width <= 1024px) {
  body.has-menu-open {
    overflow: hidden;
  }

  header {
    padding: var(--fds-gutter);
  }

  .fds-header {
    align-items: flex-start;
    gap: 0;
    overflow-x: clip;
  }

  .fds-header__left {
    width: calc(100% - 2.2em);
    min-width: 0;
    gap: 0;
  }

  .fds-header__left .fds-header__logo a {
    font-size: var(--fds-size-logo-folded);
  }

  header.is-fixed {
    position: sticky;
    top: 0;
  }

  .fds-header__right {
    margin-top: 0;
    margin-left: auto;
    min-width: 0;
    display: block;
  }

  .fds-header__burger {
    width: 2em;
    height: 2em;
    margin-top: 0;
    padding: 0;
    border: 0;
    background: transparent;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 0.45em;
    cursor: pointer;
    z-index: var(--fds-z-menu-top);
    position: relative;
  }

  .fds-header__burger-line {
    width: 2em;
    height: 0.4em;
    background: var(--fds-text);
    display: block;
  }

  .fds-header__nav,
  .fds-header .fds-lang {
    display: none;
  }

  .fds-header.is-menu-open .fds-header__right {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    z-index: var(--fds-z-menu);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: max(var(--fds-gutter), env(safe-area-inset-top)) var(--fds-gutter) max(var(--fds-gutter), env(safe-area-inset-bottom));
    background: var(--fds-inverse-bg);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity var(--fds-duration-fast) var(--fds-ease), transform var(--fds-duration-fast) var(--fds-ease);
  }

  .fds-header.is-menu-open .fds-header__left {
    position: fixed;
    top: max(var(--fds-gutter), env(safe-area-inset-top));
    left: var(--fds-gutter);
    z-index: var(--fds-z-menu-top);
  }

  .fds-header.is-menu-open .fds-header__burger {
    position: fixed;
    top: max(var(--fds-gutter), env(safe-area-inset-top));
    right: var(--fds-gutter);
    z-index: calc(var(--fds-z-menu-top) + 1);
    align-items: flex-end;
  }

  .fds-header.is-menu-open .fds-header__nav,
  .fds-header.is-menu-open .fds-lang {
    display: flex;
    width: 100%;
  }

  .fds-header.is-menu-open .fds-header__nav {
    margin-top: 6em;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8em;
  }

  .fds-header.is-menu-open .fds-lang {
    align-items: flex-start;
    gap: 0.2em;
  }

  .fds-header.is-menu-open .fds-header__nav,
  .fds-header.is-menu-open .fds-lang {
    animation: mobile-menu-items-in var(--fds-duration-fast) var(--fds-ease) both;
  }

  .fds-header.is-menu-open .fds-header__nav .fds-header__link,
  .fds-header.is-menu-open .fds-lang__btn {
    font-size: var(--fds-type-h1);
  }

  .fds-header.is-menu-open .fds-header__burger-line {
    background: var(--fds-inverse-text);
  }

  .fds-header.is-menu-open .fds-header__logo a,
  .fds-header.is-menu-open .fds-header__link,
  .fds-header.is-menu-open .fds-header__link:hover,
  .fds-header.is-menu-open .fds-header__link:visited,
  .fds-header.is-menu-open .fds-lang__btn {
    color: var(--fds-inverse-text);
  }

  .fds-header.is-menu-open .fds-header__logo-image {
    filter: brightness(0) invert(1);
  }

  .fds-header.is-menu-open .fds-lang__btn {
    background: transparent;
    opacity: 0.7;
  }

  .fds-header.is-menu-open .fds-lang__btn.is-active {
    opacity: 1;
  }

  .fds-lang__btn {
    min-width: 1.1em;
    min-height: 1.4em;
    padding: 0.1em;
  }

  @keyframes mobile-menu-items-in {
    from {
      opacity: 0;
      transform: translateY(0.5em);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

}
}

/* fds-footer.css */
@layer components {
/*
 * No bottom padding: the page ends exactly at the bottom of
 * .fds-footer__brand, so native scrolling stops on the flowerdog
 * wordmark. The picture gallery is not part of the document at all — it
 * is only uncovered when js/footer-reveal.js lifts the whole sheet (main
 * + this footer) past that end.
 *
 * The shadow sits entirely below the footer's bottom edge (its y-offset
 * plus negative spread outruns the blur, so nothing bleeds above), which
 * is below the fold at rest and never counts toward scroll height. It
 * only shows once the sheet is lifted — the paper's edge over the
 * pictures. Without the reveal it would only ever surface in a native
 * overscroll bounce, as a stray grey band, so it is scoped too.
 */
.fds-footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--fds-text);
}

html.has-footer-reveal .fds-footer {
  box-shadow: 0 2em 2em -0.5em var(--fds-shadow);
}

html.is-sheet-moving main,
html.is-sheet-moving [data-fds-footer] {
  will-change: transform;
}

/*
 * .fds-footer__top and .fds-footer__brand carry their own opaque
 * background plus all of the padding that would otherwise live on
 * .fds-footer (top/side padding) or as margin between them —
 * deliberately, not for looks. The picture panel is pinned to the bottom
 * of the viewport for the whole page, underneath everything; any
 * transparent gap in the footer — outer padding, the space between the
 * nav grid and the brand block — would leak those pictures through as it
 * scrolls across that band (a background-color on a *child* never blocks
 * what's behind an ancestor that has none of its own). Padding stays
 * covered because it is inside the opaque element's own painted box;
 * margin would not, since a margin is blank space nothing paints.
 */
.fds-footer__top {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  align-items: start;
  padding: 7em var(--fds-gutter) 0;
  background-color: var(--fds-bg);
}

.fds-footer__contact {
  grid-column: 1 / span 2;
  min-width: 0;
}

.fds-footer__email {
  display: inline-block;
  margin: 0;
  font-size: var(--fds-type-h1);
  font-weight: var(--fds-weight-medium);
  line-height: var(--fds-type-h1-leading);
  letter-spacing: -0.01em;
  word-break: break-word;
}


.fds-footer__contact-note {
  margin: 0.45em 0 0;
  max-width: 22em;
  font-weight: var(--fds-weight-regular);
  line-height: var(--fds-type-text-leading);
  letter-spacing: -0.01em;
}

.fds-footer__contact-lead {
  font-weight: var(--fds-weight-medium);
}


.fds-footer__nav {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15em;
  min-width: 0;
}

.fds-footer__nav-link {
  display: inline-block;
  line-height: var(--fds-type-text-leading);
}


.fds-footer__legal {
  grid-column: 4;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35em;
  width: 100%;
  min-width: 0;
  text-align: left;
}

.fds-footer__legal-item {
  margin: 0 0 calc(var(--fds-density) * 0.4em);
  max-width: none;
  color: var(--fds-text-muted);
  font-weight: var(--fds-weight-regular);
}

.fds-footer__legal-break {
  display: none;
}

.fds-footer__brand {
  position: relative;
  width: 100%;
  padding: 2em var(--fds-gutter) 1.2em;
  background-color: var(--fds-bg);
}

.fds-footer__flower {
  display: block;
  width: 24%;
  height: auto;
  aspect-ratio: 383 / 280;
  margin: 0 0 0.1em 8%;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.fds-footer__wordmark {
  display: block;
  width: 100%;
  margin: 0;
  font-size: 0;
  line-height: 0;
}

.fds-footer__wordmark img {
  display: block;
  width: 100%;
  height: auto;
}

/*
 * The secret layer. Fixed behind the sheet — main and [data-fds-footer]
 * sit one paint layer above it (css/fds-layout.css) and are opaque, so they
 * cover it completely. js/footer-reveal.js uncovers it by translating
 * them up past the end of the page — the pictures never move, the sheet
 * slides off them.
 *
 * Never z-index: -1, however natural that looks here. On a real iPhone
 * (iOS 26.6, Safari) a negative layer behind a translated sheet keeps a
 * stale painting of it: the footer showed up a second time under its own
 * wordmark, and after closing it stayed over the page until a reload.
 * Neither the simulator nor WebKit on a Mac shows it; the device does,
 * and z-index: 0 with the sheet above cures it.
 *
 * The panel spans the viewport so the stage has room to grow, but paints
 * nothing itself, and is only visible while the sheet moves or the footer
 * is near: elsewhere on the page there is nothing that could ever show
 * through. Near the end it stays visible so that the browser's own bounce
 * past the end of the page uncovers the pictures the same way a lift
 * does. That bounce is the browser's alone: the page never switches it
 * off (WebKit stops scrolling the page altogether when the root has
 * overscroll-behavior: none and a non-passive wheel listener exists).
 *
 * The stage holds the pictures at the gallery height, pinned to the
 * bottom. Pulled past fully open, the script scales it from its bottom
 * edge, so the pictures fill the extra room instead of leaving a gap.
 */
.fds-reveal {
  position: fixed;
  inset: 0;
  z-index: var(--fds-z-reveal);
  overflow: hidden;
  /* Layout and paint only. Size containment would say nothing here — the
     insets give this panel its size — and this is a corner where WebKit
     has already been found surprising once. */
  contain: layout paint;
  pointer-events: none;
  visibility: hidden;
}

html.is-sheet-moving .fds-reveal,
html.is-footer-near .fds-reveal {
  visibility: visible;
}

.fds-reveal__stage {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--fds-reveal-height);
  overflow: hidden;
  background-color: var(--fds-surface);
  transform-origin: 50% 100%;
}

html.is-sheet-moving .fds-reveal__stage {
  will-change: transform;
}

.fds-reveal__stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.fds-reveal__stage img.is-active {
  opacity: 1;
}

@media (width <= 768px) {
  .fds-footer {
    margin: 0;
    padding: 0;
  }

  .fds-footer__top {
    grid-template-columns: 1fr;
    gap: 2em;
    padding: 4em var(--fds-gutter) 0;
  }

  .fds-footer__contact,
  .fds-footer__nav,
  .fds-footer__legal {
    grid-column: auto;
  }

  .fds-footer__contact-note {
    max-width: none;
  }

  .fds-footer__nav {
    gap: 0.4em;
  }

  .fds-footer__legal {
    text-align: left;
  }

  .fds-footer__legal-item {
    max-width: none;
  }

  .fds-footer__legal-break {
    display: block;
  }

  .fds-footer__brand {
    padding: 1em var(--fds-gutter) 1.5em;
  }

  .fds-footer__flower {
    width: 44%;
    margin-left: auto;
    margin-right: 6%;
  }

  .fds-footer__wordmark {
    margin-bottom: 0;
  }
}
}

/* fds-card.css */
@layer components {
.fds-card {
  display: block;
  width: 100%;
  text-decoration: none;
}

.fds-grid .fds-card,
.fds-grid .fds-card:hover,
.fds-grid .fds-card:visited,
.fds-grid .fds-card:focus-visible {
  color: inherit;
  text-decoration: none;
  background: transparent;
}

.fds-card__cover {
  position: relative;
  min-width: 0;
  min-height: 29em;
  background-size: cover;
  background-position: center;
  border-radius: var(--fds-radius-m);
  background-color: var(--fds-surface);
}

.fds-card__cover.fds-card__cover--hard {
  border-radius: 0;
}

.fds-card__cover.fds-card__cover--soft {
  border-radius: var(--fds-radius-l);
}

.fds-card__cover.fds-card__cover--round {
  border-radius: var(--fds-radius-pill);
}


.fds-card__strip {
  display: flex;
  align-items: center;
  gap: 0.2em;
  margin-top: 0.5em;
  padding: 0 0.5em 0 0;
}

.fds-card__strip-segment {
  flex: 1;
  min-width: 0;
  height: 2px;
  border-radius: var(--fds-radius-pill);
  background-color: var(--fds-surface);
  transition: background-color var(--fds-duration-fast) var(--fds-ease);
}

.fds-card__strip-segment.is-active {
  background-color: var(--fds-text);
}

.fds-card:hover .fds-card__strip-segment.is-active,
.fds-card:focus-visible .fds-card__strip-segment.is-active {
  background-color: var(--fds-accent);
}

.fds-card__meta {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.5em;
  margin-bottom: 3em;
}

.fds-card__strip + .fds-card__meta {
  margin-top: 0.5em;
}

/* The "soon" chip next to a card title. */
.fds-card__meta .fds-chip {
  align-self: center;
  flex-shrink: 0;
  margin-top: 0.2em;
}

.fds-card__title {
  color: var(--fds-text);
  margin: 0;
  transition: none;
}

.fds-card:hover .fds-card__title,
.fds-card:focus-visible .fds-card__title {
  color: var(--fds-accent);
}

.fds-card:hover .fds-chip,
.fds-card:focus-visible .fds-chip {
  background-color: var(--fds-surface-accent);
  color: var(--fds-accent);
}

.fds-grid > a.fds-button {
  grid-column: 1 / -1;
  box-sizing: border-box;
}

a.fds-button,
a.fds-button:hover,
a.fds-button:visited,
a.fds-button:active,
a.fds-button:focus-visible {
  display: block;
  width: 100%;
  color: var(--fds-text);
  text-decoration: none;
  font-size: var(--fds-type-h3);
  line-height: var(--fds-type-h3-leading);
  font-weight: var(--fds-weight-medium);
  padding: 2em;
  border-radius: var(--fds-radius-pill);
  background-color: var(--fds-surface);
  text-align: center;
  transition: none;
}

a.fds-button:hover,
a.fds-button:focus-visible {
  background-color: var(--fds-surface-accent);
  color: var(--fds-accent);
}


@media (width <= 768px) {
  /* On a phone the "soon" chip goes under the title. */
  .fds-card__meta {
    flex-wrap: wrap;
  }

  .fds-card__meta .fds-card__title {
    flex-basis: 100%;
  }

  .fds-card__meta .fds-chip {
    flex-basis: auto;
    width: auto;
  }


  .fds-grid[data-projects-page="index"] > a.fds-button {
    order: 999;
  }

  .fds-card__cover {
    min-height: 18em;
  }

  .fds-card__cover.fds-card__cover--hard {
    min-height: 18em;
  }

  .fds-card__cover.fds-card__cover--soft {
    min-height: 18em;
  }

  .fds-card__cover.fds-card__cover--round {
    min-height: 18em;
  }

  .fds-card__title {
    width: auto;
  }

  .fds-card__meta {
    margin-bottom: 2em;
  }

  a.fds-button,
  a.fds-button:hover,
  a.fds-button:visited,
  a.fds-button:active,
  a.fds-button:focus-visible {
    padding: 1.2em 0.9em;
  }
}
}

/* fds-row.css */
@layer components {
/*
 * Row link: one entry of a list that leads to its own page (a vacancy, and
 * anything listed the same way later). The whole row is the link: the title
 * in H3 on the left, an arrow on the right. On hover the row turns accent,
 * like the title of a project card; --muted rows (an archive) are paler.
 */
.fds-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  column-gap: var(--fds-space-m);
  padding: var(--fds-space-xs) 0;
  color: var(--fds-text);
  text-decoration: none;
}

.fds-row__title {
  margin: 0;
}

.fds-row__arrow {
  font-size: var(--fds-type-h3);
  line-height: 1;
  transition: transform var(--fds-duration-fast) var(--fds-ease);
}

.fds-row--muted {
  color: var(--fds-text-muted);
}

.fds-row:hover,
.fds-row:focus-visible {
  color: var(--fds-accent);
}

.fds-row:hover .fds-row__arrow,
.fds-row:focus-visible .fds-row__arrow {
  transform: translateX(0.1em);
}
}

/* fds-person.css */
@layer components {
.fds-person__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: var(--fds-radius-m);
  background-color: var(--fds-surface);
}

.fds-person__photo.fds-person__photo--soft {
  border-radius: var(--fds-radius-l);
}

.fds-person__photo.fds-person__photo--hard {
  border-radius: 0;
}

.fds-person__photo.fds-person__photo--round {
  border-radius: var(--fds-radius-pill);
}

.fds-person__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 0.4em;
  row-gap: 0;
  margin-top: 0.75em;
  font-size: var(--fds-type-caption);
  line-height: var(--fds-type-caption-leading);
}

.fds-person__name {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  font-weight: var(--fds-weight-medium);
  color: var(--fds-text);
}

.fds-person__meta .fds-chip {
  margin: 0.1em 0 0;
}

p.fds-person__bio {
  margin-top: 0.5em;
  margin-bottom: 0;
  padding-right: 0.5em;
  font-size: var(--fds-type-caption);
  line-height: var(--fds-type-caption-leading);
  font-weight: var(--fds-weight-regular);
  color: var(--fds-text);
}

@media (width <= 768px) {
  .fds-person__meta {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 0.25em;
  }
}

html[data-lang="en"] p.fds-person__bio {
  hyphens: auto;
}

.fds-avatar {
  width: 0.9em;
  height: 0.9em;
  border-radius: var(--fds-radius-pill);
  overflow: hidden;
  display: inline-block;
}

.fds-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fds-avatar--zoom img {
  transform: scale(2.2) translateY(-8%);
  transform-origin: 50% 18%;
}

.fds-avatars {
  display: inline-flex;
  align-items: flex-end;
  vertical-align: text-bottom;
  margin-left: 0.2em;
}

.fds-avatars--left {
  margin-left: 0;
}

.fds-avatars .fds-avatar + .fds-avatar {
  margin-left: -0.2em;
}

/* Same overlap, but taken on the right so a wrapped row starts flush left. */
.fds-avatars--left .fds-avatar + .fds-avatar {
  margin-left: 0;
}

.fds-avatars--left .fds-avatar {
  margin-right: -0.2em;
}

p.fds-credits {
  margin-top: 0;
  margin-bottom: 0;
}

.fds-credits .fds-avatar {
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.1em;
  vertical-align: -0.3em;
}

.fds-credits__member {
  white-space: nowrap;
}

.fds-credits__member:not(:last-child) {
  margin-right: 0.5em;
}

.fds-credits {
  font-weight: var(--fds-weight-regular);
}

.fds-credits__role {
  color: var(--fds-text-muted);
  font-weight: var(--fds-weight-regular);
}

@media (width <= 768px) {
  .fds-avatars {
    display: flex;
    margin-left: 0;
    margin-top: 0.35em;
    vertical-align: baseline;
  }

  .fds-credits__label {
    display: block;
    margin-bottom: 0.35em;
  }

  /*
   * In a row, a portrait is 1.1em of its line but shrinks when the row is
   * wider than its column, so the row always ends at the column edge,
   * whatever the line size or the number of people.
   */
  .fds-avatars .fds-avatar {
    flex: 0 1 1.1em;
    width: auto;
    height: auto;
    min-width: 0;
    aspect-ratio: 1 / 1;
  }

  .fds-avatars--left .fds-avatar:last-child {
    margin-right: 0;
  }

  .fds-avatars--left {
    margin-top: 0;
  }
}
}

/* fds-quote.css */
@layer components {
.fds-quote {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fds-quote__content {
  flex: 1 1 auto;
}

.fds-quote__lead {
  margin: 0 0 0.375em;
  color: var(--fds-text);
}

.fds-quote__content > :last-child,
.fds-quote > :last-child:not(.fds-quote__byline) {
  margin-bottom: 0;
}

.fds-quote__text + .fds-quote__lead {
  margin-top: 1em;
}

.fds-quote__text {
  margin-top: 0.6em;
  margin-bottom: 0;
}

.fds-quote__lead + .fds-quote__text {
  margin-top: 0.5em;
}

.fds-quote__text:first-child {
  margin-top: 0;
}

.fds-quote__byline {
  display: flex;
  align-items: center;
  gap: 0.5em;
  order: -1;
  margin-top: 0;
  margin-bottom: 1.5em;
  color: var(--fds-text);
}

.fds-quote__byline .fds-avatar {
  width: 2.2em;
  height: 2.2em;
  flex-shrink: 0;
}

.fds-quote__byline-text {
  display: flex;
  flex-direction: column;
  gap: 0.05em;
  line-height: 1.15;
}

.fds-quote__name {
  font-size: var(--fds-type-text);
  font-weight: var(--fds-weight-medium);
}

.fds-quote__role {
  font-weight: var(--fds-weight-regular);
  color: var(--fds-text-muted);
}

.fds-quote--accent,
.fds-quote--accent .fds-quote__lead,
.fds-quote--accent .fds-quote__text,
.fds-quote--accent .fds-quote__byline,
.fds-quote--accent .fds-quote__name {
  color: var(--fds-accent);
}

.fds-quote--accent .fds-quote__role {
  color: var(--fds-accent-muted);
}

.fds-tip {
  position: absolute;
  left: 0;
  top: 0;
  background: var(--fds-inverse-bg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--fds-duration-slow) var(--fds-ease), visibility 0s linear var(--fds-duration-slow);
  z-index: var(--fds-z-tip);
  border-radius: var(--fds-radius-s);
}

.fds-tip.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0s linear, visibility 0s linear;
}

.fds-tip__text {
  margin: 0 0 calc(var(--fds-density) * 0.4em);
  width: 17em;
  max-width: 17em;
  padding: 1em;
  font-size: var(--fds-type-text);
  color: var(--fds-inverse-text);
  white-space: pre-line;
}

.fds-tip--l .fds-tip__text {
  width: 28em;
  max-width: min(28em, 90vw);
}

.fds-tip--aside {
  left: 6em;
  width: 50%;
  max-width: 50%;
  box-sizing: border-box;
}

.fds-tip--aside .fds-tip__text,
.fds-tip--aside.fds-tip--l .fds-tip__text {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 1.6em;
}

@media (width <= 768px) {
  .fds-tip__text {
    width: 17em;
    max-width: 17em;
    padding: 0.8em 0.9em 0.7em 0.9em;
  }

  .fds-tip--l .fds-tip__text {
    width: 24em;
    max-width: min(24em, 88vw);
  }

  .fds-tip--aside {
    position: absolute;
    left: 50%;
    right: auto;
    width: calc(100% - 4em);
    max-width: none;
    z-index: var(--fds-z-menu-top);
    border-radius: var(--fds-radius-s);
    transform: translateX(-50%);
    transition: opacity var(--fds-duration-slow) var(--fds-ease), visibility 0s linear var(--fds-duration-slow);
  }

  .fds-tip--aside.is-visible {
    pointer-events: auto;
    cursor: pointer;
    transition: opacity 0s linear, visibility 0s linear;
  }

  .fds-tip--aside .fds-tip__text,
  .fds-tip--aside.fds-tip--l .fds-tip__text {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 1em;
  }
}
}

/* fds-gallery.css */
@layer components {
/* A picture: rounded M and cropped to it, inside a gallery or on its own. */
.fds-figure {
    overflow: hidden;
    border-radius: var(--fds-radius-m);
}

fds-gallery, .fds-gallery {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    
    --columns: 3;
    --gap: 1em;
    gap: var(--gap);
    place-content: start;

    @media (width <= 768px) {
        --gap: 0.4em;
    }

    .fds-figure {
        flex: 0 0 calc((100% - var(--gap) * (var(--columns) - 1)) / var(--columns));
        overflow: hidden;
        border-radius: var(--fds-radius-m);

        a {
            display: block;
            width: 100%;
            cursor: default;
        }
        img {
            object-fit: contain;
            width: 100%;
            height: auto;
            max-height: 100%;
            max-width: 100%;
            display: block;
        }
        video {
            width: 100%;
            height: auto;
            max-width: 100%;
            aspect-ratio: auto;
            display: block;
        }
        iframe {
            width: 100%;
            min-height: 24em;
            border: 0;
            display: block;
        }

        &:where(.fds-figure--l) {
            flex: 0 0 calc((100% - var(--gap)) / 2);
        }
        &:where(.fds-figure--xl) {
            flex: 0 0 100%;
        }
        &:where(:not(.fds-figure--l):not(.fds-figure--xl)) {
            border-radius: var(--fds-radius-s);
        }
    }
}

.fds-sound {
    position: absolute;
    top: 1em;
    right: 1em;
    border: 0;
    border-radius: var(--fds-radius-pill);
    background: var(--fds-white-70);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: var(--fds-z-sound);
    line-height: 0;
    padding: 0.2em;
    box-sizing: border-box;

    @media (width <= 768px) {
        display: inline-flex;
    }
}

video.has-sound-toggle {
    @media (width > 768px) {
        cursor: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSIyMCIgY3k9IjIwIiByPSIxOSIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjkyKSIgc3Ryb2tlPSJyZ2JhKDAsMCwwLDAuMDgpIi8+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOSw5KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDA1NmQzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+CiAgICA8cG9seWdvbiBwb2ludHM9IjExIDUgNiA5IDIgOSAyIDE1IDYgMTUgMTEgMTkgMTEgNSIgZmlsbD0iIzAwNTZkMyIgc3Ryb2tlPSIjMDA1NmQzIi8+CiAgICA8cGF0aCBkPSJNMTkuMDcgNC45M2ExMCAxMCAwIDAgMSAwIDE0LjE0Ii8+CiAgICA8cGF0aCBkPSJNMTUuNTQgOC40NmE1IDUgMCAwIDEgMCA3LjA3Ii8+CiAgPC9nPgo8L3N2Zz4K') 20 20, pointer;

        &.has-sound-on {
            cursor: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSIyMCIgY3k9IjIwIiByPSIxOSIgZmlsbD0iIzAwNTZkMyIgc3Ryb2tlPSJyZ2JhKDAsMCwwLDAuMDgpIi8+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOSw5KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+CiAgICA8cG9seWdvbiBwb2ludHM9IjExIDUgNiA5IDIgOSAyIDE1IDYgMTUgMTEgMTkgMTEgNSIgZmlsbD0iI2ZmZmZmZiIgc3Ryb2tlPSIjZmZmZmZmIi8+CiAgICA8bGluZSB4MT0iMjMiIHkxPSI5IiB4Mj0iMTciIHkyPSIxNSIvPgogICAgPGxpbmUgeDE9IjE3IiB5MT0iOSIgeDI9IjIzIiB5Mj0iMTUiLz4KICA8L2c+Cjwvc3ZnPgo=') 20 20, pointer;
        }
    }
}

.fds-sound__icon {
    width: 1.5em;
    height: 1.5em;
    display: block;
    flex-shrink: 0;
    background-color: var(--fds-text);
    mask: url('/images/icon/speaker.svg') center / contain no-repeat;
    -webkit-mask: url('/images/icon/speaker.svg') center / contain no-repeat;
}

.fds-sound:not(.is-on):hover,
.fds-sound:not(.is-on):focus-visible {
    background: var(--fds-bg);
}

.fds-sound.is-on {
    background: var(--fds-inverse-bg);
}

.fds-sound.is-on .fds-sound__icon {
    background-color: var(--fds-bg);
    mask-image: url('/images/icon/speaker-mute.svg');
    -webkit-mask-image: url('/images/icon/speaker-mute.svg');
}

/* Tight corners: every figure on mobile, --tight figures always. */
.fds-gallery .fds-figure--tight {
  border-radius: var(--fds-radius-s);
}

@media (width <= 768px) {
  .fds-gallery.fds-gallery--tight .fds-figure {
    border-radius: var(--fds-radius-s);
  }
}

.fds-figure--outline {
  position: relative;
}

.fds-figure--outline::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--fds-line);
  border-radius: inherit;
  pointer-events: none;
}

.fds-gallery .fds-figure--contain {
  margin-top: calc(var(--fds-density) * 4em);
  margin-bottom: calc(var(--fds-density) * 4em);
}

.fds-gallery .fds-figure--contain a {
  display: flex;
  justify-content: center;
}

.fds-gallery .fds-figure--contain img {
  width: 50%;
  max-width: 50%;
}
}

/* fds-case.css */
@layer components {
.fds-meta__date {
  font-size: var(--fds-type-caption);
  font-weight: var(--fds-weight-regular);
}

.fds-meta {
  line-height: 1.2;
  margin-bottom: calc(var(--fds-density) * 0.35em);
}

.fds-meta .fds-meta__item {
  font-size: var(--fds-type-caption);
  color: var(--fds-text);
  display: inline-flex;
  align-items: baseline;
  vertical-align: baseline;
  gap: 0.6em;
  margin: 0 0.6em 0 0;
}

p.fds-meta__item {
  margin-bottom: 0;
}

.fds-anchor {
  scroll-margin-top: 3em;
}

/* Table of contents: a paragraph of anchor links. */
p.fds-toc {
  margin-bottom: 0;
  line-height: 1.5;
}

@media (width <= 768px) {
  p.fds-toc {
    line-height: 1.2;
  }

  .fds-meta {
    line-height: 1;
    margin-bottom: calc(var(--fds-density) * 0.15em);
  }

  .fds-meta .fds-meta__item {
    gap: 0.4em;
    margin: 0 0.4em 0 0;
  }
}
}

/* fds-utilities.css */
@layer utilities {
/* Utilities: the short list of single-purpose classes. */

/* Shown on desktop only (a line break, a word). */
@media (width <= 768px) {
  .fds-desktop-only {
    display: none;
  }
}

/* A paragraph or list without its bottom margin; the spacer after it sets
   the rhythm. */
.fds-flush,
.fds-flush > li:last-child {
  margin-bottom: 0;
}

/* Present for assistive tech and search engines, invisible on screen. */
.fds-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
}