/* Chen Haoyuan — photographic archive
   ------------------------------------------------------------------
   Rules this sheet follows, taken from how working photographers build
   their sites:

   1. Navigation is set at the same optical size as the name. It is the
      typographic hierarchy; there is no separate "menu bar".
   2. A project title inside a project page is body-sized. It is a caption
      for the sequence, not a headline.
   3. Photographs are never cropped, boxed, shadowed or watermarked.
      object-fit: contain everywhere, so composition survives.
   4. The page carries no colour of its own beyond one accent used only on
      hover. The photographs are the only saturated thing on screen.
   5. Chinese runs smaller than Latin at the same nominal size and takes no
      letter-spacing - tracking is compensation for uppercase Latin only.
   ------------------------------------------------------------------ */

:root {
  --paper: #fbfaf7;
  --ink: #1b1b1a;
  --muted: #7a7770;
  --rule: rgba(27, 27, 26, .14);
  --accent: #a2412c;
  --serif: "Songti SC", "Iowan Old Style", "Noto Serif CJK SC", Georgia, serif;
  --sans: "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --latin: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gutter: 32px;          /* the one spacing unit; gaps do not scale */
  --measure: 600px;        /* body text column, the cross-site consensus */
  --pad: clamp(18px, 3vw, 44px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font: 16px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { color: inherit; font: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, p, figure { margin-top: 0; }

/* Latin gets tracking, Chinese never does. */
.latin, .eyebrow, .site-nav, .text-link, .photo-counter, .back-link { letter-spacing: .12em; }
.zh-copy, .zh-copy * { letter-spacing: 0; }
:lang(zh) { letter-spacing: 0; }

/* ---------- masthead ---------------------------------------------------- */

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  align-items: baseline;
  gap: clamp(24px, 4vw, 72px);
  padding: 18px var(--pad) 16px;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(12px);
}
.wordmark {
  font: 400 clamp(22px, 2.6vw, 36px)/1 var(--serif);
  white-space: nowrap;
}
.site-nav {
  display: flex;
  gap: clamp(20px, 2.6vw, 44px);
  font: 400 clamp(19px, 2.3vw, 32px)/1 var(--serif);
  text-transform: uppercase;
  font-family: var(--latin);
}
.site-nav a { padding-bottom: .18em; border-bottom: 1px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current="page"] { border-color: currentColor; }
.header-count {
  margin-left: auto;
  align-self: center;
  color: var(--muted);
  font: 11px/1 var(--latin);
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ---------- shared page furniture --------------------------------------- */

.page { width: min(2560px, 100%); padding: 0 var(--pad); }
.page-intro {
  display: grid;
  grid-template-columns: minmax(200px, .6fr) minmax(280px, 1.4fr);
  gap: clamp(32px, 8vw, 130px);
  padding: clamp(48px, 9vh, 120px) 0 clamp(40px, 7vh, 90px);
}
.eyebrow {
  margin-bottom: 1.4rem;
  color: var(--muted);
  font: 11px/1 var(--latin);
  letter-spacing: .18em;
  text-transform: uppercase;
}
h1 { font: 400 clamp(30px, 4.2vw, 56px)/1.04 var(--serif); }
.intro-copy { align-self: end; max-width: var(--measure); font: 21px/1.55 var(--serif); }
.intro-copy p:last-child { margin-bottom: 0; }
.muted { color: var(--muted); }

/* Chinese body copy sits a step below the Latin it runs beside. */
.zh-copy { color: var(--muted); font: 15px/1.85 var(--sans); }
.intro-copy .zh-copy { font-size: 16px; }

.text-link {
  display: inline-block;
  padding-bottom: .3em;
  border-bottom: 1px solid currentColor;
  font: 12px/1 var(--latin);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.text-link:hover { color: var(--accent); }

.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px var(--gutter);
  padding: 28px var(--pad) 34px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font: 12px/1.6 var(--latin);
  letter-spacing: .06em;
}
.site-footer span:last-child { margin-left: auto; }

/* ---------- home -------------------------------------------------------- */

.home-hero {
  display: grid;
  grid-template-columns: minmax(230px, .58fr) minmax(300px, 1.42fr);
  gap: clamp(28px, 5vw, 90px);
  align-items: center;
  min-height: calc(100vh - 90px);
  padding: clamp(28px, 5vh, 70px) 0;
}
.home-copy { display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; align-self: stretch; padding: clamp(10px, 3vh, 40px) 0; }
.home-copy h1 { font-size: clamp(40px, 5.6vw, 84px); }
.home-copy h1 span { display: block; margin-top: .16em; font-size: .78em; font-style: italic; }
.home-summary { max-width: 440px; }
.home-summary p { font: 15px/1.75 var(--sans); }
.home-summary .zh-copy { margin-top: 1rem; }
.home-image { display: grid; place-items: center; }
.home-image img { width: auto; max-width: 100%; max-height: calc(100vh - 150px); object-fit: contain; }

.home-index { padding: clamp(60px, 10vh, 140px) 0 clamp(70px, 10vh, 130px); border-top: 1px solid var(--rule); }
.section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; margin-bottom: clamp(36px, 6vh, 80px); }
.section-heading h2 { margin: 0; font: 400 clamp(24px, 3vw, 40px)/1.1 var(--serif); }
.home-projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px var(--gutter); }
.home-project img { width: 100%; }
.home-project h3 { margin: 1.1rem 0 .25rem; font: 400 20px/1.25 var(--serif); }
.home-project p { margin: 0; color: var(--muted); font: 12px/1.6 var(--latin); letter-spacing: .06em; }
.home-project a:hover img { opacity: .72; }
.home-project img { transition: opacity .3s ease; }

/* ---------- filter ------------------------------------------------------ */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.filter-button {
  padding: 4px 0;
  color: var(--muted);
  font: 12px/1 var(--latin);
  letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
}
.filter-button:hover { color: var(--ink); }
.filter-button.is-active { color: var(--ink); border-color: var(--accent); }

/* ---------- project index (works) --------------------------------------- */

.project-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(56px, 8vh, 120px) var(--gutter);
  padding: clamp(40px, 7vh, 90px) 0 clamp(70px, 12vh, 150px);
}
.project-card { min-width: 0; }
.project-cover { display: block; }
.project-cover img { width: 100%; transition: opacity .35s ease; }
.project-card:hover .project-cover img { opacity: .74; }
.project-meta { padding-top: 20px; }
.project-number { color: var(--muted); font: 11px/1 var(--latin); letter-spacing: .18em; }
.project-meta h2 { margin: 1rem 0 .3rem; font: 400 clamp(22px, 2.2vw, 32px)/1.15 var(--serif); }
.project-cn { margin-bottom: 1.1rem; color: var(--muted); font: 14px/1.6 var(--sans); }
.project-note { max-width: var(--measure); font: 15px/1.75 var(--sans); }
.project-stats {
  display: flex;
  gap: 20px;
  margin-top: 1.4rem;
  padding-top: .9rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font: 11px/1 var(--latin);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.project-stats span:last-child { margin-left: auto; }
.empty-state { padding: 14vh 0; color: var(--muted); font: 24px/1.5 var(--serif); }

/* ---------- project page ------------------------------------------------ */

.place-intro {
  display: grid;
  grid-template-columns: minmax(200px, .85fr) minmax(280px, 1.15fr);
  gap: clamp(32px, 8vw, 120px);
  padding: clamp(48px, 9vh, 120px) 0 clamp(36px, 6vh, 80px);
}
.place-description { align-self: end; max-width: var(--measure); }
.place-description > p:first-child { font: 22px/1.5 var(--serif); }
.place-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 40px;
  margin: 2.6rem 0 0;
  padding: 1.4rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font: 12px/1 var(--latin);
  letter-spacing: .06em;
}
.place-facts div { display: flex; justify-content: space-between; gap: 1rem; }
.place-facts dt { color: var(--muted); }
.place-facts dd { margin: 0; text-align: right; }
.back-link { font: 11px/1 var(--latin); letter-spacing: .16em; text-transform: uppercase; }
.back-link:hover { color: var(--accent); }

