/* 主题变量、桌面样式、弹窗样式、响应式断点及打印样式。 */
:root {
  --paper:#f7f6f1;
  --white:#fffefb;
  --ink:#24332e;
  --muted:#6d7468;
  --line:#dadcd2;
  --green:#243d36;
  --gold:#8d6e42;
  --serif:"Noto Serif SC","Songti SC","STSong","SimSun",serif;
  --sans:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",Arial,sans-serif
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:104px
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased
}

button,input {
  font:inherit
}

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

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

a {
  color:inherit;
  text-decoration:none
}

button:focus-visible,a:focus-visible,input:focus-visible {
  outline:2px solid #a68043;
  outline-offset:5px
}

img {
  display:block;
  max-width:100%;
  object-fit:cover
}

h1,h2,h3,p,figure {
  margin:0
}

button:disabled {
  cursor:default;
  opacity:.5
}

::selection {
  color:white;
  background:var(--green)
}

.section-wrap {
  max-width:1400px;
  margin:auto;
  padding-left:64px;
  padding-right:64px
}

.section-space {
  padding-top:88px;
  padding-bottom:88px
}

.site-header {
  height:96px;
  padding:0 max(40px,calc((100vw - 1272px)/2));
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  background:#f7f6f1f5;
  position:sticky;
  top:0;
  z-index:20;
  gap:25px;
  backdrop-filter:blur(14px)
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0
}

.brand>span:last-child {
  font:28px/1.2 var(--serif);
  letter-spacing:4px
}

.brand small {
  display:block;
  font:10px/1.6 Arial;
  letter-spacing:1.6px;
  margin-top:4px
}

.brand-mark {
  display:flex;
  width:32px;
  height:36px;
  gap:4px
}

.brand-mark i {
  border:1px solid var(--green);
  width:14px;
  position:relative
}

.brand-mark i:first-child {
  margin-top:4px
}

.brand-mark i:last-child {
  margin-bottom:4px
}

.brand-mark i:after {
  content:"";
  position:absolute;
  width:4px;
  height:1px;
  background:var(--gold);
  top:10px;
  left:4px
}

.desktop-nav {
  display:flex;
  align-items:center;
  gap:31px;
  height:100%;
  font-size:14px
}

.desktop-nav a {
  position:relative;
  white-space:nowrap;
  color:#71776b;
  height:100%;
  display:flex;
  align-items:center
}

.desktop-nav a:hover,.desktop-nav a.current {
  color:var(--green)
}

.desktop-nav a.current:after {
  content:"";
  position:absolute;
  bottom:23px;
  left:0;
  width:100%;
  height:1px;
  background:var(--green)
}

.about-button {
  border:1px solid #cbd0c4;
  border-radius:2px;
  padding:9px 14px;
  white-space:nowrap;
  font-size:13px
}

.about-button span {
  margin-left:10px
}

.menu-button {
  display:none
}

.hero {
  display:grid;
  grid-template-columns:1.04fr 1fr;
  gap:46px;
  padding-top:36px;
  padding-bottom:38px;
  min-height:692px
}

.hero-copy {
  padding-top:27px
}

.eyebrow {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:12px;
  letter-spacing:1.6px
}

.short-rule {
  width:28px;
  height:1px;
  background:var(--gold)
}

.issue {
  margin-left:auto;
  margin-right:24px;
  color:#7b8372;
  font:12px Arial;
  letter-spacing:1px
}

.person-meta {
  font-size:13px;
  letter-spacing:1px;
  margin-top:45px;
  color:#74776c
}

.person-meta span {
  border-left:1px solid #c9cabe;
  margin-left:16px;
  padding-left:16px
}

.hero h1 {
  font:400 76px/1.25 var(--serif);
  letter-spacing:8px;
  margin:12px 0 20px
}

.hero h1 span {
  display:block;
  font:12px/1.6 Arial;
  letter-spacing:5px;
  margin:12px 0 0 5px;
  color:#6d7665
}

.hero-line {
  font:30px/1.5 var(--serif);
  letter-spacing:2px;
  margin-top:30px
}

.hero-description {
  color:var(--muted);
  font-size:15px;
  line-height:2;
  margin-top:17px
}

.hero-buttons {
  display:flex;
  align-items:center;
  gap:25px;
  margin-top:29px
}

.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:30px;
  padding:13px 21px;
  font-size:14px;
  min-height:48px;
  border:1px solid var(--green);
  border-radius:2px;
  transition:.2s
}

.button.primary {
  background:var(--green);
  color:#fff
}

.button:hover {
  background:#335348;
  color:white
}

.button span {
  font-size:19px
}

.text-button {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  padding:8px 0
}

.play-circle {
  border:1px solid #b8bcb0;
  width:31px;
  height:31px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:9px;
  padding-left:1px
}

.hero-stats {
  display:flex;
  gap:48px;
  margin-top:38px;
  padding-top:22px;
  border-top:1px solid var(--line);
  max-width:448px
}

.hero-stats>div {
  min-width:80px
}

.hero-stats strong {
  display:block;
  font:32px/1.2 Georgia;
  font-weight:400
}

.hero-stats strong span {
  font:12px var(--sans);
  margin-left:8px;
  color:var(--muted)
}

.hero-stats small {
  font-size:12px;
  display:block;
  color:#74796b;
  margin-top:7px;
  letter-spacing:1px
}

.hero-portrait {
  position:relative;
  min-height:618px;
  overflow:hidden;
  background:#334135
}

.hero-portrait>img {
  width:100%;
  height:100%;
  position:absolute;
  object-position:59% 50%
}

.portrait-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#0003,transparent 30%,transparent 50%,#0c170ea3)
}

.portrait-top {
  position:absolute;
  top:27px;
  left:28px;
  right:28px;
  color:#fff9e8;
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:10px;
  letter-spacing:1.4px
}

.portrait-top span {
  font-size:12px;
  letter-spacing:1px
}

.hero-portrait figcaption {
  position:absolute;
  bottom:53px;
  left:34px;
  right:30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#fff9e8
}

.portrait-caption {
  font:23px/1.65 var(--serif);
  letter-spacing:1.3px
}

.portrait-play {
  border:1px solid #ffffff85;
  color:white;
  border-radius:50%;
  width:53px;
  height:53px;
  font-size:13px;
  backdrop-filter:blur(8px)
}

.portrait-play:hover {
  background:#ffffff20
}

.image-disclosure {
  position:absolute;
  bottom:19px;
  left:34px;
  color:#e5e5d9;
  font-size:11px;
  letter-spacing:1px
}

.intro-strip {
  display:flex;
  align-items:center;
  gap:32px;
  padding-top:19px;
  padding-bottom:24px;
  border-bottom:1px solid var(--line);
  font-size:13px
}

.strip-label {
  color:var(--gold);
  white-space:nowrap;
  font-size:12px;
  letter-spacing:1px
}

.intro-strip p span {
  color:var(--muted);
  margin-left:16px
}

.intro-strip a {
  margin-left:auto;
  white-space:nowrap
}

.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
  margin-bottom:34px
}

.muted {
  color:var(--gold);
  font-size:12px;
  letter-spacing:1.7px
}

.section-heading h2 {
  font:33px/1.5 var(--serif);
  letter-spacing:1px;
  margin-top:12px
}

.section-heading>p,.section-side-note {
  font-size:14px;
  line-height:1.9;
  color:var(--muted);
  text-align:right
}

.year-tabs {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  border-bottom:1px solid var(--line);
  gap:15px
}

.year-tabs button {
  padding:18px 0 22px;
  text-align:left;
  position:relative
}

.year-tabs button strong {
  font:26px Georgia;
  color:#8a927f;
  font-weight:400
}

.year-tabs button span {
  display:block;
  font-size:14px;
  color:#727b68;
  margin-top:6px
}

.year-tabs button:after {
  content:"";
  position:absolute;
  bottom:-4px;
  left:0;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#c4c9bd;
  border:1px solid var(--paper)
}

.year-tabs button.active strong,.year-tabs button.active span {
  color:var(--green)
}

.year-tabs button.active:after {
  background:var(--green);
  width:9px;
  height:9px;
  bottom:-5px;
  box-shadow:0 0 0 5px var(--paper)
}

.year-tabs button.active:before {
  content:"";
  width:70%;
  height:2px;
  position:absolute;
  left:0;
  bottom:-1px;
  background:var(--green)
}

.journey-content {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:54px;
  padding-top:43px;
  align-items:center;
  min-height:352px
}

.journey-image {
  position:relative;
  height:310px;
  overflow:hidden
}

.journey-image img {
  width:100%;
  height:100%
}

