/* SHIN HAMADA — Reference-inspired portfolio. Original implementation.
   Latin: Helvetica Neue / Helvetica, with Arimo fallback; Japanese: Zen Kaku Gothic New. */
:root{--paper:#f7f7f5;--ink:#11120f;--accent:#eaff27;--line:#c7c8c3;--soft:#73746c;--font:'Helvetica Neue',Helvetica,'Arimo','Zen Kaku Gothic New','Noto Sans JP','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;--pad:clamp(22px,3.35vw,60px);--ease:cubic-bezier(.22,1,.36,1)}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:14px;-webkit-font-smoothing:antialiased;overflow-x:hidden}body.is-locked{overflow:hidden}::selection{background:var(--accent);color:var(--ink)}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,input{border:0}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid #5870c5;outline-offset:5px}img{display:block;max-width:100%}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-weight:700}button{background:none}svg{display:block}main{min-height:65vh}.container{padding-inline:var(--pad)}[hidden]{display:none!important}
/* Header, chrome, nav */
.site-header{position:fixed;z-index:80;top:0;left:0;right:0;height:78px;display:flex;align-items:center;padding:0 var(--pad);justify-content:space-between;gap:14px;pointer-events:none;transition:background .4s,border-color .3s}body.has-scrolled .site-header{background:rgba(247,247,245,.89);backdrop-filter:blur(17px);-webkit-backdrop-filter:blur(17px);border-bottom:1px solid rgba(10,10,10,.12)}.site-header a,.site-header button{pointer-events:auto}.wordmark{font-size:13px;font-weight:700;letter-spacing:-.025em;white-space:nowrap;display:flex;align-items:start;gap:3px}.wordmark sup{font-size:8px;transform:translateY(-2px)}.desktop-nav{display:flex;gap:18px;align-items:center;margin-left:auto}.nav-link{font-size:12px;font-weight:700;transition:opacity .25s;position:relative}.nav-link:not(.active){opacity:.57}.nav-link:hover{opacity:1}.nav-link.active::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:1px;background:currentColor}.nav-contact{font-size:11px;border:1px solid var(--ink);padding:12px 14px;font-weight:700;white-space:nowrap;display:flex;gap:15px;align-items:center;transition:background .25s,color .25s}.nav-contact:hover{background:var(--ink);color:#fff}.nav-contact span{font-size:14px}.menu-toggle{display:none;font-weight:700;letter-spacing:.04em;font-size:12px}.site-progress{position:absolute;bottom:0;left:0;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;width:100%;pointer-events:none}.mobile-nav{position:fixed;inset:0;background:var(--accent);z-index:78;padding:120px var(--pad) 40px;display:flex;flex-direction:column;visibility:hidden;opacity:0;transform:translateY(-3%);transition:opacity .45s,transform .45s,visibility .45s}.mobile-nav.is-open{visibility:visible;opacity:1;transform:none}.mobile-nav a{font-size:clamp(54px,11vw,96px);font-weight:700;line-height:1.13;letter-spacing:-.035em;border-bottom:1px solid #111;padding:8px 0}.mobile-nav small{margin-top:auto;font-size:11px;letter-spacing:.08em}
/* Loader and page transitions */
.preloader{position:fixed;inset:0;background:var(--accent);z-index:220;display:flex;flex-direction:column;justify-content:space-between;padding:var(--pad);pointer-events:none;transition:transform .95s var(--ease);transform:translateY(0)}.preloader.is-complete{transform:translateY(-101%)}.preloader-top{display:flex;justify-content:space-between;font-weight:700;font-size:12px}.preloader-name{font-size:clamp(68px,17vw,260px);font-weight:700;letter-spacing:-.035em;line-height:.78;word-break:break-all}.preloader-num{font-size:clamp(30px,6vw,95px);font-weight:700;align-self:end;letter-spacing:-.025em}.transition-curtain{position:fixed;z-index:190;inset:0;background:var(--accent);pointer-events:none;transform:translateY(101%);transition:transform .7s cubic-bezier(.75,0,.2,1)}body.is-transitioning .transition-curtain{transform:translateY(0)}.transition-curtain::before{content:'SHIN HAMADA®';position:absolute;bottom:var(--pad);left:var(--pad);font-size:clamp(54px,12vw,160px);font-weight:700;line-height:.77;letter-spacing:-.035em}
/* global micro and motion */
.section-kicker{display:flex;gap:11px;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.055em;font-weight:700;border-top:1px solid var(--ink);padding-top:16px;line-height:1.4}.section-kicker .cross{font-size:15px;line-height:.7;margin-right:2px}.section-kicker span:last-child:not(.cross){margin-left:auto;color:var(--soft)}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.035em}.micro{font-size:10px;line-height:1.5;font-weight:700;letter-spacing:.04em}.mask-line{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}.mask-line>.line-inner{display:block;transform:translateY(115%);will-change:transform;transition:transform 1.35s var(--ease)}.is-ready .mask-line>.line-inner{transform:translateY(0)}.mask-line:nth-child(2)>.line-inner{transition-delay:.14s}.mask-line:nth-child(3)>.line-inner{transition-delay:.25s}.reveal{opacity:0;transform:translate3d(0,43px,0);transition:opacity .95s var(--ease),transform .95s var(--ease);will-change:transform,opacity}.reveal.is-visible{opacity:1;transform:none}.fade-up{transition-duration:1.3s}.text-link{font-size:11px;font-weight:700;letter-spacing:.035em;display:inline-flex;align-items:center;gap:23px;white-space:nowrap;padding-bottom:7px;border-bottom:1px solid var(--ink)}.boxed-arrow{border:1px solid var(--ink);width:27px;height:27px;display:inline-grid;place-items:center;font-size:18px;line-height:1;transition:background .25s,color .25s,transform .3s}.text-link:hover .boxed-arrow,.big-contact:hover .boxed-arrow{background:var(--ink);color:#fff;transform:rotate(45deg)}.outline-text{-webkit-text-stroke:1.3px var(--ink);color:transparent}.muted-slash{font-weight:400;color:#a3a4a0}.tiny-star{font-size:.19em;vertical-align:top;letter-spacing:0;margin-left:.3em}.index{font-size:11px;font-weight:600}.circle-arrow{display:grid;place-items:center;border:1px solid #111;border-radius:50%;width:47px;height:47px;font-size:23px;transition:background .3s,color .3s}.scroll-prompt:hover .circle-arrow{background:var(--ink);color:white}
/* Home hero */
.hero-home{min-height:max(760px,100svh);padding:130px var(--pad) 36px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;border-bottom:1px solid var(--ink)}.edge-note{position:absolute;top:133px;font-size:9px;letter-spacing:.07em;font-weight:700;line-height:1.55}.edge-note--left{left:var(--pad)}.edge-note--right{right:var(--pad);text-align:right}.hero-title-wrap{margin-top:auto;margin-bottom:auto;padding-top:12vh;position:relative;z-index:1;pointer-events:none}.hero-title-wrap .eyebrow{margin:0 0 38px 8px}.mega-name{margin:0;font-size:clamp(112px,17.2vw,310px);font-weight:700;letter-spacing:-.035em;line-height:.77;white-space:nowrap;max-width:100%;font-family:var(--font)}.mega-name .mask-line:nth-child(2){text-align:right;margin-top:1.5vw}.trademark{font-size:.14em;display:inline-block;vertical-align:top;position:relative;top:.22em;letter-spacing:0;margin-left:.1em}.hero-bottom{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;gap:24px;margin-top:15px}.hero-bottom-meta,.hero-bottom-center{font-size:11px;line-height:1.4;font-weight:700;letter-spacing:.01em}.hero-bottom-center{justify-self:center}.hero-bottom .reveal{opacity:1;transform:none}.scroll-prompt{display:flex;align-items:center;gap:24px;justify-self:end;font-size:10px;font-weight:700;letter-spacing:.07em}.hero-dog-promo{position:absolute;z-index:3;width:clamp(154px,17vw,238px);height:clamp(157px,17vw,242px);top:clamp(178px,23vh,255px);right:var(--pad);background:var(--accent);border:1px solid var(--ink);display:flex;flex-direction:column;justify-content:space-between;padding:12px;box-shadow:7px 7px 0 rgba(17,18,15,.10);transition:transform .4s var(--ease),box-shadow .4s}.hero-dog-promo:hover{transform:rotate(-4deg) translateY(-9px);box-shadow:12px 12px 0 rgba(17,18,15,.16)}.hero-dog-promo img{position:absolute;bottom:23px;left:10px;width:73%;height:70%;object-fit:contain;object-position:bottom;filter:none}.promo-top{font-size:9px;font-weight:700;display:flex;justify-content:space-between;z-index:1}.promo-bottom{font-size:20px;line-height:.9;font-weight:700;letter-spacing:-.025em;align-self:end;text-align:right;z-index:1;background:var(--accent)}
/* Intro */
.intro-section{padding-top:110px;padding-bottom:180px}.intro-grid{display:grid;grid-template-columns:42% 58%;gap:0;padding-top:110px}.intro-left{display:flex;flex-direction:column;justify-content:space-between;padding-right:30px}/* Balanced SH monogram: center the letters as one unit, independent of the ring. */
.ring-mark{width:160px;height:160px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;flex:none;animation:ring-spin 18s linear infinite;transform-origin:center center;will-change:transform}
.ring-monogram{display:flex;align-items:center;justify-content:center;gap:.07em;transform:translateX(-.025em);font-family:var(--font);font-size:70px;font-weight:700;line-height:1;letter-spacing:-.025em;white-space:nowrap}
.ring-letter{display:block}
.ring-dot{display:block;width:.095em;height:.095em;border-radius:50%;background:currentColor;flex:none;margin-left:.035em;margin-right:.065em}
@keyframes ring-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ring-mark{animation:none}}
.intro-right{max-width:920px}.intro-statement{font-size:clamp(76px,10.9vw,180px);letter-spacing:-.035em;line-height:.84;margin:0 0 60px}.intro-bio{max-width:500px;margin-left:auto}.intro-bio p{font-size:14px;line-height:2.05;letter-spacing:.02em;margin:0 0 18px}.intro-bio p:nth-child(2){font-size:13px;line-height:1.85}.intro-bio .text-link{margin-top:25px}
/* Work */
.selected-section{padding-top:28px;padding-bottom:145px}.split-header{display:grid;grid-template-columns:1fr auto;align-items:end;gap:20px;padding-top:75px;padding-bottom:115px}.jumbo-title{font-family:var(--font);font-size:clamp(67px,11.5vw,188px);line-height:.83;letter-spacing:-.035em;margin:0}.jumbo-title>span{display:block}.jumbo-title .muted-slash{display:inline-block;margin-right:.11em}.jumbo-title>span:nth-child(3){display:inline-block}.heading-action{margin-bottom:10px}.featured-projects{display:flex;flex-direction:column;gap:140px}.featured-work{position:relative}.featured-media{display:block;position:relative;height:clamp(460px,66vw,910px);overflow:hidden;background:var(--bg);isolation:isolate;cursor:none}.featured-media::after{content:'';position:absolute;inset:0;border:1px solid rgba(0,0,0,.12);pointer-events:none}.featured-media .floating-graphic{width:100%;height:100%;object-fit:var(--fit,contain);object-position:center;transition:transform 1.25s var(--ease),filter .9s var(--ease);will-change:transform}.featured-media:hover .floating-graphic{transform:scale(1.055)}.featured-media .work-image-container{position:absolute;inset:9% 13%;display:flex;align-items:center;justify-content:center}.featured-work:nth-child(2n) .work-image-container{inset:10% 22%}.featured-media .project-stamp{position:absolute;left:22px;top:23px;font-size:11px;font-weight:700;letter-spacing:.055em;z-index:2}.featured-media .work-corner{position:absolute;right:24px;top:20px;font-size:38px;line-height:1;font-weight:500;transition:transform .4s;z-index:2}.featured-media:hover .work-corner{transform:rotate(45deg)}.featured-media .media-scroll-line{position:absolute;bottom:20px;left:24px;font-size:11px;z-index:2;font-weight:700}.featured-work-info{padding:23px 0 0;display:grid;grid-template-columns:88px minmax(0,1fr) minmax(170px,24%);gap:clamp(12px,1.4vw,20px);align-items:start;border-top:1px solid #171717;margin-top:15px}.featured-work-info .serial{font-size:12px;font-weight:700}.featured-work-info h3{font-size:clamp(26px,3.2vw,57px);letter-spacing:-.025em;line-height:1;margin:0}.featured-work-info p{justify-self:end;font-size:11px;line-height:1.6;text-align:right;margin:0;font-weight:700}.section-end{display:flex;justify-content:space-between;align-items:center;padding-top:80px;border-top:1px solid var(--ink);margin-top:155px;font-size:11px;font-weight:700}
/* Footer CTA */
.contact-marquee-section{overflow:hidden;border-top:1px solid var(--ink)}.contact-marquee-section>.section-kicker{border-top:0;padding-block:32px 70px}.contact-marquee{display:block;cursor:pointer;overflow:hidden;padding:50px 0 45px;border-top:1px solid #111;border-bottom:1px solid #111;transform:rotate(-1deg);margin-left:-1vw;width:102vw}.marquee-track{display:flex;width:max-content;white-space:nowrap;animation:marquee 30s linear infinite;will-change:transform}.marquee-track span{font-family:var(--font);font-weight:700;letter-spacing:-.035em;line-height:.8;font-size:clamp(110px,17vw,275px);padding-right:30px}@keyframes marquee{to{transform:translateX(-50%)}}.contact-marquee:hover .marquee-track{animation-play-state:paused}.contact-info{display:grid;grid-template-columns:1fr 1fr auto;gap:25px;align-items:end;padding-top:80px;padding-bottom:130px}.contact-info p:first-child{font-size:11px;font-weight:700;letter-spacing:.04em}.contact-info p:nth-child(2){font-size:clamp(28px,3.8vw,56px);font-weight:700;letter-spacing:-.025em;line-height:1.03;margin:0}.big-contact{border-bottom:1px solid var(--ink);padding:12px 0;font-weight:700;display:flex;align-items:center;gap:22px;font-size:13px}.site-footer{padding:20px var(--pad) 27px;border-top:1px solid #111;display:flex;align-items:center;gap:30px;justify-content:space-between;font-size:10px;font-weight:700;letter-spacing:.04em}.footer-links{display:flex;gap:32px;align-items:center}.site-footer a:hover{text-decoration:underline}
/* About */
.page-hero{padding-top:150px}.page-hero>.section-kicker{border-top:none;padding-top:0}.page-mega-title{font-family:var(--font);font-size:clamp(98px,14.7vw,260px);font-weight:700;line-height:.8;letter-spacing:-.035em;margin:85px 0 0}.page-mega-title .mask-line{padding-bottom:.14em;margin-bottom:-.14em}.about-top-details{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-top:100px;padding-bottom:45px;border-bottom:1px solid var(--ink)}.about-top-details p{font-size:12px;font-weight:700;line-height:1.5;letter-spacing:.045em}.about-top-details p:last-child{text-align:right}.about-bio-section{padding-top:110px;padding-bottom:170px}.about-bio-grid{display:grid;grid-template-columns:1.12fr 1fr;gap:70px;padding-top:100px}.about-headline{font-size:clamp(70px,9.5vw,164px);line-height:.85;letter-spacing:-.035em;margin:0}.about-copy{max-width:585px;margin-left:auto}.about-copy p{font-size:15px;line-height:1.95;max-width:515px;margin-bottom:21px}.about-copy .jp-large{font-size:clamp(21px,2.15vw,34px);font-weight:700;line-height:1.6;letter-spacing:-.025em;margin-bottom:46px}.bio-index{border-top:1px solid var(--ink);padding-top:20px;display:grid;grid-template-columns:160px 1fr;row-gap:20px;margin-top:63px}.bio-index span{font-size:10px;font-weight:700}.bio-index strong{font-size:12px}.expertise-section{padding-bottom:150px}.inner-title{font-size:clamp(80px,12vw,185px);font-weight:700;line-height:.83;letter-spacing:-.035em;margin:78px 0}.expertise-list{border-top:1px solid var(--ink)}.expertise-row{display:grid;grid-template-columns:10% 39% 1fr 30px;gap:15px;padding:37px 0;border-bottom:1px solid var(--ink);align-items:center}.expertise-row h3{font-size:clamp(27px,4vw,65px);letter-spacing:-.025em;line-height:1;margin:0}.expertise-row p{font-size:13px;margin:0;line-height:1.6}.expertise-row>span:last-child{font-size:26px}.timeline-section{padding-bottom:170px}.timeline-header{display:flex;justify-content:space-between;align-items:end;gap:50px}.timeline-header .inner-title{margin-bottom:65px}.timeline-header p{font-size:12px;line-height:1.55;font-weight:700;margin-bottom:74px}.timeline{border-top:1px solid var(--ink)}.timeline-row{border-bottom:1px solid var(--ink);display:grid;grid-template-columns:20% 36% 1fr;padding:30px 0;gap:30px;align-items:center}.timeline-row>span{font-size:11px;font-weight:700}.timeline-row strong{font-size:clamp(27px,4vw,63px);letter-spacing:-.025em;line-height:1}.timeline-row p{font-size:13px;line-height:1.55;margin:0;max-width:500px}.about-next{padding-bottom:130px}.next-page-link{display:block;padding-top:75px}.next-page-link>span{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;margin-bottom:25px}.next-page-link>strong{font-size:clamp(62px,10vw,165px);line-height:.9;letter-spacing:-.035em;display:block;font-weight:700}.next-page-link>strong>span{font-weight:400;display:inline-block;transition:transform .4s var(--ease)}.next-page-link:hover>strong>span{transform:translate(12px,-12px)}
/* Project index */
.project-mega{font-size:clamp(80px,12.8vw,225px);margin-top:85px}.project-second{padding-left:7vw}.projects-hero-bottom{display:flex;justify-content:space-between;align-items:end;gap:40px;padding-top:110px;padding-bottom:40px}.projects-hero-bottom>p{font-size:clamp(16px,1.55vw,22px);line-height:1.5;font-weight:650;margin:0;max-width:650px;letter-spacing:-.025em}.view-switch{display:flex;gap:14px;align-items:center;font-size:13px;font-weight:700}.view-button{opacity:.38;transition:opacity .2s;white-space:nowrap;cursor:pointer;padding:7px 0;border-bottom:1px solid transparent}.view-button.is-active{opacity:1;border-bottom-color:var(--ink)}.view-button:hover{opacity:1}.view-button span{font-size:12px}.view-divider{opacity:.4}.all-projects-section{padding-bottom:160px}.list-meta{display:flex;justify-content:space-between;border-top:1px solid var(--ink);padding-top:18px;padding-bottom:55px;font-size:11px;font-weight:700}.projects-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:110px 25px}.gallery-card{min-width:0}.gallery-card:nth-child(3n + 2){padding-top:150px}.gallery-card:nth-child(3n){grid-column:1 / -1;width:70%;margin-inline:auto}.gallery-card-media{width:100%;aspect-ratio:1.12/1;background:var(--bg);display:grid;place-items:center;overflow:hidden;position:relative}.gallery-card-media img{width:85%;height:85%;object-fit:contain;transition:transform 1s var(--ease)}.gallery-card-media:hover img{transform:scale(1.075) rotate(-1deg)}.gallery-card-media .gallery-index{position:absolute;left:20px;top:19px;font-size:11px;font-weight:700}.gallery-card-media .gallery-cta{position:absolute;bottom:15px;right:15px;display:grid;place-items:center;border-radius:50%;width:56px;height:56px;border:1px solid #111;font-size:26px;transition:background .2s,color .2s,transform .3s}.gallery-card-media:hover .gallery-cta{background:#111;color:#fff;transform:rotate(45deg)}.gallery-card-label{padding-top:20px;display:grid;grid-template-columns:1fr auto;align-items:start;gap:20px;border-top:1px solid #111;margin-top:14px}.gallery-card-label h2{font-size:clamp(25px,2.8vw,46px);font-weight:700;letter-spacing:-.025em;margin:0}.gallery-card-label p{font-size:10px;line-height:1.6;letter-spacing:.03em;text-align:right;margin:2px 0 0;font-weight:700}.projects-list{border-top:1px solid var(--ink)}.list-project-row{display:grid;grid-template-columns:7% 1fr minmax(210px,30%) 45px;gap:20px;align-items:center;border-bottom:1px solid var(--ink);padding:36px 0;position:relative;transition:padding .5s var(--ease),background .4s}.list-project-row:hover{padding-inline:20px;background:var(--accent)}.list-project-row .list-num{font-size:11px;font-weight:700}.list-project-row h2{font-size:clamp(31px,4.7vw,78px);line-height:.92;letter-spacing:-.025em;margin:0}.list-project-row p{font-size:11px;font-weight:650;line-height:1.5;margin:0}.list-project-row .list-arrow{font-size:32px;transition:transform .35s}.list-project-row:hover .list-arrow{transform:translate(7px,-7px)}
/* Project details */
.detail-page-hero{padding-top:165px}.detail-back{display:inline-flex;gap:12px;align-items:center;font-size:11px;font-weight:700;border-bottom:1px solid var(--ink);padding-bottom:9px}.detail-kicker{display:flex;justify-content:space-between;margin-top:75px;font-size:11px;font-weight:700;border-top:1px solid #111;padding-top:18px}.detail-page-title{font-size:clamp(85px,12.5vw,205px);font-weight:700;letter-spacing:-.035em;line-height:.85;margin:70px 0 70px;overflow-wrap:anywhere}.detail-hero-art{height:clamp(460px,66vw,970px);background:var(--bg);display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.detail-hero-art img{height:82%;width:83%;object-fit:contain}.detail-hero-art .art-marker{position:absolute;left:20px;top:20px;font-size:11px;font-weight:700}.detail-hero-art .art-arrow{position:absolute;right:22px;top:20px;font-size:32px}.detail-description{padding-top:100px;padding-bottom:130px;display:grid;grid-template-columns:32% 1fr;gap:40px}.detail-description h2{font-size:12px;margin:0}.detail-description .big-description{font-size:clamp(29px,4.2vw,64px);font-weight:700;letter-spacing:-.025em;line-height:1.17;max-width:900px;margin-bottom:38px}.detail-description .detail-japanese{font-size:15px;line-height:1.95;max-width:600px}.detail-description .detail-meta{margin-top:65px;display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:1px solid var(--ink);padding-top:25px}.detail-meta small{font-size:10px;display:block;margin-bottom:15px;font-weight:700}.detail-meta strong{font-size:13px;line-height:1.5;display:block}.detail-secondary{height:clamp(430px,55vw,900px);background:var(--bg);display:flex;align-items:center;justify-content:center;overflow:hidden}.detail-secondary img{height:85%;max-width:70%;object-fit:contain;transition:transform .8s}.detail-secondary:hover img{transform:scale(1.06)}.detail-next{padding-block:130px}.detail-next h2{font-size:11px;font-weight:700;margin-bottom:22px}.detail-next a{border-top:1px solid var(--ink);padding-top:40px;display:flex;justify-content:space-between;align-items:center;gap:20px}.detail-next strong{font-size:clamp(56px,9vw,150px);letter-spacing:-.035em;line-height:.88}.detail-next span{font-size:clamp(35px,5vw,90px);transition:transform .35s}.detail-next a:hover span{transform:translate(10px,-10px)}
/* Interactive cursor and preview */
.cursor-circle{position:fixed;left:0;top:0;z-index:170;pointer-events:none;border:1px solid var(--ink);border-radius:50%;width:24px;height:24px;opacity:0;transform:translate3d(-50%,-50%,0);will-change:transform,opacity;transition:width .3s,height .3s,background .3s,border-color .3s}.cursor-circle.is-visible{opacity:1}.cursor-circle.is-active{width:85px;height:85px;background:var(--accent);border-color:var(--ink);mix-blend-mode:normal}.cursor-word{position:fixed;left:0;top:0;z-index:171;pointer-events:none;opacity:0;font-size:11px;font-weight:700;white-space:nowrap;transform:translate3d(-50%,-50%,0);will-change:transform,opacity}.cursor-word.is-visible{opacity:1}.hover-preview{position:fixed;z-index:66;top:0;left:0;pointer-events:none;width:min(30vw,430px);height:min(25vw,340px);background:var(--accent);overflow:hidden;opacity:0;transform:translate3d(-50%,-50%,0) scale(.8);transition:opacity .25s,scale .45s var(--ease);will-change:transform}.hover-preview.is-visible{opacity:1;scale:1}.hover-preview img{width:100%;height:100%;object-fit:contain;position:relative;padding:20px}.preview-count{position:absolute;bottom:13px;left:15px;font-size:11px;font-weight:700}.hover-preview .preview-arrow{position:absolute;right:15px;top:10px;font-size:28px}
/* Contact and media preview */
.overlay{position:fixed;z-index:155;inset:0;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s;display:flex;align-items:center;justify-content:center;padding:25px}.overlay.is-open{visibility:visible;opacity:1}.contact-panel,.motion-panel{background:var(--paper);color:var(--ink);width:min(100%,770px);max-height:min(90svh,900px);overflow:auto;padding:clamp(24px,4vw,55px);position:relative;transform:translateY(40px);transition:transform .55s var(--ease)}.overlay.is-open .contact-panel,.overlay.is-open .motion-panel{transform:none}.close-overlay{position:absolute;right:24px;top:24px;border:1px solid #111;width:45px;height:45px;font-size:24px;display:grid;place-items:center;z-index:3}.close-overlay:hover{background:#111;color:#fff}.overlay-kicker{font-size:11px;font-weight:700;letter-spacing:.07em;margin:0 0 60px}.contact-panel h2{font-size:clamp(75px,12vw,150px);font-weight:700;letter-spacing:-.035em;line-height:.83;margin:0 0 50px}.contact-panel>p{font-size:15px;line-height:1.65;max-width:480px}.contact-actions{margin-top:45px;display:flex;gap:10px;flex-wrap:wrap}.contact-actions a,.contact-actions button{border:1px solid var(--ink);font-size:12px;font-weight:700;padding:16px 20px;min-width:150px;display:flex;justify-content:space-between;gap:18px;transition:background .2s}.contact-actions a:hover,.contact-actions button:hover{background:var(--accent)}.motion-panel{width:min(95vw,1100px);padding:25px}.motion-surface{position:relative;display:grid;place-items:center;aspect-ratio:16/9;overflow:hidden;background:var(--motion-bg,var(--accent));margin-top:55px}.motion-surface img{max-height:79%;max-width:78%;object-fit:contain;animation:motion-art 6s ease-in-out infinite alternate}.motion-orbit{position:absolute;border:1px solid currentColor;border-radius:50%;width:70%;aspect-ratio:1;opacity:.2;animation:spin 20s linear infinite}.motion-orbit::after{content:'✳';position:absolute;top:0;left:50%;font-size:70px;transform:translate(-50%,-50%)}.motion-caption{display:flex;justify-content:space-between;gap:30px;align-items:center;margin-top:20px;font-size:11px;font-weight:700}.motion-caption strong{font-size:24px;letter-spacing:-.025em}.motion-caption p{font-size:10px;margin:0;line-height:1.5;text-align:right}.motion-caption .motion-playnote{font-size:10px;color:var(--soft)}@keyframes motion-art{from{transform:translate(-5%,-2%) rotate(-4deg) scale(.95)}to{transform:translate(5%,2%) rotate(4deg) scale(1.08)}}@keyframes spin{to{transform:rotate(360deg)}}
/* Responsive */
@media(max-width:1180px){.hero-home{min-height:780px}.hero-dog-promo{top:clamp(165px,21vh,250px)}.intro-grid{grid-template-columns:34% 66%}.jumbo-title{font-size:clamp(72px,11vw,133px)}.split-header{grid-template-columns:1fr}.heading-action{justify-self:end}.featured-work-info{grid-template-columns:70px minmax(0,1fr) minmax(160px,24%)}.project-mega{font-size:12.4vw}}
/* Compact desktop navigation at intermediate widths; keep CTA in a single line. */
@media(min-width:768px) and (max-width:950px){
  .site-header{gap:10px}
  .desktop-nav{gap:12px}
  .nav-contact{padding:10px 12px;gap:9px;font-size:10px}
}
@media(max-width:767px){:root{--pad:20px}.site-header{height:66px}.desktop-nav,.nav-contact{display:none}.menu-toggle{display:block;z-index:81}.wordmark{font-size:12px}.site-header:has(.menu-toggle[aria-expanded="true"]){background:var(--accent)!important}.hero-home{min-height:0;height:100svh;max-height:none;padding-top:112px;padding-bottom:24px}.edge-note{top:100px;font-size:8px}.edge-note--right{display:none}.hero-title-wrap{padding-top:3vh;transform:translateY(-10px)}.hero-title-wrap .eyebrow{font-size:9px;margin-bottom:30px}.mega-name{font-size:20vw;letter-spacing:-.035em;line-height:.85}.mega-name .mask-line:nth-child(2){margin-top:3vw}.hero-bottom{grid-template-columns:1fr auto;gap:15px}.hero-bottom-center{display:none}.hero-bottom-meta{font-size:9px}.scroll-prompt{gap:8px;font-size:8px}.scroll-prompt .circle-arrow{width:33px;height:33px;font-size:16px}.hero-dog-promo{top:auto;bottom:124px;right:25px;width:145px;height:150px;transform:rotate(4deg)}.hero-dog-promo img{width:77%;height:69%}.promo-bottom{font-size:18px}.intro-section{padding-top:70px;padding-bottom:100px}.section-kicker{font-size:9px;padding-top:13px;gap:4px}.intro-grid{grid-template-columns:1fr;padding-top:45px}.intro-left{flex-direction:row;align-items:end;padding-right:0;margin-bottom:40px}.ring-mark{width:105px;height:105px}.ring-monogram{font-size:46px}.intro-left .micro{text-align:right}.intro-statement{font-size:16.2vw;margin-bottom:37px;letter-spacing:-.035em}.intro-bio{margin-left:0}.intro-bio p{font-size:13px}.intro-bio p:nth-child(2){font-size:12px}.split-header{padding-top:45px;padding-bottom:55px;gap:36px}.jumbo-title{font-size:14.5vw}.heading-action{justify-self:start}.featured-projects{gap:75px}.featured-media{height:460px}.featured-media .work-image-container{inset:12% 9%}.featured-work:nth-child(2n) .work-image-container{inset:12% 11%}.featured-media .project-stamp{left:14px;top:14px;font-size:9px}.featured-media .work-corner{top:11px;right:14px;font-size:28px}.featured-media .media-scroll-line{font-size:9px;bottom:14px;left:14px}.featured-work-info{grid-template-columns:30px 1fr;gap:8px;padding-top:15px}.featured-work-info h3{font-size:29px}.featured-work-info p{grid-column:2;text-align:left;justify-self:start;font-size:10px}.section-end{margin-top:70px;padding-top:35px;gap:20px;flex-wrap:wrap;font-size:9px}.selected-section{padding-bottom:85px}.contact-marquee-section>.section-kicker{padding-top:30px;padding-bottom:55px}.contact-marquee{padding:23px 0}.marquee-track span{font-size:110px}.contact-info{padding-top:60px;padding-bottom:85px;grid-template-columns:1fr}.contact-info p:nth-child(2){font-size:42px}.big-contact{justify-self:start;margin-top:25px}.site-footer{flex-wrap:wrap;gap:22px}.footer-links{gap:20px}.page-hero{padding-top:112px}.page-mega-title{font-size:18.5vw;line-height:.86;margin-top:63px}.about-top-details{margin-top:65px;padding-bottom:25px}.about-top-details p{font-size:10px}.about-bio-section{padding-top:70px;padding-bottom:85px}.about-bio-grid{grid-template-columns:1fr;gap:35px;padding-top:65px}.about-headline{font-size:18vw}.about-copy .jp-large{font-size:22px;margin-bottom:27px}.about-copy p{font-size:13px}.bio-index{margin-top:40px;grid-template-columns:120px 1fr}.expertise-section{padding-bottom:100px}.inner-title{font-size:16vw;margin:60px 0}.expertise-row{grid-template-columns:25px 1fr 23px;gap:10px;padding:27px 0}.expertise-row h3{font-size:32px}.expertise-row p{grid-column:2;font-size:11px}.expertise-row>span:last-child{grid-column:3;grid-row:1;font-size:20px}.timeline-section{padding-bottom:100px}.timeline-header{flex-direction:column;align-items:start;gap:0}.timeline-header .inner-title{margin-bottom:20px}.timeline-header p{margin-bottom:45px}.timeline-row{grid-template-columns:90px 1fr;gap:10px;padding:25px 0}.timeline-row strong{font-size:26px}.timeline-row p{grid-column:2;font-size:11px}.about-next{padding-bottom:90px}.next-page-link{padding-top:55px}.next-page-link>strong{font-size:12vw}.project-mega{font-size:14.3vw;margin-top:65px}.projects-hero-bottom{flex-direction:column;align-items:start;gap:45px;padding-top:75px;padding-bottom:30px}.projects-hero-bottom>p{font-size:15px}.view-switch{font-size:12px}.list-meta{font-size:9px;padding-bottom:35px}.projects-gallery{grid-template-columns:1fr;gap:65px}.gallery-card:nth-child(3n+2){padding-top:0}.gallery-card:nth-child(3n){grid-column:auto;width:100%}.gallery-card-media{aspect-ratio:1/1}.gallery-card-label h2{font-size:31px}.gallery-card-label p{font-size:9px}.all-projects-section{padding-bottom:85px}.list-project-row{grid-template-columns:26px 1fr 25px;gap:8px;padding:30px 0}.list-project-row:hover{padding-inline:0}.list-project-row h2{font-size:34px}.list-project-row p{grid-column:2;font-size:10px}.list-project-row .list-arrow{grid-column:3;grid-row:1;font-size:23px}.detail-page-hero{padding-top:110px}.detail-kicker{margin-top:55px}.detail-page-title{font-size:13vw;margin:52px 0}.detail-hero-art{height:460px}.detail-hero-art img{height:75%;width:90%}.detail-description{padding-top:65px;padding-bottom:80px;grid-template-columns:1fr;gap:30px}.detail-description .big-description{font-size:31px}.detail-description .detail-japanese{font-size:13px}.detail-description .detail-meta{margin-top:45px}.detail-secondary{height:430px}.detail-next{padding-block:85px}.detail-next strong{font-size:12vw}.hover-preview,.cursor-circle,.cursor-word{display:none!important}.overlay{padding:10px}.contact-panel,.motion-panel{padding:24px}.contact-panel h2{font-size:17vw;margin-top:70px}.contact-actions{flex-direction:column}.motion-surface{margin-top:60px;aspect-ratio:1/1}.motion-caption{align-items:start;flex-direction:column;gap:8px}.motion-caption p{text-align:left}.preloader-name{font-size:18vw}}
@media(max-width:400px){.hero-dog-promo{width:125px;height:130px;top:auto;bottom:115px}.promo-bottom{font-size:16px}.hero-bottom-meta{font-size:8px}.jumbo-title{font-size:14vw}.featured-media{height:390px}.mega-name{font-size:20vw}}
@media(hover:none),(pointer:coarse){.featured-media{cursor:pointer}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}.mask-line>.line-inner{transform:none}.preloader{display:none}}

/* Separate functional animated-artwork preview controls */
.featured-motion,.gallery-motion,.detail-motion-button{background:var(--paper);border:1px solid var(--ink);padding:13px 16px;font-weight:700;font-size:10px;letter-spacing:.045em;transition:background .2s,transform .25s;cursor:pointer;display:flex;gap:16px;align-items:center;justify-content:space-between}.featured-motion:hover,.gallery-motion:hover,.detail-motion-button:hover{background:var(--accent);transform:translateY(-3px)}.featured-media-frame{position:relative;isolation:isolate}.featured-motion{position:absolute;right:clamp(16px,2.2vw,32px);bottom:clamp(16px,2.2vw,32px);z-index:5;max-width:calc(100% - 32px)}.gallery-card{position:relative}.gallery-card-media-frame{position:relative;isolation:isolate;width:100%}.gallery-motion{position:absolute;left:18px;bottom:18px;right:auto;top:auto;z-index:4;max-width:calc(100% - 108px);min-height:42px;gap:12px;white-space:nowrap}.detail-motion-button{margin:20px 0 0 auto;padding:17px 22px}@media(max-width:767px){.featured-motion{right:16px;bottom:16px;font-size:9px;padding:11px 13px}.gallery-motion{left:12px;right:auto;top:auto;bottom:12px;font-size:9px;padding:10px 12px;min-height:38px;max-width:calc(100% - 91px)}.detail-motion-button{margin-right:0}}


/* Gallery preview is anchored to the media, never the whole card.
   This keeps the button clear of the caption for every image aspect ratio
   and for variable-length project roles/titles. */
.gallery-card-label{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;column-gap:22px;row-gap:10px}
.gallery-card-label h2{min-width:0;flex:1 1 300px;word-break:normal;overflow-wrap:normal}
.gallery-card-label p{flex:0 1 260px;max-width:100%;min-width:0;margin-left:auto;overflow-wrap:break-word}
@media(max-width:767px){
  .gallery-card-label{gap:10px 18px}
  .gallery-card-label h2{flex-basis:350px}
}
@media(max-width:390px){
  .gallery-card-label p{flex-basis:auto;width:100%;text-align:left;margin-left:0}
  .gallery-card-media .gallery-cta{width:46px;height:46px;font-size:23px}
  .gallery-motion{max-width:calc(100% - 84px);font-size:8px;gap:8px}
}

/* Motion preview: drag-to-pan viewer; keep orbit animation independent of artwork. */
#motion-overlay .motion-surface{
  touch-action:none;
  overscroll-behavior:contain;
  user-select:none;
  -webkit-user-select:none;
  cursor:default;
  outline-offset:4px;
}
#motion-overlay .motion-surface.can-pan{cursor:grab}
#motion-overlay .motion-surface.is-dragging{cursor:grabbing}
#motion-overlay .motion-surface img{
  position:absolute;
  top:50%;left:50%;
  max-width:none;max-height:none;
  width:auto;height:auto;
  pointer-events:none;
  -webkit-user-drag:none;
  user-select:none;
  animation:none;
  transform-origin:center center;
  will-change:transform;
}
#motion-overlay .motion-orbit{pointer-events:none}
#motion-overlay .motion-toolbar{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  flex-wrap:wrap;
}
#motion-overlay .motion-help{
  font-size:10px;font-weight:700;letter-spacing:.04em;
}
#motion-overlay .motion-controls{
  display:flex;align-items:center;gap:4px;
}
#motion-overlay .motion-controls button{
  border:1px solid currentColor;
  background:transparent;
  min-width:38px;
  min-height:38px;
  padding:6px 9px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
