/* Blue Wings — a small, dependency-free editorial portfolio. */
:root {
    --paper:#f3f2ee;
    --ink:#22231f;
    --muted:#6b6c65;
    --blue:#2948dc;
    --line:#d6d6cd;
    --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
    --sans:"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
    --serif:Georgia,"Times New Roman","Songti SC",serif;
}

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:110px;
}

body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    -webkit-font-smoothing:antialiased;
}

body,a,button {
    -webkit-tap-highlight-color:transparent;
}

a {
    color:inherit;
    text-decoration:none;
}

button {
    font:inherit;
    color:inherit;
    cursor:pointer;
}

button,a {
    touch-action:manipulation;
}

button {
    border:0;
}

img {
    display:block;
    max-width:100%;
    height:auto;
}

svg {
    display:block;
}

h1,h2,h3,p {
    margin:0;
}

button:focus-visible,a:focus-visible {
    outline:2px solid var(--blue);
    outline-offset:6px;
}

::selection {
    background:var(--blue);
    color:white;
}

.section-shell {
    width:min(1320px,calc(100% - 112px));
    margin-inline:auto;
}

.mono {
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:1.1px;
    line-height:1.6;
}

.serif {
    font-family:var(--serif);
    font-weight:400;
    font-style:italic;
}

.accent {
    color:var(--blue);
}

.eyebrow {
    font-size:11px;
    font-weight:500;
    letter-spacing:1.8px;
    line-height:1.6;
}

.section-number {
    color:var(--muted);
    margin-right:14px;
}

.skip-link {
    position:fixed;
    top:10px;
    left:20px;
    z-index:100;
    padding:14px;
    background:var(--ink);
    color:#fff;
    transform:translateY(-150%);
}

.skip-link:focus {
    transform:translateY(0);
}

.site-header {
    height:96px;
    padding-inline:56px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:36px;
    border-bottom:1px solid var(--line);
    position:sticky;
    top:0;
    background:rgba(243,242,238,.95);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    z-index:20;
}

.wordmark {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:16px;
    font-weight:700;
    letter-spacing:1.5px;
    flex-shrink:0;
}

.brand-mark {
    width:38px;
    height:38px;
    color:var(--blue);
    padding:4px;
    border-radius:6px;
    background:#22231f;
    object-fit:contain;
}

.wordmark-cn {
    display:block;
    font-size:9px;
    font-weight:400;
    letter-spacing:4px;
    margin-top:4px;
}

.main-nav {
    display:flex;
    align-items:center;
    gap:38px;
    margin-left:auto;
    font-size:12px;
}

.main-nav>a {
    position:relative;
    padding-block:8px;
}

.main-nav>a:after {
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:1px;
    background:var(--blue);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .25s;
}

.main-nav>a:hover:after,.main-nav>a[aria-current]:after {
    transform:scaleX(1);
}

.nav-contact {
    display:flex;
    gap:18px;
}

.header-controls {
    display:flex;
    align-items:center;
    gap:24px;
}

.language-switch {
    display:flex;
    align-items:center;
    gap:8px;
    font-family:var(--mono);
    font-size:11px;
    color:var(--muted);
    border-left:1px solid var(--line);
    padding-left:25px;
}

.language-switch button {
    padding:10px 3px;
    background:transparent;
    min-height:40px;
}

.language-switch button[aria-pressed=true] {
    color:var(--ink);
    font-weight:700;
}

.language-switch>span {
    color:#abaca4;
}

.menu-toggle {
    display:none;
}

.hero-topline {
    padding-top:30px;
    display:flex;
    justify-content:space-between;
    color:var(--muted);
    font-size:9px;
}

.hero-topline>span:first-child {
    display:flex;
    align-items:center;
    gap:9px;
}

.status-dot {
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--blue);
    display:inline-block;
}

.hero-layout {
    display:grid;
    grid-template-columns:1fr 1.07fr;
    gap:24px;
    align-items:center;
    min-height:665px;
    padding-block:38px 48px;
}

.hero-copy {
    position:relative;
    z-index:1;
}

.hero-copy>.eyebrow {
    font-size:10px;
    color:var(--muted);
    margin-bottom:23px;
    letter-spacing:2px;
}

