/* Site styles. Values come from tokens.css – adjust colours and sizes there. */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--pins-height) + var(--space-4));
}

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

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  text-rendering: optimizeLegibility;
}

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

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--color-ink);
  text-wrap: balance;
}

p,
ul,
ol,
dl {
  margin: 0;
}

p + p {
  margin-top: var(--space-4);
}

a {
  color: var(--color-blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.hero :focus-visible,
.section--dark :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--color-gold-light);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--color-blue-deep);
  color: var(--color-on-dark);
  border-radius: var(--radius);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.container {
  width: 100%;
  max-width: var(--width-content);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--color-blue-mist) 55%, transparent), transparent 38%, transparent 62%, color-mix(in srgb, var(--color-gold-soft) 45%, transparent)),
    color-mix(in srgb, var(--color-paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-line);
  transition: box-shadow 0.25s ease, background-color 0.25s ease;
}

/* Champagne hairline along the top edge */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--color-blue-deep), var(--color-blue) 45%, var(--color-gold-line) 75%, var(--color-gold));
}

/* Reading progress (JavaScript only): gold line on the lower edge */
.site-header.has-progress::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-gold-line), var(--color-gold-text));
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
  pointer-events: none;
}

.site-header.is-scrolled {
  box-shadow: 0 6px 22px -14px rgba(11, 42, 74, 0.45);
}


/* Contact pins: two free-floating labels hanging below the header on fine
   gold threads. They travel with the sticky header and take no space in the
   page. JavaScript checks the background behind them and switches to the
   dark variant (.is-on-dark) over dark bands, so they stay readable. */
.pins {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  pointer-events: none;
}

.pins__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.pins__list {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin: 0 0 0 auto;
  padding: var(--space-2) 0 0;
  list-style: none;
}

.pins__list li {
  position: relative;
}

/* The thread that ties each pin to the header */
.pins__list li::before,
.showcase::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 1px;
  height: var(--space-2);
  background: linear-gradient(var(--color-gold-line), var(--color-gold-text));
  transition: background 0.3s ease;
}

.pin {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.3rem 0.85rem 0.3rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--color-gold-line) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-paper-raised) 82%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 6px 16px -10px rgba(11, 42, 74, 0.5);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.pin__icon {
  flex: none;
  color: var(--color-gold-text);
  transition: color 0.3s ease;
}

.pin:hover,
.pin:focus-visible {
  transform: translateY(2px);
  border-color: var(--color-gold-text);
  box-shadow: 0 10px 20px -12px rgba(11, 42, 74, 0.6);
}

.pin:hover span,
.pin:focus-visible span {
  text-decoration: underline;
  text-decoration-color: var(--color-gold-line);
  text-underline-offset: 0.2em;
}

.pins .is-on-dark .pin {
  background: color-mix(in srgb, var(--color-blue-deep) 72%, transparent);
  border-color: var(--color-line-on-dark);
  box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.7);
  color: var(--color-on-dark);
}

.pins .is-on-dark .pin__icon {
  color: var(--color-gold);
}

.pins .is-on-dark .pin:hover,
.pins .is-on-dark .pin:focus-visible {
  border-color: var(--color-gold);
}

.pins .is-on-dark .pin:focus-visible {
  outline-color: var(--color-gold-light);
}

.pins .is-on-dark::before {
  background: linear-gradient(var(--color-gold-text), var(--color-gold));
}

.site-header.is-open .pins {
  display: none;
}

/* Work samples: a highlighted pin on the left that opens the case notes and
   e-learning samples. A plain <details>, so it works without JavaScript;
   site.js closes it on Escape, on an outside click and after a link. */
.showcase {
  position: relative;
  margin-top: var(--space-2);
}

.pin--showcase {
  list-style: none;
  cursor: pointer;
  background: linear-gradient(120deg, var(--color-blue-deep), var(--color-blue));
  border-color: var(--color-gold);
  color: var(--color-on-dark);
}

.pin--showcase::-webkit-details-marker {
  display: none;
}

.pin--showcase .pin__icon {
  color: var(--color-gold);
}

/* Small chevron that turns when the panel is open */
.pin--showcase::after {
  content: "";
  width: 0.4em;
  height: 0.4em;
  margin-left: var(--space-1);
  border-right: 1.5px solid var(--color-gold);
  border-bottom: 1.5px solid var(--color-gold);
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform 0.2s ease;
}

.showcase[open] .pin--showcase::after {
  transform: translateY(0.1em) rotate(-135deg);
}

.pins .is-on-dark .pin--showcase,
.showcase[open] .pin--showcase {
  border-color: var(--color-gold);
}

.pins .is-on-dark .pin--showcase {
  background: linear-gradient(120deg, var(--color-gold-text), var(--color-blue-deep) 70%);
}

.showcase__short {
  display: none;
}

.showcase__panel {
  pointer-events: auto;
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(13rem, 1fr));
  gap: var(--space-4) var(--space-5);
  width: max-content;
  max-width: min(36rem, calc(100vw - 2.5rem));
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-gold-line);
  border-top: 3px solid var(--color-gold);
  border-radius: var(--radius);
  background: var(--color-paper-raised);
  box-shadow: 0 18px 40px -22px rgba(11, 42, 74, 0.6);
  color: var(--color-ink);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.showcase__label {
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-line);
  color: var(--color-gold-text);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.showcase__group ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.showcase__panel a {
  color: var(--color-blue-deep);
  font-weight: 600;
  text-decoration: none;
}

.showcase__panel a:hover,
.showcase__panel a:focus-visible,
.showcase__panel a[aria-current] {
  text-decoration: underline;
  text-decoration-color: var(--color-gold-line);
}

.showcase__sub {
  display: block;
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
  font-weight: 400;
}

.showcase__group--wide {
  grid-column: 1 / -1;
}

.showcase__all {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
}

@media (max-width: 64rem) {
  /* The full label stays for screen readers, the short one is shown */
  .showcase__long {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .showcase__short {
    display: inline;
  }
}

@media (max-width: 36rem) {
  .showcase__panel {
    grid-template-columns: 1fr;
    width: calc(100vw - 2.5rem);
  }
}

@media (max-width: 40rem) {
  .pins__list {
    justify-content: flex-end;
    gap: var(--space-2);
  }

  .pin {
    padding-inline: 0.55rem 0.7rem;
    font-size: var(--text-xs);
  }
}

/* Very narrow screens: symbols only, the text stays for screen readers */
@media (max-width: 26rem) {
  .pin span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .pin {
    padding: 0.45rem;
  }

  /* The work samples keep their short label */
  .pin--showcase .showcase__short {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }

  .pin--showcase {
    padding-inline: 0.55rem 0.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pin,
  .pin__icon,
  .pin--showcase::after,
  .pins__list li::before {
    transition: none;
  }

  .pin:hover,
  .pin:focus-visible {
    transform: none;
  }
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: var(--header-height);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-ink);
  text-decoration: none;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.brand__mark {
  width: 1.375rem;
  height: 1.375rem;
  flex: none;
  transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.brand__mark path:last-child {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.5s ease;
}

.brand:hover .brand__mark,
.brand:focus-visible .brand__mark {
  transform: rotate(90deg);
}

.brand:hover .brand__mark path:last-child,
.brand:focus-visible .brand__mark path:last-child {
  transform: scale(1.35);
}

.site-nav {
  position: relative;
  margin-left: auto;
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  list-style: none;
  padding: 0;
  white-space: nowrap;
}

.site-nav__list a {
  display: inline-block;
  padding-block: var(--space-2);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease;
}

.site-nav__list a:hover,
.site-nav__list a[aria-current="true"] {
  border-bottom-color: var(--color-gold-line);
}

.site-nav__list a:hover,
.site-nav__list a:focus-visible {
  color: var(--color-blue);
}

.site-nav__list a[aria-current="true"] {
  color: var(--color-gold-text);
}

/* Sliding marker (JavaScript only) replaces the static underline */
.site-nav.has-ink .site-nav__list a {
  border-bottom-color: transparent;
}

.site-nav__ink {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--color-gold-line);
  opacity: 0;
  pointer-events: none;
  transition: left 0.35s cubic-bezier(0.3, 1.2, 0.5, 1), width 0.35s cubic-bezier(0.3, 1.2, 0.5, 1), top 0.35s ease, opacity 0.2s ease;
}

/* small diamond in the middle, echoing the brand mark */
.site-nav__ink::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  background: var(--color-gold-text);
  transform: translate(-50%, -50%) rotate(45deg);
}

.site-nav__ink.is-on {
  opacity: 1;
}

.lang-switch {
  display: flex;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
}

.lang-switch a {
  display: inline-flex;
  padding: 0.3125rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.lang-switch a:hover,
.lang-switch a:focus-visible {
  border-color: var(--color-line);
  background: var(--color-paper-raised);
  transform: translateY(-2px);
}

.lang-switch a[aria-current="page"] {
  background: var(--color-paper-raised);
}

.lang-switch a[aria-current="page"] {
  border-color: var(--color-blue);
}

.flag {
  display: block;
  width: 1.5rem;
  height: 1rem;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(11, 42, 74, 0.18);
}

/* AI TechDoc World: two-level button, name above the three publications */
.world {
  position: relative;
  z-index: 2;
  flex: none;
  display: grid;
  border: 1px solid var(--color-blue-deep);
  border-radius: var(--radius);
  background: var(--color-blue-deep);
  overflow: visible;
  box-shadow: 0 4px 14px -8px rgba(11, 42, 74, 0.55);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.world:hover,
.world:focus-within {
  box-shadow: 0 8px 20px -10px rgba(11, 42, 74, 0.65), 0 0 0 1px var(--color-gold-line);
  transform: translateY(-1px);
}

.world__title {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  background: linear-gradient(120deg, var(--color-blue-deep), var(--color-blue) 140%);
  margin: 0;
  padding: 0.3125rem var(--space-3) 0.25rem;
  color: var(--color-gold);
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.world__list {
  display: grid;
  grid-template-columns: repeat(3, auto);
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--color-paper);
  border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);
}

.world__list li + li {
  border-left: 1px solid var(--color-line);
}

/* Light sweeping across the title on hover */
.world__title::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(231, 211, 155, 0.35) 50%, transparent 70%);
  transform: translateX(-100%);
  pointer-events: none;
}

.world:hover .world__title::after,
.world:focus-within .world__title::after {
  transform: translateX(100%);
  transition: transform 0.9s ease;
}

.world__list a,
.world__off {
  position: relative;
  display: block;
  padding: 0.3125rem var(--space-3);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
}

.world__list a {
  color: var(--color-blue);
}

.world__list a::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 0.1875rem;
  height: 1px;
  background: var(--color-gold-text);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}

.world__list a:hover,
.world__list a:focus-visible {
  background: var(--color-blue-mist);
}

.world__list a:hover::after,
.world__list a:focus-visible::after {
  transform: scaleX(1);
}

.world__off {
  color: var(--color-ink-muted);
  opacity: 0.6;
  cursor: not-allowed;
}

.world__tip {
  position: absolute;
  top: calc(100% + 0.375rem);
  right: 0;
  z-index: 60;
  padding: var(--space-1) var(--space-2);
  background: var(--color-blue-deep);
  color: var(--color-on-dark);
  border-radius: var(--radius);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: var(--text-xs);
  /* visually hidden until hover or focus; still read by screen readers */
  clip-path: inset(50%);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.world__off:hover,
.world__off:focus-visible {
  opacity: 1;
}

.world__off:hover .world__tip,
.world__off:focus-visible .world__tip {
  clip-path: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .world__tip,
  .site-header,
  .brand__mark,
  .brand__mark path:last-child,
  .site-nav__ink,
  .lang-switch a,
  .world,
  .world__list a::after {
    transition: none;
  }

  .brand:hover .brand__mark,
  .brand:focus-visible .brand__mark,
  .brand:hover .brand__mark path:last-child,
  .brand:focus-visible .brand__mark path:last-child,
  .lang-switch a:hover,
  .lang-switch a:focus-visible,
  .world:hover,
  .world:focus-within {
    transform: none;
  }

  .world__title::after {
    display: none;
  }
}

.nav-toggle {
  display: none;
  margin-left: auto;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

@media (min-width: 84.0625rem) {
  .site-header .container {
    max-width: 94rem;
  }

  .site-nav__list {
    column-gap: var(--space-3);
  }
}

@media (max-width: 84rem) {
  .site-header__inner {
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-block: var(--space-3);
  }

  .nav-toggle {
    display: inline-block;
  }

  .site-nav,
  .lang-switch {
    width: 100%;
    margin-left: 0;
  }

  .js .site-header:not(.is-open) .site-nav,
  .js .site-header:not(.is-open) .world,
  .js .site-header:not(.is-open) .lang-switch {
    display: none;
  }

  .site-nav__list {
    flex-direction: column;
    gap: 0;
  }

  .site-nav__list a,
  .site-nav.has-ink .site-nav__list a {
    display: block;
    padding-block: var(--space-3);
    padding-left: var(--space-3);
    border-bottom: 1px solid var(--color-line);
  }

  .site-nav__list a[aria-current="true"] {
    box-shadow: inset 3px 0 0 var(--color-gold-line);
    background: color-mix(in srgb, var(--color-gold-soft) 40%, transparent);
  }

  .site-nav__ink {
    display: none;
  }

  .js .site-header.is-open .site-nav,
  .js .site-header.is-open .world,
  .js .site-header.is-open .lang-switch {
    animation: menu-in 0.25s ease both;
  }

  .js .site-header.is-open .world {
    animation-delay: 0.05s;
  }

  .js .site-header.is-open .lang-switch {
    animation-delay: 0.1s;
  }

  .lang-switch {
    padding-bottom: var(--space-3);
  }
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .site-header.is-open .site-nav,
  .js .site-header.is-open .world,
  .js .site-header.is-open .lang-switch {
    animation: none;
  }
}

/* ---------- Sections ---------- */

.section {
  padding-block: var(--space-9);
}

.section--sand {
  background: var(--color-sand);
}

.section--ruled {
  border-top: 1px solid var(--color-line);
}

.section--dark {
  background: var(--color-blue-deep);
  color: var(--color-on-dark);
}

.section--dark h2,
.section--dark h3 {
  color: var(--color-on-dark);
}

.section--dark a {
  color: var(--color-on-dark);
}

.section-head {
  display: grid;
  gap: var(--space-4);
  max-width: 46rem;
  margin-bottom: var(--space-7);
}

.section-head h2 {
  font-size: var(--text-3xl);
  letter-spacing: -0.01em;
}

.section-head__lead {
  font-size: var(--text-lg);
  color: var(--color-ink-muted);
}

.section--dark .section-head__lead {
  color: var(--color-on-dark-muted);
}

/* Small caps label with a thin gold rule */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-gold-text);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  flex: none;
  background: currentColor;
}

