:root { color-scheme: light; --ink:#111; --paper:#fff; --panel:#f3f3f3; --line:#d8d8d8; --blue:#00a8e8; font-family:"Meiryo UI",Meiryo,Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-size:16px; line-height:1.75; }
a { color:inherit; }
.skip-link { position:fixed; z-index:20; top:0; left:1rem; padding:.6rem 1rem; color:#fff; background:#000; transform:translateY(-120%); }
.skip-link:focus { transform:translateY(0); }
.site-header { position:absolute; z-index:5; inset:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:1.6rem 3.2vw; }
.brand { display:flex; align-items:center; gap:.5rem; color:#111; font-size:1rem; font-weight:900; letter-spacing:.04em; line-height:1; text-decoration:none; }
.brand-icon { width:2rem; height:2rem; flex:0 0 auto; object-fit:cover; clip-path:circle(44.25% at 50% 50%); }
nav { display:flex; gap:clamp(1.2rem,3vw,3rem); }
nav a { position:relative; font-size:.72rem; font-weight:700; letter-spacing:.09em; text-decoration:none; }
nav a::after { content:""; position:absolute; right:0; bottom:-.45rem; left:0; height:2px; background:#111; transform:scaleX(0); transform-origin:left; transition:transform .2s ease; }
nav a:hover::after,nav a:focus-visible::after { transform:scaleX(1); }
.hero { min-height:100svh; display:grid; grid-template-columns:minmax(0,47%) minmax(0,53%); background:var(--panel); }
.hero-art { min-height:100svh; display:grid; place-items:center; overflow:hidden; background:#fff; }
.hero-art img { width:min(58vw,52rem); max-width:none; aspect-ratio:1; object-fit:cover; clip-path:circle(44.25% at 50% 50%); }
.hero-copy { display:grid; align-content:center; padding:7rem 4vw 3rem; border-left:1px solid var(--line); }
.kicker,.section-label { margin:0; font-size:.7rem; font-weight:700; letter-spacing:.16em; }
h1 { margin:2.4rem 0 4rem; font-family:"Arial Black","Meiryo UI",Meiryo,sans-serif; font-size:clamp(4.2rem,8.4vw,9rem); font-weight:900; letter-spacing:-.075em; line-height:.86; }
h1 span { display:block; }
.hero-bottom { display:flex; align-items:end; justify-content:space-between; gap:2rem; padding-top:1.4rem; border-top:2px solid #111; }
.hero-bottom p,.hero-bottom span { margin:0; font-size:.72rem; font-weight:700; letter-spacing:.08em; line-height:1.6; }
.hero-bottom span { color:#777; }
.section { display:grid; grid-template-columns:minmax(10rem,1fr) minmax(0,3fr); gap:5vw; padding:clamp(6rem,10vw,10rem) 3.2vw; border-top:1px solid var(--line); }
.section-body { max-width:62rem; }
h2 { margin:-.1em 0 3rem; font-family:"Arial Black","Meiryo UI",Meiryo,sans-serif; font-size:clamp(3rem,6.3vw,7rem); font-weight:900; letter-spacing:-.065em; line-height:.95; }
.intro .section-body>p,.philosophy-grid>p { max-width:44rem; margin:0; font-size:clamp(1rem,1.25vw,1.2rem); }
.section-heading h2 { margin-top:2rem; }
.works { grid-template-columns:minmax(20rem,.9fr) minmax(0,1.6fr); gap:clamp(3rem,6vw,7rem); color:#fff; background:#111; }
.works .section-heading h2 { font-size:clamp(2.8rem,4.8vw,5.8rem); }
.works-list { border-top:1px solid #555; }
.work-row { position:relative; display:grid; grid-template-columns:3rem minmax(0,1fr) 11rem 2.5rem; gap:.8rem; align-items:center; min-height:9rem; border-bottom:1px solid #555; }
.work-number,.work-meta,.work-row small { font-size:.67rem; font-weight:700; letter-spacing:.1em; }
.work-title { font-size:clamp(1.5rem,3vw,3.2rem); font-weight:700; }
.work-meta { color:#a8a8a8; }
.work-arrow { font-size:2rem; text-align:right; }
.work-row small { position:absolute; right:4rem; bottom:1rem; color:var(--blue); }
.philosophy-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(16rem,.7fr); gap:5vw; align-items:end; }
.philosophy-grid h2 { margin:0; }
.social { background:var(--panel); }
.social-links { display:flex; align-items:center; justify-content:center; gap:clamp(2rem,4.5vw,4rem); min-height:18rem; padding:clamp(3rem,6vw,6rem) clamp(1rem,4vw,4rem); }
.social-link { display:block; width:clamp(2.7rem,4.2vw,4rem); aspect-ratio:1; color:#111; transition:opacity .2s ease,transform .2s ease; }
.social-link svg { display:block; width:100%; height:100%; }
.social-link:hover,.social-link:focus-visible { opacity:.65; transform:translateY(-3px); }
footer { display:grid; grid-template-columns:1.4fr 1fr; gap:4rem; padding:5rem 3.2vw 2rem; color:#fff; background:#111; }
.footer-brand { font-family:"Arial Black","Meiryo UI",sans-serif; font-size:clamp(2rem,5vw,5rem); font-weight:900; letter-spacing:-.06em; line-height:1; text-decoration:none; }
footer p,footer div a { margin:0; font-size:.7rem; font-weight:700; letter-spacing:.08em; }
footer div a { display:inline-block; margin-top:1.2rem; }
footer>p { grid-column:1/-1; padding-top:4rem; border-top:1px solid #444; }
@media (max-width:800px) {
  .site-header { flex-wrap:wrap; gap:.65rem; padding:1rem 1.2rem; background:rgba(255,255,255,.94); }
  .brand { width:100%; }
  nav { width:100%; justify-content:space-between; gap:.7rem; }
  nav a { font-size:.61rem; }
  .hero { grid-template-columns:1fr; padding-top:5rem; }
  .hero-art { min-height:auto; aspect-ratio:1; }
  .hero-art img { width:100vw; }
  .hero-copy { padding:3rem 1.2rem 2.4rem; border-top:1px solid var(--line); border-left:0; }
  h1 { margin:1.8rem 0 2.5rem; font-size:clamp(3.4rem,19vw,5.8rem); }
  .section { grid-template-columns:1fr; padding-inline:1.2rem; }
  h2 { margin-top:1rem; }
  .work-row { grid-template-columns:2rem minmax(0,1fr) 2rem; min-height:8rem; }
  .work-meta { grid-column:2; }
  .work-arrow { grid-column:3; grid-row:1/3; }
  .work-row small { right:3rem; }
  .philosophy-grid { grid-template-columns:1fr; }
  .social-links { padding-bottom:1rem; }
  footer { grid-template-columns:1fr; padding-inline:1.2rem; }
  footer>p { grid-column:1; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } nav a::after,.social-link { transition:none; } }