:root { --ink:#080808; --paper:#f2f0eb; --accent:#ff4c19; --gutter:clamp(1.25rem,3vw,3rem); --ease:cubic-bezier(.22,1,.36,1); }
* { box-sizing:border-box; }
html { background:var(--ink); color:#fff; font-family:Arial,Helvetica,sans-serif; scroll-behavior:smooth; overflow-x:clip; }
body { max-width:100%;margin:0;overflow-x:clip; }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:2px solid var(--accent);outline-offset:4px; }
.external-mark { position:relative;display:inline-block;flex:0 0 auto;width:.82em;height:.82em;vertical-align:-.04em; }
.external-mark::before { content:"";position:absolute;left:.08em;bottom:.08em;width:.92em;height:1px;background:currentColor;transform:rotate(-45deg);transform-origin:left center; }
.external-mark::after { content:"";position:absolute;top:0;right:0;width:.42em;height:.42em;border-top:1px solid currentColor;border-right:1px solid currentColor; }
.site-head { position:relative; z-index:5; height:5rem; padding:0 var(--gutter); display:grid; grid-template-columns:1fr auto; align-items:center; border-bottom:1px solid #333; font-size:.68rem; letter-spacing:.14em; }
.brand { font-size:1rem; font-weight:700; letter-spacing:-.04em; }
.back { padding:.65rem 0; border-bottom:1px solid #777; }
.contact-dock { position:fixed;z-index:9;left:var(--gutter);bottom:1.25rem;display:flex;align-items:center;gap:.8rem;padding:.55rem .7rem;border:1px solid rgba(255,255,255,.38);background:rgba(8,8,8,.72);color:#fff;backdrop-filter:blur(10px); }
.contact-dock a { display:flex;align-items:center;gap:.45rem;font-size:.68rem;letter-spacing:.1em;transition:color .25s,transform .4s var(--ease); }
.contact-dock a+a { padding-left:.8rem;border-left:1px solid #555;color:#aaa;font-size:.62rem; }
.contact-dock a:hover { color:var(--accent);transform:translateY(-2px); }
.contact-dock .external-mark { color:var(--accent); }
main { min-height:100vh; }
.project-detail { background:#080808; }
.work-hero { padding:clamp(5rem,10vw,10rem) var(--gutter) 3rem; overflow:hidden; }
.eyebrow { display:flex; justify-content:space-between; margin:0 0 4rem; color:#999; font-size:.65rem; letter-spacing:.15em; }
h1 { position:relative; z-index:1; max-width:11ch; margin:0; font-size:clamp(4rem,12vw,13rem); font-weight:500; line-height:.78; letter-spacing:-.085em; overflow-wrap:normal; word-break:keep-all; }
.has-japanese-title h1 { max-width:13ch;line-height:.92;letter-spacing:-.06em; }
.has-single-line-title h1 { max-width:none;font-size:clamp(3rem,6.8vw,8.5rem);line-height:.9;letter-spacing:-.07em;white-space:nowrap; }
.unt { margin:-.08em 0 0; color:transparent; -webkit-text-stroke:1px #404040; font-size:clamp(8rem,27vw,32rem); font-weight:700; line-height:.65; letter-spacing:-.12em; white-space:nowrap; }
.film { position:relative; width:min(calc(100% - 2 * var(--gutter)),100rem); aspect-ratio:16/9; margin:0 auto; background:#000; overflow:hidden; }
.film iframe { display:block; width:100%; height:100%; margin:0; border:0; transform:none; filter:none; }
.protected-film { isolation:isolate; }
.protected-film > iframe { filter:saturate(.28) brightness(.5) contrast(1.05);pointer-events:none; }
.protected-copy { position:absolute;z-index:2;left:50%;top:50%;width:min(42rem,calc(100% - 2rem));transform:translate(-50%,-50%);text-align:center; }
.protected-copy p { margin:0 0 1rem;font-size:clamp(.72rem,1vw,.9rem);line-height:1.8;letter-spacing:.04em; }
.protected-copy div { display:flex;justify-content:center;flex-wrap:wrap;gap:.8rem;margin-top:2rem; }
.protected-copy a { padding:.8rem 1rem;border:1px solid rgba(255,255,255,.65);background:rgba(8,8,8,.72);font-size:.68rem;letter-spacing:.12em;backdrop-filter:blur(8px); }
.protected-copy a:hover,.protected-copy a:focus-visible { background:#fff;color:#080808; }
.details { display:grid; grid-template-columns:minmax(15rem,1fr) minmax(18rem,2fr); gap:clamp(4rem,10vw,14rem); padding:clamp(5rem,10vw,10rem) var(--gutter) 9rem; }
.facts { margin:0; }
.facts div { display:grid; grid-template-columns:5rem 1fr; padding:.85rem 0; border-top:1px solid #444; }
.facts dt,.facts dd { margin:0; font-size:.7rem; line-height:1.5; letter-spacing:.1em; }
.facts dt { color:#777; }
.project-record { max-width:44rem; margin:0; font-size:clamp(1.25rem,2.2vw,2.3rem); line-height:1.4; letter-spacing:-.025em; }
.credits { display:grid;grid-template-columns:1fr 2fr;gap:clamp(4rem,10vw,14rem);padding:0 var(--gutter) clamp(7rem,12vw,13rem); }
.credits h2 { margin:0;font-size:.7rem;font-weight:400;letter-spacing:.15em; }
.credits ul { margin:0;padding:0;list-style:none; }
.credits li { display:grid;grid-template-columns:minmax(10rem,1fr) 2fr auto;gap:1rem;padding:1rem 0;border-top:1px solid #444;font-size:.8rem;line-height:1.5;letter-spacing:.08em; }
.credits li span { color:#777; }
.credits li strong { font-weight:400; }
.credits li small { color:#666;font-size:.62rem;letter-spacing:.12em; }
.credits li a { border-bottom:1px solid #777; }
.project-detail[data-project-id="02"] .unt { transform:translateX(20vw) scaleX(.7); }
.project-detail[data-project-id="03"] { --paper:#eeeae4; }
.project-detail[data-project-id="03"] .unt { filter:blur(5px);opacity:.55;font-family:Georgia,serif;font-style:italic; }
.project-detail[data-project-id="04"] .work-hero { background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:8vw 8vw; }
.project-detail[data-project-id="05"] .unt { text-shadow:-12px 0 rgba(255,0,0,.25),14px 0 rgba(0,90,255,.3);filter:contrast(1.8); }
.project-detail[data-project-id="07"] .work-hero { background:repeating-radial-gradient(ellipse at 70% 40%,transparent 0 28px,rgba(255,255,255,.05) 29px,transparent 30px); }
.project-detail[data-project-id="09"] .unt { transform:translateX(8vw) scaleX(.72);letter-spacing:-.04em; }
.project-detail[data-project-id="10"] h1 { max-width:8ch; }
.project-detail[data-interaction="beauty"] .unt { font-family:Georgia,serif;font-style:italic;filter:blur(2px); }
.project-detail[data-interaction="outdoor-organic"] .work-hero { background:repeating-radial-gradient(ellipse at 70% 40%,transparent 0 28px,rgba(255,255,255,.05) 29px,transparent 30px); }
.next { display:flex; justify-content:space-between; align-items:end; padding:5rem var(--gutter); background:var(--paper); color:var(--ink); }
.next span { font-size:.65rem; letter-spacing:.15em; }
.next strong { max-width:9ch; font-size:clamp(2rem,6vw,6rem); line-height:.82; letter-spacing:-.06em; text-align:right; }
.about { padding:clamp(6rem,12vw,13rem) var(--gutter); background:var(--paper); color:var(--ink); }
.about h1 { max-width:10ch; }
.about-copy { display:grid; grid-template-columns:1fr 2fr; gap:10vw; margin-top:10rem; }
.about-copy p { margin:0; font-size:clamp(1.35rem,2.6vw,2.8rem); line-height:1.38; letter-spacing:-.03em; }
.about-copy dl { margin:0; }
.about-copy dl div { display:grid; grid-template-columns:7rem 1fr; padding:1rem 0; border-top:1px solid #aaa; font-size:.72rem; letter-spacing:.1em; }
.about-copy dt,.about-copy dd { margin:0; }
.about-copy dt { color:#777; }
@media(max-width:700px){.site-head{height:4rem}.work-hero{padding-top:4rem}.eyebrow{margin-bottom:2.5rem}.has-japanese-title h1{font-size:clamp(2.8rem,12vw,4.2rem);line-height:1;letter-spacing:-.055em}.has-single-line-title h1{font-size:clamp(1.5rem,6.9vw,2.65rem);line-height:1;letter-spacing:-.075em;white-space:nowrap}.unt{margin-top:.25em}.details,.about-copy,.credits{grid-template-columns:1fr;gap:4rem}.credits li{grid-template-columns:1fr 1fr}.credits li small{display:none}.project-record{font-size:1.3rem}.next{align-items:start}.next strong{font-size:2.2rem}.about-copy{margin-top:6rem}.film{width:calc(100% - 2 * var(--gutter))}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(max-width:700px){.contact-dock{left:1rem;bottom:max(1rem,env(safe-area-inset-bottom));padding:.5rem .6rem}.contact-dock a{font-size:.62rem}}