/* ==========================================================================
   Fabric Courses design system.

   Three things are locked, and every drift from them reads as sloppiness:
     1. ONE accent colour, used identically everywhere.
     2. ONE radius scale: 3px on small surfaces, 6px on large panels.
     3. ONE theme strategy: light and dark are both DESIGNED, not inverted.

   Every text colour below is verified against its actual painted background
   in both themes by scripts/check.mjs. Do not add a colour without running it.
   ========================================================================== */

/* Geist and Geist Mono, SIL Open Font License 1.1.
   Self hosted: no third party request is made to render a page, which keeps
   font-src 'self' in the CSP and means reading a page contacts nobody. */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/fonts/SchibstedGrotesk-Variable.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/GeistMono-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surfaces. A cool off white rather than a warm one, so the navy reads as
     the same family rather than as a separate brand. */
  --paper: #f7f7fc;
  --card: #ffffff;
  --sunk: #efeff5;
  --raise: #ffffff;

  /* Navy carries the text, and is also the ground for inverted sections. */
  --ink: #05192d;
  --ink-2: #4e4e6c;
  --ink-3: #66668a;

  --rule: #dedee5;
  --rule-soft: #efeff5;

  /* ONE accent hue at two stops.
     --accent is the graphic stop: block fills, button grounds, the
     illustrations. It is deliberately too light to carry text on a pale
     surface, which is exactly how this kind of bright accent is used.
     --accent-text is the same hue darkened until it passes AA, and is the
     only one allowed to colour type on a light surface.
     Deliberately NOT DataCamp's #03ef62: the design language is borrowed,
     the brand identity is not, and this site reviews them. */
  --accent: #2fe08f;
  --accent-text: #0a6e46;
  --accent-hover: #085639;
  --accent-ink: #05192d;
  --accent-wash: #e2faf0;
  --accent-edge: #a5e8cb;

  /* Inverted sections, the navy bands. */
  --invert: #05192d;
  --invert-deep: #000820;
  --invert-ink: #ffffff;
  --invert-ink-2: #9ba3ab;
  --invert-rule: #213147;

  /* Cautions carry no hue. */
  --caution-surface: #efeff5;
  --caution-edge: #dedee5;
  --caution-rule: #4e4e6c;

  --danger: #b00020;
  --ok: #0a6e46;

  /* Decorative block palette, used ONLY by the generated course illustrations.
     These never carry text and are never used for UI, so they sit outside the
     one accent rule deliberately. Identical in both themes, like the
     reference: flat bright blocks read the same on navy and on off white. */
  --blk-a: #2fe08f;
  --blk-b: #06bdfc;
  --blk-c: #7933ff;
  --blk-d: #ff6ea9;
  --blk-e: #fcce0d;

  --shadow-sm: 0 1px 2px rgba(5, 25, 45, 0.06);
  --shadow-md: 0 8px 30px rgba(5, 25, 45, 0.10);

  --r-sm: 3px;
  --r-lg: 6px;

  --sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --shell: 1200px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #05192d;
    --card: #0b2338;
    --sunk: #0a1f31;
    --raise: #113050;

    --ink: #ffffff;
    --ink-2: #b8c4d0;
    --ink-3: #9ba3ab;

    --rule: #213147;
    --rule-soft: #16273c;

    --accent: #2fe08f;
    --accent-text: #2fe08f;
    --accent-hover: #6df0b6;
    --accent-ink: #05192d;
    --accent-wash: #0d2e21;
    --accent-edge: #1f5741;

    --invert: #000820;
    --invert-deep: #000512;
    --invert-ink: #ffffff;
    --invert-ink-2: #9ba3ab;
    --invert-rule: #213147;

    --caution-surface: #0a1f31;
    --caution-edge: #213147;
    --caution-rule: #9ba3ab;

    --danger: #ff8f8f;
    --ok: #2fe08f;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.55);

    color-scheme: dark;
  }
}


