/* Homepage follows the supplied desktop reference composition. */
html, body { max-width: 100%; overflow-x: hidden; }
.hero {
    min-height: 900px;
    padding: 155px 10.8vw 0;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(110deg, rgba(250,250,248,.95), rgba(237,237,235,.82)),
        url('../images/home-feature-side.jpg') center / cover;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.72) 49%, transparent 67%);
}

.hero-title { position: relative; z-index: 2; }
.hero-title > span { position: absolute; top: -20px; left: -22px; font: 72px "Cormorant Garamond"; }
.hero h1 { margin: 0; font: 400 clamp(44px, 3.8vw, 64px)/1.04 "Cormorant Garamond"; letter-spacing: .035em; }
.hero-title p { position: static; margin: 12px 1vw 0 0; font: 400 17px "Noto Serif TC"; text-align: right; }
.hero-photo { position: relative; z-index: 2; width: 89.2vw; height: 590px; margin-top: 25px; margin-left: -10.8vw; overflow: hidden; touch-action: pan-y; user-select: none; cursor: grab; }
.hero-photo.is-dragging { cursor: grabbing; }
.hero-photo img { -webkit-user-drag: none; }
.hero-photo img { height: 100%; object-fit: cover; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transform: scale(1.035); transition: opacity 1s ease; }
.hero-slide.is-active { opacity: 1; animation: hero-zoom-out 6s ease both; }
.hero .scroll-down { position: absolute; z-index: 3; right: 2.8vw; top: 45%; font-size: 14px; letter-spacing: .12em; writing-mode: vertical-rl; }
.hero .scroll-down i { margin-top: 18px; font-style: normal; animation: scroll-cue 1.8s ease-in-out infinite; }
.slide-dot { position: absolute; right: 5vw; bottom: 70px; display: flex; align-items: center; gap: 12px; font-size: 14px; }
.slide-dot > div { display: flex; align-items: center; gap: 10px; }
.slide-dot button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: #aaa; cursor: pointer; transition: transform .3s,background .3s; }
.slide-dot button.is-active { background: #555; transform: scale(1.25); }
@keyframes scroll-cue { 0%,100%{transform:translateY(0)} 50%{transform:translateY(7px)} }
@keyframes hero-zoom-out { from { transform: scale(1.035); } to { transform: scale(1); } }

.featured { padding: 110px 10.8vw 130px; position: relative; overflow: hidden; background: #fff; }
.featured::before { content: ""; position: absolute; z-index: 0; right: 0; bottom: 0; left: 0; height: 46%; background: linear-gradient(rgba(249,249,247,.8),rgba(245,245,242,.84)),url('../images/home-paper-texture.jpg') center/cover; opacity: .62; }
.featured > * { position: relative; z-index: 1; }
.featured-heading { display: grid; grid-template-columns: 1.1fr .9fr; gap: 10vw; align-items: end; }
.featured-heading small, .profile-copy small, .contact small { font-size: 16px; letter-spacing: .08em; }
.featured-heading h2 { margin: 18px 0 12px; font: 400 36px "Noto Serif TC"; }
.featured-heading div > p { margin: 0; font-size: 18px; line-height: 1.9; color: #666; }
.outline-button { display: inline-block; margin-top: 20px; padding: 12px 38px; border: 1px solid #aaa; font-size: 15px; }
.featured-heading > p { margin: 0 0 8px; font: 400 clamp(36px, 3.2vw, 52px)/1.08 "Cormorant Garamond"; letter-spacing: .04em; }
.feature-layout { width: calc(100% + 10.8vw); height: 665px; margin-top: 45px; position: relative; touch-action: pan-y; user-select: none; }
.feature-slide { position: absolute; margin: 0; opacity: 0; pointer-events: none; transition: left .8s cubic-bezier(.65,0,.2,1),top .8s cubic-bezier(.65,0,.2,1),width .8s cubic-bezier(.65,0,.2,1),height .8s cubic-bezier(.65,0,.2,1),opacity .45s ease; }
.feature-slide.is-main { left: 0; top: 72px; width: 64.5%; height: 590px; z-index: 2; opacity: 1; pointer-events: auto; }
.feature-slide.is-side { left: 66.8%; top: 0; width: 33.2%; height: 340px; z-index: 3; opacity: 1; pointer-events: auto; }
.feature-slide.is-next { left: 102.5%; top: 0; width: 33.2%; height: 340px; }
.feature-slide.is-prev { left: -66.8%; top: 72px; width: 64.5%; height: 590px; }
.feature-case-link { display: block; width: 100%; height: 100%; }
.feature-image { width: 100%; height: 100%; overflow: hidden; cursor: grab; }
.feature-layout.is-dragging .feature-image { cursor: grabbing; }
.feature-image img { -webkit-user-drag: none; }
.feature-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 6s ease; }
.feature-slide.is-main .feature-image img,
.feature-slide.is-side .feature-image img { transform: scale(1.025); }
.feature-layout figcaption { position: absolute; left: 100%; top: 63%; width: 300px; padding-left: 92px; display: flex; flex-direction: column; opacity: 0; visibility: hidden; white-space: nowrap; transition: opacity .3s ease .45s; }
.feature-layout figcaption::before { content: ""; position: absolute; left: 8px; top: 18px; width: 66px; height: 1px; background: #777; }
.feature-slide.is-main figcaption { opacity: 1; visibility: visible; }
.feature-layout figcaption b { font: 500 24px "Noto Serif TC"; }
.feature-layout figcaption span { margin-top: 9px; font: 14px "Cormorant Garamond"; letter-spacing: .1em; }
.feature-nav { position: absolute; z-index: 4; right: 6vw; bottom: 156px; width: 260px; height: 24px; display: grid; grid-template-columns: 24px 1fr 24px; align-items: center; }
.feature-nav button { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: none; color: transparent; font-size: 0; cursor: pointer; }
.feature-nav button span { position: absolute; top: 50%; width: 0; height: 0; font-size: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; transform: translateY(-50%); }
.feature-prev span { left: 0; border-right: 13px solid #666; }
.feature-next span { right: 0; border-left: 13px solid #666; }
.feature-nav > i { width: 100%; height: 1px; background: #666; }

.profile { min-height: 820px; display: grid; grid-template-columns: 34% 18% 40%; gap: 4%; position: relative; background: linear-gradient(90deg, rgba(235,235,232,.96), rgba(250,250,248,.93)), url('../images/home-paper-texture.jpg') center / cover; }
.profile-photo img { height: 820px; object-fit: cover; object-position: center; }
.profile-years { padding-top: 95px; position: relative; }
.profile-years strong { font: 400 125px/.72 "Noto Serif TC", serif; letter-spacing: -.06em; }
.profile-years span { display: inline-block; margin-left: 8px; font: 16px/1.7 "Noto Serif TC"; }
.profile-years > i { display: block; position: relative; width: 1px; height: 300px; margin: 25px 0 0 48%; background: #888; }
.profile-years > i::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 9px solid #888; transform: translateX(-50%); }
.profile-years small { position: absolute; top: 158px; right: 0; font: 14px/1.7 "Cormorant Garamond"; }
.profile-copy { padding-top: 105px; }
.profile-copy h2 { margin: 22px 0; font: 400 36px/1.55 "Noto Serif TC"; }
.profile-copy > p { max-width: 600px; font-size: 18px; line-height: 2; }
.profile-copy ol { margin: 40px 0 0; padding: 0; list-style: none; }
.profile-copy li { padding: 19px 0; border-top: 1px solid #bbb; display: grid; grid-template-columns: 55px 1fr; font-size: 17px; }
.profile-copy li b { font: 15px "Cormorant Garamond"; }
.texture-block { position: absolute; right: 0; bottom: -80px; width: 8vw; height: 170px; background: #c5c4b3; }

.process { margin: 0; padding: 125px 10.8vw 135px; position: relative; overflow: hidden; background: linear-gradient(90deg,rgba(242,242,239,.95),rgba(248,248,246,.86)),url('../images/home-process-bg.jpg') center/cover; }
.process::after { content: "PROCESS"; position: absolute; right: -1vw; top: 20px; color: rgba(73,71,69,.045); font: 400 170px "Cormorant Garamond"; letter-spacing: .03em; }
.process header { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 9vw; align-items: end; text-align: left; }
.process header small { font: 15px "Noto Sans TC"; letter-spacing: .12em; }
.process header h2 { margin: 24px 0 0; font: 400 clamp(31px,4vw,36px)/1.45 "Noto Serif TC"; }
.process header > p { max-width: 560px; margin: 0 0 12px; font-size: 17px; line-height: 2; }
.process-track { position: relative; z-index: 1; margin-top: 85px; padding: 0; display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid rgba(73,71,69,.35); }
.process-track article { min-height: 235px; padding: 30px 28px 28px 0; position: relative; border-bottom: 1px solid rgba(73,71,69,.25); }
.process-track article:not(:nth-child(5n+1)) { padding-left: 28px; border-left: 1px solid rgba(73,71,69,.18); }
.process-track i { display: block; color: rgba(73,71,69,.22); font: italic 400 62px/1 "Cormorant Garamond"; }
.process-track p { margin: 27px 0 12px; font: 400 20px "Noto Serif TC"; }
.process-track span { display: block; max-width: 190px; color: #77736e; font-size: 14px; line-height: 1.8; }

.work-links { padding: 62px 10.8vw; display: grid; grid-template-columns: 1fr 1fr; gap: 55px; background: #fff; }
.work-links > a { min-height: 112px; padding: 0 28px; border-inline: 1px solid #ccc; display: grid; grid-template-columns: 135px 1fr 28px; align-items: center; }
.work-links img { width: 95px; height: 75px; object-fit: contain; }
.work-links div { display: flex; flex-direction: column; }
.work-links b { font: 400 19px "Noto Serif TC"; }
.work-links span { margin-top: 7px; font: 14px "Cormorant Garamond"; }
.work-links i { font-style: normal; color: #888; }
.grid-mark { display: block; width: 65px; height: 65px; border: 1px solid #888; background: linear-gradient(90deg,transparent 48%,#777 49%,#777 51%,transparent 52%),linear-gradient(transparent 48%,#777 49%,#777 51%,transparent 52%); }

.journal-preview { padding: 105px 10.8vw 120px; overflow: hidden; background: #fff; }
.journal-preview > header { display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.journal-preview small { font-size: 15px; letter-spacing: .1em; }
.journal-preview h2 { margin: 20px 0 0; font: 400 clamp(31px,3.4vw,36px)/1.5 "Noto Serif TC"; }
.journal-preview > header > a { margin-bottom: 10px; padding-bottom: 7px; border-bottom: 1px solid #777; font-size: 13px; letter-spacing: .1em; }
.journal-preview-grid { height: 485px; margin-top: 65px; position: relative; overflow: hidden; touch-action: pan-y; user-select: none; cursor: grab; }
.journal-preview-grid.is-dragging { cursor: grabbing; }
.journal-preview-grid > a { position: absolute; left: 105%; top: 32px; width: calc((100% - 68px) / 3); display: block; border-top: 1px solid #aaa; opacity: 0; pointer-events: none; transform: translateX(var(--journal-drag, 0px)); transition: left .75s cubic-bezier(.65,0,.2,1),top .75s cubic-bezier(.65,0,.2,1),opacity .4s ease,transform .3s ease; }
.journal-preview-grid.is-dragging > a { transition: none; }
.journal-preview-grid > a.is-journal-left { left: 0; top: 54px; opacity: 1; pointer-events: auto; }
.journal-preview-grid > a.is-journal-center { left: calc((100% - 68px) / 3 + 34px); top: 0; opacity: 1; pointer-events: auto; }
.journal-preview-grid > a.is-journal-right { left: calc((100% - 68px) / 3 * 2 + 68px); top: 32px; opacity: 1; pointer-events: auto; }
.journal-preview-grid > a.is-journal-prev { left: calc((100% - 68px) / -3 - 34px); top: 54px; opacity: 0; }
.journal-preview-grid > a.is-journal-next { left: calc(100% + 34px); top: 32px; opacity: 0; }
.journal-preview figure { height: 250px; margin: 0; overflow: hidden; }
.journal-preview figure img { height: 100%; object-fit: cover; filter: saturate(.7); transition: transform .65s,filter .4s; }
.journal-preview figure img { -webkit-user-drag: none; }
.journal-preview-grid > a:hover img { transform: scale(1.035); filter: saturate(1); }
.journal-preview-grid > a > div { padding: 22px 4px 0; }
.journal-preview-grid span { color: #77736e; font-size: 13px; }
.journal-preview-grid h3 { margin: 13px 0 10px; font: 400 21px "Noto Serif TC"; }
.journal-preview-grid p { margin: 0; font-size: 15px; line-height: 1.85; }

.journal { padding: 105px 10.8vw; background: #f3f3f1; }
.journal h2 { font: 400 48px/1.45 "Noto Serif TC"; }
.journal > div { margin-top: 55px; display: grid; grid-template-columns: repeat(3,1fr); gap: 50px; }
.journal article { padding-top: 22px; border-top: 1px solid #999; }
.journal article span { font: 14px "Cormorant Garamond"; }
.journal article h3 { font: 400 24px "Noto Serif TC"; }
.journal article p { font-size: 17px; line-height: 1.9; }

.contact { padding: 90px 10.8vw 75px; display: grid; grid-template-columns: 1fr 1.15fr; gap: 65px; position: relative; background: linear-gradient(90deg,rgba(238,238,235,.95),rgba(238,238,235,.79)), url('../images/home-contact.jpg') center / cover; }
.contact-form { position: relative; }
.contact-form::before { content: ""; position: absolute; left: -6vw; top: -90px; width: 190px; height: calc(100% + 165px); background: url('../images/home-feature-side.jpg') center / cover; opacity: .12; }
.contact-form > * { position: relative; }
.contact-form h2 { font: 400 36px "Noto Serif TC"; }
.contact-form > p { max-width: 540px; font-size: 18px; line-height: 1.9; }
.contact form { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 17px 22px; }
.contact label { font-size: 16px; }
.contact input, .contact textarea { width: 100%; margin-top: 7px; padding: 11px; display: block; border: 1px solid #ccc; background: rgba(255,255,255,.8); }
.contact label:last-of-type { grid-column: 1/-1; }
.contact button { width: 120px; padding: 11px; border: 1px solid #999; background: transparent; }
.company { margin-top: 58px; display: block; font: 400 16px "Noto Serif TC"; }
.contact-map { height: 300px; filter: grayscale(1); }
.contact-map iframe { width: 100%; height: 100%; border: 0; }
.info-panel { padding: 32px 38px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 38px; background: #d6d5cd; }
.info-panel p { font-size: 16px; line-height: 2; }
.go-top { position: absolute; top: 30px; right: 2.5vw; font: 14px/1.7 "Cormorant Garamond"; writing-mode: vertical-rl; }

@media(max-width:900px){.hero{min-height:720px;padding:125px 6vw 0}.hero h1{font-size:52px}.hero-title p{position:static;margin-top:18px}.hero-photo{width:100%;height:420px;margin-left:0}.featured{padding:80px 6vw}.featured-heading{grid-template-columns:1fr}.featured-heading>p{margin-top:35px}.feature-layout{width:100%;grid-template-columns:1fr}.feature-main{transform:none}.feature-main img{height:420px}.feature-side{width:72%;margin-left:auto!important}.profile{grid-template-columns:1fr 1fr;min-height:auto}.profile-photo img{height:560px}.profile-copy{grid-column:1/-1;padding:60px 7vw}.process{padding:90px 6vw}.process header{grid-template-columns:1fr;gap:28px}.process header>p{font-size:16px}.process-track{grid-template-columns:repeat(2,1fr);margin-top:55px}.process-track article:not(:nth-child(5n+1)){padding-left:22px;border-left:1px solid rgba(73,71,69,.18)}.process-track article:nth-child(odd){padding-left:0;border-left:0}.work-links{padding-inline:6vw;grid-template-columns:1fr}.journal{padding-inline:6vw}.journal>div{grid-template-columns:1fr}.contact{padding-inline:6vw;grid-template-columns:1fr}}
@media(max-width:540px){.hero{min-height:630px}.hero h1{font-size:40px}.hero-title p{font-size:15px}.hero-photo{height:330px}.hero aside,.slide-dot{display:none}.featured-heading>p{font-size:40px}.feature-main img{height:340px}.feature-side img{height:240px}.profile{grid-template-columns:1fr}.profile-photo img{height:480px}.profile-years{padding:0px 7vw;display:flex;align-items:center;gap:18px}.profile-years>i,.profile-years small{display:none}.profile-copy{padding-top:30px}.work-links>a{grid-template-columns:80px 1fr 20px;padding-inline:10px}.work-links img{width:65px}.contact form,.info-panel{grid-template-columns:1fr}.contact label:last-of-type{grid-column:auto}}

@media(max-width:900px){.process-track article:nth-child(odd){padding-left:0;border-left:0}.process-track article:nth-child(even){padding-left:22px;border-left:1px solid rgba(73,71,69,.18)}.journal-preview{padding:80px 6vw 90px}.journal-preview>header{align-items:start}.journal-preview-grid{height:445px}.journal-preview-grid>a{width:47%}.journal-preview-grid>a.is-journal-prev{left:-53%;top:42px}.journal-preview-grid>a.is-journal-left{left:0;top:42px}.journal-preview-grid>a.is-journal-center{left:53%;top:0}.journal-preview-grid>a.is-journal-right{left:106%;top:25px}.journal-preview-grid>a.is-journal-next{left:159%;top:25px}.journal-preview figure{height:230px}}
@media(max-width:540px){.journal-preview>header{display:block}.journal-preview>header>a{display:inline-block;margin-top:25px}.journal-preview-grid{height:455px;margin-top:45px;overflow:hidden}.journal-preview-grid>a{width:88%;opacity:0}.journal-preview-grid>a.is-journal-prev{left:-94%;top:20px}.journal-preview-grid>a.is-journal-left{left:0;top:0;opacity:1;pointer-events:auto}.journal-preview-grid>a.is-journal-center{left:94%;top:20px;opacity:.45;pointer-events:none}.journal-preview-grid>a.is-journal-right{left:188%;top:20px;opacity:0;pointer-events:none}.journal-preview-grid>a.is-journal-next{left:282%;top:20px}.journal-preview figure{height:260px}}
@media(max-width:540px){.hero .scroll-down,.slide-dot{display:none}}

@media(max-width:900px){
    .feature-layout{height:700px;margin-top:40px}
    .feature-slide.is-main{left:0;top:0;width:100%;height:445px}
    .feature-slide.is-side{left:28%;top:485px;width:72%;height:215px}
    .feature-slide.is-next{left:103%;top:485px;width:72%;height:215px}
    .feature-slide.is-prev{left:-103%;top:0;width:100%;height:445px}
    .feature-layout figcaption{left:0;top:100%;width:auto;padding:18px 0 0 78px}
    .feature-layout figcaption::before{left:0;top:31px;width:58px}
    .feature-nav{right:6vw;bottom:44px;width:220px}
}

@media(max-width:540px){
    .featured{padding-bottom:105px}
    .feature-layout{height:535px}
    .feature-slide.is-main{height:330px}
    .feature-slide.is-side{left:30%;top:405px;width:70%;height:130px}
    .feature-slide.is-next{left:103%;top:405px;width:70%;height:130px}
    .feature-slide.is-prev{left:-103%;height:330px}
    .feature-layout figcaption{padding:15px 0 0 55px}
    .feature-layout figcaption::before{top:27px;width:40px}
    .feature-layout figcaption b{font-size:17px}
    .feature-layout figcaption span{font-size:12px}
    .feature-nav{right:6vw;bottom:38px;width:180px}
}

.site-footer { height: auto; padding: 78px 10.8vw 28px; display: block; color: #5f5c58; background: linear-gradient(100deg,rgba(239,239,236,.96),rgba(249,249,247,.92)),url('../images/home-paper-texture.jpg') center/cover; border-top: 1px solid rgba(90,87,82,.16); }
.footer-main { display: grid; grid-template-columns: 1.55fr 1.2fr .72fr .7fr; gap: clamp(38px,5vw,90px); align-items: start; }
.footer-brand { display: grid; grid-template-columns: 86px 1fr; gap: 25px; align-items: start; }
.footer-brand img { width: 86px; height: 86px; object-fit: contain; }
.footer-brand b { display: block; font: 500 21px "Noto Serif TC"; letter-spacing: .12em; }
.footer-brand span { display: block; margin-top: 8px; font: 14px "Cormorant Garamond"; letter-spacing: .16em; }
.footer-brand p { margin: 22px 0 0; font-size: 14px; line-height: 1.9; color: #77736e; }
.footer-main small { display: block; margin-bottom: 24px; font: 13px "Cormorant Garamond"; letter-spacing: .16em; color: #89857f; }
.footer-info,.footer-nav,.footer-social { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; font-size: 14px; line-height: 1.65; }
.footer-info span { margin-top: 4px; color: #77736e; }
.footer-nav a,.footer-social a,.footer-info a { position: relative; }
.footer-nav a::after,.footer-social a::after,.footer-info a::after { content: ""; position: absolute; right: 0; bottom: -2px; left: 0; height: 1px; background: #77736e; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.footer-nav a:hover::after,.footer-social a:hover::after,.footer-info a:hover::after { transform: scaleX(1); }
.footer-bottom { margin-top: 65px; padding-top: 24px; border-top: 1px solid rgba(90,87,82,.25); display: flex; justify-content: space-between; gap: 30px; color: #88847f; font-size: 12px; letter-spacing: .08em; }

@media(max-width:1000px){.footer-main{grid-template-columns:1.3fr 1fr 1fr}.footer-social{grid-column:2}.footer-bottom{margin-top:45px}}
@media(max-width:700px){.site-footer{padding:60px 7vw 25px;text-align:left}.footer-main{grid-template-columns:1fr 1fr;gap:45px 28px}.footer-brand{grid-column:1/-1;grid-template-columns:70px 1fr}.footer-brand img{width:70px;height:70px}.footer-info{grid-column:1/-1}.footer-social{grid-column:auto}.footer-main small{margin-bottom:12px}.footer-bottom{display:block;line-height:1.8}.footer-bottom span{display:block}.footer-bottom span+span{margin-top:7px}}
@media (max-width: 900px) {
    .hero h1 { font-size: 38px; }
}

@media (max-width: 540px) {
    .hero h1 { font-size: 30px; }
    .featured-heading > p { font-size: 32px; }
}