/* Rules only. Every value comes from tokens.css. */

/* Base */
* { box-sizing: border-box; }
*, *::before, *::after { transition: var(--transition); }
html { position: relative; background: var(--bg); scroll-behavior: smooth; }
body {
  margin: 0;
  max-width: var(--measure);
  padding: var(--sp-5) var(--gutter) var(--sp-7);
  background: var(--bg);
  color: var(--fg);
  font: var(--fs-base)/var(--lh-base) var(--font-mono);
}
a { color: var(--fg); text-decoration: none; }
a:hover, a:focus-visible,
.contact .social a:hover, .contact .social a:focus-visible,
.snap li a:hover, .snap li a:focus-visible { background: var(--acc); color: var(--on-acc); }
ul { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }
h1, h2, h3 { font: inherit; margin: 0; }
section { margin-bottom: var(--sp-6); }

/* Icons */
.icon { display: block; width: var(--icon-size); height: var(--icon-size); }

/* Top bar */
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); color: var(--dim); margin-bottom: var(--sp-4); }
.bar a, .bar button { color: var(--dim); }
.bar .home { margin-right: auto; line-height: 0; }
.bar .home img { display: block; width: var(--logo-w); max-width: 100%; height: auto; }
.bar .home:hover { background: none; }
.lang { display: flex; gap: 0 var(--sp-1); }
.lang a, .lang .current { padding: 0 var(--sp-2); border-radius: var(--radius-pill); }
.lang a:hover, .lang a:focus-visible, .lang .current { background: var(--acc); color: var(--on-acc); }
#theme { display: flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
#theme:hover, #theme:focus-visible { background: none; }
.theme-ico { display: block; padding: var(--sp-2); border-radius: var(--radius-pill); }
#theme:hover .theme-ico, #theme:focus-visible .theme-ico { background: var(--acc); color: var(--on-acc); }
.ico-sun, :root[data-theme="light"] .ico-moon { display: none; }
:root[data-theme="light"] .ico-sun { display: block; }

/* Header */
h1 { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: var(--fw-bold); margin-bottom: var(--sp-3); }
.intro { margin-bottom: var(--sp-6); }

/* Section and group heads */
.row { display: flex; align-items: baseline; gap: 0 var(--sp-3); }
.row > :first-child { flex: 1; min-width: 0; }
.year { flex: none; color: var(--dim); margin-left: auto; }
h2 { display: grid; grid-template-columns: var(--card-text-x) 1fr; align-items: baseline; font-weight: var(--fw-bold); margin-bottom: var(--sp-4); }
.num { justify-self: start; padding: 0 var(--sp-1); background: var(--acc); color: var(--on-acc); border-radius: var(--radius-pill); }
.group { margin-bottom: var(--sp-6); }
.group h3 { font-weight: var(--fw-bold); }
.lead { color: var(--dim); margin: 0 0 var(--sp-3); }

/* Cards */
.cards { display: grid; gap: var(--sp-3); }
.card {
  position: relative;
  display: block;
  padding: calc(var(--sp-3) - var(--border)) var(--sp-4);
  background: var(--card);
  color: var(--fg);
  border: var(--border) solid var(--card-line);
  border-radius: var(--radius);
}
/* Same hover for every card: single-link (the card is the link) and multi-link (rows inside). */
.card:hover, .card:focus-visible, .card:has(:focus-visible) { background: var(--card-hover); color: var(--fg); border-color: var(--card-line-hover); transform: scale(var(--hover-scale)); }
.card .title { font-weight: var(--fw-bold); }
.card:hover .title, .card:focus-visible .title, .card:has(:focus-visible) .title { background: var(--acc); color: var(--on-acc); }
.card .row > div { padding-left: var(--indent); text-indent: calc(-1 * var(--indent)); }
.card .title::before { content: var(--bullet); display: inline-block; width: var(--indent); text-indent: 0; color: var(--acc); }
.card:hover .title::before, .card:focus-visible .title::before, .card:has(:focus-visible) .title::before { color: var(--on-acc); }
.desc { margin-top: var(--sp-2); padding-left: var(--indent); text-indent: calc(-1 * var(--indent)); color: var(--dim); }
.desc::before { content: var(--branch); display: inline-block; position: relative; left: var(--branch-shift); top: var(--branch-lift); width: var(--indent); text-indent: 0; color: var(--branch-color); }
.tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); padding-left: var(--indent); }
.link-rows { margin-top: var(--sp-3); padding-left: var(--indent); }
.link-rows li + li { box-shadow: inset 0 var(--border) 0 var(--line); }
.link-row, .link-row:hover, .link-row:focus-visible { display: block; padding: var(--sp-2) 0; background: none; color: var(--fg); }
.link-label { display: inline; }
.link-row:hover .link-label, .link-row:focus-visible .link-label { background: var(--acc); color: var(--on-acc); }
.link-caption { display: block; color: var(--dim); font-size: var(--fs-sm); }
.tag {
  padding: 0 var(--sp-2);
  font-size: var(--fs-sm);
  line-height: calc(var(--tag-h) - 2 * var(--border));
  color: var(--dim);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-pill);
}