:root[data-theme="dark"] {
    --paper: #05192d;
  --card: #0b2338;
  --sunk: #0a1f31;
  --raise: #113050;

  --ink: #ffffff;
  --ink-2: #b8c4d0;
  --ink-3: #9ba3ab;

  --rule: #213147;
  --rule-soft: #16273c;

  --accent: #2fe08f;
  --accent-text: #2fe08f;
  --accent-hover: #6df0b6;
  --accent-ink: #05192d;
  --accent-wash: #0d2e21;
  --accent-edge: #1f5741;

  --invert: #000820;
  --invert-deep: #000512;
  --invert-ink: #ffffff;
  --invert-ink-2: #9ba3ab;
  --invert-rule: #213147;

  --caution-surface: #0a1f31;
  --caution-edge: #213147;
  --caution-rule: #9ba3ab;

  --danger: #ff8f8f;
  --ok: #2fe08f;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}


/* --------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.028em; line-height: 1.08; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding-left: 1.15rem; }
a { color: var(--accent-text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: var(--r-sm); }
hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

code {
  font-family: var(--mono); font-size: 0.86em;
  background: var(--sunk); border: 1px solid var(--rule-soft);
  padding: 0.08em 0.36em; border-radius: var(--r-sm);
}
pre {
  margin: 0; font-family: var(--mono); font-size: 0.8rem; line-height: 1.6;
  background: var(--sunk); border: 1px solid var(--rule-soft);
  border-radius: var(--r-lg); padding: 1rem 1.15rem; overflow-x: auto;
}
pre code { background: none; border: 0; padding: 0; font-size: inherit; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--accent-ink);
  padding: 0.6rem 1rem; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* -------------------------------------------------------------- layout */
.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell-narrow { max-width: 760px; margin-inline: auto; padding-inline: var(--gutter); }
.stack { display: grid; gap: 1.1rem; }
.stack-lg { display: grid; gap: 2rem; }
main { display: block; }
.section { padding-block: clamp(3.25rem, 7vw, 6rem); }
.section + .section { border-top: 1px solid var(--rule-soft); }
.section-tight { padding-block: clamp(1.75rem, 3vw, 2.5rem); }
.section > .shell > * + * { margin-top: 1.15rem; }
.section-head { display: grid; gap: 0.6rem; max-width: 66ch; }
.section h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
.section h3 { font-size: clamp(1.05rem, 1.7vw, 1.2rem); }
.prose p, .prose li { color: var(--ink-2); max-width: 72ch; }
.prose > * + * { margin-top: 1.05rem; }
.prose ul, .prose ol { display: grid; gap: 0.5rem; }
.prose h2 { margin-top: 2.4rem; }
.prose h3 { margin-top: 1.8rem; }
strong { color: var(--ink); font-weight: 600; }
.lede { font-size: clamp(1.1rem, 1.9vw, 1.32rem); color: var(--ink-2); max-width: 58ch; line-height: 1.5; }
.eyebrow {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text);
}

/* -------------------------------------------------------------- header */
/* The top of the page is one continuous navy field, masthead and hero
   together, exactly as the reference does it. Everything below is light. */
.masthead {
  position: sticky; top: 0; z-index: 40;
  background: var(--invert);
  border-bottom: 1px solid var(--invert-rule);
}
.masthead-in {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 60px; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter);
}
.brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-weight: 700; letter-spacing: -0.02em; color: var(--invert-ink); text-decoration: none; font-size: 1.06rem;
}
.brand:hover { color: var(--invert-ink); }
.brand-mark { width: 22px; height: 22px; flex: none; }
.masthead nav { margin-left: auto; }
.masthead nav ul { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.masthead nav a {
  display: block; padding: 0.4rem 0.7rem; border-radius: var(--r-sm);
  color: var(--invert-ink-2); text-decoration: none; font-size: 0.92rem; font-weight: 500;
}
.masthead nav a:hover { color: var(--invert-ink); background: rgba(255, 255, 255, 0.08); }
.masthead nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }
.masthead nav a.cta {
  background: var(--accent); color: var(--accent-ink); font-weight: 600;
}
.masthead nav a.cta:hover { background: var(--accent-hover); color: var(--accent-ink); }
@media (max-width: 860px) {
  .masthead nav { width: 100%; margin-left: 0; overflow-x: auto; }
  .masthead-in { flex-wrap: wrap; padding-block: 0.6rem; gap: 0.5rem; }
  .masthead nav ul { flex-wrap: nowrap; }
  .masthead nav a { white-space: nowrap; font-size: 0.88rem; padding-inline: 0.55rem; }
}

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  padding-block: clamp(3.25rem, 8vw, 6.5rem) clamp(3rem, 6vw, 5rem);
  color: var(--invert-ink);
}
/* Full bleed navy behind the hero without touching page markup. */
.hero::before {
  content: ""; position: absolute; inset: 0;
  left: 50%; transform: translateX(-50%); width: 100vw;
  background: var(--invert); z-index: -1;
}
.hero h1, .hero .lede, .hero .byline, .hero .eyebrow { position: relative; }
.hero .lede { color: var(--invert-ink-2); }
.hero .byline { color: var(--invert-ink-2); }
.hero .byline a { color: var(--invert-ink); }
.hero .eyebrow { color: var(--accent); }
.hero .crumbs, .hero .crumbs a { color: var(--invert-ink-2); }
.hero h1 { font-size: clamp(2.35rem, 5.6vw, 3.9rem); letter-spacing: -0.036em; max-width: 20ch; }
.hero .lede { margin-top: 1.15rem; }
.hero-grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 940px) { .hero-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 4rem; } }

.byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1.6rem;
  margin-top: 1.9rem; font-size: 0.855rem; color: var(--ink-3);
}
.byline a { font-weight: 600; }
/* Separators only make sense while the byline is on one line. */

.trust {
  position: relative;
  display: grid; gap: 0.85rem; padding: 1.5rem 1.6rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--invert-rule); border-radius: var(--r-lg);
}

.trust h2 { font-size: 0.98rem; }
.trust ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.trust li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem; font-size: 0.9rem; color: var(--ink-2); }
.trust .tick { color: var(--accent-text); font-weight: 700; line-height: 1.5; }

/* The aside sits on the navy hero ground, so it inherits the inverted text
   scale. Scoped under .hero deliberately: these must beat the light surface
   rules above, and the tokens are the ones the contrast gate measures. */
.hero .trust h2 { color: var(--invert-ink); }
.hero .trust li { color: var(--invert-ink-2); }
.hero .trust .tick { color: var(--accent); }

/* --------------------------------------------------------------- cards */
.grid { display: grid; gap: 1.1rem; }
/* Pairs stay pairs. A 4 item set must never render 3 + 1. */
.grid-2 { grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr)); }
/* Course lists genuinely want to reflow to whatever fits. */
.grid-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }

.card {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: 1.25rem 1.35rem;
  display: grid; gap: 0.55rem; align-content: start;
}
.card h3 { font-size: 1.02rem; }
.card p, .card li { font-size: 0.92rem; color: var(--ink-2); }
.card .k {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
}

/* --------------------------------------------------------- course card */
.course {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg);
  overflow: hidden; display: grid; grid-template-rows: auto 1fr;
}
.course-art { background: var(--sunk); border-bottom: 1px solid var(--rule-soft); }
.course-art svg { width: 100%; height: auto; display: block; }
.course-body { padding: 1.15rem 1.3rem 1.3rem; display: grid; gap: 0.6rem; align-content: start; }
.course-top { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.course-provider {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3);
}
.course h3 { font-size: 1.06rem; }
.course h3 a { color: var(--ink); text-decoration: none; }
.course h3 a:hover { color: var(--accent-text); }
.course p { font-size: 0.92rem; color: var(--ink-2); }
.course dl { display: grid; gap: 0.5rem; margin: 0.25rem 0 0; }
.course dt {
  font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.1rem;
}
.course dd { margin: 0; font-size: 0.9rem; color: var(--ink-2); }
.course .watchout {
  background: var(--caution-surface); border: 1px solid var(--caution-edge);
  border-left: 3px solid var(--caution-rule);
  border-radius: var(--r-sm); padding: 0.7rem 0.85rem;
}
.course .watchout dt { color: var(--ink); }
.course-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem;
  margin-top: 0.35rem; padding-top: 0.8rem; border-top: 1px solid var(--rule-soft);
  font-size: 0.8rem; color: var(--ink-3);
}
.course-foot a { font-weight: 600; font-size: 0.86rem; }

