:root { color-scheme:light; --paper:#f6f4f2; --ink:#20201f; --muted:#777570; --line:#dedbd6; --surface:#fff; --menu:rgba(57,56,55,.94); --shadow:0 12px 24px #26221c15,0 2px 5px #26221c12; }
:root[data-theme=dark] { color-scheme:dark; --paper:#151515; --ink:#f2f0ed; --muted:#a2a09b; --line:#383735; --surface:#252524; --menu:rgba(43,42,41,.96); --shadow:0 15px 30px #0005,0 2px 5px #0003; }
body { background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; transition:background-color .3s,color .3s; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font-family:inherit; }
a:focus-visible,button:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
[hidden] { display:none!important; }
.floating-nav.site-header { position:fixed; top:24px; left:50%; transform:translateX(-50%); display:block; width:min(450px,calc(100% - 32px)); padding:0; height:auto; min-height:56px; border:1px solid #ffffff15; border-radius:18px; background:var(--menu); color:#fff; backdrop-filter:blur(24px); z-index:80; box-shadow:0 8px 24px #0000000a; }
.nav-name { display:block; text-align:center; font-size:17px; font-weight:500; padding:17px 64px; }
.menu-toggle { position:absolute; top:22px; right:14px; width:36px; height:36px; border:0; padding:10px; cursor:pointer; background:none; color:inherit; }
.menu-toggle span { display:block; width:18px; height:1px; background:currentColor; margin:5px 0; transition:transform .3s; }
.menu-toggle[aria-expanded=true] span:first-child { transform:translateY(3px) rotate(45deg); }
.menu-toggle[aria-expanded=true] span:last-child { transform:translateY(-3px) rotate(-45deg); }
#navigation-panel { padding:20px 24px 18px; max-height:calc(100dvh - 105px); overflow:auto; animation:menu-appear .3s ease; }
@keyframes menu-appear { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
.menu-eyebrow { text-align:center; font-size:13px; color:#c4c3c0; margin:4px 0 18px; }
.floating-nav .project-menu { display:grid; gap:6px; }
.project-menu a { display:flex; align-items:center; gap:12px; padding:12px; border-radius:12px; background:#ffffff08; transition:background .2s,transform .2s; }
.project-menu a:hover { background:#ffffff17; transform:translateX(3px); }
.project-menu img { width:36px; height:36px; border-radius:9px; object-fit:contain; }
.project-menu a span { margin-left:auto; color:#aaa; }
.menu-links { display:flex; gap:8px; margin-top:18px; }
.menu-links a { flex:1; text-align:center; background:#ffffff12; border-radius:12px; padding:12px; }
.menu-links a:hover { background:#ffffff22; }
.menu-profile { display:flex; align-items:center; gap:14px; padding:14px 64px 14px 24px; min-height:80px; }
.menu-profile strong { font-size:14px; font-weight:500; }
.menu-profile small { display:block; font-size:12px; color:#aaa; margin-top:0; line-height:16px; }
.menu-footer { margin-top:18px; display:flex; align-items:center; justify-content:center; color:#aaa; font-size:11px; }
.theme-toggle { border:0; background:#ffffff10; border-radius:50%; width:34px; height:34px; color:white; font-size:23px; cursor:pointer; }
.menu-backdrop { position:fixed; inset:0; z-index:70; background:#0005; backdrop-filter:blur(9px); }
.intro { text-align:center; padding:145px 24px 68px; max-width:690px; margin:auto; }
.intro-eyebrow { font-size:12px; color:var(--muted); margin-bottom:18px; }
.intro h1 { font-size:clamp(28px,3vw,38px); line-height:1.12; font-weight:500; letter-spacing:-.055em; }
.intro > p:last-child { font-size:16px; max-width:570px; margin:22px auto 0; line-height:1.4; color:var(--muted); }
.work-gallery { display:flex; align-items:center; gap:24px; overflow-x:auto; padding:48px max(24px,calc((100vw - 1240px)/2)) 50px; scroll-snap-type:x mandatory; scrollbar-width:none; }
.work-gallery::-webkit-scrollbar { display:none; }
.work-card { flex:0 0 300px; height:380px; position:relative; overflow:hidden; padding:0; border:0; border-radius:25px; background:var(--surface); color:#fff; text-align:left; cursor:pointer; box-shadow:var(--shadow); scroll-snap-align:center; transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s; }
.work-card:nth-child(3n+2) { transform:translateY(-16px); }
.work-card:nth-child(3n) { transform:translateY(12px); }
.work-card:hover,.work-card:focus-visible { transform:translateY(-22px) rotate(-1.5deg); box-shadow:0 28px 44px #0003,0 6px 12px #0002; }
.card-art { height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.card-art img { width:120%; max-width:none; flex-shrink:0; border-radius:8px; box-shadow:0 14px 30px #0002; transition:transform .6s cubic-bezier(.22,1,.36,1); }
.work-card:hover .card-art img { transform:scale(1.06) translateY(-12px); }
.card-caption { position:absolute; inset:auto 0 0; padding:70px 22px 23px; background:linear-gradient(transparent,#000b); }
.card-caption > span { font-size:10px; opacity:.75; }
.card-caption h2 { font-size:21px; font-weight:500; letter-spacing:-.04em; margin:8px 0; display:flex; justify-content:space-between; }
.card-caption h2 span { opacity:0; transform:translate(-4px,4px); transition:opacity .3s,transform .3s; }
.work-card:hover h2 span,.work-card:focus-visible h2 span { opacity:1; transform:none; }
.card-caption p { font-size:12px; line-height:1.4; max-width:235px; }
.dark { background:#181820; }.mint { background:#d2e3dd; }.pink { background:#e8cde8; }.lavender { background:#bcafe1; }.sand { background:#dfdacf; }.blue { background:#93a8c6; }.peach { background:#e6b79e; }
.phone .card-art img { height:94%; width:auto; margin-top:40px; box-shadow:none; }
.gallery-footer { max-width:1216px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--muted); }
.gallery-footer button { width:38px; height:38px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:50%; cursor:pointer; margin:0 3px; }
.draft-footer { border:0; padding:65px 32px 25px; display:flex; justify-content:center; font-size:11px; color:var(--muted); }
.project-preview { width:min(800px,calc(100% - 32px)); max-height:90dvh; border:1px solid var(--line); border-radius:24px; padding:0; background:var(--surface); color:var(--ink); overflow:auto; box-shadow:0 30px 100px #0005; }
.project-preview::backdrop { backdrop-filter:blur(12px); background:#0007; }
.preview-close { position:absolute; right:15px; top:15px; width:35px; height:35px; border-radius:50%; background:#0009; color:white; border:0; cursor:pointer; font-size:24px; z-index:2; }
.preview-image { box-sizing:border-box; padding:32px; width:100%; max-height:52dvh; object-fit:contain; background:#e4e2df; }
.preview-copy { padding:30px; }.preview-company { color:var(--muted); font-size:12px; }.preview-copy h2 { font-size:32px; margin:10px 0; }.preview-description { color:var(--muted); font-size:16px; }.preview-link { display:inline-flex; align-items:center; gap:8px; background:var(--ink); color:var(--paper); padding:11px 18px; border-radius:30px; margin-top:24px; font-size:13px; }
body:not(.experiment-home) main { padding-top:115px; }.project-hero { min-height:0; border-color:var(--line); }.project-hero-copy h1 { font-size:clamp(36px,5vw,65px); }.project-hero-side { background:var(--surface); border-color:var(--line); }.project-hero-side div { border-color:var(--line); }.project-next,.contact,footer { background:var(--paper); color:var(--ink); }.project-next a { font-size:32px; }.about-copy h1 { font-size:clamp(36px,5vw,60px); }.about-copy > p { font-size:18px; }.about-philosophy { background:var(--surface); }.case-study-dialog { background:var(--surface); color:var(--ink); }.case-study-form input { background:var(--paper); color:var(--ink); border-color:var(--line); }
@media(max-width:600px) { .intro { padding-top:125px; padding-bottom:25px; }.intro h1 br { display:none; }.intro > p:last-child { font-size:14px; }.work-gallery { gap:18px; padding-top:35px; }.work-card { flex-basis:270px; height:350px; }.gallery-footer { flex-wrap:wrap; gap:18px; }.floating-nav.site-header { top:16px; }.draft-footer { padding-top:45px; }.menu-profile { padding:14px 60px 14px 20px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

.floating-nav .menu-profile .profile-avatar { width:44px; height:44px; flex:0 0 44px; }

/* Compact identity becomes the full profile when the navigation opens. */
.floating-nav { --identity-duration:400ms; --identity-ease:cubic-bezier(.22,1,.36,1); }
.floating-nav .menu-profile { position:relative; display:block; height:56px; min-height:56px; padding:0; transition:height var(--identity-duration) var(--identity-ease),min-height var(--identity-duration) var(--identity-ease); }
.floating-nav .menu-profile > div { position:absolute; left:24px; top:17px; transform:translate(0,0); transition:transform var(--identity-duration) var(--identity-ease); }
.floating-nav .menu-profile strong { display:block; font-size:17px; line-height:22px; }
.floating-nav .menu-profile small { opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity var(--identity-duration) var(--identity-ease),transform var(--identity-duration) var(--identity-ease),visibility var(--identity-duration); }
.floating-nav .menu-profile .profile-avatar { position:absolute; left:24px; top:18px; opacity:0; visibility:hidden; transform:scale(.8); transition:opacity var(--identity-duration) var(--identity-ease),transform var(--identity-duration) var(--identity-ease),visibility var(--identity-duration); }
.floating-nav .menu-toggle { top:10px; transition:top var(--identity-duration) var(--identity-ease); }
.floating-nav:has(.menu-toggle[aria-expanded=true]) .menu-profile { height:80px; min-height:80px; }
.floating-nav:has(.menu-toggle[aria-expanded=true]) .menu-profile > div { transform:translate(58px,2px); }
.floating-nav:has(.menu-toggle[aria-expanded=true]) .menu-profile small { opacity:1; visibility:visible; transform:translateY(0); }
.floating-nav:has(.menu-toggle[aria-expanded=true]) .profile-avatar { opacity:1; visibility:visible; transform:scale(1); }
.floating-nav:has(.menu-toggle[aria-expanded=true]) .menu-toggle { top:22px; }

/* Give portrait phone mockups breathing room in the project preview. */
.project-preview.preview-phone .preview-image { box-sizing:border-box; height:52dvh; padding:32px; object-fit:contain; }

.menu-links a { display:flex; align-items:center; justify-content:center; gap:6px; }
.gallery-footer button { display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; }

@media(max-width:600px) { .preview-image,.project-preview.preview-phone .preview-image { padding:24px; } }

.preview-details { margin-top:24px; }
.preview-details dl { display:grid; grid-template-columns:1fr 1fr; gap:20px 28px; margin:0; }
.preview-details dl > div { border-top:1px solid var(--line); padding-top:14px; }
.preview-details dt { color:var(--muted); font-size:12px; margin-bottom:7px; }
.preview-details dd { margin:0; font-size:14px; line-height:1.6; }
.preview-details .text-link { font-size:14px; }
.case-entry-locked main,.case-entry-locked .floating-nav,.case-entry-locked footer { visibility:hidden; }
.case-entry-locked .case-study-dialog::backdrop { background:var(--paper); backdrop-filter:none; }
@media(max-width:500px) { .preview-details dl { grid-template-columns:1fr; gap:16px; } }

.pilot-signal-map p span { color:var(--ink); }

.pilot-story #origin { border-top:0; }
.project-page-zeal .project-hero-side { background:var(--surface); color:var(--ink); }

:root:not([data-theme="dark"]) .about-stack-photos img:first-child { filter:brightness(0) invert(.125); }
:root[data-theme="dark"] .about-stack-photos img:first-child { filter:brightness(0) invert(1); }

.lucid-card { background:#a79883; }
.project-preview.preview-lucid[open] { display:flex; flex-direction:column; }
.preview-lucid .preview-copy { order:1; padding:30px; }
.preview-lucid .preview-image { order:0; background:var(--surface); max-height:52dvh; height:auto; padding:32px; flex-shrink:0; }
.preview-lucid .preview-gallery { order:3; padding:0 32px 32px; background:var(--surface); }
.preview-gallery figure { margin:0 0 28px; }
.preview-gallery img { display:block; width:100%; height:auto; max-height:500px; object-fit:contain; }
.preview-gallery figcaption { font-size:12px; color:#555; margin-top:12px; }
.preview-lucid .preview-close { order:-1; position:sticky; top:15px; align-self:flex-end; margin:15px 15px -50px 0; flex-shrink:0; }
.preview-lucid .preview-copy h2 { padding-right:30px; }

.preview-lucid { --surface:#252524; --ink:#f2f0ed; --muted:#aaa9a5; background:var(--surface); color:var(--ink); }
.preview-lucid .preview-intro { order:2; padding:0 32px 32px; }
.preview-intro h3 { font-size:20px; margin:0 0 12px; }
.preview-intro p { font-size:16px; line-height:1.65; color:var(--muted); margin:0; }

/* Keep the long Lucid preview scrollable without a visible scrollbar. */
.project-preview.preview-lucid { scrollbar-width:none; }
.project-preview.preview-lucid::-webkit-scrollbar { display:none; }

/* Toggle motion from transitions.dev, with sun and moon theme controls. */
:root {
  --toggle-dur: 350ms;
  --toggle-travel: 14.66px;
  --toggle-ov1: 1px;
  --toggle-ov2: 0px;
  --toggle-track: 0ms;
  --toggle-ease: cubic-bezier(0.34, 1.35, 0.64, 1);
}

.t-toggle { transition: background var(--toggle-track) var(--toggle-ease); }
.t-toggle-thumb { translate: 0 0; will-change: translate; }
.t-toggle[data-on="true"] .t-toggle-thumb { translate: var(--toggle-travel) 0; }
.t-toggle.is-init[data-on="true"] .t-toggle-thumb { animation: t-toggle-on var(--toggle-dur) var(--toggle-ease) both; }
.t-toggle.is-init[data-on="false"] .t-toggle-thumb { animation: t-toggle-off var(--toggle-dur) var(--toggle-ease) both; }
@keyframes t-toggle-on {
  0% { translate: 0 0; }
  55% { translate: calc(var(--toggle-travel) + var(--toggle-ov1)) 0; }
  80% { translate: calc(var(--toggle-travel) - var(--toggle-ov2)) 0; }
  100% { translate: var(--toggle-travel) 0; }
}
@keyframes t-toggle-off {
  0% { translate: var(--toggle-travel) 0; }
  55% { translate: calc(0px - var(--toggle-ov1)) 0; }
  80% { translate: var(--toggle-ov2) 0; }
  100% { translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .t-toggle-thumb { animation: none !important; }
}

.theme-toggle.t-toggle { --toggle-travel:30px; --toggle-track:200ms; position:relative; display:flex; align-items:center; justify-content:space-around; width:66px; height:36px; padding:3px; border:1px solid #ffffff24; border-radius:999px; background:#ffffff18; }
.theme-toggle.t-toggle[data-on="true"] { background:#181818; }
.theme-toggle .t-toggle-thumb { position:absolute; left:3px; top:3px; width:28px; height:28px; border-radius:50%; background:#f5f4f1; box-shadow:0 1px 4px #0003; }
.theme-toggle svg { position:absolute; top:9px; left:9px; z-index:1; width:16px; height:16px; color:#aaa; pointer-events:none; }
.theme-toggle[data-on="false"] .theme-sun, .theme-toggle[data-on="true"] .theme-moon { color:#252524; }
.theme-toggle:focus-visible { outline:2px solid white; outline-offset:4px; }
.about-page .project-next { justify-content:flex-end; }

.theme-toggle .theme-moon { left:39px; }
.prototype-link { border:0; font-family:inherit; }
.prototype-link:disabled { cursor:default; }

.work-gallery { position:relative; padding-left:24px; padding-right:24px; }
.prototype-embed { display:block; width:100%; height:clamp(420px,65vw,760px); border:1px solid var(--line); border-radius:12px; background:var(--surface); }

.preview-pregames .preview-gallery { padding:0 30px 30px; background:var(--surface); }
.pregames-prototype h3 { font-size:20px; margin:0 0 18px; }
.preview-pregames .prototype-embed { height:620px; max-height:75dvh; }

.preview-prototype-link { display:inline-flex; align-items:center; justify-content:center; padding:10px 18px; margin:24px 0 0 12px; border:1px solid var(--line); border-radius:30px; color:var(--ink); font-size:13px; background:transparent; }
.preview-prototype-link:hover { background:var(--paper); border-color:var(--muted); }
.preview-prototype-link:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }

/* Fit the homepage to the viewport, reserving space for controls and footer. */
body.experiment-home { height:100dvh; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
.experiment-home > main { flex:1; min-height:0; display:flex; flex-direction:column; }
.experiment-home .intro { flex:none; margin:0 auto; padding:clamp(100px, 10dvh, 145px) 24px 20px; }
.experiment-home .work-gallery { flex:none; margin-top:auto; padding-top:30px; padding-bottom:30px; }
.experiment-home .work-card { height:clamp(180px, 35dvh, 380px); }
.experiment-home .gallery-footer { flex:none; width:100%; margin:0 auto; }
.experiment-home .draft-footer { flex:none; padding:24px 24px clamp(24px, 7dvh, 110px); }
@media (max-height:760px) {
 .experiment-home .intro { padding-top:100px; padding-bottom:8px; }
 .experiment-home .intro-eyebrow { margin-bottom:10px; }
 .experiment-home .intro > p:last-child { margin-top:12px; }
 .experiment-home .work-gallery { padding-top:24px; padding-bottom:24px; }
 .experiment-home .draft-footer { padding:12px 24px; }
}
@media (max-height:600px) {
 .experiment-home .intro { padding-top:90px; }
 .experiment-home .intro h1 { font-size:24px; }
 .experiment-home .intro-eyebrow { margin-bottom:6px; }
 .experiment-home .intro > p:last-child { font-size:12px; margin-top:8px; }
 .experiment-home .work-card { height:160px; }
 .experiment-home .work-gallery { padding-top:18px; padding-bottom:18px; }
 .experiment-home .draft-footer { padding:8px 24px; }
}

.experiment-home .intro { transform:translateY(clamp(8px, 2dvh, 28px)); }