#motion-overlay .motion-controls button:hover,
#motion-overlay .motion-controls button:focus-visible{background:var(--accent)}
#motion-overlay .motion-zoom{min-width:46px;text-align:center;font-size:11px;font-weight:700}
@media(max-width:767px){
  #motion-overlay .motion-surface{margin-top:60px}
  #motion-overlay .motion-help{font-size:9px}
  #motion-overlay .motion-controls button{min-height:40px;min-width:40px}
  #motion-overlay .motion-caption{margin-top:18px}
}

/* Let the native grab/grabbing cursor remain visible inside the artwork modal. */
body.is-motion-open .cursor-circle,body.is-motion-open .cursor-word,body.is-motion-open .hover-preview{display:none!important}

/* v1.3 – Artwork CTA stays INSIDE the colored hero frame (all viewports).
   Positioning context is the art area, not the surrounding detail section. */
.detail-hero-art .detail-motion-button{
  position:absolute;
  right:clamp(14px,2.2vw,26px);
  bottom:clamp(14px,2.2vw,26px);
  z-index:4;
  margin:0;
  max-width:calc(100% - 28px);
  min-height:44px;
  white-space:normal;
  text-align:left;
}
/* Leave a clear footer inside the art frame, including short desktop and mobile frames. */
.detail-hero-art > img{max-height:calc(100% - 160px)}
@media(max-width:767px){
  .detail-hero-art .detail-motion-button{
    right:14px;bottom:14px;
    padding:13px 12px;
    font-size:9px;
  }
}


