@font-face{font-family:Franklin Book;src:url(assets/fonts/franklin-book.otf) format("opentype");font-weight:400;font-display:swap}@font-face{font-family:Franklin Demi;src:url(assets/fonts/franklin-demi.otf) format("opentype");font-weight:600;font-display:swap}
:root{color-scheme:light;--background:#f9f9f8;--text:#080808;--ease:cubic-bezier(.22,.8,.25,1)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--background)}body{color:var(--text);font:22px "Franklin Book",Arial,Helvetica,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #111;outline-offset:8px}.navigation{position:absolute;z-index:10;top:50%;left:2.0833%;right:2.0833%;display:grid;grid-template-columns:1fr 1fr;align-items:center;transform:translateY(-50%);transition:top .75s var(--ease),transform .75s var(--ease)}.name{font-family:"Franklin Demi",Arial,sans-serif;font-weight:600;text-align:left;letter-spacing:-.4px;width:fit-content}nav{display:grid;grid-template-columns:repeat(4,1fr);align-items:center}nav button{text-align:left;width:fit-content;letter-spacing:-.3px}nav button:hover,nav button[aria-current="page"]{text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}body:not([data-view="home"]) .navigation{top:36px;transform:translateY(0)}[hidden]{display:none!important}.work{height:100svh;min-height:550px;position:relative}.projects{position:absolute;left:2.0833%;right:2.0833%;top:50%;transform:translateY(-50%);height:min(64svh,620px);display:flex;align-items:center;gap:10px;animation:appear .55s var(--ease) both}.project{display:block;flex:1;min-width:0;height:7px;position:relative;overflow:hidden;background:var(--colour);transition:flex .8s var(--ease),height .8s var(--ease);text-align:left;isolation:isolate}.project::before{content:'';position:absolute;inset:0;background:var(--colour);z-index:2;transform-origin:bottom;transition:transform .75s var(--ease);pointer-events:none}.colour-bar{position:absolute;bottom:0;left:0;right:0;height:7px;background:var(--colour);z-index:4}.project img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transform:scale(1.06);transition:opacity .6s ease,transform 1.1s var(--ease);object-position:center}.project img.detail-crop{object-position:60% center;transform:scale(1.4)}.projects.has-active .project{flex:.6}.projects .project.active{flex:5;height:100%}.project.active::before{transform:scaleY(0)}.project.active img{opacity:1;transform:scale(1)}.project.active img.detail-crop{transform:scale(1.35)}.caption{position:absolute;bottom:7px;left:0;right:0;padding:35px 20px 18px;background:linear-gradient(transparent,rgba(0,0,0,.62));color:white;font-size:16px;opacity:0;transform:translateY(5px);transition:opacity .3s ease .3s,transform .5s ease .2s;z-index:3;display:flex;justify-content:space-between;gap:15px}.caption span{font-size:14px}.project.active .caption{opacity:1;transform:translateY(0)}.close-work{position:absolute;bottom:32px;left:2.0833%;font-size:14px}.text-view{position:absolute;left:51%;right:5%;top:50%;transform:translateY(-50%);animation:appear .5s var(--ease)}.text-view h1{font-size:26px;letter-spacing:-.3px;margin:0 0 28px}.text-view p{font-size:22px;line-height:1.5;margin:0 0 20px}.secondary{font-size:16px!important;color:#555}@keyframes appear{from{opacity:0}to{opacity:1}}@media(max-width:750px){body{font-size:19px}.navigation{left:6%;right:6%;grid-template-columns:1fr;gap:34px}.name{letter-spacing:-.6px}nav{gap:14px}nav button{font-size:18px;letter-spacing:-.4px}body:not([data-view="home"]) .navigation{top:28px;gap:24px}.projects{left:6%;right:6%;gap:5px;height:52svh;top:53%}.project{height:5px}.colour-bar{height:5px}.projects.has-active .project{flex:.15}.projects .project.active{flex:6}.caption{font-size:14px;padding:35px 12px 15px;bottom:5px;flex-direction:column;gap:5px}.caption span{font-size:12px}.close-work{left:6%;bottom:24px}.text-view{left:6%;right:6%;top:53%}.text-view p{font-size:20px}.work{min-height:480px}}@media(prefers-reduced-motion:reduce){*,*::before{transition:none!important;animation:none!important}}
/* Shared navigation metrics on every view. */
.navigation{font-size:22px;line-height:1.15}.navigation .name,.navigation nav button,.navigation nav a{font-size:inherit;line-height:inherit;margin:0;padding:0}.navigation nav>*{letter-spacing:-.3px}.project{transition:flex .65s cubic-bezier(.2,.65,.3,1),height .65s cubic-bezier(.2,.65,.3,1)}.project img{transition:opacity .45s ease .06s,transform .8s cubic-bezier(.2,.65,.3,1)}.project.logo-preview img{object-fit:contain;padding:35px;background:#fafafa}.colour-title{position:relative;display:inline-block}.colour-title::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;color:transparent;opacity:0;background:linear-gradient(90deg,#080808 0%,#080808 25%,#00bde8 34%,#2450ff 41%,#8538ff 48%,#b62cff 55%,#ff24ad 62%,#00cfa5 69%,#080808 78%,#080808 100%);background-size:400% 100%;background-clip:text;-webkit-background-clip:text}.colour-title.colour-flash::after{animation:title-sweep 1s ease-in-out 1}@keyframes title-sweep{0%{opacity:1;background-position:100% 0}85%{opacity:1;background-position:0% 0}100%{opacity:0;background-position:0% 0}}@media(max-width:750px){.navigation{font-size:19px}.navigation nav{font-size:18px}}

.halftone-trail{position:fixed;inset:0;z-index:0;pointer-events:none;contain:strict}body:not([data-view="home"]):not([data-view="about"]) .halftone-trail{visibility:hidden}.view{z-index:1}@media(prefers-reduced-motion:reduce){.halftone-trail{display:none}}

/* One shared reading size across home and subpages. */
:root{--type-page:1.375rem;--type-navigation:1.375rem;--type-label:.875rem}.navigation{font-size:var(--type-navigation)}.text-view h1,.text-view p{font-size:var(--type-page);line-height:1.45}.text-view h1{font-family:"Franklin Demi",Arial,sans-serif;font-weight:600;letter-spacing:-.3px}.text-view .secondary{font-size:1rem!important}@media(max-width:750px){:root{--type-page:1.1875rem;--type-navigation:1.1875rem}.navigation nav{font-size:1.125rem}}

/* About uses the quieter text scale requested for this page. */
#about h1,#about p{font-size:1.125rem;line-height:1.45}#about .secondary{font-size:.875rem!important}@media(max-width:750px){#about h1,#about p{font-size:1.0625rem}}
/* Shared desktop navigation follows the ten-column portfolio grid. */
@media(min-width:751px){
  .navigation{left:1.901042%;right:1.901042%;grid-template-columns:repeat(10,minmax(0,1fr));column-gap:1.510417vw}
  .navigation>.name{grid-column:1 / span 4}
  .navigation>nav{grid-column:5 / -1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:1.510417vw}
  .navigation>nav>:nth-child(1){grid-column:1}
  .navigation>nav>:nth-child(2){grid-column:2}
  .navigation>nav>:nth-child(3){grid-column:3}
  .navigation>nav>:nth-child(4){grid-column:5 / span 2}
}

@media(min-width:751px){.navigation>nav{min-width:0}.navigation>nav>*{justify-self:start;text-align:left}}

/* Stable preview shapes, randomized once each time Work opens. */
.projects .project{flex:var(--rest-weight,1) 1 0;transition:flex-grow .65s var(--ease),flex-basis .65s var(--ease),height .65s var(--ease)}.projects.has-active .project{flex:var(--rest-weight,1) 1 0}.projects .project.active{flex:0 0 var(--preview-width);height:var(--preview-height);max-width:none}.project.active img{object-fit:cover}.project.logo-preview.active img{object-fit:contain}@media(prefers-reduced-motion:reduce){.projects .project{transition:none}}

.preview-info{position:absolute;z-index:5;pointer-events:none;display:flex;flex-direction:column;gap:2px;color:#080808;text-align:left;animation:appear .25s ease both}.preview-info-title{font-family:"Franklin Book",Arial,sans-serif;font-size:18px;line-height:1.2}.preview-info-disciplines{font-size:15px;line-height:1.35}@media(max-width:750px){.preview-info-title{font-size:16px}.preview-info-disciplines{font-size:14px}}

/* The same ten-column guides run through every portfolio view. */
body{position:relative;min-height:100svh}.page-grid{position:absolute;inset:0 1.901042%;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));column-gap:1.510417vw;pointer-events:none;z-index:0}.page-grid>span{box-shadow:inset 1px 0 #eee,inset -1px 0 #eee}@media(max-width:750px){.page-grid{left:6%;right:6%;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}.page-grid>span:nth-child(n+3){display:none}}

/* Work shares the exact ten-column tracks of the page guides. */
.projects{left:1.901042%;right:1.901042%;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));column-gap:1.510417vw;row-gap:0}.projects .project,.projects.has-active .project,.projects .project.active{grid-column:span var(--column-span,1);width:100%;min-width:0;max-width:none;transition:height .65s var(--ease)}.projects .project.active{height:var(--preview-height)}.close-work{left:1.901042%}@media(max-width:750px){.projects{left:6%;right:6%;column-gap:6px}.close-work{left:6%}}

