/* Teal is the site color. --c1 to --c6 color-code the overview's track record only;
   --case is teal everywhere else, so all portfolio items look the same. */
:root {
  --bg:#fff; --fg:#14181f; --muted:#5c6370; --border:#dfe2e7; --card:#fafafa; --pill:#f3f4f6;
  --primary:#007b94; --on-primary:#fff; --header:rgba(255,255,255,.8);
  --c1:#007b94; --c2:#4353c9; --c3:#8b35c9; --c4:#b45309; --c5:#be123c; --c6:#15803d;
  --heading:Archivo,system-ui,sans-serif; --body:Geist,system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0c0e12; --fg:#f0f1f4; --muted:#969ca8; --border:#1f242e; --card:#12151b; --pill:#1a1e26;
    --primary:#00e1ff; --on-primary:#0b0e13; --header:rgba(12,14,18,.8);
    --c1:#00e1ff; --c2:#9aa8ff; --c3:#d09bff; --c4:#fbbf24; --c5:#fb7185; --c6:#4ade80;
    color-scheme:dark;
  }
}
:root[data-theme="dark"] {
  --bg:#0c0e12; --fg:#f0f1f4; --muted:#969ca8; --border:#1f242e; --card:#12151b; --pill:#1a1e26;
  --primary:#00e1ff; --on-primary:#0b0e13; --header:rgba(12,14,18,.8);
  --c1:#00e1ff; --c2:#9aa8ff; --c3:#d09bff; --c4:#fbbf24; --c5:#fb7185; --c6:#4ade80;
  color-scheme:dark;
}
:root { --case:var(--primary); }
[data-case="1"] { --case:var(--c1); }
[data-case="2"] { --case:var(--c2); }
[data-case="3"] { --case:var(--c3); }
[data-case="4"] { --case:var(--c4); }
[data-case="5"] { --case:var(--c5); }
[data-case="6"] { --case:var(--c6); }

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:6rem; scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.6 var(--body); overflow-wrap:break-word; }
a { color:var(--primary); }
a:focus-visible, button:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
ul, ol { margin:0; padding:0; list-style:none; }
em { color:var(--primary); font-style:italic; }
.kicker { margin:0; color:var(--muted); font:500 .7rem/1.5 var(--mono); letter-spacing:.14em; text-transform:uppercase; }

.skip { position:absolute; left:-999px; top:0; padding:.5rem 1rem; background:var(--bg); z-index:60; }
.skip:focus { left:0; }

/* Header: avatar (links to the overview) on the left; email, links and theme switch on the right.
   The links are a drop-down menu below 24rem, icons only from 24rem, and icons with labels from 64rem.
   The email address shows in full from 36rem, ahead of the other labels. */
.site-header { position:sticky; top:0; z-index:50; background:var(--header); border-bottom:1px solid var(--border); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 1rem; min-height:4rem; padding:0 24px; }
.brand { display:inline-flex; border-radius:50%; }
.brand img { display:block; width:2.5rem; height:2.5rem; border:1px solid var(--border); border-radius:50%; object-fit:cover; }
.actions { display:flex; align-items:center; gap:.25rem; }
.button { display:inline-flex; align-items:center; min-height:2.25rem; margin-right:.35rem; padding:0 1.15rem; border-radius:999px; background:var(--primary); color:var(--on-primary); font-size:.875rem; font-weight:500; text-decoration:none; }
.button:hover { opacity:.88; }
.icon-link { display:inline-grid; place-items:center; width:2.75rem; height:2.75rem; padding:0; border:0; border-radius:12px; background:none; color:var(--fg); cursor:pointer; }
.icon-link:hover { color:var(--primary); }
.icon-link.framed { border:1px solid var(--border); }
.theme-toggle, .menu-toggle { display:none; }
.js .theme-toggle, .js .menu-toggle { display:inline-grid; }
.menu { flex-basis:100%; max-height:calc(100dvh - 4rem); overflow-y:auto; padding-bottom:.75rem; }
.js .menu { display:none; }
.js .menu.open { display:block; }
.menu a { display:flex; align-items:center; gap:.6rem; min-height:2.75rem; color:var(--muted); font:500 .75rem/1.3 var(--mono); letter-spacing:.14em; text-transform:uppercase; text-decoration:none; }
.menu a:hover, .menu a[aria-current="page"] { color:var(--fg); }
.menu .menu-email a { color:var(--fg); font:500 .875rem/1.3 var(--body); letter-spacing:0; text-transform:none; }
.menu .menu-email a:hover { color:var(--primary); }
.menu-email svg { flex:none; width:1.25rem; height:1.25rem; color:var(--primary); }
.menu img { flex:none; width:1.25rem; height:1.25rem; object-fit:contain; }
/* The GitHub logo is black; flip it on the dark theme. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .invert-dark { filter:invert(1); } }
:root[data-theme="dark"] .invert-dark { filter:invert(1); }

.wrap { max-width:96rem; margin:0 auto; padding:0 24px; }
.wrap.narrow { max-width:72rem; padding-top:3rem; padding-bottom:4rem; }

/* Overview */
.hero { display:flow-root; padding-bottom:4rem; background:
  radial-gradient(60rem 18rem at 50% 0, color-mix(in srgb, var(--primary) 9%, transparent), transparent),
  radial-gradient(circle, color-mix(in srgb, var(--muted) 22%, transparent) 1px, transparent 1px) 0 0 / 22px 22px; }