.hero h1 {
    position:relative;
    font-size:clamp(80px,8.3vw,126px);
    line-height:.88;
    letter-spacing:-7px;
    font-weight:500;
}

.hero h1 .serif {
    display:inline-block;
    color:var(--blue);
    line-height:1.06;
    letter-spacing:-7px;
}

.hero-asterisk {
    position:absolute;
    top:2%;
    left:75%;
    font-size:42px;
    font-weight:400;
    color:var(--blue);
    transform:rotate(12deg);
}

.hero-statement {
    font-size:20px;
    font-weight:500;
    line-height:1.7;
    margin-top:24px;
    letter-spacing:.7px;
}

.hero-description {
    font-size:13px;
    color:var(--muted);
    line-height:1.9;
    margin-top:12px;
    max-width:430px;
}

.hero-actions {
    display:flex;
    align-items:center;
    gap:27px;
    margin-top:29px;
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:34px;
    padding:17px 22px;
    font-size:12px;
    font-weight:500;
    min-height:48px;
    transition:background .2s,color .2s,transform .2s;
}

.button:hover {
    transform:translateY(-2px);
}

.button-dark {
    background:var(--ink);
    color:var(--paper);
}

.button-dark:hover {
    background:var(--blue);
}

.button>span:last-child {
    font-size:18px;
}

.text-link {
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:12px;
    line-height:1.6;
}

.text-link:hover {
    color:var(--blue);
}

.small-play {
    font-size:22px;
}

.hero-artwork {
    position:relative;
    align-self:stretch;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
    padding-block:24px 18px;
}

.art-corner {
    display:flex;
    justify-content:space-between;
    color:var(--muted);
    font-size:9px;
    padding-inline:12px;
}

.sound-art {
    height:450px;
    position:relative;
    isolation:isolate;
    background-image:radial-gradient(#cacbc5 .75px,transparent .75px);
    background-size:22px 22px;
}

.sound-art:before,.sound-art:after {
    content:"";
    position:absolute;
    background:var(--line);
    z-index:-1;
    opacity:.45;
}

.sound-art:before {
    height:1px;
    width:100%;
    top:50%;
}

.sound-art:after {
    width:1px;
    height:100%;
    left:50%;
}

.sound-art canvas,.sound-fallback {
    width:100%;
    height:100%;
    position:absolute;
    inset:0;
}

.sound-art.is-rendered .sound-fallback {
    display:none;
}

.art-note {
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:var(--muted);
    padding:0 10px;
    font-size:9px;
}

.crosshair {
    font-size:18px;
    color:#95978d;
    font-weight:300;
}

.art-controls {
    margin-top:23px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
}

.sound-modes {
    display:flex;
    padding:4px;
    border:1px solid var(--line);
    border-radius:30px;
    gap:3px;
}

.sound-modes button {
    font-size:10px;
    padding:9px 16px;
    min-height:32px;
    background:transparent;
    border-radius:30px;
    color:var(--muted);
    transition:background .2s,color .2s;
}

.sound-modes button[aria-pressed=true] {
    background:var(--blue);
    color:#fff;
}

.sound-modes button:hover:not([aria-pressed=true]) {
    background:#e4e5dd;
}

#motion-toggle {
    width:35px;
    height:35px;
    border:1px solid var(--line);
    border-radius:50%;
    background:transparent;
    display:grid;
    place-items:center;
    color:var(--muted);
}

#motion-toggle .play-symbol {
    display:none;
}

#motion-toggle[aria-pressed=true] .pause-symbol {
    display:none;
}

#motion-toggle[aria-pressed=true] .play-symbol {
    display:block;
}

.hero-baseline {
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top:1px solid var(--line);
    padding-block:21px 23px;
    gap:20px;
}

.hero-baseline>.mono {
    font-size:8px;
    letter-spacing:1.2px;
    color:var(--muted);
}

.scroll-link {
    font-size:10px;
    display:flex;
    align-items:center;
    gap:25px;
    white-space:nowrap;
}

.scroll-link>span:last-child {
    font-size:19px;
}

.work-section {
    padding-block:98px 94px;
}

