/* ─────────────────────────────────────────────────────────────
   pages.css — every inner page: Work, a project, Writing, a post,
   About, CV, Off the clock, Privacy and 404.
   Colours, sizes and side spacing come from tokens.css.
   Breakpoints: 1024 (small laptop / tablet landscape), 900 (tablet), 700 (big phone), 480 (phone)
   ───────────────────────────────────────────────────────────── */

main { min-height: 60vh; }
.section { padding-block: clamp(44px, 6vw, 88px); }
.section.tight { padding-top: 0; }
.sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 20px; margin-bottom: clamp(22px, 3vw, 32px); }
.sec-head h2 { font-size: var(--fs-2xl); }
.sec-head .count { font-size: var(--fs-xs); color: var(--muted); }
h1 em, h2 em { font-style: italic; font-weight: 400; color: var(--rose); }

/* page title block — like Osahon's News page: a small spaced page name, then a big serif title */
.page-head { padding-block: clamp(40px, 7vw, 96px) clamp(40px, 5.5vw, 72px); }
.page-head h1 { font-size: clamp(2rem, 1.55rem + 1.9vw, 3.1rem); margin: clamp(14px, 2vw, 22px) 0 clamp(16px, 2vw, 22px); max-width: 20ch; letter-spacing: -.02em; }
.page-head .lede { max-width: 52ch; }
.page-head .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: clamp(24px, 3vw, 32px); }
.eyebrow { display: inline-block; color: var(--rose-soft); font-size: clamp(.8rem, .77rem + .12vw, .88rem); font-weight: 500; letter-spacing: .16em; }

/* filters — labelled dropdowns, like "FILTER BY CATEGORY" on Osahon's News page */
.filters { display: flex; flex-wrap: wrap; align-items: end; gap: 16px 20px; margin-bottom: clamp(28px, 4vw, 44px); }
.filter { display: grid; gap: 10px; min-width: 0; flex: 0 1 260px; }
.filter > span { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.filter .select, .filter .find { width: 100%; height: 50px; border-radius: 14px; padding: 0 44px 0 18px; font-size: var(--fs-sm); color: var(--ink); background-color: transparent; }
.filter .find { padding-right: 18px; }
.filter .select option { background: var(--soft); color: var(--ink); }
@media (max-width: 700px) { .filter { flex: 1 1 calc(50% - 10px); } .filter.find-wrap { flex-basis: 100%; } }

/* chips (still used for small switches like the bookshelf) */
.chips { scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { height: 34px; padding: 0 15px; white-space: nowrap; flex: none; }

/* ── cards (work + writing): flat, like Osahon's news cards ── */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 4vw, 52px) clamp(16px, 2vw, 24px); }
@media (max-width: 1024px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid { grid-template-columns: minmax(0, 1fr); } }

.card { position: relative; display: flex; flex-direction: column; gap: 16px; min-width: 0; color: inherit; }
.card:focus-visible { outline: 2px solid var(--rose); outline-offset: 6px; border-radius: var(--r-md); }
.card .media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: var(--soft); }
.card .media > div, .card .media .ph, .card .media img { width: 100%; height: 100%; object-fit: cover; }
.card .media img { transition: transform 1s var(--ease), filter .6s; filter: saturate(.92); }
.card:hover .media img { transform: scale(1.04); filter: saturate(1); }
.card .media .fallback { display: grid; place-items: center; font-family: var(--serif); font-size: 4.4rem; line-height: 1; color: var(--rose); background: linear-gradient(150deg, #241a1e, var(--soft)); }
.card .media .fallback.long { font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); font-style: italic; padding: 10%; text-align: center; line-height: 1.35; color: var(--ink); }
.card .badge { position: absolute; top: 12px; right: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border-radius: 999px; font-size: .7rem; font-weight: 600; color: var(--ink); }
.card .badge svg { width: 12px; height: 12px; }
.card .body { display: grid; gap: 10px; min-width: 0; }
.card .kicker { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.card .kicker .pin { color: var(--rose); }
.card h3 { font-size: clamp(1.05rem, 1rem + .22vw, 1.2rem); line-height: 1.22; transition: color .2s; }
.card:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--rose); }
.card p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .tools { font-size: var(--fs-xs); color: var(--muted); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--fs-xs); color: var(--muted); }
.meta .dot::before { content: "·"; margin-right: 10px; }
.go-dot { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--soft-2); color: var(--ink); transition: background .3s, color .3s, transform .4s var(--spring); }
.go-dot svg { width: 15px; height: 15px; }