.hero .eyebrow,
.section--dark .eyebrow {
  color: var(--color-gold);
}

.prose {
  max-width: var(--width-prose);
}

/* ---------- Hero (dark ocean band) ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(3rem, 2rem + 4vw, 5rem);
  background:
    radial-gradient(ellipse 60% 70% at 85% 30%, rgba(29, 90, 142, 0.55), transparent 70%),
    var(--color-blue-deep);
  color: var(--color-on-dark);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}

/* Profile line: round photo, name and role, kept small like a social media
   profile so that the claim carries the hero */
.hero__profile {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.hero__photo {
  flex: none;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 30%;
  border: 3px solid var(--color-blue-deep);
  box-shadow: 0 0 0 2px var(--color-gold), 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
  background: var(--color-blue);
}

.hero__name {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: 0;
  color: var(--color-on-dark);
}

.hero__role {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-gold);
}

.hero__claim {
  margin-top: var(--space-6);
  max-width: 40rem;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--color-on-dark);
}

.hero__sub {
  margin-top: var(--space-5);
  max-width: 38rem;
  font-size: var(--text-lg);
  color: var(--color-on-dark);
}

.hero__solo {
  margin-top: var(--space-4);
  max-width: 38rem;
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-gold);
  color: var(--color-on-dark-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.hero__figure {
  width: 100%;
  max-width: 22rem;
  justify-self: end;
}

.hero__figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* Hotspots over the four tiles of the focus-area graphic (site.js). The
   tiles sit at 16 % – 40 % and 60 % – 84 % of the 400 × 400 graphic. */
.hotspots {
  position: relative;
}

.hotspot {
  position: absolute;
  width: 24%;
  height: 24%;
  border-radius: 2.5%;
  color: var(--color-on-dark);
  text-decoration: none;
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.hotspot--tl { left: 16%; top: 16%; }
.hotspot--tr { left: 60%; top: 16%; }
.hotspot--br { left: 60%; top: 60%; }
.hotspot--bl { left: 16%; top: 60%; }

.hotspot:hover,
.hotspot:focus-visible {
  background-color: rgba(212, 181, 106, 0.08);
  box-shadow: 0 0 0 1.5px var(--color-gold), 0 0 1.25rem rgba(212, 181, 106, 0.35);
  outline: none;
}

.hotspot__label {
  position: absolute;
  z-index: 1;
  width: max-content;
  max-width: 15rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-line-on-dark);
  border-radius: var(--radius);
  background: var(--color-blue-deep);
  box-shadow: 0 0.5rem 1.5rem rgba(8, 29, 51, 0.45);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.25rem);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.hotspot--tl .hotspot__label,
.hotspot--tr .hotspot__label {
  bottom: calc(100% + var(--space-2));
}

.hotspot--bl .hotspot__label,
.hotspot--br .hotspot__label {
  top: calc(100% + var(--space-2));
}

.hotspot--tl .hotspot__label,
.hotspot--bl .hotspot__label {
  left: 0;
}

.hotspot--tr .hotspot__label,
.hotspot--br .hotspot__label {
  right: 0;
}

.hotspot:hover .hotspot__label,
.hotspot:focus-visible .hotspot__label {
  opacity: 1;
  transform: none;
}

.hotspot__num {
  color: var(--color-gold);
  font-weight: 600;
  letter-spacing: 0.08em;
}

@media (prefers-reduced-motion: reduce) {
  .hotspot,
  .hotspot__label {
    transition: none;
  }
}

/* Career swimlanes: generated SVG, see scripts/swimlanes.mjs. They sit in a
   dark ocean panel at the end of the about section. */
.career {
  margin-top: var(--space-8);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  border-radius: calc(var(--radius) * 2);
  background:
    radial-gradient(ellipse 60% 70% at 85% 20%, rgba(29, 90, 142, 0.5), transparent 70%),
    var(--color-blue-deep);
  color: var(--color-on-dark);
}

.career .eyebrow {
  color: var(--color-gold);
}

.lanes__chart {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--space-5);
  font-family: var(--font-sans);
  overflow: visible;
}

.lanes__chart--tall {
  display: none;
  max-width: 30rem;
}

.lanes__name {
  font-size: 14px;
  font-weight: 600;
  fill: var(--color-on-dark);
}

.lanes__chart--tall .lanes__name {
  font-size: 14.5px;
}

.lanes__label {
  font-size: 13px;
  fill: var(--color-on-dark-muted);
}

.lanes__chart--tall .lanes__label {
  font-size: 14px;
}

.lanes__date {
  font-size: 13px;
  font-weight: 700;
  fill: var(--color-gold-light);
}

.lanes__tick {
  font-size: 12px;
  fill: var(--color-on-dark-muted);
}

.lanes__tick--today {
  font-weight: 600;
  fill: var(--color-gold-light);
}

.lanes__bar {
  fill: var(--color-gold);
}

.lanes__early {
  stroke: var(--color-gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 0.5 5;
}

.lanes__dot {
  fill: var(--color-gold-light);
  stroke: var(--color-blue-deep);
  stroke-width: 2.5;
}

.lanes__ring {
  fill: var(--color-blue-deep);
  stroke: var(--color-gold-light);
  stroke-width: 2;
}

.lanes__grid {
  stroke: rgba(212, 181, 106, 0.12);
}

.lanes__rule,
.lanes__connector {
  stroke: var(--color-line-on-dark);
}

.lanes__guide {
  stroke: rgba(195, 208, 222, 0.14);
}

.lanes__axis {
  stroke: var(--color-on-dark-muted);
}

/* Scale before 2010 is compressed */
.lanes__compressed {
  fill: rgba(195, 208, 222, 0.04);
}

.lanes__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-xs);
  color: var(--color-on-dark-muted);
}

.lanes__legend li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.lanes__legend svg {
  overflow: visible;
}

@media (max-width: 64rem) {
  .lanes__chart--wide {
    display: none;
  }

  .lanes__chart--tall {
    display: block;
  }
}

@media (max-width: 52rem) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .hero__figure {
    display: none;
  }

  .hero__photo {
    width: 4.75rem;
    height: 4.75rem;
  }
}

/* ---------- Buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.75rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* On dark ocean */
.button--gold {
  background: var(--color-gold);
  color: var(--color-blue-deep);
}

.button--gold:hover {
  background: var(--color-gold-light);
}

.button--ghost {
  border-color: var(--color-line-on-dark);
  color: var(--color-on-dark);
}

.button--ghost:hover {
  border-color: var(--color-gold);
  color: var(--color-gold-light);
}

/* On cream */
.button--primary {
  background: var(--color-blue);
  color: var(--color-on-dark);
}

.button--primary:hover {
  background: var(--color-blue-deep);
}

.button--outline {
  border-color: var(--color-blue);
  color: var(--color-blue);
}

.button--outline:hover {
  background: var(--color-paper-raised);
  color: var(--color-blue-deep);
}

/* ---------- Focus areas ---------- */

.pillars {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--color-gold-line);
}

.pillar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: var(--space-7);
  padding-block: var(--space-7);
  border-bottom: 1px solid var(--color-line);
}

.pillar__num {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  line-height: 1;
  color: var(--color-gold-text);
}

.pillar__head h3 {
  margin-top: var(--space-4);
  font-size: var(--text-2xl);
  color: var(--color-blue-deep);
}

.pillar__intro {
  margin-top: var(--space-4);
  color: var(--color-ink-muted);
}

.pillar__body {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

.area h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-blue);
}

.area p {
  margin-top: var(--space-2);
}

.area__scope {
  padding: var(--space-3) var(--space-4);
  background: var(--color-blue-mist);
  border-radius: var(--radius);
  font-size: var(--text-sm);
}

.pillar__link {
  font-weight: 600;
}

.pillar__link a::after {
  content: " →";
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
}

.tag {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--color-gold-line);
  border-radius: 999px;
  background: var(--color-paper-raised);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-gold-text);
}

.note {
  margin-top: var(--space-7);
  max-width: 48rem;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

@media (max-width: 60rem) {
  .pillar {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

/* Focus areas as nested rings (built by site.js; hidden without JavaScript) */
.orbit {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas: "intro intro" "stage panel";
  gap: var(--space-5) var(--space-7);
  margin-bottom: var(--space-8);
  padding: var(--space-6) clamp(1.25rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-paper-raised);
}

.orbit[hidden],
.orbit__core[hidden],
.orbit__ui[hidden] {
  display: none;
}

.orbit__intro {
  grid-area: intro;
  max-width: var(--width-prose);
}

.orbit__intro p {
  color: var(--color-ink-muted);
}

.orbit__stage {
  grid-area: stage;
  position: relative;
  align-self: start;
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
  container-type: inline-size;
}

.orbit__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.orbit__guide {
  fill: none;
  stroke: var(--color-gold-line);
  stroke-width: 1;
  stroke-dasharray: 2 7;
  transform-box: fill-box;
  transform-origin: center;
  animation: orbit-turn 120s linear infinite;
}

.orbit__guide--outer {
  animation-direction: reverse;
  animation-duration: 180s;
}

@keyframes orbit-turn {
  to {
    transform: rotate(360deg);
  }
}

.orbit__area,
.orbit__field,
.orbit__core-disc,
.orbit__ask {
  cursor: pointer;
}

.orbit__area {
  fill: var(--color-blue);
  stroke: var(--color-paper-raised);
  stroke-width: 3;
  transition: fill 0.25s ease;
}

.orbit__area.is-hot,
.orbit__area:hover {
  fill: #24679f;
}

.orbit__area.is-selected {
  fill: var(--color-blue-deep);
}

.orbit__num {
  font-family: var(--font-serif);
  font-size: 21px;
  fill: var(--color-on-dark);
  pointer-events: none;
}

.orbit__num.is-selected {
  fill: var(--color-gold-light);
}

.orbit__field {
  fill: var(--color-blue-mist);
  stroke: var(--color-paper-raised);
  stroke-width: 3;
  transition: fill 0.25s ease, opacity 0.25s ease;
}

.orbit__field.is-in-area {
  fill: var(--color-gold-soft);
}

.orbit__field.is-dimmed {
  opacity: 0.55;
}

.orbit__field.is-hot,
.orbit__field:hover {
  fill: var(--color-gold-line);
  opacity: 1;
}

.orbit__field.is-selected {
  fill: var(--color-blue-deep);
  opacity: 1;
}

.orbit__dot {
  fill: var(--color-blue);
  pointer-events: none;
}

.orbit__dot.is-selected {
  fill: var(--color-gold);
}

.orbit__core-disc circle {
  fill: var(--color-blue-deep);
  stroke: var(--color-gold);
  stroke-width: 2;
}

.orbit__core-icon {
  color: var(--color-gold-light);
  pointer-events: none;
}

.orbit__label {
  position: absolute;
  /* Slightly below the centre, under the symbols of the core disc. */
  top: calc(50% + 1.5cqi);
  left: 50%;
  display: grid;
  gap: 0.2em;
  width: 26cqi;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  /* Never break words: the font size is set so that the longest word
     ("Sicherheitskommunikation") fits on one line. */
  hyphens: manual;
  overflow-wrap: normal;
  word-break: normal;
}

.orbit__label-eyebrow {
  font-size: 1.75cqi;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-gold-light);
}

.orbit__label-name {
  font-family: var(--font-serif);
  font-size: 2cqi;
  line-height: 1.25;
  color: var(--color-on-dark);
  text-wrap: balance;
}

/* On small rings the name does not fit into the centre; the panel below
   shows it as its heading. */
@container (max-width: 26rem) {
  .orbit__label-name {
    display: none;
  }

  .orbit__label {
    top: 50%;
    transform: translate(-50%, -20%);
  }

  .orbit__label-eyebrow {
    font-size: 0.75rem;
  }
}

.orbit__skill circle {
  fill: var(--color-paper-raised);
  stroke: var(--color-gold-line);
}

.orbit__skill use {
  color: var(--color-blue-deep);
}

.orbit__ask path:first-child {
  fill: var(--color-paper);
  stroke: var(--color-gold-line);
  transition: fill 0.2s ease;
}

.orbit__ask text {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  fill: var(--color-blue-deep);
  pointer-events: none;
}

.orbit__ask:hover path:first-child,
.orbit__ask.is-active path:first-child {
  fill: var(--color-blue-deep);
}

.orbit__ask:hover text,
.orbit__ask.is-active text {
  fill: var(--color-gold-light);
}

.orbit__skill,
.orbit__ask {
  animation: orbit-in 0.45s ease both;
  animation-delay: calc(0.35s + var(--i, 0) * 0.07s);
}

@keyframes orbit-in {
  from {
    opacity: 0;
  }
}

.orbit__panel {
  grid-area: panel;
  min-width: 0;
}

.orbit__crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  list-style: none;
  padding: 0;
  font-size: var(--text-sm);
}

.orbit__crumbs li {
  display: flex;
  align-items: baseline;
}

.orbit__crumbs li + li::before {
  content: "›";
  margin-right: var(--space-2);
  color: var(--color-ink-muted);
}

.orbit__crumbs button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--color-blue);
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.orbit__crumbs [aria-current] {
  color: var(--color-ink-muted);
}