.section-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:36px;
    margin-bottom:46px;
}

.section-heading h2 {
    font-size:clamp(32px,3.1vw,46px);
    font-weight:500;
    line-height:1.3;
    letter-spacing:-1.3px;
    margin-top:22px;
}

.section-heading h2 .serif {
    letter-spacing:-1.5px;
}

.section-intro {
    font-size:12px;
    line-height:1.9;
    color:var(--muted);
    padding-bottom:4px;
}

.projects {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:57px 28px;
}

.project-fire {
    grid-column:1/-1;
}

.project-visual {
    display:block;
    position:relative;
    overflow:hidden;
    isolation:isolate;
}

.visual-topline {
    position:absolute;
    top:26px;
    left:28px;
    right:28px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:9px;
    z-index:2;
}

.visual-arrow {
    position:absolute;
    bottom:22px;
    right:24px;
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border:1px solid currentColor;
    border-radius:50%;
    font-size:22px;
    z-index:3;
    transition:transform .3s,background .3s;
}

.project-visual:hover .visual-arrow {
    transform:rotate(45deg);
}

.project-visual img {
    transition:transform .7s cubic-bezier(.22,1,.36,1);
    box-shadow:0 20px 40px #10111738;
}

.fire-visual {
    height:470px;
    background:#252a27;
    color:#f2ebd9;
}

.fire-visual .visual-topline {
    color:#bdc3b5;
}

.fire-type {
    position:absolute;
    top:122px;
    left:5%;
    font-size:clamp(34px,3.6vw,54px);
    letter-spacing:-1.8px;
    line-height:1.12;
    z-index:2;
}

.fire-type i {
    font-family:var(--serif);
    font-weight:400;
    color:#f4a87f;
}

.fire-screenshot {
    position:absolute;
    right:-5%;
    width:65%;
    top:143px;
    transform:perspective(1000px) rotateY(-13deg) rotateZ(-5deg);
    border-radius:5px;
}

.fire-visual:hover img {
    transform:perspective(1000px) rotateY(-6deg) rotateZ(-3deg) translateY(-9px);
}

.fire-orbit {
    position:absolute;
    width:480px;
    height:480px;
    border:1px solid #7c85724d;
    border-radius:50%;
    top:-165px;
    right:14%;
    box-shadow:0 0 0 28px #0000,0 0 0 29px #7c857222,0 0 0 63px #0000,0 0 0 64px #7c85721a,0 0 0 103px #0000,0 0 0 104px #7c85721a;
}

.project-info {
    padding-top:24px;
}

.project-title-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
}

.project h3 {
    font-size:30px;
    font-weight:500;
    letter-spacing:-1px;
}

.project h3 a {
    display:inline-flex;
    align-items:center;
    gap:15px;
}

.project h3 a>span {
    font-size:22px;
    transition:transform .2s;
}

.project h3 a:hover {
    color:var(--blue);
}

.project h3 a:hover>span {
    transform:translate(3px,-3px);
}

.project-kind {
    font-size:10px;
    color:var(--muted);
    text-align:right;
}

.project-info>p {
    font-size:12px;
    line-height:1.9;
    color:var(--muted);
    margin-top:13px;
    max-width:640px;
}

.project-bottom {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    margin-top:20px;
}

.tags {
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-wrap:wrap;
    gap:7px;
}

.tags li {
    font-family:var(--mono);
    font-size:8px;
    border:1px solid var(--line);
    padding:6px 9px;
    border-radius:20px;
    color:var(--muted);
}

.project-detail {
    font-size:10px;
    display:flex;
    gap:10px;
    white-space:nowrap;
}

.project-detail:hover {
    color:var(--blue);
}

.atmos-visual,.hub-visual {
    height:405px;
}

.atmos-visual {
    background:#dce6e8;
    color:#314d55;
}

.hub-visual {
    background:#e4e3ef;
    color:#514b6d;
}

.visual-heading {
    position:absolute;
    top:78px;
    left:28px;
    font-size:37px;
    line-height:1.08;
    letter-spacing:-1.2px;
    z-index:2;
}

.atmos-visual img {
    position:absolute;
    width:83%;
    max-width:none;
    left:20%;
    top:194px;
    transform:rotate(-6deg);
    border-radius:6px;
}