/* ── carousels (featured work, certificates, career) ── */
.carousel { position: relative; }
.track { display: grid; grid-auto-flow: column; grid-auto-columns: min(var(--slide, 760px), 86%); gap: clamp(12px, 2vw, 20px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 2px 8px; margin: -4px -2px 0; overscroll-behavior-x: contain; outline: none; }
.track::-webkit-scrollbar { display: none; }
.track > * { scroll-snap-align: start; min-width: 0; }
.car-nav { display: flex; gap: 8px; }
.car-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); transition: transform .3s var(--spring), opacity .2s; }
.car-btn:hover { transform: scale(1.06); }
.car-btn[disabled] { opacity: .35; pointer-events: none; }
.car-btn svg { width: 16px; height: 16px; }
.dots { display: flex; justify-content: center; gap: 6px; margin-top: 18px; }
.dots i { width: 6px; height: 6px; border-radius: 99px; background: var(--line-2); transition: width .35s var(--ease), background .3s; }
.dots i.on { width: 20px; background: var(--ink); }

.featured .track { grid-auto-columns: 100%; }
.feature { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; color: inherit; }
.feature .media { position: relative; aspect-ratio: 16 / 11; border-radius: var(--r-lg); overflow: hidden; background: var(--soft); }
.feature .media > div, .feature .media .ph, .feature .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature .media img { transition: transform 1s var(--ease); }
.feature:hover .media img { transform: scale(1.03); }
.feature .body { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding-right: clamp(0px, 2vw, 24px); }
.feature .kicker { font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.feature h3 { font-size: clamp(1.4rem, 1.15rem + .9vw, 2rem); line-height: 1.12; letter-spacing: -.025em; }
.feature p { margin: 0; color: var(--ink-2); line-height: 1.65; }
.feature .tools { font-size: var(--fs-xs); color: var(--muted); }
.feature .go { align-self: flex-start; margin-top: 8px; }
@media (max-width: 820px) { .feature { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

/* ── writing list ───────────────────────────── */
.pins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
@media (max-width: 1024px) { .pins { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pins { grid-template-columns: minmax(0, 1fr); } }
.tag.pin { gap: 4px; }
.tag.pin svg { width: 11px; height: 11px; }

.rows { display: grid; border-top: 1px solid var(--line); }
.row { position: relative; display: grid; grid-template-columns: 168px minmax(0, 1fr) auto; gap: clamp(16px, 2.6vw, 28px); align-items: center; padding: 20px 14px; margin-inline: -14px; border-bottom: 1px solid var(--line); border-radius: 0; color: inherit; transition: background .25s; }
.row:hover { background: var(--soft); }
.row .thumb { aspect-ratio: 3 / 2; border-radius: 14px; overflow: hidden; background: var(--soft); }
.row .thumb > div, .row .thumb .ph, .row .thumb img { width: 100%; height: 100%; object-fit: cover; }
.row .body { display: grid; gap: 7px; min-width: 0; }
.row h3 { font-size: clamp(1.05rem, 1rem + .22vw, 1.2rem); line-height: 1.22; transition: color .2s; }
.row:hover h3 { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--accent); }
.row p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row .row-date { display: none; }
.row .side { display: grid; justify-items: end; gap: 10px; align-self: stretch; align-content: space-between; }
.row time { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.row .go-dot { opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .4s var(--ease), background .3s, color .3s; }
.row:hover .go-dot { opacity: 1; transform: none; background: var(--ink); color: var(--paper); }
.row .quote-mark { width: 100%; aspect-ratio: 3 / 2; border-radius: 14px; background: linear-gradient(150deg, var(--accent-tint), var(--soft)); display: grid; place-items: center; font-family: var(--serif); font-size: 3.4rem; line-height: 1; color: var(--accent); }
.row.thought h3 { font-family: var(--serif); font-style: italic; font-weight: 400; }
@media (max-width: 700px) {
  .row { grid-template-columns: minmax(0, 1fr) 96px; grid-template-areas: "body thumb"; padding: 18px 12px; margin-inline: -12px; gap: 14px; align-items: start; }
  .row .thumb, .row .quote-mark { grid-area: thumb; aspect-ratio: 1; border-radius: 12px; }
  .row .quote-mark { font-size: 2.4rem; }
  .row .body { grid-area: body; }
  .row .side { display: none; }
  .row .row-date { display: inline; }
}

/* ── project + post page ────────────────────── */
.article-head { padding-block: clamp(28px, 6vw, 72px) clamp(22px, 3vw, 32px); display: grid; gap: 16px; }
.article-head h1 { font-size: clamp(1.9rem, 1.45rem + 1.8vw, 2.8rem); }
.article-head .lede { max-width: 56ch; }
.back { display: inline-flex; align-items: center; gap: 6px; justify-self: start; height: 34px; padding: 0 14px 0 10px; border-radius: 999px; background: var(--soft); font-size: var(--fs-xs); font-weight: 500; color: var(--ink-2); transition: background .2s, color .2s; }
.back:hover { background: var(--soft-2); color: var(--ink); }
.back svg { width: 14px; height: 14px; }
.facts-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px 28px; margin: 6px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); }
.facts-row div { display: grid; gap: 3px; min-width: 0; }
.facts-row dt { font-size: var(--fs-xs); color: var(--muted); }
.facts-row dd { margin: 0; font-size: var(--fs-sm); font-weight: 500; }
.cover { border-radius: clamp(18px, 3vw, 28px); overflow: hidden; aspect-ratio: 16 / 9; background: var(--soft); margin-bottom: clamp(28px, 5vw, 56px); }
.cover > div, .cover .ph, .cover img { width: 100%; height: 100%; object-fit: cover; }

.prose { font-size: clamp(.98rem, .96rem + .1vw, 1.04rem); line-height: 1.78; color: var(--ink-2); }
.prose > * { margin: 0 0 1.15em; }
.prose h2, .prose h3 { color: var(--ink); margin: 1.9em 0 .6em; }
.prose h2 { font-size: var(--fs-xl); }
.prose h3 { font-size: clamp(1.12rem, 1.05rem + .3vw, 1.3rem); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose blockquote { margin: 1.8em 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--accent); font-family: var(--serif); font-size: clamp(1.08rem, 1.02rem + .3vw, 1.25rem); line-height: 1.45; color: var(--ink); }
.prose blockquote p { margin: 0; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--muted); }
.prose img { border-radius: 18px; margin: 1.6em 0; }
.prose hr { border: 0; height: 1px; background: var(--line); margin: 2.6em 0; }
.prose code { font-size: .88em; background: var(--soft-2); padding: .15em .4em; border-radius: 6px; }
.prose pre { background: var(--soft); padding: 18px; border-radius: 14px; overflow-x: auto; font-size: .9rem; line-height: 1.6; }
.prose pre code { background: none; padding: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; display: block; overflow-x: auto; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.prose .ph-text { display: block; }

.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.gallery button { aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--soft); padding: 0; cursor: zoom-in; }
.gallery button > div, .gallery .ph, .gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.gallery button:hover img { transform: scale(1.03); }
@media (max-width: 480px) { .gallery { grid-template-columns: minmax(0, 1fr); } }

.lightbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: max(20px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 84px) max(16px, env(safe-area-inset-left, 0px)); background: rgba(8, 5, 6, .86); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); opacity: 0; transition: opacity .3s; }
.lightbox.on { opacity: 1; }
.lightbox img { max-width: min(1100px, 100%); max-height: calc(100dvh - 140px); border-radius: 18px; box-shadow: var(--glass-shadow); }
.lightbox .ph { width: min(700px, 90vw); aspect-ratio: 4 / 3; }
.lightbox .lb-bar { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); translate: -50% 0; display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; }
.lightbox .lb-bar span { font-size: var(--fs-xs); color: var(--muted); padding: 0 8px; min-width: 48px; text-align: center; }
.lightbox .lb-sep { width: 1px; height: 22px; background: var(--line-2); margin: 0 4px; }

