* { box-sizing: border-box; }
:root { --bg:#f5f3ef; --paper:#fff; --text:#222; --muted:#716f6a; --line:#ddd8cf; }
body { margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; line-height:1.7; }
.wrap { width:min(1120px, calc(100% - 32px)); margin:auto; }
.hero { padding:72px 0 64px; background:#171717; color:#fff; }
.hero h1 { margin:8px 0 14px; font-size:clamp(2rem,5vw,4.2rem); letter-spacing:.02em; line-height:1.1; }
.hero p { max-width:760px; color:#d6d6d6; }
.eyebrow { margin:0; font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.hero .eyebrow { color:#aaa; }
.intro { padding:48px 0 24px; }
.project { margin:24px 0 72px; background:var(--paper); padding:28px; border:1px solid var(--line); }
.project-head { display:grid; grid-template-columns:2fr 1fr; gap:32px; }
.project h2 { font-size:2rem; margin:4px 0 12px; }
.stats { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); align-self:start; }
.stats div { background:var(--paper); padding:12px; }
.stats b,.stats span { display:block; }
.stats b { font-size:.72rem; color:var(--muted); }
.stats span { font-size:.9rem; }
.timeline { display:flex; gap:8px; margin:28px 0; overflow:auto; padding-bottom:8px; }
.timeline-point { min-width:110px; padding:12px; border-top:3px solid var(--line); color:var(--muted); }
.timeline-point.active { border-top-color:#222; color:#222; }
.timeline-point strong,.timeline-point span,.timeline-point small { display:block; }
.timeline-point strong { font-size:.75rem; letter-spacing:.08em; }
.timeline-point span { font-size:.75rem; }
.timeline-point small { font-size:.7rem; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.item { border:1px solid var(--line); background:#faf9f6; }
.image-box { aspect-ratio:4/3; overflow:hidden; background:#eee; }
.image-box img { width:100%; height:100%; object-fit:contain; display:block; }
.item-body { padding:16px; }
.label { font-size:.7rem; letter-spacing:.14em; color:var(--muted); text-transform:uppercase; }
.item-body h3 { margin:4px 0; }
.small { font-size:.8rem; color:var(--muted); }
.record { margin-top:20px; padding-top:20px; border-top:1px solid var(--line); }
.record dl { display:grid; grid-template-columns:180px 1fr; margin:0; }
.record dt,.record dd { padding:8px 0; border-bottom:1px solid #eee; }
.record dt { color:var(--muted); }
.record dd { margin:0; }
.archive-link { margin:28px 0 72px; padding:28px; background:#171717; color:#fff; }
.archive-link h2 { margin:4px 0 10px; }
.archive-link .eyebrow { color:#aaa; }
.archive-link a { color:#fff; }
.archive-main { padding-bottom:40px; }
.archive-intro { padding:34px 0 20px; }
.archive-card { margin:30px 0 64px; background:var(--paper); padding:28px; border:1px solid var(--line); }
.archive-title h2 { margin:4px 0 6px; font-size:2rem; }
.archive-title p:not(.eyebrow) { color:var(--muted); }
.archive-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px; }
.archive-grid-3 { grid-template-columns:repeat(3,1fr); }
.archive-grid figure { margin:0; background:#faf9f6; border:1px solid var(--line); }
.archive-grid img { width:100%; aspect-ratio:4/3; object-fit:contain; display:block; background:#eee; }
.archive-grid figcaption { padding:9px 12px; font-size:.75rem; color:var(--muted); letter-spacing:.06em; }
.archive-text { margin-top:22px; }
.archive-text ul { padding-left:20px; }
.comparison-note { margin:50px 0; padding:30px; border:1px solid var(--line); background:#faf9f6; }
.comparison-note h2 { margin:4px 0 12px; }
footer { padding:40px 0; color:var(--muted); font-size:.8rem; }
.zoomable-image { cursor:zoom-in; transition:transform .18s ease, opacity .18s ease; }
.zoomable-image:hover { opacity:.9; }
.zoomable-image:focus-visible { outline:3px solid #222; outline-offset:3px; }
body.lightbox-open { overflow:hidden; }
.lightbox { position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; padding:28px; background:rgba(0,0,0,.88); }
.lightbox.is-open { display:flex; }
.lightbox-content { margin:0; max-width:min(94vw,1400px); max-height:92vh; display:flex; flex-direction:column; align-items:center; }
.lightbox-image { max-width:94vw; max-height:84vh; width:auto; height:auto; object-fit:contain; display:block; box-shadow:0 12px 40px rgba(0,0,0,.45); }
.lightbox-caption { margin-top:10px; max-width:90vw; color:#fff; font-size:.8rem; text-align:center; }
.lightbox-close,.lightbox-prev,.lightbox-next { position:absolute; border:0; background:rgba(255,255,255,.12); color:#fff; width:46px; height:46px; border-radius:50%; cursor:pointer; font-size:32px; line-height:1; display:grid; place-items:center; }
.lightbox-close { top:18px; right:18px; font-size:30px; }
.lightbox-prev { left:18px; top:50%; transform:translateY(-50%); }
.lightbox-next { right:18px; top:50%; transform:translateY(-50%); }
.lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover { background:rgba(255,255,255,.24); }
@media (max-width:760px) {
  .hero { padding:52px 0 44px; }
  .project,.archive-card { padding:18px; }
  .project-head,.grid,.archive-grid,.archive-grid-3 { grid-template-columns:1fr; }
  .record dl { grid-template-columns:120px 1fr; }
  .lightbox { padding:12px; }
  .lightbox-image { max-width:96vw; max-height:78vh; }
  .lightbox-prev { left:8px; }
  .lightbox-next { right:8px; }
  .lightbox-close { top:8px; right:8px; }
}