.orbit__title {
  margin-top: var(--space-4);
  font-size: var(--text-xl);
  color: var(--color-blue-deep);
}

.orbit__title:focus {
  outline: none;
}

.orbit__title-num {
  font-family: var(--font-serif);
  color: var(--color-gold-text);
}

.orbit__eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gold-text);
}

.orbit__text,
.orbit__link,
.orbit__more {
  margin-top: var(--space-3);
}

.orbit__link,
.orbit__more {
  font-weight: 600;
}

.orbit__answers {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.orbit__q {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-line);
  border-radius: 0 var(--radius) var(--radius) 0;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.orbit__q.is-active {
  border-left-color: var(--color-gold-line);
  background: var(--color-sand);
}

.orbit__q:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.orbit__q-label {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gold-text);
}

.orbit__skills {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-1) 0 var(--space-2) var(--space-4);
  list-style: none;
  padding: 0;
  font-size: var(--text-sm);
}

.orbit__skills li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.orbit__areas,
.orbit__fields {
  list-style: none;
  padding: 0;
}

.orbit__areas {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}

.orbit__fields {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.orbit__areas .orbit__fields {
  padding-left: 2.1rem;
}

.orbit__choice {
  padding: 0.2rem 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--color-blue);
  cursor: pointer;
}

.orbit__areas > li > .orbit__choice {
  font-weight: 700;
  color: var(--color-blue-deep);
}

.orbit__choice:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.orbit__panel > .orbit__fields {
  margin-top: var(--space-4);
}

.orbit__panel > .orbit__fields .orbit__choice::after {
  content: " →";
}

/* Questions below each field (also the version without JavaScript) */
.questions {
  margin-top: var(--space-3);
}

.questions summary {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-blue);
  cursor: pointer;
}

.questions .q {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
}

.questions .skills {
  margin-top: var(--space-2);
}

@media (max-width: 60rem) {
  .orbit {
    grid-template-columns: 1fr;
    grid-template-areas: "intro" "stage" "panel";
  }
}

@media (prefers-reduced-motion: reduce) {
  .orbit__guide,
  .orbit__skill,
  .orbit__ask {
    animation: none;
  }
}

/* Ring and focus areas side by side; the areas as stacked index cards with
   tabs (set up by site.js, class .is-deck; without JavaScript the areas
   stay a plain list). */
.focus.is-deck {
  display: grid;
  grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "orbit tabs" "orbit cards";
  column-gap: var(--space-6);
  align-items: start;
}

.focus.is-deck .orbit {
  grid-area: orbit;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "stage" "panel";
  gap: var(--space-3);
  margin-bottom: 0;
  padding: var(--space-4);
}

.focus.is-deck .orbit__panel {
  font-size: var(--text-sm);
}

.focus.is-deck .orbit__panel .orbit__skills {
  font-size: var(--text-xs);
}

/* Heading and lead side by side, so that ring and cards fit on one screen
   together with them. */
@media (min-width: 64.01rem) {
  #expertise {
    padding-top: var(--space-7);
  }

  #expertise .section-head {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    column-gap: var(--space-6);
    max-width: none;
    margin-bottom: var(--space-6);
  }

  #expertise .section-head > :not(.section-head__lead) {
    grid-column: 1;
  }

  #expertise .section-head__lead {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    margin-top: 0;
    font-size: var(--text-base);
  }
}

/* The introduction stays available to screen readers; the section lead
   already explains the areas. */
.focus.is-deck .orbit__intro {
  grid-area: auto;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.focus.is-deck .orbit__title {
  margin-top: var(--space-3);
  font-size: var(--text-lg);
}

.orbit__asks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-3);
}

.orbit__ask-button {
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--color-gold-line);
  border-radius: 999px;
  background: var(--color-paper);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-blue-deep);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.orbit__ask-button:hover {
  background: var(--color-gold-soft);
}

.orbit__ask-button[aria-pressed="true"] {
  border-color: var(--color-blue-deep);
  background: var(--color-blue-deep);
  color: var(--color-gold-light);
}

.orbit__answer {
  min-height: 7.5rem;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}

.orbit__answer .orbit__q {
  padding: 0;
  border: 0;
}

.orbit__answer .orbit__skills {
  margin: var(--space-3) 0 0;
}

.deck__tabs {
  grid-area: tabs;
  position: relative;
  z-index: 4;
  display: flex;
  gap: var(--space-1);
  padding-inline: var(--space-2) calc(var(--space-2) + 0.8rem);
}

.deck__tab {
  /* Longer names get wider tabs. */
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0.15rem;
  padding: 0.55rem 0.75rem 0.75rem;
  border: 1px solid var(--color-line);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--color-sand);
  font: inherit;
  text-align: left;
  color: var(--color-ink-muted);
  cursor: pointer;
  hyphens: auto;
  transform: translateY(0.4rem);
  transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.deck__tab:hover,
.deck__tab.is-peek {
  background: var(--color-gold-soft);
  color: var(--color-blue-deep);
  transform: translateY(0);
}

.deck__tab[aria-selected="true"] {
  border-color: var(--color-gold-line);
  border-top: 3px solid var(--color-gold);
  background: var(--color-paper-raised);
  color: var(--color-blue-deep);
  /* Overlaps the top border of the front card, so tab and card join. */
  transform: translateY(1px);
}

.deck__tab:focus-visible {
  outline-offset: -4px;
}

.deck__num {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--color-gold-text);
}

.deck__name {
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.3;
}

.pillars.is-deck {
  grid-area: cards;
  display: grid;
  margin: 0;
  /* Room for the edges of the cards behind. */
  padding: 0 0.8rem 0.8rem 0;
  border-top: 0;
}

.pillars.is-deck .pillar {
  grid-area: 1 / 1;
  position: relative;
  isolation: isolate;
  display: block;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-gold-line);
  border-radius: var(--radius);
  background: var(--color-paper-raised);
  visibility: hidden;
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity 0.2s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

.pillars.is-deck .pillar.is-active {
  z-index: 1;
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.25s ease, transform 0.3s ease;
  /* Two cards behind the front card */
  box-shadow:
    0.4rem 0.4rem 0 -1px var(--color-sand),
    0.4rem 0.4rem 0 0 var(--color-gold-line),
    0.8rem 0.8rem 0 -1px var(--color-sand),
    0.8rem 0.8rem 0 0 var(--color-line);
}

/* Preview: the hovered card rises in front of the active one far enough to
   show its title and introduction (height --peek, measured by site.js). */
.pillars.is-deck .pillar.is-peek {
  z-index: 3;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.25s ease;
  border-color: transparent;
  background: none;
  pointer-events: none;
}

.pillars.is-deck .pillar.is-peek::before,
.pillars.is-deck .pillar.is-peek::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px -1px auto;
}

.pillars.is-deck .pillar.is-peek::before {
  height: calc(var(--peek, 8rem) + 1px);
  border: 1px solid var(--color-gold-line);
  border-bottom: 3px solid var(--color-gold);
  border-radius: var(--radius);
  background: var(--color-paper-raised);
}

.pillars.is-deck .pillar.is-peek::after {
  top: calc(var(--peek, 8rem) + 2px);
  height: 1.25rem;
  background: linear-gradient(rgba(11, 42, 74, 0.16), rgba(11, 42, 74, 0));
}

.pillars.is-deck .pillar.is-peek .pillar__body {
  visibility: hidden;
}

.is-deck .pillar__num,
.is-deck .questions {
  display: none;
}

.is-deck .pillar__head {
  padding-bottom: var(--space-3);
}

.is-deck .pillar__head h3 {
  margin-top: 0;
  font-size: var(--text-xl);
}

.is-deck .pillar__intro {
  margin-top: var(--space-2);
}

.is-deck .pillar__body {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-4) var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
}

.is-deck .pillar__body > :not(.area),
.is-deck .pillar__body > .area:nth-of-type(3) {
  grid-column: 1 / -1;
}

.is-deck .area {
  padding-left: var(--space-3);
  border-left: 3px solid transparent;
  font-size: var(--text-sm);
  line-height: 1.5;
  transition: border-color 0.2s ease;
}

.is-deck .area:hover {
  border-left-color: var(--color-line);
}

.is-deck .area.is-selected {
  border-left-color: var(--color-gold);
}

.area__ask {
  margin-top: var(--space-2);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--color-blue);
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--color-gold-line);
  text-underline-offset: 0.25em;
  cursor: pointer;
}

.area__ask:hover,
.area__ask[aria-pressed="true"] {
  color: var(--color-blue-deep);
  text-decoration-color: currentColor;
}

@media (max-width: 64rem) {
  .focus.is-deck {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "orbit" "tabs" "cards";
  }

  .focus.is-deck .orbit {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    grid-template-areas: "stage panel";
    gap: var(--space-5);
    margin-bottom: var(--space-6);
  }
}

@media (max-width: 40rem) {
  .focus.is-deck .orbit {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "stage" "panel";
  }

  .deck__tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 0.8rem var(--space-2) 0;
  }

  .deck__tab,
  .deck__tab[aria-selected="true"] {
    border-bottom: 1px solid var(--color-line);
    border-radius: var(--radius);
    transform: none;
  }

  .pillars.is-deck .pillar {
    padding: var(--space-4) var(--space-4) var(--space-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .deck__tab,
  .pillars.is-deck .pillar {
    transform: none !important;
  }
}

/* ---------- How I work ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  list-style: none;
  padding: 0;
}

.step {
  position: relative;
  padding-top: var(--space-6);
  border-top: 2px solid var(--color-blue-deep);
}

.step__num {
  position: absolute;
  top: -1.1rem;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--color-blue-deep);
  color: var(--color-gold);
  font-family: var(--font-serif);
  font-size: var(--text-base);
}

.step h4 {
  font-size: var(--text-xl);
  color: var(--color-blue-deep);
}

.step p {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

/* The groundwork has two steps; the tasks branch out below it. */
.steps--basis {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--space-6);
}

.approach__subhead {
  margin-top: var(--space-8);
}

.approach__intro {
  max-width: var(--width-prose);
  color: var(--color-ink-muted);
}

/* Skill symbols: line icons from assets/img/skills.svg */
.skill-icon {
  display: block;
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  overflow: visible;
  color: var(--color-blue-deep);
}

.skills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
  list-style: none;
  padding: 0;
}

.skills li {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-gold-line);
  border-radius: 50%;
  background: var(--color-paper-raised);
}

.skills-legend {
  margin-top: var(--space-7);
  padding: var(--space-5) clamp(1.25rem, 1rem + 2vw, 2rem);
  background: var(--color-paper-raised);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

.skills-legend p {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.skills-legend__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-4);
  list-style: none;
  padding: 0;
}

.skills-legend__list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.skills-legend__list .skill-icon {
  box-sizing: content-box;
  padding: 0.4rem;
  border: 1px solid var(--color-gold-line);
  border-radius: 50%;
}

/* The legend can be folded away; it starts open. */
.skills-legend__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  cursor: pointer;
  list-style: none;
}

.skills-legend__summary::-webkit-details-marker {
  display: none;
}

.skills-legend__summary::after {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.3rem;
  border-right: 2px solid var(--color-gold-text);
  border-bottom: 2px solid var(--color-gold-text);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.skills-legend__toggle[open] > .skills-legend__summary::after {
  transform: rotate(-135deg);
}

.skills-legend__summary h3 {
  margin: 0;
}

.skills-legend__summary:hover h3 {
  color: var(--color-blue);
}

.skills-legend__summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
  border-radius: var(--radius);
}

.skills-legend__toggle > p {
  margin-top: var(--space-2);
}