.next-up { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: clamp(40px, 6vw, 72px); padding: 22px 24px; border-radius: 22px; background: var(--soft); color: inherit; transition: background .25s; }
.next-up:hover { background: var(--soft-2); }
.next-up b { display: block; font-family: var(--serif); font-weight: 500; font-size: var(--fs-xl); margin-top: 6px; line-height: 1.2; }
.next-up:hover .go-dot { background: var(--accent); color: var(--on-accent); }

/* ── post extras ────────────────────────────── */
.video-box { position: relative; aspect-ratio: 16 / 9; border-radius: clamp(18px, 3vw, 26px); overflow: hidden; background: var(--soft); margin-bottom: 36px; }
.video-box iframe, .video-box video { width: 100%; height: 100%; border: 0; display: block; }
.video-box .poster { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; cursor: pointer; }
.video-box .poster > div, .video-box .poster img { width: 100%; height: 100%; object-fit: cover; }
.video-box .play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); transition: transform .35s var(--spring); }
.video-box .play svg { width: 26px; height: 26px; fill: currentColor; stroke: none; margin-left: 4px; }
.video-box .poster:hover .play { transform: scale(1.08); }
.link-out { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; border-radius: 20px; border: 1px solid var(--line-2); background: var(--soft); color: inherit; margin-bottom: 32px; transition: border-color .2s, box-shadow .3s; }
.link-out:hover { border-color: var(--muted); }
.link-out small { color: var(--muted); display: block; margin-top: 2px; word-break: break-all; }
.book-card { display: flex; gap: 16px; align-items: center; padding: 14px; border-radius: 20px; background: var(--soft); margin-bottom: 32px; }
.book-card .mini { width: 56px; flex: none; }
.book-card .made-cover { padding: 14% 10% 12% 16%; }
.book-card .made-cover .t { font-size: .42rem; line-height: 1.15; }
.book-card .made-cover .rule, .book-card .made-cover .a { display: none; }
.book-card b { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.02rem; }
.photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 32px; }
.photos button { padding: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--soft); cursor: zoom-in; }
.photos button:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.photos button > div, .photos .ph, .photos img { width: 100%; height: 100%; object-fit: cover; }
.thought-big { position: relative; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.3rem, 1.1rem + .9vw, 1.8rem); line-height: 1.35; color: var(--ink); margin: 8px 0 36px; padding: clamp(24px, 4vw, 44px); border-radius: 26px; background: linear-gradient(150deg, var(--accent-tint), var(--soft)); }

