:root {
  --ink: #22201c;
  --ink-soft: #6d6860;
  --line: #e4e0d8;
  --bg: #f5f3ee;
  --surface: #ffffff;
  --accent: #6a5a3e;
  --radius: 12px;
  --font: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --wrap: 68rem;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.65; }
.wrap { width: min(100% - 2.25rem, var(--wrap)); margin-inline: auto; }
a { color: inherit; }
.site-header { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.header-bar { display: flex; justify-content: space-between; align-items: center; height: 4rem; }
.brand { font-weight: 800; text-decoration: none; letter-spacing: -.03em; }
.site-nav { display: flex; gap: 1.2rem; }
.site-nav a { text-decoration: none; color: var(--ink-soft); }
.hero { position: relative; min-height: 26rem; display: grid; align-items: end; color: #f6f3ec; background: #2a2722; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgba(34, 32, 28, .72)); }
.hero-copy { position: relative; z-index: 1; padding: 5rem 0 2.5rem; }
.eyebrow { font-size: .8rem; color: #ddd2bc; }
.hero h1 { margin: .6rem 0 1rem; font-size: clamp(2rem, 5vw, 3.1rem); letter-spacing: -.035em; line-height: 1.15; }
.hero p { margin: 0; max-width: 34rem; }
.section { padding: clamp(2.5rem, 6vw, 4rem) 0; }
.muted { background: var(--surface); }
.section-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: end; margin-bottom: 1.4rem; }
.section h2 { margin: 0 0 .4rem; letter-spacing: -.03em; }
.section p { color: var(--ink-soft); }
.filters { display: flex; gap: .4rem; flex-wrap: wrap; }
.filter { border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); border-radius: 99px; padding: .4rem .9rem; font: inherit; cursor: pointer; }
.filter[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; }
.card[hidden] { display: none; }
.thumb { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: #e8e4dc; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.body { padding: .85rem .1rem 0; }
.body span { color: var(--accent); font-size: .78rem; font-weight: 700; }
.body h3 { margin: .25rem 0 .3rem; }
.empty[hidden] { display: none; }
.site-footer { border-top: 1px solid var(--line); padding: 2rem 0; color: var(--ink-soft); font-size: .9rem; }
@media (max-width: 800px) { .grid { grid-template-columns: 1fr; } }