.journey-image figcaption {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:linear-gradient(transparent,#172b24bb);
  color:white;
  padding:34px 20px 14px;
  font-size:12px;
  letter-spacing:1px
}

.journey-text {
  padding-right:8px
}

.chapter-line {
  font-size:12px;
  color:var(--gold);
  letter-spacing:1px;
  display:flex;
  align-items:center;
  gap:15px
}

.chapter-line b {
  font-weight:400;
  color:#7c846f
}

.journey-text h3 {
  font:29px/1.5 var(--serif);
  margin:18px 0
}

.journey-text>p {
  font-size:16px;
  line-height:1.95;
  color:#68715f;
  max-width:490px
}

.journey-location {
  display:flex;
  gap:12px;
  font-size:12px;
  color:#757f68;
  margin:20px 0
}

.journey-location span+span:before {
  content:"·";
  margin-right:12px
}

.chapter-footer {
  border-top:1px solid var(--line);
  padding-top:16px;
  display:flex;
  gap:15px;
  align-items:center;
  justify-content:space-between;
  font-size:14px
}

.chapter-footer button {
  padding:5px 0
}

.chapter-footer button:last-child {
  color:#727c65;
  font-size:12px
}

.stories-section {
  background:#eceee7
}

.stories-section .section-space {
  padding-top:75px;
  padding-bottom:50px
}

.story-grid {
  display:grid;
  grid-template-columns:1.12fr .88fr 1.12fr;
  gap:24px
}

.story-card {
  text-align:left;
  padding:0;
  min-width:0;
  transition:transform .25s
}

.story-card:hover {
  transform:translateY(-5px)
}

.story-img {
  height:257px;
  position:relative;
  overflow:hidden
}

.story-img img {
  width:100%;
  height:100%;
  transition:transform .6s
}

.story-card:hover .story-img img {
  transform:scale(1.035)
}

.image-tag {
  position:absolute;
  left:17px;
  top:17px;
  background:#f7f6f1e6;
  color:var(--ink);
  font-size:12px;
  padding:5px 10px;
  letter-spacing:1px
}

.story-caption {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:22px
}

.story-caption h3 {
  font:21px/1.5 var(--serif)
}

.story-caption p {
  font-size:12px;
  color:#6c785e;
  margin-top:7px
}

.story-no {
  font:italic 25px Georgia;
  color:#8b977b;
  padding-right:3px;
  align-self:flex-start
}

.round-arrow {
  margin-left:auto;
  border:1px solid #bdc7b0;
  border-radius:50%;
  min-width:30px;
  height:30px;
  display:grid;
  place-items:center;
  font-size:16px
}

.letter-card {
  padding:20px 23px 0;
  background:#f7f4e9;
  border:1px solid #e0dfd1
}

.letter-top {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:#84755a;
  border-bottom:1px solid #ded8c8;
  padding-bottom:14px;
  gap:8px
}

.letter-preview {
  height:218px;
  padding-top:15px;
  font-family:var(--serif)
}

.letter-preview small {
  font-size:14px
}

.letter-preview p {
  font-size:20px;
  letter-spacing:1px;
  line-height:1.8;
  margin:7px 0 0 15px
}

.letter-preview>span {
  display:block;
  text-align:right;
  font-size:14px;
  margin-top:3px
}

.letter-card .story-caption {
  border-top:1px solid #ded8c8;
  padding-top:16px;
  margin-top:16px;
  padding-bottom:18px
}

.letter-card .story-caption h3 {
  font-size:20px
}

.quiet-link {
  text-align:right;
  margin-top:32px;
  font-size:13px;
  color:#657359
}

.collection-controls {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
  margin-bottom:28px;
  gap:20px
}

.filter-tabs {
  display:flex;
  gap:30px
}

.filter-tabs button {
  padding:11px 0 15px;
  font-size:14px;
  color:#6d7a60;
  position:relative;
  white-space:nowrap
}

.filter-tabs button span {
  font:12px Georgia;
  margin-left:5px
}

.filter-tabs button.active {
  color:var(--green)
}

.filter-tabs button.active:after {
  content:"";
  height:2px;
  position:absolute;
  bottom:-1px;
  left:0;
  right:0;
  background:var(--green)
}

#collection-count {
  font-size:12px;
  color:#7c866e;
  white-space:nowrap
}

.archive-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px
}

.archive-item {
  padding:16px;
  display:flex;
  align-items:center;
  gap:16px;
  border:1px solid #dddfd4;
  background:#fafaf5;
  text-align:left;
  min-width:0;
  transition:.2s
}

.archive-item:hover {
  background:white;
  border-color:#9ea88e
}

.archive-thumb {
  width:66px;
  height:72px;
  object-fit:cover;
  flex-shrink:0
}

.archive-document {
  width:66px;
  height:72px;
  background:#edeee4;
  color:#6e7e5b;
  display:grid;
  place-items:center;
  flex-shrink:0;
  font:24px var(--serif);
  border:1px solid #e1e4d6
}

.archive-document.letter {
  background:#f0eadd;
  color:#8d7350
}

.archive-info {
  min-width:0
}

.archive-info h3 {
  font-size:14px;
  font-weight:500;
  line-height:1.55;
  margin-bottom:6px
}

.archive-info p {
  font-size:12px;
  color:#7c876e;
  line-height:1.6
}

.archive-item>span:last-child {
  margin-left:auto;
  color:#71845b;
  font-size:15px
}

.provenance-note {
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:27px;
  font-size:12px;
  color:#70805f
}

.provenance-note>span {
  font-size:23px
}

.provenance-note p span {
  display:block;
  font-size:12px;
  color:#7c876d;
  margin-top:3px
}

.works-section {
  background:var(--green);
  color:#f3f3e9
}

.works-section .section-space {
  padding-top:75px;
  padding-bottom:52px
}

.section-heading.light .eyebrow {
  font-size:12px;
  color:#b9c1a8
}

.section-heading.light p {
  color:#b4bdac
}

.works-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px
}

.work-card {
  text-align:left;
  padding:0;
  min-width:0
}

.work-visual {
  height:328px;
  position:relative;
  overflow:hidden;
  transition:transform .3s
}

.work-card:hover .work-visual {
  transform:translateY(-5px)
}

.book-visual {
  background:#e6e6d8;
  color:#324038;
  padding:22px 23px;
  border-left:7px solid #cdd2bd;
  box-shadow:8px 10px 18px #101d1740
}

.book-series {
  font-size:11px;
  letter-spacing:.5px
}

.book-title {
  font:39px/1.4 var(--serif);
  letter-spacing:3px;
  margin-top:28px
}

.book-title span {
  font:12px var(--sans);
  letter-spacing:2px;
  display:block;
  margin-top:14px
}

.book-bottom {
  display:flex;
  justify-content:space-between;
  align-items:end;
  position:absolute;
  bottom:22px;
  left:23px;
  right:23px;
  border-top:1px solid #bac3b3;
  padding-top:15px;
  font-size:10px;
  letter-spacing:1px
}

.book-bottom>span:last-child {
  font:14px/1.6 Georgia
}

.film-visual {
  background:#172c26
}

.film-visual img,.family-visual img {
  position:absolute;
  width:100%;
  height:100%;
  opacity:.47;
  filter:sepia(.2)
}

.film-visual:after,.family-visual:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(transparent 20%,#10241bd9)
}

.film-kicker {
  position:absolute;
  top:22px;
  left:21px;
  z-index:1;
  font-size:11px;
  letter-spacing:1.6px
}

.film-title {
  position:absolute;
  left:21px;
  top:66px;
  z-index:1;
  font:32px var(--serif);
  letter-spacing:3px
}

.film-title span {
  display:block;
  font:12px var(--sans);
  letter-spacing:1px;
  margin-top:10px
}

.film-play {
  position:absolute;
  left:21px;
  bottom:66px;
  z-index:1;
  border:1px solid #ffffff80;
  border-radius:50%;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  font-size:12px
}

.film-length {
  position:absolute;
  bottom:25px;
  left:21px;
  z-index:1;
  font-size:12px
}

.audio-visual {
  background:#c8b394;
  color:#364235;
  padding:22px 20px
}

.audio-top {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  gap:8px
}

.sound-wave {
  height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:3px;
  margin-top:25px
}

.sound-wave i {
  width:2px;
  height:25%;
  background:#596445;
  opacity:.7
}

.sound-wave i:nth-child(3n) {
  height:50%
}

.sound-wave i:nth-child(4n) {
  height:78%
}

.sound-wave i:nth-child(5n) {
  height:100%
}

.sound-wave i:nth-child(7n) {
  height:64%
}

.audio-title {
  font:31px/1.5 var(--serif);
  letter-spacing:2px;
  margin-top:17px
}

.audio-bottom {
  position:absolute;
  left:20px;
  right:20px;
  bottom:24px;
  font-size:12px;
  display:flex;
  justify-content:space-between
}

.audio-bottom>span {
  font-size:14px
}

.family-visual {
  background:#243027
}

.family-visual>span {
  position:absolute;
  z-index:1;
  left:20px;
  top:23px;
  font-size:10px;
  letter-spacing:1px
}

.family-visual>div {
  position:absolute;
  z-index:1;
  left:22px;
  bottom:28px;
  font:35px/1.4 var(--serif);
  letter-spacing:4px
}

.family-visual small {
  display:block;
  font:12px var(--sans);
  letter-spacing:1px;
  margin-top:18px
}

.work-label {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:24px
}

.work-label small {
  font-size:12px;
  color:#b2bda7
}

.work-label h3 {
  font:20px/1.6 var(--serif);
  margin-top:5px
}