.pip { content:""; display:inline-block; width:.4rem; height:.4rem; margin-right:.6rem; border-radius:50%; background:var(--primary); vertical-align:.1em; }
.hero h1 { max-width:52rem; margin:0; font:500 clamp(1.75rem,3.5vw,2.75rem)/1.02 var(--heading); letter-spacing:-.025em; text-wrap:balance; }
/* The PDF download sits on its own line under the overview and work history titles. */
.title-row { display:flex; flex-direction:column; align-items:flex-start; gap:.75rem; }
.title-pdf { display:inline-flex; align-items:center; gap:.5rem; color:var(--primary); font-size:.95rem; font-weight:500; text-decoration:none; white-space:nowrap; }
.title-pdf:hover { text-decoration:underline; text-underline-offset:3px; }
.title-pdf img { flex:none; width:1.5rem; height:1.5rem; object-fit:contain; }
.intro { display:grid; gap:1.75rem 4rem; margin-top:3.5rem; }
.lead { max-width:46rem; margin:1.75rem 0 0; color:var(--muted); font-size:clamp(1.125rem,2.5vw,1.25rem); line-height:1.45; text-wrap:pretty; }
.availability-title { margin:0; color:var(--primary); font:italic 500 clamp(1.4rem,2.75vw,1.75rem)/1.2 var(--heading); letter-spacing:-.02em; }
.availability { width:fit-content; }
.availability-note { width:0; min-width:100%; text-align:justify; margin:.35rem 0 1rem; color:var(--muted); font-size:1rem; }
.email-actions { display:flex; flex-wrap:wrap; gap:.5rem; }
.email-actions .button { gap:.55rem; min-height:2.75rem; margin:0; font-size:1rem; }
.copy-email { display:none; place-items:center; width:2.75rem; height:2.75rem; padding:0; border:1px solid var(--border); border-radius:50%; background:var(--bg); color:var(--fg); cursor:pointer; }
.js .copy-email { display:inline-grid; }
.copy-email:hover, .copy-email.copied { border-color:var(--primary); color:var(--primary); }
.copy-email svg:last-child, .copy-email.copied svg:first-child { display:none; }
.copy-email.copied svg:last-child { display:block; }
.track { margin-top:3rem; }
.stats-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem 1rem; margin-top:1rem; }
.stats-row li { padding-left:1rem; border-left:2px solid color-mix(in srgb, var(--case) 50%, var(--bg)); }
.stats-row a { display:block; color:inherit; text-decoration:none; }
.stats-row a:hover .stat-value { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.15em; }
.stats-row a:hover .stat-label { color:var(--fg); }
.stat-value { display:block; color:var(--case); font:400 clamp(1.6rem,3.2vw,2.25rem)/1.15 var(--heading); letter-spacing:-.02em; }
.stat-label { display:block; margin-top:.35rem; color:var(--muted); font-size:.875rem; line-height:1.35; text-wrap:balance; }

