/* A separate motion study. Original colours, real work, three short chapters. */
.motion-study { --motion-blue:#a0b6ff; }
html:has(.motion-study) { scroll-padding-top:72px; }
.motion-study .nav { background:color-mix(in srgb,var(--bg) 84%,transparent); }
.motion-study .nav__links { gap:32px; }
.motion-study .hero.motion-hero { height:min(860px,100svh); min-height:620px; padding:0; overflow:hidden; }
.motion-hero .hero__bg { opacity:.68; }
.motion-hero__layout { height:100%; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr auto; align-items:center; position:relative; padding-top:102px; padding-bottom:34px; }
.motion-hero .hero__content { text-align:left; position:relative; z-index:2; }
.motion-kicker { font-size:12px; line-height:1.5; letter-spacing:.12em; text-transform:uppercase; margin:0 0 28px; font-weight:500; }
.motion-hero .motion-kicker span { display:block; color:var(--text-muted); margin-top:4px; letter-spacing:.08em; }
.motion-hero h1 { font-size:clamp(60px,7.6vw,112px); line-height:.98; letter-spacing:-.075em; font-weight:550; margin:0; position:relative; }
.motion-study em { font-family:Georgia,'Times New Roman',serif; font-weight:400; letter-spacing:-.065em; color:var(--motion-blue); }
.motion-hero__intro { font-size:17px; line-height:1.5; color:var(--text-secondary); margin:26px 0; }
.motion-link { display:inline-flex; align-items:center; gap:24px; color:inherit; background:none; border:0; border-bottom:1px solid currentColor; padding:10px 0; font:inherit; font-size:14px; text-decoration:none; cursor:pointer; width:fit-content; }
.motion-link span { font-size:22px; transition:transform .2s ease; }
.motion-link:hover span { transform:translate(3px,-3px); }
.motion-objects { width:100%; height:450px; position:relative; perspective:1100px; transform:translateY(calc(var(--hero-progress,0)*-35px)); }
.motion-object { position:absolute; overflow:hidden; box-shadow:0 28px 70px #0006; border:1px solid #ffffff30; background:#11151b; will-change:transform; }
.motion-object img { width:100%; height:100%; object-fit:cover; display:block; }
.motion-object--world { width:76%; aspect-ratio:1.78; top:30px; left:0; border-radius:10px; transform:rotateY(-16deg) rotateZ(-9deg) translateY(calc(var(--hero-progress,0)*-25px)); }
.motion-object--space { width:62%; aspect-ratio:1.78; bottom:35px; left:3%; border-radius:10px; transform:rotateY(-12deg) rotateZ(8deg) translateY(calc(var(--hero-progress,0)*40px)); }
.motion-object--phone { width:30%; aspect-ratio:600/1300; right:2%; top:42px; border-radius:24px; padding:6px; transform:rotateY(-12deg) rotateZ(9deg); background:#151921; }
.motion-object--phone img { border-radius:18px; }
.motion-object__caption { position:absolute; bottom:0; right:0; font-size:12px; color:var(--text-muted); letter-spacing:.03em; }
.motion-hero__foot { grid-column:1/-1; display:flex; justify-content:space-between; align-items:end; border-top:1px solid var(--border-light); padding-top:18px; margin-top:20px; position:relative; z-index:2; }
.motion-hero__foot p { margin:0; font-size:12px; color:var(--text-muted); }
.motion-hero__foot strong { font-size:22px; letter-spacing:-.06em; color:var(--text); padding-right:8px; }
.motion-hero__foot a { font-size:12px; color:var(--text-secondary); }
.motion-hero__foot.motion-credentials { display:grid; grid-template-columns:1fr 1fr 1.25fr; gap:30px; align-items:start; padding-top:20px; }
.motion-credential { display:flex; flex-direction:column; gap:5px; min-width:0; text-decoration:none; }
.motion-credential+.motion-credential { border-left:1px solid var(--border-light); padding-left:30px; }
.motion-hero__foot .motion-credential strong { font-size:32px; line-height:1.1; font-weight:550; letter-spacing:-.05em; padding:0; }
.motion-credential strong b { font-size:19px; color:var(--motion-blue); font-weight:400; vertical-align:middle; }
.motion-credential>span { font-size:13px; line-height:1.4; color:var(--text); }
.motion-credential>small { font-size:12px; line-height:1.5; color:var(--text-muted); }
.motion-credential[href]:hover strong { color:var(--motion-blue); }
.motion-hero .hero__motion-toggle { right:var(--gutter); bottom:4px; padding:2px 0; border:0; }

.motion-work { color:#f3f5fc; background:#0d1019; position:relative; scroll-margin-top:0; }
.motion-work__sticky { position:relative; overflow:hidden; background:#0d1019; }
.motion-work__head,.motion-work__foot { padding:16px max(24px,5vw); display:flex; justify-content:space-between; align-items:center; gap:20px; position:relative; z-index:5; }
.motion-work__head { border-bottom:1px solid #ffffff18; }
.motion-work__head h2 { font-size:13px; font-weight:500; letter-spacing:.02em; white-space:nowrap; margin:0; }
.motion-work__head h2 span { color:#8a91a5; margin-left:14px; }
.motion-chapters { display:flex; gap:4px; }
.motion-chapters button { font-family:inherit; font-size:12px; color:#a7afc2; background:none; border:1px solid transparent; border-radius:24px; min-height:40px; padding:8px 16px; cursor:pointer; }
.motion-chapters button[aria-pressed=true] { color:#fff; border-color:#ffffff48; background:#ffffff08; }
.motion-reel__track { display:flex; flex-direction:column; }
.motion-scene { position:relative; min-height:540px; isolation:isolate; overflow:hidden; }
.motion-scene__copy { position:relative; z-index:3; width:45%; padding:46px 0 40px max(24px,5vw); }
.motion-scene .motion-kicker { color:#aab4ce; margin-bottom:24px; }
.motion-scene h3 { font-size:clamp(45px,5.5vw,78px); line-height:1; font-weight:550; letter-spacing:-.065em; margin:0 0 22px; }
.motion-scene p:not(.motion-kicker) { font-size:15px; color:#bac3d6; line-height:1.6; margin-bottom:22px; }
.motion-proof { display:grid; grid-template-columns:auto 1fr; gap:2px 12px; align-items:baseline; margin-bottom:18px; }
.motion-proof strong { font-size:25px; font-weight:550; letter-spacing:-.05em; }
.motion-proof span { font-size:12px; color:#aab4ce; }
.motion-app-art { position:absolute; width:52%; height:100%; right:2%; top:0; perspective:1400px; }
.motion-orbit { position:absolute; width:75%; aspect-ratio:1; border:1px solid #7b93ec38; border-radius:50%; left:5%; top:8%; box-shadow:0 0 100px #4f66c51c,inset 0 0 100px #4f66c512; }
.motion-phone { position:absolute; height:84%; aspect-ratio:600/1300; padding:7px; background:#111828; border:1px solid #5d6d92; border-radius:30px; box-shadow:0 30px 70px #0007; }
.motion-phone img { width:100%; height:100%; object-fit:cover; border-radius:23px; display:block; }
.motion-phone--back { left:9%; top:13%; transform:rotateY(14deg) rotateZ(-12deg) scale(.85); }
.motion-phone--front { right:9%; top:5%; transform:rotateY(-10deg) rotateZ(8deg); }
.motion-scene--apps { background:radial-gradient(ellipse at 75% 60%,#1d2d60 0,transparent 58%),#10141f; }
.motion-scene--worlds { background:#101920; }
.motion-world-art { position:absolute; inset:0; z-index:0; }
.motion-world-art img { width:100%; height:100%; object-fit:cover; object-position:65% 48%; }
.motion-world-art::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#08101cf5 0,#08101ce0 24%,#08101c70 48%,transparent 75%),linear-gradient(0deg,#08101c70,transparent 45%); }
.motion-scene--worlds .motion-scene__copy { width:49%; }
.motion-scene--worlds em { color:#c0cdff; }
.motion-scene__note { display:block; font-size:12px; line-height:1.5; color:#aab4ce; margin-top:20px; }
.motion-coordinates { position:absolute; bottom:32px; right:5vw; color:#fff; font-family:monospace; font-size:12px; letter-spacing:.15em; }
.motion-coordinates span { margin-left:70px; }
.motion-scene--tools { background:radial-gradient(ellipse at 80% 60%,#35324e 0,transparent 60%),#121218; }
.motion-scene--tools h3 { font-size:clamp(40px,5vw,70px); }
.motion-tool-art { position:absolute; width:63%; right:-7%; top:14%; transform:perspective(1000px) rotateY(-13deg) rotateZ(2deg); }
.motion-tool-art img { width:100%; display:block; border:1px solid #ffffff38; box-shadow:0 28px 80px #0008; border-radius:12px; }
.motion-tool-art span { display:block; margin-top:16px; font-size:12px; letter-spacing:.12em; color:#aab4ce; }
.motion-work__foot { font-size:12px; color:#b8c0d3; min-height:58px; border-top:1px solid #ffffff18; }
.motion-work__foot a { color:inherit; }
.motion-work__count { font-family:monospace; }
.motion-work__progress { height:2px; background:linear-gradient(90deg,#7ba6ff,#b7a1ff); transform-origin:left; transform:scaleX(var(--reel-progress,.333)); }
.motion-work.is-pinned { height:calc(100svh + 120svh); }
.is-pinned .motion-work__sticky { position:sticky; top:72px; height:calc(100svh - 72px); display:grid; grid-template-rows:73px 1fr 58px 2px; }
.is-pinned .motion-reel { min-height:0; overflow:hidden; }
.is-pinned .motion-reel__track { flex-direction:row; height:100%; transform:translate3d(var(--reel-x,0px),0,0); will-change:transform; }
.is-pinned .motion-scene { flex:0 0 100%; min-width:0; min-height:0; height:100%; }
.is-pinned .motion-scene__copy { padding-top:clamp(24px,5vh,52px); padding-bottom:20px; }
.is-pinned .motion-scene h3 { font-size:clamp(42px,5.1vw,76px); }
.is-pinned .motion-proof { margin-bottom:8px; }
.motion-study [inert] { pointer-events:none; }
.motion-collection { padding-block:0; }
.motion-library>summary { display:flex; align-items:center; justify-content:space-between; gap:20px; cursor:pointer; list-style:none; min-height:142px; padding-block:24px; }
.motion-library>summary::-webkit-details-marker { display:none; }
.motion-library .motion-kicker { display:block; margin-bottom:8px; color:var(--text-muted); font-size:12px; }
.motion-library summary strong { font-weight:500; font-size:36px; letter-spacing:-.04em; }
.motion-library__count { font-size:13px; display:flex; gap:24px; align-items:center; }
.motion-library__count span { font-size:26px; transition:transform .2s; }
.motion-library[open] .motion-library__count span { transform:rotate(45deg); }
.motion-library__intro { margin-bottom:24px; font-size:14px; color:var(--text-muted); }
.motion-library[open] { padding-bottom:48px; }
.motion-portal { position:relative; min-height:400px; background:#0b0d11; color:#f5f6fa; overflow:hidden; display:flex; align-items:center; }
.motion-portal__art { position:absolute; inset:0 0 0 25%; }
.motion-portal__art img { width:100%; height:100%; object-fit:cover; object-position:center 45%; }
.motion-portal__art::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#0b0d11,transparent 80%); }
.motion-portal__copy { padding:48px max(24px,5vw); position:relative; z-index:1; }
.motion-portal h2 { font-size:clamp(42px,5.5vw,80px); line-height:1.02; letter-spacing:-.06em; margin:0 0 24px; }
.motion-portal .motion-kicker { margin-bottom:20px; }
.motion-portal__label { position:absolute; bottom:30px; right:5vw; font-size:12px; letter-spacing:.15em; }
.motion-preview-note { font-size:12px; color:var(--text-muted); text-align:center; margin:20px 0 0; }
.motion-study :focus-visible { outline:2px solid #9eb6ff; outline-offset:5px; }
.motion-study .about { border-top:0; }

@media(max-width:1000px) {
 .motion-hero__layout { grid-template-columns:1.1fr 1fr; }
 .motion-objects { height:360px; }
 .motion-object--phone { width:36%; right:0; top:40px; border-radius:18px; }
 .motion-hero h1 { font-size:8.2vw; }
 .motion-scene__copy { width:48%; }
 .is-pinned .motion-scene h3 { font-size:5.5vw; }
 .motion-tool-art { right:-18%; width:70%; top:25%; }
 .motion-chapters button { padding-inline:10px; }
}
@media(max-width:760px),(max-height:699px) {
 .motion-hero__layout { padding-top:110px; }
 .motion-work__head { padding-inline:20px; flex-wrap:wrap; gap:10px; }
 .motion-work__head h2 { font-size:12px; }
 .motion-work__head h2 span { display:none; }
 .motion-work__foot { padding-inline:20px; }
 .motion-reel { overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; }
 .motion-reel__track { flex-direction:row; }
 .motion-scene { flex:0 0 100%; min-width:0; min-height:570px; scroll-snap-align:start; scroll-snap-stop:always; }
}
@media(max-width:600px) {
 .motion-scene__copy,.motion-scene--worlds .motion-scene__copy { width:100%; padding:26px 22px; }
 .motion-scene h3,.motion-scene--tools h3 { font-size:44px; }
 .motion-scene .motion-kicker { margin-bottom:14px; font-size:12px; }
 .motion-scene p:not(.motion-kicker) { font-size:13px; margin-bottom:12px; }
 .motion-proof { display:none; }
 .motion-app-art { height:245px; width:80%; right:0; top:auto; bottom:0; }
 .motion-phone { height:100%; border-radius:18px; padding:4px; }
 .motion-phone img { border-radius:14px; }
 .motion-phone--back { left:18%; top:4%; }
 .motion-phone--front { right:15%; top:0; }
 .motion-orbit { width:65%; top:-15%; left:23%; }
 .motion-world-art::after { background:linear-gradient(180deg,#08101ceb 0,#08101c90 43%,transparent 75%); }
 .motion-world-art img { object-position:65% center; }
 .motion-coordinates { right:22px; bottom:22px; }
 .motion-tool-art { width:90%; right:-2%; top:auto; bottom:32px; }
 .motion-scene--tools .motion-scene__note { margin-top:10px; }
 .motion-scroll-hint { font-size:12px; }
 .motion-work__count { display:none; }
 .motion-portal { min-height:370px; }
 .motion-portal__art { inset:0; opacity:.6; }
 .motion-portal__art::after { background:linear-gradient(90deg,#0b0d11d9,#0b0d1133); }
}
@media(max-width:600px) {
 .motion-study .hero.motion-hero { height:auto; min-height:0; }
 .motion-hero__layout { display:flex; flex-direction:column; align-items:stretch; padding-top:110px; padding-bottom:38px; }
 .motion-hero .motion-kicker { margin-bottom:20px; font-size:12px; }
 .motion-hero .motion-kicker span { display:inline; margin-left:8px; letter-spacing:0; }
 .motion-hero h1 { font-size:clamp(50px,12vw,74px); }
 .motion-hero__intro { font-size:14px; margin:18px 0 8px; }
 .motion-objects { height:250px; width:95%; margin-top:22px; }
 .motion-object--world { width:68%; top:10px; left:0; }
 .motion-object--space { width:55%; bottom:15px; left:5%; }
 .motion-object--phone { width:26%; top:15px; right:7%; border-radius:16px; padding:4px; }
 .motion-object--phone img { border-radius:12px; }
 .motion-object__caption { display:none; }
 .motion-hero__foot { margin-top:8px; padding-top:14px; }
 .motion-hero__foot strong { font-size:20px; }
 .motion-hero__foot>a { display:none; }
 .motion-hero__foot.motion-credentials { gap:13px; margin-top:16px; padding-top:18px; }
 .motion-hero__foot>.motion-credential { display:flex; }
 .motion-credential+.motion-credential { padding-left:13px; }
 .motion-hero__foot .motion-credential strong { font-size:clamp(20px,5.7vw,28px); }
 .motion-credential strong b { font-size:14px; }
 .motion-credential>span,.motion-credential>small { font-size:12px; }
 .motion-credential:nth-child(1)>small,.motion-credential:nth-child(2)>small { display:none; }
 .motion-hero .hero__motion-toggle { bottom:8px; }
 .motion-library>summary { min-height:116px; }
 .motion-library summary strong { font-size:27px; }
 .motion-library__count { gap:12px; font-size:12px; }
 .motion-chapters { gap:0; }
 .motion-chapters button { font-size:12px; padding:8px; }
}
@media(prefers-reduced-motion:reduce) {
 .motion-object,.motion-objects { transform:none; will-change:auto; }
 .motion-object--space { transform:translateX(10px); }
 .motion-object--phone { transform:translateY(10px); }
 .motion-link span,.motion-library__count span { transition:none; }
}
.motion-paused .motion-object,.motion-paused .motion-objects { transform:none; will-change:auto; }
.motion-paused .motion-link span { transition:none; }
/* The second half: a small collection, a portrait, a legible journey and an invitation. */
.motion-collection { padding:64px 0 52px; scroll-margin-top:72px; position:relative; }
.collection-anchor { position:absolute; top:0; left:0; width:1px; height:1px; scroll-margin-top:72px; pointer-events:none; }
.lower-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:32px; }
.lower-heading .motion-kicker { margin-bottom:12px; color:var(--text-muted); }
.lower-heading h2 { font-size:clamp(35px,4vw,58px); font-weight:500; letter-spacing:-.06em; line-height:1.07; margin:0; }
.lower-heading>p { margin:0 0 4px; font-size:13px; line-height:1.6; color:var(--text-secondary); }
.collection-bar { display:flex; align-items:center; justify-content:space-between; border-block:1px solid var(--border-light); margin-bottom:24px; gap:16px; }
.collection-filters { display:flex; gap:26px; }
.collection-filters button { border:0; background:none; color:var(--text-muted); font:inherit; font-size:14px; padding:18px 0; position:relative; cursor:pointer; }
.collection-filters button>span { margin-left:7px; font-size:12px; opacity:.65; }
.collection-filters button[aria-pressed=true] { color:var(--text); }
.collection-filters button[aria-pressed=true]::after { content:''; position:absolute; bottom:-1px; height:2px; background:var(--motion-blue); left:0; right:0; }
.collection-result { color:var(--text-muted); font-size:12px; white-space:nowrap; }
.collection-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px 18px; }
.motion-collection[data-filter=games] .collection-grid,.motion-collection[data-filter=websites] .collection-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.motion-collection[data-filter=tools] .collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.collection-item[hidden] { display:none; }
.collection-item { min-width:0; }
.collection-item__open { display:block; width:100%; background:none; border:0; color:var(--text); padding:0; font:inherit; text-align:left; cursor:pointer; }
.collection-item__image { display:block; height:225px; overflow:hidden; background:radial-gradient(ellipse at 50% 100%,#394465,#1a1c27); position:relative; border-radius:3px; }
.collection-item__image img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.collection-item--phone .collection-item__image img { object-fit:contain; width:100%; height:calc(100% - 18px); margin-top:18px; filter:drop-shadow(0 8px 18px #0007); }
.collection-item--phone:nth-child(2) .collection-item__image { background:radial-gradient(ellipse at 50% 100%,#333a66,#181b2d); }
.collection-item--phone:nth-child(3) .collection-item__image { background:radial-gradient(ellipse at 50% 100%,#493d65,#211a2d); }
.collection-item__open:hover .collection-item__image img { transform:scale(1.035); }
.collection-item__arrow { position:absolute; right:12px; bottom:12px; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; color:#fff; background:#090c16ba; font-size:20px; }
.collection-item__caption { display:flex; align-items:start; justify-content:space-between; gap:8px; padding-top:13px; }
.collection-item__caption strong { font-size:16px; font-weight:500; letter-spacing:-.02em; display:block; line-height:1.4; }
.collection-item__caption>span>span { display:block; font-size:12px; color:var(--text-muted); margin-top:3px; line-height:1.5; }
.collection-item__number { color:var(--text-muted); font-size:12px; padding-top:3px; }
.collection-placeholder { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#c3ccf8; }
.collection-placeholder>span:first-child { font-family:Georgia,serif; font-size:100px; font-style:italic; letter-spacing:-.1em; line-height:1; padding-right:12px; }
.collection-placeholder>span:last-child { font-size:12px; line-height:1.5; text-align:center; margin-top:18px; }
.motion-portal { min-height:480px; }
.motion-portal__art { inset:0; }
.motion-portal__art img { object-position:65% 50%; }
.motion-portal__art::after { background:linear-gradient(90deg,#070a12ec 0,#070a12c9 25%,#070a1240 55%,#070a1200 100%); }
.motion-portal__copy { padding-block:48px; }
.motion-about { padding:72px 0 56px; border-top:1px solid var(--border-light); }
.motion-about__grid { display:grid; grid-template-columns:40% 1fr; gap:9%; align-items:center; }
.motion-portrait { position:relative; margin:0; height:380px; background:#151a29; overflow:hidden; border-radius:2px; }
.motion-portrait>img { width:100%; height:100%; object-fit:cover; object-position:center 35%; display:block; }
.motion-portrait::after { content:''; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,#050913c4); pointer-events:none; }
.motion-portrait figcaption { position:absolute; bottom:22px; left:22px; color:white; font-size:16px; z-index:2; }
.motion-portrait figcaption span { display:block; font-size:12px; opacity:.65; margin-top:4px; }
.motion-portrait__mark { position:absolute; top:16px; right:20px; color:#fff8; font-size:22px; font-weight:600; letter-spacing:-.09em; }
.motion-about .motion-kicker { color:var(--text-muted); margin-bottom:22px; }
.motion-about h2 { font-size:clamp(48px,5vw,74px); letter-spacing:-.065em; line-height:1.03; font-weight:500; margin:0; }
.motion-about__intro { font-size:16px; color:var(--text-secondary); line-height:1.7; max-width:440px; margin:22px 0 18px; }
.motion-about__links { display:flex; gap:28px; }
.motion-bio { margin-top:18px; max-width:450px; }
.motion-bio summary { display:flex; justify-content:space-between; cursor:pointer; list-style:none; color:var(--text-muted); font-size:12px; padding:8px 0; }
.motion-bio p { margin-top:14px; color:var(--text-secondary); font-size:14px; line-height:1.7; }
.motion-capabilities { padding:12px 0 56px; }
.lower-heading--small { border-top:1px solid var(--border-light); padding-top:28px; margin-bottom:20px; }
.lower-heading--small h2 { font-size:30px; }
.capability-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 28px; }
.capability-row { border-bottom:1px solid var(--border-light); }
.capability-row summary { display:flex; align-items:center; gap:12px; padding:18px 0; cursor:pointer; list-style:none; }
.capability-row h3 { font:inherit; font-size:14px; margin:0; flex:1; }
.capability-row summary>span { font-size:14px; color:var(--text-muted); }
.capability-row summary>.capability-number { font-size:12px; }
.capability-row p { font-size:13px; color:var(--text-secondary); line-height:1.8; padding:0 0 18px 28px; margin:0; }
.motion-stack { font-size:12px; color:var(--text-muted); margin-top:20px; }
.motion-stack summary { cursor:pointer; list-style:none; display:flex; gap:20px; }
.motion-stack .recent-stack { border:0; padding-top:12px; margin:0; }
.motion-stack .recent-stack h3 { display:none; }
.motion-journey { padding:56px 0 0; background:color-mix(in srgb,var(--bg) 93%,#5c6dbc); border-top:1px solid var(--border-light); }
.journey-list { border-top:1px solid var(--border-light); }
.journey-row { border-bottom:1px solid var(--border-light); }
.journey-row>summary { display:grid; grid-template-columns:180px minmax(150px,1fr) minmax(200px,1.4fr) 22px; gap:20px; align-items:center; min-height:78px; padding:16px 0; cursor:pointer; list-style:none; }
.journey-date,.journey-role { color:var(--text-secondary); font-size:13px; line-height:1.5; }
.journey-company { font-size:22px; letter-spacing:-.035em; }
.journey-plus { color:var(--text-muted); font-size:20px; text-align:right; }
.journey-row--current .journey-date { color:var(--motion-blue); }
.journey-row--current .journey-date::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; margin-right:9px; vertical-align:middle; }
.journey-detail { padding:0 42px 24px 200px; max-width:1000px; font-size:14px; color:var(--text-secondary); line-height:1.75; }
.journey-detail .timeline__desc { font-size:14px; max-width:none; }
.journey-detail .timeline__highlights { font-size:13px; line-height:1.8; display:block; padding-left:20px; margin-top:14px; }
.journey-detail .timeline__highlights li { margin-bottom:12px; }
.journey-detail .experience__technologies { margin-block:12px; }
.journey-row[open] .journey-plus { transform:rotate(45deg); }
.journey-more>summary,.motion-writing summary { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:23px 0; cursor:pointer; list-style:none; font-size:14px; }
.journey-more>summary>span { color:var(--text-muted); font-size:12px; display:flex; align-items:center; gap:24px; }
.journey-more b,.motion-writing b { font-weight:400; font-size:20px; }
.journey-education .journey-row>summary { grid-template-columns:180px 1fr auto 22px; }
.journey-awards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; padding:24px 0; }
.journey-awards h3 { font-size:15px; font-weight:500; margin-bottom:10px; }
.journey-awards p { font-size:13px; color:var(--text-secondary); line-height:1.7; }
.motion-writing { background:color-mix(in srgb,var(--bg) 93%,#5c6dbc); }
.motion-writing details { border-top:1px solid var(--border-light); }
.motion-writing summary>span:last-child { font-size:12px; color:var(--text-muted); display:flex; gap:24px; align-items:center; }
.motion-writing__posts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; padding:8px 0 28px; }
.motion-writing__posts h3 { font-size:17px; font-weight:500; line-height:1.5; }
.motion-writing__posts p,.motion-writing__posts span { font-size:13px; color:var(--text-secondary); line-height:1.6; }
.motion-writing__posts span { display:block; margin-top:10px; color:var(--text-muted); font-size:12px; }
.motion-contact { padding:66px 0 38px; overflow:hidden; border-top:1px solid var(--border-light); }
.motion-contact .motion-kicker { color:var(--text-muted); margin-bottom:26px; }
.motion-contact__invitation { display:flex; justify-content:space-between; align-items:center; gap:32px; color:var(--text); text-decoration:none; }
.motion-contact h2 { font-size:clamp(42px,6.8vw,98px); line-height:1.08; letter-spacing:-.065em; font-weight:500; margin:0; }
.motion-contact__arrow { display:grid; place-items:center; flex:0 0 132px; height:132px; border:1px solid #a0b6ff50; border-radius:50%; font-size:72px; color:var(--motion-blue); background:radial-gradient(ellipse at 50% 80%,#7e78e529,transparent); transition:transform .3s; }
.motion-contact__invitation:hover .motion-contact__arrow { transform:rotate(45deg); }
.motion-contact__bottom { display:flex; justify-content:space-between; gap:24px; align-items:center; margin-top:46px; padding-top:24px; border-top:1px solid var(--border-light); }
.motion-contact__email { font-size:17px; color:var(--text); }
.motion-contact__bottom>div { display:flex; gap:24px; }
.motion-contact__bottom>div a { font-size:13px; color:var(--text-secondary); }
.motion-compose { margin-top:22px; }
.motion-compose summary { cursor:pointer; display:flex; gap:24px; color:var(--text-muted); font-size:12px; list-style:none; }
.motion-compose .contact__form { margin-top:24px; max-width:620px; }
.motion-study details>summary::-webkit-details-marker { display:none; }
.motion-study .footer { padding-top:24px; }
[data-theme=light] .motion-study { --motion-blue:#4f5fae; }
[data-theme=light] .motion-study .motion-work,[data-theme=light] .motion-study .motion-portal { --motion-blue:#a0b6ff; }
.motion-paused .collection-item__image img,.motion-paused .motion-contact__arrow { transition:none; }
@media(max-width:900px) {
 .motion-about__grid { gap:6%; grid-template-columns:40% 1fr; }
 .journey-row>summary,.journey-education .journey-row>summary { grid-template-columns:140px 1fr 1.2fr 20px; gap:16px; }
 .journey-company { font-size:19px; }
 .journey-detail { padding-left:156px; }
 .collection-item__image { height:190px; }
 .motion-contact__arrow { flex-basis:90px; height:90px; font-size:52px; }
}
@media(max-width:600px) {
 .motion-collection { padding-block:38px; }
 .lower-heading { align-items:start; gap:16px; margin-bottom:24px; }
 .lower-heading h2 { font-size:35px; }
 .lower-heading>p { display:none; }
 .collection-bar { gap:8px; margin-bottom:18px; }
 .collection-filters { flex:1; justify-content:space-between; gap:10px; }
 .collection-filters button { font-size:13px; padding-block:16px; }
 .collection-filters button>span { font-size:12px; margin-left:4px; }
 .collection-result { display:none; }
 .collection-grid,.motion-collection[data-filter=games] .collection-grid,.motion-collection[data-filter=websites] .collection-grid,.motion-collection[data-filter=tools] .collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 12px; }
 .collection-item__image { height:185px; }
 .collection-item--game .collection-item__image,.collection-item--browser .collection-item__image,.collection-item--window .collection-item__image { height:130px; }
 .collection-item__caption strong { font-size:15px; }
 .collection-item__caption>span>span { font-size:12px; }
 .collection-item__number { display:none; }
 .motion-portal { min-height:410px; }
 .motion-portal__art { opacity:1; }
 .motion-portal__art img { object-position:70% center; }
 .motion-portal__art::after { background:linear-gradient(90deg,#070a12db,#070a1260); }
 .motion-about { padding:40px 0 32px; }
 .motion-about__grid { display:block; }
 .motion-portrait { height:300px; margin-bottom:30px; }
 .motion-portrait>img { object-position:center 32%; }
 .motion-about h2 { font-size:48px; }
 .motion-about .motion-kicker { margin-bottom:16px; }
 .motion-about__intro { font-size:15px; }
 .motion-capabilities { padding-bottom:36px; }
 .lower-heading--small h2 { font-size:28px; }
 .capability-grid { grid-template-columns:1fr 1fr; gap:0 20px; }
 .capability-row summary { gap:8px; }
 .capability-row h3 { font-size:13px; }
 .capability-number { display:none; }
 .capability-row p { padding-left:0; }
 .motion-journey { padding-top:38px; }
 .motion-journey .lower-heading { flex-wrap:wrap; }
 .motion-journey .lower-heading>.motion-link { font-size:12px; padding:4px 0; }
 .journey-row>summary,.journey-education .journey-row>summary { grid-template-columns:1fr 24px; gap:4px 16px; padding-block:17px; }
 .journey-date { grid-column:1; font-size:12px; }
 .journey-company { grid-column:1; font-size:21px; }
 .journey-role { grid-column:1; font-size:12px; }
 .journey-plus { grid-column:2; grid-row:1/4; }
 .journey-detail { padding:0 0 22px; }
 .journey-more>summary>span { font-size:0; }
 .journey-more>summary>span b { font-size:20px; }
 .journey-awards,.motion-writing__posts { grid-template-columns:1fr; gap:22px; }
 .motion-writing summary { align-items:start; font-size:14px; gap:18px; }
 .motion-writing summary>span:last-child { max-width:140px; text-align:right; gap:12px; }
 .motion-contact { padding:40px 0 28px; }
 .motion-contact h2 { font-size:clamp(34px,8.4vw,50px); }
 .motion-contact__invitation { gap:12px; }
 .motion-contact__arrow { flex-basis:48px; height:48px; font-size:30px; }
 .motion-contact__bottom { align-items:start; flex-direction:column; gap:16px; margin-top:28px; padding-top:20px; }
 .motion-contact__email { font-size:15px; }
 .motion-study .footer__container { display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center; text-align:left; padding-bottom:18px; }
 .motion-study .footer__left { display:flex; flex-direction:column; align-items:start; gap:4px; }
 .motion-study .footer__credit { margin:0; font-size:12px; }
 .motion-study .footer__links { grid-column:1/-1; grid-row:2; display:flex; flex-direction:row; justify-content:flex-start; gap:24px; padding:0; margin:0; }
 .motion-study .footer__links a { font-size:12px; display:inline-block; padding:8px 0; }
 .motion-study .footer__socials { margin:0; gap:8px; }
 .motion-study .footer__bottom { padding:18px 20px; }
 .motion-study .motion-preview-note { margin:8px 20px 0; padding-bottom:4px; font-size:12px; }
}
@media(prefers-reduced-motion:reduce) {
 .collection-item__image img,.motion-contact__arrow { transition:none; }
 .collection-item__open:hover .collection-item__image img,.motion-contact__invitation:hover .motion-contact__arrow { transform:none; }
}
@media print {
 .motion-work__head,.motion-work__foot,.motion-objects,.motion-portal { display:none; }
 .motion-work,.motion-work__sticky { height:auto!important; position:static!important; }
 .motion-reel__track { transform:none!important; display:block!important; }
 .motion-scene { min-height:400px!important; break-inside:avoid; }
}