:root {
    --paper:#fff;
    --ink:#171715;
    --soft:#777772;
    --rule:#deded9;
    --serif:Georgia,'Times New Roman',serif;
    --sans:'DM Sans','Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif
}
* {
    box-sizing:border-box
}
html.site-loading,
html.site-loading body {
    overflow:hidden;
    height:100%;
}
.site-preloader {
    position:fixed;
    z-index:99999;
    inset:0;
    display:grid;
    place-items:center;
    background:#fff;
    opacity:1;
    visibility:visible;
    transition:opacity .5s ease,visibility .5s ease;
}
.site-preloader.is-complete { opacity:0; visibility:hidden; pointer-events:none; }
.site-preloader-content { width:min(280px,72vw); text-align:center; }
.site-preloader-title { margin:0 0 25px; color:#30302d; font-size:16px; letter-spacing:.08em; }
.site-preloader-progress { height:4px; overflow:hidden; background:#e9e9e5; }
.site-preloader-progress span { display:block; width:8%; height:100%; background:#333; transition:width .3s ease; }
.site-preloader-percent { display:block; margin-top:12px; color:#92928c; font-size:15px; letter-spacing:.08em; font-variant-numeric:tabular-nums; }
@media(prefers-reduced-motion:reduce) {
    .site-preloader,.site-preloader-progress span { transition-duration:.01ms; }
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:30px
}
body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    font-weight:400;
    -webkit-font-smoothing:antialiased
}
a {
    color:inherit
}

.side {
    position:fixed;
    z-index:30;
    left:4.1vw;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:17px
}
.side-brand {
    font-size:15px;
    letter-spacing:.08em;
    text-decoration:none
}
.menu-button {
    width:31px;
    height:28px;
    border:0;
    background:none;
    padding:5px 0;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px
}
.menu-button i {
    display:block;
    width:27px;
    height:1px;
    background:#222;
    transition:transform .3s,width .3s
}
.menu-button:hover i:last-child {
    width:18px
}

.language {
    position:fixed;
    z-index:30;
    right:5vw;
    top:44px;
    font-size:13px;
    letter-spacing:.05em;
    color:#aaa;
    text-decoration:none
}
.language button {
    font:inherit;
    border:0;
    background:none;
    padding:0;
    color:inherit;
    cursor:pointer
}
.language button.active {
    color:var(--ink)
}
.language span {
    padding:0 7px;
    color:#c8c8c2
}
.overlay {
    position:fixed;
    z-index:25;
    inset:0;
    background:rgba(247,247,245,.97);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition:opacity .35s,visibility .35s
}
.overlay.open {
    opacity:1;
    visibility:visible
}
.overlay nav {
    display:flex;
    flex-direction:column;
    gap:11px;
    text-align:center
}
.overlay nav a {
    text-decoration:none;
    font-size:clamp(36px,6vw,68px);
    font-weight:300;
    letter-spacing:-.06em;
    line-height:1.25;
    transition:opacity .2s
}
.overlay nav a:hover {
    opacity:.45
}
.overlay .menu-note {
    margin-top:30px;
    font-size:10px;
    letter-spacing:.2em;
    color:#888
}
.hero {
    height:100svh;
    min-height:650px;
    position:relative;
    display:grid;
    place-items:center;
    text-align:center;
    overflow:hidden
}
.hero-center {
    transform:translateY(8px);
    animation:arrive 1.2s cubic-bezier(.2,.7,.2,1) both
}
.hero h1 {
    font-weight:300;
    font-size:clamp(92px,14vw,190px);
    letter-spacing:-.085em;
    line-height:.85;
    margin:0 0 32px
}
.hero h1 .period {
    letter-spacing:-.1em
}
.role {
    font-size:clamp(13px,1.25vw,17px);
    font-weight:400;
    letter-spacing:.12em;
    margin:0
}
.hero-summary {
    font-size:11px;
    letter-spacing:.12em;
    color:#898983;
    margin:16px 0 0
}




.section {
    width:min(1230px,calc(100% - 18vw));
    margin:0 auto
}
.section-head {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    border-bottom:1px solid var(--rule);
    padding-bottom:19px;
    margin-bottom:54px
}
.eyebrow {
    font-size:10px;
    letter-spacing:.19em;
    color:#898983
}
.section-title {
    font-weight:300;
    font-size:clamp(43px,7vw,88px);
    letter-spacing:-.07em;
    line-height:1;
    margin:0
}
.section-count {
    font-size:11px;
    letter-spacing:.12em;
    color:#898983
}
.about {
    padding:105px 0 155px
}
.about-grid {
    display:grid;
    grid-template-columns:1.1fr .75fr;
    gap:12%;
    align-items:center
}
.about-copy {
    max-width:650px
}
.about-lead {
    font-size:clamp(24px,3vw,39px);
    font-weight:300;
    line-height:1.45;
    letter-spacing:-.035em;
    margin:0 0 28px
}
.about-lead em {
    font-family:var(--serif);
    font-style:italic
}
.about-text {
    max-width:560px;
    font-size:14px;
    color:#72726d;
    line-height:2;
    margin:0
}
.portrait-frame {
    height:420px;
    overflow:hidden;
    background:#d9d9d5;
    position:relative
}
.portrait-frame img {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 35%;
    filter:grayscale(100%);
    mix-blend-mode:multiply
}
.facts {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:70px;
    padding-top:20px;
    border-top:1px solid var(--rule)
}
.fact-label {
    display:block;
    font-size:9px;
    letter-spacing:.16em;
    color:#8b8b85;
    margin-bottom:10px
}
.fact-value {
    font-size:13px
}
.projects {
    padding:50px 0 160px
}
.project-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:32px;
    row-gap:85px
}
.project-card {
    text-decoration:none;
    display:block;
    min-width:0
}
.project-card:nth-child(even) {
    margin-top:115px
}
.project-image {
    height:clamp(250px,34vw,440px);
    overflow:hidden;
    position:relative;
    background:#e7e7e3
}
.project-image img {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    filter:grayscale(100%);
    transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .4s
}

.project-meta {
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding-top:17px;
    font-size:10px;
    color:#777;
    letter-spacing:.1em
}
.project-meta:after {
    content:"VIEW CASE ↗";
    font-size:9px;
    letter-spacing:.08em;
    color:#898983;
    transition:color .2s
}
.project-card:hover .project-meta:after {
    color:var(--ink)
}
.project-name {
    font-size:clamp(20px,2.2vw,29px);
    font-weight:400;
    letter-spacing:-.045em;
    margin:9px 0 8px
}
.project-desc {
    font-size:12px;
    line-height:1.8;
    color:#777;
    margin:0;
    max-width:470px
}
.view-all {
    display:flex;
    justify-content:center;
    margin-top:100px
}
.view-all a {
    font-size:11px;
    letter-spacing:.13em;
    text-decoration:none;
    border-bottom:1px solid #888;
    padding:0 0 9px
}
.experience {
    padding:5px 0 125px
}
.experience-list {
    border-top:1px solid var(--rule)
}
.experience-row {
    display:grid;
    grid-template-columns:1.1fr 1.3fr .65fr;
    gap:24px;
    padding:20px 0;
    border-bottom:1px solid var(--rule);
    align-items:baseline
}
.company {
    font-size:17px;
    letter-spacing:-.02em
}
.position {
    font-size:12px;
    color:#666;
    line-height:1.7
}
.period {
    font-size:10px;
    color:#888;
    letter-spacing:.08em;
    text-align:right;
    white-space:nowrap
}
.design-values {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    margin-top:58px
}
.value {
    border-top:1px solid var(--rule);
    padding-top:15px
}
.value b {
    display:block;
    font-size:13px;
    font-weight:500;
    margin-bottom:8px
}
.value span {
    font-size:11px;
    color:#777;
    line-height:1.8
}
.others {
    padding:35px 0 155px
}
.others-grid {
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:7%;
    align-items:start
}
.other-feature {
    height:420px;
    background:#e4e4df;
    position:relative;
    overflow:hidden
}

.other-feature-label {
    position:absolute;
    left:24px;
    bottom:22px;
    color:white;
    font-size:10px;
    letter-spacing:.17em
}
.notes {
    display:flex;
    flex-direction:column
}
.note {
    padding:19px 0;
    border-top:1px solid var(--rule);
    display:flex;
    justify-content:space-between;
    gap:20px
}
.note:last-child {
    border-bottom:1px solid var(--rule)
}
.note-name {
    font-size:15px;
    font-weight:400
}
.note-type {
    font-size:9px;
    letter-spacing:.12em;
    color:#85857f;
    white-space:nowrap
}
.note-intro {
    font-size:12px;
    line-height:1.9;
    color:#777;
    margin:0 0 26px;
    max-width:400px
}
.contact {
    padding:50px 0 115px
}
.contact-panel {
    border-top:1px solid var(--rule);
    padding:58px 0 0;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:end;
    gap:35px
}
.contact h2 {
    font-size:clamp(48px,9vw,112px);
    font-weight:300;
    letter-spacing:-.08em;
    line-height:.95;
    margin:0
}
.contact-sub {
    font-size:13px;
    color:#777;
    margin:24px 0 0
}
.contact-link {
    font-size:13px;
    letter-spacing:.08em;
    text-decoration:none;
    border-bottom:1px solid #777;
    padding-bottom:9px;
    margin-bottom:9px;
    white-space:nowrap
}
.footer {
    width:min(1230px,calc(100% - 18vw));
    border-top:1px solid var(--rule);
    margin:0 auto;
    padding:20px 0 32px;
    display:flex;
    justify-content:space-between;
    color:#898983;
    font-size:9px;
    letter-spacing:.13em
}
.reveal {
    opacity:0;
    transform:translateY(24px);
    transition:opacity .8s,transform .8s
}
.reveal.visible {
    opacity:1;
    transform:none
}
.project-card {
    cursor:pointer
}
.project-card:focus-visible {
    outline:1px solid #5d5d57;
    outline-offset:7px
}
.case-dialog {
    width:min(1120px,calc(100% - 32px));
    max-width:none;
    max-height:min(92dvh,1100px);
    padding:0;
    border:1px solid #deded9;
    background:var(--paper);
    color:var(--ink);
    box-shadow:0 30px 100px #0003;
    overflow:auto
}
.case-dialog[open] {
    display:block
}
.case-dialog::backdrop {
    background:rgba(18,18,16,.55);
    backdrop-filter:blur(5px)
}
.case-top {
    position:sticky;
    top:0;
    z-index:5;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--rule);
    padding:16px 28px
}
.case-kicker {
    font-size:18px;
    letter-spacing:.17em;
    color:#85857f
}
.case-close {
    border:0;
    background:none;
    color:#252522;
    display:flex;
    align-items:center;
    gap:12px;
    font:10px var(--sans);
    letter-spacing:.1em;
    cursor:pointer
}
.case-close span {
    font-size:24px;
    font-weight:300;
    line-height:1
}
.case-content {
    padding:clamp(25px,6vw,72px)
}
.case-heading {
    font-size:clamp(38px,7vw,78px);
    font-weight:300;
    letter-spacing:-.07em;
    line-height:1.05;
    margin:0 0 20px
}
.case-summary {
    font-size:clamp(15px,1.65vw,18px);
    line-height:1.75;
    color:#5f5f59;
    max-width:800px;
    margin:0 0 34px
}
@media (min-width: 1100px) {
    .case-content[data-project="pdd"] .case-summary {
        max-width:none;
        white-space:nowrap;
    }
}
.case-meta {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    border:0;
    margin:0 0 55px
}
.case-meta div {
    display:flex;
    min-width:0;
    min-height:78px;
    flex-direction:column;
    justify-content:center;
    gap:7px;
    padding:14px 18px;
    border:1px solid #eeefed;
    border-radius:12px;
    background:#f8f8f6;
}
.case-meta dt {
    font-size:10px;
    letter-spacing:.08em;
    color:#92928c;
    margin:0
}
.case-meta dd {
    font-size:14px;
    line-height:1.5;
    color:#252522;
    margin:0
}
.case-story {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
    margin:0 0 64px
}
.case-story h3 {
    font-size:16px;
    letter-spacing:-.02em;
    line-height:1.45;
    font-weight:600;
    margin:0 0 15px
}
.case-story p,.case-story li {
    font-size:14px;
    line-height:1.95;
    color:#53544f
}
.case-story p {
    margin:0
}
.case-story ul {
    margin:0;
    padding-left:18px
}
.case-impact {
    border:1px solid var(--rule);
    padding:20px 22px;
    margin:0 0 52px;
    background:#f0f0ec
}
.case-impact h3 {
    font-size:16px;
    letter-spacing:-.02em;
    line-height:1.45;
    font-weight:600;
    margin:0 0 9px
}
.case-impact p {
    font-size:14px;
    line-height:1.95;
    margin:0
}
.case-gallery-title {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    border-bottom:1px solid var(--rule);
    padding-bottom:14px;
    margin-bottom:22px
}
.case-gallery-title h3 {
    font-size:16px;
    letter-spacing:-.02em;
    line-height:1.45;
    font-weight:600;
    margin:0
}
.case-gallery-title span {
    font-size:10px;
    color:#888;
    letter-spacing:.1em
}
.case-gallery {
    display:grid;
    gap:18px
}
.case-gallery figure {
    margin:0;
    background:#efefeb
}
.case-gallery img {
    display:block;
    width:100%;
    height:auto
}
.case-gallery figcaption {
    padding:10px 14px 12px;
    font-size:12px;
    color:#777;
    letter-spacing:.04em
}
.case-end {
    border-top:1px solid var(--rule);
    margin-top:56px;
    padding-top:18px;
    display:flex;
    justify-content:space-between;
    gap:20px;
    font-size:9px;
    color:#888;
    letter-spacing:.13em
}
@media(max-width:760px) {
    .case-top {
        padding:14px 17px
    }
    .case-content {
        padding:25px 19px 34px
    }
    .case-meta {
        grid-template-columns:1fr;
        margin-bottom:36px
    }
    .case-meta div {
        min-height:66px;
        padding:12px 15px
    }
    .case-story {
        grid-template-columns:1fr;
        gap:27px;
        margin-bottom:42px
    }
    .case-gallery-title {
        align-items:flex-start;
        gap:10px;
        flex-direction:column
    }
    .case-end {
        flex-direction:column
    }
}
@keyframes arrive {
    from {
        opacity:0;
        transform:translateY(24px)
    }
    to {
        opacity:1;
        transform:translateY(8px)
    }
}
@media(max-width:760px) {
    .side {
        left:22px;
        top:25px;
        transform:none;
        flex-direction:row;
        align-items:center;
        gap:15px
    }
    
    .language {
        top:30px;
        right:23px
    }
    .hero {
        min-height:560px
    }
    .hero h1 {
        font-size:clamp(84px,24vw,145px);
        margin-bottom:23px
    }
    
    
    
    .section,.footer {
        width:calc(100% - 48px)
    }
    .about {
        padding:90px 0 100px
    }
    .about-grid {
        grid-template-columns:1fr;
        gap:34px
    }
    .about-copy {
        order:1
    }
    .portrait-frame {
        order:2;
        height:min(100vw,420px)
    }
    .facts {
        margin-top:44px;
        gap:14px
    }
    .fact-value {
        font-size:11px
    }
    .section-head {
        margin-bottom:34px
    }
    .projects {
        padding:30px 0 100px
    }
    .project-grid {
        grid-template-columns:1fr;
        row-gap:45px
    }
    .experience {
        padding-bottom:90px
    }
    .experience-row {
        grid-template-columns:1fr auto;
        gap:5px 14px
    }
    .company {
        font-size:15px
    }
    .position {
        grid-column:1/-1;
        grid-row:2
    }
    .period {
        grid-column:2;
        grid-row:1
    }
    .design-values {
        grid-template-columns:1fr 1fr;
        gap:20px
    }
    .project-card:nth-child(even) {
        margin-top:0
    }
    .project-image {
        height:72vw;
        max-height:430px
    }
    .project-name {
        font-size:24px
    }
    .view-all {
        margin-top:58px
    }
    .others {
        padding:20px 0 100px
    }
    .others-grid {
        grid-template-columns:1fr;
        gap:34px
    }
    .other-feature {
        height:65vw;
        max-height:400px
    }
    .contact {
        padding:20px 0 80px
    }
    .contact-panel {
        grid-template-columns:1fr;
        align-items:start;
        padding-top:38px;
        gap:30px
    }
    .contact-link {
        justify-self:start
    }
    .footer {
        gap:12px;
        flex-direction:column
    }
    .overlay nav a {
        font-size:48px
    }
}
@media(prefers-reduced-motion:reduce) {
    *,*:before,*:after {
        scroll-behavior:auto!important;
        animation-duration:.01ms!important;
        transition-duration:.01ms!important
    }
    .reveal {
        opacity:1;
        transform:none
    }
}
/* Reference-led refinement: compact fixed corner navigation, centered section titles, and an editorial project index. */
    .side {
    left:3.2vw;
    top:5.5vh;
    transform:none;
    gap:20px
}
.side-brand {
    font-size:14px;
    letter-spacing:.03em
}
.menu-button {
    width:30px;
    height:26px;
    gap:5px
}
.menu-button i {
    width:26px;
    background:#242421;
    transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .2s,width .25s
}
.menu-button[aria-expanded="true"] i:first-child {
    transform:translateY(6px) rotate(45deg)
}
.menu-button[aria-expanded="true"] i:nth-child(2) {
    opacity:0
}
.menu-button[aria-expanded="true"] i:last-child {
    transform:translateY(-6px) rotate(-45deg)
}
.menu-button:hover i {
    width:30px
}
.language {
    top:5.2vh;
    right:4.4vw;
    font-size:12px
}
.language button {
    transition:color .2s,opacity .2s
}
.language button:not(.active):hover {
    color:#555
}
.overlay {
    background:rgba(255,255,255,.985);
    transition:opacity .42s cubic-bezier(.2,.7,.2,1),visibility .42s
}
.overlay nav {
    gap:7px
}
.overlay nav a {
    font-size:clamp(38px,4.5vw,62px);
    line-height:1.22;
    transition:color .22s,transform .35s cubic-bezier(.2,.7,.2,1)
}
.overlay nav a:hover {
    opacity:1;
    color:#888;
    transform:translateY(-2px)
}
.overlay.open nav a {
    animation:menu-arrive .52s both
}
.overlay.open nav a:nth-child(2) {
    animation-delay:.04s
}
.overlay.open nav a:nth-child(3) {
    animation-delay:.08s
}
.overlay.open nav a:nth-child(4) {
    animation-delay:.12s
}
.overlay nav a[aria-current="page"] {
    color:#999
}
.overlay .menu-note {
    margin-top:26px;
    letter-spacing:.18em
}
.hero {
    min-height:560px
}
.hero-center {
    transform:translateY(0)
}
.hero h1 {
    font-size:clamp(96px,11.3vw,176px);
    letter-spacing:-.075em;
    line-height:.88;
    margin:0 0 27px
}
.role {
    font-size:clamp(13px,1vw,16px);
    font-weight:400;
    letter-spacing:.015em
}
.section {
    width:min(1280px,calc(100% - 15vw))
}
.section-head {
    display:block;
    text-align:center;
    border:0;
    padding:0;
    margin:0 0 76px
}
.section-head .eyebrow,.section-head .section-count {
    display:none
}
.section-title {
    font-size:clamp(43px,5.7vw,72px);
    letter-spacing:-.065em;
    line-height:1;
    font-weight:300
}
.about {
    padding:125px 0 125px
}
.about-grid {
    grid-template-columns:1fr .78fr;
    gap:11%;
    align-items:center
}
.about-lead {
    font-size:clamp(26px,2.7vw,38px);
    line-height:1.4
}
.about-text {
    font-size:14px;
    line-height:2.05
}
.portrait-frame {
    height:clamp(300px,34vw,440px)
}
.portrait-frame img {
    filter:grayscale(100%);
    mix-blend-mode:multiply
}
.facts {
    margin-top:55px
}
.experience {
    padding:15px 0 130px
}
.experience-row {
    padding:22px 0;
    grid-template-columns:.9fr 1.55fr .55fr;
    gap:30px
}
.company {
    font-size:16px
}
.position {
    font-size:12px
}
.period {
    font-size:10px
}
.projects {
    padding:30px 0 145px
}
.project-grid {
    grid-template-columns:repeat(4,minmax(0,1fr));
    column-gap:24px;
    row-gap:65px
}
.project-card:nth-child(even) {
    margin-top:0
}
.project-image {
    height:auto;
    aspect-ratio:1.5;
    border-radius:0;
    background:#e7e7e2
}
.project-image img {
    transition:transform .75s cubic-bezier(.2,.7,.2,1),filter .4s
}
.project-card:hover .project-image img {
    transform:scale(1.025);
    filter:grayscale(100%) contrast(1.02)
}
.project-meta {
    padding-top:14px;
    gap:8px;
    flex-wrap:wrap;
    justify-content:space-between;
    font-size:9px;
    letter-spacing:.07em
}
.project-meta:after {
    content:"OPEN CASE ↗";
    font-size:8px;
    white-space:nowrap
}
.project-name {
    font-size:clamp(17px,1.6vw,22px);
    line-height:1.3;
    letter-spacing:-.035em;
    margin:10px 0 8px
}
.project-desc {
    font-size:11px;
    line-height:1.8
}
.view-all {
    margin-top:82px
}
.view-all a {
    font-size:10px;
    transition:color .2s,border-color .2s
}
.view-all a:hover {
    color:#777;
    border-color:#222
}
.others {
    padding:20px 0 130px
}
.others-grid {
    grid-template-columns:1.08fr .92fr;
    gap:6%;
    align-items:start
}
.other-feature {
    height:auto;
    aspect-ratio:1.38;
    background:#e4e4df
}
.other-feature img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    filter:grayscale(100%);
    transition:transform .8s cubic-bezier(.2,.7,.2,1)
}
.other-feature:hover img {
    transform:scale(1.025)
}
.other-feature-label {
    left:20px;
    bottom:17px;
    font-size:9px;
    letter-spacing:.14em;
    text-shadow:0 1px 8px #0007
}
.note-intro {
    font-size:12px;
    line-height:1.9;
    margin:0 0 20px
}
.music-panel {
    display:grid;
    grid-template-columns:104px 1fr;
    gap:16px;
    align-items:center;
    background:#fff;
    border:1px solid #ecece7;
    padding:12px;
    margin-bottom:22px;
    box-shadow:0 8px 26px #00000008
}
.music-cover {
    aspect-ratio:1;
    background:#20201e;
    display:grid;
    place-items:center;
    color:#f7f7f5;
    font-family:var(--serif);
    font-size:23px;
    line-height:1.2;
    text-align:center;
    letter-spacing:.06em
}
.music-main {
    min-width:0;
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    align-items:center
}
.music-copy {
    display:flex;
    flex-direction:column;
    gap:5px;
    min-width:0
}
.music-label {
    font-size:8px;
    letter-spacing:.16em;
    color:#8a8a84
}
.music-copy strong {
    font-size:13px;
    font-weight:500
}
.music-sub {
    font-size:10px;
    color:#85857f
}
.music-toggle {
    width:34px;
    height:34px;
    border:1px solid #ddd;
    background:#fff;
    border-radius:50%;
    display:grid;
    place-items:center;
    cursor:pointer;
    transition:background .2s,color .2s,border-color .2s,transform .2s
}
.music-toggle:hover {
    background:#171715;
    color:#fff;
    border-color:#171715;
    transform:scale(1.04)
}
.music-toggle:focus-visible,.case-close:focus-visible,.menu-button:focus-visible,.language button:focus-visible {
    outline:2px solid #777;
    outline-offset:4px
}
.music-controls {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px
}
.music-skip {
    border:0;
    padding:4px 7px;
    background:transparent;
    color:#777772;
    font:22px/1 var(--sans);
    cursor:pointer;
    transition:color .2s,transform .2s
}
.music-skip:hover {
    color:var(--ink);
    transform:scale(1.08)
}
.music-skip:focus-visible {
    outline:2px solid #777;
    outline-offset:2px
}
.play-icon {
    font-size:10px;
    margin-left:2px
}
.music-toggle[aria-pressed="true"] .play-icon {
    font-size:0;
    margin:0;
    width:8px;
    height:11px;
    border-left:2px solid currentColor;
    border-right:2px solid currentColor
}
.music-track {
    grid-column:1/-1
}
.music-progress {
    height:2px;
    background:#e2e2dd;
    position:relative
}
.music-progress i {
    display:block;
    height:100%;
    width:0;
    background:#363632;
    transition:width .2s linear
}
.music-time {
    display:flex;
    justify-content:space-between;
    font-size:8px;
    color:#92928c;
    letter-spacing:.05em;
    margin-top:6px
}
.notes {
    margin-top:7px
}
.note {
    padding:15px 0
}
.note-name {
    font-size:13px
}
.note-type {
    font-size:8px
}
.contact {
    padding:30px 0 110px
}
.contact .section-head {
    margin-bottom:40px
}
.contact-panel {
    grid-template-columns:1fr auto;
    padding:50px 0 0;
    align-items:end
}
.contact h2 {
    font-size:clamp(48px,8vw,96px)
}
.contact-link {
    font-size:11px;
    transition:opacity .2s,border-color .2s
}
.contact-link:hover {
    opacity:.55
}
.footer {
    width:min(1280px,calc(100% - 15vw));
    padding-top:18px
}
.reveal {
    transform:translateY(18px);
    transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)
}
.case-dialog {
    border:0;
    box-shadow:0 32px 110px #0004;
    opacity:0;
    transform:translateY(16px) scale(.99);
    transition:opacity .32s,transform .4s cubic-bezier(.2,.7,.2,1),overlay .4s allow-discrete,display .4s allow-discrete
}
.case-dialog[open] {
    opacity:1;
    transform:none
}
.case-dialog::backdrop {
    background:rgba(20,20,18,0);
    transition:background .35s,overlay .35s allow-discrete,display .35s allow-discrete
}
.case-dialog[open]::backdrop {
    background:rgba(20,20,18,.58)
}
.case-top {
    padding:17px 30px
}
.case-close:hover {
    color:#888
}
.case-gallery figure {
    background:#fff
}
.case-gallery img {
    cursor:default
}
@keyframes menu-arrive {
    from {
        opacity:0;
        transform:translateY(14px)
    }
    to {
        opacity:1;
        transform:translateY(0)
    }
}
@media(min-width:761px) and (max-width:1120px) {
    .section {
        width:calc(100% - 17vw)
    }
    .project-grid {
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:55px 22px
    }
    .project-name {
        font-size:19px
    }
    .experience-row {
        grid-template-columns:.85fr 1.4fr .7fr;
        gap:20px
    }
    .design-values {
        grid-template-columns:repeat(2,1fr)
    }
}
@media(max-width:760px) {
    .side {
        left:22px;
        top:20px;
        gap:13px
    }
    .side-brand {
        font-size:13px
    }
    .menu-button {
        width:26px;
        height:23px;
        gap:4px
    }
    .menu-button i {
        width:22px
    }
    .menu-button:hover i {
        width:25px
    }
    .menu-button[aria-expanded="true"] i:first-child {
        transform:translateY(5px) rotate(45deg)
    }
    .menu-button[aria-expanded="true"] i:last-child {
        transform:translateY(-5px) rotate(-45deg)
    }
    .language {
        top:22px;
        right:22px;
        font-size:11px
    }
    .overlay nav {
        gap:8px
    }
    .overlay nav a {
        font-size:clamp(38px,11vw,54px)
    }
    .hero {
        min-height:500px;
        height:100svh
    }
    .hero h1 {
        font-size:clamp(88px,22vw,130px);
        margin-bottom:21px
    }
    .role {
        font-size:13px
    }
    .section,.footer {
        width:calc(100% - 48px)
    }
    .section-head {
        margin-bottom:45px
    }
    .section-title {
        font-size:clamp(42px,12vw,60px)
    }
    .about {
        padding:100px 0 85px
    }
    .about-grid {
        grid-template-columns:1fr;
        gap:32px
    }
    .about-copy {
        order:1
    }
    .portrait-frame {
        order:2;
        height:min(105vw,430px)
    }
    .facts {
        margin-top:36px;
        gap:13px
    }
    .fact-value {
        font-size:11px
    }
    .experience {
        padding:0 0 88px
    }
    .experience-row {
        grid-template-columns:1fr auto;
        gap:5px 12px;
        padding:17px 0
    }
    .company {
        font-size:14px
    }
    .position {
        grid-column:1/-1;
        grid-row:2;
        font-size:11px
    }
    .period {
        grid-column:2;
        grid-row:1;
        font-size:9px
    }
    .design-values {
        grid-template-columns:1fr 1fr;
        gap:21px 15px;
        margin-top:38px
    }
    .value b {
        font-size:12px
    }
    .value span {
        font-size:10px
    }
    .projects {
        padding:5px 0 90px
    }
    .project-grid {
        grid-template-columns:1fr 1fr;
        gap:38px 16px
    }
    .project-image {
        aspect-ratio:1.2
    }
    .project-name {
        font-size:17px
    }
    .project-meta {
        font-size:8px
    }
    .project-meta:after {
        font-size:7px
    }
    .project-desc {
        font-size:10px
    }
    .view-all {
        margin-top:55px
    }
    .others {
        padding:0 0 85px
    }
    .others-grid {
        grid-template-columns:1fr;
        gap:27px
    }
    .other-feature {
        aspect-ratio:1.45
    }
    .music-panel {
        grid-template-columns:82px 1fr;
        gap:12px;
        padding:10px
    }
    .contact {
        padding:4px 0 74px
    }
    .contact .section-head {
        margin-bottom:24px
    }
    .contact-panel {
        grid-template-columns:1fr;
        gap:26px;
        padding-top:34px
    }
    .contact h2 {
        font-size:clamp(48px,14vw,76px)
    }
    .contact-link {
        justify-self:start
    }
    .footer {
        gap:12px;
        flex-direction:column
    }
    .case-dialog {
        width:calc(100% - 16px);
        max-height:94dvh
    }
    .case-top {
        padding:13px 15px
    }
    .case-story {
        gap:24px
    }
    .case-gallery img {
        width:calc(100% + 38px);
        max-width:none;
        margin-left:-19px
    }
    .case-gallery figcaption {
        padding:10px 0
    }
    .case-end {
        flex-direction:column
    }
}
@media(max-width:420px) {
    .project-grid {
        grid-template-columns:1fr
    }
    .project-image {
        aspect-ratio:1.45
    }
    .facts {
        grid-template-columns:1fr
    }
    .fact {
        padding:11px 0;
        border-bottom:1px solid var(--rule)
    }
    .case-content {
        padding:23px 16px 30px
    }
    .case-gallery img {
        width:calc(100% + 32px);
        margin-left:-16px
    }
}