.work-label h3 span {
  font:12px var(--sans);
  margin-left:9px;
  color:#b7c0ab
}

.work-label>span {
  font-size:22px;
  color:#b7c4aa
}

.more-works {
  margin-top:44px;
  padding-top:23px;
  border-top:1px solid #ffffff25;
  display:flex;
  gap:25px;
  align-items:center;
  font-size:13px
}

.more-works>span {
  color:#b1bfa5;
  margin-right:auto;
  font-size:12px
}

.more-works button {
  padding:5px 0
}

.conversation {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:72px;
  align-items:center
}

.conversation-intro h2 {
  font:36px/1.7 var(--serif);
  letter-spacing:2px;
  margin:19px 0
}

.conversation-intro>p {
  font-size:15px;
  color:#727e62;
  line-height:2
}

.qa-person {
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:32px
}

.qa-person img {
  width:50px;
  height:50px;
  border-radius:50%;
  object-position:60% 38%
}

.qa-person strong {
  display:block;
  font-size:14px;
  font-weight:500
}

.qa-person span {
  display:block;
  font-size:12px;
  color:#79866a;
  margin-top:4px
}

.qa-panel {
  border:1px solid var(--line);
  background:#fbfbf6;
  padding:30px
}

.qa-label {
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:14px;
  flex-wrap:wrap
}

.qa-label>span {
  font-size:12px;
  color:#7b896a;
  align-self:center
}

.suggested-questions {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:21px
}

.suggested-questions button {
  border:1px solid #d8ddce;
  border-radius:3px;
  font-size:12px;
  padding:7px 10px;
  background:#f3f5ec
}

.suggested-questions button:hover {
  background:#e5ecdd
}

.qa-result {
  min-height:205px;
  padding:23px 4px 17px;
  position:relative
}

.quote-mark {
  font:45px/1 Georgia;
  color:#8d9d78
}

.qa-result p {
  font:21px/1.85 var(--serif);
  margin-top:-5px
}

.qa-result>small {
  display:block;
  font-size:12px;
  color:#758763;
  margin-top:10px
}

.qa-result.answered p {
  font:15px/1.95 var(--sans);
  margin:8px 0 14px
}

.qa-result .asked {
  font-size:12px;
  color:#71875b;
  border-left:2px solid #b3bea0;
  padding-left:10px
}

.qa-sources {
  display:flex;
  flex-wrap:wrap;
  gap:8px
}

.qa-sources button {
  font-size:12px;
  padding:4px 8px;
  background:#e9eee1
}

#question-form {
  display:flex;
  align-items:center;
  border:1px solid #c8cfbc;
  background:white;
  padding:7px;
  gap:10px
}

#question-form input {
  min-width:0;
  flex:1;
  border:0;
  padding:6px 8px;
  background:transparent;
  font-size:14px;
  color:var(--ink)
}

#question-form input:focus {
  outline:0
}

#question-form:focus-within {
  outline:2px solid #a68043;
  outline-offset:3px
}

#question-form button {
  width:34px;
  height:34px;
  background:var(--green);
  color:white;
  font-size:22px;
  flex-shrink:0
}

.qa-footnote {
  font-size:12px;
  line-height:1.7;
  color:#7b876b;
  margin-top:12px
}

.closing {
  text-align:center;
  padding-top:20px;
  padding-bottom:74px
}

.closing-line {
  display:inline-block;
  height:40px;
  width:1px;
  background:#a8b899;
  margin-bottom:26px
}

.closing p {
  font:28px/1.9 var(--serif);
  letter-spacing:3px;
  color:#59654e
}

.closing-sign {
  display:block;
  font-size:12px;
  color:#7a8b69;
  letter-spacing:2px;
  margin-top:23px
}

.site-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--line);
  padding-top:25px;
  padding-bottom:25px;
  gap:25px
}

.footer-brand {
  font:22px var(--serif);
  letter-spacing:3px;
  white-space:nowrap
}

.footer-brand span {
  font:10px Arial;
  letter-spacing:1.6px;
  margin-left:13px
}

.site-footer p {
  font-size:12px;
  color:#7b876b;
  text-align:center
}

.site-footer button {
  font-size:12px;
  white-space:nowrap
}

.skip {
  position:fixed;
  left:10px;
  top:-100px;
  z-index:1000;
  background:var(--green);
  color:white;
  padding:10px
}

.skip:focus {
  top:10px
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap
}

.mobile-nav[hidden] {
  display:none
}

.toast {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  padding:12px 24px;
  background:var(--green);
  color:white;
  font-size:14px;
  box-shadow:0 5px 20px #0002;
  z-index:200
}

.toast[hidden] {
  display:none
}

dialog {
  border:0;
  padding:0;
  background:var(--paper);
  color:var(--ink);
  width:min(900px,calc(100% - 40px));
  max-height:90vh;
  max-height:90dvh;
  overflow:auto;
  box-shadow:0 15px 90px #10201750
}

dialog::backdrop {
  background:#11271fcc;
  backdrop-filter:blur(5px)
}

.dialog-close {
  position:sticky;
  float:right;
  top:16px;
  margin:16px 16px -60px 0;
  width:38px;
  height:38px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:50%;
  z-index:5;
  font:26px Arial;
  box-shadow:0 2px 5px #0001
}

.modal-pad {
  padding:55px 56px
}

.modal-eyebrow {
  font-size:12px;
  letter-spacing:1.5px;
  color:var(--gold);
  margin-bottom:13px;
  padding-right:20px
}

.modal-title {
  font:35px/1.5 var(--serif);
  letter-spacing:1px;
  margin-bottom:20px;
  padding-right:24px
}

.modal-description {
  font-size:15px;
  line-height:2;
  color:#6e7c5d
}

.modal-body {
  font-size:16px;
  line-height:2.1;
  color:#53614c
}

.modal-body p {
  margin-bottom:20px
}

.modal-body blockquote {
  margin:25px 0;
  padding:18px 24px;
  border-left:2px solid #aab597;
  background:#e9eddf;
  font:22px/1.8 var(--serif)
}

.modal-hero {
  height:300px;
  width:100%;
  object-fit:cover
}

.source-row {
  border-top:1px solid var(--line);
  margin-top:30px;
  padding-top:20px;
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  align-items:center
}

.source-row span {
  font-size:12px;
  color:#70835c;
  margin-right:8px
}

.source-row button {
  font-size:12px;
  border:1px solid #cdd6bd;
  padding:7px 11px
}

.source-row button:hover {
  background:#e6ecdc
}

.modal-nav {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:30px
}

.modal-nav button {
  font-size:14px;
  border-bottom:1px solid #a8b89a;
  padding:5px 0
}

.archive-meta {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:23px 0;
  padding:18px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}

.archive-meta dt {
  font-size:12px;
  color:#778965
}

.archive-meta dd {
  font-size:14px;
  margin:5px 0 0
}

.document-paper {
  padding:35px;
  background:#f0eddf;
  border:1px solid #dad6c4
}

.document-paper p {
  white-space:pre-wrap;
  font:18px/2.15 var(--serif);
  letter-spacing:.6px
}

.archive-footer {
  margin-top:24px;
  display:flex;
  gap:15px;
  align-items:center;
  justify-content:space-between
}

.archive-footer small {
  font-size:12px;
  color:#73855d
}

.archive-footer .button {
  font-size:13px;
  padding:9px 14px;
  min-height:40px
}

.source-link {
  display:inline-block;
  margin-top:15px;
  font-size:14px;
  color:var(--gold);
  text-decoration:underline;
  text-underline-offset:5px
}

.book-reader {
  display:grid;
  grid-template-columns:185px 1fr;
  min-height:550px
}

.book-toc {
  background:#e8ecdf;
  padding:35px 24px
}

.book-toc>span {
  font:25px var(--serif);
  display:block;
  margin:15px 0 26px
}

.book-toc button {
  display:block;
  text-align:left;
  font-size:13px;
  padding:12px 0;
  width:100%;
  color:#6b7b59;
  border-bottom:1px solid #d2d9c5
}

.book-toc button.active {
  color:#213c2f;
  font-weight:600
}

.book-page {
  padding:50px 42px 35px;
  min-width:0
}

.book-page .modal-title {
  font-size:29px
}

.book-page .modal-body {
  font:17px/2.1 var(--serif)
}

.book-pagination {
  font-size:12px;
  color:#73845d;
  border-top:1px solid var(--line);
  padding-top:18px;
  display:flex;
  justify-content:space-between;
  margin-top:22px
}

.book-pagination button {
  font-size:13px
}

.film-player {
  position:relative;
  aspect-ratio:16/10;
  background:#101c16;
  overflow:hidden;
  color:white
}

.film-player>img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.76;
  transition:opacity .6s
}

.film-player:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(#06150d30,transparent 30%,#06150dea)
}

.film-overlay {
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:end;
  padding:36px 45px
}

.film-scene-year {
  font:italic 20px Georgia;
  color:#e1d7bc;
  margin-bottom:6px
}

.film-scene-title {
  font:35px/1.6 var(--serif);
  letter-spacing:3px
}

.film-caption {
  font:16px/1.9 var(--sans);
  color:#e2e7d8;
  max-width:610px;
  margin-top:13px
}

