:root {
  --black: #080808; --ink: #11110f; --paper: #d8d6cc; --bone: #e9e4d8;
  --muted: #8f8b82; --line-dark: #2f2f2c; --line-light: #aaa69a; --red: #8b1e1e;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --sans: Inter, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", sans-serif;
}
* { box-sizing: border-box; } html { background: var(--black); } body { margin: 0; font-family: var(--sans); text-rendering: geometricPrecision; }
a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } ::selection { background: var(--red); color: var(--bone); }
.index-body { background: var(--black); color: var(--bone); overflow-x: hidden; } .archive-body { background: var(--paper); color: var(--ink); }
.site-frame { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
.topbar { display: flex; justify-content: space-between; gap: 24px; padding: 22px 28px; border-bottom: 1px solid var(--line-dark); font: 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.topbar a:hover { color: var(--bone); } .archive-body .topbar { border-bottom-color: var(--line-light); color: #5b5852; } .archive-body .topbar a:hover { color: var(--red); }
.nav { display: flex; gap: 18px; flex-wrap: wrap; }
.hero { min-height: calc(100vh - 105px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); border-bottom: 1px solid var(--line-dark); }
.hero-title { padding: clamp(28px, 5vw, 70px) 28px; display: flex; flex-direction: column; justify-content: space-between; min-height: 620px; }
.kicker { font: 12px/1.4 var(--mono); color: var(--red); letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(68px, 15vw, 210px); line-height: .82; letter-spacing: -.09em; font-weight: 780; text-transform: uppercase; }
.statement { max-width: 620px; margin-top: 28px; font-size: clamp(18px, 2vw, 28px); line-height: 1.16; letter-spacing: -.035em; color: var(--bone); } .statement span { color: var(--muted); }
.hero-aside { border-left: 1px solid var(--line-dark); display: grid; grid-template-rows: repeat(3, 1fr); }
.entry { position: relative; min-height: 310px; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; border-bottom: 1px solid var(--line-dark); overflow: hidden; }
.entry:last-child { border-bottom: 0; } .entry::before { content: ""; position: absolute; inset: 0; opacity: .1; background: repeating-linear-gradient(90deg, transparent 0 27px, var(--bone) 28px 29px), repeating-linear-gradient(0deg, transparent 0 27px, var(--bone) 28px 29px); transition: opacity .18s ease; }
.entry:hover::before { opacity: .18; } .entry-meta { position: relative; display: flex; justify-content: space-between; font: 12px/1 var(--mono); color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.entry h2 { position: relative; margin: 0; font-size: clamp(42px, 6vw, 86px); line-height: .9; letter-spacing: -.07em; text-transform: uppercase; } .entry p { position: relative; max-width: 440px; margin: 18px 0 0; color: var(--muted); line-height: 1.55; }
.footer { display: flex; justify-content: space-between; gap: 16px; padding: 18px 28px; color: var(--muted); font: 12px/1.4 var(--mono); text-transform: uppercase; }
.archive-header { padding: 38px 28px 30px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 420px); gap: 36px; border-bottom: 1px solid var(--line-light); }
.archive-label { color: var(--red); font: 12px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; } .archive-header h1 { color: var(--ink); font-size: clamp(54px, 10vw, 140px); line-height: .82; }
.archive-copy { align-self: end; font-size: 16px; line-height: 1.55; color: #46433e; } .archive-copy p { margin: 0; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } .filter { border: 1px solid var(--line-light); padding: 7px 10px; font: 11px/1 var(--mono); letter-spacing: .08em; color: #504d47; text-transform: uppercase; }
.grid { padding: 28px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.work-card { grid-column: span 4; min-height: 420px; border: 1px solid var(--line-light); background: rgba(255,255,255,.14); display: grid; grid-template-rows: minmax(240px, 1fr) auto; }
.work-card.large { grid-column: span 6; min-height: 520px; } .work-card.tall { grid-column: span 3; min-height: 620px; }
.visual { position: relative; overflow: hidden; background: #1a1a18; filter: grayscale(.3) contrast(1.05); transition: filter .16s ease; } .work-card:hover .visual { filter: grayscale(0) contrast(1.04); }
.placeholder { width: 100%; height: 100%; min-height: 240px; background: linear-gradient(135deg, #111 0%, #2d2b27 45%, #aaa397 46%, #c9c4b8 48%, #24231f 49%, #070707 100%); }
.placeholder.p2 { background: radial-gradient(circle at 70% 24%, #ddd6c5 0 9%, transparent 10%), linear-gradient(160deg, #070707, #333029 48%, #888174 49%, #111); }
.placeholder.p3 { background: repeating-linear-gradient(115deg, #121212 0 26px, #b9b1a3 27px 28px, #292722 29px 58px); }
.placeholder.p4 { background: linear-gradient(180deg, #101010, #101010 48%, #b8b2a4 49%, #0c0c0c 52%, #35322c); } .placeholder.p5 { background: radial-gradient(circle at 32% 34%, #cbc3b2 0 12%, transparent 13%), radial-gradient(circle at 68% 66%, #767064 0 8%, transparent 9%), #111; }
.caption { padding: 14px; display: grid; gap: 8px; border-top: 1px solid var(--line-light); } .caption-top { display: flex; justify-content: space-between; gap: 14px; font: 11px/1 var(--mono); color: var(--red); letter-spacing: .08em; text-transform: uppercase; }
.caption h2 { margin: 0; font-size: 22px; letter-spacing: -.035em; line-height: 1; text-transform: uppercase; } .caption p { margin: 0; color: #5b5750; font-size: 13px; line-height: 1.45; }
.about-panel { padding: 42px 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 460px); gap: 48px; border-bottom: 1px solid var(--line-light); }
.about-panel .lead { font-size: clamp(30px, 5vw, 76px); line-height: .95; letter-spacing: -.07em; text-transform: uppercase; margin: 0; } .about-side { color: #44413c; line-height: 1.7; }
.contact-list { margin-top: 26px; display: grid; gap: 10px; font: 12px/1.3 var(--mono); text-transform: uppercase; } .contact-list a { border-bottom: 1px solid var(--line-light); padding-bottom: 8px; } .contact-list a:hover { color: var(--red); }
@media (max-width: 980px) { .hero, .archive-header, .about-panel { grid-template-columns: 1fr; } .hero-title { min-height: 480px; } .hero-aside { border-left: 0; border-top: 1px solid var(--line-dark); } .work-card, .work-card.large, .work-card.tall { grid-column: span 6; min-height: 420px; } }
@media (max-width: 640px) { .topbar, .footer { padding-left: 18px; padding-right: 18px; } .topbar { display: grid; } .hero-title, .entry, .archive-header, .grid, .about-panel { padding-left: 18px; padding-right: 18px; } .grid { grid-template-columns: 1fr; } .work-card, .work-card.large, .work-card.tall { grid-column: span 1; min-height: 360px; } }

.visual img { width: 100%; height: 100%; object-fit: cover; min-height: 240px; }
.boundary-detail { grid-template-columns: repeat(12, 1fr); }
.boundary-shot { grid-column: span 6; min-height: 520px; }
.boundary-shot .visual img { object-fit: contain; background: #080808; }
.caption a { color: var(--red); border-bottom: 1px solid rgba(139,30,30,.35); }
.filter[href] { color: #504d47; }
.filter[href]:hover { color: var(--red); border-color: var(--red); }
@media (max-width: 980px) { .boundary-shot { grid-column: span 12; } }

.placeholder.t1 { background: linear-gradient(145deg, #070707, #0d0d0d 40%, #1f3a4d 41%, #2a5a6a 43%, #0d0d0d 45%, #111); }
.archive-header h1 { color: var(--ink); font-size: clamp(54px, 10vw, 140px); line-height: .82; }
.tools-grid { align-content: start; }
@media (max-width: 980px) { .hero-aside { grid-template-rows: repeat(3, minmax(240px, 1fr)); } }