.experience .section-head {
    margin:70px 0 38px
}
.experience .section-title {
    font-size:clamp(30px,4vw,46px);
    font-weight:400
}

/* Project covers keep every pixel of the source artwork visible. */
.project-image {
    height: auto;
    aspect-ratio: auto;
    overflow: visible;
    background: transparent;
}
.project-image img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    transform: none;
}
.project-card:hover .project-image img {
    transform: none;
}

/* Immersive, in-page full viewport project reader. */
.case-page {
    position: fixed;
    inset: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--paper);
    color: var(--ink);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .28s ease, transform .36s cubic-bezier(.2,.7,.2,1);
    scrollbar-gutter: stable;
}
.case-page[hidden] {
    display: none;
}
.case-page.is-open {
    opacity: 1;
    transform: none;
}
.case-page .case-top {
    min-height: 70px;
    padding: 16px clamp(20px,5vw,76px);
}
.case-page .case-close {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    letter-spacing: 0;
    transition: border-color .2s, background .2s;
}
.case-page .case-close svg { display: block; width: 20px; height: 20px; stroke-width: 1.5; transition: transform .2s; }
.case-page .case-close:hover {
    border-color: var(--rule);
    background: #f3f3ef;
    color: var(--ink);
}
.case-page .case-close:hover svg { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
    .case-page .case-close svg { transition: none; }
}
.case-page .case-close span {
    font-size: 30px;
    font-weight: 300;
}
.case-page .case-content {
    width: min(1120px,100%);
    margin: 0 auto;
    padding: clamp(36px,7vw,88px) clamp(22px,6vw,76px) 72px;
}
@media (prefers-reduced-motion: reduce) {
    .case-page { transition-duration: .01ms; }
}

/* Project index follows the reference: one quiet title, four equal image tiles, numbered captions. */
.projects.section {
    padding: 88px 0 210px;
}
.project-head {
    margin: 0;
    text-align: center;
}
.project-head h2 {
    margin: 0;
    font-size: clamp(46px, 4.2vw, 70px);
    font-weight: 300;
    line-height: 1.12;
    letter-spacing: -.055em;
}
.project-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(28px, 3.6vw, 74px);
    row-gap: 105px;
    margin-top: 190px;
}
.project-card:nth-child(even) {
    margin-top: 0;
}
.project-image {
    display: grid;
    place-items: center;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    overflow: hidden;
    background: transparent;
}
.project-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    transition: opacity .25s ease;
}
.project-card:hover .project-image img {
    opacity: .82;
    transform: none;
}
.project-name {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 13px 0 0;
    color: #999;
    font-size: clamp(12px, 1.08vw, 17px);
    font-weight: 300;
    line-height: 1.45;
    letter-spacing: -.025em;
    white-space: nowrap;
}
.project-index {
    flex: none;
    color: #999;
}
.project-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.project-meta,
.project-desc,
.view-all {
    display: none;
}
.project-card:focus-visible {
    outline: 1px solid #777;
    outline-offset: 8px;
}
@media (min-width: 761px) and (max-width: 1120px) {
    .project-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 34px;
        row-gap: 78px;
        margin-top: 130px;
    }
    .project-name {
        font-size: 14px;
    }
}
@media (max-width: 760px) {
    .projects.section {
        width: calc(100% - 48px);
        padding: 62px 0 110px;
    }
    .project-head h2 {
        font-size: clamp(40px, 11vw, 58px);
    }
    .project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 48px 20px;
        margin-top: 90px;
    }
    .project-name {
        gap: 5px;
        margin-top: 10px;
        font-size: clamp(10px, 2.5vw, 14px);
    }
}
@media (max-width: 420px) {
    .project-grid {
        grid-template-columns: 1fr;
        gap: 42px;
    }
    .project-name {
        font-size: 14px;
    }
}

/* Keep all five portfolio projects on one horizontal line. */
.project-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: clamp(20px, 2.95vw, 60px);
    row-gap: 0;
}
.project-card {
    min-width: 0;
}
.project-image img {
    object-fit: contain;
}
@media (max-width: 1120px) {
    .project-grid {
        grid-template-columns: repeat(5, minmax(140px, 1fr));
        column-gap: 24px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
        padding-bottom: 8px;
    }
    .project-grid::-webkit-scrollbar {
        display: none;
    }
    .project-card {
        scroll-snap-align: start;
    }
}
@media (max-width: 760px) {
    .project-grid {
        grid-template-columns: repeat(5, minmax(170px, 1fr));
        column-gap: 18px;
        margin-top: 74px;
    }
    .project-name {
        font-size: 12px;
    }
}

.hero-mark {
    display: block;
    width: auto;
    height: clamp(160px, 24vh, 230px);
    margin: 0 auto 32px;
    object-fit: contain;
}
@media (max-width: 760px) {
    .hero-mark {
        height: clamp(145px, 23vh, 195px);
        margin-bottom: 25px;
    }
}

/* Match the supplied portrait's native 1866:2744 ratio without cropping. */
.portrait-frame {
    width: 100%;
    height: auto;
    aspect-ratio: 1866 / 2744;
    overflow: hidden;
    background: transparent;
}
.portrait-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    filter: none;
    mix-blend-mode: normal;
}
.side {
    top: 5.5vh;
    left: 3vw;
    transform: none;
    align-items: flex-start;
    gap: 14px;
}
.side-brand {
    display: block;
    line-height: 0;
}
.side-brand img {
    display: block;
    width: auto;
    height: 42px;
}
@media (max-width: 760px) {
    .portrait-frame {
        height: auto;
        aspect-ratio: 1866 / 2744;
    }
    .side {
        top: 22px;
        left: 20px;
        transform: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .side-brand img {
        height: 34px;
    }
}

/* Keep the portrait at its original display height while preserving its native ratio. */
.about-grid > div:last-child {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.portrait-frame {
    flex: none;
    width: auto;
    height: clamp(300px, 34vw, 440px);
    aspect-ratio: 1866 / 2744;
}
@media (max-width: 760px) {
    .about-grid > div:last-child {
        align-items: center;
    }
    .portrait-frame {
        width: auto;
        height: min(105vw, 430px);
        aspect-ratio: 1866 / 2744;
    }
}

/* Write the mark along its center strokes, then resolve into the original solid logo. */
.hero-mark.hero-logo-trace { overflow: visible; }
.hero-mark .logo-solid { opacity: 0; animation: logo-solid-reveal .42s ease-out 1.64s forwards; }
.hero-mark .logo-line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: logo-centerline-draw .85s cubic-bezier(.55,.05,.25,1) forwards;
}
.hero-mark .logo-line-x2 { animation-delay: .18s; }
.hero-mark .logo-line-u { animation-delay: .78s; }
@keyframes logo-centerline-draw {
    0% { stroke-dashoffset: 1; opacity: 1; }
    88% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes logo-solid-reveal { to { opacity: 1; } }
@keyframes role-appear {
    from { opacity: 0; }
    to { opacity: 1; }
}
.hero .role {
    opacity: 0;
    animation: role-appear .55s ease-out 1.82s forwards;
}
@media (prefers-reduced-motion: reduce) {
    .hero-mark .logo-solid { animation: none; opacity: 1; }
    .hero-mark .logo-line { animation: none; opacity: 0; stroke-dashoffset: 0; }
    .hero .role { animation: none; opacity: 1; transform: none; }
}

/* About page composition based on the supplied reference layout. */
.about.section {
    width: 86%;
    max-width: none;
    padding: 36px 0 100px;
}
.about .section-head {
    margin-bottom: 118px;
}
.about .section-title {
    font-size: clamp(64px, 5vw, 96px);
    letter-spacing: -.055em;
}
.about-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8vw;
    align-items: center;
}
.about-copy {
    max-width: 1100px;
}
.about-lead {
    max-width: 1120px;
    font-size: clamp(34px, 3vw, 56px);
    line-height: 1.45;
    letter-spacing: -.045em;
    margin-bottom: 48px;
}
.about-text {
    max-width: 1100px;
    font-size: clamp(15px, .9vw, 18px);
    line-height: 2.15;
}
.about-grid > div:last-child {
    align-items: flex-end;
}
.portrait-frame {
    height: clamp(400px, 32vw, 660px);
}
@media (max-width: 760px) {
    .about.section {
        width: calc(100% - 40px);
        padding: 90px 0 76px;
    }
    .about .section-head {
        margin-bottom: 44px;
    }
    .about .section-title {
        font-size: clamp(48px, 13vw, 66px);
    }
    .about-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .about-lead {
        font-size: clamp(29px, 8vw, 38px);
        margin-bottom: 25px;
    }
    .about-text {
        font-size: 14px;
        line-height: 2;
    }
    .about-grid > div:last-child {
        align-items: center;
    }
    .portrait-frame {
        height: min(105vw, 430px);
    }
}

/* Preserve the paragraph rhythm shown in the supplied About reference. */
.about-text {
    max-width: 1100px;
    line-height: 2.3;
}
/* Project cover artwork stays in its original color in every state. */
.project-image img,
.project-card:hover .project-image img {
    filter: none;
}

.project-grid .project-card:nth-child(2) { transition-delay: .08s; }
.project-grid .project-card:nth-child(3) { transition-delay: .16s; }
.project-grid .project-card:nth-child(4) { transition-delay: .24s; }
.project-grid .project-card:nth-child(5) { transition-delay: .32s; }
@media (max-width: 760px) {
    }
@media (prefers-reduced-motion: reduce) {
    .project-grid .project-card {
        transition-duration: .01ms;
        transition-delay: 0ms;
    }
}

/* Horizontal project rail follows the reference's scroll-through gallery. */
.projects.section {
    width: 82%;
    max-width: none;
}
.project-grid {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3 * clamp(28px, 3.6vw, 74px)) / 4);
    column-gap: clamp(28px, 3.6vw, 74px);
    row-gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
    padding-bottom: 12px;
}
.project-grid::-webkit-scrollbar { display: none; }
.project-card { scroll-snap-align: start; }
@media (max-width: 1120px) {
    .projects.section { width: calc(100% - 48px); }
    .project-grid {
        grid-auto-columns: calc((100% - 2 * 24px) / 3);
        column-gap: 24px;
    }
}
@media (max-width: 760px) {
    .project-grid {
        grid-auto-columns: 78vw;
        column-gap: 18px;
        margin-top: 74px;
    }
}

/* Subtle, drifting particle field behind the homepage mark. */
.hero-particles {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.hero-center {
    position: relative;
    z-index: 1;
}

/* Minimal, clearer experience and strengths block. */
.experience {
    padding: 86px 0 116px;
}
.experience .section-head {
    display: block;
    margin: 0 0 clamp(92px, 10vw, 142px);
    padding: 0;
    border: 0;
    text-align: center;
}
.experience .section-title {
    font-size: clamp(58px, 6.2vw, 90px);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -.065em;
}
.experience-list {
    border-top: 1px solid var(--rule);
}
.experience-row {
    min-height: 96px;
    grid-template-columns: minmax(190px, .82fr) minmax(0, 1.5fr) minmax(145px, .58fr);
    gap: 32px;
    align-items: center;
    padding: 22px 0;
    transition: color .22s ease;
}
.company {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: -.025em;
}
.position {
    font-size: 15px;
    color: #777773;
    line-height: 1.7;
}
.period {
    font-size: 12px;
    color: #999993;
    letter-spacing: .07em;
}

.design-values {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(22px, 3vw, 48px);
    margin-top: 82px;
}
.value {
    min-width: 0;
    border-top: 1px solid var(--rule);
    padding-top: 22px;
}
.value b {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 12px;
}
.value span {
    display: block;
    font-size: 13px;
    color: #858580;
    line-height: 1.9;
}
@media (max-width: 1000px) {
    .experience-row {
        grid-template-columns: minmax(150px, .8fr) minmax(0, 1.35fr) minmax(120px, .65fr);
        gap: 20px;
    }
    .position { font-size: 13px; }
}
@media (max-width: 760px) {
    .experience { padding: 68px 0 82px; }
    .experience .section-head { margin-bottom: 58px; }
    .experience .section-title { font-size: clamp(48px, 12vw, 68px); }
    .experience-row {
        min-height: 0;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px 16px;
        align-items: baseline;
        padding: 20px 0;
    }
    .company { font-size: 16px; }
    .position {
        grid-column: 1 / -1;
        grid-row: 2;
        font-size: 12px;
    }
    .period {
        grid-column: 2;
        grid-row: 1;
        font-size: 10px;
    }
    .design-values {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 18px;
        margin-top: 52px;
    }
    .value { padding-top: 16px; }
    .value b { font-size: 14px; }
    .value span { font-size: 12px; }
}
@media (max-width: 420px) {
    .design-values { grid-template-columns: 1fr; }
}

/* Editorial timeline treatment for the experience section. */
.experience {
    padding: 72px 0 112px;
}
.experience .section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin: 0 0 54px;
    padding: 0 0 22px;
    border-bottom: 1px solid var(--rule);
    text-align: left;
}
.experience .section-head > div {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.experience .section-head .eyebrow,
.experience .section-head .section-count {
    display: block;
}
.experience .section-head .eyebrow {
    font-size: 10px;
    letter-spacing: .18em;
    color: #92928c;
}
.experience .section-head .section-count {
    font-size: 11px;
    letter-spacing: .12em;
    color: #92928c;
}
.experience .section-title {
    font-size: clamp(52px, 6vw, 78px);
    font-weight: 300;
    line-height: .98;
    letter-spacing: -.065em;
}
.experience-list {
    border: 0;
}
.experience-row {
    display: grid;
    grid-template-columns: minmax(125px, .34fr) minmax(0, 1fr);
    grid-template-areas: "period company" ". position";
    gap: 9px 52px;
    align-items: baseline;
    min-height: 0;
    padding: 25px 0 27px;
    border-top: 1px solid var(--rule);
    border-bottom: 0;
}
.experience-row:last-child {
    border-bottom: 1px solid var(--rule);
}
.experience-row .period {
    grid-area: period;
    text-align: left;
    white-space: nowrap;
    font-size: 12px;
    letter-spacing: .06em;
}
.experience-row .company {
    grid-area: company;
    font-size: 21px;
    line-height: 1.2;
}
.experience-row .position {
    grid-area: position;
    font-size: 14px;
    line-height: 1.65;
    color: #7e7e78;
}

.design-values {
    margin-top: 68px;
    gap: clamp(20px, 2.8vw, 42px);
}
.value {
    padding-top: 18px;
}
.value b {
    font-size: 14px;
    margin-bottom: 9px;
}
.value span {
    font-size: 12px;
    line-height: 1.85;
}
@media (max-width: 760px) {
    .experience { padding: 56px 0 76px; }
    .experience .section-head {
        margin-bottom: 34px;
        padding-bottom: 16px;
    }
    .experience .section-head > div { gap: 10px; }
    .experience .section-title { font-size: clamp(46px, 12vw, 64px); }
    .experience .section-head .section-count { font-size: 9px; }
    .experience-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "company period" "position position";
        gap: 9px 14px;
        padding: 20px 0 22px;
    }
    .experience-row .company { font-size: 17px; }
    .experience-row .period { font-size: 10px; }
    .experience-row .position { font-size: 12px; }
    .design-values {
        margin-top: 48px;
        gap: 24px 18px;
    }
}

/* Experience rows: company identity on the left, dates on the far right. */
.experience-row {
    grid-template-columns: minmax(0, 1fr) minmax(150px, .34fr);
    grid-template-areas: "company period" "position period";
    align-items: center;
    gap: 8px 32px;
}
.experience-row .company-cell {
    grid-area: company;
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}
.experience-row .company {
    font-size: 20px;
}
.experience-row .company-logo {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    font-family: Arial, sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.06em;
}
.logo-tideview { color: #426f68; }
.logo-rakuten { color: #bf1723; font-size: 24px !important; }
.logo-aiya { color: #7659c8; }
.logo-qiandao { color: #262626; }
.logo-pdd { color: #d94b35; }
.logo-yto { color: #d59919; }
.experience-row .position {
    grid-area: position;
    margin-left: 50px;
}
.experience-row .period {
    grid-area: period;
    align-self: center;
    justify-self: end;
    text-align: right;
}
@media (max-width: 760px) {
    .experience-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "company period" "position position";
        gap: 9px 14px;
    }
    .experience-row .company-cell { gap: 11px; }
    .experience-row .company-logo {
        flex-basis: 28px;
        width: 28px;
        height: 28px;
        font-size: 16px;
    }
    .experience-row .company { font-size: 16px; }
    .experience-row .position { margin-left: 39px; }
    .experience-row .period { justify-self: end; }
}
.experience-row .company-logo {
    display: block;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    object-fit: contain;
}
@media (max-width: 760px) {
    .experience-row .company-logo {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
    }
}

/* Keep each employer mark centered against its two-line description. */
.experience-row {
    grid-template-columns: minmax(0, 1fr) minmax(150px, .34fr);
    grid-template-areas: "details period";
    align-items: center;
    gap: 8px 32px;
}
.experience-row .company-info {
    grid-area: details;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 4px;
    row-gap: 5px;
    min-width: 0;
}
.experience-row .company-info .company-logo {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    width: 42px;
    height: 42px;
    flex: none;
    object-fit: contain;
}
.experience-row .company-info .company {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}
.experience-row .company-info .position {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    min-width: 0;
}
.experience-row .period {
    grid-area: period;
    align-self: center;
    justify-self: end;
    text-align: right;
}
@media (max-width: 760px) {
    .experience-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "details period";
        gap: 8px 14px;
    }
    .experience-row .company-info {
        grid-template-columns: 34px minmax(0, 1fr);
        column-gap: 7px;
        row-gap: 4px;
    }
    .experience-row .company-info .company-logo {
        width: 34px;
        height: 34px;
    }
    .experience-row .company-info .company { font-size: 16px; }
    .experience-row .company-info .position { font-size: 12px; }
}

/* Fit all five project cards in one desktop row. */
@media (min-width: 1121px) {
    .project-grid {
        grid-auto-columns: calc((100% - 4 * clamp(18px, 1.45vw, 30px)) / 5);
        column-gap: clamp(18px, 1.45vw, 30px);
        overflow-x: hidden;
        scroll-snap-type: none;
    }
}

/* Floating section title enters at the top only after its large title passes. */
/* Compact fixed navigation tabs replace the former hamburger overlay. */
.top-nav {
    position: fixed;
    z-index: 30;
    top: 5.2vh;
    right: clamp(112px, 9.3vw, 190px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(18px, 2vw, 34px);
    white-space: nowrap;
    color: #777772;
    font-size: clamp(12px, .86vw, 15px);
    letter-spacing: .015em;
}
.top-nav a {
    position: relative;
    text-decoration: none;
    transition: color .25s ease;
}
.top-nav a:hover,
.top-nav a[aria-current="page"] {
    color: var(--ink);
}
.top-nav a::after {
    position: absolute;
    right: 0;
    bottom: -7px;
    left: 0;
    height: 1px;
    background: currentColor;
    content: "";
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.top-nav a:hover::after,
.top-nav a[aria-current="page"]::after {
    transform: scaleX(1);
}
.top-nav a:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 5px;
}
@media (max-width: 760px) {
    .top-nav {
        top: 61px;
        right: 18px;
        left: 18px;
        justify-content: center;
        gap: clamp(10px, 3.5vw, 20px);
        font-size: clamp(10px, 2.9vw, 12px);
    }
    .top-nav a::after { bottom: -5px; }
    }
@media (max-width: 360px) {
    .top-nav { gap: 8px; font-size: 9px; }
}

/* Align the top navigation and language switch with the center of the logo. */
.top-nav,
.language {
    top: calc(5.2vh + 15px);
    line-height: 1.2;
}
@media (max-width: 760px) {
    .top-nav { top: 61px; }
    .language { top: 22px; }
}

/* Raise the entire desktop header row to match the Doubao reference placement. */
@media (min-width: 761px) {
    .side { top: 4vh; }
    .top-nav,
    .language { top: calc(4vh + 12px); }
}

/* Move the complete desktop header closer to the top edge. */
@media (min-width: 761px) {
    .side { top: 2.5vh; }
    .top-nav,
    .language { top: calc(2.5vh + 12px); }
}

/* A soft blurred veil appears as the page leaves the opening screen. */
.header-scroll-mask {
    position: fixed;
    z-index: 29;
    inset: 0 0 auto;
    height: clamp(112px, 17vh, 196px);
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,.94) 0%, rgba(255,255,255,.82) 36%, rgba(255,255,255,.42) 72%, rgba(255,255,255,0) 100%);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
    transition: opacity .42s ease;
}
body.has-scrolled-header .header-scroll-mask {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .header-scroll-mask { transition-duration: .01ms; }
}

/* Match the compact top veil height used by the Doubao reference. */
.header-scroll-mask {
    height: clamp(92px, 10vh, 124px);
}

/* Header veil is a uniform blur, without a gradient fade. */
.header-scroll-mask {
    background: rgba(255, 255, 255, .76);
    -webkit-mask-image: none;
    mask-image: none;
}

/* A quiet, photo-led rework of the tea-time / off-hours section. */
.others.section {
    width: 86%;
    max-width: none;
    padding: 82px 0 132px;
}
.others.section .section-head {
    margin-bottom: clamp(54px, 7vw, 100px);
}
.others.section .section-title {
    font-size: clamp(58px, 6vw, 88px);
}
.after-hours { width: 100%; }
.hobby-intro {
    display: grid;
    grid-template-columns: minmax(220px, .72fr) minmax(0, 1.5fr);
    align-items: center;
    gap: clamp(32px, 5vw, 78px);
    padding-bottom: 38px;
    border-bottom: 1px solid var(--rule);
}
.hobby-kicker {
    display: block;
    color: #92928c;
    font-size: 10px;
    letter-spacing: .16em;
}
.hobby-heading h3,
.film-heading h3 {
    margin: 12px 0 9px;
    font-size: clamp(20px, 1.7vw, 27px);
    font-weight: 400;
    letter-spacing: -.04em;
}
.hobby-heading p {
    margin: 0;
    color: #81817b;
    font-size: 13px;
    line-height: 1.8;
}
.hobby-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.hobby-item {
    display: flex;
    min-width: 0;
    min-height: 108px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 15px 14px;
    border: 1px solid #e9e9e4;
    background: #fff;
    transition: border-color .25s ease, transform .25s ease;
}
.hobby-item:hover {
    border-color: #bdbdb6;
    transform: translateY(-2px);
}
.hobby-item svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: #343431;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hobby-item span {
    font-size: 13px;
    line-height: 1.35;
}
.music-panel {
    width: min(560px, 100%);
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 15px;
    margin: 22px 0 72px auto;
    padding: 12px;
    border-color: #e9e9e4;
    background: #fbfbf9;
    box-shadow: none;
}
.music-cover {
    width: 62px;
    font-size: 18px;
}
.music-main { font-size: 9px; }
.music-copy { display: grid; gap: 3px; }
.music-copy strong { color: var(--ink); font-size: 14px; font-weight: 500; }
.music-track { margin-top: 8px; }
.music-controls { margin-top: 5px; }
.film-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}
.film-heading h3 { margin-bottom: 0; }
.film-count {
    padding-bottom: 3px;
    color: #92928c;
    font-size: 10px;
    letter-spacing: .14em;
}
.film-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(9px, 1.15vw, 16px);
}
.film-frame {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 1.52;
    background: #f1f1ee;
}
.film-frame:nth-last-child(-n+4) { aspect-ratio: 1; }
.film-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.film-frame:hover img { transform: scale(1.035); }
@media (max-width: 900px) {
    .hobby-intro { grid-template-columns: 1fr; gap: 24px; }
    .film-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .others.section { width: calc(100% - 40px); padding: 64px 0 86px; }
    .others.section .section-head { margin-bottom: 48px; }
    .hobby-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hobby-item { min-height: 90px; padding: 13px; }
    .music-panel { margin: 20px 0 50px; }
    .film-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .film-frame:nth-last-child(-n+4) { aspect-ratio: 1.15; }
    .film-heading h3 { font-size: 19px; }
}

/* Match the header veil to the compact red-box height in the reference. */
.header-scroll-mask {
    height: clamp(72px, 7.6vh, 92px);
}

/* Match the Off Hours heading scale to the Project section heading. */
.others.section .section-title {
    font-size: clamp(46px, 4.2vw, 70px);
}

