/* KYA Group — shared styles for every page
 *
 * Load order on every page: tokens.css (configuration) → site.css (this file) → the page's own stylesheet
 * (home.css, journal.css, contact.css); the preview build adds preview.css. Only variables from tokens.css are
 * used; the exceptions are 1–3px borders and 1px alignment nudges, focus-ring offsets, em values that follow the
 * text size (list indents, underline offset), the dialog height limit (85vh), off-screen positions of the skip
 * link and the spam-trap field, font-weight: normal inside a bold label, and the hero reel geometry in home.css.
 *
 * Breakpoints (Tailwind): (width < 48rem) phone · (width >= 48rem) tablet · (width >= 64rem) desktop.
 * Phone-only rules use (width < 48rem). The floating header, the hero reel and the two-column skills area use
 *   desktop with a mouse:  (width >= 64rem) and (hover: hover), (width >= 64rem) and (pointer: fine)
 * and everything else (phones, tablets, iPads and other touch screens) gets the stacked layout. The same query
 * is in the hero image preload in src/pages/index.astro; app.js uses its exact opposite:
 *   (width < 64rem), (not (hover: hover)) and (not (pointer: fine))
 *
 * Contents: font · base · type roles · layout · components · header · footer · forms · dialogs.
 */

/* ---------- Font ---------- */

@font-face {
  font-family: Manrope;
  src: url('assets/fonts/manrope.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

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

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--spacing) * 8); }
html, body { overflow-x: clip; }
body {
  margin: 0; background: var(--color-background); color: var(--color-ink); font-family: var(--font-sans);
  font-size: var(--text-body); line-height: var(--text-body--line-height);
}
a { color: inherit; text-decoration: none; }
@media (hover: hover) { a:hover { text-decoration: underline; } }
button { font: inherit; cursor: pointer; }
picture { display: block; }
img { display: block; width: 100%; height: auto; object-fit: cover; }
/* Image ratios (tokens.css --aspect-*): every content image takes one, set by its role */
.aspect-video { aspect-ratio: var(--aspect-video); }
.aspect-feature { aspect-ratio: var(--aspect-feature); }
.aspect-square { aspect-ratio: var(--aspect-square); }
h1, h2, h3, p, figure, blockquote { margin: 0; }
:is(h1, h2) em { font-style: normal; color: var(--color-accent-display); }  /* the accent words in headlines; em in body text stays italic */
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 5px; }

/* ---------- Type roles ----------
   Each class applies one role from tokens.css. Plain h1 / h2 / h3 get the standard roles, so a new page
   is styled without extra classes; a heading that plays another role (a card title) takes its class. */

h1, .text-display {
  font-size: var(--text-display); line-height: var(--text-display--line-height);
  letter-spacing: var(--text-display--letter-spacing); font-weight: var(--text-display--font-weight);
}
h2, .text-headline {
  font-size: var(--text-headline); line-height: var(--text-headline--line-height);
  letter-spacing: var(--text-headline--letter-spacing); font-weight: var(--text-headline--font-weight);
}
h3, .text-title-lg {
  font-size: var(--text-title-lg); line-height: var(--text-title-lg--line-height);
  letter-spacing: var(--text-title-lg--letter-spacing); font-weight: var(--text-title-lg--font-weight);
}
.text-title {
  font-size: var(--text-title); line-height: var(--text-title--line-height);
  letter-spacing: var(--text-title--letter-spacing); font-weight: var(--text-title--font-weight);
}
.text-lead {
  font-size: var(--text-lead); line-height: var(--text-lead--line-height);
  letter-spacing: var(--text-lead--letter-spacing); color: var(--color-muted);
}
.text-small { font-size: var(--text-small); line-height: var(--text-small--line-height); }
.text-caption { font-size: var(--text-caption); line-height: var(--text-caption--line-height); }
/* Uppercase labels: section eyebrows, service numbers, card tags, footer headings */
.text-label, .eyebrow, .tag {
  font-size: var(--text-label); line-height: var(--text-label--line-height);
  letter-spacing: var(--text-label--letter-spacing); font-weight: var(--text-label--font-weight);
}
h2, h3, .text-title { text-wrap: balance; }            /* even line lengths: no single word left on the last line */
p, li, figcaption { text-wrap: pretty; }
.line { display: block; }                              /* one sentence per line; long sentences still wrap */
.nowrap { white-space: nowrap; }                       /* keep terms such as "cross-border e-commerce" together */

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

