:root { --ink:#1b1f1d; --paper:#f3f1eb; --line:rgba(27,31,29,.22); --cedar:#765d49; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Noto Sans JP",sans-serif; font-size:15px; line-height:1.9; }
a { color:inherit; text-decoration:none; }
.site-header { display:flex; justify-content:space-between; align-items:flex-start; padding:24px 4vw; position:absolute; z-index:2; width:100%; color:#fff; }
.brand { line-height:1.35; }
.brand-jp { display:block; font-size:15px; letter-spacing:.08em; font-weight:500; }
.brand-en { display:block; margin-top:4px; font:10px/1.3 "DM Mono",monospace; letter-spacing:.06em; }
nav { display:flex; gap:20px; align-items:center; font:10px/1 "DM Mono",monospace; letter-spacing:.06em; }
nav a { opacity:.86; } nav a:hover { opacity:1; }
.nav-contact { border:1px solid rgba(255,255,255,.75); padding:10px 13px; }
.hero { min-height:100svh; display:grid; grid-template-columns:60% 40%; background:var(--ink); color:#fff; position:relative; overflow:hidden; }
.hero-image-wrap { min-height:100%; overflow:hidden; position:relative; }
.hero-image-wrap::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent 38%,rgba(27,31,29,.16) 61%,var(--ink) 100%); }
.hero-image { width:100%; height:100%; object-fit:cover; object-position:46% center; filter:brightness(.73) saturate(.85); transform:scale(1.01); }
.hero-copy { display:flex; flex-direction:column; justify-content:center; padding:12vw 8vw 8vw 5vw; position:relative; z-index:1; }
.eyebrow,.section-kicker { margin:0 0 26px; font:11px/1.3 "DM Mono",monospace; letter-spacing:.12em; }
h1,h2 { font-family:"Noto Serif JP",serif; font-weight:500; letter-spacing:.04em; line-height:1.45; margin:0; }
h1 { font-size:clamp(38px,4.6vw,72px); }
.hero-lead { margin:38px 0 35px; font-size:15px; color:rgba(255,255,255,.85); }
.text-link { display:inline-flex; width:max-content; gap:21px; align-items:center; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.7); font-size:13px; }
.text-link span { font-size:18px; }
.hero-side-note { position:absolute; right:28px; bottom:25px; margin:0; font:9px/1.5 "DM Mono",monospace; letter-spacing:.09em; text-align:right; opacity:.6; }
.works { padding:135px 9vw 145px; background:#161a18; color:#fff; }
.works-head { max-width:1200px; margin:0 auto 70px; display:grid; grid-template-columns:1fr 1fr; column-gap:8vw; align-items:end; }
.works-head .section-kicker { grid-column:1/-1; }
.works-head > p { max-width:320px; margin:0; color:rgba(255,255,255,.72); }
.works-grid { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.work-card { margin:0; }
.work-placeholder { min-height:350px; display:flex; flex-direction:column; justify-content:space-between; padding:17px; color:#d8d2c5; background:linear-gradient(145deg,#303530,#1c211e 55%,#88715a); border:1px solid rgba(255,255,255,.15); }
.work-placeholder span { font:12px/1 "DM Mono",monospace; letter-spacing:.08em; }
.work-placeholder p { margin:0; font:11px/1.65 "DM Mono",monospace; letter-spacing:.1em; }
.work-card h3 { margin:17px 0 2px; font-family:"Noto Serif JP",serif; font-size:17px; font-weight:500; }
.work-card > p { margin:0; color:rgba(255,255,255,.56); font-size:12px; }
.section-pad { padding:150px 9vw; }
.intro { background:#e7e3db; }
.intro-copy { display:grid; grid-template-columns:1.05fr 1fr; gap:10vw; max-width:1200px; margin:0 auto; }
h2 { font-size:clamp(31px,3.2vw,52px); }
.intro-copy p { margin:0 0 24px; }
.material { display:grid; grid-template-columns:50% 50%; background:#242824; color:#fff; }
.material-photo { min-height:690px; }
.material-photo img { width:100%; height:100%; display:block; object-fit:cover; object-position:50% 70%; filter:saturate(.84); }
.material-copy { padding:10vw 9vw; display:flex; flex-direction:column; align-items:flex-start; }
.material-copy p { max-width:410px; margin:36px 0; color:rgba(255,255,255,.8); }
.material-link { border-bottom:1px solid rgba(255,255,255,.7); padding:0 0 8px; font-size:13px; }
.material-link span { margin-left:18px; font-size:16px; }
.material-credit { margin-top:auto!important; padding-top:65px; font:9px/1.5 "DM Mono",monospace; letter-spacing:.08em; opacity:.57; }
.gallery { background:var(--paper); }
.gallery-head { max-width:1200px; margin:0 auto 75px; display:grid; grid-template-columns:1.1fr 1fr; column-gap:8vw; align-items:end; }
.gallery-head .section-kicker { grid-column:1/-1; }
.gallery-head p { margin:0; max-width:340px; }
.gallery-grid { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:42% 1fr; gap:5vw; align-items:center; }
.gallery-image { margin:0; }
.gallery-image img { width:100%; display:block; object-fit:cover; }
.gallery-tall img { aspect-ratio:3/4; }
.gallery-wide { margin-top:115px; }
.gallery-wide img { aspect-ratio:4/3; }
figcaption { margin-top:11px; font:10px/1.4 "DM Mono",monospace; letter-spacing:.08em; }
.office { padding-left:0; padding-right:0; display:grid; grid-template-columns:54% 46%; background:#c8c8bf; }
.office-photo img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 55%; }
.office-copy { padding:10vw 9vw 10vw 7vw; }
.office-copy > p { max-width:410px; margin:36px 0; }
.representative { max-width:520px; padding:20px 0 21px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.representative span { display:block; font:10px/1.4 "DM Mono",monospace; letter-spacing:.1em; }
.representative strong { display:block; margin-top:8px; font-family:"Noto Serif JP",serif; font-size:24px; font-weight:500; letter-spacing:.08em; }
.representative p { margin:9px 0 0; font-size:13px; line-height:1.75; }
dl { border-top:1px solid var(--line); margin:34px 0 0; max-width:520px; }
dl div { display:grid; grid-template-columns:122px 1fr; border-bottom:1px solid var(--line); padding:13px 0; }
dt { font:10px/2 "DM Mono",monospace; letter-spacing:.08em; } dd { margin:0; font-size:13px; }
.contact { background:var(--cedar); color:#fff; text-align:center; padding:145px 24px; }
.contact .section-kicker { margin-bottom:32px; opacity:.75; }
.contact h2 { font-size:clamp(34px,4vw,59px); }
.contact > p:not(.section-kicker) { margin:27px 0 38px; color:rgba(255,255,255,.86); }
.contact-button { display:inline-flex; gap:26px; align-items:center; padding:16px 23px; background:#fff; color:var(--ink); font-size:13px; transition:transform .2s ease; }
.contact-button:hover { transform:translateY(-3px); }
.contact-actions { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.contact-button-outline { color:#fff; border:1px solid rgba(255,255,255,.72); background:transparent; }
footer { display:flex; justify-content:space-between; gap:24px; padding:20px 4vw; background:var(--ink); color:#fff; font:10px/1.5 "DM Mono",monospace; letter-spacing:.07em; }
footer p { margin:0; }
@media (max-width:700px) { .site-header { padding:18px 20px; } .brand-jp { font-size:13px; } .brand-en { font-size:8px; } nav { display:none; } .hero { grid-template-columns:1fr; min-height:760px; } .hero-image-wrap { position:absolute; inset:0; } .hero-image { object-position:47% center; } .hero-copy { z-index:1; justify-content:flex-end; padding:110px 26px 75px; background:linear-gradient(transparent 37%,rgba(0,0,0,.55)); } .hero-side-note { right:21px; bottom:22px; } .works { padding:85px 26px; } .works-head { display:block; margin-bottom:39px; } .works-head h2 { margin-bottom:24px; } .works-grid { grid-template-columns:1fr; gap:18px; } .work-placeholder { min-height:220px; } .section-pad { padding:90px 26px; } .intro-copy,.gallery-head { display:block; } .intro-copy h2,.gallery-head h2 { margin-bottom:35px; } .material { display:block; } .material-photo { min-height:106vw; } .material-copy { padding:77px 26px; } .gallery-head { margin-bottom:40px; } .gallery-grid { display:block; } .gallery-wide { margin-top:28px; margin-left:13vw; } .office { display:block; padding:0; } .office-photo { height:65vw; } .office-copy { padding:77px 26px 90px; } .contact { padding:100px 26px; } footer { display:block; padding:20px; } footer p + p { margin-top:8px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .contact-button { transition:none; } }