/* A centered eye cue makes the clickable project covers discoverable. */
.project-image {
    position: relative;
    cursor: pointer;
}
.project-view-indicator {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(20, 20, 20, .16);
    opacity: 0;
    transition: opacity .22s ease;
    pointer-events: none;
}
.project-view-indicator svg {
    width: 42px;
    height: 42px;
    padding: 10px;
    color: #222;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    transform: translateY(4px) scale(.94);
    transition: transform .22s ease;
}
.project-card:hover .project-view-indicator,
.project-card:focus-visible .project-view-indicator {
    opacity: 1;
}
.project-card:hover .project-view-indicator svg,
.project-card:focus-visible .project-view-indicator svg {
    transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
    .project-view-indicator,
    .project-view-indicator svg { transition-duration: .01ms; }
}
@media (max-width: 760px) {
    .others.section .section-title {
        font-size: clamp(40px, 11vw, 58px);
    }
}

/* Repeat the home mark in the project reader's fixed top bar. */
.case-page .case-top {
    padding: 10px 3vw;
}
.case-brand-group {
    display: flex;
    align-items: center;
    gap: 18px;
}
.case-page .case-brand {
    display: block;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    line-height: 0;
    cursor: pointer;
}
.case-page .case-brand img {
    display: block;
    width: auto;
    height: 42px;
}

