/* GENERATED by scripts/subset-fonts.mjs — do not edit by hand.
   Self-hosted display face: Noto Serif CJK SemiBold (OFL-1.1), subset to the
   site's display glyphs and partitioned so the LCP text repaints on the small
   core file. Regenerate whenever display copy changes. */
@font-face {
  font-family: "HHEA Serif SC";
  src: url("/assets/fonts/hhea-serif-sc-core.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+9999,U+6E2F,U+676D,U+5DDE,U+5546,U+6703,U+8A9E,U+8A00,U+96D9,U+57CE,U+8DB3,U+8DE1,U+76EE,U+9304,U+90B1,U+5EFA,U+6797,U+5FC3,U+5408,U+610F,U+540C,U+FF0C,U+8B00,U+7121,U+4E0D,U+6210,U+7B2C,U+4E8C,U+5C46,U+7406,U+4E8B,U+806F,U+7D61,U+5F71,U+50CF,U+6A94,U+6848,U+63A8,U+52D5,U+4E92,U+901A,U+4F5C,U+4FC3,U+9032,U+5171,U+7E41,U+69AE,U+5609,U+8CD3,U+984C,U+8A5E,U+8207,U+8CC0,U+4FE1,U+5169,U+5EA7,U+5E02,U+4E4B,U+9593,U+5605,U+4E00,U+6A4B,U+5E74,U+5B8C,U+6574,U+540D,U+5275,U+5468,U+7279,U+520A,U+5C31,U+8077,U+5178,U+79AE,U+672C,U+6BB5,U+8A18,U+53CC,U+8FF9,U+83DC,U+5355,U+8BED,U+8C0B,U+65E0,U+5C4A,U+4F1A,U+8054,U+7EDC,U+6863,U+52A8,U+8FDB,U+8363,U+5BBE,U+9898,U+8BCD,U+4E0E,U+8D3A,U+4E24,U+95F4,U+7684,U+6865,U+5F55,U+521B,U+804C,U+793C,U+8BB0,U+30,U+31,U+32,U+33,U+34,U+35,U+36,U+37,U+38,U+39,U+B7,U+2014,U+2026,U+201C,U+201D,U+2018,U+2019,U+3001,U+3002,U+FF1A,U+FF1B,U+FF08,U+FF09,U+2502,U+2013;
}

@font-face {
  font-family: "HHEA Serif SC";
  src: url("/assets/fonts/hhea-serif-sc-ext.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+532F,U+624D,U+5FD7,U+8208,U+696D,U+5F18,U+4FCA,U+5F65,U+6A11,U+62D3,U+6A5F,U+8CE2,U+5354,U+5FB7,U+88D5,U+6C11,U+63DA,U+611B,U+570B,U+6DF1,U+5316,U+7D93,U+8CBF,U+4EA4,U+6D41,U+5951,U+4E26,U+660C,U+5321,U+6276,U+754C,U+5BB6,U+6C38,U+5553,U+65B0,U+9F4A,U+98DB,U+60E0,U+7FA3,U+52D9,U+9686,U+7CBE,U+8AA0,U+5718,U+7D50,U+5C55,U+5B8F,U+5716,U+96C6,U+96CB,U+7FA4,U+805A,U+737B,U+8944,U+6C5F,U+5DE5,U+7FF9,U+695A,U+670D,U+793E,U+96F2,U+5229,U+6176,U+76DB,U+7199,U+7562,U+81F3,U+8D0F,U+60C5,U+6EFF,U+9010,U+5922,U+798F,U+6FA4,U+767E,U+65FA,U+8C50,U+8CA1,U+961C,U+8CA8,U+8ABC,U+9023,U+5730,U+529B,U+90A6,U+56DB,U+6D77,U+667A,U+5EE3,U+958B,U+8DEF,U+651C,U+624B,U+596E,U+8B5C,U+7AE0,U+7C4C,U+5353,U+7296,U+9444,U+8F1D,U+714C,U+61CB,U+83EF,U+9109,U+8B7D,U+4EBA,U+8588,U+8403,U+99FF,U+8087,U+7B56,U+7E8C,U+821F,U+548C,U+8AE7,U+7BC7,U+51DD,U+7BC9,U+63A5,U+5F85,U+5BE7,U+6CE2,U+653F,U+4EE3,U+8868,U+7ACB,U+8AC7,U+6C76,U+840A,U+8003,U+5BDF,U+590F,U+8A2A,U+554F,U+652F,U+6301,U+7D05,U+5E0C,U+671B,U+5B78,U+6821,U+9805,U+6297,U+75AB,U+516C,U+76CA,U+884C,U+6D59,U+5927,U+7B54,U+8B1D,U+665A,U+5BB4,U+793A,U+300C,U+300D,U+6700,U+53EF,U+4EE5,U+6838,U+5BE6,U+9577,U+5E38,U+526F,U+9867,U+79D8,U+66F8,U+9080,U+76F8,U+9047,U+5514,U+6B62,U+55BA,U+4E0A,U+66F4,U+52A0,U+767C,U+751F,U+7531,U+771F,U+5F80,U+4F86,U+642D,U+8D77,U+54E1,U+6D3B,U+7B49,U+4E0B,U+6B21,U+4E94,U+5B97,U+65E8,U+5167,U+5BB9,U+8058,U+5C08,U+9078,U+539F,U+6383,U+63CF,U+8FAD,U+5B81,U+534F,U+56E2,U+8C08,U+6587,U+83B1,U+52A1,U+5E86,U+8BBF,U+95EE,U+7EA2,U+5B66,U+9879,U+8C22,U+4E1A,U+5B9E,U+957F,U+8A89,U+987E,U+4E66,U+5728,U+56FE,U+53D1,U+6765,U+5458,U+8BA9,U+5185,U+4E13,U+9009,U+626B,U+732E,U+8F9E;
}

@font-face {
  font-family: "HHEA Serif TC";
  src: url("/assets/fonts/hhea-serif-tc-core.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+9999,U+6E2F,U+676D,U+5DDE,U+5546,U+6703,U+8A9E,U+8A00,U+96D9,U+57CE,U+8DB3,U+8DE1,U+76EE,U+9304,U+90B1,U+5EFA,U+6797,U+5FC3,U+5408,U+610F,U+540C,U+FF0C,U+8B00,U+7121,U+4E0D,U+6210,U+7B2C,U+4E8C,U+5C46,U+7406,U+4E8B,U+806F,U+7D61,U+5F71,U+50CF,U+6A94,U+6848,U+63A8,U+52D5,U+4E92,U+901A,U+4F5C,U+4FC3,U+9032,U+5171,U+7E41,U+69AE,U+5609,U+8CD3,U+984C,U+8A5E,U+8207,U+8CC0,U+4FE1,U+5169,U+5EA7,U+5E02,U+4E4B,U+9593,U+5605,U+4E00,U+6A4B,U+5E74,U+5B8C,U+6574,U+540D,U+5275,U+5468,U+7279,U+520A,U+5C31,U+8077,U+5178,U+79AE,U+672C,U+6BB5,U+8A18,U+53CC,U+8FF9,U+83DC,U+5355,U+8BED,U+8C0B,U+65E0,U+5C4A,U+4F1A,U+8054,U+7EDC,U+6863,U+52A8,U+8FDB,U+8363,U+5BBE,U+9898,U+8BCD,U+4E0E,U+8D3A,U+4E24,U+95F4,U+7684,U+6865,U+5F55,U+521B,U+804C,U+793C,U+8BB0,U+30,U+31,U+32,U+33,U+34,U+35,U+36,U+37,U+38,U+39,U+B7,U+2014,U+2026,U+201C,U+201D,U+2018,U+2019,U+3001,U+3002,U+FF1A,U+FF1B,U+FF08,U+FF09,U+2502,U+2013;
}

@font-face {
  font-family: "HHEA Serif TC";
  src: url("/assets/fonts/hhea-serif-tc-ext.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+532F,U+624D,U+5FD7,U+8208,U+696D,U+5F18,U+4FCA,U+5F65,U+6A11,U+62D3,U+6A5F,U+8CE2,U+5354,U+5FB7,U+88D5,U+6C11,U+63DA,U+611B,U+570B,U+6DF1,U+5316,U+7D93,U+8CBF,U+4EA4,U+6D41,U+5951,U+4E26,U+660C,U+5321,U+6276,U+754C,U+5BB6,U+6C38,U+5553,U+65B0,U+9F4A,U+98DB,U+60E0,U+7FA3,U+52D9,U+9686,U+7CBE,U+8AA0,U+5718,U+7D50,U+5C55,U+5B8F,U+5716,U+96C6,U+96CB,U+7FA4,U+805A,U+737B,U+8944,U+6C5F,U+5DE5,U+7FF9,U+695A,U+670D,U+793E,U+96F2,U+5229,U+6176,U+76DB,U+7199,U+7562,U+81F3,U+8D0F,U+60C5,U+6EFF,U+9010,U+5922,U+798F,U+6FA4,U+767E,U+65FA,U+8C50,U+8CA1,U+961C,U+8CA8,U+8ABC,U+9023,U+5730,U+529B,U+90A6,U+56DB,U+6D77,U+667A,U+5EE3,U+958B,U+8DEF,U+651C,U+624B,U+596E,U+8B5C,U+7AE0,U+7C4C,U+5353,U+7296,U+9444,U+8F1D,U+714C,U+61CB,U+83EF,U+9109,U+8B7D,U+4EBA,U+8588,U+8403,U+99FF,U+8087,U+7B56,U+7E8C,U+821F,U+548C,U+8AE7,U+7BC7,U+51DD,U+7BC9,U+63A5,U+5F85,U+5BE7,U+6CE2,U+653F,U+4EE3,U+8868,U+7ACB,U+8AC7,U+6C76,U+840A,U+8003,U+5BDF,U+590F,U+8A2A,U+554F,U+652F,U+6301,U+7D05,U+5E0C,U+671B,U+5B78,U+6821,U+9805,U+6297,U+75AB,U+516C,U+76CA,U+884C,U+6D59,U+5927,U+7B54,U+8B1D,U+665A,U+5BB4,U+793A,U+300C,U+300D,U+6700,U+53EF,U+4EE5,U+6838,U+5BE6,U+9577,U+5E38,U+526F,U+9867,U+79D8,U+66F8,U+9080,U+76F8,U+9047,U+5514,U+6B62,U+55BA,U+4E0A,U+66F4,U+52A0,U+767C,U+751F,U+7531,U+771F,U+5F80,U+4F86,U+642D,U+8D77,U+54E1,U+6D3B,U+7B49,U+4E0B,U+6B21,U+4E94,U+5B97,U+65E8,U+5167,U+5BB9,U+8058,U+5C08,U+9078,U+539F,U+6383,U+63CF,U+8FAD,U+5B81,U+534F,U+56E2,U+8C08,U+6587,U+83B1,U+52A1,U+5E86,U+8BBF,U+95EE,U+7EA2,U+5B66,U+9879,U+8C22,U+4E1A,U+5B9E,U+957F,U+8A89,U+987E,U+4E66,U+5728,U+56FE,U+53D1,U+6765,U+5458,U+8BA9,U+5185,U+4E13,U+9009,U+626B,U+732E,U+8F9E;
}

/* Display @font-face declarations live in the generated src/fonts.css,
   concatenated ahead of this sheet at build time (scripts/subset-fonts.mjs). */
:root {
  /* Supplied equity — raw values */
  --raw-paper: #f2ede4;
  --raw-paper-light: #f8f5ef;
  --raw-paper-deep: #ded5c8;
  --raw-ink: #1c1916;
  --raw-ink-soft: #504942;
  --raw-ink-muted: #665f57;
  --raw-vermilion: #a72b27;
  --raw-vermilion-dark: #7d1f1d;
  --raw-night: #12100e;
  --raw-gold: #9b7738;
  --raw-vermilion-soft: #d9847e;
  --raw-vermilion-softer: #e39a93;
  --raw-plate: #ffffff;

  /* Purpose layer */
  --canvas: var(--raw-paper);
  --surface: var(--raw-paper-light);
  --edge: color-mix(in srgb, var(--raw-ink) 16%, transparent);
  --edge-strong: color-mix(in srgb, var(--raw-ink) 32%, transparent);
  --ink: var(--raw-ink);
  --ink-soft: var(--raw-ink-soft);
  --ink-muted: var(--raw-ink-muted);
  --device: var(--raw-vermilion);
  --device-strong: var(--raw-vermilion-dark);
  --device-on-dark: var(--raw-vermilion-soft);
  --device-on-dark-strong: var(--raw-vermilion-softer);
  --plate: var(--raw-plate);
  --focus: var(--raw-vermilion);
  --inverse: #f3ede4;
  --inverse-muted: #bdb4aa;

  --font-display: "HHEA Serif SC", "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  --font-reading: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-meta: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-latin-display: "Iowan Old Style", Baskerville, "Times New Roman", serif;
  --font-latin-reading: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.75rem, 0.72rem + 0.14vw, 0.875rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.08rem + 0.55vw, 1.55rem);
  --step-2: clamp(1.6rem, 1.28rem + 1.25vw, 2.4rem);
  --step-3: clamp(2.4rem, 1.75rem + 2.6vw, 4rem);
  --step-4: clamp(3.5rem, 2.35rem + 4.9vw, 7.2rem);
  --step-5: clamp(5rem, 2.8rem + 9vw, 11rem);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;
  --space-24: 12rem;

  --frame: 96rem;
  --pad: clamp(1.25rem, 4vw, 4.5rem);
  --header-height: 5rem;
  --hairline: 1px;
  --dur-micro: 150ms;
  --dur-state: 250ms;
  --dur-reveal: 500ms;
  --duration-map-reveal: 1525ms;
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.85, 1);
  --ease-state: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-map-draw: cubic-bezier(0.37, 0, 0.63, 1);
}

html[data-locale="yue"] {
  --font-display: "HHEA Serif TC", "Songti TC", "LiSong Pro", "Noto Serif CJK TC", "PMingLiU", serif;
  --font-reading: "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", sans-serif;
  --font-meta: "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", sans-serif;
}

html[data-locale="en"] {
  --font-display: var(--font-latin-display);
  --font-reading: var(--font-latin-reading);
  --font-meta: var(--font-latin-reading);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
  min-width: 0;
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-reading);
  font-size: var(--step-0);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(
    0deg,
    rgb(28 25 22 / 0.018) 0,
    rgb(28 25 22 / 0.018) 1px,
    transparent 1px,
    transparent 8px
  );
  content: "";
  pointer-events: none;
}

/* Static paper grain — kills sterile flatness without touching the warm identity. */
body::after {
  position: fixed;
  inset: 0;
  z-index: 400;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  content: "";
  mix-blend-mode: multiply;
  opacity: 0.05;
  pointer-events: none;
}

body.has-dialog {
  overflow: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

figure,
blockquote,
h1,
h2,
h3,
p,
dl,
dd {
  margin: 0;
}

ul,
ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

::selection {
  background: var(--device);
  color: var(--surface);
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 300;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--surface);
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.section-shell {
  width: min(calc(100% - 2 * var(--pad)), var(--frame));
  margin-inline: auto;
}

/* Eyebrows default to muted caps; vermilion is reserved for 朱批 moments. */
.eyebrow {
  color: var(--ink-muted);
  font-family: var(--font-meta);
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}

html:not([data-locale="en"]) .eyebrow {
  letter-spacing: 0.18em;
}

.arrow-icon {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: square;
  stroke-width: 1.5;
}

.line-link {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border-bottom: var(--hairline) solid var(--device);
  color: var(--device-strong);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.line-link .arrow-icon,
.circle-link .arrow-icon {
  transition: transform var(--dur-state) var(--ease-enter);
}

.line-link:hover .arrow-icon,
.line-link:focus-visible .arrow-icon,
.circle-link:hover .arrow-icon,
.circle-link:focus-visible .arrow-icon {
  transform: translateX(0.25rem);
}

.inline-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
}

.circle-link {
  display: grid;
  width: clamp(4.5rem, 8vw, 7rem);
  height: clamp(4.5rem, 8vw, 7rem);
  flex: 0 0 auto;
  place-items: center;
  border: var(--hairline) solid var(--device);
  border-radius: 50%;
  color: var(--device);
}

.circle-link .arrow-icon {
  width: 1.6rem;
  height: 1.6rem;
}

/* Header */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  min-height: var(--header-height);
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 0 var(--pad);
  border-bottom: var(--hairline) solid transparent;
  transition:
    background-color var(--dur-state) var(--ease-state),
    border-color var(--dur-state) var(--ease-state);
}

.site-header.is-scrolled,
body:not(.route-home) .site-header {
  border-color: var(--edge);
  background: color-mix(in srgb, var(--canvas) 94%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.8rem;
  color: var(--ink);
  text-decoration: none;
}

.brand-seal {
  width: 2.55rem;
  height: 2.55rem;
  flex: 0 0 auto;
  color: var(--device);
}

.brand-wordmark {
  display: grid;
  gap: 0.2rem;
}

.brand-wordmark strong {
  /* The six brand glyphs ship in both script subsets, so each locale's own
     display file renders the wordmark — no cross-script font fetch in the
     critical path. EN (latin display stack) is pinned to TC below. */
  font-family: var(--font-display), "Songti TC", "Songti SC", serif;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1;
  white-space: nowrap;
}

.brand-wordmark small {
  color: var(--ink-muted);
  font-family: var(--font-meta);
  font-size: 0.5rem;
  font-weight: 620;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 50rem) {
  .brand-wordmark small {
    display: none;
  }
}


@media (max-width: 24rem) {
  .brand-wordmark strong {
    font-size: 0.92rem;
    letter-spacing: 0.12em;
  }
}


.header-actions {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
}

.header-action {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.75rem;
  padding-inline: 0.75rem;
  border-bottom: var(--hairline) solid var(--edge-strong);
  font-size: var(--step--1);
  font-weight: 620;
  white-space: nowrap;
}

.header-action {
  transition:
    color var(--dur-micro) var(--ease-state),
    border-color var(--dur-micro) var(--ease-state);
}

.header-action:hover {
  border-color: var(--device);
  color: var(--device-strong);
}

/* Seal frame grammar as a corner motif for featured surfaces. */
.seal-corners {
  position: relative;
}

.seal-corners::before,
.seal-corners::after {
  position: absolute;
  width: 0.9rem;
  height: 0.9rem;
  border: 0 solid var(--device);
  content: "";
  pointer-events: none;
}

.seal-corners::before {
  top: 0;
  left: 0;
  border-width: 2px 0 0 2px;
}

.seal-corners::after {
  right: 0;
  bottom: 0;
  border-width: 0 2px 2px 0;
}

.vertical-label {
  font-family: var(--font-display);
  letter-spacing: 0.3em;
  writing-mode: vertical-rl;
}

.language-arrow {
  width: 1rem;
  height: 1rem;
  flex: none;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 1.25;
}

.menu-glyph {
  display: grid;
  width: 1.05rem;
  gap: 0.3rem;
}

.menu-glyph i {
  display: block;
  height: 1px;
  background: currentcolor;
}

.menu-glyph i:last-child {
  width: 65%;
  justify-self: end;
}

/* Full-screen dialogs */
dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  height: 100dvh;
  max-height: none;
  overflow: hidden;
  padding: 0;
  border: 0;
  margin: 0;
}

dialog::backdrop {
  background: rgb(18 16 14 / 0.72);
}

.menu-dialog {
  background: var(--raw-night);
  color: var(--inverse);
}

.menu-dialog[open] {
  animation: dialog-enter var(--dur-reveal) var(--ease-enter) both;
}

@keyframes dialog-enter {
  from { opacity: 0; transform: translateY(-1rem); }
  to { opacity: 1; transform: translateY(0); }
}

.dialog-shell {
  position: relative;
  display: grid;
  min-height: 100%;
  grid-template-rows: auto 1fr auto;
  padding: 0 var(--pad) max(1.25rem, env(safe-area-inset-bottom));
}

.dialog-shell::before {
  position: absolute;
  top: var(--header-height);
  bottom: 0;
  left: clamp(7rem, 12vw, 12rem);
  width: 1px;
  background: color-mix(in srgb, var(--device) 75%, transparent);
  content: "";
  pointer-events: none;
}

.dialog-header {
  display: flex;
  min-height: var(--header-height);
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgb(243 237 228 / 0.18);
}

.dialog-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--inverse);
  text-decoration: none;
}