.work { padding:4.5rem 0 5rem; background:var(--card); border-top:1px solid var(--border); }
.work h2 { margin:0 0 2.5rem; font:500 clamp(1.5rem,2.75vw,2.25rem)/1.02 var(--heading); letter-spacing:-.025em; }
.cards { display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; }
.cards li { display:flex; }
/* Icon in the left column; title, tech stack and link in the right. The middle row absorbs spare height, so the tech stack stays at the bottom. */
.card { display:grid; flex:1; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto 1fr auto; gap:.75rem 1rem; padding:1.5rem; border:1px solid var(--border); background:var(--bg); color:var(--fg); text-decoration:none; }
.card:hover { background:color-mix(in srgb, var(--case) 5%, var(--bg)); }
.card:hover .card-title { color:var(--case); }
.card-icon { width:3rem; height:3rem; color:var(--primary); }
.card-icon .l, .card-icon .f { stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.card-icon .l { fill:none; }
.card-icon .f { fill:color-mix(in srgb, currentColor 16%, transparent); }
.card-title { grid-column:2; font:400 clamp(1.3rem,2.6vw,1.75rem)/1.2 var(--heading); letter-spacing:-.025em; text-wrap:balance; }
.card .tags { grid-column:2; align-self:end; gap:.25rem; }
.card .tags > * { padding:.05rem .45rem; font-size:.65rem; line-height:1.5; }
.read-more { grid-column:2; color:var(--case); font-size:.875rem; font-weight:500; }
.tags { display:flex; flex-wrap:wrap; gap:.4rem; }
.tags > * { padding:.15rem .7rem; border:1px solid var(--border); border-radius:999px; background:var(--pill); color:var(--muted); font:400 .75rem/1.6 var(--mono); }

/* Case page */
.back { color:var(--muted); font:500 .7rem/1.5 var(--mono); letter-spacing:.14em; text-transform:uppercase; text-decoration:none; }
.back:hover { color:var(--primary); }
.case-header { margin-top:2.25rem; }
.case-header h1 { margin:0; font:500 clamp(2rem,4.5vw,3.5rem)/1.06 var(--heading); letter-spacing:-.025em; text-wrap:balance; }
.stats-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:1px; margin-top:2.5rem; border:1px solid var(--border); background:var(--border); }
.stats-grid li { padding:1.25rem 1.5rem; background:var(--bg); }
.stats-grid .stat-value { color:var(--fg); }
.stats-grid li:first-child .stat-value { color:var(--case); }
.stats-grid .stat-label { font:500 .7rem/1.5 var(--mono); letter-spacing:.14em; text-transform:uppercase; }
.case-body { margin-top:3.5rem; }
.toc { display:none; }
.block { margin-top:2.75rem; }
.block:first-child { margin-top:0; }
.block h2 { margin:0 0 1rem; font:500 clamp(1.5rem,3vw,2rem)/1.2 var(--heading); letter-spacing:-.02em; }
.block p, .steps { color:var(--muted); font-size:1.0625rem; line-height:1.65; }
.block p { margin:0; }
.steps { display:grid; gap:.85rem; }
.steps li { position:relative; padding-left:1.25rem; }
.steps li::before { content:""; position:absolute; left:0; top:.65em; width:.4rem; height:.4rem; border-radius:50%; background:var(--case); }
.block-result { padding:1.5rem; border:1px solid color-mix(in srgb, var(--case) 35%, var(--bg)); background:color-mix(in srgb, var(--case) 7%, var(--bg)); }
.block-result p { color:var(--fg); }
.block-result p::first-letter { text-transform:uppercase; } /* source text continues after "Result:" in lowercase */

/* Work history page: each job is an .job, and a company with several roles nests them in .job-group. */
/* Landing page: the role under the name, then the documents as cards. */
.cv-hero h1 { margin-top:3.5rem; }
.doc-card { grid-template-rows:auto 1fr auto; }
.doc-card .card-icon { grid-row:span 2; object-fit:contain; }
.doc-card .card-title { font-size:clamp(1.2rem,2.2vw,1.45rem); }
.doc-note { grid-column:2; color:var(--muted); font-size:.875rem; line-height:1.4; }