.film-controls {
  padding:17px 30px;
  background:#20352c;
  color:#e8ecdf;
  display:flex;
  align-items:center;
  gap:20px
}

.film-controls button {
  border:1px solid #829077;
  padding:6px 12px;
  font-size:13px;
  min-width:64px
}

.film-track {
  height:3px;
  background:#ffffff30;
  flex:1
}

.film-progress {
  height:100%;
  background:#d7c7a3;
  width:0%
}

.film-time {
  font-size:12px
}

.film-under {
  padding:25px 30px;
  font-size:13px;
  color:#73875e
}

.film-under p {
  margin-bottom:10px
}

.film-under button {
  font-size:14px;
  text-decoration:underline;
  text-underline-offset:4px
}

.audio-reader {
  margin:25px 0;
  background:#e8eddf;
  padding:25px
}

.audio-reader .sound-wave {
  margin:0 auto;
  height:60px;
  max-width:330px
}

.audio-actions {
  display:flex;
  gap:15px;
  justify-content:center;
  margin-top:16px
}

.audio-status {
  text-align:center;
  font-size:13px;
  color:#6a8253;
  margin-top:15px
}

.family-intro {
  margin-bottom:23px;
  font-size:15px;
  color:#6b8059
}

.family-generation {
  margin:18px 0;
  padding:16px 20px;
  border:1px solid #d4dbc7;
  background:#f5f6ef
}

.family-generation>span {
  font-size:12px;
  letter-spacing:2px;
  color:#74875b
}

.family-people {
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-top:8px
}

.family-person {
  flex:1;
  min-width:150px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:7px 0;
  text-align:left
}

.family-person .initial {
  width:43px;
  height:43px;
  border-radius:50%;
  background:#e5eadb;
  display:grid;
  place-items:center;
  font:19px var(--serif);
  flex-shrink:0
}

.family-person strong {
  font-size:16px;
  font-weight:500
}

.family-person small {
  display:block;
  font-size:12px;
  color:#768b5e;
  margin-top:3px
}

.family-generation.current-generation {
  border-color:#92a57b;
  background:#eaf0e1
}

.family-relation-note {
  font-size:13px;
  color:#728558;
  margin-top:15px
}

.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin:25px 0
}

.about-grid>div {
  padding:23px;
  border:1px solid #d6decb
}

.about-grid small {
  font-size:12px;
  letter-spacing:1px;
  color:#728856
}

.about-grid h3 {
  font:20px var(--serif);
  margin:8px 0 12px
}

.about-grid p {
  font-size:14px;
  line-height:1.8;
  color:#6b7e56
}

.topic-list {
  display:grid;
  gap:14px;
  margin-top:25px
}

.topic-list button {
  text-align:left;
  padding:21px;
  border:1px solid #d7dfcb;
  background:#f6f8f1
}

.topic-list h3 {
  font:21px var(--serif);
  margin-bottom:8px
}

.topic-list p {
  font-size:14px;
  color:#6e8558
}

.exhibition-panel {
  padding:26px;
  border-top:1px solid #c7d3b7;
  margin-top:22px
}

.exhibition-panel>span {
  font:14px Georgia;
  color:#738756
}

.exhibition-panel h3 {
  font:25px var(--serif);
  margin:8px 0 15px
}

.exhibition-panel p {
  font-size:15px;
  line-height:1.95;
  color:#65774f
}

.exhibition-panel img {
  width:100%;
  height:230px;
  margin-bottom:18px
}

.print-button {
  margin-top:25px
}

@media(min-width:1500px) {
  .hero {
    gap:60px
  }
  .hero h1 {
    font-size:86px
  }
  .hero-portrait {
    min-height:650px
  }
  .hero-copy {
    padding-top:38px
  }
  .hero-line {
    font-size:32px
  }
  .hero-stats {
    margin-top:48px
  }
}

@media(max-width:1150px) {
  .section-wrap {
    padding-left:36px;
    padding-right:36px
  }
  .site-header {
    padding:0 36px;
    gap:20px
  }
  .desktop-nav {
    gap:20px
  }
  .hero {
    gap:30px
  }
  .hero h1 {
    font-size:65px
  }
  .hero-line {
    font-size:26px
  }
  .hero-stats {
    gap:28px
  }
  .intro-strip {
    gap:22px
  }
  .intro-strip p span {
    display:block;
    margin-left:0
  }
  .section-heading h2 {
    font-size:29px
  }
  .story-grid {
    gap:17px
  }
  .story-img {
    height:248px
  }
  .letter-card {
    padding-left:17px;
    padding-right:17px
  }
  .letter-preview {
    height:209px
  }
  .letter-preview p {
    font-size:18px
  }
  .story-caption h3 {
    font-size:19px
  }
  .story-no {
    display:none
  }
  .works-grid {
    gap:17px
  }
  .work-visual {
    height:310px
  }
  .book-title {
    font-size:34px;
    margin-top:24px
  }
  .book-visual {
    padding:19px 18px
  }
  .book-series {
    font-size:10px
  }
  .book-title span {
    font-size:11px;
    letter-spacing:0
  }
  .film-title {
    font-size:28px
  }
  .family-visual>div {
    font-size:32px
  }
  .audio-title {
    font-size:28px
  }
  .work-label h3 span {
    display:block;
    margin-left:0;
    margin-top:3px
  }
  .more-works {
    gap:18px
  }
  .conversation {
    gap:42px
  }
  .qa-panel {
    padding:24px
  }
  .archive-item {
    gap:11px;
    padding:13px
  }
  .archive-thumb,.archive-document {
    width:53px;
    height:64px
  }
  .hero-buttons {
    gap:20px
  }
  .button {
    gap:20px
  }
  .archive-grid {
    gap:12px
  }
  .family-visual>span {
    font-size:9px;
    letter-spacing:.4px
  }
  .book-bottom {
    left:18px;
    right:18px
  }
}

@media(max-width:900px) {
  .site-header {
    height:80px;
    padding:0 28px
  }
  .desktop-nav {
    gap:16px;
    font-size:12px
  }
  .brand>span:last-child {
    font-size:25px
  }
  .about-button {
    font-size:12px;
    padding:8px 10px
  }
  .section-wrap {
    padding-left:28px;
    padding-right:28px
  }
  .hero {
    gap:26px;
    padding-top:26px
  }
  .hero-copy {
    padding-top:17px
  }
  .hero h1 {
    font-size:58px;
    letter-spacing:5px
  }
  .hero-line {
    font-size:24px;
    letter-spacing:1px
  }
  .hero-description {
    font-size:14px
  }
  .person-meta {
    margin-top:30px;
    font-size:12px
  }
  .issue {
    display:none
  }
  .hero-buttons {
    gap:13px;
    flex-wrap:wrap
  }
  .hero-stats {
    gap:22px;
    margin-top:28px
  }
  .hero-stats>div {
    min-width:65px
  }
  .hero-stats strong {
    font-size:28px
  }
  .hero-portrait {
    min-height:610px
  }
  .portrait-top {
    left:22px;
    right:22px;
    font-size:9px;
    letter-spacing:1px
  }
  .portrait-top span {
    display:none
  }
  .hero-portrait figcaption {
    left:24px;
    right:22px
  }
  .portrait-caption {
    font-size:20px
  }
  .image-disclosure {
    left:24px
  }
  .portrait-play {
    width:42px;
    height:42px
  }
  .intro-strip {
    gap:20px
  }
  .intro-strip p {
    font-size:12px
  }
  .intro-strip a {
    font-size:12px
  }
  .section-space {
    padding-top:65px;
    padding-bottom:65px
  }
  .section-heading h2 {
    font-size:27px
  }
  .section-heading>p,.section-side-note {
    font-size:12px
  }
  .journey-content {
    gap:28px
  }
  .journey-image {
    height:300px
  }
  .journey-text h3 {
    font-size:25px;
    margin:13px 0
  }
  .journey-text>p {
    font-size:15px
  }
  .journey-location {
    margin:15px 0
  }
  .chapter-footer {
    font-size:13px
  }
  .chapter-footer button:last-child {
    font-size:12px
  }
  .year-tabs button strong {
    font-size:23px
  }
  .year-tabs button span {
    font-size:13px
  }
  .story-grid {
    gap:15px
  }
  .story-img {
    height:229px
  }
  .letter-card {
    padding-left:14px;
    padding-right:14px
  }
  .letter-top {
    font-size:10px
  }
  .letter-preview {
    height:195px
  }
  .letter-preview p {
    font-size:17px;
    letter-spacing:0;
    margin-left:4px
  }
  .story-caption h3,.letter-card .story-caption h3 {
    font-size:18px
  }
  .story-caption {
    gap:7px
  }
  .story-caption p {
    font-size:12px
  }
  .round-arrow {
    min-width:26px;
    height:26px
  }
  .archive-grid {
    grid-template-columns:1fr 1fr
  }
  .works-grid {
    grid-template-columns:repeat(2,1fr);
    gap:30px 24px
  }
  .work-visual {
    height:360px
  }
  .book-visual {
    padding:25px
  }
  .book-title {
    font-size:46px
  }
  .book-title span,.book-series {
    font-size:12px
  }
  .book-bottom {
    left:25px;
    right:25px
  }
  .film-title {
    font-size:40px;
    top:70px
  }
  .film-kicker {
    font-size:12px
  }
  .audio-title {
    font-size:37px
  }
  .sound-wave {
    margin-top:35px
  }
  .family-visual>div {
    font-size:42px
  }
  .family-visual>span {
    font-size:11px
  }
  .work-label h3 span {
    display:inline-block;
    margin-left:10px
  }
  .more-works {
    flex-wrap:wrap;
    gap:12px 22px
  }
  .more-works>span {
    flex-basis:100%;
    margin-bottom:5px
  }
  .conversation {
    grid-template-columns:.85fr 1.15fr;
    gap:25px
  }
  .conversation-intro h2 {
    font-size:30px
  }
  .conversation-intro>p {
    font-size:14px
  }
  .qa-panel {
    padding:21px
  }
  .qa-result p {
    font-size:19px
  }
  .qa-person {
    gap:10px
  }
  .qa-person img {
    width:43px;
    height:43px
  }
  .site-footer {
    gap:20px
  }
  .footer-brand span {
    display:none
  }
  .site-footer p {
    font-size:11px
  }
}

