/* =========================================================================
   raphaelstrotz.com — "Swiss Grid, narrated"
   One stylesheet, zero dependencies. Self-hosted Geist Sans + Mono.
   Palette derived from the RS Engineering brand mark (navy / royal blue).
   ========================================================================= */

/* ---- Fonts (self-hosted, latin subset ~50 KB total) --------------------- */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/geist-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/geist-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/geist-sans-700.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-400.woff2") format("woff2");
}
/* Metrics-matched fallback → near-zero CLS while the webfont loads.
   Overrides come from Geist's own metrics (em 1000, asc 1005, desc 295). */
@font-face {
  font-family: "Geist Fallback";
  src: local("Segoe UI"), local("Helvetica Neue"), local("Arial");
  ascent-override: 100.5%;
  descent-override: 29.5%;
  line-gap-override: 0%;
  size-adjust: 100%;
}
/* Metrics-matched mono fallback (Geist Mono shares Geist's vertical metrics).
   Geist Mono is used above the fold (eyebrow, tagline, availability, nav). */
@font-face {
  font-family: "Geist Mono Fallback";
  src: local("Cascadia Mono"), local("Consolas"), local("SF Mono"), local("Menlo"), local("DejaVu Sans Mono");
  ascent-override: 100.5%;
  descent-override: 29.5%;
  line-gap-override: 0%;
  size-adjust: 100%;
}

/* ---- Design tokens ------------------------------------------------------ */
:root {
  color-scheme: light dark;

  /* Colour — light */
  --paper: #fbfbfa;
  --paper-2: #f2f2ee;
  --ink: #16181d;
  --ink-muted: #585c64;
  --ink-faint: #6a6e76;  /* AA (≥4.5:1) on paper */
  --rule: #e4e3de;
  --accent: #1e5fae;       /* RS brand royal blue (≈6.3:1 on paper) */
  --accent-ink: #16233f;   /* deep navy for hover/strong */
  --accent-wash: color-mix(in srgb, var(--accent) 12%, transparent);
  --on-accent: #ffffff;

  /* Type */
  --font-sans: "Geist", "Geist Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, "Cascadia Code", "Segoe UI Mono", "Roboto Mono", monospace;

  /* Fluid type scale */
  --step--1: clamp(0.78rem, 0.74rem + 0.15vw, 0.85rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.45rem, 1.3rem + 0.7vw, 1.85rem);
  --step-3: clamp(1.8rem, 1.5rem + 1.3vw, 2.6rem);
  --step-name: clamp(2.75rem, 1.9rem + 4.2vw, 5.5rem);

  /* Spacing (4 / 8 px scale) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  --measure: 62ch;
  --container: 74rem;
  --radius: 6px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f1218;
    --paper-2: #171b23;
    --ink: #e8e9ec;
    --ink-muted: #9ba1aa;
    --ink-faint: #868c96;  /* AA (≥4.5:1) on dark paper */
    --rule: #272c35;
    --accent: #5aa0f0;       /* lighter blue for contrast on dark */
    --accent-ink: #8fbef7;
    --accent-wash: color-mix(in srgb, var(--accent) 16%, transparent);
    --on-accent: #0f1218;
  }
}

/* ---- Reset / base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
p { text-wrap: pretty; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }

img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; padding: 0; }

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

/* ---- Skip link ---------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -4rem;
  z-index: 20;
  background: var(--accent);
  color: var(--on-accent);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  transition: top 0.15s ease;
}
.skip-link:focus { top: var(--space-4); text-decoration: none; }

/* ---- Layout containers -------------------------------------------------- */
.site-header,
main,
.site-footer {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 4rem);
}

/* ---- Header / language switch ------------------------------------------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-6);
}
.brand {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-size: var(--step-0);
}
.brand:hover { color: var(--ink); text-decoration: none; }
.site-nav { display: flex; align-items: center; gap: var(--space-4); }
.lang-switch {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-muted);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
}
.lang-switch:hover {
  color: var(--accent);
  border-color: var(--accent);
  text-decoration: none;
}

/* ---- Sections + Swiss numbering ---------------------------------------- */
main { counter-reset: section; }

