/* Desktop margins are twice column gaps; mobile keeps a comfortable 12px gap. */
:root{--gutter:40px;--content-inset:var(--gutter);--grid-gap:20px}
.home-page .project-grid,.hero-layout,
.case-gallery,.case-heading,.case-subtitle,.case-overview,.section-heading,
.project-details .details-grid,.project-details .details-toolbar-grid,
.about-page .about-overview,.about-page .about-expertise,
.about-page .experience-row,.about-page .award-row,.about-page .about-background,
.case-facts,.footer-main-links,.footer-bottom{column-gap:var(--grid-gap)}

/* Content must be allowed to shrink inside the narrower case columns. */
.case-page .case-heading>*,.case-page .section-heading>*,
.case-page .case-overview>*,.case-page .case-facts>*,
.case-page .case-gallery>*,.project-details .details-grid>*{min-width:0;max-width:100%}
.case-page .overview-copy,.case-page .case-facts,
.case-page .chapter-description,.case-page .case-heading h1,
.case-page .section-heading h2,.case-page .case-figure figcaption,
.project-details .details-copy,.project-details .details-meta{overflow-wrap:anywhere}
.case-page main .text-motion .motion-word,
.project-details .details-copy .motion-word{max-width:100%;white-space:normal;overflow-wrap:anywhere}
/* Long Back labels must share the available width with Next Case, not widen the page. */
.case-page .case-navigation{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--grid-gap)}
.case-page .case-navigation>a{min-width:0;max-width:100%;overflow-wrap:anywhere}
.case-page .case-navigation .link-scramble-run,
.case-page .case-navigation .link-scramble-output{max-width:100%;white-space:normal;overflow-wrap:anywhere}
/* A long case title yields space to the independently scrollable chapter links. */
.case-page .chapter-title{flex:0 1 auto;min-width:0;max-width:45%;overflow:hidden;text-overflow:ellipsis}

@media(max-width:650px){:root{--gutter:20px;--grid-gap:12px}}

/* Shared display scale across page introductions, details and footer links. */
:root{--type-display-title:96px}
@media(max-width:650px){:root{--type-display-title:56px}}
@media(min-width:1800px){:root{--type-display-title:112px}}
@media(min-width:1921px){:root{--type-display-title:120px}}
.home-page .hero h1,.case-page .case-heading h1,
.project-details .details-grid>h2,.footer-main-links .contact-heading{font-size:var(--type-display-title)}
.about-page .about-heading h1{font-size:min(var(--type-display-title),15.7cqi)}
/* Keep footer labels within their columns on intermediate widths. */
@media(min-width:768px){
 .footer-main-links .contact-heading{font-size:min(var(--type-display-title),4cqi)}
}

/* Large introductions use the site's primary ink. */
.about-page .about-overview>.about-description,
.case-page .overview-copy,.case-page .overview-copy .intro,
.case-page .overview-copy .overview-details,.case-page .overview-copy>ul,
.project-details .details-intro{color:var(--fg)}

/* Shared subheadings use the original Helvetica Now Display Medium face. */
.about-page .about-expertise article h2,.about-page .experience-row h3,
.details-section h3,.result-copy h3{font-weight:500}

/* Section headings share the same one-step weight increase as subheadings. */
.work>h2,.web-work>h2,.case-page .section-heading h2,
.about-page .about-section-title,.about-page .about-background h2,
.case-result-group h2{font-weight:600}

/* The hero no longer has supporting copy: use one gap before its action. */
.home-page .hero-layout{row-gap:24px}
.home-page .hero .explore{margin-top:0}


/* Uncaptioned gallery rows use the same spacing vertically and horizontally. */
.case-page .case-gallery{--caption-row-gap:24px;row-gap:var(--grid-gap)}
.case-page .case-gallery>.case-figure:has(>figcaption:not(:empty)){
 margin-bottom:max(0px,calc(var(--caption-row-gap) - var(--grid-gap)));
}
@media(max-width:650px){.case-page .case-gallery{--caption-row-gap:28px}}

