/* light-dark(light, dark): follows the system, or the header toggle via data-theme */
:root {
  color-scheme: light dark;
  --bg: light-dark(#fbfbf8, #141413);
  --fg: light-dark(#1d1d1b, #ebeae4);
  --muted: light-dark(#6e6d66, #9a998f);
  --line: light-dark(#e4e2da, #2c2b28);
  --accent: light-dark(#2b5c8a, #8db7e0);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }  /* long and short pages center the same */
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 17px/1.65 system-ui, -apple-system, "Segoe UI", sans-serif;
}
header.site, main, footer { max-width: 52rem; margin: 0 auto; padding: 0 1rem; }

header.site {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: .5rem 1.5rem; padding-top: 2rem; padding-bottom: 2.5rem;
}
.name { font-weight: 600; color: var(--fg); text-decoration: none; }
nav { display: flex; align-items: center; gap: 1.25rem; }
nav a, .theme { color: var(--muted); text-decoration: none; }
nav a:hover, nav a[aria-current], .theme:hover { color: var(--fg); }
.theme { display: flex; padding: 0; border: 0; background: none; cursor: pointer; }

/* easter egg: slot machine replaces the menu links (nav.slots-on) */
.slot-toggle { padding: 0; border: 0; background: none; cursor: pointer; font-size: 1rem; line-height: 1; filter: grayscale(1); opacity: .6; }
.slot-toggle:hover, nav.slots-on .slot-toggle { filter: none; opacity: 1; }
.slots { display: none; position: relative; align-items: center; gap: .35rem; }
nav.slots-on .slots { display: flex; }
nav.slots-on a { display: none; }
.reel { box-sizing: content-box; width: 2.7rem; height: 1.75rem; overflow: hidden; border: 1px solid var(--muted); border-radius: 4px; background: var(--bg); box-shadow: inset 0 0 6px rgb(0 0 0 / .2); }
.reel > span { display: block; }
.reel b { display: block; height: 1.75rem; font: 800 .75rem/1.75rem ui-monospace, Menlo, monospace; letter-spacing: .05em; text-align: center; }
.reel b.s7 { color: #d6372b; font-size: 1.15rem; font-style: italic; }
.lever { display: flex; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
.lever:hover { color: var(--fg); }
.arm { transform-origin: 10px 18px; }  /* the ball flips through the pivot: pulled down, then back up */
.payout { position: absolute; top: 100%; margin-top: .3rem; left: 0; right: calc(20px + .35rem); text-align: center; white-space: nowrap; line-height: 1.2; color: #c8921a; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
nav.win .reel { border-color: #c8921a; box-shadow: 0 0 8px #c8921a; }

/* any other triple: faint wallpaper mixing the winning symbols; new cells glow (--tile built by JS, opacity lives in the svg) */
:root.tiled body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--tile); }

/* jackpot (777): the whole site goes 80s until the page is reloaded */
:root.disco { --bg: #2b0a4e; --fg: #39ff14; --muted: #ff2fb3; --line: #7a3cff; --accent: #00e5ff; }
:root.disco body, :root.disco button { font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive; }
@media (prefers-reduced-motion: no-preference) {
  :root.disco { animation: disco 3s steps(1) infinite; }
  :root.disco .avatar { animation: disco-hue 3s linear infinite; }
}
@keyframes disco {
  0%   { --bg: #2b0a4e; --fg: #39ff14; --muted: #ff2fb3; --line: #7a3cff; --accent: #00e5ff; }
  20%  { --bg: #0a1a8c; --fg: #ffe600; --muted: #ff2fb3; --line: #00e5ff; --accent: #39ff14; }
  40%  { --bg: #ff2fb3; --fg: #1a0b66; --muted: #00184a; --line: #ffe600; --accent: #3a00ff; }
  60%  { --bg: #00e5ff; --fg: #4b0082; --muted: #c2008a; --line: #2b0a4e; --accent: #ff2fb3; }
  80%  { --bg: #39ff14; --fg: #3a0070; --muted: #0a1a8c; --line: #7a3cff; --accent: #c2008a; }
}
@keyframes disco-hue { to { filter: hue-rotate(360deg) saturate(1.8); } }

a { color: var(--accent); }
h1 { font-size: 2.1rem; line-height: 1.2; margin: 0 0 .75rem; }
h2 {
  font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: 2.5rem 0 .75rem; padding-bottom: .35rem; border-bottom: 1px solid var(--line);
}
ul { padding-left: 1.2rem; }
li + li { margin-top: .4rem; }
.lead { font-size: 1.15rem; color: var(--muted); }
.meta, time { color: var(--muted); font-variant-numeric: tabular-nums; }
img { max-width: 100%; }
pre { overflow-x: auto; padding: 1rem; background: var(--line); border-radius: 4px; }
code { font-size: .9em; }

/* About: round avatar next to the name; one photo per theme */
.intro { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.intro > div { flex: 1 1 20rem; }
.intro > p { position: relative; margin: 0 0 3.5rem; flex: none; }  /* kramdown wraps the <img>s in a <p>; bottom margin = room for the hint */
.avatar { display: block; width: 120px; height: 120px; border-radius: 50%; object-fit: cover; flex: none; cursor: pointer; }
/* hand-drawn "click me" arrow: sits under the photo, points up at it; removed on first click */
.hint { position: absolute; top: 100%; left: 1.8rem; width: 186px; pointer-events: none; }
.avatar-dark { display: none; }
:root[data-theme="dark"] .avatar-light { display: none; }
:root[data-theme="dark"] .avatar-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .avatar-light { display: none; }
  :root:not([data-theme="light"]) .avatar-dark { display: block; }
}

/* About: CV on the left, contact/skills sidebar on the right; stacked on phones */
.cv { display: grid; gap: 0 3rem; }
@media (min-width: 46rem) { .cv { grid-template-columns: minmax(0, 1fr) 13rem; } }
.cv aside { font-size: .92rem; }
.cv aside ul { list-style: none; padding: 0; }
.cv aside li + li { margin-top: .25rem; }
.icon { width: 1em; height: 1em; vertical-align: -.15em; margin-right: .45em; }
h3 { font-size: 1rem; margin: 1.25rem 0 .5rem; }

/* About: everything after Research folds under "Complete CV" (native <details>, no JS) */
.full-cv { margin-top: 2.5rem; }
.full-cv summary {
  display: inline-block; cursor: pointer; padding: .4rem .9rem;
  border: 1px solid var(--line); border-radius: 999px; color: var(--accent); font-weight: 600;
}
.full-cv summary::after { content: " ↓"; }
.full-cv[open] summary::after { content: " ↑"; }
.full-cv summary::-webkit-details-marker { display: none; }
.full-cv summary:hover { border-color: var(--accent); }
.cv-pdf { display: inline-block; margin-top: 1.5rem; }
.cv aside h3 { font-size: .85rem; color: var(--muted); margin: 1rem 0 .4rem; }

/* dated entries (kramdown definition lists): date column + details */
dl { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .6rem 1rem; }
dt { color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; padding-top: .1rem; }
dd { margin: 0; }
@media (max-width: 30rem) { dl { grid-template-columns: 1fr; gap: 0; } dd + dt { margin-top: .75rem; } }

.posts { list-style: none; padding: 0; }
.posts li { display: flex; gap: 1rem; }
.posts time { flex: none; }

.gallery { columns: 3 16rem; column-gap: .75rem; }
.gallery a { display: block; margin-bottom: .75rem; break-inside: avoid; }
.gallery img { display: block; width: 100%; }
dialog { padding: 0; border: 0; background: none; max-width: 95vw; max-height: 95vh; }
dialog::backdrop { background: rgb(0 0 0 / .9); }
dialog img { display: block; max-width: 95vw; max-height: 95vh; cursor: zoom-out; }

footer { color: var(--muted); font-size: .9rem; padding-top: 4rem; padding-bottom: 3rem; }
footer a { color: inherit; }