.view-toggle { display: flex; align-items: baseline; gap: 8px; margin: 0 0 28px; font: 11px/1 var(--latin); letter-spacing: .16em; text-transform: uppercase; }
.view-toggle button { padding: 0; color: var(--muted); letter-spacing: inherit; text-transform: inherit; }
.view-toggle button:hover { color: var(--ink); }
.view-toggle button.is-active { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.view-toggle .divider { color: var(--rule); }
.series-intro { padding-bottom: clamp(28px, 5vh, 60px); }

/* Index view — reading order preserved, gaps fixed at the spacer unit. */
.index-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
  padding-bottom: clamp(70px, 12vh, 150px);
}
.index-tile { display: block; }
.index-tile img { width: 100%; transition: opacity .3s ease; }
.index-tile:hover img { opacity: .74; }
.index-tile span { display: block; margin-top: .7rem; color: var(--muted); font: 11px/1 var(--latin); letter-spacing: .14em; }

/* Gallery view — vertical, one photograph at a time, thumb-paced. */
.gallery-flow { max-width: min(1600px, 100%); margin: 0 auto; padding-bottom: clamp(60px, 10vh, 120px); }
.gallery-frame { margin: 0 0 clamp(56px, 12vh, 150px); }
.gallery-frame img { width: auto; max-width: 100%; max-height: 88vh; margin: 0 auto; object-fit: contain; }
.gallery-frame figcaption {
  display: flex;
  justify-content: space-between;
  gap: 1.4rem;
  max-width: var(--measure);
  margin: 1.1rem auto 0;
  color: var(--muted);
  font: 12px/1.6 var(--latin);
  letter-spacing: .06em;
}
.gallery-frame figcaption .zh-copy { font-size: 13px; }