/* Twelve shared columns: six equal resting bars, smoothly eased span widths. */
.page-grid{grid-template-columns:repeat(12,minmax(0,1fr))}.projects{--work-gap:1.510417vw;display:flex;gap:var(--work-gap)}.projects .project,.projects.has-active .project,.projects .project.active{flex:0 0 var(--slot-width,calc(16.666667% - .833333 * var(--work-gap)));width:auto;transition:flex-basis .8s cubic-bezier(.22,.8,.25,1),height .8s cubic-bezier(.22,.8,.25,1)}
@media(min-width:751px){.navigation{grid-template-columns:repeat(12,minmax(0,1fr))}.navigation>.name{grid-column:1 / span 6}.navigation>nav{grid-column:7 / -1}}
@media(max-width:750px){.page-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.projects{--work-gap:6px}}@media(prefers-reduced-motion:reduce){.projects .project{transition:none}}

/* Free-flowing experiments share the twelve-column page guides. */
.fun-view{position:relative;margin:0 1.901042%;padding:160px 0 90px;animation:appear .55s var(--ease) both}
.fun-intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.510417vw;margin-bottom:70px}
.fun-intro h1{grid-column:1 / span 3;font:18px "Franklin Demi",Arial,sans-serif;margin:0}
.fun-intro p{grid-column:7 / span 4;font-size:18px;line-height:1.45;margin:0}
.fun-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.510417vw;row-gap:18px;grid-auto-rows:clamp(32px,4vw,62px);align-items:stretch}
.fun-card{min-width:0;margin:0;display:flex;flex-direction:column;gap:10px}
.fun-media{position:relative;flex:1;min-height:0;overflow:hidden;background:#f4f4f4}
.fun-media img,.fun-media video{display:block;width:100%;height:100%;object-fit:cover}
.fun-card figcaption{font-size:14px;line-height:1.3}
.fun-text h2{font-family:"Franklin Demi",Arial,sans-serif;font-size:18px;font-weight:600;line-height:1.35;margin:0 0 10px}
.fun-text p{font-size:18px;line-height:1.45;margin:0}
.fun-video-placeholder{position:absolute;bottom:14px;left:14px;background:white;color:#080808;padding:6px 9px;font-size:14px}
@media(max-width:750px){.fun-view{margin:0 6%;padding-top:150px}.fun-intro{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:40px}.fun-intro h1{grid-column:1}.fun-intro p{grid-column:2;font-size:16px}.fun-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 12px;grid-auto-rows:auto}.fun-grid .fun-card{grid-column:1 / -1!important;grid-row:auto!important}.fun-media{flex:none;aspect-ratio:4/3}.fun-text{max-width:28ch}.fun-text h2,.fun-text p{font-size:17px}}

/* Media-led Fun gallery with captions revealed over the image. */
.fun-view{padding-top:132px}.fun-intro{margin-bottom:38px}.fun-grid{row-gap:1.510417vw;grid-auto-rows:clamp(36px,4.6vw,72px)}
.fun-card{gap:0}

.fun-card figcaption{position:absolute;left:0;right:0;bottom:0;padding:60px 20px 20px;background:linear-gradient(transparent,rgba(0,0,0,.65));color:#fff;font-size:18px;line-height:1.35;opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .45s var(--ease);pointer-events:none}
.fun-card:hover figcaption,.fun-card:focus-within figcaption{opacity:1;transform:translateY(0)}
.fun-video:has(video) figcaption{top:0;bottom:auto;padding:18px 20px 50px;background:linear-gradient(rgba(0,0,0,.6),transparent)}
.fun-video-placeholder{top:14px;bottom:auto;font-size:12px;background:rgba(255,255,255,.9)}
@media(max-width:750px){.fun-view{padding-top:145px}.fun-grid{gap:14px 12px}.fun-card figcaption{opacity:1;transform:none;font-size:16px;padding:50px 16px 16px}}
@media(hover:none){.fun-card figcaption{opacity:1;transform:none}}

/* Give the larger Fun tiles room to breathe while retaining column alignment. */
.fun-intro{margin-bottom:54px}.fun-grid{row-gap:1.8vw}
@media(max-width:750px){.fun-intro{margin-bottom:40px}.fun-grid{gap:28px 12px}}

.fun-listening{display:inline-flex;align-items:center;gap:10px;margin-top:64px;font-size:14px;line-height:1.3;width:fit-content}.listening-play{display:grid;place-items:center;width:30px;height:30px;border:1px solid currentColor;border-radius:50%;transition:background .25s ease,color .25s ease}.fun-listening[href]:hover .listening-play,.fun-listening[href]:focus-visible .listening-play{background:#080808;color:white}.fun-listening[aria-disabled="true"]{cursor:default}.listening-play svg{margin-left:2px}@media(max-width:750px){.fun-listening{margin-top:40px;font-size:13px}}

/* Listening link stays at the lower left while browsing Fun. */
.fun-listening{position:fixed;left:1.901042%;bottom:24px;z-index:20;margin:0;padding:12px 16px;gap:10px;border:1px solid #dedede;border-radius:14px;background:rgba(255,255,255,.96);box-shadow:0 3px 16px rgba(0,0,0,.06);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.fun-view{padding-bottom:130px;animation:none}.listening-play{width:24px;height:24px;border:0}
@media(max-width:750px){.fun-listening{left:6%;bottom:calc(18px + env(safe-area-inset-bottom));margin:0;padding:11px 14px;max-width:88%;font-size:13px}.fun-view{padding-bottom:120px}}

.fun-listening:hover .listening-play,.fun-listening[aria-expanded="true"] .listening-play{background:#080808;color:white;border-radius:50%}.spotify-player{position:fixed;left:1.901042%;bottom:90px;z-index:21;width:min(360px,96vw);padding:12px;background:#fff;border:1px solid #dedede;border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.12)}.spotify-close{display:block;margin:0 0 10px auto;font-size:13px}.spotify-embed iframe{display:block;border:0;border-radius:12px;width:100%;height:352px}.spotify-embed{max-height:calc(100svh - 170px);overflow:auto;border-radius:12px}@media(max-width:750px){.spotify-player{left:6%;width:88%;bottom:calc(85px + env(safe-area-inset-bottom))}}

/* A single persistent music dock, with playback-driven animated bars. */
.listening-dock{position:fixed;left:1.901042%;bottom:24px;z-index:20;width:min(380px,96%);border:1px solid #dedede;border-radius:14px;background:rgba(255,255,255,.97);overflow:hidden;box-shadow:0 3px 16px rgba(0,0,0,.06)}
.listening-dock .fun-listening{position:static;width:100%;max-width:none;border:0;box-shadow:none;background:transparent;backdrop-filter:none;margin:0;text-align:left}
.listening-play{position:relative;flex-shrink:0;border:1px solid #080808!important;border-radius:50%;background:transparent!important;color:#080808!important;width:28px;height:28px}
.listening-play svg{margin:0;position:absolute;inset:0;margin:auto;width:14px;height:14px;transition:opacity .2s ease}
.listening-wave{display:flex;align-items:center;justify-content:center;gap:2px;height:14px;opacity:0;transition:opacity .2s ease}
.listening-wave i{display:block;width:2px;height:6px;background:currentColor;border-radius:2px;transform:scaleY(.5)}
.is-playing .listening-play svg{opacity:0}.is-playing .listening-wave{opacity:1}.is-playing .listening-wave i{animation:music-bars .7s ease-in-out infinite alternate}.listening-wave i:nth-child(2){animation-delay:-.4s}.listening-wave i:nth-child(3){animation-delay:-.15s;height:12px}.listening-wave i:nth-child(4){animation-delay:-.55s;height:10px}.listening-wave i:nth-child(5){animation-delay:-.25s}
@keyframes music-bars{to{transform:scaleY(1.2)}}
.listening-dock .spotify-player{position:static;width:100%;padding:0 10px 10px;border:0;border-radius:0;background:transparent;box-shadow:none}.spotify-close{margin-bottom:7px}.spotify-embed iframe{height:80px}.spotify-embed{max-height:none;overflow:hidden}
@media(max-width:750px){.listening-dock{left:6%;width:88%;bottom:calc(18px + env(safe-area-inset-bottom))}.listening-dock .fun-listening{font-size:13px}}
@media(prefers-reduced-motion:reduce){.is-playing .listening-wave i{animation:none;transform:none}}

/* Custom music controls; playback connection remains pending. */
.custom-music{display:flex;align-items:center;gap:12px;width:fit-content;max-width:96%;padding:12px 16px}.music-play{width:28px;height:28px;display:grid;place-items:center;border:1px solid #080808;border-radius:50%;flex-shrink:0}.music-label{font-size:14px;line-height:1.3}.music-wave{display:flex;align-items:center;gap:2px;height:20px;margin-left:8px}.music-wave i{height:5px;width:2px;border-radius:2px;background:#080808}.music-wave i:nth-child(2),.music-wave i:nth-child(4){height:10px}.music-wave i:nth-child(3){height:16px}.music-skip{display:grid;place-items:center;width:24px;height:28px}.music-skip:disabled{opacity:.3;cursor:default}.music-play:hover{color:white;background:#080808}.custom-music.is-playing .music-wave i{animation:music-bars .7s ease-in-out infinite alternate}.music-wave i:nth-child(2){animation-delay:-.4s}.music-wave i:nth-child(3){animation-delay:-.15s}.music-wave i:nth-child(4){animation-delay:-.55s}@media(max-width:750px){.custom-music{width:88%;gap:9px;padding:11px 12px}.music-label{font-size:12px;flex:1}.music-wave{margin-left:0}}@media(prefers-reduced-motion:reduce){.custom-music.is-playing .music-wave i{animation:none}}

.navigation nav .contact-cta{display:inline-flex;align-items:center;justify-content:center;width:fit-content;max-width:100%;padding:11px 16px;border:1px solid #dedede;border-radius:14px;background:rgba(255,255,255,.97);box-shadow:0 3px 16px rgba(0,0,0,.06);font-size:14px;line-height:1.3;letter-spacing:0;text-decoration:none;white-space:nowrap;transition:background .25s ease,color .25s ease,border-color .25s ease}.navigation nav .contact-cta:hover,.navigation nav .contact-cta:focus-visible{background:#080808;color:#fff;border-color:#080808;text-decoration:none}@media(max-width:750px){.navigation nav .contact-cta{font-size:12px;padding:9px 10px;border-radius:12px}}

.navigation nav .contact-cta{font-size:inherit;line-height:inherit}@media(max-width:750px){.navigation nav .contact-cta{font-size:inherit}}

.navigation nav .contact-cta{padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:inherit;transition:none}.navigation nav .contact-cta:hover,.navigation nav .contact-cta:focus-visible{background:none;color:inherit;border:0;text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}

.navigation nav .contact-cta:hover,.navigation nav .contact-cta:focus-visible,.navigation nav .contact-cta[aria-current="page"]{text-decoration:none}

.navigation nav .contact-cta[aria-disabled="true"]{cursor:default}

/* Compact supporting type and a stronger editorial title hierarchy. */
:root{--type-navigation:1rem;--type-page:1rem;--type-label:.8125rem}.navigation{font-size:var(--type-navigation)}.navigation .name{font-size:1.125rem}.navigation nav{font-size:1rem}.navigation nav .contact-cta{font-size:inherit}#about h1,#about p{font-size:1rem;line-height:1.5}.preview-info-title{font-size:16px}.preview-info-disciplines{font-size:13px}.fun-intro h1,.fun-intro p,.fun-text h2,.fun-text p{font-size:16px}.fun-card figcaption{font-size:16px}@media(max-width:750px){:root{--type-navigation:1rem;--type-page:1rem}.navigation nav{font-size:.9375rem}.navigation .name{font-size:1.125rem}.navigation nav .contact-cta{font-size:inherit}#about h1,#about p{font-size:1rem}}

.work-preview-video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease .06s;pointer-events:none;z-index:1}.project.has-video-preview.active .work-preview-video{opacity:1}.project.has-video-preview.active img{opacity:1}.project.has-video-preview.video-preview-ready.active img{opacity:0}

.colour-bar{transition:opacity .3s ease}.project.active .colour-bar{opacity:0}.project.active .caption{bottom:0}

.projects .project .caption{display:none}

.project.logo-preview[data-preview-shape="portrait"] img{object-fit:cover;padding:0}

.project img{position:absolute;inset:0}.project img:not(.preview-selected){opacity:0!important;pointer-events:none}.project .work-preview-video:not(.preview-selected){opacity:0!important}.project.active img.preview-selected{transition:transform .8s cubic-bezier(.2,.65,.3,1);opacity:1}.project.active .work-preview-video.preview-selected{transition:none}

.project img:not(.preview-selected),.project .work-preview-video:not(.preview-selected){transition:none}

/* Text selection and insertion caret echo a typesetting workspace. */
.selection-title{position:relative;white-space:pre-wrap}.selection-character{background:transparent;color:inherit}.is-selecting .selection-character{animation:select-character 1ms steps(1,end) var(--character-delay) forwards}.selection-title::after{content:'';position:absolute;left:100%;bottom:0;width:1px;height:1em;background:#080808;opacity:0;pointer-events:none}.selection-title.is-selecting::after{animation:selection-caret 1s steps(1,end) var(--caret-delay) infinite}.selection-static .selection-character{animation:none;background:#c6dcff;color:#080808}.selection-title.selection-static::after{animation:none;opacity:1}.navigation nav :is(button,a):hover,.navigation nav :is(button,a):focus-visible{text-decoration:none}@keyframes select-character{to{background:#c6dcff;color:#080808}}@keyframes selection-caret{0%,49%{opacity:1}50%,100%{opacity:0}}

.emoji-toggle{position:fixed;left:1.901042%;bottom:24px;z-index:40;display:grid;place-items:center;width:34px;height:34px;font-size:22px;line-height:1;border-radius:50%;background:#fff;border:1px solid transparent;transition:background .15s,border-color .15s}.emoji-toggle:hover,.emoji-toggle[aria-pressed="true"]{background:#eef4ff;border-color:#c6dcff}.emoji-effects{position:fixed;inset:0;z-index:35;pointer-events:none;overflow:hidden}.emoji-particle{position:absolute;font-size:24px;line-height:1;pointer-events:none;will-change:transform,opacity}@media(max-width:750px){.emoji-toggle{left:6%;bottom:calc(20px + env(safe-area-inset-bottom))}}

.emoji-toggle,.emoji-toggle:hover,.emoji-toggle[aria-pressed="true"]{width:22px;height:30px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;transition:none;justify-items:start}

.project.logo-preview[data-preview-shape="square"] img{object-fit:cover;padding:0}

.fun-media iframe{display:block;width:100%;height:100%;border:0;background:#111}.fun-video:has(iframe) figcaption{display:none}

.work-preview-embed{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;pointer-events:none;z-index:1}.work-preview-embed.preview-selected{opacity:1;background:#111}
/* Overscan the square Vimeo loop to remove its side padding. */
.project[data-preview-shape="square"] .work-preview-embed{inset:auto;left:50%;top:50%;width:125%;height:125%;transform:translate(-50%,-50%)}
/* The current page retains its text selection highlight. */
.navigation nav [aria-current="page"] .selection-character{background:#c6dcff;color:#080808;animation:none}
.navigation nav [aria-current="page"],.project-page .navigation nav [aria-current="page"]{text-decoration:none}

.fun-card.fun-square-embed{height:auto;aspect-ratio:1}.fun-square-embed .fun-media{width:100%;height:100%;aspect-ratio:1}

.fun-video .fun-media iframe{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:none;max-height:none}.fun-video .fun-media video{object-fit:cover}

.reel-item iframe{display:block;width:100%;height:var(--grid-height);aspect-ratio:16/9;border:0;pointer-events:none;background:#111}.viewer-content iframe{width:100%;height:100%;border:0}

/* Unlabelled reference images retain portrait proportions on mobile. */
.fun-card figcaption{display:none;background:none}
@media(max-width:750px){.fun-card[data-shape="portrait"] .fun-media{aspect-ratio:2/3}.fun-card[data-shape="square"] .fun-media{aspect-ratio:1}}

.fun-card{min-height:0;overflow:hidden}.fun-card .fun-media{flex:none;width:100%;height:100%;aspect-ratio:inherit;background:transparent}.fun-media img{object-fit:contain}
@media(max-width:750px){.fun-grid .fun-card{height:auto}.fun-card .fun-media{aspect-ratio:inherit!important}}

/* Four-column mobile grid matches the navigation. */
@media(max-width:750px){.page-grid{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:12px}.page-grid>span:nth-child(-n+4){display:block}.page-grid>span:nth-child(n+5){display:none}.navigation nav{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:12px;align-items:start}}

/* On the mobile home view, align the stacked menu with the name in the right-hand column. */
@media(max-width:750px){
 body[data-view="home"] .navigation{top:calc(44svh - 23px);transform:translateY(-50%);grid-template-columns:repeat(4,minmax(0,1fr));column-gap:12px;row-gap:0;align-items:start}
 body[data-view="home"] .navigation>.name{grid-column:1 / span 2;grid-row:1}
 body[data-view="home"] .navigation>nav{grid-column:3 / -1;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
 body[data-view="home"] .navigation>nav>*{width:max-content;max-width:100%;text-align:left}
 body[data-view="home"] .navigation nav .selection-title{white-space:nowrap}
}

/* Mobile Work uses a centred stack of horizontal project bars. */
@media(max-width:750px){.projects{top:50%;height:auto;transform:translateY(-50%);flex-direction:column;align-items:stretch;gap:28px}.projects .project,.projects.has-active .project,.projects .project.active{flex:0 0 7px;width:100%;height:7px!important;min-height:7px;transition:none}.projects .project img,.projects .project video,.projects .project iframe,.projects .project .caption{display:none}.projects .project::before{transform:none}.projects .colour-bar{height:7px}.preview-info{display:none!important}}

/* Drag to draw an InDesign-style image frame on the home canvas. */
.frame-draw-home{touch-action:none}.frame-draw-home :is(a,button,nav){touch-action:manipulation}.frame-draw-layer{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}.design-frame{position:absolute;border:1px solid #146bb3;background:linear-gradient(to top right,transparent calc(50% - .5px),#146bb3 50%,transparent calc(50% + .5px)),linear-gradient(to bottom right,transparent calc(50% - .5px),#146bb3 50%,transparent calc(50% + .5px))}.frame-handle{position:absolute;width:6px;height:6px;background:var(--background);border:1px solid #146bb3;transform:translate(-50%,-50%)}.handle-nw{left:0;top:0}.handle-n{left:50%;top:0}.handle-ne{left:100%;top:0}.handle-e{left:100%;top:50%}.handle-se{left:100%;top:100%}.handle-s{left:50%;top:100%}.handle-sw{left:0;top:100%}.handle-w{left:0;top:50%}

/* Mobile references use natural-height rows rather than desktop masonry tracks. */
@media(max-width:750px){
 .page-grid{left:6%;right:6%;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:12px}
 .page-grid>span:nth-child(-n+4){display:block}.page-grid>span:nth-child(n+5){display:none}
 .fun-grid{display:flex;flex-direction:column;gap:28px;grid-auto-rows:auto}
 .fun-grid .fun-card{flex:none;width:100%;height:auto;position:relative;margin:0;transform:none}
 .fun-card .fun-media{height:auto;aspect-ratio:inherit!important;background:transparent}
 .fun-media img,.fun-media video{width:100%;height:auto;object-fit:contain;aspect-ratio:inherit;background:transparent}
 .fun-media iframe{background:transparent}
}