/* Refinement layer over sota.css
   Simon Hirländer · personal site
   Brings the page in line with the RL Coffee house style: self-hosted fonts,
   a warm paper-and-ink palette instead of the cool slate one, a serif display
   face for headings, and inline SVG icons in place of an icon font.
   Loaded after sota.css, so every rule here is a deliberate override. */

/* ── Self-hosted fonts (no Google Fonts request) ────────────────────────── */
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ── Warm palette ───────────────────────────────────────────────────────── */
:root {
  --bg-canvas: #f6f1ea;
  --bg-surface: #fffcf7;
  --bg-surface-elevated: #fffcf7;
  --bg-surface-glass: rgba(255, 252, 247, .8);
  --bg-surface-hover: #efe7dc;
  --bg-card: rgba(255, 252, 247, .88);

  --border-color: rgba(31, 24, 19, .1);
  --border-subtle: rgba(31, 24, 19, .05);
  --border-highlight: rgba(168, 72, 31, .28);

  --text-main: #1f1813;
  --text-muted: #6f6154;
  --text-faint: #9a8b7c;
  --text-inverse: #fffaf3;

  --primary: #a8481f;            /* roasted caramel, shared with RL Coffee */
  --primary-hover: #8e3a17;
  --primary-light: #f5e1d3;
  --primary-glow: rgba(168, 72, 31, .12);

  --accent-cyan: #2c7a72;        /* data teal */
  --accent-cyan-light: #dcefeb;
  --accent-emerald: #356e61;     /* Salzburg green, links to the SARL site */
  --accent-emerald-light: #dcece7;
  --accent-amber: #9a6a15;
  --accent-amber-light: #f6ecd8;
  --accent-purple: #6b4a86;
  --accent-purple-light: #ece4f3;

  --shadow-sm: 0 1px 2px rgb(60 40 20 / .05);
  --shadow-md: 0 1px 2px rgb(60 40 20 / .06), 0 8px 24px -14px rgb(60 40 20 / .18);
  --shadow-lg: 0 1px 2px rgb(60 40 20 / .06), 0 16px 40px -18px rgb(60 40 20 / .24);
  --shadow-glow: 0 0 24px rgba(168, 72, 31, .14);

  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  color-scheme: light;
}

[data-theme="dark"] {
  --bg-canvas: #15110e;
  --bg-surface: #211b17;
  --bg-surface-elevated: #2a231d;
  --bg-surface-glass: rgba(33, 27, 23, .84);
  --bg-surface-hover: #2a231d;
  --bg-card: rgba(33, 27, 23, .9);

  --border-color: rgba(243, 235, 225, .1);
  --border-subtle: rgba(243, 235, 225, .05);
  --border-highlight: rgba(233, 137, 90, .35);

  --text-main: #f3ebe1;
  --text-muted: #a8998a;
  --text-faint: #7d6f62;
  --text-inverse: #1a120d;

  --primary: #e9895a;
  --primary-hover: #f3a075;
  --primary-light: #3a2519;
  --primary-glow: rgba(233, 137, 90, .16);

  --accent-cyan: #6cc2b7;
  --accent-cyan-light: #1d3431;
  --accent-emerald: #6cc2b0;
  --accent-emerald-light: #1b322c;
  --accent-amber: #d8a85c;
  --accent-amber-light: #332918;
  --accent-purple: #b494cf;
  --accent-purple-light: #2b2235;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / .3);
  --shadow-md: 0 1px 2px rgb(0 0 0 / .3), 0 12px 32px -18px rgb(0 0 0 / .6);
  --shadow-lg: 0 1px 2px rgb(0 0 0 / .3), 0 20px 48px -20px rgb(0 0 0 / .7);
  --shadow-glow: 0 0 24px rgba(233, 137, 90, .2);

  color-scheme: dark;
}

/* ── Typography ─────────────────────────────────────────────────────────── */
body {
  font-family: var(--font-sans);
}
h1, h2, h3, .hero-name, .card-title, .publication-title, .news-title, .section-title {
  font-family: var(--font-display);
  letter-spacing: -.02em;
  text-wrap: balance;
}
h4, h5, h6 {
  font-family: var(--font-sans);
  letter-spacing: -.005em;
}
p { text-wrap: pretty; }
::selection { background: var(--primary-light); }

/* The cool radial glow behind the page belongs to the old palette. */
body::before { opacity: .55; }

/* ── Inline SVG icons (replacing the icon font) ─────────────────────────── */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Font Awesome shipped a right margin on inline icons; keep the rhythm. */
h1 .icon, h2 .icon, h3 .icon, h4 .icon,
.btn .icon, .nav-link .icon, .badge .icon, .chip .icon {
  margin-right: .45em;
}
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── Focus visibility ───────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── Credentials block ──────────────────────────────────────────────────
   Replaces the four-box KPI strip. House recipe: mono label in caps,
   sans value, no number set large, no colour accent. The claim that used
   to be a fake metric ("1st Deep RL at CERN") already lives in the hero
   paragraph, so nothing was lost by dropping it here. */
.credentials {
  margin: 1.25rem 0 3.5rem;
  border-top: 1px solid var(--border-color);
}
.cred-row {
  display: grid;
  grid-template-columns: 11.5rem 1fr;
  gap: .35rem 1.75rem;
  align-items: baseline;
  padding: .85rem 0;
  border-bottom: 1px solid var(--border-subtle);
}
.cred-row:last-child { border-bottom: 1px solid var(--border-color); }
.credentials dt {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
  line-height: 1.7;
}
.credentials dd {
  margin: 0;
  font-size: .97rem;
  color: var(--text-main);
  text-wrap: pretty;
}
@media (max-width: 720px) {
  .cred-row {
    grid-template-columns: 1fr;
    gap: .15rem;
    padding: .7rem 0;
  }
  .credentials dd { font-size: .93rem; }
}