:root {
  --paper: #f3efe5;
  --ink: #171915;
  --muted: #6d6a60;
  --line: rgba(23, 25, 21, 0.2);
  --red: #a53e2a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Noto Serif SC", "Songti SC", "SimSun", serif;
}
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }

.nav {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4.5vw;
  border-bottom: 1px solid var(--line);
  background: rgba(243, 239, 229, 0.92);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: 13px; font-weight: 700; letter-spacing: .12em; }
.seal { background: var(--red); color: #fff7e9; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 3px; }
.nav nav { display: flex; gap: 36px; font-size: 14px; letter-spacing: .16em; }
.nav nav a { position: relative; }
.nav nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 1px; background: var(--ink); transition: .25s; }
.nav nav a:hover::after { right: 0; }

.hero { min-height: calc(100vh - 78px); display: grid; grid-template-columns: 58% 42%; position: relative; overflow: hidden; }
.hero-art { min-height: 680px; filter: grayscale(.12) contrast(.93); }
.atlas { background-image: url("artworks.png"); background-size: 300% 200%; background-repeat: no-repeat; }
.atlas-0 { background-position: 0 0; background-size: 175% auto; }
.hero-paper { align-self: center; padding: 8vw 7vw; position: relative; }
.hero-paper::before { content: ""; position: absolute; width: 180px; height: 180px; right: 8%; top: 7%; border: 1px solid rgba(165, 62, 42, .18); border-radius: 50%; }
.kicker { text-transform: uppercase; letter-spacing: .22em; font: 12px/1.5 Arial, sans-serif; color: var(--muted); }
.hero h1 { font-size: clamp(64px, 7.3vw, 118px); line-height: .98; font-weight: 500; letter-spacing: .06em; margin: 34px 0; position: relative; }
.hero-copy { max-width: 460px; color: var(--muted); font-size: 17px; line-height: 2; }
.hero-actions { display: flex; align-items: center; gap: 34px; margin-top: 48px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; min-width: 168px; padding: 16px 20px; font-size: 14px; letter-spacing: .12em; transition: transform .2s; }
.button:hover { transform: translateY(-2px); }
.dark { background: var(--ink); color: var(--paper); }
.light { background: var(--paper); color: var(--ink); }
.text-link { border-bottom: 1px solid var(--ink); padding-bottom: 5px; }
.vertical-note { writing-mode: vertical-rl; position: absolute; right: 2vw; bottom: 3vw; letter-spacing: .32em; font-size: 12px; color: var(--muted); }