/* Instagram touchpoints — v1.6 (home, about, global footer) */
.contact-link-group{display:flex;flex-direction:column;align-items:flex-start;gap:22px;min-width:0}
.contact-link-group .big-contact{margin:0}
.social-contact{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:6px 15px;font-size:10px;font-weight:700;letter-spacing:.035em;line-height:1.5;border-bottom:1px solid var(--ink);padding:8px 0;max-width:100%;transition:opacity .2s}
.social-contact span{white-space:nowrap;font-size:13px}
.social-contact:hover{opacity:.65}
.about-social-link{display:inline-block;border-bottom:1px solid currentColor;padding-bottom:3px;transition:opacity .2s}
.about-social-link:hover,.footer-instagram:hover{opacity:.65}
.footer-links{flex-wrap:wrap;row-gap:12px}
@media(max-width:767px){.contact-link-group{margin-top:24px;gap:19px}.social-contact{font-size:10px}}

/* Keep the small meta caption clear of the bottom-right preview action on narrow screens. */
@media (max-width: 480px) {
  .featured-media .media-scroll-line { bottom: 68px; }
}

/* v2.3 — Arimo: readable Helvetica-like proportions, with space for wider glyphs. */
.mega-name{font-size:clamp(100px,16.5vw,290px);line-height:.9}
.page-mega-title{font-size:clamp(90px,14vw,245px);line-height:.94}
.project-mega{font-size:clamp(72px,11.8vw,205px)}
.intro-statement{font-size:clamp(64px,9.3vw,155px);line-height:.98}
.jumbo-title{font-size:clamp(62px,10.5vw,172px);line-height:.98}
.about-headline{font-size:clamp(60px,8.3vw,140px);line-height:.98}
.inner-title{font-size:clamp(65px,10.5vw,165px);line-height:.98}
.featured-work-info h3,.gallery-card-label h2,.list-project-row h2,
.expertise-row h3,.timeline-row strong{line-height:1.12;overflow-wrap:anywhere}
.detail-page-title{line-height:1.02}
.detail-next strong,.next-page-link>strong{line-height:1.03}
.wordmark{letter-spacing:-.02em}
.about-copy .jp-large{letter-spacing:0}
@media(min-width:768px){
  .expertise-row{grid-template-columns:7% 42% minmax(0,1fr) 30px}
  .timeline-row{grid-template-columns:17% 38% minmax(0,1fr)}
  .timeline-row strong{font-size:clamp(24px,3.4vw,54px)}
}
@media(min-width:768px) and (max-width:1180px){
  .jumbo-title{font-size:10vw}
  .project-mega{font-size:11.5vw}
}
@media(max-width:767px){
  .mega-name{font-size:19vw;line-height:.94}
  .page-mega-title{font-size:18vw;line-height:.98}
  .project-mega{font-size:12.5vw}
  .intro-statement{font-size:14.2vw}
  .jumbo-title{font-size:13.5vw}
  .about-headline{font-size:17vw}
  .inner-title{font-size:14vw}
  .featured-work-info h3{font-size:clamp(23px,6.4vw,29px)}
  .gallery-card-label h2{font-size:clamp(25px,7vw,31px)}
  .list-project-row h2{font-size:clamp(25px,6.7vw,34px)}
  .expertise-row h3{font-size:clamp(25px,6.6vw,32px)}
  .bio-index{grid-template-columns:100px minmax(0,1fr);column-gap:12px}
  .bio-index strong{overflow-wrap:anywhere}
  .detail-description .big-description{font-size:clamp(27px,6.8vw,31px)}
}