/* Sub-navigation of "How I work": sticky below the header and the pins. */
#approach [id] {
  scroll-margin-top: calc(var(--subnav-height) + var(--space-2));
}

.subnav {
  position: sticky;
  top: calc(var(--header-height) + var(--pins-height));
  z-index: 20;
  margin-top: var(--space-6);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-paper-raised) 90%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px -14px rgba(11, 42, 74, 0.5);
}

.subnav__list {
  display: flex;
  gap: var(--space-1);
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.subnav__list::-webkit-scrollbar {
  display: none;
}

.subnav__list li {
  flex: none;
}

.subnav a {
  position: relative;
  display: block;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.subnav a:hover {
  background: var(--color-gold-soft);
  color: var(--color-blue-deep);
}

.subnav a[aria-current="true"] {
  background: var(--color-blue-deep);
  color: var(--color-on-dark);
}

.subnav a[aria-current="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.15rem;
  width: 0.3rem;
  height: 0.3rem;
  background: var(--color-gold);
  transform: translateX(-50%) rotate(45deg);
}

.subnav a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .subnav a,
  .skills-legend__summary::after {
    transition: none;
  }
}

/* End of the section: where to go next */
.approach__next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
}

.approach__next-title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-text);
}

.approach__next-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.approach__next-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-blue-deep);
  border-radius: 999px;
  color: var(--color-blue-deep);
  font-weight: 700;
  text-decoration: none;
}

.approach__next-list a::after {
  content: "\2193";
  content: "\2193" / "";
  color: var(--color-gold-text);
}

.approach__next-list a:hover {
  background: var(--color-blue-deep);
  color: var(--color-on-dark);
}

.tasks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
  list-style: none;
  padding: 0;
}

.task {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background: var(--color-paper-raised);
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--color-gold-line);
  border-radius: var(--radius);
}

.task > h4,
.task__info > h4 {
  font-size: var(--text-lg);
  color: var(--color-blue-deep);
}

.task > p,
.task__info > p {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}

.task > .skills,
.task__info > .skills {
  margin-top: auto;
  padding-top: var(--space-4);
}

.task .task__refs {
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
}

.approach__note {
  margin-top: var(--space-6);
}

/* Film link at the end of each task card */
.task .task__film {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 700;
}

.task__film a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.task__film a::before {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--color-gold-line);
  border-radius: 50%;
  background: var(--color-paper)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 8l6 4-6 4z' fill='%231d5a8e'/%3E%3C/svg%3E")
    center / 100% no-repeat;
}

.task__film a:hover {
  text-decoration: underline;
}

/* Task stage (JavaScript only): the task cards as tabs in the order of the
   onion layers, each card with its film on the right. */
.task[hidden],
.tasks.is-stage .task[hidden] {
  display: none;
}

.stage__note {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}

.stage__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.stage__tab {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-paper);
  font: inherit;
  text-align: left;
  color: var(--color-ink-muted);
  cursor: pointer;
}

.stage__tab:hover {
  background: var(--color-gold-soft);
  color: var(--color-blue-deep);
}

.stage__tab[aria-selected="true"] {
  border-color: var(--color-blue-deep);
  background: var(--color-blue-deep);
  color: var(--color-on-dark);
}

.stage__tab:focus-visible {
  outline-offset: 2px;
}

.stage__tab-num {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--color-gold-text);
}

.stage__tab[aria-selected="true"] .stage__tab-num {
  color: var(--color-gold);
}

.stage__tab-name {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  hyphens: none;
}

/* Fixed line breaks in tab labels: only in the tabs, never inside the
   anchored term. */
br.tab-br {
  display: none;
}

.stage__tab br.tab-br {
  display: inline;
}

.tab-nobr {
  white-space: nowrap;
  hyphens: none;
}

.tasks.is-stage {
  display: block;
  margin-top: var(--space-3);
}

.tasks.is-stage .task {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

@media (min-width: 60rem) {
  .tasks.is-stage .task {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.7fr);
  }
}

.task__info {
  display: flex;
  flex-direction: column;
}

.tasks.is-stage .task__info > h4 {
  font-size: var(--text-xl);
}

.tasks.is-stage .task__info > .skills {
  margin-top: var(--space-4);
  padding-top: 0;
}

.tasks.is-stage .task__film {
  display: none;
}

.task__from {
  margin-top: var(--space-4);
}

.task__from-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-text);
}

.task__from .onion__chips {
  margin-top: var(--space-2);
}

/* The film next to its task: brief above the screen, without its own card. */
.tasks.is-stage .task .film {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

.tasks.is-stage .film__head {
  display: none;
}

.tasks.is-stage .film__brief h4 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.tasks.is-stage .film__brief {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.tasks.is-stage .film__brief p {
  margin-top: 0;
}

.tasks.is-stage .film__brief .film__label {
  order: -1;
}

.tasks.is-stage .film__brief .film__skills {
  margin-top: 0;
}

/* Sample assignments as silent films: split screen per film (brief on the
   left, the film on the right), one film at a time as tabs with JavaScript.
   Without JavaScript every film is shown with its shots as a list. */
.films {
  scroll-margin-top: calc(var(--header-height) + var(--pins-height) + var(--space-4));
}

.films__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.films__tab {
  flex: 1 1 8.5rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-paper);
  font: inherit;
  text-align: left;
  color: var(--color-ink-muted);
  cursor: pointer;
  hyphens: auto;
}

.films__tab:hover {
  background: var(--color-gold-soft);
  color: var(--color-blue-deep);
}

.films__tab[aria-selected="true"] {
  border-color: var(--color-blue-deep);
  background: var(--color-blue-deep);
  color: var(--color-on-dark);
}

.films__tab:focus-visible {
  outline-offset: 2px;
}

.films__tab-num {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--color-gold-text);
}

.films__tab[aria-selected="true"] .films__tab-num {
  color: var(--color-gold);
}

.films__tab-name {
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.3;
}

.film {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-5);
  padding: var(--space-5);
  background: var(--color-paper-raised);
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--color-gold-line);
  border-radius: var(--radius);
  scroll-margin-top: calc(var(--header-height) + var(--pins-height) + var(--space-4));
}

:is(.films.is-player, .tasks.is-stage) .film {
  margin-top: var(--space-3);
}

.film[hidden] {
  display: none;
}

@media (min-width: 60rem) {
  .film {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.6fr);
    gap: var(--space-6);
  }
}

.film__head {
  margin: 0;
}

.film__num {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-gold-line);
  border-radius: 50%;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  color: var(--color-gold-text);
}

.film__brief h4 {
  margin-top: var(--space-3);
  font-size: var(--text-xl);
  color: var(--color-blue-deep);
}

.film__brief p {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}

.film__brief .film__label {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--color-gold-soft);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-gold-text);
}

/* Skill symbols of the film; those used in the current shot light up. */
.film__skills li {
  transition: background-color 0.4s ease, border-color 0.4s ease, opacity 0.4s ease;
}

:is(.films.is-player, .tasks.is-stage) .film__skills li {
  opacity: 0.45;
}

:is(.films.is-player, .tasks.is-stage) .film__skills li.is-lit {
  opacity: 1;
  border-color: var(--color-gold);
  background: var(--color-gold-soft);
}

/* Stage: hidden without JavaScript */
.film__stage {
  display: none;
}

:is(.films.is-player, .tasks.is-stage) .film__stage {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  background: var(--color-film-stage);
}

.film__svg {
  display: block;
  width: 100%;
  height: 100%;
  transition: opacity 0.6s ease;
}

.film__stage.is-title .film__svg {
  opacity: 0.18;
}

/* Intertitle: calm, in the style of the page */
.film__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-5) 12%;
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 0.8rem + 1.4vw, 1.75rem);
  line-height: var(--leading-snug);
  text-align: center;
  color: var(--color-on-dark);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.film__overlay::before,
.film__overlay::after {
  content: "";
  justify-self: center;
  width: 3rem;
  border-top: 1px solid var(--color-gold);
}

.film__stage.is-title .film__overlay {
  opacity: 1;
}

/* Drawing parts: shown in the shots between data-from and data-to */
.film__svg [data-from] {
  opacity: 0;
  transform: translate(var(--dx, 0), var(--dy, 0));
  transition: opacity 0.7s ease, transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.film__svg [data-from].is-on {
  opacity: 1;
  transform: none;
}

.film__svg .f-l,
.film__svg .f-g,
.film__svg .f-m,
.film__svg .f-a {
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.film__svg .f-l { stroke: var(--color-film-line); }
.film__svg .f-g { stroke: var(--color-gold); }
.film__svg .f-m { stroke: var(--color-film-shared); }
.film__svg .f-a { stroke: var(--color-film-gap); }
.film__svg .f-fill-l { fill: var(--color-film-line); }
.film__svg .f-fill-g { fill: var(--color-gold); fill-opacity: 0.35; }
.film__svg .f-fill-m { fill: var(--color-film-shared); }
.film__svg .f-fill-a { fill: var(--color-film-gap); }
.film__svg .f-fill-soft { fill: var(--color-gold); fill-opacity: 0.15; }
.film__svg .f-dash { stroke-dasharray: 5 5; }
.film__svg .f-thick { stroke-width: 3; }
.film__svg .f-thin { stroke-width: 0.8; opacity: 0.6; }

.film__svg .f-t,
.film__svg .f-tag,
.film__svg .f-sym {
  font-family: var(--font-sans);
  font-weight: 600;
  text-anchor: middle;
}

.film__svg .f-t {
  font-size: 13px;
  fill: var(--color-film-line);
}

.film__svg .f-tag {
  font-size: 9px;
  fill: var(--color-gold-light);
}

.film__svg .f-sym {
  font-family: var(--font-serif);
  font-size: 22px;
  fill: var(--color-film-line);
}

/* Flow along a line: a change or correction travelling */
.film__svg .f-flow {
  stroke-width: 2.4;
  stroke-dasharray: 3 9;
}

.film__svg .is-on .f-flow {
  animation: film-flow 1.4s linear infinite;
}

@keyframes film-flow {
  to {
    stroke-dashoffset: -24;
  }
}

/* Caption below the stage */
.film__caption {
  min-height: 5.5rem;
  margin-top: var(--space-4);
}

.film__caption p {
  margin: 0;
}

.film__phase {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gold-text);
}

.film__caption .film__text {
  margin-top: var(--space-2);
}

/* The intertitle is on the stage; the caption keeps it for screen readers. */
.film__caption.is-title {
  position: relative;
}

.film__caption.is-title .film__intertitle {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.film__dots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.film__dot {
  width: 1.75rem;
  height: 0.5rem;
  padding: 0;
  border: 1px solid var(--color-blue);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.film__dot.is-done {
  background: var(--color-blue-mist);
}

.film__dot[aria-current="step"] {
  border-color: var(--color-gold-text);
  background: var(--color-gold);
}

/* The dots are small to look at; the hit area is larger. */
.film__dot {
  position: relative;
}

.film__dot::after {
  content: "";
  position: absolute;
  inset: -0.6rem -0.15rem;
}

.film__controls {
  margin-top: var(--space-4);
}

/* Arrow at the Play button after a film tab is opened, until a control is
   used. It sits above the button and may cover the shot buttons meanwhile. */
.film__cue-wrap {
  position: relative;
  display: inline-flex;
}

.film__cue {
  position: absolute;
  bottom: calc(100% + 0.25rem);
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  transform: translateX(-50%);
  pointer-events: none;
  animation: film-cue 1.1s ease-in-out infinite;
}

.film__cue[hidden] {
  display: none;
}

.film__cue-text {
  padding: 0.45rem 0.95rem;
  border: 2px solid var(--color-gold);
  border-radius: 999px;
  background: var(--color-blue-deep);
  box-shadow: 0 6px 18px rgba(11, 30, 51, 0.28);
  font-size: var(--text-lg);
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-gold-light);
}

.film__cue-arrow {
  width: 2.25rem;
  height: 2.75rem;
  fill: none;
  stroke: var(--color-gold-text);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes film-cue {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 0.5rem); }
}

/* Without JavaScript: the shots as a numbered list */
.film__shots {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding-left: 1.5rem;
  font-size: var(--text-sm);
}

.film__shots p {
  margin: 0;
}

.film__intertitle {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-blue-deep);
}

:is(.films.is-player, .tasks.is-stage) .film__shots {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .film__svg,
  .film__overlay,
  .film__svg [data-from],
  .film__skills li {
    transition: none;
  }
  .film__svg .is-on .f-flow,
  .film__cue {
    animation: none;
  }
}

@media print {
  .task[hidden] {
    display: flex;
  }
  .stage__tabs,
  .subnav,
  .films__tabs,
  .film__stage,
  .film__caption,
  .film__dots,
  .film__controls {
    display: none !important;
  }
  .film[hidden] {
    display: grid;
  }
  :is(.films.is-player, .tasks.is-stage) .film__shots {
    display: grid;
  }
}

.solo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: var(--space-7);
  padding: clamp(1.5rem, 1rem + 3vw, 3rem);
  background: var(--color-paper-raised);
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--color-gold-line);
  border-radius: var(--radius);
}

.solo h3 {
  margin-top: var(--space-4);
  font-size: var(--text-2xl);
  color: var(--color-blue-deep);
}

.solo__list {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
}

