/* Second edition: clearer reading, clean stickers, and a midweek love note. */
:root {
  --ink: #563e49;
  --muted: #866773;
  --deep-rose: #af556f;
}

.hero { min-height: 648px; padding-top: 48px; }
.hero-lead { color: #876973; }
.button { min-height: 48px; }
.button-primary { background: #b65b74; }
.button-primary:hover { background: #a84e67; }
.button-secondary { color: #92606e; border-color: #e7cbd0; }
.header-love { color: #965067; background: #fff0f2; border-color: #eac9d0; }
.site-header nav { color: #7b5b68; }
.countdown-box { background: #fff9f5; border-color: #dcb3bf; }
.countdown-box b { color: #956975; }
.countdown-box div > span { font-variant-numeric: tabular-nums; font-size: 14px; }
.countdown-cat { width: 76px; height: 101px; bottom: -7px; right: 2px; transform: rotate(5deg); }

/* Wednesday comes before the weekend, so this note is easy to find. */
.study-note {
  position: relative;
  display: grid;
  grid-template-columns: 91px minmax(0, 1fr) 173px;
  gap: 14px 28px;
  align-items: center;
  margin-top: 16px;
  margin-bottom: 78px;
  padding: 33px 37px 28px;
  background: linear-gradient(115deg, #fff3d9, #fff9e9);
  border: 1px solid #ebd9ab;
  border-radius: 22px;
  box-shadow: 0 5px 0 #f0e4c9, 0 16px 35px #b79a6220;
  scroll-margin-top: 100px;
}
.study-note::before {
  content: '';
  position: absolute;
  width: 82px;
  height: 23px;
  left: 33px;
  top: -10px;
  background: #efcbb4a6;
  border-inline: 1px solid #e0b69d99;
  transform: rotate(-6deg);
}
.study-date {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  padding: 10px 8px 11px;
  background: #fffdf8;
  border: 1px solid #e8d2a7;
  border-radius: 11px;
  box-shadow: 0 4px 0 #eadbb4;
  text-align: center;
  color: #9d7547;
  transform: rotate(-4deg);
}
.study-date span { display: block; font: 700 8px Georgia, serif; letter-spacing: .13em; }
.study-date strong { display: block; font: 44px/1.2 Georgia, serif; color: #c68c62; }
.study-date b { display: block; padding-top: 3px; border-top: 1px dashed #e5d7b9; font-size: 11px; }
.study-copy { grid-column: 2; min-width: 0; }
.study-kicker { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 11px; color: #9d7a54; }
.study-kicker > span:first-child { font-weight: 750; letter-spacing: .08em; }
.study-kicker > span:last-child { font-size: 10px; color: #a88a66; }
.study-copy h2 { font: 700 27px/1.45 'Songti SC', 'STSong', serif; margin: 8px 0 7px; color: #805d50; }
.study-copy h2 span { color: #b56a68; text-decoration: underline; text-decoration-color: #edc788; text-decoration-thickness: 6px; text-underline-offset: 1px; text-decoration-skip-ink: none; }
.study-copy p { font-size: 14px; color: #96755f; line-height: 1.8; }
.study-art { grid-column: 3; grid-row: 1 / 3; align-self: end; position: relative; display: flex; flex-direction: column; align-items: center; }
.study-art > span { color: #a37865; font-size: 11px; line-height: 1.6; text-align: center; transform: rotate(5deg); background: #fffdf8; border: 1px solid #ead4b4; padding: 5px 12px; border-radius: 13px 13px 13px 3px; }
.study-art picture { display: block; width: 122px; margin-top: 5px; }
.study-art b { position: absolute; bottom: -4px; right: 4px; font: 700 11px Georgia, serif; color: #b77f64; background: #f7ddbc; border: 1px solid #e5c7a1; border-radius: 6px; padding: 3px 7px; transform: rotate(8deg); }
.study-actions { grid-column: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 9px 19px; }
.study-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px; background: #efd596; border: 1px solid #e0bc71; border-radius: 12px; color: #76532e; font-size: 12px; font-weight: 700; transition: background .2s, transform .2s, border-color .2s; }
.study-check:hover { background: #eaca84; transform: translateY(-2px); }
.study-heart { display: grid; place-items: center; width: 20px; height: 20px; font-size: 20px; font-weight: 400; line-height: 1; }
.study-check[aria-pressed='true'] { color: #56745c; border-color: #b7cfb5; background: #e7f0de; }
.study-check[aria-pressed='true'] .study-heart { color: #b86d78; }
.calendar-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 12px; font-weight: 650; color: #987352; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #dcc4a5; }
.calendar-link:hover { color: #8c5261; }
.study-record { flex-basis: 100%; font-size: 10px; color: #9c826a; line-height: 1.65; min-height: 17px; }

/* Readability and space around each illustration. */
.overview-intro p, .section-heading p, .love-copy p { color: #8d6d77; font-size: 14px; }
.day-tab > span:last-of-type { color: #80686a; font-size: 13px; }
.day-tab > strong { color: #64444f; }
.story-main > h3 { font-size: 34px; }
.story-description { color: #886b72; font-size: 14px; }
.moment strong { font-size: 16px; }
.moment p { color: #90727b; font-size: 13px; line-height: 1.8; }
.friday .story-main { display: grid; grid-template-columns: minmax(0, 1fr) 196px; gap: 0 14px; }
.friday .story-kicker { grid-column: 1 / -1; }
.friday .story-main > h3 { grid-column: 1; }
.friday .moment-list { grid-column: 1; max-width: none; }
.friday-sticker { position: static; grid-column: 2; grid-row: 2 / 4; width: 196px; align-self: end; margin-bottom: -6px; transform: rotate(-4deg); }
.friday .story-scribble { top: 45px; right: 51px; }
.match-quick small { color: #92754d; font-size: 11px; }
.match-quick strong { color: #7a5e43; font-size: 14px; font-variant-numeric: tabular-nums; }
.track-caption { color: #927055; background: #fdf0e0; font-size: 11px; }
.overtime-note { color: #91735e; font-size: 12px; line-height: 1.8; }
.match-details summary { min-height: 52px; color: #a35b6b; font-size: 13px; }
.match-detail-body { color: #86676c; font-size: 13px; }
.round-list > div { padding: 9px 3px; }
.round-list b { color: #71535c; font-size: 14px; font-variant-numeric: tabular-nums; }
.schedule-note { font-size: 11px; color: #967a7d; }
.hotel-copy p { color: #8c6973; font-size: 14px; }
.hotel-copy h3 { font-size: 25px; }
.checkout-note { border-color: #cde2d6; }
.checkout-note small { color: #6f9281; }
.checkout-note strong { color: #527d69; font-size: 17px; }
.sunday-main > .story-description { max-width: calc(100% - 170px); }
.sunday-sticker { right: 30px; bottom: 27px; }

/* The letter keeps a clear close affordance after opening. */
.letter-message { font-size: 15px; line-height: 1.95; color: #795a65; }
.letter-message p { margin-bottom: 14px; }
.letter-card[open] .open-letter { display: flex; padding-top: 6px; }
.letter-open-label { display: none; }
.letter-card[open] .letter-closed-label { display: none; }
.letter-card[open] .letter-open-label { display: inline; }
.letter-card[open] .open-letter b { transform: rotate(180deg); }
.letter-card[open] .letter-message { animation: note-reveal .3s ease-out; }
.open-letter, .letter-label { color: #9c6474; }
.letter-card summary { border-radius: 10px; }
.wish-item b { color: #70515e; font-size: 15px; }
.wish-item small { color: #937580; font-size: 12px; }
.wish-progress-title { color: #906b77; }
.wish-aside > small { color: #987b80; }
.wish-item { min-height: 94px; }
.final-inner p { color: #956772; font-size: 14px; }
.footer-inner { color: #92757c; font-size: 11px; line-height: 1.9; }
.footer-inner a:hover { color: #ae5770; }

/* A small response to petting Batiao, never an autoplay celebration. */
.floating-friend { pointer-events: none; }
.floating-friend button, .friend-message { pointer-events: auto; }
.friend-message { color: #895366; font-size: 13px; }
.friend-sparkles { position: absolute; right: 15px; top: 14px; width: 58px; height: 10px; pointer-events: none; }
.friend-sparkles i { position: absolute; font-style: normal; font-size: 15px; opacity: 0; color: #cd8097; }
.friend-sparkles i:nth-child(1) { left: 0; --dx: -16px; --r: -18deg; }
.friend-sparkles i:nth-child(2) { left: 21px; --dx: 0px; --r: 12deg; animation-delay: .12s !important; }
.friend-sparkles i:nth-child(3) { right: 0; --dx: 18px; --r: 25deg; animation-delay: .21s !important; }
.is-petted .friend-sparkles i { animation: pet-heart .8s ease-out both; }
@keyframes pet-heart { 0% { opacity: 0; transform: translate(0, 0) scale(.7); } 20% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--dx), -70px) scale(1.2) rotate(var(--r)); } }
@keyframes note-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1000px) {
  .study-note { grid-template-columns: 80px minmax(0, 1fr) 135px; gap: 12px 20px; padding: 30px 26px 25px; }
  .study-art picture { width: 112px; }
  .study-copy h2 { font-size: 25px; }
  .friday .story-main { grid-template-columns: minmax(0,1fr) 150px; }
  .friday-sticker { width: 150px; }
  .moment strong { font-size: 14px; }
  .match-quick strong { font-size: 12px; }
}

@media (max-width: 680px) {
  html { scroll-padding-top: 82px; }
  .hero { min-height: 0; padding-top: 33px; padding-bottom: 61px; }
  .hero h1 { margin-top: 18px; }
  .hero-lead { font-size: 15px; line-height: 1.95; }
  .hero-actions { margin-top: 20px; }
  .button { min-height: 47px; font-size: 12px; }
  .countdown-box { margin-top: 27px; }
  .countdown-cat { width: 69px; height: 92px; right: 6px; }
  .hero-scene { margin-top: 14px; height: 370px; }
  .header-love { font-size: 11px; }
  .study-note {
    grid-template-columns: 61px minmax(0,1fr);
    gap: 18px 16px;
    padding: 26px 20px 23px;
    margin-top: 10px;
    margin-bottom: 57px;
    border-radius: 18px;
    scroll-margin-top: 86px;
  }
  .study-note::before { left: 22px; width: 65px; height: 19px; top: -8px; }
  .study-date { grid-row: 1; align-self: start; margin-top: 5px; padding: 8px 4px; border-radius: 9px; }
  .study-date span { font-size: 6px; letter-spacing: .08em; }
  .study-date strong { font-size: 35px; }
  .study-date b { font-size: 10px; }
  .study-copy { grid-column: 2; }
  .study-kicker { gap: 4px; flex-direction: column; align-items: flex-start; font-size: 11px; }
  .study-kicker > span:last-child { font-size: 10px; }
  .study-copy h2 { font-size: 23px; line-height: 1.55; margin: 6px 0; }
  .study-copy p { font-size: 12px; line-height: 1.8; }
  .study-actions { grid-column: 1 / -1; padding-right: 83px; gap: 5px 13px; align-items: flex-start; }
  .study-check { min-height: 44px; padding: 9px 10px; font-size: 11px; gap: 5px; text-align: left; line-height: 1.5; }
  .study-heart { flex-shrink: 0; width: 18px; }
  .calendar-link { min-height: 37px; font-size: 11px; }
  .study-record { font-size: 9px; }
  .study-art { position: absolute; right: 12px; bottom: 28px; width: 83px; }
  .study-art > span { padding: 3px 5px; font-size: 8px; line-height: 1.5; }
  .study-art picture { width: 82px; }
  .study-art b { font-size: 8px; right: -2px; bottom: -6px; padding: 2px 5px; }
  .overview-intro p, .section-heading p, .love-copy p { font-size: 13px; line-height: 1.8; }
  .day-tab > span:last-of-type { font-size: 11px; }
  .day-tab > strong { font-size: 14px; }
  .day-tab { min-height: 169px; }
  .journey { padding-top: 62px; }
  .story-main { padding: 27px 22px 30px; }
  .story-main > h3 { font-size: 28px; }
  .story-kicker { letter-spacing: .1em; }
  .friday .story-main { grid-template-columns: minmax(0,1fr) 100px; column-gap: 10px; }
  .friday .story-main > h3 { grid-column: 1 / -1; }
  .friday .moment-list { grid-column: 1; margin-top: 22px; }
  .friday-sticker { width: 100px; grid-column: 2; grid-row: 3; align-self: end; margin-bottom: 1px; }
  .friday .story-scribble { top: 26px; right: 18px; font-size: 11px; }
  .moment strong { font-size: 14px; }
  .moment p { font-size: 12px; line-height: 1.75; }
  .story-description { font-size: 14px; line-height: 1.9; }
  .saturday-main > h3 { max-width: 76%; }
  .saturday-main > .story-description { max-width: 100%; padding-right: 0; }
  .competition-sticker { top: 47px; width: 75px; right: 16px; }
  .track-caption { font-size: 10px; }
  .match-quick small, .match-quick strong { font-size: 12px; }
  .overtime-note { font-size: 11px; }
  .match-detail-body { font-size: 12px; }
  .round-list b { font-size: 13px; }
  .hotel-copy p { font-size: 12px; }
  .hotel-copy h3 { font-size: 20px; }
  .sunday-main > .story-description { max-width: calc(100% - 108px); }
  .sunday-sticker { width: 108px; right: 16px; bottom: 20px; }
  .checkout-note { max-width: calc(100% - 101px); padding: 10px; gap: 8px; }
  .checkout-note strong { font-size: 14px; }
  .checkout-heart { font-size: 19px; }
  .letter-message { font-size: 14px; }
  .letter-card[open] .open-letter { font-size: 12px; }
  .wish-item { min-height: 88px; }
  .wish-item b { font-size: 14px; }
  .wish-item small { font-size: 11px; }
  .friend-message { font-size: 12px; }
  .final-inner p { font-size: 12px; }
  .footer-inner { font-size: 10px; padding-right: 62px; padding-bottom: 32px; }
}
@media (max-width: 360px) {
  .study-note { padding-inline: 16px; gap: 16px 12px; }
  .study-copy h2 { font-size: 21px; }
  .study-actions { padding-right: 75px; }
  .study-art { right: 8px; width: 78px; }
  .study-art picture { width: 75px; }
  .friday .story-main { grid-template-columns: minmax(0,1fr) 83px; gap: 0 8px; }
  .friday-sticker { width: 83px; }
  .moment { gap: 7px; }
  .moment strong { font-size: 13px; }
  .checkout-note { gap: 6px; }
  .checkout-icon { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .is-petted .friend-sparkles i { animation: none !important; opacity: 0; }
  .letter-card[open] .letter-message { animation: none; }
}
.study-mobile-break { display: none; }
@media (max-width: 680px) {
  .study-mobile-break { display: block; }
  .study-art { position: relative; grid-column: 2; grid-row: 2; justify-self: end; align-self: center; right: auto; bottom: auto; }
  .study-actions { grid-row: 2; padding-right: 88px; align-self: center; }
  .study-check { font-size: 12px; }
  .calendar-link { font-size: 12px; min-height: 44px; }
  .study-record { font-size: 10px; }
}
@media (max-width: 360px) {
  .study-art { right: auto; bottom: auto; }
  .study-actions { padding-right: 82px; }
  .study-check { font-size: 11px; }
}
html { scroll-padding-top: 90px; }
#study, #friday, #saturday, #sunday { scroll-margin-top: 16px; }
@media (max-width: 680px) { html { scroll-padding-top: 78px; } #study, #friday, #saturday, #sunday { scroll-margin-top: 12px; } }