.dialog-brand .brand-wordmark small {
  color: var(--inverse-muted);
}

.dialog-close {
  display: inline-flex;
  min-width: 3.25rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: flex-end;
  gap: 0.85rem;
  color: var(--inverse);
  font-size: var(--step--1);
}

.dialog-close i,
.lightbox header button i {
  position: relative;
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

.dialog-close i::before,
.dialog-close i::after,
.lightbox header button i::before,
.lightbox header button i::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentcolor;
  content: "";
}

.dialog-close i::before,
.lightbox header button i::before { transform: rotate(45deg); }
.dialog-close i::after,
.lightbox header button i::after { transform: rotate(-45deg); }

.menu-toc {
  display: grid;
  align-content: center;
  gap: clamp(2rem, 5vh, 4rem);
  padding: clamp(3rem, 8vh, 7rem) 0 clamp(2rem, 6vh, 5rem) clamp(9rem, 15vw, 15rem);
}

.menu-home {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgb(243 237 228 / 0.22);
  color: var(--inverse);
  font-family: var(--font-display);
  font-size: var(--step-2);
  text-decoration: none;
}

.menu-home > span,
.menu-group > p span {
  color: var(--device-on-dark);
  font-family: var(--font-meta);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
}

.menu-home.is-current,
.menu-home:hover {
  color: var(--device-on-dark-strong);
}

.menu-groups {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 5rem);
}

.menu-group > p {
  display: flex;
  gap: 0.65rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgb(243 237 228 / 0.17);
  color: var(--inverse-muted);
  font-size: var(--step--1);
}

.menu-group li {
  border-bottom: 1px solid rgb(243 237 228 / 0.12);
}

.menu-group a {
  display: flex;
  min-height: 3.25rem;
  align-items: center;
  color: var(--inverse);
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  text-decoration: none;
  transition:
    color var(--dur-micro) var(--ease-state),
    transform var(--dur-micro) var(--ease-enter);
}

.menu-group a:hover,
.menu-group a.is-current {
  color: var(--device-on-dark-strong);
}

.menu-group a:hover {
  transform: translateX(0.35rem);
}

/* Current page carries the diamond marker, not colour alone. */
.menu-group a.is-current::after {
  width: 0.38rem;
  height: 0.38rem;
  flex: 0 0 auto;
  margin-left: auto;
  background: var(--device-on-dark);
  content: "";
  transform: rotate(45deg);
}

.dialog-folio {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1rem 0 0 clamp(9rem, 15vw, 15rem);
  color: var(--inverse-muted);
  font-family: var(--font-meta);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}

.language-dialog {
  background: var(--canvas);
  color: var(--ink);
}

.language-dialog[open] {
  animation: dialog-enter var(--dur-reveal) var(--ease-enter) both;
}

.language-dialog__inner {
  display: grid;
  min-height: 100%;
  min-height: 100dvh;
  grid-template-rows: auto 1fr;
  padding-inline: var(--pad);
}

.language-dialog__header {
  display: flex;
  width: 100%;
  min-height: var(--header-height);
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: nowrap;
  border-bottom: var(--hairline) solid var(--edge);
}

.language-dialog__header > p {
  flex: 0 0 auto;
  color: var(--device);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
}

.city-pair {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-meta);
  font-size: inherit;
  font-style: normal;
  font-weight: 620;
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
}

.city-pair svg {
  width: 1.85em;
  height: 0.7em;
  flex: 0 0 auto;
  color: var(--device);
  overflow: visible;
}

.city-pair__line {
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.3;
}

.city-pair__joint {
  fill: currentcolor;
}

.dialog-close--light {
  color: var(--ink);
}

.language-dialog__body {
  display: grid;
  width: min(60rem, 100%);
  align-content: center;
  padding: 4rem 0;
  margin-inline: auto;
}

.dialog-folio--light {
  color: var(--ink-muted);
  align-self: end;
  padding-left: 0;
}

.language-dialog__body > [tabindex="-1"]:focus {
  outline: none;
}

.language-dialog nav {
  margin-top: 1.5rem;
  border-top: var(--hairline) solid var(--edge-strong);
}

.language-dialog nav a {
  display: grid;
  min-height: clamp(3.5rem, 7vh, 4.75rem);
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  align-items: center;
  border-bottom: var(--hairline) solid var(--edge-strong);
  text-decoration: none;
}

.language-dialog nav a span {
  color: var(--device);
  font-size: var(--step--1);
}

.language-dialog nav a strong {
  font-family: var(--font-display);
  /* matched to .menu-home, the largest item in the navigation dialog, so the
     language picker never out-sizes the menu it sits beside */
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.15;
}

.language-dialog nav a i {
  display: block;
  justify-self: end;
  width: 0.38rem;
  height: 0.38rem;
  background: currentcolor;
  color: var(--device);
  transform: rotate(45deg);
}

.language-dialog nav a:hover strong {
  color: var(--device-strong);
}

/* Shared page masthead */
body:not(.route-home) main {
  padding-top: var(--header-height);
}

.page-masthead {
  position: relative;
  display: grid;
  min-height: min(46rem, calc(100svh - var(--header-height)));
  grid-template-columns: clamp(6rem, 11vw, 11rem) minmax(0, 1fr) minmax(10rem, 22vw);
  align-items: end;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(5rem, 11vh, 9rem) var(--pad) clamp(4rem, 9vh, 7rem);
  border-bottom: var(--hairline) solid var(--edge);
}

.page-masthead__rail {
  position: absolute;
  inset: 0 auto 0 var(--pad);
  display: grid;
  width: clamp(6rem, 11vw, 11rem);
  grid-template-rows: auto 1fr;
  padding-top: clamp(5rem, 11vh, 9rem);
  color: var(--device);
  font-size: var(--step--1);
}

.page-masthead__rail i {
  width: 1px;
  height: calc(100% + clamp(4rem, 9vh, 7rem));
  margin: 1.25rem 0 0 0.2rem;
  background: var(--device);
}

.page-masthead__copy {
  min-width: 0;
  grid-column: 2;
  max-width: 68rem;
}

.page-masthead h1 {
  max-width: 14ch;
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.9;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

html:not([data-locale="en"]) .page-masthead h1 {
  letter-spacing: -0.08em;
  line-height: 1;
}

html[data-locale="en"] .page-masthead h1 {
  max-width: 16ch;
  font-size: clamp(4rem, 9vw, 8rem);
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

.page-lead {
  max-width: 48rem;
  margin-top: clamp(2rem, 4vw, 4rem);
  color: var(--ink-soft);
  font-size: var(--step-1);
  line-height: 1.55;
}

.masthead-coordinate,
.masthead-number,
.pdf-link {
  grid-column: 3;
  align-self: end;
  margin-bottom: 0.5rem;
}

.masthead-coordinate {
  color: var(--ink-muted);
  font-family: var(--font-meta);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
}

.masthead-number strong {
  display: block;
  color: var(--device);
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 500;
  line-height: 0.85;
}

.masthead-number span {
  display: block;
  margin-top: 0.75rem;
  color: var(--ink-muted);
  font-size: var(--step--1);
}

.pdf-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-top: var(--hairline) solid var(--device);
  border-bottom: var(--hairline) solid var(--device);
  color: var(--device-strong);
  font-size: var(--step--1);
  text-decoration: none;
}

.pdf-link > span {
  font-weight: 800;
}

.source-note {
  display: flex;
  max-width: 72rem;
  gap: 1rem;
  padding: 1.25rem 0;
  margin: var(--space-12) 0 var(--space-16);
  border-top: var(--hairline) solid var(--edge);
  color: var(--ink-muted);
  font-size: clamp(0.7rem, 0.7rem + 0.1vw, 0.8rem);
  line-height: 1.55;
}

.source-note > span:first-child {
  flex: 0 0 auto;
  color: var(--device-strong);
  font-weight: 700;
}

.source-note__body {
  min-width: 0;
  color: var(--ink-muted);
  font-weight: 400;
}

.source-note__body a {
  display: inline-block;
  margin-left: 0.75rem;
  color: var(--ink-soft);
}

.prose {
  max-width: 46rem;
}

.prose p + p {
  margin-top: 1.75em;
}

.prose--large {
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.8;
}

@keyframes opening-copy {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}

.section-rail {
  display: grid;
  align-self: stretch;
  grid-template-rows: auto 1fr auto;
  color: var(--device);
  font-size: var(--step--1);
}

.section-rail i {
  width: 1px;
  margin: 1rem 0;
  background: var(--device);
}

.section-rail em {
  color: var(--ink-muted);
  font-size: 0.7rem;
  font-style: normal;
  letter-spacing: 0.12em;
  writing-mode: vertical-rl;
}

.section-heading h2,
.contact-callout h2,
.city-relation h2,
.purpose-ledger h2,
.fact-ledger h2,
.edition-opening h2 {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 1.05;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: var(--hairline) solid var(--edge-strong);
}

.home-publications {
  padding-block: var(--space-16);
}

.publication-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(3rem, 8vw, 10rem);
  padding-top: 3rem;
}