.solo__list li {
  padding-left: var(--space-5);
  border-left: 1px solid var(--color-gold-line);
}

.solo__list strong {
  color: var(--color-blue-deep);
}

@media (max-width: 60rem) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-7);
  }

  .solo {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

@media (max-width: 36rem) {
  .steps {
    grid-template-columns: 1fr;
  }
}

/* Onion of the tasks ("How I work"): the groundwork at the core, the tasks
   as layers, framed by the requirements of the departments. The bulb and the
   panel are built by site.js; without JavaScript the departments are a list
   of cards. */
.onion {
  margin-top: var(--space-8);
}

.onion__body {
  margin-top: var(--space-6);
}

.onion__frame-title {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-text);
}

.onion__ring {
  position: relative;
  margin-top: var(--space-4);
}

.onion__frame {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-4);
  list-style: none;
  padding: 0;
}

.stakeholder {
  padding: var(--space-4);
  background: var(--color-paper-raised);
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-gold-line);
  border-radius: var(--radius);
  font-size: var(--text-sm);
}

.stakeholder strong {
  display: block;
  color: var(--color-blue-deep);
}

.stakeholder__req {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-ink-muted);
}

/* With JavaScript: the departments frame the bulb, four on each side and
   one beneath the root. The empty first grid item keeps the space of the
   bulb in the middle column. */
.onion.is-live .onion__frame {
  grid-template-columns: minmax(0, 1fr) 40% minmax(0, 1fr);
  grid-template-rows: repeat(4, auto) auto;
  /* Each department takes the first free row of its column. */
  grid-auto-flow: row dense;
  gap: var(--space-3) var(--space-4);
  align-items: center;
}

.onion.is-live .onion__frame::before {
  content: "";
  grid-column: 2;
  grid-row: 1 / 5;
  aspect-ratio: 400 / 450;
}

.onion.is-live .stakeholder:nth-child(-n + 4) {
  grid-column: 1;
}

.onion.is-live .stakeholder:nth-child(n + 5) {
  grid-column: 3;
}

.onion.is-live .stakeholder:nth-child(9) {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, 24rem);
  text-align: center;
}

.onion.is-live .stakeholder {
  position: relative;
  padding: 0;
  border-left-width: 1px;
  transition: background-color 0.2s, border-color 0.2s, opacity 0.2s;
}

.onion.is-live .stakeholder__req {
  display: none;
}

/* Gold thread from each department towards the onion */
.onion.is-live .stakeholder::after {
  content: "";
  position: absolute;
  top: 50%;
  width: var(--space-4);
  border-top: 1px solid var(--color-gold-line);
}

.onion.is-live .stakeholder:nth-child(-n + 4)::after {
  left: 100%;
}

.onion.is-live .stakeholder:nth-child(n + 5)::after {
  right: 100%;
}

.onion.is-live .stakeholder:nth-child(9)::after {
  top: auto;
  bottom: 100%;
  left: 50%;
  width: 0;
  height: var(--space-3);
  border-top: 0;
  border-left: 1px solid var(--color-gold-line);
}

.stakeholder__btn {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: inherit;
  background: none;
  color: var(--color-blue-deep);
  font: inherit;
  font-weight: 600;
  line-height: 1.3;
  text-align: inherit;
  cursor: pointer;
}

.stakeholder__btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.stakeholder.is-related {
  background: var(--color-gold-soft);
  border-color: var(--color-gold-line);
}

.stakeholder.is-on {
  background: var(--color-blue-deep);
  border-color: var(--color-blue-deep);
}

.stakeholder.is-on .stakeholder__btn {
  color: var(--color-on-dark);
}

.stakeholder.is-dim {
  opacity: 0.55;
}

.onion__bulb {
  position: absolute;
  top: 0;
  left: 30%;
  width: 40%;
  aspect-ratio: 400 / 450;
}

.onion__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.onion__deco path {
  fill: none;
  stroke: var(--color-gold-line);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.onion__layer {
  fill: var(--color-paper-raised);
  stroke: var(--color-gold-line);
  stroke-width: 1.5;
  cursor: pointer;
  transition: fill 0.2s, opacity 0.2s;
}

.onion__layer--odd {
  fill: var(--color-blue-mist);
}

.onion__layer--core {
  fill: var(--color-gold-soft);
  stroke: var(--color-gold-text);
}

.onion__layer.is-peek {
  fill: var(--color-gold-soft);
}

.onion__layer.is-related {
  fill: var(--color-gold-soft);
  stroke: var(--color-gold-text);
}

.onion__layer.is-on {
  fill: var(--color-blue-deep);
  stroke: var(--color-blue-deep);
}

.onion__layer.is-dim:not(.is-peek) {
  opacity: 0.45;
}

.onion__nums text {
  font-family: var(--font-serif);
  font-size: 13px;
  fill: var(--color-ink-muted);
  pointer-events: none;
}

.onion__nums text.is-on {
  fill: var(--color-gold);
}

.onion__tip {
  position: absolute;
  top: 0;
  left: 50%;
  width: max-content;
  max-width: 16rem;
  margin: 0;
  padding: 0.35rem 0.7rem;
  transform: translate(-50%, -30%);
  border-radius: var(--radius);
  background: var(--color-blue-deep);
  color: var(--color-on-dark);
  font-size: var(--text-xs);
  font-weight: 600;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}

.onion__tip.is-shown {
  opacity: 1;
}

.onion__tip-num {
  color: var(--color-gold);
}

/* Panel */
.onion__panel {
  padding: var(--space-5);
  background: var(--color-paper-raised);
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--color-gold-line);
  border-radius: var(--radius);
}

.onion__layers,
.onion__chips,
.onion__steps {
  display: grid;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
}

.onion__choice,
.onion__chip,
.onion__reset {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  width: 100%;
  padding: 0.35rem 0.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  color: var(--color-blue-deep);
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
}

.onion__choice:hover,
.onion__chip:hover {
  border-color: var(--color-gold-line);
}

.onion__choice.is-related {
  background: var(--color-gold-soft);
}

.onion__choice[aria-pressed="true"] {
  background: var(--color-blue-deep);
  color: var(--color-on-dark);
}

.onion__choice:focus-visible,
.onion__chip:focus-visible,
.onion__reset:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.onion__n {
  flex: none;
  min-width: 1.2em;
  font-family: var(--font-serif);
  color: var(--color-gold-text);
  text-align: center;
}

.onion__sub {
  display: grid;
  gap: 2px;
  margin: 2px 0 var(--space-1) 1.6rem;
  padding-left: var(--space-2);
  border-left: 1px solid var(--color-gold-line);
  list-style: none;
}

.onion__sub .onion__choice {
  padding-block: 0.2rem;
}

.onion__steps li {
  padding: var(--space-2) var(--space-3);
  margin-inline: calc(-1 * var(--space-3));
  border-left: 3px solid transparent;
  border-radius: var(--radius);
}

.onion__steps li.is-on {
  border-left-color: var(--color-gold-line);
  background: var(--color-gold-soft);
}

.onion__choice[aria-pressed="true"] .onion__n,
.onion__title-num {
  color: var(--color-gold);
}

.onion__detail {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
}

.onion__hint {
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

.onion__title {
  font-size: var(--text-lg);
  color: var(--color-blue-deep);
}

.onion__title-num {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-text);
}

.onion__text,
.onion__steps p {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}

.onion__steps {
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.onion__steps h5 {
  display: flex;
  gap: var(--space-2);
  font-size: var(--text-base);
  color: var(--color-blue-deep);
}

.onion__links {
  margin-top: var(--space-4);
}

.onion__links-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-text);
}

.onion__chips {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.onion__chip {
  width: auto;
  border-color: var(--color-gold-line);
  font-size: var(--text-xs);
}

.onion__film {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 700;
}

.onion__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-4);
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--color-blue-deep);
  border-radius: 999px;
  background: var(--color-blue-deep);
  color: var(--color-on-dark);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
}

.onion__more::after {
  content: "\2193";
  content: "\2193" / "";
  color: var(--color-gold);
}

.onion__more:hover {
  background: var(--color-blue);
}

.onion__more:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.onion__next {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
}

.onion__reset {
  width: auto;
  margin-top: var(--space-4);
  padding-left: 0;
  color: var(--color-blue);
  font-size: var(--text-xs);
  text-decoration: underline;
}

@media (min-width: 64rem) {
  .onion.is-live .onion__body {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(16rem, 1fr);
    gap: var(--space-6);
    align-items: start;
  }
}

@media (max-width: 63.99rem) {
  .onion__panel {
    margin-top: var(--space-6);
  }
}

/* Narrow screens: the bulb on top, the departments in two columns below. */
@media (max-width: 40rem) {
  .onion.is-live .onion__frame {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .onion.is-live .onion__frame::before {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    width: 80%;
    margin-bottom: var(--space-5);
  }

  .onion.is-live .stakeholder:nth-child(n) {
    grid-column: auto;
  }

  .onion.is-live .stakeholder:nth-child(9) {
    grid-column: 1 / -1;
  }

  .onion.is-live .stakeholder::after {
    display: none;
  }

  .onion__bulb {
    left: 10%;
    width: 80%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .onion__layer,
  .onion.is-live .stakeholder,
  .onion__tip {
    transition: none;
  }
}

/* ---------- Publications ---------- */

.resources {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.resource {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-paper-raised);
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--color-blue-deep);
  border-radius: var(--radius);
}

.resource__type {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold-text);
}

.resource h3 {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}

.resource h3 a {
  color: var(--color-ink);
  text-decoration: none;
}

.resource h3 a:hover {
  color: var(--color-blue);
  text-decoration: underline;
}

.resource__desc {
  font-size: var(--text-sm);
}

.resource__meta {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.ecosystem {
  margin-top: var(--space-8);
}

.ecosystem h3 {
  font-size: var(--text-2xl);
}

.ecosystem__intro {
  margin-top: var(--space-3);
  max-width: var(--width-prose);
  color: var(--color-ink-muted);
}

.ecosystem__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-7);
  margin-top: var(--space-6);
  list-style: none;
  padding: 0;
}

.ecosystem__item {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-line);
}

.ecosystem__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-serif);
  font-size: var(--text-lg);
}

.ecosystem__item p {
  font-size: var(--text-sm);
}

.status {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.status--live {
  background: var(--color-blue-mist);
  color: var(--color-blue);
}

.status--planned,
.status--progress {
  background: var(--color-gold-soft);
  color: var(--color-gold-text);
}

@media (max-width: 52rem) {
  .resources,
  .ecosystem__list {
    grid-template-columns: 1fr;
  }
}

/* Newsletter teaser in the publications section */
.newsletter-teaser {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-6);
  background: var(--color-blue-mist);
  border-left: 3px solid var(--color-gold-line);
  border-radius: var(--radius);
}

.newsletter-teaser h3 {
  font-size: var(--text-2xl);
}

.newsletter-teaser h3 a {
  color: var(--color-ink);
  text-decoration: none;
}

.newsletter-teaser h3 a:hover {
  color: var(--color-blue);
  text-decoration: underline;
}

.newsletter-teaser__desc {
  max-width: var(--width-prose);
}

.newsletter-teaser__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* ---------- Newsletter page ---------- */

.hero--page {
  padding-block: clamp(3rem, 2rem + 5vw, 6rem) var(--space-8);
}

.hero__name--page {
  margin-top: var(--space-4);
  font-size: var(--text-3xl);
  font-weight: 400;
  letter-spacing: -0.015em;
}

.hero--page .hero__claim {
  margin-top: var(--space-5);
  max-width: 34rem;
  font-style: italic;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--color-gold-light);
}

.clipping-filter {
  margin-bottom: var(--space-6);
}

.clipping-filter__label {
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
}

.clipping-filter__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
}

.clipping-filter__button {
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-paper-raised);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-ink);
  cursor: pointer;
}

.clipping-filter__button:hover {
  border-color: var(--color-blue);
}

.clipping-filter__button[aria-pressed="true"] {
  border-color: var(--color-blue-deep);
  background: var(--color-blue-deep);
  color: var(--color-on-dark);
}

.clipping-filter__empty {
  margin-bottom: var(--space-6);
  color: var(--color-ink-muted);
}

.clippings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  list-style: none;
  padding: 0;
}

.clipping {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-paper-raised);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

.clipping[hidden] {
  display: none;
}

.clipping__media {
  display: block;
  aspect-ratio: 1116 / 628;
  background: var(--color-blue-deep);
}

.clipping__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.clipping__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border-top: 3px solid var(--color-blue-deep);
}

.clipping__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-text);
}

.clipping__meta .status {
  text-transform: none;
}

.clipping__title {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.clipping__title a {
  color: var(--color-ink);
  text-decoration: none;
}

.clipping__title a:hover {
  color: var(--color-blue);
  text-decoration: underline;
}

.clipping__summary {
  font-size: var(--text-sm);
}

.clipping__link {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-sm);
  font-weight: 600;
}

.clipping__link a::after {
  content: " →";
}

@media (max-width: 64rem) {
  .clippings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 40rem) {
  .clippings {
    grid-template-columns: 1fr;
  }
}

/* ---------- Concept work ---------- */

.concepts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-7);
}

.concepts__intro {
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.dev-list--split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-6);
}