@media(max-width:650px) {
  html {
    scroll-padding-top:86px
  }
  .site-header {
    height:72px;
    padding:0 22px
  }
  .desktop-nav {
    display:none
  }
  .header-actions {
    display:flex;
    align-items:center;
    gap:17px
  }
  .menu-button {
    width:24px;
    padding:5px 0;
    display:block
  }
  .menu-button span {
    display:block;
    height:1px;
    background:var(--green);
    margin:6px 0;
    width:24px
  }
  .mobile-nav {
    position:fixed;
    top:72px;
    left:0;
    right:0;
    z-index:19;
    background:var(--paper);
    padding:18px 24px 23px;
    border-bottom:1px solid var(--line);
    box-shadow:0 8px 12px #223b2610;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:17px;
    font-size:14px
  }
  .section-wrap {
    padding-left:22px;
    padding-right:22px
  }
  .hero {
    display:flex;
    flex-direction:column;
    gap:28px;
    padding-top:25px;
    padding-bottom:28px;
    min-height:auto
  }
  .hero-copy {
    padding-top:2px
  }
  .hero .eyebrow {
    font-size:11px
  }
  .issue {
    display:block;
    font-size:11px;
    margin-right:0
  }
  .person-meta {
    margin-top:28px
  }
  .hero h1 {
    font-size:65px;
    margin:10px 0 15px;
    letter-spacing:7px
  }
  .hero h1 span {
    font-size:11px;
    letter-spacing:4px;
    margin-top:9px
  }
  .hero-line {
    font-size:27px;
    margin-top:25px
  }
  .hero-description {
    font-size:15px;
    line-height:1.9;
    margin-top:13px
  }
  .hero-buttons {
    margin-top:24px;
    gap:25px
  }
  .button {
    font-size:14px;
    min-height:47px;
    padding:11px 18px
  }
  .text-button {
    font-size:14px
  }
  .hero-stats {
    max-width:none;
    gap:0;
    justify-content:space-between;
    padding-top:20px;
    margin-top:30px
  }
  .hero-stats>div {
    min-width:85px
  }
  .hero-stats strong {
    font-size:30px
  }
  .hero-stats small {
    font-size:12px
  }
  .hero-portrait {
    min-height:450px;
    height:450px;
    width:100%
  }
  .hero-portrait>img {
    object-position:60% 35%
  }
  .portrait-top {
    font-size:10px;
    left:22px;
    right:22px
  }
  .portrait-top>span {
    display:block;
    font-size:11px
  }
  .portrait-caption {
    font-size:23px
  }
  .hero-portrait figcaption {
    bottom:49px;
    left:24px;
    right:24px
  }
  .image-disclosure {
    font-size:11px
  }
  .portrait-play {
    width:48px;
    height:48px
  }
  .intro-strip {
    display:block;
    padding-top:4px;
    padding-bottom:25px
  }
  .strip-label {
    display:block;
    font-size:12px;
    margin-bottom:9px
  }
  .intro-strip p {
    font-size:14px;
    line-height:1.9
  }
  .intro-strip p span {
    font-size:13px
  }
  .intro-strip a {
    display:inline-block;
    font-size:13px;
    margin-top:12px
  }
  .section-space {
    padding-top:55px;
    padding-bottom:55px
  }
  .section-heading {
    display:block;
    margin-bottom:25px
  }
  .section-heading h2 {
    font-size:27px;
    line-height:1.65;
    letter-spacing:0
  }
  .section-heading>p,.section-side-note {
    display:block;
    text-align:left;
    font-size:14px;
    margin-top:13px;
    line-height:1.8
  }
  .section-heading>p br {
    display:none
  }
  .muted {
    font-size:11px;
    letter-spacing:1px
  }
  .year-tabs {
    gap:6px
  }
  .year-tabs button {
    padding:12px 0 18px
  }
  .year-tabs button strong {
    font-size:21px
  }
  .year-tabs button span {
    font-size:12px;
    margin-top:8px
  }
  .year-tabs button.active:before {
    width:90%
  }
  .journey-content {
    display:flex;
    flex-direction:column;
    gap:24px;
    padding-top:30px
  }
  .journey-image {
    width:100%;
    height:240px
  }
  .journey-text {
    padding:0
  }
  .journey-text h3 {
    font-size:27px
  }
  .journey-text>p {
    font-size:16px
  }
  .journey-location {
    font-size:12px;
    margin:19px 0
  }
  .chapter-footer {
    font-size:14px
  }
  .chapter-footer button:last-child {
    font-size:12px
  }
  .stories-section .section-space {
    padding-top:51px;
    padding-bottom:34px
  }
  .story-grid {
    display:flex;
    flex-direction:column;
    gap:32px
  }
  .story-card {
    width:100%
  }
  .story-img {
    height:260px
  }
  .story-caption {
    margin-top:17px;
    gap:13px
  }
  .story-no {
    display:block;
    font-size:25px
  }
  .story-caption h3 {
    font-size:23px
  }
  .story-caption p {
    font-size:13px
  }
  .round-arrow {
    min-width:33px;
    height:33px;
    font-size:17px
  }
  .letter-card {
    padding:23px 25px 0
  }
  .letter-preview {
    height:243px;
    padding-top:18px
  }
  .letter-preview p {
    font-size:23px;
    margin-left:23px;
    line-height:1.85
  }
  .letter-preview small,.letter-preview>span {
    font-size:16px
  }
  .letter-top {
    font-size:12px
  }
  .letter-card .story-caption {
    padding-bottom:23px
  }
  .letter-card .story-caption h3 {
    font-size:23px
  }
  .letter-card .story-caption p {
    font-size:13px
  }
  .quiet-link {
    margin-top:27px;
    font-size:13px
  }
  .filter-tabs {
    gap:23px;
    overflow:auto
  }
  .filter-tabs button {
    font-size:13px;
    padding-bottom:13px
  }
  #collection-count {
    display:none
  }
  .collection-controls {
    margin-bottom:21px
  }
  .archive-grid {
    grid-template-columns:1fr;
    gap:11px
  }
  .archive-item {
    padding:15px;
    gap:17px
  }
  .archive-thumb,.archive-document {
    width:61px;
    height:68px
  }
  .archive-info h3 {
    font-size:15px
  }
  .archive-info p {
    font-size:12px
  }
  .archive-item>span:last-child {
    font-size:17px
  }
  .provenance-note {
    align-items:start;
    font-size:12px;
    gap:9px;
    line-height:1.8
  }
  .provenance-note p span {
    font-size:12px;
    margin-top:4px
  }
  .works-section .section-space {
    padding-top:51px;
    padding-bottom:35px
  }
  .works-grid {
    gap:29px 15px
  }
  .work-visual {
    height:273px
  }
  .book-visual {
    padding:16px 14px;
    border-left-width:4px
  }
  .book-series {
    font-size:10px;
    letter-spacing:0
  }
  .book-title {
    font-size:31px;
    margin-top:23px;
    letter-spacing:2px
  }
  .book-title span {
    font-size:11px;
    letter-spacing:0
  }
  .book-bottom {
    left:14px;
    right:14px;
    bottom:17px;
    padding-top:12px;
    font-size:8px;
    letter-spacing:0
  }
  .book-bottom>span:last-child {
    font-size:12px
  }
  .film-kicker {
    top:17px;
    left:15px;
    font-size:10px;
    letter-spacing:.5px
  }
  .film-title {
    font-size:26px;
    top:57px;
    left:15px;
    letter-spacing:2px
  }
  .film-title span {
    font-size:11px;
    letter-spacing:0
  }
  .film-play {
    left:15px;
    bottom:60px;
    width:35px;
    height:35px;
    font-size:10px
  }
  .film-length {
    font-size:10px;
    left:15px;
    bottom:23px
  }
  .audio-visual {
    padding:17px 14px
  }
  .audio-top {
    font-size:11px;
    letter-spacing:0
  }
  .sound-wave {
    height:49px;
    gap:3px;
    margin-top:23px
  }
  .audio-title {
    font-size:28px;
    margin-top:23px
  }
  .audio-bottom {
    left:14px;
    right:14px;
    bottom:24px;
    font-size:12px
  }
  .family-visual>span {
    font-size:8px;
    letter-spacing:.3px;
    left:15px;
    top:17px
  }
  .family-visual>div {
    font-size:30px;
    left:15px;
    bottom:24px;
    letter-spacing:2px
  }
  .family-visual small {
    font-size:11px;
    letter-spacing:0
  }
  .work-label {
    margin-top:17px
  }
  .work-label small {
    font-size:11px
  }
  .work-label h3 {
    font-size:20px
  }
  .work-label h3 span {
    display:block;
    margin:3px 0 0;
    font-size:12px
  }
  .work-label>span {
    font-size:19px
  }
  .more-works {
    margin-top:30px;
    gap:12px 23px;
    font-size:14px
  }
  .more-works>span {
    font-size:12px
  }
  .conversation {
    display:flex;
    flex-direction:column;
    gap:28px;
    align-items:stretch
  }
  .conversation-intro h2 {
    font-size:33px;
    line-height:1.5;
    margin:15px 0
  }
  .conversation-intro>p {
    font-size:15px
  }
  .qa-person {
    margin-top:22px
  }
  .qa-person strong {
    font-size:14px
  }
  .qa-person span {
    font-size:12px
  }
  .qa-person img {
    width:45px;
    height:45px
  }
  .qa-panel {
    padding:22px 20px
  }
  .qa-label {
    font-size:15px
  }
  .qa-label>span {
    font-size:11px
  }
  .suggested-questions {
    gap:7px;
    margin-top:19px
  }
  .suggested-questions button {
    font-size:12px
  }
  .qa-result {
    min-height:220px
  }
  .qa-result p {
    font-size:21px
  }
  .qa-result>small {
    font-size:12px
  }
  .qa-result.answered p {
    font-size:16px
  }
  #question-form input {
    font-size:14px
  }
  .qa-footnote {
    font-size:12px
  }
  .closing {
    padding-top:5px;
    padding-bottom:52px
  }
  .closing p {
    font-size:25px;
    letter-spacing:1px
  }
  .closing-sign {
    font-size:12px
  }
  .closing-line {
    height:31px
  }
  .site-footer {
    flex-wrap:wrap;
    justify-content:space-between;
    gap:17px;
    padding-top:24px;
    padding-bottom:23px
  }
  .footer-brand {
    font-size:25px
  }
  .footer-brand span {
    display:inline;
    font-size:9px
  }
  .site-footer p {
    order:3;
    font-size:12px;
    text-align:left;
    flex-basis:100%
  }
  .site-footer button {
    font-size:12px
  }
  dialog {
    width:calc(100% - 20px);
    max-height:94dvh
  }
  .modal-pad {
    padding:48px 25px 30px
  }
  .modal-title {
    font-size:29px
  }
  .modal-body {
    font-size:16px;
    line-height:2
  }
  .modal-body blockquote {
    font-size:21px;
    padding:16px 18px
  }
  .modal-hero {
    height:220px
  }
  .archive-meta {
    gap:12px;
    grid-template-columns:1fr 1fr
  }
  .archive-meta dd {
    font-size:13px
  }
  .document-paper {
    padding:23px
  }
  .document-paper p {
    font-size:18px
  }
  .archive-footer {
    align-items:start;
    gap:18px;
    flex-direction:column
  }
  .book-reader {
    display:block
  }
  .book-toc {
    padding:30px 25px 15px
  }
  .book-toc>span {
    font-size:23px;
    margin:9px 0 12px
  }
  .book-chapters {
    display:flex;
    overflow:auto;
    gap:20px
  }
  .book-toc button {
    white-space:nowrap;
    min-width:70px;
    font-size:12px;
    line-height:1.8
  }
  .book-page {
    padding:26px 25px
  }
  .book-page .modal-title {
    font-size:27px;
    padding:0
  }
  .book-page .modal-body {
    font-size:17px
  }
  .film-player {
    aspect-ratio:4/5
  }
  .film-overlay {
    padding:23px 25px
  }
  .film-scene-title {
    font-size:29px
  }
  .film-scene-year {
    font-size:19px
  }
  .film-caption {
    font-size:15px
  }
  .film-controls {
    padding:15px 16px;
    gap:12px
  }
  .film-controls button {
    font-size:12px;
    padding:6px 9px;
    min-width:55px
  }
  .film-time {
    font-size:11px
  }
  .film-under {
    padding:23px
  }
  .about-grid {
    grid-template-columns:1fr
  }
  .about-grid>div {
    padding:20px
  }
  .family-generation {
    padding:14px 16px
  }
  .family-person {
    min-width:130px
  }
  .exhibition-panel {
    padding:18px 0
  }
  .exhibition-panel img {
    height:200px
  }
}