/* About section titles return to section scale; expertise keeps its current size. */
.about-page .about-section-title{font-size:var(--type-section-title);line-height:1.12;letter-spacing:-.025em;font-weight:600}
.about-page .about-expertise article h2{font-size:var(--type-section-title);line-height:1.12;letter-spacing:-.025em;font-weight:500}

/* Home chapter headings retain the section scale below the page H1. */
.home-page .work>h2,.home-page .web-work>h2{
 font-size:var(--type-section-title);font-weight:600;line-height:1.12;letter-spacing:-.025em;
}
/* Intro and work spacing; the Home divider is intentionally removed. */
.home-page .hero{padding-bottom:48px;border-bottom:0}
.home-page #work{padding-top:48px}

/* One consistent original Medium weight for Home and About section/category headings. */
.home-page .work>h2,.home-page .web-work>h2,
.about-page .about-section-title,.about-page .about-background h2,
.about-page .about-expertise article h2{font-weight:500}

/* Case section headings share the original Medium weight used on Home and About. */
.case-page .section-heading h2,.case-page .case-result-group h2{font-weight:500}

/* Tall Home introduction: reserve a 100px glimpse of the first project row. */
.home-page{
 --home-preview-peek:100px;
 --home-divider-gap:32px;
 --home-work-peek:calc(var(--home-divider-gap) + var(--type-section-title) * 1.12 + var(--home-heading-gap,64px) + var(--home-preview-peek));
}
.home-page .hero{
 min-height:0;
 display:flex;flex-direction:column;justify-content:center;
 padding-block:80px;
}
@media(max-width:650px){.home-page .hero{padding-block:64px}}
.home-page .hero-layout{width:100%;flex:none}
.home-page #work{padding-top:var(--home-divider-gap)}

/* Shared category introductions: title left, concise supporting copy right. */
.home-page .home-section-heading{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--grid-gap);row-gap:16px;
 align-items:start;margin-bottom:var(--home-heading-gap,64px);
}
.home-page .home-section-heading>h2{
 min-width:0;max-width:100%;margin:0;font-size:var(--type-section-title);
 font-weight:500;line-height:1.12;letter-spacing:-.025em;color:var(--fg);
}
.home-page .home-section-description{
 min-width:0;margin:0;padding-inline-end:var(--copy-end-space);font-size:var(--type-body);
 line-height:1.4;letter-spacing:-.01em;color:var(--muted);
}
.home-page{--home-work-peek:calc(var(--home-divider-gap) + var(--home-work-heading-height,var(--type-section-title) * 1.12) + var(--home-heading-gap,64px) + var(--home-preview-peek))}
@media(max-width:650px){
 .home-page .home-section-heading{grid-template-columns:minmax(0,1fr)}
 .home-page .home-section-description{padding-inline-end:0}
}

/* More legible category copy and more separation between Home chapters. */
.home-page .home-section-description{font-size:var(--type-subheading);line-height:1.3;font-weight:500}
.home-page .web-work{padding-top:160px}
@media(max-width:650px){.home-page .web-work{padding-top:112px}}

/* Category introductions are quiet editorial copy, separate from heading typography. */

.home-page .home-section-description{
 font-family:'Helvetica Now Display','Helvetica Neue',Arial,sans-serif;
 font-size:20px;font-weight:500;line-height:1.4;letter-spacing:-.01em;
}

/* Larger image captions; grey supporting lines use the genuine Regular face. */
:root{--type-card-title:18px}
@media(min-width:1800px){:root{--type-card-title:20px}}
@media(min-width:1921px){:root{--type-card-title:24px}}
.home-page .project-copy h3,.home-page .wide .project-copy h3,
.home-page .project-description,.home-page .wide .project-description,
.case-page .case-figure figcaption{font-size:var(--type-card-title)}
.home-page .project-description,.home-page .wide .project-description,
.case-page .case-figure figcaption{
 font-family:'Helvetica Now Display','Helvetica Neue',Arial,sans-serif;font-weight:500;
}

