/* Hallmark · shape: artwork gallery and index · genre: editorial · theme: custom · job: hire · idea: "A change of focus turns the artwork into the introduction" · vibe: "quiet framing deliberate scale photographic detail"
 * paper: oklch(96% 0.008 240) · accent: oklch(37% 0.12 255) · display: Avenir Next · body: Helvetica Neue · hero: Focus eye crop to complete poster · nav: edge aligned · footer: project index return · imagery: user artwork · signature: Focus pullback
 * axes: light/grotesk/neutral · posture: Restrained · contrast: checked · fold: checked · v2.0.0 */
/* Hallmark · hero-review: in-thread, mobile word spacing and eye crop resolved · finish-review: in-thread, skip focus and narrow controls resolved */
/* Hallmark · pre-emit critique: artwork leads, missing identity omitted · weakest: static media, resolved through a scroll-linked crop */
/* Hallmark · waive 59 · individual project pages pair artwork with short captions · Keep captions beside their subject instead of separating them by a marketing section gap */
/* Hallmark · waive 77 · artwork gallery with index and standalone project captions · The material is fourteen projects; added marketing sections would invent content */
/* Hallmark · waive 83 · user requested a designer portfolio with ten original images · Photographs and posters are the portfolio content, so they must dominate the pages */
/* Hallmark · answered F8 · The Focus window and its caption use the same timeline as one coordinated pullback; no second scroll story exists. */
@import url('./fonts.css');
@import url('./tokens.css');
@import url('./base.css');
@import url('./page-loader.css');
@import url('./symbol.css');