.dev-item h4 a {
  color: var(--color-ink);
  text-decoration: none;
}

.dev-item h4 a:hover {
  color: var(--color-blue);
  text-decoration: underline;
}

.dev-item .dev-item__meta {
  font-size: var(--text-xs);
}

@media (max-width: 60rem) {
  .concepts {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

@media (max-width: 40rem) {
  .dev-list--split {
    grid-template-columns: 1fr;
  }
}

/* ---------- Professional development ---------- */

.dev-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.subhead {
  margin-bottom: var(--space-3);
  font-size: var(--text-xl);
  color: var(--color-blue-deep);
}

.dev-list {
  display: grid;
  list-style: none;
  padding: 0;
}

.dev-item {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-gold-line);
}

.dev-item h4 {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.dev-item p {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.dev-item .status {
  justify-self: start;
}

.dev-note {
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-gold-line);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.dev-note ol {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-left: 1.25em;
}

@media (max-width: 60rem) {
  .dev-columns {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

/* ---------- About ---------- */

.about {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--space-8);
}

.about__facts {
  display: grid;
  gap: var(--space-5);
  align-content: start;
  padding: var(--space-6);
  background: var(--color-sand);
  border-left: 3px solid var(--color-gold-line);
  border-radius: var(--radius);
}

.about__facts dt {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold-text);
}

.about__facts dd {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
}

@media (max-width: 52rem) {
  .about {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* ---------- Collaboration ---------- */

.regions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.region {
  padding: var(--space-6);
  border: 1px solid var(--color-line-on-dark);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
}

.region h3 {
  font-size: var(--text-2xl);
}

.region__scope {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-gold);
}

.region p:not(.region__scope) {
  margin-top: var(--space-4);
  color: var(--color-on-dark);
}

/* Contact sits in the regions row so that both fit on one screen. */
.contact {
  display: flex;
  flex-direction: column;
  border-color: var(--color-gold);
  background: rgba(212, 181, 106, 0.06);
}

.region.contact p:not(.contact__mail) {
  color: var(--color-on-dark-muted);
}

.region.contact .contact__mail {
  margin-top: auto;
  padding-top: var(--space-5);
}

#collaboration .section-head {
  margin-bottom: var(--space-6);
}

/* Availability: two time windows on one line, like a project plan. */
.availability {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-bottom: var(--space-5);
}

.availability h3 {
  font-size: var(--text-xl);
}

.availability__windows {
  display: flex;
  flex: 1 1 32rem;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.availability__windows li {
  flex: 1 1 0;
  padding: var(--space-3) var(--space-5);
  border-top: 3px solid var(--color-gold);
  background: rgba(255, 255, 255, 0.04);
}

.availability__when {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-gold);
}

.availability__what {
  margin-top: var(--space-1);
  color: var(--color-on-dark);
}

@media (max-width: 40rem) {
  .availability__windows {
    flex-direction: column;
  }
}

@media (max-width: 64rem) {
  .regions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact {
    grid-column: 1 / -1;
  }
}

@media (max-width: 52rem) {
  .regions {
    grid-template-columns: 1fr;
  }
}

/* ---------- Legal notice and privacy policy ---------- */

.legal h2 {
  font-size: var(--text-2xl);
}

.legal section + section {
  margin-top: var(--space-9);
  padding-top: var(--space-7);
  border-top: 1px solid var(--color-line);
}

.legal h3 {
  margin-top: var(--space-6);
  font-size: var(--text-lg);
}

.legal p,
.legal ul,
.legal address {
  margin-top: var(--space-3);
}

.legal ul {
  padding-left: 1.25rem;
}

.legal li + li {
  margin-top: var(--space-1);
}

.legal__address {
  font-style: normal;
}

.legal__hint {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

/* Email button: opens the visitor's email program (mailto link). */
.mail-link {
  overflow-wrap: anywhere;
}

.mail-link__icon {
  flex: none;
}

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

.site-footer {
  padding-block: var(--space-7);
  background: var(--color-blue-night);
  border-top: 1px solid var(--color-line-on-dark);
  color: var(--color-on-dark-muted);
  font-size: var(--text-sm);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-5);
}

.site-footer a {
  color: var(--color-on-dark);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  list-style: none;
  padding: 0;
}

/* ---------- Print ---------- */

@media print {
  .site-header,
  .hero__figure,
  .hero__actions {
    display: none;
  }

  .hero,
  .career,
  .section--dark {
    background: none;
    color: var(--color-ink);
  }

  .hero *,
  .career .eyebrow,
  .section--dark h2,
  .section--dark h3,
  .section--dark p,
  .section--dark a {
    color: var(--color-ink) !important;
  }

  .lanes__name,
  .lanes__label,
  .lanes__date,
  .lanes__tick {
    fill: var(--color-ink);
  }

  .lanes__bar,
  .lanes__dot {
    fill: var(--color-gold-text);
  }

  .lanes__early,
  .lanes__ring {
    stroke: var(--color-gold-text);
  }
}

/* ---------- Technical Documentation Expertise: overview ---------- */

.cases {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
  gap: var(--space-5);
  list-style: none;
  padding: 0;
}

.case-card {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--color-gold-line);
  border-radius: var(--radius);
  background: var(--color-paper-raised);
}

.case-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.case-card h3 {
  font-size: var(--text-xl);
}

.case-card h3 a {
  color: var(--color-ink);
  text-decoration: none;
}

.case-card h3 a:hover {
  color: var(--color-blue);
  text-decoration: underline;
}

.case-card__link {
  font-weight: 600;
}

.case-card__link a::after {
  content: " →";
}

/* Walkthrough film on the overview: self-hosted, plays only on request. */

.film-walk {
  display: grid;
  gap: var(--space-4);
  max-width: 60rem;
}

.film-walk__media {
  margin: 0;
}

.film-walk__media video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--color-gold-line);
  border-radius: var(--radius);
  background: var(--color-blue-deep);
}

.film-walk__media figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.film-walk__note {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.film-walk__details summary {
  cursor: pointer;
  font-weight: 600;
}

.film-walk__transcript {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding-left: var(--space-5);
}

/* ---------- Case note: the watertight door ---------- */

.door-case {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-6) var(--space-7);
  align-items: start;
}

.scene {
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-paper-raised);
}

.scene__svg {
  display: block;
  width: 100%;
  height: auto;
}

.scene__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-3);
  list-style: none;
  padding: 0;
  font-size: var(--text-sm);
}

.scene__legend li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.scene__num {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--color-blue-deep);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-on-dark);
}

/* Drawing. States are set as data attributes on the SVG by site.js; the
   template values show the normal state. */
.scene__svg * {
  transition: transform 0.9s ease, opacity 0.5s ease, fill 0.4s ease, stroke 0.4s ease;
}

.scene__corridor { fill: var(--color-sand); }
.scene__wall { fill: var(--color-blue-mist); stroke: var(--color-line); }
.scene__frame { fill: none; stroke: var(--color-blue-deep); stroke-width: 4; }
.scene__deck { stroke: var(--color-ink-muted); stroke-width: 2; }
.scene__door rect { fill: var(--color-blue); }
.scene__door path { stroke: rgba(255, 255, 255, 0.35); stroke-width: 3; }
.scene__door { transform: translateX(0); }
.scene__svg[data-door="open"] .scene__door,
.scene__svg[data-door="closing"] .scene__door { transform: translateX(-150px); }

.scene__pipe { fill: none; stroke: var(--color-energy); stroke-width: 6; stroke-linejoin: round; }
.scene__accu rect { fill: var(--color-energy-soft); stroke: var(--color-energy); stroke-width: 3; }
.scene__gauge { fill: var(--color-paper-raised); stroke: var(--color-energy); stroke-width: 3; }
.scene__needle path { stroke: var(--color-ink); stroke-width: 3; stroke-linecap: round; }
.scene__needle { transform-origin: 680px 190px; transform: rotate(55deg); }
.scene__hub { fill: var(--color-ink); }
.scene__svg[data-pressure="zero"] .scene__pipe,
.scene__svg[data-pressure="zero"] .scene__gauge,
.scene__svg[data-pressure="zero"] .scene__accu rect { stroke: var(--color-ink-muted); }
.scene__svg[data-pressure="zero"] .scene__accu rect { fill: var(--color-line); }
.scene__svg[data-pressure="zero"] .scene__needle { transform: rotate(-115deg); }

.scene__check circle { fill: var(--color-blue-deep); }
.scene__check path { fill: none; stroke: var(--color-gold-light); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.scene__check { opacity: 0; }
.scene__svg[data-verified="on"] .scene__check { opacity: 1; }

.scene__board rect:first-child { fill: var(--color-paper-raised); stroke: var(--color-blue-deep); stroke-width: 2; }
.scene__led { fill: #3f8f5a; }
.scene__switch { fill: var(--color-blue-deep); }
.scene__svg[data-power="off"] .scene__led { fill: var(--color-line); stroke: var(--color-ink-muted); }
.scene__lock path, .scene__lock rect { fill: none; stroke: var(--color-ink); stroke-width: 3; }
.scene__lock rect { fill: var(--color-gold-line); }
.scene__lock .scene__lock-tag { fill: var(--color-gold-soft); stroke-width: 2; }
.scene__lock { opacity: 0; }
.scene__svg[data-lock="on"] .scene__lock { opacity: 1; }

.scene__lamp circle { fill: #e9b949; stroke: var(--color-blue-deep); stroke-width: 2; }
.scene__svg[data-alarm="dark"] .scene__lamp circle,
.scene__svg[data-alarm="silent"] .scene__lamp circle { fill: var(--color-line); }
.scene__silent path { fill: none; stroke: var(--color-ink-muted); stroke-width: 3; stroke-linecap: round; }
.scene__silent .scene__cross { stroke: var(--color-energy); }
.scene__silent { opacity: 0; }
.scene__svg[data-alarm="silent"] .scene__silent { opacity: 1; }

.scene__lever-base circle { fill: var(--color-blue-deep); }
.scene__lever path { stroke: var(--color-blue-deep); stroke-width: 8; stroke-linecap: round; }
.scene__lever circle { fill: var(--color-blue-deep); }
.scene__lever { transform-origin: 500px 260px; transform: rotate(0); }
.scene__svg[data-lever="open"] .scene__lever { transform: rotate(35deg); }
.scene__svg[data-lever="close"] .scene__lever { transform: rotate(-35deg); }
.scene__stopper rect { fill: var(--color-gold-line); stroke: var(--color-ink); stroke-width: 2; }
.scene__svg[data-stopper="out"] .scene__stopper { transform: translate(44px, 64px); }

.scene__tag path { fill: var(--color-gold-soft); stroke: var(--color-ink); stroke-width: 2; }
.scene__tag { opacity: 0; }
.scene__svg[data-tag="on"] .scene__tag { opacity: 1; }

.scene__closing path { fill: none; stroke: var(--color-energy); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.scene__closing { opacity: 0; }
.scene__svg[data-door="closing"] .scene__closing { opacity: 1; }

.scene__barrier rect { fill: url(#scene-stripes); stroke: var(--color-ink); stroke-width: 2; }
.scene__stripe { fill: var(--color-gold-line); }
.scene__barrier path { stroke: var(--color-ink); stroke-width: 4; }
.scene__barrier { opacity: 0; }
.scene__svg[data-barrier="on"] .scene__barrier { opacity: 1; }

.scene__person { fill: var(--color-ink-muted); opacity: 0; transform: translate(760px, 400px); }
.scene__svg[data-person="panel"] .scene__person { opacity: 1; transform: translate(205px, 400px); }
.scene__svg[data-person="away"] .scene__person { opacity: 0.25; transform: translate(770px, 400px); }
.scene__svg[data-person="lever"] .scene__person { opacity: 1; transform: translate(560px, 400px); }
.scene__svg[data-person="frame"] .scene__person { opacity: 1; transform: translate(375px, 400px); }
.scene__svg[data-person="accu"] .scene__person { opacity: 1; transform: translate(760px, 400px); }

.scene__focus circle { fill: none; stroke: var(--color-gold-text); stroke-width: 3; stroke-dasharray: 6 6; }
.scene__focus { opacity: 0; }
.scene__svg[data-analysis="on"] .scene__focus { opacity: 1; }

.scene__dim { fill: var(--color-blue-deep); opacity: 0; pointer-events: none; }
.scene__svg[data-dim="on"] .scene__dim { opacity: 0.45; }

.scene__marker circle { fill: var(--color-blue-deep); }
.scene__marker text { fill: var(--color-on-dark); font-family: var(--font-sans); font-size: 14px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }

/* Steps: a plain list without JavaScript, a player with JavaScript */
.door-case__steps {
  display: grid;
  gap: var(--space-6);
}

.door-seq h3 {
  font-size: var(--text-xl);
  color: var(--color-blue-deep);
}

.door-seq__note {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.door-steps {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-left: 1.4rem;
}

.door-steps h4 {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-blue);
}

.door-steps p {
  margin-top: var(--space-1);
}

.door-case[hidden],
.door-case__ui[hidden] {
  display: none;
}

.door-case.is-player .door-case__steps {
  display: none;
}

.player {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.player__seqs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.player__seq {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--color-gold-line);
  border-radius: 999px;
  background: var(--color-paper);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-blue-deep);
  cursor: pointer;
}

.player__seq[aria-pressed="true"] {
  border-color: var(--color-blue-deep);
  background: var(--color-blue-deep);
  color: var(--color-gold-light);
}

.player__note {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.player__steps {
  display: flex;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
}

.player__step {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: var(--color-paper-raised);
  font: inherit;
  font-weight: 700;
  color: var(--color-blue);
  cursor: pointer;
}

.player__step.is-done {
  border-color: var(--color-gold-line);
  background: var(--color-gold-soft);
}

.player__step[aria-current="step"] {
  border-color: var(--color-blue-deep);
  background: var(--color-blue-deep);
  color: var(--color-gold-light);
}

.player__text {
  min-height: 9rem;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--color-gold-line);
  background: var(--color-paper-raised);
}

.player__title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-blue-deep);
}

.player__text p {
  margin-top: var(--space-2);
}

.player__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.player__controls .button {
  padding-block: 0.45rem;
}

.player__controls .button[disabled] {
  opacity: 0.45;
  cursor: default;
}

.player__chain-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gold-text);
}

.player__chain {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-2);
  list-style: none;
  padding: 0;
  font-size: var(--text-sm);
}