/* A little more breathing room between artwork and its caption. */
.home-page .project-caption{padding-top:14px}
.case-page .case-figure figcaption{margin-top:12px}

/* About illustration captions share the Home/case supporting-copy role. */
.about-page .about-expertise article>p{
 font-family:'Helvetica Now Display','Helvetica Neue',Arial,sans-serif;
 font-size:var(--type-card-title);font-weight:500;line-height:1.4;
}
.about-page .about-expertise .expertise-visual{margin-bottom:24px}

/* A centred brand statement between game interfaces and web special projects. */
.home-page .home-promo{
 min-height:calc(100svh - var(--main-header-height,52px) - var(--home-work-peek) + 96px);
 padding-block:144px;display:grid;place-items:center;text-align:center;
}
.home-page .home-promo>h2{
 max-width:1400px;width:100%;margin:0;font-family:var(--font-heading,'Helvetica Now Display',sans-serif);
 font-size:var(--type-display-title);font-weight:500;line-height:1.05;letter-spacing:-.035em;
 color:var(--fg);text-wrap:balance;
}
.home-page .home-promo>h2{color:var(--fg)}
.home-page .home-promo .promo-accent{color:var(--muted)}
.home-page .home-promo+#special-projects,.home-page .home-promo+#creative-work{padding-top:0}
@media(max-width:650px){.home-page .home-promo{padding-block:112px}}

/* Divider between Web Special Projects and Websites, within the existing section gap. */
.home-page .home-section-divider{height:0;padding:0;border:0;border-top:1px solid var(--line);margin-block:80px 0}
.home-page .home-section-divider+#website-work{padding-top:80px}
@media(max-width:650px){
 .home-page .home-section-divider{margin-top:56px}
 .home-page .home-section-divider+#website-work{padding-top:56px}
}

/* Shorter promotional statements use a larger, dedicated display scale. */
.home-page .home-promo>h2{font-family:var(--font-copy,'Helvetica Now Display',sans-serif);font-weight:500;font-size:88px;max-width:1400px}
@media(max-width:650px){.home-page .home-promo>h2{font-size:64px}}
@media(min-width:1800px){.home-page .home-promo>h2{font-size:104px}}
@media(min-width:1921px){.home-page .home-promo>h2{font-size:112px}}

/* More separation between category introductions and their preview rows. */
.home-page{--home-heading-gap:48px}
@media(max-width:650px){.home-page{--home-heading-gap:32px}}

/* Creative work: two equal lead cards, followed by three equal closing cards. */
@media(min-width:651px){
 .home-page .project-grid.creative-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
 .home-page .creative-grid>.project:nth-child(-n+2){grid-column:span 3}
 .home-page .creative-grid>.project:nth-child(n+3){grid-column:span 2}
}

/* Only the closing To the Stars cover is cropped to a 16:9 preview. */
.home-page .project-grid [data-project="creative-to-the-stars-art-direction"] .project-media{aspect-ratio:16/9;height:auto;overflow:hidden}
.home-page .project-grid [data-project="creative-to-the-stars-art-direction"] .project-media>img{
 position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
}

/* A compact introduction with a scale between section headings and promo text. */
.home-page .hero h1{
 font-family:var(--font-heading,'Helvetica Now Display',sans-serif);font-weight:500;
 font-size:56px;line-height:1.12;letter-spacing:-.025em;text-align:left;
}
@media(max-width:650px){.home-page .hero h1{font-size:44px}}
@media(min-width:1800px){.home-page .hero h1{font-size:64px}}

/* Game UX/UI: two lead previews, then three equal previews filling the row. */
@media(min-width:651px){
 .home-page #work>.project-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
 .home-page #work>.project-grid>.project:nth-child(-n+2){grid-column:span 3}
 .home-page #work>.project-grid>.project:nth-child(n+3){grid-column:span 2}
}