html {scroll-behavior:smooth;}
body {font-synthesis:none;}
a,button {-webkit-tap-highlight-color:transparent;}
a {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active,button:active {opacity:.65;}
button {color:inherit;cursor:pointer;}
button:disabled {opacity:.35;cursor:not-allowed;}
.skip {position:fixed;top:var(--space-md);left:var(--space-md);padding:var(--space-md);background:var(--color-ink);color:var(--color-paper);z-index:var(--z-modal);transform:translateY(-200%);}
.skip:focus {transform:none;}
.site-header {position:absolute;top:0;left:0;right:0;z-index:var(--z-sticky-nav);height:88px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);}
.wordmark {font-size:var(--text-lg);font-weight:500;letter-spacing:-.04em;}
.site-header nav {display:flex;gap:var(--space-lg);align-items:center;}
.site-header a {display:inline-flex;align-items:center;min-height:48px;white-space:nowrap;}
.site-header .nav-current {text-decoration:underline;text-underline-offset:.4em;}
.hero {position:relative;}
.hero-stage {height:100svh;min-height:700px;position:relative;max-width:var(--container);margin-inline:auto;}
.hero-title {position:absolute;left:var(--gutter);bottom:var(--space-2xl);font-size:var(--text-display);line-height:.96;letter-spacing:-.065em;font-weight:400;z-index:var(--z-raised);}
.hero-title span {display:block;}
.hero-note {position:absolute;right:var(--gutter);bottom:var(--space-2xl);max-width:230px;}
.hero-note p {margin-bottom:var(--space-md);}
.text-link {display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:.3em;}
.focus-window {position:absolute;top:15%;left:25%;width:50%;height:62%;overflow:hidden;}
.focus-window img {width:100%;height:100%;object-fit:contain;transform-origin:50% 31%;}
.focus-credit {position:absolute;top:17%;left:var(--gutter);font-size:var(--text-sm);max-width:130px;}
.focus-credit span {display:block;color:var(--color-muted);margin-top:var(--space-xs);}
.hero-progress {position:absolute;bottom:var(--space-lg);left:var(--gutter);right:var(--gutter);border-top:1px solid var(--color-rule);display:flex;justify-content:space-between;padding-top:var(--space-xs);font-size:var(--text-sm);color:var(--color-muted);}
@supports (animation-timeline:view()) {
 @media (prefers-reduced-motion:no-preference) and (min-width:40rem) {
  .hero {height:210svh;view-timeline-name:--focus;view-timeline-axis:block;}
  .hero-stage {position:sticky;top:0;}
  .focus-window {left:16%;width:68%;clip-path:inset(28% 0 28%);animation:focus-frame linear both;animation-timeline:--focus;animation-range:contain 0% contain 80%;}
  .focus-window img {transform:scale(2.65);animation:focus-pullback linear both;animation-timeline:--focus;animation-range:contain 0% contain 80%;}
  .hero-title,.hero-note {animation:focus-caption linear both;animation-timeline:--focus;animation-range:contain 30% contain 70%;}
  @keyframes focus-frame {to{clip-path:inset(0 0 0);}}
  @keyframes focus-pullback {to{transform:scale(1);}}
  @keyframes focus-caption {to{opacity:0;transform:translateY(16px);}}
 }
}
.gallery {padding-block:var(--space-3xl);}
.section-head {display:flex;justify-content:space-between;align-items:end;gap:var(--space-lg);margin-bottom:var(--space-xl);}
.section-head h2 {font-size:var(--text-section);line-height:1;letter-spacing:-.055em;font-weight:400;}
.gallery-tools {display:flex;align-items:center;gap:var(--space-lg);}
.gallery-count {font-variant-numeric:tabular-nums;color:var(--color-muted);}
.arrow-button {width:48px;height:48px;border:1px solid var(--color-rule);background:transparent;display:inline-grid;place-items:center;font-size:24px;}
.arrow-button:hover {background:var(--color-paper-2);}
.gallery-buttons {display:flex;gap:var(--space-xs);}
.gallery-track {display:flex;gap:var(--space-lg);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:var(--gallery-gutter);scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain;}
.gallery-track::-webkit-scrollbar {display:none;}
.project-slide {flex:0 0 min(78vw,1152px);scroll-snap-align:center;min-width:0;}
.slide-media {height:min(67vw,620px);display:flex;align-items:center;justify-content:center;background:var(--color-paper-2);overflow:hidden;position:relative;}
.slide-media img {width:100%;height:100%;object-fit:contain;}
.project-slide[data-project='capsule'] .slide-media {background:var(--color-night);color:var(--color-night-ink);}
.project-slide[data-project='capsule'] .slide-media img {width:78%;height:auto;}
.project-slide[data-project='fireworks'] .slide-media {background:var(--color-night);color:var(--color-night-ink);}
.project-slide[data-project='liquid'] .slide-media img {padding:var(--space-xl);}
.slide-caption {display:flex;justify-content:space-between;align-items:start;gap:var(--space-lg);padding-top:var(--space-lg);}
.slide-caption h3 {font-size:32px;line-height:1.1;font-weight:400;letter-spacing:-.04em;}
.slide-caption p {color:var(--color-muted);margin-top:var(--space-xs);font-size:var(--text-sm);}
.slide-caption .text-link {white-space:nowrap;}
.gallery-bottom {display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-xl);}
.gallery-markers {display:flex;gap:var(--space-xs);}
.marker {padding:0;width:64px;height:48px;border:0;border-bottom:2px solid transparent;background:none;opacity:.45;}
.marker img {height:40px;width:56px;object-fit:cover;}
.marker[aria-pressed='true'] {opacity:1;border-color:var(--color-ink);}
.marker:hover {opacity:1;}
.index {padding-block:var(--space-3xl);}
.index-heading {font-size:clamp(5rem,16vw,14rem);font-weight:400;letter-spacing:-.075em;line-height:.9;}
.index-top {display:flex;align-items:end;justify-content:space-between;gap:var(--space-lg);margin-bottom:var(--space-2xl);}
.index-top p {color:var(--color-muted);}
.filters {display:flex;gap:var(--space-xs);flex-wrap:wrap;margin-bottom:var(--space-xl);}
.filter {min-height:44px;border:0;border-bottom:1px solid transparent;background:transparent;padding:var(--space-xs) var(--space-md);color:var(--color-muted);}
.filter:first-child {padding-left:0;}
.filter:hover {color:var(--color-ink);}
.filter[aria-pressed='true'] {color:var(--color-ink);border-color:var(--color-ink);}
.index-group {display:grid;grid-template-columns: minmax(170px,1fr) minmax(0,3fr);gap:var(--gap-columns);border-top:1px solid var(--color-rule);padding-block:var(--space-xl);}
.group-title {font-size:var(--text-lg);font-weight:400;max-width:14ch;line-height:1.3;}
.project-list {list-style:none;padding:0;margin:0;}
.project-row {display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:var(--space-lg);align-items:center;min-height:96px;padding-block:var(--space-sm);}
.project-row img {width:76px;height:64px;object-fit:cover;}
.project-row .project-name {font-size:clamp(1.25rem,2.2vw,2rem);line-height:1.2;letter-spacing:-.035em;word-break:keep-all;overflow-wrap:anywhere;}
.project-row .row-kind {font-size:var(--text-sm);color:var(--color-muted);}
.project-row:hover {text-decoration:none;color:var(--color-accent);}
.pending {color:var(--color-muted);padding-top:var(--space-xs);}
.site-footer {border-top:1px solid var(--color-rule);padding-block:var(--space-xl);display:flex;justify-content:space-between;align-items:center;gap:var(--space-lg);font-size:var(--text-sm);}
.about {padding-block:var(--space-3xl);max-width:65ch;}
.about h2 {font-size:var(--text-section);font-weight:400;margin-bottom:var(--space-lg);}
.project-page {padding-top:var(--space-4xl);}
.project-heading {display:grid;grid-template-columns:1fr 2fr;gap:var(--gap-columns);padding-bottom:var(--space-2xl);align-items:end;}
.project-heading h1 {font-size:clamp(3rem,6vw,6rem);font-weight:400;line-height:1;letter-spacing:-.05em;word-break:keep-all;overflow-wrap:anywhere;}
.project-meta p {color:var(--color-muted);margin-bottom:var(--space-md);}
.project-description {padding-block:var(--space-xl);display:grid;grid-template-columns:1fr 2fr;gap:var(--gap-columns);}
.project-description p {max-width:50ch;font-size:var(--text-lg);}
.artwork {background:var(--color-paper-2);padding:var(--space-xl);display:grid;place-items:center;}
.artwork img {max-height:calc(100svh - 100px);width:auto;max-width:100%;object-fit:contain;}
.artwork-grid {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-lg);margin-top:var(--space-lg);}
.artwork-grid figure {margin:0;background:var(--color-night);color:var(--color-night-ink);}
.artwork-grid img {width:100%;height:auto;}
.artwork-grid figcaption {padding:var(--space-md);font-size:var(--text-sm);}
.player {position:relative;aspect-ratio:16/9;background:var(--color-night);color:var(--color-night-ink);display:grid;place-items:center;}
.player>img {position:absolute;width:100%;height:100%;object-fit:contain;opacity:.7;}
.play-button {position:relative;z-index:var(--z-raised);border:0;background:var(--color-paper);color:var(--color-ink);min-height:52px;padding:var(--space-sm) var(--space-lg);}
.play-button:hover {background:var(--color-paper-2);}
.player iframe {width:100%;height:100%;position:absolute;inset:0;border:0;}
.next-project {display:flex;justify-content:space-between;gap:var(--space-lg);padding-block:var(--space-2xl);align-items:center;}
.next-project p {font-size:clamp(1.5rem,3vw,2.5rem);letter-spacing:-.04em;max-width:45ch;word-break:keep-all;}
.next-project a {white-space:nowrap;}
@media (max-width:60rem) {
 .hero-stage {min-height:700px;}
 .hero-title {font-size:clamp(3.5rem,9vw,6rem);bottom:100px;}
 .hero-note {max-width:190px;bottom:100px;}
 .focus-window {top:18%;height:54%;}
 .focus-credit {top:12%;}
 .index-group {grid-template-columns:minmax(0,1fr) minmax(0,3fr);}
 .project-heading {grid-template-columns:minmax(0,1fr);gap:var(--space-lg);}
 .project-description {grid-template-columns:minmax(0,1fr);}
}
@media (max-width:40rem) {
 .site-header {height:76px;}
 .site-header nav {gap:var(--space-md);}
 .hero-stage {height:auto;min-height:820px;}
 .focus-window {top:112px;left:var(--gutter);width:calc(100% - 2 * var(--gutter));height:470px;}
 .focus-credit {top:590px;left:var(--gutter);max-width:none;}
 .focus-credit span {display:inline;margin-left:var(--space-sm);}
 .hero-title {font-size:56px;bottom:104px;line-height:.95;}
 .hero-title span {display:inline;}
 .hero-note {bottom:var(--space-xl);left:var(--gutter);right:auto;max-width:none;}
 .hero-note p {display:none;}
 .hero-progress {display:none;}
 .section-head {align-items:center;}
 .section-head h2 {font-size:40px;}
 .gallery-tools {gap:var(--space-sm);}
 .gallery-count {display:none;}
 .project-slide {flex-basis:88vw;}
 .gallery-track {--gallery-gutter:6vw;}
 .slide-media {height:480px;}
 .project-slide[data-project='capsule'] .slide-media img {width:100%;}
 .project-slide[data-project='liquid'] .slide-media img {padding:var(--space-lg);}
 .slide-caption h3 {font-size:28px;}
 .slide-caption {gap:var(--space-sm);}
 .slide-caption .text-link {font-size:var(--text-sm);}
 .gallery-bottom {align-items:end;}
 .gallery-bottom>.text-link {font-size:var(--text-sm);}
 .index-top {align-items:start;flex-direction:column;margin-bottom:var(--space-xl);}
 .filters {column-gap:var(--space-md);row-gap:0;}
 .filter {padding-inline:0;font-size:var(--text-sm);}
 .index-group {grid-template-columns:minmax(0,1fr);gap:var(--space-md);padding-block:var(--space-lg);}
 .group-title {max-width:none;}
 .project-row {grid-template-columns:56px minmax(0,1fr);gap:var(--space-md);min-height:88px;}
 .project-row img {width:56px;height:56px;}
 .project-row .row-kind {grid-column:2;margin-top:calc(-1 * var(--space-sm));}
 .project-page {padding-top:112px;}
 .project-heading {padding-bottom:var(--space-xl);}
 .artwork {padding:var(--space-md);}
 .artwork-grid {grid-template-columns:minmax(0,1fr);}
 .next-project {flex-direction:column;align-items:start;}
 .site-footer {align-items:start;}
}
@media (prefers-reduced-motion:reduce) {html {scroll-behavior:auto;}.hero {height:auto;}.hero-stage {position:relative;}.focus-window {clip-path:none;}.focus-window img {transform:none;}.hero-title,.hero-note {opacity:1;transform:none;}}
@media(max-width:40rem){.site-header{height:112px;display:block;padding-top:var(--space-sm);}.site-header .wordmark{min-height:36px;}.site-header nav{justify-content:space-between;gap:var(--space-xs);font-size:11px;}.project-page{padding-top:148px;}}

