/* ==========================================================================
   Your Second Curve — yoursecondcurve.com
   Palette: Midnight Navy #041225 + Second Curve Gold #AE8743 (cover print file),
   supported by Warm Ivory/Paper tints and one stone neutral.
   Self-hosted fonts, subset to German + English. No third-party requests.
   ========================================================================== */

/* ---------- fonts (local, variable, woff2, de+en subset) ---------- */
@font-face {
  font-family: "Oswald";
  src: url("oswald.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("archivo.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- design tokens ---------- */
:root {
  /* colour: the two cover colours */
  --c-navy: #041225;
  --c-gold: #AE8743;
  /* colour: supporting tints of the two, plus one neutral */
  --c-navy-2: #0A1D31;
  --c-gold-light: #C9A063;
  --c-gold-deep: #876628;          /* gold for small text on light, AA-safe */
  --c-ivory: #EAE1D3;
  --c-paper: #FAF8F4;
  --c-paper-2: #F1EDE4;
  --c-ink: #16212D;
  --c-stone: #5E5B53;              /* secondary text on light, AA-safe */
  --c-line: #DCD6CA;               /* decorative hairlines only */
  --c-edge: #857F70;               /* borders of interactive controls, >=3:1 */

  /* type */
  --font-head: "Oswald", "Arial Narrow", Arial, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --fs-hero: clamp(2.375rem, 1.1rem + 5.6vw, 4.75rem);
  --fs-h2: clamp(1.875rem, 1.2rem + 2.6vw, 3rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.55vw, 1.5rem);
  --fs-lede: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-small: clamp(0.85rem, 0.83rem + 0.1vw, 0.9rem);
  --fs-label: clamp(0.6875rem, 0.66rem + 0.12vw, 0.75rem);
  --fs-btn: clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);

  /* rhythm */
  --sp-section: clamp(4rem, 2.4rem + 6.5vw, 7rem);
  --sp-block: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  --maxw: 70rem;
  --pad: clamp(1.25rem, 4vw, 1.75rem);
  --radius: 12px;
  /* Height of the sticky header. main.js re-measures this on load and resize so
     anchors land flush against it; the value here is the no-JS fallback. */
  --header-h: 73px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* WCAG 2.2 SC 2.4.11 Focus Not Obscured: keep anchor and focus targets clear of
     the sticky header. Exactly the header height, so a section's top edge lands
     flush underneath it — any extra leaves a strip of the previous section
     showing and reads as though the page stopped short. */
  scroll-padding-top: var(--header-h);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font: 400 var(--fs-body) / 1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }
a:where(:not(.btn)) { color: var(--c-gold-deep); }
a:where(:not(.btn, .brand)):hover { color: var(--c-ink); }

/* ---------- section colour scopes ---------- */
.s-navy {
  --bg: var(--c-navy);
  --text: var(--c-ivory);
  --text-2: #AAB6C4;
  --label: var(--c-gold-light);
  --hairline: rgba(234, 225, 211, 0.18);
  --edge: rgba(234, 225, 211, 0.5);
  --focus: var(--c-gold-light);
  --btn2-text: var(--c-ivory);
  --btn2-border: rgba(234, 225, 211, 0.5);
  --btn2-hover: rgba(234, 225, 211, 0.1);
  background: var(--bg);
  color: var(--text);
}
.s-paper, .s-paper2 {
  --bg: var(--c-paper);
  --text: var(--c-ink);
  --text-2: var(--c-stone);
  --label: var(--c-gold-deep);
  --hairline: var(--c-line);
  --edge: var(--c-edge);
  --focus: var(--c-gold-deep);
  --btn2-text: var(--c-ink);
  --btn2-border: var(--c-edge);
  --btn2-hover: rgba(22, 33, 45, 0.05);
  background: var(--bg);
  color: var(--text);
}
.s-paper2 { --bg: var(--c-paper-2); }
.s-navy a:where(:not(.btn)) { color: var(--c-gold-light); }
.s-navy a:where(:not(.btn, .brand)):hover { color: var(--c-ivory); }

:focus-visible { outline: 2px solid var(--focus, var(--c-gold-deep)); outline-offset: 3px; border-radius: 1px; }
/* the skip-link target takes focus programmatically; it is not a control */
main[tabindex="-1"]:focus, main[tabindex="-1"]:focus-visible { outline: none; }

/* ---------- utilities ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nowrap { white-space: nowrap; }
.skip-link {
  position: absolute; left: var(--pad); top: -100px; z-index: 100;
  background: var(--c-gold); color: var(--c-navy); padding: 0.75rem 1.25rem;
  font: 600 var(--fs-btn) / 1 var(--font-head); letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; transition: top 0.15s ease;
}
.skip-link:focus-visible { top: var(--pad); }

.section { padding-block: var(--sp-section); }
.section-tight { padding-block: calc(var(--sp-section) * 0.66); }
.divide { border-top: 1px solid var(--hairline); margin-top: var(--sp-section); padding-top: var(--sp-section); }

/* ---------- type ---------- */
h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.06;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
.gold { color: var(--c-gold); }
.s-navy .gold { color: var(--c-gold-light); }

.eyebrow {
  font: 500 var(--fs-label) / 1.4 var(--font-head);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--label, var(--c-gold-deep));
  margin: 0 0 1.125rem;
}
.lede {
  font-size: var(--fs-lede);
  line-height: 1.62;
  color: var(--text-2, var(--c-stone));
  max-width: 62ch;
  margin-top: 1.375rem;
  text-wrap: pretty;
}
.keyline { width: 96px; height: 3px; background: var(--c-gold); border: 0; margin: 0 0 1.625rem; }