.container { width: min(100% - 2 * var(--gutter), var(--container-page)); margin-inline: auto; }
.container.is-prose { width: min(100% - 2 * var(--gutter), var(--container-prose)); }  /* article column */
.section { padding-block: var(--section-space); }
.section.is-tinted { background: var(--color-panel); }
.section.is-alt { background: var(--color-background-alt); }
/* Two sections on the same background meet with one gap, not two */
.section:not(.is-tinted, .is-alt) + .section:not(.is-tinted, .is-alt) { padding-top: 0; }

/* Section heading block: eyebrow, headline, optional lead */
.section-head { margin-bottom: var(--block-gap); }
.section-head > p:not(.eyebrow) { max-width: var(--container-lead); margin-top: var(--gap-heading); }
.section-head.is-center { text-align: center; }
.section-head.is-center > p:not(.eyebrow) { margin-inline: auto; }
/* Headline left, a short note at the right end of the last line (tablet and up) */
@media (width >= 48rem) {
  .section-head.is-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: end; gap: calc(var(--spacing) * 6); }
  .section-head.is-split > p:not(.eyebrow) { justify-self: end; margin-top: 0; }
}

/* Two columns side by side from tablets up; .is-reverse swaps them */
.split { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--column-gap); }
@media (width >= 48rem) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split.is-reverse > :first-child { order: 2; }
}
.split + .split { margin-top: var(--row-gap); }

/* Card grid: one column on phones, three from tablets up */
.card-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--grid-gap); }
@media (width >= 48rem) {
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.measure { max-width: var(--container-measure); }

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

.eyebrow { display: block; margin-bottom: var(--gap-label); color: var(--color-faint); }
.tag { display: block; color: var(--color-accent); }

.button {
  display: inline-flex; align-items: center; gap: calc(var(--spacing) * 5); height: var(--button-height);
  margin-top: var(--gap-action); padding: 0 var(--button-pad-x);
  border: 0; border-radius: var(--radius-2xl); background: var(--color-accent); color: var(--color-on-accent);
  font-weight: var(--font-weight-semibold);
}
@media (hover: hover) { .button:hover { background: var(--color-accent-hover); text-decoration: none; } }

.text-link {
  display: inline-flex; align-items: center; gap: calc(var(--spacing) * 6); padding: calc(var(--spacing) * 2) 0;
  border-bottom: 1px solid var(--color-accent-line);
  font-size: var(--text-small); line-height: var(--text-small--line-height); font-weight: var(--font-weight-medium); color: var(--color-accent);
}

/* List with check marks */
.check-list { margin: var(--gap-text) 0 var(--gap-action); padding: 0; list-style: none; font-size: var(--text-small); line-height: var(--text-small--line-height); color: var(--color-text); }
.check-list li { position: relative; margin-top: var(--gap-list); padding-left: calc(var(--spacing) * 6); }
.check-list li::before { content: '✓'; position: absolute; left: 0; color: var(--color-accent); }

/* Card: an image on top and a text block; .card-meta holds the date (and author) under the summary */
.card { overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-2xl); background: var(--color-surface); }
.card-body { padding: var(--card-pad-sm); }
.card-body > .text-title { margin: calc(var(--spacing) * 2) 0; }
.card-body > p { font-size: var(--text-small); line-height: var(--text-small--line-height); color: var(--color-muted); }
@media (hover: hover) { .card .text-title a:hover { text-decoration: underline; } }
.card-body > .card-meta { margin-top: calc(var(--spacing) * 4); font-size: var(--text-caption); line-height: var(--text-caption--line-height); color: var(--color-faint); }
.view-all { margin-top: var(--gap-action); }

/* Tinted panel beside text */
.panel { padding: var(--card-pad); border: 1px solid var(--color-line); border-radius: var(--radius-2xl); background: var(--color-panel); }

/* Social profile links (icons): LinkedIn, X, Instagram, YouTube. A slot keeps href="" until its address is known. */
.social-links { display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 2); margin: 0; padding: 0; list-style: none; }
.social-links a {
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(var(--icon-size) + var(--spacing) * 6); height: calc(var(--icon-size) + var(--spacing) * 6);  /* 44px: minimum touch target (Apple HIG) */
  border: 1px solid currentColor; border-radius: var(--radius-full); color: inherit;
}
.social-links svg { width: var(--icon-size); height: var(--icon-size); fill: currentColor; }
@media (hover: hover) { .social-links a:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); } }

