@import url('/rail/lenis.css');
@import url('/interaction/typefaces.css');
:root { font-family: var(--font-portfolio-sans); color: #171717; background: #fff; font-synthesis: none; font-size: 14px; --radius-surface: 30px; --ink: #171717; --muted: #707070; --media: #f7f7f7; --sidebar-end: 296px; --content-budget: calc(29.25vw + min(4.8vw,80px)); --edge: max(28px, calc((var(--content-budget) - var(--sidebar-end)) / 2)); --rail-left: calc(var(--sidebar-end) + var(--edge)); --ease: cubic-bezier(.22,1,.36,1); }
* { box-sizing: border-box; }
body { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; border: 0; padding: 0; background: none; cursor: pointer; }
button:disabled { cursor: default; opacity: .3; }
img, video { display: block; max-width: 100%; }
p { margin: 0; }
[hidden] { display: none !important; }
::selection { background: #e4e4e4; color: #111; }
:focus-visible { outline: 2px solid #737373; outline-offset: 5px; border-radius: var(--radius-surface); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 12px; left: 48px; z-index: 100; padding: 10px; background: #fff; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.sidebar { position: fixed; top: 48px; bottom: 48px; left: 48px; width: 248px; display: flex; flex-direction: column; justify-content: space-between; z-index: 5; }
.identity { display: inline-flex; width: 44px; height: 44px; position: relative; align-items: center; }
.identity > img { width: 44px; height: 44px; aspect-ratio: 1; object-fit: cover; object-position: 50% 45%; border: 3px solid #fff; border-radius: 3px; box-shadow: 0 2px 7px #0000001f, 0 0 1px #00000024; }
.identity > img { transform-origin: 50% 65%; transition: transform 420ms cubic-bezier(.34,1.56,.64,1); }
.identity-hello { position: absolute; left: 60px; top: 50%; font-family: 'Bradley Hand', 'Segoe Print', 'Comic Sans MS', cursive; font-size: 27px; line-height: 1.2; font-weight: 400; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-6px,-40%) rotate(-7deg); transition: opacity 160ms ease, transform 360ms cubic-bezier(.34,1.56,.64,1); }
@media (hover:hover) and (pointer:fine) and (min-width:761px) {
 .identity:hover > img { transform: scale(1.13) rotate(-7deg); }
 .identity:hover .identity-hello { opacity: 1; transform: translate(0,-50%) rotate(-7deg); }
}
.identity:focus-visible .identity-hello { opacity: 1; transform: translate(0,-50%) rotate(-7deg); transition: none; }
@media (prefers-reduced-motion:reduce) {
 .identity:hover > img { transform: none; }
 .identity-hello { transform: translate(0,-50%) rotate(-7deg); }
}
@media (max-width:760px) { .identity-hello { display: none; } }
.identity-mark { width: 32px; height: 32px; border-radius: 9px; background: #181818; color: #fff; display: grid; place-items: center; border: 2px solid #fff; position: absolute; left: 22px; }
.identity-mark svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.portfolio-nav { margin-top: 30px; display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.nav-group { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.nav-label { color: var(--muted); line-height: 18px; }
.portfolio-nav a { line-height: 18px; position: relative; display: block; }
.portfolio-nav a[aria-current="page"]::before { content: ''; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--ink); left: -11px; top: 50%; transform: translateY(-50%); }
.portfolio-nav a[aria-current="page"] { font-weight: 500; }
.nav-text { display: block; position: relative; height: 18px; transform-origin: center; transition: transform 280ms cubic-bezier(.34,1.56,.64,1); }
.nav-text span { display: block; }
.nav-text span[aria-hidden] { position: absolute; inset: 0; pointer-events: none; color: transparent; background: linear-gradient(90deg,var(--ink) 0%,var(--ink) 33.33%,#c69bc4 40%,#ed705a 45%,#efb94f 50%,#b9c8e8 55%,#5f8fe0 60%,transparent 66.67%,transparent 100%) 100% 0 / 300% 100% no-repeat; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; opacity: 0; }
@keyframes nav-colour-sweep { from { background-position: 100% 0; filter: blur(.6px); } to { background-position: 0 0; filter: blur(0); } }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 .portfolio-nav a:hover .nav-text { transform: scale(1.04); }
 .portfolio-nav a:hover .nav-text span[aria-hidden] { opacity: .94; animation: nav-colour-sweep 600ms cubic-bezier(.4,0,.2,1) both; }
 .portfolio-nav a:active .nav-text { transform: scale(.96); transition-duration: 90ms; }
}
.bio { color: var(--muted); line-height: 1.35; display: flex; flex-direction: column; gap: 12px; }
.bio .ink, .bio a { color: var(--ink); }
.bio .signature { width: 88px; margin-bottom: 9px; }
.signature img { width: 88px; height: auto; }
.bio .signature img { opacity: .65; }
.bio .contact a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .2s; }
.bio .contact a[href*="linkedin.com"] { text-decoration-color: currentColor; }
.bio .copyright { font-size: inherit; color: #999; margin-top: 3px; }
.content-pane { position: fixed; inset: 0 0 0 var(--rail-left); overflow: auto; overscroll-behavior: auto; scrollbar-width: thin; scrollbar-color: #d6d6d6 transparent; padding: 48px var(--edge) 64px 0; outline: none; }
/* Give the folded artwork room beyond the gallery without moving its layout.
   The media still crops inside its rounded surface before the bend is applied. */
#collection, .case-grid, .case-rail, .gallery-item, .case-link, .fun-bento { overflow: visible; }
@media (min-width: 761px) {
 .content-pane:is([data-view="case-studies"], [data-view="one-shots"], [data-view="me"]) {
  left: calc(var(--rail-left) - 160px);
  right: -160px;
  padding-left: 160px;
  padding-right: calc(var(--edge) + 160px);
  scrollbar-width: none;
 }
}
.media-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; align-items: start; }
.gallery-item { min-width: 0; }
.media-tile { display: block; width: 100%; aspect-ratio: 1; position: relative; overflow: hidden; border-radius: var(--radius-surface); background: var(--media); isolation: isolate; }
.media-tile > img, .media-tile > video { width: 100%; height: 100%; object-fit: contain; transition: transform .5s var(--ease); }
.media-tile .device-image { padding: 36px; }
.media-tile .device-video { object-fit: cover; }
.media-tile[data-fit="contain"] > img { padding: 30px; }
.media-tile[data-fit="book"] > img { padding: 40px; }
.media-tile[data-fit="cover"] > img { object-fit: cover; }
.media-tile[data-fit="cover"] > video { object-fit: cover; }
.tile-caption { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 13px; border-radius: var(--radius-surface); background: #ffffffec; backdrop-filter: blur(10px); color: var(--ink); font-size: 12px; line-height: 1.35; opacity: 0; transform: translateY(5px); transition: opacity .2s ease,transform .25s var(--ease); pointer-events: none; }
.tile-caption svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.4; }
.project-caption { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; font-size: 13px; line-height: 1.3; margin-top: 11px; }
.project-caption span:last-child { font-size: 12px; color: var(--muted); white-space: nowrap; }
.gallery-item:has(.project-caption) { margin-bottom: 9px; }
.next-section { display: flex; justify-content: center; margin: 64px 0 0; }
.empty-state { min-height: calc(100svh - 112px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--muted); padding-bottom: 60px; }
.empty-state h1 { font-size: 16px; font-weight: 400; color: var(--ink); margin: 0; }
.empty-state p { font-size: 14px; }
.content-pane[data-view="project"] { padding: 0 var(--edge) 0 0; overflow: hidden; }
.project-view { height: 100%; display: flex; flex-direction: column; }
.small-button { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; flex-shrink: 0; }
.small-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.frame-container { position: relative; flex: 1; min-height: 0; background: #fff; border-radius: 0; overflow: hidden; isolation: isolate; }
#project-loading { position: absolute; top: 42px; left: 28px; font-size: 13px; color: var(--muted); }
#media-viewer { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; padding: 64px 7vw 32px; border: 0; margin: 0; background: #ffffffc9; backdrop-filter: blur(18px); color: var(--ink); }
#media-viewer::backdrop { background: #ffffff55; }
#media-viewer[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.viewer-close { position: absolute; top: 22px; right: 24px; background: #ffffffd9; }
.viewer-stage { width: 100%; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 16px; cursor: zoom-out; }
.viewer-stage img, .viewer-stage video { width: auto; height: auto; max-width: 100%; max-height: calc(100svh - 170px); object-fit: contain; }
.viewer-stage:has(img + img) img { max-width: 48%; }
.viewer-footer { display: flex; align-items: center; justify-content: center; gap: 22px; padding-top: 18px; }
.viewer-footer p { font-size: 12px; padding: 7px 12px; border-radius: var(--radius-surface); background: #ffffffe6; text-align: center; }
@media (hover:hover) {
 .media-tile:hover > img, .media-tile:hover > video { transform: scale(1.015); }
 .media-tile:hover .tile-caption, .media-tile:focus-visible .tile-caption { opacity: 1; transform: none; }
 .bio .contact a:hover { text-decoration-color: currentColor; }
 .small-button:hover { background: #eee; }
}
@media (max-width:1100px) and (min-width:761px) { :root { --sidebar-end: 237px; --content-budget: calc(31vw + 28px); } .sidebar { left: 32px; width: 205px; } .media-grid, .case-grid { gap: 18px; } .case-rail { gap: 22px; } .bio { font-size: 13px; } .media-tile .device-image { padding: 20px; } }
@media (max-height:700px) and (min-width:761px) { .sidebar { top: 30px; bottom: 26px; } .portfolio-nav { gap: 22px; margin-top: 22px; } .bio { font-size: 13px; gap: 10px; } .bio .signature { margin-bottom: 0; } }
@media (max-width:760px) {
 body { overflow: auto; }
 .sidebar { position: static; width: auto; display: block; }
 .navigation-header { height: 68px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; position: sticky; top: 0; background: #ffffffed; backdrop-filter: blur(12px); border-bottom: 1px solid #eee; z-index: 5; }
 .identity { flex-shrink: 0; transform: scale(.85); transform-origin: left center; width: 47px; }
 .portfolio-nav { margin: 0; flex-direction: row; gap: 20px; font-size: 13px; }
 .nav-group { flex-direction: row; gap: 20px; }
 .nav-label { display: none; }
 .portfolio-nav a[aria-current="page"]::before { left: -9px; }
 .bio { padding: 18px 20px 28px; gap: 12px; line-height: 1.4; max-width: 440px; }
 .bio .signature, .bio .copyright { display: none; }
 .content-pane { position: static; padding: 0 20px 36px; overflow: visible; }
 .media-grid { grid-template-columns: minmax(0,1fr); gap: 24px; }
 .media-tile .device-image { padding: 28px; }
 .tile-caption { opacity: 1; transform: none; font-size: 11px; background: #ffffffdf; }
 .gallery-item:has(.project-caption) .tile-caption { display: none; }
 .project-caption { font-size: 13px; margin-top: 10px; }
 .next-section { margin-top: 36px; }
 .empty-state { min-height: 48svh; padding-bottom: 40px; }
 body:has(.content-pane[data-view="project"]) .bio { display: none; }
 .content-pane[data-view="project"] { height: calc(100svh - 68px); padding: 0; }
 #media-viewer { padding: 64px 16px 24px; }
 .viewer-stage img, .viewer-stage video { max-height: calc(100svh - 170px); }
 .viewer-stage:has(img + img) { flex-direction: column; }
 .viewer-stage:has(img + img) img { max-width: 100%; max-height: 30svh; }
 .viewer-footer { gap: 8px; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
.media-tile > video { position: absolute; inset: 0; }
#retry-project { text-decoration: underline; text-underline-offset: 3px; }

/* Each original presentation keeps its authored camera frame. */
.case-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; align-items: start; }
.case-rail { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.case-grid .gallery-item { margin: 0; }
/* Glass labels sit above the media's clipping layer for Safari video compositing. */
.case-grid .media-tile { aspect-ratio: var(--media-ratio); background: #ededed; border-radius: var(--radius-surface); padding: 0; clip-path: inset(0 round var(--radius-surface));
 /* Own compositing layer: Chrome then keeps the rounded clip on the playing video
    while the card is folded by the scroll transform. */
 will-change: transform; transform: translateZ(0); }
/* Chrome can drop an overflow:hidden rounded clip on a composited video while
   its transform transitions, showing square corners. Round the media itself. */
.case-grid .media-tile > img, .case-grid .media-tile > video { border-radius: var(--radius-surface); }
/* A 5.1% black overlay equals multiplying the artwork by the #f2f2f2 surface,
   without a blend mode. Safari composites blended video on a slow path. */
.case-grid .media-tile::after { content: ''; position: absolute; inset: 0; z-index: 1; background: #000; opacity: .051; pointer-events: none; transition: opacity 200ms var(--ease); }
.case-link { display: block; position: relative; }
.case-details { position: absolute; top: 16px; left: 16px; right: 16px; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; text-align: left; pointer-events: none; }
/* Opaque-enough labels: a backdrop filter over a playing video is re-sampled on
   every frame in Safari and clips badly while the pill's transform transitions. */
.case-title, .case-company { position: relative; max-width: 100%; padding: 9px 14px; border: 1px solid #ffffffb8; border-radius: 999px; background: #ffffffe8; box-shadow: inset 0 1px 0 #ffffff8f, 0 1px 3px #0000000d; color: #303030; font-size: 13px; font-weight: 400; line-height: 1.4; letter-spacing: 0; }
.case-title { z-index: 2; text-wrap: pretty; opacity: 0; transform: translateY(8px) scale(.97); transform-origin: top center; transition: transform 200ms var(--ease), opacity 160ms ease; }
.case-company { z-index: 1; flex-shrink: 0; opacity: 0; transform: translateY(-8px) scale(.9); transform-origin: top right; transition: transform 200ms var(--ease), opacity 160ms ease; }
/* The client mark sits in a round glass badge opposite the title. */
.case-company-logo { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; }
.case-company-logo img { display: block; width: 22px; height: 22px; object-fit: contain; }
.case-link:focus-visible { outline: none; }
.case-link:focus-visible .media-tile { outline: 2px solid #737373; outline-offset: 5px; }
.case-link:focus-visible .media-tile::after { opacity: .222; }
.case-link:focus-visible :is(.case-title,.case-company) { opacity: 1; transform: none; transition: none; }
@media (hover:hover) and (pointer:fine) {
 .case-link:hover .media-tile::after { opacity: .222; }
 .case-link:hover .media-tile > img, .case-link:hover .media-tile > video { transform: scale(1.015); }
 .case-link:hover .case-title { opacity: 1; transform: translateY(0) scale(1); }
 .case-link:hover .case-company { opacity: 1; transform: translateY(0) scale(1); transition: transform var(--case-pill-duration,500ms) var(--case-pill-ease,var(--ease)) 40ms, opacity 160ms ease 40ms; }
}
@media (hover:none), (pointer:coarse) {
 .case-title, .case-company { opacity: 1; transform: none; transition: none; }
}
@media (prefers-reduced-motion:reduce) {
 .case-title, .case-company, .case-link:hover :is(.case-title,.case-company) { transform: none; }
 .case-link:hover .media-tile > img, .case-link:hover .media-tile > video { transform: none; }
}
.case-grid .device-image { padding: 0; }
.case-grid .device-video { object-fit: contain; }
.case-grid .media-tile:has(video:not([hidden])) > .device-image { visibility: hidden; }
@media (max-width:760px) {
 .case-grid { grid-template-columns: minmax(0,1fr); gap: 28px; }
 body:has(.content-pane[data-view="me"]) .bio { display: none; }
}


/* Native recreation of the original four-row personal-work bento. */
.content-pane[data-view="me"] #collection { container-type: inline-size; }
.fun-bento { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 16px; }
.bento-tile { grid-column: span 2; position: relative; height: clamp(260px,28.7cqw,320px); min-width: 0; overflow: hidden; isolation: isolate; border: 1px solid #ededed; border-radius: var(--radius-surface); background: #f2f2f2; text-align: left; }
.bento-tapstitch, .bento-kitking { grid-column: span 4; }
.bento-manchester-foods, .bento-website-concepts { grid-column: span 3; }
.bento-heading { position: absolute; z-index: 2; top: 16px; left: 16px; right: 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.bento-label { padding: 4px 12px; background: #f7f7f7ed; border-radius: var(--radius-surface); font-size: 13px; line-height: 18px; color: #606060; }
.bento-art { position: absolute; top: 65px; left: 50%; width: 68%; aspect-ratio: 241/324; translate: -50% 0; border: 4px solid #fff; border-radius: var(--radius-surface); box-shadow: 0 8px 25px 4px #0003; overflow: hidden; transition: transform .35s var(--ease); }
.bento-art > img, .bento-art > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.bento-art > video { position: absolute; inset: 0; }
.bento-tapstitch .bento-art { left: 8.6%; width: 118%; aspect-ratio: 878/567; translate: none; }
.bento-good-services .bento-art { width: 58%; aspect-ratio: 2/3; }
.bento-mario .bento-art { top: 95px; left: 12%; width: 135%; aspect-ratio: 490/219; translate: none; rotate: 34deg; border: 0; border-radius: 32px; box-shadow: 24px 36px 40px #0003; }
.bento-soda .bento-art { width: 80%; aspect-ratio: 287/299; }
.bento-manchester-foods .bento-art { width: 86%; aspect-ratio: 474/301; }
.bento-website-concepts .bento-art { width: 89%; aspect-ratio: 489/263; }
.bento-kitking .bento-art { left: 8%; width: 131%; aspect-ratio: 972/547; translate: none; }
.bento-phone { position: absolute; top: 82px; left: -7%; width: 74%; aspect-ratio: 261/531; rotate: 26deg; border: 8px solid #171717; border-radius: 40px; background: #f7f7f7; box-shadow: 4px 8px 32px #0003; overflow: hidden; transition: transform .35s var(--ease); }
.bento-phone > img { width: 100%; border-radius: 28px; }
.bento-phone .bento-island { position: absolute; top: 0; left: 0; }
/* Match each original tile's distinct motion rather than a shared lift. */
.bento-art, .bento-phone { transition: transform .45s var(--ease), rotate .45s var(--ease); }
@media (hover:hover) {
 .bento-id-cards:hover .bento-art { transform: translateY(10px); }
 .bento-tapstitch:hover .bento-art { transform: translateX(-36px); }
 .bento-good-services:hover .bento-art { transform: scale(1.081); }
 .bento-mario:hover .bento-art { rotate: 12deg; }
 .bento-soda:hover .bento-art { transform: scale(1.066); }
 .bento-manchester-foods:hover .bento-art { transform: scale(1.046); }
 .bento-website-concepts:hover .bento-art { transform: scale(1.039); }
 .bento-kitking:hover .bento-art { transform: translateX(-32px) scale(1.013); }
 .bento-dynamic-island:hover .bento-phone { rotate: 5deg; }
}

.bento-tile:focus-visible { outline-offset: -4px; }
@container (max-width:650px) { .fun-bento { grid-template-columns: repeat(2,minmax(0,1fr)); } .bento-tile { grid-column: span 1; } .bento-tapstitch, .bento-kitking, .bento-website-concepts { grid-column: span 2; } }
@container (max-width:420px) { .fun-bento { grid-template-columns: minmax(0,1fr); } .bento-tile { grid-column: span 1; height: 320px; } }


#project-stage { position: absolute; inset: 0; }

/* Live glass refraction; eased masks avoid a visible upper seam. */
.portfolio-bottom-blur { position: fixed; z-index: 4; bottom: 0; left: 0; right: 0; height: 148px; pointer-events: none; }
.portfolio-bottom-blur > div { position: absolute; inset: 0; }
.portfolio-bottom-blur > div:nth-child(1) {
 -webkit-backdrop-filter: blur(2px);
 backdrop-filter: url(#portfolio-glass-warp) blur(2px);
 mask-image: linear-gradient(transparent 0%, #00000003 12%, #0000000a 25%, #00000026 42%, #00000066 64%, #000000bf 84%, #000 100%);
}
.portfolio-bottom-blur > div:nth-child(2) {
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 mask-image: linear-gradient(transparent 12%, #00000003 28%, #0000000d 44%, #00000033 62%, #00000080 82%, #000 100%);
}
/* A narrow dispersion band at the lens shoulder, fading before the heavy blur.
   The existing blur layers remain the fallback for browsers without SVG backdrops. */
.portfolio-bottom-blur > .portfolio-lens-seam {
 -webkit-backdrop-filter: url(#portfolio-glass-dispersion);
 backdrop-filter: url(#portfolio-glass-dispersion);
 mask-image: linear-gradient(transparent 0%, #00000000 26%, #00000059 42%, #000000d9 60%, #000000bf 78%, #00000059 92%, #00000026 100%);
}
.portfolio-bottom-blur::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 0%, #ffffff00 24%, #ffffff04 40%, #ffffff12 56%, #ffffff38 72%, #ffffff80 88%, #ffffffc7 100%); }
@media (prefers-reduced-motion: reduce) {
 .portfolio-bottom-blur > .portfolio-lens-seam { display: none; }
 .portfolio-bottom-blur > div:nth-child(1) { backdrop-filter: blur(2px); }
}

/* Let the last item clear the bottom blur with a little breathing room. */
.content-pane:not([data-view="project"]) { padding-bottom: calc(180px + env(safe-area-inset-bottom)); }


/* Reserve layout immediately; reveal cards only after their video starts. */
.case-grid .gallery-item { opacity: 1; filter: blur(0); transition: filter .65s var(--ease); }
.case-grid .gallery-item.media-pending { opacity: 0; filter: blur(18px); }
.case-grid .gallery-item.media-pending:focus-within { opacity: 1; filter: none; }
@media (prefers-reduced-motion: reduce) { .case-grid .gallery-item { transition: none; opacity: 1; filter: none; } }

.resume-page { max-width: 1100px; margin: 0 auto; }
.resume-header { display: flex; align-items: center; justify-content: flex-end; gap: 20px; margin-bottom: 28px; }
.resume-header h1 { margin: 0; font-size: 24px; font-weight: 500; letter-spacing: -.03em; }
.resume-download { display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px; background: #f2f2f2; border-radius: var(--radius-surface); font-size: 13px; }
.resume-download svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }

.resume-intro { max-width: 740px; margin: 12px 0 64px; }
.resume-intro h1 { margin: 0 0 18px; font-size: clamp(34px,4vw,54px); line-height: 1.05; font-weight: 500; letter-spacing: -.045em; }
.resume-intro > p { font-size: 18px; line-height: 1.55; color: #616161; }
.resume-contact { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 24px; font-size: 13px; color: #707070; }
.resume-contact a { text-decoration: underline; text-underline-offset: 4px; }
.resume-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(180px, .32fr); gap: clamp(32px,4vw,72px); }
.resume-layout h2 { margin: 0 0 28px; font-size: 13px; font-weight: 500; color: #777; }
.resume-job { border-top: 1px solid #e9e9e9; padding: 26px 0 32px; }
.resume-job-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; }
.resume-job h3 { margin: 0; font-size: 21px; font-weight: 500; letter-spacing: -.025em; }
.resume-date, .resume-location { font-size: 12px; line-height: 1.5; color: #777; }
.resume-role { font-size: 15px; line-height: 1.5; margin: 8px 0 4px; }
.resume-job ul { padding-left: 18px; margin: 20px 0 0; color: #606060; font-size: 14px; line-height: 1.65; }
.resume-job li + li { margin-top: 12px; }
.resume-details section + section { margin-top: 40px; }
.resume-details ul { list-style: none; padding: 0; margin: 0; }
.resume-details li, .resume-details p { font-size: 13px; line-height: 1.65; color: #606060; }
.resume-details li + li { margin-top: 7px; }
.resume-details h2 { margin-bottom: 18px; }
.resume-details h3 { font-size: 14px; font-weight: 500; line-height: 1.5; margin: 0 0 6px; }
.resume-education + .resume-education, .resume-details p + p { margin-top: 12px; }
.resume-page { overflow-wrap: anywhere; }
@media (max-width: 1000px) { .resume-layout { grid-template-columns: minmax(0,1fr); } .resume-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; } .resume-details section + section { margin-top: 0; } }
@media (max-width: 760px) { body:has(.content-pane[data-view="resume"]) .bio { display: none; } .resume-header { margin-bottom: 24px; } .resume-intro { margin-bottom: 40px; } .resume-intro > p { font-size: 16px; } }
@media (max-width: 420px) { .resume-details { grid-template-columns: minmax(0,1fr); } }

/* Quiet paper-like dots, fading into the white canvas above. */
body { isolation: isolate; }
body::before {
 content: '';
 position: fixed;
 inset: auto 0 0;
 height: min(46vh, 460px);
 z-index: -1;
 pointer-events: none;
 background-image: radial-gradient(circle, rgb(0 0 0 / 11%) .65px, transparent .85px);
 background-size: 14px 14px;
 mask-image: linear-gradient(to top, #000, #0009 35%, transparent 100%);
 -webkit-mask-image: linear-gradient(to top, #000, #0009 35%, transparent 100%);
}

.case-grid .gallery-item { filter: none; transition: opacity .28s ease-out; }
.case-grid .gallery-item.media-pending { filter: none; }

/* A lighter shared surface for portfolio cards. */
:root { --media: #fafafa; }
.case-grid .media-tile { background-color: #fff; } /* #f2f2f2 after the resting overlay */
.bento-tile { background-color: var(--media); }
.bento-tile { border-color: #f1f1f1; }

/* Reading markers turn into a uniform, softly revealed contents list. */
.study-section-nav { position:fixed; z-index:6; left:var(--section-left,40px); top:var(--section-centre,50%); transform:translateY(-50%); width:48px; max-height:var(--section-room,60svh); overflow:visible; }
.study-section-list { display:flex; flex-direction:column; gap:0; }
.study-section-link { position:relative; display:flex; align-items:center; flex-shrink:0; width:100%; height:16px; padding:0 8px; border:0; border-radius:5px; background:transparent; text-align:left; font:inherit; font-size:14px; font-weight:400; line-height:20px; color:#989895; cursor:pointer; transition:height 260ms cubic-bezier(.22,1,.36,1),background-color 140ms ease,color 140ms ease; }
.study-section-link i { display:block; width:16px; height:2px; flex-shrink:0; background:#dededb; border-radius:2px; opacity:1; filter:blur(0); transition:width 220ms cubic-bezier(.22,1,.36,1),opacity 130ms ease,filter 160ms ease; }
.study-section-link span { position:absolute; inset-inline:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:0; transform:translateY(3px); filter:blur(4px); pointer-events:none; transition:opacity 130ms ease,filter 160ms ease,transform 180ms cubic-bezier(.22,1,.36,1); }
.study-section-link[aria-current] { color:#353532; }
.study-section-link[aria-current] i { width:30px; background:#363633; }
.study-section-link:focus-visible { outline:2px solid #aaa; outline-offset:2px; }
.study-section-nav.is-expanded { width:var(--section-width,264px); }
.study-section-nav.is-expanded .study-section-list { max-height:var(--section-room,60svh); overflow:auto; scrollbar-width:none; }
.study-section-nav.is-expanded .study-section-link { height:28px; }
.study-section-nav.is-expanded .study-section-link i { opacity:0; filter:blur(3px); }
.study-section-nav.is-expanded .study-section-link span { opacity:1; transform:translateY(0); filter:blur(0); transition-duration:220ms,260ms,260ms; transition-delay:calc(var(--section-index) * 30ms); }
.study-section-nav.is-keyboard .study-section-link, .study-section-nav.is-keyboard .study-section-link :is(i,span) { transition:none; }
.study-section-toggle { display:none; }
@media (hover:hover) and (pointer:fine) {
 .study-section-nav.is-expanded .study-section-link:hover { color:#494946; background:#f5f5f3; }
 .study-section-nav.is-expanded .study-section-link:active { background:#efefed; }
}
@media (max-width:1100px) {
 .study-section-nav { left:auto; right:24px; top:50%; width:auto; max-width:280px; max-height:65svh; }
 .study-section-nav.is-expanded { width:auto; }
 .study-section-toggle { display:block; margin-left:auto; padding:10px 15px; border:1px solid #eee; border-radius:20px; background:#fffffff2; color:#555; font:inherit; font-size:12px; cursor:pointer; }
 .study-section-list { display:none; margin-top:8px; padding:8px; border:1px solid #eee; border-radius:14px; background:#fffffff5; box-shadow:0 8px 30px #0000000a; }
 .study-section-nav.is-open .study-section-list { display:flex; max-height:55svh; overflow:auto; }
 .study-section-nav .study-section-link { height:44px; width:248px; }
 .study-section-link i { display:none; }
 .study-section-link span { opacity:1; transform:none; filter:none; }
}
@media (prefers-reduced-motion:reduce) { .study-section-link,.study-section-link i,.study-section-link span { transition:none !important; } }

/* A quiet destination pill, shared with the case-study endings. */
.destination-link { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; max-width: 100%; padding: 6px 6px 6px 16px; border: 1px solid #e8e8e8; border-radius: 999px; background: #fff; color: #171717; font-size: 16px; line-height: 1.25; text-decoration: none; transition: border-color .18s ease, background .18s ease; }
.destination-name { min-width: 0; }
.destination-action { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; margin-left: 6px; border-radius: 50%; background: #f1f1f1; transition: background .18s ease; }
.destination-action svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.destination-link:focus-visible { outline: 2px solid #555; outline-offset: 4px; }
@media (hover: hover) { .destination-link:hover { border-color: #ccc; } .destination-link:hover .destination-action { background: #e5e5e5; } }
@media (max-width: 760px) {
 .content-pane:not([data-view="project"]) { padding-top: 24px; }
 body:has(.content-pane[data-view="one-shots"]) .bio { display: none; }
 .portfolio-nav, .nav-group { gap: 16px; }
}

@media (max-width:380px) {
 .navigation-header { gap: 10px; }
 .navigation-header .identity { width: 34px; }
 .portfolio-nav, .nav-group { gap: 12px; font-size: 12px; }
}
@media (max-width:380px) {
 .destination-link { gap: 8px; font-size: 14px; padding-left: 12px; }
}

.viewer-description { max-width: 640px; margin: 20px auto 0; font-size: 14px; line-height: 1.5; color: #555; text-align: left; flex-shrink: 0; }
#media-viewer:has(.viewer-description:not([hidden])) .viewer-stage :is(img,video) { max-height: calc(100svh - 300px); }

/* Fun: the game introduction and the full-screen takeover it opens. */
.portfolio-nav a[hidden] { display: none; }
.fun-intro { min-height: calc(100dvh - 96px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; padding: 40px 24px; text-align: center; }
.fun-intro-copy { max-width: 560px; margin: 0; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.3; letter-spacing: -.02em; font-weight: 400; }
.fun-intro-word { display: inline-block; animation: fun-word-in .9s cubic-bezier(.44,0,.56,1) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes fun-word-in { from { opacity: 0; filter: blur(10px); transform: translateY(10px); } to { opacity: 1; filter: blur(0); transform: none; } }
.fun-start { padding: 14px 36px; border-radius: 999px; background: #111; color: #fff; font-size: 15px; animation: fun-word-in .9s cubic-bezier(.44,0,.56,1) both; animation-delay: 1.15s; transition: transform .2s var(--ease), background .2s ease; }
.fun-start:hover { background: #000; transform: translateY(-1px); }
.fun-start:focus-visible { outline: 2px solid #111; outline-offset: 4px; }
.fun-intro[hidden] { display: none; }
/* The introduction is a single centred screen, so it drops the pane's reading gutter. */
.content-pane[data-view="fun"]:not(:has(.game-panel)) { padding-bottom: 48px; }
/* The game runs in the page, beside the navigation, rather than over it. */
.game-panel { display: flex; flex-direction: column; gap: 14px; margin: 8px 0 40px; animation: fun-word-in .5s ease both; }
.game-frame-shell { position: relative; width: 100%; aspect-ratio: 16 / 10; min-height: 420px; max-height: calc(100vh - 220px); border-radius: var(--radius-surface); overflow: hidden; background: #111922; box-shadow: 0 18px 50px -24px #0d1b2a55; }
.game-frame-shell:fullscreen { aspect-ratio: auto; max-height: none; border-radius: 0; }
.game-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.game-frame:focus { outline: none; }
.game-frame-shell:has(.game-frame:focus-visible) { outline: 2px solid #111; outline-offset: 3px; }
.game-panel-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.game-panel-note { margin: 0; font-size: 13px; line-height: 1.5; color: #707070; }
.game-panel-note kbd { font: 11px system-ui; padding: 2px 5px; border: 1px solid #dcdcdc; border-radius: 4px; background: #fafafa; }
.game-panel-actions { display: flex; gap: 8px; }
.game-panel-actions button { padding: 9px 16px; border-radius: 999px; border: 1px solid #e2e2e2; background: #fff; font-size: 13px; color: #333; transition: background .2s ease, border-color .2s ease; }
.game-panel-actions button:hover { background: #f4f4f4; border-color: #d2d2d2; }
.game-panel-actions button:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
@media (max-width: 760px) { .game-frame-shell { aspect-ratio: 4 / 5; min-height: 380px; } }
@media (prefers-reduced-motion: reduce) { .fun-intro-word, .fun-start, .game-panel { animation: none; } }