/* Independent colour fashion edition. Original burgundy edition is untouched.
   Portrait is full-bleed; all typography remains selectable, responsive text. */
:root { --red: #763044; --ink: #343431; --paper: #faf9f7; --muted: #716c69; --line: #d6cfcc; }
.hero, .hero.has-photo {
  min-height: 780px; height: 94svh; max-height: 1040px;
  padding: 22px 24px; color: #fffdf8; background: #645a53;
}
.hero .cover { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 48%; filter: none; z-index: -1; }
.hero::before, .hero.has-photo::before { display: block; content: ""; position: absolute; inset: 0; z-index: 0; background: #17141130; pointer-events: none; }
.hero .masthead { position: relative; z-index: 1; color: #fffdf8; font-size: 9px; border-bottom: 1px solid #ffffff80; padding-bottom: 12px; text-shadow: 0 1px 4px #000; }
.hero-content { position: static; padding: 22px 0 0; }
.hero .english { position: relative; z-index: 1; width: 100%; font-size: 67px; text-align: left; line-height: .93; color: #fffdf8; text-shadow: 0 2px 12px #0009; }
.hero .english > span + span { text-align: right; margin-top: 8px; font-style: italic; }
.hero .chinese-names { position: relative; z-index: 1; width: 100%; margin: 19px 0 0; text-align: right; font-size: 15px; color: #fffdf8; text-shadow: 0 1px 4px #000, 0 0 10px #000; }
.hero .seal, .hero.has-photo .seal { z-index: 1; top: auto; right: 29px; bottom: 196px; color: #ff3939; background: transparent; border: 0; outline: 0; font-size: 36px; width: 44px; height: 46px; text-shadow: 0 1px 3px #3008; }
.hero .seal::before, .hero .seal::after { content: ""; position: absolute; left: 50%; width: 1px; height: 18px; background: currentColor; }
.hero .seal::before { bottom: calc(100% + 7px); }
.hero .seal::after { top: calc(100% + 7px); }
.hero .hero-seal-art {
  position: absolute;
  z-index: 2;
  right: 20px;
  bottom: 190px;
  width: 84px;
  height: auto;
  filter: drop-shadow(0 2px 4px #28000080);
}
/* A full-width information band keeps small text legible over any future photo. */
.fashion-caption { position: absolute; z-index: 1; bottom: 0; left: 0; right: 0; padding: 18px 24px 10px; background: #211b198c; border-top: 1px solid #ffffff70; text-align: left; color: #fffdf8; }
.hero .date-line {
  margin: 0;
  white-space: nowrap;
  font: 400 16px/1.2 "Iowan Old Style", Baskerville, Georgia, serif;
  letter-spacing: .12em;
}
.hero .date-rule {
  position: relative;
  width: 100%;
  height: 1px;
  margin: 12px 0 13px;
  background: linear-gradient(90deg, #fffdf8d9 0 97%, transparent 97%);
}
.hero .date-rule::after {
  content: "";
  position: absolute;
  right: 2%;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fffdf8;
}
.hero #heroDate { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.hero .hero-venue, .hero #heroTime, .hero .countdown { max-width: none; margin: 6px 0 0; font-family: "Iowan Old Style", Baskerville, Georgia, serif; font-size: 14px; line-height: 1.6; color: #fffdf8; text-shadow: 0 1px 3px #000; }
.hero .scroll { position: absolute; right: 24px; bottom: 15px; margin: 0; height: 44px; font-size: 25px; border: 1px solid #ffffff90; border-radius: 50%; justify-items: center; }
.story, .location { background: #faf9f7; }
.story { padding-top: 38px; }
.details { background: #eee5e8; color: #542432; }
.details h2, .details .eyebrow, .details .section-lead, .event-no, .event-en, .details-venue { color: #763044; }
.details .event-note { color: #71616a; }
.timeline li, .timeline li + li { border-color: #cdbcc2; }
.moments { background: #f2f3ef; }
footer { background: #eee5e8; color: #542432; }
footer > p, footer .footer-names, footer > a { color: #542432; }
footer small { color: #71616a; }
@media (max-width: 374px) {
  .hero { padding-inline: 20px; min-height: 700px; }
  .hero .english { font-size: 55px; }
  .hero .chinese-names { font-size: 13px; }
  .hero .date-line { font-size: 14px; letter-spacing: .09em; }
}
@media (min-width: 430px) and (max-width: 699px) {
  .hero .english { font-size: 77px; }
}
@media (min-width: 700px) {
  .hero, .hero.has-photo { min-height: 880px; height: 94svh; padding: 24px 48px; }
  .hero .cover { object-position: 50% 37%; }
  .hero-content { padding-top: 20px; }
  .hero .english { font-size: 78px; width: 100%; }
  .hero .english > span { display: inline; }
  .hero .english > span + span { margin-left: 18px; }
  .hero .chinese-names { width: 100%; font-size: 17px; }
  .hero .seal { right: 48px; bottom: 176px; top: auto; }
  .hero .hero-seal-art { right: 48px; bottom: 174px; width: 98px; }
  .fashion-caption { padding-block: 13px 9px; }
}
@media (min-width: 1100px) {
  .hero .english { font-size: 96px; }
}

/* Interior spreads share the cover's serif/italic pairing and fine editorial rules.
   All selectors below exclude the approved cover. */
main { color: #30332f; }
main .section { padding: 64px 0; }
main .inner { width: min(100% - 48px, 1080px); }
main .eyebrow { display: flex; align-items: center; gap: 18px; color: #665c58; font-size: 10px; margin-bottom: 27px; }
main .eyebrow::after { content: ""; height: 1px; background: currentColor; flex: 1; opacity: .35; }
main .display-title, main .story-copy h2, main .location-heading h2 { font: 51px/1.02 "Bodoni 72", Didot, "Times New Roman", serif; color: inherit; }
main .display-title em { font-weight: 400; }
main .chinese-subtitle { color: #716965; margin-top: 24px; }
.story { background: #fafaf8; }
.story-layout { gap: 36px; }
.story-copy { order: -1; }
.story-copy .display-title em { display: block; text-align: right; }
.story-copy .short-rule { width: 28px; margin: 24px 0; background: #ce4945; }
.story-copy #message { max-width: 390px; font-size: 15px; line-height: 2; color: #625e59; }
.story-signature { font-size: 22px; color: #8b433f; margin-top: 18px; }
.portrait-wrap { width: 100%; margin: 0; }
.portrait-caption { color: #716965; margin-bottom: 12px; font-size: 9px; }
.portrait-frame { aspect-ratio: 4/5; }
.details { background: #353d37; color: #fffdf8; }
.details .eyebrow { color: #d3d4c9; }
.details .display-title { color: #fffdf8; }
.details .display-title em { display: block; text-align: right; }
.details .section-lead { color: #e6ded3; font-size: 13px; margin-top: 26px; }
.details .timeline { margin-top: 32px; border-top: 1px solid #ffffff40; }
.details .timeline li { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; padding: 24px 0; border-bottom: 1px solid #ffffff40; }
.details .event-no { display: none; }
.details .event-en { grid-column: 1; font-size: 9px; color: #c7cdbf; }
.details .timeline h3 { grid-column: 1; font-size: 20px; margin-top: 8px; }
.details .event-time { grid-column: 2; grid-row: 1/3; align-self: center; margin: 0; font: 37px/1.2 "Times New Roman", var(--serif); color: #fffdf8; }
.details .event-note { grid-column: 1/-1; font-size: 12px; color: #c9ccc3; margin-top: 12px; }
.details .details-venue { color: #e5e5dc; font-size: 14px; margin-top: 23px; }
.location { background: #fafaf8; }
.location-heading { display: block; }
.location .venue-info { padding-top: 30px; border-color: #c8cac3; }
.location .venue-name { color: #363c36; font-size: 23px; line-height: 1.5; max-width: 460px; }
.location #address { color: #676b62; }
.walking-heading h3 { color: #363c36; font-size: 19px; }
.walking-heading > span { color: #73786e; }
.walking-heading { border: 0; padding: 0; }
.route { margin: 28px 0 12px; }
.route li { grid-template-columns: 45px 1fr; gap: 18px; padding-bottom: 28px; }
.route .step-number { color: #ae423f; font: italic 32px/1 "Times New Roman", serif; }
.route li:not(:last-child)::before { left: 15px; background: #cecec6; top: 42px; bottom: 8px; }
.route .waypoint { color: #71796c; }
.route h4 { color: #30372f; font-size: 19px; }
.route p { font-size: 14px; color: #62695f; }
.location .button { background: #353d37; border-color: #353d37; color: white; min-height: 54px; }
.location .button.secondary { background: transparent; color: #353d37; }
.location .button:hover { background: #596451; color: white; }
.moments { background: #e5e8e0; padding-bottom: 0 !important; }
.moments .section-lead { color: #62695f; }
#moments .gallery { margin-top: 32px; width: calc(100% + 48px); margin-left: -24px; }
#moments .gallery figure { margin: 0; }
footer { background: #353d37; color: #fffdf8; padding: 54px 24px 100px; text-align: center; }
footer > a { margin-inline: auto; }
footer .footer-monogram { display: block; width: min(41vw, 180px); height: auto; margin: 0 auto 22px; }
footer > p { color: #fffdf8; font-size: 22px; letter-spacing: .12em; }
footer small { color: #c5cbbd; }
footer > a { color: #fffdf8; border: 1px solid #a3ac9a; border-radius: 50%; margin-top: 26px; }
.quick-nav { background: #fafaf8f5; border-color: #d3d5cc; }
.quick-nav a { color: #353d37; }
@media (max-width: 359px) {
  main .display-title, main .story-copy h2, main .location-heading h2 { font-size: 42px; }
  .details .event-time { font-size: 31px; }
}
@media (min-width: 700px) {
  main .section { padding: 90px 0; }
  main .display-title, main .story-copy h2, main .location-heading h2 { font-size: 72px; }
  .story-layout { grid-template-columns: 1fr 1fr; gap: 70px; }
  .story-copy { order: 0; }
  .story-copy .display-title em { text-align: left; }
  .portrait-wrap { max-width: 450px; }
  .details .display-title em { display: inline; text-align: left; }
  .details .timeline { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .details .timeline li { border-left: 0; padding: 30px 0; grid-template-columns: 1fr; }
  .details .event-time { grid-column: 1; grid-row: auto; margin-top: 20px; font-size: 47px; }
  .details .event-note { margin-top: 18px; }
  .location .inner { display: grid; grid-template-columns: 1fr 1.2fr; column-gap: 72px; max-width: 1080px; }
  .location-heading { grid-column: 1; grid-row: 1; }
  .venue-info { grid-column: 1; grid-row: 2; align-self: start; }
  .walking-guide { grid-column: 2; grid-row: 1/4; padding-top: 0; }
  .route { display: block; }
  .location .actions { grid-column: 1/-1; }
  #copyStatus { grid-column: 1/-1; }
  #moments .gallery { width: 100%; margin-left: 0; margin-top: 45px; }
  #moments .inner { max-width: 900px; }
  footer { padding-inline: max(48px, calc((100% - 1080px)/2)); }
}