.publication-card {
  display: grid;
  grid-template-columns: minmax(10rem, 0.85fr) minmax(0, 1.15fr);
  align-items: end;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.publication-card__cover {
  position: relative;
  display: block;
  box-shadow: 0 1.25rem 2.5rem rgb(28 25 22 / 0.16);
  text-decoration: none;
}

.publication-card__cover img {
  width: 100%;
}

.publication-cover {
  display: block;
  width: 100%;
  height: auto;
}

/*
 * The supplied 2019 artwork is a complete jacket spread: back cover on the
 * left, front cover on the right. Frame the actual front cover wherever the
 * publication is presented as a single book.
 */
.publication-cover--2019 {
  aspect-ratio: 30 / 41;
  object-fit: cover;
  object-position: right center;
}

.publication-card__cover > span {
  position: absolute;
  top: -1.25rem;
  right: -1.25rem;
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
  border-radius: 50%;
  background: var(--device);
  color: var(--surface);
  font-size: 0.72rem;
}

.publication-card > div > p:first-child {
  color: var(--device-strong);
  font-size: var(--step--1);
}

.publication-card h3 {
  margin: 0.75rem 0 1.25rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

html[data-locale="en"] .section-heading h2,
html[data-locale="en"] .contact-callout h2,
html[data-locale="en"] .city-relation h2,
html[data-locale="en"] .purpose-ledger h2,
html[data-locale="en"] .fact-ledger h2,
html[data-locale="en"] .edition-opening h2,
html[data-locale="en"] .publication-card h3 {
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

.publication-card h3 a {
  text-decoration: none;
}

.publication-card > div > p:not(:first-child) {
  color: var(--ink-soft);
}

.publication-card .line-link {
  margin-top: 1.5rem;
}

.contact-callout,
.pdf-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  padding-block: var(--space-16);
  border-top: var(--hairline) solid var(--device);
}

.contact-callout > div,
.pdf-callout > div {
  min-width: 0;
}

.contact-callout > div > p:not(.eyebrow) {
  max-width: 42rem;
  margin-top: 1.5rem;
  color: var(--ink-soft);
  font-size: var(--step-1);
}

/* Introduction */
.editorial-grid {
  display: grid;
  grid-template-columns: minmax(10rem, 0.7fr) minmax(0, 1.6fr) minmax(5rem, 0.3fr);
  gap: clamp(2rem, 6vw, 7rem);
  padding-block: var(--space-16);
}

.editorial-grid__meta {
  color: var(--ink-muted);
  font-size: var(--step--1);
}

.editorial-grid__meta span {
  display: block;
  margin-top: 2rem;
  color: var(--device);
  letter-spacing: 0.1em;
}

.purpose-ledger {
  display: grid;
  grid-template-columns: minmax(15rem, 0.75fr) minmax(0, 1.5fr);
  gap: clamp(3rem, 8vw, 10rem);
  padding-block: var(--space-16);
  border-top: var(--hairline) solid var(--edge);
}

.purpose-ledger ol {
  border-top: var(--hairline) solid var(--edge-strong);
}

.purpose-ledger li {
  display: grid;
  min-height: 7rem;
  grid-template-columns: 3rem 0.45fr 1fr;
  align-items: start;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: var(--hairline) solid var(--edge-strong);
}

.purpose-ledger li > span {
  color: var(--device);
  font-size: var(--step--1);
}

.purpose-ledger h3 {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.15;
}

.purpose-ledger li p {
  color: var(--ink-soft);
}

.city-relation {
  display: grid;
  min-height: 36rem;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(3rem, 8vw, 10rem);
  padding-block: var(--space-16);
  border-top: var(--hairline) solid var(--edge);
}

.city-relation__labels {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  color: var(--device);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
}

.city-relation__labels i {
  height: 1px;
  background: var(--device);
}

.city-relation > div:last-child p {
  max-width: 40rem;
  margin-top: 2rem;
  color: var(--ink-soft);
  font-size: var(--step-1);
}

/* Chairman and message */
.portrait-spread {
  display: grid;
  grid-template-columns: minmax(18rem, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(4rem, 10vw, 12rem);
  padding-block: var(--space-16);
}

.portrait-spread figure {
  max-width: 37rem;
}

.portrait-spread figure img {
  width: 100%;
  filter: saturate(0.74);
}

.portrait-spread figcaption {
  padding-top: 0.75rem;
  color: var(--ink-muted);
  font-size: var(--step--1);
}

.portrait-spread > div {
  align-self: center;
}

.portrait-spread blockquote {
  margin: 3rem 0;
  color: var(--device-strong);
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.5;
}

.fact-ledger {
  display: grid;
  grid-template-columns: minmax(14rem, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(3rem, 8vw, 10rem);
  padding-block: var(--space-12);
  border-top: var(--hairline) solid var(--edge);
}

.fact-ledger dl {
  border-top: var(--hairline) solid var(--edge-strong);
}

.fact-ledger dl > div {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 2rem;
  padding: 1.5rem 0;
  border-bottom: var(--hairline) solid var(--edge-strong);
}

.fact-ledger dt {
  color: var(--ink-muted);
  font-size: var(--step--1);
}

.fact-ledger dd {
  font-family: var(--font-display);
  font-size: var(--step-1);
}

.message-layout {
  display: grid;
  grid-template-columns: minmax(12rem, 0.45fr) minmax(0, 1.55fr);
  gap: clamp(3rem, 9vw, 10rem);
  padding-block: var(--space-16);
}

.message-layout aside {
  position: sticky;
  top: calc(var(--header-height) + 2rem);
  align-self: start;
}

.message-layout aside img {
  max-width: 17rem;
  filter: saturate(0.7);
}

.message-layout aside p {
  max-width: 17rem;
  padding-top: 1rem;
  border-top: var(--hairline) solid var(--device);
  margin-top: 1rem;
  color: var(--device-strong);
  font-size: var(--step--1);
}

.message-prose {
  position: relative;
  max-width: 56rem;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.9;
}

.message-prose p + p {
  margin-top: 1.75em;
}

.opening-mark {
  position: absolute;
  top: -4rem;
  left: -0.75em;
  color: color-mix(in srgb, var(--device) 22%, transparent);
  font-family: var(--font-display);
  font-size: 11rem;
  line-height: 1;
  pointer-events: none;
}

.message-signature {
  color: var(--device-strong);
  font-weight: 700;
  text-align: right;
}

/* Committee and members */
.record-update {
  display: grid;
  grid-template-columns: clamp(10rem, 22vw, 22rem) minmax(0, 46rem);
  gap: 3rem;
  padding-block: var(--space-8);
  border-bottom: var(--hairline) solid var(--edge);
}

.record-update > p:last-child {
  color: var(--ink-soft);
}

.roster {
  padding-block: var(--space-8);
}

.roster-group {
  display: grid;
  grid-template-columns: minmax(12rem, 0.46fr) minmax(0, 1.54fr);
  gap: clamp(2rem, 5vw, 6rem);
  padding: 2rem 0;
  border-bottom: var(--hairline) solid var(--edge);
}

.roster-group header {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-content: start;
  gap: 1rem;
}

.roster-group header span,
.roster-group header em {
  color: var(--device);
  font-size: var(--step--1);
  font-style: normal;
}

.roster-group h2 {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.3;
}

.roster-group ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: var(--hairline) solid var(--edge-strong);
}

.roster-group li {
  min-width: 0;
  padding: 0.9rem 1rem 0.9rem 0;
  border-bottom: var(--hairline) solid var(--edge);
  overflow-wrap: anywhere;
}

html[data-locale="en"] .roster-group li {
  font-size: 0.94rem;
}

.roster--compact .roster-group {
  grid-template-columns: minmax(10rem, 0.4fr) minmax(0, 1.6fr);
  padding: 1.25rem 0;
}

.roster--compact .roster-group ul {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.roster--compact .roster-group li {
  font-size: 0.82rem;
}

.member-register {
  padding-block: var(--space-12);
}

.member-register ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: var(--hairline) solid var(--edge-strong);
  border-left: var(--hairline) solid var(--edge-strong);
}

.member-register li {
  display: grid;
  min-height: 5rem;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border-right: var(--hairline) solid var(--edge-strong);
  border-bottom: var(--hairline) solid var(--edge-strong);
}

.member-register li span {
  color: var(--device);
  font-size: 0.72rem;
}

.member-register li strong {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
}

html[data-locale="en"] .member-register li strong {
  font-family: var(--font-reading);
  font-size: 0.96rem;
  line-height: 1.35;
}

/* Activities */
.activity-years {
  padding-block: var(--space-8);
}

.activity-year {
  display: grid;
  grid-template-columns: clamp(9rem, 18vw, 17rem) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 7rem);
  padding: var(--space-8) 0 var(--space-12);
  border-bottom: var(--hairline) solid var(--edge);
}

.activity-year > header {
  position: sticky;
  top: calc(var(--header-height) + 2rem);
  display: flex;
  height: fit-content;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}

.activity-year > header h2 {
  color: var(--device);
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 500;
  line-height: 0.9;
}

.activity-year > header span {
  color: var(--ink-muted);
  font-size: var(--step--1);
}

.activity-event {
  display: grid;
  grid-template-columns: minmax(12rem, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: 0 0 var(--space-8);
}

.activity-event + .activity-event {
  padding-top: var(--space-8);
  border-top: var(--hairline) solid var(--edge);
}

.activity-event figure {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.activity-event img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.activity-event--publication figure {
  background: var(--raw-night);
}

.activity-event--publication img {
  object-fit: contain;
}

.activity-event time {
  color: var(--device-strong);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
}

.activity-event h3 {
  margin: 1rem 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.25;
}

.activity-event p {
  color: var(--ink-soft);
}

/* Gallery */
.gallery-section {
  padding-block: var(--space-8);
}

.gallery-toolbar {
  display: flex;
  min-height: 4rem;
  align-items: center;
  gap: 0.35rem;
  border-bottom: var(--hairline) solid var(--edge-strong);
}

.gallery-toolbar button {
  min-height: 2.75rem;
  padding: 0 0.85rem;
  color: var(--ink-muted);
  font-size: var(--step--1);
}

.gallery-toolbar button[aria-pressed="true"] {
  color: var(--device-strong);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.4em;
}

.gallery-toolbar p {
  margin-left: auto;
  color: var(--ink-muted);
  font-size: var(--step--1);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  padding-top: var(--space-8);
}

.gallery-item {
  grid-column: span 4;
}

.gallery-item--1,
.gallery-item--6 {
  grid-column: span 8;
}

.gallery-item--2,
.gallery-item--5 {
  padding-top: 5rem;
}

.gallery-item--4 {
  grid-column: 2 / span 5;
}

.gallery-item--5 {
  grid-column: span 6;
}

.gallery-item[hidden] {
  display: none;
}

.gallery-trigger {
  width: 100%;
  text-align: left;
}

.gallery-trigger__figure {
  display: grid;
  gap: 0.85rem;
}

.gallery-trigger img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition:
    filter var(--dur-state) var(--ease-state),
    transform var(--dur-state) var(--ease-enter);
}

.gallery-item--1 .gallery-trigger img,
.gallery-item--6 .gallery-trigger img {
  aspect-ratio: 16 / 8.5;
}

.gallery-trigger:hover img {
  filter: saturate(0.75) contrast(1.08);
  transform: scale(0.995);
}

img.image-error {
  min-height: 12rem;
  padding: 2rem;
  border: var(--hairline) solid var(--edge-strong);
  background:
    linear-gradient(135deg, transparent 49.8%, var(--edge) 50%, transparent 50.2%),
    var(--raw-paper-deep);
  color: var(--ink-muted);
  filter: none;
  font-family: var(--font-meta);
  font-size: var(--step--1);
  object-fit: contain;
}

.gallery-trigger__caption {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1rem;
  font-size: var(--step--1);
}

.gallery-trigger__caption > span {
  color: var(--device-strong);
}

.gallery-trigger__caption strong {
  font-weight: 550;
}

.lightbox {
  background: var(--raw-night);
  color: var(--inverse);
}

.lightbox[open] {
  animation: lightbox-enter var(--dur-reveal) var(--ease-enter) both;
}

@keyframes lightbox-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lightbox__frame {
  display: grid;
  min-height: 100%;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: max(1.25rem, env(safe-area-inset-top)) var(--pad) max(1.25rem, env(safe-area-inset-bottom));
}

.lightbox header {
  display: flex;
  min-height: 3.5rem;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgb(243 237 228 / 0.2);
}

.lightbox header p {
  display: flex;
  gap: 2rem;
  color: var(--inverse-muted);
  font-size: var(--step--1);
}

.lightbox header button {
  display: flex;
  min-width: 3rem;
  min-height: 2.75rem;
  align-items: center;
  gap: 1rem;
  color: var(--inverse);
  font-size: var(--step--1);
}

.lightbox__media {
  display: grid;
  min-height: 0;
  place-items: center;
  padding: 1.5rem 0;
}

.lightbox__media img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 62vh;
  object-fit: contain;
}

.lightbox footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(243 237 228 / 0.2);
}

.lightbox footer h2 {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.15;
}

.lightbox footer p {
  max-width: 48rem;
  margin-top: 0.5rem;
  color: var(--inverse-muted);
  font-size: var(--step--1);
}

.lightbox footer nav {
  display: flex;
  gap: 0.5rem;
}

.lightbox footer nav button {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.75rem;
  padding-inline: 0.5rem;
}

.lightbox footer nav button:first-child .arrow-icon {
  transform: rotate(180deg);
}

/* Publications */
.publication-pair--page {
  padding-block: var(--space-16);
}

.edition-opening {
  display: grid;
  grid-template-columns: minmax(16rem, 0.65fr) minmax(0, 1.35fr);
  gap: clamp(3rem, 9vw, 11rem);
  padding-block: var(--space-16);
}

.edition-opening > figure {
  max-width: 32rem;
}

.edition-opening > figure img {
  width: 100%;
  box-shadow: 0 1.5rem 3.5rem rgb(28 25 22 / 0.15);
}

.edition-contents {
  margin-top: 3rem;
  border-top: var(--hairline) solid var(--edge-strong);
}

.edition-contents article {
  display: grid;
  grid-template-columns: 3rem minmax(10rem, 0.55fr) minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: var(--hairline) solid var(--edge-strong);
}

.edition-contents article > span {
  color: var(--device);
  font-size: var(--step--1);
}

.edition-contents h3 {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
}

.edition-contents article > p {
  color: var(--ink-soft);
}

.edition-contents .line-link {
  grid-column: 3;
  justify-self: start;
}

.edition-roster {
  padding-block: var(--space-12);
  border-top: var(--hairline) solid var(--edge);
}

.scan-gallery {
  padding-block: var(--space-16);
}

.scan-gallery > div:last-child {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-top: var(--space-8);
}

.scan {
  grid-column: span 4;
}

.scan--1 {
  grid-column: span 7;
}

.scan--2 {
  grid-column: span 5;
  padding-top: 5rem;
}

.scan--4 {
  grid-column: 2 / span 5;
}

.scan--5 {
  grid-column: span 6;
  padding-top: 4rem;
}

.scan img {
  width: 100%;
  border: var(--hairline) solid var(--edge);
}

.scan figcaption {
  display: flex;
  gap: 1rem;
  padding-top: 0.75rem;
  color: var(--ink-muted);
  font-size: var(--step--1);
}

.scan figcaption span {
  color: var(--device);
}

.pdf-callout h2 {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 500;
}

/* Contact */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.65fr);
  gap: clamp(4rem, 10vw, 12rem);
  padding-block: var(--space-16);
}

.contact-ledger {
  border-top: var(--hairline) solid var(--edge-strong);
}