/* v2.4 — Restore the original Helvetica character at the owner's request. */
.mega-name,.page-mega-title,.preloader-name,.transition-curtain::before,
.jumbo-title,.intro-statement,.about-headline,.inner-title,.detail-page-title,
.next-page-link>strong,.detail-next strong,.marquee-track span{font-weight:800}
.mega-name{letter-spacing:-.035em}
.page-mega-title,.jumbo-title,.intro-statement,.about-headline,.inner-title,
.detail-page-title,.next-page-link>strong,.detail-next strong{letter-spacing:-.025em}
.wordmark{font-weight:800;letter-spacing:-.025em}

/* v2.5 — Compact desktop featured captions and inter-project spacing. */
@media(min-width:768px){
  .featured-projects{gap:80px}
  .featured-work-info{grid-template-columns:38px minmax(0,1fr) minmax(160px,24%);column-gap:14px;row-gap:8px;padding-top:16px;margin-top:12px}
}

/* More breathing room before the desktop inquiry CTA. */
@media(min-width:768px){.nav-contact{margin-left:24px}}

/* Expertise translations share a grid cell: switching never shifts adjacent rows. */
.expertise-swap{display:grid;align-items:center}
.expertise-swap>span{grid-area:1/1;display:block;transition:opacity .3s ease,transform .4s var(--ease),visibility .4s}
.expertise-swap>.expertise-ja{font-family:'Zen Kaku Gothic New',sans-serif;opacity:0;transform:translateY(.65em);visibility:hidden}
.expertise-row h3 .expertise-ja{font-size:.74em;letter-spacing:0;line-height:1.5}
.expertise-row:focus .expertise-en{opacity:0;transform:translateY(-.65em);visibility:hidden}
.expertise-row:focus .expertise-ja{opacity:1;transform:none;visibility:visible}
@media(hover:hover){
  .expertise-row:hover .expertise-en{opacity:0;transform:translateY(-.65em);visibility:hidden}
  .expertise-row:hover .expertise-ja{opacity:1;transform:none;visibility:visible}
}
@media(prefers-reduced-motion:reduce){.expertise-swap>span{transition:none;transform:none}}