/* ---------- icons ---------- */
.ic { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.22em; }
.ic-gold { color: var(--c-gold); }
.s-paper .ic-gold, .s-paper2 .ic-gold { color: var(--c-gold-deep); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 48px; padding: 0.9em 1.75em;
  font: 600 var(--fs-btn) / 1.2 var(--font-head);
  letter-spacing: 0.13em; text-transform: uppercase;
  background: var(--c-gold); color: var(--c-navy);
  border: 1px solid var(--c-gold); border-radius: 1px;
  text-decoration: none; cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.btn:hover { background: var(--c-gold-light); border-color: var(--c-gold-light); color: var(--c-navy); }
.btn:active { transform: translateY(1px); }
/* secondary button: one rule, adapts to the section's background via scope vars */
.btn-ghost {
  background: transparent;
  color: var(--btn2-text, var(--c-ink));
  border-color: var(--btn2-border, var(--c-edge));
}
.btn-ghost:hover {
  background: var(--btn2-hover, rgba(22, 33, 45, 0.05));
  border-color: var(--btn2-text, var(--c-ink));
  color: var(--btn2-text, var(--c-ink));
}
.cta-row { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: 2.375rem; }

/* ---------- header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  /* Opaque, and no backdrop-filter. A translucent blurred bar let every section
     edge and photo show through as it scrolled underneath (dozens of shade
     changes per scroll), and browsers re-render a blurred sticky bar unevenly
     when content beneath it animates or carries its own blur: seen as flicker. */
  background: var(--c-navy);
  border-bottom: 1px solid rgba(234, 225, 211, 0.12);
  --focus: var(--c-gold-light);
}
.site-header .inner {
  max-width: var(--maxw); margin-inline: auto; padding: 0.875rem var(--pad);
  display: flex; align-items: center; gap: 1.75rem;
}
.brand {
  font: 600 clamp(0.875rem, 0.8rem + 0.35vw, 1rem) / 1.2 var(--font-head);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-ivory); text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 0.625rem; min-height: 44px;
}
.brand em { font-style: normal; color: var(--c-gold-light); }
/* the wordmark is not a text link: it keeps its colours on hover */
.brand:hover { color: var(--c-ivory); }
.brand:hover em { color: var(--c-gold-light); }
.brand svg { width: 2rem; height: auto; flex: none; }
.nav-links { display: flex; gap: 1.625rem; margin-left: auto; align-items: center; }
.nav-links a:where(:not(.btn)) {
  font: 500 var(--fs-btn) / 1.2 var(--font-head);
  letter-spacing: 0.11em; text-transform: uppercase;
  color: #A9B4C1; text-decoration: none; padding: 0.75rem 0.125rem;
  transition: color 0.16s ease;
}
.nav-links a:where(:not(.btn)):hover,
.nav-links a[aria-current]:where(:not(.btn)) { color: var(--c-ivory); }
.nav-links .btn { min-height: 44px; padding: 0.7em 1.4em; }
.nav-toggle {
  display: none; margin-left: auto;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(234, 225, 211, 0.5); border-radius: 1px;
  color: var(--c-ivory); cursor: pointer;
}
.nav-toggle .ic { width: 1.375rem; height: 1.375rem; }
.nav-toggle[aria-expanded="true"] .ic-open, .nav-toggle[aria-expanded="false"] .ic-close { display: none; }
@media (max-width: 53.75em) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    display: none; position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--c-navy); border-bottom: 1px solid rgba(234, 225, 211, 0.12);
    padding: 0.5rem var(--pad) 1.25rem;
  }
  .nav-links.open { display: flex; }
  .nav-links a:where(:not(.btn)) { padding: 0.875rem 0.25rem; border-bottom: 1px solid rgba(234, 225, 211, 0.1); }
  .nav-links .btn { margin-top: 1rem; }
}

/* ---------- the gold curve ---------- */
.curve { display: block; width: 100%; height: clamp(3rem, 6vw, 4.625rem); }
.curve path { fill: none; stroke: var(--c-gold); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.curve circle { fill: var(--c-gold); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 2rem + 5vw, 5.5rem) 0; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 0.56fr) minmax(0, 0.44fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.hero-copy { padding-bottom: clamp(3rem, 6vw, 5.5rem); }
.hero-shot { position: relative; align-self: stretch; min-height: 100%; }
.hero-shot img { width: 100%; height: 100%; object-fit: cover; }
/* the photo dissolves into the navy on every edge; no visible border */
.hero-shot::after {
  content: ""; position: absolute; inset: -1px;
  background: linear-gradient(to right, var(--c-navy) 0%, rgba(4, 18, 37, 0) 28%),
              linear-gradient(to left, var(--c-navy) 0%, rgba(4, 18, 37, 0) 24%),
              linear-gradient(to top, var(--c-navy) 3%, rgba(4, 18, 37, 0) 36%),
              linear-gradient(to bottom, var(--c-navy) 0%, rgba(4, 18, 37, 0) 28%);
}
.hero-curve { position: absolute; left: 0; right: 0; bottom: -2px; height: clamp(4rem, 12vw, 10rem); pointer-events: none; }
@media (max-width: 53.75em) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { padding-bottom: 0; }
  .hero-shot { min-height: 0; margin-top: 1rem; }
  .hero-shot img { aspect-ratio: 4 / 3; }
}