.badge {
  display: inline-block; font-family: var(--mono); font-size: 0.64rem;
  letter-spacing: 0.09em; text-transform: uppercase; font-weight: 500;
  padding: 0.16rem 0.42rem; border-radius: var(--r-sm);
  border: 1px solid var(--accent-edge); background: var(--accent-wash); color: var(--accent-text);
}
.badge-plain { border-color: var(--rule); background: var(--sunk); color: var(--ink-3); }
.chips { display: flex; flex-wrap: wrap; gap: 0.3rem; list-style: none; padding: 0; margin: 0; }
.chips li {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.05em;
  padding: 0.14rem 0.44rem; border: 1px solid var(--rule);
  border-radius: var(--r-sm); color: var(--ink-3); background: var(--sunk);
}

/* --------------------------------------------------------------- notes */
.note, .caution {
  border-left: 3px solid var(--accent); background: var(--accent-wash);
  padding: 1rem 1.2rem; border-radius: 0 var(--r-lg) var(--r-lg) 0;
  font-size: 0.94rem; color: var(--ink-2);
}
.caution {
  border-left-color: var(--caution-rule);
  background: var(--caution-surface);
  border-top: 1px solid var(--caution-edge);
  border-right: 1px solid var(--caution-edge);
  border-bottom: 1px solid var(--caution-edge);
}
.note strong, .caution strong { color: var(--ink); }
.note > * + *, .caution > * + * { margin-top: 0.6rem; }

/* -------------------------------------------------------------- tables */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--card); }
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; min-width: 38rem; }
caption { text-align: left; padding: 0.9rem 1.1rem 0; color: var(--ink-3); font-size: 0.8rem; font-family: var(--mono); }
th, td { text-align: left; vertical-align: top; padding: 0.72rem 1.1rem; }
thead th { border-bottom: 1px solid var(--rule); font-weight: 620; color: var(--ink); }
tbody tr + tr th, tbody tr + tr td { border-top: 1px solid var(--rule-soft); }
tbody td { color: var(--ink-2); }
tbody th { font-weight: 620; color: var(--ink); }

/* ---------------------------------------------------------------- FAQ */
.faq { display: grid; gap: 0.6rem; }
.faq details {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: 0.9rem 1.15rem;
}
.faq summary {
  cursor: pointer; font-weight: 620; color: var(--ink); list-style: none;
  display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.98rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "+"; font-family: var(--mono); color: var(--accent-text); font-weight: 700; flex: none;
}
.faq details[open] summary::before { content: "\2212"; }
.faq details > div { margin-top: 0.7rem; color: var(--ink-2); font-size: 0.94rem; }
.faq details > div > * + * { margin-top: 0.6rem; }

/* -------------------------------------------------------------- phases */
.steps { display: grid; gap: 0.8rem; counter-reset: step; }
.step {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.05rem;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: 1.1rem 1.3rem;
}
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--mono); font-size: 0.8rem; color: var(--accent-ink);
  background: var(--accent); border-radius: var(--r-sm); padding: 0.14rem 0.4rem; height: max-content;
}
.step h3 { font-size: 1rem; }
.step p { margin-top: 0.3rem; font-size: 0.92rem; color: var(--ink-2); }

/* ------------------------------------------------------------- clients */
.wall-head {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.9rem;
}
/* Column counts are chosen to divide the client count exactly, so the wall
   never ends on an empty cell. Update these if the list length changes. */
