:root {
  --bg:#f7f5f0; --hero-bg:#fbfaf7; --paper:#fffef9; --text:#171717; --muted:#727272;
  --line:#dcd8cf; --yellow:#f8e985; --blue:#bcdff5; --pink:#f1cad4;
  --green:#cfe5c7; --purple:#d8cdf0; --orange:#f2d0a4; --radius:24px;
  --shadow:0 14px 40px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--text);
  background:radial-gradient(circle at 20% 0%,rgba(255,255,255,.9),transparent 36%),var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic","YuGothic","Noto Sans JP",sans-serif
}
a{color:inherit;text-decoration:none}
.site-header{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:20px 5vw;background:rgba(247,245,240,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(0,0,0,.05)
}
.brand{font-weight:800;letter-spacing:-.04em}
.nav{display:flex;gap:24px;font-size:14px;color:var(--muted)}
.nav a:hover{color:var(--text)}
.hero{min-height:68vh;display:flex;align-items:stretch;background:var(--hero-bg);overflow:hidden}
.hero-inner{
  position:relative;width:min(1380px,100%);min-height:clamp(590px,68vh,760px);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(460px,.98fr);align-items:center;
  padding-left:max(6vw,calc((100vw - 1380px)/2 + 48px))
}
.hero-copy{position:relative;z-index:2;padding:88px 24px 66px 0}
.hero-kicker,.eyebrow{font-size:12px;letter-spacing:.18em;font-weight:800;color:var(--muted)}
.hero h1{
  margin:14px 0 30px;font-size:clamp(60px,7.7vw,118px);line-height:.9;
  letter-spacing:-.07em;font-weight:900;white-space:nowrap
}
.hero h1 span{
  display:block;margin-top:26px;font-size:clamp(28px,3.6vw,54px);line-height:1;
  letter-spacing:-.05em;font-weight:700;white-space:normal
}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px}
.hero-meta span{padding:7px 12px;border:1px solid var(--line);border-radius:999px;font-size:12px;color:var(--muted);background:rgba(255,255,255,.56)}
.hero-art{position:relative;align-self:stretch;min-width:0;margin:0;overflow:hidden;background:#fff}
.hero-art::before{
  content:"";position:absolute;inset:0 auto 0 0;z-index:1;width:20%;pointer-events:none;
  background:linear-gradient(90deg,var(--hero-bg) 0%,rgba(251,250,247,.86) 30%,rgba(251,250,247,0) 100%)
}
.hero-art img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:55% 50%}
.section{width:min(1240px,calc(100% - 10vw));margin:0 auto;padding:70px 0}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:28px}
.section-heading h2{margin:6px 0 0;font-size:clamp(28px,4vw,52px);letter-spacing:-.05em}
.project-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.project-card{
  position:relative;min-height:290px;padding:26px;display:flex;flex-direction:column;justify-content:space-between;
  border:1px solid rgba(0,0,0,.08);border-radius:var(--radius);overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease
}
.project-card:hover{transform:translateY(-5px) rotate(-.35deg);box-shadow:var(--shadow)}
.project-card:nth-child(1),.project-card:nth-child(4),.project-card:nth-child(7){grid-column:span 7}
.project-card:nth-child(2),.project-card:nth-child(3),.project-card:nth-child(5),.project-card:nth-child(6),.project-card:nth-child(8){grid-column:span 5}
.project-number{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;opacity:.55}
.project-title{margin:18px 0 6px;font-size:clamp(28px,3.4vw,48px);line-height:.95;letter-spacing:-.055em}
.project-desc{max-width:520px;font-size:14px;line-height:1.7;color:rgba(0,0,0,.62)}
.project-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.project-latest{margin-top:30px;font-size:12px;color:rgba(0,0,0,.55)}
.project-latest strong{display:block;margin-top:4px;font-size:14px;color:var(--text)}
.project-arrow{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.75);font-size:20px;transition:transform .2s ease}
.project-card:hover .project-arrow{transform:rotate(45deg)}
.project-comment{position:absolute;right:20px;bottom:0;width:180px;height:170px;pointer-events:none;opacity:0;transform:translateY(105%);transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .2s ease;z-index:3}
.project-card:hover .project-comment,.project-card:focus-visible .project-comment,.project-card.is-peeking .project-comment{opacity:1;transform:translateY(0)}
.project-card:focus-visible{outline:3px solid var(--text);outline-offset:4px}
.comment-bubble{position:absolute;bottom:95px;right:0;max-width:180px;padding:12px 16px;border:2px solid var(--text);border-radius:20px 20px 5px 20px;background:var(--paper);font-size:15px;font-weight:700;line-height:1.5;box-shadow:3px 4px 0 rgba(0,0,0,.12);transform:rotate(-4deg)}
.comment-bubble::after{content:"";position:absolute;right:32px;bottom:-9px;width:14px;height:14px;background:var(--paper);border-right:2px solid var(--text);border-bottom:2px solid var(--text);transform:rotate(45deg)}
.comment-character{position:absolute;bottom:-2px;right:0;width:180px;height:100px;overflow:hidden}
.comment-character img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 2px 1px rgba(0,0,0,.12))}
.project-comment.from-top{top:0;bottom:auto;height:190px;transform:translateY(-105%)}
.from-top .comment-character{top:-6px;bottom:auto;height:105px}
.from-top .comment-bubble{bottom:10px}
.from-top .comment-bubble::after{top:-9px;bottom:auto;transform:rotate(225deg)}
.project-comment.from-left{left:0;right:auto;bottom:0;width:240px;transform:translateX(-105%)}
.from-left .comment-character{left:-10px;right:auto;width:150px;height:115px}
.from-left .comment-bubble{left:100px;right:auto;bottom:65px;width:140px;font-size:14px}
.project-comment.from-right{right:0;bottom:0;width:240px;transform:translateX(105%)}
.from-right .comment-character{right:-10px;width:150px;height:115px}
.from-right .comment-bubble{right:100px;bottom:65px;width:140px;font-size:14px}
.project-card:hover .project-comment,.project-card:focus-visible .project-comment,.project-card.is-peeking .project-comment{opacity:1;transform:translate(0,0)}
.tone-yellow{background:var(--yellow)} .tone-blue{background:var(--blue)}
.tone-pink{background:var(--pink)} .tone-green{background:var(--green)}
.tone-purple{background:var(--purple)} .tone-orange{background:var(--orange)}
.tone-paper{background:var(--paper)}
.latest-section{padding-top:110px}
.latest-heading{border-bottom:1px solid var(--line);padding-bottom:24px}
.live-badge{display:flex;align-items:center;gap:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--muted)}
.live-dot{width:7px;height:7px;border-radius:50%;background:#56b56a;box-shadow:0 0 0 4px rgba(86,181,106,.13)}
.update-item{display:grid;grid-template-columns:110px 210px 1fr 30px;gap:22px;align-items:center;padding:22px 4px;border-bottom:1px solid var(--line);transition:padding .18s ease}
.update-item:hover{padding-left:10px}
.update-date,.update-project{font-size:12px;color:var(--muted)}
.update-project{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.update-title{font-size:17px;font-weight:700;letter-spacing:-.02em}
.update-arrow{text-align:right}
.past-section{
  width:min(1240px,calc(100% - 10vw));margin:80px auto 120px;padding:46px;
  display:flex;justify-content:space-between;align-items:flex-end;border-radius:32px;background:#161616;color:#f6f3eb
}
.past-copy h2{margin:8px 0;font-size:clamp(34px,5vw,70px);letter-spacing:-.06em}
.past-copy p:last-child{color:rgba(255,255,255,.55)}
.past-link{flex-shrink:0;display:flex;justify-content:space-between;align-items:center;width:150px;padding:16px 18px;border:1px solid rgba(255,255,255,.2);border-radius:999px}
.footer{display:flex;justify-content:space-between;padding:30px 5vw 50px;border-top:1px solid var(--line);color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}

@media (max-width:1050px){
  .hero-inner{grid-template-columns:minmax(0,.95fr) minmax(390px,1.05fr);padding-left:5vw}
  .hero h1{font-size:clamp(56px,7.4vw,78px)}
  .hero h1 span{font-size:clamp(28px,3.9vw,42px)}
}
@media (max-width:760px){
  .nav{display:none}
  .hero{min-height:auto}
  .hero-inner{display:flex;min-height:0;flex-direction:column;padding:0}
  .hero-copy{width:100%;padding:70px 5vw 34px}
  .hero h1{font-size:clamp(50px,17vw,76px);white-space:normal}
  .hero h1 span{margin-top:18px;font-size:clamp(27px,8.5vw,40px)}
  .hero-art{width:100%;height:clamp(410px,128vw,620px);background:var(--hero-bg)}
  .hero-art::before{inset:0 0 auto;width:100%;height:16%;background:linear-gradient(180deg,var(--hero-bg),rgba(251,250,247,0))}
  .hero-art img{width:100%;object-position:60% 48%}
  .project-card,.project-card:nth-child(n){grid-column:span 12;min-height:360px}
  .project-comment.from-top{top:auto;bottom:0;height:170px;transform:translateY(-400%)}
  .from-top .comment-character{top:auto;bottom:-2px}
  .from-top .comment-bubble{bottom:95px}
  .from-top .comment-bubble::after{top:auto;bottom:-9px;transform:rotate(45deg)}
  .from-left .comment-character{bottom:38px}
  .from-left .comment-bubble{bottom:100px}
  .project-card:hover .project-comment,.project-card:focus-visible .project-comment,.project-card.is-peeking .project-comment{transform:translate(0,0)}
  .update-item{grid-template-columns:82px 1fr 24px;gap:12px}
  .update-project{display:none}
  .past-section{align-items:flex-start;flex-direction:column;gap:32px;padding:30px}
  .footer{gap:20px;flex-direction:column}
}
@media (max-width:420px){
  .hero-copy{padding-top:58px}
  .hero h1{font-size:clamp(46px,16vw,64px)}
  .hero-meta{max-width:340px}
  .hero-art{height:440px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}