.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); }
.share .label { margin-right: 6px; }
.share a, .share button { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); color: var(--ink-2); transition: background .2s, color .2s; }
.share a:hover, .share button:hover { background: var(--accent); color: var(--on-accent); }
.share svg { width: 16px; height: 16px; }
.share a svg { fill: currentColor; }
.share a svg.ic, .share button svg.ic { fill: none; }
.comments { margin-top: clamp(40px, 6vw, 64px); }
.comments h2 { font-size: var(--fs-xl); margin-bottom: 16px; }
.comments-off { padding: 22px; border-radius: 18px; background: var(--soft); color: var(--muted); font-size: var(--fs-sm); }
#cusdis_thread iframe { width: 100%; }

/* ── about: your photo in the hello, then your story ── */
.about-hero { padding-block: clamp(40px, 7vw, 96px) clamp(28px, 3.5vw, 40px); }
.about-hero h1 { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); display: grid; grid-template-columns: minmax(0, max-content) auto; align-items: center; gap: .3em; margin-top: clamp(12px, 1.8vw, 20px); }
.about-hero .avatar { display: inline-block; width: 1.15em; height: 1.15em; border-radius: 50%; overflow: hidden; background: var(--accent-tint); flex: none; box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--line-2); }
.about-hero .avatar > div, .about-hero .avatar .ph, .about-hero .avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.about-hero .avatar .ph span { display: none; }
.story-text { padding-bottom: clamp(16px, 3vw, 32px); }
.story-text p { margin: 0 0 1.35em; font-size: var(--fs-md); line-height: 1.85; color: var(--ink-2); }
.story-text p.first { font-size: var(--fs-lg); line-height: 1.75; color: var(--ink); }
.story-text b { color: var(--ink); font-weight: 600; }
@media (max-width: 600px) {
  .about-hero h1 { align-items: end; }
  .about-hero .avatar { width: 1.6em; height: 1.6em; }
}
.story-text .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: clamp(28px, 4vw, 40px); }

