/* about = curriculum vitae: profile card | sections | table of contents (mirrors automatically in RTL) */
.cv-crumbs{ border-block-end:1px solid var(--rule); }
.cv-crumbs__in{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding-block:14px; }
.cv-back{ display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border:1px solid var(--rule); border-radius:999px; font-weight:500; font-size:.9375rem; transition:background-color .2s,color .2s; } .cv-back:hover{ background:var(--fg); color:var(--bg); }
.cv-crumbs nav{ display:flex; gap:10px; color:var(--muted); font-size:.875rem; } .cv-crumbs nav b{ color:var(--fg); font-weight:600; }
.cv{ display:grid; gap:32px; padding-block:clamp(24px,3vw,40px) clamp(64px,8vw,120px); align-items:start; }
@media (min-width:760px){ .cv{ grid-template-columns:300px minmax(0,1fr); gap:36px; } .cv-toc{ display:none; } }
@media (min-width:1100px){ .cv{ grid-template-columns:320px minmax(0,1fr) 220px; gap:44px; } .cv-toc{ display:block; } }
@media (min-width:760px){ .cv-profile,.cv-toc{ position:sticky; inset-block-start:calc(var(--header-h) + 16px); } }

.cv-card{ overflow:hidden; border:1px solid var(--rule); border-radius:var(--r-card); background:var(--card); }
.cv-photo{ position:relative; margin:0; aspect-ratio:4/5; background:#EFE5D3; }
.cv-photo img{ inline-size:100%; block-size:100%; object-fit:cover; object-position:50% 12%; }
.cv-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 52%,rgba(0,0,0,.72)); }
.cv-photo figcaption{ position:absolute; z-index:1; inset-inline:0; inset-block-end:0; padding:20px 22px; color:#fff; }
.cv-photo h1{ font-size:clamp(1.75rem,2.4vw,2.25rem); line-height:1.1; }
.cv-photo p{ color:#8FA4FF; font-weight:600; margin-block-start:4px; }
.cv-fact{ padding:14px 22px; border-block-start:1px solid var(--rule); }
.cv-fact dt{ color:var(--accent); font-size:.8125rem; font-weight:600; }
.cv-fact dd{ margin-block-start:2px; font-weight:600; }
.cv-stats{ display:grid; grid-template-columns:repeat(3,1fr); border-block-start:1px solid var(--rule); }
.cv-stats li{ padding:16px 6px; text-align:center; } .cv-stats li + li{ border-inline-start:1px solid var(--rule); }
.cv-stats b{ display:block; font-family:var(--f-display); font-weight:var(--w-d); font-size:1.75rem; line-height:1.1; color:var(--accent); }
.cv-stats span{ color:var(--muted); font-size:.8125rem; }
.cv-tagsblock{ padding:18px 22px; border-block-start:1px solid var(--rule); }
.cv-tagsblock .label{ margin-block-end:10px; color:var(--accent); font-size:.8125rem; }
.cv-pills{ display:flex; flex-wrap:wrap; gap:8px; }
.cv-pills li{ padding:6px 14px; border:1px solid var(--rule); border-radius:999px; background:var(--bg); font-size:.9375rem; }
.cv-pills--sm li{ font-size:.8125rem; padding:4px 12px; }
.cv-actions{ display:grid; gap:10px; padding:18px 22px 22px; border-block-start:1px solid var(--rule); }

.cv-main{ min-inline-size:0; }
.cv-sec{ padding-block-end:clamp(32px,4vw,52px); margin-block-end:clamp(32px,4vw,52px); border-block-end:1px solid var(--rule); scroll-margin-block-start:calc(var(--header-h) + 12px); }
.cv-sec:last-child{ border-block-end:0; margin-block-end:0; }
.cv-h{ position:relative; padding-inline-start:18px; margin-block-end:30px; font-family:var(--f-display); font-weight:var(--w-d); font-size:clamp(1.5rem,2.4vw,2rem); line-height:1.2; letter-spacing:var(--track); }
.cv-h::before{ content:""; position:absolute; inset-inline-start:0; inset-block-start:.12em; inline-size:4px; block-size:1em; border-radius:2px; background:var(--accent); }
.cv-h::after{ content:""; display:block; inline-size:56px; block-size:3px; margin-block-start:12px; margin-inline-start:-18px; border-radius:2px; background:color-mix(in srgb, var(--accent) 35%, transparent); }
.cv-text p{ max-inline-size:70ch; margin-block-end:16px; font-size:1.0625rem; }

.cv-timeline{ display:grid; gap:36px; padding-inline-start:30px; border-inline-start:2px solid var(--rule); }
.cv-item{ position:relative; }
.cv-item::before{ content:""; position:absolute; inset-inline-start:-37px; inset-block-start:8px; inline-size:12px; block-size:12px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent); }
.cv-item__top{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 14px; }
.cv-item h3,.cv-cert h3{ font-family:var(--f-display); font-weight:var(--w-d); font-size:1.25rem; line-height:1.25; letter-spacing:var(--track); }
.cv-tag{ display:inline-block; padding:3px 12px; border-radius:6px; background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent); font-size:.8125rem; font-weight:600; white-space:nowrap; }
.cv-org{ margin-block:4px 14px; color:var(--muted); } .cv-org b{ color:var(--fg); font-weight:600; }
.cv-pts{ display:grid; gap:9px; }
.cv-pts li{ position:relative; padding-inline-start:18px; }
.cv-pts li::before{ content:""; position:absolute; inset-inline-start:0; inset-block-start:.72em; inline-size:6px; block-size:6px; border-radius:50%; background:var(--accent); }
.cv-list{ margin-block-end:32px; } .cv-list > li{ padding:18px 20px; border-radius:14px; background:var(--card); border:1px solid var(--rule); border-inline-start:3px solid var(--accent); }
.cv-certs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:14px; }
.cv-cert{ display:flex; gap:14px; align-items:flex-start; padding:18px; border-radius:14px; background:var(--card); border:1px solid var(--rule); border-inline-start:3px solid var(--accent); transition:transform .3s cubic-bezier(.2,.7,.2,1); }
@media (hover:hover) and (pointer:fine){ .cv-cert:hover{ transform:translateY(-4px); } }
.cv-cert__ico{ flex:none; display:grid; place-items:center; inline-size:40px; block-size:40px; border-radius:50%; background:var(--accent); color:var(--bg); }
.cv-cert h3{ font-size:1rem; } .cv-cert p{ color:var(--muted); font-size:.875rem; margin-block:2px 8px; }
.cv-skills{ display:grid; gap:24px; } .cv-sk .label{ margin-block-end:10px; color:var(--accent); font-weight:600; }
.cv-cases{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; }
.cv-case{ display:flex; align-items:center; gap:14px; padding:12px; border:1px solid var(--rule); border-radius:var(--r-card); background:var(--card); transition:background-color .25s,color .25s,border-color .25s,transform .3s cubic-bezier(.2,.7,.2,1); }
.cv-case img{ flex:none; inline-size:84px; aspect-ratio:1600/1383; object-fit:contain; border-radius:10px; }
.cv-case span{ display:grid; line-height:1.3; } .cv-case small{ color:var(--muted); transition:color .25s; }
.cv-case .ico--go{ margin-inline-start:auto; transform:scaleX(var(--dir)); }
.cv-case:hover{ background:var(--blue); border-color:var(--blue); color:#fff; transform:translateY(-3px); } .cv-case:hover small{ color:rgba(255,255,255,.82); }

.cv-toc nav{ display:grid; gap:2px; }
.cv-toc .label{ padding-inline:14px; margin-block-end:6px; font-size:.8125rem; } .cv-toc__g{ margin-block-start:18px; }
.cv-toc a{ padding:7px 14px; border-inline-start:2px solid transparent; color:var(--muted); font-size:.9375rem; transition:color .2s,border-color .2s; }
.cv-toc a:hover{ color:var(--fg); } .cv-toc a.is-active{ color:var(--fg); font-weight:600; border-color:var(--accent); }
.cv-share{ display:inline-flex; align-items:center; gap:8px; margin-block-start:22px; margin-inline-start:14px; padding:8px 16px; border:1px solid var(--rule); border-radius:999px; font-size:.9375rem; color:var(--muted); transition:background-color .2s,color .2s; } .cv-share:hover{ background:var(--fg); color:var(--bg); }
.cv-copied{ margin-block-start:8px; margin-inline-start:14px; font-size:.8125rem; color:#16A34A; }
@media (max-width:759px){ .cv-photo{ aspect-ratio:1/1; } .cv-photo img{ object-position:50% 8%; } }
@media (prefers-reduced-motion:reduce){ .cv-cert,.cv-case{ transition:none; } }

/* featured case studies: one row per project, cover shown whole, client colour on hover */
.cv-cases{ grid-template-columns:1fr; gap:16px; }
.cv-case{ --b:var(--blue); display:grid; grid-template-columns:minmax(0,210px) minmax(0,1fr); gap:22px; align-items:center; padding:14px; border-radius:var(--r-card); border:1px solid var(--rule); background:var(--card); }
.cv-case img{ inline-size:100%; block-size:auto; aspect-ratio:1600/1383; object-fit:contain; border-radius:12px; background:var(--bg); flex:none; }
.cv-case__body{ display:grid; gap:8px; align-content:center; min-inline-size:0; }
.cv-case__top{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
.cv-case h3{ font-family:var(--f-display); font-weight:var(--w-d); font-size:1.375rem; line-height:1.2; letter-spacing:var(--track); }
.cv-case__tags{ display:flex; flex-wrap:wrap; gap:6px; }
.cv-case__tags li{ padding:2px 10px; border:1px solid var(--rule); border-radius:999px; font-size:.75rem; color:var(--muted); transition:color .25s,border-color .25s; }
.cv-case p{ color:var(--muted); font-size:.9375rem; transition:color .25s; }
.cv-case__go{ display:inline-flex; align-items:center; gap:6px; margin-block-start:4px; font-weight:600; color:var(--b); transition:color .25s; }
.cv-case .cv-case__go{ display:inline-flex; justify-self:start; }
.cv-case__go .ico{ transform:scaleX(var(--dir)); }
.cv-case:hover{ background:var(--b); border-color:var(--b); color:#fff; transform:translateY(-3px); }
.cv-case:hover p,.cv-case:hover .cv-case__go{ color:rgba(255,255,255,.9); }
.cv-case:hover .cv-case__tags li{ color:#fff; border-color:rgba(255,255,255,.5); }
@media (max-width:640px){ .cv-case{ grid-template-columns:1fr; } }

/* closing download block */
.cv-dl{ border-block-end:0; padding-block-end:0; }
.cv-dl__card{ display:grid; gap:28px; padding:clamp(24px,4vw,44px); border-radius:24px; background:var(--blue); color:#fff; }
.cv-dl__card .label{ color:rgba(255,255,255,.78); }
.cv-dl__card h2{ margin-block:6px 10px; font-size:clamp(1.75rem,3vw,2.5rem); line-height:1.1; }
.cv-dl__card p:not(.label){ color:rgba(255,255,255,.88); max-inline-size:48ch; }
.cv-dl__btns{ display:flex; flex-wrap:wrap; gap:12px; }
.cv-dl .btn{ gap:10px; }
.btn--ink-on{ background:#fff; color:var(--blue); } .btn--ink-on:hover{ background:#181A1C; color:#fff; }
.btn--line-on{ border-color:currentColor; color:#fff; } .btn--line-on:hover{ background:#fff; color:var(--blue); border-color:#fff; }
.cv-actions .btn{ gap:10px; }