@charset "UTF-8";
:root {
    --bg:#040b11;
    --surface:#0b1823;
    --text:#edf3f6;
    --muted:#acbecb;
    --line:#233744;
    --blue:#42bdff;
    --amber:#ff963f;
    --accent:var(--blue);
    color-scheme:dark;
    font-family:Inter,"Segoe UI",Arial,sans-serif;
    font-synthesis:none;
    scroll-behavior:smooth;
    scroll-padding-top:110px
}
* {
    box-sizing:border-box
}
body {
    margin:0;
    background:radial-gradient(ellipse 60% 600px at 88% 180px, #18394c32, transparent), radial-gradient(ellipse 45% 480px at 0% 900px, #b15b2409, transparent), var(--bg);
    color:var(--text);
    font-size:16px;
    line-height:1.65
}
a {
    color:inherit;
    text-decoration:none
}
button {
    font:inherit;
    cursor:pointer
}
img,video {
    display:block;
    max-width:100%;
    height:auto
}
img {
    object-fit:cover
}
h1,h2,h3,p {
    margin:0 0 1rem
}
h1,h2,h3 {
    line-height:1.1;
    letter-spacing:-.045em;
    font-weight:650
}
h1 {
    font-size:clamp(2.7rem,5vw,4.8rem)
}
h2 {
    font-size:clamp(2rem,3.2vw,3rem)
}
h3 {
    font-size:1.35rem;
    letter-spacing:-.025em
}
p {
    color:var(--muted)
}
:focus-visible {
    outline:3px solid var(--amber);
    outline-offset:5px
}
::selection {
    background:#83bdff;
    color:#102137
}
.shell {
    width:min(1240px,calc(100% - 96px));
    margin-inline:auto
}
.section {
    padding-block:78px
}
.eyebrow {
    font:600 .72rem/1.5 Consolas,monospace;
    letter-spacing:.14em;
    color:var(--accent);
    margin-bottom:22px
}
.site-header {
    border-bottom:1px solid var(--line);
    background:#040a10f5;
    position:sticky;
    top:0;
    z-index:20
}
.nav-wrap {
    min-height:92px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px
}
.brand {
    display:flex;
    align-items:center;
    gap:14px;
    font-size:.78rem;
    letter-spacing:.1em;
    font-weight:700;
    line-height:1.5;
    flex-shrink:0
}
.brand-mark {
    font-size:2rem;
    letter-spacing:-.12em;
    border:1px solid #60738d;
    padding:0 10px 5px 7px;
    line-height:1.1
}
.brand-mark span {
    color:var(--amber)
}
.brand-sub {
    display:block;
    font:500 .55rem/1.7 Consolas,monospace;
    color:var(--muted);
    letter-spacing:.12em
}
.site-nav {
    display:flex;
    align-items:center;
    gap:30px;
    font-size:.87rem
}
.site-nav a {
    padding:12px 0
}
.site-nav a:hover,.site-nav a[aria-current] {
    color:var(--blue)
}
.site-nav .nav-resume {
    border-left:1px solid var(--line);
    padding-left:25px
}
.nav-resume span {
    color:var(--amber);
    margin-left:14px
}
.nav-toggle {
    display:none
}
.skip-link {
    position:fixed;
    top:-100px;
    left:20px;
    z-index:100;
    background:var(--amber);
    color:var(--bg);
    padding:12px 20px
}
.skip-link:focus {
    top:12px
}
.home-hero {
    display:grid;
    grid-template-columns:1.1fr 1fr;
    align-items:center;
    gap:42px;
    padding-block:62px
}
.hero-copy h1 {
    font-size:clamp(2.7rem,4.3vw,4.25rem);
    line-height:1.08
}
.hero-copy h1>span {
    color:var(--blue)
}
.hero-copy .eyebrow {
    font-size:.66rem;
    display:flex;
    align-items:center;
    gap:12px
}
.small-line {
    width:26px;
    height:2px;
    background:var(--blue)
}
.hero-intro {
    max-width:480px;
    font-size:1.05rem;
    margin:24px 0 30px
}
.actions {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:24px
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:26px;
    min-height:50px;
    padding:12px 22px;
    font-size:.85rem;
    font-weight:650;
    border:1px solid var(--line);
    border-radius:3px;
    transition:background .2s,transform .2s
}
.button.primary {
    background:var(--amber);
    color:#162237;
    border-color:var(--amber)
}
.button:hover {
    background:#ffd0a3;
    color:#162237;
    transform:translateY(-2px)
}
.text-link {
    display:inline-flex;
    gap:22px;
    align-items:center;
    font-size:.9rem;
    font-weight:600;
    padding-block:10px;
    border-bottom:1px solid #61738a
}
.text-link:hover {
    color:var(--amber);
    border-color:var(--amber)
}
.hero-tools {
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    color:#a1b5cf;
    font:500 .65rem/1.5 Consolas,monospace;
    letter-spacing:.09em;
    margin-top:38px
}
.hero-art {
    position:relative;
    display:block;
    min-width:0;
    border:1px solid #42637e;
    border-radius:4px;
    overflow:hidden;
    background:#0b2337
}
.hero-art img {
    width:100%;
    aspect-ratio:1/1.04;
    transition:transform .5s
}
.hero-art:hover img {
    transform:scale(1.025)
}
.hero-art:after {
    content:"";
    position:absolute;
    inset:45% 0 0;
    background:linear-gradient(transparent,#091b2df0);
    pointer-events:none
}
.art-top,.art-bottom {
    position:absolute;
    left:26px;
    right:26px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    z-index:1
}
.art-top {
    top:24px;
    font:500 .58rem/1.5 Consolas,monospace;
    letter-spacing:.1em
}
.status {
    display:inline-flex;
    align-items:center;
    gap:7px;
    font:600 .6rem/1.5 Consolas,monospace;
    letter-spacing:.06em;
    white-space:nowrap;
    color:var(--accent)
}
.status:before {
    content:"";
    height:5px;
    width:5px;
    background:currentColor;
    border-radius:50%
}
.art-top .status {
    background:#102235df;
    padding:7px 10px;
    color:#a9d8ff
}
.art-bottom {
    bottom:26px
}
.art-bottom small {
    display:block;
    font:500 .65rem/1.5 Consolas,monospace;
    letter-spacing:.1em;
    color:#bdd6e6
}
.art-bottom strong {
    font-size:2rem;
    letter-spacing:-.04em
}
.circle-arrow {
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    border:1px solid #7895aa;
    border-radius:50%;
    font-size:1.4rem
}
.section-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:50px;
    margin-bottom:32px
}
.section-heading h2 {
    margin-bottom:0
}
.section-heading>p {
    max-width:390px;
    font-size:.94rem;
    margin:0
}
.game-feature {
    --accent:#43c6ff;
    display:grid;
    grid-template-columns:1.05fr 1fr;
    margin-top:26px;
    border:1px solid var(--line);
    background:var(--surface);
    border-radius:4px;
    overflow:hidden
}
.blocks {
    --accent:#ffb349
}
.game-image {
    position:relative;
    min-width:0;
    overflow:hidden;
    background:#102035
}
.game-image img {
    width:100%;
    height:100%;
    max-height:480px;
    min-height:400px;
    transition:transform .4s
}
.game-image:hover img {
    transform:scale(1.025)
}
.image-label {
    position:absolute;
    bottom:18px;
    left:20px;
    padding:5px 10px;
    background:#142238df;
    color:#d9e9fa;
    font:500 .6rem/1.5 Consolas,monospace;
    letter-spacing:.1em
}
.game-copy {
    padding:32px 36px
}
.project-topline {
    display:flex;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    font:500 .64rem/1.5 Consolas,monospace;
    letter-spacing:.06em;
    color:var(--muted);
    margin-bottom:28px
}
.game-copy h3 {
    font-size:2.3rem
}
.game-copy>p {
    font-size:.95rem
}
.tags {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:20px 0
}
.tags span {
    font-size:.69rem;
    padding:4px 9px;
    color:#d4e1f2;
    border:1px solid #465a71;
    border-radius:2px
}
.compact-facts {
    margin:24px 0 12px;
    border-top:1px solid var(--line);
    padding-top:18px
}
.compact-facts>div {
    margin-bottom:12px
}
dt {
    font:600 .62rem/1.5 Consolas,monospace;
    color:var(--accent);
    letter-spacing:.1em
}
dd {
    margin:5px 0 0;
    font-size:.82rem;
    color:#c4d0df
}
.game-copy .text-link {
    color:var(--accent);
    border:0
}
.skills-section {
    background:#101829;
    border-block:1px solid var(--line)
}
.skill-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:32px
}
.skill-grid article {
    border-top:1px solid #50617a;
    padding-top:22px
}
.skill-grid p {
    font-size:.94rem;
    margin-bottom:0
}
.skill-number {
    display:block;
    font:500 .7rem/1.5 Consolas,monospace;
    color:var(--blue);
    margin-bottom:20px
}
.secondary-work {
    padding-bottom:64px
}
.model-teaser {
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:48px;
    align-items:center
}
.teaser-image {
    overflow:hidden
}
.teaser-image img {
    width:100%;
    height:240px;
    border-radius:3px
}
.model-teaser p:not(.eyebrow) {
    max-width:540px
}
.other-work {
    margin-top:55px;
    display:grid;
    grid-template-columns:.7fr 1.2fr 1fr;
    gap:30px;
    border-top:1px solid var(--line);
    padding-top:28px
}
.other-work>a {
    display:flex;
    justify-content:space-between;
    gap:16px;
    font-weight:600
}
.other-work a:hover {
    color:var(--amber)
}
.other-work small {
    display:block;
    color:var(--muted);
    font-size:.73rem;
    font-weight:400;
    margin-top:5px
}
.site-footer {
    background:#03090e;
    border-top:1px solid var(--line)
}
.contact-row {
    display:flex;
    justify-content:space-between;
    gap:55px;
    align-items:center;
    padding-block:55px
}
.contact-row>div:first-child {
    max-width:660px
}
.contact-row h2 {
    font-size:2rem
}
.contact-row p:last-child {
    margin:0;
    font-size:.9rem
}
.contact-row .actions {
    flex-shrink:0;
    flex-direction:column;
    gap:10px
}
.footer-bottom {
    padding-block:24px;
    border-top:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    gap:20px;
    font-size:.7rem;
    color:#9eafc6
}
.footer-bottom a:hover {
    color:var(--amber)
}
/* Shared case-study layouts;
accents follow each project's artwork. */
.project-page.combat {
    --accent:#42bdff
}
.project-page.blocks {
    --accent:#ffb349
}
.project-page.tethered {
    --accent:#82bcdc
}
.breadcrumb {
    display:inline-block;
    margin-bottom:28px;
    font-size:.8rem;
    color:var(--muted)
}
.breadcrumb:hover {
    color:var(--accent)
}
.project-hero {
    padding-block:44px 48px
}
.project-hero-grid {
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:48px;
    align-items:center
}
.project-hero h1 {
    font-size:clamp(3rem,5.8vw,5.5rem);
    margin-bottom:22px
}
.project-hero .lede {
    font-size:1.1rem;
    max-width:650px
}
.project-hero .hero-visual {
    border:1px solid var(--line);
    border-bottom:3px solid var(--accent);
    width:100%;
    aspect-ratio:1.2;
    object-fit:cover;
    border-radius:3px
}
.project-hero .button.primary {
    background:linear-gradient(110deg, #ffac5b, #ff8939);
    border-color:#ffbd7e
}
.project-meta {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    padding:24px 0;
    border-block:1px solid var(--line);
    margin-top:38px
}
.project-meta dd {
    font-size:.88rem
}
.project-nav {
    display:flex;
    flex-wrap:wrap;
    gap:12px 28px;
    padding-top:15px;
    font-size:.82rem;
    color:var(--muted)
}
.project-nav a:hover {
    color:var(--accent)
}
.project-section {
    padding-block:50px;
    border-bottom:1px solid var(--line)
}
.two-column {
    display:grid;
    grid-template-columns:.65fr 1.35fr;
    gap:65px
}
.prose p:last-child {
    margin-bottom:0
}
.feature-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
    margin-top:30px
}
.feature-grid article {
    padding:24px;
    background:var(--surface);
    border-top:2px solid var(--accent)
}
.feature-grid p {
    font-size:.92rem;
    margin-bottom:0
}
.feature-grid h3 {
    font-size:1.2rem
}
.media-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:30px;
    margin-top:30px
}
.media-card {
    margin:0;
    min-width:0
}
.media-card video {
    width:100%;
    aspect-ratio:16/9;
    background:#0a1423;
    border:1px solid var(--line)
}
.media-card figcaption {
    padding-top:16px
}
.media-card figcaption p {
    font-size:.86rem
}
.media-card h3 {
    font-size:1.2rem;
    margin-bottom:8px
}
.media-card.wide {
    grid-column:1/-1
}
.media-card.wide video {
    max-height:620px
}
.project-end {
    padding-block:45px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px
}
.project-end h2 {
    font-size:1.7rem
}
.page-intro {
    padding-block:52px 35px;
    max-width:850px
}
.page-intro h1 {
    margin-bottom:24px
}
.page-intro>p:last-child {
    font-size:1.1rem
}
.about-grid {
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:64px
}
.about-panel {
    padding:30px;
    background:var(--surface);
    border:1px solid var(--line)
}
.about-panel h2 {
    font-size:1.7rem
}
.about-panel .tags {
    margin-bottom:25px
}
.prose a {
    color:var(--blue);
    text-decoration:underline;
    text-underline-offset:4px
}
.software-gallery {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    margin-top:30px
}
.software-gallery figure {
    margin:0;
    min-width:0
}
.software-gallery img {
    width:100%;
    max-height:470px;
    object-fit:contain;
    background:var(--surface)
}
.software-gallery figcaption {
    margin-top:12px;
    font-size:.83rem;
    color:var(--muted)
}
/* Gallery images remain available without JavaScript. */
.gallery-nav {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    border-bottom:1px solid var(--line);
    padding-bottom:28px
}
.gallery-nav a {
    padding:8px 16px;
    border:1px solid #52647b;
    border-radius:2px;
    font-size:.8rem
}
.gallery-nav a:hover {
    color:var(--amber);
    border-color:var(--amber)
}
.gallery-section {
    padding-block:44px;
    border-bottom:1px solid var(--line)
}
.gallery-heading {
    display:flex;
    gap:24px;
    justify-content:space-between;
    align-items:baseline;
    margin-bottom:25px
}
.gallery-heading h2 {
    font-size:2rem
}
.gallery-heading p {
    font-size:.9rem
}
.art-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px
}
.art-grid figure {
    margin:0;
    min-width:0
}
.art-grid img {
    width:100%;
    aspect-ratio:1.4;
    object-fit:contain;
    background:#07121b
}
.art-grid figcaption {
    padding:13px 0;
    font-size:.84rem;
    color:var(--muted)
}
.art-grid .full {
    grid-column:1/-1
}
.art-grid .full img {
    aspect-ratio:2;
    max-height:580px
}
.zoom-link {
    display:block;
    position:relative
}
.zoom-link:after {
    content:'↗';
    position:absolute;
    bottom:12px;
    right:12px;
    background:#142238e8;
    border:1px solid #6d829a;
    width:34px;
    height:34px;
    text-align:center;
    line-height:32px
}
.zoom-link:hover {
    outline:1px solid var(--blue)
}
details {
    margin-top:24px;
    border:1px solid var(--line);
    padding:16px 20px
}
summary {
    cursor:pointer;
    font-weight:600;
    color:var(--blue)
}
details .art-grid {
    margin-top:22px
}
.model-viewer {
    background:var(--surface);
    padding:20px;
    border:1px solid var(--line)
}
.model-viewer iframe {
    display:block;
    width:100%;
    aspect-ratio:1.4;
    border:0;
    background:#07121b;
    margin-top:18px
}
.model-viewer a {
    color:var(--blue);
    font-size:.85rem;
    text-decoration:underline
}
.lightbox {
    width:min(1100px,94vw);
    max-height:94vh;
    padding:54px 18px 14px;
    border:1px solid #677b95;
    background:#09151f;
    color:var(--text)
}
.lightbox::backdrop {
    background:#07101ce8
}
.lightbox img {
    max-height:75vh;
    max-width:100%;
    width:auto;
    object-fit:contain;
    margin:auto
}
.lightbox p {
    text-align:center;
    margin:12px 0 0;
    font-size:.85rem
}
.lightbox-close {
    position:absolute;
    right:16px;
    top:10px;
    background:transparent;
    color:white;
    border:1px solid var(--line);
    padding:5px 14px
}
.lightbox-open {
    overflow:hidden
}
/* Reference palette: charcoal, atmospheric steel blue, electric blue, and amber light. */
.brand-mark {
    background:#0a1822;
    border-color:#43c6ff80;
    box-shadow:inset 0 -2px 0 #43c6ff;
}
.hero-copy h1>span {
    color:#43c6ff;
    background:linear-gradient(105deg, #b8dcec, #48baff);
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}
.button.primary {
    background:linear-gradient(110deg, #ffac5b, #ff8939);
    border-color:#ffbd7e;
    box-shadow:0 0 24px #ff862525, inset 0 1px 0 #ffe2c080;
}
.button.primary:hover {
    background:#ffba76;
    box-shadow:0 0 32px #ff862545;
}
.hero-art {
    border-color:#38bfff85;
    box-shadow:0 22px 55px #06192f80, 0 0 38px #168bff20;
    transition:box-shadow .3s ease, border-color .3s ease;
}
.hero-art:hover {
    border-color:#65d9ff;
    box-shadow:0 24px 60px #06192f90, 0 0 42px #168bff40;
}
.game-feature {
    background:linear-gradient(120deg, #0d1e2b, #08121c);
    border-color:#304860;
    box-shadow:0 14px 32px #07172b40;
    transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.game-copy {
    border-top:3px solid var(--accent);
}
.game-feature.blocks {
    background:linear-gradient(120deg, #121e26, #0b141c);
}
.game-feature .tags span {
    background:#0e2333;
    border-color:#28516a;
    color:#d3edff;
}
.game-feature.blocks .tags span {
    background:#30251d;
    border-color:#8b6847;
    color:#ffe2b2;
}
.game-copy .text-link {
    transition:color .2s ease, gap .2s ease;
}
.game-copy .text-link:hover {
    color:#fff;
}
.skills-section {
    background:linear-gradient(115deg, #0c1c29, #07121c);
    border-block-color:#314a5a;
}
.skill-number {
    color:var(--amber);
}
.skill-grid article {
    border-top-color:#4b9cd1;
}
.feature-grid article,.about-panel,.model-viewer {
    background:linear-gradient(135deg, #102330, #09151f);
    box-shadow:0 8px 24px #091b3030;
}
.site-footer {
    border-top:1px solid #925429;
}
.site-nav a {
    transition:color .2s ease;
}
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
    .game-feature:hover {
        transform:translateY(-4px);
        border-color:var(--accent);
        box-shadow:0 20px 42px #07172b70;
    }
}
/* Fine technical details keep the neon treatment concentrated at edges. */
.site-header {
    box-shadow:0 1px 0 #46e5ff12;
}
.brand-mark {
    color:#e8fbff;
    border-color:#46e5ff60;
    box-shadow:inset 0 -2px 0 #ff963f, 0 0 18px #42bdff12;
}
.home-hero {
    position:relative;
    isolation:isolate;
}
.home-hero::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background-image:linear-gradient(#63adff06 1px, transparent 1px), linear-gradient(90deg, #63adff06 1px, transparent 1px);
    background-size:52px 52px;
    mask-image:linear-gradient(90deg, transparent, #000 80%);
}
.eyebrow {
    color:var(--accent);
}
.small-line {
    background:var(--amber);
    box-shadow:0 0 12px #ff963f70;
}
.button {
    border-radius:0;
}
.button.primary {
    clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.hero-art,.game-feature {
    border-radius:0;
}
.hero-art {
    border-top:2px solid #42bdff;
    border-bottom:2px solid #ff963f;
}
.game-copy {
    border-top-width:2px;
}
.game-feature.combat {
    --accent:#42bdff;
}
.game-feature.blocks {
    --accent:#ffae58;
}
.skill-number {
    color:var(--amber);
}
.skill-grid article {
    border-top-color:#35576c;
}
.tags span,.gallery-nav a {
    border-radius:0;
}
.project-hero .hero-visual {
    box-shadow:0 18px 50px #00000050;
}
.site-nav a:hover,.text-link:hover {
    color:#ffb574;
}
/* LED typography: bright cores with a restrained blue halo. */
h1,h2,h3 {
    color:#b8efff;
    text-shadow:0 0 8px #42bdff50, 0 0 24px #168dff30;
}
.hero-copy h1 {
    color:#c5f5ff;
    text-shadow:0 0 10px #42bdff60, 0 0 32px #168dff38;
}
.hero-copy h1>span {
    background:none;
    -webkit-text-fill-color:currentColor;
    color:#51cdff;
    text-shadow:0 0 9px #42bdff80, 0 0 28px #168dff50;
}
.art-bottom strong {
    color:#c5f5ff;
    text-shadow:0 0 10px #42bdff60, 0 0 26px #168dff40;
}
.game-feature.blocks h3 {
    color:#ffd3a7;
    text-shadow:0 0 9px #ff963f50, 0 0 24px #ff862528;
}
.brand {
    color:#c5ecff;
    text-shadow:0 0 10px #42bdff35;
}
.site-nav a,.text-link {
    color:#c4e4f2;
}
.site-nav a:hover,.text-link:hover {
    color:#ffbf85;
    text-shadow:0 0 12px #ff963f55;
}
@media(min-width:1600px) {
    .home-hero {
        padding-block:78px
    }
    .hero-copy h1 {
        font-size:4.5rem
    }
}
@media(max-width:1050px) {
    .shell {
        width:calc(100% - 56px)
    }
    .site-nav {
        gap:20px
    }
    .brand-sub {
        font-size:.5rem
    }
    .home-hero {
        gap:28px
    }
    .hero-copy h1 {
        font-size:clamp(2.5rem,4.7vw,3.5rem)
    }
    .hero-copy .eyebrow {
        font-size:.58rem
    }
    .hero-tools {
        gap:13px
    }
    .game-copy {
        padding:28px
    }
    .game-image img {
        min-height:450px
    }
    .game-copy h3 {
        font-size:2rem
    }
    .contact-row {
        gap:28px
    }
    .contact-row h2 {
        font-size:1.8rem
    }
    .project-hero-grid {
        gap:30px
    }
    .feature-grid {
        gap:16px
    }
    .two-column {
        gap:36px
    }
    .other-work {
        grid-template-columns:1fr 1fr
    }
    .other-work>.eyebrow {
        grid-column:1/-1;
        margin:0
    }
}
@media(max-width:760px) {
    .shell {
        width:calc(100% - 36px)
    }
    .nav-wrap {
        min-height:76px;
        flex-wrap:wrap;
        gap:0
    }
    .brand {
        font-size:.65rem
    }
    .brand-mark {
        font-size:1.7rem
    }
    .site-nav {
        width:100%;
        justify-content:space-between;
        gap:14px;
        flex-wrap:wrap;
        padding-block:12px;
        border-top:1px solid var(--line);
        font-size:.8rem
    }
    .site-nav .nav-resume {
        padding-left:0;
        border-left:0
    }
    .js .nav-toggle {
        display:flex;
        gap:16px;
        align-items:center;
        padding:8px 12px;
        background:transparent;
        color:var(--text);
        border:1px solid #566b84;
        border-radius:2px;
        font-size:.8rem
    }
    .js .site-nav {
        display:none
    }
    .js .site-nav.is-open {
        display:flex
    }
    .home-hero {
        grid-template-columns:1fr;
        padding-block:38px;
        gap:32px
    }
    .hero-copy h1 {
        font-size:clamp(2.55rem,8.5vw,3.8rem)
    }
    .hero-copy .eyebrow {
        font-size:.6rem
    }
    .hero-intro {
        font-size:1rem;
        max-width:560px
    }
    .hero-tools {
        margin-top:25px
    }
    .hero-art img {
        aspect-ratio:1.3;
        max-height:450px
    }
    .art-top,.art-bottom {
        left:20px;
        right:20px
    }
    .section {
        padding-block:48px
    }
    .section-heading {
        display:block;
        margin-bottom:25px
    }
    .section-heading>p {
        margin-top:20px;
        max-width:100%
    }
    .section-heading>.text-link {
        margin-top:16px
    }
    .game-feature {
        grid-template-columns:1fr
    }
    .game-image img {
        min-height:0;
        max-height:340px;
        aspect-ratio:1.4
    }
    .game-copy {
        padding:26px
    }
    .project-topline {
        margin-bottom:20px
    }
    .skill-grid {
        grid-template-columns:1fr;
        gap:26px
    }
    .skill-number {
        margin-bottom:12px
    }
    .model-teaser {
        grid-template-columns:1fr;
        gap:25px
    }
    .teaser-image img {
        height:auto;
        max-height:300px
    }
    .other-work {
        gap:22px
    }
    .contact-row {
        flex-direction:column;
        align-items:start;
        padding-block:36px;
        gap:24px
    }
    .contact-row .actions {
        align-items:start
    }
    .footer-bottom {
        flex-wrap:wrap;
        gap:12px
    }
    .footer-bottom>span:nth-child(2) {
        display:none
    }
    .footer-bottom>a {
        margin-left:auto
    }
    .project-hero-grid,.two-column,.about-grid {
        grid-template-columns:1fr;
        gap:24px
    }
    .project-hero {
        padding-top:30px
    }
    .project-hero h1 {
        font-size:3.2rem
    }
    .project-hero .hero-visual {
        aspect-ratio:1.4;
        max-height:410px
    }
    .project-meta {
        gap:20px;
        grid-template-columns:1fr
    }
    .project-meta>div {
        display:grid;
        grid-template-columns:100px 1fr;
        align-items:baseline;
        gap:12px
    }
    .project-meta dd {
        margin:0
    }
    .feature-grid {
        grid-template-columns:1fr
    }
    .media-grid {
        grid-template-columns:1fr
    }
    .project-section {
        padding-block:34px
    }
    .project-end {
        flex-direction:column;
        align-items:start
    }
    .page-intro {
        padding-top:38px
    }
    .gallery-heading {
        display:block
    }
    .art-grid {
        gap:16px
    }
    .art-grid .full img {
        aspect-ratio:auto
    }
    .gallery-section {
        padding-block:32px
    }
    .model-viewer {
        padding:14px
    }
    .software-gallery {
        grid-template-columns:1fr 1fr
    }
}
@media(max-width:430px) {
    .actions {
        gap:16px
    }
    .home-hero .actions {
        align-items:start;
        flex-direction:column
    }
    .other-work,.art-grid,.software-gallery {
        grid-template-columns:1fr
    }
    .art-grid .full {
        grid-column:auto
    }
    .project-topline {
        font-size:.58rem
    }
    .game-copy {
        padding:22px
    }
    .art-top {
        font-size:.5rem
    }
    .art-bottom strong {
        font-size:1.7rem
    }
    .hero-tools {
        font-size:.58rem
    }
    .site-nav {
        gap:8px
    }
    .site-nav a {
        font-size:.73rem
    }
    .project-hero h1 {
        font-size:2.7rem
    }
}
@media(prefers-reduced-motion:reduce) {
    :root {
        scroll-behavior:auto
    }
    *,*:before,*:after {
        transition:none!important;
        animation:none!important
    }
}