/* ── CV ─────────────────────────────────────── */
.cv-block { padding-block: clamp(32px, 5vw, 60px); border-top: 1px solid var(--line); scroll-margin-top: 20px; }
.cv-block > h2, .cv-grid > h2 { font-size: var(--fs-xl); }
.cv-block > h2 { margin-bottom: 22px; }
.cv-block .sec-head h2 { font-size: var(--fs-xl); }
.cv-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px clamp(20px, 5vw, 64px); }
@media (max-width: 900px) { .cv-grid { grid-template-columns: minmax(0, 1fr); } }

.edu { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 18px; align-items: start; padding: 20px; border-radius: 22px; background: var(--soft); }
.logo-box { width: 60px; height: 60px; border-radius: 16px; overflow: hidden; background: var(--soft-2); display: grid; place-items: center; border: 1px solid var(--line-2); flex: none; }
.logo-box img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.mono { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--serif); font-weight: 500; font-size: 1.1rem; letter-spacing: -.02em; color: var(--ink-2); background: var(--soft); }
.edu h3 { font-family: var(--sans); font-weight: 600; font-size: 1.04rem; letter-spacing: 0; line-height: 1.45; }
.edu p { margin: 4px 0 0; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.55; }

.skills-wrap { display: grid; gap: 22px; }
.skill-group { display: grid; gap: 10px; }
.skill-group .chips { flex-wrap: wrap; }
.skill { height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; font-size: var(--fs-sm); color: var(--ink-2); transition: border-color .2s, background .2s, color .2s, transform .3s var(--spring); }
.skill:hover { border-color: var(--ink-2); color: var(--ink); }
.skill[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transform: translateY(-1px); }
.used { min-height: 64px; padding: 16px 20px; border-radius: 20px; background: var(--soft); font-size: var(--fs-sm); color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.used b { color: var(--ink); font-weight: 600; margin-right: 6px; }
.used .tag { background: transparent; border: 1px solid var(--line-2); height: 26px; }

/* the small link under the Work intro that leads to the Explainers page */
.aside-link { display: inline-flex; align-items: center; gap: 8px; margin-top: clamp(18px, 2.4vw, 24px); font-size: var(--fs-sm); font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--line-2); padding-bottom: 3px; transition: border-color .2s, color .2s; }
.aside-link .arr { transition: transform .3s var(--ease); }
.aside-link:hover { border-color: var(--rose); }
.aside-link:hover .arr { transform: translateX(3px); }

