/* ==========================================================
   joshuamasih.com, v2
   Swiss index layout · light palettes per project
   Each page sets <body data-theme="…"> to pick its palette.
   ========================================================== */

:root {
  --bg: #F2F2F0;
  --fg: #0E0E0E;
  --muted: #5A5A58;
  --line: #BEBEBA;
  --tile: #DCDCD8;
  --accent: #126A58;
  --font: 'Instrument Sans', system-ui, sans-serif;
  --pad: clamp(16px, 4vw, 48px);
  --max: 1440px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* Project palettes, all light */
[data-theme="kpmg"]         { --bg:#E4E7EA; --fg:#111A22; --muted:#46525E; --line:#BAC2CA; --tile:#CED4DA; --accent:#2E5E8C; }
[data-theme="hadean"]       { --bg:#E6E3F0; --fg:#1C1638; --muted:#4A4466; --line:#C0B9D6; --tile:#D3CDE6; --accent:#5B3FD1; }
[data-theme="thrive"]       { --bg:#DDEBD5; --fg:#14301C; --muted:#3E5A44; --line:#A9C49B; --tile:#C3DAB6; --accent:#2F7A3E; }
[data-theme="nhs"]          { --bg:#D6E4F7; --fg:#0B2A5B; --muted:#34507E; --line:#9DB7DE; --tile:#B7CEEE; --accent:#1F5FD1; }
[data-theme="pentland"]     { --bg:#F2E2D3; --fg:#3A1D10; --muted:#6E4A36; --line:#D8B999; --tile:#E5CBB2; --accent:#B4532A; }
[data-theme="sushi"]        { --bg:#F8DFE3; --fg:#3D0F1A; --muted:#6E3A46; --line:#E3B3BD; --tile:#F0C6CF; --accent:#C8325A; }
[data-theme="illustration"] { --bg:#FBF3C4; --fg:#2A2400; --muted:#5E5520; --line:#E3D58A; --tile:#F1E39A; --accent:#8A6A00; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color .45s ease, color .45s ease;
}
body * { transition-property: background-color, color, border-color; transition-duration: .45s; transition-timing-function: ease; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
::selection { background: var(--fg); color: var(--bg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Old decorative layers, kept in markup for the page scripts, hidden here */
.grid-bg, .spotlight, .noise { display: none !important; }

.container { max-width: var(--max); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.ital, .em, em { font-style: normal; }
.stop { color: var(--accent); }

/* ---------------- Header ---------------- */
.status-bar { position: sticky; top: 0; z-index: 100; background: var(--bg); border-bottom: 1px solid var(--fg); }
.status-bar-inner { max-width: var(--max); margin: 0 auto; padding: 20px var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.status-bar .left { display: flex; align-items: center; gap: 10px; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.status-bar .name { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.nav-links { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; font-size: 15px; }
.nav-links a.active { color: var(--accent); }
.nav-links .cv-link { padding: 6px 12px; border: 1px solid var(--fg); }
.nav-links .cv-link:hover { border-color: var(--accent); }
.status-bar .right { display: none; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 10px; cursor: pointer; z-index: 200; }
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: var(--fg); transition: transform .3s ease, opacity .3s ease; }
.nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 760px) {
  .nav-toggle { display: flex; margin-left: auto; margin-right: -10px; order: 2; }
  .status-bar .center { order: 3; width: 0; }
  .nav-links { position: fixed; inset: 0; background: var(--bg); flex-direction: column; justify-content: center; padding: 0 var(--pad); gap: 0; font-size: 32px; font-weight: 500; letter-spacing: -0.02em; clip-path: inset(0 0 100% 0); pointer-events: none; transition: clip-path .5s var(--ease); }
  .nav-links.open { clip-path: inset(0 0 0 0); pointer-events: auto; }
  .nav-links li { border-bottom: 1px solid var(--line); }
  .nav-links a { display: block; padding: 18px 0; }
  .nav-links .cv-link { border: 0; padding: 18px 0; }
}

/* ---------------- Buttons ---------------- */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; background: var(--fg); color: var(--bg); font-size: 16px; font-weight: 500; border: 1px solid var(--fg); }
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.btn-ghost { background: transparent; color: var(--fg); }
.btn-ghost:hover { background: transparent; color: var(--accent); border-color: var(--accent); }

/* ---------------- Homepage ---------------- */
.hero { padding: clamp(48px, 8vw, 120px) 0 48px; }
.hero-grid { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-end; }
.hero-text { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 36px; }
.eyebrow { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.display { margin: 0; font-weight: 500; font-size: clamp(44px, 7.2vw, 116px); line-height: .94; letter-spacing: -0.035em; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-portrait { flex: 1 1 300px; }
.photo-frame { position: relative; width: 100%; aspect-ratio: 4 / 5; background: var(--tile); overflow: hidden; }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.photo-frame .ph { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 16px; font-size: 13px; color: var(--muted); }
.photo-frame img + .ph { display: none; }

.facts { display: flex; flex-wrap: wrap; border-top: 1px solid var(--fg); padding: 20px 0 96px; }
.fact { flex: 1 1 220px; padding: 0 24px 16px 0; display: flex; flex-direction: column; gap: 6px; }
.fact span:first-child { font-size: 13px; color: var(--muted); }
.fact span:last-child { font-size: 20px; }

.section-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--fg); }
.section-bar h2 { margin: 0; font-weight: 500; font-size: 32px; letter-spacing: -0.02em; }
.section-bar span { font-size: 15px; color: var(--muted); }

.work-wrap { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; padding-bottom: 120px; }
.work-index { flex: 999 1 620px; min-width: 0; display: flex; flex-direction: column; }
.work-row { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--line); transition: opacity .3s ease; }
.work-row:hover { color: var(--fg); }
.work-row .idx { flex: 0 0 48px; font-size: 15px; color: var(--muted); }
.work-row .ttl { flex: 999 1 320px; font-size: clamp(30px, 3.6vw, 52px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.02; }
.work-row .tag { flex: 0 0 150px; font-size: 15px; color: var(--muted); text-align: right; }
.work-index.has-active .work-row { opacity: .5; }
.work-index.has-active .work-row.is-active { opacity: 1; }
.work-row.is-active .idx { color: var(--accent); }

.work-preview { flex: 1 1 360px; display: flex; flex-direction: column; gap: 18px; padding-top: 26px; position: sticky; top: 90px; }
.preview-frame { position: relative; width: 100%; aspect-ratio: 4 / 3; background: var(--tile); overflow: hidden; }
.preview-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s ease; }
.preview-frame img.on { opacity: 1; }
.preview-frame .ph { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 16px; font-size: 13px; color: var(--muted); }
.preview-meta { font-size: 13px; color: var(--muted); }
.preview-line { margin: 0; font-size: 20px; line-height: 1.45; letter-spacing: -0.01em; }
.preview-link { align-self: flex-start; font-weight: 600; border-bottom: 2px solid var(--accent); padding-bottom: 3px; }
.preview-link[hidden] { display: none; }
@media (max-width: 1020px) { .work-preview { display: none; } }

.about { background: var(--tile); border-top: 1px solid var(--fg); padding: 96px 0; }
.about-grid { display: flex; flex-wrap: wrap; gap: 48px; }
.about-side { flex: 1 1 300px; display: flex; flex-direction: column; gap: 20px; }
.about-side h2 { margin: 0; font-weight: 500; font-size: 15px; }
.about-side .photo-frame { max-width: 420px; background: var(--bg); }
.about-main { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 36px; }
.about-lead { margin: 0; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.25; letter-spacing: -0.015em; }
.about-body { margin: 0; max-width: 640px; }
.skills { display: flex; flex-wrap: wrap; gap: 24px 40px; padding-top: 32px; border-top: 1px solid var(--fg); }
.skill { flex: 1 1 200px; display: flex; flex-direction: column; gap: 8px; }
.skill span:first-child { font-size: 13px; color: var(--accent); }
.skill strong { font-size: 17px; font-weight: 500; }
.skill span:last-child { font-size: 15px; color: var(--muted); line-height: 1.5; }
.clients { margin: 0; font-size: 15px; line-height: 1.8; color: var(--muted); }

.contact { padding: 120px 0 40px; }
.contact .display { margin-bottom: 48px; }
.contact-email { display: inline-block; font-size: clamp(22px, 2.4vw, 32px); border-bottom: 2px solid var(--accent); padding-bottom: 4px; }

/* ---------------- Footer ---------------- */
.site-footer { border-top: 1px solid var(--fg); }
.site-footer .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 20px; padding-bottom: 32px; font-size: 14px; color: var(--muted); }
.site-footer .links { display: flex; flex-wrap: wrap; gap: 24px; }

/* ---------------- Inner pages: shared ---------------- */
main { display: block; }
.back-bar { padding-top: 28px; padding-bottom: 8px; }
.back-link { display: inline-flex; gap: 10px; font-size: 15px; }
.page-header, .project-header { padding: clamp(40px, 6vw, 88px) 0 40px; }
.page-header-eyebrow, .project-header-eyebrow { margin: 0 0 28px; font-size: 15px; display: flex; gap: 10px; align-items: center; color: var(--fg); }
.page-header-eyebrow::before, .project-header-eyebrow::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.page-header-eyebrow .num, .project-header-eyebrow .num { color: var(--muted); }
.page-header-grid, .project-header-grid { display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: flex-end; }
.page-title, .project-title { flex: 999 1 560px; margin: 0; font-weight: 500; font-size: clamp(44px, 7vw, 112px); line-height: .94; letter-spacing: -0.035em; }
.page-intro { flex: 1 1 320px; margin: 0; color: var(--muted); }
.page-intro strong { color: var(--fg); font-weight: 500; }

.project-meta { flex: 1 1 340px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; border-top: 1px solid var(--fg); padding-top: 20px; }
.meta-item { display: flex; flex-direction: column; gap: 4px; }
.meta-label { font-size: 13px; color: var(--muted); }
.meta-value { font-size: 17px; }

/* Project hero */
.project-hero { max-width: var(--max); margin: 0 auto; padding: 16px var(--pad) 0; }
.project-hero-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--tile); }
.project-hero-frame img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.project-hero-fallback { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 16px; font-size: 13px; color: var(--muted); }
.project-code { position: absolute; z-index: 2; top: 16px; left: 16px; font-size: 12px; padding: 6px 10px; background: var(--bg); color: var(--fg); }
@media (max-width: 760px) { .project-hero-frame { aspect-ratio: 4 / 3; } }

/* Case study narrative */
.case-content { padding: 24px 0 96px; }
.case-block { display: flex; flex-wrap: wrap; gap: 16px 48px; padding: 40px 0; border-top: 1px solid var(--line); }
.case-label { flex: 1 1 200px; font-size: 15px; font-weight: 500; }
.case-label span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 10px; vertical-align: middle; }
.case-lead, .case-body { flex: 999 1 600px; min-width: 0; margin: 0; }
.case-lead { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.25; letter-spacing: -0.015em; }
.case-lead .em { color: var(--accent); }
.case-body p { margin: 0 0 1em; max-width: 720px; color: var(--fg); }
.case-body p:last-child { margin-bottom: 0; }
.case-body em { color: var(--accent); }

.details-row { display: flex; flex-wrap: wrap; border-top: 1px solid var(--fg); border-bottom: 1px solid var(--fg); }
.detail-item { flex: 1 1 220px; padding: 20px 24px 20px 0; display: flex; flex-direction: column; gap: 4px; }
.detail-label { font-size: 13px; color: var(--muted); }
.detail-value { font-size: 17px; }

.case-image { margin: 40px 0; cursor: zoom-in; }
.case-image-frame { background: var(--tile); overflow: hidden; }
.case-image-frame img { width: 100%; transition: transform .6s var(--ease); }
.case-image:hover .case-image-frame img { transform: scale(1.015); }
.case-caption { margin: 12px 0 0; font-size: 14px; color: var(--muted); }

.pull-quote { padding: 64px 0; border-top: 1px solid var(--line); }
.pull-quote blockquote { margin: 0; font-size: clamp(32px, 4.6vw, 72px); font-weight: 500; line-height: 1; letter-spacing: -0.03em; max-width: 1100px; }
.pull-quote blockquote::before { content: '“'; color: var(--accent); }
.pull-quote blockquote::after { content: '”'; color: var(--accent); }

.outcome-stats { flex: 1 1 100%; display: flex; flex-wrap: wrap; margin-top: 24px; border-top: 1px solid var(--fg); }
.outcome-stat { flex: 1 1 200px; padding: 24px 24px 0 0; }
.outcome-number { font-size: clamp(48px, 6vw, 88px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.outcome-label { margin-top: 8px; font-size: 15px; color: var(--muted); }

/* Gallery-style project pages */
.project-overview { padding: 24px 0 40px; }
.overview-grid { display: flex; flex-wrap: wrap; gap: 16px 48px; padding-top: 40px; border-top: 1px solid var(--line); }
.overview-label { flex: 1 1 200px; font-size: 15px; font-weight: 500; }
.overview-body { flex: 999 1 600px; min-width: 0; }
.overview-body p { margin: 0; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.3; letter-spacing: -0.015em; }
.overview-body .em { color: var(--accent); }
.gallery-section { padding-bottom: 96px; }
.gallery-eyebrow { display: flex; justify-content: space-between; margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--fg); font-size: 15px; }
.gallery-eyebrow .count { color: var(--muted); }
.gallery-masonry, .archive-grid, .photo-grid { columns: 3; column-gap: 14px; }
.gallery-masonry { columns: 2; }
.gallery-item, .archive-item, .photo-item { break-inside: avoid; margin-bottom: 14px; position: relative; overflow: hidden; background: var(--tile); cursor: zoom-in; }
.gallery-item img, .archive-item img, .photo-item img { width: 100%; height: auto; transition: transform .6s var(--ease); }
.gallery-item:hover img, .archive-item:hover img, .photo-item:hover img { transform: scale(1.03); }
.img-placeholder { width: 100%; aspect-ratio: 4 / 3; background: var(--tile); display: flex; align-items: flex-end; padding: 14px; font-size: 13px; color: var(--muted); }
.img-placeholder.tall { aspect-ratio: 3 / 4; }
.img-placeholder.square { aspect-ratio: 1 / 1; }
.gallery-item-zoom, .archive-item-zoom, .photo-item-zoom { position: absolute; bottom: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; background: var(--bg); color: var(--fg); display: flex; align-items: center; justify-content: center; font-size: 18px; opacity: 0; transition: opacity .3s ease; }
.archive-item-meta, .photo-item-meta { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; justify-content: space-between; align-items: flex-end; opacity: 0; transition: opacity .3s ease; }
.archive-item-meta .archive-item-zoom, .photo-item-meta .photo-item-zoom { position: static; opacity: 1; }
.archive-item-cat, .photo-item-cat { font-size: 12px; padding: 5px 9px; background: var(--bg); color: var(--fg); }
.gallery-item:hover .gallery-item-zoom, .archive-item:hover .archive-item-meta, .photo-item:hover .photo-item-meta { opacity: 1; }
.archive-item.filtered { opacity: .12; transform: scale(.97); pointer-events: none; transition: opacity .4s ease, transform .4s ease; }
@media (max-width: 1020px) { .archive-grid, .photo-grid { columns: 2; } }
@media (max-width: 640px) { .archive-grid, .photo-grid, .gallery-masonry { columns: 1; } }

/* Filters */
.filter-wrap, .category-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; margin-bottom: 24px; border-top: 1px solid var(--fg); border-bottom: 1px solid var(--line); }
.filter-bar, .cat-bar-inner { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-btn, .cat-btn { min-height: 40px; padding: 0 16px; font: inherit; font-size: 15px; background: transparent; color: var(--fg); border: 1px solid var(--fg); border-radius: 999px; cursor: pointer; }
.filter-btn:hover, .cat-btn:hover { border-color: var(--accent); color: var(--accent); }
.filter-btn.active, .cat-btn.active { background: var(--fg); color: var(--bg); }
.item-count, .photo-count { font-size: 15px; color: var(--muted); }
.archive-section { padding-bottom: 96px; }

/* Instagram strip (photography) */
.instagram-section { background: var(--tile); border-top: 1px solid var(--fg); padding: 72px var(--pad); }
.ig-inner { max-width: var(--max); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.ig-text { flex: 1 1 320px; }
.ig-eyebrow { margin: 0 0 12px; font-size: 15px; color: var(--muted); }
.ig-handle { font-size: clamp(32px, 4.4vw, 56px); font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.ig-handle .ital { color: var(--accent); }
.ig-sub { margin: 12px 0 0; color: var(--muted); max-width: 480px; }

/* Next project */
.next-project { display: block; background: var(--fg); color: var(--bg); }
.next-project:hover { color: var(--bg); }
.next-project-inner { max-width: var(--max); margin: 0 auto; padding: 72px var(--pad); }
.next-project-grid { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.next-eyebrow { margin: 0 0 12px; font-size: 15px; opacity: .8; }
.next-title { font-size: clamp(40px, 6.4vw, 104px); font-weight: 500; letter-spacing: -0.035em; line-height: .94; }
.next-title .stop { color: inherit; }
.next-arrow { font-size: clamp(40px, 6vw, 88px); line-height: 1; transition: transform .4s var(--ease); }
.next-project:hover .next-arrow { transform: translate(6px, -6px); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(242, 242, 240, .97); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox-img-wrap img { max-width: 88vw; max-height: 80vh; width: auto; height: auto; object-fit: contain; }
.lightbox-close, .lightbox-prev, .lightbox-next { position: fixed; width: 48px; height: 48px; background: #0E0E0E; color: #F2F2F0; border: 0; font-size: 22px; cursor: pointer; }
.lightbox-close { top: 20px; right: 20px; }
.lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: #126A58; }
.lightbox-counter, .lightbox-caption { margin-top: 16px; font-size: 14px; color: #5A5A58; display: flex; gap: 12px; }
@media (max-width: 640px) { .lightbox-prev, .lightbox-next { display: none; } }

/* CV page */
.cv-empty { min-height: 360px; border: 1px dashed var(--muted); display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; color: var(--muted); margin-bottom: 96px; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Wireframe placeholders (confidential projects) */
.wf { display: block; width: 100%; height: auto; background: var(--tile); }
.wf .f { fill: var(--bg); }
.wf .s { stroke: var(--line); stroke-width: 2; }
.wf .s2 { stroke: var(--muted); stroke-width: 2; fill: none; }
.wf .s3 { fill: var(--line); }
.wf .t { fill: var(--line); }
.wf .a { fill: var(--accent); }
.wf .a-s { stroke: var(--accent); }
.wf .d { fill: var(--muted); }
.wf circle.s2 { fill: none; }
.project-hero-fallback .wf { height: 100%; object-fit: cover; }

/* Learning & corporate samples page */
.samples-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 40px; padding: 24px 0 8px; border-top: 1px solid var(--fg); }
.samples-cta p { margin: 0; flex: 1 1 360px; max-width: 620px; color: var(--muted); }
.samples-section { padding-top: 24px; }
.samples-head { margin-bottom: 28px; }
.samples-title { margin: 0 0 12px; font-size: clamp(30px, 3.6vw, 52px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.02; }
.overview-body .samples-intro { margin: 0; max-width: 680px; font-size: 17px; line-height: 1.6; color: var(--muted); }
.samples-grid { columns: 3; }
.samples-note { margin: 0 0 96px; font-size: 14px; color: var(--muted); }
@media (max-width: 1020px) { .samples-grid { columns: 2; } }
@media (max-width: 640px) { .samples-grid { columns: 1; } }

/* Hero: playful shapes around the portrait */
.hero { overflow-x: clip; }
.hero-portrait { position: relative; }
.hero-portrait .photo-frame { z-index: 1; }
.hero-shapes { position: absolute; left: -18%; right: -18%; top: -18%; bottom: -18%; width: 136%; height: 136%; pointer-events: none; overflow: visible; }
.hero-shapes--back { z-index: 0; }
.hero-shapes--front { z-index: 2; }
.hero-shapes * { transition: fill .45s ease, stroke .45s ease; }
.hs-bounce { transform-box: fill-box; transform-origin: 50% 100%; animation: hs-bounce 1.8s cubic-bezier(.3,1.6,.5,1) infinite; }
@keyframes hs-bounce { 0%,100% { transform: translateY(0) scale(1.12,.88); } 12% { transform: translateY(0) scale(1); } 50% { transform: translateY(-90px) scale(.95,1.05); } 88% { transform: translateY(0) scale(1); } }
.hs-turn { transform-box: fill-box; transform-origin: center; animation: hs-turn 6s cubic-bezier(.6,-.3,.4,1.3) infinite; }
@keyframes hs-turn { 0% { transform: rotate(0); } 25%,50% { transform: rotate(90deg); } 75%,100% { transform: rotate(180deg); } }
.hs-rock { transform-box: fill-box; transform-origin: 50% 100%; animation: hs-rock 2.4s ease-in-out infinite alternate; }
@keyframes hs-rock { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
.hs-draw { stroke-dasharray: 220; animation: hs-draw 3.2s ease-in-out infinite; }
@keyframes hs-draw { 0% { stroke-dashoffset: 220; } 45%,60% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -220; } }
.hs-pop { transform-box: fill-box; transform-origin: center; animation: hs-pop 2.8s cubic-bezier(.3,1.8,.5,1) infinite; }
@keyframes hs-pop { 0%,20% { transform: scale(0); } 35%,75% { transform: scale(1); } 90%,100% { transform: scale(0); } }
.hs-orbit { transform-box: fill-box; transform-origin: center; animation: hs-orbit 16s linear infinite; }
@keyframes hs-orbit { to { transform: rotate(360deg); } }
.hs-float { transform-box: fill-box; transform-origin: center; animation: hs-float 3.6s ease-in-out infinite alternate; }
@keyframes hs-float { from { transform: translate(0,0) rotate(0); } to { transform: translate(-10px,-14px) rotate(-10deg); } }
@media (prefers-reduced-motion: reduce) { .hero-shapes * { animation: none !important; } }