/* Four seasons from the supplied emblem: sakura, sunflower, maple, snow.
   Original palette/layout with white space between colored surfaces.
   The existing yui540 entrance and its MIT notice remain in motion-yui540.css. */
:root {
  --spring: #d987a4;
  --summer: #d2a332;
  --autumn: #cf6246;
  --winter: #71a8c2;
  --spring-soft: #fff0f5;
  --summer-soft: #fff8e3;
  --autumn-soft: #fff1e9;
  --winter-soft: #eef7fc;
  --winter-ink: #35667b;
  --season-break: 80px;
  --season-spectrum: linear-gradient(90deg,
    var(--spring) 0 calc(25% - 4px),
    #fff calc(25% - 4px) calc(25% + 4px),
    var(--summer) calc(25% + 4px) calc(50% - 4px),
    #fff calc(50% - 4px) calc(50% + 4px),
    var(--autumn) calc(50% + 4px) calc(75% - 4px),
    #fff calc(75% - 4px) calc(75% + 4px),
    var(--winter) calc(75% + 4px) 100%);
}

/* The four-color edge is shared by every page. */
.site-header::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 3px;
  background: var(--season-spectrum);
  pointer-events: none;
}
.site-footer { position: relative; margin-top: var(--season-break); }
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--season-spectrum);
}
.page-intro { position: relative; }
.page-intro::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 24px;
  width: 144px;
  height: 3px;
  background: var(--season-spectrum);
}

/* Keep the supplied logo on white, including throughout its entrance. */
.official-hero, .art-frame, .art-paper { background: #fff; }
.hero-emblem { mix-blend-mode: normal; }
.art-guide { border-color: var(--line); }
/* Explicit white pauses between the existing colored content sections. */
#main { background: #fff; }

.thought-rule { background: var(--spring); }
.event-notice { border-bottom-color: var(--autumn); }
.home-activities { background: var(--summer-soft); }
.page-home .home-activities + .contact-band { margin-top: var(--season-break); }
.activity-journal { border-color: #dec887; }
.journal-letter { color: #e6d39c; }
.home-greeting { background: #fff; }
.greeting-symbol { color: var(--line); }
.home-office { padding-top: 60px; }
.office-layout { border-top-color: #cbdfe9; }
.office-address {
  background: var(--winter-soft);
  border-left-color: var(--winter);
  padding: 24px 28px;
}
.contact-band { background: var(--winter-ink); }
.contact-band .kicker { color: #e1f1f8; }

/* The inner pages continue the same palette in their existing sections. */
.about-mission { background: var(--spring-soft); }
.full-greeting { background: #fff; }
.greeting-letter { border-color: var(--line); }
.status-label { border-color: var(--line); color: var(--muted); background: #fff; }
.next-event { background: var(--spring-soft); }
.archive-card[href$="/s1/"] > div,
.archive-card[href$="/s0/"] > div { background: var(--spring-soft); border-bottom: 3px solid var(--spring); }
.archive-card[href$="/a0/"] > div,
.archive-card[href$="/a1/"] > div { background: var(--autumn-soft); border-bottom: 3px solid var(--autumn); }
.journal-section { background: var(--winter-soft); }
.contact-guidance { background: var(--winter-soft); border-top: 3px solid var(--winter); }
.contact-address { border-top-color: #cbdfe9; }
.social-section { background: var(--summer-soft); }
.social-list > a { border-bottom-color: #e6d7ad; }
.copyright-notice { background: var(--winter-soft); border-left: 3px solid var(--winter); }

/* The loader carries the same colors while the title's 宴 stays red. */
.loader-paper > span { background: #fff; }
.loader-ring-inner { stroke: var(--winter); stroke-opacity: .6; }
.loader-petal[data-season="spring"] { --petal-color: var(--spring); }
.loader-petal[data-season="summer"] { --petal-color: var(--summer); }
.loader-petal[data-season="autumn"] { --petal-color: var(--autumn); }
.loader-petal[data-season="winter"] { --petal-color: var(--winter); }
.loader-petal > span { background: var(--petal-color, var(--intro-red)); }
.loader-petal-outline > span { background: #fff; border-color: var(--petal-color, var(--intro-red)); }
.loader-line { background: var(--winter-soft); }
.loader-line::after { background: var(--season-spectrum); }

@media (max-width: 820px) {
  :root { --season-break: 64px; }
  .office-address { padding: 22px; }
}
@media (max-width: 620px) {
  :root { --season-break: 48px; }
  .home-office { padding-top: 40px; }
  .office-address { padding: 22px 20px; }
  .page-intro::after { bottom: 13px; width: 112px; }
}
@media print {
  .site-header::after, .site-footer::before, .page-intro::after { display: none; }
  :root { --season-break: 24px; }
}