/* Red-edition typography, with an unframed photograph and live folder updates. */
#moments .gallery { display: block; overflow: visible; padding: 0; }
#moments .gallery figure { width: 100%; padding: 0; }
#moments .photo-button { aspect-ratio: auto; background: transparent; }
#moments .photo-button img { height: auto; object-fit: contain; }
:root {
  --red: #242323;
  --deep: #252424;
  --paper: #f7f5f2;
  --pink: #e5e2de;
  --ink: #242323;
  --muted: #6f6967;
  --gold: #8a4551;
  --line: #c9c3be;
  --seal: #8c3446;
}
.hero {
  color: #fff;
  min-height: 92svh;
  text-align: left;
  background: #777 url("assets/editorial-rings.jpg") center 56%/cover no-repeat;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: #00000024;
}
.hero.has-photo::before { background: #00000040; }
.hero-content { position: relative; width: min(100%, 1080px); padding: 44px 0 35px; }
.hero .seal { position: absolute; right: 4px; bottom: 46px; margin: 0; color: #fff; background: var(--seal); width: 34px; height: 34px; font-size: 23px; border: 0; outline: 0; transform: rotate(-6deg); }
.masthead, .hero-foot { border-color: #ffffff70; color: #fff; }
.masthead > :first-child { font: 20px/1 Georgia, serif; }
.hero .eyebrow { margin: 0 0 22px; font-size: 9px; }
.english { font: 56px/.99 "Bodoni 72", Didot, "Times New Roman", serif; text-transform: uppercase; max-width: 9ch; margin: 0; }
.chinese-names { font-size: 16px; margin-top: 28px; }
.date-mark { justify-content: flex-start; gap: 10px; margin: 29px 0 15px; }
.date-mark b, .date-mark span { font: 25px/1.15 "Times New Roman", serif; padding: 0; border: 0; min-width: 0; }
.date-mark i { font: 20px/1 Georgia, serif; color: #d9cecc; }
#heroDate { font-size: 12px; }
#heroTime { font-size: 11px; }
.countdown { margin-top: 12px; }
.scroll { margin: 15px 0 0; justify-items: start; }
.cover, .portrait-frame img, .photo-button img { filter: grayscale(1); }
.story { background: var(--paper); }
.portrait-wrap { width: min(100%, 390px); }
.portrait-caption { text-align: left; border-bottom: 1px solid var(--line); padding-bottom: 10px; font-family: var(--sans); }
.portrait-frame { border-radius: 0; outline: 0; aspect-ratio: 4/5; }
.portrait-art { background: #888 url("assets/editorial-rings.jpg") center/cover; align-items: start; justify-items: start; padding: 25px; }
.portrait-art span { color: white; font: 64px/.95 "Times New Roman", serif; }
.portrait-seal { display: none; }
.story-copy { text-align: left; }
.display-title { font: 35px/1.1 "Bodoni 72", Didot, "Times New Roman", serif; }
.display-title em { font-style: italic; text-transform: none; }
.short-rule { margin-left: 0; background: var(--seal); }
#message { margin-left: 0; }
.story-signature { font-size: 24px; }
.details { color: #f7f5f2; text-align: left; }
.details h2 { color: #f7f5f2; }
.details .eyebrow { color: #c9a6ac; }
.details .section-lead, .event-note, .details-venue { color: #b9b1ae; }
.event-en, .event-no { color: #c9a6ac; }
.timeline li { border-color: #ffffff30; }
.event-time { font-size: 36px; }
.location { background: #f7f5f2; }
.location-heading h2 { font-size: 43px; }
.walking-heading { border-bottom: 1px solid var(--line); padding-bottom: 15px; }
.step-number { border: 0; border-radius: 0; font: 25px/1 Georgia, serif; color: var(--seal); }
.route li:not(:last-child)::before { background: var(--line); }
.button { border-radius: 0; min-height: 52px; }
.button:hover { background: var(--seal); border-color: var(--seal); color: white; }
.moments { text-align: left; background: #ece8e5; }
.gallery { gap: 18px; grid-auto-columns: 88%; }
.gallery figure:first-child .photo-button { border-radius: 0; }
.gallery figure:nth-child(even) .photo-button { aspect-ratio: 4/5; }
.empty-moments { text-align: left; padding: 26px 0; }
.empty-moments span { font-family: "Times New Roman", serif; }
footer { background: #242323; color: white; padding-top: 60px; text-align: left; }
footer .seal { margin-left: 0; color: #ca7c8b; }
footer > p, footer .footer-names, footer > a { color: #f7f5f2; }
footer .footer-names { font: 38px/1.2 "Times New Roman", serif; text-transform: uppercase; margin-top: 25px; }
footer small { color: #b9b1ae; }
footer > a { margin-left: 0; }
.quick-nav { background: #f7f5f2fa; }
@media (max-width: 359px) {
  .english { font-size: 49px; }
  .display-title { font-size: 31px; }
  .story-copy h2 { font-size: 31px; }
}
@media (min-width: 700px) {
  .hero { min-height: 90svh; background-size: cover; background-position: center 59%; }
  .hero-content { padding: 42px 0 28px; }
  .english { font-size: 105px; max-width: 10ch; }
  .hero .seal { width: 40px; height: 40px; font-size: 27px; right: 0; bottom: 48px; }
  .chinese-names { margin-top: 25px; }
  .date-mark { margin-top: 22px; }
  .date-mark b, .date-mark span { font-size: 30px; }
  .display-title, .story-copy h2 { font-size: 49px; }
  .story-layout { max-width: 980px; grid-template-columns: 1.1fr 1fr; gap: 100px; }
  .timeline li { text-align: left; }
  .timeline li + li { border-color: #ffffff30; }
  .location-heading h2 { font-size: 49px; }
  .gallery { grid-auto-flow: initial; grid-template-columns: 1.25fr 1fr; gap: 48px 45px; overflow: visible; }
  .gallery figure:nth-child(even) { padding-top: 100px; }
  .gallery figure:nth-child(3n) { grid-column: 1/-1; width: 74%; }
  .gallery figure:nth-child(3n) .photo-button { aspect-ratio: 3/2; }
  footer { padding-inline: max(48px, calc((100% - 980px)/2)); }
}
/* Poster cover: names above, date and photograph below. No text covers the rings.
   Fixed type sizes at breakpoints keep the composition steady while images load. */
.hero, .hero.has-photo {
  background: #510f1c;
  color: #fff5ec;
  min-height: min(92svh, 900px);
  padding: 25px 24px 20px;
  display: block;
}
.hero::before, .hero.has-photo::before { display: none; }
.hero .cover {
  inset: auto 0 0 auto; width: 45%; height: 46%;
  object-fit: cover; object-position: center; z-index: 0; filter: none;
}
.hero .masthead { border: 0; align-items: start; font-size: 9px; color: #f4ded9; }
.hero .masthead > :first-child { font: inherit; }
.hero .masthead > :last-child { text-align: right; }
.hero-content { width: 100%; padding: 26px 0 12px; margin: 0 auto; }
.hero .eyebrow { display: none; }
.hero .english {
  font: 68px/.95 "Bodoni 72", Didot, "Times New Roman", serif;
  width: 100%; max-width: none; margin: 0; overflow-wrap: normal;
}
.english > span { display: block; }
.english > span + span { text-align: right; margin-top: 8px; }
.english em { font-weight: 400; font-style: italic; }
.hero .chinese-names { text-align: right; font-size: 15px; margin: 18px 0 30px; }
.hero .seal { top: 234px; bottom: auto; right: 0; background: none; color: #ff3b30; border: 1px solid currentColor; transform: none; width: 28px; height: 33px; font-size: 22px; }
.hero.has-photo .seal { color: #ff3b30; }
.hero .date-mark { align-items: start; flex-direction: column; gap: 0; margin: 0 0 12px; width: 48%; }
.hero .date-mark b, .hero .date-mark span { font: 53px/.95 "Bodoni 72", Didot, "Times New Roman", serif; border: 0; }
.hero .date-mark i { font: italic 23px/1 Georgia, serif; padding-left: 20px; color: #e7bcae; }
.hero #dateYear { font-size: 34px; padding-top: 4px; }
.hero #heroDate, .hero .hero-venue, .hero #heroTime, .hero .countdown { max-width: 49%; font-size: 10px; line-height: 1.7; }
.hero .hero-venue { font-family: var(--sans); margin: 12px 0; }
.hero #heroTime { margin-top: 8px; }
.hero .countdown { color: #e7bcae; margin-top: 8px; }
.hero .scroll { margin: 8px 0 0; }
.hero-foot { display: none; }
.portrait-frame img, .photo-button img { filter: none; }
.story, .location { background: #faf8f7; }
.moments { background: #eee7e9; }
.details, footer { background: #510f1c; }
.button { background: #510f1c; border-color: #510f1c; }
.button.secondary { color: #510f1c; }
@media (max-width: 374px) {
  .hero { padding-inline: 20px; }
  .hero .english { font-size: 56px; }
  .hero .seal { top: 211px; }
  .hero .chinese-names { font-size: 13px; }
}
@media (min-width: 430px) and (max-width: 699px) {
  .hero .english { font-size: 78px; }
  .hero .seal { top: 255px; }
}
@media (min-width: 700px) {
  .hero { padding: 30px 48px; min-height: 740px; }
  .hero .masthead, .hero-content { max-width: 1080px; }
  .hero .english { font-size: 115px; width: 660px; }
  .hero .chinese-names { width: 650px; margin: 16px 0 26px; }
  .hero .cover { width: 35%; height: 56%; }
  .hero .seal { right: 0; top: 24px; }
  .hero .date-mark { flex-direction: row; align-items: baseline; gap: 12px; width: 60%; margin: 20px 0; }
  .hero .date-mark b, .hero .date-mark span { font-size: 62px; }
  .hero .date-mark i { padding: 0; font-size: 36px; }
  .hero #dateYear { font-size: 48px; }
  .hero #heroDate, .hero .hero-venue, .hero #heroTime, .hero .countdown { font-size: 12px; }
}
@media (min-width: 700px) and (max-width: 900px) {
  .hero .english { width: 560px; font-size: 97px; }
  .hero .chinese-names { width: 550px; }
}