/* ---------- Header ----------
   Tablets and touch devices: a static header with plain links. Desktop with a mouse: logo and nav float as
   two glass pills that stay at the top while scrolling. Phones: logo, Let's talk and a Menu button. */

.site-header { position: relative; z-index: var(--z-nav); display: flex; align-items: center; justify-content: space-between; height: var(--header-height); }
.wordmark { display: inline-flex; align-items: center; }
.wordmark img { width: auto; height: var(--logo-height); }
.site-header nav { display: flex; align-items: center; gap: calc(var(--spacing) * 8); font-size: var(--text-small); }
.nav-contact { padding: calc(var(--spacing) * 3) calc(var(--spacing) * 5); border: 1px solid var(--color-line-strong); border-radius: var(--radius-lg); }
.nav-contact span { margin-left: calc(var(--spacing) * 6); }
.menu-toggle,
.header-cta { display: none; }

@media (width >= 64rem) and (hover: hover), (width >= 64rem) and (pointer: fine) {
  html { scroll-padding-top: calc(var(--header-height) + var(--spacing) * 3); }  /* anchor targets clear the floating header */
  .site-header { position: sticky; top: 0; pointer-events: none; }
  .site-header > * { pointer-events: auto; }
  .site-header .wordmark,
  .site-header nav {
    border: 1px solid var(--color-line); background: var(--color-glass); box-shadow: var(--shadow-glass);
    -webkit-backdrop-filter: blur(var(--blur-md)); backdrop-filter: blur(var(--blur-md));
  }
  .site-header .wordmark { height: var(--header-pill-height); padding: 0 calc(var(--spacing) * 3); border-radius: var(--radius-xl); }
  .site-header nav { gap: 0; padding: calc(var(--spacing) * 1.5); border-radius: var(--radius-xl); }  /* 36px links + 6px + border = 50px pill */
  .site-header nav a { display: inline-flex; align-items: center; height: var(--nav-link-height); padding: 0 var(--nav-link-pad-x); font-weight: var(--font-weight-medium); }
  .site-header nav .nav-contact { margin-left: calc(var(--spacing) * 1.5); padding: 0 calc(var(--spacing) * 4); border-radius: var(--radius-lg); }
  .nav-contact span { margin-left: calc(var(--spacing) * 3); }
}

@media (width < 48rem) {
  .menu-toggle {
    display: block; padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
    border: 1px solid var(--color-line-strong); border-radius: var(--radius-lg); background: none; font-size: var(--text-small);
  }
  /* Keep the main action visible beside the Menu button (NN/g: expose some options instead of hiding all) */
  .header-cta {
    display: inline-flex; align-items: center; gap: calc(var(--spacing) * 2); margin: 0 calc(var(--spacing) * 2) 0 auto;
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3); border: 1px solid var(--color-accent); border-radius: var(--radius-lg);
    background: var(--color-accent); color: var(--color-on-accent); font-size: var(--text-small); font-weight: var(--font-weight-semibold);
  }
  @media (hover: hover) { .header-cta:hover { background: var(--color-accent-hover); text-decoration: none; } }
  .site-header nav {
    display: none; position: absolute; top: calc(100% - var(--spacing) * 3); right: 0; z-index: var(--z-dropdown); width: min(calc(var(--spacing) * 75), 100%);
    flex-direction: column; align-items: stretch; gap: calc(var(--spacing) * 5); padding: calc(var(--spacing) * 6);
    border: 1px solid var(--color-line-strong); background: var(--color-surface); box-shadow: var(--shadow-menu);
  }
  .site-header nav.open { display: flex; }
  .site-header nav .nav-contact { display: none; }  /* already shown as .header-cta */
}

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