/* ---------- curve-one diagram ---------- */
.curveone-grid { display: grid; grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr); gap: clamp(2rem, 5vw, 4rem); align-items: end; }
.curveone-grid .lede { margin-top: 0; }
@media (max-width: 53.75em) { .curveone-grid { grid-template-columns: 1fr; } }
.diagram { margin-top: var(--sp-block); }
.diagram svg { display: block; width: 100%; height: auto; }
.diagram-labels { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.75rem; }
.diagram-labels span { font: 500 var(--fs-label) / 1.4 var(--font-head); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2); }
.diagram-labels .mid { color: var(--label); }
.diagram-labels b { font-weight: 600; color: var(--text); }
.diagram-labels .lbl-second b { color: var(--label); }
.outcomes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; padding: 0; list-style: none; }
@media (max-width: 40em) { .outcomes { grid-template-columns: 1fr; } }
.outcome { border: 1px solid var(--hairline); border-radius: 8px; padding: 1.375rem 1.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.625rem; }
.outcome .ic { width: 1.625rem; height: 1.625rem; }
.outcome h3 { font: 600 var(--fs-label) / 1.4 var(--font-head); letter-spacing: 0.18em; text-transform: uppercase; }
.outcome p { font-size: 0.9rem; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }

/* ---------- three-column problem ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16.5rem, 100%), 1fr)); gap: clamp(1.75rem, 4vw, 2.75rem); margin-top: clamp(2.5rem, 5vw, 3.75rem); padding: 0; list-style: none; }
.grid-3 h3 { margin-bottom: 0.75rem; }
.grid-3 p { color: var(--text-2); font-size: clamp(0.95rem, 0.93rem + 0.1vw, 1rem); line-height: 1.62; text-wrap: pretty; }
.num { font: 600 var(--fs-label) / 1 var(--font-head); letter-spacing: 0.16em; color: var(--label); display: block; margin-bottom: 0.875rem; }

/* ---------- system layers ---------- */
.startband {
  background: rgba(234, 225, 211, 0.07); border-left: 3px solid var(--c-gold);
  padding: 1.375rem 1.875rem; display: flex; gap: 1.625rem; flex-wrap: wrap; align-items: baseline;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.s-paper .startband, .s-paper2 .startband { background: rgba(174, 135, 67, 0.07); }
.tag { font: 500 var(--fs-label) / 1.4 var(--font-head); letter-spacing: 0.19em; text-transform: uppercase; color: var(--label); }
.tag-block { display: block; margin-top: var(--sp-block); }
.startband .t { font-size: var(--fs-small); }
.startband .t b { color: var(--label); font-family: var(--font-head); font-weight: 600; margin-right: 0.375rem; }
.layers { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; padding: 0; list-style: none; }
.layers + .lede { margin-top: 2.125rem; }
.layer {
  background: var(--c-navy-2); border-left: 3px solid var(--c-gold);
  padding: 2rem 2.125rem; border-radius: 1px;
  display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: 2.125rem; align-items: start;
}
.s-paper .layer, .s-paper2 .layer { background: #FFFFFF; border: 1px solid var(--c-line); border-left: 3px solid var(--c-gold); }
@media (max-width: 47.5em) { .layer { grid-template-columns: 1fr; gap: 1.375rem; padding: 1.5rem 1.375rem; } }
.layer .tag { display: block; margin-bottom: 0.5625rem; }
.layer h3 { margin-bottom: 0.6875rem; }
.layer > div > p { color: var(--text-2); font-size: clamp(0.93rem, 0.9rem + 0.12vw, 0.97rem); line-height: 1.58; }
.pills { display: flex; flex-wrap: wrap; gap: 0.5625rem; padding: 0; margin: 0; list-style: none; }
.pill {
  border: 1px solid var(--hairline); padding: 0.5625rem 0.8125rem; border-radius: 1px;
  display: inline-flex; gap: 0.5625rem; align-items: baseline;
  font-size: clamp(0.85rem, 0.83rem + 0.08vw, 0.875rem);
}
.pill b { font-family: var(--font-head); font-weight: 600; color: var(--label); }

/* ---------- toolkit ---------- */
.tk-grid { display: grid; grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr); gap: clamp(2.5rem, 5vw, 3.75rem); align-items: center; }
@media (max-width: 53.75em) { .tk-grid { grid-template-columns: 1fr; } }
.shadowed img, .shadowed { border-radius: var(--radius); }
.tk-grid .shadowed img { box-shadow: 0 2px 8px rgba(4, 18, 37, 0.1), 0 26px 52px rgba(4, 18, 37, 0.16); }
.feature-list { list-style: none; padding: 0; margin: 1.875rem 0 0; display: flex; flex-direction: column; gap: 1rem; }
.feature-list li { display: flex; gap: 0.875rem; align-items: flex-start; font-size: clamp(0.95rem, 0.93rem + 0.1vw, 1rem); line-height: 1.58; text-wrap: pretty; }
.feature-list .ic { margin-top: 0.2em; width: 1.375rem; height: 1.375rem; }
.spread { margin: clamp(3.5rem, 7vw, 5.5rem) 0 0; }
/* The photograph carries its own edges, so no frame around it — a border here
   just drew a box in the empty desk space. */
.spread img { width: 100%; display: block; border-radius: var(--radius); }

/* click-to-enlarge trigger: a real button, so it is keyboard reachable */
.zoomable {
  display: block; position: relative; width: 100%; padding: 0; margin: 0;
  border: 0; background: none; cursor: zoom-in; border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(4, 18, 37, 0.07), 0 20px 44px rgba(4, 18, 37, 0.1);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}
.zoomable:hover { box-shadow: 0 4px 12px rgba(4, 18, 37, 0.1), 0 26px 56px rgba(4, 18, 37, 0.16); }
.zoom-hint {
  position: absolute; right: 0.875rem; bottom: 0.875rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(4, 18, 37, 0.82); color: var(--c-ivory);
  padding: 0.5rem 0.8125rem; border-radius: 2px;
  font: 500 var(--fs-label) / 1 var(--font-head);
  letter-spacing: 0.16em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0.92; transition: opacity 0.2s ease;
}
.zoomable:hover .zoom-hint { opacity: 1; }
.zoom-hint .ic { width: 1rem; height: 1rem; }
@media (prefers-reduced-motion: reduce) { .zoomable, .zoom-hint { transition: none; } }

/* ---------- lightbox ---------- */
.lightbox {
  width: min(96vw, 1600px); max-width: none;
  max-height: 94svh; padding: 0; border: 0; background: transparent;
  overflow: visible; color: var(--c-ivory);
}
.lightbox::backdrop {
  background: rgba(4, 18, 37, 0.97);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.lightbox[open] { display: flex; flex-direction: column; gap: 0.875rem; }
.lightbox-scroll { overflow: auto; -webkit-overflow-scrolling: touch; border-radius: 4px; }
.lightbox-img {
  display: block; width: 100%; height: auto;
  max-height: 84svh; object-fit: contain;
  border-radius: 4px; background: var(--c-navy-2);
}
.lightbox-caption {
  font-size: var(--fs-small); line-height: 1.5; color: #C3CCD6;
  text-wrap: pretty; margin: 0;
}
.lightbox-close {
  position: absolute; top: -0.5rem; right: -0.5rem; z-index: 2;
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-navy); color: var(--c-ivory);
  border: 1px solid rgba(234, 225, 211, 0.5); border-radius: 50%; cursor: pointer;
}
.lightbox-close:hover { background: var(--c-gold); color: var(--c-navy); border-color: var(--c-gold); }
.lightbox-close svg { width: 1.25rem; height: 1.25rem; }
.lightbox-close:focus-visible { outline: 2px solid var(--c-gold-light); outline-offset: 2px; }
@media (max-width: 40em) {
  .lightbox { width: 100vw; max-height: 100svh; }
  .lightbox-close { top: 0.5rem; right: 0.5rem; }
  .lightbox-caption { padding-inline: 1rem; }
  /* A two-page spread scaled to a phone's width is unreadable. Render it tall
     instead and let the reader swipe sideways, which beats pinch-zooming. */
  .lightbox-scroll { max-height: 74svh; }
  .lightbox-img { width: auto; height: 74svh; max-width: none; max-height: none; }
}
.caption { font-size: var(--fs-small); line-height: 1.6; color: var(--text-2); max-width: 74ch; margin-top: 1.125rem; text-wrap: pretty; }

/* form */
.get-form { margin-top: 2.375rem; }
.get { display: flex; gap: 0.6875rem; flex-wrap: wrap; align-items: stretch; }
/* The name row and the email row are separate flex rows. The name fields get a
   smaller flex basis than the email field so the two of them still sit side by
   side at 390px rather than stacking the form three rows deep. */
.get + .get { margin-top: 0.6875rem; }
.get-names input { flex: 1 1 8rem; }
.get input {
  flex: 1 1 15.375rem; min-width: 0; min-height: 48px; padding: 0.8125rem 1.0625rem;
  font: 400 1rem/1.4 var(--font-body);
  border: 1px solid var(--c-edge); background: #FFFFFF; color: var(--c-ink); border-radius: 1px;
}
.get input::placeholder { color: #6F6B62; opacity: 1; }
.get input:focus-visible { border-color: var(--c-gold-deep); outline: 2px solid var(--c-gold-deep); outline-offset: 1px; }
.get input[aria-invalid="true"] { border-color: #8A3A2E; border-width: 2px; }
.s-navy .get input { border-color: rgba(234, 225, 211, 0.5); background: rgba(234, 225, 211, 0.06); color: var(--c-ivory); }
.s-navy .get input::placeholder { color: #9CA8B6; }
.s-navy .get input:focus-visible { border-color: var(--c-gold-light); outline-color: var(--c-gold-light); }
.s-navy .get input[aria-invalid="true"] { border-color: #E7A79A; }
/* Spam decoy. display:none so it cannot render, cannot be focused, cannot be
   autofilled and is never announced — bots that parse the HTML still fill it. */
.hp { display: none; }

.consent { display: flex; gap: 0.6875rem; align-items: flex-start; margin-top: 1rem; max-width: 56ch; }
.consent input[type="checkbox"] {
  flex: none; width: 1.25rem; height: 1.25rem; margin: 0.1rem 0 0;
  accent-color: var(--c-gold); cursor: pointer;
}
.consent label { font-size: 0.84375rem; line-height: 1.55; color: var(--text-2); cursor: pointer; }
.consent input[aria-invalid="true"] { outline: 2px solid #8A3A2E; outline-offset: 2px; }
.s-navy .consent input[aria-invalid="true"] { outline-color: #E7A79A; }

.micro { font-size: 0.84375rem; color: var(--text-2); margin-top: 0.9375rem; line-height: 1.55; max-width: 56ch; }
.micro.error { color: #8A3A2E; font-weight: 600; }
.s-navy .micro.error { color: #E7A79A; }

/* ---------- podcast teaser ---------- */
.pod-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
@media (max-width: 40em) { .pod-grid { grid-template-columns: 1fr; } }
.pod-art { width: clamp(9rem, 18vw, 14rem); }
.pod-art img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: 0 0 0 1px rgba(201, 160, 99, 0.3), 0 24px 48px rgba(0, 0, 0, 0.4); }
@media (max-width: 40em) { .pod-art { width: 11rem; } }
.pod-meta { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.5rem; padding: 0; list-style: none; }
.pod-when { display: inline-flex; gap: 0.625rem; align-items: center; font: 500 var(--fs-label) / 1.4 var(--font-head); letter-spacing: 0.18em; text-transform: uppercase; color: var(--label); }

/* ---------- podcast page ---------- */
.pod-hero { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 2rem + 5vw, 6rem); }
.pod-hero .curve-bg { position: absolute; left: 0; right: 0; bottom: 4%; height: clamp(5rem, 16vw, 12rem); pointer-events: none; opacity: 0.9; }
.pod-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 0.58fr) minmax(0, 0.42fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.pod-hero h1 { max-width: 14ch; }
.pod-cover { justify-self: end; width: 100%; max-width: 28rem; }
.pod-cover img { width: 100%; border-radius: var(--radius); box-shadow: 0 0 0 1px rgba(201, 160, 99, 0.3), 0 30px 60px rgba(0, 0, 0, 0.45); }
@media (max-width: 53.75em) {
  .pod-hero-grid { grid-template-columns: 1fr; }
  .pod-cover { justify-self: start; max-width: 20rem; }
}
.listen { margin-top: 2.25rem; }
.listen .btn { padding-inline: 1.375rem; }
.pod-hero .micro .ic { width: 1em; height: 1em; vertical-align: -0.12em; }

/* the latest episode: artwork beside the title and the show notes */
.ep-feature { display: grid; grid-template-columns: minmax(0, 0.5fr) minmax(0, 0.5fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 53.75em) { .ep-feature { grid-template-columns: 1fr; } }
.ep-art img { width: 100%; border-radius: var(--radius); box-shadow: 0 2px 8px rgba(4, 18, 37, 0.1), 0 26px 52px rgba(4, 18, 37, 0.16); }
.ep-art-link { position: relative; display: block; border-radius: var(--radius); }
.ep-art-link:hover .zoom-hint { opacity: 1; }
/* an episode with no thumbnail of its own falls back to the square cover */
.ep-art-cover img { max-width: 20rem; }
.ep-meta {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1.125rem; margin: 0 0 0.875rem; padding: 0; list-style: none;
  font: 500 var(--fs-label) / 1.5 var(--font-head); letter-spacing: 0.16em; text-transform: uppercase; color: var(--label);
}
.ep-meta li + li::before { content: ""; display: inline-block; width: 3px; height: 3px; margin-right: 1.125rem; border-radius: 50%; background: currentColor; vertical-align: 0.28em; }
.ep-title { font-size: clamp(1.625rem, 1.2rem + 1.7vw, 2.375rem); line-height: 1.12; }
.ep-body { margin-top: 1.25rem; color: var(--text-2); max-width: 62ch; text-wrap: pretty; }
.ep-body p + p, .ep-body ul + p, .ep-body p + ul { margin-top: 0.875rem; }
.ep-body ul, .ep-body ol { margin: 0.875rem 0 0; padding-left: 1.25rem; }
.ep-body li + li { margin-top: 0.3rem; }
.ep-body strong { color: var(--text); font-weight: 600; }

/* titles that lead to the episode's own page */
.ep-title a, .ep-item h3 a { color: inherit; text-decoration: none; }
.ep-title a:hover, .ep-item h3 a:hover { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; text-decoration-color: var(--c-gold); }

/* the episode's own page: breadcrumb and heading on navy, then notes and listening links */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 1.125rem; padding: 0; list-style: none; font: 500 var(--fs-label) / 1.5 var(--font-head); letter-spacing: 0.16em; text-transform: uppercase; }
.crumbs li { display: flex; align-items: center; min-height: 2rem; }
.crumbs li + li::before { content: "/"; margin-inline: 0.75rem; color: var(--text-2); }
.crumbs [aria-current] { color: var(--text-2); }
.ep-h1 { font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem); line-height: 1.08; max-width: 22ch; }
/* the episode page: title, picture and listening links together above the fold, notes beside "more episodes" */
.ep-hero { padding-block: clamp(1.75rem, 1rem + 3vw, 3.25rem); }
.ep-hero-grid { display: grid; grid-template-columns: minmax(0, 0.56fr) minmax(0, 0.44fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (max-width: 53.75em) { .ep-hero-grid { grid-template-columns: 1fr; } }
.ep-hero .ep-art img { box-shadow: 0 0 0 1px rgba(201, 160, 99, 0.25), 0 24px 48px rgba(0, 0, 0, 0.4); }
.ep-hero .ep-art-cover img { max-width: 16rem; }
.ep-hero .listen { margin-top: 1.5rem; }
.ep-cols { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 0.38fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 53.75em) { .ep-cols { grid-template-columns: 1fr; } }
.ep-cols .ep-body { margin-top: 0; max-width: 60ch; }
.ep-more h2 { font: 500 var(--fs-label) / 1.4 var(--font-head); letter-spacing: 0.2em; text-transform: uppercase; color: var(--label); margin: 0 0 1rem; }
.ep-more .ep-list { margin-top: 0; }
.ep-more .ep-item { padding-block: 1.125rem; }
.ep-more .ep-item h3 { font-size: 1.125rem; }
.ep-more .ep-meta { margin-bottom: 0.4rem; }

/* what YouTube reports for the episode's video: stars, rating, views */
.ep-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 1.25rem; margin: 0.875rem 0 0; padding: 0; list-style: none; font-size: var(--fs-small); color: var(--text-2); }
.ep-stats li { display: inline-flex; align-items: center; gap: 0.4375rem; }
.ep-stats .ic { width: 1.125rem; height: 1.125rem; color: var(--label); }
.ep-stars { display: inline-flex; gap: 0.0625rem; }
.ep-stars .ic { width: 1rem; height: 1rem; vertical-align: 0; }
.ep-rating small { font-size: inherit; color: var(--text-2); }

/* earlier episodes: a plain ruled list that stays readable at any length */
.ep-list { list-style: none; margin: 2.25rem 0 0; padding: 0; border-top: 1px solid var(--hairline); }
.ep-item { padding-block: clamp(1.5rem, 3vw, 2rem); border-bottom: 1px solid var(--hairline); }
.ep-item h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); text-transform: none; letter-spacing: 0; line-height: 1.2; }
/* a row with a thumbnail gets it on the left; on a phone it sits above */
.ep-item.has-thumb { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2rem); align-items: start; }
@media (max-width: 40em) { .ep-item.has-thumb { grid-template-columns: 1fr; } }
.ep-thumb { display: block; }
.ep-thumb img { width: 100%; border-radius: 8px; box-shadow: 0 1px 4px rgba(4, 18, 37, 0.1), 0 12px 26px rgba(4, 18, 37, 0.1); }
.ep-links { margin-top: 0.5rem; }
.ep-links a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; font: 500 var(--fs-btn) / 1.2 var(--font-head); letter-spacing: 0.13em; text-transform: uppercase; text-decoration: none; }
.ep-links a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.ep-excerpt { margin-top: 0.75rem; color: var(--text-2); max-width: 62ch; text-wrap: pretty; }
.ep-notes summary {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; margin-top: 0.25rem; cursor: pointer; list-style: none;
  font: 500 var(--fs-btn) / 1.2 var(--font-head); letter-spacing: 0.13em; text-transform: uppercase; color: var(--label);
}
.ep-notes summary::-webkit-details-marker { display: none; }
.ep-notes summary:hover { color: var(--text); }
.ep-notes summary .ic { transition: transform 0.2s ease; }
.ep-notes[open] summary .ic { transform: rotate(180deg); }
.ep-notes .ep-body { margin-top: 0.5rem; }
@media (prefers-reduced-motion: reduce) { .ep-notes summary .ic { transition: none; } }

/* video band: the channel art as a link to the channel */
.yt-grid { display: grid; grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 53.75em) { .yt-grid { grid-template-columns: 1fr; } }
.yt-card { position: relative; display: block; border-radius: var(--radius); overflow: hidden; box-shadow: 0 0 0 1px rgba(234, 225, 211, 0.16), 0 26px 52px rgba(0, 0, 0, 0.35); }
.yt-card img { width: 100%; transition: transform 0.4s ease; }
.yt-card:hover img { transform: scale(1.02); }
.yt-card:hover .zoom-hint { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .yt-card img { transition: none; } .yt-card:hover img { transform: none; } }
.next-grid { display: grid; grid-template-columns: minmax(0, 0.52fr) minmax(0, 0.48fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 53.75em) { .next-grid { grid-template-columns: 1fr; } }
.next-copy h2 { max-width: 18ch; }
.next-art img { width: 100%; border-radius: var(--radius); box-shadow: 0 2px 8px rgba(4, 18, 37, 0.1), 0 26px 52px rgba(4, 18, 37, 0.16); }

/* ---------- book ---------- */
.bk-grid { display: grid; grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr); gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (max-width: 53.75em) { .bk-grid { grid-template-columns: 1fr; } }
.bk-grid .shadowed img { box-shadow: 0 2px 6px rgba(4, 18, 37, 0.1), 0 26px 52px rgba(4, 18, 37, 0.16); }
.quote { border-left: 2px solid var(--c-gold); padding-left: 1.25rem; margin: 0; }

/* ---------- voices: five endorsements, the quote doing the talking ---------- */
.voices { margin-top: clamp(3rem, 6vw, 4.5rem); }
.voices > .eyebrow { margin-bottom: 1.5rem; }
/* Columns rather than a grid: the quotes differ wildly in length, and grid rows
   align to the tallest card, which left holes under the short ones. Columns pack
   them tight, and reading order still runs top to bottom within a column. */
.voices-grid {
  columns: 3 21rem;
  column-gap: clamp(1rem, 2vw, 1.5rem);
}
/* Each quote is a closed card, so which words belong to which name is never in
   doubt — that was the problem with loose quotes in a ragged grid. */
.voices .quote {
  margin: 0 0 clamp(1rem, 2vw, 1.5rem); border: 0; padding: clamp(1.5rem, 3vw, 2rem);
  -webkit-column-break-inside: avoid; break-inside: avoid;
  background: #FFFFFF;
  border-top: 3px solid var(--c-gold);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(4, 18, 37, 0.05), 0 10px 28px rgba(4, 18, 37, 0.06);
}
/* the quote itself is the point: large, dark, generous */
.voices .quote p {
  font-size: clamp(1.0625rem, 0.98rem + 0.42vw, 1.3125rem);
  line-height: 1.5;
  color: var(--c-ink);
  margin: 0 0 1.25rem;
  text-wrap: pretty;
}
/* the attribution stays quiet and sits at the foot of its own card */
.voices .quote footer {
  padding-top: 0.875rem;
  border-top: 1px solid var(--c-line);
  font: 500 var(--fs-label) / 1.5 var(--font-head);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-stone);
}
.voices .quote footer b {
  display: block; color: var(--c-ink); font-weight: 600;
  letter-spacing: 0.12em; margin-bottom: 0.1875rem;
}

.stackshot { margin-top: clamp(3rem, 6vw, 4.875rem); }
.stackshot img { width: 100%; border-radius: var(--radius); box-shadow: 0 2px 6px rgba(4, 18, 37, 0.08), 0 24px 48px rgba(4, 18, 37, 0.12); }

/* ---------- about ---------- */
.about { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.25rem); align-items: center; margin-top: 2rem; }
@media (max-width: 40em) { .about { grid-template-columns: 1fr; gap: 1.625rem; } }
.about img { width: 10rem; height: 10rem; border-radius: 50%; object-fit: cover; }
.about .name { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.4rem); letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 0.75rem; }
.about p { color: var(--text-2); max-width: 78ch; text-wrap: pretty; }
.author-social { margin-top: 1.25rem; }
.social-link {
  display: inline-flex; align-items: center; gap: 0.625rem; min-height: 44px;
  font: 500 var(--fs-btn) / 1.2 var(--font-head);
  letter-spacing: 0.11em; text-transform: uppercase; text-decoration: none;
}
.social-link .ic { width: 1.25rem; height: 1.25rem; }
/* underline the words only — an inline-flex link would otherwise draw the rule
   under the icon and the gap as well */
.social-link:hover .social-label { text-decoration: underline; text-underline-offset: 0.3em; }

/* ---------- faq ---------- */
.faq { margin-top: 2.25rem; border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  cursor: pointer; list-style: none; padding: 1.125rem 0.25rem; min-height: 44px;
  font: 600 clamp(1rem, 0.97rem + 0.15vw, 1.0625rem) / 1.45 var(--font-body);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { color: var(--label); transition: transform 0.2s ease; }
.faq details[open] summary .ic { transform: rotate(180deg); }
.faq details > div { padding: 0 0.25rem 1.25rem; color: var(--text-2); max-width: 65ch; text-wrap: pretty; }
.faq details > div > p + p { margin-top: 0.75rem; }
@media (prefers-reduced-motion: reduce) { .faq summary .ic { transition: none; } }

/* ---------- legal pages (imprint, privacy) ---------- */
.legal { max-width: 46rem; }
.page-head + .section { padding-top: calc(var(--sp-section) * 0.6); }
.legal h2 { font-size: clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem); margin-top: var(--sp-block); }
.legal h3 { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem); margin-top: 2rem; }
.legal p, .legal ul, .legal dl { margin-top: 0.875rem; color: var(--text-2); text-wrap: pretty; }
.legal ul { padding-left: 1.25rem; }
.legal li + li { margin-top: 0.4375rem; }
.legal address { font-style: normal; }
.legal .intro-note {
  border-left: 3px solid var(--c-gold); background: rgba(174, 135, 67, 0.07);
  padding: 1rem 1.25rem; margin-top: 1.75rem; font-size: var(--fs-small); color: var(--text-2);
}
.legal dl { display: grid; grid-template-columns: minmax(9rem, auto) minmax(0, 1fr); gap: 0.5rem 1.5rem; }
.legal dt { font: 500 var(--fs-label) / 1.5 var(--font-head); letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); padding-top: 0.2em; }
.legal dd { margin: 0; }
@media (max-width: 34em) { .legal dl { grid-template-columns: 1fr; gap: 0.125rem; } .legal dd { margin-bottom: 0.75rem; } }
.lang-marker {
  font: 500 var(--fs-label) / 1.4 var(--font-head);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--label); margin: 0 0 0.875rem;
  padding-bottom: 0.625rem; border-bottom: 1px solid var(--hairline);
}
.legal .translation .lang-marker { margin-top: 0; }
.legal .updated { font-size: var(--fs-small); color: var(--text-2); margin-top: var(--sp-block); padding-top: 1.25rem; border-top: 1px solid var(--hairline); }
/* the English translation sits below the binding German text, visibly secondary */
.legal .translation { margin-top: var(--sp-section); border-top: 3px solid var(--c-gold); padding-top: var(--sp-block); }
.legal .translation .updated { border-top: 0; }
.legal .intro-note a { display: inline-block; margin-top: 0.5rem; font-weight: 600; }

