/* Geist's two neutral surfaces, gray text scale, and quiet structural dividers. */
:root {
  color-scheme: light;
  --bg: #fff; --text: #171717; --heading: #171717; --text-muted: #666;
  --text-faint: #8f8f8f; --link: #171717; --surface: #f2f2f2;
  --surface-hover: #ebebeb; --border: #eaeaea; --nav-bg: #fff;
  --nav-scrolled-bg: rgba(255,255,255,.92); --secondary-bg: #fafafa;
  --portfolio-font: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0a0a0a; --text: #ededed; --heading: #ededed; --text-muted: #a1a1a1;
  --text-faint: #888; --link: #ededed; --surface: #1a1a1a;
  --surface-hover: #222; --border: #292929; --nav-bg: #0a0a0a;
  --nav-scrolled-bg: rgba(10,10,10,.92); --secondary-bg: #111;
}
body { font-family: var(--portfolio-font); }
/* Five percent tighter tracking, relative to each element's own font size. */
* { letter-spacing: -.05em; }
.navigation-item, .case-eyebrow, .case-kicker, .case-label { letter-spacing: calc(1px - .05em); }
.gallery-cap span, .meta-label, .case-quote span { letter-spacing: calc(.5px - .05em); }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid #0070f3; outline-offset: 5px; }
button { font: inherit; }
.skip-link { position: fixed; left: 24px; top: -80px; z-index: 300; padding: 12px 20px; background: var(--heading); color: var(--bg); border-radius: 6px; }
.skip-link:focus { top: 16px; }

/* Keep the compact desktop sidebar proportions even on wide screens. */
.portfolio-layout { display: grid; grid-template-columns: 310px minmax(0, 1fr); max-width: 1600px; margin: 0 auto; min-height: 100vh; }
.intro-column { border-right: 1px solid var(--border); }
.intro-panel { padding: 28px; }

.geist-home .homepage-intro { max-width: none; padding: 0; margin: 0; }
.geist-home .hero-heading { font-size: 32px; line-height: 1.13; font-weight: 500; letter-spacing: -.05em; text-wrap: balance; margin-bottom: 24px; }
.intro-copy, .intro-bio { font-size: 14px; line-height: 23px; color: var(--text-muted); text-wrap: pretty; }
.intro-copy { margin-bottom: 16px; }
.intro-bio .home-link { text-decoration-color: var(--border); text-underline-offset: 4px; transition: text-decoration-color .2s; }
.intro-bio .home-link:hover { text-decoration-color: var(--text); }
.geist-home .navigation { display: grid; position: static; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; padding: 0; margin: 36px -12px 0; z-index: auto; gap: 2px; }
.section-link { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px; border-radius: 6px; color: var(--text-muted); font-size: 13px; text-decoration: none; transition: background .2s, color .2s; }
.section-icon { width: 18px; height: 18px; flex: 0 0 18px; color: var(--text-muted); }
.section-label { white-space: nowrap; transition: opacity .18s var(--ease-cloud); }
.section-link:is(:hover,.is-active) .section-number { color: var(--heading); }
.section-link:hover, .section-link.is-active { background: var(--surface); color: var(--heading); }