/* Explainers page: a calm gallery — just the pictures, a title and a date */
.ex-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin-bottom: clamp(24px, 3vw, 36px); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { height: 34px; padding: 0 14px; border-radius: 999px; font-size: var(--fs-sm); color: var(--muted); transition: background .2s, color .2s; }
.chip:hover { color: var(--ink); }
.chip.on { background: var(--soft-2); color: var(--ink); }
.sort-mini { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--muted); }
.sort-mini .select { height: 34px; min-width: 0; width: auto; padding: 0 30px 0 12px; border-radius: 999px; font-size: var(--fs-sm); background-color: transparent; border-color: var(--line-2); }
.ex-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 40px) clamp(14px, 1.8vw, 24px); }
@media (max-width: 1024px) { .ex-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ex { display: grid; gap: 12px; text-align: left; cursor: zoom-in; min-width: 0; }
.ex-pic { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden; background: var(--soft); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.ex-pic img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.ex:hover .ex-pic { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(0, 0, 0, .35); }
.ex-count { position: absolute; right: 10px; top: 10px; height: 22px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 999px; font-size: .68rem; font-weight: 600; background: rgba(0, 0, 0, .66); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ex-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0 2px; }
.ex-title { font-size: var(--fs-sm); font-weight: 500; color: var(--ink); line-height: 1.4; min-width: 0; }
.ex-date { flex: none; font-size: var(--fs-xs); color: var(--muted); }

/* explainers: the whole image on a soft mat, never cropped, so people can see what it is before they open it */
.card.explainer .media, .feature.explainer .media { background: #f6f1f3; }
.card.explainer .media > div, .card.explainer .media .ph, .card.explainer .media img,
.feature.explainer .media > div, .feature.explainer .media img { object-fit: contain; }
.card.explainer .media img, .feature.explainer .media img { padding: clamp(8px, 1vw, 12px); }
.card.explainer { cursor: zoom-in; }
.explainer-full { display: grid; gap: clamp(16px, 2.4vw, 28px); margin-bottom: clamp(28px, 5vw, 56px); }
.explainer-full > * { border-radius: var(--r-md); overflow: hidden; background: #f6f1f3; }
.explainer-full img { width: 100%; height: auto; display: block; }

/* certificates: the full certificate on a soft paper mat, never cropped; details sit underneath like the other cards */
.cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(28px, 3vw, 40px) clamp(18px, 2.4vw, 32px); }
.cert { display: grid; align-content: start; gap: 0; min-width: 0; }
.cert-mat { display: grid; place-items: center; aspect-ratio: 1.414; width: 100%; padding: clamp(10px, 1.4vw, 16px); border-radius: var(--r-md); background: #f6f1f3; border: 1px solid var(--line); cursor: zoom-in; overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.cert-mat img { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 6px 18px rgba(14, 10, 12, .16), 0 1px 3px rgba(14, 10, 12, .12); }
.cert-mat:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0, 0, 0, .35); }
.cert-mat:disabled { cursor: default; background: var(--soft); }
.cert-mat:disabled:hover { transform: none; box-shadow: none; }
.cert-blank { font-family: var(--serif); font-size: var(--fs-lg); color: var(--muted); }
.cert .kicker { margin-top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cert h3 { font-size: clamp(1.02rem, .98rem + .2vw, 1.15rem); line-height: 1.35; margin: 8px 0 0; }
.cert-id { margin: 6px 0 0; font-size: var(--fs-xs); color: var(--muted); }
.cert-id span { color: var(--ink-2); font-variant-numeric: tabular-nums; word-break: break-all; }
.cert .tools { margin-top: 10px; font-size: var(--fs-xs); color: var(--muted); }
.cert .tools span + span::before { content: "·"; margin: 0 7px; }
.cert-link { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-top: 14px; font-size: var(--fs-sm); font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--line-2); padding-bottom: 2px; transition: border-color .2s, color .2s; }
.cert-link:hover { border-color: var(--rose); color: var(--rose); }
.cert-link svg { width: 14px; height: 14px; }

/* career journey */
.career { --slide: 420px; }
.job { height: 100%; padding: clamp(20px, 2.6vw, 28px); border-radius: 24px; background: var(--soft); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.job .when { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.job .top { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; }
.job .logo-box { width: 52px; height: 52px; border-radius: 14px; }
.job h3 { font-family: var(--sans); font-weight: 600; font-size: 1.05rem; letter-spacing: 0; line-height: 1.35; }
.job .org { font-size: var(--fs-sm); color: var(--ink-2); }
.job p { margin: 0; font-size: var(--fs-sm); line-height: 1.65; color: var(--ink-2); }
.job ul { margin: 0; padding-left: 1.1em; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.65; display: grid; gap: 4px; }
.job li::marker { color: var(--muted); }
.job .tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: 4px; }

.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1024px) { .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .quotes { grid-template-columns: minmax(0, 1fr); } }
.quote { margin: 0; padding: 26px; border-radius: 24px; background: var(--soft); display: flex; flex-direction: column; gap: 22px; }
.quote blockquote { margin: 0; font-family: var(--serif); font-size: 1.02rem; line-height: 1.5; color: var(--ink); }
.quote blockquote::before { content: "“"; display: block; font-size: 2.6rem; line-height: .6; color: var(--accent); margin-bottom: 8px; }
.quote figcaption { margin-top: auto; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: center; font-size: var(--fs-sm); }
.quote figcaption small { display: block; color: var(--muted); }
.quote .face-pic { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: var(--soft-2); }
.quote .face-pic > div, .quote .face-pic img { width: 100%; height: 100%; object-fit: cover; }

.cv-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: clamp(24px, 4vw, 40px); border-radius: var(--r-lg); background: linear-gradient(150deg, var(--accent-tint), var(--soft)); }
.cv-cta h2 { font-size: var(--fs-xl); }

/* ── Off the clock ──────────────────────────── */
.masonry { columns: 3; column-gap: clamp(12px, 2vw, 20px); }
@media (max-width: 1024px) { .masonry { columns: 2; } }
@media (max-width: 420px) { .masonry { column-gap: 10px; } }
.moment { break-inside: avoid; margin: 0 0 clamp(12px, 2vw, 20px); border-radius: 0; overflow: visible; background: none; border: 0; scroll-margin-top: 90px; display: inline-block; width: 100%; }
.moment button, .moment > div:first-child { border-radius: var(--r-md); overflow: hidden; }
.moment button { display: block; width: 100%; padding: 0; cursor: zoom-in; position: relative; }
.moment button img { width: 100%; height: auto; display: block; transition: transform .8s var(--ease); }
.moment button:hover img { transform: scale(1.03); }
.moment .count { position: absolute; right: 10px; top: 10px; height: 24px; padding: 0 9px; display: inline-flex; align-items: center; border-radius: 999px; background: rgba(14, 10, 12, .7); color: var(--ink); font-size: .68rem; font-weight: 600; }
.moment .ph { aspect-ratio: 4 / 5; border-radius: 0; }
.moment figcaption { padding: 14px 2px 8px; display: grid; gap: 6px; }
.moment figcaption b { font-weight: 600; font-size: var(--fs-sm); }
.moment figcaption p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; }
.moment:target { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 480px) {
  .moment { border-radius: 16px; }
  .moment figcaption { padding: 10px 12px 12px; gap: 4px; }
  .moment figcaption p, .moment figcaption b { font-size: .8rem; }
  .moment figcaption .meta { font-size: .66rem; }
}

