:root {
  font-family: Arial, 'Malgun Gothic', sans-serif;
  color: #26302b;
  background: #f6f5ef;
  --muted: #667168;
  --line: #cdd1c7;
  --gutter: clamp(20px, 4vw, 72px);
  --grid-gap: clamp(24px, 3vw, 48px);
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 20px; top: 12px; padding: 12px; background: white; z-index: 2; }
.masthead, main, footer {
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.masthead { padding-block: clamp(24px, 2.5vw, 40px); }
.masthead p { font-size: clamp(11px, .9vw, 13px); letter-spacing: .12em; margin: 0; }
main { container: portfolio / inline-size; }
.intro { padding-block: clamp(38px, 5.6vw, 88px) clamp(48px, 5.4vw, 84px); }
.intro h1 {
  font-size: clamp(38px, 5.5vw, 88px);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
.intro > p {
  max-width: 62ch;
  margin: clamp(20px, 2vw, 30px) 0 0;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.8;
  color: var(--muted);
  text-wrap: pretty;
}
.projects {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 4.6vw, 72px) var(--grid-gap);
  padding-bottom: clamp(65px, 7vw, 110px);
}
.project { min-width: 0; container: card / inline-size; }
.project-link { display: block; height: 100%; }
.image { aspect-ratio: 4 / 3; background: #e4e6de; overflow: hidden; }
.image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.card-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(10px, 1vw, 16px) clamp(16px, 2vw, 30px);
  padding-block: clamp(18px, 1.8vw, 28px) clamp(22px, 2vw, 32px);
  border-bottom: 1px solid var(--line);
}
.card-meta h2 {
  grid-column: 1 / -1;
  font-size: clamp(19px, 1.6vw, 26px);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.35;
  margin: 0;
  text-wrap: pretty;
}
.card-meta p { font-size: clamp(12px, .95vw, 14px); line-height: 1.65; color: var(--muted); margin: 0; }
.period { text-align: right; white-space: nowrap; }
.project-link:hover h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.project-link:focus-visible, .skip:focus-visible { outline: 2px solid #4c6b56; outline-offset: 6px; }
footer { border-top: 1px solid var(--line); padding-block: clamp(24px, 2.5vw, 36px); }
footer p { margin: 0; color: var(--muted); font-size: 10px; letter-spacing: .08em; }
/* Two cards need about 416px each plus a 24–48px gutter. Never add a third column. */
@container portfolio (min-width: 54rem) {
  .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-meta h2 { min-height: 2.7em; }
}
@container card (max-width: 22rem) {
  .card-meta { column-gap: 12px; }
  .card-meta p { font-size: 12px; }
}

/* Category hierarchy; approved featured images and shared v2 rhythm retained. */
.category{display:flex;flex-direction:column}
.category-heading{padding-block:0 clamp(24px,2.6vw,40px)}
.category-number{font-size:11px;line-height:1.5;letter-spacing:.12em;color:var(--muted);margin:0 0 18px}
.category-heading h2{font-size:clamp(27px,2.7vw,42px);font-weight:400;line-height:1.12;letter-spacing:-.035em;margin:0 0 20px;text-wrap:balance}
.category-description{font-size:clamp(13px,1vw,15px);line-height:1.85;color:var(--muted);max-width:48ch;word-break:keep-all;overflow-wrap:anywhere;margin:0}
.category .project-link{height:auto;margin-top:auto}
.category .card-meta{grid-template-columns:minmax(0,1fr) auto;row-gap:10px}
.category .featured-label{grid-column:1/-1;font-size:10px;letter-spacing:.1em;line-height:1.6}
.category .card-meta h3{font-size:clamp(18px,1.5vw,24px);line-height:1.4;font-weight:400;letter-spacing:-.025em;margin:0;text-wrap:pretty}
.category .period{align-self:start;line-height:2.1}
.category .project-link:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
@container portfolio (min-width:54rem){.category-heading h2{min-height:2.24em}.category-description{min-height:3.7em}.category .card-meta{min-height:125px}}
@container card (max-width:22rem){.category .card-meta h3{grid-column:1/-1}.category .period{grid-column:1/-1;text-align:left}.category-heading h2{font-size:27px}}

/* Human-approved Category Editorial Copy v1: subtitle text only. */
.category-subtitle{font-size:clamp(14px,1.05vw,16px);font-weight:400;line-height:1.65;margin:0 0 16px;max-width:48ch;overflow-wrap:anywhere}