/* Travel Planner case study: native HTML and SVG presentation, no screenshot artwork. */
.travel-detail {
    display: grid;
    gap: clamp(40px, 5vw, 68px);
    margin-bottom: 68px;
}
.travel-section > h3,
.travel-section-heading h3 {
    margin: 0 0 18px;
    color: #20211f;
    font-size: 16px;
    line-height: 1.45;
    font-weight: 600;
    letter-spacing: -.02em;
}
.travel-background p {
    margin: 0 0 10px;
    color: #53544f;
    font-size: 14px;
    line-height: 1.95;
}
.travel-background p:last-child { margin-bottom: 0; }
.travel-background-image { margin: 24px 0 0; overflow: hidden; border-radius: 14px; background: #eef0ef; }
.travel-background-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.travel-card-grid {
    display: grid;
    gap: 14px;
}
.purpose-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.thought-grid,
.implementation-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.travel-card {
    min-width: 0;
    padding: 22px 20px;
    border: 1px solid #edf0f4;
    border-radius: 17px;
    background: #fff;
}
.purpose-card {
    min-height: 240px;
    background: #f6f8fb;
    border-color: transparent;
}
.travel-card > svg {
    display: block;
    width: 38px;
    height: 38px;
    margin-bottom: 17px;
    fill: none;
    stroke: #303331;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.travel-card h4 {
    margin: 0 0 8px;
    color: #20211f;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 600;
}
.travel-card p {
    margin: 0;
    color: #50514e;
    font-size: 12px;
    line-height: 1.85;
}
.thought-card {
    min-height: 195px;
    border-width: 2px;
    padding: 21px 20px;
}
.thought-card h4 { color: var(--accent); }
.thought-symbol,
.implementation-icon {
    display: block;
    margin-bottom: 12px;
    color: var(--accent, #353633);
    font-size: 34px;
    line-height: 1;
}
.thought-symbol svg {
    width: 37px;
    height: 37px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
}
.travel-section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 15px;
}
.travel-section-heading h3 { margin: 0; }
.travel-section-heading > span {
    color: #8a8c8f;
    font-size: 10px;
    letter-spacing: .04em;
}
.journey-map {
    overflow-x: auto;
    border: 1px solid #e8e9e8;
    background: #fff;
    scrollbar-width: thin;
    scrollbar-color: #c8cbc9 transparent;
}
.journey-stage-row,
.journey-row {
    display: grid;
    grid-template-columns: 112px repeat(6, minmax(104px, 1fr));
    min-width: 800px;
}
.journey-stage-row {
    gap: 5px;
    padding: 10px 10px 12px;
    background: #f8f8f6;
}
.journey-stage-row > strong,
.journey-row > strong,
.journey-emotion > strong {
    align-self: start;
    color: #78817d;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
}
.journey-stage-row > span {
    display: grid;
    min-height: 45px;
    place-content: center;
    gap: 3px;
    padding: 5px;
    border-radius: 5px;
    background: #202b49;
    color: #fff;
    text-align: center;
    font-size: 9px;
    line-height: 1.35;
}
.journey-stage-row small {
    color: #9ed3be;
    font-size: 8px;
    font-weight: 600;
}
.journey-row {
    border-top: 1px solid #eceeed;
}
.journey-row > * {
    min-height: 58px;
    padding: 13px 9px;
    border-right: 1px solid #f0f0ee;
    color: #555752;
    font-size: 9px;
    line-height: 1.6;
}
.journey-row > strong { color: #658279; }
.journey-row-1 { background: #f7f7f6; }
.journey-row-1 > strong { color: #7464a7; }
.journey-row-2 { background: #fbf3ee; }
.journey-row-2 > strong { color: #b67044; }
.journey-row-3 { background: #edf5f1; }
.journey-row-3 > strong { color: #47806d; }
.journey-emotion {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    min-width: 800px;
    padding: 8px 10px;
    border-top: 1px solid #eceeed;
}
.journey-emotion svg {
    width: 100%;
    height: 112px;
    overflow: visible;
}
.emotion-guide { fill: none; stroke: #e7e7e3; stroke-dasharray: 3 5; }
.emotion-line { fill: none; stroke: #d58a18; stroke-width: 2; }
.emotion-points circle { fill: #d58a18; }
.implementation-card { min-height: 220px; padding: 22px 20px; }
.implementation-icon { color: #303331; font-size: 36px; }
.implementation-card h4 { max-width: 250px; }

/* AIYA case study: recreate the supplied editorial board with native UI. */
.aiya-detail { display: grid; gap: clamp(30px, 4vw, 54px); margin-bottom: 68px; color: #17191c; }
.aiya-section > h3 { margin: 0 0 14px; color: #17191c; font-size: 16px; line-height: 1.45; font-weight: 650; letter-spacing: -.02em; }
.aiya-background p { margin: 0 0 8px; color: #25272a; font-size: 12px; line-height: 1.95; }
.aiya-background p:last-of-type { margin-bottom: 0; }
.aiya-background-image { margin: 16px 0 0; overflow: hidden; border-radius: 12px; }
.aiya-background-image img { display: block; width: 100%; height: auto; }
.aiya-purpose-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.aiya-purpose-card { min-width: 0; min-height: 130px; padding: 18px 20px; border-radius: 15px; background: #f5f7fa; }
.aiya-purpose-card svg,.aiya-thought-card svg { display: block; width: 34px; height: 34px; margin-bottom: 12px; fill: none; stroke: #363a3e; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.aiya-purpose-card h4,.aiya-thought-card h4 { margin: 0 0 8px; color: #17191c; font-size: 13px; line-height: 1.5; font-weight: 650; }
.aiya-purpose-card p,.aiya-thought-card p { margin: 0; color: #34373a; font-size: 11px; line-height: 1.8; white-space: pre-line; }
.aiya-purpose-product { grid-column: 1 / -1; min-height: auto; }
.aiya-thought-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.aiya-thought-card { min-width: 0; min-height: 230px; padding: 18px; border: 1px solid #eef1f4; border-radius: 16px; background: #fff; }
.aiya-thought-card svg { width: 38px; height: 38px; margin-bottom: 14px; }
.aiya-mindset-figure { margin: 18px 0 0; overflow: hidden; border-radius: 12px; background: #fff; }
.aiya-mindset-figure img { display: block; width: 100%; height: auto; }
.aiya-implementation-intro { margin: -3px 0 14px; color: #34373a; font-size: 12px; line-height: 1.8; }
.aiya-implementation-image { margin: 0; overflow: hidden; border-radius: 12px; }
.aiya-implementation-image img { display: block; width: 100%; height: auto; }
.aiya-initial-version > h3,.aiya-current-version > h3 { display: flex; align-items: center; gap: 8px; }
.aiya-initial-version > h3 svg,.aiya-current-version > h3 svg { display: block; flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.aiya-version-description { margin: -5px 0 14px; color: #34373a; font-size: 12px; line-height: 1.8; }
.aiya-version-image { margin: 0; overflow: hidden; border-radius: 12px; background: #101113; }
.aiya-version-image img { display: block; width: 100%; height: auto; transform: translateY(-13%); }
.aiya-version-image-initial { aspect-ratio: auto; }
.aiya-version-image-initial img { transform: none; }
.aiya-version-image-current { aspect-ratio: auto; }
.aiya-version-image-current img { transform: none; }
.aiya-version-timeline figure { margin: 0; overflow: hidden; border-radius: 12px; background: #f5f7fa; isolation: isolate; }
.aiya-version-timeline img { display: block; width: 100%; height: auto; filter: invert(1) grayscale(1) brightness(1.4); mix-blend-mode: multiply; }
.aiya-iteration-results figure { margin: 0; overflow: hidden; border-radius: 12px; background: #101113; }
.aiya-iteration-results img { display: block; width: 100%; height: auto; }
@media (max-width: 760px) {
    .aiya-purpose-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .aiya-purpose-product { grid-column: 1 / -1; }
    .aiya-thought-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .aiya-thought-card { min-height: 0; }
}

/* Japan Living Assistant case study, using the same editorial system as Travel Planner. */
.japan-detail { color: #26344a; }
.japan-detail .travel-section > h3,
.japan-section-heading h3 { color: #24354d; }
.japan-section-heading { margin-bottom: 16px; }
.japan-section-heading h3 { margin: 0 0 6px; font-size: 16px; line-height: 1.45; font-weight: 600; letter-spacing: -.02em; }
.japan-section-heading p { margin: 0; color: #8592a4; font-size: 11px; line-height: 1.75; }
.japan-purpose-card { min-height: 220px; }
.japan-symbol { display: grid; width: 36px; height: 36px; margin-bottom: 16px; place-items: center; color: #3c4651; }
.japan-symbol svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.japan-thought-grid .japan-question-card { min-height: 205px; border: 0; background: #f5f7fa; }
.japan-question-card h4 { color: #26344a; }
.japan-reframe,
.japan-strategy-panel,
.japan-compare,
.japan-swimlane { padding: clamp(16px, 2vw, 24px); border-radius: 17px; background: #f4f7fa; }
.japan-reframe-card { padding: clamp(17px, 2vw, 24px); border-radius: 13px; background: #fff; }
.japan-overline { display: block; margin-bottom: 8px; color: #4f6481; font-size: 11px; font-weight: 650; letter-spacing: .015em; }
.japan-reframe-card h4,
.japan-compare-card h4 { margin: 0 0 7px; color: #293c55; font-size: 15px; line-height: 1.5; }
.japan-reframe-card > p:not(.japan-sub-label) { margin: 0; color: #778397; font-size: 11px; line-height: 1.75; }
.japan-needs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.japan-needs span { padding: 8px 10px; border: 1px solid #e8edf4; border-radius: 7px; background: #f8f9fb; color: #5d6d81; font-size: 10px; }
.japan-reframe-connector { padding: 9px; color: #9ca9b8; text-align: center; }
.japan-principle { display: grid; gap: 5px; margin: 14px 0 18px; padding: 13px 15px; border-radius: 8px; background: #edf2ff; color: #435f9e; }
.japan-principle strong,.japan-sub-label { font-size: 9px; letter-spacing: .06em; }
.japan-principle span { font-size: 12px; font-weight: 600; }
.japan-sub-label { margin: 17px 0 9px; color: #8693a5; font-weight: 650; }
.japan-architecture { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 10px; }
.japan-architecture-step { display: grid; min-height: 57px; align-content: center; gap: 4px; padding: 10px; border: 1px solid #edf0f4; border-radius: 8px; background: #f8f9fb; }
.japan-architecture-step strong { color: #4c6383; font-size: 11px; }
.japan-architecture-step span { color: #8490a0; font-size: 9px; }
.japan-strategy-arrow { color: #a5afbc; font-size: 18px; text-align: center; }
.japan-task-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.japan-task-card { padding: 13px; border: 1px solid #edf0f4; border-radius: 9px; background: #f8f9fb; }
.japan-task-card .japan-symbol { width: 25px; height: 25px; margin: 0 0 8px; color: #5576bf; }
.japan-task-card .japan-symbol svg { stroke-width: 1.2; }
.japan-task-card h4 { margin: 0 0 4px; color: #405674; font-size: 11px; }
.japan-task-card p { color: #8590a0; font-size: 9px; line-height: 1.6; }
.japan-strategy-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: stretch; gap: 10px; }
.japan-strategy-step { padding: 16px; border: 1px solid #e9edf3; border-radius: 9px; background: #fff; }
.japan-strategy-number { color: #526a91; font-size: 19px; font-weight: 700; }
.japan-strategy-step h4 { margin: 9px 0 6px; color: #293c55; font-size: 12px; }
.japan-strategy-step p { margin: 0; color: #7c8798; font-size: 10px; line-height: 1.7; }
.japan-strategy-ribbon { display: grid; gap: 4px; margin-top: 14px; padding: 12px 15px; border-radius: 7px; background: #293c55; color: #fff; }
.japan-strategy-ribbon strong { color: #c6d4ef; font-size: 9px; letter-spacing: .06em; }
.japan-strategy-ribbon span { font-size: 11px; line-height: 1.6; }
.japan-compare { display: grid; grid-template-columns: minmax(0,1fr) 36px minmax(0,1fr); align-items: center; gap: 12px; padding: clamp(16px,2vw,24px); border-radius: 17px; background: #f4f7fa; }
.japan-compare-card { min-width: 0; padding: 17px; border-radius: 12px; background: #fff; }
.japan-compare-new { box-shadow: inset 0 0 0 1px #e4eafa; }
.japan-compare-card .japan-overline { margin-bottom: 8px; color: #4f6481; font-size: 11px; font-weight: 650; letter-spacing: .015em; }
.japan-compare-card h4 { margin: 0 0 7px; color: #293c55; font-size: 15px; line-height: 1.5; }
.japan-flow-list { display: grid; gap: 7px; margin-top: 13px; }
.japan-flow-step { display: flex; align-items: center; gap: 10px; min-height: 35px; padding: 7px 10px; border-radius: 7px; background: #f3f5f8; color: #4e5f75; font-size: 10px; line-height: 1.5; }
.japan-flow-new { background: #edf2ff; color: #3d5da2; }
.japan-flow-index { display: grid; flex: 0 0 21px; width: 21px; height: 21px; place-items: center; border-radius: 50%; background: #e3e8f0; color: #63748b; font-size: 8px; font-weight: 700; }
.japan-flow-new .japan-flow-index { background: #dce6ff; color: #4267b6; }
.japan-flow-down { color: #a2afc0; font-size: 12px; text-align: center; line-height: .7; }
.japan-compare-arrow { color: #9ba8b8; font-size: 25px; text-align: center; }
.japan-swimlane { display: grid; gap: 0; padding: 0; overflow: hidden; border: 1px solid #e6ebf1; background: #fff; }
.japan-lane { display: grid; grid-template-columns: 120px minmax(0,1fr); min-height: 105px; border-bottom: 1px solid #e8edf3; }
.japan-lane:last-child { border-bottom: 0; }
.japan-lane:nth-child(2) { background: #f5f7fa; }
.japan-lane > h4 { display: grid; margin: 0; padding: 16px; place-items: center start; border-right: 1px solid #e8edf3; color: #5a6c84; font-size: 10px; font-weight: 650; }
.japan-lane-content { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(8px,2vw,20px); padding: 18px; }
.japan-flow-node,.japan-flow-decision { display: grid; min-height: 46px; max-width: 180px; padding: 10px 13px; place-items: center; border: 1px solid #e4e9f0; border-radius: 8px; background: #fff; color: #53657d; font-size: 10px; line-height: 1.5; text-align: center; }
.japan-flow-node { grid-auto-flow: column; grid-template-columns: 18px auto; gap: 7px; }
.japan-flow-node svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.japan-node-soft { background: #f4f6f9; }
.japan-node-ai { background: #4c6ed0; color: #fff; border-color: #4c6ed0; }
.japan-node-guidance { background: #edf2ff; color: #4562ad; border-color: #dae4ff; }
.japan-flow-decision { border-radius: 50%; min-width: 76px; min-height: 76px; transform: rotate(45deg); }
.japan-flow-decision::first-line { transform: rotate(-45deg); }
.japan-lane-arrow { color: #8da0bb; font-size: 17px; }
.japan-flow-branch { position: absolute; right: 32%; bottom: 4px; color: #8295b2; font-size: 9px; }
.japan-node-done { background: #e8f7ef; border-color: #d6efe1; color: #22835a; }
.japan-flow-figure { margin: 0; padding: clamp(10px,1.5vw,20px); overflow-x: auto; border-radius: 20px; background: #f5f8fc; }
.japan-flow-diagram { display: block; width: 100%; min-width: 760px; height: auto; font-family: 'DM Sans','Noto Sans SC',sans-serif; }
.flow-frame { fill: #fff; stroke: #e0e6ed; stroke-width: 1.5; }
.flow-band-ai { fill: #f5f7fa; }
.flow-divider { fill: none; stroke: #e0e6ed; stroke-width: 1.3; }
.flow-lane-label { fill: #405371; font-size: 17px; font-weight: 700; }
.flow-connector,.flow-connector-blue,.flow-connector-dashed { fill: none; stroke: #8999ad; stroke-width: 1.5; }
.flow-connector-blue { stroke: #456bd0; }
.flow-connector-dashed { stroke: #456bd0; stroke-dasharray: 4 4; }
.flow-node,.flow-node-question { fill: #fff; stroke: #d8e0e8; stroke-width: 1.5; }
.flow-node-ai { fill: #456bd0; stroke: #456bd0; }
.flow-node-question { fill: #edf2fc; stroke: #d8e2f2; }
.flow-diamond { fill: #fff; stroke: #9aa9bb; stroke-width: 1.5; stroke-linejoin: round; }
.flow-node-action { fill: #edf6f0; stroke: #d0e7d8; stroke-width: 1.5; }
.flow-node-complete { fill: #19875f; stroke: #d0e7d8; stroke-width: 1.5; }
.flow-icon { fill: #405371; }
.flow-icon-light { fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.flow-icon-dot { fill: #fff; }
.flow-icon-blue { fill: #456bd0; }
.flow-icon-dot-blue { fill: #fff; }
.flow-node-title,.flow-node-copy,.flow-node-title-light,.flow-node-copy-light,.flow-diamond-text,.flow-branch-label,.flow-return-label,.flow-node-title-blue,.flow-node-title-green,.flow-node-title-complete { dominant-baseline: middle; }
.flow-node-title { fill: #405371; font-size: 17px; font-weight: 700; }
.flow-node-copy { fill: #51647f; font-size: 13px; }
.flow-node-title-light,.flow-node-copy-light,.flow-node-title-complete { fill: #fff; }
.flow-node-title-light,.flow-node-title-blue,.flow-node-title-green,.flow-node-title-complete { font-size: 15px; font-weight: 700; }
.flow-node-copy-light { font-size: 12px; }
.flow-diamond-text { fill: #405371; font-size: 13px; font-weight: 650; text-anchor: middle; }
.flow-branch-label { fill: #526783; font-size: 12px; font-weight: 650; text-anchor: middle; }
.flow-return-label { fill: #456bd0; font-size: 12px; font-weight: 650; }
.flow-node-title-blue { fill: #456bd0; }
.flow-node-title-green { fill: #16865d; }
.flow-success-icon { fill: #d9eee1; }
.flow-complete-icon { fill: #d8f0e4; }
.flow-check { fill: none; stroke: #16865d; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.flow-node-title-complete { font-size: 13px; }
.japan-local-flow-list { display: grid; gap: 16px; padding: clamp(14px,1.8vw,24px); border-radius: 18px; background: #f5f8fc; }
.japan-local-card { display: grid; grid-template-columns: minmax(0,1fr) minmax(200px,25%); align-items: stretch; gap: clamp(16px,2vw,28px); padding: clamp(18px,2.2vw,30px); border-radius: 15px; background: #fff; }
.japan-local-copy { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.japan-local-copy h4 { margin: 0 0 20px; color: #3e506d; font-size: 17px; line-height: 1.45; font-weight: 650; }
.japan-local-steps { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.japan-local-step { display: grid; flex: 1 1 0; justify-items: center; gap: 8px; min-width: 0; color: #4c5f7b; font-size: 10px; font-weight: 600; line-height: 1.45; text-align: center; }
.japan-local-step > span:last-child { max-width: 92px; }
.japan-local-icon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid currentColor; border-radius: 50%; background: #fff; color: var(--flow-accent); box-shadow: 0 0 0 5px var(--flow-tint); }
.japan-local-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.japan-local-arrow { flex: 0 0 auto; padding-top: 11px; color: #a5afbc; font-size: 15px; }
.japan-tone-coral { --flow-accent: #ef746b; --flow-tint: #fff5f3; }
.japan-tone-blue { --flow-accent: #5a7ee5; --flow-tint: #f2f5ff; }
.japan-tone-green { --flow-accent: #58ad8a; --flow-tint: #f0f9f5; }
.japan-local-notes { display: grid; gap: 8px; margin: auto 0 0; padding: 20px 0 0; list-style: none; }
.japan-local-notes li { display: flex; align-items: flex-start; gap: 8px; color: #858b92; font-size: 10px; line-height: 1.65; }
.japan-local-notes li svg { flex: 0 0 16px; width: 16px; height: 16px; fill: none; stroke: #8d9296; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.japan-local-ui { align-self: center; width: 100%; max-width: 270px; margin: 0 auto; overflow: hidden; border-radius: 14px; background: #f5f8fb; }
.japan-local-ui img { display: block; width: 100%; height: auto; }
.japan-core-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; }
.japan-core-card { min-width: 0; padding: 22px 20px; border: 1px solid #edf0f4; border-radius: 15px; background: #fff; }
.japan-core-icon { display: grid; width: 42px; height: 42px; margin-bottom: 16px; place-items: center; color: #31383e; }
.japan-core-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.japan-core-card h4 { margin: 0 0 9px; color: #252a30; font-size: 13px; line-height: 1.55; font-weight: 650; }
.japan-core-card p { margin: 0; color: #535a62; font-size: 11px; line-height: 1.8; }
.japan-original-board { margin: 0; overflow: hidden; border-radius: 14px; background: #fff; }
.japan-original-board img { display: block; width: 100%; max-width: none; height: auto; margin: 0; }
.japan-design-process-group { display: grid; gap: 0; }
.japan-design-process-group .japan-iteration-followup-heading { margin: 18px 0 16px; }
.japan-design-process-group .japan-final-version-heading { margin: 18px 0 16px; }
.japan-interaction-board { margin: 0; overflow: hidden; border-radius: 16px; background: #f5f7fa; }
.japan-interaction-board img { display: block; width: 100%; height: auto; }
.japan-final-version-board { position: relative; margin: 0; overflow: hidden; border-radius: 16px; background: #f5f7fa; }
.japan-final-version-board img { display: block; width: 100%; height: auto; }
.japan-delivery-summary { position: absolute; z-index: 1; top: 64.5%; left: 2.2%; width: 78.5%; height: 32.5%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: clamp(5px, .8vw, 12px); padding: 1.5% 1.8%; color: #30445f; }
.japan-delivery-summary h4 { margin: 0; color: #344966; font-size: clamp(10px, 1.08vw, 16px); font-weight: 700; line-height: 1.35; letter-spacing: .02em; }
.japan-delivery-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(5px, .75vw, 11px); }
.japan-delivery-summary-grid article { display: grid; grid-template-columns: auto 1fr; align-content: start; align-items: center; column-gap: clamp(4px, .55vw, 8px); row-gap: 4px; min-width: 0; padding: clamp(6px, .85vw, 13px); border: 1px solid #e5eaf0; border-radius: clamp(7px, .8vw, 12px); background: rgba(255,255,255,.88); }
.japan-delivery-summary-grid article > span { display: grid; width: clamp(17px, 1.65vw, 25px); height: clamp(17px, 1.65vw, 25px); place-items: center; border-radius: 50%; background: #edf2fa; color: #617b9d; font-size: clamp(7px, .62vw, 9px); font-weight: 700; }
.japan-delivery-summary-grid strong { min-width: 0; color: #445872; font-size: clamp(8px, .78vw, 12px); line-height: 1.35; }
.japan-delivery-summary-grid p { grid-column: 1 / -1; margin: 0; color: #7c8999; font-size: clamp(7px, .68vw, 10px); line-height: 1.5; }
.japan-delivery-summary-note { margin: 0; color: #7c8999; font-size: clamp(7px, .68vw, 10px); line-height: 1.5; }
.japan-components-mockup { margin: 0; overflow: hidden; border-radius: 17px; background: #f4f7fa; }
.japan-components-mockup img { display: block; width: 100%; height: auto; }
@media (max-width: 760px) {
    .travel-detail { gap: 38px; }
    .purpose-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .thought-grid,
    .implementation-grid { grid-template-columns: 1fr; }
    .purpose-card,
    .thought-card,
    .implementation-card { min-height: auto; }
    .travel-card { padding: 19px 17px; }
    .travel-section-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
    .japan-purpose-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .japan-architecture { grid-template-columns: 1fr; }
    .japan-architecture .japan-strategy-arrow { transform: rotate(90deg); }
    .japan-task-grid { grid-template-columns: 1fr; }
    .japan-strategy-flow { grid-template-columns: 1fr; }
    .japan-strategy-flow .japan-strategy-arrow { transform: rotate(90deg); }
    .japan-compare { grid-template-columns: 1fr; gap: 13px; }
    .japan-compare-card { padding: 17px; }
    .japan-compare-arrow { transform: rotate(90deg); }
    .japan-lane { grid-template-columns: 76px minmax(0,1fr); }
    .japan-lane > h4 { padding: 10px; font-size: 9px; }
    .japan-lane-content { flex-wrap: wrap; gap: 8px; padding: 13px 8px; }
    .japan-flow-node { flex: 1 1 38%; min-width: 90px; }
    .japan-flow-branch { position: static; flex-basis: 100%; text-align: center; }
    .japan-local-flow-list { padding: 10px; gap: 11px; }
    .japan-local-card { grid-template-columns: 1fr; padding: 18px; }
    .japan-local-copy h4 { margin-bottom: 16px; }
    .japan-local-steps { overflow-x: auto; justify-content: flex-start; padding: 4px 4px 10px; }
    .japan-local-step { flex: 0 0 84px; }
    .japan-local-arrow { flex: 0 0 12px; }
    .japan-local-icon { width: 36px; height: 36px; }
    .japan-local-notes { padding-top: 10px; }
    .japan-local-ui { max-width: 300px; }
    .japan-core-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .japan-core-card { padding: 17px 15px; }
}

/* Refinements from the supplied Travel Planner case-study annotations. */
.case-heading-compact {
    max-width: 100%;
    margin-bottom: clamp(48px, 5vw, 76px);
    font-size: clamp(25px, 3.7vw, 39px);
    line-height: 1.2;
    letter-spacing: -.045em;
}

/* Discourage casual saving of portfolio images while keeping their normal display and click behavior. */
img {
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    user-select: none;
}
.case-intro .case-heading-compact { margin-bottom: clamp(48px,5vw,76px); }
.case-intro-with-summary .case-heading-compact { margin-bottom: 8px; }
.thought-card .thought-symbol {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin: 0 0 28px;
}
.journey-map-art {
    width: 100%;
    margin: 0;
    overflow: hidden;
    border: 1px solid #e7e8e6;
    background: #fafaf9;
}
.journey-map-art img {
    display: block;
    width: 100%;
    height: auto;
}
@media (max-width: 760px) {
    .case-heading-compact {
        margin-bottom: 42px;
        font-size: clamp(24px, 7vw, 34px);
    }
    .case-intro-with-summary .case-heading-compact { margin-bottom: 8px; }
}
.journey-map-art {
    border: 0;
    background: transparent;
}

.case-image-viewer {
    position: fixed;
    inset: 0;
    z-index: 210;
    display: block;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 78px 4vw 36px;
    background: rgba(14, 14, 18, .97);
    text-align: center;
}
.case-image-viewer[hidden] { display: none; }
.case-image-viewer-image {
    display: block;
    width: 92vw;
    max-width: none;
    height: auto;
    margin: 0 auto;
    background: white;
    box-shadow: 0 18px 70px rgba(0,0,0,.28);
}
.case-image-loading {
    position: fixed;
    z-index: 2;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    transform: translate(-50%, -50%);
    padding: 0;
    background: transparent;
    color: #fff;
    text-align: center;
    font: 13px var(--sans);
}
.case-image-loading[hidden] { display: none; }
.case-image-loading-ring {
    position: relative;
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
}
.case-image-loading-ring svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.case-image-loading-ring circle {
    fill: none;
    stroke-width: 3;
}
.case-image-loading-ring-track { stroke: rgba(255,255,255,.24); }
.case-image-loading-ring-progress {
    stroke: #a98bff;
    stroke-linecap: round;
    stroke-dasharray: 150.8;
    stroke-dashoffset: 150.8;
    transition: stroke-dashoffset .18s ease-out;
}
.case-image-loading-percent {
    color: #fff;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.case-image-loading-label {
    color: rgba(255,255,255,.78);
    letter-spacing: .03em;
}
.case-image-loading.is-indeterminate .case-image-loading-ring-progress {
    stroke-dasharray: 48 103;
    stroke-dashoffset: 0;
    animation: case-image-loading-spin 1s linear infinite;
}
@keyframes case-image-loading-spin {
    to { transform: rotate(360deg); }
}
.case-image-viewer-tools {
    position: fixed;
    z-index: 1;
    top: 16px;
    right: 22px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.case-image-viewer-tools button {
    display: inline-grid;
    width: 42px;
    min-width: 42px;
    height: 42px;
    place-items: center;
    flex: 0 0 42px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 12px;
    background: rgba(35,35,40,.92);
    color: #fff;
    font: 22px/1 Arial, var(--sans);
    cursor: pointer;
}
.case-image-viewer-tools button:hover { background: #55555c; }
.case-image-viewer-tools .case-image-fit {
    width: auto;
    min-width: 116px;
    flex: 0 0 auto;
    grid-auto-flow: column;
    grid-template-columns: 16px auto;
    column-gap: 8px;
    padding: 0 12px;
    border-radius: 12px;
    font: 13px/1 var(--sans);
}
.case-image-viewer-tools .case-image-fit::before {
    content: "";
    width: 16px;
    height: 16px;
    background:
      linear-gradient(currentColor,currentColor) left top / 6px 1.5px no-repeat,
      linear-gradient(currentColor,currentColor) left top / 1.5px 6px no-repeat,
      linear-gradient(currentColor,currentColor) right top / 6px 1.5px no-repeat,
      linear-gradient(currentColor,currentColor) right top / 1.5px 6px no-repeat,
      linear-gradient(currentColor,currentColor) left bottom / 6px 1.5px no-repeat,
      linear-gradient(currentColor,currentColor) left bottom / 1.5px 6px no-repeat,
      linear-gradient(currentColor,currentColor) right bottom / 6px 1.5px no-repeat,
      linear-gradient(currentColor,currentColor) right bottom / 1.5px 6px no-repeat;
    box-sizing: border-box;
}
.case-image-viewer-tools .case-image-viewer-close {
    font-size: 24px;
}
@media (max-width: 600px) {
    .case-image-viewer { padding: 70px 14px 22px; }
    .case-image-viewer-tools { top: 12px; right: 12px; gap: 6px; }
    .case-image-viewer-tools button,
    .case-image-viewer-tools .case-image-fit { width: auto; min-width: 108px; height: 38px; flex-basis: auto; }
    .case-image-viewer-tools .case-image-fit::before { width: 14px; height: 14px; }
    .case-image-viewer-tools button:not(.case-image-fit) { width: 38px; min-width: 38px; height: 38px; flex-basis: 38px; }
}


.travel-process-feature { margin-top: 0; }
.travel-process-feature-heading { margin: 0 0 22px; }
.travel-process-feature-heading h3 {
    margin: 0;
    color: #222;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
}
.travel-process-feature-heading p {
    max-width: 820px;
    margin: 8px 0 0;
    color: #777771;
    font-size: 14px;
    line-height: 1.8;
}
.case-archive-figure { margin: 0; }
.case-archive-figure + .case-archive-figure { margin-top: 24px; }
.case-archive-trigger {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 17px;
    background: #14131a;
    cursor: zoom-in;
}
.case-archive-trigger img {
    display: block;
    width: 100%;
    height: auto;
    transition: filter .25s ease;
}
.case-archive-zoom {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.94);
    color: #222;
    font-size: 20px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .2s ease, transform .2s ease;
}
.case-archive-trigger:hover .case-archive-zoom,
.case-archive-trigger:focus-visible .case-archive-zoom { opacity: 1; transform: none; }
.case-archive-trigger:hover img { filter: brightness(.94); }
.case-archive-trigger:focus-visible { outline: 2px solid #252525; outline-offset: 4px; }
@media (max-width: 760px) {
    .case-archive-zoom { opacity: 1; transform: none; }
}
.case-archive-figure + .itinerary-process-heading { margin-top: 32px; }
.case-archive-figure + .itinerary-refinement-heading { margin-top: 32px; }

.travel-results {
    position: relative;
    overflow: hidden;
    padding: clamp(24px, 4vw, 46px);
    border-radius: 20px;
    background: #f2f6f9;
}
.travel-results-heading { margin: 0 0 22px; }
.travel-results-heading h3 {
    margin: 0;
    color: #222;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
}
.travel-results::before,
.travel-results::after {
    position: absolute;
    z-index: 0;
    width: 250px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(220, 235, 243, .5);
    content: "";
}
.travel-results::before { top: -165px; right: -105px; }
.travel-results::after { bottom: -205px; left: -105px; }
.travel-results > * { position: relative; z-index: 1; }
.travel-results-note {
    max-width: 820px;
    margin: 8px 0 0;
    color: #777771;
    font-size: 14px;
    line-height: 1.8;
}
.travel-results-note span { margin-right: 2px; color: #ff554c; font-weight: 700; }
.travel-results-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.travel-result-card {
    display: flex;
    min-height: 210px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 22px 14px;
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 18px;
    background: #fff;
    text-align: center;
}
.travel-result-ring {
    display: grid;
    width: clamp(90px, 10vw, 126px);
    aspect-ratio: 1;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--ring-color) calc(var(--value) * 1%), #e9eff2 0);
}
.travel-result-ring > span {
    display: flex;
    width: 78%;
    aspect-ratio: 1;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: #1c2c40;
}
.travel-result-ring strong { font-size: clamp(22px, 2.3vw, 30px); font-weight: 700; line-height: 1; }
.travel-result-ring small { margin: 4px 0 0 1px; font-size: 12px; font-weight: 700; }
.travel-result-card h4 { margin: 0; color: #17191c; font-size: 15px; line-height: 1.45; font-weight: 600; }
@media (max-width: 760px) {
    .travel-results { padding: 22px 16px; }
    .travel-results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .travel-result-card { min-height: 170px; gap: 13px; padding: 18px 10px; }
    .travel-result-ring { width: 92px; }
    .travel-result-card h4 { font-size: 13px; }
}

/* Contact section restyled to match the quiet, open closing frame. */
.contact.section {
    padding: 50px 0 0;
}
.contact-panel {
    min-height: clamp(420px, 34vw, 530px);
    grid-template-columns: minmax(0, 1fr) minmax(250px, .42fr);
    align-items: end;
    gap: clamp(40px, 8vw, 130px);
    padding: 58px 0 58px;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.contact-message { align-self: end; }
.contact-photo {
    display: block;
    width: 100%;
    height: clamp(170px, 17vw, 250px);
    margin: 0 0 clamp(28px, 3vw, 42px);
    border-radius: 8px;
    object-fit: cover;
    object-position: center 52%;
}
.contact h2 {
    font-size: clamp(76px, 7.4vw, 136px);
    font-weight: 300;
    letter-spacing: -.075em;
    line-height: .98;
}
.contact-sub {
    margin-top: 26px;
    font-size: 14px;
}
.contact-details {
    justify-self: stretch;
    display: grid;
    gap: 17px;
    align-self: end;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
}
.contact-kicker, .contact-role {
    color: #888;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.contact-link {
    justify-self: stretch;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0;
    padding: 0 0 12px;
    border-bottom: 1px solid #9b9b97;
    color: #222;
    font-size: clamp(15px, 1.15vw, 18px);
    letter-spacing: .055em;
    text-decoration: none;
    white-space: nowrap;
}
.contact-link > span { margin-right: auto; }
.contact-link svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.2;
    transition: transform .3s ease;
}
.contact-link .contact-channel-icon {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    stroke: currentColor;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.contact-link .contact-link-arrow { margin-left: auto; }
.contact-link:hover svg { transform: translate(2px, -2px); }
.contact-link:hover .contact-channel-icon { transform: none; }
.contact-socials {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-top: 2px;
}
.contact-social-icon {
    width: 25px;
    height: 25px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #666;
    opacity: .78;
    transition: color .25s ease, opacity .25s ease, transform .25s ease;
}
.contact-social-icon svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.contact-social-mark {
    display: block;
    width: 22px;
    height: 22px;
    background: currentColor;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    transition: transform .25s ease;
}
.contact-social-mark--wechat {
    -webkit-mask-image: url("assets/icons/wechat-mark.svg");
    mask-image: url("assets/icons/wechat-mark.svg");
}
.contact-social-mark--xiaohongshu {
    -webkit-mask-image: url("assets/icons/xiaohongshu-mark.svg");
    mask-image: url("assets/icons/xiaohongshu-mark.svg");
}
.contact-wechat { cursor: default; }
.wechat-qr-tooltip {
    position: absolute;
    z-index: 20;
    left: 50%;
    bottom: calc(100% + 13px);
    width: 164px;
    height: 164px;
    padding: 6px;
    border: 1px solid rgba(20, 20, 20, .08);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 7px) scale(.97);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.wechat-qr-tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 10px;
    height: 10px;
    border-right: 1px solid rgba(20, 20, 20, .08);
    border-bottom: 1px solid rgba(20, 20, 20, .08);
    background: #fff;
    transform: translateX(-50%) rotate(45deg);
}
.wechat-qr-tooltip img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
.contact-wechat:hover .wechat-qr-tooltip,
.contact-wechat:focus-visible .wechat-qr-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0) scale(1);
}
.contact-wechat:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }
a.contact-social-icon:hover { color: #222; opacity: 1; transform: translateY(-2px); }
.contact-role { margin-top: 2px; }
@media (max-width: 1050px) {
    .contact-panel { grid-template-columns: minmax(0, 1fr) minmax(220px, .5fr); gap: 48px; }
}
@media (max-width: 760px) {
    .contact.section { padding-top: 28px; }
    .contact-panel {
        min-height: 0;
        grid-template-columns: 1fr;
        align-content: start;
        align-items: end;
        gap: 54px;
        padding: 58px 0 42px;
    }
    .contact-photo { height: clamp(155px, 54vw, 240px); margin-bottom: 24px; }
    .contact h2 { font-size: clamp(60px, 13vw, 88px); }
    .contact-sub { max-width: 30em; margin-top: 20px; }
    .contact-details { max-width: 430px; }
    .contact-link { justify-self: stretch; }
}

.scroll-cue {
    position: absolute;
    z-index: 3;
    bottom: clamp(24px, 5vh, 54px);
    left: 50%;
    display: grid;
    justify-items: center;
    gap: 8px;
    color: #555;
    text-decoration: none;
    transform: translateX(-50%);
    transition: opacity .3s ease, transform .3s ease, color .2s ease;
}
.scroll-cue:hover { color: #111; }
.scroll-cue-mouse {
    position: relative;
    display: block;
    width: 22px;
    height: 34px;
    border: 1px solid currentColor;
    border-radius: 13px;
}
.scroll-cue-mouse i {
    position: absolute;
    top: 6px;
    left: 50%;
    width: 2px;
    height: 6px;
    border-radius: 2px;
    background: currentColor;
    transform: translateX(-50%);
    animation: scroll-cue-wheel 1.35s ease-in-out infinite;
}
.scroll-cue-label {
    font-size: 8px;
    letter-spacing: .15em;
    line-height: 1;
}
.is-scrolling .scroll-cue {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 8px);
}
@keyframes scroll-cue-wheel {
    0%, 100% { opacity: .35; transform: translate(-50%, 0); }
    55% { opacity: 1; transform: translate(-50%, 8px); }
}
@media (max-width: 760px) {
    .scroll-cue { bottom: 22px; gap: 6px; }
    .scroll-cue-label { font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
    .scroll-cue,
    .scroll-cue-mouse i { animation: none; transition: none; }
}

.hero-mark-interactive {
    position: relative;
    width: clamp(91px, 13.7vh, 131px);
    height: clamp(160px, 24vh, 230px);
    margin: 0 auto 32px;
    touch-action: pan-y;
}
.hero-mark-interactive .hero-mark {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: visible;
}
@media (max-width: 760px) {
    .hero-mark-interactive {
        width: clamp(83px, 13.1vh, 111px);
        height: clamp(145px, 23vh, 195px);
        margin-bottom: 25px;
    }
}
@media (prefers-reduced-motion: reduce) {
}

.aiya-full-design figure { margin: 0; overflow: hidden; border-radius: 12px; }
.aiya-full-design img { display: block; width: 100%; height: auto; }

.aiya-metrics {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  padding: clamp(20px, 3.5vw, 48px); border-radius: 16px;
  background: #f5f7fa;
}
.aiya-metric { min-width: 0; padding: clamp(20px, 2.5vw, 36px); border: 1px solid #e9ecf1; border-radius: 16px; background: #fff; box-shadow: none; }
.aiya-metric h4 { margin: 0 0 30px; color: #34373a; font-size: clamp(13px, 1.35vw, 18px); font-weight: 500; line-height: 1.6; }
.aiya-metric-value { display: flex; align-items: baseline; color: #17191c; font-size: clamp(36px, 5vw, 72px); font-weight: 500; line-height: 1; letter-spacing: -.045em; white-space: nowrap; }
.aiya-metric-value strong { font: inherit; font-variant-numeric: tabular-nums; }
.aiya-metric-percent { margin-left: 4px; font-size: .58em; color: inherit; }
@media (max-width: 640px) {
  .aiya-metrics { grid-template-columns: 1fr; gap: 12px; padding: 16px; }
  .aiya-metric { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 20px; }
  .aiya-metric h4 { margin: 0; font-size: 14px; }
  .aiya-metric-value { font-size: 44px; }
}

.aiya-version-timeline figure { position: relative; }
.aiya-timeline-accent { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }

/* Merchant onboarding follows the shared case-study card system. */
.pdd-thought-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pdd-detail .aiya-thought-card { min-height: 0; padding: 24px; }
.pdd-detail .pdd-thought-grid .aiya-thought-card { min-height: 210px; }
.pdd-detail .pdd-purpose { padding: 24px; }
.pdd-detail .aiya-purpose-card svg, .pdd-detail .aiya-thought-card svg { width: 40px; height: 40px; margin-bottom: 16px; stroke-width: 2.4; }
.pdd-detail .aiya-purpose-card h4, .pdd-detail .aiya-thought-card h4 { font-size: 14px; }
.pdd-detail .aiya-purpose-card p, .pdd-detail .aiya-thought-card p { font-size: 12px; line-height: 1.8; }
.pdd-detail .pdd-implementation svg { margin-bottom: 18px; }
@media (max-width: 640px) {
  .pdd-thought-grid { grid-template-columns: 1fr; }
  .pdd-detail .pdd-thought-grid .aiya-thought-card { min-height: 0; }
}

/* Static light panels for the project recap and AB test data. */
.pdd-static-panel { margin: 0; overflow: hidden; border-radius: 16px; background: #f5f7fa; isolation: isolate; }
.pdd-static-panel img { display: block; width: 100%; height: auto; filter: invert(1) hue-rotate(180deg) brightness(1.08); mix-blend-mode: multiply; }

/* Present the AB test heading as native text above the data panel. */
.pdd-ab-test .pdd-static-panel { background: #121119; }
.pdd-ab-test .pdd-static-panel img { margin: 0; filter: none; mix-blend-mode: normal; }

.pdd-redesign-summary .pdd-static-panel { background: #101113; }
.pdd-redesign-summary .pdd-static-panel img { filter: none; mix-blend-mode: normal; }

/* A restrained, staggered reveal for the project gallery. */
.project-grid .project-card.reveal {
    --project-enter-delay: 0ms;
    opacity: 1;
    transform: none;
    transition: none;
}
.project-grid .project-card:nth-child(2) { --project-enter-delay: 85ms; }
.project-grid .project-card:nth-child(3) { --project-enter-delay: 170ms; }
.project-grid .project-card:nth-child(4) { --project-enter-delay: 255ms; }
.project-grid .project-card:nth-child(5) { --project-enter-delay: 340ms; }
.project-card.reveal .project-image {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translateY(16px);
    transition: clip-path 1.05s cubic-bezier(.22, 1, .36, 1),
                transform 1.05s cubic-bezier(.22, 1, .36, 1),
                opacity .45s ease;
    transition-delay: var(--project-enter-delay);
}
.project-card.reveal .project-name {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .65s ease, transform .75s cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc(var(--project-enter-delay) + 230ms);
}
.project-card.reveal.visible .project-image,
.project-card.reveal:focus-visible .project-image {
    opacity: 1;
    clip-path: inset(0);
    transform: none;
}
.project-card.reveal.visible .project-name,
.project-card.reveal:focus-visible .project-name {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .project-card.reveal .project-image,
    .project-card.reveal .project-name {
        opacity: 1;
        clip-path: none;
        transform: none;
        transition: none;
    }
}

/* Homepage motion: shared timing, small travel, and quiet transitions. */
:root { --motion-out: cubic-bezier(.22, 1, .36, 1); }
main .reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .95s var(--motion-out); transition-delay: var(--enter-delay, 0ms); }
main .reveal.visible { opacity: 1; transform: none; }
.hero-center { translate: 0 var(--hero-drift, 0px); filter: opacity(var(--hero-fade, 1)); }
.header-scroll-mask,
body.has-scrolled-header .header-scroll-mask { opacity: var(--header-reveal, 0); transition: opacity .16s linear; }
.project-grid { scroll-snap-type: x proximity; }
@media (hover: hover) and (pointer: fine) {
  .project-card .project-image img { transition: transform .85s var(--motion-out), opacity .4s ease; }
  .project-card:hover .project-image img { transform: scale(1.025); opacity: 1; }
  .project-view-indicator { background: rgba(20,20,20,.09); transition: opacity .35s ease; }
}
.contact-link { transition: color .25s ease, border-color .25s ease; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  main .reveal, main .reveal.visible { opacity: 1; transform: none; transition: none; }
  .hero-center { translate: none; filter: none; }
  .header-scroll-mask { transition: none; }
  .project-card .project-image img { transition: none; }
  .project-card:hover .project-image img { transform: none; }
}

/* The drawing layer hands off completely to the single solid mark. */
.hero-mark .logo-writing { animation: logo-writing-handoff .15s ease 1.64s forwards; }
@keyframes logo-writing-handoff { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .hero-mark .logo-writing { animation: none; display: none; }
}

/* Persistent project-to-project navigation, in the outer reading margins. */
.case-project-nav { position: fixed; inset: 50% 0 auto; z-index: 6; pointer-events: none; }
.case-project-nav button { position: absolute; top: 0; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; width: 90px; padding: 10px 4px; border: 0; background: transparent; color: #777; font: 10px/1.5 var(--sans); cursor: pointer; pointer-events: auto; }
.case-project-prev { left: clamp(8px, 2.5vw, 48px); }
.case-project-next { right: clamp(8px, 2.5vw, 48px); }
.case-project-arrow { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 52px; box-sizing: border-box; border: 1px solid transparent; border-radius: 14px; transition: background .25s ease, border-color .25s ease, color .25s ease; }
.case-project-arrow svg { display: block; width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--motion-out); }
.case-project-nav button:hover, .case-project-nav button:focus-visible { color: #202020; }
.case-project-nav button:hover .case-project-arrow, .case-project-nav button:focus-visible .case-project-arrow { background: #f5f5f3; border-color: #e8e8e5; }
.case-project-prev:hover svg, .case-project-next:hover svg { transform: none; }
.case-project-nav button:focus-visible { outline: 2px solid #777; outline-offset: 3px; border-radius: 14px; }
@media (max-width: 1100px) {
  .case-project-nav { inset: auto 0 0; height: 68px; background: rgba(255,255,255,.94); backdrop-filter: blur(16px); border-top: 1px solid #eee; padding-bottom: env(safe-area-inset-bottom); }
  .case-project-nav button { top: 0; transform: none; flex-direction: row; gap: 6px; width: auto; height: 68px; padding: 0 12px; }
  .case-project-prev { left: 10px; }
  .case-project-next { right: 10px; }
  .case-project-next .case-project-arrow { order: 1; }
  .case-page .case-content { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .case-project-arrow, .case-project-arrow svg { transition: none; }
}

.case-enter-character { display: inline; }

/* Draw the homepage mark before fading in the role. */
.hero .hero-center { animation: none; translate: none; filter: none; }
.hero .hero-mark .logo-solid { opacity: 0; animation: logo-solid-reveal .3s ease-out 2.1s forwards; }
.hero .hero-mark .logo-writing { display: inline; animation: logo-writing-handoff .3s ease-out 2.1s forwards; }
.hero .role { opacity: 0; animation: role-appear .85s ease-out 2.5s forwards; }

/* Qiandao membership case: native editorial text, cards and icons. */
.qiandao-detail { gap: clamp(32px, 4.5vw, 54px); }
.qiandao-background p, .qiandao-background li, .qiandao-implementation-intro { color: #25272a; font-size: 12px; line-height: 1.95; }
.qiandao-background p { margin: 0 0 8px; }
.qiandao-background ul { margin: 0; padding-left: 19px; }
.qiandao-background li + li { margin-top: 8px; }
.qiandao-detail .aiya-purpose-card, .qiandao-detail .aiya-thought-card { padding: 22px; border-radius: 16px; min-height: 0; }
.qiandao-detail .aiya-purpose-card { background: #f5f7fa; }
.qiandao-detail .aiya-thought-card { border: 1px solid #eef1f4; background: #fff; }
.qiandao-detail .aiya-purpose-card svg, .qiandao-detail .aiya-thought-card svg { width: 38px; height: 38px; stroke-width: 2.4; margin-bottom: 14px; }
.qiandao-detail .aiya-purpose-card h4, .qiandao-detail .aiya-thought-card h4 { margin-bottom: 8px; font-size: 13px; }
.qiandao-detail .aiya-purpose-card p, .qiandao-detail .aiya-thought-card p { font-size: 11px; line-height: 1.8; color: #25272a; }
.qiandao-thought-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.qiandao-journey figure { margin: 0; overflow: hidden; border-radius: 18px; }
.qiandao-journey img { display: block; width: 100%; height: auto; }
.qiandao-implementation-intro { margin: 0 0 16px; }
.qiandao-implementation-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
@media (max-width: 760px) {
  .qiandao-implementation-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .qiandao-thought-grid, .qiandao-implementation-grid { grid-template-columns: 1fr; }
  .qiandao-detail .aiya-purpose-card, .qiandao-detail .aiya-thought-card { padding: 20px; }
}

.qiandao-reconciliation { margin: -18px 0 0; overflow: hidden; border-radius: 16px; }
.qiandao-reconciliation img { display: block; width: 100%; height: auto; border-radius: inherit; }
@media (max-width: 560px) { .qiandao-reconciliation { margin-top: -12px; border-radius: 12px; } }

.qiandao-membership-level-heading { margin-bottom: 14px; }
.qiandao-membership-level-heading > h3 { margin: 0; }
.qiandao-membership-level-heading > h4 { margin: 3px 0 0; color: #55585c; font-size: 12px; line-height: 1.5; font-weight: 600; }
.qiandao-membership-level-process > .qiandao-implementation-intro { margin-top: 0; }

.qiandao-membership-level-static { margin: 24px 0 0; overflow: hidden; border-radius: 16px; background: #f1f2f4; }
.qiandao-membership-level-static img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }

.qiandao-complete-design-panel { margin: 0; overflow: hidden; border-radius: 16px; background: #EBEBEB; }
.qiandao-complete-design-panel .case-archive-trigger { background: #EBEBEB; }
.qiandao-complete-design-panel .case-archive-trigger img { margin-top: -5.4%; mix-blend-mode: normal; }

.qiandao-membership-funnel-heading { margin: 0 0 18px; }
.qiandao-membership-funnel-heading h3 { margin: 0; }
.qiandao-membership-funnel-heading p { margin: 8px 0 0; color: #55585c; font-size: 16px; }
.qiandao-membership-funnel-heading strong { color: #7455f5; font-weight: 700; }
.qiandao-membership-funnel-panel { margin: 0; overflow: hidden; border-radius: 16px; background: #121119; }
.qiandao-membership-funnel-panel img { display: block; width: 100%; height: auto; }

/* Keep the career summary on one line on wide screens. */
@media (min-width: 1200px) {
    .about-career-line {
        white-space: nowrap;
    }
}

/* Lift the About introduction independently of the portrait. */
@media (min-width: 761px) {
    .about-copy {
        transform: translateY(-48px);
    }
}

/* Introduction link to the work history. */
.about-copy { position: relative; }
.about-more {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    padding: 0 0 4px;
    color: #262624;
    font-size: 15px;
    line-height: 1.5;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: opacity .2s ease;
}
.about-more:hover { opacity: .6; }
.about-more:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
#experience { scroll-margin-top: 100px; }
@media (min-width: 761px) {
    .about-more { position: absolute; top: calc(100% + 32px); left: 0; }
}
@media (max-width: 760px) {
    .about-more { margin-top: 24px; }
}

.case-project-nav[hidden] { display: none; }

/* About detail: quiet editorial typography and a continuous resume timeline. */
.about-resume { --resume-ink: #252522; --resume-muted: #888881; color: var(--resume-ink); }
.about-resume h1, .about-resume h2, .about-resume h3, .about-resume p, .about-resume figure { margin: 0; }
.resume-hero { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 80px; align-items: start; padding: 36px 0 72px; }
.about-resume .resume-eyebrow { font-size: 11px; letter-spacing: .16em; line-height: 1.6; color: var(--resume-muted); }
.resume-hero h1 { margin-top: 28px; font-size: clamp(42px, 4vw, 64px); font-weight: 400; line-height: 1.3; letter-spacing: -.04em; }
.resume-hero h1 span { display: block; margin-top: 16px; font-size: clamp(24px, 2.3vw, 36px); font-weight: 300; }
.about-resume .resume-specialty { margin-top: 24px; color: #6d6d66; font-size: 15px; }
.resume-hero figure { aspect-ratio: 1866 / 2744; overflow: hidden; }
.resume-hero img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.resume-facts { display: flex; flex-wrap: wrap; gap: 22px 32px; margin: 36px 0 0; }
.resume-facts dt { font-size: 10px; color: var(--resume-muted); margin-bottom: 7px; }
.resume-facts dd { margin: 0; font-size: 13px; }
.about-resume a { color: inherit; text-decoration: none; }
.about-resume a:hover { text-decoration: underline; }
.resume-introduction { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; padding: 44px 0 64px; border-top: 1px solid #deded8; }
.resume-home-intro { font-size: 16px; line-height: 2.2; color: #65655f; }
.resume-home-intro .about-career-line { white-space: normal; }
.resume-section { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; padding: 48px 0 16px; border-top: 1px solid #deded8; }
.resume-section-label { display: flex; gap: 18px; align-items: baseline; }
.resume-section-label > span { color: #999990; font-size: 11px; }
.resume-section-label h2 { font-size: 17px; font-weight: 500; letter-spacing: .04em; }
.resume-section > div > p { color: #65655f; font-size: 15px; line-height: 2; margin-bottom: 28px; }
.resume-entry { padding: 0 0 42px; margin-bottom: 36px; border-bottom: 1px solid #eeeee9; }
.resume-entry:last-child { border-bottom: none; margin-bottom: 0; }
.resume-entry header { margin-bottom: 22px; }
.about-resume .resume-date { font-size: 11px; letter-spacing: .04em; color: var(--resume-muted); margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.resume-entry h3 { font-size: 23px; line-height: 1.5; font-weight: 400; letter-spacing: -.025em; }
.about-resume .resume-role { color: #888881; font-size: 12px; margin-top: 7px; }
.resume-entry-body p { color: #65655f; font-size: 14px; line-height: 2; margin-bottom: 18px; overflow-wrap: anywhere; }
.resume-entry-body p:last-child { margin-bottom: 0; }
.resume-footer { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid #deded8; padding: 30px 0; color: #999990; font-size: 10px; letter-spacing: .12em; }
@media (max-width: 900px) {
    .resume-hero { grid-template-columns: minmax(0, 1fr) 180px; gap: 32px; }
    .resume-introduction, .resume-section { grid-template-columns: 140px minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 600px) {
    .resume-hero { grid-template-columns: 1fr; padding: 20px 0 40px; }
    .resume-hero figure { width: 150px; grid-row: 1; }
    .resume-hero h1 { font-size: 40px; }
    .resume-facts { gap: 22px; }
    .resume-introduction, .resume-section { grid-template-columns: 1fr; gap: 28px; padding-top: 32px; }
    .resume-home-intro { font-size: 14px; }
    .resume-entry h3 { font-size: 21px; }
    .resume-entry { padding-bottom: 28px; margin-bottom: 28px; }
    .resume-footer { flex-direction: column; gap: 10px; }
}
.resume-entry-body h4 { margin: 24px 0 8px; font-size: 13px; line-height: 1.6; font-weight: 500; color: #33332e; }
.resume-entry-body h4:first-child { margin-top: 0; }

/* Scale the design statement to remain on a single line. */
.resume-hero > div { container-type: inline-size; }
.resume-hero h1 span {
    white-space: nowrap;
    font-size: clamp(8px, 2.8cqi, 24px);
    letter-spacing: -.04em;
}

.about-resume .resume-title {
    margin-top: 8px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #72726d;
}
.about-resume .resume-statement {
    margin-top: 20px;
    font-size: clamp(8px, 2.8cqi, 24px);
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: -.04em;
    white-space: nowrap;
}

.about-resume .resume-greeting {
    margin-top: 22px;
    font-size: 20px;
    line-height: 1.4;
    font-weight: 300;
}
.resume-hero .resume-greeting + h1 { margin-top: 6px; }
.resume-name-prefix {
    display: inline-block;
    margin-right: 12px;
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 0;
    vertical-align: baseline;
}

/* Use the same type size throughout the greeting and name. */
.about-resume .resume-greeting {
    font-size: clamp(42px, 4vw, 64px);
    line-height: 1.3;
}
.resume-name-prefix { font-size: 1em; }
@media (max-width: 600px) {
    .about-resume .resume-greeting { font-size: 40px; }
}

/* Bold the About greeting and full name together. */
.about-resume .resume-greeting,
.resume-hero h1,
.resume-name-prefix {
    font-weight: 700;
}

.resume-strengths > div { grid-column: 1 / -1; }
@media (max-width: 600px) {
    .resume-strengths > div { grid-column: 1; }
}

.resume-wechat { margin-top: 28px; }
.resume-hero .resume-wechat img {
    display: block;
    width: 132px;
    height: 132px;
    object-fit: contain;
    filter: none;
}
.about-resume .resume-wechat p {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.6;
    color: #888881;
}

/* Offset the QR image's built-in white margin to align the code with the text. */
.resume-hero .resume-wechat img {
    margin-left: -12px;
}

/* Lift the introductory group to align the QR code with the portrait base. */
@media (min-width: 601px) {
    .resume-hero > div { transform: translateY(-12px); }
}

/* Center the About hero columns vertically. */
.resume-hero { align-items: center; }
.resume-hero > div { transform: none; }
.about-resume .resume-greeting { margin-top: 0; }
.about-resume .resume-title { color: #000; }

/* Align section headings left and bring the resume content closer. */
.resume-section { grid-template-columns: 140px minmax(0, 1fr); gap: 32px; }
@media (max-width: 900px) {
    .resume-section { grid-template-columns: 110px minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 600px) {
    .resume-section { grid-template-columns: 1fr; gap: 28px; }
}

/* Photo-led contact composition. */
.contact.section { width: 91%; max-width: none; padding-top: 50px; }
.contact-panel {
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(48px, 6vw, 120px);
    padding: 58px 0 48px;
    min-height: 0;
}
.contact-photo {
    height: 100%;
    min-height: 500px;
    aspect-ratio: 1.4;
    margin: 0;
    border-radius: 0;
    object-fit: cover;
    filter: grayscale(1);
}
.contact-copy { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: 60px 0 24px; }
.contact-message { align-self: stretch; }
.contact h2 { font-size: clamp(62px, 6vw, 124px); line-height: 1.08; letter-spacing: -.065em; }
.contact-sub { margin-top: 30px; font-size: 13px; }
.contact-details { border-top: 0; padding-top: 0; margin-top: 70px; width: 88%; max-width: none; align-self: flex-start; }
.contact-role { display: none; }
@media (max-width: 1050px) {
    .contact-panel { gap: 40px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
    .contact-copy { padding-top: 30px; }
    .contact h2 { font-size: clamp(48px, 6vw, 76px); }
    .contact-details { width: 100%; }
}
@media (max-width: 760px) {
    .contact.section { width: calc(100% - 40px); padding-top: 28px; }
    .contact-panel { grid-template-columns: 1fr; gap: 32px; padding: 32px 0; }
    .contact-photo { height: auto; min-height: 0; aspect-ratio: 1.4; }
    .contact-copy { padding: 0; }
    .contact h2 { font-size: clamp(56px, 11vw, 84px); }
    .contact-details { margin-top: 48px; max-width: 430px; }
}

/* Match the contact section edges to the project gallery. */
.contact.section { width: 82%; }
@media (max-width: 1120px) {
    .contact.section { width: calc(100% - 48px); }
}

/* Keep the contact headline on its two intentional lines. */
.contact-copy { container-type: inline-size; }
.contact h2 {
    font-size: clamp(32px, 18cqi, 124px);
    white-space: nowrap;
}

/* Give the contact headline a little more breathing room. */
.contact h2 {
    letter-spacing: -.035em;
    line-height: 1.16;
}

/* Bring the invitation closer to the headline and show social brand assets directly. */
.contact-sub { margin-top: 20px; }
.contact-brand-icon { display: block; width: 24px; height: 24px; object-fit: contain; }

.contact-social-icon .contact-brand-icon { stroke: none; fill: currentColor; }
.contact-social-icon .email-icon { fill: none; }

.contact-social-icon .contact-brand-icon--xiaohongshu { width: 48px; height: 24px; }
.contact-social-icon:has(.contact-brand-icon--xiaohongshu) { width: 48px; }

.contact-link .email-icon { fill: currentColor; stroke: none; }

.interests-overview { display: block; width: 100%; height: auto; margin: 0 0 64px; }

/* Crop the duplicated heading and dot from the supplied interest image. */
.interests-overview-crop { overflow: hidden; margin-bottom: 64px; }
.interests-overview-crop .interests-overview { margin: -16.5% 0 0; }

/* Homepage finishing pass: consistent pacing, image reveals and quiet feedback. */
:root { --motion-out: cubic-bezier(.16, 1, .3, 1); }
main .reveal {
    transform: translateY(18px);
    transition: opacity .85s ease, transform 1.05s var(--motion-out);
    transition-delay: var(--enter-delay, 0ms);
}
main .reveal.visible { transform: none; }
main .portrait-frame.reveal,
main .contact-photo.reveal {
    clip-path: inset(6% 0 0 0);
    transition: opacity .9s ease, transform 1.2s var(--motion-out), clip-path 1.2s var(--motion-out);
    transition-delay: var(--enter-delay, 0ms);
}
main .portrait-frame.reveal.visible,
main .contact-photo.reveal.visible { clip-path: inset(0); }
.about-more { transition: color .25s ease, opacity .25s ease; }
.about-more > span[aria-hidden] { display: inline-block; transition: transform .4s var(--motion-out); }
.about-more:hover > span[aria-hidden] { transform: translate(3px, -3px); }
.experience-row { position: relative; transition: background-color .4s ease; }
.company-logo { transition: transform .5s var(--motion-out); }
.contact-social-icon { transition: opacity .3s ease, transform .4s var(--motion-out); }
.contact-social-icon:hover, .contact-social-icon:focus-visible { opacity: 1; transform: translateY(-3px); }
.top-nav a::after { transition: transform .45s var(--motion-out); }
.contact-panel { border-top-color: #e2e2dc; border-bottom-color: #e2e2dc; }
@media (hover: hover) and (pointer: fine) {
    
    
    .project-card .project-image img { transition: transform 1.1s var(--motion-out); }
    .project-card:hover .project-image img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
    main .reveal, main .reveal.visible,
    main .portrait-frame.reveal, main .contact-photo.reveal {
        opacity: 1; transform: none; clip-path: none; transition: none;
    }
    .about-more:hover > span[aria-hidden],
    .experience-row:hover .company-logo,
    .contact-social-icon:hover, .contact-social-icon:focus-visible,
    .project-card:hover .project-image img { transform: none; }
}

/* Field notes: an editorial sequence with generous, asymmetric whitespace. */
.photo-journal { margin-top: clamp(64px, 9vw, 140px); color: #242421; }
.journal-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 36px; padding-top: 26px; border-top: 1px solid #deded8; margin-bottom: clamp(40px, 5vw, 80px); }
.journal-eyebrow { margin: 0 0 24px; font-size: 10px; letter-spacing: .16em; color: #8b8b83; }
.journal-header h3 { margin: 0; font-size: clamp(32px, 3.4vw, 60px); font-weight: 300; line-height: 1.25; letter-spacing: -.04em; }
.journal-intro { margin: 0 0 3px; color: #88887f; font-size: 12px; line-height: 2; }
.journal-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(18px, 3vw, 52px); row-gap: clamp(52px, 7vw, 120px); align-items: start; }
.journal-frame { margin: 0; min-width: 0; }
.journal-frame--1 { grid-column: 1 / 9; }
.journal-frame--2 { grid-column: 10 / 13; margin-top: 42%; }
.journal-frame--3 { grid-column: 2 / 7; }
.journal-frame--4 { grid-column: 8 / 13; margin-top: 20%; }
.journal-frame--5 { grid-column: 1 / 5; }
.journal-frame--6 { grid-column: 7 / 11; margin-top: 20%; }
.journal-frame--7 { grid-column: 1 / 6; margin-top: 18%; }
.journal-frame--8 { grid-column: 7 / 13; }
.journal-photo { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #f1f1ed; cursor: zoom-in; overflow: hidden; }
.journal-photo img { display: block; width: 100%; height: auto; transition: transform 1.1s var(--motion-out), filter .7s ease; }
.journal-frame--2 .journal-photo img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 60% center; }
.journal-frame--5 .journal-photo img, .journal-frame--6 .journal-photo img { aspect-ratio: 1; object-fit: cover; }
.journal-frame figcaption { display: flex; justify-content: space-between; gap: 10px; margin-top: 13px; font-size: 10px; line-height: 1.6; color: #72726b; }
.journal-frame figcaption span:last-child { color: #a1a199; font-size: 8px; letter-spacing: .08em; }
.journal-zoom { position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #252522; background: #fffffff0; opacity: 0; transform: translateY(5px); transition: opacity .3s ease, transform .4s var(--motion-out); }
.journal-photo:hover img { transform: scale(1.025); }
.journal-photo:hover .journal-zoom, .journal-photo:focus-visible .journal-zoom { opacity: 1; transform: none; }
.journal-photo:focus-visible { outline: 2px solid #79736c; outline-offset: 5px; }
.journal-footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: clamp(52px, 6vw, 100px); padding: 24px 0; border-top: 1px solid #deded8; color: #94948b; font-size: 11px; }
.journal-archive { display: flex; align-items: center; gap: 18px; border: 0; background: none; padding: 10px 0; color: #353530; cursor: pointer; font: inherit; }
.journal-total { font-size: 9px; color: #96968e; }
.journal-archive > span:last-child { transition: transform .3s ease; }
.journal-archive:hover > span:last-child { transform: translate(2px,-2px); }
.journal-lightbox { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #171816; color: #eeeee8; }
.journal-lightbox::backdrop { background: #171816; }
.journal-lightbox[open] { display: grid; grid-template-rows: 72px minmax(0, 1fr) 64px; animation: journal-open .35s ease both; }
.journal-lightbox-top, .journal-lightbox-bottom { display: flex; justify-content: space-between; align-items: center; padding: 0 36px; font-size: 10px; letter-spacing: .1em; color: #b0b0a7; }
.journal-lightbox button { color: inherit; background: none; border: 0; cursor: pointer; min-width: 44px; min-height: 44px; }
.journal-lightbox button:focus-visible { outline: 1px solid #aaa; outline-offset: 2px; }
.journal-lightbox-close { font-size: 30px; font-weight: 300; }
.journal-lightbox-stage { display: grid; grid-template-columns: 72px minmax(0, 1fr) 72px; align-items: center; min-height: 0; padding: 16px; }
.journal-lightbox-stage img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.journal-lightbox-stage button { font-size: 24px; }
@keyframes journal-open { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 760px) {
    .journal-header { display: block; }
    .journal-intro { margin-top: 20px; }
    .journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 18px; }
    .journal-frame--1, .journal-frame--8 { grid-column: 1 / -1; }
    .journal-frame--2, .journal-frame--3, .journal-frame--4, .journal-frame--5, .journal-frame--6, .journal-frame--7 { grid-column: auto; margin-top: 0; }
    .journal-frame--2 .journal-photo img { aspect-ratio: 1.5; }
    .journal-frame figcaption { flex-direction: column; gap: 2px; }
    .journal-footer { align-items: flex-start; flex-direction: column; gap: 8px; }
    .journal-lightbox-stage { grid-template-columns: 36px minmax(0, 1fr) 36px; padding: 4px; }
    .journal-lightbox-top, .journal-lightbox-bottom { padding: 0 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .journal-photo img, .journal-zoom { transition: none; }
    .journal-photo:hover img { transform: none; }
    .journal-lightbox[open] { animation: none; }
}

/* A continuous, non-interactive masonry photo wall. */
.photo-journal--wall { margin-top: 64px; }
.photo-masonry { columns: 4; column-gap: 5px; }
.photo-tile { margin: 0 0 5px; break-inside: avoid; overflow: hidden; }
.photo-tile img { display: block; width: 100%; height: auto; }
@media (max-width: 1000px) { .photo-masonry { columns: 3; } }
@media (max-width: 600px) {
    .photo-journal--wall { margin-top: 36px; }
    .photo-masonry { columns: 2; column-gap: 4px; }
    .photo-tile { margin-bottom: 4px; }
}

/* Let the photo wall scroll within its own bounded viewing area. */
.photo-wall-scroll {
    height: clamp(420px, 72vh, 820px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: #b7b7b0 #f3f3ef;
    scrollbar-gutter: stable;
    padding-right: 6px;
}
.photo-wall-scroll::-webkit-scrollbar { width: 5px; }
.photo-wall-scroll::-webkit-scrollbar-track { background: #f3f3ef; }
.photo-wall-scroll::-webkit-scrollbar-thumb { background: #b7b7b0; border-radius: 8px; }
.photo-wall-scroll:focus-visible { outline: 1px solid #999990; outline-offset: 6px; }
@media (max-width: 600px) {
    .photo-wall-scroll { height: 65svh; min-height: 320px; padding-right: 3px; }
}

/* Automatic photo wall: hide manual scrolling and join the repeated image sets. */
.photo-wall-scroll {
    overflow: hidden;
    scrollbar-gutter: auto;
    padding-right: 0;
    overscroll-behavior: auto;
}
.photo-wall-track { will-change: transform; }
.photo-wall-track .photo-masonry { display: flow-root; padding-bottom: 5px; }
@media (prefers-reduced-motion: reduce) {
    .photo-wall-track { will-change: auto; }
}

/* Independent interest cards move along a gently staggered horizontal ribbon. */
.interest-flow {
    --interest-size: clamp(170px, 17vw, 280px);
    --interest-gap: clamp(22px, 3vw, 48px);
    width: 100%;
    overflow: hidden;
    padding: 65px 0;
    mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}
.interest-flow-track { display: flex; width: max-content; animation: interest-travel 46s linear infinite; }
.interest-flow-set { display: flex; gap: var(--interest-gap); padding-right: var(--interest-gap); align-items: center; }
.interest-float { width: var(--interest-size); flex: 0 0 var(--interest-size); transform: translateY(var(--interest-y)) rotate(var(--interest-tilt)); }
.interest-art {
    width: 100%; aspect-ratio: 355 / 285;
    background-image: url('assets/hobbies/interests-overview.png');
    background-size: 576.9% 258.6%;
    background-position: var(--interest-x) 77.4%;
    background-repeat: no-repeat;
    border-radius: 22px;
    animation: interest-bob 6s ease-in-out infinite alternate;
    animation-delay: var(--interest-delay);
}
.interest-float--1 { --interest-x: 4.9%; --interest-y: 18px; --interest-tilt: -3deg; --interest-delay: -2s; }
.interest-float--2 { --interest-x: 27.5%; --interest-y: -22px; --interest-tilt: 2deg; --interest-delay: -4s; }
.interest-float--3 { --interest-x: 50%; --interest-y: -40px; --interest-tilt: -2deg; --interest-delay: -1s; }
.interest-float--4 { --interest-x: 72.5%; --interest-y: 8px; --interest-tilt: 3deg; --interest-delay: -3s; }
.interest-float--5 { --interest-x: 95.1%; --interest-y: 30px; --interest-tilt: -2deg; --interest-delay: -5s; }

@keyframes interest-travel { to { transform: translateX(-50%); } }
@keyframes interest-bob { from { transform: translateY(-5px); } to { transform: translateY(5px); } }
@media (max-width: 600px) {
    .interest-flow { --interest-size: 165px; --interest-gap: 20px; padding: 55px 0; }
    .interest-flow-track { animation-duration: 38s; }
}
@media (prefers-reduced-motion: reduce) {
    .interest-flow-track, .interest-art { animation: none; }
    .interest-flow { overflow-x: auto; mask-image: none; }
    .interest-flow-set[aria-hidden] { display: none; }
}

/* Life photographs follow the same staggered, flowing rhythm as the interests. */
.life-ribbons { margin-top: 32px; overflow: hidden; mask-image: none; }
.life-ribbon { --photo-size: clamp(130px, 13vw, 210px); --photo-gap: clamp(18px, 2.4vw, 40px); padding: 44px 0; overflow: hidden; }
.life-ribbon-track { display: flex; width: max-content; animation: life-travel 100s linear infinite; }
.life-ribbon--2 .life-ribbon-track { animation-direction: reverse; animation-duration: 112s; }
.life-ribbon-set { display: flex; align-items: center; gap: var(--photo-gap); padding-right: var(--photo-gap); }
.life-float { flex: 0 0 var(--photo-size); width: var(--photo-size); aspect-ratio: 1; margin: 0; border: 3px solid #fff; border-radius: 20px; overflow: hidden; background: #f3f3ef; transform: translateY(var(--photo-y)) rotate(var(--photo-rotate)); }
.life-float img { display: block; width: 100%; height: 100%; object-fit: cover; }
.life-float--1 { --photo-y: 18px; --photo-rotate: -3deg; }
.life-float--2 { --photo-y: -18px; --photo-rotate: 2deg; }
.life-float--3 { --photo-y: -30px; --photo-rotate: -2deg; }
.life-float--4 { --photo-y: 6px; --photo-rotate: 3deg; }
.life-float--5 { --photo-y: 24px; --photo-rotate: -1deg; }

@keyframes life-travel { to { transform: translateX(-50%); } }
@media (max-width: 600px) {
    .life-ribbon { --photo-size: 130px; --photo-gap: 18px; padding: 38px 0; }
    .life-float { border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .life-ribbon-track { animation: none; }
    .life-ribbon { overflow-x: auto; }
    .life-ribbon-set[aria-hidden] { display: none; }
}

/* Preserve each photograph's native ratio within a balanced ribbon height. */
.life-ribbon { --photo-height: clamp(130px, 12vw, 190px); --photo-gap: clamp(22px, 2.6vw, 44px); padding: 46px 0; }
.life-float {
    flex: 0 0 auto;
    width: auto;
    height: var(--photo-height);
    aspect-ratio: auto;
    border-radius: 16px;
    transform: translateY(var(--photo-y)) rotate(var(--photo-rotate));
}
.life-float img { width: auto; height: 100%; object-fit: contain; }
.life-float--1 { --photo-y: 12px; --photo-rotate: -2deg; }
.life-float--2 { --photo-y: -14px; --photo-rotate: 1.5deg; height: calc(var(--photo-height) * .9); }
.life-float--3 { --photo-y: -24px; --photo-rotate: -1deg; height: calc(var(--photo-height) * 1.06); }
.life-float--4 { --photo-y: 5px; --photo-rotate: 2deg; }
.life-float--5 { --photo-y: 20px; --photo-rotate: -1.5deg; height: calc(var(--photo-height) * .94); }
@media (max-width: 600px) {
    .life-ribbon { --photo-height: 125px; --photo-gap: 22px; padding: 38px 0; }
    .life-float { border-radius: 12px; }
}

.others.section.others-image-section { width: 100%; max-width: none; padding: 0; }
.off-hours-section-image { display: block; width: 100%; height: auto; }

/* Render the image heading as native type matching the shared section titles. */
.others-image-section { position: relative; }
.off-hours-title-cover {
    position: absolute; z-index: 1; top: 18%; left: 25%; width: 50%; height: 16%;
    display: flex; align-items: center; justify-content: center; background: #f5f5f5;
}
.others.section.others-image-section .section-title {
    font-family: inherit; font-size: clamp(43px, 5.7vw, 72px);
    font-weight: 300; line-height: 1; letter-spacing: -.065em; margin: 0;
}
@media (max-width: 760px) {
    .others.section.others-image-section .section-title { font-size: clamp(20px, 5.7vw, 42px); }
}

/* Cohesive clay illustrations in the Off Hours cards. */
.others.section.illustrated-interests {
    width: 100%; max-width: none; padding: clamp(70px, 8vw, 150px) 10.5%;
    background: #f5f5f5;
}
.others.section.illustrated-interests > .section-title {
    text-align: center; font-family: inherit; font-size: clamp(43px, 5.7vw, 72px);
    font-weight: 300; line-height: 1; letter-spacing: -.065em;
    margin: 0 0 clamp(65px, 9vw, 160px);
}
.illustrated-interest-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 1.3vw, 26px); }
.illustrated-interest-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 0; padding: clamp(18px, 2vw, 34px) 12px;
    border: 1px solid #f0f2f7; border-radius: clamp(18px, 1.5vw, 30px); background: #fff;
}
.illustrated-interest-card img { display: block; width: 78%; max-width: 160px; aspect-ratio: 1; object-fit: contain; }
.illustrated-interest-card h3 { margin: 15px 0 0; color: #161616; font-size: clamp(14px, 1.2vw, 22px); font-weight: 600; line-height: 1.5; }
@media (max-width: 760px) {
    .others.section.illustrated-interests { padding: 60px 24px; }
    .illustrated-interest-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .illustrated-interest-card { padding: 18px 8px; }
    .illustrated-interest-card img { width: 90%; }
    .illustrated-interest-card h3 { font-size: 13px; margin-top: 10px; }
}

/* Reduce the artwork without moving the labels or resizing the cards. */
.illustrated-interest-card img { transform: scale(.85); }

/* Carry the Off Hours gray background through the space below the cards. */
.others.section.illustrated-interests {
    background: #f5f5f5;
    box-shadow: 0 50px 0 #f5f5f5;
}
.illustrated-interests + .contact.section { background: #fff; }
@media (max-width: 760px) {
    .others.section.illustrated-interests { box-shadow: 0 28px 0 #f5f5f5; }
    .illustrated-interests + .contact.section { background: #fff; }
}

/* Muted live-action footage beneath a soft gray wash. */
.others.section.illustrated-interests { position: relative; isolation: isolate; overflow: hidden; box-shadow: none; }
.interest-video-background { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: #f5f5f5; }
.interest-video-background::after { content: ''; position: absolute; inset: 0; background: rgba(245,245,245,.69); }
.interest-background-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: saturate(.65); transition: opacity 1.2s ease; }
.interest-background-video.is-active { opacity: 1; }
.illustrated-interest-card { background: rgba(255,255,255,.94); }
@media (prefers-reduced-motion: reduce) { .interest-background-video { transition: none; } }

/* Remove the divider above the contact composition. */
.contact-panel { border-top: none; }

/* Black contact field, matching the framed reference composition. */
.contact-panel { background: #000; }
.contact-copy { color: #fff; }
.contact h2, .contact-link { color: #fff; }
.contact-sub, .contact-kicker, .contact-role, .contact-social-icon { color: #aaa; }
.contact-link { border-bottom-color: rgba(255, 255, 255, .42); }
.contact-panel { border-bottom-color: #000; }

/* Darken the footage and keep the section heading legible. */
.interest-video-background::after { background: rgba(0, 0, 0, .48); }
.others.section.illustrated-interests > .section-title { color: #fff; }

/* Preview the original monochrome line icons against the video background. */

/* Full-bleed photo contact frame with its copy and social marks over the image. */
.contact.section {
    position: relative;
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    padding: 0;
}
.contact-panel {
    position: relative;
    display: grid;
    width: 100%;
    min-height: clamp(560px, 58vw, 780px);
    grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr);
    align-items: center;
    gap: 0;
    padding: clamp(56px, 7vw, 104px) max(7vw, calc((100vw - 1440px) / 2)) clamp(56px, 7vw, 104px) 7vw;
    overflow: hidden;
    background: #171716;
    border: 0;
}
.contact-panel::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.18) 42%, rgba(0,0,0,.68) 100%);
    pointer-events: none;
}
.contact-panel .contact-photo {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    margin: 0;
    border-radius: 0;
    object-fit: cover;
    object-position: center 54%;
    filter: grayscale(1);
}
.contact-copy {
    position: relative;
    z-index: 1;
    grid-column: 2;
    justify-content: center;
    gap: clamp(56px, 8vw, 116px);
    padding: 0;
    color: #fff;
}
.contact h2,
.contact-link { color: #fff; }
.contact-sub,
.contact-kicker,
.contact-role,
.contact-social-icon { color: rgba(255,255,255,.86); }
.contact-details { width: 100%; margin-top: 0; }
.contact-link { border-bottom-color: rgba(255,255,255,.55); }
.contact-social-icon { opacity: 1; }
.contact-social-icon svg,
.contact-social-icon .contact-brand-icon { color: #fff; fill: #fff; }
.contact-social-icon .contact-brand-icon path { fill: currentColor !important; }
.contact-social-icon .email-icon { fill: #fff; }
.contact-panel .wechat-qr-tooltip { color: #222; }
@media (max-width: 760px) {
    .contact.section { width: 100vw; margin-left: calc(50% - 50vw); padding: 0; }
    .contact-panel {
        min-height: 680px;
        grid-template-columns: 1fr;
        align-items: end;
        padding: 52px 24px 48px;
    }
    .contact-panel::before {
        background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.12) 28%, rgba(0,0,0,.78) 100%);
    }
    .contact-copy { grid-column: 1; width: min(100%, 560px); margin-left: auto; }
    .contact h2 { font-size: clamp(48px, 11vw, 80px); }
    .contact-sub { font-size: 13px; }
}
.interest-line-art { display: grid; place-items: center; width: 78%; max-width: 160px; aspect-ratio: 1; }
.interest-line-art svg { display: block; width: 55%; height: 55%; fill: none; stroke: #111; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) { .interest-line-art { width: 90%; } }

/* Keep the hobby cards square at every screen width. */
.illustrated-interest-card {
    aspect-ratio: 1;
    padding: 16px 12px;
}
.interest-line-art {
    width: 56%;
    max-width: 120px;
}
.illustrated-interest-card h3 { margin-top: 10px; }
@media (max-width: 760px) {
    .illustrated-interest-card { padding: 10px 6px; }
    .interest-line-art { width: 56%; }
    .illustrated-interest-card h3 { margin-top: 6px; }
}

/* Frosted-glass video overlay with a dark translucent finish. */
.interest-video-background::after {
    background: rgba(18, 20, 22, .42);
    -webkit-backdrop-filter: blur(12px) saturate(.75);
    backdrop-filter: blur(12px) saturate(.75);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

/* Keep the colorful illustrations balanced within the square cards. */
.illustrated-interest-card img { width: 56%; max-width: 120px; }

/* Monochrome preview retaining the illustrations' three-dimensional shading. */
.illustrated-interest-card img { filter: grayscale(1); }

.others.section.illustrated-interests > .section-title { margin-bottom: 24px; }
.off-hours-subtitle {
    margin: 0 0 clamp(48px, 6vw, 110px);
    text-align: center;
    color: rgba(255,255,255,.85);
    font-size: clamp(14px, 1.2vw, 20px);
    font-weight: 300;
    line-height: 1.8;
    letter-spacing: .12em;
}

/* Clear footage beneath the dark overlay, with a more compact card group. */
.interest-video-background::after {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}
.illustrated-interest-grid {
    width: 85%;
    margin-inline: auto;
}
@media (max-width: 760px) {
    .illustrated-interest-grid { width: 100%; }
}

/* Scale the square hobby cards down to roughly two-thirds of the last size. */
.illustrated-interest-grid { width: 59%; gap: clamp(10px, .9vw, 18px); }
.illustrated-interest-card { padding: 10px 8px; border-radius: clamp(12px, 1vw, 20px); }
.illustrated-interest-card h3 { font-size: clamp(11px, .85vw, 16px); margin-top: 6px; }
@media (max-width: 760px) {
    .illustrated-interest-grid { width: 80%; gap: 10px; }
    .illustrated-interest-card { padding: 8px 5px; }
    .illustrated-interest-card h3 { font-size: 11px; margin-top: 4px; }
}

/* Spread five smaller square cards evenly across the section. */
.illustrated-interest-grid {
    width: 100%;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    justify-items: center;
    gap: clamp(14px, 2vw, 32px);
}
.illustrated-interest-card {
    width: 52%;
    padding: 8px 6px;
}
.illustrated-interest-card h3 { font-size: clamp(10px, .75vw, 14px); }
@media (max-width: 760px) {
    .illustrated-interest-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .illustrated-interest-card { width: 85%; }
    .illustrated-interest-card h3 { font-size: 10px; }
}

/* Halve the visual spacing while preserving the current card dimensions. */
.illustrated-interest-grid {
    width: 76%;
    margin-inline: auto;
    gap: clamp(7px, 1vw, 16px);
}
.illustrated-interest-card { width: 68.42%; }
@media (max-width: 760px) {
    .illustrated-interest-grid { width: 100%; gap: 8px; }
    .illustrated-interest-card { width: 85%; }
}

/* Full-bleed life photography: cinematic upper strip and a smaller lower strip. */
.life-cinema { width: 100%; overflow: hidden; padding: 12px 0 0; background: #fff; }
.life-cinema-row { --cinema-gap: 12px; --cinema-height: clamp(260px, 34vw, 600px); overflow: hidden; }
.life-cinema-row--small { --cinema-height: clamp(140px, 16vw, 260px); margin-top: 12px; }
.life-cinema-track { display: flex; width: max-content; animation: cinema-drift 150s linear infinite; }
.life-cinema-row--small .life-cinema-track { animation-direction: reverse; animation-duration: 175s; }
.life-cinema-set { display: flex; gap: var(--cinema-gap); padding-right: var(--cinema-gap); }
.life-cinema-frame { flex: 0 0 auto; height: var(--cinema-height); margin: 0; overflow: hidden; background: #f5f5f5; }
.life-cinema-frame img { display: block; width: auto; height: 100%; object-fit: contain; }
@keyframes cinema-drift { to { transform: translateX(-50%); } }
@media (max-width: 760px) {
    .life-cinema { padding-top: 8px; }
    .life-cinema-row { --cinema-gap: 8px; --cinema-height: 240px; }
    .life-cinema-row--small { --cinema-height: 125px; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .life-cinema-track { animation: none; }
    .life-cinema-row { overflow-x: auto; }
    .life-cinema-set[aria-hidden] { display: none; }
}

/* Single-row photographic stories with Nike-inspired spacing and controls. */
.life-gallery { padding: clamp(60px, 7vw, 120px) 0 clamp(48px, 5vw, 80px); background: #fff; }
.life-gallery-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 0 3.3% 28px; }
.life-gallery-head h2 { margin: 0 0 12px; font-size: clamp(25px, 2.4vw, 40px); font-weight: 500; letter-spacing: -.04em; line-height: 1.3; }
.life-gallery-head p { margin: 0; font-size: clamp(13px, 1.2vw, 20px); line-height: 1.6; color: #65655f; }
.life-gallery-controls { display: flex; gap: 12px; padding-top: 32px; }
.life-gallery-controls button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #e9e9e7; color: #272724; font-size: 30px; font-weight: 300; cursor: pointer; }
.life-gallery-controls button:disabled { opacity: .4; cursor: default; }
.life-gallery-controls button:focus-visible { outline: 2px solid #777; outline-offset: 4px; }
.life-gallery-rail { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; padding: 0 3.3% 12px; scroll-padding-inline: 3.3vw; }
.life-gallery-rail::-webkit-scrollbar { display: none; }
.life-gallery-card { flex: 0 0 calc((100vw - 6.6vw - 32px) / 3.05); min-width: 0; margin: 0; scroll-snap-align: start; }
.life-gallery-card > img { display: block; width: 100%; height: auto; aspect-ratio: 1.5; object-fit: cover; }
.life-gallery-card h3 { margin: 18px 0 7px; font-size: clamp(16px, 1.3vw, 24px); line-height: 1.4; font-weight: 500; }
.life-gallery-card p { margin: 0; font-size: clamp(12px, 1vw, 17px); line-height: 1.6; color: #777770; }
@media (max-width: 760px) {
    .life-gallery-head { margin-inline: 24px; }
    .life-gallery-controls { gap: 8px; }
    .life-gallery-controls button { width: 36px; height: 36px; }
    .life-gallery-rail { padding-inline: 24px; scroll-padding-inline: 24px; gap: 12px; }
    .life-gallery-card { flex-basis: 78vw; }
}

/* A more compact, finely aligned employment list. */
.experience-row { padding: 18px 0; border-color: #e5e5df; }
.experience-row:last-child { border-bottom-color: #e5e5df; }
.experience-row .company-info { grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; }
.experience-row .company-info .company-logo { width: 36px; height: 36px; }
.experience-row .company-info .company { font-size: 19px; line-height: 1.3; font-weight: 400; letter-spacing: -.025em; }
.experience-row .company-info .position { font-size: 13px; line-height: 1.6; color: #898982; }
.experience-row .period { font-size: 11px; letter-spacing: .035em; font-variant-numeric: tabular-nums; color: #a0a099; }
@media (max-width: 760px) {
    .experience-row { padding: 15px 0; gap: 8px 12px; }
    .experience-row .company-info { grid-template-columns: 30px minmax(0, 1fr); column-gap: 9px; }
    .experience-row .company-info .company-logo { width: 30px; height: 30px; }
    .experience-row .company-info .company { font-size: 16px; }
    .experience-row .company-info .position { font-size: 11px; }
    .experience-row .period { font-size: 9px; }
}

/* Life photo reel follows the same calm, flat carousel rhythm as Projects. */
.life-coverflow { padding: clamp(60px, 7vw, 110px) 0 60px; overflow: hidden; background: #fff; }
.life-coverflow-head { text-align: center; padding: 0 24px; }
.life-coverflow-head h2 { margin: 0 0 14px; font-size: clamp(46px, 4.2vw, 70px); font-weight: 300; line-height: 1.12; letter-spacing: -.055em; }
.life-coverflow-head p { margin: 25px 0 0; color: #8c8c83; font-size: clamp(13px, 1.1vw, 18px); line-height: 1.8; font-weight: 300; letter-spacing: .025em; }
.life-coverflow-stage { position: relative; height: clamp(320px, 29vw, 470px); margin-top: 40px; perspective: 1200px; overflow: hidden; touch-action: pan-y; cursor: grab; }
.life-coverflow-stage.is-dragging { cursor: grabbing; }
.life-coverflow-stage:focus-visible { outline: 1px solid #aaa; outline-offset: -8px; }
.life-coverflow-scene { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.life-coverflow-photo { position: absolute; top: 50%; left: 50%; width: clamp(180px, 18vw, 300px); aspect-ratio: 3 / 4; height: auto; max-width: none; padding: 0; border: 0; border-radius: 12px; background: #f3f3ef; overflow: hidden; backface-visibility: hidden; transform-origin: center; pointer-events: auto; cursor: inherit; user-select: none; box-shadow: 0 8px 28px rgba(18,18,18,.08); }
.life-coverflow-photo img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.life-coverflow-photo:focus-visible { outline: 2px solid #777; outline-offset: 4px; }
.life-coverflow-footer { display: flex; justify-content: center; align-items: center; gap: 26px; text-align: center; padding: 24px 24px 0; }
.life-coverflow-footer > div { min-width: 0; }
.life-coverflow-caption { width: min(340px, 55vw); margin: 0; color: #55554e; font-size: 13px; line-height: 1.6; }
.life-coverflow-counter { display: none; }
.life-coverflow-footer button { flex: 0 0 38px; width: 38px; height: 38px; border: 1px solid #e5e5df; border-radius: 50%; color: #77776f; background: #fff; font-size: 17px; cursor: pointer; }
.life-coverflow-footer button:focus-visible { outline: 2px solid #888; outline-offset: 3px; }
@media (max-width: 760px) {
    .life-coverflow-stage { height: 76vw; min-height: 260px; max-height: 440px; perspective: 950px; margin-top: 24px; }
    .life-coverflow-photo { width: 48vw; border-radius: 9px; }
    .life-coverflow-head p { max-width: 28em; margin: 20px auto 0; font-size: 12px; }
    .life-coverflow-footer { gap: 16px; padding-top: 12px; }
    .life-coverflow-caption { font-size: 11px; }
}

/* Projects: a calm flat row that folds gently in response to movement. */
.projects.section { width: 100%; max-width: none; overflow: hidden; }
.projects .project-head { padding-inline: 24px; }
.project-intro { margin: 25px 0 0; text-align: center; color: #8c8c83; font-size: clamp(13px, 1.1vw, 18px); line-height: 1.8; font-weight: 300; letter-spacing: .025em; }
.project-grid.project-velocity {
    --velocity-width: clamp(180px, 18vw, 300px);
    display: block; position: relative; height: clamp(320px, 29vw, 470px);
    margin-top: 40px; padding: 0; overflow: hidden; perspective: 1200px;
    touch-action: pan-y; cursor: grab; scroll-snap-type: none;
}
.project-velocity.is-dragging { cursor: grabbing; }
.project-velocity:focus-visible { outline: 1px solid #bbb; outline-offset: -6px; }
.project-grid.project-velocity .project-card {
    position: absolute; top: 50%; left: 50%; width: var(--velocity-width);
    opacity: 1; transition: none; transform-origin: center; backface-visibility: hidden;
    padding: 0; margin: 0; user-select: none;
}
.project-grid.project-velocity .project-image {
    width: 100%; height: auto; aspect-ratio: 3 / 4; margin: 0;
    border-radius: 12px; opacity: 1; clip-path: none; transform: none; transition: none;
    cursor: inherit;
}
.project-grid.project-velocity .project-image img { height: 100%; width: 100%; object-fit: cover; transform: none; transition: none; pointer-events: none; }
.project-grid.project-velocity .project-name { display: none; }
.project-grid.project-velocity .project-view-indicator { display: none; }
.project-velocity-controls { display: flex; justify-content: center; align-items: center; gap: 26px; padding: 24px 24px 0; }
.project-velocity-controls button { flex: 0 0 38px; height: 38px; padding: 0; border: 1px solid #e5e5df; border-radius: 50%; background: #fff; color: #77776f; font-size: 17px; cursor: pointer; }
.project-velocity-controls button:focus-visible { outline: 2px solid #888; outline-offset: 3px; }
.project-velocity-caption { width: min(340px, 55vw); margin: 0; text-align: center; font-size: 13px; line-height: 1.6; color: #55554e; }
@media (max-width: 760px) {
    .project-grid.project-velocity { --velocity-width: 48vw; height: 76vw; min-height: 260px; max-height: 440px; margin-top: 24px; }
    .project-intro { max-width: 28em; margin: 20px auto 0; font-size: 12px; }
    .project-velocity-controls { gap: 16px; padding-top: 12px; }
    .project-velocity-caption { font-size: 11px; }
}

/* Keep the Projects heading at its original scale and match the other section titles to it. */
.projects .project-head h2,
.others.section.illustrated-interests > .section-title,
.life-coverflow-head h2 {
    font-size: clamp(23px, 2.1vw, 35px);
    font-weight: 300;
    line-height: 1.12;
    letter-spacing: -.055em;
}

/* Awards-inspired project bento: one image-led case with four concise project notes. */
.project-grid.project-bento {
    width: min(1440px, calc(100% - 12vw));
    margin: clamp(54px, 7vw, 108px) auto 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(190px, 1fr));
    grid-template-areas: "feature feature japan aiya" "feature feature pdd qiandao";
    gap: 12px;
    row-gap: 12px;
}
.project-grid.project-bento .project-card {
    position: relative;
    min-height: 0;
    margin: 0;
    overflow: hidden;
}
.project-grid.project-bento .project-card-featured { grid-area: feature; }
.project-grid.project-bento .project-card-note:nth-child(2) { grid-area: japan; }
.project-grid.project-bento .project-card-note:nth-child(3) { grid-area: aiya; }
.project-grid.project-bento .project-card-note:nth-child(4) { grid-area: pdd; }
.project-grid.project-bento .project-card-note:nth-child(5) { grid-area: qiandao; }
.project-grid.project-bento .project-card-featured .project-image {
    position: absolute;
    inset: 0;
    height: auto;
    background: #1c1c1a;
}
.project-grid.project-bento .project-card-featured .project-image img {
    filter: none;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.project-grid.project-bento .project-feature-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 28%, rgba(0,0,0,.18) 48%, rgba(0,0,0,.78) 100%);
}
.project-grid.project-bento .project-feature-copy {
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    padding: clamp(24px, 3vw, 48px);
    color: #fff;
}
.project-grid.project-bento .project-eyebrow,
.project-grid.project-bento .project-note-period {
    display: block;
    color: #92928b;
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.project-grid.project-bento .project-feature-copy .project-eyebrow { color: rgba(255,255,255,.72); }
.project-grid.project-bento .project-feature-copy .project-name {
    margin: 12px 0 9px;
    color: #fff;
    font-size: clamp(25px, 2.6vw, 42px);
    line-height: 1.15;
    font-weight: 400;
    letter-spacing: -.04em;
}
.project-grid.project-bento .project-feature-copy p,
.project-grid.project-bento .project-card-note p {
    max-width: 38em;
    margin: 0;
    font-size: clamp(12px, .95vw, 15px);
    line-height: 1.75;
}
.project-grid.project-bento .project-feature-copy p { color: rgba(255,255,255,.82); }
.project-grid.project-bento .project-feature-link {
    display: inline-block;
    margin-top: 20px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255,255,255,.62);
    font-size: 11px;
    letter-spacing: .04em;
}
.project-grid.project-bento .project-card-note {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(18px, 1.8vw, 28px);
    background: #f3f3f0;
    color: #20201e;
    transition: background-color .35s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
.project-grid.project-bento .project-card-note .project-name {
    margin: 13px 0 8px;
    color: #20201e;
    font-size: clamp(16px, 1.35vw, 21px);
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: -.035em;
}
.project-grid.project-bento .project-card-note p { color: #777770; }
.project-grid.project-bento .project-note-arrow {
    position: absolute;
    top: 18px;
    right: 20px;
    color: #96968f;
    font-size: 17px;
    transition: transform .3s ease, color .3s ease;
}
.project-grid.project-bento .project-card-featured:hover img { transform: scale(1.035); }
.project-grid.project-bento .project-card-note:hover { background: #eaeae6; }
.project-grid.project-bento .project-card-note:hover .project-note-arrow { transform: translate(2px,-2px); color: #222; }
.project-grid.project-bento .project-card:focus-visible { outline: 1px solid #5d5d57; outline-offset: 4px; }
@media (max-width: 900px) {
    .project-grid.project-bento {
        width: calc(100% - 48px);
        grid-template-rows: repeat(2, minmax(180px, 1fr));
        gap: 10px;
    }
    .project-grid.project-bento .project-card-note { padding: 18px; }
    .project-grid.project-bento .project-note-period { font-size: 9px; }
    .project-grid.project-bento .project-card-note .project-name { font-size: 16px; }
}

/* Editorial project gallery: one featured image beside a compact 2×2 image grid. */
.project-grid.project-image-grid {
    width: min(1440px, calc(100% - 12vw));
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: repeat(2, minmax(240px, 1fr));
    grid-template-areas: "feature japan aiya" "feature pdd qiandao";
    align-items: stretch;
    gap: 14px;
}
.project-grid.project-image-grid .project-card {
    position: relative;
    aspect-ratio: auto;
    min-width: 0;
    min-height: 0;
    background: #f3f3f0;
    border-radius: 2px;
    overflow: hidden;
}
.project-grid.project-image-grid .project-card-featured { grid-area: feature; }
.project-grid.project-image-grid .project-card-note:nth-child(2) { grid-area: japan; }
.project-grid.project-image-grid .project-card-note:nth-child(3) { grid-area: aiya; }
.project-grid.project-image-grid .project-card-note:nth-child(4) { grid-area: pdd; }
.project-grid.project-image-grid .project-card-note:nth-child(5) { grid-area: qiandao; }
.project-grid.project-image-grid .project-card-featured .project-image {
    position: absolute;
    inset: 0;
    height: auto;
    background: #e8e8e4;
}
.project-grid.project-image-grid .project-card-featured .project-image,
.project-grid.project-image-grid .project-card-note .project-image {
    position: absolute;
    inset: 0;
    height: auto;
    background: #e8e8e4;
}
.project-grid.project-image-grid .project-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.project-grid.project-image-grid .project-card-note {
    display: block;
    padding: 0;
    background-color: #e8e8e4;
    background-position: center;
    background-size: cover;
}
.project-grid.project-image-grid .project-card-note .project-note-period,
.project-grid.project-image-grid .project-feature-copy .project-eyebrow,
.project-grid.project-image-grid .project-note-arrow,
.project-grid.project-image-grid .project-feature-link { display: none; }
.project-grid.project-image-grid .project-feature-overlay,
.project-grid.project-image-grid .project-card-note .project-image::after {
    content: "";
    position: absolute;
    inset: 30% 0 0;
    z-index: 0;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.62));
    pointer-events: none;
}
.project-grid.project-image-grid .project-feature-overlay {
    inset: 0;
    background: linear-gradient(180deg, transparent 42%, rgba(0,0,0,.64));
}
.project-grid.project-image-grid .project-feature-copy {
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    padding: 20px;
    color: #fff;
}
.project-grid.project-image-grid .project-feature-copy .project-name,
.project-grid.project-image-grid .project-card-note .project-name {
    margin: 0;
    color: #fff;
    font-size: clamp(15px, 1.4vw, 21px);
    font-weight: 400;
    line-height: 1.35;
}
.project-grid.project-image-grid .project-card-note .project-name {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 16px;
    padding: 0 18px;
}
.project-grid.project-image-grid .project-card-note p {
    display: block;
    position: absolute;
    z-index: 1;
    left: 18px;
    right: 18px;
    bottom: 18px;
    margin: 0;
    color: rgba(255,255,255,.86);
    font-size: clamp(10px, .8vw, 13px);
    line-height: 1.45;
    opacity: 1;
    transform: none;
}
.project-grid.project-image-grid .project-feature-copy p {
    display: block;
    max-width: 38em;
    margin: 8px 0 0;
    color: rgba(255,255,255,.9);
    font-size: clamp(12px, .95vw, 15px);
    line-height: 1.6;
}
.project-grid.project-image-grid .project-feature-copy,
.project-grid.project-image-grid .project-card-note .project-name,
.project-grid.project-image-grid .project-card-note p {
    text-shadow: 0 1px 10px rgba(0,0,0,.18);
}
.project-grid.project-image-grid .project-card-note .project-name {
    bottom: 54px;
}
.project-grid.project-image-grid .project-card-note p {
    color: rgba(255,255,255,.92);
}
.project-grid.project-image-grid .project-card > .project-view-indicator {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    display: grid;
    place-items: center;
    z-index: 5;
    background: transparent;
    opacity: 0;
    transform: none;
    transition: opacity .22s ease;
    pointer-events: none;
}
.project-grid.project-image-grid .project-card > .project-view-indicator svg {
    width: 44px;
    height: 44px;
    color: #222;
    transform: scale(.94);
    transition: transform .22s ease;
}
.project-grid.project-image-grid .project-card:hover > .project-view-indicator,
.project-grid.project-image-grid .project-card:focus-visible > .project-view-indicator {
    opacity: 1;
}
.project-grid.project-image-grid .project-card:hover > .project-view-indicator svg,
.project-grid.project-image-grid .project-card:focus-visible > .project-view-indicator svg {
    transform: scale(1);
}
.project-grid.project-image-grid .project-card:hover .project-card-note p,
.project-grid.project-image-grid .project-card:focus-visible .project-card-note p {
    opacity: 1;
    transform: translateY(0);
}
@media (max-width: 900px) {
    .project-grid.project-image-grid {
        width: calc(100% - 48px);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: minmax(320px, 62vw) repeat(2, minmax(210px, 1fr));
        grid-template-areas: "feature feature" "japan aiya" "pdd qiandao";
        gap: 12px;
    }
}
@media (max-width: 620px) {
    .project-grid.project-image-grid {
        width: calc(100% - 40px);
        grid-template-rows: minmax(240px, 70vw) repeat(2, minmax(165px, 46vw));
        gap: 9px;
    }
    .project-grid.project-image-grid .project-feature-copy { padding: 18px; }
    .project-grid.project-image-grid .project-feature-copy .project-name,
    .project-grid.project-image-grid .project-card-note .project-name { font-size: 15px; }
    .project-grid.project-image-grid .project-card-note .project-name { padding: 16px; }
    .project-grid.project-image-grid .project-card-note p { display: none; }
}
@media (max-width: 620px) {
    .project-grid.project-bento {
        width: calc(100% - 40px);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: minmax(300px, 68vw) repeat(2, minmax(170px, auto));
        grid-template-areas: "feature feature" "japan aiya" "pdd qiandao";
        margin-top: 42px;
        gap: 8px;
    }
    .project-grid.project-bento .project-feature-copy { padding: 22px; }
    .project-grid.project-bento .project-feature-copy .project-name { font-size: 25px; }
    .project-grid.project-bento .project-card-note { padding: 16px; }
    .project-grid.project-bento .project-card-note .project-name { font-size: 15px; }
    .project-grid.project-bento .project-card-note p { font-size: 11px; }
}

/* A bottom-weighted scrim keeps the cover visible and the captions readable. */
.project-grid.project-image-grid .project-card-note .project-image {
    aspect-ratio: auto;
    height: 100%;
}
.project-grid.project-image-grid .project-card-note .project-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .55) 24%, rgba(0, 0, 0, .15) 48%, transparent 70%);
}
.project-grid.project-image-grid .project-note-caption {
    position: absolute;
    inset: auto 18px 16px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.project-grid.project-image-grid .project-card-note .project-note-caption .project-name,
.project-grid.project-image-grid .project-card-note .project-note-caption p {
    position: static;
    margin: 0;
    padding: 0;
    color: #fff;
    transform: none;
}
.project-grid.project-image-grid .project-card-note .project-note-caption .project-name {
    line-height: 1.3;
}
.project-grid.project-image-grid .project-card-note .project-note-caption p {
    display: block;
    line-height: 1.4;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}
@media (max-width: 620px) {
    .project-grid.project-image-grid .project-note-caption {
        inset: auto 14px 13px;
    }
    .project-grid.project-image-grid .project-card-note .project-note-caption .project-name {
        font-size: 14px;
    }
    .project-grid.project-image-grid .project-card-note .project-note-caption p {
        font-size: 10px;
        line-height: 1.35;
    }
}

/* The featured cover keeps its title and summary beneath the image. */
.project-grid.project-image-grid .project-card-featured {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: visible;
    background: transparent;
}
.project-grid.project-image-grid .project-card-featured .project-image {
    position: relative;
    inset: auto;
    min-height: 0;
    overflow: hidden;
    border-radius: 2px;
}
.project-grid.project-image-grid .project-card-featured .project-feature-overlay,
.project-grid.project-image-grid .project-card-featured .project-feature-copy {
    display: none;
}
.project-grid.project-image-grid .project-card-featured .project-feature-caption {
    padding: 12px 2px 0;
    color: #222;
}
.project-grid.project-image-grid .project-card-featured .project-feature-caption .project-name {
    margin: 0;
    color: #222;
    font-size: clamp(17px, 1.4vw, 21px);
    font-weight: 400;
    line-height: 1.35;
}
.project-grid.project-image-grid .project-card-featured .project-feature-caption p {
    display: block;
    position: static;
    max-width: 42em;
    margin: 8px 0 0;
    color: #777;
    font-size: clamp(12px, .95vw, 15px);
    line-height: 1.55;
    opacity: 1;
    transform: none;
}
.project-grid.project-image-grid .project-card-featured .project-image > .project-view-indicator {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    display: grid;
    place-items: center;
    z-index: 5;
    background: transparent;
    opacity: 0;
    transform: none;
    transition: opacity .22s ease;
    pointer-events: none;
}
.project-grid.project-image-grid .project-card-featured .project-image > .project-view-indicator svg {
    width: 44px;
    height: 44px;
    color: #222;
    transform: scale(.94);
    transition: transform .22s ease;
}
.project-grid.project-image-grid .project-card-featured:hover .project-image > .project-view-indicator,
.project-grid.project-image-grid .project-card-featured:focus-visible .project-image > .project-view-indicator {
    opacity: 1;
}
.project-grid.project-image-grid .project-card-featured:hover .project-image > .project-view-indicator svg,
.project-grid.project-image-grid .project-card-featured:focus-visible .project-image > .project-view-indicator svg {
    transform: scale(1);
}

/* A smaller gallery gives the projects a more considered, compact scale. */
@media (min-width: 901px) {
    .project-grid.project-image-grid {
        width: min(1120px, calc(100% - 16vw));
        grid-template-rows: repeat(2, clamp(190px, 17vw, 240px));
        gap: 12px;
        margin-top: 48px;
    }
    .project-grid.project-image-grid .project-card-featured .project-image {
        aspect-ratio: auto;
        height: 100%;
    }
    .project-grid.project-image-grid .project-card-featured .project-feature-caption {
        padding-top: 12px;
    }
    .project-grid.project-image-grid .project-card-note .project-name,
    .project-grid.project-image-grid .project-card-featured .project-feature-caption .project-name {
        font-size: 17px;
        line-height: 1.35;
    }
    .project-grid.project-image-grid .project-card-note p,
    .project-grid.project-image-grid .project-card-featured .project-feature-caption p {
        font-size: 12px;
        line-height: 1.5;
    }
    .project-grid.project-image-grid .project-note-caption {
        inset: auto 16px 16px;
    }
}

/* The featured project uses the same image-overlay treatment as the other cards. */
.project-grid.project-image-grid .project-card-featured {
    display: block;
    overflow: hidden;
    background: #e8e8e4;
}
.project-grid.project-image-grid .project-card-featured .project-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}
.project-grid.project-image-grid .project-card-featured .project-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .55) 24%, rgba(0, 0, 0, .15) 48%, transparent 70%);
}
.project-grid.project-image-grid .project-card-featured .project-feature-caption {
    position: absolute;
    inset: auto 20px 20px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    color: #fff;
}
.project-grid.project-image-grid .project-card-featured .project-feature-caption .project-name,
.project-grid.project-image-grid .project-card-featured .project-feature-caption p {
    margin: 0;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}
@media (max-width: 620px) {
    .project-grid.project-image-grid .project-card-featured .project-feature-caption {
        inset: auto 16px 16px;
    }
}

/* Stronger typography for the larger featured cover. */
.project-grid.project-image-grid .project-card-featured .project-feature-caption .project-name {
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 700;
    line-height: 1.3;
}
.project-grid.project-image-grid .project-card-featured .project-feature-caption p {
    font-size: clamp(13px, 1.1vw, 15px);
    line-height: 1.55;
}

.project-grid.project-image-grid .project-card-note .project-name {
    font-weight: 700;
}

/* Bring the project introduction closer to the preceding experience section. */
.about.section {
    padding-bottom: 48px;
}
.projects.section {
    padding-top: 40px;
}
@media (max-width: 760px) {
    .about.section { padding-bottom: 32px; }
    .projects.section { padding-top: 32px; }
}

/* Compact two-column experience index, with every detail kept visible. */
.about .experience {
    padding: 40px 0 36px;
}
.experience .experience-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
    border: 0;
}
.experience-list .experience-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    grid-template-areas: "logo company period" "logo position position";
    align-content: start;
    align-items: center;
    gap: 6px 12px;
    padding: 18px 0;
    border-top: 0;
    border-bottom: 1px solid #e5e5df;
}
.experience-list .experience-row .company-info {
    display: contents;
}
.experience-list .experience-row .company-info .company-logo {
    grid-area: logo;
    width: 32px;
    height: 32px;
    align-self: start;
    margin-top: 2px;
}
.experience-list .experience-row .company-info .company {
    grid-area: company;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.02em;
}
.experience-list .experience-row .company-info .position {
    grid-area: position;
    font-size: 12px;
    line-height: 1.6;
    color: #898982;
    white-space: normal;
}
.experience-list .experience-row .period {
    grid-area: period;
    align-self: center;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0;
    color: #a0a099;
}
@media (max-width: 760px) {
    .experience .experience-list {
        grid-template-columns: minmax(0, 1fr);
    }
    .about .experience { padding: 28px 0; }
    .experience-list .experience-row { padding: 16px 0; gap: 6px 10px; }
    .experience-list .experience-row .period { font-size: 10px; }
}

/* A compact chronological timeline makes the career sequence explicit. */
.experience .experience-list {
    display: block;
}
.experience-list .experience-row {
    position: relative;
    grid-template-columns: 148px 32px minmax(0, 1fr);
    grid-template-areas: "period logo company" "period logo position";
    gap: 5px 18px;
    padding: 16px 0;
    border: 0;
}
.experience-list .experience-row::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 181px;
    width: 1px;
    background: #e8e8e3;
    pointer-events: none;
}
.experience-list .experience-row:first-child::before { top: 32px; }
.experience-list .experience-row:last-child::before { bottom: calc(100% - 32px); }
.experience-list .experience-row .company-info .company-logo {
    position: relative;
    z-index: 1;
    background: #fff;
    box-shadow: 0 0 0 6px #fff;
}
.experience-list .experience-row .period {
    align-self: start;
    justify-self: start;
    text-align: left;
    margin-top: 4px;
}
@media (max-width: 760px) {
    .experience-list .experience-row {
        grid-template-columns: 110px 28px minmax(0, 1fr);
        gap: 5px 12px;
        padding: 14px 0;
    }
    .experience-list .experience-row::before { left: 135px; }
    .experience-list .experience-row .company-info .company-logo {
        width: 28px;
        height: 28px;
    }
    .experience-list .experience-row .company-info .company { font-size: 15px; }
    .experience-list .experience-row .company-info .position { font-size: 11px; }
    .experience-list .experience-row .period { font-size: 9px; }
}

/* Align the about content and career timeline with the project gallery edges. */
.about.section {
    width: min(1120px, calc(100% - 16vw));
    margin-inline: auto;
}
@media (max-width: 900px) {
    .about.section { width: calc(100% - 48px); }
}
@media (max-width: 620px) {
    .about.section { width: calc(100% - 40px); }
}

.about-role-nowrap {
    white-space: nowrap;
}

/* Keep the introduction copy inside its column beside the portrait. */
.about-copy { min-width: 0; }
.about-text { max-width: 100%; overflow-wrap: break-word; }
.about-career-line { white-space: normal; }

.life-coverflow-photo { will-change: transform; }

/* Lower the introductory heading without shifting the surrounding content. */
.about-lead {
    position: relative;
    top: 24px;
}

.hero .hero-mark .logo-line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: logo-centerline-draw 1.15s cubic-bezier(.4, 0, .2, 1) both;
}
.hero .hero-mark .logo-line-x1 { animation-delay: .15s; }
.hero .hero-mark .logo-line-x2 { animation-delay: .45s; }
.hero .hero-mark .logo-line-u { animation-delay: 1s; }
@media (prefers-reduced-motion: reduce) {
    .hero .hero-mark .logo-solid { animation: none; opacity: 1; }
    .hero .hero-mark .logo-writing { animation: none; display: none; }
    .hero .role { animation: none; opacity: 1; }
}

/* Three consecutive strokes: each starts exactly when the previous one ends. */
@keyframes logo-sequential-draw {
    from { stroke-dashoffset: 1; opacity: 1; }
    to { stroke-dashoffset: 0; opacity: 1; }
}
.hero .hero-mark .logo-line {
    animation-name: logo-sequential-draw;
    animation-timing-function: cubic-bezier(.22, .55, .35, 1);
    animation-fill-mode: both;
}
.hero .hero-mark .logo-line-x1 {
    animation-duration: .85s;
    animation-delay: .15s;
}
.hero .hero-mark .logo-line-x2 {
    animation-duration: .85s;
    animation-delay: 1s;
}
.hero .hero-mark .logo-line-u {
    animation-duration: 1.05s;
    animation-delay: 1.85s;
}
.hero .hero-mark .logo-solid {
    animation: logo-solid-reveal .25s ease-out 2.9s forwards;
}
.hero .hero-mark .logo-writing {
    animation: logo-writing-handoff .25s ease-out 2.9s forwards;
}
.hero .role {
    animation: role-appear .85s ease-out 3.15s forwards;
}
@media (prefers-reduced-motion: reduce) {
    .hero .hero-mark .logo-line { animation: none; }
    .hero .hero-mark .logo-solid { animation: none; opacity: 1; }
    .hero .hero-mark .logo-writing { animation: none; display: none; }
    .hero .role { animation: none; opacity: 1; }
}

/* A brisk continuous draw, then the role converges around its middle character. */
.hero .hero-mark .logo-line-x1 { animation-duration: .38s; animation-delay: .08s; }
.hero .hero-mark .logo-line-x2 { animation-duration: .38s; animation-delay: .46s; }
.hero .hero-mark .logo-line-u { animation-duration: .46s; animation-delay: .84s; }
.hero .hero-mark .logo-solid { animation: logo-solid-reveal .15s ease-out 1.3s forwards; }
.hero .hero-mark .logo-writing { animation: logo-writing-handoff .15s ease-out 1.3s forwards; }
.hero .role { animation: role-appear .6s ease-out 1.45s both; }
.hero .role-character {
    display: inline-block;
    animation: role-converge .65s cubic-bezier(.2, .7, .25, 1) 1.45s both;
}
@keyframes role-converge {
    from { transform: translateX(var(--role-offset)); }
    to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .hero .hero-mark .logo-line, .hero .role-character { animation: none; }
    .hero .hero-mark .logo-solid { animation: none; opacity: 1; }
    .hero .hero-mark .logo-writing { animation: none; display: none; }
    .hero .role { animation: none; opacity: 1; }
}

/* A measured entrance with continuous strokes and a softer typographic finish. */
.hero .hero-mark .logo-line-x1 { animation-duration: .56s; animation-delay: .12s; }
.hero .hero-mark .logo-line-x2 { animation-duration: .56s; animation-delay: .68s; }
.hero .hero-mark .logo-line-u { animation-duration: .68s; animation-delay: 1.24s; }
.hero .hero-mark .logo-solid { animation: logo-solid-reveal .22s ease-out 1.92s forwards; }
.hero .hero-mark .logo-writing { animation: logo-writing-handoff .22s ease-out 1.92s forwards; }
.hero .role { animation: role-appear 1.15s cubic-bezier(.2, .5, .3, 1) 2.14s both; }
.hero .role-character {
    animation: role-converge 1.2s cubic-bezier(.2, .6, .3, 1) 2.14s both;
}
@media (prefers-reduced-motion: reduce) {
    .hero .hero-mark .logo-line, .hero .role-character { animation: none; }
    .hero .hero-mark .logo-solid { animation: none; opacity: 1; }
    .hero .hero-mark .logo-writing { animation: none; display: none; }
    .hero .role { animation: none; opacity: 1; }
}

/* Draw both crossing strokes together, then continue directly into the U. */
.hero .hero-mark .logo-line-x1,
.hero .hero-mark .logo-line-x2 {
    animation-duration: .95s;
    animation-delay: .12s;
}
.hero .hero-mark .logo-line-u {
    animation-duration: .85s;
    animation-delay: 1.07s;
}

/* Carry drawing velocity through the X-to-U handoff without easing to a stop. */
.hero .hero-mark .logo-line-x1,
.hero .hero-mark .logo-line-x2 {
    animation-timing-function: cubic-bezier(.28, .12, .62, .68);
}
.hero .hero-mark .logo-line-u {
    animation-timing-function: cubic-bezier(.28, .3, .35, 1);
}

/* Chapters gently trade places as the viewport crosses their boundaries. */
main > section.chapter-transition {
    translate: 0 var(--chapter-y, 0px);
    scale: var(--chapter-scale, 1);
    opacity: var(--chapter-opacity, 1);
    transform-origin: center top;
}
@media (prefers-reduced-motion: reduce) {
    main > section.chapter-transition { translate: none; scale: none; opacity: 1; }
}

.hero .role {
    letter-spacing: .12em;
}

/* A compact editorial navigation strip for the photograph reel. */
.life-coverflow-footer {
    width: min(520px, calc(100% - 48px));
    margin: 24px auto 0;
    padding: 16px 0 0;
    border-top: 1px solid #e5e5df;
    gap: 16px;
    justify-content: space-between;
}
.life-coverflow-footer > div {
    flex: 1;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
    min-width: 0;
}
.life-coverflow-caption {
    width: auto;
    max-width: 270px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .04em;
    color: #484842;
}
.life-coverflow-counter {
    display: block;
    margin: 0;
    flex-shrink: 0;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .08em;
    color: #a1a199;
}
.life-coverflow-footer button {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: #68685e;
    font-size: 18px;
    line-height: 1;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.life-coverflow-footer button:hover {
    background: #f5f5f1;
    border-color: #e5e5df;
    color: #20201d;
}
@media (max-width: 620px) {
    .life-coverflow-footer { margin-top: 18px; gap: 8px; }
    .life-coverflow-footer > div { gap: 8px; }
    .life-coverflow-caption { max-width: 42vw; font-size: 11px; }
    .life-coverflow-counter { font-size: 9px; }
}

/* A tactile photo timeline, with fine ticks and a quiet circular playhead. */
.life-coverflow-footer {
    width: min(560px, calc(100% - 48px));
    display: grid;
    grid-template-columns: 32px minmax(0,1fr) 32px;
    gap: 12px 16px;
    border-top: 0;
    padding-top: 8px;
}
.life-coverflow-footer > div:not(.photo-timeline-track) { grid-column: 2; grid-row: 1; }
.life-coverflow-footer .life-coverflow-prev { grid-column: 1; grid-row: 1; }
.life-coverflow-footer .life-coverflow-next { grid-column: 3; grid-row: 1; }
.life-coverflow-footer > .photo-timeline-track {
    grid-column: 1 / -1;
    grid-row: 2;
    position: relative;
    display: block;
    height: 32px;
    background: repeating-linear-gradient(to right, #d9d9d1 0 1px, transparent 1px 2.0408%);
    background-size: 100% 7px;
    background-position: center;
    background-repeat: no-repeat;
}
.photo-timeline {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 32px;
    margin: 0;
    padding: 0;
    background: transparent;
    cursor: ew-resize;
    touch-action: pan-y;
}
.photo-timeline::-webkit-slider-runnable-track { height: 1px; background: #deded6; }
.photo-timeline::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    margin-top: -6px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #454940;
    box-shadow: 0 0 0 1px #b8bcb1, 0 2px 6px #00000012;
    transition: box-shadow .2s ease;
}
.photo-timeline::-moz-range-track { height: 1px; background: #deded6; }
.photo-timeline::-moz-range-thumb { width: 7px; height: 7px; border: 3px solid #fff; border-radius: 50%; background: #454940; box-shadow: 0 0 0 1px #b8bcb1; }
.photo-timeline:focus-visible { outline: 1px solid #888d80; outline-offset: 3px; border-radius: 3px; }
.photo-timeline:hover::-webkit-slider-thumb,
.photo-timeline:active::-webkit-slider-thumb { box-shadow: 0 0 0 5px #45494012, 0 0 0 1px #888d80; }

/* Fine instrument-style ticks and a slim brass-toned playhead. */
.life-coverflow-footer {
    width: min(520px, calc(100% - 48px));
    row-gap: 14px;
}
.life-coverflow-footer > .photo-timeline-track {
    height: 52px;
    background: none;
    isolation: isolate;
}
.photo-timeline-ticks {
    position: absolute;
    inset: 7px 6px auto;
    display: flex;
    align-items: start;
    justify-content: space-between;
    height: 34px;
    pointer-events: none;
}
.photo-timeline-ticks > span {
    position: relative;
    width: 1px;
    height: 5px;
    background: #ddded7;
}
.photo-timeline-ticks > span:nth-child(5n) { height: 9px; background: #c5c8bd; }
.photo-timeline-ticks > span.is-major { height: 13px; background: #a9aea0; }
.photo-timeline-ticks > .is-major::after {
    content: attr(data-label);
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
    color: #a5a89e;
}
.photo-timeline { position: relative; z-index: 1; height: 32px; }
.photo-timeline::-webkit-slider-runnable-track { height: 1px; background: transparent; }
.photo-timeline::-webkit-slider-thumb {
    width: 3px;
    height: 25px;
    margin-top: -17px;
    border: 0;
    border-radius: 2px;
    background: #636c58;
    box-shadow: 0 0 0 3px #ffffffdc;
}
.photo-timeline:hover::-webkit-slider-thumb,
.photo-timeline:active::-webkit-slider-thumb {
    background: #343e2c;
    box-shadow: 0 0 0 4px #ffffffeb, 0 0 0 7px #636c580d;
}
.photo-timeline::-moz-range-track { background: transparent; }
.photo-timeline::-moz-range-thumb { width: 3px; height: 25px; border: 0; border-radius: 2px; background: #636c58; box-shadow: 0 0 0 3px #ffffffdc; }
.photo-timeline:focus-visible { outline: 1px dashed #bfc4b7; outline-offset: 2px; }
.life-coverflow-counter { letter-spacing: .1em; color: #a0a497; }

/* Contact closes the page with a quiet side-by-side photographic composition. */
.contact.section {
    width: min(1120px, calc(100% - 16vw));
    margin: 40px auto 0;
    padding: 48px 0 0;
    border-top: 1px solid #e5e5df;
}
.contact .contact-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(32px, 4.5vw, 64px);
    min-height: 0;
    padding: 0;
    background: #fff;
    overflow: visible;
}
.contact .contact-panel::before { display: none; }
.contact .contact-panel .contact-photo {
    position: static;
    width: 100%;
    height: 100%;
    min-height: 440px;
    aspect-ratio: 1.25;
    object-fit: cover;
    object-position: center;
    filter: grayscale(1);
}
.contact .contact-copy {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 56px;
    width: 100%;
    margin: 0;
    padding: 32px 0 20px;
    color: #222;
}
.contact h2 {
    color: #20201e;
    font-size: clamp(38px, 4.1vw, 60px);
    line-height: 1.12;
    letter-spacing: -.055em;
    font-weight: 300;
    margin: 0;
}
.contact .contact-sub { color: #92928b; font-size: 12px; line-height: 1.8; margin-top: 24px; }
.contact .contact-kicker,
.contact .contact-role { color: #999990; }
.contact .contact-link { color: #44443e; border-bottom-color: #babbb2; font-size: clamp(14px, 1.4vw, 20px); }
.contact .contact-social-icon { color: #77796e; }
.contact .contact-social-icon svg,
.contact .contact-social-icon .contact-brand-icon,
.contact .contact-social-icon .email-icon { color: #77796e; fill: currentColor; }
.contact .contact-socials { justify-content: flex-start; }
.footer {
    width: min(1120px, calc(100% - 16vw));
    margin: 44px auto 0;
    padding: 20px 0 26px;
    border-top: 1px solid #e5e5df;
}
@media (max-width: 900px) {
    .contact.section, .footer { width: calc(100% - 48px); }
}
@media (max-width: 760px) {
    .contact .contact-panel { grid-template-columns: minmax(0,1fr); gap: 28px; }
    .contact .contact-panel .contact-photo { min-height: 0; height: auto; aspect-ratio: 1.35; }
    .contact .contact-copy { grid-column: 1; padding: 0; gap: 36px; }
    .contact h2 { font-size: clamp(40px, 8vw, 58px); }
}
@media (max-width: 620px) {
    .contact.section, .footer { width: calc(100% - 40px); }
}

/* Full-width charcoal background for the contact section, keeping content aligned. */
.contact.section {
    isolation: isolate;
    background: #333333;
    border-top: 0;
    padding-bottom: 40px;
}
.contact.section::before {
    content: "";
    position: absolute;
    inset: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: #333333;
    z-index: -1;
    pointer-events: none;
}
.contact .contact-panel { background: transparent; }
.contact h2, .contact .contact-copy, .contact .contact-link { color: #fff; }
.contact .contact-sub,
.contact .contact-kicker,
.contact .contact-role { color: #dededb; }
.contact .contact-link { border-bottom-color: #a8a8a5; }
.contact .contact-social-icon,
.contact .contact-social-icon svg,
.contact .contact-social-icon .contact-brand-icon,
.contact .contact-social-icon .email-icon { color: #eeeeeb; fill: currentColor; }

.contact-xiaohongshu { position: relative; }
.xiaohongshu-tooltip {
    position: absolute;
    bottom: calc(100% + 14px);
    left: 50%;
    transform: translate(-50%, 4px);
    width: max-content;
    max-width: 240px;
    padding: 12px 16px;
    border: 1px solid #e8e8e2;
    border-radius: 8px;
    background: #fff;
    color: #41413b;
    box-shadow: 0 6px 24px #00000014;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 10;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.xiaohongshu-tooltip::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: calc(50% - 4px);
    width: 8px;
    height: 8px;
    background: #fff;
    border-right: 1px solid #e8e8e2;
    border-bottom: 1px solid #e8e8e2;
    transform: rotate(45deg);
}
.contact-xiaohongshu:hover .xiaohongshu-tooltip,
.contact-xiaohongshu:focus-visible .xiaohongshu-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* A generous note with a quiet editorial accent. */
.xiaohongshu-tooltip {
    width: 280px;
    max-width: min(280px, calc(100vw - 48px));
    padding: 30px 26px 26px;
    border: 1px solid #e7e4da;
    border-radius: 12px;
    background: #faf8f1;
    color: #37382f;
    box-shadow: 0 16px 44px #00000024;
    font-size: 20px;
    line-height: 1.7;
    letter-spacing: .025em;
    text-align: left;
    text-wrap: balance;
    bottom: calc(100% + 20px);
}
.xiaohongshu-tooltip::before {
    content: "";
    display: block;
    width: 24px;
    height: 3px;
    margin-bottom: 18px;
    border-radius: 2px;
    background: #959d7f;
}
.xiaohongshu-tooltip::after {
    background: #faf8f1;
    border-color: #e7e4da;
}

.xiaohongshu-tooltip::before { display: none; }
.note-doodle { display: block; width: 88px; height: 38px; margin: -4px 0 14px; color: #899474; }
.note-doodle-line { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.note-doodle-dot { fill: currentColor; opacity: 0; }
.contact-xiaohongshu:hover .note-doodle-line,
.contact-xiaohongshu:focus-visible .note-doodle-line { animation: note-line-draw 1.1s cubic-bezier(.3,.1,.3,1) .1s both; }
.contact-xiaohongshu:hover .note-doodle-dot,
.contact-xiaohongshu:focus-visible .note-doodle-dot { animation: role-appear .3s ease 1.05s both; }
@keyframes note-line-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
    .contact-xiaohongshu .note-doodle-line { animation: none; stroke-dashoffset: 0; }
    .contact-xiaohongshu .note-doodle-dot { animation: none; opacity: 1; }
}
.contact .contact-xiaohongshu svg.note-doodle { width: 88px; height: 38px; color: #899474; fill: none; }
.contact .note-doodle .note-doodle-line { fill: none; }

.xiaohongshu-tooltip {
    box-sizing: border-box;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.xiaohongshu-tooltip .note-doodle { flex-shrink: 0; }

/* Match the QR popover footprint with a compact, bold typographic note. */
.xiaohongshu-tooltip {
    width: 164px;
    height: 164px;
    max-width: 164px;
    padding: 18px;
    border-radius: 14px;
    bottom: calc(100% + 13px);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.65;
    letter-spacing: .02em;
    gap: 8px;
}
.contact .contact-xiaohongshu svg.note-doodle {
    width: 62px;
    height: 27px;
    margin: 0;
}

#others .interest-entrance {
    opacity: 0;
    translate: 0 22px;
    transition: opacity .75s ease, translate .9s cubic-bezier(.22,1,.36,1);
    transition-delay: var(--interest-delay, 0ms);
}
#others.interest-entered .interest-entrance { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
    #others .interest-entrance { opacity: 1; translate: none; transition: none; }
}

/* Tighten the gap between Projects and Off Hours. */
.projects.section { padding-bottom: 110px; }
@media (max-width: 760px) {
    .projects.section { padding-bottom: 48px; }
}

.projects.section {
    background-color: #f5f5f3;
}

/* Soft gray edges fade into a clean white project canvas. */
.projects.section {
    background: linear-gradient(to bottom, #f3f3f3 0, #fafafa 48px, #fff 140px, #fff calc(100% - 100px), #fafafa calc(100% - 36px), #f3f3f3 100%);
}

/* Curved photographic ribbon: the sides fall away from the central image. */
.life-coverflow-stage {
    height: clamp(390px, 38vw, 600px);
    margin-top: 44px;
    perspective: none;
    overflow: hidden;
}
.life-coverflow-scene { transform-style: flat; }
.life-coverflow-photo {
    top: 38%;
    width: clamp(175px, 17vw, 290px);
    aspect-ratio: 3 / 4;
    overflow: visible;
    border-radius: 4px;
    background: transparent;
    box-shadow: none;
    transform-origin: center center;
}
.life-coverflow-photo img {
    border-radius: 4px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    box-shadow: 0 6px 20px #0000000a;
}
.curved-photo-caption {
    display: block;
    margin-top: 12px;
    padding-inline: 2px;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .025em;
    text-align: left;
    color: #818178;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.life-coverflow-footer { margin-top: 0; }
@media (max-width: 620px) {
    .life-coverflow-stage { height: 390px; margin-top: 32px; }
    .life-coverflow-photo { width: 46vw; top: 39%; }
    .curved-photo-caption { font-size: 9px; margin-top: 9px; }
}

/* An edge-to-edge contact sheet with a floating, frosted title card. */
.life-coverflow.photo-canvas { position: relative; padding: 0; margin: 0; background: #fafaf8; isolation: isolate; }
.photo-canvas .life-coverflow-stage { height: clamp(580px, 78vh, 900px); min-height: 580px; max-height: none; margin: 0; touch-action: none; perspective: none; }
.photo-canvas .life-coverflow-scene { inset: 0; pointer-events: none; }
.canvas-photo { position: absolute; top: 0; left: 0; overflow: hidden; border-radius: 7px; pointer-events: auto; background: #e8e8e2; will-change: transform; }
.canvas-photo img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: scale .6s cubic-bezier(.22,1,.36,1); }
@media (hover: hover) { .canvas-photo:hover img { scale: 1.045; } }
.photo-canvas::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to bottom,#fff 0%,transparent 18%,transparent 70%,#ffffffb8 100%); box-shadow: inset 55px 0 65px -50px #fff, inset -55px 0 65px -50px #fff; }
.photo-canvas .life-coverflow-head {
    position: absolute; z-index: 3; bottom: 36px; left: 50%; transform: translateX(-50%);
    width: max-content; max-width: calc(100% - 40px); padding: 22px 40px 18px;
    border: 1px solid #ffffffc9; border-radius: 14px; background: #ffffffd9;
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 8px 32px #0000000c; pointer-events: none;
}
.photo-canvas .life-coverflow-head h2 { margin: 0; }
.photo-canvas .life-coverflow-head p { margin: 10px 0 0; font-size: 12px; line-height: 1.6; }
.canvas-drag-hint { display: block; margin-top: 14px; font-size: 10px; letter-spacing: .12em; color: #989b90; }
.photo-canvas .life-coverflow-footer { display: none; }
@media (max-width: 620px) {
    .photo-canvas .life-coverflow-stage { height: 68vh; min-height: 500px; }
    .photo-canvas .life-coverflow-head { bottom: 24px; padding: 20px 30px 16px; }
}
@media (prefers-reduced-motion: reduce) { .canvas-photo img { transition: none; } }

/* Local shadow fades away around the lamp to suggest a light switching on. */
.contact-lamp-scene { position: relative; min-width: 0; overflow: hidden; }
.contact .contact-panel .contact-lamp-scene .contact-photo {
    display: block;
    width: 100%;
    height: 100%;
    filter: grayscale(1) brightness(.72);
    transition: filter 1.6s cubic-bezier(.22,.65,.3,1) .15s;
}
.contact-lamp-scene::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 43% 44% at 63% 52%, rgba(20,20,20,.92) 0%, rgba(25,25,25,.76) 24%, rgba(30,30,30,.35) 58%, transparent 100%);
    opacity: 1;
    transition: opacity 1.7s cubic-bezier(.22,.65,.3,1) .15s;
}
.contact.lamp-is-on .contact-lamp-scene::after { opacity: 0; }
.contact.lamp-is-on .contact-panel .contact-lamp-scene .contact-photo { filter: grayscale(1) brightness(1); }
@media (prefers-reduced-motion: reduce) {
    .contact .contact-panel .contact-lamp-scene .contact-photo { filter: grayscale(1); transition: none; }
    .contact-lamp-scene::after { display: none; }
}

/* Restore the original centered heading above the photo canvas. */
.life-coverflow.photo-canvas { padding-top: clamp(60px, 7vw, 110px); }
.photo-canvas .life-coverflow-head {
    position: relative;
    inset: auto;
    transform: none;
    width: auto;
    max-width: none;
    padding: 0 24px;
    margin: 0 0 40px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.photo-canvas .life-coverflow-head p { margin-top: 25px; font-size: clamp(13px, 1.1vw, 18px); line-height: 1.8; }
.photo-canvas .canvas-drag-hint { display: none; }
.photo-canvas::after { display: none; }
.photo-canvas .life-coverflow-stage {
    mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 88%, transparent);
}

.photo-canvas .life-coverflow-stage {
    mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.life-coverflow.photo-canvas { padding-top: 0; }

/* Match the reference's compact canvas viewport rather than growing with the screen. */
.photo-canvas .life-coverflow-stage {
    height: 640px;
    min-height: 0;
    max-height: none;
}
@media (max-width: 620px) {
    .photo-canvas .life-coverflow-stage { height: 520px; }
}

/* Taller reference-proportioned contact sheet with eight portrait columns. */
.photo-canvas .life-coverflow-stage {
    height: clamp(720px, 47vw, 1000px);
    min-height: 720px;
}
.canvas-photo { border-radius: 10px; }
@media (max-width: 620px) {
    .photo-canvas .life-coverflow-stage { height: 640px; min-height: 640px; }
}

/* A soft perimeter vignette leaves the central photographs clear. */
.life-coverflow.photo-canvas { background: #fff; }
.photo-canvas .life-coverflow-stage {
    mask-image: radial-gradient(ellipse 76% 82% at 50% 50%, #000 46%, rgba(0,0,0,.96) 58%, rgba(0,0,0,.72) 73%, rgba(0,0,0,.3) 89%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 76% 82% at 50% 50%, #000 46%, rgba(0,0,0,.96) 58%, rgba(0,0,0,.72) 73%, rgba(0,0,0,.3) 89%, transparent 100%);
}

#others + .life-coverflow.photo-canvas {
    margin-top: 30px;
}

/* A shallow white wash softens the canvas entrance without hiding the photos. */
.photo-canvas::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to bottom, #fff 0%, rgba(255,255,255,.72) 20%, rgba(255,255,255,.28) 55%, rgba(255,255,255,.06) 82%, transparent 100%);
}

/* One continuous vignette, matching the reference's soft elliptical falloff. */
.photo-canvas .life-coverflow-stage {
    mask-image: none;
    -webkit-mask-image: none;
}
.photo-canvas::before { display: none; }
.photo-canvas::after {
    display: block;
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    box-shadow: none;
    background: radial-gradient(ellipse at center,
        rgba(255,255,255,0) 32%,
        rgba(255,255,255,.04) 46%,
        rgba(255,255,255,.18) 60%,
        rgba(255,255,255,.42) 74%,
        rgba(255,255,255,.72) 88%,
        #fff 100%);
}

/* Dark gallery canvas with a matching soft perimeter vignette. */
.life-coverflow.photo-canvas { background: #0a0a0a; }
.photo-canvas .canvas-photo { background: #171717; }
.photo-canvas::after {
    background: radial-gradient(ellipse at center,
        rgba(10,10,10,0) 32%,
        rgba(10,10,10,.04) 46%,
        rgba(10,10,10,.18) 60%,
        rgba(10,10,10,.42) 74%,
        rgba(10,10,10,.72) 88%,
        #0a0a0a 100%);
}

/* Keep both gallery joins dark while preserving their spacing. */
#others + .life-coverflow.photo-canvas {
    margin-top: 0;
    padding-top: 30px;
}
.life-coverflow.photo-canvas {
    padding-bottom: 40px;
    background: #0a0a0a;
}
.life-coverflow.photo-canvas + .contact.section { margin-top: 0; }

/* Eliminate pale seams at the video-to-canvas join. */
#others.others.section.illustrated-interests {
    border: 0;
    box-shadow: none;
    margin-bottom: 0;
    background: #0a0a0a;
}
#others .interest-video-background { background: #0a0a0a; }
#others + .life-coverflow.photo-canvas {
    border: 0;
    box-shadow: none;
    margin-top: -1px;
    background: #0a0a0a;
}

.photo-canvas .life-coverflow-stage,
.photo-canvas .life-coverflow-stage:focus,
.photo-canvas .life-coverflow-stage:focus-visible {
    outline: none;
    border: 0;
    box-shadow: none;
}

.photo-canvas .life-coverflow-head {
    margin: 0;
    padding: 28px 24px 36px;
    color: #f3f3ef;
}
.photo-canvas .life-coverflow-head h2 { color: #f3f3ef; }
.photo-canvas .life-coverflow-head p { color: #a6a69e; margin-top: 16px; }

/* Give both chapter headings the same distance from their section's top edge. */
#others + .life-coverflow.photo-canvas { padding-top: 0; }
.photo-canvas .life-coverflow-head {
    padding-top: clamp(70px, 8vw, 150px);
}
@media (max-width: 760px) {
    .photo-canvas .life-coverflow-head { padding-top: 60px; }
}

.photo-canvas .life-coverflow-head {
    padding-bottom: clamp(70px, 8vw, 150px);
}
@media (max-width: 760px) {
    .photo-canvas .life-coverflow-head { padding-bottom: 60px; }
}

.site-footer { background: #282828; color: #a6a6a0; padding: 26px 0; }
.site-footer-inner { width: min(1120px, calc(100% - 16vw)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.site-footer a { color: inherit; text-decoration: none; transition: color .2s ease; }
.site-footer a:hover { color: #fff; }
.site-footer-brand { display: inline-flex; align-items: center; gap: 14px; font-size: 9px; letter-spacing: .08em; }
.site-footer-brand img { width: 17px; height: 30px; filter: brightness(0) invert(.8); }
.site-footer-nav { display: flex; align-items: center; gap: 22px; font-size: 11px; }
.site-footer-top { display: inline-flex; gap: 14px; align-items: center; font-size: 11px; }
.site-footer-top > span:last-child { font-size: 18px; }
.site-footer a:focus-visible { outline: 1px solid #a6a6a0; outline-offset: 5px; }
@media (max-width: 900px) { .site-footer-inner { width: calc(100% - 48px); flex-wrap: wrap; } }
@media (max-width: 620px) {
    .site-footer-inner { width: calc(100% - 40px); gap: 22px; }
    .site-footer-brand { flex: 1; }
    .site-footer-nav { order: 3; width: 100%; justify-content: space-between; gap: 14px; padding-top: 18px; border-top: 1px solid #ffffff12; }
}

/* Consistent spacing between homepage section headings and their descriptions. */
.projects .project-head h2,
.others.section.illustrated-interests > .section-title,
.photo-canvas .life-coverflow-head h2,
.contact .contact-message h2 {
    margin-bottom: 0;
}
.projects .project-head .project-intro,
.others.section.illustrated-interests > .off-hours-subtitle,
.photo-canvas .life-coverflow-head p,
.contact .contact-message .contact-sub {
    margin-top: 16px;
}

/* Match the Projects description-to-gallery spacing at each breakpoint. */
.photo-canvas .life-coverflow-head { padding-bottom: clamp(54px, 7vw, 108px); }
@media (min-width: 901px) {
    .photo-canvas .life-coverflow-head { padding-bottom: 48px; }
}
@media (max-width: 620px) {
    .photo-canvas .life-coverflow-head { padding-bottom: 42px; }
}

/* The video stays in place while its foreground scrolls into the photo wall. */
#others .interest-video-background { will-change: transform; }
#life-photos { position: relative; z-index: 1; }

/* Replace the contact section's flat background and standalone photo with the supplied wide image. */
.contact.section::before {
    background: #333 url("assets/contact-studio-wide.png") center center / cover no-repeat;
}
.contact .contact-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.contact .contact-copy { grid-column: 2; }
@media (max-width: 760px) {
    .contact .contact-panel { grid-template-columns: minmax(0, 1fr); }
    .contact .contact-copy { grid-column: 1; }
}
@media (min-width: 761px) {
    .contact .contact-copy { transform: translateX(clamp(72px, 10vw, 220px)); }
}
@media (min-width: 761px) {
    .contact .contact-link { width: calc(100% - 10vw); }
}

@property --contact-lamp-radius {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}
.contact.section { position: relative; --contact-lamp-radius: 0px; }
.contact.section::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    pointer-events: none;
    background: radial-gradient(circle var(--contact-lamp-radius) at 36% 44%, transparent 0%, transparent 42%, rgba(0,0,0,.34) 100%);
    transition: --contact-lamp-radius 3s cubic-bezier(.2,.65,.25,1);
}
.contact.lamp-is-on { --contact-lamp-radius: 40vw; }
.contact .contact-panel { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
    .contact.section::after { transition: none; }
}
.travel-detail .implementation-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
}
.journey-map-art { border-radius: 12px; }
.japan-symbol img { display: block; width: 100%; height: 100%; object-fit: contain; }
.japan-needs > span { display: inline-flex; align-items: center; gap: 7px; }
.japan-needs .japan-needs-icon { display: inline-grid; width: 15px; height: 15px; flex: 0 0 15px; padding: 0; border: 0; background: transparent; place-items: center; color: currentColor; }
.japan-needs .japan-needs-icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.japan-needs > span > span:last-child { padding: 0; border: 0; border-radius: 0; background: transparent; }
.japan-principle { grid-template-columns: 28px minmax(0, 1fr); align-items: center; }
.japan-principle .japan-principle-icon { grid-column: 1; grid-row: 1 / span 2; display: block; width: 24px; height: 24px; }
.japan-principle .japan-principle-icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.japan-architecture-step { grid-template-columns: 23px minmax(0, 1fr); align-items: center; column-gap: 8px; }
.japan-architecture-step .japan-architecture-icon { grid-column: 1; grid-row: 1 / span 2; display: block; width: 22px; height: 22px; }
.japan-architecture-step .japan-architecture-icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.japan-architecture-step strong,.japan-architecture-step > span:last-child { grid-column: 2; }

/* Recreated Japan case-study strategy section from the supplied reference. */
.japan-strategy-panel { padding: clamp(10px, 1.4vw, 18px); }
.japan-strategy-sheet { padding: clamp(22px, 3vw, 42px); border-radius: 18px; background: #fff; }
.japan-strategy-context { display: grid; gap: 5px; margin-bottom: clamp(20px, 2.4vw, 34px); padding: 15px 18px; border: 1px solid #e4e8ef; border-radius: 10px; background: #f7f8fa; color: #485b77; }
.japan-strategy-context strong { font-size: 12px; }
.japan-strategy-context span { font-size: 13px; line-height: 1.65; font-weight: 650; }
.japan-strategy-flow { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); align-items: stretch; gap: clamp(8px, 1.4vw, 18px); }
.japan-strategy-step { min-width: 0; min-height: 250px; padding: clamp(14px, 1.7vw, 24px); border: 1px solid #e1e6ee; border-radius: 12px; background: #f7f8fa; }
.japan-strategy-card-heading { display: flex; align-items: center; gap: 12px; }
.japan-strategy-number { font-size: 26px; line-height: 1; color: #465a78; }
.japan-strategy-step h4 { margin: 0; font-size: clamp(13px, 1.15vw, 17px); line-height: 1.4; }
.japan-strategy-rule { height: 1px; margin: 15px 0 18px; background: #dfe4eb; }
.japan-strategy-subtitle { margin: 0 0 10px; color: #65758e; font-size: 12px; }
.japan-strategy-pills { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.japan-strategy-pills span { padding: 5px 10px; border: 1px solid #e1e6ee; border-radius: 999px; background: #fff; color: #4d607c; font-size: 11px; font-weight: 650; }
.japan-strategy-problem { margin: 0 0 4px; color: #c77b4f; font-size: 14px; line-height: 1.5; font-weight: 700; }
.japan-strategy-description { margin: 0 0 12px; color: #66758b; font-size: 12px; line-height: 1.65; }
.japan-strategy-badge { display: inline-block; padding: 6px 10px; border-radius: 999px; background: #fff2e9; color: #c77b4f; font-size: 11px; font-weight: 700; }
.japan-strategy-solution { margin: 0; color: #60a28e; font-size: 15px; line-height: 1.65; font-weight: 700; }
.japan-strategy-balance { display: grid; justify-items: start; gap: 12px; }
.japan-strategy-balance svg { width: 48px; height: 48px; fill: none; stroke: #7d7ca2; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.japan-strategy-balance p { margin: 0; color: #4c5f7b; font-size: 14px; line-height: 1.55; font-weight: 650; }
.japan-strategy-summary { display: grid; gap: 8px; margin-top: clamp(20px, 2.4vw, 34px); padding: 15px 18px; border-radius: 9px; background: #263b55; color: #fff; }
.japan-strategy-summary strong { color: #c7d4e7; font-size: 11px; letter-spacing: .04em; }
.japan-strategy-summary span { font-size: 14px; line-height: 1.6; font-weight: 650; }
@media (max-width: 760px) {
    .japan-strategy-sheet { padding: 18px; }
    .japan-strategy-step { min-height: 0; }
    .japan-strategy-arrow { transform: rotate(90deg); }
}
/* Align the lower service cards with the three architecture cards above. */
.japan-architecture,
.japan-task-grid {
    grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr);
    gap: 10px;
}
.japan-task-card:nth-child(1) { grid-column: 1; }
.japan-task-card:nth-child(2) { grid-column: 3; }
.japan-task-card:nth-child(3) { grid-column: 5; }
@media (max-width: 760px) {
    .japan-architecture,
    .japan-task-grid { grid-template-columns: minmax(0, 1fr); }
    .japan-task-card:nth-child(n) { grid-column: 1; }
}
.japan-strategy-panel > .japan-section-heading { margin: 0 0 clamp(12px, 1.6vw, 22px); padding: 4px 4px 0; }
.japan-narrative { margin: 0 0 clamp(24px, 3vw, 42px); }
.japan-narrative h3 { margin: 0 0 12px; color: #24354d; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.45; font-weight: 650; letter-spacing: -.02em; }
.japan-narrative p { margin: 0 0 8px; color: #748298; font-size: clamp(11px, .95vw, 14px); line-height: 1.85; }
.japan-strategy-image-section { width: 100%; margin: 0; overflow: hidden; border-radius: 18px; }
.japan-strategy-image-section img { display: block; width: 100%; height: auto; }
.japan-narrative h3 { font-size: 16px; line-height: 1.45; font-weight: 600; }
.japan-narrative p { font-size: 11px; line-height: 1.75; }
.japan-narrative { margin-bottom: 0; }
.japan-strategy-image-section { margin-top: calc(-1 * clamp(40px, 5vw, 68px)); }
.japan-approach-image { width: 100%; margin: 0; overflow: hidden; border-radius: 17px; }
.japan-approach-image img { display: block; width: 100%; height: auto; }
.japan-conversation-image { width: 100%; margin: 0; overflow: hidden; border-radius: 17px; }
.japan-conversation-image img { display: block; width: 100%; height: auto; }
.japan-needs .japan-needs-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Mobile-only layout refinements. Desktop rules above remain untouched. */
@media (max-width: 760px) {
    :root { --mobile-gutter: 20px; }

    .section { width: calc(100% - 2 * var(--mobile-gutter)); }
    .about.section,
    .projects.section,
    .others.section { width: calc(100% - 2 * var(--mobile-gutter)); }
    .projects.section { padding-top: 54px; padding-bottom: 76px; }
    .about.section { padding-top: 76px; padding-bottom: 56px; }
    .others.section { padding-top: 56px; padding-bottom: 70px; }

    .section-head { margin-bottom: 32px; padding-bottom: 14px; }
    .section-title,
    .about .section-title,
    .others.section .section-title { font-size: clamp(38px, 10vw, 54px); line-height: 1.1; }
    .about-lead { font-size: clamp(27px, 7.5vw, 36px); line-height: 1.35; }
    .about-text { font-size: 14px; line-height: 1.9; }

    .experience { padding: 44px 0 54px; }
    .experience .section-head { margin-bottom: 34px; }
    .experience-list .experience-row {
        grid-template-columns: 74px minmax(0, 1fr);
        gap: 4px 12px;
        padding: 14px 0;
    }
    .experience-list .experience-row::before { left: 85px; }
    .experience-list .experience-row .company-info { grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; }
    .experience-list .experience-row .company-info .company-logo { width: 28px; height: 28px; }
    .experience-list .experience-row .company-info .company { font-size: 15px; }
    .experience-list .experience-row .company-info .position { font-size: 11px; line-height: 1.55; }
    .experience-list .experience-row .period { font-size: 9px; letter-spacing: 0; white-space: normal; line-height: 1.45; }

    .contact.section { min-height: 0; }
    .contact .contact-panel { min-height: 570px; padding: 38px var(--mobile-gutter) 36px; gap: 32px; }
    .contact .contact-copy { width: 100%; max-width: none; }
    .contact h2 { max-width: 100%; white-space: normal; font-size: clamp(42px, 10.5vw, 68px); line-height: 1.08; letter-spacing: -.055em; }
    .contact h2 span { display: block; }
    .contact .contact-sub { max-width: 28em; margin-top: 14px; font-size: 12px; line-height: 1.8; }
    .contact-details { margin-top: 28px; gap: 12px; }
    .contact-link { min-height: 48px; padding: 12px 4px; font-size: 14px; }

    .case-page .case-top { min-height: 58px; padding: 7px 16px; }
    .case-page .case-brand img { height: 34px; }
    .case-brand-group { gap: 10px; }
    .case-kicker { font-size: 13px; letter-spacing: .12em; }
    .case-page .case-close { width: 44px; height: 44px; }
    .case-page .case-content { width: 100%; padding: 24px 18px calc(92px + env(safe-area-inset-bottom)); }
    .case-heading { font-size: clamp(32px, 9vw, 48px); line-height: 1.12; margin-bottom: 14px; }
    .case-heading-compact { font-size: clamp(23px, 6.5vw, 31px); line-height: 1.35; margin-bottom: 32px; }
    .case-summary { font-size: 14px; line-height: 1.75; margin-bottom: 24px; white-space: normal; }
    .case-meta { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .case-meta div { padding: 13px 15px; }
    .case-content img,
    .case-content video,
    .case-content figure { max-width: 100%; }
    .case-content img,
    .case-content video { height: auto; }
    .case-content figure { margin-inline: 0; }
    .case-project-nav { height: calc(60px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }
    .case-project-nav button { height: 60px; padding: 0 10px; gap: 5px; font-size: 10px; }
    .case-project-arrow { width: 42px; height: 42px; flex-basis: 42px; }
    .case-project-arrow svg { width: 25px; height: 25px; }
    .case-page .case-content { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }

    .travel-detail { gap: 32px; margin-bottom: 42px; }
    .travel-section > h3,
    .travel-section-heading h3 { font-size: 15px; }
    .travel-background p { font-size: 13px; line-height: 1.8; }
    .travel-results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .japan-strategy-panel { padding: 8px; }
    .japan-strategy-sheet { padding: 15px 12px; border-radius: 13px; }
    .japan-strategy-context { padding: 12px; margin-bottom: 18px; }
    .japan-strategy-context span { font-size: 12px; }
    .japan-strategy-step { padding: 15px; }
    .japan-strategy-flow { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .japan-strategy-flow .japan-strategy-arrow { transform: rotate(90deg); line-height: 1; }
    .japan-strategy-number { font-size: 23px; }
    .japan-strategy-summary { margin-top: 18px; padding: 13px; }
    .japan-strategy-summary span { font-size: 12px; }
    .japan-compare { padding: 12px; }
    .japan-lane { grid-template-columns: 64px minmax(0, 1fr); }
    .japan-lane > h4 { padding: 8px 5px; font-size: 8px; }
    .japan-lane-content { min-width: 0; }
    .japan-flow-node { min-width: 0; }
    .travel-results { border-radius: 14px; }
    .travel-result-card { min-height: 146px; padding: 14px 8px; }
    .travel-result-ring { width: min(76px, 22vw); }
    .travel-result-card h4 { font-size: 12px; }

    .project-grid.project-bento,
    .project-grid.project-image-grid { width: calc(100% - 2 * var(--mobile-gutter)); }
    .project-grid.project-bento { grid-template-rows: minmax(270px, 82vw) repeat(2, minmax(150px, auto)); gap: 8px; margin-top: 32px; }
    .project-grid.project-bento .project-feature-copy { padding: 18px; }
    .project-grid.project-bento .project-feature-copy .project-name { font-size: clamp(21px, 6vw, 26px); }
    .project-grid.project-bento .project-card-note { padding: 13px; }
    .project-grid.project-bento .project-card-note .project-name { font-size: 14px; }
    .project-grid.project-bento .project-card-note p { font-size: 10px; line-height: 1.55; }

    .hobby-intro { padding-bottom: 24px; }
    .hobby-list { gap: 8px; }
    .hobby-item { min-height: 82px; padding: 11px; }
    .hobby-item span { font-size: 12px; }
    .music-panel { width: 100%; grid-template-columns: 50px minmax(0, 1fr); gap: 11px; padding: 10px; }
    .music-cover { width: 50px; }
    .film-heading { align-items: baseline; margin-bottom: 14px; }
    .film-heading h3 { font-size: 17px; }

    .photo-canvas .life-coverflow-stage { height: 560px; min-height: 560px; }
    .photo-canvas .life-coverflow-head { padding: 0 22px 40px; }
    .photo-canvas .life-coverflow-head h2 { font-size: clamp(36px, 10vw, 52px); }
    .photo-canvas .life-coverflow-head p { margin-top: 12px; font-size: 12px; line-height: 1.7; }

    .site-footer { padding: 22px 0; }
    .site-footer-inner { width: calc(100% - 2 * var(--mobile-gutter)); gap: 16px; }
    .site-footer-brand { font-size: 8px; gap: 9px; }
    .site-footer-nav { gap: 8px; font-size: 10px; }
    .site-footer-top { font-size: 10px; gap: 8px; }
}

@media (max-width: 420px) {
    :root { --mobile-gutter: 16px; }
    .top-nav { gap: 10px; }
    .top-nav a { font-size: 10px; }
    .language { right: 14px; }
    .language button { font-size: 10px; }
    .project-grid.project-bento { grid-template-rows: minmax(245px, 80vw) repeat(2, minmax(138px, auto)); }
    .project-grid.project-bento .project-card-note { padding: 11px; }
    .project-grid.project-bento .project-card-note .project-name { font-size: 13px; }
    .project-grid.project-bento .project-card-note p { font-size: 9px; }
    .case-page .case-content { padding-inline: 15px; }
    .case-page .case-top { padding-inline: 12px; }
    .case-project-prev { left: 2px; }
    .case-project-next { right: 2px; }
    .case-project-nav button { padding-inline: 7px; }
    .case-project-arrow { width: 38px; height: 38px; flex-basis: 38px; }
    .photo-canvas .life-coverflow-stage { height: 520px; min-height: 520px; }
    .contact .contact-panel { min-height: 520px; padding-inline: 16px; }
    .contact h2 { font-size: clamp(40px, 10vw, 48px); }
    .contact .contact-link { font-size: 12px; letter-spacing: .025em; }
    .site-footer-nav { flex-wrap: wrap; }
}

/* Mobile-only refinements requested for the phone layout. */
@media (max-width: 760px) {
    .top-nav {
        top: 31px;
        right: 78px;
        left: 68px;
        justify-content: center;
        gap: clamp(7px, 1.8vw, 12px);
        font-size: clamp(10px, 2.7vw, 12px);
        line-height: 1;
    }
    .top-nav a::after { bottom: -6px; }
    .language {
        top: 30px;
        right: 18px;
        font-size: 11px;
        line-height: 1;
    }
    .header-scroll-mask {
        height: clamp(104px, 12vh, 128px);
        background: rgba(255, 255, 255, .84);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
    }

    .about-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .about-grid > div:last-child {
        order: 0;
        align-items: center;
        width: 100%;
    }
    .about-grid .portrait-frame {
        width: min(72vw, 480px);
        height: auto;
        aspect-ratio: 1866 / 2744;
    }
    .about-grid .about-copy {
        order: 1;
        width: 100%;
        max-width: none;
    }

    .experience-list .experience-row {
        grid-template-columns: clamp(76px, 26vw, 100px) 28px minmax(0, 1fr);
        grid-template-areas: "period logo company" "period logo position";
        gap: 5px 10px;
        padding: 16px 0;
        align-items: center;
    }
    .experience-list .experience-row::before {
        left: calc(clamp(76px, 26vw, 100px) + 24px);
    }
    .experience-list .experience-row .company-info {
        display: contents;
    }
    .experience-list .experience-row .company-info .company-logo {
        grid-area: logo;
        width: 28px;
        height: 28px;
        justify-self: center;
        align-self: center;
    }
    .experience-list .experience-row .company-info .company {
        grid-area: company;
        min-width: 0;
        font-size: 15px;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }
    .experience-list .experience-row .company-info .position {
        grid-area: position;
        min-width: 0;
        font-size: 11px;
        line-height: 1.55;
        overflow-wrap: anywhere;
    }
    .experience-list .experience-row .period {
        grid-area: period;
        min-width: 0;
        font-size: 9px;
        line-height: 1.45;
        letter-spacing: 0;
        white-space: normal;
        align-self: start;
        justify-self: start;
    }
}

@media (max-width: 380px) {
    .top-nav {
        right: 74px;
        left: 64px;
        gap: 5px;
        font-size: 9.5px;
    }
    .language { right: 14px; font-size: 10px; }
    .experience-list .experience-row {
        grid-template-columns: clamp(68px, 26vw, 88px) 25px minmax(0, 1fr);
        column-gap: 8px;
    }
    .experience-list .experience-row::before { left: calc(clamp(68px, 26vw, 88px) + 20px); }
    .experience-list .experience-row .company-info .company-logo { width: 25px; height: 25px; }
}

/* Give the portrait a definite grid track: Safari otherwise uses the
   image intrinsic width for the auto track and collapses the copy column. */
@media (min-width: 761px) {
    .about-grid {
        grid-template-columns: minmax(0, 1fr) clamp(272px, 21.76vw, 448.8px);
    }
    .about-grid > div:last-child { min-width: 0; width: 100%; }
    .about-grid .portrait-frame { width: 100%; max-width: 100%; }
}

/* Keep the introduction readable even when WebKit stalls an entrance effect. */
#about .about-copy, #about .about-grid .reveal {
    opacity: 1 !important;
    translate: none !important;
}
#about .about-grid .reveal { transform: none !important; }
#about .portrait-frame.reveal { clip-path: none !important; }

/* Compact typographic signature beside the XU symbol. */
.side-brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: #292929; }
.side-wordmark {
    display: block; white-space: nowrap; line-height: 1;
    font-family: 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: 22px; font-weight: 900; letter-spacing: -.065em;
    transform: skewX(-5deg); transform-origin: left center;
}
@media (max-width: 760px) {
    .side-brand { flex-direction: column; align-items: flex-start; gap: 5px; }
    .side-wordmark { font-size: 11px; letter-spacing: -.055em; }
}