.atmos-visual:hover img {
    transform:rotate(-3deg) translate(-5px,-10px);
}

.hub-visual img {
    position:absolute;
    width:90%;
    max-width:none;
    left:18%;
    top:218px;
    transform:rotate(-6deg);
    border-radius:6px;
}

.hub-visual:hover img {
    transform:rotate(-3deg) translate(-5px,-10px);
}

.mini-orbit {
    font-size:26px;
    line-height:1;
}

.atmos-rings {
    position:absolute;
    right:-42px;
    top:8px;
    width:260px;
    height:260px;
    transform:rotate(-25deg);
}

.atmos-rings i {
    position:absolute;
    inset:0;
    border:1px solid #809fa261;
    border-radius:50%;
    transform:scaleX(.62);
}

.atmos-rings i:nth-child(2) {
    transform:rotate(45deg) scaleX(.62);
}

.atmos-rings i:nth-child(3) {
    transform:rotate(90deg) scaleX(.62);
}

.atmos-rings i:nth-child(4) {
    transform:rotate(135deg) scaleX(.62);
}

.format-labels {
    position:absolute;
    left:30px;
    top:173px;
    display:flex;
    gap:8px;
    font-size:8px;
}

.format-labels span {
    padding:5px 10px;
    border:1px solid #827a9b6b;
    border-radius:3px;
}

.github-link {
    display:flex;
    width:fit-content;
    margin:47px auto 0;
    color:var(--muted);
    font-size:11px;
}

.open-source-note {
    display:grid;
    grid-template-columns:1fr 1.6fr;
    align-items:center;
    gap:35px;
    margin-top:52px;
    padding-block:28px;
    border-block:1px solid var(--line);
}

.open-source-note .eyebrow { color:var(--muted); font-size:9px; }
.open-source-note h3 { margin-top:10px; font-size:23px; font-weight:400; letter-spacing:-.5px; }
.open-source-note>p { color:var(--muted); font-size:12px; line-height:1.9; }
.footer-brand-mark { width:clamp(42px,10vw,128px); height:auto; flex-shrink:0; }

@media(max-width:760px) {
    .open-source-note { grid-template-columns:1fr; gap:17px; margin-top:37px; padding-block:24px; }
    .open-source-note h3 { font-size:21px; }
    .open-source-note>p { font-size:11px; }
}

.music-section {
    background:#252923;
    color:#f1f0e6;
}

.music-inner {
    padding-block:77px 35px;
}

.music-section a:focus-visible {
    outline-color:#c4d6a5;
}

.music-section .section-number {
    color:#aeb5a5;
}

.music-section .eyebrow {
    color:#b9c3ad;
}

.music-section .section-heading {
    margin-bottom:48px;
}

.music-section h2 .serif {
    color:#c4d6a5;
}

.music-symbol {
    font-size:63px;
    font-weight:400;
    line-height:1;
    color:#c4d6a5;
}

.album-feature {
    display:grid;
    grid-template-columns:.82fr 1.18fr;
    gap:80px;
    align-items:center;
    max-width:1000px;
    margin:0 auto;
}

.album-art {
    position:relative;
    aspect-ratio:1;
    isolation:isolate;
    background:#111915;
    overflow:hidden;
    box-shadow:0 20px 50px #0003;
}

.album-art>img {
    width:100%;
    height:100%;
    object-fit:cover;
    position:absolute;
    inset:0;
    transition:transform .6s;
}

.album-art:hover>img {
    transform:scale(1.035);
}

.album-art>img.is-missing {
    display:none;
}