.contact-ledger > a,
.contact-ledger > p {
  display: grid;
  min-height: 7rem;
  grid-template-columns: minmax(8rem, 0.4fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 2rem;
  padding-block: 1.25rem;
  border-bottom: var(--hairline) solid var(--edge-strong);
  text-decoration: none;
}

.contact-ledger span {
  color: var(--device-strong);
  font-size: var(--step--1);
}

.contact-ledger strong {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.contact-ledger > a:hover strong {
  color: var(--device-strong);
}

.wechat {
  align-self: start;
}

.wechat > div {
  padding: 1rem;
  border: var(--hairline) solid var(--edge-strong);
  background: var(--plate);
}

.wechat img {
  width: 100%;
  image-rendering: crisp-edges;
}

.wechat figcaption {
  display: grid;
  gap: 0.5rem;
  padding-top: 1rem;
}

.wechat figcaption strong {
  font-family: var(--font-display);
  font-size: var(--step-1);
}

.wechat figcaption span {
  color: var(--ink-muted);
  font-size: var(--step--1);
}

.contact-map {
  display: flex;
  min-height: 23rem;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  border-top: var(--hairline) solid var(--device);
  border-bottom: var(--hairline) solid var(--edge);
}

.contact-map > div {
  display: grid;
  width: min(65%, 50rem);
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  color: var(--device);
  font-family: var(--font-display);
  font-size: var(--step-3);
}

.contact-map > div i {
  height: 1px;
  background: var(--device);
}

.contact-map > p {
  color: var(--ink-muted);
  font-size: var(--step--1);
  text-align: right;
}

/* Footer */
.site-footer {
  position: relative;
  overflow: hidden;
  padding: var(--space-12) var(--pad) max(1.5rem, env(safe-area-inset-bottom));
  background: var(--raw-night);
  color: var(--inverse);
}

.footer-hinge {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  color: var(--device-on-dark);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}

.footer-hinge i {
  grid-column: 2;
  grid-row: 1;
  height: 1px;
  background: rgb(167 43 39 / 0.8);
}

.footer-hinge span:first-of-type {
  grid-column: 1;
  grid-row: 1;
}

.footer-hinge span:last-of-type {
  grid-column: 3;
  grid-row: 1;
}

.footer-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  padding: var(--space-8) 0 var(--space-12);
}

.footer-brand {
  display: inline-flex;
  align-items: flex-start;
  gap: 1rem;
  color: var(--inverse);
  text-decoration: none;
}

.footer-brand .brand-seal {
  width: 3.2rem;
  height: 3.2rem;
}

.footer-brand .brand-wordmark {
  gap: 0.35rem;
}

.footer-brand .brand-wordmark strong {
  font-size: 1.3rem;
}

.footer-brand .brand-wordmark small {
  color: var(--inverse-muted);
  white-space: normal;
}

.footer-contact {
  display: grid;
  align-content: start;
  border-top: 1px solid rgb(243 237 228 / 0.18);
}

.footer-contact a,
.footer-contact p {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgb(243 237 228 / 0.18);
  color: var(--inverse);
  font-size: var(--step--1);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.footer-contact span {
  color: var(--inverse-muted);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgb(243 237 228 / 0.18);
  color: var(--inverse-muted);
  font-size: 0.7rem;
}

/* Responsive transformation */
@media (max-width: 70rem) {
  .page-masthead {
    grid-template-columns: 7rem minmax(0, 1fr) minmax(8rem, 14rem);
  }

  .page-masthead__rail {
    width: 7rem;
  }

  .landing__hinge {
    left: 46%;
  }

  .menu-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-hero {
    min-height: 46rem;
  }

  .publication-pair {
    gap: 4rem;
  }

  .publication-card {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .publication-card__cover {
    width: min(100%, 24rem);
  }

  .roster-group ul,
  .roster--compact .roster-group ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 52rem) {
  :root {
    --header-height: 4.5rem;
    --space-24: 8rem;
    --space-16: 6rem;
  }

  .brand img {
    height: 2.1rem;
  }

  .header-actions {
    gap: 0;
  }

  .header-action {
    padding-inline: 0.55rem;
    font-size: 0.7rem;
  }

  .header-action--language span:first-child {
    overflow: visible;
  }

  .dialog-brand img {
    height: 2.1rem;
  }

  .dialog-shell::before {
    left: calc(var(--pad) + 2rem);
  }

  .menu-toc {
    align-content: start;
    padding: 3rem 0 3rem 4.5rem;
  }

  .menu-home {
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  }

  .menu-groups {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .dialog-folio {
    padding-left: 4.5rem;
  }

  .language-dialog__inner {
    height: 100dvh;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .language-dialog__header {
    min-height: calc(var(--header-height) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }

  .language-dialog__header .dialog-close {
    min-width: 0;
    margin-left: auto;
    white-space: nowrap;
  }

  .language-dialog__body {
    width: 100%;
    min-height: 0;
    align-content: start;
    grid-template-rows: auto auto 1fr;
    padding: clamp(1.5rem, 4svh, 2.5rem) 0 max(1.75rem, env(safe-area-inset-bottom));
    margin: 0;
    padding-inline: 4px;
    overflow: auto;
    overscroll-behavior: contain;
  }

  .language-dialog nav {
    margin-top: 1rem;
  }

  .language-dialog nav a {
    min-height: 3.75rem;
    grid-template-columns: 2.5rem minmax(0, 1fr) 1rem;
    gap: 0.5rem;
  }

  .language-dialog nav a strong {
    font-size: var(--step-2);
    line-height: 1.15;
  }

  .page-masthead {
    min-height: auto;
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: 1.5rem;
    padding: 7rem var(--pad) 4rem;
  }

  .page-masthead__rail {
    left: var(--pad);
    width: 4rem;
    padding-top: 7rem;
  }

  .page-masthead__copy {
    grid-column: 2;
  }

  .page-masthead h1 {
    max-width: 12ch;
    font-size: clamp(3.35rem, 14vw, 6rem);
  }

  .masthead-coordinate,
  .masthead-number,
  .pdf-link {
    grid-column: 2;
    margin-top: 2rem;
  }

  .masthead-number strong {
    font-size: 4rem;
  }

  .portrait-spread,
.edition-opening,
.contact-layout {
    grid-template-columns: 1fr;
  }

  .portrait-spread figure,
.edition-opening > figure {
    width: min(82%, 28rem);
  }

  .section-heading {
    align-items: start;
    flex-direction: column;
  }

  .publication-pair {
    grid-template-columns: 1fr;
    gap: 6rem;
  }

  .publication-card {
    grid-template-columns: minmax(9rem, 0.65fr) minmax(0, 1.35fr);
  }

  .editorial-grid {
    grid-template-columns: 1fr;
  }

  .editorial-grid__meta {
    display: flex;
    justify-content: space-between;
  }

  .editorial-grid__meta span {
    margin-top: 0;
  }

  .purpose-ledger,
  .fact-ledger {
    grid-template-columns: 1fr;
  }

  .city-relation {
    min-height: 30rem;
    grid-template-columns: 1fr;
  }

  .message-layout {
    grid-template-columns: 1fr;
  }

  .message-layout aside {
    position: static;
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    align-items: end;
    gap: 1.5rem;
  }

  .message-layout aside img {
    max-width: 8rem;
  }

  .message-layout aside p {
    max-width: none;
  }

  .record-update {
    grid-template-columns: 1fr;
  }

  .roster-group,
  .roster--compact .roster-group {
    grid-template-columns: 1fr;
  }

  .member-register ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .activity-year {
    grid-template-columns: 1fr;
  }

  .activity-year > header {
    position: static;
    padding-bottom: 1.5rem;
    border-bottom: var(--hairline) solid var(--edge-strong);
  }

  .gallery-item,
  .gallery-item--1,
  .gallery-item--2,
  .gallery-item--4,
  .gallery-item--5,
  .gallery-item--6 {
    grid-column: span 6;
    padding-top: 0;
  }

  .gallery-item--1 .gallery-trigger img,
  .gallery-item--6 .gallery-trigger img {
    aspect-ratio: 4 / 3;
  }

  .lightbox footer {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .lightbox footer nav {
    justify-content: space-between;
  }

  .edition-contents article {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }

  .edition-contents article > p,
  .edition-contents .line-link {
    grid-column: 2;
  }

  .scan--1,
  .scan--2,
  .scan--3,
  .scan--4,
  .scan--5 {
    grid-column: span 6;
    padding-top: 0;
  }

  .footer-main {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 52rem) and (max-height: 42rem) {
  .language-dialog__body {
    padding-top: 1.5rem;
  }

}


@media (max-width: 36rem) {
  :root {
    --pad: 1.25rem;
  }

  .brand img {
    height: 1.9rem;
  }

  .header-action {
    padding-inline: 0.4rem;
  }

  .menu-glyph {
    display: none;
  }

  .page-masthead {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 1rem;
  }

  .page-masthead__rail {
    width: 2.5rem;
  }

  html[data-locale="en"] .page-masthead h1 {
    font-size: clamp(2.25rem, 9vw, 3.5rem);
  }

  html[data-locale="en"] .section-heading h2,
html[data-locale="en"] .contact-callout h2 {
    font-size: clamp(2.65rem, 12vw, 3.4rem);
  }

  .publication-card {
    grid-template-columns: 1fr;
  }

  .publication-card__cover {
    width: min(80%, 20rem);
  }

  .purpose-ledger li {
    grid-template-columns: 2rem 0.55fr 1fr;
    gap: 0.75rem;
  }

  .fact-ledger dl > div {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .roster-group ul,
  .roster--compact .roster-group ul {
    grid-template-columns: 1fr;
  }

  .member-register ol {
    grid-template-columns: 1fr;
  }

  .activity-event {
    grid-template-columns: 1fr;
  }

  .gallery-toolbar {
    flex-wrap: wrap;
    padding-block: 0.75rem;
  }

  .gallery-section {
    padding-top: var(--space-3);
  }

  .gallery-toolbar p {
    width: 100%;
    margin-left: 0.85rem;
  }

  .gallery-item,
  .gallery-item--1,
  .gallery-item--2,
  .gallery-item--4,
  .gallery-item--5,
  .gallery-item--6 {
    grid-column: 1 / -1;
  }

  .gallery-trigger__caption {
    grid-template-columns: 6rem minmax(0, 1fr);
  }

  .lightbox__media img {
    max-height: 48vh;
  }

  .lightbox footer nav button span {
    display: none;
  }

  .scan--1,
  .scan--2,
  .scan--3,
  .scan--4,
  .scan--5 {
    grid-column: 1 / -1;
  }

  .contact-ledger > a,
  .contact-ledger > p {
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
  }

  .contact-ledger strong {
    grid-column: 1;
    font-size: 1rem;
  }

  .contact-ledger .arrow-icon {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .contact-map {
    align-items: start;
    flex-direction: column;
    justify-content: center;
  }

  .contact-map > div {
    width: 100%;
    font-size: var(--step-2);
  }

  .contact-map > p {
    text-align: left;
  }

  .contact-callout,
  .pdf-callout {
    gap: 1rem;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 0.5rem;
  }
}


@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro: 1ms;
    --dur-state: 1ms;
    --dur-reveal: 1ms;
  }

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}


/* ---------------------------------------------------------------------------
   Institution-first home (2026-07 revision)
--------------------------------------------------------------------------- */

.institution {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  padding-top: calc(var(--header-height) + clamp(3rem, 9vh, 7rem));
  padding-bottom: clamp(3rem, 8vh, 6rem);
}

.institution__seal {
  width: clamp(8.5rem, 16vw, 13.5rem);
  height: auto;
  color: var(--device);
}

.institution__copy {
  display: grid;
  gap: 1.5rem;
  justify-items: start;
}

.institution h1 {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.12;
}

html[data-locale="en"] .institution h1 {
  letter-spacing: -0.015em;
  line-height: 1.04;
}

.institution__lead {
  color: var(--ink-soft);
  font-size: var(--step-1);
  line-height: 1.7;
}

html[data-locale="en"] .institution__lead { max-width: 52ch; }
html:not([data-locale="en"]) .institution__lead { max-width: 26em; }

@media (max-width: 52rem) {
  .institution {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-top: calc(var(--header-height) + 2.5rem);
  }

  .institution__seal { width: clamp(6.5rem, 24vw, 8.5rem); }
}


/* Twin-city hinge band */
.twin-band {
  --duration-map-reveal: 1050ms;
  padding: clamp(3rem, 8vh, 6rem) var(--pad) clamp(2.5rem, 6vh, 5rem);
  border-top: var(--hairline) solid var(--edge);
  border-bottom: var(--hairline) solid var(--edge);
  background: var(--surface);
}

.twin-band__label {
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
  text-align: center;
}

.twin-band__maps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  width: min(100%, var(--frame));
  margin-inline: auto;
}

.twin-band__city {
  display: grid;
  gap: 1.25rem;
}

.twin-band__map-frame {
  display: grid;
  align-items: center;
}

.twin-band__map-frame img,
.twin-band__map-art {
  width: 100%;
  height: auto;
}

.twin-band__city figcaption {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  color: var(--ink-muted);
  font-family: var(--font-meta);
  font-size: var(--step--1);
}

.twin-band__city-name {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: 0.3em;
}

.twin-band__hinge {
  display: grid;
  gap: 0.9rem;
  justify-items: center;
  color: var(--device-strong);
  font-family: var(--font-meta);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}

.twin-band__hinge i {
  width: 1px;
  height: clamp(3rem, 9vh, 7rem);
  background: var(--device);
}

.twin-band__hinge b {
  width: 0.55rem;
  height: 0.55rem;
  background: var(--device);
  transform: rotate(45deg);
}

.twin-band__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  width: min(100%, var(--frame));
  margin: clamp(2rem, 5vh, 3.5rem) auto 0;
}

.twin-band__foot blockquote {
  max-width: 30em;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: var(--step-1);
}

.twin-band__credit {
  color: var(--ink-muted);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
}

@media (max-width: 52rem) {
  .twin-band__maps { grid-template-columns: 1fr; }

  .twin-band__hinge {
    grid-auto-flow: column;
    align-items: center;
    justify-content: center;
  }

  .twin-band__hinge i {
    width: clamp(2rem, 10vw, 4rem);
    height: 1px;
  }
}


/* Bento grid of real content */
.home-bento {
  padding-block: clamp(4rem, 10vh, 8rem) clamp(3rem, 8vh, 6rem);
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}

.bento-tile {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.9rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: var(--hairline) solid var(--edge);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition:
    border-color var(--dur-state) var(--ease-state),
    transform var(--dur-state) var(--ease-enter);
}

a.bento-tile:hover {
  border-color: var(--device);
  transform: translateY(-4px);
}

.bento-tile h2,
.bento-tile h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
}

.bento-tile h2 { font-size: var(--step-3); }
.bento-tile h3 { font-size: var(--step-1); }

.bento-tile p:not(.eyebrow) {
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: 1.65;
}

.bento-tile--intro {
  grid-column: span 4;
  gap: 1.25rem;
  padding: clamp(2rem, 4vw, 3.5rem);
}

.bento-tile--chairman {
  grid-column: span 2;
  padding: 0;
  overflow: hidden;
}

.bento-tile--chairman img {
  width: 100%;
  height: 15rem;
  object-fit: cover;
  object-position: top;
}

.bento-tile--chairman div,
.bento-tile--gallery div {
  display: grid;
  gap: 0.6rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.bento-tile--stat { grid-column: span 2; }

.bento-stat {
  color: var(--device);
  font-family: var(--font-display);
  font-size: var(--step-3);
  letter-spacing: 0.02em;
  line-height: 1;
}

.bento-tile--gallery {
  grid-column: span 3;
  padding: 0;
  overflow: hidden;
}

.bento-tile--gallery img {
  width: 100%;
  height: clamp(11rem, 22vw, 15rem);
  object-fit: cover;
}

.bento-tile--publications {
  grid-column: span 3;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem;
}

.bento-covers {
  display: flex;
  gap: 0.75rem;
}

.bento-covers img {
  width: 5.5rem;
  height: auto;
  border: var(--hairline) solid var(--edge);
}

.bento-tile--publications div {
  display: grid;
  gap: 0.6rem;
}

@media (max-width: 64rem) {
  .bento-tile--intro { grid-column: span 6; }
  .bento-tile--chairman { grid-column: span 3; }
  .bento-tile--stat { grid-column: span 3; }
  .bento-tile--gallery { grid-column: span 6; }
  .bento-tile--publications { grid-column: span 6; }
}


@media (max-width: 44rem) {
  .bento-grid > .bento-tile { grid-column: span 6; }
  .bento-tile--chairman img { height: 17rem; }
}


/* Featured inscription */
.home-inscription {
  padding-bottom: clamp(4rem, 10vh, 8rem);
}

.home-inscription__frame {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(2rem, 5vw, 4.5rem);
  border: var(--hairline) solid var(--edge);
  background: var(--surface);
}

.home-inscription__plate img {
  width: 100%;
  height: auto;
  border: var(--hairline) solid var(--edge);
}

.home-inscription__copy {
  display: grid;
  gap: 1.1rem;
  justify-items: start;
}

.home-inscription__text {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.25;
}

.home-inscription__reading {
  color: var(--ink-soft);
  font-style: italic;
}

.home-inscription__attribution {
  color: var(--device-strong);
  font-family: var(--font-meta);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
}

.home-inscription__body {
  max-width: 40em;
  color: var(--ink-soft);
  font-size: var(--step--1);
}

@media (max-width: 52rem) {
  .home-inscription__frame { grid-template-columns: 1fr; }
}


/* Guest inscriptions route */
.inscription-book {
  padding-block: clamp(3rem, 8vh, 6rem) 0;
}

.plate-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: var(--space-6);
}

.plate,
.letter {
  display: grid;
  align-content: start;
  gap: 1rem;
}

.plate__media {
  display: block;
  border: var(--hairline) solid var(--edge);
  background: var(--surface);
  transition: border-color var(--dur-micro) var(--ease-state);
}

.plate__media:hover,
.plate__media:focus-visible {
  border-color: var(--device);
}

.plate__media img {
  width: 100%;
  height: auto;
}

.plate__text {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: 0.1em;
}

.plate__reading {
  color: var(--ink-soft);
  font-size: var(--step--1);
  font-style: italic;
}

.plate__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  align-items: baseline;
  color: var(--ink-muted);
  font-size: var(--step--1);
}

.plate__meta strong {
  color: var(--ink);
  font-weight: 650;
}

.letters-title {
  margin-top: var(--space-8);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
}

.letter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: var(--space-4);
}

.letter__summary {
  color: var(--ink-soft);
  font-size: var(--step--1);
}

@media (max-width: 64rem) {
  .plate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
  .plate-grid,
  .letter-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Review round 1 corrections
--------------------------------------------------------------------------- */

/* Vermilion stays for the device's own moments. */
.institution .eyebrow,
.home-inscription__copy .eyebrow,
.page-masthead .eyebrow {
  color: var(--device-strong);
}

/* Dark dialogs: device colour steps to the AA-passing on-dark tone. */
.dialog-shell .city-pair,
.language-dialog .city-pair {
  color: var(--device-on-dark);
}

.language-dialog .eyebrow {
  color: var(--device-on-dark);
}

/* The hero owns the first viewport in every locale. */
.institution {
  box-sizing: border-box;
  min-height: 100svh;
  align-content: center;
}

/* Mission line never orphans a character: clamp to the 4-character measure. */
@media (max-width: 27rem) {
  .institution h1 {
    font-size: clamp(2.05rem, 9vw, 2.6rem);
  }
}

/* Hinge with mass: double-rule rails, knockout pin echoing the seal diamond. */
.twin-band__hinge i {
  width: 3px;
  border-inline: 1px solid var(--device);
  background: transparent;
}

.twin-band__hinge b {
  position: relative;
  width: 0.8rem;
  height: 0.8rem;
}

.twin-band__hinge b::after {
  position: absolute;
  inset: 27%;
  background: var(--surface);
  content: "";
}

@media (max-width: 52rem) {
  .twin-band__hinge i {
    width: clamp(2rem, 10vw, 4rem);
    height: 3px;
    border-block: 1px solid var(--device);
    border-inline: 0;
  }
}

/* Stat tiles in the site's ledger grammar — hanging numerals, no boxes. */
.bento-tile--stat {
  padding: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
  border: 0;
  border-top: var(--hairline) solid var(--edge-strong);
  background: transparent;
}

a.bento-tile--stat:hover {
  border-color: transparent;
  border-top-color: var(--device);
  transform: none;
}

/* Narrow header: bilingual labels drop to their script-appropriate half. */
@media (max-width: 26rem) {
  .header-action__alt {
    display: none;
  }

  .site-header {
    gap: 0.75rem;
  }

  .header-actions {
    gap: 0;
  }

  .header-action {
    gap: 0.45rem;
    padding-inline: 0.4rem;
  }
}

.header-action__alt {
  font-style: normal;
}

/* Traditional-script artifacts (plates, brand, city names) set in the TC face
   regardless of locale — they are reproductions, not translated interface. */
[lang="zh-Hant"] {
  font-family: "HHEA Serif TC", var(--font-display), serif;
}

html[data-locale="en"] .brand-wordmark strong {
  font-family: "HHEA Serif TC", "Songti TC", "Songti SC", serif;
}

/* ==========================================================================
   Approved production direction — Shared Crossbar / 共梁
   The prior warm-paper rules remain above as route-layout fallbacks. This
   final layer freezes the owner-approved cool institutional system.
   ========================================================================== */

:root {
  --raw-paper: #ffffff;
  --raw-paper-light: #f7f8fa;
  --raw-paper-deep: #e2e6ea;
  --raw-ink: #101820;
  --raw-ink-soft: #404a54;
  --raw-ink-muted: #69737d;
  --raw-night: #0b1118;
  --raw-vermilion: #a72b27;
  --raw-vermilion-dark: #86211f;
  --raw-vermilion-soft: #b93430;
  --raw-vermilion-softer: #ca5651;
  --raw-gold: #69737d;

  --canvas: var(--raw-paper);
  --surface: var(--raw-paper-light);
  --edge: var(--raw-paper-deep);
  --edge-strong: #c9d0d7;
  --ink: var(--raw-ink);
  --ink-soft: var(--raw-ink-soft);
  --ink-muted: var(--raw-ink-muted);
  --device: var(--raw-vermilion);
  --device-strong: var(--raw-vermilion-dark);
  --device-on-dark: #d9635e;
  --device-on-dark-strong: #ef817a;
  --plate: #ffffff;
  --focus: var(--raw-vermilion);
  --inverse: #f2f4f6;
  --inverse-muted: #909ba5;

  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue",
    "PingFang HK", "PingFang TC", "PingFang SC", "Microsoft JhengHei", sans-serif;
  --font-reading: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
    "PingFang HK", "PingFang TC", "PingFang SC", "Microsoft JhengHei", sans-serif;
  --font-meta: var(--font-reading);
  --font-latin-display: var(--font-display);
  --font-latin-reading: var(--font-reading);

  --step--1: 0.75rem;
  --step-0: 1rem;
  --step-1: clamp(1.08rem, 1.3vw, 1.28rem);
  --step-2: clamp(1.6rem, 2vw, 2.25rem);
  --step-3: clamp(2.1rem, 3vw, 3.25rem);
  --step-4: clamp(2.6rem, 4.1vw, 4.25rem);
  --step-5: clamp(3.6rem, 6.6vw, 6.8rem);

  --frame: 86rem;
  --pad: clamp(1.25rem, 4vw, 4.5rem);
  --header-height: 11.9rem;
  --radius-control: 0.625rem;
  --radius-card: 0.875rem;
  --shadow-card: 0 2px 4px rgb(10 18 28 / 0.06), 0 14px 28px rgb(10 18 28 / 0.08),
    0 30px 70px rgb(10 18 28 / 0.1);
  --shadow-card-hover: 0 4px 8px rgb(10 18 28 / 0.08), 0 24px 45px rgb(10 18 28 / 0.12),
    0 42px 90px rgb(10 18 28 / 0.14);
  --shadow-object: 0 2px 4px rgb(3 8 14 / 0.08), 0 18px 40px rgb(3 8 14 / 0.16),
    0 40px 100px rgb(3 8 14 / 0.22);
  --dur-micro: 180ms;
  --dur-state: 180ms;
  --dur-reveal: 600ms;
  --ease-enter: cubic-bezier(0.22, 0.61, 0.21, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.85, 1);
  --ease-state: cubic-bezier(0.22, 0.61, 0.21, 1);
}

html[data-locale="yue"],
html[data-locale="en"] {
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue",
    "PingFang HK", "PingFang TC", "PingFang SC", "Microsoft JhengHei", sans-serif;
  --font-reading: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
    "PingFang HK", "PingFang TC", "PingFang SC", "Microsoft JhengHei", sans-serif;
  --font-meta: var(--font-reading);
}

html {
  scroll-padding-top: 1rem;
}

body {
  min-width: 20rem;
  background: var(--canvas);
  font-size: var(--step-0);
  line-height: 1.65;
}

body::before,
body::after {
  display: none;
}

[lang="zh-Hant"],
html[data-locale="en"] .brand-wordmark strong {
  font-family: var(--font-display);
}

.section-shell {
  width: min(calc(100% - 2 * var(--pad)), var(--frame));
}

.eyebrow {
  color: var(--ink-soft);
  font-size: 0.73rem;
  font-weight: 750;
  letter-spacing: 0.15em;
  line-height: 1.3;
}

.line-link,
.ink-link,
.light-link,
.text-link {
  border-color: currentcolor;
  color: inherit;
}

.site-header,
.site-header.is-scrolled,
body:not(.route-home) .site-header {
  position: relative;
  inset: auto;
  z-index: 100;
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  background: var(--canvas);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.utility-bar {
  display: flex;
  min-height: 2rem;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad);
  background: var(--raw-night);
  color: var(--inverse);
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.12em;
}

.utility-bar p {
  margin: 0;
}

.utility-actions {
  display: flex;
  align-self: stretch;
  align-items: center;
  gap: 1rem;
}

.utility-actions a,
.utility-actions button {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.utility-actions > span {
  width: 1px;
  height: 0.75rem;
  background: rgb(255 255 255 / 0.36);
}

.identity-bar {
  position: relative;
  display: grid;
  min-height: 6.25rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: 0 var(--pad);
  border-bottom: 1px solid var(--edge);
}

.brand--left {
  min-width: 0;
  justify-self: start;
}

.brand {
  gap: 0.85rem;
}

.brand-inline-lockup {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 1rem;
}

.brand-original-mark {
  width: auto;
  height: 3.5rem;
  flex: 0 0 auto;
  object-fit: contain;
}

.brand-inline-lockup__name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: clamp(0.85rem, 1.6vw, 1.5rem);
  line-height: 1.16;
}

.brand-inline-lockup__name strong,
.brand-inline-lockup__name > span {
  font-size: clamp(0.78rem, 0.72rem + 0.18vw, 0.92rem);
  font-style: normal;
  font-weight: 720;
}

.brand-inline-lockup__name strong {
  flex: 0 0 auto;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.brand-inline-lockup__name > span {
  position: relative;
  padding-left: clamp(0.85rem, 1.6vw, 1.5rem);
  color: var(--ink-soft);
  font-family: var(--font-latin-reading);
  letter-spacing: 0.025em;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand-inline-lockup__name > span::before {
  position: absolute;
  top: 0.1em;
  bottom: 0.1em;
  left: 0;
  width: 1px;
  background: var(--edge-strong);
  content: "";
}

.brand .brand-seal {
  width: 3.75rem;
  height: 3.75rem;
}

.brand-wordmark {
  gap: 0.28rem;
}

.brand-wordmark strong {
  font-family: var(--font-display);
  font-size: 1.42rem;
  font-weight: 750;
  letter-spacing: 0.07em;
}

.brand-wordmark small {
  color: var(--ink-soft);
  font-size: 0.46rem;
  font-weight: 650;
  letter-spacing: 0.12em;
}

.identity-actions {
  display: flex;
  justify-content: flex-end;
}

.language-button,
.mobile-menu-button {
  display: inline-flex;
  min-height: 2.8rem;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
}

.language-button > svg:first-child {
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.8;
}

.language-button > svg:last-child {
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.5;
}

.mobile-menu-button {
  display: none;
}

.primary-nav {
  position: relative;
  min-height: 3.65rem;
  padding: 0 var(--pad);
  border-bottom: 1px solid var(--edge);
}

.primary-nav > ul {
  display: flex;
  min-height: 3.65rem;
  max-width: var(--frame);
  align-items: stretch;
  justify-content: center;
  gap: clamp(2rem, 4vw, 4.25rem);
  margin: 0 auto;
}

.primary-nav > ul > li {
  display: flex;
  align-items: stretch;
}

.primary-nav > ul > li > a,
.primary-nav > ul > li > button {
  position: relative;
  display: inline-flex;
  min-height: 3.65rem;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.primary-nav > ul > li > a::after,
.primary-nav > ul > li > button::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: var(--device);
  content: "";
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 320ms var(--ease-enter);
}

.primary-nav > ul > li:hover > a::after,
.primary-nav > ul > li:hover > button::after,
.primary-nav > ul > li.is-open > button::after,
.primary-nav > ul > li.is-current > button::after,
.primary-nav > ul > li > a[aria-current="page"]::after {
  transform: scaleX(1);
}

.primary-nav button > svg {
  width: 0.85rem;
  height: 0.85rem;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.5;
  transition: transform var(--dur-state);
}

.primary-nav li.is-open button > svg {
  transform: rotate(180deg);
}

.nav-panel {
  visibility: hidden;
  position: absolute;
  z-index: 20;
  top: 100%;
  right: 0;
  left: 0;
  display: grid;
  min-height: 20rem;
  grid-template-columns: minmax(16rem, 0.8fr) minmax(28rem, 1.5fr) minmax(13rem, 0.55fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding: 3.25rem max(var(--pad), calc((100vw - var(--frame)) / 2));
  border-top: 1px solid var(--edge);
  background: rgb(255 255 255 / 0.99);
  box-shadow: 0 26px 55px rgb(8 16 24 / 0.14);
  opacity: 0;
  transform: translateY(-0.75rem);
  transition: visibility 0s linear 320ms, opacity 320ms var(--ease-enter),
    transform 320ms var(--ease-enter);
}

.primary-nav li.is-open .nav-panel {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

.nav-panel__intro p {
  margin-bottom: 1.25rem;
  color: var(--device);
  font-size: 0.67rem;
  font-weight: 750;
  letter-spacing: 0.16em;
}

.nav-panel__intro h2 {
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2.5vw, 2.7rem);
  font-weight: 720;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.nav-panel__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  border-top: 1px solid var(--edge);
}

.nav-panel__links a {
  display: flex;
  min-height: 7.5rem;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.35rem 2.5rem 1.35rem 0;
  border-bottom: 1px solid var(--edge);
  text-decoration: none;
}

.nav-panel__links a:nth-child(even) {
  padding-left: 1.5rem;
  border-left: 1px solid var(--edge);
}

.nav-panel__links span {
  font-size: 1.2rem;
  font-weight: 700;
}

.nav-panel__links small,
.nav-panel figure figcaption {
  color: var(--ink-muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

.nav-panel figure {
  margin: 0;
}

.nav-panel figure img {
  width: 100%;
  height: 13.5rem;
  border-radius: 0.4rem;
  object-fit: cover;
}

.nav-panel figure img[src*="/inscriptions/"] {
  background: #fff;
  object-fit: contain;
}

.nav-panel figure figcaption {
  margin-top: 0.75rem;
}

.mobile-menu-title {
  color: var(--inverse);
  font-size: 1.1rem;
  font-weight: 700;
}

.mobile-menu-title span {
  margin-left: 0.5rem;
  color: var(--inverse-muted);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
}

.language-dialog {
  width: 16rem;
  height: auto;
  max-height: calc(100dvh - 10rem);
  padding: 0;
  border: 1px solid var(--edge);
  border-radius: var(--radius-control);
  margin: 7.6rem var(--pad) auto auto;
  background: var(--canvas);
  box-shadow: var(--shadow-card);
}

.language-dialog::backdrop {
  background: rgb(11 17 24 / 0.16);
}

.language-dialog__inner {
  display: block;
  height: auto;
  min-height: 0;
  padding: 1rem;
}

.language-dialog__header,
.dialog-folio--light {
  display: none;
}

.language-dialog__body {
  display: block;
  width: auto;
  padding: 0;
}

.language-dialog__body > .eyebrow {
  padding: 0.35rem 0.45rem 0.75rem;
  border-bottom: 1px solid var(--edge);
}

.language-dialog nav {
  margin-top: 0.65rem;
  border: 0;
}

.language-dialog nav a {
  min-height: 3.25rem;
  grid-template-columns: 2.25rem 1fr auto;
  padding: 0 0.45rem;
  border: 0;
  border-radius: 0.35rem;
}

.language-dialog nav a:hover {
  background: var(--surface);
}

.language-dialog nav a span {
  font-size: 0.68rem;
  font-weight: 800;
}

.language-dialog nav a strong {
  font-family: var(--font-reading);
  font-size: 0.88rem;
  font-weight: 650;
}

.language-dialog nav a[aria-current="page"] {
  color: var(--device);
}

.language-dialog nav a i {
  width: 0.46rem;
  height: 0.46rem;
}

body:not(.route-home) main {
  padding-top: 0;
}

.page-masthead {
  isolation: isolate;
  overflow: hidden;
  min-height: min(38rem, calc(100svh - var(--header-height)));
  grid-template-columns: minmax(0, 1fr) minmax(10rem, 20vw);
  align-items: end;
  gap: 3rem;
  padding: clamp(5rem, 10vh, 8rem) max(var(--pad), calc((100vw - var(--frame)) / 2))
    clamp(4rem, 8vh, 6rem);
  border-bottom: 1px solid var(--edge);
  background: var(--surface);
}

.page-masthead--media {
  min-height: calc(100svh - var(--header-height));
}

.page-masthead__maps {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  color: var(--ink);
  pointer-events: none;
}

.page-masthead__maps img {
  position: absolute;
  width: min(42rem, 48vw);
  max-width: none;
  opacity: 0.055;
  filter: brightness(0) saturate(100%) invert(20%) sepia(53%) saturate(2770%)
    hue-rotate(341deg) brightness(86%) contrast(91%);
}

.page-masthead__maps img:first-child {
  top: 7%;
  right: 35%;
  transform: rotate(-4deg);
}

.page-masthead__maps img:last-child {
  right: -4%;
  bottom: -12%;
  transform: rotate(5deg);
}

.page-masthead__media {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.08) 24%, #000 54%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.08) 24%, #000 54%, #000 100%);
}

.page-masthead__media::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--surface) 0%, rgb(244 246 248 / 0.94) 26%, rgb(244 246 248 / 0.2) 62%, transparent 82%),
    linear-gradient(180deg, rgb(244 246 248 / 0.16), rgb(16 24 32 / 0.08));
  content: "";
}

.page-masthead__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--masthead-focus, center);
  filter: saturate(0.68) contrast(0.92) brightness(1.03);
  transform: scale(1.015);
}

.page-masthead__media--evidence img {
  filter: saturate(0.62) contrast(0.88) brightness(1.04);
}

.page-masthead__media--artifact img {
  filter: saturate(0.54) contrast(0.9) brightness(1.06);
}

.page-masthead--media .page-masthead__maps {
  z-index: -2;
  opacity: 0.34;
}

.page-masthead--media .masthead-number,
.page-masthead--media .pdf-link {
  color: #fff;
  text-shadow: 0 1px 1.25rem rgb(11 17 24 / 0.78);
}

.page-masthead--media .pdf-link {
  border-color: rgb(255 255 255 / 0.48);
}

.page-masthead__rail {
  position: absolute;
  top: clamp(3rem, 7vh, 5rem);
  right: max(var(--pad), calc((100vw - var(--frame)) / 2));
  left: max(var(--pad), calc((100vw - var(--frame)) / 2));
  display: grid;
  width: auto;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto;
  align-items: center;
  gap: 1rem;
  padding: 0;
  color: var(--ink-muted);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.13em;
}

.page-masthead__rail i {
  position: relative;
  width: auto;
  height: 1px;
  margin: 0;
  background: var(--edge-strong);
}

.page-masthead__rail i::after {
  position: absolute;
  top: 50%;
  right: 50%;
  width: 0.46rem;
  height: 0.46rem;
  background: var(--device);
  content: "";
  transform: translate(50%, -50%) rotate(45deg);
}

.page-masthead__copy {
  grid-column: 1;
  max-width: 68rem;
}

.page-masthead h1,
html[data-locale="en"] .page-masthead h1 {
  max-width: 13ch;
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(4rem, 8vw, 7.5rem);
  font-weight: 760;
  letter-spacing: -0.06em;
  line-height: 0.94;
  overflow-wrap: anywhere;
}

.page-lead {
  max-width: 48rem;
  margin-top: 2rem;
  color: var(--ink-soft);
  font-size: var(--step-1);
}

.masthead-coordinate,
.masthead-number,
.pdf-link {
  grid-column: 2;
}

.section-heading h2,
.contact-callout h2,
.city-relation h2,
.purpose-ledger h2,
.fact-ledger h2,
.edition-opening h2,
.publication-card h3,
.prose--large {
  font-family: var(--font-display);
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(40rem, calc(100svh - var(--header-height)), 53rem);
  overflow: hidden;
  background: var(--raw-night);
  color: #fff;
}

.hero-slide {
  position: absolute;
  z-index: -3;
  inset: 0;
  opacity: 0;
  transform: scale(1.035);
  transition: opacity 600ms var(--ease-enter), transform 1.2s var(--ease-enter);
}

.hero-slide.is-active {
  opacity: 1;
  transform: scale(1);
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
}

.hero-slide[data-hero-slide="0"] img {
  object-position: center 43%;
}

.hero-scrim {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(7 14 22 / 0.97) 0%, rgb(8 17 28 / 0.9) 26%,
      rgb(8 17 28 / 0.52) 55%, rgb(8 17 28 / 0.12) 78%),
    linear-gradient(0deg, rgb(7 12 18 / 0.62) 0%, transparent 43%);
}

.hero-scrim::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, transparent 0 46%, rgb(255 255 255 / 0.055) 46.1% 46.2%, transparent 46.3%),
    linear-gradient(135deg, transparent 0 53%, rgb(167 43 39 / 0.11) 53.1% 53.2%, transparent 53.3%);
  content: "";
  mask-image: linear-gradient(90deg, black, transparent 58%);
}