@media(max-width:360px) {
  .section-wrap {
    padding-left:17px;
    padding-right:17px
  }
  .hero h1 {
    font-size:58px
  }
  .hero-line {
    font-size:24px
  }
  .hero-buttons {
    gap:16px
  }
  .year-tabs button strong {
    font-size:18px
  }
  .year-tabs button span {
    font-size:11px
  }
  .filter-tabs {
    gap:17px
  }
  .work-visual {
    height:250px
  }
  .book-title {
    font-size:28px
  }
  .film-title {
    font-size:23px
  }
  .audio-title {
    font-size:25px
  }
  .book-title span {
    font-size:10px
  }
  .family-visual>div {
    font-size:28px
  }
  .section-heading h2 {
    font-size:25px
  }
}

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

@media print {
  body>header,body>nav,body>main,body>footer,.dialog-close,.print-button {
    display:none!important
  }
  dialog[open] {
    position:static;
    display:block;
    width:100%;
    max-height:none;
    overflow:visible;
    box-shadow:none
  }
  dialog::backdrop {
    background:white
  }
  .modal-pad {
    padding:15px
  }
  .exhibition-panel {
    break-inside:avoid
  }
  .exhibition-panel img {
    max-height:200px
  }
}

/* 作品展深化：记忆星图、物件叙事和南窗光影实验。动效只服务于内容浏览。 */
:root {
  --rust:#a55f4a;
  --slate:#526a70;
  --mist:#e9ebe4
}

.memory-atlas-section {
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 32%,#d8e2d5 0,transparent 27%),
    linear-gradient(135deg,#edf0e8,#e4e9df 75%,#dfe7dc)
}

.memory-atlas-section:after {
  content:"";
  position:absolute;
  width:480px;
  height:480px;
  right:-180px;
  bottom:-250px;
  border:1px solid #ffffff90;
  border-radius:50%;
  box-shadow:0 0 0 28px #ffffff22,0 0 0 56px #ffffff18
}

.atlas-layout {
  display:grid;
  grid-template-columns:.68fr 1.32fr;
  align-items:center;
  gap:24px
}

.atlas-note {
  max-width:340px;
  padding:15px 12px 15px 0;
  position:relative;
  z-index:2
}

.atlas-index,.material-stamp {
  display:inline-block;
  color:var(--rust);
  font:11px Arial,sans-serif;
  letter-spacing:1.8px;
  border-top:1px solid currentColor;
  border-bottom:1px solid currentColor;
  padding:5px 0
}

.atlas-note>p {
  font:19px/2 var(--serif);
  color:#49584c;
  margin:27px 0 23px
}

.atlas-legend {
  display:flex;
  flex-wrap:wrap;
  gap:13px;
  color:#6f7d6d;
  font-size:12px
}

.atlas-legend>span {
  display:inline-flex;
  align-items:center;
  gap:6px
}

.legend-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  display:inline-block
}

.dot-object {background:var(--rust)}
.dot-person {background:var(--green)}
.dot-place {background:var(--slate)}

.atlas-toggle {
  margin-top:32px;
  padding:10px 14px;
  border:1px solid #aebbaa;
  color:#3c5546;
  font-size:13px;
  background:#f3f6ed99;
  transition:.2s
}

.atlas-toggle:hover {
  background:#fffefb;
  transform:translateY(-2px)
}

.atlas-toggle span {
  margin-left:15px;
  color:var(--rust)
}

.atlas-stage {
  min-height:560px;
  perspective:1200px;
  display:grid;
  place-items:center;
  position:relative;
  --tilt-x:0deg;
  --tilt-y:0deg
}

.atlas-stage:before {
  content:"";
  position:absolute;
  width:68%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,#ffffffb8 0,#ffffff33 36%,transparent 70%);
  filter:blur(4px)
}

.atlas-scene {
  width:min(100%,650px);
  aspect-ratio:1.18;
  position:relative;
  transform:rotateX(var(--tilt-y)) rotateY(var(--tilt-x));
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
  transform-style:preserve-3d
}

.atlas-orbit {
  position:absolute;
  inset:11% 6%;
  border:1px solid #7c927f75;
  border-radius:50%;
  transform-style:preserve-3d;
  pointer-events:none
}