.clientwall {
  display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 560px) { .clientwall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) { .clientwall { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.clientwall li { list-style: none; }
.client {
  background: var(--card); min-height: 72px; display: grid; place-items: center;
  padding: 0.9rem 0.75rem; text-align: center;
}
.client span {
  font-weight: 600; letter-spacing: -0.005em; color: var(--ink-2); font-size: 0.88rem;
  text-wrap: balance;
}
.client img { max-height: 32px; width: auto; }

/* ---------------------------------------------------------------- form */
.enquiry {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: clamp(1.2rem, 3vw, 1.9rem);
  box-shadow: var(--shadow-md);
}
.field { display: grid; gap: 0.35rem; margin-bottom: 1rem; }
.field label { font-size: 0.86rem; font-weight: 620; color: var(--ink); }
.field .hint { font-size: 0.8rem; color: var(--ink-3); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 0.94rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r-sm); padding: 0.6rem 0.72rem; width: 100%;
}
.field textarea { min-height: 7.5rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--accent-text); outline-offset: 1px; border-color: var(--accent-text);
}
.field .err { font-size: 0.82rem; color: var(--danger); font-weight: 600; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: var(--danger); }
.field-row { display: grid; gap: 1rem; }
@media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; } }
.checkline { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem; align-items: start; }
.checkline input { width: auto; margin-top: 0.35rem; }
.checkline label { font-weight: 400; font-size: 0.86rem; color: var(--ink-2); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font: inherit; font-size: 0.94rem; font-weight: 620; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  border: 1px solid var(--accent); border-radius: var(--r-sm);
  padding: 0.66rem 1.25rem; text-decoration: none;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.btn-ghost { background: transparent; color: var(--accent-text); }
.btn-ghost:hover { background: var(--accent-wash); color: var(--accent-text); }
.formstatus { margin-top: 0.9rem; font-size: 0.9rem; }
.formstatus[data-state="error"] { color: var(--danger); font-weight: 620; }
.formstatus[data-state="ok"] { color: var(--ok); font-weight: 620; }
.honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------- related */
.related { display: grid; gap: 0.5rem; }
.related a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: baseline;
  padding: 0.75rem 1rem; background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r-lg); text-decoration: none; color: var(--ink); font-weight: 600; font-size: 0.94rem;
}
.related a:hover { border-color: var(--accent-edge); background: var(--accent-wash); }
.related a span { color: var(--ink-3); font-weight: 400; font-size: 0.86rem; }

/* ----------------------------------------------------------- breadcrumb */
.crumbs {
  font-size: 0.82rem; padding-top: 1.25rem; position: relative;
  color: var(--invert-ink-2);
}
.crumbs::before {
  content: ""; position: absolute; inset: -1.25rem 0 -0.5rem 0;
  left: 50%; transform: translateX(-50%); width: 100vw;
  background: var(--invert); z-index: -1;
}
.crumbs a { color: var(--invert-ink-2); }
.crumbs li::after { color: var(--invert-rule); }
.crumbs a:hover { color: var(--accent); }
.crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.crumbs li::after { content: "/"; margin-left: 0.4rem; color: var(--rule); }
.crumbs li:last-child::after { content: ""; }
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--accent-text); }

/* -------------------------------------------------------------- footer */
.sitefoot { border-top: 1px solid var(--rule); background: var(--card); margin-top: 3rem; }
.sitefoot-in { padding-block: 2.5rem 2rem; display: grid; gap: 2rem; }
.footcols { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.footcols h2 {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.7rem; font-weight: 500;
}
.footcols ul { list-style: none; padding: 0; display: grid; gap: 0.4rem; }
.footcols a { color: var(--ink-2); text-decoration: none; font-size: 0.89rem; }
.footcols a:hover { color: var(--accent-text); text-decoration: underline; }
.footnote {
  border-top: 1px solid var(--rule-soft); padding-top: 1.5rem;
  display: grid; gap: 0.7rem; font-size: 0.84rem; color: var(--ink-3);
}
.footnote p { max-width: 78ch; }

/* --------------------------------------------------------- author box */
.authorbox {
  display: grid; gap: 0.6rem; padding: 1.25rem 1.4rem;
  background: var(--sunk); border: 1px solid var(--rule); border-radius: var(--r-lg);
}
.authorbox .k {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
}
.authorbox h2 { font-size: 1rem; }
.authorbox p { font-size: 0.91rem; color: var(--ink-2); max-width: 68ch; }

/* MOTION_INTENSITY 3: hover and active states only, no automatic animation.
   Nothing on this site is hidden until a script decides to show it. */
.btn:active { transform: translateY(1px); }
.related a:active { transform: translateY(1px); }
.masthead nav a { transition: background-color 0.15s ease, color 0.15s ease; }
.card, .course, .related a { transition: border-color 0.15s ease; }
.course:hover { border-color: var(--accent-edge); }