/* 09-scan-first. Inter, slate, one teal accent. Light and dark themes on <html data-theme>.
   Contrast (WCAG 2): every text token pair is 4.5:1 or better; see NOTES.md for the table. */

/* Layout tokens (theme-independent; kept apart from the colour blocks so breakpoints can override them). */
:root {
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: 1.25rem;
  --radius: .5rem;
}

/* Light: the native look, and the no-JavaScript default unless the system asks for dark. */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f8fafc;
  --surface: #ffffff;
  --ink: #0f172a;        /* 17.1:1 on bg */
  --text: #334155;       /*  9.9:1 */
  --muted: #475569;      /*  7.2:1 */
  --accent: #0f766e;     /*  5.2:1 on bg, 5.3:1 on tint */
  --accent-ink: #115e59; /*  7.3:1 */
  --accent-ui: #0d9488;  /* indicators and bullets only, 3.6:1 */
  --tint: #f0fdfa;
  --line: #e2e8f0;
  --line-2: #cbd5e1;
  --dim-ink: #475569;    /* dimmed siblings keep 7.2:1 */
  --dim: #5b6b80;        /* dimmed siblings keep 5.2:1 on bg, 5.4:1 on surface */
  --shade: rgb(15 23 42 / .08);
  --ring: 0 0 0 1px var(--line), 0 1px 2px rgb(15 23 42 / .04), 0 10px 28px -14px rgb(15 23 42 / .2);
}

/* Dark: chosen with the toggle (data-theme="dark"), or by the system when JavaScript is off. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f172a;
  --surface: #152035;
  --ink: #f1f5f9;        /* 16.3:1 on bg */
  --text: #cbd5e1;       /* 12.0:1 on bg, 11.0:1 on surface */
  --muted: #94a3b8;      /*  7.0:1 on bg, 6.4:1 on surface, 5.9:1 on tint */
  --accent: #5eead4;     /* 12.1:1 on bg, 10.1:1 on tint */
  --accent-ink: #99f6e4; /* hover: 14.6:1 on bg */
  --accent-ui: #2dd4bf;
  --tint: #0f2a33;
  --line: #1f2b40;
  --line-2: #334155;
  --dim-ink: #94a3b8;
  --dim: #8696ad;        /* 5.9:1 on bg, 5.4:1 on surface */
  --shade: rgb(0 0 0 / .35);
  --ring: 0 0 0 1px #24324a, 0 10px 28px -14px rgb(0 0 0 / .7);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #0f172a; --surface: #152035; --ink: #f1f5f9; --text: #cbd5e1; --muted: #94a3b8;
    --accent: #5eead4; --accent-ink: #99f6e4; --accent-ui: #2dd4bf; --tint: #0f2a33;
    --line: #1f2b40; --line-2: #334155; --dim-ink: #94a3b8; --dim: #8696ad;
    --shade: rgb(0 0 0 / .35);
    --ring: 0 0 0 1px #24324a, 0 10px 28px -14px rgb(0 0 0 / .7);
  }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 3.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3, h4, .id__headline, .str__label { text-wrap: balance; }