.shelf { scroll-margin-top: 90px; }
.books { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: clamp(20px, 3vw, 32px) clamp(14px, 2.4vw, 28px); }
@media (max-width: 480px) { .books { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.book { display: grid; gap: 10px; align-content: start; }
.spine { position: relative; aspect-ratio: 2 / 3; border-radius: 4px 12px 12px 4px; overflow: hidden; background: var(--soft); box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .8), 0 2px 4px rgba(0, 0, 0, .3); transition: transform .5s var(--spring); }
.spine::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 7%; background: linear-gradient(90deg, rgba(0,0,0,.1), rgba(255,255,255,.2) 60%, transparent); }
.book:hover .spine { transform: translateY(-6px) rotate(-1.2deg); }
.spine > div, .spine img { width: 100%; height: 100%; object-fit: cover; }
.made-cover { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 14% 12% 12% 16%; background: var(--c1, #f3dfe6); color: var(--c2, #5e0a2a); }
.made-cover .t { font-family: var(--serif); font-weight: 500; font-size: clamp(.95rem, .8rem + .5vw, 1.15rem); line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
.made-cover .rule { width: 28%; height: 2px; background: currentColor; opacity: .5; }
.made-cover .a { font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.book b { font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; }
.book small { color: var(--muted); font-size: var(--fs-xs); margin-top: -6px; }
.book .note { font-size: var(--fs-xs); color: var(--ink-2); font-style: italic; line-height: 1.5; }
.motto { text-align: center; padding-block: clamp(32px, 6vw, 64px) 0; font-family: "Caveat", "Segoe Print", cursive; font-size: 1.4rem; color: var(--accent); }

/* ── privacy, 404, template ─────────────────── */
.plain-page { padding-block: clamp(36px, 7vw, 88px); }
.lost { min-height: 64vh; display: grid; place-items: center; text-align: center; padding-block: 60px; }
.lost .big { font-family: var(--serif); font-size: clamp(5rem, 3rem + 10vw, 10rem); line-height: 1; color: var(--accent); font-weight: 400; margin: 0; }
.lost p { color: var(--ink-2); margin: 12px auto 26px; max-width: 36ch; }
.lost .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.lost img { width: 120px; margin: 0 auto 14px; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .5)); }

/* small placeholder boxes (logos, faces, thumbnails) stay tidy */
.logo-box .ph, .avatar .ph, .face-pic .ph, .row .thumb .ph, .spine .ph { min-height: 0; padding: 0; }
.row .thumb .ph span { display: none; }