/* Real-time pigment and scroll scenes: mosaic, curve, particles, paint reveal. */
.hero{background:#060706}
.hero-visual{animation:none;filter:none;opacity:.2;transition:opacity 1.2s;background-position:center}
.has-fluid .hero-visual{opacity:0}
.fluid-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hero:after{z-index:2;background:linear-gradient(90deg,rgba(3,5,4,.68),rgba(3,5,4,.23) 38%,transparent 67%),linear-gradient(0deg,rgba(3,5,4,.7),transparent 22%)}
.hero-content{padding-top:65px;padding-bottom:90px}
.hero-caption{font-size:15px;letter-spacing:.05em}
.hero-note{color:#e5ded0;text-shadow:0 1px 12px #000}
.artist-mark{text-shadow:0 2px 15px #000}
.grain{opacity:.075}
.hero h1{text-shadow:0 2px 24px #0003}
.intro{padding-bottom:80px}
.mosaic-journey{position:relative;height:285svh;background:var(--paper)}
.mosaic-stage{position:sticky;top:0;height:100svh;min-height:620px;display:flex;align-items:center;padding:60px 8.3% 88px;overflow:hidden;isolation:isolate}
.mosaic-copy{position:relative;z-index:2;width:43%;max-width:500px}
.mosaic-copy .eyebrow{font-size:14px;color:var(--gold);letter-spacing:.21em}
.mosaic-copy h2{font-size:clamp(24px,2.5vw,38px);font-weight:400;line-height:1.95;letter-spacing:.1em;margin:28px 0 23px;white-space:nowrap}
.mosaic-description{font-size:14px;letter-spacing:.05em;line-height:2.7}
.mosaic-description p{margin:0 0 20px}
.mosaic-description .text-link{font-size:14px;margin-top:3px}
.mosaic-composition{position:absolute;inset:0 0 0 42%;margin:0;z-index:0;pointer-events:none}
.mosaic-frame{position:absolute;inset:0;background:transparent}
.mosaic-frame>img{width:100%;height:100%;object-fit:fill}
.has-mosaic .mosaic-frame>img{opacity:0}
.mosaic-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mosaic-meta{display:flex;align-items:center;gap:25px;margin-top:30px;font-size:14px;letter-spacing:.1em;color:#857b68}
.mosaic-count{font-family:var(--en);font-variant-numeric:tabular-nums;font-size:17px;white-space:nowrap}
.mosaic-bottom{position:absolute;bottom:28px;left:8.3%;right:58%;z-index:2;display:flex;align-items:center;gap:25px;font-family:var(--sans);font-size:14px;letter-spacing:.15em;color:#9a865f}
.mosaic-bottom>span{white-space:nowrap}
.mosaic-bottom>span:last-child{display:none}
.mosaic-meter{display:block;flex:1;height:1px;background:#a88b5538;overflow:hidden}
.mosaic-meter b{display:block;height:100%;background:var(--gold);transform:scaleX(0);transform-origin:left}
.brush-journey{position:relative;height:165svh;min-height:650px;background:var(--paper)}
.brush-stage{position:sticky;top:0;height:100svh;min-height:600px;overflow:hidden;isolation:isolate}
.brush-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.brush-heading{position:absolute;top:45px;left:8.3%;z-index:2;pointer-events:none}
.brush-heading .eyebrow{color:var(--gold);font-size:14px}
.brush-heading h2{font-size:clamp(28px,3.3vw,48px);font-weight:400;letter-spacing:.14em;line-height:1.9;margin:25px 0 0}
.brush-caption{position:absolute;right:8.3%;bottom:45px;z-index:2}
.brush-caption>span{font-family:var(--sans);font-size:14px;letter-spacing:.2em;color:#9a865f}
.brush-caption p{font-size:17px;line-height:2.3;letter-spacing:.15em;margin:15px 0}
.paint-journey{height:210svh}
.paint-stage{background:var(--paper)}
.paint-label{position:absolute;top:50px;left:8.3%;z-index:3;color:var(--gold);font-size:14px}
.paint-message{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);z-index:2;color:var(--ink);font-size:clamp(38px,6.6vw,100px);font-weight:500;line-height:1.8;letter-spacing:.12em;text-align:center;margin:0;white-space:nowrap;pointer-events:none}
.has-paint-reveal .paint-message{color:var(--paper)}
.paint-caption{position:absolute;bottom:39px;left:8.3%;right:8.3%;z-index:3;display:flex;justify-content:space-between;gap:25px;color:#9a865f;font-family:var(--sans);font-size:14px;letter-spacing:.17em}
.particle-journey{height:270svh;position:relative;background:#0a0b09}
.particle-stage{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;background:#0a0b09;isolation:isolate}
.particle-before,.particle-after{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:45px 8%;will-change:opacity,transform}
.particle-before{color:var(--paper);z-index:1;align-items:flex-start;text-align:left;padding:60px 8.3%}
.particle-before .eyebrow,.particle-after .eyebrow{color:var(--gold);font-size:14px;letter-spacing:.25em}
.particle-before h2,.particle-after h2{font-size:clamp(38px,5.8vw,84px);font-weight:400;line-height:1.8;letter-spacing:.17em;margin:32px 0}
.particle-before h2{font-size:clamp(32px,3.6vw,52px);letter-spacing:.14em}
.particle-before .eyebrow{font-size:14px}
.particle-before p{font-family:var(--sans);font-size:14px;letter-spacing:.2em;color:#a99b80;margin-top:10px}
.particle-after{color:var(--ink);opacity:0;z-index:2;pointer-events:none}
.particle-after .text-link{pointer-events:auto}
.particle-after .eyebrow:before{background:var(--red)}
.particle-artwork{position:absolute;left:66.5%;top:50%;transform:translate(-50%,-50%);width:min(43vw,76svh);margin:0;z-index:2;pointer-events:none}
.particle-artwork img{display:block;width:100%;height:auto}
.particle-artwork figcaption{position:absolute;top:100%;left:0;right:0;margin-top:17px;display:flex;justify-content:space-between;color:#a99a7e;font-family:var(--sans);font-size:14px;letter-spacing:.16em}
.particle-artwork figcaption span{font-family:var(--serif);font-size:14px;letter-spacing:.2em}
.has-artwork-particles .particle-artwork img{opacity:0}
.particle-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.particle-progress{position:absolute;bottom:50px;left:8.3%;right:8.3%;z-index:4;display:flex;align-items:center;gap:30px;color:#b3996e;font-family:var(--sans);font-size:14px;letter-spacing:.15em;pointer-events:none}
.particle-progress i{flex:1;height:1px;background:#9d805044;overflow:hidden}
.particle-progress b{display:block;height:1px;width:100%;background:#b99a62;transform:scaleX(0);transform-origin:left}
.particle-counter{font-family:var(--en);font-size:19px;min-width:25px}
.skip-particle{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:5;font-family:var(--sans);font-size:14px;letter-spacing:.1em;color:#9c8969;padding:8px 12px;white-space:nowrap;opacity:.8}
.skip-particle:hover{opacity:1;text-decoration:underline}
.home-works{border-top:none;padding-top:100px}
.motion-paused .particle-before,.motion-paused .particle-after{will-change:auto}
@media (min-width:761px) and (max-width:1194px), (min-width:1195px) and (max-width:1366px) and (min-height:780px){
 .mosaic-journey,.brush-journey,.particle-journey{--scene-layout:tablet}
 .hero{height:min(calc(94svh - 99px),820px);min-height:0;max-height:820px}
 .hero-content{padding:55px 6% 90px}
 .hero h1{font-size:clamp(58px,6.6vw,82px);line-height:1.5}
 .hero .eyebrow{font-size:14px;letter-spacing:.16em}
 .hero-note{font-size:14px}
 .mosaic-journey{--scene-height:min(88svh,780px);height:calc(var(--scene-height) + 85svh)}
 .mosaic-stage{height:var(--scene-height);min-height:0;top:calc((100svh - var(--scene-height))/2);padding:45px 6% 70px}
 .mosaic-copy{width:42%;max-width:430px}
 .mosaic-copy h2{font-size:clamp(25px,2.6vw,32px);line-height:1.9;letter-spacing:.07em;margin:24px 0 20px}
 .mosaic-description{font-size:15px;line-height:2.5;letter-spacing:.03em}
 .mosaic-description p{margin-bottom:18px}
 .mosaic-description .text-link{font-size:14px;line-height:1.6;min-height:44px;padding:9px 0}
 .mosaic-description .text-link b{line-height:1}
 .mosaic-composition{inset:auto auto auto max(34%,calc(100% - var(--scene-height)));top:50%;transform:translateY(-50%);width:var(--scene-height);height:var(--scene-height)}
 .mosaic-meta{gap:18px;margin-top:24px}
 .mosaic-bottom{left:6%;right:58%;bottom:25px;gap:18px}
 .curve-journey{--scene-height:min(86svh,760px);height:calc(var(--scene-height) + 65svh);min-height:0}
 .brush-stage{height:var(--scene-height);min-height:0;top:calc((100svh - var(--scene-height))/2)}
 .brush-heading{left:6%;top:35px}
 .brush-heading h2{font-size:clamp(30px,3.4vw,39px);line-height:1.8;margin-top:24px}
 .brush-caption{left:6%;right:6%;bottom:28px;display:flex;align-items:flex-end;justify-content:space-between;gap:25px}
 .brush-caption p{font-size:15px;line-height:2.2;text-align:right;margin:0}
 .paint-journey{--scene-height:min(82svh,700px);height:calc(var(--scene-height) + 70svh);min-height:0}
 .paint-label{left:6%;top:35px}
 .paint-message{font-size:clamp(50px,5.6vw,68px);top:52%;line-height:1.8}
 .paint-caption{left:6%;right:6%;bottom:28px}
 .particle-journey{--scene-height:min(90svh,780px);height:calc(var(--scene-height) + 115svh)}
 .particle-stage{height:var(--scene-height);min-height:0;top:calc((100svh - var(--scene-height))/2)}
 .particle-before{padding:45px 6%}
 .particle-before h2{font-size:clamp(29px,3vw,36px);line-height:1.8;letter-spacing:.1em;margin:26px 0}
 .particle-after h2{font-size:clamp(44px,5.4vw,60px);line-height:1.8;margin:26px 0}
 .particle-artwork{left:70%;top:50%;width:min(46vw,64svh)}
 .particle-progress{left:6%;right:6%;bottom:45px}
 .skip-particle{bottom:17px}
}
@media(min-width:761px) and (max-width:1194px) and (max-height:700px){
 .hero-content{padding-top:30px;padding-bottom:70px}
 .hero .eyebrow{margin-bottom:22px}
 .hero h1{font-size:clamp(50px,6.6vw,66px);line-height:1.4;margin-bottom:18px}
 .hero-note{font-size:14px;line-height:2.2}
 .hero .text-link{font-size:14px;margin-top:18px}
}
@media(max-width:760px){
 .mosaic-journey{--scene-height:min(100svh,calc(100vw + 275px));height:calc(var(--scene-height) + 90svh)}
 .mosaic-stage{height:var(--scene-height);min-height:0;top:calc((100svh - var(--scene-height))/2);display:block;padding:30px 8% 0}
 .mosaic-copy{width:100%;max-width:none}
 .mosaic-stage:after{content:none}
 .mosaic-copy .eyebrow{font-size:14px}
 .mosaic-copy h2{font-size:22px;line-height:1.8;margin:18px 0 14px;letter-spacing:.04em;white-space:nowrap;max-width:none}
 .mosaic-description{font-size:14px;line-height:2.25;letter-spacing:.03em}
 .mosaic-description p{margin:0 0 12px}
 .mosaic-description p+p{display:none}
 .mosaic-description .text-link{font-size:14px;margin-top:0;min-height:42px;padding:8px 0;line-height:1.5}
 .mosaic-description .text-link b{font-size:20px;line-height:1}
 .mosaic-composition{inset:auto -9% 0 auto;width:min(100vw,calc(var(--scene-height) - 285px));height:auto;aspect-ratio:1}
 .mosaic-meta{display:none}
 .mosaic-bottom{left:8%;right:63%;bottom:18px;font-size:14px;gap:10px}
 .mosaic-bottom>span:last-child{display:none}
 .hero{height:calc(92svh - 80px);min-height:0;max-height:760px}
 .hero-visual{opacity:.18}
 .hero:after{background:linear-gradient(90deg,rgba(4,5,4,.7),rgba(4,5,4,.25) 65%,transparent),linear-gradient(0deg,#040504b0,transparent 45%)}
 .hero-content{padding-top:65px;padding-bottom:80px}
 .hero-caption{font-size:14px;max-width:49%;line-height:1.8}
 .hero-controls{gap:12px}
 .hero .eyebrow{max-width:75%;font-size:14px}
 .hero h1{font-size:clamp(45px,10.7vw,72px)}
 .artist-mark{top:30px}
 .curve-journey{--scene-height:min(90svh,calc(100vw + 210px));height:calc(var(--scene-height) + 60svh);min-height:0}
 .brush-stage{height:var(--scene-height);min-height:0;top:calc((100svh - var(--scene-height))/2)}
 .brush-heading{top:30px;left:8%}
 .brush-heading h2{font-size:29px;line-height:1.9;margin-top:22px}
 .brush-heading .eyebrow{font-size:14px}
 .brush-caption{left:8%;right:8%;bottom:22px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
 .brush-caption>span{font-size:14px}
 .brush-caption p{font-size:14px;line-height:2;margin:0;text-align:right}
 .paint-journey{--scene-height:min(82svh,calc(100vw + 180px));height:calc(var(--scene-height) + 65svh);min-height:0}
 .paint-label{top:28px;left:8%;font-size:14px}
 .paint-message{top:52%;font-size:clamp(24px,7.7vw,36px);line-height:1.85;letter-spacing:.1em}
 .paint-caption{bottom:24px;left:8%;right:8%;font-size:14px;letter-spacing:.1em;gap:12px}
 .particle-journey{--scene-height:min(100svh,calc(100vw + 250px));height:calc(var(--scene-height) + 110svh)}
 .particle-stage{height:var(--scene-height);min-height:0;top:calc((100svh - var(--scene-height))/2)}
 .particle-before{justify-content:flex-start;padding:32px 8% 0}
 .particle-before h2{font-size:25px;line-height:1.8;margin:18px 0 10px}
 .particle-after h2{font-size:34px;letter-spacing:.11em;line-height:1.85;margin:24px 0}
 .particle-before .eyebrow,.particle-after .eyebrow{font-size:14px;letter-spacing:.16em}
 .particle-before p{font-size:14px;letter-spacing:.2em}
 .particle-artwork{left:50%;top:57%;width:90%;max-width:calc(var(--scene-height) * .85)}
 .particle-artwork figcaption{font-size:14px;margin-top:14px}
 .particle-progress{left:8%;right:8%;bottom:53px;gap:18px;font-size:14px}
 .particle-counter{font-size:17px}
 .skip-particle{font-size:14px}
 .home-works{padding-top:65px}
}
@media(max-width:760px) and (max-height:700px){
 .hero-content{padding-top:35px;padding-bottom:65px}
 .hero .eyebrow{margin-bottom:18px}
 .hero h1{font-size:clamp(40px,10.7vw,48px);line-height:1.5;margin-bottom:14px}
 .hero-note{font-size:14px;line-height:2.2}
 .hero .text-link{margin-top:16px}
 .artist-mark{top:20px}
}
@media(prefers-reduced-motion:reduce){
 .mosaic-journey{height:auto}
 .mosaic-stage{position:relative;top:0}
 .particle-journey{height:auto;min-height:0}
 .particle-stage{position:relative;top:0;background:var(--paper)!important}
 .particle-before,.particle-artwork,.particle-canvas,.particle-progress{display:none}
 .particle-after{opacity:1!important;transform:none!important}
 .brush-journey{height:auto;min-height:0}
 .brush-stage{position:relative;top:0}
 .fluid-canvas{filter:none}
 .hero-visual{transition:none}
}

/* White-paper ink comparison, enabled only with ?ink=white. */
.hero:is(.hero-white,.ink-white .hero){background:#fff;color:#171714}
:is(.hero-white,.ink-white .hero) .hero-visual{background-image:radial-gradient(ellipse at 75% 35%,#b49148 0,transparent 38%),radial-gradient(ellipse at 65% 70%,#a52d22 0,transparent 42%),radial-gradient(ellipse at 95% 50%,#171714 0,transparent 48%);opacity:.55}
.hero:is(.hero-white,.ink-white .hero):after{background:linear-gradient(90deg,rgba(255,255,255,.88),rgba(255,255,255,.4) 34%,transparent 63%),linear-gradient(0deg,rgba(255,255,255,.7),transparent 22%)}
:is(.hero-white,.ink-white .hero) .eyebrow{color:#82662e}
:is(.hero-white,.ink-white .hero) .hero-note{color:#38382f}
:is(.hero-white,.ink-white .hero) .text-link{color:#5f4922;border-color:#9b7d3e}
:is(.hero-white,.ink-white .hero) .artist-mark,:is(.hero-white,.ink-white .hero) .hero-bottom{color:#282820}
:is(.hero-white,.ink-white .hero) .motion-toggle{color:#282820;border-color:#81776280}
:is(.hero-white,.ink-white .hero) .scroll-cue i{background:#625a46}
:is(.hero-white,.ink-white .hero) .grain{opacity:.045}

:is(.hero-white,.ink-white .hero) .fluid-canvas{background:#fff}

.has-fluid :is(.hero-white,.ink-white .hero) .hero-visual{opacity:0}

@media(max-width:760px){html:not([lang^="ja"]):not([lang^="zh"]) .paint-message{width:76%;white-space:normal;font-size:clamp(22px,6.5vw,30px);line-height:1.65;letter-spacing:.025em;overflow-wrap:normal}}

/* Mobile hero: group the headline, then supporting copy and the action. */
@media(max-width:760px){.hero-content{justify-content:center;align-items:flex-start;gap:0;padding:72px 9% 100px}.hero .eyebrow{margin:0 0 18px;line-height:1.5;letter-spacing:.1em;max-width:76%}.hero h1{font-size:clamp(42px,12.2vw,58px);line-height:1.22;letter-spacing:.045em;margin:0 0 26px;flex-shrink:0}.hero-note{font-size:16px;line-height:1.85;letter-spacing:.035em;margin:0;max-width:100%}.hero .text-link{margin:28px 0 0;padding:8px 0;font-size:15px;letter-spacing:.06em;min-height:44px}.hero-bottom{left:9%;right:9%;bottom:22px;justify-content:flex-end}.hero-caption{display:none}.hero-controls{gap:16px}.scroll-cue{font-size:13px;letter-spacing:.08em;line-height:1.4}.hero .artist-mark{right:6%}}

.hero .artist-mark strong {
  font-size: 54px;
  line-height: 1;
  letter-spacing: .2em;
}

@media (max-width: 760px) {
  .hero .artist-mark { right: 5%; }
  .hero .artist-mark strong { font-size: clamp(34px, 10vw, 40px); }
}