.hero-content {
  position: relative;
  display: flex;
  min-height: inherit;
  max-width: var(--frame);
  align-items: center;
  padding: clamp(4rem, 7vh, 6rem) var(--pad) 8.25rem;
  margin: 0 auto;
}

.hero-copy {
  visibility: hidden;
  position: absolute;
  width: min(47rem, calc(100vw - 2 * var(--pad)));
  opacity: 0;
  transform: translateY(1.4rem);
  transition: visibility 0s linear 600ms, opacity 600ms var(--ease-enter),
    transform 600ms var(--ease-enter);
}

.hero-copy.is-active {
  visibility: visible;
  position: relative;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

.js .hero-copy > .hero-bridge,
.js .hero-copy > h1,
.js .hero-copy > h2,
.js .hero-copy > p,
.js .hero-copy > .primary-button {
  opacity: 0;
  transform: translateY(1rem);
}

.js .hero-copy.is-active > .hero-bridge,
.js .hero-copy.is-active > h1,
.js .hero-copy.is-active > h2,
.js .hero-copy.is-active > p,
.js .hero-copy.is-active > .primary-button {
  animation: crossbar-relay 520ms var(--ease-enter) both;
}

.js .hero-copy.is-active > h1,
.js .hero-copy.is-active > h2 {
  animation-delay: 70ms;
}

.js .hero-copy.is-active > p {
  animation-delay: 140ms;
}

.js .hero-copy.is-active > .primary-button {
  animation-delay: 210ms;
}

.hero-bridge {
  display: grid;
  width: min(70rem, calc(100vw - 2 * var(--pad)));
  grid-template-columns: auto minmax(2rem, 1fr) auto minmax(2rem, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.45rem;
  color: rgb(255 255 255 / 0.8);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.hero-bridge b,
.fact-crossbar b {
  height: 1px;
  background: currentcolor;
  opacity: 0.46;
}

.hero-bridge i,
.fact-crossbar i,
.inscription-crossbar i {
  width: 0.46rem;
  height: 0.46rem;
  background: var(--device);
  transform: rotate(45deg);
}

.hero h1,
.hero h2 {
  max-width: 9.5em;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 760;
  letter-spacing: -0.055em;
  line-height: 0.98;
  text-wrap: balance;
}

html[data-locale="en"] .hero h1,
html[data-locale="en"] .hero h2 {
  max-width: 10em;
  font-size: clamp(3.5rem, 6.2vw, 6.3rem);
}

.hero-copy > p {
  max-width: 32rem;
  margin-top: 2rem;
  color: rgb(255 255 255 / 0.8);
  font-size: var(--step-1);
  line-height: 1.65;
  text-wrap: pretty;
}

.primary-button {
  display: inline-flex;
  min-width: 11.25rem;
  min-height: 3.55rem;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0 1.35rem;
  margin-top: 2.2rem;
  border-radius: var(--radius-control);
  background: var(--device);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 750;
  text-decoration: none;
  transition: background var(--dur-state), transform var(--dur-state);
}

.primary-button:hover {
  background: var(--device-strong);
  transform: translateY(-2px);
}

.hero-controls {
  position: absolute;
  right: var(--pad);
  bottom: 2.8rem;
  left: var(--pad);
  display: flex;
  max-width: calc(var(--frame) - 2 * var(--pad));
  align-items: center;
  gap: 1.8rem;
  margin: 0 auto;
}

.hero-pagination {
  display: flex;
  gap: 0.65rem;
}

.hero-pagination button {
  display: grid;
  width: 1.2rem;
  height: 1.2rem;
  place-items: center;
}

.hero-pagination button::before {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.36);
  content: "";
}

.hero-pagination button.is-active::before {
  border-radius: 0.08rem;
  background: var(--device);
  transform: rotate(45deg) scale(0.9);
}

.hero-count {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: rgb(255 255 255 / 0.7);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.hero-count strong {
  color: #fff;
  font-size: 0.84rem;
}

.hero-count span {
  width: 2.8rem;
  height: 1px;
  background: rgb(255 255 255 / 0.4);
}

.hero-count em {
  font-style: normal;
}

.hero-arrows {
  display: flex;
  gap: 0.65rem;
  margin-left: auto;
}

.hero-arrows button {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 0.55);
  border-radius: 50%;
  color: #fff;
}

.hero-arrows button:first-child .arrow-icon {
  transform: rotate(180deg);
}

.hero-arrows button:hover {
  border-color: #fff;
  background: rgb(255 255 255 / 0.12);
}

.priority-links {
  position: relative;
  z-index: 2;
  padding: 2.75rem var(--pad) 3.25rem;
  background: var(--canvas);
}

.priority-links::before {
  position: absolute;
  top: 2.75rem;
  right: max(var(--pad), calc((100vw - var(--frame)) / 2));
  left: max(var(--pad), calc((100vw - var(--frame)) / 2));
  height: 1px;
  background: var(--edge-strong);
  content: "";
}

.priority-links::after {
  position: absolute;
  top: calc(2.75rem - 0.24rem);
  left: 50%;
  width: 0.48rem;
  height: 0.48rem;
  background: var(--device);
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

.priority-grid {
  display: grid;
  max-width: var(--frame);
  grid-template-columns: 1.3fr 0.82fr 1.08fr 0.8fr;
  gap: 0;
  margin: 0 auto;
}

.priority-card {
  position: relative;
  isolation: isolate;
  min-height: 20rem;
  overflow: hidden;
  border-top: 1px solid var(--edge-strong);
  border-bottom: 1px solid var(--edge-strong);
  border-left: 1px solid var(--edge-strong);
  background: var(--raw-night);
  color: #fff;
  text-decoration: none;
}

.priority-card:last-child {
  border-right: 1px solid var(--edge-strong);
}

.priority-card > img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-enter);
}

.priority-card--inscriptions > img { object-position: center 35%; }
.priority-card--publications > img { object-position: center 19%; }
.priority-card--gallery > img { object-position: center 50%; }
.priority-card--committee > img { object-position: center 24%; }
.priority-card:hover > img { transform: scale(1.045); }

.priority-card__fallback {
  position: absolute;
  z-index: -2;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.8rem;
  background:
    linear-gradient(135deg, transparent 0 49.8%, rgb(255 255 255 / 0.07) 50% 50.2%, transparent 50.4%),
    #111923;
  color: #98a3ad;
  text-align: center;
}

.priority-card__fallback[hidden] { display: none; }

.priority-card__fallback svg {
  width: 2.5rem;
  height: 2.5rem;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.8;
}

.priority-card__fallback > span {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.76rem;
  font-weight: 720;
  letter-spacing: 0.12em;
}

.priority-card__fallback small {
  color: #909ba5;
  font-size: 0.54rem;
}

.priority-card__wash {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgb(8 16 25 / 0.28), rgb(8 16 25 / 0.92));
}