/* A quiet centred introduction, followed by a separate showreel. */
.home-page .hero.has-showreel{
 position:relative;display:flex;flex-direction:column;justify-content:flex-start;
 width:100%;height:auto;min-height:0;margin:0;padding:0;background:var(--bg);
}
.home-page .hero.has-showreel .hero-layout{
 order:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
 width:100%;min-height:0;
 margin:0;padding:48px var(--gutter);gap:24px;text-align:center;
}
.home-page .hero.has-showreel .hero-layout>h1{
 width:100%;max-width:1200px;margin:0;
 font-family:var(--font-copy,'Helvetica Now Display',sans-serif);font-size:var(--type-display-title);font-weight:500;
 line-height:1.04;letter-spacing:-.035em;text-align:center;mix-blend-mode:normal;
}
.home-page .hero.has-showreel h1,.home-page .hero.has-showreel h1 span{color:var(--fg)}
.home-page .hero.has-showreel .hero-copy{width:auto;max-width:none;margin:0;padding:0;align-self:center}
.home-page .home-reel{
 order:1;position:relative;width:calc(100% - 2 * var(--gutter));aspect-ratio:16/9;height:auto;max-height:none;
 margin:0 var(--gutter) 64px;overflow:hidden;border-radius:var(--media-radius,12px);
 background:#080808 url('/assets/exverse-playtest.jpg') center/cover no-repeat;
}
.home-page .home-reel-poster{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s ease}
.home-page .home-reel iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:0;pointer-events:none}
.home-page .home-reel.is-playing .home-reel-poster{opacity:0}
@media(min-width:1800px){.home-page .hero.has-showreel .hero-layout>h1{max-width:1440px}}
@media(max-width:767px){
 .home-page .hero.has-showreel .hero-layout{min-height:0;padding-block:32px;gap:24px}
 .home-page .hero.has-showreel .hero-layout>h1{font-size:var(--type-display-title)}
 .home-page .home-reel{margin-bottom:48px}
}

@media(max-height:500px){.home-page .hero.has-showreel .hero-layout{padding-block:40px;min-height:0}.home-page .hero.has-showreel .hero-layout>h1{font-size:40px}}
@media(prefers-reduced-motion:reduce){.home-page .home-reel-poster{transition:none}}

/* Shared centred page introductions; H1 grows while the surrounding block gets shorter. */
.home-page .hero.has-showreel .hero-copy{width:100%;max-width:960px}
body.home-page main .hero-description{font-size:var(--type-intro);line-height:1.2;margin:0;padding:0;text-align:center}
.about-page .about-page-title{display:flex;justify-content:center;padding-block:48px;text-align:center}
.about-page .about-page-title h1{width:100%;max-width:1440px;font-family:var(--font-copy);font-size:var(--type-display-title);font-weight:500;line-height:1.08;letter-spacing:-.035em;text-align:center}
.about-page .about-hero{padding-top:32px}
.about-page .about-bio .about-location{margin-top:0}
@media(max-width:767px){.about-page .about-page-title{padding-block:32px}.about-page .about-hero{padding-top:24px}}
/* Navigation controls retain their function with compact word labels. */
.gallery .gallery-prev,.gallery .gallery-next{font-size:16px;line-height:1.2}

/* One left-aligned reading edge for mobile content and promotional statements. */
@media(max-width:767px){
 .home-page .hero.has-showreel .hero-layout{align-items:flex-start;text-align:left}
 .home-page .hero.has-showreel .hero-layout>h1{text-align:left}
 .home-page .hero.has-showreel .hero-copy{align-self:stretch}
 body.home-page main .hero-description{text-align:left}
 .home-page .home-promo{justify-items:start;text-align:left}
 .home-page .home-promo>h2{text-align:left}
 body :is(main,.site-footer,.project-details) :is(h1,h2,h3,p,li,dt,dd,figcaption){text-align:left!important}
}