.atlas-orbit:after {
  content:"";
  position:absolute;
  inset:10%;
  border:1px dashed #a8bca57a;
  border-radius:50%
}

.orbit-back {
  transform:rotateX(64deg) rotateZ(-12deg) translateZ(-26px);
  animation:atlas-spin 40s linear infinite
}

.orbit-front {
  transform:rotateX(64deg) rotateZ(9deg) translateZ(25px) scale(.78);
  border-color:#a55f4a65;
  animation:atlas-spin-reverse 52s linear infinite
}

.atlas-nodes {
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  animation:atlas-spin 38s linear infinite
}

.atlas-stage.is-paused .atlas-orbit,
.atlas-stage.is-paused .atlas-nodes {
  animation-play-state:paused
}

.atlas-node {
  position:absolute;
  left:50%;
  top:50%;
  width:164px;
  min-height:58px;
  margin:-29px 0 0 -82px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 10px;
  text-align:left;
  border:1px solid #ffffffb8;
  background:#f7f8f1e8;
  box-shadow:0 10px 25px #38503a1b;
  transform:rotate(var(--angle)) translateY(-230px) rotate(calc(-1 * var(--angle))) translateZ(var(--depth));
  transform-style:preserve-3d;
  transition:background .25s,box-shadow .25s,scale .25s;
  z-index:2
}

.atlas-node:hover,.atlas-node:focus-visible {
  background:#fffefb;
  box-shadow:0 16px 35px #38503a32;
  scale:1.08;
  z-index:5
}

.node-dot {
  width:32px;
  height:32px;
  flex:0 0 32px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  font:15px var(--serif)
}

.node-object .node-dot {background:var(--rust)}
.node-person .node-dot {background:var(--green)}
.node-place .node-dot {background:var(--slate)}

.node-copy {
  min-width:0;
  display:block
}

.node-copy b {
  display:block;
  color:#798875;
  font:10px Georgia;
  letter-spacing:.5px
}