.work-panel { min-width: 0; }
.geist-home .projects-section { padding-top: 0; }
.section-title { display: flex; align-items: center; gap: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.geist-home .projects-grid { max-width: none; margin: 0; padding: 28px 36px 0; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px 24px; }
.geist-home .project-block { min-width: 0; border-bottom: 0; padding-bottom: 28px; }
.project-visual { position: relative; min-width: 0; }
.geist-home .project-hero-shot { height: auto; aspect-ratio: 1.4; border-radius: 8px; background: var(--secondary-bg); box-shadow: none; object-fit: cover; }
.geist-home .project-monty .project-hero-shot { object-fit: cover; object-position: center 60%; }
.geist-home .project-block:is(:hover,:focus-visible) .project-hero-shot { transform: translateY(-4px); box-shadow: 0 8px 18px rgba(0,0,0,.1); }
.project-info { padding-top: 16px; }
.project-meta { display: flex; justify-content: space-between; align-items: center; min-height: 20px; margin-bottom: 8px; }
.project-year { font: 12px/18px var(--portfolio-font); letter-spacing: -.015em; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.project-arrow { display: flex; color: var(--text-muted); }
.project-arrow svg { width: 15px; height: 15px; transition: transform .3s var(--ease-cloud), color .3s; }
.project-block:hover .project-arrow svg { transform: translate(2px,-2px); color: var(--text); }
.project-info h3 { color: var(--heading); font-size: 18px; line-height: 24px; letter-spacing: -.05em; font-weight: 550; margin-bottom: 8px; }
.project-description { color: var(--text-muted); font-size: 13px; line-height: 21px; text-wrap: pretty; }
.geist-home .art-feature { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: center; padding-bottom: 32px; }
.geist-home .art-feature .project-hero-shot { aspect-ratio: 1.55; }
.art-feature .project-info { padding-top: 0; }
.art-feature .project-description { max-width: 240px; }

.geist-home .about-wrap { padding: 0 36px; max-width: none; }
.geist-home .about-section { padding-top: 64px; }
.geist-home .about-heading { font-size: 22px; line-height: 29px; letter-spacing: -.05em; font-weight: 500; margin: 0; }
.section-title { margin-bottom: 28px; }
.geist-home .philosophy-grid { gap: 0; }
.geist-home .principle { padding: 0; }
.geist-home .principle-toggle { padding: 14px 0; font-size: 15px; line-height: 23px; gap: 20px; }
.geist-home .principle-title { font-size: 15px; line-height: 23px; font-weight: 450; }
.geist-home .principle-toggle svg { background: transparent; border: 1px solid var(--border); width: 40px; height: 40px; flex: 0 0 40px; padding: 12px; }
.geist-home .principle-body { font-size: 14px; line-height: 23px; padding: 0 40px 20px 0; color: var(--text-muted); max-width: 620px; }
.geist-home .creative-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.geist-home .creative-img { height: auto; aspect-ratio: 1; border-radius: 8px; margin-bottom: 16px; }
.geist-home .creative-title { font-size: 14px; line-height: 21px; margin-bottom: 4px; font-weight: 500; }
.geist-home .creative-desc { font-size: 13px; line-height: 21px; }
.geist-home .gallery { --gallery-columns: 3; column-count: 3; column-gap: 16px; padding-bottom: 32px; }
.geist-home .gallery-item { border-radius: 8px; margin-bottom: 16px; }
.geist-home .gallery-item img { border-radius: 8px; }
/* Preserve masonry sizing while letting source priority flow across the top. */
.geist-home .gallery.is-ordered-masonry { display: grid; grid-template-columns: repeat(var(--gallery-columns),minmax(0,1fr)); grid-auto-rows: 1px; align-items: start; gap: 0 16px; column-count: auto; }
.geist-home .gallery.is-ordered-masonry > .gallery-item { margin-bottom: 0; }
.geist-home .gallery-cap span { border-radius: 5px; font: 10px/16px var(--portfolio-font); padding: 8px 10px; text-transform: none; }
.geist-home .gallery-cap { transition: opacity .12s var(--ease-cloud); }
.geist-home .gallery-item:is(:hover,:focus-within) .gallery-cap { opacity: 1; transition-duration: 0s; }
.geist-home .gallery-item .gallery-cap span { transform: none; transition: none; background: linear-gradient(135deg, #2020209e, #050505b3); backdrop-filter: blur(8px) saturate(1.15); -webkit-backdrop-filter: blur(8px) saturate(1.15); }
.portfolio-footer { margin: 24px 36px 0; padding: 24px 0 32px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; color: var(--text-muted); font-size: 12px; }
.portfolio-footer a { text-decoration: none; color: inherit; }

/* Existing case studies inherit the same typography and neutral palette. */
body:not(.geist-home) .case-title { font-weight: 500; letter-spacing: -.05em; }
body:not(.geist-home) .case-kicker, body:not(.geist-home) .case-eyebrow, body:not(.geist-home) .meta-label { font-family: var(--portfolio-font); font-size: 12px; }
body:not(.geist-home) .case-fig img { border-radius: 8px; }

@media (min-width: 851px) {
  .intro-panel { position: sticky; top: 0; max-height: 100svh; overflow-y: auto; scrollbar-width: thin; }
}
@media (max-width: 1100px) {
  .geist-home .projects-grid { padding: 24px 24px 0; gap: 28px 20px; }
  .geist-home .about-wrap { padding: 0 24px; }
  .geist-home .creative-grid { grid-template-columns: 1fr; }
  .geist-home .creative-item { display: grid; grid-template-columns: 100px 1fr; column-gap: 20px; }
  .geist-home .creative-img { grid-row: 1 / 3; margin: 0; }
  .geist-home .creative-title { align-self: end; }
  .geist-home .gallery { --gallery-columns: 2; column-count: 2; }
}
@media (max-width: 850px) {
  .portfolio-layout { display: block; }
  .intro-column { border-right: 0; border-bottom: 1px solid var(--border); }
  .intro-panel { padding: 24px; }

  .geist-home .homepage-intro { max-width: 620px; }
  .geist-home .hero-heading { font-size: 40px; max-width: 530px; }
  .intro-copy, .intro-bio { max-width: 550px; }
  .geist-home .navigation { display: flex; gap: 4px; margin: 24px -8px 0; }
  .section-link { padding: 8px; gap: 8px; }
}
@media (max-width: 560px) {
  .geist-home .hero-heading { font-size: 36px; line-height: 1.14; max-width: 340px; }
  .geist-home .projects-grid { grid-template-columns: 1fr; padding: 24px 20px 0; gap: 28px; }
  .geist-home .project-hero-shot { aspect-ratio: 1.23; }
  .geist-home .art-feature { display: flex; gap: 0; }
  .geist-home .art-feature .project-hero-shot { aspect-ratio: 1.23; }
  .art-feature .project-info { padding-top: 16px; width: 100%; }
  .art-feature .project-visual { width: 100%; }
  .project-info h3 { font-size: 20px; }
  .project-description { font-size: 14px; line-height: 23px; }
  .geist-home .about-wrap { padding: 0 20px; }
  .geist-home .about-heading { font-size: 20px; }
  .geist-home .principle-toggle { font-size: 14px; }
  .geist-home .principle-body { padding-right: 0; }
  .portfolio-footer { margin-left: 20px; margin-right: 20px; }
}
@media (prefers-reduced-motion: reduce) { .geist-home .project-block { animation: none; } }

/* The headline stays at the top; the bio and section links sit at the bottom. */
.nav-panel-heading { display: none; }
@media (min-width: 851px) {
  .intro-column { min-width: 0; }
  .intro-panel { display: flex; flex-direction: column; height: 100svh; overflow-x: hidden; }
  .geist-home .homepage-intro { display: flex; flex-direction: column; flex: 1 0 auto; }
  .geist-home .intro-bio { margin-top: auto; }
  .sidebar-bottom { flex: 0 0 auto; margin-top: 0; padding-top: 32px; }
  .geist-home .navigation { display: flex; flex-direction: column; gap: 2px; margin: 0 -12px; }
  .section-link { flex: 0 0 auto; min-height: 40px; }
}

/* Reading navigation and the mobile thumb menu. */
.nav-fab { display: none; }
.reading-nav { position: fixed; inset: 0 auto 0 0; width: 248px; z-index: 60; pointer-events: none; }
.reading-nav-toggle { position: relative; z-index: 2; display: flex; align-items: center; align-self: flex-start; flex: 0 0 auto; gap: 9px; min-height: 40px; margin-bottom: 24px; padding: 9px 12px; border: 0; border-radius: 6px; background: var(--surface); color: var(--text); font-size: 13px; cursor: pointer; pointer-events: auto; transition: background-color .2s var(--ease-cloud), scale .2s var(--ease-cloud); }
.reading-nav-toggle:hover { background: var(--surface-hover); }
.reading-nav-toggle:active { scale: .96; }
.reading-nav-toggle svg { width: 16px; height: 16px; transition: transform .3s var(--ease-cloud); }
.reading-nav-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.reading-nav-panel { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 20px 20px 24px; background: var(--bg); box-shadow: inset -1px 0 var(--border); transform: translateX(-100%); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .5s var(--ease-cloud), opacity .25s var(--ease-cloud), visibility 0s linear .5s; }
.reading-nav-panel.is-open { transform: translateX(0); opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.reading-home { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; min-height: 44px; padding: 8px 10px; color: var(--text); font-size: 13px; text-decoration: none; border-radius: 6px; margin-bottom: 24px; }
.reading-home:hover { background: var(--surface); }
.reading-home svg { width: 16px; height: 16px; }
.reading-nav .nav-panel-heading { display: block; padding: 0 10px; margin-bottom: 12px; color: var(--text-muted); font-size: 12px; line-height: 18px; font-weight: 500; }
.reading-links { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; display: flex; flex-direction: column; gap: 2px; padding: 3px; margin: -3px; }
.reading-link { display: flex; align-items: baseline; gap: 12px; flex: 0 0 auto; min-height: 40px; padding: 10px; color: var(--text-muted); text-decoration: none; border-radius: 6px; font-size: 13px; line-height: 20px; transition: background-color .2s var(--ease-cloud), color .2s var(--ease-cloud); }
.reading-link:is(:hover,.is-active) { background: var(--surface); color: var(--heading); }
.reading-icon { flex: 0 0 20px; width: 20px; height: 20px; }
.reading-label { white-space: nowrap; }
.case-page .case-hero-block, .case-page .case-section { scroll-margin-top: 24px; }
@media (min-width: 851px) {
  .case-page { padding-left: 248px; }
  .case-page .case-wrap { max-width: 1220px; padding-inline: clamp(32px, 4vw, 64px); }
  .case-page .case-hero-block { padding-top: 48px; }
  .reading-nav { transition: width .4s var(--ease-cloud); }
  .reading-link { align-items: center; }
  .reading-nav-toggle span { max-width: 80px; overflow: hidden; opacity: 1; transition: max-width .25s var(--ease-cloud), opacity .15s; }
  .reading-nav.is-minimized { width: 72px; }
  .reading-nav.is-minimized .reading-nav-panel { padding-inline: 12px; }
  .reading-nav.is-minimized .reading-nav-toggle { left: 4px; gap: 0; }
  .reading-nav.is-minimized .reading-nav-toggle span { max-width: 0; opacity: 0; }
  .reading-nav.is-minimized .reading-label, .reading-nav.is-minimized .nav-panel-heading { display: none; }
  .reading-nav.is-minimized :is(.reading-link,.reading-home) { justify-content: center; gap: 0; padding: 12px; min-height: 44px; }
  .reading-nav.is-minimized .reading-home { margin-bottom: 12px; }
}
@media (min-width: 851px) and (max-width: 1100px) {
  .case-page { padding-left: 216px; }
  .reading-nav { width: 216px; }
  .reading-nav-panel { padding-inline: 16px; }
  .case-page .case-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 850px) {
  body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .reading-nav { display: contents; }
  .reading-nav-toggle { display: none; }
  .nav-fab { position: fixed; right: calc(20px + env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 120; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: var(--heading); color: var(--bg); box-shadow: 0 4px 14px #0003, 0 1px 3px #0002; cursor: pointer; transition: scale .2s var(--ease-cloud), box-shadow .2s var(--ease-cloud); }
  .nav-fab:active { scale: .96; }
  .nav-fab svg { position: absolute; width: 22px; height: 22px; transition: opacity .22s, scale .22s cubic-bezier(.2,0,0,1), filter .22s; }
  .fab-close-icon, .nav-fab[aria-expanded="true"] .fab-menu-icon { opacity: 0; scale: .25; filter: blur(4px); }
  .nav-fab[aria-expanded="true"] .fab-close-icon { opacity: 1; scale: 1; filter: blur(0); }
  .nav-panel, .geist-home .sidebar-bottom { position: fixed; inset: auto calc(20px + env(safe-area-inset-right)) calc(88px + env(safe-area-inset-bottom)) auto; z-index: 110; display: flex; flex-direction: column; width: min(320px, calc(100vw - 40px)); max-height: min(68svh, calc(100dvh - 132px - env(safe-area-inset-bottom))); padding: 12px; margin: 0; overflow: hidden; border-radius: 12px; background: var(--bg); box-shadow: 0 0 0 1px var(--border), 0 12px 36px #0003, 0 2px 8px #0001; transform: translateY(10px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s var(--ease-cloud), transform .28s var(--ease-cloud), visibility 0s linear .28s; }
  .nav-panel.is-open, .geist-home .sidebar-bottom.is-open { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
  .nav-panel .nav-panel-heading { display: block; flex: 0 0 auto; padding: 8px 10px 10px; margin: 0; color: var(--text-muted); font-size: 12px; line-height: 18px; font-weight: 500; }
  .geist-home .nav-panel .navigation { display: flex; flex-direction: column; gap: 2px; padding: 3px; margin: -3px; min-height: 0; overflow-y: auto; }
  .geist-home .nav-panel .section-link, .reading-link { min-height: 44px; padding: 11px 10px; gap: 12px; font-size: 14px; line-height: 22px; }
  .reading-home { margin-bottom: 4px; }
  .case-page .case-wrap { padding-inline: 20px; }
  .case-page .case-hero-block { padding-top: 28px; }
  .case-page .case-title { font-size: clamp(28px, 7.6vw, 40px); line-height: 1.16; }
  .case-page .case-body, .case-page .case-cap { font-size: 16px; line-height: 27px; }
  .case-page .case-meta { gap: 24px 16px; }
  .case-page .meta-value { font-size: 16px; line-height: 25px; }
  .reading-link { align-items: center; }
}