.priority-card.has-image-fallback .priority-card__wash {
  background: linear-gradient(180deg, rgb(8 16 25 / 0.2), rgb(8 16 25 / 0.68));
}

.priority-card__copy {
  position: absolute;
  right: 1.25rem;
  bottom: 1.35rem;
  left: 1.25rem;
  display: flex;
  flex-direction: column;
  padding-right: 3.6rem;
}

.priority-card__copy small {
  margin-bottom: 0.55rem;
  color: rgb(255 255 255 / 0.62);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.priority-card__copy strong {
  font-family: var(--font-display);
  font-size: 1.68rem;
  font-weight: 730;
  letter-spacing: -0.03em;
}

.priority-card__copy > span {
  max-width: 15rem;
  margin-top: 0.35rem;
  color: rgb(255 255 255 / 0.72);
  font-size: 0.78rem;
  line-height: 1.45;
}

.round-arrow {
  position: absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
}

.round-arrow .arrow-icon {
  width: 1rem;
  height: 1rem;
}

.inscription-strip {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(5.5rem, 9vw, 9rem) var(--pad);
  background:
    linear-gradient(118deg, rgb(124 137 149 / 0.075), transparent 36%),
    linear-gradient(298deg, rgb(124 137 149 / 0.05), transparent 42%),
    var(--surface);
  text-align: center;
}

.inscription-strip::before {
  position: absolute;
  z-index: -1;
  top: -18%;
  right: 8%;
  width: 38%;
  height: 138%;
  border-right: 1px solid rgb(89 101 113 / 0.08);
  border-left: 1px solid rgb(89 101 113 / 0.055);
  content: "";
  pointer-events: none;
  transform: skewX(-18deg);
}

.section-label {
  margin: 0 auto 3rem;
}

.section-label p {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 720;
  letter-spacing: 0.13em;
}

.section-label small {
  margin-left: 0.65rem;
  color: var(--ink-muted);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
}

.inscription-stage {
  position: relative;
  max-width: var(--frame);
  margin: 0 auto;
}

.inscription-crossbar {
  position: absolute;
  top: 42%;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.inscription-crossbar span {
  height: 1px;
  background: var(--ink);
  opacity: 0.26;
}

.inscription-crossbar i { margin: 0 1rem; }

.inscription-rail {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 2rem);
}

.inscription-rail a {
  display: flex;
  flex-direction: column;
  text-align: left;
  text-decoration: none;
}

.inscription-rail img {
  width: 100%;
  aspect-ratio: 40 / 55;
  border-bottom: 1px solid var(--edge-strong);
  background: #fff;
  object-fit: contain;
  object-position: center;
  transition: filter 320ms var(--ease-enter), transform 320ms var(--ease-enter);
}

.inscription-rail a:nth-child(even) { transform: translateY(1.5rem); }
.inscription-rail a:hover img { filter: contrast(1.04); transform: translateY(-0.35rem); }

.inscription-rail a > span {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 1.25rem;
}

.inscription-rail strong { font-size: 0.95rem; }
.inscription-rail small { color: var(--ink-muted); font-size: 0.75rem; }

.text-link,
.ink-link,
.light-link {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid currentcolor;
  font-size: 0.82rem;
  font-weight: 750;
  text-decoration: none;
}

.text-link { margin-top: 4.25rem; }

.about-band {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.65fr);
  gap: 3rem clamp(3rem, 9vw, 9rem);
  padding: clamp(5.5rem, 9vw, 9rem) max(var(--pad), calc((100vw - var(--frame)) / 2));
}

