/* Keep reference-image decorations outside the interactive photo content. */
.botanical-top{height:272px;mask-image:linear-gradient(to right,#000 48%,transparent 99%),linear-gradient(to bottom,#000 63%,transparent 99%)}
.ending-image{inset:auto auto 0 50%;width:620px;height:240px;transform:translateX(-50%);background-size:234.44% 898.19%;background-position:49.59% 85.74%;mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(to bottom,transparent,#000 18%);mask-composite:intersect;mix-blend-mode:multiply}
.ending{background:linear-gradient(#e8dfd1,#e1d2bc)}
.ending p,.keep-dancing{z-index:2}
.line-bottom{bottom:0}
@media(max-width:800px){.ending-image{width:510px;height:198px}.ending p{font-size:24px;left:4%}}
@media(max-width:580px){.ending-image{width:375px;max-width:100%;height:145px}.ending p{font-size:19px;top:12px}.keep-dancing{font-size:20px;right:5%;top:21px}.botanical-top{height:205px}.line-bottom{bottom:12px}}

/* About Us 介绍页 */
.about-page {
  max-width: 820px;
  transform: none;
}

.about-page h1 {
  font-family: var(--detail-hand);
  font-size: clamp(32px, 6vw, 56px);
}

.about-photo {
  display: block;
  width: 100%;
  height: auto;
  margin: 28px 0;
}

.about-copy {
  text-align: left;
  font-size: 16px;
  line-height: 1.9;
  overflow-wrap: anywhere;
}

.about-copy h2 {
  margin: 28px 0 10px;
  font-size: 22px;
}

.about-copy p {
  margin: 0 0 16px;
}

.about-copy .draft-note {
  color: var(--muted);
  font-size: 14px;
}

/* Natural photo proportions; width may be customized per card. */
.photo-anchor {
  width: min(calc(var(--custom-width, var(--card)) * var(--size)), calc(100vw - 72px));
}
.photo-title {
  white-space: normal;
  overflow-wrap: anywhere;
}
.photo-image--custom {
  position: relative;
  overflow: hidden;
  background-image: none;
  aspect-ratio: auto;
}
.photo-image--custom img {
  display: block;
  width: 100%;
  height: auto;
}
/* Only an explicit ratio creates a fixed frame and enables cropping. */
.photo-image--ratio img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Built-in clearance below each row, not an added margin. */
.photo-line {
  --row-gap: var(--layout-rowGap-desktop, 0px);
}
/* Scroll to the viewport edge; only the raised note itself covers photos. */
.photo-scroller {
  left: 0;
}
.line-note {
  z-index: 6;
}
.photo-track {
  padding-left: 244px;
}
@media (max-width: 1100px) {
  .photo-track { padding-left: 198px; }
}
@media (max-width: 800px) {
  .photo-track { padding-left: 166px; }
}
@media (max-width: 580px) {
  .photo-track { padding-left: 27px; }
}

/* Values come from home-layout.js. Edit that file instead of these rules. */
.photo-line { --row-gap: var(--layout-rowGap-desktop, 0px); }
.photo-anchor {
  --gap: var(--layout-gap-desktop, 32px);
  width: min(calc(var(--layout-width-desktop, var(--card)) * var(--size)), calc(100vw - 72px));
  margin-right: var(--gap);
}
.photo-track {
  padding-left: var(--layout-startInset-desktop, 27px);
  padding-right: var(--layout-endInset-desktop, 40px);
}
@media (min-width: 1600px) {
.photo-line { --row-gap: var(--layout-rowGap-wide, 0px); }
.photo-anchor {
  --gap: var(--layout-gap-wide, 32px);
  width: min(calc(var(--layout-width-wide, var(--card)) * var(--size)), calc(100vw - 72px));
  margin-right: var(--gap);
}
.photo-track {
  padding-left: var(--layout-startInset-wide, 27px);
  padding-right: var(--layout-endInset-wide, 40px);
}
}
@media (max-width: 1100px) {
.photo-line { --row-gap: var(--layout-rowGap-tablet, 0px); }
.photo-anchor {
  --gap: var(--layout-gap-tablet, 32px);
  width: min(calc(var(--layout-width-tablet, var(--card)) * var(--size)), calc(100vw - 72px));
  margin-right: var(--gap);
}
.photo-track {
  padding-left: var(--layout-startInset-tablet, 27px);
  padding-right: var(--layout-endInset-tablet, 40px);
}
}
@media (max-width: 800px) {
.photo-line { --row-gap: var(--layout-rowGap-small, 0px); }
.photo-anchor {
  --gap: var(--layout-gap-small, 32px);
  width: min(calc(var(--layout-width-small, var(--card)) * var(--size)), calc(100vw - 72px));
  margin-right: var(--gap);
}
.photo-track {
  padding-left: var(--layout-startInset-small, 27px);
  padding-right: var(--layout-endInset-small, 40px);
}
}
@media (max-width: 580px) {
.photo-line { --row-gap: var(--layout-rowGap-mobile, 0px); }
.photo-anchor {
  --gap: var(--layout-gap-mobile, 32px);
  width: min(calc(var(--layout-width-mobile, var(--card)) * var(--size)), calc(100vw - 72px));
  margin-right: var(--gap);
}
.photo-track {
  padding-left: var(--layout-startInset-mobile, 27px);
  padding-right: var(--layout-endInset-mobile, 40px);
}
}

/* Language note: attached to the header, with its own reserved space. */
@font-face{font-family:'Crew Chinese';src:url('/assets/chinese-handwriting.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{--chinese-hand:'Crew Chinese','KaiTi','STKaiti',serif}
body{font-family:Arial,'Microsoft YaHei','PingFang SC',sans-serif}
.navbar{padding-right:170px}
.navbar .black-note{display:none}
.language-note{position:absolute;right:30px;top:24px;width:112px;min-height:72px;padding:15px 7px 9px;border:0;border-radius:1px 2px 9px 2px;background:linear-gradient(135deg,#f5e9bd,#e9d798);color:var(--ink);box-shadow:2px 5px 8px #59442a2b;transform:rotate(5deg);transform-origin:50% 4px;cursor:pointer;z-index:7;transition:transform .22s,box-shadow .22s}
.language-note:after{content:'';position:absolute;right:0;bottom:0;width:13px;height:13px;background:linear-gradient(135deg,#cbb77755,#fff2cd);border-radius:9px 0 8px 0;pointer-events:none}
.language-pin{position:absolute;top:-6px;left:calc(50% - 5px);width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 32% 27%,#e7b4a0 0 13%,#a75f4d 36%,#743e32 77%);box-shadow:1px 3px 2px #4d30275c}
.language-options{display:flex;justify-content:center;align-items:center;gap:9px;font:16px/1.5 Arial,'Microsoft YaHei',sans-serif}
.language-options>span{opacity:.55}.language-options .selected{opacity:1;font-weight:700;text-decoration:underline;text-decoration-color:#a15d47;text-decoration-thickness:2px;text-underline-offset:5px}
.language-hint{display:block;margin-top:7px;font:10px/1.5 Arial,'Microsoft YaHei',sans-serif;white-space:nowrap}.language-hint>span{display:inline-block;transition:transform .25s}
.language-note:hover{transform:rotate(-2deg) translateY(-2px);box-shadow:3px 7px 10px #59442a38}.language-note:hover .language-hint>span{transform:rotate(100deg)}
.language-note:focus-visible{outline:2px solid #81583b;outline-offset:6px}
.language-note.is-switching{animation:note-switch .55s ease-in-out}
@keyframes note-switch{0%{transform:rotate(5deg)}30%{transform:rotate(-9deg)}65%{transform:rotate(8deg)}100%{transform:rotate(5deg)}}
.language-status{position:fixed;bottom:24px;left:50%;transform:translate(-50%,8px);padding:10px 18px;background:#302f29;color:#faf4e5;border-radius:4px;font-size:13px;z-index:30;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.language-status.visible{opacity:1;transform:translate(-50%,0)}
html:lang(zh-CN){--hand:'Caveat','Crew Chinese','KaiTi',serif}
html:lang(zh-CN) .hero h1{font-family:var(--chinese-hand);font-size:76px;line-height:1.05;letter-spacing:3px;font-weight:400;margin:10px 0 22px}
html:lang(zh-CN) .hero h1 span{margin-top:0}
html:lang(zh-CN) .hero-note,html:lang(zh-CN) .hero-scribble{font-family:var(--chinese-hand);font-size:23px;line-height:1.3}
html:lang(zh-CN) .line-note h2{font-size:27px;line-height:1.2;font-weight:400}
html:lang(zh-CN) .line-note p{font-size:17px;line-height:1.4}
html:lang(zh-CN) .photo-title{font-size:29px;line-height:1.2;font-weight:400}
html:lang(zh-CN) .photo-subtitle{letter-spacing:1.5px;font-size:11px}
html:lang(zh-CN) .tagline{letter-spacing:2px;line-height:1.8}
html:lang(zh-CN) .brand small{letter-spacing:3px}
html:lang(zh-CN) .ending p,html:lang(zh-CN) .keep-dancing{font-size:27px;line-height:1.3}
html:lang(zh-CN) .footer-sign{line-height:1.3;font-size:22px}
/* Share the wall's handwriting across every destination, including mixed-language copy. */
.detail{--detail-hand:'Caveat','Crew Chinese','KaiTi','STKaiti',cursive;font-family:var(--detail-hand)}
.detail h1{font-family:var(--detail-hand);overflow-wrap:anywhere}
.detail .about-copy h2{font-weight:400}
.detail .about-copy{font-size:20px}
.detail .back-link,.detail .return-button,.detail .draft-note,.detail .coming-soon{font-size:18px}
.detail .detail-paper>p:last-of-type{font-size:20px}
html:lang(zh-CN) .detail h1{font-size:clamp(32px,5vw,52px);line-height:1.3}
@media(max-width:1100px){.navbar{padding-right:150px;gap:15px}.navbar nav{gap:16px}.language-note{right:20px}html:lang(zh-CN) .hero h1{font-size:68px}}
@media(min-width:581px) and (max-width:900px){.navbar{height:142px;align-items:flex-start;padding-top:17px;flex-wrap:wrap}.navbar nav{position:absolute;bottom:16px;left:5%;right:5%;justify-content:center;gap:26px}.navbar nav a:last-child{display:block}.language-note{top:22px}}
@media(max-width:800px){html:lang(zh-CN) .hero h1{font-size:62px}html:lang(zh-CN) .hero-note,html:lang(zh-CN) .hero-scribble{font-size:19px}html:lang(zh-CN) .line-note h2{font-size:23px}html:lang(zh-CN) .line-note p{font-size:15px}}
@media(max-width:580px){.navbar{padding:13px 18px;align-items:flex-start;gap:18px}.navbar>.brand{margin-left:2px}.navbar nav{gap:clamp(12px,4vw,25px);justify-content:center}.language-note{width:105px;min-height:65px;right:16px;top:16px;padding-top:12px}.language-options{font-size:14px}.language-hint{font-size:9px}html:lang(zh-CN) .hero h1{font-size:59px;margin:10px 0 25px;letter-spacing:1px}html:lang(zh-CN) .hero .eyebrow{font-size:9px;letter-spacing:1px;margin-bottom:16px}html:lang(zh-CN) .tagline{font-size:9px;letter-spacing:1px}html:lang(zh-CN) .line-note h2{font-size:23px}html:lang(zh-CN) .line-note p{font-size:14px}html:lang(zh-CN) .photo-title{font-size:26px}html:lang(zh-CN) .photo-subtitle{font-size:10px}html:lang(zh-CN) .ending p{font-size:19px}html:lang(zh-CN) .keep-dancing{font-size:19px}html:lang(zh-CN) .line-bottom{letter-spacing:1px}}
@media(max-width:360px){.navbar>.brand{width:158px}.navbar>.brand>span{font-size:29px}.navbar>.brand .crown{width:24px;margin-left:4px}.navbar>.brand small{width:145px}.language-note{right:12px;width:100px}.language-hint{font-size:8.5px}}
@media(min-width:1400px){.navbar{gap:20px}.navbar nav{gap:22px}.navbar .black-note{display:block;min-width:145px;font-size:22px;padding:12px 16px}}

.about-copy .story-author{margin:6px 0 20px;color:var(--muted);font-size:14px;line-height:1.5}