/* ---------- AI-generated image label ---------- */
figure { margin: 0; }
.ai-note {
  display: block; margin-top: 0.625rem;
  font: 500 var(--fs-label) / 1.4 var(--font-head);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-2);
}
.ai-note::before {
  content: ""; display: inline-block; vertical-align: 0.05em;
  width: 0.5em; height: 0.5em; margin-right: 0.6em; border-radius: 50%;
  background: var(--label, var(--c-gold-deep));
}
/* over a bleeding photo the label needs its own ground */
.ai-note-overlay {
  position: absolute; right: 0.875rem; bottom: 0.875rem; z-index: 2; margin: 0;
  background: rgba(4, 18, 37, 0.72); color: var(--c-ivory);
  padding: 0.4rem 0.7rem; border-radius: 2px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.ai-note-overlay::before { background: var(--c-gold-light); }
.caption + .ai-note { margin-top: 0.5rem; }

/* ---------- utility pages (podcast holding, thanks) ---------- */
.page-hero { min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; padding-block: var(--sp-section); }
/* an auto inline-margin on a flex item cancels cross-axis stretch, so the wrap
   would shrink to its content and drift out of line with the header and footer */
.page-hero > .wrap { width: 100%; }
.page-hero .curve-bg { position: absolute; left: 0; right: 0; bottom: 8%; height: clamp(5rem, 16vw, 12rem); pointer-events: none; opacity: 0.9; }
.page-head { padding-block: calc(var(--sp-section) * 0.75) var(--sp-block); position: relative; }
.dl-row { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: 2.375rem; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--c-navy); color: #97A2B0;
  padding: clamp(3rem, 6vw, 4.875rem) 0 2.875rem;
  border-top: 1px solid rgba(234, 225, 211, 0.13);
  --focus: var(--c-gold-light);
}
.site-footer.compact { padding-top: 1.5rem; border-top: 0; }
.fcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: 2.5rem; }
.fcols h2 { font: 500 var(--fs-label) / 1.4 var(--font-head); letter-spacing: 0.19em; text-transform: uppercase; color: var(--c-gold-light); margin-bottom: 0.8125rem; }
.fcols p { font-size: var(--fs-small); line-height: 1.65; color: #97A2B0; }
.fcols a { color: var(--c-ivory); text-decoration: none; border-bottom: 1px solid rgba(201, 160, 99, 0.55); }
.fcols a:hover { border-bottom-color: var(--c-gold-light); color: var(--c-ivory); }
.fbot {
  margin-top: 3.25rem; padding-top: 1.5rem; border-top: 1px solid rgba(234, 225, 211, 0.13);
  font-size: 0.8125rem;
  display: grid; align-items: center; gap: 0.75rem 1.375rem;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "name legal copy" "credit credit credit";
}
.fbot .imprint-name { grid-area: name; }
.fbot .flegal { grid-area: legal; display: flex; gap: 1.375rem; justify-content: center; }
.fbot .copyright { grid-area: copy; justify-self: end; }
.fbot .credit { grid-area: credit; justify-self: center; }
/* tablet and below: one centred column */
@media (max-width: 47.5em) {
  .fbot {
    grid-template-columns: 1fr;
    grid-template-areas: "legal" "name" "copy" "credit";
    justify-items: center; text-align: center; gap: 0.25rem;
  }
  .fbot .copyright { justify-self: center; }
  .fbot .credit { margin-top: 0.5rem; }
}
.site-footer.compact .fbot { margin-top: 0; padding-top: 1.5rem; border-top: 0; }
.fbot .imprint-name { font-family: var(--font-head); letter-spacing: 0.17em; text-transform: uppercase; }
.fbot a { color: #97A2B0; text-decoration: none; padding-block: 0.5rem; }
.fbot .credit a { border-bottom: 1px solid rgba(201, 160, 99, 0.5); }
.fbot .credit a:hover { color: var(--c-ivory); border-bottom-color: var(--c-gold-light); }
.fbot a:hover, .fbot a[aria-current] { color: var(--c-ivory); }

/* ---------- reveal on scroll ---------- */
/* visible by default; hidden only once JS confirms the observer is active */
.js-reveal .rv { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js-reveal .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .rv { opacity: 1; transform: none; transition: none; }
  .btn, .nav-links a { transition: none; }
}

/* ---------- forced colours (Windows high contrast) ---------- */
@media (forced-colors: active) {
  .btn, .pill, .outcome, .layer, .voices, .get input { border: 1px solid CanvasText; }
  .hero-shot::after { display: none; }
  :focus-visible { outline: 3px solid Highlight; }
}

/* ---------- print ---------- */
@media print {
  .site-header, .nav-toggle, .curve, .hero-shot, .skip-link, .get, .cta-row, .yt-card { display: none !important; }
  body { background: #FFF; color: #000; }
  .s-navy { background: #FFF !important; color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}