.about-band__heading h2,
.activity-section .section-heading h2,
.publication-band h2,
.contact-band h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 750;
  letter-spacing: -0.055em;
  line-height: 1.05;
  text-wrap: balance;
}

.about-band__body {
  align-self: end;
}

.about-band__body > p {
  color: var(--ink-soft);
  font-size: var(--step-1);
  line-height: 1.75;
}

.about-band__body .ink-link { margin-top: 2rem; }

.fact-crossbar {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(2rem, 1fr) auto minmax(2rem, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1rem;
  margin-top: 3rem;
  border-bottom: 1px solid var(--edge);
  color: var(--ink-muted);
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.13em;
}

.fact-crossbar span:last-child { text-align: right; }

.js .about-band:not(.is-counting):not(.is-counted) .fact-crossbar b {
  transform: scaleX(0);
}

.js .about-band:not(.is-counting):not(.is-counted) .fact-crossbar i {
  opacity: 0;
  transform: rotate(45deg) scale(0);
}

.about-band.is-counting .fact-crossbar b {
  animation: crossbar-draw 560ms var(--ease-enter) both;
}

.about-band.is-counting .fact-crossbar b:first-of-type {
  transform-origin: right center;
}

.about-band.is-counting .fact-crossbar b:last-of-type {
  transform-origin: left center;
}

.about-band.is-counting .fact-crossbar i {
  animation: crossbar-node 420ms var(--ease-enter) 340ms both;
}

.fact-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  border-bottom: 1px solid var(--edge);
}

.fact-row div {
  display: grid;
  min-height: 10rem;
  padding: 1.5rem 2rem 1.5rem 0;
  border-right: 1px solid var(--edge);
}

.fact-row div:not(:first-child) { padding-left: 2rem; }
.fact-row div:last-child { border-right: 0; }

.fact-row dt {
  color: var(--ink-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.fact-row dd { margin: 0; }

.fact-row .fact-value {
  align-self: end;
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: clamp(3rem, 4vw, 4.75rem);
  font-variant-numeric: tabular-nums;
  font-weight: 760;
  letter-spacing: -0.06em;
  line-height: 0.9;
}

.fact-row .fact-value.is-reel {
  display: flex;
  overflow: visible;
}

.fact-digit {
  display: inline-block;
  height: 0.9em;
  overflow: hidden;
  line-height: 0.9;
}

.fact-digit__track {
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  transition: transform 760ms cubic-bezier(0.16, 1, 0.3, 1) var(--reel-delay, 0ms);
}

.fact-digit__track > span {
  height: 0.9em;
  flex: 0 0 0.9em;
  line-height: 0.9;
}

.fact-row .fact-value.is-counting .fact-digit__track {
  transform: translateY(-9em);
}

.fact-row .fact-source {
  margin-top: 0.8rem;
  color: var(--ink-muted);
  font-size: 0.7rem;
}

.activity-section {
  padding: clamp(5.5rem, 9vw, 9rem) max(var(--pad), calc((100vw - var(--frame)) / 2));
  background: var(--surface);
}

.activity-section .section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  padding: 0;
  margin-bottom: 4rem;
  border: 0;
}

.activity-section .section-heading .ink-link {
  flex: 0 0 auto;
  margin: 0;
}

.activity-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(24rem, 0.75fr);
  gap: clamp(2rem, 5vw, 5rem);
}

.feature-story {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--canvas);
  box-shadow: 0 1px 0 rgb(16 24 32 / 0.05);
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow 320ms var(--ease-enter), transform 320ms var(--ease-enter);
}

.feature-story:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-0.3rem);
}

.feature-story figure {
  margin: 0;
  overflow: hidden;
}

.feature-story figure img {
  width: 100%;
  aspect-ratio: 1.73;
  object-fit: cover;
  transition: transform 700ms var(--ease-enter);
}

.feature-story:hover figure img {
  transform: scale(1.035);
}

.feature-story > div {
  position: relative;
  min-height: 14rem;
  padding: 2rem 6rem 2.25rem 2.25rem;
}

.feature-story > div > p,
.story-list small {
  margin: 0;
  color: var(--device);
  font-size: 0.67rem;
  font-weight: 750;
  letter-spacing: 0.12em;
}

.feature-story h3 {
  margin: 0.8rem 0 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 720;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.feature-story > div > span:not(.round-arrow) {
  display: block;
  max-width: 38rem;
  margin-top: 0.8rem;
  color: var(--ink-soft);
  line-height: 1.65;
}

.feature-story .round-arrow {
  right: 2rem;
  bottom: 2rem;
  border: 1px solid var(--edge);
  transition: background var(--dur-state), color var(--dur-state);
}

.feature-story:hover .round-arrow {
  background: var(--device);
  color: #fff;
}

.story-list {
  border-top: 1px solid var(--edge);
}

.story-list a {
  display: grid;
  min-height: 9.8rem;
  grid-template-columns: 8.5rem 1fr auto;
  align-items: center;
  gap: 1.4rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--edge);
  color: var(--ink);
  text-decoration: none;
}

.story-list > a > img {
  width: 100%;
  aspect-ratio: 1.32;
  border-radius: 0.35rem;
  object-fit: cover;
  transition: transform 320ms var(--ease-enter);
}

.story-list a:hover > img {
  transform: scale(1.04);
}

.story-list a > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.45rem;
}

.story-list strong {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;
}

.story-list em {
  color: var(--ink-muted);
  font-size: 0.77rem;
  font-style: normal;
  line-height: 1.5;
}

.story-list > a > svg {
  width: 1.15rem;
  height: 1.15rem;
  transition: color var(--dur-state), transform var(--dur-state);
}

.story-list a:hover > svg {
  color: var(--device);
  transform: translateX(0.2rem);
}

.publication-band {
  display: grid;
  min-height: 48rem;
  grid-template-columns: minmax(22rem, 0.75fr) minmax(34rem, 1.25fr);
  gap: clamp(4rem, 9vw, 9rem);
  padding: clamp(5.5rem, 9vw, 9rem) max(var(--pad), calc((100vw - var(--frame)) / 2));
  background:
    radial-gradient(circle at 76% 25%, rgb(53 68 84 / 0.7), transparent 28%),
    linear-gradient(135deg, var(--raw-night) 0%, #16212d 58%, #202d3a 100%);
  color: #f2f4f6;
}

.publication-band__copy {
  align-self: center;
}

.eyebrow--light {
  color: rgb(242 244 246 / 0.64);
}

.publication-band__copy > p:not(.eyebrow) {
  max-width: 34rem;
  margin: 2rem 0 0;
  color: rgb(242 244 246 / 0.66);
  font-size: var(--step-1);
  line-height: 1.7;
}

.publication-band .light-link {
  margin-top: 2.2rem;
}

.publication-objects {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(2.5rem, 5vw, 5rem);
}

.publication-objects a {
  display: flex;
  width: min(42%, 17rem);
  flex-direction: column;
  color: #f2f4f6;
  text-decoration: none;
}

.publication-objects img {
  width: 100%;
  max-height: 31rem;
  box-shadow: var(--shadow-object);
  transition: box-shadow 320ms var(--ease-enter), transform 320ms var(--ease-enter);
}

.publication-objects a:hover img {
  box-shadow: 0 4px 8px rgb(0 0 0 / 0.22), 0 32px 64px rgb(0 0 0 / 0.34),
    0 60px 130px rgb(0 0 0 / 0.38);
  transform: translateY(-0.45rem);
}

.publication-objects span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.4rem;
}

.publication-objects strong {
  font-size: 1.2rem;
}

.publication-objects small {
  color: rgb(242 244 246 / 0.62);
  font-size: 0.7rem;
  text-align: right;
}

.contact-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(5.5rem, 9vw, 9rem) var(--pad);
  text-align: center;
}

.contact-band h2 {
  margin-bottom: 2.4rem;
}

.contact-band > a {
  color: var(--device);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 3rem);
  font-weight: 690;
  letter-spacing: -0.035em;
}

.contact-band > a:hover {
  color: var(--device-strong);
}

.contact-band > p:last-child {
  margin: 1.25rem 0 0;
  color: var(--ink-muted);
  font-size: 0.82rem;
}