.album-fallback {
    padding:28px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    height:100%;
    background:repeating-radial-gradient(ellipse at 60% 70%,#14251d 0,#14251d 3px,#557166 4px,#14251d 5px,#14251d 13px);
    color:#e3e5cb;
}

.album-fallback>span {
    font-size:9px;
    letter-spacing:3px;
}

.album-fallback>strong {
    font-size:clamp(42px,6vw,80px);
    font-weight:400;
    letter-spacing:-3px;
    line-height:.85;
}

.album-play {
    position:absolute;
    bottom:18px;
    right:18px;
    border:1px solid #fff9;
    backdrop-filter:blur(15px);
    width:49px;
    height:49px;
    display:grid;
    place-items:center;
    border-radius:50%;
    font-size:26px;
}

.album-copy h3 {
    font-size:clamp(34px,4.5vw,62px);
    font-weight:400;
    letter-spacing:-2px;
    margin-top:20px;
}

.album-artist {
    font-size:12px;
    margin-top:13px;
    letter-spacing:2px;
}

.album-artist>span {
    font-size:9px;
    color:#a7ad9e;
    margin-left:10px;
}

.album-description {
    font-size:13px;
    line-height:2;
    color:#bcc3b4;
    margin-top:25px;
}

.atmos-badge {
    display:flex;
    align-items:center;
    width:fit-content;
    background:#f3f2ee;
    border-radius:2px;
    padding:11px 13px;
    margin-top:23px;
}

.atmos-badge>img {
    display:block;
    width:140px;
    height:auto;
}

.button-light {
    background:#dae4c7;
    color:#273025;
    margin-top:28px;
}

.button-light:hover {
    background:#f0f6e8;
}

.platforms {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding-top:32px;
    border-top:1px solid #4e5448;
    margin-top:58px;
}

.platforms>.mono {
    font-size:9px;
    color:#abb3a1;
    letter-spacing:1px;
}

.platforms>div {
    display:flex;
    flex-wrap:wrap;
    gap:28px;
    font-size:11px;
}

.platforms a:hover {
    color:#c4d6a5;
}

.about-section {
    padding-block:111px 109px;
    display:grid;
    grid-template-columns:1fr 1.65fr;
    gap:85px;
}

.about-label>.eyebrow {
    margin-bottom:31px;
}

.portrait-frame {
    max-width:246px;
    position:relative;
}

.portrait-frame>img {
    aspect-ratio:1;
    object-fit:cover;
    filter:saturate(.6);
}

.portrait-frame>.mono {
    display:block;
    font-size:8px;
    letter-spacing:1.2px;
    margin-top:13px;
    color:var(--muted);
}

.about-copy h2 {
    font-size:clamp(28px,3.2vw,44px);
    font-weight:400;
    line-height:1.5;
    letter-spacing:-1px;
    margin-bottom:29px;
}

.about-copy>p {
    font-size:13px;
    line-height:2;
    color:var(--muted);
    margin-top:17px;
    max-width:580px;
}

.disciplines {
    display:flex;
    flex-wrap:wrap;
    gap:17px;
    margin-top:27px;
    padding-top:23px;
    border-top:1px solid var(--line);
    font-size:10px;
}

.disciplines>span:before {
    content:"↗";
    margin-right:9px;
    color:var(--blue);
}

.contact-section {
    border-top:1px solid var(--line);
    padding-block:34px 64px;
    position:relative;
}

.contact-top {
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:center;
}

.contact-top>.mono {
    font-size:8px;
    color:var(--muted);
}

.contact-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:35px;
    margin-block:36px 26px;
}

.contact-heading h2 {
    font-size:clamp(30px,4.3vw,62px);
    font-weight:400;
    line-height:1.4;
    letter-spacing:-1.5px;
}

.contact-heading h2 .serif {
    color:var(--blue);
}

.contact-heading>span {
    color:var(--blue);
    font-size:67px;
    line-height:1;
    transition:transform .25s;
}

.contact-heading:hover>span {
    transform:translate(6px,-6px);
}

.contact-bottom {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:25px;
}

.contact-bottom>p {
    font-size:12px;
    color:var(--muted);
    line-height:1.8;
}

.email-actions {
    display:flex;
    align-items:center;
    gap:12px;
}

.email-actions>a {
    font-size:13px;
    border-bottom:1px solid var(--line);
    padding-block:5px;
}

.email-actions>a:hover {
    color:var(--blue);
}

#copy-email {
    background:transparent;
    padding:10px;
    color:var(--muted);
}

.copy-status {
    position:absolute;
    bottom:26px;
    right:0;
    color:var(--blue);
    font-size:11px;
    line-height:1.5;
}

