/* site.css */
/* ==========================================================================
   行者无疆 · 官方宣传网站  design system
   ink / paper / brass — editorial, restrained, cultural
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  --ink: #101a17;
  --ink-2: #17251f;
  --ink-3: #23342d;
  --ink-soft: #3b4a44;
  --muted: #6b7a73;
  --muted-2: #8e9a94;
  --paper: #f5f1e8;
  --paper-2: #ece5d6;
  --paper-3: #e2d9c6;
  --white: #fdfbf6;
  --gold: #b08a3e;
  --gold-2: #c9a961;
  --gold-3: #e0c88f;
  --seal: #8c2f27;
  --jade: #2f5d50;
  --line: rgba(16, 26, 23, 0.13);
  --line-soft: rgba(16, 26, 23, 0.07);
  --line-ink: rgba(245, 241, 232, 0.16);

  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong",
    "SimSun", serif;
  --font-sans: "Noto Sans SC", "Source Han Sans SC", "PingFang SC",
    "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Cormorant Garamond", "Noto Serif SC", "Times New Roman",
    serif;

  --wrap: 1320px;
  --pad: clamp(20px, 4.4vw, 64px);
  --sec: clamp(76px, 9vw, 148px);
  --r: 2px;
  --ease: cubic-bezier(0.22, 0.68, 0.16, 1);
  --nav-h: 78px;
}

/* ---------------------------------------------------------------- reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,
svg,
video {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
h1,
h2,
h3,
h4,
h5,
p,
figure,
blockquote,
ul,
ol,
dl,
dd {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
::selection {
  background: var(--gold-2);
  color: var(--ink);
}
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- type */
.serif {
  font-family: var(--font-serif);
}
.display {
  font-family: var(--font-display);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before {
  content: "";
  width: 30px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.eyebrow--plain::before {
  display: none;
}
.eyebrow--ink {
  color: var(--ink-soft);
}
.sec-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.24;
  letter-spacing: 0.015em;
}
.sec-title em {
  font-style: normal;
  color: var(--gold);
}
.sec-desc {
  color: var(--muted);
  font-size: 15px;
  line-height: 2;
  max-width: 54ch;
}
.num {
  font-family: var(--font-display);
  font-feature-settings: "lnum";
  font-variant-numeric: lining-nums;
}

/* ---------------------------------------------------------------- layout */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--pad);
}
.wrap--narrow {
  max-width: 900px;
}
.section {
  padding-block: var(--sec);
  position: relative;
}
.section--tight {
  padding-block: clamp(48px, 6vw, 88px);
}
.section--ink {
  background: var(--ink);
  color: var(--paper);
}
.section--paper2 {
  background: var(--paper-2);
}
.section--line {
  border-top: 1px solid var(--line);
}
.grid {
  display: grid;
  gap: clamp(20px, 2.4vw, 36px);
}
.hairline {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}
.center {
  text-align: center;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* section header block */
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 72px);
  margin-bottom: clamp(40px, 5vw, 68px);
}
.sec-head__main {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sec-head__side {
  flex: none;
  text-align: right;
  padding-bottom: 6px;
}
@media (max-width: 860px) {
  .sec-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .sec-head__side {
    text-align: left;
    padding-bottom: 0;
  }
}

/* ---------------------------------------------------------------- buttons */
.btn {
  --btn-fg: var(--ink);
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 28px;
  border: 1px solid var(--btn-bd);
  color: var(--btn-fg);
  font-size: 13.5px;
  letter-spacing: 0.14em;
  font-weight: 500;
  line-height: 1;
  background: transparent;
  transition: background 0.45s var(--ease), color 0.45s var(--ease),
    border-color 0.45s var(--ease), transform 0.45s var(--ease);
  border-radius: var(--r);
}
.btn:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-1px);
}
.btn__arrow {
  transition: transform 0.45s var(--ease);
}
.btn:hover .btn__arrow {
  transform: translateX(5px);
}
.btn--gold {
  --btn-fg: #20180a;
  --btn-bd: var(--gold-2);
  background: var(--gold-2);
}
.btn--gold:hover {
  background: var(--gold-3);
  border-color: var(--gold-3);
  color: #20180a;
}
.btn--light {
  --btn-fg: var(--paper);
  --btn-bd: rgba(245, 241, 232, 0.45);
}
.btn--light:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.btn--sm {
  padding: 11px 18px;
  font-size: 12.5px;
}
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.link-arrow:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.link-arrow svg {
  transition: transform 0.4s var(--ease);
}
.link-arrow:hover svg {
  transform: translateX(4px);
}
.link-arrow--light {
  color: var(--paper);
  border-color: var(--line-ink);
}
.link-arrow--light:hover {
  color: var(--gold-2);
  border-color: var(--gold-2);
}

/* ---------------------------------------------------------------- nav */
.nav {
  position: fixed;
  inset: 0 0 auto;
  height: var(--nav-h);
  z-index: 120;
  display: flex;
  align-items: center;
  color: var(--paper);
  transition: background 0.5s var(--ease), color 0.5s var(--ease),
    border-color 0.5s var(--ease), height 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(9, 15, 13, 0.74) 0%,
    rgba(9, 15, 13, 0.42) 62%,
    rgba(9, 15, 13, 0) 100%
  );
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.5s var(--ease);
}
.nav.is-scrolled {
  height: 66px;
  color: var(--ink);
  background: rgba(245, 241, 232, 0.86);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav.is-scrolled::after {
  opacity: 0;
}
.nav--solid {
  position: sticky;
  top: 0;
  color: var(--ink);
  background: rgba(245, 241, 232, 0.9);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom-color: var(--line);
}
.nav--solid::after {
  opacity: 0;
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: 100%;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
  position: relative;
  z-index: 2;
}
.brand__seal {
  width: 38px;
  height: 38px;
  border: 1px solid currentColor;
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: 11px;
  line-height: 1.05;
  letter-spacing: 0;
  padding: 4px;
  text-align: center;
  opacity: 0.9;
  transition: background 0.5s var(--ease), color 0.5s var(--ease);
}
.brand__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.brand__name {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1;
  white-space: nowrap;
}
.brand__en {
  font-family: var(--font-display);
  font-size: 9.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.66;
  white-space: nowrap;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 34px);
  position: relative;
  z-index: 2;
}
.nav__links a {
  font-size: 13.5px;
  letter-spacing: 0.1em;
  padding: 6px 0;
  position: relative;
  opacity: 0.82;
  transition: opacity 0.3s var(--ease);
  white-space: nowrap;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.nav__links a:hover {
  opacity: 1;
}
.nav__links a:hover::after,
.nav__links a.is-active::after {
  transform: scaleX(1);
}
.nav__links a.is-active {
  opacity: 1;
}
.nav__tools {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 2;
}
.icon-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
  color: inherit;
}
.icon-btn:hover {
  border-color: currentColor;
}
.nav__burger {
  display: none;
}
@media (max-width: 1120px) {
  .nav__links {
    gap: 18px;
  }
  .nav__links a {
    font-size: 12.5px;
    letter-spacing: 0.04em;
  }
}
@media (max-width: 930px) {
  .nav__links {
    display: none;
  }
  .nav__burger {
    display: grid;
  }
  .brand__en {
    display: none;
  }
}

/* mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  padding: 28px var(--pad) 40px;
  transform: translateY(-102%);
  transition: transform 0.7s var(--ease);
  overflow-y: auto;
}
.drawer.is-open {
  transform: translateY(0);
}
.drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6vh;
}
.drawer__close {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-ink);
  display: grid;
  place-items: center;
}
.drawer__links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.drawer__links a {
  font-family: var(--font-serif);
  font-size: clamp(26px, 7vw, 34px);
  line-height: 1.5;
  padding: 8px 0;
  border-bottom: 1px solid rgba(245, 241, 232, 0.1);
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.drawer__links a small {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--gold-2);
  text-transform: uppercase;
  flex: none;
}
.drawer__foot {
  margin-top: auto;
  padding-top: 8vh;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--muted-2);
  font-size: 12.5px;
  letter-spacing: 0.08em;
}

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  min-height: min(100svh, 980px);
  display: flex;
  align-items: flex-end;
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  animation: heroZoom 26s var(--ease) forwards;
  filter: saturate(0.86) contrast(1.02);
}
@keyframes heroZoom {
  from {
    transform: scale(1.09);
  }
  to {
    transform: scale(1);
  }
}
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      180deg,
      rgba(8, 14, 12, 0.66) 0%,
      rgba(8, 14, 12, 0.24) 32%,
      rgba(8, 14, 12, 0.42) 62%,
      rgba(8, 14, 12, 0.94) 100%
    ),
    radial-gradient(
      120% 90% at 78% 12%,
      rgba(176, 138, 62, 0.16),
      transparent 60%
    );
}
.hero__inner {
  width: 100%;
  padding-top: calc(var(--nav-h) + 40px);
  padding-bottom: clamp(30px, 5vh, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.75fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
}
.hero__eyebrow {
  color: var(--gold-3);
  margin-bottom: clamp(20px, 3vh, 34px);
}
.hero__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(58px, 9.4vw, 148px);
  line-height: 0.96;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3);
}
.hero__title span {
  display: inline-block;
}
.hero__title-dash {
  width: clamp(38px, 6vw, 96px);
  height: 2px;
  background: linear-gradient(90deg, var(--gold-2), transparent);
  margin: clamp(20px, 3vh, 32px) 0 clamp(18px, 2.6vh, 28px);
}
.hero__sub {
  font-family: var(--font-serif);
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: 0.16em;
  color: rgba(245, 241, 232, 0.94);
  margin-bottom: 18px;
}
.hero__lead {
  max-width: 46ch;
  font-size: 14.5px;
  line-height: 2;
  color: rgba(245, 241, 232, 0.72);
  letter-spacing: 0.03em;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(26px, 4vh, 42px);
}
.hero__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 26px;
  padding-bottom: 4px;
}
.hero__seal {
  writing-mode: vertical-rl;
  font-family: var(--font-serif);
  font-size: clamp(15px, 1.4vw, 19px);
  letter-spacing: 0.5em;
  color: var(--gold-3);
  padding: 22px 10px;
  border: 1px solid rgba(201, 169, 97, 0.4);
  background: rgba(140, 47, 39, 0.22);
  max-height: 260px;
  align-self: flex-end;
}
.hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(245, 241, 232, 0.14);
  border-top: 1px solid rgba(245, 241, 232, 0.18);
  border-bottom: 1px solid rgba(245, 241, 232, 0.18);
  width: 100%;
}
.hero__stat {
  padding: 20px 4px 18px;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.hero__stat:nth-child(odd) {
  padding-right: 18px;
}
.hero__stat b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1;
  color: var(--gold-3);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.hero__stat b i {
  font-style: normal;
  font-size: 0.5em;
  letter-spacing: 0.06em;
  margin-left: 4px;
  color: rgba(245, 241, 232, 0.72);
}
.hero__stat span {
  font-size: 11.5px;
  letter-spacing: 0.24em;
  color: rgba(245, 241, 232, 0.62);
}
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.5);
  z-index: 3;
}
.hero__scroll::after {
  content: "";
  width: 1px;
  height: 34px;
  background: linear-gradient(
    180deg,
    rgba(245, 241, 232, 0.6),
    rgba(245, 241, 232, 0)
  );
  animation: scrollCue 2.4s var(--ease) infinite;
}
@keyframes scrollCue {
  0% {
    transform: scaleY(0);
    transform-origin: top;
    opacity: 0;
  }
  35% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(1) translateY(14px);
    opacity: 0;
  }
}

/* page hero (inner pages) */
.phero {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
  padding-top: calc(var(--nav-h) + clamp(56px, 9vw, 120px));
  padding-bottom: clamp(48px, 7vw, 92px);
}
.phero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.phero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.7) contrast(1.04);
  opacity: 0.5;
}
.phero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      180deg,
      rgba(9, 15, 13, 0.82),
      rgba(9, 15, 13, 0.72) 60%,
      rgba(9, 15, 13, 0.94)
    ),
    radial-gradient(90% 120% at 12% 0%, rgba(176, 138, 62, 0.18), transparent 55%);
}
.phero__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 940px;
}
.phero__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(38px, 5.6vw, 76px);
  line-height: 1.14;
  letter-spacing: 0.03em;
}
.phero__lead {
  max-width: 62ch;
  color: rgba(245, 241, 232, 0.74);
  font-size: 15px;
  line-height: 2.05;
}
.phero__crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: rgba(245, 241, 232, 0.5);
  text-transform: uppercase;
  font-family: var(--font-display);
}
.phero__crumbs a:hover {
  color: var(--gold-2);
}

/* ---------------------------------------------------------------- home sections */
.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.intro-quote {
  border-left: 1px solid var(--gold);
  padding-left: clamp(20px, 2.4vw, 34px);
}
.intro-quote blockquote {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.5vw, 32px);
  line-height: 1.7;
  letter-spacing: 0.02em;
}
.intro-quote cite {
  display: block;
  margin-top: 22px;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--muted);
  text-transform: uppercase;
}
.intro-body p {
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 2.1;
  margin-bottom: 1.4em;
}
.intro-body p:last-child {
  margin-bottom: 0;
}
.intro-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  border-radius: 999px;
  white-space: nowrap;
}
.tag--gold {
  border-color: rgba(176, 138, 62, 0.4);
  color: var(--gold);
  background: rgba(176, 138, 62, 0.06);
}
.tag--ink {
  border-color: transparent;
  background: rgba(16, 26, 23, 0.06);
}

/* stats strip */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stats__item {
  padding: clamp(26px, 3vw, 44px) clamp(16px, 2vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-left: 1px solid var(--line);
}
.stats__item:first-child {
  border-left: 0;
  padding-left: 0;
}
.stats__num {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 62px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.stats__num i {
  font-style: normal;
  font-size: 0.42em;
  letter-spacing: 0.1em;
  margin-left: 6px;
  color: var(--muted);
}
.stats__label {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--muted);
}
.stats__note {
  font-size: 11.5px;
  color: var(--muted-2);
  letter-spacing: 0.04em;
}
@media (max-width: 780px) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stats__item:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }
  .stats__item:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
}

/* series index list */
.index {
  border-top: 1px solid var(--line);
}
.index__row {
  position: relative;
  display: grid;
  grid-template-columns: 74px minmax(0, 1.15fr) minmax(0, 1fr) 150px 92px;
  gap: clamp(14px, 2vw, 30px);
  align-items: center;
  padding: clamp(20px, 2.2vw, 30px) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.5s var(--ease), color 0.4s var(--ease);
}
.index__row:hover {
  padding-left: 10px;
}
.index__no {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--gold);
}
.index__no b {
  font-size: 26px;
  font-weight: 500;
  color: var(--ink);
  margin-right: 4px;
  font-variant-numeric: lining-nums;
}
.index__name {
  font-family: var(--font-serif);
  font-size: clamp(19px, 2vw, 25px);
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.index__name small {
  display: block;
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-top: 4px;
}
.index__route {
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.index__period {
  font-family: var(--font-display);
  font-size: 13.5px;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.index__count {
  text-align: right;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.index__count b {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
  margin-right: 3px;
}
.index__thumb {
  position: absolute;
  right: 26%;
  top: 50%;
  width: 268px;
  aspect-ratio: 16 / 10;
  transform: translateY(-48%) scale(0.94) rotate(-1.2deg);
  opacity: 0;
  pointer-events: none;
  background: var(--ink-2);
  box-shadow: 0 24px 60px -24px rgba(16, 26, 23, 0.55);
  transition: opacity 0.45s var(--ease), transform 0.55s var(--ease);
  z-index: 5;
  overflow: hidden;
}
.index__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.index__row:hover .index__thumb {
  opacity: 1;
  transform: translateY(-50%) scale(1) rotate(-1.2deg);
}
@media (hover: none), (max-width: 1080px) {
  .index__thumb {
    display: none;
  }
}
@media (max-width: 860px) {
  .index__row {
    grid-template-columns: 52px minmax(0, 1fr) 84px;
    row-gap: 6px;
  }
  .index__route {
    grid-column: 2 / -1;
    font-size: 12px;
  }
  .index__period {
    display: none;
  }
  .index__count {
    text-align: right;
  }
}

/* series cards */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
}
@media (max-width: 1040px) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .cards {
    grid-template-columns: minmax(0, 1fr);
  }
}
.scard {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  transition: transform 0.6s var(--ease), border-color 0.5s var(--ease),
    box-shadow 0.6s var(--ease);
  position: relative;
  overflow: hidden;
}
.scard:hover {
  transform: translateY(-4px);
  border-color: rgba(176, 138, 62, 0.55);
  box-shadow: 0 30px 60px -34px rgba(16, 26, 23, 0.4);
}
.scard__cover {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink-2);
}
.scard__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease), opacity 0.6s var(--ease);
  opacity: 0.96;
}
.scard:hover .scard__cover img {
  transform: scale(1.045);
  opacity: 1;
}
.scard__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(9, 15, 13, 0.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.scard__veil {
  position: absolute;
  inset: auto 0 0;
  height: 55%;
  background: linear-gradient(180deg, transparent, rgba(9, 15, 13, 0.55));
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.scard:hover .scard__veil {
  opacity: 1;
}
.scard__body {
  padding: clamp(20px, 2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.scard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.scard__title {
  font-family: var(--font-serif);
  font-size: clamp(19px, 1.9vw, 23px);
  letter-spacing: 0.04em;
  line-height: 1.45;
}
.scard__desc {
  font-size: 13px;
  line-height: 1.95;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.scard__foot {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.scard__foot .arrow {
  transition: transform 0.45s var(--ease);
}
.scard:hover .scard__foot .arrow {
  transform: translateX(5px);
  color: var(--gold);
}

/* post cards / rows */
.pcard {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: clamp(16px, 2vw, 26px);
  padding-bottom: clamp(20px, 2.4vw, 28px);
  margin-bottom: clamp(20px, 2.4vw, 28px);
  border-bottom: 1px solid var(--line);
  group: post;
}
.pcard:last-child {
  border-bottom: 0;
}
.pcard__cover {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ink-2);
  position: relative;
}
.pcard__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.pcard:hover .pcard__cover img {
  transform: scale(1.05);
}
.pcard__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.pcard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.pcard__meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--muted-2);
}
.pcard__title {
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.5;
  letter-spacing: 0.02em;
  transition: color 0.35s var(--ease);
}
.pcard:hover .pcard__title {
  color: var(--gold);
}
.pcard__excerpt {
  font-size: 13px;
  line-height: 1.9;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 640px) {
  .pcard {
    grid-template-columns: 108px minmax(0, 1fr);
  }
  .pcard__excerpt {
    display: none;
  }
}

/* ---------------------------------------------------------------- filters */
.filterbar {
  position: sticky;
  top: 66px;
  z-index: 40;
  background: rgba(245, 241, 232, 0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  padding-block: 14px;
}
.filterbar__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.filterbar__label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  flex: none;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.chip {
  padding: 7px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  background: transparent;
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
    border-color 0.3s var(--ease);
  white-space: nowrap;
  cursor: pointer;
}
.chip:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.chip small {
  opacity: 0.6;
  margin-left: 4px;
  font-size: 10.5px;
}
.searchbox {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  padding: 8px 14px;
  min-width: 220px;
  background: rgba(255, 255, 255, 0.5);
  margin-left: auto;
}
.searchbox input {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink);
  outline: none;
  width: 100%;
  min-width: 0;
}
.searchbox input::placeholder {
  color: var(--muted-2);
  letter-spacing: 0.06em;
}
.searchbox svg {
  flex: none;
  color: var(--muted);
}
.filter-count {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--muted);
  flex: none;
}
.filter-count b {
  color: var(--ink);
  font-weight: 500;
  font-size: 15px;
}
@media (max-width: 860px) {
  .filterbar {
    position: relative;
    top: 0;
  }
  .searchbox {
    margin-left: 0;
    order: 9;
    width: 100%;
  }
}

/* ---------------------------------------------------------------- archive grid */
.archive-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(28px, 4vw, 64px);
}
@media (max-width: 860px) {
  .archive-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.archive-empty {
  padding: 80px 0;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 0.08em;
}
.entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
  transition: background 0.4s var(--ease), padding-left 0.4s var(--ease);
}
.entry:hover {
  padding-left: 8px;
}
.entry__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 7px;
}
.entry__cat {
  color: var(--gold);
}
.entry__title {
  font-family: var(--font-serif);
  font-size: 16.5px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  transition: color 0.3s var(--ease);
}
.entry:hover .entry__title {
  color: var(--gold);
}
.entry__cover {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--paper-3);
}
.entry__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.entry:hover .entry__cover img {
  transform: scale(1.06);
}
.entry.is-hidden,
.pcard.is-hidden {
  display: none;
}

/* ---------------------------------------------------------------- timeline */
.tl {
  position: relative;
}
.tl__year {
  position: sticky;
  top: 66px;
  z-index: 20;
  background: linear-gradient(
    180deg,
    var(--paper) 65%,
    rgba(245, 241, 232, 0) 100%
  );
  padding: 14px 0 12px;
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.tl__year b {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
}
.tl__year span {
  font-size: 11.5px;
  letter-spacing: 0.22em;
  color: var(--muted);
  text-transform: uppercase;
  font-family: var(--font-display);
}
.tl__year::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
  margin-left: 6px;
}
.tl__items {
  border-left: 1px solid var(--line);
  margin-left: 8px;
  padding-left: clamp(20px, 2.6vw, 36px);
  padding-bottom: 34px;
}
.tl__item {
  position: relative;
  padding: 12px 0 18px;
}
.tl__item::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(20px, 2.6vw, 36px) - 4.5px);
  top: 22px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--gold);
  background: var(--paper);
  transform: rotate(45deg);
}
.tl__item time {
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.tl__item h4 {
  font-family: var(--font-serif);
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.6;
  margin: 5px 0 6px;
  transition: color 0.3s var(--ease);
}
.tl__item:hover h4 {
  color: var(--gold);
}
.tl__item .cat {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 2px 8px;
  display: inline-block;
  border-radius: 999px;
}
.tl__item.is-hidden {
  display: none;
}

/* ---------------------------------------------------------------- prose (article body) */
.article {
  background: var(--paper);
}
.article__head {
  padding-top: calc(var(--nav-h) + clamp(34px, 5vw, 64px));
  padding-bottom: clamp(26px, 3.4vw, 44px);
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.article__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(27px, 4vw, 46px);
  line-height: 1.4;
  letter-spacing: 0.015em;
}
.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--muted);
  align-items: center;
}
.article__meta .sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--muted-2);
}
.article__cover {
  max-width: 1180px;
  margin: 0 auto clamp(34px, 4vw, 56px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink-2);
}
.article__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.prose {
  background: transparent;
  max-width: 780px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 2.05;
  color: #26312c;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.prose > *:first-child {
  margin-top: 0;
}
.prose p {
  margin: 0 0 1.5em;
  min-height: 0;
}
.prose section {
  display: block;
}
.prose p:empty,
.prose section:empty {
  display: none;
}
.prose img,
.prose .content-img {
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 2em auto;
  cursor: zoom-in;
  background: var(--paper-2);
}
.prose img[data-w] {
  display: block;
}
.prose figure {
  margin: 2em 0;
}
.prose figcaption {
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-top: 10px;
}
.prose strong,
.prose b {
  color: var(--ink);
  font-weight: 700;
}
.prose em,
.prose i {
  font-style: italic;
}
.prose a {
  color: var(--jade);
  border-bottom: 1px solid rgba(47, 93, 80, 0.35);
}
.prose h1,
.prose h2,
.prose h3,
.prose h4 {
  font-family: var(--font-serif);
  color: var(--ink);
  line-height: 1.5;
  margin: 2em 0 0.9em;
  letter-spacing: 0.02em;
}
.prose h2 {
  font-size: 24px;
}
.prose h3 {
  font-size: 20px;
}
.prose blockquote {
  margin: 2em 0;
  padding: 6px 0 6px 24px;
  border-left: 2px solid var(--gold);
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.95;
}
.prose ul,
.prose ol {
  margin: 0 0 1.5em;
  padding-left: 1.4em;
}
.prose ul li {
  list-style: disc;
}
.prose ol li {
  list-style: decimal;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
  font-size: 14px;
}
.prose td,
.prose th {
  border: 1px solid var(--line);
  padding: 10px 12px;
}
.prose hr {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: 2.4em 0;
}
.prose span {
  line-height: inherit;
}
.prose .video-embed {
  position: relative;
  margin: 2.4em 0;
  aspect-ratio: var(--ar, 1.78);
  background: var(--ink-2);
  display: grid;
  place-items: center;
  color: rgba(245, 241, 232, 0.8);
  border: 1px solid var(--line);
}
.prose .video-embed figcaption {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  color: rgba(245, 241, 232, 0.7);
  font-size: 12px;
  letter-spacing: 0.1em;
}
.prose .video-play {
  width: 62px;
  height: 62px;
  border: 1px solid rgba(245, 241, 232, 0.5);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 18px;
  padding-left: 4px;
}
.article__foot {
  max-width: 780px;
  margin: clamp(40px, 5vw, 72px) auto 0;
  padding-top: clamp(28px, 3.4vw, 44px);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.article__source {
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
  line-height: 1.8;
}
.pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  margin-top: clamp(36px, 4.4vw, 60px);
}
.pager__item {
  border: 1px solid var(--line);
  padding: clamp(18px, 2vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.pager__item:hover {
  border-color: rgba(176, 138, 62, 0.5);
  background: rgba(255, 255, 255, 0.45);
}
.pager__item small {
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--muted);
  text-transform: uppercase;
}
.pager__item span {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.5;
}
.pager__item--next {
  text-align: right;
  align-items: flex-end;
}
@media (max-width: 640px) {
  .pager {
    grid-template-columns: minmax(0, 1fr);
  }
  .pager__item--next {
    text-align: left;
    align-items: flex-start;
  }
}

/* related */
.related {
  border-top: 1px solid var(--line);
  padding-top: clamp(44px, 5vw, 72px);
}

/* ---------------------------------------------------------------- gallery */
.masonry {
  columns: 4;
  column-gap: clamp(10px, 1.2vw, 18px);
}
.masonry figure {
  margin: 0 0 clamp(10px, 1.2vw, 18px);
  break-inside: avoid;
  position: relative;
  overflow: hidden;
  background: var(--paper-3);
  cursor: zoom-in;
}
.masonry figure img {
  width: 100%;
  height: auto;
  transition: transform 1s var(--ease), filter 0.6s var(--ease);
}
.masonry figure:hover img {
  transform: scale(1.04);
  filter: brightness(0.92);
}
.masonry figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 26px 14px 12px;
  background: linear-gradient(180deg, transparent, rgba(9, 15, 13, 0.7));
  color: rgba(245, 241, 232, 0.92);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  line-height: 1.5;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.masonry figure:hover figcaption {
  opacity: 1;
}
.masonry figure.is-hidden {
  display: none;
}
@media (max-width: 1100px) {
  .masonry {
    columns: 3;
  }
}
@media (max-width: 720px) {
  .masonry {
    columns: 2;
  }
}

/* ---------------------------------------------------------------- lightbox */
.lb {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(7, 11, 10, 0.95);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: none;
  color: var(--paper);
}
.lb.is-open {
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.lb__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px var(--pad);
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  color: rgba(245, 241, 232, 0.6);
}
.lb__close {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(245, 241, 232, 0.3);
  display: grid;
  place-items: center;
  transition: background 0.3s var(--ease);
}
.lb__close:hover {
  background: rgba(245, 241, 232, 0.1);
}
.lb__stage {
  display: grid;
  place-items: center;
  padding: 0 var(--pad);
  min-height: 0;
  position: relative;
}
.lb__stage img {
  max-width: 100%;
  max-height: calc(100vh - 190px);
  object-fit: contain;
  box-shadow: 0 40px 120px -40px #000;
}
.lb__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border: 1px solid rgba(245, 241, 232, 0.28);
  display: grid;
  place-items: center;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.lb__nav:hover {
  background: rgba(245, 241, 232, 0.12);
  border-color: rgba(245, 241, 232, 0.6);
}
.lb__prev {
  left: clamp(8px, 2vw, 28px);
}
.lb__next {
  right: clamp(8px, 2vw, 28px);
}
.lb__cap {
  padding: 16px var(--pad) 22px;
  text-align: center;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: rgba(245, 241, 232, 0.7);
}

/* ---------------------------------------------------------------- search modal */
.search-modal {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: clamp(20px, 8vh, 110px) var(--pad) 40px;
  background: rgba(9, 15, 13, 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
}
.search-modal.is-open {
  opacity: 1;
  visibility: visible;
}
.search-modal__panel {
  width: 100%;
  max-width: 780px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 50px 120px -30px rgba(0, 0, 0, 0.6);
  transform: translateY(-14px);
  transition: transform 0.45s var(--ease);
  max-height: min(78vh, 760px);
  display: flex;
  flex-direction: column;
}
.search-modal.is-open .search-modal__panel {
  transform: none;
}
.search-modal__field {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px clamp(18px, 2.4vw, 30px);
  border-bottom: 1px solid var(--line);
}
.search-modal__field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-serif);
  font-size: 19px;
  letter-spacing: 0.04em;
  color: var(--ink);
  outline: none;
}
.search-modal__field kbd {
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  border: 1px solid var(--line);
  padding: 3px 7px;
  color: var(--muted);
}
.search-modal__hint {
  padding: 14px clamp(18px, 2.4vw, 30px);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--muted);
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.search-modal__results {
  overflow-y: auto;
  padding: 6px 0 14px;
}
.sresult {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 14px;
  padding: 12px clamp(18px, 2.4vw, 30px);
  align-items: baseline;
  transition: background 0.25s var(--ease);
}
.sresult:hover,
.sresult.is-cur {
  background: rgba(16, 26, 23, 0.05);
}
.sresult time {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.sresult b {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.55;
  display: block;
}
.sresult em {
  font-style: normal;
  background: rgba(201, 169, 97, 0.35);
}
.sresult small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.search-modal__empty {
  padding: 36px 30px;
  color: var(--muted);
  font-size: 13.5px;
}
body.is-locked {
  overflow: hidden;
}

/* ---------------------------------------------------------------- project detail */
.proj-hero {
  position: relative;
  color: var(--paper);
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
  padding-top: calc(var(--nav-h) + clamp(48px, 7vw, 96px));
  padding-bottom: clamp(40px, 6vw, 80px);
  min-height: min(78svh, 720px);
  display: flex;
  align-items: flex-end;
}
.proj-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.proj-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  opacity: 0.62;
  filter: saturate(0.8);
}
.proj-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(9, 15, 13, 0.74),
    rgba(9, 15, 13, 0.3) 45%,
    rgba(9, 15, 13, 0.92)
  );
}
.proj-hero__inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 1000px;
}
.proj-hero__no {
  font-family: var(--font-display);
  font-size: clamp(50px, 8vw, 110px);
  line-height: 0.9;
  color: rgba(245, 241, 232, 0.22);
  letter-spacing: 0.02em;
}
.proj-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(38px, 6vw, 84px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.05em;
}
.proj-hero__sub {
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.8vw, 22px);
  letter-spacing: 0.16em;
  color: var(--gold-3);
}
.proj-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  padding-top: 22px;
  border-top: 1px solid rgba(245, 241, 232, 0.2);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  color: rgba(245, 241, 232, 0.72);
}
.proj-hero__meta b {
  color: var(--paper);
  font-weight: 500;
}
.proj-body {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 84px);
  align-items: start;
}
@media (max-width: 940px) {
  .proj-body {
    grid-template-columns: minmax(0, 1fr);
  }
}
.proj-body__side {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
@media (max-width: 940px) {
  .proj-body__side {
    position: static;
  }
}
.factlist {
  border-top: 1px solid var(--line);
}
.factlist div {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.7;
}
.factlist dt,
.factlist span:first-child {
  color: var(--muted);
  letter-spacing: 0.1em;
  font-size: 12px;
}
.factlist span:last-child {
  color: var(--ink-soft);
}
.proj-lead {
  font-family: var(--font-serif);
  font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.85;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  margin-bottom: 1.4em;
}
.proj-copy p {
  font-size: 15px;
  line-height: 2.1;
  color: var(--ink-soft);
  margin-bottom: 1.3em;
}
.focus-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line);
  margin-top: 30px;
}
.focus-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 16px;
  align-items: baseline;
  font-size: 14px;
}
.focus-list li b {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 0.1em;
  flex: none;
  width: 34px;
}
.route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 8px;
  margin-top: 8px;
}
.route__stop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid var(--line);
  font-size: 13px;
  letter-spacing: 0.06em;
}
.route__stop small {
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: 0.06em;
}
.route__arrow {
  color: var(--muted-2);
}
.proj-nav {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--line);
  padding-top: 30px;
  margin-top: clamp(40px, 5vw, 70px);
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------- team page */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 90px);
  align-items: start;
}
@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.about-figure {
  position: relative;
}
.about-figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.about-figure figcaption {
  position: absolute;
  right: -1px;
  bottom: -1px;
  background: var(--paper);
  padding: 14px 18px;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  color: var(--muted);
  border: 1px solid var(--line);
}
.about-text p {
  font-size: 15.5px;
  line-height: 2.15;
  color: var(--ink-soft);
  margin-bottom: 1.4em;
}
.about-text h3 {
  font-family: var(--font-serif);
  font-size: clamp(21px, 2.2vw, 27px);
  margin: 1.6em 0 0.8em;
  letter-spacing: 0.03em;
}
.pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.pillar {
  background: var(--paper);
  padding: clamp(22px, 2.6vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pillar b {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--gold);
  font-weight: 500;
}
.pillar h4 {
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.7vw, 21px);
  letter-spacing: 0.03em;
}
.pillar p {
  font-size: 13px;
  line-height: 1.95;
  color: var(--muted);
}
@media (max-width: 900px) {
  .pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .pillars {
    grid-template-columns: minmax(0, 1fr);
  }
}
.yearbook {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.yearbook__row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 150px;
  gap: clamp(16px, 2.4vw, 40px);
  padding: clamp(20px, 2.4vw, 30px) 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  transition: background 0.4s var(--ease);
}
.yearbook__row:hover {
  background: rgba(255, 255, 255, 0.4);
}
.yearbook__y {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1;
  letter-spacing: 0.02em;
}
.yearbook__main b {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.02em;
}
.yearbook__main p {
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--muted);
  margin-top: 6px;
}
.yearbook__side {
  text-align: right;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.yearbook__side b {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  margin-right: 4px;
}
@media (max-width: 760px) {
  .yearbook__row {
    grid-template-columns: 82px minmax(0, 1fr);
  }
  .yearbook__side {
    display: none;
  }
}
.roster {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.roster span {
  padding: 9px 16px;
  border: 1px solid var(--line);
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.roster span:hover {
  border-color: var(--gold);
  background: rgba(201, 169, 97, 0.08);
}

/* ---------------------------------------------------------------- contact */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
}
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.contact-card {
  border: 1px solid var(--line);
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--white);
}
.contact-card h3 {
  font-family: var(--font-serif);
  font-size: clamp(19px, 2vw, 24px);
  letter-spacing: 0.04em;
}
.contact-card dl {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.contact-card dl div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px;
  line-height: 1.85;
}
.contact-card dt {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.08em;
}
.qr-block {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border: 1px dashed var(--line);
  background: rgba(255, 255, 255, 0.5);
}
.qr-block img {
  width: 112px;
  height: 112px;
  object-fit: cover;
  background: #fff;
}
.qr-block b {
  font-family: var(--font-serif);
  font-size: 16px;
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 6px;
}
.qr-block p {
  font-size: 12px;
  line-height: 1.9;
  color: var(--muted);
}
.notice {
  border-left: 2px solid var(--gold);
  padding: 4px 0 4px 18px;
  font-size: 12.5px;
  line-height: 2;
  color: var(--muted);
}
.big-mail {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.6vw, 32px);
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.big-mail:hover {
  color: var(--gold);
  border-color: var(--gold);
}

/* ---------------------------------------------------------------- footer */
.footer {
  background: var(--ink);
  color: var(--paper);
  padding-top: clamp(56px, 7vw, 96px);
  overflow: hidden;
  position: relative;
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 0.7fr));
  gap: clamp(30px, 4vw, 60px);
  padding-bottom: clamp(44px, 5vw, 72px);
  border-bottom: 1px solid var(--line-ink);
}
.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 400px;
}
.footer__brand p {
  color: rgba(245, 241, 232, 0.6);
  font-size: 13px;
  line-height: 2;
}
.footer h5 {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 20px;
  font-weight: 500;
}
.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.footer__col a {
  font-size: 13.5px;
  color: rgba(245, 241, 232, 0.72);
  letter-spacing: 0.04em;
  transition: color 0.3s var(--ease);
}
.footer__col a:hover {
  color: var(--gold-2);
}
.footer__wordmark {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(58px, 14vw, 210px);
  line-height: 0.9;
  letter-spacing: 0.06em;
  color: rgba(245, 241, 232, 0.055);
  padding: clamp(24px, 3vw, 44px) 0 clamp(10px, 1.4vw, 20px);
  white-space: nowrap;
  user-select: none;
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0 30px;
  border-top: 1px solid var(--line-ink);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: rgba(245, 241, 232, 0.45);
}
.footer__bottom a:hover {
  color: var(--gold-2);
}
@media (max-width: 900px) {
  .footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer__brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 560px) {
  .footer__top {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* back to top */
.totop {
  position: fixed;
  right: clamp(14px, 2vw, 30px);
  bottom: clamp(14px, 2vw, 30px);
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  background: rgba(245, 241, 232, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  color: var(--ink);
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease),
    visibility 0.4s var(--ease), background 0.3s var(--ease);
}
.totop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.totop:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* reading progress */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-3));
  z-index: 130;
  transition: width 0.1s linear;
}

/* reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}
[data-reveal="fade"] {
  transform: none;
}
[data-reveal="left"] {
  transform: translateX(-28px);
}
[data-reveal="right"] {
  transform: translateX(28px);
}

/* misc */
.ticker {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
  background: var(--paper-2);
}
.ticker__track {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  width: max-content;
  animation: ticker 60s linear infinite;
}
.ticker__track span {
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0.28em;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 48px;
}
.ticker__track span::after {
  content: "◆";
  font-size: 6px;
  color: var(--gold);
}
@keyframes ticker {
  to {
    transform: translateX(-50%);
  }
}
.note-inline {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
  line-height: 1.9;
}
.divider-seal {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: clamp(30px, 4vw, 54px) auto;
  max-width: 280px;
}
.divider-seal::before,
.divider-seal::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.divider-seal span {
  font-family: var(--font-serif);
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--gold);
}
.empty-note {
  padding: 40px 0;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* reduce motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* small screens */
@media (max-width: 860px) {
  :root {
    --nav-h: 66px;
  }
  .hero {
    min-height: 92svh;
  }
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
  .hero__aside {
    align-items: flex-start;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
  }
  .hero__seal {
    max-height: 140px;
    font-size: 12px;
    padding: 14px 8px;
    letter-spacing: 0.3em;
  }
  .hero__stats {
    flex: 1;
    min-width: 0;
  }
  .hero__stat {
    padding: 14px 4px 12px;
  }
  .hero__scroll {
    display: none;
  }
  .intro-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 560px) {
  body {
    font-size: 15px;
  }
  .hero__title {
    letter-spacing: 0.03em;
  }
  .action-row {
    flex-direction: column;
    align-items: stretch;
  }
  .action-row .btn {
    width: 100%;
  }
}
.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}


/* ===================================================================
   appendix: honours / press / fixes (added with team & contact pages)
   =================================================================== */

.awards {
  border-top: 1px solid var(--line);
}
.award {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 88px 96px;
  gap: 18px;
  align-items: center;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line);
  transition: background 0.4s var(--ease), padding 0.4s var(--ease);
}
.award:hover {
  background: var(--line-soft);
}
.award__y {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: 0.1em;
  color: var(--gold);
}
.award__m b {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.55vw, 19px);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.award__m span {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  color: var(--muted);
}
.award__lv {
  justify-self: start;
  padding: 5px 14px;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--gold);
  border: 1px solid rgba(176, 138, 62, 0.45);
  border-radius: 999px;
  white-space: nowrap;
}
.award__src {
  justify-self: end;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
  border-bottom: 1px solid transparent;
}
.award__src:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.media-list {
  border-top: 1px solid var(--line);
}
.media-item {
  display: grid;
  grid-template-columns: 76px 190px minmax(0, 1fr) 170px;
  gap: 18px;
  align-items: baseline;
  padding: 18px 4px;
  border-bottom: 1px solid var(--line);
  transition: background 0.4s var(--ease);
}
.media-item:hover {
  background: var(--line-soft);
}
.media-item time {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.media-item__m {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--gold);
}
.media-item__t {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
  transition: color 0.35s var(--ease);
}
.media-item:hover .media-item__t {
  color: var(--gold);
}
.media-item small {
  justify-self: end;
  font-size: 12px;
  color: var(--muted-2);
  white-space: nowrap;
}

/* fixes discovered while assembling pages */
.tl__group.is-hidden {
  display: none;
}
[id] {
  scroll-margin-top: calc(var(--nav-h) + 16px);
}
.pillar b + h4 {
  margin-top: 0;
}
.pillars .pillar .eyebrow {
  color: var(--gold);
  font-size: 10px;
  letter-spacing: 0.2em;
}
.section--line .sec-head {
  border-top: 0;
}

@media (max-width: 900px) {
  .award {
    grid-template-columns: 76px minmax(0, 1fr) 88px;
    row-gap: 6px;
  }
  .award__src {
    grid-column: 2 / -1;
    justify-self: start;
  }
  .media-item {
    grid-template-columns: 70px minmax(0, 1fr) 130px;
    row-gap: 4px;
  }
  .media-item__m {
    grid-column: 2;
    grid-row: 1;
  }
  .media-item__t {
    grid-column: 2 / -1;
    grid-row: 2;
  }
  .media-item small {
    grid-column: 2 / -1;
    grid-row: 3;
    justify-self: start;
  }
}
@media (max-width: 620px) {
  .award {
    grid-template-columns: minmax(0, 1fr) 84px;
  }
  .award__y {
    grid-column: 1 / -1;
    font-size: 15px;
  }
  .award__m {
    grid-column: 1;
  }
  .award__lv {
    grid-column: 2;
    grid-row: 1;
  }
  .media-item {
    grid-template-columns: minmax(0, 1fr) 110px;
  }
}


/* ===================================================================
   appendix: filter toolbar / hero seal / image polish
   =================================================================== */

.filterbar__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--pad);
}
.chips {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-block: 2px;
}
.chips::-webkit-scrollbar {
  display: none;
}
.filterbar .searchbox {
  flex: none;
}
.hero__seal {
  max-height: none;
  white-space: nowrap;
  align-self: flex-end;
}
.prose .content-img {
  background: var(--paper-2);
}
.entry__cover img,
.pcard__cover img,
.scard__cover img,
.about-figure img,
.masonry img {
  background: var(--paper-3);
}

@media (max-width: 900px) {
  .filterbar__inner {
    flex-wrap: wrap;
    row-gap: 12px;
  }
  .chips {
    order: 3;
    flex-basis: 100%;
  }
  .filterbar .searchbox {
    margin-left: auto;
  }
  .hero__seal {
    white-space: normal;
  }
}


.intro-quote blockquote,
.hero__lead,
.sec-desc {
  text-wrap: balance;
}
.article__cover img {
  max-height: 62vh;
  object-fit: cover;
}
.article__cover {
  background: transparent;
}


.embed-note {
  margin: 2.2em 0;
  padding: 22px 18px;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 13.5px;
  letter-spacing: 0.08em;
  color: var(--muted);
  background: var(--paper-2);
  border: 1px solid var(--line);
}


/* --- final polish (appendix 2) --- */
.proj-hero__no {
  color: rgba(245, 241, 232, 0.82) !important;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}
.proj-body__side .btn {
  display: inline-flex;
  width: auto;
  align-self: flex-start;
}
.intro-quote blockquote {
  text-wrap: balance;
  hyphens: none;
}
.article__meta {
  color: var(--ink-soft);
}
.article__meta .sep {
  opacity: 0.55;
}
@media (max-width: 620px) {
  .proj-body__side .btn {
    width: 100%;
    justify-content: center;
  }
}


.yearnav {
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
}
.yearnav > .wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 14px;
  padding-bottom: 14px;
}
.yearnav__label {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--muted-2);
  margin-right: 6px;
  white-space: nowrap;
}
.yearnav .chip {
  padding: 7px 14px;
}

/* ==========================================================================
   ROUND 2 — 索引配图常驻 / 筛选条重构 / 沿革版式 / 姓名墙 / 栏目分区
   ========================================================================== */

/* ---- home: eighteen expeditions, photo always visible ------------------- */
.index {
  border-top: 1px solid var(--line);
}
.index__row {
  display: grid;
  grid-template-columns: 92px 216px minmax(0, 1fr) 196px 76px;
  gap: clamp(16px, 2vw, 32px);
  align-items: center;
  padding: clamp(16px, 1.6vw, 24px) 0;
  border-bottom: 1px solid var(--line);
  transition: background 0.5s var(--ease), padding-left 0.5s var(--ease);
}
.index__row:hover {
  padding-left: 8px;
  background: linear-gradient(90deg, rgba(176, 138, 62, 0.07), rgba(176, 138, 62, 0) 62%);
}
.index__no {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-family: var(--font-display);
  line-height: 1;
}
.index__no b {
  font-size: 23px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.index__no i {
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--gold);
}
.index__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--paper-2);
}
.index__media::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(16, 26, 23, 0.08);
  pointer-events: none;
}
.index__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 1.4s var(--ease), filter 0.8s var(--ease);
}
.index__row:hover .index__media img {
  transform: scale(1.05);
}
.index__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.index__kicker {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-transform: uppercase;
}
.index__name {
  font-family: var(--font-serif);
  font-size: clamp(18px, 1.72vw, 23px);
  letter-spacing: 0.045em;
  line-height: 1.35;
  color: var(--ink);
}
.index__lead {
  font-size: 12.5px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--muted);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.index__route {
  font-size: 12.5px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.index__count {
  text-align: right;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
  white-space: nowrap;
}
.index__count b {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
  margin-right: 3px;
}
@media (max-width: 1120px) {
  .index__row {
    grid-template-columns: 76px 176px minmax(0, 1fr) 76px;
  }
  .index__route {
    display: none;
  }
}
@media (max-width: 780px) {
  .index__row {
    grid-template-columns: 104px minmax(0, 1fr) 62px;
    gap: 14px;
    align-items: start;
  }
  .index__no {
    display: none;
  }
  .index__media {
    aspect-ratio: 4 / 3;
  }
  .index__lead {
    -webkit-line-clamp: 2;
    margin-top: 2px;
  }
  .index__kicker {
    font-size: 9.5px;
  }
}

/* ---- projects: editorial rows, alternating photo side ------------------- */
.prow-list {
  border-top: 1px solid var(--line);
}
.prow {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3.2vw, 54px);
  padding: clamp(26px, 2.8vw, 40px) 0;
  border-bottom: 1px solid var(--line);
}
.prow:nth-child(even) {
  flex-direction: row-reverse;
}
.prow__no {
  flex: 0 0 66px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-display);
  line-height: 1;
}
.prow__no b {
  font-size: 25px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--ink);
}
.prow__no i {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--gold);
}
.prow__media {
  flex: 0 0 47%;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--paper-2);
}
.prow__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.prow__media::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(16, 26, 23, 0.08);
  pointer-events: none;
}
.prow:hover .prow__media img {
  transform: scale(1.045);
}
.prow__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.prow__kicker {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-transform: uppercase;
}
.prow__name {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.1vw, 27px);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.35;
  color: var(--ink);
  transition: color 0.4s var(--ease);
}
.prow:hover .prow__name {
  color: var(--gold);
}
.prow__lead {
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--muted);
  max-width: 46ch;
}
.prow__meta {
  margin-top: 6px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--muted-2);
}
.prow__meta b {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-right: 2px;
}
@media (max-width: 900px) {
  .prow,
  .prow:nth-child(even) {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .prow__no {
    flex: none;
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
  }
  .prow__media {
    flex: none;
  }
}

/* ---- filter bar: label / scroll rail / search / count ------------------- */
.filterbar {
  position: relative;
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line);
}
.filterbar + .filterbar {
  border-top: 0;
}
.filterbar__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 214px auto;
  align-items: center;
  gap: clamp(12px, 1.6vw, 24px);
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 12px var(--pad);
  white-space: normal;
}
.filterbar__label {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--muted-2);
  white-space: nowrap;
}
.rail {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.rail__nav {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.rail__nav[hidden] {
  display: none;
}
.rail__nav:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.rail__nav svg {
  width: 11px;
  height: 11px;
  display: block;
}
.rail__ico--prev {
  transform: rotate(180deg);
}
.chips {
  display: flex;
  align-items: stretch;
  gap: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 1px;
  scroll-behavior: smooth;
}
.chips::-webkit-scrollbar {
  display: none;
}
.chip {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 92px;
  padding: 8px 13px 9px;
  border: 1px solid var(--line-2);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease),
    transform 0.35s var(--ease);
}
.chip i {
  font-style: normal;
  font-family: var(--font-display);
  font-size: 8.5px;
  letter-spacing: 0.18em;
  color: var(--gold);
}
.chip span {
  font-family: var(--font-serif);
  font-size: 13.5px;
  letter-spacing: 0.06em;
  line-height: 1.3;
  color: var(--ink);
  white-space: nowrap;
}
.chip small {
  font-family: var(--font-display);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--muted-2);
}
.chip:hover {
  border-color: var(--ink-2);
  transform: translateY(-1px);
}
.chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
}
.chip.is-active i {
  color: rgba(245, 241, 232, 0.55);
}
.chip.is-active span {
  color: var(--paper);
}
.chip.is-active small {
  color: rgba(245, 241, 232, 0.6);
}
.filterbar .searchbox {
  width: 100%;
  min-width: 0;
}
.filter-count {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--muted);
  white-space: nowrap;
}
.filter-count b {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0 2px;
}
@media (max-width: 980px) {
  .filterbar__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .filterbar .searchbox {
    grid-column: 1 / -1;
    order: 4;
  }
}
@media (max-width: 620px) {
  .filterbar__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .filterbar__label {
    grid-column: 1 / -1;
  }
  .rail {
    grid-column: 1 / -1;
    order: 2;
  }
  .filter-count {
    order: 3;
    text-align: right;
  }
}

/* ---- archive: sections per column --------------------------------------- */
.arch-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: clamp(22px, 2.4vw, 34px);
}
.arch-bar__hint {
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.arch-bar__hint b {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 500;
  margin: 0 2px;
}
.arch-group {
  padding-top: clamp(24px, 2.4vw, 34px);
}
.arch-group + .arch-group {
  margin-top: clamp(30px, 3vw, 46px);
  border-top: 1px solid var(--line);
}
.arch-group__head {
  display: grid;
  grid-template-columns: minmax(150px, 200px) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 4px 30px;
  align-items: baseline;
  margin-bottom: clamp(18px, 2vw, 26px);
}
.arch-group__head h3 {
  grid-row: 1 / span 3;
  font-family: var(--font-serif);
  font-size: clamp(21px, 2.2vw, 28px);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--ink);
}
.arch-group__n {
  grid-column: 2;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted-2);
}
.arch-group__n b {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-right: 2px;
}
.arch-group__desc {
  grid-column: 2;
  max-width: 66ch;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}
.arch-group__en {
  grid-column: 2;
  font-family: var(--font-display);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-2);
}
@media (max-width: 620px) {
  .arch-group__head {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .arch-group__head h3,
  .arch-group__n,
  .arch-group__desc,
  .arch-group__en {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ---- team: yearbook as yearly blocks with period chips ------------------ */
.yb {
  border-top: 1px solid var(--line);
}
.yb-year {
  display: grid;
  grid-template-columns: minmax(160px, 214px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 48px);
  padding: clamp(24px, 2.4vw, 34px) 0;
  border-bottom: 1px solid var(--line);
}
.yb-year__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(36px, 4.4vw, 54px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ink);
  font-variant-numeric: lining-nums;
}
.yb-year__title {
  margin-top: 10px;
  font-family: var(--font-serif);
  font-size: 15px;
  letter-spacing: 0.05em;
  color: var(--ink);
}
.yb-year__meta {
  margin-top: 6px;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--muted-2);
}
.yb-year__meta b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 0 1px;
}
.yb-year__desc {
  font-size: 13.5px;
  line-height: 1.85;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  max-width: 64ch;
}
.yb-year__periods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.yb-chip {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 122px;
  padding: 9px 14px 10px;
  border: 1px solid var(--line-2);
  background: var(--paper);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.yb-chip__no {
  font-family: var(--font-display);
  font-size: 8.5px;
  letter-spacing: 0.2em;
  color: var(--gold);
}
.yb-chip__name {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--ink);
  white-space: nowrap;
}
.yb-chip__term {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--muted-2);
  white-space: nowrap;
}
.yb-chip:hover {
  transform: translateY(-2px);
  border-color: var(--ink);
  box-shadow: 0 12px 26px -18px rgba(16, 26, 23, 0.4);
}
.yb-year__none {
  font-size: 11px;
  color: var(--muted-2);
}
@media (max-width: 720px) {
  .yb-year {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .yb-year__num {
    font-size: 40px;
  }
}

/* ---- team: name wall ---------------------------------------------------- */
.namewall__legend {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--muted-2);
}
.nl-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
  background: var(--line-2);
}
.nl-dot--3 {
  background: var(--ink);
}
.nl-dot--2 {
  background: var(--gold);
}
.nl-dot--1 {
  background: var(--line-2);
}
.namewall__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 7px;
}
.namecard {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: 82px;
  padding: 11px 13px 12px;
  border: 1px solid var(--line);
  background: transparent;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}
.namecard__n {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.3;
  color: var(--ink);
}
.namecard__p {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--gold);
}
.namecard__arts {
  margin-top: auto;
  padding-top: 8px;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--muted-2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.namecard__role {
  margin-top: 2px;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--gold);
}
.namecard[data-tier="2"] {
  background: var(--paper-2);
}
.namecard[data-tier="3"] {
  background: var(--ink);
  border-color: var(--ink);
}
.namecard[data-tier="3"] .namecard__n {
  color: var(--paper);
}
.namecard[data-tier="3"] .namecard__p {
  color: rgba(198, 158, 86, 0.9);
}
.namecard[data-tier="3"] .namecard__arts,
.namecard[data-tier="3"] .namecard__role {
  color: rgba(245, 241, 232, 0.62);
}
.namecard:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 16px 30px -22px rgba(16, 26, 23, 0.5);
}
.namewall__mentor {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted-2);
}
.namewall__mentor b {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--ink);
}
@media (max-width: 620px) {
  .namewall__grid {
    grid-template-columns: repeat(auto-fill, minmax(103px, 1fr));
    gap: 6px;
  }
  .namecard {
    min-height: 70px;
    padding: 9px 10px 10px;
  }
  .namecard__n {
    font-size: 15px;
  }
  .namecard__arts {
    -webkit-line-clamp: 1;
  }
}

/* ---- gallery: hint + masonry tuning ------------------------------------ */
.gallery-hint {
  margin-bottom: clamp(16px, 1.8vw, 24px);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.gallery-hint b {
  color: var(--ink);
  font-weight: 500;
}
.masonry {
  column-gap: 10px;
}
.masonry figure {
  margin-bottom: 10px;
}
.masonry figcaption {
  font-size: 10px;
  letter-spacing: 0.1em;
}

/* ---- ink sections: keep pillars legible -------------------------------- */
.section--ink .pillar {
  background: rgba(245, 241, 232, 0.045);
  border-color: rgba(245, 241, 232, 0.16);
}
.section--ink .pillar h4 {
  color: var(--paper);
}
.section--ink .pillar p {
  color: rgba(245, 241, 232, 0.66);
}
.section--ink .pillar b {
  color: rgba(198, 158, 86, 0.9);
}

/* ========================================================================
   round 3 — hierarchy polish (name wall / yearbook / archive bars)
   ======================================================================== */
.namecard[data-tier="3"] .namecard__n {
  font-size: 23px;
  letter-spacing: 0.04em;
}
.namecard[data-tier="3"] {
  box-shadow: inset 0 -2px 0 0 var(--gold);
}
.namecard[data-tier="2"] .namecard__n {
  font-size: 19px;
}
.namecard[data-tier="1"] .namecard__n {
  font-size: 15px;
  color: var(--ink-2);
}
.namecard[data-tier="1"] .namecard__p {
  color: var(--muted-2);
}
.yb-year__none {
  margin: 0;
  padding: 9px 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted-2);
}
.arch-bar .btn {
  flex: 0 0 auto;
}

/* secondary facet bar sits under the sticky one */
.filterbar--sub {
  position: static;
  top: auto;
  border-top: 0;
}

/* ---- round 3b: slimmer, clearer period chips --------------------------- */
.chips {
  gap: 6px;
}
.chip {
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 7px;
  min-width: 0 !important;
  height: 38px;
  padding: 0 14px !important;
  border-radius: 0;
}
.chip i {
  font-family: var(--font-display);
  font-size: 9px;
  font-style: normal;
  letter-spacing: 0.1em;
  color: var(--gold);
  opacity: 0.9;
}
.chip span {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.chip small {
  font-family: var(--font-display);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--muted-2);
  opacity: 1;
}
.chip.is-active {
  background: var(--ink);
}
.chip.is-active i {
  color: var(--gold);
}
.chip.is-active small {
  color: rgba(245, 241, 232, 0.55);
}
.filterbar__inner .rail {
  flex: 1 1 auto;
  min-width: 0;
}
.rail__nav {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  background: var(--paper-2);
  border-color: var(--line-2);
  color: var(--ink);
}
.rail__nav svg {
  width: 12px;
  height: 12px;
}
@media (max-width: 900px) {
  .chip {
    height: 34px;
    padding: 0 11px !important;
  }
  .rail__nav {
    display: none !important;
  }
}

/* ---- round 3c: rail scroll affordance + mobile bar compaction ----------- */
.rail.is-overflow .chips {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 90%, rgba(0, 0, 0, 0.25) 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 90%, rgba(0, 0, 0, 0.25) 100%);
}
.rail.at-end .chips {
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0, #000 10%, #000 100%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0, #000 10%, #000 100%);
}
.rail.at-start .chips {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 90%, rgba(0, 0, 0, 0.25) 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 90%, rgba(0, 0, 0, 0.25) 100%);
}
@media (max-width: 620px) {
  .filter-count {
    display: none;
  }
  .filterbar__inner {
    row-gap: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .filterbar__label {
    font-size: 10px;
  }
}

/* fix: relative bars must not keep the sticky offset (two bars overlapped) */
.filterbar,
.filterbar--sub {
  position: relative;
  top: auto;
}

/* =====================================================================
   ROUND 4 — hero cross-fade, wrapped filter chips, name cloud
   ===================================================================== */

/* --- hero slideshow: slow cross-fade + gentle ken burns ----------------- */
.hero__slides {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--ink);
}
.hero__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  animation: heroFade 27s linear infinite;
  will-change: opacity;
}
.hero__slide:nth-child(1) { animation-delay: 0s; }
.hero__slide:nth-child(2) { animation-delay: 9s; }
.hero__slide:nth-child(3) { animation-delay: 18s; }
.hero__slide:nth-child(n + 4) { display: none; }
.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  animation: heroDrift 27s ease-in-out infinite alternate;
}
.hero__slide figcaption {
  position: absolute;
  right: var(--pad);
  bottom: 118px;
  font-family: var(--font-serif);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(245, 241, 232, 0.62);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
@keyframes heroFade {
  0% { opacity: 0; }
  2.5% { opacity: 1; }
  27% { opacity: 1; }
  33.5% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes heroDrift {
  from { transform: scale(1.02); }
  to { transform: scale(1.09); }
}
@media (max-width: 900px) {
  .hero__slide figcaption { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__slide { animation: none; opacity: 0; }
  .hero__slide:first-of-type { opacity: 1; }
  .hero__slide img { animation: none; }
}

/* --- filter bars: chips wrap onto two rows, no horizontal rail --------- */
.rail,
.rail__nav { display: none !important; }
.filterbar__inner {
  grid-template-columns: auto minmax(0, 1fr) auto;
  row-gap: 12px;
  white-space: normal;
}
.filterbar__inner .searchbox { grid-column: 2; }
.filterbar__inner .filter-count { justify-self: end; white-space: nowrap; }
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 9px;
  overflow: visible;
  min-width: 0;
  padding: 0;
  -webkit-mask-image: none;
  mask-image: none;
}
.chip {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 7px;
  height: 34px;
  min-width: 0;
  padding: 0 13px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.chip i {
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--gold);
  opacity: 0.9;
}
.chip span { font-size: 12.5px; letter-spacing: 0.05em; }
.chip small { font-size: 9.5px; letter-spacing: 0.04em; color: var(--muted-2); }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-active,
.chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.chip.is-active i,
.chip[aria-pressed="true"] i { color: var(--gold-2); }
.chip.is-active small,
.chip[aria-pressed="true"] small { color: rgba(245, 241, 232, 0.62); }
.filterbar--sub .filterbar__inner { padding-top: 10px; padding-bottom: 14px; }
@media (max-width: 900px) {
  .filterbar__inner { grid-template-columns: auto minmax(0, 1fr); }
  .filterbar__inner .searchbox { grid-column: 1 / -1; }
  .filterbar__inner .filter-count { grid-column: 2; justify-self: end; }
  .chip { height: 32px; padding: 0 11px; }
  .chip span { font-size: 12px; }
}

/* --- name cloud: a drifting constellation of every walker -------------- */
.namecloud {
  position: relative;
  margin-top: 8px;
}
.namecloud__legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--muted-2);
}
.namecloud__legend span { display: inline-flex; align-items: center; gap: 7px; }
.ncl {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  background: var(--line-2);
}
.ncl--3 { background: var(--ink); }
.ncl--2 { background: var(--gold); }
.namecloud__read {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  transition: color 0.3s var(--ease);
}
.namecloud__read.is-live { color: var(--gold); }
.namecloud__stack {
  position: relative;
  margin-top: 30px;
  min-height: 200px;
}
.namecloud__stack::before {
  content: "";
  position: absolute;
  inset: -10px;
  background-image: radial-gradient(rgba(16, 26, 23, 0.08) 1px, transparent 1px);
  background-size: 27px 27px;
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 50%, #000 24%, transparent 76%);
  mask-image: radial-gradient(ellipse 78% 62% at 50% 50%, #000 24%, transparent 76%);
  pointer-events: none;
}
.namecloud::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 54%;
  width: min(820px, 92%);
  height: min(560px, 78%);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(176, 138, 62, 0.12), rgba(176, 138, 62, 0) 64%);
  pointer-events: none;
}

/* fallback flow (no JS): a quiet inline list */
.nw {
  display: inline-block;
  margin: 0 20px 16px 0;
  text-decoration: none;
  color: inherit;
  line-height: 1;
}
.nw__t {
  font-family: var(--font-serif);
  letter-spacing: 0.05em;
  color: var(--ink);
  transition: color 0.4s var(--ease), text-shadow 0.4s var(--ease);
}
.nw[data-tier="3"] .nw__t { font-size: 28px; }
.nw[data-tier="2"] .nw__t { font-size: 20px; color: var(--ink-2); }
.nw[data-tier="1"] .nw__t { font-size: 15px; color: var(--muted); }

/* JS layout: absolutely positioned constellation */
.namecloud__stack.is-cloud::before { opacity: 0.55; }
.namecloud__stack.is-cloud .nw {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  margin: 0;
  opacity: 0;
  transform: translateY(12px) scale(0.94);
  filter: blur(6px);
  transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform, filter;
}
.namecloud__stack.is-cloud .nw.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}
.namecloud__stack.is-cloud .nw__t {
  display: inline-block;
  animation: nwFloat var(--fd, 7s) ease-in-out infinite alternate;
  animation-delay: var(--fdel, 0s);
}
.namecloud__stack.is-cloud .nw:hover .nw__t,
.namecloud__stack.is-cloud .nw:focus-visible .nw__t {
  color: var(--gold);
  text-shadow: 0 0 22px rgba(176, 138, 62, 0.35);
}
.namecloud__stack.is-cloud .nw:hover,
.namecloud__stack.is-cloud .nw:focus-visible { z-index: 3; }
@keyframes nwFloat {
  from { transform: translateY(0); }
  to { transform: translateY(calc(-1 * var(--fy, 4px))); }
}
@media (max-width: 900px) {
  .nw[data-tier="3"] .nw__t { font-size: 23px; }
  .nw[data-tier="2"] .nw__t { font-size: 18px; }
  .nw[data-tier="1"] .nw__t { font-size: 14px; }
  .namecloud__read { display: none; }
  .namecloud__stack { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .namecloud__stack.is-cloud .nw { transition: none; transform: none; filter: none; }
  .namecloud__stack.is-cloud .nw__t { animation: none; }
}

/* --- filter bars: flex so chips can wrap without a scroll rail -------- */
.filterbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  white-space: normal;
}
.filterbar__label { flex: 0 0 auto; }
.filterbar__inner .chips { flex: 1 1 620px; }
.filterbar__inner .searchbox { flex: 0 0 232px; }
.filterbar__inner .filter-count { flex: 0 0 auto; margin-left: auto; }
.filterbar--sub .filterbar__inner { padding-top: 11px; padding-bottom: 15px; }
@media (max-width: 640px) {
  .filterbar__inner { gap: 9px 12px; }
  .filterbar__inner .chips { flex: 1 1 100%; order: 3; }
  .filterbar__inner .searchbox { flex: 1 1 100%; order: 4; }
  .filterbar__inner .filter-count { order: 2; margin-left: auto; }
}

/* hero layering: slides sit behind the veil, content above both */
.hero__slides { z-index: -2; }
.hero__veil { z-index: -1; }
.hero__inner { position: relative; z-index: 1; }
.hero__slide img { filter: saturate(0.9) contrast(1.03); }

/* hero caption: editorial credit, top-right, clear of the stats panel */
.hero__slide figcaption {
  bottom: auto;
  top: calc(var(--nav-h) + 22px);
}

/* name cloud: stronger scale contrast, airier rhythm */
.namecloud__stack { margin-top: 34px; }
.namecloud__stack.is-cloud .nw[data-tier="3"] .nw__t { font-size: 34px; letter-spacing: 0.03em; color: var(--ink); }
.namecloud__stack.is-cloud .nw[data-tier="2"] .nw__t { font-size: 23px; letter-spacing: 0.05em; color: var(--ink-2); }
.namecloud__stack.is-cloud .nw[data-tier="1"] .nw__t { font-size: 16px; letter-spacing: 0.07em; color: var(--muted); }
.namecloud__stack.is-cloud .nw[data-tier="1"] { opacity: 0; }
.namecloud__stack.is-cloud .nw[data-tier="1"].is-in { opacity: 0.9; }
.namecloud__stack.is-cloud .nw[data-tier="1"].is-in .nw__t { color: var(--muted); }
.namecloud__stack.is-cloud .nw:hover .nw__t { letter-spacing: 0.1em; }
.namecloud .note-inline, .namecloud + .note-inline { margin-top: 26px; }
@media (max-width: 900px) {
  .namecloud__stack.is-cloud .nw[data-tier="3"] .nw__t { font-size: 26px; }
  .namecloud__stack.is-cloud .nw[data-tier="2"] .nw__t { font-size: 19px; }
  .namecloud__stack.is-cloud .nw[data-tier="1"] .nw__t { font-size: 14px; }
}

/* filter bars, round 4: two stacked rows, all options visible, no horizontal scroll */
.filterbar { position: relative; top: auto; background: var(--paper); border-bottom: 1px solid var(--line-soft); }
.filterbar + .filterbar { border-top: 1px solid var(--line-soft); }
.filterbar__inner {
  display: block;
  max-width: none;
  padding: 16px 0 15px;
}
.filterbar__row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--pad);
}
.filterbar__row + .filterbar__row { margin-top: 12px; }
.filterbar__label {
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--muted-2);
  white-space: nowrap;
  padding-top: 5px;
}
.filterbar .chips {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  overflow: visible;
  mask-image: none;
  -webkit-mask-image: none;
}
.filterbar .chip {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  height: 30px;
  padding: 0 12px;
  border-radius: 0;
  border: 1px solid var(--line-2);
  background: transparent;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}
.filterbar .chip i { font-size: 9px; letter-spacing: 0.08em; color: var(--gold); font-style: normal; }
.filterbar .chip small { margin: 0; font-size: 9.5px; color: var(--muted-2); opacity: 1; }
.filterbar .chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.filterbar .chip.is-active i { color: var(--gold-3); }
.filterbar .chip.is-active small { color: rgba(245, 241, 232, 0.62); }
.filterbar__row--tools { justify-content: space-between; align-items: center; }
.filterbar__row--tools:empty { display: none; }
.filterbar__row--tools .searchbox { flex: 0 1 360px; margin-left: 0; }
.filterbar__row--tools .filter-count { margin: 0; white-space: nowrap; }
@media (max-width: 900px) {
  .filterbar__row { flex-wrap: wrap; gap: 10px; }
  .filterbar__label { flex-basis: 100%; padding-top: 0; }
  .filterbar .chips { flex-basis: 100%; gap: 6px; }
  .filterbar .chip { height: 28px; padding: 0 10px; font-size: 11.5px; }
  .filterbar__row--tools .searchbox { flex: 1 1 100%; }
}

/* filter bars, round 4b: label line + chips lines full width */
.filterbar__inner { display: block; max-width: var(--wrap); margin: 0 auto; padding: 15px var(--pad) 16px; }
.filterbar__label { display: block; margin: 0 0 9px; padding: 0; font-size: 10.5px; letter-spacing: 0.22em; color: var(--muted-2); }
.filterbar .chips { width: 100%; gap: 7px; }
.filterbar .chip { height: 29px; padding: 0 11px; font-size: 11.5px; gap: 5px; }
.filterbar .chip i { font-size: 8.5px; }
.filterbar .chip small { font-size: 9px; }
.filterbar__tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 13px; }
.filterbar__tools .searchbox { flex: 0 1 330px; padding: 6px 12px; }
.filterbar__tools .filter-count { margin: 0; font-size: 11.5px; }
.filterbar__tools:empty { display: none; }
@media (max-width: 900px) {
  .filterbar__inner { padding: 13px var(--pad) 14px; }
  .filterbar .chip { height: 27px; padding: 0 9px; font-size: 11px; }
  .filterbar__tools { flex-wrap: wrap; }
  .filterbar__tools .searchbox { flex: 1 1 100%; }
}

.filterbar__tools .searchbox { margin-left: 0; }
.filterbar__tools .filter-count { margin-left: auto; }

/* hero: left-weighted scrim so the headline stays legible on any slide */
.hero__veil { overflow: hidden; }
.hero__veil::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 14, 12, 0.62) 0%, rgba(8, 14, 12, 0.34) 38%, rgba(8, 14, 12, 0) 62%);
  pointer-events: none;
}

.hero__slide figcaption { color: rgba(245, 241, 232, 0.82); }

/* name cloud hover: grow via transform only (never font-size), so the hit area
   cannot oscillate between two sizes while the pointer rests on a name */
.namecloud__stack.is-cloud .nw { transform-origin: left center; }
.namecloud__stack.is-cloud .nw:hover,
.namecloud__stack.is-cloud .nw:focus-visible {
  transform: scale(1.07);
  transition: transform 0.26s var(--ease), opacity 0.4s var(--ease), filter 0.4s var(--ease);
}
.namecloud__stack.is-cloud .nw.is-in:hover,
.namecloud__stack.is-cloud .nw.is-in:focus-visible { transform: scale(1.07); }
.namecloud__stack.is-cloud .nw__t { transition: color 0.35s var(--ease), letter-spacing 0.35s var(--ease), text-shadow 0.35s var(--ease); }

/* field-design.css */
/* 行者无疆 / a living field journal, 2026 edition. */
:root {
  --paper:#f3f0e8; --paper-2:#e9e6dc; --paper-3:#dedace; --white:#faf8f2;
  --ink:#181c19; --ink-2:#242a25; --ink-3:#343b34; --ink-soft:#434d43;
  --muted:#666f65; --muted-2:#777e74; --gold:#c6412a; --gold-2:#e15b3f;
  --gold-3:#f1ab91; --seal:#c6412a; --jade:#4d634a; --acid:#dceab3;
  --line:rgba(24,28,25,.20); --line-soft:rgba(24,28,25,.11);
  --line-ink:rgba(243,240,232,.22); --wrap:1480px; --pad:clamp(20px,4.5vw,76px);
  --nav-h:78px; --sec:clamp(72px,9vw,140px); --r:0;
  --font-display:"Noto Sans SC","Microsoft YaHei",sans-serif;
  --ease:cubic-bezier(.22,.78,.2,1);
}
html {scroll-padding-top:98px}
body {background:var(--paper);color:var(--ink);letter-spacing:0;line-height:1.8}
body:not(.site-enhanced) [data-reveal] {opacity:1;transform:none;transition:none}
::selection {background:var(--gold);color:var(--paper)}
button,a,input,select {touch-action:manipulation}
a:focus-visible,button:focus-visible,input:focus-visible {outline:2px solid var(--gold);outline-offset:5px}
.skip-link {position:fixed;left:20px;top:10px;z-index:9999;padding:10px 20px;background:var(--ink);color:var(--paper);transform:translateY(-160%)}
.skip-link:focus {transform:none}
.nav,.nav--solid,.nav.is-scrolled {position:sticky;inset:0 0 auto;height:var(--nav-h);color:var(--ink);background:rgba(243,240,232,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.nav::after {display:none}
.nav__inner {gap:22px;max-width:none}
.brand {gap:10px}
.brand__seal {width:35px;height:35px;background:var(--ink);border:0;color:var(--paper);opacity:1}
.brand__seal svg {width:28px;height:28px}
.brand__name {font-size:17px;letter-spacing:.12em}
.brand__en {font-family:var(--font-sans);font-size:7px;letter-spacing:.14em;opacity:.68}
.nav__links {gap:clamp(15px,1.6vw,26px)}
.nav__links a {font-size:12px;letter-spacing:.035em;opacity:.78;padding:10px 0}
.nav__links a::after {height:2px;background:var(--gold);bottom:4px}
.nav__links a.is-active,.nav__links a:hover {opacity:1}
.nav__links a[aria-current="page"] {color:var(--gold)}
.icon-btn,.nav__burger {width:40px;height:40px}
.icon-btn:hover,.nav__burger:hover {background:var(--ink);color:var(--paper);border-color:var(--ink)}
.drawer {background:var(--ink);color:var(--paper)}
.drawer__links a {font-size:clamp(26px,6vw,45px);letter-spacing:.03em;justify-content:space-between}
.drawer__links a small {color:var(--acid);font-family:var(--font-sans);font-size:9px}
.drawer__links a.is-active {color:var(--gold-3)}
.drawer[inert],.search-modal[inert],.lb[inert] {pointer-events:none}
.btn {border-radius:0;font-size:13px;letter-spacing:.04em;min-height:46px}
.btn--gold {background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn--gold:hover {background:var(--gold);border-color:var(--gold);color:var(--paper)}
.btn--light {border-color:var(--line);color:var(--ink)}
.btn--light:hover {background:var(--ink);color:var(--paper);border-color:var(--ink)}
.section--ink .btn--light {color:var(--paper);border-color:var(--line-ink)}
.eyebrow {font-family:var(--font-sans);font-size:10px;letter-spacing:.16em}
.eyebrow::before {width:15px;height:3px}
.sec-title {font-weight:500;letter-spacing:-.03em}
.field-title-accent {color:var(--gold)}
body[data-page="chronicle"] .field-title-accent {color:var(--acid)}
.tag {border-radius:0}
.footer {background:var(--ink);color:var(--paper);padding-top:70px;overflow:hidden}
.footer__top {grid-template-columns:1.5fr 1fr 1fr 1fr;gap:45px;padding-bottom:55px}
.footer__brand .brand__name {font-size:28px;letter-spacing:.13em}
.footer__brand p {font-size:12px;max-width:28em;color:#afb4a9;margin-top:20px}
.footer h5 {font-family:var(--font-sans);font-size:10px;letter-spacing:.12em;color:var(--acid);margin-bottom:20px}
.footer__col a {font-size:12px;color:#c6c9bd}
.footer__col a:hover {color:var(--paper)}
.footer__wordmark {font-family:var(--font-serif);font-weight:600;font-size:clamp(76px,18.8vw,278px);line-height:1.05;letter-spacing:.04em;color:var(--paper);opacity:.09;white-space:nowrap;padding-bottom:15px}
.footer__bottom {font-size:10px;color:#b0b6aa;padding-block:25px;gap:15px;border-top:1px solid var(--line-ink)}
.totop {border-radius:50%;background:var(--ink);color:var(--paper);border:1px solid var(--line-ink)}
.search-modal {background:rgba(17,22,18,.77);backdrop-filter:blur(12px)}
.search-modal__panel {background:var(--paper);color:var(--ink);border:1px solid var(--line);box-shadow:0 20px 90px #0005}
.search-modal__field {border-color:var(--line)}
.search-modal__field input {color:var(--ink);font-family:var(--font-serif);font-size:clamp(17px,2vw,24px)}
.search-modal__field input::placeholder {color:var(--muted)}
.search-modal__hint {color:var(--muted);border-color:var(--line)}
.sresult {border-color:var(--line-soft)}
.sresult time,.sresult small {color:var(--muted)}
.sresult b {font-weight:500}
.sresult:hover,.sresult.is-cur {background:var(--paper-2)}
.sresult em {color:var(--gold)}
.search-modal__empty {color:var(--muted)}
.search-modal__close {position:absolute;width:42px;height:42px;padding:0;right:calc((100vw - min(760px,92vw))/2);top:20px;clip:auto;clip-path:none;overflow:hidden;font-size:0;background:var(--paper);border:1px solid var(--line);color:var(--ink)}
.search-modal__close::after {content:"×";font:28px/1 var(--font-sans)}
.lb {background:#141914f7}
.lb__close {background:var(--paper);color:var(--ink)}
.field-page-progress {position:fixed;top:0;left:0;height:2px;background:var(--gold);z-index:1000;transform-origin:left;width:100%;transform:scaleX(0);pointer-events:none}

/* The front page is a sequence of distinct editorial spreads. */
.field-main {overflow:clip}
.field-cover,.field-space {padding-inline:var(--pad);max-width:1640px;margin-inline:auto}
.field-cover {padding-top:23px;padding-bottom:0}
.field-cover__edition,.field-section-label {display:flex;justify-content:space-between;gap:24px;font-size:9px;line-height:1.4;letter-spacing:.12em;font-weight:500}
.field-cover__edition>span:first-child {display:flex;align-items:center;gap:9px}
.live-dot {height:6px;width:6px;background:var(--gold);border-radius:50%;display:inline-block;flex:none}
.field-cover__masthead {display:flex;align-items:center;justify-content:space-between;gap:20px;padding:8px 0 24px}
.field-cover__masthead h1 {font-family:var(--font-serif);font-size:clamp(80px,15.8vw,232px);font-weight:600;letter-spacing:-.045em;line-height:1.17;white-space:nowrap;position:relative}
.field-cover__masthead h1>span {color:var(--gold)}
.field-cover__masthead h1 sup {font-family:var(--font-sans);font-size:24px;position:absolute;right:-40px;top:28px;font-weight:400;color:var(--gold)}
.field-cover__masthead>p {font-family:var(--font-sans);font-size:clamp(16px,2.3vw,31px);font-weight:500;line-height:1.04;letter-spacing:-.03em;align-self:center;padding-left:30px}
.field-cover__masthead>p>span {display:block;font-size:9px;letter-spacing:.07em;margin-top:14px;font-weight:400;white-space:nowrap}
.field-cover__stage {display:grid;grid-template-columns:.77fr 1.23fr;align-items:center;position:relative;gap:clamp(20px,5vw,85px)}
.field-cover__copy {padding:5px 0 32px;position:relative;z-index:2}
.field-label {font-family:var(--font-sans);font-size:9px;line-height:1.5;letter-spacing:.13em;font-weight:500}
.field-cover__copy>.field-label {margin-bottom:20px;color:var(--muted)}
.field-cover__copy h2 {font-family:var(--font-serif);font-size:clamp(32px,3.9vw,58px);font-weight:500;letter-spacing:-.03em;line-height:1.33}
.field-cover__intro {font-size:14px;line-height:2.05;color:var(--muted);margin:22px 0 25px}
.field-round-link {display:inline-flex;gap:20px;align-items:center;font-size:11px;font-weight:500}
.field-round-link i {font-size:20px;font-style:normal;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--ink);border-radius:50%;transition:background .3s,color .3s,transform .4s}
.field-round-link:hover i {background:var(--ink);color:var(--paper);transform:translateY(4px)}
.field-cover__visual {position:relative;min-width:0;padding-right:28px;margin-top:0;isolation:isolate}
.field-cover__photo {background:#10120f;aspect-ratio:1.64;position:relative;overflow:hidden;transform:translate3d(var(--cover-x,0px),var(--cover-y,0px),0);transition:transform 1.2s var(--ease)}
.field-cover__photo>img {width:100%;height:100%;object-fit:cover;object-position:50% 49%;opacity:.96;transition:transform 1.4s var(--ease)}
.field-cover__visual:hover .field-cover__photo>img {transform:scale(1.035)}
.field-cover__photo figcaption {position:absolute;inset:auto 19px 16px;display:flex;justify-content:space-between;gap:14px;font-size:9px;letter-spacing:.07em;color:#fff;text-shadow:0 1px 5px #000}
.field-cover__photo::after {content:"";position:absolute;inset:65% 0 0;background:linear-gradient(transparent,#0007);pointer-events:none}
.field-cover__photo figcaption {z-index:1}
.field-cover__stamp {position:absolute;width:100px;height:100px;top:-42px;left:-43px;z-index:3;color:var(--paper);background:var(--gold);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-13deg)}
.field-cover__stamp>span {font-family:var(--font-serif);font-size:28px;line-height:1.4}
.field-cover__stamp>small {font-size:7px;letter-spacing:.1em}
.field-cover__stamp>svg {position:absolute;inset:4px;width:92px;height:92px;fill:none;stroke:currentColor;stroke-width:.5;opacity:.5}
.field-cover__inset {width:clamp(115px,14vw,198px);position:absolute;right:0;bottom:-35px;z-index:4;background:var(--white);padding:8px 8px 0;box-shadow:0 8px 20px #12160f22;transform:rotate(6deg);transition:transform .7s var(--ease)}
.field-cover__inset>img {width:100%;height:clamp(80px,9vw,125px);object-fit:cover;object-position:50% 50%}
.field-cover__inset figcaption {font-family:var(--font-serif);font-size:9px;padding:8px 2px 10px;text-align:center}
.field-cover__visual:hover .field-cover__inset {transform:translateY(-6px) rotate(2deg)}
.field-cover__vertical {position:absolute;right:1px;top:0;writing-mode:vertical-rl;font-size:9px;letter-spacing:.15em}
.field-cover__bottom {border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr 1.5fr 1fr;align-items:center;gap:25px;margin-top:60px;padding-block:24px 26px}
.field-cover__bottom>a:not(.field-cover__scroll) {display:flex;align-items:baseline;gap:15px}
.field-cover__bottom b {font-family:var(--font-serif);font-size:43px;font-weight:400;line-height:1}
.field-cover__bottom span {font-size:10px}
.field-cover__range {line-height:1.7;letter-spacing:.08em;text-align:center}
.field-cover__range small {font-size:9px;color:var(--muted);letter-spacing:0}
.field-cover__scroll {justify-self:end;font-size:10px;display:flex;align-items:center;gap:16px}
.field-cover__scroll span {font-size:23px;font-weight:300}
.field-space {padding-block:clamp(75px,10vw,155px)}
.field-section-label {border-top:1px solid var(--line);padding-top:16px;margin-bottom:65px}
.field-section-label span:last-child {font-size:8px;letter-spacing:.08em;color:var(--muted)}
.field-manifesto__grid {display:grid;grid-template-columns:1fr 2.5fr;gap:6vw}
.field-side-note {padding-top:16px;font-size:12px;line-height:2;color:var(--muted)}
.field-manifesto h2 {font-family:var(--font-serif);font-weight:500;font-size:clamp(48px,7.7vw,118px);line-height:1.25;letter-spacing:-.03em}
.field-outline {-webkit-text-stroke:1px var(--ink);color:transparent}
.field-underline {position:relative}
.field-underline::after {content:"";position:absolute;height:5px;background:var(--gold);left:1%;right:0;bottom:1px;transform:rotate(-3deg)}
.field-manifesto__body {margin:45px 0 0 auto;max-width:510px;display:grid;grid-template-columns:1fr 1fr;column-gap:35px;row-gap:25px}
.field-manifesto__body p {font-size:14px;line-height:2;color:var(--muted)}
.field-text-link {display:inline-flex;justify-content:space-between;align-items:center;gap:28px;border-bottom:1px solid currentColor;padding-bottom:8px;font-size:11px;font-weight:500;line-height:1.5;width:fit-content;transition:color .25s}
.field-text-link>span {font-size:18px;transition:transform .35s}
.field-text-link:hover {color:var(--gold)}
.field-text-link:hover>span {transform:translate(3px,-3px)}
.field-manifesto__body>.field-text-link {grid-column:1/-1;margin-top:8px}
.field-atlas {background:var(--ink);color:var(--paper);max-width:none}
.field-atlas>.field-section-label,.field-atlas__heading,.field-atlas__grid,.field-atlas__foot {max-width:1488px;margin-inline:auto}
.field-atlas .field-section-label {border-color:var(--line-ink)}
.field-atlas .field-section-label span:last-child {color:#b6beae}
.field-atlas__heading {display:grid;grid-template-columns:1.7fr 1fr 80px;gap:30px;align-items:end;margin-bottom:55px}
.field-atlas h2,.field-images h2,.field-journal h2 {font-family:var(--font-serif);font-size:clamp(40px,5.6vw,84px);font-weight:500;line-height:1.25;letter-spacing:-.035em}
.field-atlas h2 em {font-style:normal;color:var(--acid)}
.field-atlas__heading p {font-size:12px;line-height:2.1;color:#b6beae;margin-bottom:7px}
.field-circle {width:70px;height:70px;display:grid;place-items:center;border:1px solid var(--line-ink);border-radius:50%;transition:background .3s,color .3s,transform .5s}
.field-circle svg {width:30px;height:30px}
.field-circle:hover {color:var(--ink);background:var(--acid);transform:rotate(8deg)}
.field-atlas__grid {display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(35px,6vw,95px);align-items:start}
.field-atlas__tabs {min-width:0;width:100%}
.exp-tabs__hint {display:flex;justify-content:space-between;align-items:center;color:#b6beae;font-size:9px;padding:15px 14px 0 0}
.exp-tabs {max-height:580px;overflow:auto;scrollbar-width:thin;scrollbar-color:#6e7868 transparent;overscroll-behavior:contain;padding-right:14px;display:flex;flex-direction:column}
.exp-tab {display:grid;grid-template-columns:35px 1fr auto;gap:15px;align-items:center;text-align:left;min-height:59px;border-bottom:1px solid var(--line-ink);color:#9ca696;transition:background .3s,color .3s,padding .3s;position:relative;flex:none}
.exp-tab>span {font-family:var(--font-sans);font-size:10px;font-variant-numeric:tabular-nums}
.exp-tab>b {font-family:var(--font-serif);font-size:21px;font-weight:400;letter-spacing:.04em}
.exp-tab>small {font-size:9px;color:#a5ae9c;white-space:nowrap}
.exp-tab.is-selected,.exp-tab:hover {color:var(--paper);padding-inline:12px;background:#ffffff09}
.exp-tab.is-selected {border-bottom-color:var(--acid)}
.exp-tab.is-selected>span {color:var(--acid)}
.exp-tab:focus-visible {outline:2px solid var(--acid);outline-offset:-3px}
.exp-detail {min-width:0}
.exp-detail__image {display:block;position:relative;aspect-ratio:1.42;overflow:hidden;background:#232821}
.exp-detail__image img {width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),opacity .2s;object-position:center}
.exp-detail__image:hover img {transform:scale(1.035)}
.exp-detail__image>span {position:absolute;top:14px;left:24px;font-family:var(--font-serif);font-size:90px;line-height:1;color:var(--paper);text-shadow:0 1px 15px #0004}
.exp-detail__image>i {position:absolute;right:18px;bottom:18px;font-size:25px;font-style:normal;width:46px;height:46px;border-radius:50%;background:var(--acid);color:var(--ink);display:grid;place-items:center}
.exp-detail__copy {display:flex;align-items:end;gap:30px;justify-content:space-between;padding-top:25px}
.exp-detail__copy .field-label {font-size:9px;color:#b6beae}
.exp-detail h3 {font-family:var(--font-serif);font-size:35px;font-weight:400;line-height:1.3;margin-block:12px}
.exp-detail [data-exp-lead] {font-size:11px;color:#b6beae;max-width:34em}
.exp-detail .field-text-link {flex:none;color:var(--acid);font-size:10px;gap:15px;white-space:nowrap}
.field-atlas__foot {border-top:1px solid var(--line-ink);margin-top:45px;padding-top:22px;display:flex;justify-content:space-between;gap:20px;font-size:10px;color:#b6beae}
.field-atlas__foot>span {display:flex;gap:10px;align-items:center}
.field-atlas__foot i {width:6px;height:6px;background:var(--acid);border-radius:50%}
.field-atlas__foot a {color:var(--paper)}
.field-images {padding-bottom:65px}
.field-images__heading {display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:70px}
.field-images h2>span {color:var(--gold)}
.field-images__heading>p {font-size:12px;color:var(--muted);padding-right:5vw}
.field-images__heading .field-text-link {display:flex;margin-top:24px;color:var(--ink)}
.field-film {display:grid;grid-template-columns:1.05fr .82fr 1fr .82fr;gap:25px;align-items:start;padding:5px 0 20px}
.field-frame {display:block;min-width:0;transition:transform .7s var(--ease)}
.field-frame--1 {transform:rotate(-3deg)}
.field-frame--2 {margin-top:75px;transform:rotate(3deg)}
.field-frame--3 {transform:rotate(-2deg);margin-top:15px}
.field-frame--4 {margin-top:115px;transform:rotate(3deg)}
.field-frame:hover {transform:translateY(-10px) rotate(0)}
.field-frame figure {background:var(--white);padding:9px 9px 0;box-shadow:0 6px 22px #181c1910}
.field-frame img {width:100%;height:clamp(185px,20vw,310px);object-fit:cover}
.field-frame--2 img {object-position:35% center}
.field-frame figcaption {padding:14px 7px 20px;display:flex;flex-direction:column}
.field-frame figcaption>span {font-size:7px;letter-spacing:.1em;color:var(--muted)}
.field-frame figcaption>b {font-family:var(--font-serif);font-size:13px;font-weight:500;line-height:1.7;margin-block:8px}
.field-frame figcaption>small {font-size:8px;color:var(--muted)}
.field-film__note {display:flex;justify-content:space-between;gap:20px;margin-top:40px;font-size:9px;color:var(--muted)}
.field-film__note>span:first-child {visibility:hidden}
.field-journal {padding-top:65px}
.field-journal__grid {display:grid;grid-template-columns:1fr 1.5fr;gap:8vw;align-items:start}
.field-journal__count {font-family:var(--font-serif);font-size:90px;line-height:1;color:var(--gold);letter-spacing:-.05em;display:block;margin-bottom:22px}
.field-journal__count sup {font-family:var(--font-sans);font-size:12px;position:relative;top:-42px;margin-left:10px;letter-spacing:0}
.field-journal h2 {font-size:clamp(37px,4.6vw,67px)}
.field-journal__aside>p {font-size:11px;color:var(--muted);line-height:2.1;margin-top:25px}
.field-search-link {display:flex;align-items:center;justify-content:space-between;gap:15px;width:100%;max-width:320px;text-align:left;border-bottom:1px solid var(--line);padding:16px 0;margin-block:10px 32px;color:var(--muted);font-size:10px}
.field-search-link>i {font-style:normal;font-size:21px;color:var(--gold)}
.field-search-link:hover {color:var(--ink)}
.field-story {border-top:1px solid var(--line);display:grid;grid-template-columns:35px 1fr 30px;gap:16px;padding:30px 0 33px;align-items:start}
.field-story:last-child {border-bottom:1px solid var(--line)}
.field-story__no {font-size:10px;color:var(--muted);padding-top:2px}
.field-story__meta {display:flex;align-items:center;gap:12px;font-size:9px;color:var(--muted)}
.field-story__meta i {height:3px;width:3px;background:var(--gold);border-radius:50%}
.field-story h3 {font-family:var(--font-serif);font-weight:500;font-size:clamp(19px,2.2vw,31px);line-height:1.6;margin-block:13px 10px;transition:color .3s}
.field-story p {font-size:12px;color:var(--muted)}
.field-story__arrow {font-size:27px;font-weight:300;transition:transform .4s}
.field-story:hover h3 {color:var(--gold)}
.field-story:hover .field-story__arrow {transform:translate(4px,-4px)}
.field-invitation {position:relative;background:var(--gold);color:var(--paper);padding:clamp(65px,9vw,130px) var(--pad) 75px;display:flex;align-items:center;justify-content:space-between;gap:40px;overflow:hidden}
.field-invitation>div {position:relative;z-index:1}
.field-invitation .field-label {opacity:.8;font-size:9px;margin-bottom:35px}
.field-invitation h2 {font-family:var(--font-serif);font-size:clamp(48px,8.3vw,128px);font-weight:500;line-height:1.25;letter-spacing:-.035em}
.field-invitation h2>span {-webkit-text-stroke:1px var(--paper);color:transparent}
.field-invitation p:not(.field-label) {font-size:12px;margin-top:35px;line-height:2.1;opacity:.85}
.field-invitation__link {border:1px solid #f3f0e888;border-radius:50%;width:clamp(140px,21vw,300px);height:clamp(140px,21vw,300px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;flex:none;margin-right:5vw;position:relative;z-index:1;transition:background .4s,color .4s,transform .6s}
.field-invitation__link>span {font-size:12px;letter-spacing:.15em}
.field-invitation__link svg {width:65px;height:65px;transition:transform .4s}
.field-invitation__link:hover {background:var(--paper);color:var(--gold);transform:rotate(-5deg)}
.field-invitation__link:hover svg {transform:translate(4px,-4px)}
.field-invitation__bottom {position:absolute;bottom:25px;left:var(--pad);right:var(--pad);font-size:8px;letter-spacing:.1em;display:flex;align-items:center;gap:20px;opacity:.7}
.field-invitation__bottom i {font-style:normal}

@media(min-width:1600px){.field-atlas__grid,.field-atlas__heading,.field-atlas__foot,.field-atlas>.field-section-label {max-width:1488px}}
@media(max-width:1150px){
 .brand__en{display:none}.nav__links{gap:18px}.nav__links a{font-size:11px}
 .field-cover__masthead h1{font-size:16.8vw}.field-cover__masthead>p{font-size:22px;padding-left:22px}
 .field-cover__stage{grid-template-columns:.82fr 1.18fr;gap:40px}.field-cover__copy h2{font-size:40px}
 .field-cover__stamp{width:82px;height:82px;top:-30px;left:-25px}.field-cover__stamp>svg{width:74px;height:74px}.field-cover__stamp>span{font-size:24px}
 .field-atlas__grid{grid-template-columns:.75fr 1.25fr;gap:35px}.exp-tab{grid-template-columns:23px 1fr;gap:7px;min-height:65px}.exp-tab>small{grid-column:2;font-size:8px;margin-top:-12px}.exp-tab>b{font-size:19px}
 .exp-detail__copy{display:block}.exp-detail .field-text-link{margin-top:22px}.field-film{gap:16px}.footer__top{gap:25px}
}
@media(max-width:930px){
 .nav__burger{display:grid}.nav__links{display:none}.nav__inner{gap:15px}
 .field-cover__masthead>p{font-size:16px}.field-cover__masthead>p>span{font-size:8px}
 .field-cover__copy h2{font-size:34px}.field-cover__intro{font-size:11px}.field-cover__stage{gap:28px}
 .field-cover__photo{aspect-ratio:1.24}.field-cover__inset{width:130px}.field-cover__inset>img{height:90px}
 .field-cover__bottom{grid-template-columns:1fr 1fr 1.3fr;gap:20px}.field-cover__scroll{display:none}.field-cover__bottom b{font-size:36px}
 .field-manifesto__grid{grid-template-columns:1fr 3.1fr;gap:25px}.field-side-note{font-size:10px}
 .field-atlas__heading{grid-template-columns:1fr 1fr 55px;gap:20px}.field-circle{width:55px;height:55px}.field-atlas__heading p{font-size:10px}.exp-tabs{max-height:460px}
 .field-images__heading>p{padding-right:0}.field-film{overflow-x:auto;display:flex;gap:24px;margin-inline:calc(-1 * var(--pad));padding:10px var(--pad) 24px;scroll-snap-type:x proximity;scrollbar-width:thin}
 .field-frame{flex:0 0 240px;scroll-snap-align:center}.field-frame img{height:285px}.field-frame--2,.field-frame--4{margin-top:55px}.field-frame--3{margin-top:10px}
 .field-film__note>span:first-child{visibility:visible}.field-journal__grid{gap:40px;grid-template-columns:1fr 1.4fr}
 .footer__top{grid-template-columns:1.4fr 1fr;row-gap:40px}.footer__brand p{max-width:24em}
}
@media(max-width:600px){
 :root{--nav-h:65px;--pad:20px}.nav .brand__name{font-size:16px}.brand__seal{height:31px;width:31px}.nav__tools{gap:3px}.nav__burger,.icon-btn{width:36px;height:36px}
 .field-cover{padding-top:19px}.field-cover__edition{font-size:8px;letter-spacing:.04em;gap:10px}.field-cover__edition>span:last-child{font-size:7px}
 .field-cover__masthead{padding:12px 0 23px;display:block}.field-cover__masthead h1{font-size:calc((100vw - 55px)/4);line-height:1.14;letter-spacing:-.03em}.field-cover__masthead h1 sup{font-size:15px;top:7px;right:0}
 .field-cover__masthead>p{display:none}.field-cover__stage{display:flex;flex-direction:column-reverse;gap:28px;align-items:stretch}
 .field-cover__visual{padding-right:17px;margin-top:13px;margin-left:12px}.field-cover__photo{aspect-ratio:1.43}.field-cover__photo figcaption{inset:auto 12px 11px;font-size:8px;gap:10px}
 .field-cover__stamp{width:65px;height:65px;left:-12px;top:-23px}.field-cover__stamp>svg{width:57px;height:57px}.field-cover__stamp>span{font-size:20px}.field-cover__stamp>small{font-size:5px}
 .field-cover__inset{width:111px;right:8px;bottom:-25px;padding:5px 5px 0;transform:rotate(7deg)}.field-cover__inset>img{height:75px}.field-cover__inset figcaption{font-size:7px;padding:6px 1px 7px}
 .field-cover__vertical{font-size:7px;right:0}.field-cover__copy{padding:12px 0 0}.field-cover__copy>.field-label{font-size:8px;margin-bottom:16px}
 .field-cover__copy h2{font-size:clamp(29px,9.3vw,38px);line-height:1.32}.field-cover__copy h2>br{display:none}.field-cover__intro{font-size:11px;line-height:1.95;margin:14px 0 19px}.field-cover__intro>br:first-child{display:none}
 .field-round-link{font-size:10px;gap:17px}.field-round-link i{height:34px;width:34px}.field-cover__bottom{margin-top:25px;padding-block:23px;gap:15px;grid-template-columns:1fr 1fr}.field-cover__bottom b{font-size:36px}.field-cover__bottom>a:not(.field-cover__scroll){gap:12px}.field-cover__bottom span{font-size:9px}.field-cover__range{display:none}
 .field-space{padding-block:65px}.field-section-label{font-size:8px;letter-spacing:.035em;margin-bottom:38px;padding-top:13px;gap:12px}.field-section-label span:last-child{font-size:6px;letter-spacing:.04em;text-align:right;max-width:44%}
 .field-manifesto__grid{display:block}.field-side-note{font-size:10px;margin-bottom:24px;padding:0;line-height:1.8}.field-side-note br{display:none}.field-manifesto h2{font-size:clamp(47px,12.4vw,74px);line-height:1.3}.field-underline::after{height:3px}
 .field-manifesto__body{margin-top:30px;column-gap:23px;row-gap:20px}.field-manifesto__body p{font-size:11px;line-height:1.95}.field-text-link{font-size:10px;padding-bottom:7px}
 .field-atlas__heading{grid-template-columns:1fr 55px;gap:20px;margin-bottom:30px}.field-atlas h2,.field-images h2{font-size:43px}.field-atlas__heading p{grid-column:1;grid-row:2}.field-circle{grid-column:2;grid-row:1}.field-circle svg{width:25px;height:25px}
 .field-atlas__grid{display:flex;flex-direction:column;gap:24px}.exp-tabs__hint{font-size:8px;padding-top:6px}.exp-tabs__hint>span:first-child{font-size:0}.exp-tabs__hint>span:first-child::after{content:"← 左右滑动，探索全部十八期 →";font-size:8px}.exp-tabs__hint>span:last-child{display:none}.exp-tabs{width:calc(100% + 40px);max-height:none;overflow-x:auto;overflow-y:hidden;flex-direction:row;gap:8px;padding:2px 20px 12px;margin-inline:-20px;scroll-snap-type:x proximity}
 .exp-tab{flex:0 0 125px;grid-template-columns:22px 1fr;min-height:75px;padding:8px 10px;border:1px solid var(--line-ink);gap:5px;scroll-snap-align:center}.exp-tab>b{font-size:16px}.exp-tab>small{font-size:7px;margin-top:0}.exp-tab.is-selected{border-color:var(--acid);background:#dceab310;padding:8px 10px}.exp-tab>span{font-size:8px}
 .exp-detail{width:100%}.exp-detail__image{aspect-ratio:1.22}.exp-detail__image>span{font-size:64px;left:17px;top:14px}.exp-detail__image>i{width:38px;height:38px;font-size:21px;right:14px;bottom:14px}
 .exp-detail__copy{padding-top:20px}.exp-detail h3{font-size:29px}.exp-detail .field-text-link{margin-top:20px}.field-atlas__foot{margin-top:30px;font-size:8px;gap:14px;line-height:1.8}.field-atlas__foot>span{gap:6px}.field-atlas__foot i{height:4px;width:4px;flex:none}.field-atlas__foot>a{white-space:nowrap}
 .field-images__heading{display:block;margin-bottom:30px}.field-images__heading>p{margin-top:25px;font-size:11px;display:flex;justify-content:space-between;align-items:end}.field-images__heading .field-text-link{margin-top:0}.field-film{gap:18px}.field-frame{flex-basis:235px}.field-frame img{height:265px}.field-frame--2,.field-frame--4{margin-top:35px}.field-frame--3{margin-top:5px}.field-frame figcaption>b{font-size:13px}.field-film__note{margin-top:20px;font-size:7px;gap:12px}
 .field-journal{padding-top:30px}.field-journal__grid{display:block}.field-journal__count{font-size:76px;margin-bottom:20px}.field-journal__count sup{top:-35px;font-size:10px}.field-journal h2{font-size:40px}.field-journal__aside>p{font-size:11px;margin-top:20px}.field-search-link{margin-bottom:25px;font-size:10px;max-width:none}.field-journal__list{margin-top:40px}.field-story{grid-template-columns:24px 1fr 22px;gap:10px;padding:24px 0 28px}.field-story h3{font-size:20px;margin-top:12px}.field-story__meta{font-size:8px}.field-story__no{font-size:8px}.field-story p{font-size:10px}.field-story__arrow{font-size:23px}
 .field-invitation{padding:60px 20px 85px;align-items:end;gap:10px}.field-invitation .field-label{font-size:7px;margin-bottom:23px}.field-invitation h2{font-size:clamp(37px,10.2vw,61px)}.field-invitation p:not(.field-label){font-size:10px;margin-top:25px;max-width:220px}.field-invitation__link{width:87px;height:87px;gap:6px;margin:0 0 3px -12px}.field-invitation__link>span{font-size:9px}.field-invitation__link svg{width:31px;height:31px}.field-invitation__bottom{font-size:6px;gap:10px;letter-spacing:.02em;bottom:27px}
 .footer{padding-top:45px}.footer__top{gap:30px 20px;padding-bottom:35px;grid-template-columns:1fr 1fr}.footer__brand{grid-column:1/-1}.footer__brand .brand__name{font-size:24px}.footer__brand p{font-size:11px;max-width:30em}.footer__col a{font-size:11px}.footer h5{font-size:9px;margin-bottom:15px}.footer__wordmark{font-size:22vw;letter-spacing:-.035em;padding-bottom:12px}.footer__bottom{font-size:8px;gap:12px;padding-block:20px;display:flex;flex-direction:column;align-items:start;line-height:1.9}
 .search-modal__panel{margin-top:78px;width:calc(100% - 32px)}.search-modal__close{right:16px;top:20px;width:38px;height:38px}.search-modal__field{padding:19px 16px}.search-modal__field kbd{display:none}.search-modal__hint{font-size:10px}.sresult time{font-size:9px}.sresult b{font-size:13px}.sresult small{font-size:9px}
}
@media(prefers-reduced-motion:no-preference){
 .field-cover__masthead h1{animation:field-arrive 1.05s var(--ease) both}
 .field-cover__visual{animation:field-arrive 1.3s var(--ease) both}
 .field-motion [data-field-reveal]{opacity:.1;transform:translateY(32px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
 .field-motion [data-field-reveal].field-in{opacity:1;transform:none}
 @keyframes field-arrive{from{opacity:.3;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}.field-main *,.field-main *::before,.field-main *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.field-cover__photo,.field-cover__inset,.field-frame{transform:none!important}
}

/* The supplied calligraphic mark keeps its original transparent pixels. */
.nav .brand {gap:12px;min-height:60px}
.brand__seal.brand__seal--image {width:56px;height:60px;background:none;border:0;flex:none}
.brand__seal--image img {display:block;width:100%;height:100%;object-fit:contain}
.drawer__brand {display:flex;align-items:center;gap:14px;font-family:var(--font-serif);font-size:24px;letter-spacing:.13em}
.drawer__brand img {height:59px;width:56px;object-fit:contain;filter:invert(1)}
.nav__burger,.icon-btn {min-width:44px;min-height:44px}
.field-cover__photo,.field-cover__inset {outline:1px solid #181c190a;outline-offset:-1px}
.field-people-invite {display:grid;grid-template-columns:1fr 1.7fr auto;gap:5vw;align-items:center;border-block:1px solid var(--line);margin-top:70px;padding-block:30px;color:var(--ink)}
.field-people-invite__index {font-size:12px;line-height:1.8;letter-spacing:.12em}
.field-people-invite__index small {font:8px/1.8 var(--font-sans);letter-spacing:.11em;color:var(--muted)}
.field-people-invite__title {font:500 clamp(22px,2.5vw,38px)/1.4 var(--font-serif);letter-spacing:-.02em}
.field-people-invite__title br {display:none}
.field-people-invite__action {font-size:11px;display:flex;gap:28px;align-items:center;white-space:nowrap}
.field-people-invite__action i {font:normal 32px/1 var(--font-sans);transition:transform .35s var(--ease)}
.field-people-invite:hover .field-people-invite__title {color:var(--gold)}
.field-people-invite:hover i {transform:translate(4px,-4px)}
.field-rail {position:fixed;z-index:90;right:10px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px;padding:8px 3px;background:#f3f0e8ed;border:1px solid var(--line);border-radius:30px;box-shadow:0 5px 18px #181c1908}
.field-rail a {width:30px;height:34px;display:grid;place-items:center;position:relative;color:var(--muted);font:9px/1 var(--font-sans);font-variant-numeric:tabular-nums;border-radius:50%}
.field-rail a[aria-current] {background:var(--ink);color:var(--paper)}
.field-rail a:hover {color:var(--gold)}
.field-rail b {position:absolute;right:43px;top:50%;transform:translate(4px,-50%);font:400 11px/1.5 var(--font-sans);white-space:nowrap;background:var(--paper);color:var(--ink);padding:7px 12px;border:1px solid var(--line);pointer-events:none;opacity:0;transition:opacity .2s,transform .2s}
.field-rail a:hover b,.field-rail a:focus-visible b {opacity:1;transform:translate(0,-50%)}
.exp-detail {position:relative}
.exp-detail__image img {transition:opacity .35s var(--ease),transform .7s var(--ease)}
.exp-detail.is-loading .exp-detail__image img {opacity:.25}
.exp-detail.has-image-error .exp-detail__image img {opacity:0}
.exp-detail__image::after {content:"";position:absolute;height:2px;left:0;right:0;bottom:0;background:var(--acid);transform:scaleX(0);transform-origin:left;transition:transform .45s}
.exp-detail.is-loading .exp-detail__image::after {transform:scaleX(.72)}
.exp-detail__archive {display:inline-flex;align-items:center;gap:14px;color:var(--acid);font-size:10px;border-bottom:1px solid #dceab344;margin-block:10px 0;padding-bottom:3px}
.exp-detail__archive:hover {color:var(--paper)}
.exp-detail__copy [data-exp-lead] {margin-top:14px}
.exp-detail__status {font-size:11px;color:var(--acid);padding:8px 0}
.field-frame a:focus-visible img {transform:scale(1.025)}
.prow[id] {scroll-margin-top:20px}
@media(max-width:1279px){.field-rail{display:none}}
@media(max-width:930px){
 .field-people-invite{grid-template-columns:1fr 2fr;gap:22px}.field-people-invite__action{grid-column:2;gap:22px}.field-people-invite__index{align-self:start;padding-top:3px}
}
@media(max-width:600px){
 .nav .brand{gap:7px;min-height:52px}.brand__seal.brand__seal--image{width:45px;height:52px}.nav .brand__name{font-size:15px}.nav__inner{gap:8px}.nav__tools{gap:0}.nav__burger,.icon-btn{width:44px;height:44px}.nav__burger{margin-right:-5px}
 .field-people-invite{margin-top:45px;padding-block:24px;grid-template-columns:80px 1fr;gap:16px}.field-people-invite__index{font-size:10px}.field-people-invite__index small{font-size:6px}.field-people-invite__title{font-size:25px}.field-people-invite__title br{display:block}.field-people-invite__action{font-size:10px;justify-content:space-between}.field-people-invite__action i{font-size:27px}
 .exp-detail__archive{font-size:10px;margin-top:8px}
}
@media(prefers-reduced-motion:reduce){.field-people-invite i,.exp-detail__image img{transition:none}}

/* field-interiors.css */
/* Field Notes — interior editions. Loaded after site.css and field-design.css. */
body:not([data-page="index"]) .section { padding-block: clamp(64px, 7.5vw, 112px); }
body:not([data-page="index"]) .section--tight { padding-block: clamp(36px, 4.8vw, 72px); }
body:not([data-page="index"]) .section--paper2 { background: #e9e7dc; }
body:not([data-page="index"]) .sec-title {
  font-family: var(--font-sans); font-weight: 800;
  font-size: clamp(30px, 3.9vw, 56px); line-height: 1.2; letter-spacing: -.045em;
  overflow-wrap: anywhere;
}
body:not([data-page="index"]) .sec-head { margin-bottom: clamp(30px, 4vw, 54px); }
body:not([data-page="index"]) .sec-desc { color: #535b52; line-height: 1.9; }
body:not([data-page="index"]) .note-inline { color: #596057; }

/* A title spread, with a separate photographic window. */
body:not([data-page="index"]) .phero {
  padding: 72px 0 64px; min-height: 490px;
  background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line);
}
body:not([data-page="index"]) .phero__inner {
  max-width: var(--wrap); margin-inline: auto; gap: 21px; position: relative;
}
body:not([data-page="index"]) .phero__inner > * { max-width: 62%; }
body:not([data-page="index"]) .phero__crumbs {
  margin-bottom: 12px; color: #657062; font-family: var(--font-sans);
  font-size: 10px; letter-spacing: .12em; flex-wrap: wrap;
}
body:not([data-page="index"]) .phero__inner > .eyebrow { color: #b43722; font-size: 10px; }
body:not([data-page="index"]) .phero__title {
  font-family: var(--font-sans); font-size: clamp(36px, 4.7vw, 68px);
  font-weight: 850; line-height: 1.15; letter-spacing: -.06em; overflow-wrap: anywhere;
}
body:not([data-page="index"]) .phero__lead {
  max-width: min(58%, 58ch); color: #596057; line-height: 1.95; font-size: 14px;
}
body:not([data-page="index"]) .phero__bg {
  inset: 72px max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad))) 48px auto;
  width: 31%; z-index: -1; background: #d7d8c9;
}
body:not([data-page="index"]) .phero__bg img {
  opacity: 1; filter: saturate(.85); object-position: center; height: 100%;
}
body:not([data-page="index"]) .phero__veil {
  inset: auto 0 0; height: 6px; z-index: 1; background: var(--gold);
}
body:not([data-page="index"]) .phero::after {
  content: "WALK · OBSERVE · RECORD"; position: absolute;
  right: var(--pad); bottom: 23px; font-size: 8px; letter-spacing: .23em;
  color: #636a61; font-family: var(--font-sans);
}
body[data-page="chronicle"] .phero { background: var(--ink); color: var(--paper); }
body[data-page="chronicle"] .phero__lead,
body[data-page="chronicle"] .phero__crumbs { color: #c5c9bd; }
body[data-page="chronicle"] .phero__inner > .eyebrow,
body[data-page="chronicle"] .phero::after { color: #dceab3; }
body[data-page="gallery"] .phero__bg { width: 34%; inset-block: 48px 0; }
body[data-page="gallery"] .phero__veil { background: #dceab3; }
body[data-page="contact"] .phero { background: #dceab3; }
body[data-page="archive"] .phero { min-height: 450px; padding-bottom: 54px; }
body[data-page="archive"] .phero__bg { inset-block: 82px 48px; width: 28%; }

/* Team: a large image, a quieter reading column, and numbered methods. */
body[data-page="team"] .about-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: start; gap: clamp(32px, 6vw, 88px);
}
body[data-page="team"] .about-figure { position: relative; padding-top: 48px; }
body[data-page="team"] .about-figure::before {
  content: "01 / WHO WE ARE"; position: absolute; inset: 0 auto auto 0;
  font-size: 10px; font-weight: 700; letter-spacing: .18em; color: #b43722;
}
body[data-page="team"] .about-figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
body[data-page="team"] .about-figure figcaption {
  position: static; padding: 13px 0; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; font-size: 10px; color: #596057; letter-spacing: .025em;
}
body[data-page="team"] .about-text { padding-top: 74px; }
body[data-page="team"] .about-text h3 { font: 800 clamp(28px, 3vw, 42px)/1.3 var(--font-sans); margin-block: 18px 24px; }
body[data-page="team"] .about-text p { font-size: 14px; line-height: 2; color: #535b52; }
body[data-page="team"] .cards:has(> .contact-card) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; }
body:not([data-page="index"]) .contact-card {
  border: 0; border-top: 1px solid var(--ink); background: transparent;
  padding: 25px 0 33px; border-radius: 0; box-shadow: none;
}
body:not([data-page="index"]) .contact-card h3 { color: #b43722; font-size: 11px; letter-spacing: .12em; }
body:not([data-page="index"]) .contact-card > b {
  display: block; margin-block: 14px 10px; font-size: clamp(18px, 1.75vw, 24px);
  font-weight: 750; line-height: 1.5; overflow-wrap: anywhere;
}
body:not([data-page="index"]) .contact-card > p { font-size: 13px; color: #596057; }
body[data-page="team"] .pillars { gap: 0 32px; border: 0; background: transparent; }
body[data-page="team"] .pillar { background: transparent; border: 0; border-top: 3px solid var(--ink); padding: 26px 0; }
body[data-page="team"] .pillar > b { font: 600 13px/1.4 var(--font-sans); color: #b43722; }
body[data-page="team"] .pillar h4 { font: 800 24px/1.3 var(--font-sans); margin-block: 22px 13px; }
body[data-page="team"] .pillar p { color: #535b52; line-height: 1.85; }
body[data-page="team"] .award { padding-inline: 0; grid-template-columns: 95px minmax(0, 1fr) 76px 55px; }
body[data-page="team"] .award__y { font-family: var(--font-sans); font-size: 13px; font-weight: 700; }
body[data-page="team"] .award__m b { font-family: var(--font-sans); font-size: 17px; }
body[data-page="team"] .award__lv { border: 0; border-radius: 0; background: #dceab3; padding: 5px 10px; color: var(--ink); }
body[data-page="team"] .media-item { padding: 23px 0; grid-template-columns: 76px 150px minmax(0, 1fr) 150px; }
body[data-page="team"] .media-item__t { font-family: var(--font-sans); font-weight: 650; }
body[data-page="team"] .yb-year { grid-template-columns: 230px minmax(0, 1fr); padding-block: 42px; }
body[data-page="team"] .yb-year__num { font: 800 clamp(58px, 7vw, 96px)/1 var(--font-sans); letter-spacing: -.07em; }
body[data-page="team"] .yb-year__desc { max-width: 62ch; }
body[data-page="team"] .yb-chip { background: transparent; border: 0; border-left: 2px solid var(--gold); padding: 3px 20px 4px 13px; }
body[data-page="team"] .yb-chip:hover { transform: none; box-shadow: none; background: #dceab3; }
body[data-page="team"] .yb-chip__name { font-family: var(--font-sans); font-weight: 700; font-size: 15px; }

/* Projects are a sequence of photographic spreads, not a card catalogue. */
body[data-page="projects"] .stats { border-top: 1px solid var(--ink); padding-top: 24px; }
body[data-page="projects"] .stats__item { border: 0; padding-left: 0; }
body[data-page="projects"] .stats__num { color: var(--ink); font-family: var(--font-sans); letter-spacing: -.07em; }
body[data-page="projects"] .stats__num b { font-weight: 800; }
body[data-page="projects"] .stats__label { color: #596057; }
body[data-page="projects"] .prow-list { border-top: 2px solid var(--ink); }
body[data-page="projects"] .prow,
body[data-page="projects"] .prow:nth-child(even) {
  display: grid; grid-template-columns: 76px minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 52px); align-items: center; padding-block: 44px;
}
body[data-page="projects"] .prow__no { align-self: start; padding-top: 8px; gap: 14px; }
body[data-page="projects"] .prow__no b { font: 500 40px/1 var(--font-display); color: #b43722; }
body[data-page="projects"] .prow__no i { color: #5d655c; font-size: 9px; }
body[data-page="projects"] .prow__media { width: 100%; aspect-ratio: 4 / 3; }
body[data-page="projects"] .prow:nth-child(3n + 2) .prow__media { aspect-ratio: 16 / 9; }
body[data-page="projects"] .prow:nth-child(3n) .prow__media { aspect-ratio: 5 / 4; }
body[data-page="projects"] .prow__body { gap: 13px; }
body[data-page="projects"] .prow__kicker { font: 600 10px/1.5 var(--font-sans); color: #b43722; letter-spacing: .12em; }
body[data-page="projects"] .prow__name { font: 800 clamp(21px, 2.35vw, 34px)/1.4 var(--font-sans); letter-spacing: -.045em; overflow-wrap: anywhere; }
body[data-page="projects"] .prow__lead { max-width: 37ch; font-size: 13px; color: #596057; line-height: 1.95; }
body[data-page="projects"] .prow__meta { border-top: 1px solid var(--line); padding-top: 16px; color: #596057; font-size: 11px; }
body[data-page="projects"] .prow:hover .prow__media img { transform: scale(1.025); }

/* Filter controls remain explicit and keyboard friendly. */
body:not([data-page="index"]) .filterbar { background: var(--paper); border-bottom: 1px solid var(--line); }
body:not([data-page="index"]) .filterbar__inner { padding-block: 22px; }
body:not([data-page="index"]) .filterbar__label { font-weight: 750; color: var(--ink); margin-bottom: 12px; letter-spacing: .06em; }
body:not([data-page="index"]) .filterbar .chips { display: flex; gap: 7px; flex-wrap: wrap; overflow: visible; }
body:not([data-page="index"]) .filterbar .chip {
  height: auto; min-height: 35px; border: 1px solid #bcc0b5; border-radius: 0;
  padding: 7px 11px; color: #414a40; background: transparent; gap: 7px;
}
body:not([data-page="index"]) .filterbar .chip i,
body:not([data-page="index"]) .filterbar .chip small { color: #5d675b; }
body:not([data-page="index"]) .filterbar .chip.is-active,
body:not([data-page="index"]) .filterbar .chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
body:not([data-page="index"]) .filterbar .chip.is-active i,
body:not([data-page="index"]) .filterbar .chip.is-active small { color: #dceab3; }
body:not([data-page="index"]) .filterbar .chip:hover { border-color: #b43722; }
body:not([data-page="index"]) .filterbar__tools { margin-top: 18px; }
body:not([data-page="index"]) .searchbox { border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 9px 0; background: transparent; }
body:not([data-page="index"]) .searchbox input { color: var(--ink); font-size: 13px; min-width: 0; }
body:not([data-page="index"]) .searchbox input::placeholder { color: #657062; }

/* Archive: clear section markers and stable, readable rows. */
body[data-page="archive"] .arch-group { padding-top: 30px; }
body[data-page="archive"] .arch-group + .arch-group { margin-top: 65px; border-top: 3px solid var(--ink); }
body[data-page="archive"] .arch-group__head { grid-template-columns: minmax(160px, .5fr) minmax(0, 1fr) 110px; gap: 8px 30px; margin-bottom: 28px; }
body[data-page="archive"] .arch-group__head h3 { font: 800 clamp(28px, 3vw, 42px)/1.2 var(--font-sans); letter-spacing: -.04em; }
body[data-page="archive"] .arch-group__n { grid-column: 3; grid-row: 1 / 3; justify-self: end; color: #596057; }
body[data-page="archive"] .arch-group__n b { font: 700 42px/1 var(--font-sans); letter-spacing: -.05em; }
body[data-page="archive"] .arch-group__desc { grid-column: 2; grid-row: 1 / 3; align-self: center; }
body[data-page="archive"] .arch-group__en { grid-column: 1; grid-row: 4; font-family: var(--font-sans); color: #b43722; font-size: 9px; }
body[data-page="archive"] .archive-grid { gap: 0 clamp(26px, 4vw, 60px); }
body[data-page="archive"] .entry { grid-template-columns: minmax(0, 1fr) 100px; padding: 24px 0; min-height: 136px; transition: background .25s; }
body[data-page="archive"] .entry:hover { padding-left: 0; background: #e7e9dd; }
body[data-page="archive"] .entry__meta { font-family: var(--font-sans); letter-spacing: .02em; font-size: 10px; color: #626b60; }
body[data-page="archive"] .entry__cat { color: #a73522; }
body[data-page="archive"] .entry__title { font-family: var(--font-sans); font-size: 16px; font-weight: 650; line-height: 1.65; letter-spacing: -.02em; overflow-wrap: anywhere; }
body[data-page="archive"] .entry__cover { aspect-ratio: 1; }
body[data-page="archive"] .entry:hover .entry__cover img { transform: none; }

/* Chronicle: a year in the margin, daily observations along a route. */
body[data-page="chronicle"] .yearnav { background: #dceab3; border-block: 1px solid var(--line); }
body[data-page="chronicle"] .yearnav > .wrap { gap: 6px; flex-wrap: wrap; padding-block: 16px; }
body[data-page="chronicle"] .yearnav .chip { border: 0; border-radius: 0; font-weight: 650; color: var(--ink); min-height: 38px; }
body[data-page="chronicle"] .yearnav .chip:hover,
body[data-page="chronicle"] .yearnav .chip:focus-visible { background: var(--ink); color: var(--paper); }
body[data-page="chronicle"] .wrap--narrow { max-width: 1180px; }
body[data-page="chronicle"] .tl__group { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 48px; padding-bottom: 36px; }
body[data-page="chronicle"] .tl__year { position: sticky; top: calc(var(--nav-h) + 20px); align-self: start; background: transparent; flex-direction: column; gap: 12px; scroll-margin-top: 22px; }
body[data-page="chronicle"] .tl__year b { font: 800 clamp(54px, 6.5vw, 88px)/1 var(--font-sans); letter-spacing: -.07em; }
body[data-page="chronicle"] .tl__year::after { width: 48px; height: 4px; background: var(--gold); margin: 8px 0 0; flex: none; }
body[data-page="chronicle"] .tl__items { padding-bottom: 10px; margin: 0; padding-left: 29px; }
body[data-page="chronicle"] .tl__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; padding: 24px 0 29px; border-bottom: 1px solid var(--line); }
body[data-page="chronicle"] .tl__item::before { left: -34px; top: 32px; width: 9px; height: 9px; border: 0; background: var(--gold); transform: none; }
body[data-page="chronicle"] .tl__item time { grid-column: 1; grid-row: 1; align-self: center; font-family: var(--font-sans); font-size: 11px; color: #586451; font-variant-numeric: tabular-nums; }
body[data-page="chronicle"] .tl__item h4 { grid-column: 1 / -1; grid-row: 2; font-family: var(--font-sans); font-weight: 650; font-size: 18px; line-height: 1.7; margin: 0; overflow-wrap: anywhere; }
body[data-page="chronicle"] .tl__item .cat { grid-column: 2; grid-row: 1; align-self: center; border: 0; border-radius: 0; background: #e3e5d8; color: #46523e; padding: 3px 8px; font-size: 10px; }

/* Gallery: contact-sheet captions are always visible; photographs keep their proportions. */
body[data-page="gallery"] .gallery-filters { padding-block: 16px 0; border-bottom: 1px solid var(--line); }
body[data-page="gallery"] .gallery-filters .filterbar { padding: 0; border: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-page="gallery"] .gallery-filters .filterbar__inner { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: start; gap: 10px 18px; padding-block: 8px; }
body[data-page="gallery"] .gallery-filters .filterbar__label { grid-column: 1; margin: 0; padding-top: 7px; letter-spacing: .04em; line-height: 1.8; }
body[data-page="gallery"] .gallery-filters .chips { grid-column: 2; gap: 6px; min-width: 0; }
body[data-page="gallery"] .gallery-filters .filterbar .chip { min-height: 34px; padding: 6px 10px; }
body[data-page="gallery"] .gallery-filters__tools { display: flex; align-items: center; gap: 24px; padding-block: 9px 20px; }
body[data-page="gallery"] .gallery-filters__tools .searchbox { flex: 0 1 360px; padding: 7px 0; }
body[data-page="gallery"] .gallery-filters__tools .filter-count { margin: 0 0 0 auto; flex: none; font-size: 12px; white-space: nowrap; }
@media (max-width: 640px) {
  body[data-page="gallery"] .gallery-filters { padding-top: 8px; }
  body[data-page="gallery"] .gallery-filters .filterbar__inner { display: block; padding-block: 4px; }
  body[data-page="gallery"] .gallery-filters .filterbar__label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; padding-top: 0; line-height: 16px; }
  body[data-page="gallery"] .gallery-filters .filterbar__label::after { content: "左右滑动 →"; color: #596851; font-size: 9px; font-weight: 400; letter-spacing: .02em; }
  body[data-page="gallery"] .gallery-filters .chips { flex-wrap: nowrap; width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: 0 0 5px; scrollbar-width: thin; scrollbar-color: #7a856b #dedfd2; overscroll-behavior-x: contain; scroll-padding-inline: 4px; }
  body[data-page="gallery"] .gallery-filters .chips::-webkit-scrollbar { display: block; height: 4px; }
  body[data-page="gallery"] .gallery-filters .chips::-webkit-scrollbar-track { background: #dedfd2; }
  body[data-page="gallery"] .gallery-filters .chips::-webkit-scrollbar-thumb { background: #7a856b; }
  body[data-page="gallery"] .gallery-filters .filterbar .chip { flex: 0 0 auto; height: 44px; min-height: 44px; padding: 7px 10px; white-space: nowrap; scroll-margin-inline: 4px; }
  body[data-page="gallery"] .gallery-filters .filterbar .chip:focus-visible { outline: 2px solid var(--gold-2); outline-offset: -3px; }
  body[data-page="gallery"] .gallery-filters__tools { flex-wrap: nowrap; gap: 14px; padding-block: 6px 14px; }
  body[data-page="gallery"] .gallery-filters__tools .searchbox { flex: 1 1 auto; min-width: 0; }
  body[data-page="gallery"] .gallery-filters__tools .searchbox input { font-size: 16px; }
  body[data-page="gallery"] .gallery-filters__tools .filter-count { margin-left: auto; font-size: 11px; }
}
body[data-page="gallery"] .gallery-hint { border-bottom: 1px solid var(--ink); padding-bottom: 19px; color: #596057; }
body[data-page="gallery"] .masonry { columns: 3; column-gap: clamp(20px, 2.8vw, 42px); counter-reset: field-frame; }
body[data-page="gallery"] .masonry figure { margin-bottom: clamp(26px, 3vw, 48px); padding: 0; background: transparent; overflow: visible; break-inside: avoid-column; counter-increment: field-frame; }
body[data-page="gallery"] .masonry figure img { width: 100%; height: auto; }
body[data-page="gallery"] .masonry figcaption {
  position: static; opacity: 1; display: grid; grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px; padding: 13px 0 14px; color: #596057; border-bottom: 1px solid var(--line);
  background: transparent; font-size: 11px; letter-spacing: .015em; line-height: 1.7;
}
body[data-page="gallery"] .masonry figcaption::before { content: counter(field-frame, decimal-leading-zero); color: #a73522; font-size: 10px; font-weight: 650; font-variant-numeric: tabular-nums; }
body[data-page="gallery"] .masonry figure:hover img { transform: none; filter: saturate(1.08); }
body[data-page="gallery"] .masonry figure:focus-visible { outline: 3px solid #b43722; outline-offset: 6px; }

/* Project editions open with the actual expedition photograph. */
body[data-page="project"] .proj-hero { min-height: min(82svh, 850px); padding-bottom: 52px; }
body[data-page="project"] .proj-hero__inner { max-width: var(--wrap); gap: 24px; }
body[data-page="project"] .proj-hero__bg img { opacity: 1; filter: saturate(.85); }
body[data-page="project"] .proj-hero__veil { background: linear-gradient(180deg, #181c1970, #181c1908 35%, #181c19d9 82%, #181c19ed); }
body[data-page="project"] .phero__crumbs { color: #e0e2d7; }
body[data-page="project"] .proj-hero__no { font: 600 12px/1.5 var(--font-sans); letter-spacing: .16em; color: #dceab3; }
body[data-page="project"] .proj-hero__title { max-width: 15em; font: 850 clamp(32px, 5.7vw, 82px)/1.18 var(--font-sans); letter-spacing: -.055em; overflow-wrap: anywhere; text-wrap: balance; }
body[data-page="project"] .proj-hero__sub { font-family: var(--font-serif); color: var(--paper); letter-spacing: .02em; }
body[data-page="project"] .proj-hero__meta { color: #d5d9ce; font-size: 11px; }
body[data-page="project"] .proj-body { grid-template-columns: minmax(0, 1.4fr) minmax(0, .7fr); gap: clamp(42px, 8vw, 130px); }
body[data-page="project"] .proj-copy > .proj-lead:first-child { font: 700 clamp(25px, 2.6vw, 36px)/1.6 var(--font-sans); color: var(--ink); }
body[data-page="project"] .proj-copy p { font-size: 15px; color: #535b52; line-height: 2; }
body[data-page="project"] .proj-copy blockquote { border-left: 4px solid var(--gold); padding-left: 26px; }
body[data-page="project"] .factlist { border-top: 3px solid var(--ink); }
body[data-page="project"] .factlist div { padding-block: 16px; font-size: 13px; }
body[data-page="project"] .factlist span:first-child { font-size: 11px; color: #65705f; }
body[data-page="project"] .route { gap: 12px 8px; }
body[data-page="project"] .route__stop { border: 0; border-radius: 0; padding: 8px 0; background: transparent; flex-direction: column; align-items: flex-start; gap: 0; }
body[data-page="project"] .route__stop b { border-top: 2px solid var(--gold); padding-top: 9px; min-width: 75px; }
body[data-page="project"] .route__stop small { color: #65705f; }
body[data-page="project"] .route__arrow { margin: 0 8px; color: #b43722; }
body[data-page="project"] .proj-nav { padding-block: 30px; }
body:not([data-page="index"]) .pcard { border: 0; border-bottom: 1px solid var(--line); background: transparent; border-radius: 0; box-shadow: none; }
body:not([data-page="index"]) .pcard__cover { aspect-ratio: 4 / 3; }
body:not([data-page="index"]) .pcard__body { padding: 23px 0 28px; }
body:not([data-page="index"]) .pcard__meta { font-family: var(--font-sans); font-size: 10px; letter-spacing: .025em; color: #626b60; }
body:not([data-page="index"]) .pcard__title { font: 700 20px/1.6 var(--font-sans); letter-spacing: -.02em; }
body:not([data-page="index"]) .pcard__excerpt { color: #596057; font-size: 12px; }
body:not([data-page="index"]) .pcard:hover { transform: none; box-shadow: none; }

/* Contact and reading pages trade ornamental boxes for generous measure. */
body[data-page="contact"] .contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 42px; }
body[data-page="contact"] .contact-card { min-width: 0; }
body[data-page="contact"] .contact-card:nth-child(5) { grid-column: span 2; }
body[data-page="contact"] .qr-block { border: 0; border-top: 3px solid var(--ink); background: transparent; padding-block: 32px; }
body[data-page="contact"] .notice { border: 0; border-left: 3px solid var(--gold); background: #e7e9dd; padding: 24px 28px; }
body[data-page="contact"] .wrap--narrow { max-width: 1050px; }
body[data-page="contact"] .sec-desc { max-width: 62ch; margin-top: 24px; }
body[data-page="post"] .article__head {
  max-width: 1080px; padding-inline: var(--pad); gap: 25px;
  padding-top: 60px; padding-bottom: 46px;
}
body[data-page="post"] .article__title { font: 800 clamp(28px, 3.8vw, 54px)/1.4 var(--font-sans); letter-spacing: -.045em; overflow-wrap: anywhere; text-wrap: balance; }
body[data-page="post"] .article__meta { font-family: var(--font-sans); color: #626b60; font-size: 10px; letter-spacing: .04em; }
body[data-page="post"] .article__cover { width: min(1080px, calc(100% - var(--pad) * 2)); max-width: 1080px; aspect-ratio: auto; margin-inline: auto; }
body[data-page="post"] .article__cover img { width: 100%; height: auto; max-height: min(70svh, 760px); object-fit: contain; }
/* Keep translated WeChat decorations inside the reading column without a scroll container. */
body[data-page="post"] .prose { width: min(780px, calc(100% - var(--pad) * 2)); max-width: 780px; color: #30392f; background: transparent; overflow-x: clip; overflow-y: visible; }
body[data-page="post"] .article__foot { width: min(900px, calc(100% - var(--pad) * 2)); max-width: 900px; margin-inline: auto; padding-bottom: 45px; row-gap: 22px; }
body[data-page="post"] .article__source { color: #a73522; }
body[data-page="post"] .related { background: #e9e7dc; padding-block: 52px; }
body[data-page="post"] .related .cards { margin-top: 26px; }
body[data-page="post"] .related .pcard__title { font-size: 17px; }
body[data-page="post"] .pager { border-top: 1px solid var(--ink); }
body[data-page="post"] .pager__item { border: 0; border-bottom: 1px solid var(--line); padding: 27px 0; }
body[data-page="post"] .pager__item small { font-family: var(--font-sans); color: #a73522; font-weight: 650; letter-spacing: .1em; }
body[data-page="post"] .pager__item span { max-width: 35ch; font-family: var(--font-sans); font-size: 17px; line-height: 1.7; overflow-wrap: anywhere; }
body[data-page="post"] .pager__item:hover { padding-inline: 0; background: transparent; color: #a73522; }

/* Alternate wide spreads only when both the text and photograph have room. */
@media (min-width: 1101px) {
  body[data-page="projects"] .prow:nth-child(even) { grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1.15fr); }
  body[data-page="projects"] .prow:nth-child(even) .prow__no { grid-column: 1; grid-row: 1; }
  body[data-page="projects"] .prow:nth-child(even) .prow__media { grid-column: 3; grid-row: 1; }
  body[data-page="projects"] .prow:nth-child(even) .prow__body { grid-column: 2; grid-row: 1; }
}

/* Medium editions. */
@media (max-width: 1100px) {
  body:not([data-page="index"]) .phero { min-height: 470px; }
  body:not([data-page="index"]) .phero__title { font-size: clamp(35px, 4.5vw, 50px); }
  body[data-page="team"] .about-text { padding-top: 30px; }
  body[data-page="team"] .media-item { grid-template-columns: 70px 120px minmax(0, 1fr); }
  body[data-page="team"] .media-item small { grid-column: 3; justify-self: start; }
  body[data-page="projects"] .prow,
  body[data-page="projects"] .prow:nth-child(even) { grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr); gap: 25px; }
  body[data-page="projects"] .prow__name { font-size: 23px; }
  body[data-page="chronicle"] .tl__group { grid-template-columns: 160px minmax(0, 1fr); gap: 30px; }
  body[data-page="gallery"] .masonry { columns: 3; column-gap: 22px; }
  body[data-page="project"] .proj-body { gap: 45px; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
}
@media (max-width: 800px) {
  body:not([data-page="index"]) .phero { padding-top: calc(var(--nav-h) + 40px); padding-bottom: 38px; min-height: 0; }
  body:not([data-page="index"]) .phero__inner { gap: 16px; }
  body:not([data-page="index"]) .phero__inner > * { max-width: 100%; }
  body:not([data-page="index"]) .phero__lead { max-width: 62ch; font-size: 13px; }
  body:not([data-page="index"]) .phero__bg {
    position: relative; inset: auto; z-index: 0; width: calc(100% - var(--pad) * 2);
    margin: 0 var(--pad) 30px; height: 220px;
  }
  body:not([data-page="index"]) .phero__title { font-size: clamp(33px, 5.3vw, 46px); }
  body:not([data-page="index"]) .phero__crumbs { margin-bottom: 3px; }
  body:not([data-page="index"]) .phero::after { content: none; }
  body[data-page="team"] .about-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  body[data-page="team"] .about-figure { max-width: 620px; width: 100%; }
  body[data-page="team"] .about-figure img { aspect-ratio: 4 / 3; }
  body[data-page="team"] .about-text { padding-top: 10px; }
  body[data-page="team"] .cards:has(> .contact-card) { gap: 0 30px; }
  body[data-page="team"] .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-page="team"] .yb-year { grid-template-columns: 180px minmax(0, 1fr); gap: 25px; }
  body[data-page="projects"] .prow,
  body[data-page="projects"] .prow:nth-child(even) { grid-template-columns: 48px minmax(0, 1fr); gap: 18px 24px; }
  body[data-page="projects"] .prow__no { grid-column: 1; grid-row: 1 / 3; }
  body[data-page="projects"] .prow__media { grid-column: 2; aspect-ratio: 16 / 10; }
  body[data-page="projects"] .prow__body { grid-column: 2; }
  body[data-page="archive"] .arch-group__head { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  body[data-page="archive"] .arch-group__head h3 { grid-row: 1; }
  body[data-page="archive"] .arch-group__n { grid-column: 2; grid-row: 1; }
  body[data-page="archive"] .arch-group__desc { grid-column: 1 / -1; grid-row: 3; }
  body[data-page="archive"] .arch-group__en { grid-row: 2; }
  body[data-page="archive"] .archive-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-page="chronicle"] .tl__group { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  body[data-page="chronicle"] .tl__year { position: static; flex-direction: row; align-items: baseline; gap: 18px; }
  body[data-page="chronicle"] .tl__year b { font-size: 60px; }
  body[data-page="chronicle"] .tl__year::after { margin: 0; width: auto; height: 1px; flex: 1; background: var(--line); }
  body[data-page="chronicle"] .tl__items { margin-left: 5px; }
  body[data-page="gallery"] .masonry { columns: 2; }
  body[data-page="project"] .proj-body { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  body[data-page="project"] .proj-body__side { position: static; }
  body[data-page="contact"] .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 30px; }
  body[data-page="post"] .article__head { padding-top: 38px; gap: 20px; }
}
@media (max-width: 480px) {
  body:not([data-page="index"]) .phero__bg { height: 180px; margin-bottom: 26px; }
  body:not([data-page="index"]) .phero__title { font-size: clamp(29px, 7.4vw, 36px); line-height: 1.22; letter-spacing: -.055em; }
  body:not([data-page="index"]) .phero__lead { font-size: 12px; line-height: 1.9; }
  body:not([data-page="index"]) .filterbar__inner { padding-block: 19px; }
  body:not([data-page="index"]) .filterbar .chip { padding: 6px 8px; min-height: 34px; gap: 5px; }
  body:not([data-page="index"]) .filterbar .chip span { font-size: 11px; }
  body:not([data-page="index"]) .filterbar .chip i,
  body:not([data-page="index"]) .filterbar .chip small { font-size: 8px; }
  body[data-page="team"] .cards:has(> .contact-card),
  body[data-page="team"] .pillars { grid-template-columns: minmax(0, 1fr); }
  body[data-page="team"] .pillar { padding-block: 23px; }
  body[data-page="team"] .award { grid-template-columns: 72px minmax(0, 1fr); gap: 8px 14px; }
  body[data-page="team"] .award__m { grid-column: 2; }
  body[data-page="team"] .award__m b { font-size: 15px; }
  body[data-page="team"] .award__lv { grid-column: 2; }
  body[data-page="team"] .award__src { grid-column: 2; justify-self: start; }
  body[data-page="team"] .media-item { grid-template-columns: 64px minmax(0, 1fr); gap: 7px 15px; }
  body[data-page="team"] .media-item__t,
  body[data-page="team"] .media-item small { grid-column: 2; }
  body[data-page="team"] .yb-year { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 32px; }
  body[data-page="team"] .yb-year__num { font-size: 64px; }
  body[data-page="projects"] .prow,
  body[data-page="projects"] .prow:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 30px; }
  body[data-page="projects"] .prow__no { grid-column: 1; grid-row: auto; flex-direction: row; align-items: baseline; padding: 0; }
  body[data-page="projects"] .prow__no b { font-size: 30px; }
  body[data-page="projects"] .prow__media,
  body[data-page="projects"] .prow__body { grid-column: 1; }
  body[data-page="projects"] .prow__name { font-size: 24px; }
  body[data-page="archive"] .entry { grid-template-columns: minmax(0, 1fr) 72px; gap: 14px; min-height: 120px; padding-block: 21px; }
  body[data-page="archive"] .entry__title { font-size: 14px; }
  body[data-page="archive"] .entry__meta { gap: 3px 8px; font-size: 9px; }
  body[data-page="archive"] .arch-group__n b { font-size: 30px; }
  body[data-page="chronicle"] .tl__item h4 { font-size: 15px; }
  body[data-page="gallery"] .masonry { columns: 1; }
  body[data-page="gallery"] .masonry figure:nth-child(3n + 2) { padding-top: 0; }
  body[data-page="gallery"] .masonry figure { margin-bottom: 30px; }
  body[data-page="project"] .proj-hero { min-height: 640px; padding-bottom: 35px; }
  body[data-page="project"] .proj-hero__inner { gap: 20px; }
  body[data-page="project"] .proj-hero__meta { gap: 8px 18px; }
  body[data-page="project"] .proj-hero__sub { font-size: 16px; line-height: 1.7; }
  body[data-page="project"] .proj-copy blockquote { padding-left: 18px; }
  body[data-page="project"] .proj-nav { flex-wrap: wrap; gap: 20px; }
  body[data-page="contact"] .contact-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-page="contact"] .contact-card:nth-child(5) { grid-column: auto; }
  body[data-page="post"] .article__title { font-size: 28px; }
  body[data-page="post"] .article__meta { gap: 7px 12px; }
}

/* The shared navigation now occupies its own sticky row. */
body[data-page="post"] .prose img:not(.js-lightbox) { cursor: auto; }
@media (max-width: 800px) {
  body:not([data-page="index"]) .phero { padding-top: 32px; }
}

/* Preserve scripted filtering even where a new grid has stronger specificity. */
body:not([data-page="index"]) [data-filter-item].is-hidden,
body:not([data-page="index"]) [data-group-section].is-hidden,
body:not([data-page="index"]) [data-year-group].is-hidden { display: none; }
body:not([data-page="index"]) :is(.chip, .entry, .prow, .pcard, .yb-chip, .tl__item a):focus-visible {
  outline: 3px solid #b43722; outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  body:not([data-page="index"]) :is(.entry, .prow, .pcard, .masonry figure, .yb-chip) *,
  body:not([data-page="index"]) :is(.entry, .prow, .pcard, .masonry figure, .yb-chip) { transition: none; animation: none; }
  body:not([data-page="index"]) :is(.prow, .pcard):hover img { transform: none; }
}

/* namecloud.css */
/* The walkers: generous type, stable hit areas, and a quiet live record. */
body[data-page="team"] .namecloud { margin-top: 12px; isolation: isolate; }
body[data-page="team"] #namewall { scroll-margin-top: 0; }
body[data-page="team"] .namecloud::before { opacity: .4; }
body[data-page="team"] .namecloud__legend { gap: 10px 24px; color: var(--muted); letter-spacing: .08em; }
body[data-page="team"] .namecloud .ncl--1 { background: var(--muted-2); }
body[data-page="team"] .namecloud__hint { margin: 14px 0 0; color: var(--muted); font-size: 11px; line-height: 1.8; letter-spacing: .04em; }
body[data-page="team"] .namecloud__record { display: none; }
body[data-page="team"] .namecloud.is-interactive .namecloud__record {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 24px;
  min-height: 66px; margin-top: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--line-soft); background: var(--paper);
}
body[data-page="team"] .namecloud .namecloud__read {
  display: block; margin: 0; color: var(--muted); font-size: 12px;
  line-height: 1.8; letter-spacing: .04em; min-width: 0; overflow-wrap: anywhere;
}
body[data-page="team"] .namecloud .namecloud__read.is-live { color: var(--ink); }
body[data-page="team"] .namecloud__record-link {
  flex: none; display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  color: var(--gold); font-size: 12px; text-decoration: underline;
  text-underline-offset: 5px; text-decoration-thickness: 1px;
}
body[data-page="team"] .namecloud__record-link[hidden] { display: none; }
body[data-page="team"] .namecloud .namecloud__stack {
  display: flex; flex-wrap: wrap; align-items: center; gap: 17px 25px;
  position: relative; margin-top: 24px; min-height: 200px;
}
body[data-page="team"] .namecloud .namecloud__stack::before { opacity: .22; }
body[data-page="team"] .namecloud .namecloud__stack .nw,
body[data-page="team"] .namecloud .namecloud__stack.is-cloud .nw {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; width: max-content; max-width: 100%; min-width: 44px; min-height: 44px;
  padding: 6px 7px; margin: 0; line-height: 1.15; white-space: nowrap;
  opacity: 1; filter: none; transform: none; transition: none; will-change: auto;
  scroll-margin-top: calc(var(--nav-h) + 120px); text-decoration: none;
}
body[data-page="team"] .namecloud .namecloud__stack.is-cloud { display: block; }
body[data-page="team"] .namecloud .namecloud__stack.is-cloud .nw { position: absolute; }
body[data-page="team"] .namecloud .namecloud__stack .nw .nw__t {
  display: inline-block; font-family: var(--font-serif); font-weight: 500; letter-spacing: .045em;
  animation: none; transform: none; text-shadow: none;
  pointer-events: none;
  transition: color .2s ease; border-bottom: 1px solid transparent;
}
body[data-page="team"] .namecloud .namecloud__stack .nw[data-tier="3"] .nw__t { font-size: 33px; color: var(--ink); }
body[data-page="team"] .namecloud .namecloud__stack .nw[data-tier="2"] .nw__t { font-size: 23px; color: var(--ink-2); }
body[data-page="team"] .namecloud .namecloud__stack .nw[data-tier="1"] .nw__t { font-size: 16px; color: var(--muted); }
body[data-page="team"] .namecloud .namecloud__stack .nw:is(:hover, :focus-visible, .is-current) .nw__t {
  color: var(--gold); border-bottom-color: currentColor; letter-spacing: .045em;
}
body[data-page="team"] .namecloud .namecloud__stack .nw:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px;
}
@media (min-width: 901px) {
  body[data-page="team"] #namewall .sec-head { margin-bottom: 28px; }
  body[data-page="team"] #namewall .sec-head__main {
    display: grid; grid-template-columns: 1fr .8fr; align-items: end; gap: 20px 70px;
  }
  body[data-page="team"] #namewall .sec-head__main .eyebrow { grid-column: 1 / -1; margin: 0; }
  body[data-page="team"] #namewall .sec-head__main .sec-title { margin: 0; }
  body[data-page="team"] #namewall .sec-head__main .sec-desc { margin: 0; max-width: 36em; padding-bottom: 5px; }
  body[data-page="team"] .namecloud__hint { position: absolute; top: 0; right: 0; margin: 0; font-size: 10px; line-height: 18px; }
}
@media (max-width: 900px) {
  body[data-page="team"] .namecloud .namecloud__stack .nw[data-tier="3"] .nw__t { font-size: 27px; }
  body[data-page="team"] .namecloud .namecloud__stack .nw[data-tier="2"] .nw__t { font-size: 20px; }
  body[data-page="team"] .namecloud .namecloud__stack .nw[data-tier="1"] .nw__t { font-size: 15px; }
}
@media (max-width: 640px) {
  body[data-page="team"] .namecloud__legend { gap: 9px 16px; font-size: 10px; }
  body[data-page="team"] .namecloud.is-interactive .namecloud__record {
    position: sticky; top: calc(var(--nav-h) + 8px); z-index: 5;
    gap: 4px 14px; min-height: 80px; padding: 10px 0; margin-top: 8px;
  }
  body[data-page="team"] .namecloud .namecloud__read { font-size: 11px; }
  body[data-page="team"] .namecloud__record-link { gap: 6px; font-size: 11px; }
  body[data-page="team"] .namecloud .namecloud__stack { margin-top: 18px; gap: 9px 10px; }
}
@media (max-width: 360px) {
  body[data-page="team"] .namecloud.is-interactive .namecloud__record { flex-wrap: wrap; gap: 0; }
  body[data-page="team"] .namecloud .namecloud__read { flex-basis: 100%; }
  body[data-page="team"] .namecloud .namecloud__stack .nw[data-tier="3"] .nw__t { font-size: 25px; }
  body[data-page="team"] .namecloud .namecloud__stack .nw[data-tier="2"] .nw__t { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="team"] .namecloud .namecloud__stack .nw,
  body[data-page="team"] .namecloud .namecloud__stack .nw .nw__t { animation: none; transition: none; transform: none; }
}

/* --- motion: arrival, ambient float, continuous pointer response ------- */
@media (prefers-reduced-motion: no-preference) {
  body[data-page="team"] .namecloud .namecloud__stack.is-cloud .nw {
    opacity: 0;
    transform: translate3d(0, 15px, 0) scale(0.985);
    transition: opacity 760ms var(--ease), transform 760ms var(--ease);
    transition-delay: var(--nc-reveal, 0ms);
  }
  body[data-page="team"] .namecloud .namecloud__stack.is-cloud .nw.is-in {
    opacity: 1;
    transform: none;
  }
  body[data-page="team"] .namecloud .namecloud__stack.is-cloud.is-settled .nw {
    transition: opacity 300ms var(--ease), transform 300ms var(--ease);
    transition-delay: 0ms;
  }
}

/* Every name drifts on its own track. The keyframes are plain pixel paths
   (four shapes at three amplitudes) so the browser can hand each animation to
   the compositor; tempo and phase are dealt out in initNameCloud, so the wall
   never breathes in unison and nothing ever stops mid-stride. */
body[data-page="team"] .namecloud .namecloud__stack.is-cloud .nw__t {
  will-change: auto;
  backface-visibility: visible;
}
@keyframes nwFloat1A {
  0% { transform: translate3d(1.8px, 2.4px, 0); }
  12.5% { transform: translate3d(1.3px, 0.9px, 0); }
  25% { transform: translate3d(0.0px, -1.7px, 0); }
  37.5% { transform: translate3d(-1.3px, -2.2px, 0); }
  50% { transform: translate3d(-1.8px, 0.0px, 0); }
  62.5% { transform: translate3d(-1.3px, 2.2px, 0); }
  75% { transform: translate3d(0.0px, 1.7px, 0); }
  87.5% { transform: translate3d(1.3px, -0.9px, 0); }
  100% { transform: translate3d(1.8px, -2.4px, 0); }
}
@keyframes nwFloat1B {
  0% { transform: translate3d(2.7px, 3.6px, 0); }
  12.5% { transform: translate3d(1.9px, 1.4px, 0); }
  25% { transform: translate3d(0.0px, -2.5px, 0); }
  37.5% { transform: translate3d(-1.9px, -3.3px, 0); }
  50% { transform: translate3d(-2.7px, 0.0px, 0); }
  62.5% { transform: translate3d(-1.9px, 3.3px, 0); }
  75% { transform: translate3d(0.0px, 2.5px, 0); }
  87.5% { transform: translate3d(1.9px, -1.4px, 0); }
  100% { transform: translate3d(2.7px, -3.6px, 0); }
}
@keyframes nwFloat1C {
  0% { transform: translate3d(3.6px, 4.8px, 0); }
  12.5% { transform: translate3d(2.5px, 1.8px, 0); }
  25% { transform: translate3d(0.0px, -3.4px, 0); }
  37.5% { transform: translate3d(-2.5px, -4.4px, 0); }
  50% { transform: translate3d(-3.6px, 0.0px, 0); }
  62.5% { transform: translate3d(-2.5px, 4.4px, 0); }
  75% { transform: translate3d(0.0px, 3.4px, 0); }
  87.5% { transform: translate3d(2.5px, -1.8px, 0); }
  100% { transform: translate3d(3.6px, -4.8px, 0); }
}
@keyframes nwFloat2A {
  0% { transform: translate3d(1.7px, 2.4px, 0); }
  12.5% { transform: translate3d(0.6px, 1.7px, 0); }
  25% { transform: translate3d(-1.2px, 0.0px, 0); }
  37.5% { transform: translate3d(-1.6px, -1.7px, 0); }
  50% { transform: translate3d(0.0px, -2.4px, 0); }
  62.5% { transform: translate3d(1.6px, -1.7px, 0); }
  75% { transform: translate3d(1.2px, 0.0px, 0); }
  87.5% { transform: translate3d(-0.6px, 1.7px, 0); }
  100% { transform: translate3d(-1.7px, 2.4px, 0); }
}
@keyframes nwFloat2B {
  0% { transform: translate3d(2.5px, 3.6px, 0); }
  12.5% { transform: translate3d(1.0px, 2.5px, 0); }
  25% { transform: translate3d(-1.8px, 0.0px, 0); }
  37.5% { transform: translate3d(-2.3px, -2.5px, 0); }
  50% { transform: translate3d(0.0px, -3.6px, 0); }
  62.5% { transform: translate3d(2.3px, -2.5px, 0); }
  75% { transform: translate3d(1.8px, 0.0px, 0); }
  87.5% { transform: translate3d(-1.0px, 2.5px, 0); }
  100% { transform: translate3d(-2.5px, 3.6px, 0); }
}
@keyframes nwFloat2C {
  0% { transform: translate3d(3.4px, 4.8px, 0); }
  12.5% { transform: translate3d(1.3px, 3.4px, 0); }
  25% { transform: translate3d(-2.4px, 0.0px, 0); }
  37.5% { transform: translate3d(-3.1px, -3.4px, 0); }
  50% { transform: translate3d(0.0px, -4.8px, 0); }
  62.5% { transform: translate3d(3.1px, -3.4px, 0); }
  75% { transform: translate3d(2.4px, 0.0px, 0); }
  87.5% { transform: translate3d(-1.3px, 3.4px, 0); }
  100% { transform: translate3d(-3.4px, 4.8px, 0); }
}
@keyframes nwFloat3A {
  0% { transform: translate3d(2.2px, 1.8px, 0); }
  12.5% { transform: translate3d(1.5px, -0.7px, 0); }
  25% { transform: translate3d(0.0px, -1.3px, 0); }
  37.5% { transform: translate3d(-1.5px, 1.7px, 0); }
  50% { transform: translate3d(-2.2px, 0.0px, 0); }
  62.5% { transform: translate3d(-1.5px, -1.7px, 0); }
  75% { transform: translate3d(0.0px, 1.3px, 0); }
  87.5% { transform: translate3d(1.5px, 0.7px, 0); }
  100% { transform: translate3d(2.2px, -1.8px, 0); }
}
@keyframes nwFloat3B {
  0% { transform: translate3d(3.2px, 2.7px, 0); }
  12.5% { transform: translate3d(2.3px, -1.0px, 0); }
  25% { transform: translate3d(0.0px, -1.9px, 0); }
  37.5% { transform: translate3d(-2.3px, 2.5px, 0); }
  50% { transform: translate3d(-3.2px, 0.0px, 0); }
  62.5% { transform: translate3d(-2.3px, -2.5px, 0); }
  75% { transform: translate3d(0.0px, 1.9px, 0); }
  87.5% { transform: translate3d(2.3px, 1.0px, 0); }
  100% { transform: translate3d(3.2px, -2.7px, 0); }
}
@keyframes nwFloat3C {
  0% { transform: translate3d(4.3px, 3.6px, 0); }
  12.5% { transform: translate3d(3.1px, -1.4px, 0); }
  25% { transform: translate3d(0.0px, -2.5px, 0); }
  37.5% { transform: translate3d(-3.1px, 3.3px, 0); }
  50% { transform: translate3d(-4.3px, 0.0px, 0); }
  62.5% { transform: translate3d(-3.1px, -3.3px, 0); }
  75% { transform: translate3d(0.0px, 2.5px, 0); }
  87.5% { transform: translate3d(3.1px, 1.4px, 0); }
  100% { transform: translate3d(4.3px, -3.6px, 0); }
}
@keyframes nwFloat4A {
  0% { transform: translate3d(1.3px, 2.2px, 0); }
  12.5% { transform: translate3d(0.0px, 0.8px, 0); }
  25% { transform: translate3d(-1.3px, -1.5px, 0); }
  37.5% { transform: translate3d(0.0px, -2.0px, 0); }
  50% { transform: translate3d(1.3px, 0.0px, 0); }
  62.5% { transform: translate3d(0.0px, 2.0px, 0); }
  75% { transform: translate3d(-1.3px, 1.5px, 0); }
  87.5% { transform: translate3d(0.0px, -0.8px, 0); }
  100% { transform: translate3d(1.3px, -2.2px, 0); }
}
@keyframes nwFloat4B {
  0% { transform: translate3d(2.0px, 3.2px, 0); }
  12.5% { transform: translate3d(0.0px, 1.2px, 0); }
  25% { transform: translate3d(-2.0px, -2.3px, 0); }
  37.5% { transform: translate3d(0.0px, -3.0px, 0); }
  50% { transform: translate3d(2.0px, 0.0px, 0); }
  62.5% { transform: translate3d(0.0px, 3.0px, 0); }
  75% { transform: translate3d(-2.0px, 2.3px, 0); }
  87.5% { transform: translate3d(0.0px, -1.2px, 0); }
  100% { transform: translate3d(2.0px, -3.2px, 0); }
}
@keyframes nwFloat4C {
  0% { transform: translate3d(2.6px, 4.3px, 0); }
  12.5% { transform: translate3d(0.0px, 1.7px, 0); }
  25% { transform: translate3d(-2.6px, -3.1px, 0); }
  37.5% { transform: translate3d(0.0px, -4.0px, 0); }
  50% { transform: translate3d(2.6px, 0.0px, 0); }
  62.5% { transform: translate3d(0.0px, 4.0px, 0); }
  75% { transform: translate3d(-2.6px, 3.1px, 0); }
  87.5% { transform: translate3d(0.0px, -1.7px, 0); }
  100% { transform: translate3d(2.6px, -4.3px, 0); }
}

body[data-page="team"] .namecloud .namecloud__stack.is-cloud:not(.is-motile) .nw__t {
  animation-play-state: paused;
}
/* Only the name under the pointer holds still, so its line can be read. */
@media (hover: hover) and (pointer: fine) {
  body[data-page="team"] .namecloud .namecloud__stack.is-cloud .nw:is(:hover, :focus-visible) .nw__t {
    animation-play-state: paused;
  }
}

@media (hover: hover) and (pointer: fine) {
  body[data-page="team"] .namecloud .namecloud__stack.is-cloud .nw.is-in:hover,
  body[data-page="team"] .namecloud .namecloud__stack.is-cloud .nw.is-in:focus-visible {
    /* Keep the link hit area fixed while its inner lettering moves. */
    transform: none;
    z-index: 3;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="team"] .namecloud .namecloud__stack.is-cloud .nw,
  body[data-page="team"] .namecloud .namecloud__stack.is-cloud .nw .nw__t {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
  body[data-page="team"] .namecloud .namecloud__stack.is-cloud .nw__t {
    animation-duration: var(--nc-tempo, 10s) !important;
    animation-iteration-count: infinite !important;
    animation-play-state: paused !important;
    translate: none !important;
    will-change: auto !important;
  }
}
@media print {
  body[data-page="team"] .namecloud .namecloud__stack.is-cloud .nw,
  body[data-page="team"] .namecloud .namecloud__stack.is-cloud .nw .nw__t {
    opacity: 1;
    transform: none;
    animation: none !important;
    transition: none;
    translate: none !important;
    will-change: auto !important;
  }
}

/* atelier-core.css */
/* Paper field journal. Real photographs, open composition and restrained motion. */
:root {--paper:#f3f0e8;--ink:#151a17;--gold:#cf3e27;--gold-2:#e95639;--acid:#dceab3;--nav-h:78px;--atelier-line:rgba(21,26,23,.17)}
.atelier-site {font-synthesis:none;text-rendering:optimizeLegibility}
.atelier-site .nav {background:rgba(243,240,232,.9);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-color:var(--atelier-line)}
.atelier-site .nav__links a {font-size:12px;font-weight:500;letter-spacing:.02em;position:relative}
.atelier-site .nav__links a::after {height:3px;transform-origin:left}
.atelier-site .brand__seal--image {transition:transform .45s var(--ease)}
.atelier-site .brand:hover .brand__seal--image {transform:rotate(-7deg)}
.atelier-site .icon-btn {border-radius:50%}
.atelier-site .drawer {background:#151a17;isolation:isolate}
.atelier-site .drawer::after {content:"行走";font:500 36vw/1 var(--font-serif);position:absolute;right:-3vw;bottom:5vh;letter-spacing:-.08em;opacity:.035;z-index:-1;pointer-events:none}
.atelier-site .drawer__links a {border-bottom-color:#f3f0e822;font-weight:400}
.atelier-site .drawer__links a:hover {padding-left:12px;color:var(--acid)}
.atelier-site .search-modal__panel {border:0;box-shadow:0 40px 140px #0007;outline:1px solid #f3f0e822;outline-offset:10px}
.atelier-site .search-modal__field {padding-block:28px}
.atelier-site .search-modal__field input {font-size:clamp(20px,2.4vw,32px)}
.atelier-site .search-modal__hint {font:10px/1.8 var(--font-sans);letter-spacing:.06em}
.atelier-site .sresult {padding-block:18px;transition:background .2s,padding .3s}
.atelier-site .sresult:hover {padding-left:18px}
.atelier-site .footer {padding-top:70px;background:#111612;position:relative}
.atelier-site .footer__top {border-top:1px solid #f3f0e827;padding-top:35px}
.atelier-site .footer__wordmark {font-size:22.4vw;line-height:.99;letter-spacing:-.055em;opacity:.12;overflow:visible;white-space:nowrap;margin-left:-.02em;padding-bottom:30px}
.atelier-site .footer__bottom {border-top-color:#f3f0e824}
.atelier-site .footer__col a {display:inline-block;transition:color .2s,transform .3s}
.atelier-site .footer__col a:hover {transform:translateX(4px);color:var(--acid)}
.atelier-site .totop {width:48px;height:48px;box-shadow:0 8px 25px #0002}
.atelier-site .field-page-progress {height:3px;z-index:500}
.atelier-home .field-rail {right:14px;border-radius:0;backdrop-filter:blur(14px);background:#f3f0e8df;padding:7px 3px;border-color:#151a1727;gap:5px;box-shadow:none}
.atelier-home .field-rail a {border-radius:0;width:28px;height:30px}
.atelier-home .field-rail a[aria-current] {background:var(--gold);color:var(--paper)}
.atelier-home :is(.field-atlas,.field-images,.field-journal) {padding-block:clamp(80px,10vw,155px)}
.atelier-home .field-atlas {position:relative;overflow:hidden;isolation:isolate;background:#151a17}
.atelier-home .field-atlas::before {content:"XVIII";position:absolute;top:0;right:-15px;color:transparent;-webkit-text-stroke:1px #dceab31f;font:400 min(35vw,520px)/1 var(--font-serif);letter-spacing:-.06em;z-index:-1;pointer-events:none}
.atelier-home .field-section-label {font-size:10px;margin-bottom:58px}
.atelier-home .field-atlas__heading {grid-template-columns:1.5fr 1fr 80px;margin-bottom:60px}
.atelier-home .field-atlas h2 {font-size:clamp(48px,6.5vw,100px);letter-spacing:-.04em}
.atelier-home .field-atlas__grid {grid-template-columns:.63fr 1.37fr;gap:70px}
.atelier-home .exp-tabs {max-height:620px;padding-right:15px;scrollbar-color:var(--acid) #dceab310}
.atelier-home .exp-tab {min-height:64px;grid-template-columns:28px 1fr;gap:10px;border-bottom-color:#f3f0e826}
.atelier-home .exp-tab>b {font-size:25px;font-weight:400;letter-spacing:.02em}
.atelier-home .exp-tab>small {grid-column:2;font-size:8px;margin-top:-10px;letter-spacing:.09em}
.atelier-home .exp-tab.is-selected {background:#dceab313;padding-left:16px;color:var(--acid)}
.atelier-home .exp-tab.is-selected::before {content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;background:var(--acid)}
.atelier-home .exp-detail__image {aspect-ratio:1.25;clip-path:polygon(0 0,100% 0,100% 93%,94% 100%,0 100%);overflow:hidden;transform-style:preserve-3d}
.atelier-home .exp-detail__image>span {font:400 100px/1 var(--font-serif);top:23px;left:25px;color:#fff;letter-spacing:-.05em;text-shadow:0 2px 20px #0004}
.atelier-home .exp-detail__image>i {width:65px;height:65px;border-radius:50%;background:var(--acid);color:var(--ink);font-size:32px;right:22px;bottom:30px}
.atelier-home .exp-detail__copy {display:grid;grid-template-columns:1fr auto;gap:25px;margin-top:25px;padding-top:0}
.atelier-home .exp-detail h3 {font-size:39px}
.atelier-home .exp-detail__copy [data-exp-lead] {font-size:13px;max-width:31em}
.atelier-home .exp-detail__copy .field-text-link {align-self:end;margin-bottom:4px}
.atelier-home .field-atlas__foot {padding-top:25px;margin-top:40px;border-top:1px solid #f3f0e826}
.atelier-home .field-images {padding-inline:0;max-width:none;overflow:hidden}
.atelier-home .field-images>.field-section-label,.atelier-home .field-images__heading,.atelier-home .field-film__note {margin-inline:var(--pad)}
.atelier-home .field-images__heading {margin-bottom:45px}
.atelier-home .field-images h2 {font-size:clamp(50px,6vw,92px)}
.atelier-home .field-film {display:flex;gap:38px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:30px var(--pad) 45px;scrollbar-width:thin;scrollbar-color:var(--gold) transparent;margin:0;align-items:start}
.atelier-home .field-frame {flex:0 0 clamp(280px,30vw,470px);min-width:0;margin:0;scroll-snap-align:center;transform:rotate(-3deg);transition:transform .55s var(--ease);transform-origin:50% 55%;background:#faf8f2;box-shadow:0 10px 35px #151a1712;padding:10px}
.atelier-home .field-frame img {height:clamp(320px,34vw,500px);width:100%;object-fit:cover;filter:saturate(.85);transition:filter .5s,transform .7s}
.atelier-home .field-frame--2 {margin-top:65px;transform:rotate(3deg)}
.atelier-home .field-frame--3 {margin-top:10px;transform:rotate(-2deg)}
.atelier-home .field-frame--4 {margin-top:75px;transform:rotate(2deg)}
.atelier-home .field-frame:hover img {filter:saturate(1.05)}
.atelier-home .field-frame figcaption {padding:14px 8px 10px}
.atelier-home .field-frame figcaption>b {font-size:16px;margin:8px 0}
.atelier-home .field-film__note>span:first-child {visibility:visible}
.atelier-home .field-journal {padding-top:40px}
.atelier-home .field-journal__grid {grid-template-columns:.8fr 1.3fr;gap:9vw}
.atelier-home .field-journal__count {font:400 112px/.9 var(--font-serif);letter-spacing:-.06em;margin-bottom:30px;color:var(--gold)}
.atelier-home .field-journal h2 {font-size:clamp(47px,5vw,76px)}
.atelier-home .field-journal__aside>p {font-size:13px;line-height:1.95;margin-top:25px}
.atelier-home .field-journal__list {border-top:1px solid var(--ink)}
.atelier-home .field-story {position:relative;padding-block:32px;grid-template-columns:30px 1fr 40px;gap:20px;border-bottom-color:var(--atelier-line);isolation:isolate}
.atelier-home .field-story h3 {font-size:clamp(23px,2.3vw,36px);line-height:1.45;letter-spacing:-.035em;font-weight:500;max-width:18em}
.atelier-home .field-story__meta {font-size:9px;letter-spacing:.04em}
.atelier-home .field-story p {font-size:11px;max-width:34em}
.atelier-home .field-story__arrow {font-size:36px;transition:transform .35s}
.atelier-home .field-story:hover .field-story__arrow {transform:translate(4px,-4px)}
.atelier-story-preview {position:absolute;width:220px;height:165px;left:53%;top:50%;padding:5px;background:var(--paper);box-shadow:0 12px 40px #151a1733;opacity:0;pointer-events:none;transform:translateY(-40%) rotate(8deg) scale(.9);transition:opacity .3s,transform .5s var(--ease);z-index:2}
.atelier-story-preview img {width:100%;height:100%;object-fit:cover}
.field-story:is(:hover,:focus-visible) .atelier-story-preview {opacity:1;transform:translateY(-50%) rotate(-5deg) scale(1)}
.atelier-random {display:inline-flex;gap:18px;align-items:center;border:1px solid var(--ink);padding:15px 18px;margin-top:27px;font:11px/1.5 var(--font-sans);transition:background .3s,color .3s;text-align:left}
.atelier-random>span {font-size:23px;line-height:1;transition:transform .7s}
.atelier-random>i {font:normal 20px/1 var(--font-sans)}
.atelier-random:hover {background:var(--ink);color:var(--paper)}
.atelier-random:hover>span {transform:rotate(90deg)}
@media(max-width:1150px){
 .atelier-home .field-atlas__grid{gap:35px;grid-template-columns:.75fr 1.25fr}.atelier-home .exp-tab>b{font-size:21px}.atelier-home .exp-detail__copy{display:block}.atelier-home .exp-detail__copy .field-text-link{margin-top:23px}
 .atelier-home .field-frame{flex-basis:38vw}.atelier-home .field-journal__grid{gap:45px}.atelier-story-preview{width:180px;height:145px}
}
@media(max-width:800px){
 .atelier-home .field-atlas__heading{gap:20px;grid-template-columns:1.4fr 1fr 55px}.atelier-home .field-atlas__heading p{font-size:10px}.atelier-home .field-atlas__grid{gap:28px}.atelier-home .exp-tabs{max-height:500px}.atelier-home .exp-tab{min-height:64px}.atelier-home .exp-tab>b{font-size:18px}.atelier-home .exp-detail__image>span{font-size:72px}.atelier-home .exp-detail__image>i{height:48px;width:48px;font-size:25px}
 .atelier-home .field-film{gap:25px}.atelier-home .field-frame{flex-basis:46vw}.atelier-home .field-frame img{height:390px}.atelier-home .field-frame--2,.atelier-home .field-frame--4{margin-top:45px}.atelier-home .field-journal__grid{grid-template-columns:.9fr 1.2fr;gap:35px}.atelier-home .field-story{gap:12px;grid-template-columns:23px 1fr 25px}.atelier-home .field-story h3{font-size:24px}.atelier-story-preview{display:none}
}
@media(max-width:600px){
 :root{--nav-h:65px}.atelier-site .nav .brand__name{font-size:15px}.atelier-site .search-modal__field{padding-block:20px}.atelier-site .sresult{padding-block:15px}.atelier-site .search-modal__panel{outline-offset:5px}
.atelier-home :is(.field-atlas,.field-images,.field-journal){padding-block:65px}
 .atelier-home .field-section-label{font-size:8px;margin-bottom:35px}.atelier-home .field-atlas__heading{grid-template-columns:1fr 52px;margin-bottom:28px;gap:20px}.atelier-home .field-atlas h2{font-size:45px}.atelier-home .field-atlas__heading p{grid-column:1;grid-row:2;font-size:10px}.atelier-home .field-atlas__grid{display:flex;gap:24px}.atelier-home .exp-tabs{max-height:none;padding:3px 20px 13px;width:calc(100% + 40px);gap:9px}.atelier-home .exp-tab{min-height:78px;flex-basis:130px;padding:8px 10px;grid-template-columns:22px 1fr;gap:4px}.atelier-home .exp-tab>b{font-size:16px}.atelier-home .exp-tab>small{margin-top:0;font-size:7px}.atelier-home .exp-tab.is-selected{padding-left:10px;border-color:var(--acid)}.atelier-home .exp-tab.is-selected::before{display:none}
 .atelier-home .exp-detail__image{aspect-ratio:1.15}.atelier-home .exp-detail__image>span{font-size:65px;left:18px;top:17px}.atelier-home .exp-detail__image>i{width:44px;height:44px;font-size:26px;right:14px;bottom:26px}.atelier-home .exp-detail__copy{margin-top:20px}.atelier-home .exp-detail h3{font-size:31px}.atelier-home .exp-detail__copy [data-exp-lead]{font-size:11px;line-height:1.95}.atelier-home .exp-detail__copy .field-text-link{margin-top:20px}.atelier-home .field-atlas__foot{margin-top:28px;padding-top:18px;font-size:8px}
 .atelier-home .field-images{padding-inline:0}.atelier-home .field-images__heading{margin-bottom:20px}.atelier-home .field-images h2{font-size:44px}.atelier-home .field-images__heading>p{font-size:10px;line-height:1.8;gap:20px}.atelier-home .field-film{padding:18px 20px 35px;gap:24px}.atelier-home .field-frame{flex-basis:76vw;max-width:335px;padding:7px;transform:rotate(-2deg)}.atelier-home .field-frame img{height:340px}.atelier-home .field-frame--2,.atelier-home .field-frame--4{margin-top:38px;transform:rotate(2deg)}.atelier-home .field-frame--3{transform:rotate(-1deg)}.atelier-home .field-frame figcaption{padding:12px 6px 8px}.atelier-home .field-frame figcaption>b{font-size:14px}.atelier-home .field-frame figcaption>span{font-size:7px}.atelier-home .field-film__note{font-size:7px;line-height:1.8;gap:14px}
 .atelier-home .field-journal{padding-top:15px}.atelier-home .field-journal__grid{display:block}.atelier-home .field-journal__count{font-size:90px;margin-bottom:25px}.atelier-home .field-journal h2{font-size:43px}.atelier-home .field-journal__aside>p{font-size:11px;margin-top:20px}.atelier-random{margin-top:23px;font-size:10px;padding:13px 16px;gap:17px}.atelier-home .field-journal__list{margin-top:40px}.atelier-home .field-story{padding-block:25px;grid-template-columns:21px 1fr 26px;gap:11px}.atelier-home .field-story h3{font-size:22px;line-height:1.5}.atelier-home .field-story__meta{font-size:8px}.atelier-home .field-story__arrow{font-size:27px}.atelier-home .field-story p{font-size:10px}
 .atelier-site .footer{padding-top:45px}.atelier-site .footer__top{padding-top:25px}.atelier-site .footer__wordmark{font-size:24vw;padding-bottom:15px}
}
@media(hover:none),(pointer:coarse){.atelier-story-preview{display:none}.atelier-home .field-frame{box-shadow:0 5px 15px #151a1712}}
@media(hover:hover) and (pointer:fine){.atelier-home .field-film{scroll-snap-type:none}}
@media(prefers-reduced-motion:reduce){.atelier-story-preview,.atelier-site .brand__seal--image,.atelier-site .sresult,.atelier-random>span{transition:none}.atelier-site .brand:hover .brand__seal--image,.atelier-home .field-frame{transform:none}}

/* Photography stays inside the established paper composition. */
.field-manifesto__aside {min-width:0}
.field-manifesto__photos {position:relative;height:435px;margin-top:28px;isolation:isolate}
.field-manifesto__snapshot {position:absolute;display:block;width:82%;padding:7px 7px 0;background:#faf8f2;box-shadow:0 8px 28px #151a171a;transition:transform .35s var(--ease)}
.field-manifesto__snapshot figure {margin:0}
.field-manifesto__snapshot img {display:block;width:100%;aspect-ratio:1.5;object-fit:cover;height:auto}
.field-manifesto__snapshot figcaption {font:10px/1.6 var(--font-serif);padding:9px 3px 10px;overflow-wrap:anywhere}
.field-manifesto__snapshot--1 {top:0;left:0;transform:rotate(-4deg);z-index:1}
.field-manifesto__snapshot--2 {top:145px;right:0;width:76%;transform:rotate(4deg);z-index:2}
.field-manifesto__snapshot--3 {top:285px;left:3%;width:73%;transform:rotate(-3deg);z-index:3}
.field-manifesto__snapshot--3 img {aspect-ratio:1.9}
.field-manifesto__snapshot:hover {transform:rotate(0deg) translateY(-4px);z-index:4}
.field-manifesto__snapshot:focus-visible {outline:2px solid var(--gold);outline-offset:5px;z-index:4}
.home-carousel.field-cover__visual {padding-right:0}
.home-carousel__stage {position:relative;padding-right:28px}
.home-carousel [data-carousel-slide] {position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.home-carousel [data-carousel-slide][hidden],.home-carousel__controls[hidden],.field-film-toolbar[hidden] {display:none!important}
.home-carousel__controls {display:flex;flex-wrap:wrap;align-items:center;gap:3px 12px;margin-top:45px;padding-right:28px}
.home-carousel__transport,.home-carousel__pages {display:flex;align-items:center;flex:none}
.home-carousel__controls button,.field-film-toolbar button {height:44px;min-width:44px;display:grid;place-items:center;border:1px solid var(--atelier-line);font:16px/1 var(--font-sans);transition:color .2s,background .2s}
.home-carousel__controls button+button {border-left:0}
.home-carousel__controls button:hover,.field-film-toolbar button:hover {background:var(--ink);color:var(--paper)}
.home-carousel__controls button:focus-visible,.field-film-toolbar button:focus-visible {outline:2px solid var(--gold);outline-offset:3px}
.home-carousel__pages {gap:0;margin-left:auto}
.home-carousel__pages button {border:0!important;min-width:44px;font-size:10px;color:var(--muted);position:relative}
.home-carousel__pages button[aria-pressed="true"] {color:var(--gold)}
.home-carousel__pages button[aria-pressed="true"]::after {content:"";position:absolute;bottom:4px;height:2px;left:9px;right:9px;background:currentColor}
.home-carousel__count {font:10px/1.5 var(--font-sans);letter-spacing:.06em;font-variant-numeric:tabular-nums;margin-left:auto}
.home-carousel__source {flex-basis:100%;font:9px/1.8 var(--font-sans);color:var(--muted);display:flex;gap:15px;align-items:center;width:fit-content}
.home-carousel__source:hover {color:var(--gold)}
.home-carousel__source span {font-size:14px}
.home-carousel:focus-visible {outline:2px solid var(--gold);outline-offset:6px}
.home-carousel .field-cover__photo::after {z-index:3}
.home-carousel .field-cover__photo figcaption {right:clamp(140px,13vw,210px);flex-direction:column;gap:3px;z-index:4}
.field-film-toolbar {display:flex;align-items:center;gap:22px;margin:0 var(--pad) 12px}
.field-film-toolbar__count {font:12px/1.5 var(--font-sans);letter-spacing:.08em;font-variant-numeric:tabular-nums;white-space:nowrap;flex:none}
.field-film-toolbar__count i {font-style:normal;color:var(--muted)}
.field-film-toolbar__progress {height:2px;background:#151a1726;flex:1;min-width:15px;overflow:hidden}
.field-film-toolbar__progress>span {display:block;width:100%;height:100%;background:var(--gold);transform:scaleX(var(--film-progress,0));transform-origin:left}
.field-film-toolbar__hint {font-size:10px;color:var(--muted);flex:none}
.field-film-toolbar__buttons {display:flex;gap:8px;flex:none}
.field-film-toolbar button {width:44px;border-radius:50%}
.field-film-toolbar button:disabled {opacity:.25;cursor:default;background:transparent;color:var(--ink)}
.atelier-home .field-film {scroll-padding-inline:var(--pad)}
.atelier-home .field-frame img {background:#e2e1d9}
@media(max-width:1100px){
 .home-carousel__controls{gap-inline:7px}
 .field-manifesto__photos{height:370px}.field-manifesto__snapshot--2{top:120px}.field-manifesto__snapshot--3{top:240px}
}
@media(max-width:900px){
 .home-carousel__pages{display:none}.home-carousel__count{margin-left:auto}
 .field-manifesto__photos{height:270px;margin-top:20px}.field-manifesto__snapshot{width:95%;padding:5px 5px 0}.field-manifesto__snapshot--2{top:115px;width:93%}.field-manifesto__snapshot--3{display:none}.field-manifesto__snapshot figcaption{font-size:8px;padding:7px 2px}
 .field-film-toolbar__hint{display:none}
}
@media(max-width:600px){
 .home-carousel__stage{padding-right:17px}.home-carousel__controls{padding-right:17px;margin-top:36px;gap:3px 10px}.home-carousel__source{font-size:8px}.home-carousel .field-cover__photo figcaption{right:110px}
 .field-manifesto__grid{display:grid;grid-template-columns:1fr;gap:0}.field-manifesto__aside{display:contents}.field-manifesto__aside>.field-side-note{grid-row:1}.field-manifesto__grid>div:not(.field-manifesto__aside){grid-row:2}.field-manifesto__photos{grid-row:3;grid-column:1;height:220px;margin-top:30px;width:100%}
 .field-manifesto__snapshot{width:49%;padding:5px 5px 0}.field-manifesto__snapshot--1{left:0;top:5px}.field-manifesto__snapshot--2{right:0;top:23px;width:48%}.field-manifesto__snapshot--3{display:block;left:30%;top:100px;width:40%}.field-manifesto__snapshot figcaption{font-size:8px;line-height:1.4;padding:7px 2px}.field-manifesto__snapshot--3 figcaption{font-size:7px}
 .field-film-toolbar{margin:0 20px 6px;gap:12px}.field-film-toolbar__count{font-size:10px}.field-film-toolbar__buttons{gap:6px}
}
@media(max-width:360px){.field-manifesto__photos{height:200px}.field-manifesto__snapshot--3{top:90px}.home-carousel__controls{gap-inline:5px}}
@media(prefers-reduced-motion:reduce){.field-manifesto__snapshot{transition:none}.field-manifesto__snapshot:hover{transform:none}}

/* A second, independent album inside the tilted photographic print. */
.field-cover__inset.inset-carousel{width:clamp(115px,14vw,198px);padding:0;background:transparent;box-shadow:none;outline:0;touch-action:pan-y}
.inset-carousel__print{margin:0;padding:8px 8px 0;background:var(--white);box-shadow:0 8px 20px #12160f22;outline:1px solid #181c190a;outline-offset:-1px;transform:none;transition:transform .7s var(--ease);pointer-events:none}
.inset-carousel__stage{position:relative;height:clamp(80px,9vw,125px);overflow:hidden;touch-action:pan-y}
.inset-carousel [data-inset-slide]{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.inset-carousel [data-inset-slide][hidden]{display:none!important}
.field-cover__inset.inset-carousel figcaption{height:36px;padding:4px 2px;display:grid;place-items:center;line-height:1.5;font-size:9px}
.inset-carousel:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.field-cover__visual:hover .field-cover__inset.inset-carousel{transform:rotate(6deg)}
.home-carousel .field-cover__photo figcaption{right:clamp(140px,13vw,210px)}
.home-carousel__story{margin-top:46px}
@media(max-width:930px){.field-cover__inset.inset-carousel{width:130px}.inset-carousel__stage{height:90px}}
@media(max-width:600px){
 .field-cover__inset.inset-carousel{width:111px}.inset-carousel__print{padding:5px 5px 0}
 .inset-carousel__stage{height:75px}.field-cover__inset.inset-carousel figcaption{height:28px;font-size:7px}
 .field-cover__visual:hover .field-cover__inset.inset-carousel{transform:rotate(7deg)}
 .home-carousel .field-cover__photo figcaption{right:110px}
 .home-carousel__story{margin-top:36px}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .inset-carousel:hover .inset-carousel__print,.inset-carousel:focus-visible .inset-carousel__print{transform:translateY(-4px) rotate(-4deg)}
}

/* atelier-interiors.css */
/* ATELIER / 先锋田野档案馆 — interior edition, after the field layers. */
body:not([data-page="index"]) {
  --atlas-paper: #f3f0e8;
  --atlas-ink: #151a17;
  --atlas-red: #cf3e27;
  --atlas-acid: #dceab3;
  --atlas-rule: rgba(21, 26, 23, .24);
}
body:not([data-page="index"]) main { background: var(--atlas-paper); }
body:not([data-page="index"]) .sec-title { font-size: clamp(34px, 4.8vw, 72px); font-weight: 850; line-height: 1.12; letter-spacing: -.065em; text-wrap: balance; }
body:not([data-page="index"]) .sec-head { padding-top: 20px; border-top: 1px solid var(--atlas-ink); }
body:not([data-page="index"]) .section--ink .sec-head { border-top-color: #f3f0e84d; }
body:not([data-page="index"]) .sec-head .eyebrow { font-family: var(--font-sans); letter-spacing: .12em; font-size: 10px; }
body:not([data-page="index"]) .section--paper2 { background: #e8e5dc; }

/* The contents spread: page information and a cut photographic window. */
body:not([data-page="index"]) .phero {
  min-height: 650px; padding: 34px 0 54px; background: var(--atlas-paper);
  color: var(--atlas-ink); overflow: hidden; border: 0; isolation: isolate;
}
body:not([data-page="index"]) .phero__inner {
  display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, .82fr);
  gap: 22px 32px; max-width: var(--wrap); z-index: 2;
}
body:not([data-page="index"]) .phero__inner > * { max-width: 100%; }
body:not([data-page="index"]) .phero__crumbs {
  grid-column: 1 / -1; margin: 0 0 16px; padding-bottom: 20px;
  border-bottom: 1px solid currentColor; color: inherit; opacity: .74;
  font-size: 10px; font-family: var(--font-sans); letter-spacing: .08em;
}
body:not([data-page="index"]) .phero__inner > .eyebrow { grid-column: 1; padding-top: 14px; color: var(--atlas-red); font-size: 10px; letter-spacing: .14em; }
body:not([data-page="index"]) .phero__title {
  grid-column: 1; font-family: var(--font-sans); font-size: clamp(58px, 7vw, 108px);
  font-weight: 900; line-height: 1.04; letter-spacing: -.075em; text-wrap: balance;
}
body:not([data-page="index"]) .phero__lead {
  grid-column: 1; max-width: 43ch; margin-top: 6px; font-size: 14px;
  line-height: 1.95; color: #4d584c;
}
body:not([data-page="index"]) .phero__bg {
  position: absolute; inset: 124px var(--pad) 52px auto; width: 35%; z-index: -2;
  clip-path: polygon(7% 0, 100% 0, 100% 89%, 89% 100%, 0 100%, 0 8%);
  background: #c6c8ba; margin: 0;
}
body:not([data-page="index"]) .phero__bg img { opacity: 1; filter: saturate(.8) contrast(1.06); object-fit: cover; object-position: center; width: 100%; height: 100%; }
body:not([data-page="index"]) .phero__veil { inset: 0; height: auto; background: transparent; z-index: -1; pointer-events: none; }
body:not([data-page="index"]) .phero::after {
  content: "FIELD ARCHIVE / 行走中的文化档案"; left: var(--pad); right: auto;
  bottom: 22px; color: inherit; font-family: var(--font-sans); font-size: 9px; letter-spacing: .13em;
}
body[data-page="team"] .phero { background: var(--atlas-acid); }
body[data-page="team"] .phero__bg { width: 33%; inset-block: 142px 38px; clip-path: polygon(0 0, 100% 0, 100% 100%, 14% 100%, 0 86%); }
body[data-page="team"] .phero__title { font-size: clamp(56px, 6.4vw, 100px); }
body[data-page="team"] .phero::after { content: "01 / PEOPLE WHO WALK"; }
body[data-page="projects"] .phero { background: var(--atlas-ink); color: var(--atlas-paper); }
body[data-page="projects"] .phero__inner > .eyebrow,
body[data-page="projects"] .phero__title .field-title-accent { color: var(--atlas-acid); }
body[data-page="projects"] .phero__lead { color: #c5ccbf; }
body[data-page="projects"] .phero__bg { width: 36%; inset-block: 132px 0; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%, 0 14%); }
body[data-page="projects"] .phero::after { content: "02 / 18 EXPEDITIONS · 2017—2026"; }
body[data-page="archive"] .phero { min-height: 520px; padding-bottom: 48px; }
body[data-page="archive"] .phero__inner { grid-template-columns: minmax(0, 1.6fr) minmax(0, .55fr); }
body[data-page="archive"] .phero__title { font-size: clamp(56px, 6.7vw, 100px); }
body[data-page="archive"] .phero__bg { width: 24%; inset-block: 127px 45px; clip-path: polygon(0 0, 100% 0, 100% 84%, 82% 100%, 0 100%); }
body[data-page="archive"] .phero__bg img { filter: grayscale(1) contrast(1.12); }
body[data-page="archive"] .phero::after { content: "04 / INDEX OF 432 ARTICLES"; }
body[data-page="chronicle"] .phero { background: var(--atlas-red); color: #fffaf0; }
body[data-page="chronicle"] .phero__inner > .eyebrow,
body[data-page="chronicle"] .phero__title .field-title-accent { color: var(--atlas-acid); }
body[data-page="chronicle"] .phero__lead { color: #fffaf0; }
body[data-page="chronicle"] .phero__bg { width: 36%; inset-block: 128px 45px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 62%, 12% 50%, 0 38%); }
body[data-page="chronicle"] .phero__bg img { filter: grayscale(1) contrast(1.08); }
body[data-page="chronicle"] .phero::after { content: "03 / EVERY STEP HAS A DATE"; }
body[data-page="gallery"] .phero { min-height: min(78svh, 850px); padding-block: 34px 70px; background: var(--atlas-ink); color: var(--atlas-paper); }
body[data-page="gallery"] .phero__inner { min-height: 560px; align-content: space-between; }
body[data-page="gallery"] .phero__bg { inset: 0; width: 100%; clip-path: none; }
body[data-page="gallery"] .phero__bg img { opacity: .8; filter: saturate(.84); object-position: center 56%; }
body[data-page="gallery"] .phero__veil { background: linear-gradient(90deg, #151a17f0, #151a1780 51%, #151a1715), linear-gradient(0deg, #151a17d6, transparent 55%); }
body[data-page="gallery"] .phero__inner > .eyebrow,
body[data-page="gallery"] .phero__title .field-title-accent { color: var(--atlas-acid); }
body[data-page="gallery"] .phero__lead { color: #e0e5d9; }
body[data-page="gallery"] .phero::after { content: "05 / THE CONTACT SHEET"; }
body[data-page="contact"] .phero { min-height: 600px; background: var(--atlas-red); color: #fffaf0; }
body[data-page="contact"] .phero__inner > .eyebrow,
body[data-page="contact"] .phero__title .field-title-accent { color: var(--atlas-acid); }
body[data-page="contact"] .phero__lead { color: #fffaf0; }
body[data-page="contact"] .phero__bg img { filter: grayscale(1) contrast(1.08); }
body[data-page="contact"] .phero::after { content: "06 / THE NEXT CHAPTER STARTS WITH YOU"; }

/* Expedition catalogue: compact editorial plates with a living surface. */
body[data-page="projects"] .stats { border-top: 0; padding: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
body[data-page="projects"] .stats__item { border-left: 1px solid var(--atlas-rule); padding: 8px 0 8px 24px; }
body[data-page="projects"] .stats__item:first-child { border-left: 0; padding-left: 0; }
body[data-page="projects"] .stats__num { font-size: clamp(44px, 5.5vw, 82px); line-height: 1.05; }
body[data-page="projects"] .stats__label { margin-top: 12px; font-size: 11px; letter-spacing: .08em; }
body[data-page="projects"] .stats__note { border-top: 1px solid var(--atlas-rule); padding-top: 16px; margin-top: 20px; }
body[data-page="projects"] .prow-list {
  border: 0; counter-reset: expedition;
  display: flex; flex-direction: column; gap: clamp(13px, 1.4vw, 20px);
  margin-top: clamp(4px, .8vw, 12px);
}
body[data-page="projects"] .prow,
body[data-page="projects"] .prow:nth-child(even) {
  display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
  gap: 0; align-items: stretch; position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(266px, 22.5vw, 366px); margin: 0; padding: 0; border: 0;
  background: #e9e6dc; color: var(--atlas-ink); counter-increment: expedition;
  box-shadow: inset 0 0 0 1px rgba(21, 26, 23, .07);
  transition: transform .58s cubic-bezier(.22,.78,.2,1), box-shadow .58s cubic-bezier(.22,.78,.2,1);
}
body[data-page="projects"] .prow:hover,
body[data-page="projects"] .prow:focus-visible {
  transform: translate3d(0, -4px, 0);
  box-shadow: inset 0 0 0 1px rgba(21, 26, 23, .1), 0 30px 56px -30px rgba(21, 26, 23, .5);
  z-index: 3;
}
body[data-page="projects"] .prow::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 2px;
  background: var(--atlas-ink); transform: scaleX(0); transform-origin: left center;
  transition: transform .85s cubic-bezier(.22,.78,.2,1); pointer-events: none;
}
body[data-page="projects"] .prow:hover::before,
body[data-page="projects"] .prow:focus-visible::before { transform: scaleX(1); }
body[data-page="projects"] .prow:nth-child(3n + 2) { background: var(--atlas-acid); }
body[data-page="projects"] .prow:nth-child(3n) { background: var(--atlas-ink); color: var(--atlas-paper); }
body[data-page="projects"] .prow:nth-child(3n)::before { background: var(--atlas-acid); }
body[data-page="projects"] .prow__media,
body[data-page="projects"] .prow:nth-child(even) .prow__media {
  grid-column: 1; grid-row: 1; position: relative; width: 100%; height: 100%;
  min-height: 100%; aspect-ratio: auto; overflow: hidden; background: #d9d5c8;
}
body[data-page="projects"] .prow:nth-child(3n + 2) .prow__media { background: #c6d69f; aspect-ratio: auto; }
body[data-page="projects"] .prow:nth-child(3n) .prow__media { background: #0c110e; aspect-ratio: auto; }
body[data-page="projects"] .prow__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.08); filter: saturate(.94) contrast(1.02);
  transition: filter .7s var(--ease);
}
body[data-page="projects"] .prow__media::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(21, 26, 23, 0) 46%, rgba(21, 26, 23, .38));
  opacity: .55; transition: opacity .65s var(--ease);
}
body[data-page="projects"] .prow:hover .prow__media::before,
body[data-page="projects"] .prow:focus-visible .prow__media::before { opacity: .92; }
body[data-page="projects"] .prow:hover .prow__media img,
body[data-page="projects"] .prow:focus-visible .prow__media img { filter: saturate(1.04) contrast(1.04); }
body[data-page="projects"] .prow__media::after { box-shadow: none; border: 1px solid #151a1712; }
body[data-page="projects"] .prow__no,
body[data-page="projects"] .prow:nth-child(even) .prow__no {
  position: absolute; z-index: 2; grid-column: auto; grid-row: auto;
  left: 18px; top: 18px; padding: 10px 14px; min-width: 76px;
  background: var(--atlas-paper); color: var(--atlas-ink);
  transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
body[data-page="projects"] .prow__no b {
  font-size: 26px; font-weight: 750; color: var(--atlas-ink); line-height: 1; transition: color .4s var(--ease);
}
body[data-page="projects"] .prow__no i {
  margin-top: 3px; font-size: 8.5px; color: #57634f; letter-spacing: .06em; transition: color .4s var(--ease);
}
body[data-page="projects"] .prow:hover .prow__no,
body[data-page="projects"] .prow:focus-visible .prow__no {
  background: var(--atlas-ink); color: var(--atlas-paper); transform: translate3d(0, -2px, 0);
  box-shadow: 0 14px 28px -16px rgba(21, 26, 23, .65);
}
body[data-page="projects"] .prow:hover .prow__no b,
body[data-page="projects"] .prow:focus-visible .prow__no b { color: var(--atlas-paper); }
body[data-page="projects"] .prow:hover .prow__no i,
body[data-page="projects"] .prow:focus-visible .prow__no i { color: var(--atlas-acid); }
body[data-page="projects"] .prow:nth-child(3n):hover .prow__no,
body[data-page="projects"] .prow:nth-child(3n):focus-visible .prow__no { background: var(--atlas-acid); color: var(--atlas-ink); }
body[data-page="projects"] .prow:nth-child(3n):hover .prow__no b,
body[data-page="projects"] .prow:nth-child(3n):focus-visible .prow__no b { color: var(--atlas-ink); }
body[data-page="projects"] .prow:nth-child(3n):hover .prow__no i,
body[data-page="projects"] .prow:nth-child(3n):focus-visible .prow__no i { color: #3c4736; }
body[data-page="projects"] .prow__body,
body[data-page="projects"] .prow:nth-child(even) .prow__body {
  grid-column: 2; grid-row: 1; position: relative;
  padding: clamp(22px, 2.4vw, 38px); gap: 10px; justify-content: center;
}
body[data-page="projects"] .prow__body::before {
  content: counter(expedition, decimal-leading-zero) " / EXPEDITION";
  font-size: 9px; letter-spacing: .2em; color: currentColor; opacity: .6; font-weight: 500;
}
body[data-page="projects"] .prow__body::after {
  content: "打开这一期 ↗"; position: absolute; top: clamp(22px, 2.4vw, 38px); right: clamp(22px, 2.4vw, 38px);
  font-size: 9.5px; letter-spacing: .16em; color: currentColor; opacity: 0;
  transform: translate3d(-6px, 2px, 0);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
body[data-page="projects"] .prow:hover .prow__body::after,
body[data-page="projects"] .prow:focus-visible .prow__body::after { opacity: .72; transform: none; }
body[data-page="projects"] .prow__kicker { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: currentColor; opacity: .68; }
body[data-page="projects"] .prow__name {
  font-size: clamp(22px, 2vw, 32px); line-height: 1.16; letter-spacing: -.05em; color: currentColor;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px;
  transition: background-size .7s cubic-bezier(.22,.78,.2,1);
}
body[data-page="projects"] .prow:hover .prow__name,
body[data-page="projects"] .prow:focus-visible .prow__name { background-size: 100% 1px; }
body[data-page="projects"] .prow__lead { font-size: 12.5px; line-height: 1.72; color: currentColor; opacity: .74; max-width: 30ch; }
body[data-page="projects"] .prow__meta {
  border-color: currentColor; color: currentColor; padding-top: 13px; margin-top: 2px; font-size: 10.5px; letter-spacing: .06em;
}
body[data-page="projects"] .prow__meta b { color: currentColor; }
body[data-page="projects"] .prow:nth-child(3n) .prow__body::before { color: var(--atlas-acid); opacity: 1; }
body[data-page="projects"] .prow:nth-child(3n) .prow__name { color: var(--atlas-paper); }
body[data-page="projects"] .prow:nth-child(3n) .prow__lead { color: #d5dbcf; }
body[data-page="projects"] .prow:nth-child(3n):hover .prow__name,
body[data-page="projects"] .prow:nth-child(3n):focus-visible .prow__name { color: var(--atlas-acid); }
body[data-page="projects"] .prow:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

@media (min-width: 1001px) {
  body[data-page="projects"] .prow:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.42fr); }
  body[data-page="projects"] .prow:nth-child(even) .prow__media { grid-column: 2; }
  body[data-page="projects"] .prow:nth-child(even) .prow__body { grid-column: 1; }
  body[data-page="projects"] .prow:nth-child(even) .prow__no { left: auto; right: 18px; }
  body[data-page="projects"] .prow:nth-child(even) .prow__body::after { right: auto; left: clamp(22px, 2.4vw, 38px); }
}
/* Scroll-linked plate drift, when the browser supports scroll timelines. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    body[data-page="projects"] .prow__media img {
      animation: projPlateDrift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes projPlateDrift {
  from { transform: translate3d(0, -3.4%, 0) scale(1.1); }
  to { transform: translate3d(0, 3.4%, 0) scale(1.1); }
}

/* Archival index: a column for the collection, a compact grid for its records. */
body[data-page="archive"] .filterbar { padding-block: 0; border-block: 1px solid var(--atlas-rule); }
body[data-page="archive"] .filterbar__inner { padding-block: 18px; }
body[data-page="archive"] .arch-bar { margin-bottom: 44px; padding-bottom: 20px; border-bottom: 1px solid var(--atlas-ink); }
body[data-page="archive"] .arch-group { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 48px; padding-top: 0; }
body[data-page="archive"] .arch-group + .arch-group { padding-top: 42px; margin-top: 64px; border-top: 1px solid var(--atlas-ink); }
body[data-page="archive"] .arch-group__head { position: sticky; top: calc(var(--nav-h) + 26px); align-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: 15px; margin: 0; }
body[data-page="archive"] .arch-group__head h3 { font-size: 36px; font-weight: 850; letter-spacing: -.06em; }
body[data-page="archive"] .arch-group__n { order: 2; color: #55614e; }
body[data-page="archive"] .arch-group__n b { font-size: 68px; letter-spacing: -.075em; font-weight: 800; color: var(--atlas-red); }
body[data-page="archive"] .arch-group__desc { order: 3; max-width: 20ch; font-size: 12px; color: #55614e; line-height: 1.9; }
body[data-page="archive"] .arch-group__en { order: 1; color: #55614e; font-size: 9px; letter-spacing: .1em; }
body[data-page="archive"] .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 30px; }
body[data-page="archive"] .entry { position: relative; grid-template-columns: minmax(0, 1fr) 98px; gap: 18px; min-height: 122px; padding: 21px 0; border-bottom: 1px solid var(--atlas-rule); }
body[data-page="archive"] .entry__meta { font-size: 9px; color: #5d6856; letter-spacing: .025em; gap: 4px 8px; }
body[data-page="archive"] .entry__cat { color: #ab2f1b; }
body[data-page="archive"] .entry__title { font-size: 15px; font-weight: 650; line-height: 1.65; letter-spacing: -.02em; }
body[data-page="archive"] .entry__cover { width: 98px; aspect-ratio: 4 / 3; overflow: hidden; background: transparent; }
body[data-page="archive"] .entry__cover img { clip-path: inset(12% 0 12% 22%); filter: saturate(.75); transition: clip-path .45s var(--ease), filter .4s; }
body[data-page="archive"] .entry:hover { background: #e3e7d7; padding-left: 0; }
body[data-page="archive"] .entry:hover .entry__title { color: var(--atlas-ink); }
body[data-page="archive"] .entry:hover .entry__cover img,
body[data-page="archive"] .entry:focus-visible .entry__cover img { clip-path: inset(0); filter: saturate(1); transform: none; }
body[data-page="archive"] .archive-empty { border-block: 1px solid var(--atlas-rule); color: #53604d; }

/* Chronicle: the year is a visual landmark, individual records stay quiet. */
body[data-page="chronicle"] .yearnav { background: var(--atlas-ink); border: 0; color: var(--atlas-paper); }
body[data-page="chronicle"] .yearnav > .wrap { gap: 4px; padding-block: 14px; }
body[data-page="chronicle"] .yearnav__label { color: #bac6ac; margin-right: 16px; }
body[data-page="chronicle"] .yearnav .chip { color: var(--atlas-paper); min-height: 44px; padding-inline: 15px; font-size: 12px; }
body[data-page="chronicle"] .yearnav .chip:hover,
body[data-page="chronicle"] .yearnav .chip:focus-visible { background: var(--atlas-acid); color: var(--atlas-ink); }
body[data-page="chronicle"] .wrap--narrow { max-width: 1380px; }
body[data-page="chronicle"] .tl__group { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 54px; padding-bottom: 72px; }
body[data-page="chronicle"] .tl__year { gap: 20px; padding-top: 18px; }
body[data-page="chronicle"] .tl__year b { font-size: clamp(100px, 12.6vw, 182px); font-weight: 850; letter-spacing: -.09em; line-height: .9; color: var(--atlas-ink); }
body[data-page="chronicle"] .tl__group:nth-child(even) .tl__year b { color: transparent; -webkit-text-stroke: 1px var(--atlas-ink); }
body[data-page="chronicle"] .tl__year span { color: #5a6653; font-size: 10px; letter-spacing: .12em; }
body[data-page="chronicle"] .tl__year::after { width: 82px; height: 7px; background: var(--atlas-red); }
body[data-page="chronicle"] .tl__items { border-left-color: var(--atlas-ink); }
body[data-page="chronicle"] .tl__item { padding-block: 25px 30px; gap: 12px 16px; }
body[data-page="chronicle"] .tl__item h4 { font-size: 21px; font-weight: 650; line-height: 1.55; letter-spacing: -.025em; }
body[data-page="chronicle"] .tl__item time { font-size: 10px; letter-spacing: .06em; color: #55634d; }
body[data-page="chronicle"] .tl__item .cat { background: transparent; border: 1px solid #b5bea8; font-size: 9px; padding: 3px 7px; }
body[data-page="chronicle"] .tl__item::before { background: var(--atlas-red); top: 34px; }
body[data-page="chronicle"] .tl__item a:hover { text-decoration: underline; text-decoration-color: var(--atlas-red); text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* The photographic room. Its filter controls retain the tested paper surface. */
body[data-page="gallery"] .gallery-filters { background: var(--atlas-paper); border-bottom-color: var(--atlas-ink); padding-top: 18px; }
body[data-page="gallery"] .gallery-filters .filterbar__label { font-size: 10px; }
body[data-page="gallery"] .gallery-filters .filterbar .chip { border-color: #aeb6a2; }
body[data-page="gallery"] .gallery-filters .filterbar .chip.is-active { background: var(--atlas-red); border-color: var(--atlas-red); color: #fff; }
body[data-page="gallery"] .gallery-filters .filterbar .chip.is-active i,
body[data-page="gallery"] .gallery-filters .filterbar .chip.is-active small { color: #fff; }
body[data-page="gallery"] .section:has(.masonry) { background: var(--atlas-ink); color: var(--atlas-paper); padding-block: 44px 84px; }
body[data-page="gallery"] .gallery-hint { color: #c8d1be; border-color: #f3f0e84d; padding-bottom: 23px; margin-bottom: 34px; font-size: 11px; }
body[data-page="gallery"] .section:has(.masonry) :is(.empty-note, .note-inline) { color: #c8d1be; }
body[data-page="gallery"] .masonry { columns: 3; column-gap: clamp(24px, 3.6vw, 56px); }
body[data-page="gallery"] .masonry figure { margin-bottom: 42px; position: relative; background: transparent; }
body[data-page="gallery"] .masonry figure img { width: 100%; height: auto; background: #242c23; transition: filter .5s; }
body[data-page="gallery"] .masonry figcaption { border-color: #f3f0e833; color: #bdc9b1; padding-block: 16px; grid-template-columns: 35px minmax(0, 1fr); gap: 13px; font-size: 10px; letter-spacing: .04em; }
body[data-page="gallery"] .masonry figcaption::before { color: var(--atlas-acid); font-size: 12px; }
body[data-page="gallery"] .masonry figure:hover img { filter: saturate(1.14) contrast(1.03); transform: none; }
body[data-page="gallery"] .masonry figure:focus-visible { outline-color: var(--atlas-acid); }

/* The project dossier: cinematic cover, quiet document, annotated side rail. */
body[data-page="project"] .proj-hero { min-height: min(90svh, 1000px); padding-top: 46px; padding-bottom: 52px; align-items: stretch; }
body[data-page="project"] .proj-hero__inner { display: flex; justify-content: flex-end; gap: 26px; max-width: var(--wrap); }
body[data-page="project"] .proj-hero__inner > .phero__crumbs { margin-bottom: auto; padding-bottom: 17px; opacity: .86; color: var(--atlas-paper); }
body[data-page="project"] .proj-hero__bg img { object-position: center; filter: saturate(.84) contrast(1.04); }
body[data-page="project"] .proj-hero__veil { background: linear-gradient(0deg, #151a17f2, #151a1760 48%, #151a1710 72%, #151a1773); }
body[data-page="project"] .proj-hero__no { font-size: 11px; color: var(--atlas-acid); letter-spacing: .18em; }
body[data-page="project"] .proj-hero__title { max-width: 15em; font-size: clamp(42px, 7vw, 106px); line-height: 1.1; letter-spacing: -.065em; }
body[data-page="project"] .proj-hero__sub { max-width: 50ch; font-size: clamp(18px, 2vw, 27px); line-height: 1.7; }
body[data-page="project"] .proj-hero__meta { display: grid; grid-template-columns: 1fr 1fr 1fr; padding-top: 23px; gap: 16px; color: #d7e0cd; font-size: 11px; }
body[data-page="project"] .proj-body { grid-template-columns: minmax(0, 1.3fr) minmax(0, .75fr); gap: clamp(42px, 7vw, 110px); }
body[data-page="project"] .proj-copy > .proj-lead:first-child { font-size: clamp(28px, 3.2vw, 46px); line-height: 1.4; letter-spacing: -.055em; }
body[data-page="project"] .proj-copy > .proj-lead:first-child,
body[data-page="project"] .proj-copy h2 { text-wrap: balance; }
body[data-page="project"] .proj-copy > p:not(.proj-lead) { max-width: 54ch; line-height: 2; }
body[data-page="project"] .proj-copy blockquote { --muted: #c1cbb7; background: var(--atlas-ink); color: var(--atlas-paper); padding: 32px; border: 0; line-height: 1.8; }
body[data-page="project"] .proj-body__side { padding: 30px; background: #e2e8d6; top: calc(var(--nav-h) + 24px); gap: 20px; }
body[data-page="project"] .proj-body__side::before { content: "DOSSIER / 实践档案"; font-size: 9px; font-weight: 650; letter-spacing: .12em; color: #4b5c42; }
body[data-page="project"] .factlist { border-top: 1px solid var(--atlas-ink); }
body[data-page="project"] .factlist div { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding-block: 13px; border-color: #151a1726; }
body[data-page="project"] .focus-list { border-top: 2px solid var(--atlas-ink); }
body[data-page="project"] .focus-list li { font-size: 16px; padding-block: 17px; }
body[data-page="project"] .focus-list li b { font-size: 10px; font-weight: 750; }
body[data-page="project"] .route__stop b { min-width: 92px; border-color: var(--atlas-ink); font-size: 18px; }
body[data-page="project"] .proj-nav { padding-block: 40px; }
body:not([data-page="index"]) .pcard { display: flex; flex-direction: column; gap: 0; padding: 0 0 28px; margin: 0; border-bottom: 1px solid var(--atlas-rule); }
body:not([data-page="index"]) .pcard__cover { width: 100%; aspect-ratio: 4 / 3; }
body:not([data-page="index"]) .pcard__body { padding: 22px 0 0; gap: 14px; }
body:not([data-page="index"]) .pcard__title { font-size: 22px; line-height: 1.5; letter-spacing: -.035em; }
body:not([data-page="index"]) .pcard__excerpt { display: -webkit-box; -webkit-line-clamp: 3; font-size: 12px; line-height: 1.9; }

/* Contact is an invitation. The concrete channels remain directly readable. */
body[data-page="contact"] .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 74px; counter-reset: contact-channel; }
body[data-page="contact"] .contact-card { counter-increment: contact-channel; padding-block: 26px 36px; position: relative; }
body[data-page="contact"] .contact-card:nth-child(5) { grid-column: auto; }
body[data-page="contact"] .contact-card::before { content: counter(contact-channel, decimal-leading-zero); position: absolute; right: 0; top: 24px; font-size: 11px; color: #65735a; font-variant-numeric: tabular-nums; }
body[data-page="contact"] .contact-card h3 { font-size: 11px; letter-spacing: .08em; }
body[data-page="contact"] .contact-card > b { max-width: 90%; font-size: clamp(20px, 2.2vw, 32px); line-height: 1.45; letter-spacing: -.025em; margin-block: 24px 14px; }
body[data-page="contact"] .contact-card > p { max-width: 44ch; }
body[data-page="contact"] .qr-block { background: var(--atlas-acid); border-top: 0; padding: 32px; }
body[data-page="contact"] #join { background: var(--atlas-ink); color: var(--atlas-paper); padding-block: 90px; }
body[data-page="contact"] #join .wrap { display: grid; grid-template-columns: 1fr 1fr; max-width: var(--wrap); gap: 32px 80px; }
body[data-page="contact"] #join .eyebrow { grid-column: 1 / -1; color: var(--atlas-acid); font-size: 10px; }
body[data-page="contact"] #join .sec-title { grid-column: 1; grid-row: 2 / 4; font-size: clamp(64px, 7.8vw, 120px); color: var(--atlas-acid); line-height: 1.06; }
body[data-page="contact"] #join .sec-desc { grid-column: 2; margin: 0; color: #d5dfc8; font-size: 15px; line-height: 2; }
body[data-page="contact"] #join .action-row { grid-column: 2; }
body[data-page="contact"] #join .btn { min-height: 60px; min-width: 250px; justify-content: space-between; background: var(--atlas-acid); color: var(--atlas-ink); border-color: var(--atlas-acid); }
body[data-page="contact"] .notice { background: #e5e8db; border-left: 0; border-top: 1px solid var(--atlas-ink); padding: 26px 0 0; }

/* Article exteriors. Original WeChat prose, decorations, and images stay intact. */
body[data-page="post"] .article__head { max-width: 1240px; padding-top: 52px; padding-bottom: 44px; gap: 25px; }
body[data-page="post"] .article__head::before { content: "FIELD RECORD / 现场文献"; display: block; border-top: 1px solid var(--atlas-ink); padding-top: 20px; font-size: 9px; font-weight: 650; color: #5c6853; letter-spacing: .12em; }
body[data-page="post"] .article__tags .tag { border-radius: 0; font-size: 10px; letter-spacing: .04em; }
body[data-page="post"] .article__tags .tag--gold { background: var(--atlas-ink); border-color: var(--atlas-ink); color: var(--atlas-paper); }
body[data-page="post"] .article__tags .tag--ink { background: transparent; border-color: #b2b9a8; color: #526049; }
body[data-page="post"] .article__title { max-width: 21em; font-size: clamp(32px, 4.8vw, 68px); font-weight: 850; line-height: 1.28; letter-spacing: -.06em; }
body[data-page="post"] .article__meta { border-top: 0; padding-top: 0; font-size: 10px; letter-spacing: .035em; line-height: 1.9; }
body[data-page="post"] .article__foot { border-top: 2px solid var(--atlas-ink); padding-block: 28px 46px; gap: 24px; }
body[data-page="post"] .article__source { font-weight: 650; color: #a82e1a; }
body[data-page="post"] .related { background: #e3e6d8; padding-block: 60px; border-top: 0; }
body[data-page="post"] .related > .wrap { max-width: 1240px; }
body[data-page="post"] .related .eyebrow { font-size: 10px; color: #46573d; }
body[data-page="post"] .related .pcard__title { font-size: 19px; }
body[data-page="post"] .pager { padding-bottom: 60px; }
body[data-page="post"] .pager__item { padding-block: 30px; }
body[data-page="post"] .pager__item small { color: #a82e1a; }
/* Override the legacy mobile rule that hid result counts. */
body:not([data-page="index"]) :is(.filterbar__tools, .gallery-filters__tools) .filter-count { display: block; }

/* Tablet editions keep every route and every filter available. */
@media (max-width: 1100px) {
  body:not([data-page="index"]) .phero { min-height: 590px; }
  body:not([data-page="index"]) .phero__title { font-size: clamp(50px, 6.8vw, 76px); }
  body:not([data-page="index"]) .phero__bg { width: 34%; inset-block: 128px 54px; }
  body[data-page="archive"] .phero { min-height: 490px; }
  body[data-page="archive"] .phero__bg { width: 24%; }
  body[data-page="gallery"] .phero__bg { inset: 0; width: 100%; }
  body[data-page="gallery"] .phero__inner { min-height: 510px; }
  body[data-page="projects"] .prow__body,
  body[data-page="projects"] .prow:nth-child(even) .prow__body { padding: 28px; }
  body[data-page="projects"] .prow__name { font-size: 28px; }
  body[data-page="archive"] .arch-group { grid-template-columns: 170px minmax(0, 1fr); gap: 30px; }
  body[data-page="archive"] .archive-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-page="chronicle"] .tl__group { gap: 40px; }
  body[data-page="chronicle"] .tl__item h4 { font-size: 19px; }
  body[data-page="gallery"] .masonry { column-gap: 30px; }
  body[data-page="project"] .proj-body { gap: 42px; }
  body[data-page="project"] .proj-body__side { padding: 24px; }
  body[data-page="contact"] #join .wrap { gap: 28px 45px; }
}
@media (max-width: 800px) {
  body:not([data-page="index"]) .sec-title { font-size: clamp(32px, 5.8vw, 46px); }
  body:not([data-page="index"]) .phero { display: flex; flex-direction: column; min-height: 0; padding-block: 26px 43px; }
  body:not([data-page="index"]) .phero__inner { display: flex; flex-direction: column; gap: 17px; order: 1; }
  body:not([data-page="index"]) .phero__inner > * { max-width: 100%; }
  body:not([data-page="index"]) .phero__crumbs { font-size: 9px; padding-bottom: 13px; margin-bottom: 0; }
  body:not([data-page="index"]) .phero__inner > .eyebrow { padding-top: 8px; font-size: 9px; }
  body:not([data-page="index"]) .phero__title { font-size: clamp(42px, 7.6vw, 62px); letter-spacing: -.065em; line-height: 1.08; }
  body:not([data-page="index"]) .phero__lead { margin: 0; max-width: 56ch; font-size: 13px; }
  body:not([data-page="index"]) .phero__bg { position: relative; inset: auto; order: 2; z-index: 1; width: calc(100% - var(--pad) * 2); height: 260px; margin: 30px var(--pad) 0; clip-path: polygon(0 0, 100% 0, 100% 88%, 92% 100%, 0 100%); }
  body:not([data-page="index"]) .phero::after { display: block; font-size: 8px; bottom: 14px; }
  body[data-page="archive"] .phero__bg { height: 180px; }
  body[data-page="gallery"] .phero { min-height: 680px; display: block; padding-bottom: 58px; }
  body[data-page="gallery"] .phero__inner { min-height: 570px; justify-content: flex-end; }
  body[data-page="gallery"] .phero__inner .phero__crumbs { margin-bottom: auto; }
  body[data-page="gallery"] .phero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; margin: 0; clip-path: none; }
  body[data-page="gallery"] .phero__bg img { object-position: 62% center; }
  body[data-page="gallery"] .phero__veil { background: linear-gradient(0deg, #151a17f2, #151a1780 58%, #151a1733); }
  body[data-page="projects"] .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 0; }
  body[data-page="projects"] .stats__item:nth-child(odd) { border-left: 0; padding-left: 0; }
  body[data-page="projects"] .prow-list { gap: 12px; margin-top: 10px; }
  body[data-page="projects"] .prow,
  body[data-page="projects"] .prow:nth-child(even) { grid-template-columns: minmax(0, 1fr); min-height: 0; margin-bottom: 0; }
  body[data-page="projects"] .prow__media,
  body[data-page="projects"] .prow:nth-child(even) .prow__media { grid-column: 1; grid-row: 1; height: clamp(196px, 52vw, 286px); min-height: 0; }
  body[data-page="projects"] .prow:nth-child(3n + 2) .prow__media,
  body[data-page="projects"] .prow:nth-child(3n) .prow__media { height: clamp(196px, 52vw, 286px); }
  body[data-page="projects"] .prow__body,
  body[data-page="projects"] .prow:nth-child(even) .prow__body { grid-column: 1; grid-row: 2; padding: 22px 22px 24px; gap: 9px; }
  body[data-page="projects"] .prow__body::after { display: none; }
  body[data-page="projects"] .prow__no,
  body[data-page="projects"] .prow:nth-child(even) .prow__no { left: 14px; right: auto; top: 14px; padding: 9px 12px; min-width: 70px; }
  body[data-page="projects"] .prow__no b { font-size: 22px; }
  body[data-page="projects"] .prow__no i { font-size: 8px; }
  body[data-page="projects"] .prow__name { font-size: 25px; }
  body[data-page="archive"] .arch-group { grid-template-columns: minmax(0, 1fr); gap: 25px; }
  body[data-page="archive"] .arch-group__head { position: static; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 20px; }
  body[data-page="archive"] .arch-group__head h3 { grid-column: 1; grid-row: 1; font-size: 34px; }
  body[data-page="archive"] .arch-group__en { grid-column: 1; grid-row: 2; }
  body[data-page="archive"] .arch-group__n { grid-column: 2; grid-row: 1 / 3; }
  body[data-page="archive"] .arch-group__n b { font-size: 52px; }
  body[data-page="archive"] .arch-group__desc { grid-column: 1 / -1; grid-row: 3; max-width: 60ch; }
  body[data-page="archive"] .archive-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-page="archive"] .entry__title { font-size: 16px; }
  body[data-page="chronicle"] .yearnav > .wrap { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #acb89e #303a2e; }
  body[data-page="chronicle"] .yearnav > .wrap > * { flex: none; }
  body[data-page="chronicle"] .tl__group { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-bottom: 54px; }
  body[data-page="chronicle"] .tl__year { flex-direction: row; gap: 25px; align-items: flex-end; position: static; }
  body[data-page="chronicle"] .tl__year b { font-size: clamp(88px, 19vw, 144px); }
  body[data-page="chronicle"] .tl__year span { padding-bottom: 10px; }
  body[data-page="chronicle"] .tl__year::after { display: none; }
  body[data-page="chronicle"] .tl__item h4 { font-size: 19px; }
  body[data-page="gallery"] .masonry { columns: 2; column-gap: 28px; }
  body[data-page="gallery"] .masonry figcaption { grid-template-columns: 25px minmax(0, 1fr); gap: 9px; }
  body[data-page="project"] .proj-hero { min-height: 760px; padding-top: 30px; }
  body[data-page="project"] .proj-body { grid-template-columns: minmax(0, 1fr); }
  body[data-page="project"] .proj-body__side { position: static; padding: 30px; }
  body[data-page="contact"] .contact-grid { gap: 0 35px; }
  body[data-page="contact"] #join .wrap { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  body[data-page="contact"] #join .sec-title,
  body[data-page="contact"] #join .sec-desc,
  body[data-page="contact"] #join .action-row { grid-column: 1; grid-row: auto; }
  body[data-page="contact"] #join .sec-title { font-size: clamp(62px, 12vw, 100px); }
  body[data-page="post"] .article__head { padding-top: 32px; gap: 22px; }
  body[data-page="post"] .article__title { font-size: clamp(30px, 5.7vw, 46px); }
}
@media (max-width: 640px) {
  body:is([data-page="archive"], [data-page="chronicle"]) .filterbar { padding: 0; }
  body:is([data-page="archive"], [data-page="chronicle"]) .filterbar__inner { display: block; padding-block: 12px; }
  body:is([data-page="archive"], [data-page="chronicle"]) .filterbar__label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 6px; padding: 0; line-height: 16px; font-size: 10px; }
  body:is([data-page="archive"], [data-page="chronicle"]) .filterbar__label::after { content: "左右滑动 →"; color: #596851; font-size: 9px; font-weight: 400; letter-spacing: .02em; }
  body:is([data-page="archive"], [data-page="chronicle"]) .filterbar .chips { display: flex; flex-wrap: nowrap; gap: 6px; min-width: 0; width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: 0 0 5px; scrollbar-width: thin; scrollbar-color: #7a856b #dedfd2; overscroll-behavior-x: contain; scroll-padding-inline: 4px; }
  body:is([data-page="archive"], [data-page="chronicle"]) .filterbar .chips::-webkit-scrollbar { display: block; height: 4px; }
  body:is([data-page="archive"], [data-page="chronicle"]) .filterbar .chips::-webkit-scrollbar-track { background: #dedfd2; }
  body:is([data-page="archive"], [data-page="chronicle"]) .filterbar .chips::-webkit-scrollbar-thumb { background: #7a856b; }
  body:is([data-page="archive"], [data-page="chronicle"]) .filterbar .chip { flex: 0 0 auto; height: 44px; min-height: 44px; padding: 7px 10px; white-space: nowrap; scroll-margin-inline: 4px; }
  body:is([data-page="archive"], [data-page="chronicle"]) .filterbar .chip:focus-visible { outline: 2px solid var(--gold-2); outline-offset: -3px; }
  body:is([data-page="archive"], [data-page="chronicle"]) .filterbar__tools { display: flex; flex-wrap: nowrap; align-items: center; gap: 14px; margin-top: 10px; }
  body:is([data-page="archive"], [data-page="chronicle"]) .filterbar__tools .searchbox { flex: 1 1 auto; min-width: 0; padding: 7px 0; }
  body:is([data-page="archive"], [data-page="chronicle"]) .filterbar__tools .searchbox input { font-size: 16px; }
  body:is([data-page="archive"], [data-page="chronicle"]) .filterbar__tools .filter-count { margin-left: auto; font-size: 11px; white-space: nowrap; }
}
@media (max-width: 480px) {
  body:not([data-page="index"]) .phero { padding-top: 22px; }
  body:not([data-page="index"]) .phero__title { font-size: clamp(38px, 10.6vw, 50px); }
  body:not([data-page="index"]) .phero__bg { height: 210px; margin-top: 25px; }
  body:not([data-page="index"]) .phero__lead { font-size: 12px; line-height: 1.9; }
  body[data-page="archive"] .phero__bg { height: 160px; }
  body[data-page="gallery"] .phero { min-height: 610px; }
  body[data-page="gallery"] .phero__inner { min-height: 510px; }
  body[data-page="gallery"] .phero__bg { height: 100%; margin: 0; }
  body[data-page="gallery"] .gallery-filters { padding-top: 8px; }
  body[data-page="gallery"] .masonry { columns: 1; }
  body[data-page="gallery"] .section:has(.masonry) { padding-block: 30px 56px; }
  body[data-page="gallery"] .masonry figure { margin-bottom: 35px; }
  body[data-page="projects"] .prow__body,
  body[data-page="projects"] .prow:nth-child(even) .prow__body { padding: 20px 18px 22px; }
  body[data-page="projects"] .prow__name { font-size: 23px; }
  body[data-page="projects"] .prow__lead { font-size: 12px; }
  body[data-page="projects"] .prow__meta { font-size: 10px; padding-top: 11px; }
  body[data-page="projects"] .prow__no,
  body[data-page="projects"] .prow:nth-child(even) .prow__no { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
  body[data-page="archive"] .entry { grid-template-columns: minmax(0, 1fr) 76px; gap: 14px; min-height: 118px; padding-block: 20px; }
  body[data-page="archive"] .entry__cover { width: 76px; aspect-ratio: 1; }
  body[data-page="archive"] .entry__cover img { clip-path: none; filter: none; }
  body[data-page="archive"] .entry__title { font-size: 14px; }
  body[data-page="archive"] .arch-group__n b { font-size: 44px; }
  body[data-page="chronicle"] .tl__year { flex-wrap: wrap; gap: 15px; }
  body[data-page="chronicle"] .tl__year b { font-size: clamp(78px, 22vw, 105px); }
  body[data-page="chronicle"] .tl__year span { font-size: 9px; padding-bottom: 5px; }
  body[data-page="chronicle"] .tl__item h4 { font-size: 16px; }
  body[data-page="project"] .proj-hero { min-height: 660px; padding-bottom: 32px; }
  body[data-page="project"] .proj-hero__title { font-size: clamp(30px, 8.7vw, 41px); line-height: 1.16; }
  body[data-page="project"] .proj-hero__sub { font-size: 17px; line-height: 1.8; }
  body[data-page="project"] .proj-hero__meta { display: flex; gap: 9px 20px; font-size: 10px; }
  body[data-page="project"] .proj-body__side { padding: 23px; }
  body[data-page="project"] .proj-copy blockquote { padding: 26px 22px; }
  body[data-page="project"] .proj-copy > .proj-lead:first-child { font-size: 29px; }
  body[data-page="contact"] .contact-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-page="contact"] .contact-card > b { font-size: 25px; }
  body[data-page="contact"] .qr-block { padding: 25px 22px; }
  body[data-page="contact"] #join { padding-block: 60px; }
  body[data-page="contact"] #join .sec-title { font-size: clamp(50px, 16vw, 68px); }
  body[data-page="contact"] #join .sec-desc { font-size: 13px; }
  body[data-page="contact"] #join .btn { min-width: 0; width: 100%; }
  body[data-page="post"] .article__title { font-size: 30px; line-height: 1.35; }
  body[data-page="post"] .article__meta { font-size: 9px; }
  body[data-page="post"] .related .pcard__title { font-size: 20px; }
  body:not([data-page="index"]) .pcard__title { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  body:not([data-page="index"]) :is(.prow__media img, .entry__cover img, .masonry img) { transition: none; }
  body[data-page="projects"] .prow__media img { animation: none; transform: none; }
  body[data-page="projects"] .prow,
  body[data-page="projects"] .prow__name,
  body[data-page="projects"] .prow__body::after { transition: none; }
  body[data-page="projects"] .prow:hover { transform: none; }
}
/* Layout declarations must never override the live filter state. */
body:not([data-page="index"]) [data-filter-item].is-hidden,
body:not([data-page="index"]) [data-group-section].is-hidden,
body:not([data-page="index"]) [data-year-group].is-hidden { display: none; }
/* ---- team: milestones as an inline yearly slider ------------------------ */
body[data-page="team"] .yb--slider {
  border-top: 0;
  margin-top: clamp(22px, 2.6vw, 40px);
  --yb-card: clamp(292px, 30vw, 404px);
}
body[data-page="team"] .yb-bar {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
body[data-page="team"] .yb-bar__label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--muted-2);
  white-space: nowrap;
}
body[data-page="team"] .yb-bar__label span { color: var(--line); }
body[data-page="team"] .yb-bar__track {
  position: relative;
  flex: 1;
  height: 1px;
  background: var(--line);
  overflow: hidden;
}
body[data-page="team"] .yb-bar__fill {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ease);
}
body[data-page="team"] .yb-bar__count {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--muted-2);
  font-variant-numeric: lining-nums;
}
body[data-page="team"] .yb-bar__count b {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
}
body[data-page="team"] .yb-bar__count span[aria-hidden="true"] { color: var(--line); }
body[data-page="team"] .yb-bar__nav { display: flex; gap: 6px; }
body[data-page="team"] .yb-nav {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
    border-color 0.35s var(--ease), opacity 0.35s var(--ease);
}
body[data-page="team"] .yb-nav:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
body[data-page="team"] .yb-nav[disabled] { opacity: 0.26; cursor: default; }
body[data-page="team"] .yb-nav[disabled]:hover {
  background: transparent;
  border-color: var(--line-2);
  color: var(--ink);
}
body[data-page="team"] .yb-rail {
  display: flex;
  gap: clamp(12px, 1.5vw, 18px);
  margin: 0 calc(-1 * clamp(4px, 1vw, 14px));
  padding: clamp(18px, 2vw, 26px) clamp(4px, 1vw, 14px) clamp(20px, 2.2vw, 28px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: clamp(4px, 1vw, 14px);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  outline: none;
}
body[data-page="team"] .yb-rail::-webkit-scrollbar { display: none; }
body[data-page="team"] .yb-rail.is-dragging { scroll-snap-type: none; cursor: grabbing; }
body[data-page="team"] .yb-rail:focus-visible { box-shadow: inset 0 0 0 1px var(--gold); }
body[data-page="team"] .yb-year {
  flex: 0 0 var(--yb-card);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: clamp(20px, 1.9vw, 26px) clamp(20px, 1.9vw, 26px) clamp(22px, 2vw, 27px);
  border: 1px solid var(--line);
  background: var(--paper);
  position: relative;
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease),
    box-shadow 0.5s var(--ease), background 0.5s var(--ease);
}
body[data-page="team"] .yb-year::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s var(--ease);
}
body[data-page="team"] .yb-year:hover,
body[data-page="team"] .yb-year:focus-within {
  transform: translateY(-4px);
  border-color: rgba(16, 26, 23, 0.32);
  box-shadow: 0 28px 44px -36px rgba(16, 26, 23, 0.55);
  background: var(--white);
}
body[data-page="team"] .yb-year:hover::after,
body[data-page="team"] .yb-year:focus-within::after { transform: scaleX(1); }
body[data-page="team"] .yb-year.is-current { background: var(--white); }
body[data-page="team"] .yb-year__left {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line-soft);
}
body[data-page="team"] .yb-year__num {
  font-size: clamp(40px, 3.2vw, 52px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--ink);
  transition: color 0.5s var(--ease);
}
body[data-page="team"] .yb-year:hover .yb-year__num,
body[data-page="team"] .yb-year:focus-within .yb-year__num { color: var(--gold); }
body[data-page="team"] .yb-year__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  white-space: nowrap;
}
body[data-page="team"] .yb-year__meta {
  margin: 0 0 0 auto;
  font-family: var(--font-sans);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--muted-2);
  white-space: nowrap;
}
body[data-page="team"] .yb-year__meta b {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  margin: 0 1px;
}
body[data-page="team"] .yb-year__right {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding-top: 13px;
}
body[data-page="team"] .yb-year__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.78;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  max-width: none;
}
body[data-page="team"] .yb-year__periods {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  margin-top: auto;
  padding-top: 18px;
}
body[data-page="team"] .yb-chip {
  min-width: 0;
  padding: 2px 0 3px 12px;
  border: 0;
  border-left: 2px solid var(--gold);
  background: transparent;
  transition: border-color 0.35s var(--ease), padding-left 0.35s var(--ease);
}
body[data-page="team"] .yb-chip:hover {
  transform: none;
  box-shadow: none;
  background: transparent;
  border-left-color: var(--ink);
  padding-left: 16px;
}
body[data-page="team"] .yb-chip__no {
  font-size: 8px;
  letter-spacing: 0.22em;
  color: var(--gold);
}
body[data-page="team"] .yb-chip__name {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
body[data-page="team"] .yb-chip__term {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--muted-2);
}

@media (max-width: 900px) {
  body[data-page="team"] .yb--slider { --yb-card: min(76vw, 360px); }
  body[data-page="team"] .yb-bar { flex-wrap: wrap; gap: 10px 18px; }
  body[data-page="team"] .yb-bar__label { order: 1; }
  body[data-page="team"] .yb-bar__track { order: 3; flex: 1 1 100%; }
  body[data-page="team"] .yb-bar__count { order: 2; margin-left: auto; }
  body[data-page="team"] .yb-bar__nav { order: 2; }
  body[data-page="team"] .yb-year { padding: 20px 20px 22px; }
  body[data-page="team"] .yb-year__num { font-size: 42px; }
}
@media (max-width: 480px) {
  body[data-page="team"] .yb--slider { --yb-card: 82vw; }
  body[data-page="team"] .yb-year__title { font-size: 13px; letter-spacing: 0.1em; }
  body[data-page="team"] .yb-year__desc { font-size: 12.5px; line-height: 1.7; }
  body[data-page="team"] .yb-nav { width: 32px; height: 32px; }
}

/* motion-system.css */
/* Progressive motion: no selector hides content before JavaScript runs. */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .58s; animation-timing-function: cubic-bezier(.22,.78,.2,1); }
::view-transition-old(root) { animation: archive-page-out .18s ease both; }
::view-transition-new(root) { animation: archive-page-in .38s ease both; }
::view-transition-group(page-title) { z-index: 2; }
::view-transition-group(project-cover) { z-index: 1; overflow: clip; }
::view-transition-old(project-cover), ::view-transition-new(project-cover) { width: 100%; height: 100%; object-fit: cover; }
@keyframes archive-page-out { to { opacity: 0; } }
@keyframes archive-page-in { from { opacity: 0; } to { opacity: 1; } }
.motion-is-revealing { will-change: clip-path, opacity; }
/* Reveal targets stay visible until the motion system arms, then wait hidden
   for their own reveal. Without this the observer can start the clip animation
   one frame after a lazy image was already painted, which read as a blink. */
.motion-pending { opacity: 0; }
@media print { .motion-pending { opacity: 1 !important; } }
[data-tilt].motion-pointer-active { perspective: 1100px; }
.motion-pointer-active [data-magnetic-inner],
.motion-pointer-active [data-tilt-inner] { will-change: translate, rotate; }
.motion-cursor {
  position: fixed; z-index: 190; left: 0; top: 0; display: none;
  pointer-events: none; user-select: none; max-width: min(230px, 70vw);
  padding: 9px 14px; border-radius: 2px; color: #f8f5eb; background: #1b211be8;
  border: 1px solid #f8f5eb3d; font: 11px/1.6 var(--font-sans, sans-serif);
  letter-spacing: .08em; box-shadow: 0 6px 26px #0002;
  contain: layout style; transition: opacity .16s ease; opacity: 0;
}
.motion-cursor.is-active { display: block; opacity: 1; }
[data-drag-scroll] { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; touch-action: auto; }
@media (hover: hover) and (pointer: fine) {
  [data-drag-scroll].motion-can-drag { cursor: grab; }
  [data-drag-scroll].is-motion-dragging,
  [data-drag-scroll].is-motion-dragging * { cursor: grabbing; user-select: none; }
  [data-drag-scroll].is-motion-dragging { scroll-snap-type: none; scroll-behavior: auto; }
}
.lb__zoom-tools { display: flex; align-items: center; gap: 8px; }
.lb__zoom { min-width: 44px; min-height: 44px; border: 1px solid #f3f0e866; padding: 5px 10px; font: 12px/1.4 var(--font-sans, sans-serif); }
.lb__zoom:hover { background: #ffffff12; }
.lb__zoom:disabled { opacity: .45; cursor: default; }
.lb__stage.is-zoomed { overflow: auto; justify-items: start; align-items: start; }
.lb__stage.is-zoomed img { max-width: none; max-height: none; margin: auto; }
.lb__stage img { touch-action: pinch-zoom; }
.lb__stage.is-zoomed img { touch-action: auto; }
@media (max-width: 620px) {
  .lb__top { gap: 8px; flex-wrap: wrap; }
  .lb__top > .lb__cap { padding: 0; flex: 1 1 110px; font-size: 10px; letter-spacing: .03em; }
  .lb__zoom-tools { gap: 4px; }
  .lb__zoom { padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: .001ms !important; animation-delay: 0s !important; }
  .motion-cursor { display: none !important; }
  .motion-is-revealing { will-change: auto; }
}

/* nav-island.css */
/* ------------------------------------------------------------------------
   Liquid-glass dynamic-island navigation.
   The bar stays a floating glass capsule centred over the page; it condenses
   to a small island while scrolling down and blooms back open on hover, on
   focus, or when scrolling back up.
   ------------------------------------------------------------------------ */

:root {
  --island-glass: 249 246 238;
  --island-ink: #151a17;
  --island-gold: #c2452d;
  --island-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* the strip itself: transparent, lets the page scroll beneath it */
header.nav[data-nav] {
  pointer-events: none;
  height: var(--nav-h);
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--island-ink);
  transition: color 0.4s var(--island-ease);
}
header.nav[data-nav]::after,
header.nav[data-nav].is-scrolled::after,
header.nav[data-nav].nav--solid::after { display: none; }
header.nav[data-nav].is-scrolled,
header.nav[data-nav].nav--solid {
  height: var(--nav-h);
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
header.nav[data-nav] .nav__inner {
  pointer-events: auto;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.5vw, 24px);
  width: fit-content;
  max-width: min(calc(100vw - 20px), 1180px);
  height: 56px;
  margin-inline: auto;
  padding: 0 9px 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  background:
    radial-gradient(120% 180% at 50% -30%, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg, rgb(var(--island-glass) / 0.84), rgb(var(--island-glass) / 0.70) 46%, rgb(var(--island-glass) / 0.80));
  -webkit-backdrop-filter: blur(20px) saturate(1.85) brightness(1.1);
  backdrop-filter: blur(20px) saturate(1.85) brightness(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(21, 26, 23, 0.08),
    0 1px 2px rgba(21, 26, 23, 0.06),
    0 16px 34px -20px rgba(21, 26, 23, 0.42);
  transition:
    box-shadow 0.5s var(--island-ease),
    border-color 0.5s var(--island-ease),
    background-color 0.5s var(--island-ease),
    padding 0.5s var(--island-ease),
    gap 0.5s var(--island-ease);
}
header.nav[data-nav].is-scrolled .nav__inner {
  border-color: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(22px) saturate(1.9) brightness(1.08);
  backdrop-filter: blur(22px) saturate(1.9) brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(21, 26, 23, 0.1),
    0 2px 3px rgba(21, 26, 23, 0.07),
    0 22px 44px -24px rgba(21, 26, 23, 0.5);
}

/* moving light across the glass — the "liquid" in liquid glass */
header.nav[data-nav] .nav__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(
    104deg,
    transparent 18%,
    rgba(255, 255, 255, 0.34) 38%,
    rgba(255, 255, 255, 0.10) 50%,
    transparent 68%
  );
  background-size: 260% 100%;
  opacity: 0.55;
  transform: translate3d(0, 0, 0);
  animation: island-sheen 11s var(--island-ease) infinite alternate;
}
/* crisp specular rim, like light catching the edge of the capsule */
header.nav[data-nav] .nav__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 1px 0 0 rgba(255, 255, 255, 0.35),
    inset -1px 0 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(21, 26, 23, 0.07);
}
@keyframes island-sheen {
  from { background-position: 0% 0%; }
  to { background-position: 100% 0%; }
}
@media (prefers-reduced-motion: reduce) {
  header.nav[data-nav] .nav__inner::before { animation: none; }
}

/* pointer-follow glow */
header.nav[data-nav] .nav__glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    calc(var(--island-glow, 170px)) calc(var(--island-glow, 170px) * 0.62) at var(--island-x, 50%) var(--island-y, 20%),
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 0) 70%
  );
  transition: opacity 0.45s var(--island-ease);
}
header.nav[data-nav] .nav__inner:hover .nav__glow,
header.nav[data-nav] .nav__inner:focus-within .nav__glow { opacity: 1; }

/* brand — collapses to the seal when condensed */
header.nav[data-nav] .brand {
  gap: 10px;
  color: inherit;
  padding-left: 3px;
}
header.nav[data-nav] .brand__seal--image,
header.nav[data-nav] .brand__seal {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  opacity: 1;
  color: var(--island-ink);
  transition: transform 0.45s var(--island-ease);
}
header.nav[data-nav] .brand__seal img { width: 100%; height: 100%; object-fit: contain; }
header.nav[data-nav] .brand:hover .brand__seal--image { transform: rotate(-7deg); }
header.nav[data-nav] .brand__text {
  overflow: hidden;
  max-width: 200px;
  transition:
    max-width 0.5s var(--island-ease),
    opacity 0.35s var(--island-ease),
    transform 0.5s var(--island-ease);
}
header.nav[data-nav] .brand__name {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--island-ink);
}
header.nav[data-nav] .brand__en {
  font-family: var(--font-display);
  font-size: 7.5px;
  letter-spacing: 0.24em;
  color: var(--island-ink);
  opacity: 0.55;
}
header.nav[data-nav].is-condensed .brand__text {
  max-width: 0;
  opacity: 0;
  transform: translateX(-6px);
}

/* links */
header.nav[data-nav] .nav__links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  overflow: hidden;
  max-width: 760px;
  margin: 0 4px;
  transition:
    max-width 0.55s var(--island-ease),
    opacity 0.35s var(--island-ease),
    transform 0.55s var(--island-ease);
}
header.nav[data-nav] .nav__links a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--island-ink);
  opacity: 0.68;
  white-space: nowrap;
  transition:
    opacity 0.3s var(--island-ease),
    color 0.3s var(--island-ease);
}
header.nav[data-nav] .nav__links a::after { display: none; }
header.nav[data-nav] .nav__links a:hover,
header.nav[data-nav] .nav__links a.is-active { opacity: 1; }
header.nav[data-nav] .nav__links a.is-active { font-weight: 600; }
header.nav[data-nav] .nav__links a:focus-visible {
  outline: 2px solid var(--island-gold);
  outline-offset: -2px;
}

/* the liquid droplet that glides behind the hovered / active link */
header.nav[data-nav] .nav__drop {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 0;
  width: 0;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.66);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.42));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 2px 10px -4px rgba(21, 26, 23, 0.28);
  opacity: 0;
  transform: translateY(-50%);
  transition:
    left 0.45s var(--island-ease),
    width 0.45s var(--island-ease),
    opacity 0.3s var(--island-ease);
  pointer-events: none;
}
header.nav[data-nav] .nav__drop.is-visible { opacity: 1; }

/* the "now showing" pill that appears in the condensed island */
header.nav[data-nav] .nav__now {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  max-width: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--island-ink);
  opacity: 0;
  white-space: nowrap;
  transform: translateX(-6px);
  transition:
    max-width 0.5s var(--island-ease),
    opacity 0.35s var(--island-ease),
    transform 0.5s var(--island-ease),
    padding 0.5s var(--island-ease);
}
header.nav[data-nav] .nav__now::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--island-gold);
  box-shadow: 0 0 0 3px rgba(194, 69, 45, 0.14);
}
header.nav[data-nav].is-condensed .nav__now {
  max-width: 170px;
  padding: 0 4px;
  opacity: 1;
  transform: none;
}

/* tools */
header.nav[data-nav] .nav__tools {
  gap: 2px;
  padding-right: 2px;
}
header.nav[data-nav] .icon-btn,
header.nav[data-nav] .nav__burger {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid transparent;
  color: var(--island-ink);
  transition:
    background 0.35s var(--island-ease),
    border-color 0.35s var(--island-ease),
    color 0.35s var(--island-ease),
    transform 0.35s var(--island-ease);
}
header.nav[data-nav] .icon-btn:hover,
header.nav[data-nav] .nav__burger:hover {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(255, 255, 255, 0.8);
  color: var(--island-ink);
  transform: translateY(-1px);
}
header.nav[data-nav] .icon-btn:hover,
header.nav[data-nav] .nav__burger:hover,
header.nav[data-nav] .icon-btn:focus-visible,
header.nav[data-nav] .nav__burger:focus-visible {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(255, 255, 255, 0.85);
}
header.nav[data-nav] .nav__burger { display: none; }

/* progress hairline along the bottom of the capsule */
header.nav[data-nav] .nav__progress {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 1.5px;
  border-radius: 999px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--island-ease);
}
header.nav[data-nav] .nav__progress span {
  display: block;
  height: 100%;
  width: calc(var(--island-progress, 0) * 100%);
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(21, 26, 23, 0.55), var(--island-gold));
}
header.nav[data-nav].is-scrolled .nav__progress { opacity: 0.55; }

/* condensed island: links collapse, brand text folds away */
header.nav[data-nav].is-condensed .nav__links {
  max-width: 0;
  margin: 0;
  opacity: 0;
  transform: translateX(-10px);
}
header.nav[data-nav].is-condensed .nav__inner {
  gap: 8px;
  padding: 0 9px 0 7px;
  border-color: rgba(255, 255, 255, 0.88);
  background:
    radial-gradient(120% 180% at 50% -30%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg, rgb(var(--island-glass) / 0.94), rgb(var(--island-glass) / 0.84));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(21, 26, 23, 0.1),
    0 2px 3px rgba(21, 26, 23, 0.08),
    0 18px 36px -22px rgba(21, 26, 23, 0.55);
}

/* the mobile drawer / search overlays keep their own styling */
@media (max-width: 930px) {
  header.nav[data-nav] .nav__inner { gap: 8px; }
  header.nav[data-nav] .nav__links { display: none; }
  header.nav[data-nav] .nav__burger { display: grid; }
  header.nav[data-nav] .brand__en { display: none; }
  header.nav[data-nav].is-condensed .brand__text { max-width: 0; }
  header.nav[data-nav].is-condensed .nav__inner { justify-content: flex-start; }
}
@media (max-width: 560px) {
  header.nav[data-nav] .nav__inner { height: 52px; padding: 0 6px 0 5px; gap: 6px; }
  header.nav[data-nav] .brand__name { font-size: 15px; letter-spacing: 0.12em; }
  header.nav[data-nav] .nav__links a { font-size: 11.5px; padding: 7px 9px; }
  header.nav[data-nav] .nav__now { letter-spacing: 0.1em; }
  header.nav[data-nav] .nav__progress { left: 10px; right: 10px; }
}

/* no backdrop support: fall back to a solid frosted capsule */
@supports not ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
  header.nav[data-nav] .nav__inner {
    background: rgb(var(--island-glass) / 0.96);
    box-shadow: 0 12px 30px -18px rgba(21, 26, 23, 0.45);
  }
}

/* reduced motion: no morph animation, no sheen */
@media (prefers-reduced-motion: reduce) {
  header.nav[data-nav] .brand__text,
  header.nav[data-nav] .nav__links,
  header.nav[data-nav] .nav__now,
  header.nav[data-nav] .nav__drop,
  header.nav[data-nav] .nav__inner,
  header.nav[data-nav] .nav__inner::before {
    transition: none;
    animation: none;
  }
}

/* glass-system.css */
/* ==========================================================================
   Liquid Glass · material pass v2
   --------------------------------------------------------------------------
   A restrained Apple-style glass layer for the field journal. v2 keeps every
   layout, route and interaction as it was and only re-authors the material:

     · navigation is real front/back glass (JS tags .is-over-dark when photos
       or dark sections pass underneath, so tint and type flip together)
     · every glass surface gets a specular rim, a top reflection and a darker
       inner bottom edge, so it reads as a thick sheet rather than a sticker
     · five material tiers keep the page quiet:
         1 controls      thin bright glass, no backdrop blur (cheap)
         2 toolbars      blur 16, floating over content
         3 captions      blur 14 dark glass, tied to the photo underneath
         4 cards         warm milk glass, no blur (paper-only surfaces)
         5 modals        blur 26-30 deep glass, strongest rim and shadow
     · warm amber light and a trace of jade live inside the gradients so the
       glass sits naturally beside ink, indigo and lamp photographs
     · no rainbow fringes: rims are white / ink only, shadows are neutral

   Loaded last in the experience bundle. No HTML or JS behaviour depends on it.
   ========================================================================== */

/* ==========================================================================
   0. Tokens
   ========================================================================== */

:root {
  --g-tint: 251 248 241;
  --g-tint-2: 244 240 231;
  --g-warm: 255 247 233;
  --g-amber: 214 171 112;
  --g-jade: 150 172 148;
  --g-ink: 21 26 23;
  --g-paper: 243 240 232;

  --g-rim: inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 0 0 1px rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(21, 26, 23, 0.07);
  --g-rim-soft: inset 0 1px 0 rgba(255, 255, 255, 0.66),
    inset 0 0 0 1px rgba(255, 255, 255, 0.24);
  --g-rim-dark: inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 0 0 1px rgba(255, 255, 255, 0.13),
    inset 0 -1px 0 rgba(0, 0, 0, 0.24);

  --g-sheen: linear-gradient(
    112deg,
    rgba(255, 255, 255, 0.46) 0%,
    rgba(255, 255, 255, 0.1) 20%,
    rgba(255, 255, 255, 0) 42%,
    rgba(255, 255, 255, 0.12) 63%,
    rgba(255, 255, 255, 0) 82%
  );
  --g-warmth: radial-gradient(
    130% 170% at 14% 4%,
    rgba(255, 241, 217, 0.42),
    rgba(255, 241, 217, 0) 58%
  );
  --g-cool: radial-gradient(
    120% 150% at 90% 104%,
    rgba(198, 210, 198, 0.26),
    rgba(198, 210, 198, 0) 62%
  );

  --g-r-xs: 10px;
  --g-r-sm: 14px;
  --g-r-md: 20px;
  --g-r-lg: 28px;
  --g-r-xl: 36px;
  --g-r-pill: 999px;

  --g-blur-sm: 8px;
  --g-blur: 16px;
  --g-blur-lg: 24px;
  --g-blur-xl: 30px;
  --g-sat: 1.7;

  --g-shadow-1: 0 1px 1px rgba(21, 26, 23, 0.05),
    0 8px 18px -14px rgba(21, 26, 23, 0.35);
  --g-shadow-2: 0 1px 2px rgba(21, 26, 23, 0.05),
    0 18px 38px -24px rgba(21, 26, 23, 0.42);
  --g-shadow-3: 0 2px 5px rgba(21, 26, 23, 0.06),
    0 36px 72px -46px rgba(21, 26, 23, 0.55);

  --g-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --g-dur: 0.5s;
}

/* ==========================================================================
   1. Tier 1 — controls: thin, bright, cheap (no backdrop blur)
   ========================================================================== */

body.atelier-site :is(.chip, .tag, .btn, .icon-btn, .yb-nav,
  .field-cover__scroll, .home-carousel__source, .atelier-random) {
  position: relative;
  color: rgb(var(--g-ink));
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: var(--g-r-pill);
  background:
    var(--g-warmth), var(--g-cool), var(--g-sheen),
    linear-gradient(180deg, rgb(var(--g-tint) / 0.72), rgb(var(--g-tint-2) / 0.58));
  background-size: 100% 100%, 100% 100%, 190% 100%, 100% 100%;
  background-position: 0 0, 0 0, 0% 0, 0 0;
  box-shadow: var(--g-rim), var(--g-shadow-1);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-position 0.55s var(--g-ease),
    box-shadow 0.3s var(--g-ease), transform 0.22s var(--g-ease),
    border-color 0.3s var(--g-ease), color 0.3s var(--g-ease);
}

body.atelier-site :is(.chip, .tag, .btn, .icon-btn, .yb-nav,
  .field-cover__scroll, .home-carousel__source, .atelier-random):hover {
  background-position: 0 0, 0 0, 100% 0, 0 0;
  box-shadow: var(--g-rim), var(--g-shadow-2);
  transform: translateY(-1px);
}

body.atelier-site :is(.chip, .tag, .btn, .icon-btn, .yb-nav,
  .field-cover__scroll, .home-carousel__source, .atelier-random):active {
  background-position: 0 0, 0 0, 55% 0, 0 0;
  box-shadow: inset 0 2px 6px rgba(21, 26, 23, 0.13), var(--g-rim-soft);
  transform: translateY(0) scale(0.985);
}

body.atelier-site .chip.is-active,
body.atelier-site .chip[aria-pressed="true"] {
  color: #fff6ef;
  border-color: rgba(255, 255, 255, 0.36);
  background:
    var(--g-sheen),
    linear-gradient(180deg, rgba(207, 62, 39, 0.94), rgba(176, 48, 30, 0.86));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 14px 30px -22px rgba(140, 47, 39, 0.7);
}

body.atelier-site .chip.is-active :is(i, span, small),
body.atelier-site .chip[aria-pressed="true"] :is(i, span, small) {
  color: rgba(255, 246, 239, 0.82);
}

body.atelier-site .tag--gold {
  color: #7a2318;
  border-color: rgba(255, 255, 255, 0.5);
  background:
    var(--g-warmth), var(--g-sheen),
    linear-gradient(180deg, rgba(207, 62, 39, 0.14), rgba(207, 62, 39, 0.06));
}

body.atelier-site .tag--ink {
  color: rgb(var(--g-paper));
  border-color: rgba(255, 255, 255, 0.16);
  background:
    var(--g-sheen),
    linear-gradient(180deg, rgba(21, 26, 23, 0.88), rgba(21, 26, 23, 0.76));
  box-shadow: var(--g-rim-dark), var(--g-shadow-1);
}

body.atelier-site .field-round-link {
  color: inherit;
  border: 0;
  background: none;
  box-shadow: none;
}

body.atelier-site .field-round-link i {
  display: inline-grid;
  place-items: center;
  color: rgb(var(--g-ink));
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 50%;
  background:
    var(--g-warmth), var(--g-sheen),
    linear-gradient(180deg, rgb(var(--g-tint) / 0.7), rgb(var(--g-tint-2) / 0.56));
  box-shadow: var(--g-rim), var(--g-shadow-1);
  transition: box-shadow 0.3s var(--g-ease), transform 0.25s var(--g-ease);
}

body.atelier-site .field-round-link:hover i {
  box-shadow: var(--g-rim), var(--g-shadow-2);
  transform: translateY(-1px);
}

/* ==========================================================================
   2. Filter systems — pill chips + a floating glass capsule
   ========================================================================== */

body[data-page="gallery"] .gallery-filters .filterbar .chip,
body[data-page="archive"] .filterbar .chip,
body[data-page="chronicle"] .yearnav .chip {
  border-radius: var(--g-r-pill);
  border: 1px solid rgba(255, 255, 255, 0.58);
  background:
    var(--g-warmth), var(--g-sheen),
    linear-gradient(180deg, rgb(var(--g-tint) / 0.66), rgb(var(--g-tint-2) / 0.5));
  box-shadow: var(--g-rim-soft), var(--g-shadow-1);
  transition: background-position 0.55s var(--g-ease),
    box-shadow 0.3s var(--g-ease), transform 0.22s var(--g-ease),
    border-color 0.3s var(--g-ease);
}

body[data-page="gallery"] .gallery-filters .filterbar .chip:hover,
body[data-page="archive"] .filterbar .chip:hover,
body[data-page="chronicle"] .yearnav .chip:hover {
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: var(--g-rim-soft), var(--g-shadow-2);
}

body[data-page="gallery"] .gallery-filters .filterbar .chip.is-active,
body[data-page="archive"] .filterbar .chip.is-active,
body[data-page="chronicle"] .yearnav .chip.is-active {
  color: #fff6ef;
  border-color: rgba(255, 255, 255, 0.34);
  background:
    var(--g-sheen),
    linear-gradient(180deg, rgba(207, 62, 39, 0.95), rgba(174, 47, 29, 0.87));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 16px 32px -24px rgba(140, 47, 39, 0.75);
}

body[data-page="gallery"] .gallery-filters .filterbar .chip.is-active :is(i, span, small),
body[data-page="archive"] .filterbar .chip.is-active :is(i, span, small),
body[data-page="chronicle"] .yearnav .chip.is-active :is(i, span, small) {
  color: rgba(255, 246, 239, 0.8);
}

/* ==========================================================================
   3. Tier 2 — floating toolbars: real blur over whatever scrolls beneath
   ========================================================================== */

body[data-page="gallery"] .gallery-filters .filterbar,
body[data-page="archive"] .filterbar,
body[data-page="chronicle"] .yearnav,
body.atelier-site .field-film-toolbar,
body[data-page="team"] .yb-bar {
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: var(--g-r-pill);
  background:
    var(--g-warmth), var(--g-cool), var(--g-sheen),
    linear-gradient(180deg, rgb(var(--g-tint) / 0.6), rgb(var(--g-tint-2) / 0.46));
  box-shadow: var(--g-rim), var(--g-shadow-2);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
}

body.atelier-site .field-film-toolbar button,
body.atelier-site .field-rail {
  border: 1px solid rgba(255, 255, 255, 0.5);
  background:
    var(--g-sheen),
    linear-gradient(180deg, rgb(var(--g-tint) / 0.5), rgb(var(--g-tint-2) / 0.36));
  box-shadow: var(--g-rim-soft), var(--g-shadow-1);
  -webkit-backdrop-filter: blur(var(--g-blur-sm)) saturate(1.5);
  backdrop-filter: blur(var(--g-blur-sm)) saturate(1.5);
}

/* ==========================================================================
   4. Tier 3 — captions: smoked glass that samples the photograph beneath
   ========================================================================== */

/* The crumb line is a rule, not a panel: a full-width glass bar would read as
   a gray stripe on the paper pages. */
body.atelier-site .phero__crumbs {
  color: inherit;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* On paper and acid heroes the lead reads as milky glass with ink text; on the
   ink / red / photographic heroes it flips to smoked glass with paper ink. */
body.atelier-site .phero__lead {
  color: #3a4538;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: var(--g-r-md);
  padding: 13px 17px;
  background:
    radial-gradient(150% 210% at 6% 0%, rgba(255, 240, 210, 0.6), transparent 58%),
    linear-gradient(180deg, rgb(var(--g-tint) / 0.62), rgb(var(--g-tint-2) / 0.46));
  box-shadow: var(--g-rim), var(--g-shadow-1);
  -webkit-backdrop-filter: blur(14px) saturate(1.45);
  backdrop-filter: blur(14px) saturate(1.45);
}

body[data-page="gallery"] .phero__lead,
body[data-page="projects"] .phero__lead,
body[data-page="chronicle"] .phero__lead,
body[data-page="contact"] .phero__lead {
  color: rgba(247, 243, 234, 0.94);
  border-color: rgba(255, 255, 255, 0.22);
  background:
    radial-gradient(140% 180% at 12% 0%, rgba(255, 233, 200, 0.16), transparent 56%),
    linear-gradient(180deg, rgba(28, 31, 26, 0.52), rgba(17, 20, 17, 0.4));
  box-shadow: var(--g-rim-dark),
    inset 0 0 30px rgba(0, 0, 0, 0.12),
    0 18px 40px -30px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.45) contrast(1.04);
  backdrop-filter: blur(14px) saturate(1.45) contrast(1.04);
}

body.atelier-site .lb__top,
body.atelier-site .lb__cap {
  color: rgba(247, 243, 234, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background:
    radial-gradient(140% 180% at 12% 0%, rgba(255, 233, 200, 0.16), transparent 56%),
    linear-gradient(180deg, rgba(28, 31, 26, 0.52), rgba(17, 20, 17, 0.4));
  box-shadow: var(--g-rim-dark),
    inset 0 0 30px rgba(0, 0, 0, 0.12),
    0 18px 40px -30px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.45) contrast(1.04);
  backdrop-filter: blur(14px) saturate(1.45) contrast(1.04);
}

/* Photograph captions: the index cover and the gallery contact sheet. They sit
   on pictures, so they take smoked glass with paper ink; the blur is switched
   on only for the photograph under the pointer so 101 idle figures stay cheap. */
body.atelier-home .field-cover__photo figcaption,
body[data-page="gallery"] .masonry figure figcaption {
  color: rgba(247, 243, 234, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--g-r-sm);
  background: linear-gradient(180deg, rgba(26, 29, 25, 0.66), rgba(16, 19, 16, 0.54));
  box-shadow: var(--g-rim-dark);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.atelier-home .field-cover__photo:hover figcaption,
body[data-page="gallery"] .masonry figure:hover figcaption,
body[data-page="gallery"] .masonry figure:focus-visible figcaption {
  -webkit-backdrop-filter: blur(14px) saturate(1.45) contrast(1.04);
  backdrop-filter: blur(14px) saturate(1.45) contrast(1.04);
}


body.atelier-site .lb__top,
body.atelier-site .lb__cap {
  border-radius: var(--g-r-pill);
}

/* the light glass plate carried by project badges over photographs */
body[data-page="projects"] .prow__no {
  color: rgb(var(--g-ink));
  border: 1px solid rgba(255, 255, 255, 0.66);
  border-radius: var(--g-r-sm);
  background:
    var(--g-warmth), var(--g-sheen),
    linear-gradient(180deg, rgb(var(--g-tint) / 0.88), rgb(var(--g-tint-2) / 0.76));
  box-shadow: var(--g-rim), var(--g-shadow-1);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body[data-page="projects"] .prow__body::after {
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: var(--g-r-pill);
  background:
    var(--g-sheen),
    linear-gradient(180deg, rgba(21, 26, 23, 0.42), rgba(21, 26, 23, 0.3));
  box-shadow: var(--g-rim-dark);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ==========================================================================
   5. Tier 4 — cards: warm milk glass, no blur (they sit on flat paper)
   ========================================================================== */

body.atelier-site .pcard,
body.atelier-site .contact-card,
body.atelier-site .pillar,
body.atelier-site .stats__item,
body.atelier-site .yb-year,
body.atelier-site .qr-block,
body.atelier-site .proj-lead {
  border: 1px solid rgba(255, 255, 255, 0.68);
  background:
    var(--g-warmth), var(--g-cool),
    linear-gradient(180deg, rgba(255, 252, 246, 0.72), rgba(246, 242, 232, 0.54));
  box-shadow: var(--g-rim), var(--g-shadow-1);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.atelier-site .pcard,
body.atelier-site .contact-card,
body.atelier-site .pillar,
body.atelier-site .qr-block {
  border-radius: var(--g-r-md);
}

body.atelier-site .stats__item,
body.atelier-site .proj-lead {
  border-radius: var(--g-r-lg);
}

body[data-page="team"] .yb-rail .yb-year {
  border-radius: var(--g-r-lg);
}

body[data-page="team"] .yb-rail .yb-year.is-current {
  background:
    var(--g-warmth),
    linear-gradient(180deg, rgba(255, 254, 250, 0.9), rgba(249, 246, 238, 0.78));
  box-shadow: var(--g-rim), 0 22px 46px -30px rgba(21, 26, 23, 0.5);
}

body.atelier-site .pcard__cover,
body[data-page="archive"] .entry__cover {
  border-radius: var(--g-r-md);
  overflow: hidden;
  box-shadow: var(--g-rim-soft), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

body.atelier-site .pcard {
  transition: transform 0.45s var(--g-ease), box-shadow 0.45s var(--g-ease),
    border-color 0.3s var(--g-ease);
}

body.atelier-site .pcard:hover,
body.atelier-site .contact-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--g-rim), var(--g-shadow-2);
}

body.atelier-site .pcard__cover img {
  transition: transform 0.8s var(--g-ease);
}

body.atelier-site .pcard:hover .pcard__cover img {
  transform: scale(1.04);
}

body[data-page="archive"] .entry {
  border-radius: var(--g-r-md);
  transition: background 0.35s var(--g-ease), box-shadow 0.35s var(--g-ease),
    transform 0.35s var(--g-ease);
}

body[data-page="archive"] .entry:hover {
  background:
    var(--g-warmth),
    linear-gradient(180deg, rgba(255, 252, 246, 0.66), rgba(246, 242, 232, 0.44));
  box-shadow: var(--g-rim-soft), var(--g-shadow-1);
}

body[data-page="archive"] .entry__cat,
body[data-page="team"] .yb-chip,
body.atelier-site .article__meta {
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: var(--g-r-pill);
  background:
    var(--g-warmth), var(--g-sheen),
    linear-gradient(180deg, rgb(var(--g-tint) / 0.62), rgb(var(--g-tint-2) / 0.46));
  box-shadow: var(--g-rim-soft);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body[data-page="team"] .award,
body[data-page="team"] .media-item,
body[data-page="chronicle"] .tl__item {
  border-radius: var(--g-r-sm);
  transition: background 0.35s var(--g-ease), box-shadow 0.35s var(--g-ease);
}

body.atelier-home .field-story {
  border-radius: var(--g-r-sm);
  transition: background 0.35s var(--g-ease), box-shadow 0.35s var(--g-ease);
}

body.atelier-home .field-story:hover,
body[data-page="team"] .award:hover,
body[data-page="team"] .media-item:hover,
body[data-page="chronicle"] .tl__item:hover {
  background:
    var(--g-warmth),
    linear-gradient(180deg, rgba(255, 252, 246, 0.6), rgba(246, 242, 232, 0.4));
  box-shadow: var(--g-rim-soft), var(--g-shadow-1);
}

/* ==========================================================================
   6. Photographic surfaces: soft corners, specular rim, inner depth
   ========================================================================== */

body.atelier-home .field-cover__photo,
body.atelier-home .field-manifesto__snapshot,
body.atelier-home .home-carousel__stage,
body.atelier-home .exp-detail__image,
body[data-page="gallery"] .masonry figure,
body[data-page="gallery"] .masonry figure img {
  border-radius: var(--g-r-lg);
  overflow: hidden;
}

body.atelier-home .field-cover__photo,
body.atelier-home .field-manifesto__snapshot,
body.atelier-home .home-carousel__stage,
body[data-page="gallery"] .masonry figure,
body.atelier-home .exp-detail__image {
  box-shadow: var(--g-rim-soft), inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 30px 60px -46px rgba(21, 26, 23, 0.55);
}

/* the small print is a pane of liquid glass: rounder card, matching window,
   milky backdrop, lit rim and a soft halo that travels with the card */
body.atelier-home .field-cover__inset.inset-carousel .inset-carousel__print {
  --print-r: 16px;
  border-radius: var(--print-r);
  overflow: hidden;
  background:
    radial-gradient(120% 130% at 16% 8%, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg, rgba(255, 252, 244, 0.5), rgba(241, 238, 226, 0.26));
  -webkit-backdrop-filter: blur(22px) saturate(1.85) brightness(1.06);
  backdrop-filter: blur(22px) saturate(1.85) brightness(1.06);
  border: 1px solid rgba(255, 255, 255, 0.72);
  outline: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 -10px 18px -16px rgba(21, 26, 23, 0.28),
    0 22px 48px -26px rgba(21, 26, 23, 0.62),
    0 0 50px -10px rgba(240, 247, 226, 0.52);
  filter: drop-shadow(0 0 18px rgba(242, 248, 228, 0.36));
}

body.atelier-home .field-cover__inset.inset-carousel .inset-carousel__stage {
  border-radius: var(--print-r);
}

body.atelier-home .field-cover__inset.inset-carousel figcaption {
  color: var(--g-ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

@media (max-width: 560px) {
  body.atelier-home .field-cover__inset.inset-carousel .inset-carousel__print {
    --print-r: 13px;
  }
}

body[data-page="gallery"] .masonry figure:focus-visible,
body[data-page="gallery"] .masonry figure:hover {
  box-shadow: var(--g-rim), 0 22px 44px -32px rgba(21, 26, 23, 0.6);
}

body.atelier-home .field-cover__edition > span {
  color: rgb(var(--g-ink));
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: var(--g-r-pill);
  background:
    var(--g-warmth), var(--g-sheen),
    linear-gradient(180deg, rgb(var(--g-tint) / 0.7), rgb(var(--g-tint-2) / 0.55));
  box-shadow: var(--g-rim-soft), var(--g-shadow-1);
}

body.atelier-home .exp-tab {
  border-radius: var(--g-r-pill);
  transition: background 0.35s var(--g-ease), box-shadow 0.35s var(--g-ease),
    color 0.35s var(--g-ease);
}

body.atelier-home .exp-tab.is-selected {
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: var(--g-r-pill);
  background:
    radial-gradient(120% 160% at 12% 0%, rgba(220, 234, 179, 0.16), transparent 58%),
    var(--g-sheen),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
  box-shadow: var(--g-rim-dark), var(--g-shadow-1);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(1.5);
  backdrop-filter: blur(var(--g-blur)) saturate(1.5);
}

body.atelier-home .field-atlas__foot .field-text-link,
body.atelier-home .exp-detail__archive {
  border-radius: var(--g-r-pill);
}

/* ==========================================================================
   7. Tier 5 — search overlay and lightbox
   ========================================================================== */

body.atelier-site .search-modal {
  background: rgba(14, 17, 14, 0.4);
}

body.atelier-site .search-modal__panel {
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--g-r-lg);
  background:
    var(--g-warmth), var(--g-cool), var(--g-sheen),
    linear-gradient(180deg, rgb(var(--g-tint) / 0.72), rgb(var(--g-tint-2) / 0.58));
  box-shadow: var(--g-rim), inset 0 0 60px rgba(255, 255, 255, 0.16),
    var(--g-shadow-3);
  -webkit-backdrop-filter: blur(var(--g-blur-xl)) saturate(var(--g-sat))
    brightness(1.06);
  backdrop-filter: blur(var(--g-blur-xl)) saturate(var(--g-sat)) brightness(1.06);
}

body.atelier-site .search-modal__field {
  border-bottom-color: rgba(21, 26, 23, 0.16);
}

body.atelier-site .search-modal__field:focus-within {
  border-bottom-color: rgba(207, 62, 39, 0.5);
}

body.atelier-site .search-modal__close,
body.atelier-site .drawer__close {
  color: rgb(var(--g-paper));
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 50%;
  background:
    var(--g-sheen),
    linear-gradient(180deg, rgba(28, 31, 26, 0.5), rgba(17, 20, 17, 0.38));
  box-shadow: var(--g-rim-dark), var(--g-shadow-1);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
}

body.atelier-site .sresult {
  border-radius: var(--g-r-sm);
  transition: background 0.3s var(--g-ease), box-shadow 0.3s var(--g-ease);
}

body.atelier-site .sresult:hover,
body.atelier-site .sresult.is-cur {
  background:
    var(--g-warmth),
    linear-gradient(180deg, rgba(255, 252, 246, 0.6), rgba(246, 242, 232, 0.4));
  box-shadow: var(--g-rim-soft);
}

body.atelier-site .sresult time {
  white-space: nowrap;
}

body.atelier-site .lb {
  background: rgba(10, 12, 10, 0.82);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  backdrop-filter: blur(6px) saturate(1.2);
}

body.atelier-site .lb__nav,
body.atelier-site .lb__zoom,
body.atelier-site .lb__close {
  color: rgb(var(--g-paper));
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background:
    var(--g-sheen),
    linear-gradient(180deg, rgba(28, 31, 26, 0.48), rgba(17, 20, 17, 0.36));
  box-shadow: var(--g-rim-dark);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
}

/* ==========================================================================
   8. Navigation — true front/back glass with a live backdrop reading
   ========================================================================== */

header.nav[data-nav] .nav__inner {
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--g-r-pill);
  background:
    var(--g-warmth), var(--g-cool), var(--g-sheen),
    linear-gradient(180deg, rgb(var(--g-tint) / 0.62), rgb(var(--g-tint-2) / 0.48));
  box-shadow: var(--g-rim), 0 2px 3px rgba(21, 26, 23, 0.05),
    0 22px 44px -30px rgba(21, 26, 23, 0.5);
  -webkit-backdrop-filter: blur(var(--g-blur-lg)) saturate(1.85)
    brightness(1.05);
  backdrop-filter: blur(var(--g-blur-lg)) saturate(1.85) brightness(1.05);
  transition: background 0.55s var(--g-ease), box-shadow 0.45s var(--g-ease),
    border-color 0.45s var(--g-ease), color 0.45s var(--g-ease);
}

header.nav[data-nav] .nav__inner::before {
  background:
    radial-gradient(
      220px circle at var(--island-x, 50%) var(--island-y, 34%),
      rgba(255, 255, 255, 0.42),
      rgba(255, 255, 255, 0) 70%
    ),
    linear-gradient(
      105deg,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 255, 255, 0.22) 46%,
      rgba(255, 255, 255, 0) 62%
    );
  animation: island-sheen 12s var(--g-ease) infinite alternate;
}

header.nav[data-nav].is-scrolled .nav__inner {
  background:
    var(--g-warmth), var(--g-cool), var(--g-sheen),
    linear-gradient(180deg, rgb(var(--g-tint) / 0.7), rgb(var(--g-tint-2) / 0.56));
  box-shadow: var(--g-rim), 0 3px 6px rgba(21, 26, 23, 0.06),
    0 26px 52px -34px rgba(21, 26, 23, 0.52);
}

header.nav[data-nav].is-condensed .nav__inner {
  background:
    var(--g-warmth), var(--g-sheen),
    linear-gradient(180deg, rgb(var(--g-tint) / 0.9), rgb(var(--g-tint-2) / 0.8));
  box-shadow: var(--g-rim), 0 20px 44px -26px rgba(21, 26, 23, 0.55);
}

/* live dark-backdrop state — set by nav-island.js */
header.nav[data-nav].is-over-dark .nav__inner {
  color: rgba(247, 243, 234, 0.94);
  border-color: rgba(255, 255, 255, 0.2);
  background:
    radial-gradient(130% 180% at 14% 0%, rgba(255, 232, 198, 0.12), transparent 56%),
    var(--g-sheen),
    linear-gradient(180deg, rgba(30, 33, 28, 0.6), rgba(18, 21, 18, 0.48));
  box-shadow: var(--g-rim-dark), 0 24px 52px -30px rgba(0, 0, 0, 0.65);
}

header.nav[data-nav].is-over-dark.is-condensed .nav__inner {
  background:
    var(--g-sheen),
    linear-gradient(180deg, rgba(30, 33, 28, 0.78), rgba(18, 21, 18, 0.68));
}

header.nav[data-nav].is-over-dark :is(.nav__links a, .brand__name,
  .brand__latin, .nav__now) {
  color: rgba(244, 240, 232, 0.82);
}

header.nav[data-nav].is-over-dark :is(.icon-btn, .nav__burger) {
  color: rgba(244, 240, 232, 0.86);
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
}

header.nav[data-nav].is-over-dark .nav__drop {
  background: rgba(247, 243, 234, 0.92);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4),
    0 10px 20px -14px rgba(0, 0, 0, 0.6);
}

header.nav[data-nav].is-over-dark .nav__links a.is-active {
  color: rgb(var(--g-ink));
}

header.nav[data-nav] .nav__progress {
  background: linear-gradient(90deg, rgb(var(--g-amber)), rgba(207, 62, 39, 0.7));
  opacity: 0.6;
}

/* ==========================================================================
   9. Footer — quiet ambient glass, no cardification
   ========================================================================== */

body.atelier-site .footer {
  background:
    radial-gradient(90% 120% at 8% 0%, rgba(214, 171, 112, 0.12), transparent 58%),
    radial-gradient(80% 100% at 92% 100%, rgba(150, 172, 148, 0.1), transparent 60%),
    #0d100d;
}

body.atelier-site .footer__col a {
  transition: color 0.3s var(--g-ease), opacity 0.3s var(--g-ease);
}

body.atelier-site .footer__wordmark {
  opacity: 0.1;
}

body.atelier-site .totop {
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: rgb(var(--g-paper));
  background:
    var(--g-sheen),
    linear-gradient(180deg, rgba(38, 42, 36, 0.72), rgba(20, 24, 20, 0.6));
  box-shadow: var(--g-rim-dark), 0 18px 38px -26px rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
}

/* ==========================================================================
   10. Drawer + article surfaces
   ========================================================================== */

body.atelier-site .drawer__links a {
  border-radius: var(--g-r-sm);
  transition: background 0.3s var(--g-ease), box-shadow 0.3s var(--g-ease);
}

body.atelier-site .drawer__links a:hover,
body.atelier-site .drawer__links a:focus-visible {
  background:
    var(--g-sheen),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

body[data-page="post"] .article__tags .tag {
  border-radius: var(--g-r-pill);
}

body[data-page="post"] .prose img,
body[data-page="post"] .prose .content-img {
  border-radius: var(--g-r-sm);
  box-shadow: var(--g-rim-soft), 0 18px 36px -30px rgba(21, 26, 23, 0.45);
}

/* ==========================================================================
   11. Reserved inset for hover tints (text must never shift)
   ========================================================================== */

body.atelier-home .field-story {
  padding-inline: 18px;
  margin-inline: -18px;
}

body[data-page="team"] .media-item,
body[data-page="team"] .award {
  padding-inline: 18px;
  margin-inline: -18px;
}

body[data-page="chronicle"] .tl__item {
  padding-inline: 16px;
  margin-inline: -16px;
}

/* ==========================================================================
   12. Focus
   ========================================================================== */

body.atelier-site :is(.chip, .tag, .btn, .icon-btn, .yb-nav, .lb__nav,
  .lb__close, .lb__zoom, .field-cover__scroll, .home-carousel__source,
  .atelier-random, .pcard, .contact-card, .yb-year, .entry, .prow__no,
  .search-modal__close, .drawer__close):focus-visible {
  outline: 2px solid rgba(207, 62, 39, 0.45);
  outline-offset: 3px;
}

body.atelier-site .search-modal input:focus-visible {
  outline: 2px solid rgba(207, 62, 39, 0.28);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ==========================================================================
   12b. Component touch-ups carried over from v1
   ========================================================================== */

body.atelier-home .field-cover__visual {
  border-radius: var(--g-r-lg);
}

body.atelier-home .exp-tab:hover {
  background: rgba(255, 255, 255, 0.05);
}

body.atelier-home .field-rail a {
  border-radius: 50%;
}

body:not([data-page="index"]) .pcard__body {
  padding: 22px 22px 24px;
}

body[data-page="contact"] .contact-card > p,
body[data-page="team"] .contact-card > p {
  color: rgba(21, 26, 23, 0.72);
}

body[data-page="archive"] .arch-group__head {
  border-radius: var(--g-r-md) var(--g-r-md) 0 0;
}

body[data-page="projects"] .prow::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    120% 160% at 12% 0%,
    rgba(255, 246, 228, 0.24),
    rgba(255, 246, 228, 0) 55%
  );
  transition: opacity 0.6s var(--g-ease);
}

body[data-page="projects"] .prow:hover::after {
  opacity: 1;
}

body.atelier-site .lb__nav:hover,
body.atelier-site .lb__zoom:hover,
body.atelier-site .lb__close:hover {
  box-shadow: var(--g-rim-dark), 0 14px 30px -20px rgba(0, 0, 0, 0.7);
}

/* ==========================================================================
   12c. Details carried over from v1 (gold action, captions, chromatics)
   ========================================================================== */

body.atelier-site .btn--gold {
  color: #2a2418;
  border-color: rgba(214, 171, 112, 0.6);
  background:
    var(--g-warmth), var(--g-sheen),
    linear-gradient(180deg, rgba(214, 171, 112, 0.85), rgba(188, 148, 94, 0.74));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16), var(--g-shadow-1);
}

body.atelier-site .btn--gold:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.2), var(--g-shadow-2);
}

body.atelier-site .gallery-filters,
body[data-page="gallery"] .filterbar__inner {
  background: transparent;
}

body.atelier-site .field-film-toolbar__progress {
  background: transparent;
}

body.atelier-home .field-film-toolbar button:hover {
  border-color: rgba(255, 255, 255, 0.82);
  box-shadow: var(--g-rim), var(--g-shadow-2);
}

body.atelier-home .field-frame {
  transition: box-shadow 0.5s var(--g-ease), transform 0.5s var(--g-ease);
}

body.atelier-home .field-frame:hover {
  box-shadow: var(--g-rim-soft), 0 26px 56px -36px rgba(21, 26, 23, 0.55);
}

body.atelier-home .field-atlas {
  background:
    radial-gradient(80% 120% at 12% 0%, rgba(214, 171, 112, 0.05), transparent 55%),
    radial-gradient(70% 90% at 92% 100%, rgba(150, 172, 148, 0.05), transparent 60%),
    #0d100d;
}

body[data-page="gallery"] .masonry figure figcaption {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s var(--g-ease), transform 0.4s var(--g-ease);
}

body[data-page="gallery"] .masonry figure:hover figcaption,
body[data-page="gallery"] .masonry figure:focus-visible figcaption {
  opacity: 1;
  transform: translateY(0);
}

body[data-page="chronicle"] .tl__item .cat {
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: var(--g-r-pill);
  background:
    var(--g-warmth), var(--g-sheen),
    linear-gradient(180deg, rgb(var(--g-tint) / 0.62), rgb(var(--g-tint-2) / 0.46));
  box-shadow: var(--g-rim-soft);
}

body.atelier-site .totop {
  transition: box-shadow 0.35s var(--g-ease), transform 0.25s var(--g-ease);
}

body.atelier-site .totop:hover {
  box-shadow: var(--g-rim-dark), 0 22px 44px -26px rgba(0, 0, 0, 0.75);
  transform: translateY(-1px);
}

body.atelier-site .search-modal__close:hover,
body.atelier-site .drawer__close:hover {
  box-shadow: var(--g-rim-dark), var(--g-shadow-2);
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="gallery"] .masonry figure figcaption {
    transition: none;
    transform: none;
  }

  body.atelier-home .field-frame:hover,
  body.atelier-site .totop:hover {
    transform: none;
  }
}

/* ==========================================================================
   13. Responsive
   ========================================================================== */

@media (max-width: 930px) {
  header.nav[data-nav] .nav__inner {
    -webkit-backdrop-filter: blur(var(--g-blur)) saturate(1.7) brightness(1.04);
    backdrop-filter: blur(var(--g-blur)) saturate(1.7) brightness(1.04);
  }
}

@media (max-width: 700px) {
  body[data-page="gallery"] .gallery-filters .filterbar,
  body[data-page="archive"] .filterbar,
  body[data-page="chronicle"] .yearnav {
    padding: 6px 10px;
    border-radius: 24px;
  }

  body.atelier-site .phero__lead,
  body.atelier-site .phero__crumbs {
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    backdrop-filter: blur(10px) saturate(1.4);
  }
}

@media (max-width: 480px) {
  body.atelier-site .pcard,
  body.atelier-site .contact-card,
  body.atelier-site .pillar,
  body.atelier-site .stats__item,
  body.atelier-site .proj-lead {
    box-shadow: var(--g-rim-soft), var(--g-shadow-1);
  }
}

/* ==========================================================================
   14. Fallbacks last so they win where needed
   ========================================================================== */

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  header.nav[data-nav] .nav__inner,
  body.atelier-site .search-modal__panel,
  body.atelier-site .lb__top,
  body.atelier-site .lb__cap,
  body.atelier-site .phero__lead,
  body.atelier-site .phero__crumbs,
  body.atelier-home .field-cover__photo figcaption,
  body[data-page="gallery"] .masonry figure figcaption {
    background:
      var(--g-warmth),
      linear-gradient(180deg, rgb(var(--g-tint) / 0.92), rgb(var(--g-tint-2) / 0.86));
  }

  header.nav[data-nav].is-over-dark .nav__inner,
  body.atelier-site .lb__top,
  body.atelier-site .lb__cap,
  body.atelier-site .phero__lead,
  body.atelier-site .phero__crumbs,
  body.atelier-home .field-cover__photo figcaption,
  body[data-page="gallery"] .masonry figure figcaption {
    background: linear-gradient(180deg, rgba(24, 27, 23, 0.92), rgba(16, 19, 16, 0.88));
  }
}

@media (prefers-reduced-motion: reduce) {
  body.atelier-site :is(.chip, .tag, .btn, .icon-btn, .yb-nav,
    .field-cover__scroll, .home-carousel__source, .atelier-random) {
    transition: none;
  }

  body.atelier-site :is(.chip, .tag, .btn, .icon-btn, .yb-nav,
    .field-cover__scroll, .home-carousel__source, .atelier-random):hover {
    transform: none;
  }

  header.nav[data-nav] .nav__inner::before {
    animation: none;
  }

  body.atelier-site .pcard,
  body.atelier-site .pcard__cover img,
  body[data-page="archive"] .entry {
    transition: none;
  }
}

@media print {
  header.nav[data-nav] .nav__inner,
  body.atelier-site .search-modal__panel,
  body.atelier-site .footer,
  body.atelier-site .totop {
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #fff;
    color: #111;
  }
}

@keyframes island-sheen {
  0% {
    transform: translateX(-12%);
    opacity: 0.55;
  }
  100% {
    transform: translateX(12%);
    opacity: 0.85;
  }
}


/* ==========================================================================
   15. Split status bar — three floating glass islands, one shared material
   ==========================================================================
   Left: the name. Centre: the section links. Right: search (and the menu on
   small screens). The three islands share the navigation material, but each
   keeps its own rim, reflection and darkened state so they read as three
   pieces of the same glass rather than one long capsule. */

header.nav[data-nav] .nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-items: start;
  width: 100%;
  max-width: var(--wrap);
  height: 56px;
  padding: 0 var(--pad);
  gap: 10px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

header.nav[data-nav] .nav__inner::before,
header.nav[data-nav] .nav__inner::after {
  display: none;
}

header.nav[data-nav] .nav__glow,
header.nav[data-nav] .nav__progress {
  display: none;
}

/* the three islands */

header.nav[data-nav] .brand,
header.nav[data-nav] .nav__links,
header.nav[data-nav] .nav__tools {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--g-r-pill);
  background:
    radial-gradient(130% 190% at 12% 0%, rgba(255, 241, 217, 0.5), transparent 58%),
    radial-gradient(120% 160% at 96% 100%, rgba(150, 172, 148, 0.12), transparent 60%),
    var(--g-sheen),
    linear-gradient(180deg, rgb(var(--g-tint) / 0.6), rgb(var(--g-tint-2) / 0.44));
  box-shadow:
    var(--g-rim),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 3px rgba(21, 26, 23, 0.05),
    0 18px 40px -30px rgba(21, 26, 23, 0.5);
  -webkit-backdrop-filter: blur(var(--g-blur-lg)) saturate(1.85) brightness(1.05);
  backdrop-filter: blur(var(--g-blur-lg)) saturate(1.85) brightness(1.05);
  transition:
    background 0.5s var(--g-ease),
    box-shadow 0.45s var(--g-ease),
    border-color 0.45s var(--g-ease),
    color 0.45s var(--g-ease),
    padding 0.45s var(--g-ease),
    width 0.45s var(--g-ease),
    opacity 0.35s var(--g-ease);
}

header.nav[data-nav] .brand {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  padding: 5px 20px 5px 5px;
  gap: 10px;
  text-decoration: none;
}

header.nav[data-nav] .nav__links {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  padding: 5px;
  gap: 2px;
}

header.nav[data-nav] .nav__tools {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  padding: 5px;
  gap: 4px;
}

/* link pills inside the centre island */
header.nav[data-nav] .nav__links a {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 8px 13px;
  border-radius: var(--g-r-pill);
  font-size: 12px;
  letter-spacing: 0.015em;
  color: inherit;
  transition: background 0.3s var(--g-ease), color 0.3s var(--g-ease);
}

header.nav[data-nav] .nav__links a:hover {
  background: rgba(255, 255, 255, 0.4);
}

header.nav[data-nav] .nav__links a.is-active {
  background: rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

header.nav[data-nav] .nav__links .nav__drop {
  display: none;
}

/* bare round controls inside the right island */
header.nav[data-nav] .nav__tools :is(.icon-btn, .nav__burger) {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  transition: background 0.3s var(--g-ease), color 0.3s var(--g-ease);
}

header.nav[data-nav] .nav__tools :is(.icon-btn, .nav__burger):hover {
  background: rgba(255, 255, 255, 0.42);
}

/* the current section, shown in the centre slot while condensed */
header.nav[data-nav] .nav__now {
  display: none;
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 18px 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--g-r-pill);
  background:
    radial-gradient(130% 190% at 12% 0%, rgba(255, 241, 217, 0.5), transparent 58%),
    var(--g-sheen),
    linear-gradient(180deg, rgb(var(--g-tint) / 0.7), rgb(var(--g-tint-2) / 0.56));
  box-shadow: var(--g-rim), 0 18px 40px -30px rgba(21, 26, 23, 0.5);
  -webkit-backdrop-filter: blur(var(--g-blur-lg)) saturate(1.85) brightness(1.05);
  backdrop-filter: blur(var(--g-blur-lg)) saturate(1.85) brightness(1.05);
  color: inherit;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

/* ---------------------------------------------------------- condensed state */
header.nav[data-nav].is-condensed .nav__inner {
  padding: 0 var(--pad);
}

header.nav[data-nav].is-condensed .brand {
  padding: 5px;
}

header.nav[data-nav].is-condensed .brand__text {
  max-width: 0;
  opacity: 0;
  transform: translateX(-4px);
}

header.nav[data-nav].is-condensed .nav__links {
  width: 0;
  padding: 0;
  border-width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

header.nav[data-nav].is-condensed .nav__now {
  display: inline-flex;
}

/* ------------------------------------------------------------ smoked state */
header.nav[data-nav].is-over-dark :is(.brand, .nav__links, .nav__tools) {
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(247, 243, 234, 0.94);
  background:
    radial-gradient(130% 190% at 12% 0%, rgba(255, 232, 198, 0.14), transparent 56%),
    var(--g-sheen),
    linear-gradient(180deg, rgba(30, 33, 28, 0.62), rgba(18, 21, 18, 0.5));
  box-shadow: var(--g-rim-dark), 0 22px 48px -30px rgba(0, 0, 0, 0.6);
}

header.nav[data-nav].is-over-dark .nav__now {
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(247, 243, 234, 0.94);
  background:
    var(--g-sheen),
    linear-gradient(180deg, rgba(30, 33, 28, 0.72), rgba(18, 21, 18, 0.62));
  box-shadow: var(--g-rim-dark), 0 22px 48px -30px rgba(0, 0, 0, 0.6);
}

header.nav[data-nav].is-over-dark .nav__links a:hover,
header.nav[data-nav].is-over-dark .nav__tools :is(.icon-btn, .nav__burger):hover {
  background: rgba(255, 255, 255, 0.12);
}

header.nav[data-nav].is-over-dark .nav__links a.is-active {
  background: rgba(247, 243, 234, 0.94);
  color: rgb(var(--g-ink));
}

/* --------------------------------------------------------------- responsive */
@media (max-width: 930px) {
  header.nav[data-nav] .nav__inner {
    grid-template-columns: auto 1fr auto;
    height: 52px;
    gap: 8px;
  }

  header.nav[data-nav] .nav__links {
    display: none;
  }

  header.nav[data-nav].is-condensed .nav__now {
    display: inline-flex;
  }

  header.nav[data-nav] .brand,
  header.nav[data-nav] .nav__tools {
    height: 50px;
  }

  header.nav[data-nav] .nav__now {
    height: 50px;
  }
}

@media (max-width: 560px) {
  header.nav[data-nav] .nav__inner {
    height: 48px;
    padding: 0 10px;
    gap: 6px;
  }

  header.nav[data-nav] .brand {
    padding: 4px 14px 4px 4px;
    gap: 8px;
  }

  header.nav[data-nav] .brand__name {
    font-size: 15px;
  }

  header.nav[data-nav] .nav__tools {
    padding: 4px;
  }

  header.nav[data-nav] .nav__tools :is(.icon-btn, .nav__burger) {
    width: 38px;
    height: 38px;
  }

  header.nav[data-nav] .brand,
  header.nav[data-nav] .nav__tools,
  header.nav[data-nav] .nav__now {
    height: 46px;
  }
}

/* --------------------------------------------------------------- fallbacks */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  header.nav[data-nav] :is(.brand, .nav__links, .nav__tools),
  header.nav[data-nav] .nav__now {
    background:
      var(--g-warmth),
      linear-gradient(180deg, rgb(var(--g-tint) / 0.94), rgb(var(--g-tint-2) / 0.88));
  }

  header.nav[data-nav].is-over-dark :is(.brand, .nav__links, .nav__tools),
  header.nav[data-nav].is-over-dark .nav__now {
    background: linear-gradient(180deg, rgba(24, 27, 23, 0.94), rgba(16, 19, 16, 0.9));
  }
}

@media (prefers-reduced-motion: reduce) {
  header.nav[data-nav] :is(.brand, .nav__links, .nav__tools, .nav__now, .brand__text),
  header.nav[data-nav] .nav__links a,
  header.nav[data-nav] .nav__tools :is(.icon-btn, .nav__burger) {
    transition: none;
  }
}

@media print {
  header.nav[data-nav] :is(.brand, .nav__links, .nav__tools),
  header.nav[data-nav] .nav__now {
    background: #fff;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: #111;
  }
}

/* ------------------------------------------------- split-bar fixups */
/* The legacy band forced a 60px min-height on the brand; the islands share height. */
header.nav[data-nav] .brand {
  min-height: 0;
  height: 52px;
}

header.nav[data-nav] .nav__tools {
  min-height: 0;
}

@media (max-width: 930px) {
  header.nav[data-nav] .brand {
    height: 50px;
  }
}

@media (max-width: 560px) {
  header.nav[data-nav] .brand {
    height: 46px;
  }
}

/* The strip is now just a transparent rail — remove the old capsule layer and
   its scrolled/condensed/dark variants so only the three islands carry glass. */
header.nav[data-nav] .nav__inner,
header.nav[data-nav].is-scrolled .nav__inner,
header.nav[data-nav].is-condensed .nav__inner,
header.nav[data-nav].nav--solid .nav__inner,
header.nav[data-nav].is-over-dark .nav__inner,
header.nav[data-nav].is-over-dark.is-condensed .nav__inner {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ------------------------------------------------- keep the centre open */
/* Scrolling only folds the name island down to its seal. The section links
   keep their place, and the current-section pill is retired. */
header.nav[data-nav].is-condensed .nav__inner {
  gap: 10px;
  padding: 0 var(--pad);
}

header.nav[data-nav].is-condensed .nav__links {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 5px;
  border-width: 1px;
  opacity: 1;
  overflow: visible;
  transform: none;
  pointer-events: auto;
}

/* The shell is sized by its padding instead of a hard width: the seal stays
   anchored while the text folds away, so it never slides left before settling. */
header.nav[data-nav].is-condensed .brand {
  padding: 0 9px;
  gap: 0;
  overflow: hidden;
  justify-content: flex-start;
}

header.nav[data-nav].is-condensed .brand__text {
  max-width: 0;
  opacity: 0;
  transform: translateX(-4px);
}

header.nav[data-nav].is-condensed .nav__now {
  display: none;
}

@media (max-width: 930px) {
  header.nav[data-nav].is-condensed .brand {
    padding: 0 8px;
  }
}

@media (max-width: 560px) {
  header.nav[data-nav].is-condensed .brand {
    padding: 0 6px;
  }
}

/* ==========================================================================
   16. Pointer light — a small specular that follows the pointer
   ==========================================================================
   Only the island under the cursor carries a light: a tight glint with a
   short warm halo, both centred on the pointer. There is deliberately no
   panel-wide sheen, so a lit island never washes light across its middle.
   Decoration only: pointer events pass through; touch / reduced motion /
   print skip it. */

header.nav[data-nav] :is(.brand, .nav__links, .nav__tools) {
  --plx: 50%;
  --ply: 40%;
  --pl-on: 0;
}

header.nav[data-nav] :is(.brand, .nav__links, .nav__tools) .nav__light {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--pl-on, 0);
  background:
    radial-gradient(
      78px circle at var(--plx, 50%) var(--ply, 40%),
      rgba(255, 255, 255, 0.7),
      rgba(255, 250, 238, 0.28) 46%,
      transparent 74%
    ),
    radial-gradient(
      150px circle at var(--plx, 50%) var(--ply, 40%),
      rgba(255, 241, 214, 0.2),
      transparent 70%
    );
  mix-blend-mode: screen;
}

/* text and controls stay above the specular */
header.nav[data-nav] :is(.brand, .nav__links, .nav__tools) > :not(.nav__light) {
  position: relative;
  z-index: 3;
}

/* smoked islands catch a warmer, softer light */
header.nav[data-nav].is-over-dark :is(.brand, .nav__links, .nav__tools) .nav__light {
  background:
    radial-gradient(
      86px circle at var(--plx, 50%) var(--ply, 40%),
      rgba(255, 244, 224, 0.36),
      rgba(255, 226, 182, 0.14) 48%,
      transparent 76%
    ),
    radial-gradient(
      160px circle at var(--plx, 50%) var(--ply, 40%),
      rgba(255, 214, 156, 0.14),
      transparent 70%
    );
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  header.nav[data-nav] :is(.brand, .nav__links, .nav__tools) .nav__light {
    display: none;
  }
}

@media print {
  header.nav[data-nav] .nav__light {
    display: none !important;
  }
}

/* ==========================================================================
   17. Edition labels — text fit inside the small glass pills
   ==========================================================================
   The two hero labels ("青年文化调研 / 始于 2016" and "FIELD NOTES — VOL.
   018") became glass pills, but their base rule only set flex alignment: the
   text touched the rounded corners. Give the pills a vertical rhythm and
   horizontal air that scales with the viewport. */

body.atelier-home .field-cover__edition {
  align-items: center;
  gap: clamp(10px, 1.8vw, 24px);
}

body.atelier-home .field-cover__edition > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 28px;
  padding: 7px 14px;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.09em;
  border-radius: var(--g-r-pill);
}

body.atelier-home .field-cover__edition > span:first-child {
  gap: 8px;
  padding-left: 13px;
}

body.atelier-home .field-cover__edition > span:last-child {
  padding: 7px 15px;
  letter-spacing: 0.12em;
}

body.atelier-home .field-cover__edition .live-dot {
  flex: 0 0 auto;
  margin: 0;
}

@media (max-width: 760px) {
  body.atelier-home .field-cover__edition {
    gap: 8px;
  }

  body.atelier-home .field-cover__edition > span {
    min-height: 24px;
    padding: 5px 10px;
    gap: 6px;
    font-size: 8px;
    letter-spacing: 0.05em;
  }

  body.atelier-home .field-cover__edition > span:first-child {
    padding-left: 9px;
  }

  body.atelier-home .field-cover__edition > span:last-child {
    padding: 5px 10px;
    font-size: 7.5px;
    letter-spacing: 0.08em;
  }
}

@media (max-width: 420px) {
  body.atelier-home .field-cover__edition > span {
    min-height: 22px;
    padding: 4px 8px;
    font-size: 7.5px;
  }

  body.atelier-home .field-cover__edition > span:last-child {
    font-size: 7px;
    padding: 4px 8px;
  }
}

/* ==========================================================================
   18. Hero photograph — round the picture, not its stage
   ==========================================================================
   The rounding pass had added `overflow: hidden` + a 28px radius to
   `.home-carousel__stage`. The stage is a layout wrapper that also carries the
   circular "在场" stamp (which intentionally overhangs the photo's top-left
   corner) and the vertical gutter label, so clipping the stage chopped the
   stamp and crowded the label into the corner curve. Keep the soft corner on
   the photo itself; let the stage stay an unclipped canvas. */

body.atelier-home .home-carousel__stage {
  border-radius: 0;
  overflow: visible;
}

body.atelier-home .field-cover__visual {
  border-radius: 0;
}

body.atelier-home .field-cover__photo {
  border-radius: var(--g-r-lg);
  overflow: hidden;
}

body.atelier-home .field-cover__stamp {
  z-index: 6;
}

body.atelier-home .field-cover__vertical {
  top: 9px;
  right: 3px;
  z-index: 6;
}

@media (max-width: 760px) {
  body.atelier-home .field-cover__vertical {
    top: 7px;
    right: 2px;
  }
}

/* ==========================================================================
   19. Hero carousel stage — one rim only, on the picture itself
   ==========================================================================
   The photographic-surface pass copied the picture's rim shadow onto
   `.home-carousel__stage` as well. The stage is 28px wider than the photo
   (its right side is the vertical-label gutter) and no longer clipped, so the
   stage's own 1px inner rim drew a faint rectangle floating around the photo.
   The photo keeps its rim; the stage goes flat. */

body.atelier-home .home-carousel__stage {
  box-shadow: none;
}

/* ==========================================================================
   20. Hero cover photo — the picture sits under a pane of glass
   ==========================================================================
   No mount, no mat: the photograph runs edge to edge in a rounded frame and
   the glass lives in the light — one bright specular along the top edge, a
   soft reflection drifting across the surface, shaded inner edges where the
   material thickens, and a deep, quiet drop shadow that lifts it off paper. */

body.atelier-home .field-cover__photo {
  --g-photo-r: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--g-photo-r);
  overflow: hidden;
  background: #0c0f0d;
  box-shadow:
    0 0 0 1px rgba(21, 26, 23, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(255, 255, 255, 0.48),
    inset 0 22px 34px -26px rgba(10, 14, 12, 0.58),
    inset 0 -18px 26px -22px rgba(10, 14, 12, 0.5),
    0 2px 4px -2px rgba(21, 26, 23, 0.16),
    0 30px 64px -36px rgba(21, 26, 23, 0.55);
}

body.atelier-home .field-cover__photo > img {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

body.atelier-home .field-cover__photo figcaption {
  inset: auto 19px 16px;
}

body.atelier-home .field-cover__photo::after {
  inset: 62% 0 0;
  border-radius: 0 0 calc(var(--g-photo-r) - 2px) calc(var(--g-photo-r) - 2px);
}

body.atelier-home .field-cover__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(116deg,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.03) 17%,
      rgba(255, 255, 255, 0) 33%,
      rgba(255, 255, 255, 0.07) 56%,
      rgba(255, 255, 255, 0) 70%,
      rgba(255, 255, 255, 0.13) 100%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0) 10%,
      rgba(10, 14, 12, 0) 84%,
      rgba(10, 14, 12, 0.16));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

@media (max-width: 760px) {
  body.atelier-home .field-cover__photo {
    --g-photo-r: 24px;
  }

  body.atelier-home .field-cover__photo figcaption {
    inset: auto 13px 12px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  body.atelier-home .field-cover__photo::before {
    background:
      linear-gradient(180deg,
        rgba(255, 255, 255, 0.14),
        rgba(255, 255, 255, 0) 10%,
        rgba(10, 14, 12, 0) 84%,
        rgba(10, 14, 12, 0.16));
  }
}

/* ==========================================================================
   21. Hero caption — a small glass tag, set off the corner of the picture
   ==========================================================================
   The v2 layer let the caption stretch almost the full width of the photo,
   so the text sat right on its own border and the tag's corners crowded the
   rounded corner of the picture. Here it becomes a compact tag: it hugs its
   two lines, keeps a comfortable inset, and its corner clears the frame. */

body.atelier-home .home-carousel .field-cover__photo figcaption {
  inset: auto auto 22px 22px;
  right: auto;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  inline-size: max-content;
  max-inline-size: min(62%, 400px);
  padding: 11px 15px 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 15px;
  color: rgba(247, 243, 234, 0.96);
  background: linear-gradient(180deg, rgba(20, 24, 20, 0.72), rgba(12, 15, 13, 0.6));
  box-shadow:
    0 10px 26px -20px rgba(0, 0, 0, 0.75),
    0 1px 0 0 rgba(255, 255, 255, 0.12) inset;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.atelier-home .home-carousel .field-cover__photo figcaption > span {
  display: block;
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

body.atelier-home .home-carousel .field-cover__photo figcaption > span[data-carousel-caption-left] {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

body.atelier-home .home-carousel .field-cover__photo figcaption > span[data-carousel-caption-right] {
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: 0.14em;
  color: rgba(247, 243, 234, 0.72);
}

body.atelier-home .home-carousel .field-cover__photo:hover figcaption {
  -webkit-backdrop-filter: blur(14px) saturate(1.4) brightness(1.02);
  backdrop-filter: blur(14px) saturate(1.4) brightness(1.02);
}

@media (max-width: 760px) {
  body.atelier-home .home-carousel .field-cover__photo figcaption {
    inset: auto auto 15px 15px;
    max-inline-size: min(76%, 290px);
    padding: 9px 12px 10px;
    border-radius: 13px;
  }

  body.atelier-home .home-carousel .field-cover__photo figcaption > span[data-carousel-caption-left] {
    font-size: 11.5px;
  }

  body.atelier-home .home-carousel .field-cover__photo figcaption > span[data-carousel-caption-right] {
    font-size: 9px;
    letter-spacing: 0.12em;
  }
}

@media (prefers-reduced-transparency: reduce) {
  body.atelier-home .home-carousel .field-cover__photo figcaption {
    background: rgb(18, 22, 18);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* 22. Nav: a smoked state that arrives gradually ------------------------------
   The legacy `.is-over-dark` block swapped the whole island material at once,
   which read as a hard cut against a photo. The islands now keep their base
   material and paint a separate shade layer whose opacity comes from
   `--nav-dark` (0..1, smoothed by nav-island.js); text, edges, hover and the
   active pill are interpolated from the same number, so the glass keeps the
   colour of whatever it is drifting over instead of turning flat grey. */
header.nav[data-nav] :is(.brand, .nav__links, .nav__tools) > .nav__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 1;
  background: rgba(16, 19, 16, 0);
}

/* the islands: same base material in both states, only the edges and ink move */
header.nav[data-nav] :is(.brand, .nav__links, .nav__tools) {
  border-color: var(--nav-edge, rgba(255, 255, 255, 0.5));
  color: var(--nav-ink, rgba(21, 26, 23, 0.88));
}

header.nav[data-nav].is-over-dark :is(.brand, .nav__links, .nav__tools) {
  border-color: var(--nav-edge, rgba(255, 255, 255, 0.22));
  color: var(--nav-ink, rgba(247, 243, 234, 0.94));
  box-shadow:
    var(--g-rim),
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 2px 3px rgba(21, 26, 23, 0.06),
    0 22px 44px -30px rgba(8, 11, 8, 0.6);
}

header.nav[data-nav].is-over-dark .nav__inner {
  color: var(--nav-ink, rgba(247, 243, 234, 0.94));
  border-color: transparent;
  background: none;
  box-shadow: none;
}

header.nav[data-nav].is-over-dark :is(.nav__links a, .brand__name, .brand__latin, .nav__now) {
  color: var(--nav-ink, rgba(247, 243, 234, 0.94));
}

header.nav[data-nav].is-over-dark :is(.nav__links a, .brand__name, .brand__latin, .nav__now, .icon-btn, .nav__burger) {
  text-shadow: 0 1px 14px rgb(6 9 7 / calc(var(--nav-dark, 0) * 0.6));
}

header.nav[data-nav].is-over-dark :is(.icon-btn, .nav__burger) {
  color: var(--nav-ink, rgba(247, 243, 234, 0.94));
  border-color: transparent;
  background: transparent;
}

header.nav[data-nav].is-over-dark .nav__now {
  border-color: var(--nav-edge, rgba(255, 255, 255, 0.22));
  color: var(--nav-ink, rgba(247, 243, 234, 0.94));
  background:
    radial-gradient(130% 190% at 12% 0%, rgba(255, 236, 205, 0.22), transparent 58%),
    var(--g-sheen),
    linear-gradient(180deg, rgb(30 34 28 / 0.18), rgb(16 19 16 / 0.14));
  box-shadow: var(--g-rim), 0 22px 44px -30px rgba(8, 11, 8, 0.6);
}

header.nav[data-nav].is-over-dark .nav__links a:hover,
header.nav[data-nav].is-over-dark .nav__tools :is(.icon-btn, .nav__burger):hover {
  background: var(--nav-hover, rgba(255, 255, 255, 0.12));
}

header.nav[data-nav] .nav__links a.is-active {
  background: var(--nav-active-bg, rgba(255, 255, 255, 0.66));
  color: var(--nav-active-ink, rgb(21, 26, 23));
}

header.nav[data-nav].is-over-dark .nav__links a.is-active {
  background: var(--nav-active-bg, rgba(247, 243, 234, 0.94));
  color: var(--nav-active-ink, rgb(21, 26, 23));
}

header.nav[data-nav].is-over-dark :is(.brand, .nav__links, .nav__tools) .nav__light {
  background:
    radial-gradient(78px circle at var(--plx, 50%) var(--ply, 40%), rgba(255, 255, 255, 0.7), rgba(255, 250, 238, 0.28) 46%, transparent 74%),
    radial-gradient(150px circle at var(--plx, 50%) var(--ply, 40%), rgba(255, 241, 214, 0.2), transparent 70%);
}

/* the engraved seal is ink-coloured; lift it as the glass darkens */
header.nav[data-nav] :is(.brand__seal, .brand__seal--image) img {
  filter: invert(var(--nav-seal-invert, 0));
}

header.nav[data-nav] .nav__light {
  z-index: 2;
}

@media print {
  header.nav[data-nav] :is(.brand, .nav__links, .nav__tools) > .nav__shade {
    display: none;
  }
}

/* ---- 23. Island-by-island smoked glass -----------------------------------
   The cream face of each island now lives in a .nav__frost layer that fades
   out island by island, while .nav__shade fades in. Because both are driven
   by the island's own --nav-dark, a bar that spans paper and a photograph
   turns dark only under the photograph, and the change is continuous.
   ------------------------------------------------------------------------- */
header.nav[data-nav] :is(.brand, .nav__links, .nav__tools) {
  background: none;
}

header.nav[data-nav].is-over-dark :is(.brand, .nav__links, .nav__tools) {
  background: none;
}

header.nav[data-nav] :is(.brand, .nav__links, .nav__tools) > .nav__frost {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 1;
  background:
    radial-gradient(130% 190% at 12% 0%, rgba(255, 241, 217, 0.5), transparent 58%),
    radial-gradient(120% 160% at 96% 100%, rgba(150, 172, 148, 0.12), transparent 60%),
    var(--g-sheen),
    linear-gradient(180deg, rgb(var(--g-tint) / 0.6), rgb(var(--g-tint-2) / 0.44));
}

header.nav[data-nav] :is(.brand, .nav__links, .nav__tools) > .nav__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 1;
  background: rgba(16, 19, 16, 0);
}

header.nav[data-nav] :is(.brand, .nav__links, .nav__tools) > :is(.nav__frost, .nav__shade) {
  position: absolute;
  z-index: 0;
}

header.nav[data-nav] :is(.brand, .nav__links, .nav__tools) > .nav__shade {
  z-index: 1;
}

/* ==========================================================================
   24. The story link rides in the photograph's top-right corner
   ========================================================================== */

body.atelier-home .home-carousel__story {
  position: absolute;
  top: 18px;
  right: calc(28px + 18px);
  z-index: 8;
  margin-top: 0;
  flex-basis: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 15px;
  border-radius: var(--g-r-pill);
  border: 1px solid rgba(255, 255, 255, 0.62);
  background:
    var(--g-sheen),
    linear-gradient(180deg, rgba(250, 247, 240, 0.66), rgba(240, 236, 225, 0.44));
  -webkit-backdrop-filter: blur(16px) saturate(1.7) brightness(1.04);
  backdrop-filter: blur(16px) saturate(1.7) brightness(1.04);
  color: var(--g-ink);
  font-size: 11px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 14px 30px -22px rgba(21, 26, 23, 0.6);
  transition: color 0.35s var(--ease), background-color 0.35s var(--ease);
}

body.atelier-home .home-carousel__story span {
  font-size: 13px;
}

body.atelier-home .home-carousel__story:hover {
  color: rgb(var(--g-ink));
}

@media (max-width: 930px) {
  body.atelier-home .home-carousel__story {
    top: 11px;
    right: calc(17px + 11px);
    padding: 6px 11px;
    gap: 8px;
    font-size: 9px;
  }

  body.atelier-home .home-carousel__story span {
    font-size: 11px;
  }
}

/* ============================================================
   25. Hero: the tally strip takes the empty seat under the copy
   ============================================================ */

body.atelier-home .field-cover__copy > .field-cover__bottom {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-areas:
    "one two empty"
    "range range empty";
  align-items: baseline;
  column-gap: 26px;
  row-gap: 8px;
  width: 100%;
  margin-top: 22px;
  padding: 15px 0 0;
  border-top: 1px solid var(--g-line-soft, rgba(21, 26, 23, 0.12));
}

body.atelier-home .field-cover__copy > .field-cover__bottom > a:nth-child(1) {
  grid-area: one;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

body.atelier-home .field-cover__copy > .field-cover__bottom > a:nth-child(2) {
  grid-area: two;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

body.atelier-home .field-cover__copy > .field-cover__bottom b {
  font-size: 30px;
  line-height: 0.95;
  letter-spacing: -0.02em;
}

body.atelier-home .field-cover__copy > .field-cover__bottom > a > span {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

body.atelier-home .field-cover__copy > .field-cover__bottom .field-cover__range {
  grid-area: range;
  align-self: end;
  text-align: left;
  font-size: 8.8px;
  line-height: 1.55;
  letter-spacing: 0.16em;
  color: var(--g-ink-soft, rgba(21, 26, 23, 0.56));
}

body.atelier-home .field-cover__copy > .field-cover__bottom .field-cover__range small {
  font-size: 8.2px;
  letter-spacing: 0.12em;
}

@media (max-width: 700px) {
  body.atelier-home .field-cover__copy > .field-cover__bottom {
    column-gap: 18px;
    margin-top: 18px;
    padding-top: 13px;
  }
  body.atelier-home .field-cover__copy > .field-cover__bottom b {
    font-size: 26px;
  }
  body.atelier-home .field-cover__copy > .field-cover__bottom > a > span {
    font-size: 9px;
  }
}

@media (max-width: 430px) {
  body.atelier-home .field-cover__copy > .field-cover__bottom b {
    font-size: 23px;
  }
}

/* ============================================================
   26. Manifesto: the three snapshots get one quiet print frame
   ============================================================ */

body.atelier-home .field-manifesto__snapshot {
  padding: 9px 9px 0;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.66);
  background: linear-gradient(180deg, rgba(252, 250, 245, 0.93), rgba(247, 243, 234, 0.87));
  -webkit-backdrop-filter: blur(10px) saturate(1.5);
  backdrop-filter: blur(10px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 12px 32px -20px rgba(21, 26, 23, 0.5),
    0 0 28px -16px rgba(240, 246, 226, 0.55);
}

body.atelier-home .field-manifesto__snapshot img {
  border-radius: 9px;
}

body.atelier-home .field-manifesto__snapshot figcaption {
  padding: 10px 3px 12px;
}

@media (max-width: 700px) {
  body.atelier-home .field-manifesto__snapshot {
    padding: 6px 6px 0;
    border-radius: 14px;
  }
  body.atelier-home .field-manifesto__snapshot img {
    border-radius: 8px;
  }
  body.atelier-home .field-manifesto__snapshot figcaption {
    padding: 7px 2px 9px;
  }
}

/* ==========================================================================
   27. 期次索引（首页 · 行走档案）：去掉左侧竖条，透明玻璃 + 指针光
   ========================================================================== */

body.atelier-home .exp-tab.is-selected::before { content: none; }

@media (max-width: 800px) {
  body.atelier-home .exp-tab > span {
    font-size: 7px;
    letter-spacing: 0;
  }
}

@media (min-width: 801px) {

  body.atelier-home .exp-tab {
    position: relative;
    z-index: 1;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    border: 0;
    border-radius: var(--g-r-pill);
    margin-bottom: 3px;
    padding-inline: 4px;
    background-color: transparent;
    background-image: linear-gradient(90deg, rgba(243, 240, 232, 0.10), rgba(243, 240, 232, 0.10));
    background-repeat: no-repeat;
    background-size: calc(100% - 26px) 1px;
    background-position: 13px bottom;
    box-shadow: none;
    transition: background-color 0.35s var(--g-ease), box-shadow 0.35s var(--g-ease),
      color 0.35s var(--g-ease);
  }
  body.atelier-home .exp-tab:hover {
    color: var(--paper);
    padding-inline: 4px;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body.atelier-home .exp-tab.is-selected {
    color: var(--acid);
    padding-inline: 4px;
    border: 0;
    background:
      radial-gradient(120% 160% at 12% 0%, rgba(220, 234, 179, 0.18), transparent 58%),
      var(--g-sheen),
      linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04));
    box-shadow: 0 20px 44px -32px rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
  }
  body.atelier-home .exp-tab.is-selected::after { opacity: 0; }
  body.atelier-home .exp-tab.is-selected > span { color: var(--acid); }

  body.atelier-home .exp-tab > span {
    grid-column: 1;
    font-family: var(--font-serif);
    font-size: 11px;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  body.atelier-home .exp-tab > b {
    grid-column: 2;
    min-width: 0;
    text-align: center;
  }
  body.atelier-home .exp-tab > small {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    margin-top: 0;
    font-size: 9px;
    letter-spacing: 0.08em;
    color: #9aa492;
    text-align: right;
    white-space: nowrap;
  }
}


/* ============================================================
   29. Atlas: a China map of where the walk has been
   ============================================================ */
body.atelier-home .cn-map {
  position: relative;
  width: 100%;
  max-width: 380px;
  justify-self: end;
  align-self: end;
  margin-bottom: 4px;
}

body.atelier-home .cn-map__label {
  display: block;
  text-align: right;
  font-size: 8px;
  letter-spacing: 0.2em;
  color: rgba(243, 240, 232, 0.42);
  margin-bottom: 6px;
}

body.atelier-home .cn-map__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

body.atelier-home .cn-map__svg path {
  fill: transparent;
  stroke: rgba(243, 240, 232, 0.2);
  stroke-width: 0.9;
  vector-effect: non-scaling-stroke;
  transition: fill 0.5s var(--g-ease), stroke 0.5s var(--g-ease), stroke-width 0.5s var(--g-ease);
}

body.atelier-home .cn-map__svg path.is-visited {
  stroke: rgba(220, 234, 179, 0.5);
}

body.atelier-home .cn-map__svg path:hover {
  fill: rgba(243, 240, 232, 0.16);
  stroke: rgba(243, 240, 232, 0.78);
  stroke-width: 1.1;
}

body.atelier-home .cn-map__svg path.is-visited:hover {
  fill: rgba(220, 234, 179, 0.42);
  stroke: #dceab3;
}

@media (max-width: 800px) {
  body.atelier-home .cn-map {
    grid-column: 1 / -1;
    justify-self: start;
    max-width: 320px;
    margin: 10px 0 16px;
  }

  body.atelier-home .cn-map__label {
    text-align: left;
  }
}


/* ============================================================
   30. Atlas: no XVIII watermark, a bigger map
   ============================================================ */
body.atelier-home .field-atlas::before {
  content: none;
}

body.atelier-home .field-atlas__heading {
  grid-template-columns: 1.15fr 1.55fr 80px;
}

body.atelier-home .cn-map {
  max-width: 640px;
}

@media (max-width: 1100px) {
  body.atelier-home .field-atlas__heading {
    grid-template-columns: 1.2fr 1.35fr 60px;
  }

  body.atelier-home .cn-map {
    max-width: 520px;
  }
}

@media (max-width: 800px) {
  body.atelier-home .cn-map {
    max-width: 360px;
  }
}

/* 31. Atlas: reveal the south, lift the map, centre the title against it */
@media (min-width: 801px) {
  body.atelier-home .field-atlas__heading {
    grid-template-columns: 1.15fr 1.55fr 80px;
    align-items: center;
  }
  body.atelier-home .field-atlas__heading > h2 {
    align-self: center;
    transform: translateY(-26px);
  }
  body.atelier-home .field-atlas__heading > .field-circle {
    align-self: center;
    transform: translateY(-26px);
  }
  body.atelier-home .cn-map {
    justify-self: end;
    transform: translate(-52px, -26px);
  }
}

@media (min-width: 801px) and (max-width: 1100px) {
  body.atelier-home .field-atlas__heading {
    grid-template-columns: 1.2fr 1.35fr 60px;
  }
  body.atelier-home .cn-map {
    max-width: 520px;
    transform: translate(-28px, -18px);
  }
  body.atelier-home .field-atlas__heading > h2,
  body.atelier-home .field-atlas__heading > .field-circle {
    transform: translateY(-18px);
  }
}

@media (max-width: 800px) {
  body.atelier-home .cn-map {
    max-width: 360px;
    transform: none;
  }
}

/* ==========================================================================
   32. Atlas: the expedition note rides inside its own picture
   ========================================================================== */
@media (min-width: 801px) {
  body.atelier-home .exp-detail { position: relative; }

  body.atelier-home .exp-detail::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: min(70%, 500px);
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(
      180deg,
      rgba(8, 12, 9, 0) 0%,
      rgba(8, 12, 9, 0.34) 20%,
      rgba(8, 12, 9, 0.78) 45%,
      rgba(8, 12, 9, 0.93) 65%,
      rgba(8, 12, 9, 0.96) 85%,
      rgba(8, 12, 9, 0.97) 100%
    );
  }

  body.atelier-home .exp-detail__image > i {
    top: 22px;
    right: 22px;
    bottom: auto;
  }

  body.atelier-home .exp-detail__copy {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 78px;
    z-index: 3;
    margin: 0;
    padding: 0 34px 14px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 26px;
    align-items: end;
    pointer-events: none;
  }

  body.atelier-home .exp-detail__copy a { pointer-events: auto; }

  body.atelier-home .exp-detail__copy .field-label {
    color: rgba(243, 240, 232, 0.66);
    text-shadow: 0 1px 10px rgba(4, 7, 5, 0.85);
  }

  body.atelier-home .exp-detail h3 {
    color: var(--paper);
    font-size: 34px;
    margin-block: 10px 8px;
    text-shadow: 0 2px 20px rgba(4, 7, 5, 0.72);
  }

  body.atelier-home .exp-detail__copy [data-exp-lead] {
    color: rgba(243, 240, 232, 0.78);
    text-shadow: 0 1px 12px rgba(4, 7, 5, 0.85);
    font-size: 12px;
    max-width: 46em;
  }

  body.atelier-home .exp-detail__archive {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(220, 234, 179, 0.42);
    color: rgb(220 234 179);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-decoration: none;
  }

  body.atelier-home .exp-detail__copy .field-text-link {
    color: rgb(220 234 179);
    margin: 0 0 4px;
    font-size: 9px;
  }

  body.atelier-home .field-atlas__foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    margin: 0;
    padding: 13px 34px 20px;
    border-top: 1px solid rgba(243, 240, 232, 0.16);
    color: rgba(243, 240, 232, 0.64);
    font-size: 9px;
    gap: 18px;
    align-items: center;
  }

  body.atelier-home .field-atlas__foot > a {
    color: rgb(220 234 179);
    font-size: 9px;
    letter-spacing: 0.06em;
  }
}
/* ==========================================================================
   33. Ink-paper canvas — one moving backdrop for the whole site
   ========================================================================== */

:root {
  --canvas-paper: #f4f0e6;
  --canvas-paper-deep: #e7e4d5;
  --canvas-ink: #12160f;
  --canvas-ink-deep: #0a0d09;
  --canvas-haze: rgba(255, 252, 244, 0.42);
  --canvas-mist: rgba(148, 160, 146, 0.24);
  --canvas-mist-deep: rgba(100, 112, 98, 0.22);
  --canvas-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* Paper: warm strata + two slowly drifting veils, grain fixed under everything. */
html {
  background-color: var(--canvas-paper);
  background-image:
    var(--canvas-grain),
    radial-gradient(120% 90% at 50% -12%, rgba(255, 253, 247, 0.80) 0%, rgba(255, 253, 247, 0) 55%),
    linear-gradient(180deg, var(--canvas-paper) 0%, var(--canvas-paper-deep) 100%);
  background-size: 160px 160px, cover, cover;
  background-attachment: fixed, fixed, fixed;
}

html::before,
html::after {
  content: "";
  position: fixed;
  inset: -14%;
  z-index: -2;
  pointer-events: none;
  will-change: transform;
}

html::before {
  background:
    radial-gradient(42% 30% at 22% 26%, var(--canvas-haze) 0%, transparent 62%),
    radial-gradient(38% 26% at 76% 18%, rgba(255, 253, 247, 0.38) 0%, transparent 60%),
    radial-gradient(36% 24% at 60% 60%, rgba(255, 254, 249, 0.28) 0%, transparent 58%);
  animation: canvasDriftA 44s ease-in-out infinite alternate;
}

html::after {
  background:
    radial-gradient(40% 28% at 28% 74%, var(--canvas-mist) 0%, transparent 62%),
    radial-gradient(34% 22% at 82% 64%, var(--canvas-mist-deep) 0%, transparent 60%),
    radial-gradient(46% 30% at 56% 104%, rgba(120, 132, 118, 0.22) 0%, transparent 66%);
  animation: canvasDriftB 38s ease-in-out infinite alternate;
}

body.atelier-site {
  background-color: transparent;
  background-image: none;
}

@keyframes canvasDriftA {
  from { transform: translate3d(-1.6%, -1.1%, 0) scale(1.02); }
  to   { transform: translate3d(1.8%, 1.4%, 0) scale(1.05); }
}

@keyframes canvasDriftB {
  from { transform: translate3d(1.7%, 1.2%, 0) scale(1.03); }
  to   { transform: translate3d(-1.9%, -1.6%, 0) scale(1.06); }
}

/* Dark blocks: ink washes that arrive and leave through transparency, so the
   edge meets whatever sits next to it — paper, red or another ink band. */
body.atelier-home .field-atlas {
  position: relative;
  background-color: transparent;
  background-image:
    radial-gradient(84% 56% at 12% 6%, rgba(96, 112, 86, 0.24) 0%, rgba(18, 22, 15, 0) 58%),
    radial-gradient(74% 50% at 86% 16%, rgba(54, 66, 48, 0.30) 0%, rgba(18, 22, 15, 0) 60%),
    linear-gradient(180deg,
      rgba(18, 22, 15, 0) 0px,
      var(--canvas-ink) 132px,
      #14190f 46%,
      var(--canvas-ink-deep) calc(100% - 108px),
      rgba(18, 22, 15, 0) 100%);
  background-repeat: no-repeat;
  background-size: cover;
}

body[data-page="gallery"] .phero,
body[data-page="projects"] .phero {
  position: relative;
  background-color: transparent;
  background-image:
    radial-gradient(84% 56% at 16% 0%, rgba(96, 112, 86, 0.20) 0%, rgba(18, 22, 15, 0) 58%),
    radial-gradient(70% 50% at 84% 20%, rgba(48, 60, 42, 0.28) 0%, rgba(18, 22, 15, 0) 60%),
    linear-gradient(180deg,
      var(--canvas-ink) 0%,
      #171c15 34%,
      var(--canvas-ink) 68%,
      var(--canvas-ink-deep) calc(100% - 96px),
      rgba(18, 22, 15, 0) 100%);
  background-repeat: no-repeat;
  background-size: cover;
}

body[data-page="gallery"] .phero::before,
body[data-page="projects"] .phero::before {
  content: "";
  position: absolute;
  inset: -8% -4%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(34% 24% at 30% 60%, rgba(214, 224, 196, 0.10) 0%, transparent 60%),
    radial-gradient(28% 20% at 72% 42%, rgba(150, 166, 140, 0.10) 0%, transparent 58%);
  animation: inkBreath 52s ease-in-out infinite alternate;
}

@keyframes inkBreath {
  from { transform: translate3d(-1.4%, 1%, 0) scale(1.02); opacity: 0.5; }
  to   { transform: translate3d(1.6%, -1.2%, 0) scale(1.06); opacity: 0.85; }
}

/* Ink band with paper above (masonry, contact CTA) keeps its lower edge solid. */
body[data-page="gallery"] .section:has(.masonry),
body[data-page="contact"] #join {
  position: relative;
  background-color: transparent;
  background-image:
    radial-gradient(80% 54% at 14% 0%, rgba(92, 108, 84, 0.20) 0%, rgba(18, 22, 15, 0) 60%),
    linear-gradient(180deg,
      rgba(18, 22, 15, 0) 0px,
      var(--canvas-ink) 96px,
      var(--canvas-ink-deep) 100%);
  background-repeat: no-repeat;
  background-size: cover;
}

/* Footer: ink arrives from whichever band precedes it. */
body.atelier-site .footer {
  position: relative;
  background-color: transparent;
  background-image:
    radial-gradient(80% 54% at 12% 0%, rgba(92, 108, 84, 0.18) 0%, rgba(18, 22, 15, 0) 60%),
    linear-gradient(180deg,
      rgba(18, 22, 15, 0) 0px,
      var(--canvas-ink) 104px,
      var(--canvas-ink-deep) 100%);
  background-repeat: no-repeat;
  background-size: cover;
}

/* Gallery: masonry above the footer is already ink, so the seam stays ink. */
body[data-page="gallery"] .footer {
  background-image:
    radial-gradient(80% 54% at 12% 10%, rgba(92, 108, 84, 0.16) 0%, rgba(18, 22, 15, 0) 60%),
    linear-gradient(180deg, var(--canvas-ink) 0%, var(--canvas-ink-deep) 100%);
}

body.atelier-site .drawer {
  background-color: var(--canvas-ink);
  background-image:
    radial-gradient(120% 80% at 12% 0%, rgba(92, 108, 84, 0.22) 0%, rgba(18, 22, 15, 0) 60%),
    radial-gradient(90% 70% at 86% 16%, rgba(48, 60, 44, 0.26) 0%, rgba(18, 22, 15, 0) 62%),
    linear-gradient(180deg, #171c15 0%, var(--canvas-ink-deep) 100%);
}

@media (prefers-reduced-motion: reduce) {
  html::before,
  html::after,
  body[data-page="gallery"] .phero::before,
  body[data-page="projects"] .phero::before {
    animation: none;
  }
}

/* Night paper: same layers, deeper ink. Explicit toggle only. */
html[data-theme="dark"] {
    --canvas-paper: #171b14;
    --canvas-paper-deep: #0f130d;
    --canvas-ink: #0b0f09;
    --canvas-ink-deep: #060906;
    --canvas-haze: rgba(214, 224, 196, 0.10);
    --canvas-mist: rgba(120, 138, 114, 0.18);
    --canvas-mist-deep: rgba(72, 86, 66, 0.24);
    --paper: #171b14;
    --ink: #ece7d7;
    --atelier-line: rgba(236, 231, 215, 0.20);
    --atlas-ink: #0a0d09;
    --atlas-paper: #ece7d7;
    --muted: rgba(236, 231, 215, 0.62);
    --muted-2: rgba(236, 231, 215, 0.50);
    --canvas-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
  }

html[data-theme="dark"] {
    background-image:
      var(--canvas-grain),
      radial-gradient(120% 90% at 50% -12%, rgba(236, 231, 215, 0.06) 0%, rgba(236, 231, 215, 0) 55%),
      linear-gradient(180deg, #1b2018 0%, var(--canvas-paper) 34%, var(--canvas-paper-deep) 100%);
  }

html[data-theme="dark"]::before {
    background:
      radial-gradient(42% 30% at 22% 26%, rgba(214, 224, 196, 0.020) 0%, transparent 62%),
      radial-gradient(38% 26% at 76% 18%, rgba(236, 231, 215, 0.016) 0%, transparent 60%),
      radial-gradient(36% 24% at 60% 60%, rgba(236, 231, 215, 0.012) 0%, transparent 58%);
  }

html[data-theme="dark"]::after {
    background:
      radial-gradient(40% 28% at 28% 74%, rgba(120, 138, 114, 0.040) 0%, transparent 62%),
      radial-gradient(34% 22% at 82% 64%, rgba(72, 86, 66, 0.040) 0%, transparent 60%),
      radial-gradient(46% 30% at 56% 104%, rgba(90, 104, 84, 0.035) 0%, transparent 66%);
  }

html[data-theme="dark"] body.atelier-home .field-atlas {
    background-image:
      radial-gradient(84% 56% at 12% 6%, rgba(78, 94, 70, 0.20) 0%, rgba(11, 15, 9, 0) 58%),
      radial-gradient(74% 50% at 86% 16%, rgba(36, 46, 32, 0.26) 0%, rgba(11, 15, 9, 0) 60%),
      linear-gradient(180deg,
        rgba(11, 15, 9, 0) 0px,
        var(--canvas-ink) 132px,
        #0e120c 46%,
        var(--canvas-ink-deep) calc(100% - 108px),
        rgba(11, 15, 9, 0) 100%);
  }

html[data-theme="dark"] body[data-page="gallery"] .phero,
html[data-theme="dark"] body[data-page="projects"] .phero {
    background-image:
      radial-gradient(84% 56% at 16% 0%, rgba(78, 94, 70, 0.18) 0%, rgba(11, 15, 9, 0) 58%),
      radial-gradient(70% 50% at 84% 20%, rgba(34, 44, 30, 0.24) 0%, rgba(11, 15, 9, 0) 60%),
      linear-gradient(180deg,
        var(--canvas-ink) 0%,
        #0e120c 34%,
        var(--canvas-ink) 68%,
        var(--canvas-ink-deep) calc(100% - 96px),
        rgba(11, 15, 9, 0) 100%);
  }

html[data-theme="dark"] body[data-page="gallery"] .section:has(.masonry),
html[data-theme="dark"] body[data-page="contact"] #join,
html[data-theme="dark"] body.atelier-site .footer {
    background-image:
      radial-gradient(80% 54% at 14% 0%, rgba(78, 94, 70, 0.16) 0%, rgba(11, 15, 9, 0) 60%),
      linear-gradient(180deg,
        rgba(11, 15, 9, 0) 0px,
        var(--canvas-ink) 96px,
        var(--canvas-ink-deep) 100%);
  }

html[data-theme="dark"] body[data-page="gallery"] .footer {
    background-image:
      linear-gradient(180deg, var(--canvas-ink) 0%, var(--canvas-ink-deep) 100%);
  }

  /* Dark bands keep paper-coloured type. */
html[data-theme="dark"] body.atelier-home .field-atlas,
html[data-theme="dark"] body.atelier-site .footer,
html[data-theme="dark"] body[data-page="gallery"] .phero,
html[data-theme="dark"] body[data-page="gallery"] .section:has(.masonry),
html[data-theme="dark"] body[data-page="projects"] .phero,
html[data-theme="dark"] body[data-page="contact"] #join,
html[data-theme="dark"] body.atelier-site .drawer {
    --paper: #f3f0e8;
  }

  /* Paper artefacts keep their own daylight. */
html[data-theme="dark"] body.atelier-site :is(
    .pcard, .pcard__cover, .polaroid, .field-frame, .field-cover__inset,
    .yb-year, .chip, .filterbar, .search-modal__panel, .lb__bar, .lb__inner,
    .contact-card, .proj-plate, .exp-tab.is-selected, .field-toolbar, .film-toolbar,
    .stats__item, .prow:not(:nth-child(3n))
  ) {
    --paper: #f3f0e8;
    --ink: #151a17;
    color: var(--ink);
    background-color: rgba(243, 240, 232, 0.92);
  }

html[data-theme="dark"] body.atelier-site .masonry figcaption {
    color: var(--ink);
  }

  /* Inner pages: let the dark canvas show through the day-paper wrappers. */
html[data-theme="dark"] body:not([data-page="index"]) main {
    background: transparent;
  }

html[data-theme="dark"] body[data-page="archive"] .phero {
    background: var(--canvas-paper);
    color: var(--ink);
  }

html[data-theme="dark"] body[data-page="archive"] .phero__veil {
    background: transparent;
  }
}

html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

/* ==========================================================================
   34. Theme switch + Chinese ink weather
   ========================================================================== */

:root {
  --canvas-ridges: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201600%20420'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%20420%20L0%20306%20C110%20268%20216%20304%20322%20274%20C428%20244%20512%20188%20632%20220%20C752%20252%20838%20302%20958%20278%20C1078%20254%201156%20202%201276%20228%20C1396%20254%201492%20300%201600%20284%20L1600%20420%20Z'%20fill='%2312160f'%20opacity='0.16'/%3E%3Cpath%20d='M0%20420%20L0%20352%20C140%20322%20244%20352%20362%20330%20C480%20308%20566%20270%20704%20292%20C842%20314%20924%20354%201062%20338%20C1200%20322%201284%20286%201420%20302%20C1500%20312%201562%20340%201600%20332%20L1600%20420%20Z'%20fill='%2312160f'%20opacity='0.32'/%3E%3Cpath%20d='M0%20420%20L0%20386%20C180%20368%20320%20392%20470%20380%20C620%20368%20760%20344%20910%20358%20C1060%20372%201180%20396%201320%20386%20C1440%20378%201530%20392%201600%20388%20L1600%20420%20Z'%20fill='%2312160f'%20opacity='0.32'/%3E%3C/svg%3E");
  --canvas-clouds: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20160'%3E%3Cg%20fill='none'%20stroke='%2312160f'%20stroke-width='2.2'%20stroke-linecap='round'%20opacity='0.26'%3E%3Cpath%20d='M40%2096c0-18%2016-30%2036-26%204-16%2020-26%2038-20%2012-12%2034-8%2040%208%2016-2%2030%208%2032%2022%2014%202%2022%2012%2022%2024'/%3E%3Cpath%20d='M190%20118c0-16%2014-26%2032-24%204-14%2018-22%2034-18%2010-10%2028-6%2034%206%2014-2%2026%206%2028%2018'/%3E%3Cpath%20d='M520%2088c0-20%2018-32%2040-28%204-16%2020-26%2038-20%2012-12%2034-8%2040%208%2016-2%2030%208%2032%2022%2014%202%2022%2012%2022%2024'/%3E%3Cpath%20d='M700%20124c0-16%2014-26%2032-24%204-14%2018-22%2034-18%2010-10%2028-6%2034%206'/%3E%3Cpath%20d='M980%2096c0-18%2016-30%2036-26%204-16%2020-26%2038-20%2012-12%2034-8%2040%208%2016-2%2030%208%2032%2022'/%3E%3C/g%3E%3C/svg%3E");
  --canvas-ridge-ink: rgba(18, 22, 15, 0.9);
}

html[data-theme="dark"] {
  --canvas-ridges: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201600%20420'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%20420%20L0%20306%20C110%20268%20216%20304%20322%20274%20C428%20244%20512%20188%20632%20220%20C752%20252%20838%20302%20958%20278%20C1078%20254%201156%20202%201276%20228%20C1396%20254%201492%20300%201600%20284%20L1600%20420%20Z'%20fill='%23ece7d7'%20opacity='0.16'/%3E%3Cpath%20d='M0%20420%20L0%20352%20C140%20322%20244%20352%20362%20330%20C480%20308%20566%20270%20704%20292%20C842%20314%20924%20354%201062%20338%20C1200%20322%201284%20286%201420%20302%20C1500%20312%201562%20340%201600%20332%20L1600%20420%20Z'%20fill='%23ece7d7'%20opacity='0.32'/%3E%3Cpath%20d='M0%20420%20L0%20386%20C180%20368%20320%20392%20470%20380%20C620%20368%20760%20344%20910%20358%20C1060%20372%201180%20396%201320%20386%20C1440%20378%201530%20392%201600%20388%20L1600%20420%20Z'%20fill='%23ece7d7'%20opacity='0.32'/%3E%3C/svg%3E");
  --canvas-ridges-opacity: 0.5;
}

/* Mountains settle at the foot of the page; cloud scroll drifts across it. */
body.atelier-site::before,
body.atelier-site::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: -1;
  will-change: transform;
}

body.atelier-site::before {
  left: -2vw;
  right: -2vw;
  bottom: -2vh;
  height: 44vh;
  background-image: var(--canvas-ridges);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 104% auto;
  opacity: 0.9;
  animation: canvasRidges 40s ease-in-out infinite alternate;
}

body.atelier-site::after {
  left: -34%;
  right: -34%;
  top: 44%;
  height: 34vh;
  background-image: var(--canvas-clouds);
  background-repeat: repeat-x;
  background-position: 0 50%;
  background-size: 1200px auto;
  opacity: 1;
  animation: canvasCloudScroll 40s linear infinite;
}

@keyframes canvasRidges {
  from { transform: translate3d(0, 16px, 0) scale(1.010); }
  to   { transform: translate3d(0, -22px, 0) scale(1.045); }
}

@keyframes canvasCloudScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-1200px, 0, 0); }
}

/* The far weather has to read as movement, not as a static wash. */
html::before {
  animation: canvasDriftFar 14s ease-in-out infinite alternate;
}

html::after {
  animation: canvasDriftNear 12s ease-in-out infinite alternate;
}

@keyframes canvasDriftFar {
  from { transform: translate3d(-9%, -4%, 0) scale(1.04); }
  to   { transform: translate3d(10%, 5%, 0) scale(1.08); }
}

@keyframes canvasDriftNear {
  from { transform: translate3d(9%, 5%, 0) scale(1.05); }
  to   { transform: translate3d(-10%, -5%, 0) scale(1.09); }
}

html[data-theme="dark"] body.atelier-site::before {
  opacity: 0.62;
}

html[data-theme="dark"] body.atelier-site::after {
  opacity: 0.80;
}

/* Theme switch in the tools island. */
.nav__theme {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink, #151a17);
  border: 1px solid rgba(255, 255, 255, 0.62);
  background:
    radial-gradient(80% 80% at 30% 20%, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 6px rgba(12, 16, 12, 0.14);
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.nav__theme:hover {
  transform: translateY(-1px) scale(1.06);
}

.nav__theme:focus-visible {
  outline: 1px solid rgba(207, 62, 39, 0.65);
  outline-offset: 3px;
}

.nav__theme svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav__theme.is-dark {
  color: rgba(236, 231, 215, 0.94);
  border-color: rgba(236, 231, 215, 0.28);
  background:
    radial-gradient(80% 80% at 30% 20%, rgba(236, 231, 215, 0.34), rgba(236, 231, 215, 0.06));
}

@media (prefers-reduced-motion: reduce) {
  body.atelier-site::before,
  body.atelier-site::after {
    animation: none;
  }
}