/* bds.com.py home. Generated pages use only these classes (see build.py).
   References: intro essentials (Tobias van Schneider's About advice), one-line identity (rauno.me),
   short "Now" line and brief project text (paco.me), card anatomy (pentagram.com/work),
   accomplishments as a plain dated list (ramiismail.com recognitions). */

:root {
  --bg: #fbfbfa;
  --text: #191918;
  --muted: #5d5d59;
  --rule: #e3e3df;
  --link: #1f5fbf;
  --card: #ffffff;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #141414; --text: #ececea; --muted: #a3a39e; --rule: #2c2c2a; --link: #7fb0ff; --card: #1b1b1a; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.6 var(--font); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.25; margin: 0; }
p { margin: 0; }

.skip { position: absolute; left: 1rem; top: -3rem; background: var(--text); color: var(--bg); padding: 0.4rem 0.7rem; }
.skip:focus { top: 0.5rem; }
.wrap { max-width: 64rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 48rem) { .wrap { padding: 0 2rem; } }

/* top bar */
.top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; padding: 1rem 0; font-size: 0.9375rem; border-bottom: 1px solid var(--rule); }
.top__home { color: var(--text); font-weight: 600; text-decoration: none; }
.top nav { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.top nav a { color: var(--text); text-decoration: none; padding: 0.15rem 0; }
.top nav a:hover { text-decoration: underline; }

/* intro: photo, name, role, one line, email */
.intro { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem 1.5rem; align-items: center; padding: 2.5rem 0 1.5rem; }
.intro__photo { width: 6rem; height: 6rem; object-fit: cover; border-radius: 50%; }
.intro h1 { font-size: 1.75rem; font-weight: 700; }
.intro__role { color: var(--muted); font-size: 0.9375rem; margin-top: 0.15rem; }
.intro__summary { font-size: 1.125rem; margin-top: 0.6rem; max-width: 40rem; }
.intro__contact { margin-top: 0.5rem; font-size: 0.9375rem; }
@media (min-width: 48rem) { .intro { grid-template-columns: 8rem 1fr; } .intro__photo { width: 8rem; height: 8rem; } }

.now { font-size: 0.9375rem; color: var(--muted); padding: 0.75rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.now strong { color: var(--text); }

/* blocks */
.block { padding: 2rem 0 0.5rem; }
.block h2 { font-size: 1.125rem; font-weight: 650; margin-bottom: 0.75rem; }

/* accomplishments */
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: grid; grid-template-columns: 3.5rem 1fr; gap: 0.75rem; padding: 0.45rem 0; border-top: 1px solid var(--rule); font-size: 0.9875rem; }
.list li:last-child { border-bottom: 1px solid var(--rule); }
.list__year { color: var(--muted); font-variant-numeric: tabular-nums; }
.src { font-size: 0.875rem; white-space: nowrap; }

/* selected work: small equal cards */
.cards { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9375rem; }
.card figure { margin: 0 0 0.4rem; }
.card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--rule); border-radius: 2px; background: var(--card); }
.card figcaption { font-size: 0.75rem; color: var(--muted); margin-top: 0.25rem; }
.card figure[data-placeholder] img { opacity: 0.55; }
.card h3 { font-size: 1.0625rem; font-weight: 650; }
.card__meta { color: var(--muted); font-size: 0.875rem; }
.card ul { margin: 0.2rem 0 0; padding-left: 1.1rem; color: var(--muted); font-size: 0.875rem; }
.card ul li + li { margin-top: 0.15rem; }
.card__link { margin-top: auto; padding-top: 0.4rem; font-size: 0.875rem; }

.note { font-size: 0.9375rem; color: var(--muted); padding: 1.25rem 0 0; }
.note strong { color: var(--text); font-weight: 600; }

.contact { padding-bottom: 2rem; }
.contact__mail { font-size: 1.25rem; font-weight: 600; margin-top: 0.4rem; }
.contact__links { font-size: 0.9375rem; margin-top: 0.25rem; }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; padding: 1rem 0 2rem; border-top: 1px solid var(--rule); font-size: 0.8125rem; color: var(--muted); }

/* ---------- CV page (/cv/, /es/cv/) and 404 ------------------------------------------------- */
.cv-head { padding: 2rem 0 1rem; }
.cv-head h1 { font-size: 1.75rem; font-weight: 700; }
.cv-head p { margin-top: 0.4rem; max-width: 42rem; }
.cv-head .small { color: var(--muted); font-size: 0.9375rem; }
.section { padding: 1.5rem 0 0.75rem; border-top: 1px solid var(--rule); }
.section__label { font-size: 0.8125rem; color: var(--muted); margin-bottom: 0.4rem; }
.section__label .n { margin-right: 0.4em; }
.section__body h2 { font-size: 1.125rem; font-weight: 650; margin-bottom: 0.5rem; }
.section__body h3 { font-size: 1rem; font-weight: 650; margin: 1rem 0 0.4rem; }
.section__body p, .section__body li { font-size: 0.9875rem; }
.section__body p + p { margin-top: 0.5rem; }
.section__body ul { padding-left: 1.1rem; margin: 0.4rem 0; }
.section__notes { margin-top: 0.75rem; }
.kicker { font-size: 0.8125rem; color: var(--muted); margin-bottom: 0.25rem; }
.lede { font-size: 1rem; }
.note { padding: 0; font-size: 0.8125rem; margin: 0 0 0.3rem; padding-left: 1.4em; position: relative; color: var(--muted); }
.note__n { position: absolute; left: 0; }
sup.ref { font-size: 0.7em; line-height: 0; }
sup.ref a { text-decoration: none; }
dl.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.25rem 1rem; margin: 0.75rem 0; }
dl.figures > div { display: flex; flex-direction: column; border-top: 1px solid var(--rule); padding-top: 0.4rem; }
dl.figures dd { order: -1; margin: 0; font-size: 1.125rem; font-weight: 650; }
dl.figures dt { font-size: 0.8125rem; color: var(--muted); }
ol.timeline { list-style: none; padding: 0; margin: 0.5rem 0; }
ol.timeline > li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.75rem; padding: 0.4rem 0; border-top: 1px solid var(--rule); font-size: 0.9375rem; }
ol.timeline time { color: var(--muted); }
table.record { width: 100%; border-collapse: collapse; font-size: 0.9375rem; margin: 0.25rem 0 1.25rem; }
table.record caption { text-align: left; font-size: 0.8125rem; color: var(--muted); padding-bottom: 0.3rem; }
table.record th, table.record td { text-align: left; vertical-align: top; padding: 0.45rem 0.75rem 0.45rem 0; border-top: 1px solid var(--rule); }
table.record thead th { font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
table.record td:first-child { white-space: nowrap; color: var(--muted); }
@media (max-width: 40rem) {
  table.record, table.record tbody, table.record tr, table.record td, table.record th { display: block; }
  table.record thead { display: none; }
  table.record tr { border-top: 1px solid var(--rule); padding: 0.45rem 0; }
  table.record td, table.record th { border: 0; padding: 0.05rem 0; }
  table.record td[data-label]::before { content: attr(data-label); display: block; font-size: 0.75rem; color: var(--muted); margin-top: 0.2rem; }
  table.record td:first-child::before { display: none; }
}
details { margin: 0.75rem 0; font-size: 0.9375rem; }
details summary { cursor: pointer; }
details dl > div { display: flex; gap: 0.5rem; }
details dt { font-weight: 600; }
details dd { margin: 0; }
mark.ph { background: #ffe27a; color: #111; padding: 0 0.25em; }