/* Domi selected B: Avenir Next Heavy. Keep the approved logos and mono details. */
:root{--headline:'Avenir Next',Avenir,'Helvetica Neue',Arial,sans-serif}
h1,h2,h3,.copy h1,.profile h2,.portfolio-heading h2,.selected-caption h3,.character-intro h1,.project-head h1,.process h2,.video-project-copy h3,.world-hero h1,.heading h2,.project-meta h3,.studio-reel h3,.still-study h3,.collection h3,.world-outro h2,.detail-intro h1,.ai-stage .right-note b,.home-worlds b,.section-contact>a:not(.back-home),.character-end>a:first-of-type{font-family:var(--headline);font-weight:800;letter-spacing:-.025em;line-height:.98}
.copy h1{font-size:clamp(52px,6.8vw,112px)}
.world-hero h1,.design-world h1{font-size:clamp(52px,6.9vw,110px);margin:30px 0}
.studio-world h1{font-size:clamp(48px,5.7vw,91px)}
.ai-world h1{font-size:clamp(68px,10.8vw,170px);margin:30px 0 25px}
.universe-world h1{font-size:clamp(60px,7.6vw,120px)}
.ai-stage .right-note b{font-size:clamp(27px,3.5vw,52px);line-height:1.1}
.heading h2{font-size:clamp(34px,4vw,62px);max-width:750px}
.project-meta h3,.design-feature .project-meta h3{font-size:clamp(40px,5vw,78px)}
.studio-reel h3{font-size:clamp(42px,5vw,80px)}
.still-study h3{font-size:clamp(38px,4.5vw,65px)}
.collection h3{font-size:clamp(45px,5.7vw,90px)}
.world-outro h2{font-size:clamp(48px,6.8vw,106px)}
.detail-intro h1{font-size:clamp(52px,8vw,126px);overflow-wrap:anywhere}
.character-intro h1,.project-head h1{font-size:clamp(46px,6.7vw,100px)}
.portfolio-heading h2,.process h2{font-size:clamp(38px,5vw,72px)}
.home-worlds b{font-size:clamp(24px,2.4vw,36px)}
.profile h2{font-size:clamp(22px,2.5vw,37px);line-height:1.25}
.selected-caption h3,.character-portfolio .selected-caption h3{font-size:clamp(30px,3.8vw,52px)}
.section-contact>a:not(.back-home),.character-end>a:first-of-type{font-size:clamp(46px,7.8vw,120px)}
@media(max-width:900px){.copy h1{font-size:7vw}.world-hero h1,.design-world h1{font-size:7vw}.studio-world h1{font-size:6.2vw}.universe-world h1{font-size:8vw}}
@media(max-width:600px){.copy h1{font-size:12vw;line-height:1}.world-hero h1,.design-world h1{font-size:12.2vw}.studio-world h1{font-size:10.2vw}.universe-world h1{font-size:14vw}.ai-world h1{font-size:13vw}.heading h2{font-size:9.2vw}.project-meta h3,.design-feature .project-meta h3{font-size:13vw}.studio-reel h3{font-size:12vw}.collection h3{font-size:13vw}.world-outro h2{font-size:10.5vw}.detail-intro h1{font-size:12vw}.character-intro h1,.project-head h1{font-size:11vw}.section-contact>a:not(.back-home),.character-end>a:first-of-type{font-size:11vw}.home-worlds b{font-size:30px}}
/* Warm originals accompany the orange; the OPPOS identity itself is unchanged. */
.warm-feature{grid-template-columns:.65fr 1.35fr;gap:35px}
.warm-feature .warm-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;align-items:start}
.warm-feature .warm-pair img{width:100%;height:auto;display:block}
.warm-feature .warm-main{width:100%;height:auto;display:block}
.green-selection{background:#153b2c;color:#e3eddf;padding:55px 4.7%}
.green-selection .heading{display:flex;justify-content:space-between;gap:25px;align-items:end;margin-bottom:30px}
.green-selection .heading>span{font-size:9px;color:#9ec3a7;letter-spacing:1px}
.green-works{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.green-works figure{margin:0;min-width:0}
.green-works a{display:block;aspect-ratio:2/3;background:#0e221a;overflow:hidden}
.green-works img{width:100%;height:100%;object-fit:contain;display:block;transition:scale .5s}
.green-works a:hover img{scale:1.015}
.green-works figcaption{font-size:10px;padding:15px 0;line-height:1.7;display:flex;justify-content:space-between;gap:15px;color:#c5d8c9}
.green-selection .source-note{font-size:9px;line-height:1.8;color:#97b99e;max-width:650px;margin-top:18px}
.green-selection a:focus-visible{outline-color:#d6e5d2}
@media(max-width:600px){.warm-feature .warm-pair{gap:8px}.green-selection{padding:35px 5%}.green-selection .heading{display:block}.green-selection .heading h2{margin-top:15px}.green-works{grid-template-columns:1fr;gap:25px}.green-works a{aspect-ratio:auto}.green-works img{height:auto}.green-works a:hover img{scale:1}}
.project-lead h1{font:800 clamp(64px,9vw,130px)/.98 var(--headline);letter-spacing:-.025em}
.project-end>a:nth-child(2){font:800 clamp(46px,7vw,110px)/1 var(--headline);letter-spacing:-.025em}
@media(max-width:600px){.project-lead h1{font-size:17vw}.project-end>a:nth-child(2){font-size:11vw}}
.warm-feature .warm-pair{margin:0 0 12px}.warm-feature .warm-pair img{aspect-ratio:4/5;height:100%;object-fit:cover}.warm-feature .warm-pair>a:last-child img{object-position:50% 60%}
/* Project headers have two links; keep contact visible when the second-item rule collapses navigation. */
@media(max-width:900px){header nav>a.talk{display:inline-block}}
/* Collection images keep their intrinsic ratio; HTML height attributes must not stretch them. */
.collections .collection{grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(28px,6vw,85px);max-width:1160px;margin:0 auto;padding:42px 0;align-items:center}
.collections .collection:nth-child(odd){grid-template-columns:minmax(0,1fr) minmax(0,.85fr)}
.collections .collection>a{display:block;width:100%;max-width:540px;justify-self:end}
.collections .collection:nth-child(odd)>a{justify-self:start}
.collections .collection img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
.collections .collection>div{max-width:430px}
@media(max-width:600px){.collections .collection,.collections .collection:nth-child(odd){display:flex;flex-direction:column;gap:22px;padding:30px 0;align-items:stretch}.collections .collection>a,.collections .collection:nth-child(odd)>a{order:0;max-width:100%;margin-top:0}.collections .collection>div{max-width:none}}

/* Slightly softer neutral charcoal, retaining the original palette. */
:root{--ink:#252525}
.collections{color:#292929}

/* Long contact headlines need open counters and distinct neighbouring letters. */
.world-outro h2,.section-contact>a:not(.back-home),.character-end>a:first-of-type{letter-spacing:-.015em;line-height:1.04}

/* Neutral matte charcoal: equal RGB channels remove the olive cast. */
body[data-home]{background-color:#202020;color:#eeeeee}
body[data-home] .copy h1 span{display:inline-block;min-height:1.12em;vertical-align:top;line-height:1.08;letter-spacing:-.025em;font-family:var(--headline);font-weight:800}
body[data-form="3d"] .copy h1 span{font-family:"Arial Black","Avenir Next",Arial,sans-serif;font-weight:900;letter-spacing:-.035em}
body[data-form="ia"] .copy h1 span{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:700;letter-spacing:-.04em}
body[data-form="universos"] .copy h1 span{font-family:DVKMono,monospace;font-weight:700;letter-spacing:-.035em;font-size:1em}
@media(prefers-reduced-motion:reduce){body[data-home] .copy h1 span{transition:none}}

/* Section slogans and the peace signature share the section's accent. */
.heading .slogan-lockup{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);color:var(--accent);min-width:0;max-width:850px}
.heading .slogan-lockup h2{color:inherit;min-width:0;max-width:none;margin:0;line-height:1.04}
.peace-kanji{display:inline-block;flex:none;writing-mode:horizontal-tb;font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;font-size:clamp(23px,2.8vw,40px);font-weight:900;line-height:1.1;letter-spacing:.08em}
@media(max-width:600px){.exhibition .heading{align-items:start;flex-direction:column;gap:20px}.heading .slogan-lockup{width:100%;justify-content:space-between;gap:16px}.heading .slogan-lockup h2{font-size:8.7vw}.peace-kanji{font-size:26px}.green-selection .heading .slogan-lockup{margin-top:15px}.green-selection .heading .slogan-lockup h2{margin-top:0}}

/* Align the small label with the centre of the slogan and peace signature. */
.exhibition .heading,.green-selection .heading{align-items:center}
@media(max-width:600px){.exhibition .heading{align-items:stretch}}
/* An editorial index of work, with artwork and restrained section accents. */
.work-index{padding:70px 4.7% 40px;max-width:1920px;margin:auto}
.work-index-label{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:24px;color:#aaa}
.work-index-label h2,.work-index-label>span{font:10px/1.6 DVKMono,monospace;letter-spacing:1px;margin:0}
.index-entry{display:grid;grid-template-columns:55px minmax(0,1fr) 118px 48px;align-items:center;gap:32px;padding:26px 0;border-top:1px solid #ffffff28;position:relative}
.index-entry:last-child{border-bottom:1px solid #ffffff28}
.entry-number{font:12px DVKMono,monospace;color:var(--entry-colour);align-self:start;padding-top:12px}
.entry-copy{min-width:0}
.entry-copy h3{font:800 clamp(30px,4.6vw,70px)/1.08 var(--headline);letter-spacing:-.025em;margin:0 0 12px;color:#eee;transition:color .3s,translate .3s}
.entry-copy p{font:10px/1.7 DVKMono,monospace;color:#aaa;margin:0}
.entry-image{margin:0;justify-self:center;width:105px;height:132px;overflow:hidden;transition:transform .35s}
.entry-image img{display:block;width:100%;height:100%;object-fit:contain}
.entry-arrow{font:36px/1 Arial,sans-serif;color:var(--entry-colour);justify-self:end;transition:translate .3s}
.index-entry:hover h3,.index-entry:focus-visible h3{color:var(--entry-colour);translate:8px 0}
.index-entry:hover .entry-image,.index-entry:focus-visible .entry-image{transform:rotate(-3deg)}
.index-entry:hover .entry-arrow,.index-entry:focus-visible .entry-arrow{translate:4px -4px}
@media(max-width:600px){.work-index{padding:40px 5% 20px}.work-index-label{padding-bottom:20px}.work-index-label h2,.work-index-label>span{font-size:8px;letter-spacing:.4px}.index-entry{grid-template-columns:23px minmax(0,1fr) 66px 18px;gap:12px;padding:24px 0;min-height:131px}.entry-number{font-size:9px;padding-top:5px}.entry-copy h3{font-size:clamp(23px,6.5vw,36px);margin-bottom:9px;line-height:1.07}.entry-copy p{font-size:8px;line-height:1.7}.entry-image{width:66px;height:88px}.entry-arrow{font-size:23px}.index-entry:hover h3,.index-entry:focus-visible h3{translate:0 0}}
@media(prefers-reduced-motion:reduce){.index-entry *{transition:none!important}.index-entry:hover .entry-image{transform:none}}

/* Peace mark: drawn with consistent heavy strokes at every size. */
.peace-symbol{display:block;flex:none;width:clamp(32px,3.6vw,51px);height:auto;fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:600px){.peace-symbol{width:34px}}
/* The professional introduction is reading copy, with natural word spacing. */
body[data-home] .profile{align-items:start}
body[data-home] .profile h2{font-family:'Avenir Next',Avenir,'Helvetica Neue',Arial,sans-serif;font-weight:500;font-size:clamp(22px,2.5vw,37px);line-height:1.45;letter-spacing:0;word-spacing:normal;max-width:850px;margin:0 0 34px;text-wrap:pretty}
body[data-home] .profile>span{padding-top:9px;color:#b8b8b8}
@media(max-width:600px){body[data-home] .profile h2{font-size:23px;line-height:1.5;margin-top:22px}body[data-home] .profile>span{padding-top:0}}
/* Header follows FORMAS through the same --accent value. */
body[data-home]>header{background-color:var(--accent);color:#252525;border-bottom-color:#25252540;transition:none}
body[data-home]>header .brand>b{border-right-color:#25252545}
body[data-home]>header .brand>span{font-family:var(--headline);font-weight:800;font-size:18px;letter-spacing:.035em;line-height:1.1}
body[data-home]>header .brand small{font-family:DVKMono,monospace;font-weight:400;line-height:1.4;letter-spacing:1.5px}
body[data-home]>header .talk{border-bottom-color:currentColor}
body[data-home]>header a:focus-visible{outline-color:#252525}
@media(max-width:900px){body[data-home]>header .brand>span{font-size:15px}body[data-home]>header .brand small{letter-spacing:.7px}}
@media(max-width:580px){body[data-home]>header .brand>span{font-size:12px;letter-spacing:.02em}body[data-home]>header .brand small{font-size:4.5px;letter-spacing:.4px}}

body[data-home] .copy h1 span{transition:none}