p, li, dd, .str__fig { text-wrap: pretty; }
ul { padding: 0; list-style: none; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--accent-ink); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent-ui); outline-offset: 2px; border-radius: 2px; }
::selection { background: #99f6e4; color: #0f172a; }
main:focus { outline: none; }

.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.nowrap { white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: absolute; left: 1rem; top: -5rem; z-index: 20;
  padding: .5rem .875rem; border-radius: var(--radius);
  background: var(--ink); color: var(--bg); font-weight: 600; text-decoration: none;
}
.skip:focus { top: 1rem; color: var(--bg); }

.kicker {
  font-size: .75rem; line-height: 1.3; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

/* Layout
   - phones: one column, the header stacked;
   - 34rem to 64rem (large phones in landscape, tablets): the header splits into identity and contact
     beside the current roles, and the reading column is capped near 80 characters;
   - from 64rem: two columns, with the identity column sticky while it fits the window height. */
.shell { max-width: 80rem; margin: 0 auto; padding: 0 var(--gutter); }
.side { padding: 2.25rem 0 .5rem; }
.content { display: flex; flex-direction: column; padding-top: 1.75rem; }
.sec--strengths { order: -1; }   /* phones: the index comes straight after the header */
.foot { padding: 2.25rem 0 3rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .9375rem; }

@media (max-width: 21.99rem) { :root { --gutter: 1rem; } }
@media screen and (min-width: 40rem) and (max-width: 63.99rem) {
  :root { --gutter: 2rem; }
  .shell { max-width: 45rem; }
}

@media (min-width: 64rem) {
  :root { --gutter: 3rem; }
  html { scroll-padding-top: 4rem; }
  .shell {
    display: grid;
    grid-template-columns: minmax(19rem, 27rem) minmax(0, 40rem);
    grid-template-rows: auto 1fr;
    column-gap: clamp(3rem, 5vw, 6rem);
    justify-content: center;
  }
  /* Sticky without a nested scroll area. The column is at least one window tall and sits at the end of
     its grid area, held by bottom: 0. Sticky positioning never lifts it above the top of .shell, so it
     starts at the top of the page; when it is taller than the window it scrolls with the page until its
     last line (the section nav) is in view, then stays. When it fits, it simply stays put. */
  .side {
    grid-column: 1; grid-row: 1 / span 2; align-self: end;
    position: sticky; bottom: 0;
    min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column;
    padding: 3rem .375rem 1.5rem; margin-inline: -.375rem;
  }
  .content { grid-column: 2; display: block; padding-top: 3rem; }
  .foot { grid-column: 2; }
}
/* Small laptops and landscape tablets: a fixed identity column, so the reading column keeps its measure. */
@media (min-width: 64rem) and (max-width: 74.99rem) {
  :root { --gutter: 2.5rem; }
  .shell { grid-template-columns: 19rem minmax(0, 40rem); column-gap: clamp(2.5rem, 5vw, 4rem); }
}

/* Identity */
.id__name {
  font-size: clamp(2.25rem, 1.6rem + 2vw, 3rem); line-height: 1.05;
  font-weight: 700; letter-spacing: -.025em; color: var(--ink);
}
.id__headline { margin-top: .625rem; max-width: 22em; font-size: 1.125rem; line-height: 1.4; font-weight: 500; color: var(--ink); }
.id__loc { margin-top: .25rem; font-size: .9375rem; color: var(--muted); }
@media (min-width: 64rem) and (max-width: 74.99rem) { .id__name { font-size: 2.5rem; } }

/* Key facts (kit facts strip): ruled rows straight under the name, label over value.
   The current role leads; every value is plain text from the data. */
.facts { margin-top: 1.5rem; border-bottom: 1px solid var(--line); }
.facts__row { padding: .375rem 0 .4375rem; border-top: 1px solid var(--line); }
.facts__k { font-size: .75rem; line-height: 1.3; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.facts__v { margin-top: .125rem; font-size: .875rem; line-height: 1.42; color: var(--text); }
.facts__strong { font-weight: 600; color: var(--ink); }
.facts__v a { font-weight: 500; }
.facts__row:first-child .facts__k { color: var(--accent); }

/* Concurrent roles: the other current roles, each with how it is held. */
.now { margin-top: 1.125rem; }
.now__list { margin-top: .5rem; display: grid; gap: .3125rem; }
.now__item {
  display: grid; padding: .125rem 0 .125rem .875rem;
  border-left: 2px solid var(--line-2);
  color: inherit; text-decoration: none; line-height: 1.4;
  transition: border-color .15s;
}
.now__title { font-size: .875rem; font-weight: 600; color: var(--ink); }
.now__org { font-weight: 400; color: var(--text); }
.now__meta { font-size: .8125rem; color: var(--muted); }
.now__item:hover { border-left-color: var(--accent-ui); }
.now__item:hover .now__title { color: var(--accent-ink); }

/* Contact, then the résumé link and the theme switch on one row */
.contact { margin-top: 1.125rem; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-size: .9375rem; }
.contact a, .util__link {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 1.75rem;
  color: var(--text); text-decoration: none;
}
.contact a:hover, .util__link:hover { color: var(--accent-ink); text-decoration: underline; }
.contact svg, .util__link svg {
  width: 1rem; height: 1rem; flex: none;
  fill: none; stroke: var(--accent-ui); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.util {
  margin-top: .25rem; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem;
  font-size: .9375rem;
}

/* Theme switch. A real button: the label stays "Dark theme" and aria-pressed carries the state.
   The knob and filled track follow the theme on <html>, so the picture always matches the page.
   Hidden without JavaScript (the system theme applies). */
.theme-switch {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 1.75rem; padding: 0 .25rem; margin-inline: -.25rem;
  border: 0; border-radius: .375rem; background: none; cursor: pointer;
  font: inherit; color: var(--text);
}
.theme-switch__track {
  position: relative; flex: none; width: 1.875rem; height: 1.125rem;
  border: 1.5px solid var(--muted); border-radius: 999px;
  transition: background-color .2s, border-color .2s;
}
.theme-switch__track::after {
  content: ""; position: absolute; top: 50%; left: .1875rem;
  width: .5625rem; height: .5625rem; border-radius: 50%; background: var(--muted);
  transform: translateY(-50%); transition: transform .2s, background-color .2s, width .2s, height .2s;
}
:root[data-theme="dark"] .theme-switch__track { background: var(--accent-ui); border-color: var(--accent-ui); }
:root[data-theme="dark"] .theme-switch__track::after {
  width: .6875rem; height: .6875rem; background: var(--bg); transform: translate(.6875rem, -50%);
}
.theme-switch:hover { color: var(--accent-ink); }
.theme-switch:hover .theme-switch__track { border-color: var(--accent-ui); }
html:not([data-theme]) [data-theme-toggle] { display: none; }

/* Section nav with scroll-spy (desktop only) */
.toc { display: none; }
@media (min-width: 64rem) {
  .toc { display: block; margin-top: 1.75rem; }
  .toc a {
    display: flex; align-items: center; gap: 1rem; padding: .25rem 0;
    font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); text-decoration: none;
  }
  .toc__line { width: 2rem; height: 1px; background: var(--line-2); transition: width .2s, background-color .2s; }
  .toc a:hover, .toc a[aria-current] { color: var(--ink); }
  .toc a:hover .toc__line { width: 4rem; background: var(--ink); }
  .toc a[aria-current] .toc__line { width: 4rem; height: 2px; background: var(--accent-ui); }
}

/* Shorter desktop windows: tighten the identity column a little. */
@media (min-width: 64rem) and (max-height: 55rem) {
  .side { padding-top: 2.5rem; }
  .content { padding-top: 2.5rem; }
  .toc { margin-top: 1.25rem; }
}

/* 34rem to 64rem: the name across the top, the key facts on the left, and the concurrent roles,
   contact links and résumé link on the right (the same order as the source). */
@media screen and (min-width: 34rem) and (max-width: 63.99rem) {
  .side {
    display: grid; align-items: start; column-gap: clamp(1.5rem, 4vw, 2.5rem);
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-areas: "id id" "facts now" "facts contact" "facts util" "facts .";
    grid-template-rows: auto auto auto auto 1fr;
  }
  .id { grid-area: id; }
  .facts { grid-area: facts; }
  .now { grid-area: now; margin-top: 1.5rem; padding-top: .375rem; }
  .contact { grid-area: contact; flex-direction: column; align-items: flex-start; gap: 0; margin-top: 1.25rem; }
  .util { grid-area: util; flex-direction: column; align-items: flex-start; gap: 0; margin-top: 0; }
}

/* Landscape phones: a compact header. */
@media screen and (max-width: 63.99rem) and (max-height: 31.25rem) {
  .side { padding-top: 1.25rem; }
  .id__name { font-size: 2rem; }
  .id__headline { margin-top: .375rem; font-size: 1.0625rem; }
  .content { padding-top: 1.25rem; }
}

/* Sections */
.sec { margin-bottom: 4.5rem; scroll-margin-top: .5rem; }
.sec__h {
  display: flex; align-items: center; gap: 1rem; margin-bottom: 1.125rem;
  font-size: .8125rem; line-height: 1.3; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink);
}
.sec__h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sec__intro { margin: -.375rem 0 1.125rem; color: var(--muted); }

@media (max-width: 63.99rem) {
  .sec__h {
    position: sticky; top: 0; z-index: 3;
    margin: 0 calc(var(--gutter) * -1) .5rem; padding: .875rem var(--gutter);
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
}
@media (min-width: 64rem) {
  .sec { margin-bottom: 6rem; }
  .sec--about { margin-bottom: 3rem; }
}

/* Summary */
.summary { color: var(--text); }
.about-facts { margin-top: 1rem; }
.about-facts__row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .25rem 1rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.about-facts__k { padding-top: .2rem; font-size: .75rem; line-height: 1.3; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.focus { display: grid; gap: .125rem; }
@media (max-width: 39.99rem) {
  .about-facts__row { grid-template-columns: 1fr; }
}

/* Strengths index (3 x 3) */
.str-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.str-grid > li { display: flex; }
.str {
  flex: 1; position: relative;
  display: flex; flex-direction: column; gap: .25rem;
  padding: .75rem .875rem .8125rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  color: inherit; text-decoration: none;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.str__label { font-size: .9375rem; line-height: 1.3; font-weight: 600; color: var(--ink); letter-spacing: -.005em; }
.str__fig { font-size: .8125rem; line-height: 1.38; color: var(--muted); }
.str:hover { border-color: var(--line-2); box-shadow: 0 1px 3px var(--shade); }
.str:hover .str__label { color: var(--accent-ink); }
.str[aria-current="true"] { border-color: var(--accent-ui); background: var(--tint); box-shadow: inset 0 0 0 1px var(--accent-ui); }
.str[aria-current="true"] .str__label { color: var(--accent-ink); }
.htmx-request { cursor: progress; }

@media (max-width: 39.99rem) {
  .str-grid { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
  .str {
    flex-direction: row; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding: .6875rem .5rem; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none;
  }
  .str__label { flex: 1 1 55%; }
  .str__fig { flex: 0 1 45%; text-align: right; }
  .str:hover { box-shadow: none; }
  .str[aria-current="true"] { box-shadow: inset 3px 0 0 var(--accent-ui); padding-left: .875rem; }
}

/* Reader and panels that receive HTMX fragments */
.reader, .panel { margin-top: 1rem; scroll-margin-top: 4rem; }
.reader > .fragment, .panel > .fragment, .reader > .load-error, .panel > .load-error {
  padding: 1.25rem 1.5rem 1.375rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.reader > .fragment { border-top: 3px solid var(--accent-ui); }
@media (max-width: 39.99rem) {
  .reader > .fragment, .panel > .fragment { padding: 1rem 1.0625rem 1.125rem; }
}

/* Shared fragment classes */
.frag__meta { font-size: .8125rem; line-height: 1.45; color: var(--muted); }
.frag__title { margin-top: .25rem; font-size: 1.125rem; line-height: 1.35; font-weight: 650; color: var(--ink); letter-spacing: -.005em; }
.frag__title:focus { outline: none; }
.frag__title:focus-visible { outline: 2px solid var(--accent-ui); outline-offset: 4px; }
.frag__lede { margin-top: .5rem; }
.frag__org { font-weight: 500; color: var(--ink); }
.frag__note { font-size: .9375rem; color: var(--muted); }
.frag__where, .frag__check, .card__ev { margin-top: .875rem; font-size: .9375rem; line-height: 1.55; }
.frag__k {
  display: inline-block; margin-right: .5rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.frag__status { margin-top: .75rem; padding: .625rem .875rem; border-left: 3px solid var(--accent-ui); background: var(--tint); color: var(--ink); }
.frag__facts { margin-top: .75rem; display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .5rem 1rem; }
.frag__facts dt { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: .2rem; }
.frag__url { overflow-wrap: anywhere; }
.frag__rec { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.frag__rec h4 { font-size: 1rem; line-height: 1.4; font-weight: 600; color: var(--ink); }
.frag__rec h4 a { color: inherit; text-decoration: none; }
.frag__rec h4 a:hover { color: var(--accent-ink); text-decoration: underline; }
.frag__rec .frag__org { margin-top: .125rem; font-size: .875rem; font-weight: 400; color: var(--muted); }
.frag__gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .75rem; }
.frag__gallery img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%;
  border-radius: .375rem; background: var(--line);
}
.frag__gallery figcaption { margin-top: .375rem; font-size: .8125rem; line-height: 1.45; color: var(--muted); }
.load-error { color: var(--text); }

.points, .frag__points { margin-top: .625rem; display: grid; gap: .375rem; }
.points li, .frag__points li { position: relative; padding-left: 1.125rem; }
.points li::before, .frag__points li::before {
  content: ""; position: absolute; left: 0; top: .78em;
  width: .5rem; height: 2px; border-radius: 1px; background: var(--accent-ui);
}

/* Cards: projects, experience records, community. Siblings dim on hover and on focus-within. */
.dim-list { display: grid; gap: .5rem; }
.card { position: relative; padding: 1.25rem 0; border-radius: var(--radius); color: var(--text); }
.card + .card { border-top: 1px solid var(--line); }
.card__title { font-size: 1.0625rem; line-height: 1.4; font-weight: 650; color: var(--ink); letter-spacing: -.005em; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { text-decoration: underline; }
.card__line { margin-top: .125rem; font-size: .9375rem; color: var(--muted); }

@media (min-width: 64rem) {
  .dim-list { gap: .5rem; }
  .card { padding: 1.25rem 1.5rem; margin-inline: -1.5rem; }
  .card + .card { border-top: 0; }
  .card, .card * { transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s; }
  .card:hover, .card:focus-within { background: var(--surface); box-shadow: var(--ring); }
  .card:hover :is(.card__title, .frag__title), .card:focus-within :is(.card__title, .frag__title) { color: var(--accent-ink); }
  /* Dim by swapping colour tokens to lighter values that still pass 4.5:1, never by opacity. */
  .dim-list:has(> .card:hover) > .card:not(:hover),
  .dim-list:not(:has(> .card:hover)):has(> .card:focus-within) > .card:not(:focus-within) {
    --ink: var(--dim-ink); --text: var(--dim); --muted: var(--dim);
    --accent: var(--dim-ink); --accent-ink: var(--dim-ink); --accent-ui: var(--line-2); --tint: transparent;
  }
}

/* Experience records, F-pattern: bold title, employer, then dates and how the role was held.
   The HTMX-loaded fragment lists its date line first; the grid puts it back under the employer
   so a record looks the same before and after "Show more". */
.rec__body > .fragment { display: grid; grid-template-columns: minmax(0, 1fr); }
.rec__body > .fragment > .frag__title { grid-row: 1; margin-top: 0; font-size: 1.0625rem; line-height: 1.4; }
.rec__body > .fragment > .frag__org { grid-row: 2; }
.rec__body > .fragment > .frag__meta { grid-row: 3; }
.rec__org, .rec__body .frag__org { margin-top: .125rem; font-weight: 500; color: var(--ink); line-height: 1.45; }
.rec__meta, .rec__body .frag__meta { margin-top: .0625rem; font-size: .9375rem; line-height: 1.45; color: var(--muted); }
.rec__note, .rec__body .frag__note { margin-top: .25rem; font-size: .9375rem; color: var(--muted); }
.rec__scope, .rec__body .frag__lede { margin-top: .5rem; color: var(--muted); }
.rec__body .frag__points { margin-top: .625rem; }

.rec__more { display: none; }
.js .rec__more { display: block; }
.js .rec__rest { display: none; }
.js .rec__rest[hidden="until-found"], .js .rec__body.is-open .rec__rest { display: block; }
.js .rec__body.is-open .rec__more { display: none; }
.rec__rest .points { margin-top: .375rem; }

.more {
  display: inline-flex; align-items: center; gap: .4375rem;
  margin-top: .625rem; padding: .25rem 0;
  font-size: .875rem; font-weight: 600; color: var(--accent); text-decoration: none;
}
.more::after {
  content: ""; width: .375rem; height: .375rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-.125rem) rotate(45deg);
}
.more:hover { color: var(--accent-ink); text-decoration: underline; }
.more.htmx-request { opacity: .75; }
.rec__media { margin-top: -.125rem; }
.rec__media:focus { outline: none; }
.rec__media > .fragment { margin-top: 1rem; }

/* Projects */
.prj__status {
  margin-top: .875rem; padding: .625rem .875rem;
  border-left: 3px solid var(--accent-ui); border-radius: 0 .375rem .375rem 0;
  background: var(--tint); color: var(--ink);
}
.prj__status strong { font-weight: 650; }
.prj__facts { margin-top: 1rem; display: grid; gap: .625rem; }
.prj__facts > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .125rem 1rem; }
.prj__facts dt { padding-top: .2rem; font-size: .75rem; line-height: 1.3; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.prj__facts dd { margin: 0; }
@media (max-width: 39.99rem) { .prj__facts { gap: .875rem; } .prj__facts > div { grid-template-columns: 1fr; } }

.chips { display: flex; flex-wrap: wrap; gap: .375rem; padding-top: .0625rem; }
.chips a {
  display: inline-block; padding: .125rem .625rem;
  border: 1px solid var(--line-2); border-radius: 999px;
  font-size: .8125rem; line-height: 1.6; font-weight: 500; color: var(--accent); text-decoration: none;
}
.chips a:hover { border-color: var(--accent-ui); background: var(--tint); color: var(--accent-ink); }

/* Skills */
.skill-groups { display: grid; gap: 1.75rem 2rem; }
@media (min-width: 40rem) { .skill-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sg__h, .cred__h {
  padding-bottom: .5rem; border-bottom: 1px solid var(--line);
  font-size: 1rem; line-height: 1.4; font-weight: 650; color: var(--ink);
}
.sg__list { margin-top: .625rem; display: grid; gap: .4375rem; }
.sg__list li { position: relative; padding-left: 1rem; line-height: 1.45; }
.sg__list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .3125rem; height: .3125rem; border-radius: 50%; background: var(--accent-ui);
}

.used { margin-top: 2.75rem; }
.tabs { margin-top: .625rem; display: flex; flex-wrap: wrap; gap: .375rem; }
.tab {
  display: inline-block; padding: .3125rem .875rem;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface);
  font-size: .875rem; line-height: 1.5; font-weight: 600; color: var(--text); text-decoration: none;
}
.tab:hover { border-color: var(--accent-ui); color: var(--accent-ink); }
.tab[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.used__list { margin-top: .875rem; display: grid; gap: .625rem; }
.used__list li { display: grid; padding-top: .625rem; border-top: 1px solid var(--line); line-height: 1.45; }
.used__list a { justify-self: start; padding-block: .125rem; font-weight: 600; text-decoration: none; }
.used__list a:hover { text-decoration: underline; }
.used__org { font-size: .9375rem; color: var(--muted); }

/* Education and credentials */
.cred + .cred { margin-top: 2.25rem; }
.cred__list { margin-top: .75rem; display: grid; gap: 1rem; }
.cred__name { font-weight: 600; color: var(--ink); }
.cred__where { font-weight: 400; color: var(--muted); }
.cred__body { margin-top: .125rem; }
.cred__meta { font-size: .9375rem; color: var(--muted); }
.cred__courses { margin-top: .25rem; font-size: .9375rem; color: var(--muted); }
.cred--grid { display: grid; gap: 2.25rem 2rem; }
.cred--grid .cred__body { margin-top: .75rem; }
@media (min-width: 40rem) { .cred--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cert-list { margin-top: .125rem; }
.cert-list li {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 1.25rem;
  padding: .4375rem 0; border-bottom: 1px solid var(--line);
}
.cert__name { font-weight: 500; color: var(--ink); }
.cert__issuer { font-weight: 400; color: var(--muted); }
.cert__status { font-size: .9375rem; color: var(--text); }

/* Community */
.kicker--sub { margin: 2.25rem 0 .75rem; }
.also { display: grid; gap: .875rem; }
.also strong { font-weight: 600; color: var(--ink); }
.also__dates { color: var(--muted); }
.also__pt { margin-top: .25rem; color: var(--muted); }

/* Footer */
.data-links { margin-top: .625rem; display: grid; gap: .25rem; }
.foot__meta { margin-top: 1rem; font-size: .875rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Print: one column, close to a résumé. Navigation, readers and HTMX controls are dropped. */
.foot__print { display: none; }
@media print {
  /* Print is always light, whatever theme is on screen. */
  :root:not([data-theme]), :root[data-theme] {
    color-scheme: light; --dim: #3d3d3d; --dim-ink: #3d3d3d;
    --bg: #fff; --surface: #fff; --ink: #000; --text: #1a1a1a; --muted: #3d3d3d;
    --accent: #000; --accent-ink: #000; --accent-ui: #777; --tint: #fff; --line: #c8c8c8; --line-2: #999;
  }
  @page { margin: 13mm 14mm; }
  html { font-size: 9.5pt; }
  body { line-height: 1.42; background: #fff; }
  a { color: #000; text-decoration: none; }
  .shell { display: block; max-width: none; padding: 0; }
  .side { position: static; min-height: 0; max-height: none; overflow: visible; padding: 0 0 8pt; margin: 0; border-bottom: 1px solid var(--line); }
  .content { display: block; padding-top: 10pt; }
  .skip, .toc, .sec__intro, .reader, .used, .rec__more, .rec__media,
  .foot .kicker, .foot .data-links, .util { display: none !important; }
  .id__name { font-size: 22pt; }
  .id__headline { max-width: none; margin-top: 3pt; }
  .now { margin-top: 10pt; }
  .now__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4pt 16pt; }
  .now__item { border-left-width: 1px; }
  .contact { margin-top: 8pt; gap: 2pt 14pt; }
  .sec { margin-bottom: 12pt; }
  .sec__h { position: static; margin: 0 0 5pt; padding: 0; background: none; backdrop-filter: none; break-after: avoid; }
  .about-facts { margin-top: 6pt; }
  .str-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3pt; border: 0; }
  .str { flex-direction: column; gap: 1pt; padding: 4pt 6pt; border: 1px solid var(--line) !important; border-radius: 3pt; background: none !important; box-shadow: none !important; }
  .str__fig { text-align: left; }
  .dim-list { gap: 0; }
  .card, .card + .card { padding: 5pt 0; margin: 0; border: 0; box-shadow: none; background: none; break-inside: avoid; }
  .card__title a[href^="http"]::after { content: "  " attr(href); font-weight: 400; font-size: 8.5pt; color: var(--muted); }
  .points, .frag__points { margin-top: 3pt; gap: 1.5pt; }
  .rec__scope { margin-top: 2pt; }
  .rec__rest, .js .rec__rest { display: block !important; content-visibility: visible !important; }
  .rec__rest .points { margin-top: 1.5pt; }
  .prj__status { margin-top: 4pt; padding: 3pt 0 3pt 8pt; background: none; }
  .prj__facts { margin-top: 5pt; gap: 3pt; }
  .chips { display: block; }
  .chips li { display: inline; }
  .chips li:not(:last-child)::after { content: ", "; }
  .chips a { display: inline; border: 0; padding: 0; font-size: inherit; color: inherit; }
  .skill-groups, .cred--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10pt 16pt; }
  .sg__list { gap: 1.5pt; margin-top: 4pt; }
  .cred + .cred { margin-top: 10pt; }
  .cred__list { gap: 5pt; margin-top: 4pt; }
  .cert-list li { padding: 2pt 0; break-inside: avoid; }
  .kicker--sub { margin-top: 10pt; }
  .also { gap: 4pt; }
  .foot { border-top: 1px solid var(--line); padding: 6pt 0 0; }
  .foot__print { display: block; }
  .foot__meta { margin-top: 2pt; }
}