:root{--bg:#f6f7fb;--card:#fff;--ink:#1f2937;--muted:#6b7280;--line:#e8edf5;--brand:#3a51a3;--container:1160px;--shadow:0 8px 16px rgba(2,6,23,.06),0 2px 4px rgba(2,6,23,.06);--header-h:112px}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:16px/1.55 Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
html{scroll-padding-top:var(--header-h)}.container{max-width:var(--container);margin:0 auto;padding:22px}
.splash{position:fixed;inset:0;display:grid;place-items:center;background:#fff;z-index:999}.splash img{width:min(360px,60vw);height:auto}.splash.hide{opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s .4s}
.header{position:sticky;top:0;z-index:10;background:#ffffffee;border-bottom:1px solid var(--line);backdrop-filter:saturate(180%) blur(8px)}
.nav{display:flex;align-items:flex-end;gap:16px;padding-top:12px;padding-bottom:18px}.brand-logo{height:56px;width:auto;display:block}.nav-links{list-style:none;padding:0;margin:0 8% 0 auto;display:flex;gap:20px}
.nav-links a{color:var(--brand);text-decoration:none;font-weight:700}.nav-links a.active{border-bottom:2px solid var(--brand)}
.ratio-169{position:relative;width:100%;height:0;padding-top:56.25%;overflow:hidden;background:#f6f6f6;display:block;border-radius:0!important}
.ratio-169>img,.ratio-169>video,.ratio-169>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@supports (aspect-ratio:16/9){.ratio-169{aspect-ratio:16/9;height:auto;padding-top:0}}
.hero-copy-card h1,.section h1,.section h2,.section h3{color:var(--brand)!important}
.section{padding:24px 0;border-top:1px solid var(--line)}.section h2{margin:0 0 10px;font-size:22px}.section h3{margin:0 0 8px;font-size:18px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}@media(max-width:1000px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.grid{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--card);overflow:hidden;box-shadow:var(--shadow)}.card .cover{border-bottom:1px solid var(--line);display:block;flex:0 0 auto}.card .cover .ratio-169{background:#eef2ff}
.footer{padding:12px 14px}.footer a{display:block;font-weight:700;color:var(--brand);text-decoration:none}.footer a:hover{text-decoration:underline}.meta{margin-top:4px;font-size:13px;color:var(--muted)}
.btn{display:inline-block;background:var(--brand);color:#fff;padding:10px 14px;border-radius:0;font-weight:700;text-decoration:none;border:1px solid #2b3b7b}.btn:hover{filter:brightness(.98)}.btn-secondary{background:#fff;color:#1f2937;border:1px solid var(--line)}
.list{list-style:disc;padding-left:20px;margin:0}.list li{margin:6px 0}.footer-site{padding:28px 0 40px;color:var(--muted);text-align:center;font-size:13px}
.work-detail{display:grid;grid-template-columns:2fr 1fr;gap:22px}@media(max-width:900px){.work-detail{grid-template-columns:1fr}}.detail-media{border:1px solid var(--line);background:#fff;box-shadow:var(--shadow)}
.detail-thumbs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:10px}.detail-thumbs img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line);cursor:pointer}
.press-links{list-style:none;margin:0;padding:0;display:grid;gap:8px}.press-links .meta{opacity:.7}
.press-rich-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}.press-item{display:grid;grid-template-columns:1fr 220px;gap:14px;align-items:start;border:1px solid var(--line);background:#fff;padding:14px;box-shadow:var(--shadow)}
@media(max-width:820px){.press-item{grid-template-columns:1fr}.press-item .thumb{order:2}}.press-item .title{font-weight:700;text-decoration:none;color:var(--brand)}.press-item .meta{font-size:13px;color:#6b7280;margin-top:4px}.press-item .desc{margin-top:8px}
/* --- Splash harden (place at end of file) --- */
.splash {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #fff;
  z-index: 999;
  opacity: 1;
  visibility: visible;
  transition: opacity .4s ease, visibility 0s .4s;
}
.splash.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .splash { opacity: 1; }
}
/* Work/Home scroll root for infinite grid */
.scroller{
  height: clamp(520px, 70vh, 880px);
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  -webkit-overflow-scrolling: touch;
}
.hero-copy-card p { 
  color: var(--ink);   /* black/ink */
  margin: 8px 0;
  max-width: 80ch;
}
.hero-copy-card p.lead { 
  font-weight: 700;
}
/* iPhone tweaks */
body {
  padding-bottom: env(safe-area-inset-bottom);
}

.header {
  padding-top: env(safe-area-inset-top);
}

/* tighten container on small screens */
@media (max-width: 640px) {
  .container {
    padding: 14px 14px 18px;
  }
  .nav {
    gap: 10px;
  }
  .nav-links {
    gap: 14px;
    margin-right: 0;
  }
  .btn,
  .footer a {
    min-height: 44px;
  }
  img, video, iframe {
    max-width: 100%;
    height: auto;
  }/* Optional: global blue scrollbar */
:root { --accent-blue: #3abff8; }
* { scrollbar-width: auto; scrollbar-color: var(--accent-blue) #111216; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #111216; }
::-webkit-scrollbar-thumb { background-color: var(--accent-blue); border-radius: 10px; border: 2px solid #0f1012; }
	.work-card img.thumb{ object-fit: contain !important; }
	/* === SAFETY: don't crop project hero, keep it inside page bounds === */
#projViewer img,
#projViewer video,
#project-shell .viewer img,
#project-shell .viewer video,
#project-page .viewer img,
#project-page .viewer video {
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;   /* show the whole image/video */
  display: block;
  background: #000;      /* clean letterbox for tall/wide */
}

/* Thumbs under the hero should never crop */
#projStrip img {
  height: 80px;
  width: auto;
  object-fit: contain;
  background: #000;
  border-radius: 0!important;
}

/* === SAFETY: Work grid thumbs show the whole image (no side-crop) === */
#work img.thumb,
#work .grid img.thumb,
#work #workGrid img,
.work-card img.thumb {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  object-fit: contain !important;
  object-position: center center;
  display: block;
  background: #000;
}

/* Optional: make the work grid breathe a bit (only if your grid feels cramped) */
#work #workGrid,
#work .work-grid,
#work .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

/* Optional: blue scrollbar for image strips on desktop */
#work .extra-thumbs,
#projStrip,
#lbV3 .strip {
  scrollbar-width: auto;
  scrollbar-color: #3abff8 #111216;
}
#work .extra-thumbs::-webkit-scrollbar,
#projStrip::-webkit-scrollbar { height: 12px; }
#work .extra-thumbs::-webkit-scrollbar-track,
#projStrip::-webkit-scrollbar-track { background: #111216; }
#work .extra-thumbs::-webkit-scrollbar-thumb,
#projStrip::-webkit-scrollbar-thumb {
  background-color: #3abff8;
  border-radius: 0!important;
  border: 2px solid #0f1012;
}
}