:root{color-scheme:dark;--ink:#111310;--paper:#eeeae2;--muted:#b1b4a9;--line:#30352b;--accent:#d5f57a;--gap:clamp(24px,4vw,64px)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:105px;scrollbar-color:#59614f var(--ink)}
body{margin:0;background:var(--ink);color:var(--paper);font:16px/1.45 "Instrument Sans",sans-serif}
a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.4;fill:none;display:block}
::selection{background:var(--accent);color:var(--ink)}:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.skip-link{position:fixed;top:-100px;left:20px;z-index:20;background:var(--accent);color:var(--ink);padding:12px 20px}.skip-link:focus{top:10px}
.bar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px var(--gap);background:#111310f5}
.identity{font-size:16px;font-weight:500;letter-spacing:-.02em}.identity span{display:block;margin-top:4px;color:var(--muted);font-size:11px;font-weight:400;letter-spacing:0}
.view-controls{display:flex;gap:6px}.view-controls button{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--muted)}
.view-controls button:hover{border-color:var(--muted);color:var(--paper)}.view-controls button[aria-pressed="true"]{color:var(--paper);border-color:var(--paper)}
main{padding:18px var(--gap) 80px}.gallery-heading{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:26px}.gallery-heading h1{margin:0;font-size:16px;font-weight:400}.gallery-heading>span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:64px 30px}
.gallery.compact{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 24px}
.project{min-width:0;display:block}.visual{position:relative;display:block;overflow:hidden;background:#191c17}.visual img{display:block;width:100%;height:auto;object-fit:contain;transition:filter .25s}.project:hover .visual img{filter:brightness(1.06)}
.open-icon{position:absolute;right:14px;bottom:14px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#111310c9;color:var(--paper);opacity:0;transition:opacity .2s}.project:hover .open-icon,.project:focus-visible .open-icon{opacity:1}
.caption{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:18px;min-height:52px}.project-name{min-width:0;font-size:20px;font-weight:500;line-height:1.15}.category{font-size:10px;color:var(--muted);white-space:nowrap}.brand-model{display:block;font-size:11px;margin-top:6px;color:var(--muted);font-weight:400}
.logo.has-logo{display:block}.logo.has-logo svg{display:block;width:auto;max-width:100%;height:25px;stroke:none;fill:currentColor}.logo.has-mark svg{display:inline-block;width:auto;height:1em;stroke:none;max-width:40px;margin-right:.25em;vertical-align:-.1em}
.gallery.compact .project-name{font-size:17px}.gallery.compact .logo.has-logo svg{height:21px}
footer{margin:0 var(--gap);padding:24px 0 30px;display:flex;align-items:center;gap:18px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}footer span{margin-right:auto}footer a{width:44px;height:44px;display:grid;place-items:center}footer a:hover{color:var(--accent)}
@media(max-width:760px){.bar{padding:18px 20px}.identity{font-size:14px}.identity span{font-size:10px}main{padding:10px 20px 50px}.gallery{grid-template-columns:1fr;gap:40px}.gallery.compact{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 14px}.gallery.compact .caption{display:block;padding-top:12px;min-height:40px}.gallery.compact .project-name{font-size:14px}.gallery.compact .category{display:none}.gallery.compact .logo.has-logo svg{height:17px}.caption{padding-top:14px}.open-icon{opacity:1}.gallery-heading{margin-bottom:20px}footer{margin:0 20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Native scroll-linked reveals: all projects stay visible without animation support. */
@media(prefers-reduced-motion:no-preference){
 @supports(animation-timeline:view()){
  .project{view-timeline-name:--project;view-timeline-axis:block}
  .project:nth-child(even){--arrival:100px}
  .project .visual{animation:project-arrive linear both;animation-timeline:--project;animation-range:entry 0% entry 80%}
  .project .caption{animation:label-arrive linear both;animation-timeline:--project;animation-range:entry 0% entry 80%}
 }
}
@keyframes project-arrive{from{opacity:0}to{opacity:1}}
@keyframes label-arrive{from{opacity:0}to{opacity:1}}
.project:focus-visible .visual,.project:focus-visible .caption{animation:none}


/* Load alternate media only on intent; preserve the cover's layout and crop. */
.visual .alternate{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--ink);opacity:0;pointer-events:none;transition:opacity .3s ease-out}
.project.previewing .alternate{opacity:1}
/* 2026-09-25 "less but real": no tilt, no glare. The mouse steps through the project's own renders. */
.visual{transition:height .4s cubic-bezier(.2,.8,.2,1)}
.visual .scrub{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--ink);opacity:0;pointer-events:none;transition:opacity .4s cubic-bezier(.2,.8,.2,1)}
.visual .scrub.on{opacity:1}
/* reel indicator: one segment per frame, the current one bright */
.reel-dots{position:absolute;left:16px;right:72px;bottom:24px;display:flex;gap:6px;opacity:0;transition:opacity .4s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.reel-dots i{flex:1;height:3px;background:#eeeae240;transition:background .4s}
.reel-dots i.on{background:var(--accent)}
.project:hover .reel-dots{opacity:1}
.project:hover .scrub-count{opacity:0}
.scrub-count{position:absolute;left:16px;bottom:14px;font-size:11px;letter-spacing:.12em;color:var(--paper);font-variant-numeric:tabular-nums;opacity:.8;transition:opacity .4s cubic-bezier(.2,.8,.2,1);text-shadow:0 1px 8px #0009}
.project .category{text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-variant-numeric:tabular-nums}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.4s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
/* masonry columns (home.js); the gap follows the grid's row gap */
.gallery-col{display:flex;flex-direction:column;gap:64px;min-width:0}
.gallery.compact .gallery-col{gap:48px}
@media(max-width:760px){.gallery-col{gap:40px}.gallery.compact .gallery-col{gap:30px}}
/* header: opaque, soft shadow under it so images slide beneath cleanly */
.bar{background:var(--ink)}
.identity{display:inline-flex;flex-direction:column;justify-content:center;min-height:44px}
.open-icon{z-index:1}
/* intro (2026-09-25): one quiet line and three figures from the data; no hero film, no globe */
.intro{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:32px;padding:clamp(48px,9vh,112px) 0 clamp(40px,7vh,88px);border-bottom:1px solid var(--line);margin-bottom:32px}
.intro-line{margin:0;max-width:16ch;font-size:clamp(34px,5.2vw,76px);line-height:1.02;letter-spacing:-.035em;font-weight:500;text-wrap:balance}
@media(max-width:760px){.intro{grid-template-columns:1fr;gap:28px;padding:40px 0 32px}}
/* featured (home.js masonry): full width between the column blocks, never taller than the screen */
.project.wide{grid-column:1/-1;width:min(100%,calc(82svh * var(--ar)));margin:0 auto}
.project.wide .project-name{font-size:clamp(24px,2.2vw,34px)}
.project.wide .logo.has-logo svg{height:34px}
/* category icon with its word beside it (icons.js) */
.category svg{display:block;width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.caption .category{display:flex;align-items:center;gap:8px;color:var(--muted);flex:none}
.project:hover .caption .category{color:var(--paper)}
/* index (2026-09-26, back from the atlas version): every project by category, preview on hover */
.index-open{height:44px;padding:0 20px;border:1px solid var(--line);border-radius:22px;background:transparent;color:var(--paper);font:inherit;font-size:13px;cursor:pointer}
.index-open:hover{border-color:var(--muted)}.index-open span{color:var(--muted);margin-left:8px;font-variant-numeric:tabular-nums}
.bar-tools{display:flex;align-items:center;gap:12px}
#index{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:var(--ink);color:var(--paper)}
#index::backdrop{background:var(--ink)}
.index-head{display:flex;justify-content:space-between;align-items:center;padding:24px var(--gap);border-bottom:1px solid var(--line)}
.index-head h2{margin:0;font-size:clamp(28px,3vw,40px);font-weight:500;letter-spacing:-.03em}
.index-head button{height:44px;padding:0 20px;border:1px solid var(--line);border-radius:22px;background:transparent;color:var(--paper);font:inherit;font-size:13px;cursor:pointer}
.index-body{display:grid;grid-template-columns:minmax(0,1fr) min(34vw,540px);align-items:start;gap:48px;padding:32px var(--gap);height:calc(100dvh - 93px);overflow:auto;box-sizing:border-box}
#index-list{columns:3 220px;column-gap:44px}
#index-list section{break-inside:avoid;margin-bottom:28px}
#index-list h3{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
#index-list ul{list-style:none;margin:0;padding:0}
#index-list a{display:block;padding:3px 0;font-size:19px;line-height:1.2;letter-spacing:-.01em;color:var(--paper)}
#index-list a:hover,#index-list a:focus-visible{color:var(--accent)}
.index-preview{position:sticky;top:0;margin:0;aspect-ratio:4/3;background:#1a1d18}
.index-preview img{width:100%;height:100%;object-fit:contain;display:block}
@media(max-width:760px){.index-body{grid-template-columns:1fr}.index-preview{display:none}.index-open span{display:none}}
/* optical size: SmartSnugg's box includes the g descender and ®, so its letters read small at the shared height */
.logo.has-logo[data-logo="smartsnugg"] svg{transform:scale(1.3);transform-origin:left center}