.section {
  padding-block: var(--space-16);
  border-top: 1px solid var(--rule);
}
.section:first-child { border-top: none; }

/* Numbered content sections use a 12-col grid: label left, content right. */
.section:not(.section--hero) {
  counter-increment: section;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-6) var(--space-8);
}
.section__heading {
  grid-column: 1 / 4;
  font-size: var(--step-2);
  align-self: start;
}
.section:not(.section--hero) .section__heading::before {
  content: counter(section, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--accent);
  margin-bottom: var(--space-2);
}
.section__body,
.section__lede,
.timeline,
.principles,
.skills,
.contact-links,
.section > .print-button {
  grid-column: 4 / 13;
}
.section__lede { color: var(--ink-muted); margin-bottom: var(--space-6); }

.prose { max-width: var(--measure); }
.prose p + p { margin-top: var(--space-4); }
.prose { color: var(--ink); }

/* ---- Hero --------------------------------------------------------------- */
.section--hero {
  padding-block: clamp(var(--space-12), 8vw, var(--space-24)) var(--space-16);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-8);
  align-items: start;
}
.hero__content { grid-column: 1 / 9; }
.hero__portrait { grid-column: 9 / 13; justify-self: end; }
.hero__portrait img {
  width: clamp(120px, 14vw, 168px);
  border-radius: var(--radius);
  border: 1px solid var(--rule);
}

.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--accent);
  margin-bottom: var(--space-4);
}
.hero__name {
  font-size: var(--step-name);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-6);
}
.hero__intro {
  font-size: var(--step-1);
  max-width: 40ch;
  color: var(--ink);
  margin-bottom: var(--space-4);
}
.hero__tagline {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-muted);
  margin-bottom: var(--space-6);
}
.availability {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
}
.availability__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-wash);
}
.hero__contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--step--1);
}
.hero__contact a { color: var(--ink-muted); }
.hero__contact a:hover { color: var(--accent); }

/* ---- Experience timeline ----------------------------------------------- */
.timeline__entry {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: var(--space-4) var(--space-6);
  padding-block: var(--space-6);
  border-top: 1px solid var(--rule);
}
.timeline__entry:first-child { border-top: none; padding-top: 0; }
.timeline__period {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-muted);
  padding-top: 0.2rem;
}
.timeline__role { font-size: var(--step-1); font-weight: 500; }
.timeline__org { color: var(--ink-muted); font-weight: 400; }
.timeline__line {
  max-width: var(--measure);
  margin-top: var(--space-2);
  color: var(--ink);
}
.timeline__line + .timeline__line { margin-top: var(--space-1); }

/* ---- Tech tags ---------------------------------------------------------- */
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tag {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-muted);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  white-space: nowrap;
}
.timeline__detail .tags { margin-top: var(--space-4); }

/* ---- Approach / principles --------------------------------------------- */
.principles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8) var(--space-10);
}
.principle__title {
  font-size: var(--step-1);
  font-weight: 500;
  margin-bottom: var(--space-2);
}
.principle__title::before {
  content: "";
  display: inline-block;
  width: 1.25rem;
  height: 2px;
  background: var(--accent);
  vertical-align: middle;
  margin-right: 0.6rem;
}
.principle__body { color: var(--ink-muted); max-width: 42ch; }

/* ---- Skills ------------------------------------------------------------- */
.skills__group {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-top: 1px solid var(--rule);
  align-items: baseline;
}
.skills__group:first-child { border-top: none; padding-top: 0; }
.skills__label {
  font-weight: 500;
  font-size: var(--step-0);
}

/* ---- Contact ------------------------------------------------------------ */
.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--step-0);
}
.contact-links a::after {
  content: "→";
  margin-left: 0.4rem;
  color: var(--ink-faint);
  transition: transform 0.15s ease;
  display: inline-block;
}
.contact-links a:hover::after { color: var(--accent); }

.print-button {
  margin-top: var(--space-8);
  justify-self: start;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
}
.print-button:hover { color: var(--accent); border-color: var(--accent); }