.node-copy strong {
  display:block;
  color:#314338;
  font:13px/1.45 var(--serif);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.node-copy small {
  display:block;
  color:#82907e;
  font-size:10px;
  margin-top:1px
}

.atlas-core {
  position:absolute;
  left:50%;
  top:50%;
  width:174px;
  height:174px;
  margin:-87px 0 0 -87px;
  border:1px solid #ffffffde;
  border-radius:50%;
  overflow:visible;
  background:#203d33;
  box-shadow:0 25px 45px #27443335, inset 0 0 0 8px #ffffff14;
  transform:translateZ(82px);
  z-index:3
}

.atlas-core>img {
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  opacity:.74;
  filter:sepia(.16) saturate(.8)
}

.core-halo {
  position:absolute;
  inset:-19px;
  border:1px solid #a7c1a080;
  border-radius:50%;
  box-shadow:0 0 0 14px #b9cdb025;
  animation:core-breathe 4.8s ease-in-out infinite
}

.core-label {
  position:absolute;
  left:50%;
  bottom:-45px;
  transform:translateX(-50%);
  min-width:150px;
  text-align:center;
  color:#fffef1;
  text-shadow:0 1px 8px #10271f
}

.core-label strong {
  display:block;
  font:20px var(--serif);
  letter-spacing:2px
}

.core-label span,.core-label small {
  display:block;
  font-size:10px;
  letter-spacing:1.2px
}

.core-label small {
  color:#d8c49f;
  margin-top:5px
}

.atlas-caption {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid #c3d0c1;
  padding-top:18px;
  color:#657565
}

.atlas-caption p {
  font:18px var(--serif)
}

.atlas-caption span {
  font-size:11px;
  color:#8a907f;
  white-space:nowrap
}

.material-layers-section {
  background:var(--paper);
  position:relative
}

.layers-layout {
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:28px;
  align-items:stretch
}

.layers-intro {
  padding:22px 22px 15px 0;
  border-top:1px solid var(--line)
}

.layers-intro h3 {
  font:30px/1.45 var(--serif);
  margin:25px 0 13px
}

.layers-intro>p {
  color:#6d7968;
  font-size:14px;
  line-height:2
}

.material-tabs {
  display:grid;
  gap:8px;
  margin-top:32px
}

.material-tabs button {
  display:grid;
  grid-template-columns:31px 1fr auto;
  gap:7px;
  align-items:center;
  padding:12px 10px;
  border-bottom:1px solid var(--line);
  color:#84907d;
  text-align:left;
  transition:.2s
}

.material-tabs button:hover,.material-tabs button.active {
  color:var(--green);
  background:#ecefe6
}

.material-tabs button>span {
  color:var(--rust);
  font:13px Georgia
}

.material-tabs strong {
  font:15px var(--serif)
}

.material-tabs small {
  color:#89927e;
  font-size:11px
}

.exhibit-cabinet {display:grid;grid-template-columns:.7fr 1.3fr;gap:32px;margin-top:64px;padding:30px 0 0;border-top:1px solid var(--line)}
.cabinet-copy {padding:12px 18px 0 0}
.cabinet-copy h3 {font:30px/1.45 var(--serif);margin:24px 0 12px}
.cabinet-copy>p {color:#6d7968;font-size:14px;line-height:2;max-width:350px}
.cabinet-controls {display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:28px;border-top:1px solid var(--line)}
.cabinet-control {display:flex;align-items:center;gap:9px;padding:12px 8px;border-bottom:1px solid var(--line);text-align:left;color:#7e8978;font-size:13px}
.cabinet-control span {font:11px Georgia;color:var(--rust)}
.cabinet-control.active,.cabinet-control:hover {color:var(--green);background:#edf0e8}
.cabinet-pause {margin-top:22px;border:1px solid #b7c1b2;padding:9px 13px;color:#47614f;font-size:12px}
.cabinet-pause span {margin-left:12px;color:var(--rust)}
.cabinet-stage {--cabinet-yaw:0deg;--cabinet-pitch:0deg;position:relative;min-height:390px;isolation:isolate;overflow:hidden;perspective:1050px;background:linear-gradient(145deg,#e8e5d9,#d8d6c9);border:1px solid #d1d3c5;box-shadow:inset 0 0 0 10px #f7f4e955;outline:none;touch-action:pan-y}
.cabinet-stage:before {content:"";position:absolute;inset:12px;border:1px solid #ffffff85;pointer-events:none;z-index:5;background:linear-gradient(110deg,transparent 27%,#fff8 45%,transparent 58%);opacity:.28;animation:cabinet-glint 8s ease-in-out infinite}
.cabinet-plinth {position:absolute;left:10%;right:10%;bottom:37px;height:24px;background:#586457;transform:skewX(-12deg);box-shadow:0 13px 15px #26352b40;z-index:1}
.cabinet-object {position:absolute;inset:28px 30px 48px;display:grid;place-items:center;opacity:0;transform:translateY(18px) rotateY(12deg) rotateX(5deg) rotate(-4deg) scale(.9);transition:opacity .55s,transform .65s;pointer-events:none;z-index:2;transform-style:preserve-3d}
.cabinet-object.is-active {opacity:1;transform:translateY(0) rotateY(var(--cabinet-yaw)) rotateX(var(--cabinet-pitch)) rotate(-1deg) scale(1);pointer-events:auto;animation:cabinet-float 5.5s ease-in-out infinite}
.cabinet-object img {width:min(94%,520px);height:100%;object-fit:contain;filter:drop-shadow(0 18px 18px #27362d33);transform:translateZ(22px);backface-visibility:hidden}
.cabinet-object span {position:absolute;bottom:2px;right:5%;font:11px Arial;color:#5c6b5d;letter-spacing:1px}
.cabinet-status {position:absolute;left:25px;bottom:13px;color:#eff3e8;font-size:11px;letter-spacing:1.2px;z-index:6}
@keyframes cabinet-float {0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes cabinet-glint {0%,100%{background-position:-140% 0}45%,58%{background-position:140% 0}}

.material-panel {
  position:relative;
  padding:31px 35px 29px;
  border:1px solid #d5dccd;
  background:#fbfbf6;
  box-shadow:10px 12px 0 #edf0e7;
  overflow:hidden
}

.material-panel:before {
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-80px;
  top:-70px;
  border-radius:50%;
  border:1px solid #d8b78770;
  box-shadow:0 0 0 14px #d8b7871a,0 0 0 28px #d8b78710
}

.material-panel-head {
  display:flex;
  justify-content:space-between;
  color:#82917a;
  font-size:11px;
  letter-spacing:1.4px
}

.material-panel-head b {
  color:var(--rust);
  font-weight:400
}

.material-panel>h3 {
  font:31px var(--serif);
  margin:21px 0 9px
}

.material-intro {
  max-width:630px;
  color:#647364;
  font-size:15px;
  line-height:1.9
}

.material-beats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:17px;
  margin-top:29px
}

.material-beat {
  min-width:0;
  border-top:1px solid #cbd5c5;
  padding-top:12px
}

.material-beat>span {
  color:var(--rust);
  font:13px Georgia
}

.material-beat small {
  display:block;
  color:#82907d;
  font-size:11px;
  margin:9px 0 6px
}

.material-beat h4 {
  font:18px/1.5 var(--serif);
  margin:0 0 8px
}

.material-beat p {
  color:#71806d;
  font-size:13px;
  line-height:1.85
}

.material-panel .source-row {
  margin-top:25px
  position:relative;
  z-index:1
}

.light-lab {
  --light-shift:0%;
  position:relative;
  display:grid;
  grid-template-columns:1.12fr .88fr;
  margin-top:88px;
  overflow:hidden;
  background:#203a32;
  color:#f4f3e7;
  min-height:375px
}

.light-lab-stage {
  position:relative;
  min-height:375px;
  overflow:hidden;
  perspective:1100px;
  background:radial-gradient(circle at 45% 28%,#d7c79b55,transparent 25%),linear-gradient(135deg,#29483b,#172b27 75%)
}

.room-scene {
  width:72%;
  aspect-ratio:1.28;
  position:absolute;
  left:13%;
  top:10%;
  transform:rotateX(52deg) rotateZ(-4deg) rotateY(-10deg);
  transform-style:preserve-3d
}

.room-wall,.room-floor,.room-table,.room-chair,.room-window,.room-light {
  position:absolute;
  transform-style:preserve-3d
}

.room-back {
  inset:0 0 23%;
  background:linear-gradient(120deg,#d6d5c0,#8f9a82 64%,#647566);
  transform:translateZ(-110px);
  box-shadow:inset 0 0 0 1px #ffffff55
}

.room-side {
  top:0;
  right:0;
  width:20%;
  height:77%;
  background:linear-gradient(#8d9a82,#4d6557);
  transform-origin:left;
  transform:rotateY(-72deg)
}

.room-floor {
  left:0;
  right:0;
  bottom:0;
  height:27%;
  background:repeating-linear-gradient(90deg,#5a6f5d 0 2px,#435a4c 2px 58px);
  transform-origin:top;
  transform:rotateX(70deg)
}

.room-window {
  left:15%;
  top:14%;
  width:35%;
  height:45%;
  border:6px solid #394e43;
  background:linear-gradient(135deg,#e5e2c6,#a7c3ad);
  box-shadow:0 0 34px 11px #e6d59b88;
  transform:translateZ(-94px)
}

.room-window:before,.room-window:after {
  content:"";
  position:absolute;
  background:#43574a
}

.room-window:before {left:48%;top:0;bottom:0;width:4px}
.room-window:after {top:48%;left:0;right:0;height:4px}

.room-window i {
  position:absolute;
  height:2px;
  width:145%;
  left:60%;
  background:#f2dfa5a8;
  transform-origin:left;
  transform:rotate(28deg) translateZ(4px)
}

.room-window i:first-child {top:42%}
.room-window i:last-child {top:58%;opacity:.55}

.room-table {
  left:31%;
  bottom:23%;
  width:43%;
  height:12%;
  border-radius:3px;
  background:linear-gradient(#a9784c,#604331);
  transform:translateZ(35px) rotateX(7deg);
  box-shadow:0 18px 0 -3px #4b3528
}

.room-chair {
  right:15%;
  bottom:26%;
  width:15%;
  height:26%;
  border:6px solid #4c382c;
  border-bottom:0;
  transform:translateZ(23px) rotateY(-8deg)
}

.room-light {
  left:calc(17% + var(--light-shift));
  top:30%;
  width:45%;
  height:45%;
  background:radial-gradient(ellipse at 0 50%,#f7dc9a9e,transparent 65%);
  filter:blur(7px);
  transform:translateZ(-42px) rotateZ(12deg);
  transition:left .55s ease,opacity .55s ease
}

.light-lab-disclosure {
  position:absolute;
  left:24px;
  bottom:20px;
  color:#d7d8c3;
  font-size:11px;
  letter-spacing:1px
}

.light-lab-copy {
  padding:38px 42px 32px;
  display:flex;
  flex-direction:column;
  justify-content:center
}

.lab-meta {
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:#b4c2a9;
  font-size:10px;
  letter-spacing:1.5px
}

.lab-meta strong {
  color:#e1c995;
  font:italic 18px Georgia
}

.light-lab-copy h3 {
  font:28px/1.5 var(--serif);
  margin:28px 0 12px
}

.light-lab-copy>p {
  color:#c1ccb8;
  font-size:15px;
  line-height:1.9;
  min-height:58px
}

#light-range {
  width:100%;
  accent-color:#d8b787;
  margin-top:23px
}

.light-scale {
  display:flex;
  justify-content:space-between;
  color:#9cad9e;
  font-size:10px;
  margin-top:7px
}

.light-lab-copy .source-link {
  align-self:flex-start;
  color:#dfcc9f;
  margin-top:24px
}

.light-lab-copy>small {
  color:#8fa091;
  font-size:11px;
  margin-top:18px
}

.archive-grid {
  perspective:900px
}

.archive-item {
  transform-style:preserve-3d;
  transition:transform .3s,box-shadow .3s,background .2s
}

.archive-item:nth-child(3n+1) {transform:rotate(-.55deg)}
.archive-item:nth-child(3n+2) {transform:rotate(.35deg)}
.archive-item:nth-child(3n) {transform:rotate(-.18deg)}
.archive-item[data-type="letter"] {background:#f5f0e4}
.archive-item[data-type="oral"] {background:#edf1e8;border-style:dashed}
.archive-item:hover,.archive-item:focus-visible {transform:translateY(-7px) rotateX(3deg) rotateY(-2deg)!important;box-shadow:0 13px 24px #42553d20}

@keyframes atlas-spin {to{transform:rotateZ(360deg)}}
@keyframes atlas-spin-reverse {to{transform:rotateZ(-360deg)}}
@keyframes core-breathe {0%,100%{transform:scale(.96);opacity:.65}50%{transform:scale(1.04);opacity:1}}

@media(max-width:1150px) {
  .atlas-node {width:145px;margin-left:-72px}
  .atlas-note>p {font-size:17px}
  .material-panel {padding:27px}
  .light-lab-copy {padding-left:30px;padding-right:30px}
}

@media(max-width:900px) {
  .atlas-layout {grid-template-columns:1fr;gap:0}
  .atlas-note {max-width:620px;padding-right:0}
  .atlas-note>p {max-width:560px}
  .atlas-stage {min-height:535px;margin-top:-12px}
  .atlas-caption {margin-top:-5px}
  .layers-layout {grid-template-columns:1fr;gap:22px}
  .layers-intro {padding-right:0}
  .material-tabs {display:flex;overflow:auto;margin-top:24px}
  .material-tabs button {min-width:160px;flex:1}
  .light-lab {grid-template-columns:1fr}
  .light-lab-stage {min-height:330px}
  .light-lab-copy {padding:28px 30px 32px}
  .exhibit-cabinet {grid-template-columns:1fr;gap:15px;margin-top:50px}
  .cabinet-copy {padding-right:0}
  .cabinet-copy>p {max-width:580px}
  .cabinet-stage {min-height:360px}
}

@media(max-width:650px) {
  .atlas-note>p {font-size:16px;line-height:1.9;margin-top:20px}
  .atlas-toggle {margin-top:23px}
  .atlas-stage {min-height:470px;margin-top:5px;overflow:hidden}
  .atlas-scene {width:650px;max-width:none;transform:scale(.68)!important;transform-origin:center}
  .atlas-stage.is-paused .atlas-scene {transform:scale(.68)!important}
  .atlas-node {width:152px}
  .atlas-caption {display:block;margin-top:4px}
  .atlas-caption p {font-size:16px;line-height:1.7}
  .atlas-caption span {display:block;margin-top:8px}
  .material-panel {padding:23px 20px;box-shadow:7px 8px 0 #edf0e7}
  .material-panel>h3 {font-size:27px}
  .material-beats {grid-template-columns:1fr;gap:18px;margin-top:23px}
  .material-beat {display:grid;grid-template-columns:27px 1fr;gap:8px}
  .material-beat small {margin-top:0}
  .material-beat>span {padding-top:2px}
  .light-lab {margin-top:55px}
  .light-lab-stage {min-height:260px}
  .room-scene {width:88%;left:6%;top:12%}
  .light-lab-copy {padding:25px 22px 27px}
  .light-lab-copy h3 {font-size:26px;margin-top:21px}
  .light-lab-copy>p {font-size:14px;min-height:0}
  .light-scale {font-size:9px}
  .cabinet-controls {grid-template-columns:repeat(5,1fr);overflow:auto}
  .cabinet-control {display:block;min-width:82px;padding:10px 8px}
  .cabinet-control span {display:block;margin-bottom:5px}
  .cabinet-stage {min-height:290px}
  .cabinet-object {inset:20px 10px 40px}
  .archive-item:nth-child(n) {transform:none}
  .archive-item:hover,.archive-item:focus-visible {transform:translateY(-4px)!important}
}

@media(prefers-reduced-motion:reduce) {
  .atlas-orbit,.atlas-nodes,.core-halo {animation:none!important}
  .atlas-scene {transition:none}
  .room-light {transition:none}
  .cabinet-object.is-active,.cabinet-stage:before {animation:none!important}
  .cabinet-object,.cabinet-object.is-active {transition:none!important}
}