/* vyruss.org — 2026 revamp. One stylesheet, no frameworks, no external fonts.
   Same HTML as new/; only this skin differs. */

@font-face {
  font-family: Lato;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(lato-400-latin.woff2) format('woff2'); /* self-hosted; no greek in this face */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #0f1014;        /* dark grey base, not pure black */
  --surface: #15171d;   /* cards, pre blocks */
  --fg: #c9cdd4;        /* body text */
  --bright: #edeff3;    /* links, titles */
  --muted: #8a919c;     /* metadata, captions */
  --accent: #8aa9ff;    /* hover, focus */
  --line: #262b33;      /* borders */
  --hover-line: #3b4a68;
  --radius: 4px;
  --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--bg);
  background-image: radial-gradient(60rem 44rem at 50% 16rem, #333947, transparent 70%);
  background-repeat: no-repeat;
  color: var(--fg);
  font: 400 17px/1.65 Lato, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-align: center;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center; /* centers short pages vertically; no effect once content is taller */
  align-items: center;
  width: 100%;
  max-width: 60rem;
  padding: 2.5rem 1.25rem;
  box-sizing: border-box;
}

.home { justify-content: flex-start; padding-top: 12vh; } /* front page: content sits higher than dead-centre */

h1 { margin: 0 0 .5rem; }
h2, h3 {
  font: 500 1.1rem/1.5 var(--mono);
  letter-spacing: .08em;
  color: var(--muted);
  margin: 2.2rem 0 .7rem;
}

a {
  color: var(--bright);
  text-decoration: none;
  transition: color .15s, border-color .15s, background-color .15s;
}
a:hover, a:active { color: var(--accent); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: #2b3a5c; color: var(--bright); }

/* front page: plain centered links; descriptions stay in the title tooltips */
nav ul { list-style: none; margin: 2rem 0 0; padding: 0; }
nav li { margin: .4em 0; }
nav a { font-size: 1.2rem; letter-spacing: .03em; }

img { max-width: 100%; height: auto; border-radius: var(--radius); }
img[src$="386dx.png"] { outline: .5px solid #000; outline-offset: -.5px; }
iframe { max-width: 100%; border: 0; }
iframe[src*="subscribe_embed"] { color-scheme: light; } /* light-only YT widget: stops the opaque slab; matched by src because gapi replaces the .g-ytsubscribe div */
.cloomba-embed { border-radius: var(--radius); }

pre {
  font: .88rem/1.6 var(--mono);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
  margin: 1rem auto;
  max-width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
}

table { border-collapse: collapse; margin: 1rem auto; max-width: 100%; }
td, th { padding: 8px 14px; text-align: left; border-bottom: 1px solid var(--line); }
table:not([class]) td:first-child,      /* about page: key column */
.talks td:first-child {                 /* computing: event column */
  font: 400 .85em/1.6 var(--mono);
  color: var(--muted);
}

figure { margin: 1rem 0; }
figcaption { font: 400 .75rem/1.5 var(--mono); color: var(--muted); margin-top: .5em; }
.photos { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; justify-content: center; }
.photos figure { margin: 0; }
.photos figcaption { width: 0; min-width: 100%; }
.photos img { display: block; }

footer { display: flex; gap: 1.8rem; padding: 1.75rem; }
footer svg { width: 22px; height: 22px; fill: var(--muted); transition: fill .15s; display: block; }
footer a:hover svg { fill: var(--accent); }

/* mobile: multi-column link tables become stacked entries */
@media (max-width: 640px) {
  .stack, .stack tbody, .stack tr, .stack td { display: block; }
  .stack { width: 100%; }
  .stack tr { border-bottom: 1px solid var(--line); padding: .75em 0; text-align: left; }
  .stack tr:last-child { border-bottom: none; }
  .stack td { border: none; padding: 0; }
  .talks td:nth-child(2), .works td:first-child { color: var(--bright); }
  .works td:nth-child(n+2), .talks td:nth-child(n+3) { display: inline-block; margin: .45em .55em 0 0; }
  .works td:nth-child(n+2) a, .talks td:nth-child(n+3) a {
    display: inline-block;
    padding: .1em .75em;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}