/* ---- Footer ------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: var(--space-8) var(--space-12);
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  align-items: baseline;
  font-size: var(--step--1);
  color: var(--ink-faint);
  font-family: var(--font-mono);
}
.site-footer a { color: var(--ink-muted); }
.site-footer a:hover { color: var(--accent); }
.site-footer__note { margin-left: auto; }

/* ---- Legal pages (privacy) --------------------------------------------- */
.legal {
  max-width: 46rem;
  margin-inline: auto;
  padding: var(--space-16) clamp(1.25rem, 5vw, 4rem) var(--space-12);
}
.legal__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-muted);
}
.legal__title { font-size: var(--step-3); margin-block: var(--space-3) var(--space-6); }
.legal__intro { color: var(--ink-muted); }
.legal__section { margin-top: var(--space-10); }
.legal__heading { font-size: var(--step-1); margin-bottom: var(--space-3); }
.legal .prose p + p { margin-top: var(--space-4); }
.legal__back { margin-top: var(--space-12); font-family: var(--font-mono); }

/* ---- 404 --------------------------------------------------------------- */
.notfound {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(4rem, 20vh, 12rem) clamp(1.25rem, 5vw, 4rem);
}
.notfound__code {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--accent);
}
.notfound__title { font-size: var(--step-3); margin-block: var(--space-4) var(--space-6); }
.notfound__text { color: var(--ink-muted); max-width: var(--measure); }
.notfound__text span { display: block; }
.notfound__links { margin-top: var(--space-8); font-family: var(--font-mono); }

/* ---- Reveal-on-scroll (JS + motion gated) ------------------------------ */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  will-change: opacity, transform;
}
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}
/* Failsafe: if main.js never runs (it sets html.reveal-ok), the inline head
   script reveals everything after load so content can never stay hidden. */
.reveal-failsafe .reveal { opacity: 1 !important; transform: none !important; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 48rem) {
  .section:not(.section--hero) { display: block; }
  .section__heading { margin-bottom: var(--space-6); }
  .section--hero { display: block; }
  .hero__portrait { justify-self: start; margin-bottom: var(--space-8); }
  .hero__portrait img { width: 128px; }
  .principles { grid-template-columns: 1fr; gap: var(--space-6); }
  .timeline__entry { grid-template-columns: 1fr; gap: var(--space-2); }
  .timeline__period { padding-top: 0; }
  .skills__group { grid-template-columns: 1fr; gap: var(--space-2); }
}

/* ---- Print (A4, save-as-PDF) ------------------------------------------- */
@media print {
  :root {
    --paper: #fff;
    --ink: #000;
    --ink-muted: #333;
    --ink-faint: #555;
    --rule: #bbb;
    --accent: #16233f;
  }
  @page { size: A4; margin: 16mm 14mm; }
  html { font-size: 10.5pt; }
  body { background: #fff; color: #000; }

  .site-header, .lang-switch, .print-button, .skip-link, .hero__portrait,
  .site-footer__note { display: none !important; }

  /* Un-hide any reveal state for print. */
  .js .reveal { opacity: 1 !important; transform: none !important; }

  a { color: #000; text-decoration: none; }
  /* Expose real URLs for external + email links (paper isn't clickable). */
  .hero__contact a[href^="http"]::after,
  .hero__contact a[href^="mailto"]::after,
  .contact-links a[href^="http"]::after,
  .contact-links a[href^="mailto"]::after {
    content: " (" attr(href) ")";
    font-family: var(--font-mono);
    font-size: 8.5pt;
    color: #444;
  }

  .section { padding-block: var(--space-8); }
  .section--hero { padding-block: 0 var(--space-8); }
  /* Keep atomic items together; never force a whole tall section to a new page. */
  .timeline__entry, .principle, .skills__group { break-inside: avoid; }
  .section__heading { break-after: avoid; }
  .hero__content { grid-column: 1 / -1; }
  /* Background-painted accents don't print by default — force them. */
  .availability__dot,
  .principle__title::before {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}