/* Career translations: same slide/fade as expertise, without changing proper names. */
.timeline-swap{display:grid;align-items:center;min-width:0}
.timeline-swap>span{grid-area:1/1;display:block;transition:opacity .3s ease,transform .4s var(--ease),visibility .4s}
.timeline-swap>.timeline-ja{font-family:'Zen Kaku Gothic New',sans-serif;opacity:0;transform:translateY(.65em);visibility:hidden}
.timeline-row strong .timeline-ja{font-size:.74em;letter-spacing:0;line-height:1.5}
.timeline-row:focus .timeline-en{opacity:0;transform:translateY(-.65em);visibility:hidden}
.timeline-row:focus .timeline-ja{opacity:1;transform:none;visibility:visible}
@media(hover:hover){
 .timeline-row:hover .timeline-en{opacity:0;transform:translateY(-.65em);visibility:hidden}
 .timeline-row:hover .timeline-ja{opacity:1;transform:none;visibility:visible}
}
@media(prefers-reduced-motion:reduce){.timeline-swap>span{transition:none;transform:none}}

/* Additional original character artworks, in the supplied order. */
.detail-artworks{display:grid;gap:clamp(24px,4vw,64px);padding-top:clamp(24px,4vw,64px)}
.detail-artwork{margin:0;background:#f7f7f2;padding:clamp(20px,5vw,72px);display:grid;place-items:center}
.detail-artwork img{display:block;width:100%;max-width:900px;height:auto}

/* Preserve the supplied promo artwork's colors and show the full composition. */
.hero-dog-promo img{filter:none;width:calc(100% - 24px);height:60%;left:12px;bottom:52px;object-position:center}

/* OF's wide campaign visual needs a wide frame rather than the bag artwork's narrow inset. */
@media(min-width:768px){
 .featured-media[href="project.html?id=of-skincare"]{height:clamp(420px,48vw,760px)}
 .featured-work:nth-child(2n) .featured-media[href="project.html?id=of-skincare"] .work-image-container{inset:9% 13%}
}

.about-copy-en{margin-top:48px;padding-top:40px;border-top:1px solid var(--line)}
.about-copy .en-large{font-size:clamp(20px,2vw,30px);font-weight:700;line-height:1.35;letter-spacing:-.025em;margin-bottom:30px}

/* Let the Japanese about headline flow naturally on desktop. */
@media(min-width:768px){.about-copy .jp-large br{display:none}}

.detail-description .detail-japanese{white-space:pre-line}

/* Detail supporting images: full content width, natural proportions, no colored frames. */
.detail-secondary{height:auto;background:none;display:block;overflow:visible}
.detail-secondary img{display:block;width:100%;height:auto;max-width:100%;object-fit:contain;transition:none}
.detail-secondary:hover img{transform:none}
.detail-artworks{gap:clamp(20px,3vw,44px);padding-top:clamp(20px,3vw,44px)}
.detail-artwork{background:none;padding:0;display:block}
.detail-artwork img{width:100%;max-width:100%;height:auto}

/* Keep supporting images centered at a comfortable reading width. */
.detail-secondary,.detail-artwork{width:86%;max-width:1100px;margin-inline:auto}
@media(max-width:767px){.detail-secondary,.detail-artwork{width:92%}}

/* Portrait character artworks read better at a narrower, centered width. */
.detail-artworks[data-project="nosey-character"] .detail-artwork{width:76%;max-width:760px}
@media(max-width:767px){.detail-artworks[data-project="nosey-character"] .detail-artwork{width:86%}}

/* Each supporting artwork opens its own preview; controls sit below the image. */
.detail-secondary,.detail-artwork{position:relative}
.artwork-preview{display:flex;align-items:center;gap:20px;margin:14px 0 0 auto;padding:12px 16px;border:1px solid var(--ink);background:var(--paper);font-size:10px;font-weight:700;letter-spacing:.045em;min-height:42px}
.artwork-preview:hover{background:var(--accent)}

/* Supporting artwork preview controls are anchored inside each image. */
.detail-secondary>.artwork-preview,.detail-artwork>.artwork-preview{
 position:absolute;right:clamp(10px,1.6vw,22px);bottom:clamp(10px,1.6vw,22px);
 z-index:2;margin:0;max-width:calc(100% - 20px);
}
@media(max-width:767px){
 .detail-secondary>.artwork-preview,.detail-artwork>.artwork-preview{padding:9px 12px;font-size:9px;min-height:36px;gap:12px}
}