/* ---------- single photograph ------------------------------------------- */

.photo-page {
  display: grid;
  grid-template-columns: minmax(190px, 20%) 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "rail stage" "foot stage";
  gap: 0 var(--gutter);
  min-height: calc(100vh - 78px);
  padding: clamp(18px, 2.4vh, 32px) var(--pad) clamp(22px, 3vh, 40px);
}
.photo-rail { grid-area: rail; }
.photo-foot { grid-area: foot; align-self: end; }
.photo-stage {
  grid-area: stage;
  display: grid;
  place-items: center;
  position: relative;
  min-height: 0;
}
.photo-stage img { width: auto; max-width: 100%; max-height: calc(100vh - 130px); object-fit: contain; }

/* Title reads at body size: it captions the sequence, it is not a headline. */
.photo-title { margin: 0 0 .3rem; font: 700 16px/1.35 var(--serif); }
.photo-caption { margin: 0 0 .9rem; color: var(--muted); font: 13px/1.6 var(--latin); letter-spacing: .04em; }
.photo-caption .zh-copy { font-size: 13px; }
.photo-counter { margin-top: 1rem; color: var(--muted); font: 11px/1 var(--latin); letter-spacing: .18em; }
.photo-foot a:hover { color: var(--accent); }

/* Invisible hotspots: the only affordance is the cursor. */
.photo-hotzone { position: absolute; top: 0; z-index: 5; height: 100%; width: 40%; }
.photo-hotzone.prev { left: 0; cursor: w-resize; }
.photo-hotzone.next { right: 0; cursor: e-resize; }

/* ---------- about / notes ----------------------------------------------- */

.text-page { max-width: min(1600px, 100%); padding: clamp(48px, 9vh, 120px) 0 clamp(80px, 14vh, 170px); }
.text-page > h1 { margin-bottom: clamp(40px, 8vh, 110px); }
.about-grid { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(280px, 1.3fr); gap: clamp(40px, 9vw, 140px); }
.about-aside { color: var(--muted); font: 12px/1.8 var(--latin); letter-spacing: .06em; }
.about-aside .portrait { margin-top: 2rem; }
.about-aside .portrait img { width: 100%; }
.about-copy { max-width: var(--measure); font: 21px/1.6 var(--serif); }
.about-copy .small-copy { margin-top: 4rem; font: 15px/1.8 var(--sans); }
.contact-list { margin-top: 2.6rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.contact-list a, .contact-list span { display: block; padding: .5rem 0; border-bottom: 1px solid var(--rule); font-size: 13px; letter-spacing: .04em; }
.contact-list a:hover { color: var(--accent); }

.note-list { border-top: 1px solid var(--rule); }
.note-row { display: grid; grid-template-columns: 130px 1fr; gap: clamp(20px, 5vw, 80px); padding: 2.6rem 0; border-bottom: 1px solid var(--rule); }
.note-row time { color: var(--muted); font: 12px/1.6 var(--latin); letter-spacing: .08em; }
.note-row h2 { margin-bottom: .8rem; font: 400 22px/1.3 var(--serif); }
.note-row p { max-width: var(--measure); margin-bottom: 0; font-size: 15px; }
.note-row .zh-copy { margin-top: 1rem; }
.error-state { display: grid; place-items: center; min-height: 60vh; font: 20px/1.5 var(--serif); }

/* ---------- breakpoints ------------------------------------------------- */

@media (max-width: 1500px) { .index-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
  .index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-projects { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  :root { --gutter: 24px; }
  .photo-page {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "rail" "stage" "foot";
    gap: var(--gutter) 0;
    min-height: auto;
  }
  .photo-stage img { max-height: 62vh; }
  .photo-hotzone { top: 72px; height: 62vh; width: 26%; }
  .home-hero { grid-template-columns: 1fr; min-height: auto; gap: 3rem; }
  .home-image img { max-height: 62vh; }
  .page-intro, .place-intro, .about-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .project-list { grid-template-columns: 1fr; }
  .section-heading { display: block; }
  .section-heading h2 { margin-bottom: 1rem; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-projects { grid-template-columns: 1fr 1fr; gap: 32px var(--gutter); }
  .site-header { gap: 18px; }
  .header-count { display: none; }
  .place-facts { grid-template-columns: 1fr; }
  .gallery-frame figcaption { flex-direction: column; gap: .35rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .project-cover img, .index-tile img, .home-project img { transition: none; }
}