.site-footer { padding: calc(var(--spacing) * 12) 0 calc(var(--spacing) * 6); background: var(--color-footer); color: var(--color-footer-text); }
.site-footer .wordmark img { height: var(--logo-height-footer); }
.site-footer :focus-visible { outline-color: var(--color-footer-text); }  /* white ring on the dark footer */
.footer-grid { display: grid; grid-template-columns: repeat(2, minmax(max-content, 1fr)); gap: calc(var(--spacing) * 8); }  /* a column never narrower than its longest link */
.footer-grid > div:first-child { grid-column: 1 / -1; }
.footer-grid p { margin: calc(var(--spacing) * 4) 0; color: var(--color-footer-muted); }
.footer-grid .social-links { margin-top: calc(var(--spacing) * 6); color: var(--color-footer-muted); }
.footer-grid h2 { margin: calc(var(--spacing) * 3) 0 calc(var(--spacing) * 4); color: var(--color-footer-muted); }
.footer-grid > div:not(:first-child) a { display: block; margin: calc(var(--spacing) * 3) 0; font-size: var(--text-small); color: var(--color-footer-text); }
.footer-bottom {
  display: flex; justify-content: space-between; margin-top: calc(var(--spacing) * 8); padding-top: calc(var(--spacing) * 6);
  border-top: 1px solid var(--color-footer-line); font-size: var(--text-caption); color: var(--color-footer-muted);
}
@media (width >= 48rem) {
  .site-footer { padding-top: calc(var(--spacing) * 16); }
  .footer-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: calc(var(--spacing) * 14); }
  .footer-grid > div:first-child { grid-column: auto; }
  .footer-grid h2 { margin-bottom: calc(var(--spacing) * 6); }
  .footer-bottom { margin-top: calc(var(--spacing) * 12); }
}

/* ---------- Forms ----------
   Built by src/components/ContactForm.astro. GOV.UK Design System pattern: label above the field, then hint, then
   error, then the field; required fields end with a red "*" explained in a note at the top of the form (NN/g). */

.form-note { margin-bottom: calc(var(--spacing) * 6); font-size: var(--text-small); line-height: var(--text-small--line-height); color: var(--color-muted); }
.field { margin: 0 0 calc(var(--spacing) * 6); padding: 0; border: 0; min-inline-size: 0; }
.field-label { display: block; margin-bottom: calc(var(--spacing) * 2); padding: 0; font-weight: var(--font-weight-semibold); color: var(--color-ink); }
.field-required { color: var(--color-error); }
.field-for { font-weight: normal; color: var(--color-muted); }
.field-hint { margin-bottom: calc(var(--spacing) * 2); font-size: var(--text-small); line-height: var(--text-small--line-height); color: var(--color-muted); }
.field-error { margin-bottom: calc(var(--spacing) * 2); font-size: var(--text-small); line-height: var(--text-small--line-height); font-weight: var(--font-weight-semibold); color: var(--color-error); }

.form input[type="text"],
.form input[type="email"],
.form textarea {
  display: block; width: 100%; padding: calc(var(--spacing) * 3) var(--input-pad-x);
  border: 1px solid var(--color-line-input); border-radius: var(--radius-lg); background: var(--color-surface);
  color: var(--color-ink); font: inherit;   /* 16px: phones do not zoom in on focus */
}
.form input[type="text"],
.form input[type="email"] { height: var(--input-height); }
.form textarea { min-height: calc(var(--input-height) * 3); resize: vertical; }
@media (hover: hover) { .form input:hover,
.form textarea:hover { border-color: var(--color-muted); } }
.form :is(input, textarea):focus-visible { outline-offset: 0; border-color: var(--color-accent); }
.field.has-error :is(input[type="text"], input[type="email"], textarea) { border: 2px solid var(--color-error); }

/* The first question: two choices shown as bordered rows */
.choice-list { display: grid; gap: calc(var(--spacing) * 3); }
.choice {
  display: flex; align-items: center; gap: calc(var(--spacing) * 3); min-height: var(--input-height);
  padding: 0 var(--input-pad-x); border: 1px solid var(--color-line-input); border-radius: var(--radius-lg);
  background: var(--color-surface); cursor: pointer;
}
@media (hover: hover) { .choice:hover { border-color: var(--color-muted); } }
.choice:has(input:checked) { border-color: var(--color-accent); background: var(--color-panel); }
.choice input { width: var(--icon-size); height: var(--icon-size); margin: 0; accent-color: var(--color-accent); }
.choice input:focus-visible { outline-offset: 2px; }
.field.has-error .choice { border-color: var(--color-error); }

/* Hidden from people; forms that fill it in are spam */
.form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.error-summary {
  margin-bottom: calc(var(--spacing) * 8); padding: var(--card-pad-sm);
  border: 2px solid var(--color-error); border-radius: var(--radius-lg);
}
.error-summary .text-title { margin-bottom: calc(var(--spacing) * 3); }
.error-summary ul { margin: 0; padding-left: 1.25em; }
.error-summary li + li { margin-top: calc(var(--spacing) * 2); }
.error-summary a { color: var(--color-error); font-weight: var(--font-weight-semibold); text-decoration: underline; }