.section { padding: 120px 7vw; }
.manifesto { padding: 130px 12vw; background: #232621; color: #eee9dc; position: relative; }
.manifesto span { color: #9e9b91; font: 12px Arial, sans-serif; }
.manifesto blockquote { margin: 30px 0 0; font-size: clamp(34px, 4.2vw, 66px); line-height: 1.55; font-weight: 400; letter-spacing: .08em; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 58px; }
.section h2 { margin: 12px 0 0; font-size: clamp(46px, 5vw, 76px); line-height: 1.25; font-weight: 500; letter-spacing: .06em; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters button { border: 1px solid var(--line); padding: 10px 18px; border-radius: 99px; background: transparent; cursor: pointer; font-size: 13px; }
.filters button.active { background: var(--ink); color: var(--paper); }
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: 28px 20px; align-items: start; }
.work-card { grid-column: span 4; background: none; border: 0; padding: 0; text-align: left; cursor: zoom-in; }
.work-card:nth-child(2), .work-card:nth-child(5) { margin-top: 72px; }
.work-image { display: block; aspect-ratio: 1 / 1.08; background-color: #ddd6c5; transition: filter .35s, transform .35s; }
.work-card:hover .work-image { filter: contrast(1.05); transform: translateY(-5px); }
.work-meta { border-top: 1px solid var(--ink); padding: 14px 2px; display: flex; justify-content: space-between; gap: 14px; }
.work-meta > span { display: flex; flex-direction: column; gap: 5px; }
.work-meta > span:last-child { text-align: right; }
.work-meta strong { font-weight: 500; letter-spacing: .12em; }
.work-meta small { color: var(--muted); font: 11px/1.5 Arial, sans-serif; text-transform: uppercase; }
.demo-note { color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); margin-top: 50px; padding-top: 18px; }

.about { background: #ded8ca; display: grid; grid-template-columns: .85fr 1.15fr; gap: 9vw; align-items: center; }
.portrait-wrap img { width: 100%; max-height: 720px; object-fit: cover; object-position: top; filter: grayscale(1) sepia(.15); }
.portrait-caption { display: block; margin-top: 12px; color: var(--muted); font-size: 12px; letter-spacing: .14em; }
.about-copy > p:not(.kicker) { max-width: 640px; font-size: 16px; line-height: 2.1; color: #4e4c46; }
.facts { margin-top: 45px; border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: 120px 1fr; border-bottom: 1px solid var(--line); padding: 16px 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

.studio { background: #f7f3e9; }
.studio .section-head > p { max-width: 380px; color: var(--muted); line-height: 1.9; }
.process { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.process article { padding: 35px 45px 20px 0; min-height: 240px; border-right: 1px solid var(--line); }
.process article + article { padding-left: 45px; }
.process span { color: var(--red); }
.process h3 { font-size: 30px; letter-spacing: .18em; font-weight: 500; margin: 28px 0 16px; }
.process p { color: var(--muted); line-height: 1.9; }

.contact { background: var(--red); color: #fff3e4; text-align: center; padding-top: 145px; padding-bottom: 60px; }
.contact .kicker, .contact > p { color: rgba(255,243,228,.72); }
.contact h2 { font-size: clamp(50px, 7vw, 100px); }
.contact > p { margin: 30px auto; }
.contact .button { margin: 18px auto 100px; }
.contact-foot { border-top: 1px solid rgba(255,255,255,.28); padding-top: 22px; display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .12em; }
footer { display: flex; justify-content: space-between; padding: 28px 4.5vw; background: var(--ink); color: #d8d2c6; font-size: 12px; letter-spacing: .1em; }

.lightbox { position: fixed; inset: 0; background: rgba(17,18,15,.92); z-index: 50; display: grid; place-items: center; padding: 5vw; }
.lightbox > button { position: absolute; top: 25px; right: 34px; border: 0; background: none; color: white; font-size: 40px; cursor: pointer; }
.lightbox-inner { width: min(1120px, 90vw); display: grid; grid-template-columns: 2fr 1fr; gap: 50px; align-items: center; color: var(--paper); }
.lightbox-art { aspect-ratio: 1 / 1; background-color: #ded6c6; }
.lightbox-inner h2 { font-size: 48px; }
.hidden { display: none !important; }

@media (max-width: 900px) {
  .nav { height: 66px; padding: 0 22px; }
  .nav nav { gap: 16px; }
  .nav nav a:nth-child(3) { display: none; }
  .brand > span:last-child { display: none; }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-art { min-height: 58vh; }
  .hero-paper { padding: 70px 7vw 90px; }
  .vertical-note { display: none; }
  .section { padding: 85px 6vw; }
  .section-head { align-items: flex-start; flex-direction: column; }
  .work-card { grid-column: span 6; }
  .work-card:nth-child(2), .work-card:nth-child(5) { margin-top: 0; }
  .about { grid-template-columns: 1fr; }
  .portrait-wrap img { max-height: 560px; }
  .process { grid-template-columns: 1fr; }
  .process article, .process article + article { padding: 30px 0; border-right: 0; border-bottom: 1px solid var(--line); min-height: 0; }
  .lightbox-inner { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 560px) {
  .nav nav a { font-size: 12px; }
  .nav nav a:nth-child(4) { display: none; }
  .hero-art { min-height: 46vh; }
  .hero h1 { font-size: 54px; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .manifesto { padding: 80px 8vw; }
  .manifesto blockquote { font-size: 31px; }
  .gallery { gap: 25px 10px; }
  .work-card { grid-column: span 12; }
  .work-image { aspect-ratio: 1.2 / 1; }
  .contact-foot { gap: 16px; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}