/* Contact */
.contact-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.contact-body { display: grid; gap: var(--sp-3); }
.contact .social { color: var(--faint); }
.contact .social a { color: var(--dim); }
.links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }

/* Avatar */
.avatar { display: block; width: var(--avatar-size); height: var(--avatar-size); object-fit: cover; border-radius: var(--radius); }

/* Snap menu: fixed bottom-right. Burger + full-screen list below the breakpoint. */
.snap { position: fixed; right: var(--snap-gap); bottom: var(--snap-gap); z-index: var(--z-snap); }
.snap ul { cursor: pointer; overflow: hidden; background: var(--card); border: var(--border) solid var(--line); border-radius: var(--radius); }
.snap li + li { border-top: var(--border) solid var(--line); }
.snap li a { display: flex; align-items: center; padding: var(--sp-2) var(--sp-3); color: var(--fg); }
.snap .n { flex: none; display: flex; justify-content: center; width: var(--icon-size);  color: var(--dim); }
.snap li a:hover .n, .snap li a:focus-visible .n { color: var(--on-acc); }
.snap .label { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; }
.snap .label::before { content: ""; display: inline-block; width: var(--sp-2); }
.snap ul:hover .label, .snap ul:has(:focus-visible) .label { max-width: var(--snap-label-w); opacity: 1; }
.snap-toggle {
  display: none; align-items: center; justify-content: center;
  width: var(--snap-size); height: var(--snap-size); padding: 0;
  background: var(--card); color: var(--fg);
  border: var(--border) solid var(--line); border-radius: var(--radius);
  position: relative; cursor: pointer; font: inherit;
}
.snap-toggle:hover, .snap-toggle:focus-visible { background: var(--acc); color: var(--on-acc); border-color: var(--acc); }
.snap-toggle span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.snap-toggle .ico-close { opacity: 0; transform: rotate(calc(-1 * var(--icon-turn))); }
.snap.is-open .snap-toggle .ico-open { opacity: 0; transform: rotate(var(--icon-turn)); }
.snap.is-open .snap-toggle .ico-close { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .snap-toggle { display: flex; z-index: 2; margin-left: auto; }
  .snap ul {
    position: fixed; inset: 0; z-index: 1; overflow: auto;
    padding: var(--sp-7) 0 calc(var(--snap-size) + 2 * var(--snap-gap));
    background: var(--bg); border: 0; border-radius: 0;
    opacity: 0; visibility: hidden; transform: translateY(var(--sp-2));
  }
  .snap.is-open ul { opacity: 1; visibility: visible; transform: none; }
  .snap li, .snap li + li { border-top: 0; border-bottom: var(--border) solid var(--line); }
  .snap li:first-child { border-top: var(--border) solid var(--line); }
  .snap li a { padding: var(--sp-4) var(--gutter); color: var(--fg); }
  .snap .label { max-width: none; opacity: 1; }
}
html.menu-open { overflow: hidden; }

/* Baseline nudge: the baseline of plain text lines lands on an 8px grid line (see --nudge-* in tokens.css). Pills (tags, number, language) and the section titles next to them are not fitted. */
.intro, .card .title, .desc, .link-label, .link-caption, .year, .social, .links { position: relative; top: var(--nudge-base); }
h1 { position: relative; top: var(--nudge-lg); }

/* Grid overlay: a line under every 8px row, so a baseline on the grid sits right on a line. Toggle with the G key or ?grid. */
html.grid-on::after {
  content: "";
  position: absolute; inset: 0; z-index: var(--z-grid); pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--grid) - 1px), var(--grid-line) calc(var(--grid) - 1px), var(--grid-line) var(--grid));
}