.form .button { margin-top: calc(var(--spacing) * 2); }
.form-status:not(:empty),
.form-failed:not(:empty) { margin-top: calc(var(--spacing) * 4); }
.form-status { color: var(--color-muted); }
.form-failed { font-weight: var(--font-weight-semibold); color: var(--color-error); }

.form-sent { padding: var(--card-pad); border: 1px solid var(--color-line); border-radius: var(--radius-2xl); background: var(--color-panel); }

/* ---------- Dialogs ---------- */

dialog {
  width: calc(100% - 2 * var(--spacing) * 5); max-width: var(--container-lead); max-height: 85vh; padding: var(--card-pad);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-xl); background: var(--color-surface); color: var(--color-ink);
}
dialog::backdrop { background: var(--color-backdrop); }
dialog h2 { margin: calc(var(--spacing) * 6) 0 var(--gap-heading); }
dialog h3 { margin: calc(var(--spacing) * 6) 0 calc(var(--spacing) * 2); }
dialog p { margin: calc(var(--spacing) * 4) 0; color: var(--color-text); }
.dialog-top { display: flex; justify-content: space-between; gap: calc(var(--spacing) * 5); font-size: var(--text-caption); color: var(--color-faint); }
.dialog-top button { padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3); border: 0; border-radius: var(--radius-lg); background: var(--color-background-alt); }

/* Read out by screen readers only, such as the "Error:" before each field error */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip-link { position: fixed; top: -100px; left: calc(var(--spacing) * 5); z-index: var(--z-top); padding: calc(var(--spacing) * 3); background: var(--color-surface); }
.skip-link:focus { top: calc(var(--spacing) * 2.5); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Added U451: tablet header ---------- */
/* Between phone and desktop: tighter gaps and no wrapping keep the plain nav links on one line (added when the nav had
   five links; Free AI skills left the nav in U453, and the rule is kept as headroom) */
@media (width >= 48rem) and (width < 64rem) {
  .site-header nav { gap: calc(var(--spacing) * 4); }
  .site-header nav a { white-space: nowrap; }
  .site-header .nav-contact { padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 4); }
  .site-header .nav-contact span { margin-left: calc(var(--spacing) * 2); }
}

/* Added U451 cross-review round 3: a link inside a form note must not rely on colour alone (WCAG 1.4.1) */
.form-note a { color: var(--color-accent-hover); text-decoration: underline; text-underline-offset: 0.15em; }

/* ---------- Added U470: skills chosen on skill pages, listed in the contact form ----------
   Built by src/components/ContactForm.astro and public/app.js: one row per skill (its name links to our skill page)
   with a "×" that removes it, on the tinted panel colour so they do not look like fields to type in. */
.chosen-skills { margin: 0 0 calc(var(--spacing) * 6); }
.chosen-skills ul { display: grid; gap: calc(var(--spacing) * 3); margin: 0; padding: 0; list-style: none; }
.chosen-skills li {
  display: flex; align-items: center; justify-content: space-between; gap: calc(var(--spacing) * 3);
  min-height: var(--input-height); padding: 0 calc(var(--spacing) * 1) 0 var(--input-pad-x);
  border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-panel);
}
.chosen-skills a { min-width: 0; overflow-wrap: anywhere; font-weight: var(--font-weight-semibold); color: var(--color-accent-hover); text-decoration: underline; text-underline-offset: 0.15em; }
.chosen-skills button {
  display: grid; place-content: center; flex: none; width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10);
  padding: 0; border: 0; border-radius: var(--radius-lg); background: transparent; cursor: pointer;
  font: inherit; font-size: var(--text-title); line-height: 1; color: var(--color-muted);
}
@media (hover: hover) { .chosen-skills button:hover { background: var(--color-surface); color: var(--color-ink); } }
.chosen-skills button:focus-visible { outline-offset: 0; }

/* The email panel that stands in for the form on a live site without a send address: the chosen-skill list sits
   between its lead and the email button; the button's own top margin spaces it below */
.form-email .chosen-skills { margin: calc(var(--spacing) * 6) 0 0; }

/* ---------- Added U498: article cards are one link as a whole ----------
   Built by src/components/ArticleCard.astro (homepage Journal section, the Journal list, More to explore). As the
   skill cards (skills.css, U468): the title's link stays the only link and its ::after covers the card (Inclusive
   Components, "Cards"); hover gives the border the accent and underlines the title; the focus ring goes round the
   whole card where :has() works, elsewhere the link keeps its own ring. */