.site-footer {
    padding-top:40px;
    border-top:1px solid var(--line);
}

.footer-name {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    font-size:clamp(48px,10vw,145px);
    font-weight:500;
    letter-spacing:-7px;
    line-height:1;
    white-space:nowrap;
}

.footer-name>span {
    font-size:.85em;
    color:var(--blue);
    font-weight:400;
}

.footer-bottom {
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:center;
    padding-block:31px;
    color:var(--muted);
}

.footer-bottom>.mono {
    font-size:8px;
}

.footer-bottom>span:nth-child(2) {
    font-size:10px;
}

.footer-bottom>div {
    display:flex;
    gap:25px;
    font-size:10px;
}

.footer-bottom a:hover {
    color:var(--blue);
}

@media(min-width:1550px) {
    .hero-layout {
        min-height:750px;
    }
    .sound-art {
        height:525px;
    }
    .site-header {
        padding-inline:max(56px,calc((100% - 1320px)/2));
    }
}

@media(max-width:1100px) {
    .section-shell {
        width:calc(100% - 72px);
    }
    .site-header {
        padding-inline:36px;
        height:84px;
    }
    .main-nav {
        gap:25px;
    }
    .hero-layout {
        min-height:625px;
        grid-template-columns:1fr 1fr;
        gap:15px;
    }
    .hero h1 {
        font-size:94px;
        letter-spacing:-6px;
    }
    .hero h1 .serif {
        letter-spacing:-6px;
    }
    .hero-asterisk {
        left:82%;
        font-size:33px;
    }
    .hero-statement {
        font-size:17px;
        letter-spacing:0;
    }
    .hero-description {
        font-size:12px;
    }
    .hero-actions {
        gap:18px;
    }
    .sound-art {
        height:390px;
    }
    .hero-actions .button {
        padding:15px 17px;
        gap:24px;
    }
    .text-link {
        font-size:11px;
    }
    .project-title-row {
        align-items:flex-start;
        flex-wrap:wrap;
        gap:8px;
    }
    .project h3 {
        font-size:28px;
    }
    .project-kind {
        font-size:9px;
    }
    .project-fire .project-title-row {
        align-items:center;
    }
    .fire-visual {
        height:420px;
    }
    .fire-type {
        top:112px;
        font-size:38px;
    }
    .fire-screenshot {
        top:157px;
        width:66%;
    }
    .atmos-visual,.hub-visual {
        height:360px;
    }
    .visual-heading {
        font-size:32px;
    }
    .project-bottom {
        flex-wrap:wrap;
    }
    .album-feature {
        gap:50px;
    }
    .platforms {
        align-items:flex-start;
        flex-direction:column;
        gap:17px;
    }
    .about-section {
        gap:65px;
    }
    .contact-heading h2 {
        font-size:42px;
    }
    .contact-heading>span {
        font-size:56px;
    }
    .footer-name {
        letter-spacing:-5px;
    }
}

