:root {
  --paper: #f6f1e8;
  --paper-deep: #efe6d8;
  --ink: #241c16;
  --muted: #6f655c;
  --line: rgba(36, 28, 22, .16);
  --serif: "Iowan Old Style", Palatino, "Palatino Linotype", "Songti SC", "Noto Serif CJK SC", "Noto Serif SC", "Source Han Serif SC", serif;
  --sans: "Avenir Next", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 420px at 10% -10%, rgba(255, 255, 255, .75), transparent 55%),
    var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
}
button, input, a { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
.skip {
  position: absolute;
  left: 16px;
  top: -48px;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 12px;
  z-index: 5;
}
.skip:focus { top: 12px; }
.paper { min-height: 100svh; }

.mast {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  padding: 28px 48px 16px;
  border-bottom: 1px solid var(--line);
}
.brand { display: grid; text-decoration: none; }
.brand strong { font-size: 13px; letter-spacing: .28em; font-weight: 650; }
.brand span { color: var(--muted); font-size: 12px; letter-spacing: .08em; }
.filters {
  display: flex;
  justify-content: center;
  gap: 26px;
  overflow: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.filters button {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 64px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 0 2px 8px;
}
.filters button small {
  font-size: 10px;
  letter-spacing: .18em;
  font-weight: 600;
}
.filters button span {
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: .04em;
}
.filters button[aria-pressed="true"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.issue {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .08em;
  white-space: nowrap;
}
.status-line { margin: 28px 48px; color: var(--muted); }
.missing { max-width: 560px; margin: 12vh auto; padding: 0 24px; }
.missing p { margin: 0; letter-spacing: .18em; font-size: 12px; color: var(--muted); }
.missing h1 { margin: 12px 0; font-family: var(--serif); font-weight: 500; font-size: clamp(36px, 6vw, 64px); }
.missing a { display: inline-flex; margin-top: 18px; }

.spread {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 42px;
  padding: 42px 48px 24px;
  align-items: start;
}
.profile { position: sticky; top: 28px; }
.profile h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(42px, 4.2vw, 68px);
  line-height: 1.05;
  letter-spacing: -.02em;
  word-break: keep-all;
}
.rule {
  width: 48px;
  margin: 22px 0 18px;
  border: 0;
  border-top: 1px solid var(--ink);
}
.statement {
  margin: 0;
  max-width: 16em;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.facts { margin: 28px 0 0; display: grid; gap: 16px; }
.facts div { display: grid; gap: 4px; }
.facts dt { color: var(--muted); font-size: 11px; letter-spacing: .18em; }
.facts dd { margin: 0; font-family: var(--serif); font-size: 22px; line-height: 1.25; }
.facts .practice { display: block; margin-top: 2px; color: var(--muted); font-family: var(--sans); font-size: 13px; letter-spacing: .04em; }

.gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(168px, 18vw);
  gap: 12px;
  align-items: stretch;
}
.work, .contact-card {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: var(--paper-deep);
}
.work a, .work button.frame {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  position: relative;
}
.work img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #e4d9c8;
}
.mark {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .28);
  color: #fff;
  backdrop-filter: blur(10px);
}
.mark svg { width: 16px; height: 16px; }
.glance {
  position: absolute;
  left: 16px;
  bottom: 72px;
  color: #fff;
  letter-spacing: .18em;
  font-size: 12px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
  opacity: 0;
}
.caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 2px;
  padding: 36px 16px 14px;
  background: linear-gradient(transparent, rgba(28, 22, 16, .55));
  color: #f8f4ee;
}
.caption strong {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
}
.caption em {
  font-style: normal;
  font-size: 13px;
  letter-spacing: .02em;
  opacity: .86;
}
.work.is-target { outline: 1px solid rgba(36, 28, 22, .45); outline-offset: 3px; }

.contact-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-height: 180px;
  padding: 20px 18px 16px;
  background: rgba(255, 252, 247, .78);
  border: 1px solid var(--line);
}
.contact-card p { margin: 0; letter-spacing: .18em; font-size: 11px; color: var(--muted); }
.contact-card h2 { margin: 8px 0 0; font-family: var(--serif); font-weight: 500; font-size: 28px; }
.contact-icons { display: flex; gap: 8px; }
.contact-icons a, .contact-icons button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  padding: 0;
}
.contact-icons svg { width: 16px; height: 16px; }
.contact-lines { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.contact-lines li { min-width: 0; }
.contact-lines small { display: block; color: var(--muted); letter-spacing: .12em; font-size: 10px; }
.contact-lines a, .contact-lines span { overflow-wrap: anywhere; }

.colophon {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 8px 48px 28px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  letter-spacing: .16em;
  font-size: 11px;
}
.colophon a { text-decoration: none; }

.lightbox {
  width: min(1100px, calc(100vw - 28px));
  height: min(820px, calc(100svh - 28px));
  padding: 18px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}
.lightbox::backdrop { background: rgba(36, 28, 22, .46); }
.lightbox form { display: flex; justify-content: flex-end; }
.lightbox-close, .lightbox > button {
  min-height: 40px;
  border: 1px solid var(--line);
  background: transparent;
  padding: 0 12px;
}
.lightbox {
  display: none;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}
.lightbox[open] { display: grid; }
.lightbox figure { margin: 0; min-width: 0; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.lightbox img { width: 100%; height: 100%; object-fit: contain; background: #e4d9c8; }
.lightbox figcaption { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; }
.lightbox figcaption strong { font-family: var(--serif); font-weight: 500; }
.empty-works { grid-column: 1 / -1; padding: 48px 8px; color: var(--muted); }

button:focus-visible, a:focus-visible { outline: 2px solid #241c16; outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  .work img { transition: transform .55s ease; }
  .glance { transition: opacity .25s ease, transform .25s ease; }
  .filters button { transition: color .16s ease, border-color .16s ease; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .work:hover img { transform: scale(1.035); }
  .work:hover .glance { opacity: 1; transform: translateY(0); }
  .glance { transform: translateY(6px); }
}
@media (max-width: 900px) {
  .mast, .spread, .colophon { padding-left: 18px; padding-right: 18px; }
  .mast { grid-template-columns: 1fr auto; gap: 12px; }
  .filters { grid-column: 1 / -1; justify-content: flex-start; gap: 16px; }
  .spread { grid-template-columns: 1fr; gap: 22px; padding-top: 24px; }
  .profile { position: static; }
  .profile h1 { font-size: 46px; }
  .gallery { display: flex; flex-direction: column; gap: 12px; }
  .work, .contact-card { min-height: 280px; }
  .work[data-layout="hero"] { min-height: 460px; }
  .contact-card { min-height: 0; }
  .lightbox { width: 100vw; height: 100svh; max-height: none; border: 0; }
  .lightbox > button { display: none; }
  .glance { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}