.site-footer {
  padding: 0 max(var(--pad), calc((100vw - var(--frame)) / 2));
  background: var(--raw-night);
  color: #f2f4f6;
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(20rem, 1.5fr) repeat(3, minmax(8rem, 0.55fr)) minmax(14rem, 0.9fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding: 5rem 0;
}

.footer-identity {
  max-width: 23rem;
}

.footer-lockup {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  color: #fff;
  text-decoration: none;
}

.footer-lockup span {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}

.footer-lockup strong {
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.42rem;
  font-weight: 730;
  letter-spacing: 0.07em;
}

.footer-lockup small {
  color: rgb(242 244 246 / 0.58);
  font-size: 0.47rem;
  font-weight: 650;
  letter-spacing: 0.11em;
  line-height: 1.35;
}

.footer-identity > p {
  max-width: 19rem;
  margin: 1.5rem 0 0;
  color: rgb(242 244 246 / 0.52);
  font-size: 0.78rem;
  line-height: 1.7;
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.footer-column > p {
  margin: 0 0 0.45rem;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.12em;
}

.footer-column a,
.footer-column address {
  color: rgb(242 244 246 / 0.68);
  font-size: 0.78rem;
  font-style: normal;
  line-height: 1.6;
  text-decoration: none;
  transition: color var(--dur-state);
}

.footer-column a:hover {
  color: #fff;
}

.footer-bottom {
  display: grid;
  min-height: 5rem;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
  border-top: 1px solid rgb(255 255 255 / 0.14);
  color: rgb(242 244 246 / 0.4);
  font-size: 0.61rem;
  font-weight: 650;
  letter-spacing: 0.1em;
}

.footer-bottom p {
  margin: 0;
}

.footer-bottom p span {
  color: var(--device-on-dark);
}

.crossbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.crossbar span {
  height: 1px;
  background: rgb(255 255 255 / 0.2);
}

.crossbar i {
  width: 0.45rem;
  height: 0.45rem;
  margin: 0 0.7rem;
  background: var(--device-on-dark);
  transform: rotate(45deg);
}

@media (min-width: 56.01rem) and (max-height: 44rem) {
  :root {
    --header-height: 8.25rem;
  }

  .utility-bar,
  .utility-actions a,
  .utility-actions button {
    min-height: 1.5rem;
  }

  .identity-bar {
    min-height: 3.75rem;
  }

  .brand .brand-seal {
    width: 2.75rem;
    height: 2.75rem;
  }

  .brand-original-mark {
    height: 2.55rem;
  }

  .brand-inline-lockup__name strong,
  .brand-inline-lockup__name > span {
    font-size: 0.72rem;
  }

  .brand-wordmark strong {
    font-size: 1.12rem;
  }

  .brand-wordmark small {
    font-size: 0.37rem;
  }

  .primary-nav,
  .primary-nav > ul,
  .primary-nav > ul > li > a,
  .primary-nav > ul > li > button {
    min-height: 3rem;
  }

  .language-dialog {
    margin-top: 5.25rem;
  }

  .hero {
    min-height: calc(100svh - 8.25rem);
  }

  .hero-content {
    padding-top: 1.5rem;
    padding-bottom: 4.5rem;
  }

  .hero-bridge {
    margin-bottom: 0.85rem;
    font-size: 0.64rem;
  }

  .hero h1,
  .hero h2,
  html[data-locale="en"] .hero h1,
  html[data-locale="en"] .hero h2 {
    font-size: clamp(3.1rem, 5.5vw, 4.3rem);
  }

  .hero-copy > p {
    margin-top: 1rem;
    font-size: 1rem;
    line-height: 1.5;
  }

  .primary-button {
    min-height: 3rem;
    margin-top: 1rem;
  }

  .hero-controls {
    bottom: 1rem;
  }
}

@media (max-width: 72rem) {
  .primary-nav > ul {
    gap: 2.2rem;
  }

  .nav-panel {
    grid-template-columns: 0.75fr 1.5fr 0.55fr;
    gap: 2.5rem;
  }

  .priority-grid {
    grid-template-columns: 1.15fr 0.85fr;
  }

  .priority-card {
    min-height: 19rem;
  }

  .priority-card:nth-child(even) {
    border-right: 1px solid var(--edge-strong);
  }

  .priority-card:nth-child(n + 3) {
    border-top: 0;
  }

  .footer-main {
    grid-template-columns: 1.5fr repeat(3, 0.7fr);
  }

  .footer-column--contact {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: 0.5fr 1fr 1fr 1.5fr;
    align-items: start;
    padding-top: 2rem;
    border-top: 1px solid rgb(255 255 255 / 0.14);
  }

  .footer-column--contact > p {
    margin: 0;
  }
}

@media (max-width: 56rem) {
  :root {
    --header-height: 7rem;
  }

  .utility-bar {
    min-height: 1.75rem;
  }

  .utility-bar p {
    max-width: 72%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .utility-actions a,
  .utility-actions > span {
    display: none;
  }

  .identity-bar {
    min-height: 5.25rem;
    grid-template-columns: 1fr auto;
  }

  .language-button {
    display: none;
  }

  .brand--left {
    justify-self: start;
  }

  .brand .brand-seal {
    width: 3rem;
    height: 3rem;
  }

  .brand-original-mark {
    height: 2.75rem;
  }

  .brand-inline-lockup {
    gap: 0.7rem;
  }

  .brand-inline-lockup__name {
    gap: 0.65rem;
  }

  .brand-inline-lockup__name strong,
  .brand-inline-lockup__name > span {
    font-size: 0.68rem;
  }

  .brand-inline-lockup__name > span {
    padding-left: 0.65rem;
  }

  .brand-wordmark strong {
    font-size: 1.07rem;
  }

  .brand-wordmark small {
    font-size: 0.36rem;
  }

  .mobile-menu-button {
    display: inline-flex;
    min-width: 4.25rem;
    justify-content: flex-end;
    gap: 0.85rem;
  }

  .mobile-menu-button i,
  .mobile-menu-button i::before {
    width: 1.35rem;
    height: 1px;
    background: currentcolor;
    content: "";
  }

  .mobile-menu-button i {
    position: relative;
    transform: translateY(-0.2rem);
  }

  .mobile-menu-button i::before {
    position: absolute;
    top: 0.42rem;
    right: 0;
  }

  .primary-nav {
    display: none;
  }

  .language-dialog {
    top: auto;
    right: var(--pad);
    bottom: max(4.75rem, calc(env(safe-area-inset-bottom) + 4.25rem));
    left: var(--pad);
    width: auto;
    max-width: none;
    height: auto;
    max-height: calc(100dvh - 7rem);
    margin: 0;
  }

  .language-dialog__header {
    display: flex;
    min-height: 3rem;
    border-bottom: 1px solid var(--edge);
  }

  .language-dialog__header > p {
    margin: 0;
    color: var(--device);
    font-size: 0.65rem;
  }

  .language-dialog__header .dialog-close {
    min-width: 2.75rem;
    color: var(--ink);
  }

  .menu-dialog {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    padding: 0;
    border: 0;
  }

  .menu-dialog .dialog-shell {
    min-height: 100dvh;
    padding: max(1.25rem, env(safe-area-inset-top)) var(--pad)
      max(1.5rem, env(safe-area-inset-bottom));
  }

  .menu-dialog .dialog-shell::before {
    display: none;
  }

  .menu-dialog .dialog-header {
    min-height: 4rem;
    border-color: rgb(255 255 255 / 0.16);
  }

  .menu-dialog .menu-toc {
    align-content: start;
    gap: 1.5rem;
    padding: 2rem 0;
  }

  .menu-dialog .menu-home {
    min-height: 3.5rem;
    grid-template-columns: 2.5rem 1fr auto;
    padding: 0;
    font-size: 1.35rem;
  }

  .menu-dialog .menu-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 1rem;
  }

  .menu-dialog .menu-group a {
    min-height: 3rem;
    font-size: 1rem;
  }

  .menu-dialog .dialog-folio {
    padding-left: 0;
  }

  .hero {
    min-height: calc(100svh - 7rem);
  }

  .hero-content {
    align-items: flex-end;
    padding-top: 4rem;
    padding-bottom: 8.5rem;
  }

  .hero h1,
  .hero h2,
  html[data-locale="en"] .hero h1,
  html[data-locale="en"] .hero h2 {
    font-size: clamp(3.25rem, 13.3vw, 5.5rem);
  }

  .hero-scrim {
    background:
      linear-gradient(0deg, rgb(7 14 22 / 0.98) 0%, rgb(8 17 28 / 0.9) 45%,
        rgb(8 17 28 / 0.2) 78%),
      linear-gradient(90deg, rgb(7 14 22 / 0.55), transparent);
  }

  .hero-copy > p {
    max-width: 29rem;
  }

  .about-band {
    grid-template-columns: 1fr;
  }

  .fact-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .fact-row div:nth-child(2) {
    border-right: 0;
  }

  .fact-row div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--edge);
  }

  .activity-grid {
    grid-template-columns: 1fr;
  }

  .publication-band {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .publication-objects {
    min-height: 34rem;
  }

  .footer-main {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-identity {
    grid-column: 1 / -1;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgb(255 255 255 / 0.14);
  }

  .footer-column--contact {
    grid-column: 1 / -1;
    grid-template-columns: 0.55fr 1fr 1.2fr 1.6fr;
  }

  .page-masthead {
    min-height: min(34rem, calc(100svh - var(--header-height)));
    grid-template-columns: 1fr;
    padding-top: 7rem;
  }

  .page-masthead--media {
    min-height: calc(100svh - var(--header-height));
  }

  .page-masthead__rail {
    display: none;
  }

  .page-masthead__copy,
  .masthead-coordinate,
  .masthead-number,
  .pdf-link {
    grid-column: 1;
  }

  .page-masthead h1,
  html[data-locale="en"] .page-masthead h1 {
    font-size: clamp(3.3rem, 13vw, 6rem);
  }

  .page-masthead__media {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 48%, rgb(0 0 0 / 0.5) 72%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 48%, rgb(0 0 0 / 0.5) 72%, transparent 100%);
  }

  .page-masthead__media::after {
    background:
      linear-gradient(180deg, rgb(244 246 248 / 0.14) 0%, rgb(244 246 248 / 0.42) 45%, var(--surface) 88%),
      linear-gradient(90deg, rgb(244 246 248 / 0.64), rgb(244 246 248 / 0.08));
  }

  .page-masthead__media img {
    object-position: 70% center;
    opacity: 0.82;
  }

  .page-masthead--media .masthead-number,
  .page-masthead--media .pdf-link {
    color: var(--ink);
    text-shadow: none;
  }
}

@media (max-width: 40rem) {
  :root {
    --pad: 1.25rem;
  }

  .utility-bar {
    font-size: 0.51rem;
    letter-spacing: 0.08em;
  }

  .utility-actions {
    gap: 0;
  }

  .utility-actions button {
    font-size: 0.51rem;
  }

  .brand {
    gap: 0.6rem;
  }

  .brand .brand-seal {
    width: 2.65rem;
    height: 2.65rem;
  }

  .brand-original-mark {
    height: 2.2rem;
  }

  .brand-inline-lockup {
    gap: 0.5rem;
  }

  .brand-inline-lockup__name {
    gap: 0.45rem;
  }

  .brand-inline-lockup__name strong,
  .brand-inline-lockup__name > span {
    font-size: 0.68rem;
  }

  .brand-inline-lockup__name strong {
    letter-spacing: 0.035em;
  }

  .brand-inline-lockup__name > span {
    width: 7.75rem;
    padding-left: 0.45rem;
    letter-spacing: 0;
    white-space: normal;
  }

  .brand-wordmark strong {
    font-size: 0.9rem;
    letter-spacing: 0.045em;
  }

  .brand-wordmark small {
    font-size: 0.3rem;
  }

  .mobile-menu-button span {
    font-size: 0.72rem;
  }

  .menu-dialog .menu-groups {
    grid-template-columns: 1fr;
  }

  .menu-dialog .menu-group > p {
    margin-bottom: 0;
  }

  .menu-dialog .menu-group ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .menu-dialog .menu-group li:nth-child(even) {
    padding-left: 0.75rem;
    border-left: 1px solid rgb(255 255 255 / 0.12);
  }

  .hero-slide img {
    object-position: 58% center;
  }

  .hero-slide[data-hero-slide="0"] img {
    object-position: 56% center;
  }

  .hero-content {
    padding: 4rem var(--pad) 8.5rem;
  }

  .hero-copy {
    width: calc(100vw - 2 * var(--pad));
  }

  .hero-bridge {
    width: 100%;
    grid-template-columns: auto minmax(0.75rem, 1fr) auto minmax(0.75rem, 1fr);
    gap: 0.45rem;
    margin-bottom: 1rem;
    font-size: 0.63rem;
    letter-spacing: 0.08em;
  }

  .hero-bridge > span:first-child {
    grid-column: 1;
  }

  .hero-bridge > span:last-child {
    grid-column: 1 / -1;
    margin-top: 0.15rem;
    color: rgb(255 255 255 / 0.64);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hero h1,
  .hero h2,
  html[data-locale="en"] .hero h1,
  html[data-locale="en"] .hero h2 {
    max-width: 8em;
    font-size: clamp(3.35rem, 15.2vw, 4.1rem);
    line-height: 1;
  }

  .hero-copy > p {
    margin-top: 1.25rem;
    font-size: 0.97rem;
    line-height: 1.58;
  }

  .primary-button {
    min-width: 10.5rem;
    min-height: 3.25rem;
    margin-top: 1.5rem;
  }

  .hero-controls {
    bottom: 1.8rem;
    gap: 1.15rem;
  }

  .hero-arrows {
    gap: 0.5rem;
  }

  .hero-arrows button {
    width: 2.75rem;
    height: 2.75rem;
  }

  .hero-count span {
    width: 1.6rem;
  }

  .priority-links {
    padding-top: 1.25rem;
  }

  .priority-grid {
    display: flex;
    gap: 0.85rem;
    padding-right: var(--pad);
    margin-right: calc(-1 * var(--pad));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .priority-grid::-webkit-scrollbar,
  .inscription-rail::-webkit-scrollbar {
    display: none;
  }

  .priority-card {
    min-height: 18rem;
    flex: 0 0 min(78vw, 19rem);
    scroll-snap-align: start;
  }

  .priority-card:nth-child(even) {
    flex-basis: min(68vw, 17rem);
  }

  .section-label {
    margin-bottom: 2.75rem;
  }

  .section-label p {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
  }

  .section-label small {
    display: block;
    margin: 0.35rem 0 0;
    font-size: 0.52rem;
  }

  .inscription-rail {
    display: flex;
    gap: 1rem;
    padding: 1.5rem var(--pad) 2.8rem 0;
    margin-right: calc(-1 * var(--pad));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .inscription-crossbar {
    top: 40%;
  }

  .inscription-rail a {
    flex: 0 0 76vw;
    scroll-snap-align: start;
  }

  .text-link {
    margin-top: 1.4rem;
  }

  .about-band {
    gap: 2rem;
  }

  .about-band__heading h2,
  .activity-section .section-heading h2,
  .publication-band h2,
  .contact-band h2 {
    font-size: clamp(2.65rem, 11vw, 3.6rem);
    line-height: 1.06;
  }

  .about-band__body > p {
    font-size: 1.02rem;
    line-height: 1.7;
  }

  .fact-crossbar {
    gap: 0.45rem;
    margin-top: 1.5rem;
    font-size: 0.52rem;
    letter-spacing: 0.07em;
  }

  .fact-crossbar span {
    max-width: 6.5rem;
  }

  .fact-row div {
    min-height: 8.5rem;
    padding: 1.2rem 1rem 1.2rem 0;
  }

  .fact-row div:not(:first-child) {
    padding-left: 1rem;
  }

  .fact-row div:nth-child(odd) {
    padding-left: 0;
  }

  .fact-row .fact-value {
    font-size: 3.15rem;
  }

  .activity-section .section-heading {
    align-items: start;
    flex-direction: column;
    margin-bottom: 2.5rem;
  }

  .feature-story > div {
    min-height: 16rem;
    padding: 1.5rem 4.5rem 1.75rem 1.5rem;
  }

  .feature-story h3 {
    font-size: 1.85rem;
  }

  .story-list a {
    min-height: 8.5rem;
    grid-template-columns: 6.4rem 1fr auto;
    gap: 1rem;
  }

  .story-list em {
    display: none;
  }

  .publication-band {
    gap: 4rem;
  }

  .publication-band__copy > p:not(.eyebrow) {
    font-size: 1rem;
  }

  .publication-objects {
    min-height: 25rem;
    gap: 1.3rem;
  }

  .publication-objects a {
    width: 46%;
  }

  .publication-objects span {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }

  .publication-objects small {
    text-align: left;
  }

  .contact-band {
    align-items: flex-start;
    text-align: left;
  }

  .contact-band > a {
    max-width: 100%;
    font-size: clamp(1.35rem, 6.6vw, 1.9rem);
    overflow-wrap: anywhere;
  }

  .footer-main {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 1.5rem;
    padding: 4rem 0;
  }

  .footer-identity {
    grid-column: 1 / -1;
  }

  .footer-column--contact {
    grid-column: 1 / -1;
    display: flex;
    padding-top: 2rem;
  }

  .footer-bottom {
    min-height: 6rem;
    grid-template-columns: 1fr auto;
    gap: 1rem;
  }

  .footer-bottom .crossbar {
    display: none;
  }

  .footer-bottom p:last-child {
    text-align: right;
  }
}

@media (max-width: 22.5rem) {
  :root {
    --header-height: 9.25rem;
  }

  .identity-bar {
    min-height: 7.5rem;
    align-items: stretch;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
  }

  .brand--left {
    align-self: stretch;
  }

  .brand-inline-lockup {
    display: grid;
    height: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    align-items: center;
    gap: 0.5rem;
  }

  .brand-original-mark {
    height: 1.9rem;
  }

  .brand-inline-lockup__name {
    display: grid;
    width: min(13.75rem, calc(100vw - 5.5rem));
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.65rem;
  }

  .brand-inline-lockup__name strong,
  .brand-inline-lockup__name > span {
    font-size: 0.72rem;
    line-height: 1.12;
  }

  .brand-inline-lockup__name > span {
    width: auto;
    padding-left: 0.65rem;
    white-space: normal;
  }

  .identity-actions {
    align-self: start;
    margin-top: 0.25rem;
  }

  .mobile-menu-button span {
    display: none;
  }

  .mobile-menu-button {
    min-width: 1.75rem;
  }

  .hero-count {
    display: none;
  }

  .story-list a {
    grid-template-columns: 5.5rem 1fr;
  }

  .story-list > a > svg {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .hero-copy,
  .priority-card,
  .priority-card > img,
  .feature-story,
  .feature-story img,
  .publication-objects img,
  .nav-panel {
    transition-duration: 0.01ms;
  }

  .js .hero-copy > .hero-bridge,
  .js .hero-copy > h1,
  .js .hero-copy > h2,
  .js .hero-copy > p,
  .js .hero-copy > .primary-button,
  .js .page-masthead__media,
  .js .page-masthead__maps,
  .js .page-masthead__rail,
  .js .page-masthead__copy > *,
  .js .page-masthead > :not(.page-masthead__media, .page-masthead__maps, .page-masthead__rail, .page-masthead__copy) {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .js .about-band .fact-crossbar b,
  .js .about-band .fact-crossbar i,
  .fact-row .fact-value.is-counting {
    animation: none;
    opacity: 1;
  }

  .js .about-band .fact-crossbar b {
    transform: scaleX(1);
  }

  .js .about-band .fact-crossbar i {
    transform: rotate(45deg);
  }
}

@keyframes crossbar-relay {
  from {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    clip-path: inset(0);
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes crossbar-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes crossbar-node {
  from {
    opacity: 0;
    transform: rotate(45deg) scale(0);
  }
  to {
    opacity: 1;
    transform: rotate(45deg) scale(1);
  }
}

@keyframes masthead-map-in {
  from {
    opacity: 0;
    transform: scale(1.025);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes masthead-rail-in {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  to {
    clip-path: inset(0);
    opacity: 1;
  }
}

.js .page-masthead__media {
  animation: masthead-map-in 680ms var(--ease-enter) both;
}

.js .page-masthead__maps {
  animation: masthead-map-in 900ms var(--ease-enter) both;
}

.js .page-masthead__rail {
  animation: masthead-rail-in 680ms var(--ease-enter) both;
}

.js .page-masthead__copy > *,
.js .page-masthead > :not(.page-masthead__media, .page-masthead__maps, .page-masthead__rail, .page-masthead__copy) {
  animation: crossbar-relay 540ms var(--ease-enter) both;
}

.js .page-masthead__copy > h1 {
  animation-delay: 70ms;
}

.js .page-masthead__copy > .page-lead {
  animation-delay: 140ms;
}

.js .page-masthead > :not(.page-masthead__media, .page-masthead__maps, .page-masthead__rail, .page-masthead__copy) {
  animation-delay: 210ms;
}

@media (prefers-reduced-motion: reduce) {
  .js .hero-copy.is-active > .hero-bridge,
  .js .hero-copy.is-active > h1,
  .js .hero-copy.is-active > h2,
  .js .hero-copy.is-active > p,
  .js .hero-copy.is-active > .primary-button,
  .js .page-masthead__media,
  .js .page-masthead__maps,
  .js .page-masthead__rail,
  .js .page-masthead__copy > *,
  .js .page-masthead > :not(.page-masthead__media, .page-masthead__maps, .page-masthead__rail, .page-masthead__copy) {
    animation: none;
    clip-path: none;
    opacity: 1;
    transform: none;
  }
}

@media (forced-colors: active) {
  .hero-pagination button::before,
  .hero-bridge i,
  .fact-crossbar i,
  .inscription-crossbar i,
  .crossbar i,
  .page-masthead__rail i::after {
    border: 1px solid ButtonText;
    background: ButtonText;
  }

  .primary-button {
    border: 1px solid ButtonText;
  }

  .priority-card,
  .feature-story,
  .publication-objects img {
    border: 1px solid CanvasText;
  }
}