.article-card { position: relative; }
.article-card .text-title a::after { content: ""; position: absolute; inset: 0; }
@media (hover: hover) {
  .article-card:hover { border-color: var(--color-accent); }
  .article-card:hover .text-title a { text-decoration: underline; }
}
@supports selector(:has(*)) {
  .article-card:has(.text-title a:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 5px; }
  .article-card .text-title a:focus-visible { outline: none; }
}

/* ---------- Added U526, U527: second-level page titles (AI workflows, cross-border e-commerce, skills library,
   Journal list) are 44px on desktops instead of 56px, so the headline does not crowd the smaller page-head picture.
   Phones and tablets are unchanged. ---------- */
.page-title { font-size: var(--text-page-title); }

/* U527 cross-review: balanced lines, so a 44px title does not end on a single word (as h2 and h3 above) */
.page-title { text-wrap: balance; }

/* A page title sized by its length (kya-website-builder typography.md §4, U533): on desktops, where it would break the
   skill's 2-line limit, it steps down the skill's order: one step to --text-display-s (never above the page-title
   size), two steps to --text-headline. Measured: AI workflows needs one step (3 lines at 1024px), cross-border two. */
@media (width >= 64rem) {
  .page-title.is-step-1 { font-size: min(var(--text-page-title), var(--text-display-s)); }
  .page-title.is-step-2 { font-size: var(--text-headline); }
}

/* ---------- Page shell, the same on every page but the homepage (U538) ----------
   Each page starts with the breadcrumb (src/components/Breadcrumbs.astro) at the top left of its content column,
   the same distance below the header everywhere: the page's first section uses --hero-space-top. No eyebrow repeats
   the page's own name: the breadcrumb and the navigation already name it. */
.crumbs { margin-bottom: var(--gap-heading); font-size: var(--text-small); line-height: var(--text-small--line-height); color: var(--color-muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 2); margin: 0; padding: 0; list-style: none; }
.crumbs li + li::before { content: "›"; margin-right: calc(var(--spacing) * 2); color: var(--color-faint); }
.crumbs a { color: var(--color-accent); }
.crumbs [aria-current] { color: var(--color-text); }
.page-start { padding-top: var(--hero-space-top); }

/* Note (U537, U538): .page-title (above, added for U526, U527) now marks the page title on every page but the homepage,
   36 / 44 / 44px; the type scale is one for the whole site (tokens.css). */

/* Card descriptions run to several lines, so they are body text at 16px, not small text (U540; build skill
   typography.md §6). The date line keeps its caption size. */
.card-body > p:not(.card-meta) { font-size: var(--text-body); line-height: var(--text-body--line-height); }

/* U543: a breadcrumb whose current item the h1 repeats right below (articles) stops at its parent on phones; the
   current item stays for screen readers and in the BreadcrumbList data */
@media (width < 48rem) {
  .crumbs.is-short-on-phone li:last-child { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* U543, U544: the head of a page whose body is a centred reading column (articles, privacy) starts at the page
   container's left edge like every other page; its lines keep the reading column's width (the track's 65ch resolves
   in the head's own body font, as the column's width does) */
.reading-head { display: grid; grid-template-columns: min(100%, var(--container-prose)); }

/* U551 (Q54 a): both service pages now use .page-title.is-step-1 (the cross-border page's text column was widened in
   service.css), so the two service titles share one size at every width; is-step-2 is no longer used */

/* Cleanup to do (U551): .page-title.is-step-2 above is no longer used by any page; this file is append-only, so it
   stays until a tidy-up the client approves */

/* U613: Journal articles drop the breadcrumb's current item at every width, not only on phones (U543): the h1 right
   below already says it. It stays for screen readers and in the BreadcrumbList data. One layout for every article. */
.crumbs.is-short li:last-child { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Q24 option b (N26; decided overnight 2026-10-01 under U614/U615, pending client review): the nav link of the page
   the visitor is on, or of the section an article sits in, gets a thin accent underline, so aria-current is seen too.
   Only existing tokens; Let's talk (a bordered button) is left as it is. The link to the page itself still goes to the
   top (N28, unchanged). Longhands, so the hover underline (a:hover) does not reset its colour or thickness. */
.site-header nav a[aria-current]:not(.nav-contact) {
  text-decoration-line: underline; text-decoration-color: var(--color-accent);
  text-decoration-thickness: 1px; text-underline-offset: .4em;
}