/* Liquid / 01: supplied process stills retain their full proportions. */
.making-of{margin-block:var(--space-3xl);border-top:1px solid var(--color-rule);padding-top:var(--space-2xl);}
.making-heading{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-lg);margin-bottom:var(--space-xl);}
.making-heading h2{font-size:var(--text-section);line-height:1.1;letter-spacing:-.04em;min-width:0;overflow-wrap:break-word;margin:0;}
.making-heading>p{color:var(--color-muted);font-size:var(--text-sm);}
.making-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2xl) var(--space-lg);}
.making-item{margin:0;min-width:0;}
.making-item>a{display:block;}
.making-item img{display:block;width:100%;height:auto;}
.making-item figcaption{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-lg);padding-top:var(--space-lg);}
.making-item figcaption>span{color:var(--color-muted);font-size:var(--text-sm);}
.making-item h3{font-size:var(--text-lg);font-weight:500;margin:0 0 var(--space-xs);}
.making-item p{margin:0;color:var(--color-muted);max-width:48ch;}
.making-wide{grid-column:1/-1;}
@media(max-width:600px){.making-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-xl);}.making-heading{align-items:start;flex-direction:column;gap:var(--space-sm);}.making-of{margin-block:var(--space-2xl);padding-top:var(--space-xl);}}

:root{--color-focus:var(--color-ink);}
::selection{background:var(--color-ink);color:var(--color-paper);}

.gameplay-section{margin-block:var(--space-2xl);}
.gameplay-section h2{font-size:clamp(32px,5vw,64px);margin-bottom:var(--space-lg);}
.gameplay-video{display:block;width:100%;aspect-ratio:1440/792;background:var(--color-ink);}
.gameplay-video:focus-visible{outline:2px solid currentColor;outline-offset:5px;}
.gameplay-section>p{margin-top:var(--space-md);}