.history-hero { padding-bottom:0; }
.history-hero .title-row { margin-top:3.5rem; }
.history-hero .lead { margin-bottom:3rem; }
.history { padding-top:3rem; padding-bottom:4rem; }
.history > .job { max-width:52rem; }
.history .job { margin-top:2.5rem; padding-top:2.5rem; border-top:1px solid var(--border); }
.history > .job:first-child { margin-top:0; padding-top:0; border-top:0; }
.history .job-group > .job { margin-top:1.75rem; padding:0; border-top:0; }
.history .job > * + * { margin-top:1rem; }
.history .job > .period { margin-top:.35rem; }
.job h2 { margin:0; font:500 clamp(1.4rem,2.8vw,1.75rem)/1.2 var(--heading); letter-spacing:-.02em; text-wrap:balance; }
.job h3 { margin:0; font:500 1.2rem/1.3 var(--heading); letter-spacing:-.01em; }
.job p, .job .steps { color:var(--muted); font-size:1.0625rem; line-height:1.65; }
.job p { margin:0; }
.job p.kicker { font-size:.7rem; line-height:1.5; }
.job-tags .tags { margin-top:.5rem; }

/* Last-updated line at the very end of every page: tiny and faded on purpose. */
.wrap.page-updated { padding-top:1.5rem; padding-bottom:1.5rem; }
.page-updated p { margin:0; color:var(--muted); opacity:.7; font-size:.65rem; }

.pager { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:4rem; padding-top:1.5rem; border-top:1px solid var(--border); }
.pager a { color:var(--fg); font:500 1.05rem/1.25 var(--heading); text-decoration:none; }
.pager a:hover { color:var(--case); }
.pager a[rel="next"] { grid-column:2; text-align:right; }
.pager .kicker { display:block; margin-bottom:.25rem; color:var(--case); }

@media (min-width:24rem) {
  .bar { flex-wrap:nowrap; }
  .menu, .js .menu { display:block; order:1; flex:none; margin-left:auto; max-height:none; overflow:visible; padding:0; }
  .actions { order:2; }
  .menu ul { display:flex; }
  .js .menu-toggle { display:none; }
  .menu a { min-height:4rem; padding:0 .4rem; font-size:.7rem; letter-spacing:.1em; }
  .menu a[aria-current="page"] { box-shadow:inset 0 -2px 0 var(--case); }
  /* Icons only: the label stays for screen readers, and the title shows it on hover. */
  .menu .label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
}
@media (min-width:36rem) {
  .menu .menu-email .label { position:static; width:auto; height:auto; overflow:visible; clip-path:none; }
}
@media (min-width:64rem) {
  .menu { margin-right:.75rem; }
  .menu ul { gap:1.5rem; }
  .menu a { padding:0; }
  .menu .label { position:static; width:auto; height:auto; overflow:visible; clip-path:none; }
}
@media (min-width:36rem) {
  .stats-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:48rem) {
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .card { padding:2rem; }
  .card-icon { width:3.5rem; height:3.5rem; }
  .stats-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cards.doc-cards { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:60rem) {
  .intro { grid-template-columns:minmax(0,46rem) minmax(max-content,1fr); }
  .availability { place-self:center; text-align:center; }
  .availability-note { text-align-last:center; }
  .email-actions { justify-content:center; }
  .case-body { display:grid; grid-template-columns:13rem minmax(0,44rem); gap:4rem; }
  .toc { display:block; position:sticky; top:6rem; align-self:start; }
  .toc ol { margin-top:.75rem; border-left:1px solid var(--border); }
  .toc a { display:block; padding:.4rem 0 .4rem 1rem; color:var(--muted); font:500 .7rem/1.5 var(--mono); letter-spacing:.14em; text-transform:uppercase; text-decoration:none; }
  .toc a:hover { color:var(--case); }
  .stats-row { grid-template-columns:repeat(6,minmax(0,1fr)); }
}
@media (min-width:80rem) {
  .cards { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .bar { padding:0 44px; }
  .wrap { padding-left:44px; padding-right:44px; }
}

@media print {
  .site-header, .pager, .toc, .skip { display:none; }
  .wrap { max-width:none; padding:0; }
}