.player__chain a {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius);
  color: var(--color-ink-muted);
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.player__chain a:hover {
  text-decoration: underline;
}

.player__chain .is-broken a {
  background: var(--color-energy-soft);
  color: var(--color-ink);
  font-weight: 600;
}

.is-holding .player__chain .is-broken a {
  background: var(--color-gold-soft);
}

.player__chain-num {
  font-family: var(--font-serif);
  color: var(--color-gold-text);
}

/* Stopper: assumed and actual purpose */
.beliefs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.belief {
  margin: 0;
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-paper-raised);
}

.belief[data-view="actual"] {
  border-top: 3px solid var(--color-gold-line);
}

.belief__svg {
  display: block;
  width: 100%;
  max-width: 18rem;
  height: auto;
  margin-bottom: var(--space-4);
}

.belief h3 {
  font-size: var(--text-xl);
  color: var(--color-blue-deep);
}

.belief p {
  margin-top: var(--space-2);
}

.belief__door { fill: var(--color-blue); }
.belief__opening { fill: var(--color-sand); stroke: var(--color-blue-deep); stroke-width: 3; }
.belief__base { fill: var(--color-blue-deep); }
.belief__lever { stroke: var(--color-blue-deep); stroke-width: 7; stroke-linecap: round; }
.belief__stopper { fill: var(--color-gold-line); stroke: var(--color-ink); stroke-width: 2; }
.belief__arrow { fill: none; stroke: var(--color-ink-muted); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.belief__x { stroke: var(--color-ink); stroke-width: 3; stroke-linecap: round; }
.belief__energy { fill: var(--color-energy-soft); stroke: var(--color-energy); stroke-width: 3; }

.beliefs__switch {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.beliefs.is-toggle {
  grid-template-columns: minmax(0, 1fr);
  max-width: 40rem;
}

.beliefs.is-toggle .belief:not(.is-shown) {
  display: none;
}

.beliefs__note {
  margin-top: var(--space-5);
  max-width: var(--width-prose);
}

/* The chain */
.chain {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  list-style: none;
  padding: 0;
  counter-reset: chain;
}

.chain__link {
  position: relative;
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-paper-raised);
  counter-increment: chain;
}

.chain__link::before {
  content: counter(chain, decimal-leading-zero);
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--color-gold-text);
}

.chain__link:target {
  border-color: var(--color-energy);
  box-shadow: 0 0 0 3px var(--color-energy-soft);
}

.chain__link h3 {
  margin-top: var(--space-3);
  font-size: var(--text-lg);
  color: var(--color-blue-deep);
}

.chain__link p {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
}

.checklist {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-left: 1.25rem;
}

.case-note__roles {
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--color-blue-mist);
  font-size: var(--text-sm);
}

.case-source {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-sm);
}

.case-source h3 {
  font-size: var(--text-lg);
}

.case-source p {
  margin-top: var(--space-2);
}

@media (max-width: 64rem) {
  .door-case {
    grid-template-columns: minmax(0, 1fr);
  }

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

@media (max-width: 40rem) {
  .beliefs,
  .chain {
    grid-template-columns: minmax(0, 1fr);
  }
}

.prose > h2 + * {
  margin-top: var(--space-4);
}

/* ---------- Case note: five open doors (train at a platform, top view) ---------- */

/* States are set as data attributes on the SVG by site.js; the template
   values show the first step. Doors are numbered from the rear (1) to the
   one behind the leading cab (6). */
.rail__bed { fill: var(--color-blue-mist); }
.rail__rails { stroke: var(--color-line); stroke-width: 4; }
.rail__platform { fill: var(--color-sand); }
.rail__edge { stroke: var(--color-ink-muted); stroke-width: 2; }
.rail__marking { stroke: var(--color-gold-line); stroke-width: 3; stroke-dasharray: 10 8; }

.rail__room rect:first-child { fill: var(--color-paper-raised); stroke: var(--color-blue-deep); stroke-width: 2; }
.rail__screen { fill: var(--color-blue-mist); stroke: var(--color-blue); stroke-width: 2; }
.rail__staff { fill: var(--color-ink-muted); }
.rail__auth { fill: none; stroke: var(--color-gold-text); stroke-width: 3; stroke-dasharray: 5 5; opacity: 0; }
.scene__svg[data-auth="on"] .rail__auth { opacity: 1; }

.rail__call { fill: none; stroke: var(--color-blue); stroke-width: 3; stroke-dasharray: 7 6; opacity: 0; }
.scene__svg[data-call="control"] .rail__call--control,
.scene__svg[data-call="signaller"] .rail__call--signaller,
.scene__svg[data-call="both"] .rail__call { opacity: 1; }

.rail__hmi > rect { fill: var(--color-paper-raised); stroke: var(--color-blue-deep); stroke-width: 2; }
.rail__lead { stroke: var(--color-blue-deep); stroke-width: 2; stroke-dasharray: 3 4; }
.rail__switch circle { fill: var(--color-blue-mist); stroke: var(--color-blue-deep); stroke-width: 3; }
.rail__switch path { stroke: var(--color-blue-deep); stroke-width: 6; stroke-linecap: round; }
.rail__switch--ebs path { transform-origin: 582px 82px; }
.rail__switch--tis path { transform-origin: 638px 82px; }
.scene__svg[data-ebs="on"] .rail__switch--ebs path,
.scene__svg[data-tis="on"] .rail__switch--tis path { transform: rotate(90deg); }
.rail__lamp { fill: var(--color-line); stroke: var(--color-blue-deep); stroke-width: 2; }
.scene__svg[data-ebs="on"] .rail__lamp,
.scene__svg[data-tis="on"] .rail__lamp { fill: #e9b949; }
.rail__indicator { fill: var(--color-ink-muted); stroke: var(--color-blue-deep); stroke-width: 2; }

.rail__train { transform: translateX(0); }
.scene__svg[data-train="moving"] .rail__train { transform: translateX(60px); }
.scene__svg[data-train="gone"] .rail__train { transform: translateX(105px); }
.rail__speed { stroke: var(--color-ink-muted); stroke-width: 3; stroke-linecap: round; opacity: 0; }
.scene__svg[data-train="moving"] .rail__speed,
.scene__svg[data-train="gone"] .rail__speed { opacity: 1; }
.rail__coach { fill: var(--color-blue); }
.rail__gangway { fill: var(--color-blue-deep); }
.rail__roof { stroke: rgba(255, 255, 255, 0.3); stroke-width: 3; }
.rail__window { fill: var(--color-blue-deep); }

.rail__leaf { fill: var(--color-blue-deep); }
.rail__gap { fill: var(--color-paper-raised); stroke: var(--color-ink); stroke-width: 2.5; opacity: 0; }
.rail__closing { fill: none; stroke: var(--color-blue-deep); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.scene__svg[data-doors="one"] .rail__door--4 .rail__gap,
.scene__svg[data-doors="five"] .rail__door:not(.rail__door--6) .rail__gap { opacity: 1; }
.scene__svg[data-doors="one"] .rail__door--4 .rail__leaf--l,
.scene__svg[data-doors="five"] .rail__door:not(.rail__door--6) .rail__leaf--l { transform: translateX(-18px); }
.scene__svg[data-doors="one"] .rail__door--4 .rail__leaf--r,
.scene__svg[data-doors="five"] .rail__door:not(.rail__door--6) .rail__leaf--r { transform: translateX(18px); }
.scene__svg[data-doors="closing"] .rail__door:not(.rail__door--6) .rail__closing { opacity: 1; }

.rail__check circle { fill: var(--color-blue-deep); }
.rail__check path { fill: none; stroke: var(--color-gold-light); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.rail__check { opacity: 0; }
.scene__svg[data-check="on"] .rail__check { opacity: 1; }

.rail__fault { fill: none; stroke: var(--color-gold-light); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.scene__svg[data-fault="on"] .rail__fault { opacity: 1; }

/* People: on the train they move with it, on the platform they stay. */
.rail__driver circle,
.scene__swatch--driver { fill: var(--color-gold-line); stroke: var(--color-ink); stroke-width: 3; }
.rail__conductor circle,
.scene__swatch--conductor { fill: var(--color-paper-raised); stroke: var(--color-blue-deep); stroke-width: 5; }
.rail__driver,
.rail__conductor { opacity: 0; }
.rail__driver--train { transform: translate(666px, 195px); }
.scene__svg[data-driver="front"] .rail__driver--train { opacity: 1; }
.scene__svg[data-driver="rear"] .rail__driver--train { opacity: 1; transform: translate(86px, 195px); }
.scene__svg[data-driver="inside"] .rail__driver--train { opacity: 1; transform: translate(300px, 195px); }
.rail__driver--platform { transform: translate(180px, 308px); }
.scene__svg[data-driver="platform"] .rail__driver--platform { opacity: 1; }
.rail__conductor--train { transform: translate(340px, 220px); }
.scene__svg[data-conductor="panel"] .rail__conductor--train { opacity: 1; }
.scene__svg[data-conductor="rearcab"] .rail__conductor--train { opacity: 1; transform: translate(88px, 195px); }
.rail__conductor--platform { transform: translate(372px, 308px); }
.scene__svg[data-conductor="platform"] .rail__conductor--platform { opacity: 1; }

.rail__pax circle { fill: var(--color-ink-muted); }
.rail__pax { opacity: 0; transform: translateY(0); }
.scene__svg[data-pax="on"] .rail__pax { opacity: 1; }
.scene__svg[data-pax="near"] .rail__pax { opacity: 1; transform: translateY(-38px); }

.rail__focus rect,
.rail__focus circle { fill: none; stroke: var(--color-gold-text); stroke-width: 3; stroke-dasharray: 6 6; }
.rail__focus { opacity: 0; }
.scene__svg[data-analysis="on"] .rail__focus { opacity: 1; }

.scene__swatch {
  display: inline-block;
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 3px solid var(--color-ink);
  background: var(--color-gold-line);
}

.scene__swatch--conductor {
  border-color: var(--color-blue-deep);
  background: var(--color-paper-raised);
}

/* Cab display and reality (uses the .beliefs toggle) */
.hmi__desk { fill: var(--color-paper-raised); stroke: var(--color-blue-deep); stroke-width: 2; }
.hmi__switch circle { fill: var(--color-blue-mist); stroke: var(--color-blue-deep); stroke-width: 3; }
.hmi__switch path { stroke: var(--color-blue-deep); stroke-width: 6; stroke-linecap: round; }
.hmi__lamp { fill: #e9b949; stroke: var(--color-blue-deep); stroke-width: 2; }
.hmi__indicator { fill: var(--color-ink-muted); stroke: var(--color-blue-deep); stroke-width: 2; }
.hmi__coach { fill: var(--color-blue); }
.hmi__closed { fill: var(--color-blue-deep); }
.hmi__open { fill: var(--color-sand); stroke: var(--color-ink); stroke-width: 2; }
.hmi__platform { fill: var(--color-sand); }
.hmi__edge { stroke: var(--color-ink-muted); stroke-width: 2; }
.hmi__conductor { fill: var(--color-paper-raised); stroke: var(--color-blue-deep); stroke-width: 5; }

/* Rail vocabulary instead of lockout/tagout */
.terms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
  list-style: none;
  padding: 0;
}

.terms > li {
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-paper-raised);
}

.terms h3 {
  font-size: var(--text-lg);
  color: var(--color-blue-deep);
}

.terms p {
  margin-top: var(--space-2);
}

.terms__intro {
  max-width: var(--width-prose);
  margin-top: var(--space-4);
}

.terms__key {
  margin-top: var(--space-7);
  max-width: var(--width-prose);
}

.terms__key h3 {
  font-size: var(--text-xl);
  color: var(--color-blue-deep);
}

.terms__key p {
  margin-top: var(--space-3);
}

.terms-table-wrap {
  margin-top: var(--space-5);
  overflow-x: auto;
}

.terms-table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: var(--text-sm);
  background: var(--color-paper-raised);
}

.terms-table th,
.terms-table td {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
}

.terms-table thead th {
  background: var(--color-blue-deep);
  color: var(--color-on-dark);
}

.terms-table tbody th {
  font-weight: 700;
  color: var(--color-blue-deep);
}

/* Gaps between automatic protection and degraded operation */
.gaps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-5);
  list-style: none;
  padding: 0;
}

.gap {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-paper-raised);
}