@media(max-width:760px) {
    html {
        scroll-padding-top:90px;
    }
    .section-shell {
        width:calc(100% - 40px);
    }
    .site-header {
        height:74px;
        padding-inline:20px;
        gap:14px;
    }
    .wordmark {
        font-size:13px;
        letter-spacing:1px;
    }
    .brand-mark {
        width:30px;
        height:30px;
    }
    .wordmark-cn {
        font-size:8px;
        letter-spacing:3px;
    }
    .header-controls {
        gap:15px;
    }
    .language-switch {
        padding-left:0;
        border:0;
        gap:5px;
        font-size:10px;
    }
    .menu-toggle {
        display:flex;
        justify-content:center;
        flex-direction:column;
        gap:5px;
        background:transparent;
        width:36px;
        height:44px;
        padding:8px;
    }
    .menu-toggle>span {
        width:20px;
        height:1px;
        background:var(--ink);
        transition:transform .2s;
    }
    .menu-toggle[aria-expanded=true]>span:first-child {
        transform:translateY(3px) rotate(45deg);
    }
    .menu-toggle[aria-expanded=true]>span:last-child {
        transform:translateY(-3px) rotate(-45deg);
    }
    .main-nav {
        position:absolute;
        top:73px;
        left:0;
        right:0;
        background:var(--paper);
        border-bottom:1px solid var(--line);
        padding:25px 25px 32px;
        display:none;
        flex-direction:column;
        align-items:stretch;
        gap:10px;
        font-size:18px;
    }
    .main-nav.is-open {
        display:flex;
    }
    .main-nav>a {
        padding:13px 5px;
    }
    .nav-contact {
        justify-content:space-between;
    }
    .hero-topline {
        padding-top:23px;
        font-size:8px;
        letter-spacing:.6px;
    }
    .hero-edition {
        display:none;
    }
    .hero-layout {
        grid-template-columns:1fr;
        gap:16px;
        padding-block:43px 27px;
        min-height:0;
    }
    .hero-copy>.eyebrow {
        font-size:9px;
        margin-bottom:22px;
    }
    .hero h1 {
        font-size:clamp(90px,19vw,136px);
        letter-spacing:-6px;
        line-height:.9;
    }
    .hero h1 .serif {
        letter-spacing:-6px;
    }
    .hero-asterisk {
        left:77%;
        top:5%;
        font-size:36px;
    }
    .hero-statement {
        font-size:18px;
        margin-top:25px;
    }
    .hero-description {
        font-size:12px;
        max-width:100%;
    }
    .hero-actions {
        gap:25px;
        margin-top:24px;
    }
    .hero-artwork {
        margin-top:16px;
        padding-block:15px 7px;
    }
    .sound-art {
        height:365px;
    }
    .art-corner {
        padding-inline:4px;
        font-size:8px;
    }
    .art-note {
        font-size:8px;
        padding:0 4px;
    }
    .art-controls {
        margin-top:16px;
    }
    .sound-modes button {
        padding:10px 20px;
    }
    .hero-baseline {
        padding-block:17px;
        align-items:center;
        gap:16px;
    }
    .hero-baseline>.mono {
        font-size:7px;
        letter-spacing:.4px;
        max-width:235px;
        line-height:1.9;
    }
    .scroll-link {
        font-size:9px;
        gap:12px;
    }
    .work-section {
        padding-block:67px 61px;
    }
    .section-heading {
        align-items:flex-start;
        flex-direction:column;
        gap:20px;
        margin-bottom:30px;
    }
    .eyebrow {
        font-size:9px;
        letter-spacing:1.3px;
    }
    .section-heading h2 {
        font-size:34px;
        margin-top:17px;
        letter-spacing:-1px;
    }
    .section-intro {
        font-size:11px;
    }
    .projects {
        grid-template-columns:1fr;
        gap:39px;
    }
    .project-fire {
        grid-column:auto;
    }
    .fire-visual {
        height:350px;
    }
    .visual-topline {
        top:20px;
        left:20px;
        right:20px;
        font-size:8px;
    }
    .fire-type {
        top:61px;
        left:23px;
        font-size:34px;
        letter-spacing:-1px;
    }
    .fire-screenshot {
        top:191px;
        width:93%;
        right:-15%;
    }
    .fire-orbit {
        right:-120px;
        width:370px;
        height:370px;
        top:-200px;
    }
    .visual-arrow {
        width:31px;
        height:31px;
        font-size:20px;
        bottom:17px;
        right:17px;
    }
    .project-info {
        padding-top:19px;
    }
    .project-title-row {
        align-items:center;
        flex-wrap:nowrap;
        gap:12px;
    }
    .project h3 {
        font-size:27px;
    }
    .project-kind {
        font-size:8px;
    }
    .project-info>p {
        font-size:12px;
        margin-top:11px;
    }
    .project-bottom {
        margin-top:16px;
        flex-wrap:nowrap;
        gap:10px;
    }
    .tags {
        gap:5px;
    }
    .tags li {
        font-size:7px;
        padding:5px 7px;
    }
    .project-detail {
        font-size:9px;
        gap:6px;
    }
    .atmos-visual,.hub-visual {
        height:370px;
    }
    .visual-heading {
        left:23px;
        top:68px;
        font-size:34px;
    }
    .atmos-visual img {
        top:173px;
        left:18%;
        width:90%;
    }
    .hub-visual img {
        top:209px;
        left:16%;
        width:94%;
    }
    .format-labels {
        left:23px;
        top:163px;
    }
    .atmos-rings {
        right:-65px;
        top:0;
        width:230px;
        height:230px;
    }
    .github-link {
        margin-top:32px;
        font-size:10px;
    }
    .music-inner {
        padding-block:52px 29px;
    }
    .music-section .section-heading {
        position:relative;
        padding-right:25px;
        margin-bottom:31px;
    }
    .music-section h2 {
        font-size:28px;
    }
    .music-symbol {
        position:absolute;
        right:0;
        top:-5px;
        font-size:38px;
    }
    .album-feature {
        grid-template-columns:1fr;
        gap:31px;
        max-width:480px;
    }
    .album-art {
        width:85%;
        max-width:350px;
    }
    .album-copy h3 {
        font-size:44px;
        margin-top:15px;
    }
    .album-description {
        font-size:12px;
        margin-top:21px;
    }
    .album-artist {
        font-size:11px;
    }
    .button-light {
        margin-top:25px;
    }
    .platforms {
        margin-top:36px;
        padding-top:24px;
        gap:20px;
    }
    .platforms>div {
        gap:20px 24px;
        font-size:10px;
    }
    .about-section {
        padding-block:65px 63px;
        grid-template-columns:1fr;
        gap:30px;
    }
    .about-label>.eyebrow {
        margin-bottom:25px;
    }
    .portrait-frame {
        max-width:180px;
    }
    .portrait-frame>.mono {
        font-size:7px;
    }
    .about-copy h2 {
        font-size:31px;
        margin-bottom:23px;
    }
    .about-copy>p {
        font-size:12px;
        margin-top:15px;
    }
    .disciplines {
        gap:18px;
        font-size:9px;
    }
    .contact-section {
        padding-block:28px 57px;
    }
    .contact-top>.mono {
        display:none;
    }
    .contact-heading {
        gap:14px;
        margin-block:28px 21px;
    }
    .contact-heading h2 {
        font-size:32px;
        letter-spacing:-1px;
        max-width:280px;
    }
    .contact-heading h2 .serif {
        display:block;
    }
    .contact-heading>span {
        font-size:47px;
    }
    .contact-bottom {
        align-items:flex-start;
        flex-direction:column;
        gap:19px;
    }
    .contact-bottom>p {
        font-size:11px;
    }
    .email-actions {
        gap:8px;
    }
    .email-actions>a {
        font-size:12px;
    }
    .copy-status {
        bottom:22px;
        left:0;
        right:auto;
        font-size:10px;
    }
    .site-footer {
        padding-top:29px;
    }
    .footer-name {
        font-size:clamp(39px,11.7vw,80px);
        letter-spacing:-2.5px;
        gap:10px;
    }
    .footer-bottom {
        padding-block:25px;
        flex-wrap:wrap;
        gap:18px 10px;
        justify-content:space-between;
    }
    .footer-bottom>.mono {
        font-size:7px;
    }
    .footer-bottom>span:nth-child(2) {
        font-size:8px;
    }
    .footer-bottom>div {
        width:100%;
        justify-content:space-between;
        font-size:10px;
        gap:12px;
    }
}

@media(max-width:360px) {
    .section-shell {
        width:calc(100% - 32px);
    }
    .site-header {
        padding-inline:16px;
    }
    .wordmark {
        font-size:11px;
    }
    .header-controls {
        gap:7px;
    }
    .hero h1 {
        font-size:82px;
    }
    .hero-asterisk {
        left:auto;
        right:0;
        top:-10px;
        font-size:27px;
    }
    .hero-statement {
        font-size:16px;
    }
    .hero-actions {
        gap:16px;
    }
    .hero-actions .button {
        gap:15px;
    }
    .sound-art {
        height:300px;
    }
    .project-kind {
        max-width:80px;
        line-height:1.6;
    }
    .tags li {
        font-size:6px;
    }
    .project-detail {
        font-size:8px;
    }
    .contact-heading h2 {
        font-size:28px;
    }
    .footer-name {
        letter-spacing:-2px;
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto;
    }
    *,*:before,*:after {
        animation:none!important;
        transition:none!important;
    }
}