.gap h3 {
  font-size: var(--text-lg);
  color: var(--color-blue-deep);
}

.gap__sign {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 2px solid var(--color-gold-line);
  font-size: var(--text-sm);
}

.gaps__note {
  margin-top: var(--space-6);
  max-width: var(--width-prose);
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--color-gold-line);
  background: var(--color-paper-raised);
}

@media (max-width: 40rem) {
  .terms {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Microlearning ---------- */

.ml-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding: 0;
  list-style: none;
}

.ml-facts li {
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--color-line-on-dark);
  border-radius: 999px;
  font-size: var(--text-sm);
  color: var(--color-on-dark-muted);
}

/* The course sits on its own dark stage; each part is a cream card. */
.ml-stage {
  padding-block: var(--space-8);
  background:
    radial-gradient(ellipse 50% 60% at 12% 0%, rgba(212, 181, 106, 0.16), transparent 70%),
    radial-gradient(ellipse 60% 70% at 95% 100%, rgba(29, 90, 142, 0.6), transparent 70%),
    var(--color-learn-stage);
}

.ml {
  width: 100%;
  max-width: 56rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.ml [hidden] {
  display: none !important;
}

.ml button {
  font-family: inherit;
  cursor: pointer;
}

.ml button.button--ghost,
.ml button.button--outline {
  background: transparent;
}

.ml__step {
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  border-top: 4px solid var(--color-gold);
  border-radius: 0.75rem;
  background: var(--color-paper-raised);
  box-shadow: 0 1.5rem 3rem -1.5rem rgba(8, 29, 51, 0.6);
}

.ml__step + .ml__step {
  margin-top: var(--space-6);
}

.ml.is-player .ml__step + .ml__step {
  margin-top: 0;
}

.ml__title {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-5);
}

.ml__title:focus {
  outline: none;
}

.ml__text {
  max-width: var(--width-prose);
}

.ml__text > * + * {
  margin-top: var(--space-4);
}

.ml-goals {
  display: grid;
  gap: var(--space-2);
  padding-left: 1.25rem;
}

.ml-goals li::marker {
  color: var(--color-gold-text);
}

.ml-note {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--color-sand);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

/* Note on lockout/tagout and the rail terms used instead */
.ml-terms {
  max-width: var(--width-prose);
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--color-blue);
  border-radius: var(--radius);
  background: var(--color-paper-raised);
}

.ml-brief + .ml-terms {
  margin-top: var(--space-6);
}

.ml-terms h3 {
  font-size: var(--text-lg);
  color: var(--color-blue-deep);
}

.ml-terms > * + * {
  margin-top: var(--space-3);
}

.ml-terms ul {
  display: grid;
  gap: var(--space-2);
  padding-left: 1.25rem;
}

.ml-brief__scene {
  margin-bottom: var(--space-5);
}

.ml__text--intro {
  margin-bottom: var(--space-5);
}

/* Series of modules: one accent colour per module on the card edge. */
.ml--m1 .ml__step { border-top-color: var(--color-learn-m1); }
.ml--m2 .ml__step { border-top-color: var(--color-learn-m2); }
.ml--m3 .ml__step { border-top-color: var(--color-learn-m3); }

/* Overview of a series: case brief and module cards */
.ml-brief {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-6) var(--space-7);
  align-items: start;
}

.ml-brief .ml-brief__scene {
  margin-bottom: 0;
}

.ml-brief__text > * + * {
  margin-top: var(--space-4);
}

.ml-modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-5);
  padding: 0;
  list-style: none;
}

.ml-module {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border-top: 4px solid var(--color-learn-m1);
  border-radius: var(--radius);
  background: var(--color-paper-raised);
  box-shadow: 0 1rem 2rem -1.5rem rgba(8, 29, 51, 0.45);
}

.ml-module--m2 { border-top-color: var(--color-learn-m2); }
.ml-module--m3 { border-top-color: var(--color-learn-m3); }

.ml-module__meta {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold-text);
}

.ml-module h3 {
  font-size: var(--text-xl);
}

.ml-module h3 a {
  color: inherit;
  text-decoration: none;
}

.ml-module h3 a:hover {
  text-decoration: underline;
}

.ml-module .case-card__link {
  margin-top: auto;
}

@media (max-width: 64rem) {
  .ml-brief {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Progress and navigation (with JavaScript) */
.ml__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-5);
}

.ml__progress {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.ml__dot {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-line-on-dark);
  border-radius: 50%;
  background: transparent;
  color: var(--color-on-dark-muted);
  font: 600 var(--text-sm) / 1 var(--font-sans);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ml__dot.is-done {
  border-color: var(--color-gold);
  color: var(--color-gold-light);
}

.ml__dot[aria-current="step"] {
  border-color: var(--color-gold);
  background: var(--color-gold);
  color: var(--color-blue-deep);
}

.ml__dot:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ml__counter {
  font-size: var(--text-sm);
  color: var(--color-on-dark-muted);
}

.ml__controls {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.ml__controls .button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ml__nav :focus-visible,
.ml__controls :focus-visible {
  outline-color: var(--color-gold-light);
}

.ml__restart {
  margin-top: var(--space-5);
}

/* Voices: one tint and accent per person */
.voice {
  --voice-tint: var(--color-learn-sky-soft);
  --voice-accent: var(--color-blue);
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
  margin: 0 0 var(--space-6);
  padding: var(--space-5);
  border-radius: var(--radius);
  background: var(--voice-tint);
}

.voice--sea { --voice-tint: var(--color-learn-sea-soft); --voice-accent: var(--color-learn-sea); }
.voice--gold { --voice-tint: var(--color-gold-soft); --voice-accent: #b8933f; }
.voice--rose { --voice-tint: var(--color-learn-rose-soft); --voice-accent: #a85d4a; }

.voice__portrait {
  width: 7rem;
  height: 7rem;
  fill: none;
  stroke: var(--color-blue-deep);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.voice__portrait .portrait__bg { fill: var(--color-paper-raised); stroke: none; }
.voice__portrait .portrait__body { fill: color-mix(in srgb, var(--voice-accent) 35%, var(--color-paper-raised)); }
.voice__portrait .portrait__face { fill: var(--color-paper-raised); }
.voice__portrait .portrait__hair { fill: var(--color-ink-muted); }
.voice__portrait .portrait__hat,
.voice__portrait .portrait__cup { fill: var(--voice-accent); }
.voice__portrait .portrait__card { fill: var(--color-paper-raised); }
.voice__portrait .portrait__dot { fill: var(--color-blue-deep); stroke: none; }
.voice__portrait .portrait__stripe { stroke: var(--color-learn-m1); stroke-width: 5; }

.voice__who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
}

.voice__name {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 600;
}

.voice__role {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.voice__text {
  position: relative;
  margin: var(--space-3) 0 0;
  padding-left: var(--space-5);
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: var(--leading-snug);
}

.voice__text::before {
  content: "";
  position: absolute;
  inset: 0.2em auto 0.2em 0;
  width: 3px;
  border-radius: 2px;
  background: var(--voice-accent);
}

.voice__note {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

/* Questions */
.quiz {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.quiz__label {
  padding: 0;
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold-text);
}

.quiz__prompt {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
}

.quiz__help {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.quiz__options,
.quiz__order {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: 0;
  list-style: none;
}

.quiz__options li,
.quiz__order li {
  position: relative;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-paper);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.quiz__option {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
}

.quiz__option input {
  flex: none;
  accent-color: var(--color-blue);
  transform: translateY(0.1em);
}

.quiz__letter {
  flex: none;
  font-weight: 700;
  color: var(--color-ink-muted);
}

.quiz__options li:hover {
  border-color: var(--color-blue);
}

.quiz__options li:has(input:checked) {
  border-color: var(--color-blue);
  background: var(--color-blue-mist);
}

.quiz__options li:has(input:disabled) .quiz__option {
  cursor: default;
}

/* Order question: without JavaScript a numbered list. */
.quiz__order {
  list-style: decimal inside;
}

.quiz__order li {
  padding: var(--space-3) var(--space-4);
}

.ml.is-player .quiz__order {
  list-style: none;
}

.ml.is-player .quiz__order li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.quiz__pos {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-blue-deep);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-on-dark);
}

.quiz__item {
  flex: 1;
}

.quiz__moves {
  display: flex;
  flex: none;
  gap: var(--space-1);
}

.quiz__move {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-blue);
  border-radius: var(--radius);
  background: var(--color-paper-raised);
  color: var(--color-blue);
  font-size: var(--text-base);
  cursor: pointer;
}

.quiz__move:hover:not(:disabled) {
  background: var(--color-blue-mist);
}

.quiz__move:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Match question: one select per row; without JavaScript two lists. */
.quiz__pairs,
.quiz__targets {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: 0;
  list-style: none;
}

.quiz__pairs li {
  position: relative;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-paper);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.quiz__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(10rem, 15rem);
  gap: var(--space-3);
  align-items: center;
}

.quiz__select {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--color-blue);
  border-radius: var(--radius);
  background: var(--color-paper-raised);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-ink);
}

.quiz__select:disabled {
  opacity: 0.8;
}

.quiz__pairs .quiz__mark {
  margin: var(--space-2) 0 0;
}

.quiz__targets-label {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink-muted);
}

.quiz__targets {
  margin-top: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.quiz__targets li {
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--color-line);
  border-radius: var(--radius);
  font-size: var(--text-sm);
}

/* Marks always carry a text label, never colour alone. */
.quiz__pairs li.is-wrong,
.quiz__options li.is-wrong,
.quiz__options li.is-wrong:has(input:checked),
.quiz__order li.is-wrong {
  border-color: var(--color-learn-amber);
  background: var(--color-learn-amber-soft);
}

.quiz__pairs li.is-right,
.quiz__options li.is-right,
.quiz__options li.is-right:has(input:checked),
.quiz__order li.is-right {
  border-color: var(--color-learn-sea);
  background: var(--color-learn-sea-soft);
}

.quiz__mark {
  display: inline-block;
  margin: 0 var(--space-4) var(--space-3);
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.quiz__order .quiz__mark {
  margin: 0;
}

.is-wrong > .quiz__mark {
  background: var(--color-learn-amber);
  color: var(--color-paper-raised);
}

.is-right > .quiz__mark {
  background: var(--color-learn-sea);
  color: var(--color-paper-raised);
}

.quiz__bar {
  margin-top: var(--space-4);
}

.quiz__feedback:empty {
  display: none;
}

.quiz__feedback {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--color-blue);
  border-radius: var(--radius);
  background: var(--color-blue-mist);
}

.quiz__feedback > * + * {
  margin-top: var(--space-2);
}

.quiz__feedback.is-correct {
  border-left-color: var(--color-learn-sea);
  background: var(--color-learn-sea-soft);
}

.quiz__feedback.is-correct strong:first-child {
  color: var(--color-learn-sea);
}

.quiz__feedback.is-hint {
  border-left-color: var(--color-learn-amber);
  background: var(--color-learn-amber-soft);
}

.quiz__feedback.is-choose {
  border-left-color: var(--color-line);
  background: var(--color-sand);
  font-size: var(--text-sm);
}

.quiz__lead {
  font-weight: 600;
  color: var(--color-blue);
}

.quiz__feedback a {
  font-weight: 600;
}

/* Without JavaScript: the hint is only part of the checked answer. */
.quiz__texts {
  margin-top: var(--space-4);
}

html:not(.js) .quiz__hint {
  display: none;
}

.quiz__solution {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-paper);
}

.quiz__solution summary {
  font-weight: 600;
  color: var(--color-blue);
  cursor: pointer;
}

.quiz__solution p {
  margin-top: var(--space-2);
}

/* Transfer, end and design notes */
.ml-transfer {
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.ml-transfer textarea {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-paper);
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-ink);
  resize: vertical;
}

.ml__score {
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--color-learn-sea);
  border-radius: var(--radius);
  background: var(--color-learn-sea-soft);
  font-weight: 600;
}

.ml-keys {
  display: grid;
  gap: var(--space-4);
  padding: 0;
  list-style: none;
  counter-reset: ml-key;
}

.ml-keys li {
  position: relative;
  padding-left: 3rem;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  counter-increment: ml-key;
}

.ml-keys li::before {
  content: counter(ml-key);
  position: absolute;
  left: 0;
  top: -0.1em;
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-gold-text);
}

.ml-design {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding: 0;
  list-style: none;
}

.ml-design li {
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-gold-line);
}

@media (max-width: 40rem) {
  .voice {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-4);
  }
  .voice__text {
    padding-left: var(--space-4);
  }
  .voice__portrait {
    width: 5rem;
    height: 5rem;
  }
  .ml__controls .button {
    flex: 1;
    justify-content: center;
  }
  .quiz__pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media print {
  .ml-stage {
    background: none;
  }
  .ml__nav,
  .ml__controls,
  .quiz__bar {
    display: none;
  }
}