/* Notes, dates and letters extend the existing blue, pink and white palette. */
[hidden] { display: none !important; }
button, input, textarea { font: inherit; }
button { color: inherit; cursor: pointer; }
button:focus-visible, summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
button:disabled { cursor: default; opacity: .55; }
.header nav { gap: .6rem 1.3rem; }
.header nav [aria-current="page"] { color: var(--blue); text-decoration: underline; }
.section-intro { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; }
.section-intro p { margin-top: .75rem; color: var(--muted); }
.timezone-note { display: inline-block; margin-left: 1rem; font-size: .875rem; }
.topics-section { padding-top: 2.75rem; padding-bottom: 2.75rem; }
.topics-heading { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1.5rem; margin-bottom: 1.5rem; }
.topics-heading .eyebrow { color: var(--blue); }
.topics-heading h2 { font: 500 1.125rem/1.8 var(--sans); }
.topics-heading .text-link { margin-left: auto; font-size: .875rem; }
.topic-row { display: grid; grid-template-columns: 6rem 5.5rem minmax(0, 1fr); gap: .7rem 1.25rem; align-items: baseline; padding: 1.2rem 0; border-top: 1px solid var(--line); }
.topic-row time, .journal-entry time { color: var(--muted); font-size: .875rem; }
.topic-category { color: var(--blue); font-size: .75rem; letter-spacing: .08em; }
.topic-row h3 { font-size: 1rem; font-weight: 600; line-height: 1.8; }
.topic-row h3 a { text-decoration: underline; text-decoration-color: #c5dbe6; }
.topic-row p { color: var(--muted); font-size: .875rem; margin-top: .25rem; }
.about-copy .text-link { margin-top: 1.4rem; }
.about-links { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.about-links .support-link { color: #b34e83; border-bottom-color: currentColor; }
.rules-section { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2.5rem 4rem; border-top: 1px solid var(--line); background: linear-gradient(115deg, #f4fbff, #fff 70%); }
.rules-heading, .rules-content { min-width: 0; }
.rules-heading .eyebrow { color: var(--blue); font-size: .875rem; }
.rules-heading h2 { margin: .7rem 0 1rem; }
.rules-heading > p:not(.eyebrow) { color: var(--muted); }
.rules-heading .rules-hint { margin-top: 1rem; font-size: .875rem; }
.rules-list { margin: 0; padding-left: 2rem; }
.rules-list > li { padding: 1rem 0 1rem .5rem; border-bottom: 1px solid var(--line); }
.rules-list > li:first-child { padding-top: 0; }
.rules-list > li::marker { color: var(--blue); font-size: .875rem; font-weight: 600; }
.rules-list summary { padding: .45rem .25rem .45rem 0; cursor: pointer; font-weight: 600; line-height: 1.8; overflow-wrap: anywhere; }
.rules-list summary::marker { color: var(--blue); }
.rules-list details p { padding: .75rem 0 .15rem; color: var(--muted); font-size: 1rem; }
.rules-welcome { margin-top: 1.75rem; padding: 1rem 1.25rem; border-left: 2px solid #d9bfce; background: #fff; font-size: 1rem; }
.guide-section { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2.5rem 4rem; padding-top: 1.5rem; }
.guide-heading .eyebrow, .fan-kit .eyebrow { color: var(--blue); }
.guide-heading h2 { margin: .7rem 0 1rem; }
.guide-heading > p:last-child { color: var(--muted); }
.guide-questions { min-width: 0; }
.guide-questions details { padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.guide-questions details:first-child { border-top: 1px solid var(--line); }
.guide-questions summary { cursor: pointer; font-weight: 600; padding: .35rem .5rem .35rem 0; }
.guide-questions summary::marker { color: var(--blue); }
.guide-questions details p { padding: .85rem 0 .15rem; font-size: 1rem; color: var(--muted); }
.guide-questions a { color: var(--blue); text-decoration: underline; }
.fan-kit { grid-column: 1 / -1; margin-top: 1rem; padding: 1.6rem 1.75rem 1rem; background: linear-gradient(115deg, #f1faff, #fff6fb); border: 1px solid #e0eaf1; border-radius: .75rem; }
.fan-kit h3 { margin-top: .25rem; font: 500 1.25rem/1.8 var(--serif); }
.copy-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.2rem; }
.copy-button { display: grid; flex: 1 1 12rem; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .6rem; text-align: left; padding: .8rem 1rem; border: 1px solid #c9dfe9; border-radius: .5rem; background: #ffffffd9; overflow-wrap: anywhere; }
.copy-caption { grid-column: 1 / -1; font-size: .8125rem; color: var(--muted); }
.copy-button > span:nth-child(2) { font-size: 1rem; }
.copy-label { align-self: center; font-size: .8125rem; color: var(--blue); }
.copy-button:hover { border-color: var(--blue); background: #fff; }
.copy-status { min-height: 1.7rem; margin-top: .65rem; color: var(--blue); font-size: .875rem; }
.copy-fallback { display: block; width: 100%; margin-top: .5rem; padding: .6rem; color: var(--ink); border: 1px solid #b7cddc; border-radius: .3rem; background: #fff; }
.night-gift { flex: 0 1 17rem; align-self: center; text-align: center; min-width: 0; }
.moon-note-button { display: inline-flex; flex-direction: column; align-items: center; gap: .6rem; border: 0; padding: .8rem; background: transparent; color: #dfedfc; font-size: .875rem; }
.moon-note-button img { width: 5.5rem; height: auto; transition: filter .25s; }
.moon-note-button:hover img { filter: drop-shadow(0 0 9px #d5edfa88); }
.moon-note-button:focus-visible { outline-color: #d1ebff; border-radius: .5rem; }
.moon-message { min-height: 4.1rem; margin-top: .8rem; font: 500 1.1rem/1.9 var(--serif); }
.gift-sign { margin-top: 1.2rem; color: #b7d3e6; font-size: .8125rem; letter-spacing: .07em; }
.calendar-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); border: 1px solid #d7e6ef; border-radius: .75rem; overflow: hidden; }
.calendar { padding: 1.75rem; background: #fff; min-width: 0; }
.calendar-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: 1.1rem; }
.calendar-month { font-size: 1.3rem; font-weight: 600; }
.calendar-controls { display: flex; flex-wrap: wrap; gap: .25rem; max-width: 100%; }
.calendar-controls button { min-width: 2.75rem; min-height: 2.75rem; padding: .3rem .6rem; border: 1px solid #dce8ef; border-radius: .4rem; background: #fff; font-size: .875rem; }
.calendar-controls button:hover { background: #edf8fe; }
.calendar-scroll { overflow-x: auto; padding: .3rem; }
.calendar-table { width: 100%; min-width: 15rem; table-layout: fixed; border-collapse: separate; border-spacing: 0 .35rem; text-align: center; }
.calendar-table th { padding-bottom: .3rem; color: var(--muted); font-size: .875rem; font-weight: 500; }
.calendar-table td { padding: 0; height: 3rem; font-size: 1rem; vertical-align: middle; }
.calendar-table th:nth-child(7) { color: #a26080; }
.calendar-table th:nth-child(6) { color: #327a9e; }
.calendar-date { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: calc(100% - 3px); min-height: 2.75rem; margin: auto; padding: .1rem; border: 1px solid transparent; border-radius: .5rem; background: transparent; line-height: 1.5; }
.calendar-date[aria-current="date"] { border-color: #bdccd6; }
.calendar-date.has-event { color: var(--blue); background: #edf8ff; font-weight: 600; }
.calendar-date[aria-pressed="true"] { color: #fff; background: var(--ink); }
.calendar-date .event-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.calendar-key { margin-top: .75rem; color: var(--muted); font-size: .8125rem; }
.calendar-key > span { color: var(--blue); }
.schedule-agenda { min-width: 0; padding: 1.75rem; background: #f3faff; border-left: 1px solid #d7e6ef; }
.agenda-title { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.65rem; }
.agenda-title .eyebrow { color: var(--blue); }
.plain-button { padding: .4rem .2rem; border: 0; background: none; font-size: .875rem; color: var(--blue); text-decoration: underline; min-height: 2.75rem; }
.schedule-agenda h3 { font: 500 1.25rem/1.8 var(--serif); }
.schedule-agenda p { margin-top: .6rem; }
.schedule-agenda [data-agenda] > p { color: var(--muted); }
.schedule-agenda .text-link { margin-top: .9rem; }
.event-card + .event-card { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid #cfdfeb; }
.event-time { display: block; color: var(--blue); font-size: .9375rem; margin-bottom: .6rem; }
.event-platform { font-size: .875rem; color: var(--muted); }
.event-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; margin-top: .75rem; }
.event-actions a, .event-actions button { font-size: .875rem; }
.schedule-agenda .schedule-updated { padding-top: 1.5rem; margin-top: 1.5rem; border-top: 1px solid #dce8f0; color: var(--muted); font-size: .8125rem; }
.watch-section { border-top: 1px solid var(--line); }
.watch-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.voice-card { min-width: 0; padding: 1.75rem; border: 1px solid var(--line); border-radius: .75rem; }
.media-heading .eyebrow { color: var(--blue); }
.media-heading h3 { margin: .7rem 0 .6rem; font: 500 1.35rem/1.7 var(--serif); }
.media-heading p { margin-bottom: 1.5rem; color: var(--muted); font-size: .875rem; }
.x-embed { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
.x-embed > blockquote { margin: 1rem 0; padding: 1.3rem; background: #f4faff; border-left: 2px solid #a1ccdf; }
.x-embed > blockquote a, .x-embed > a { color: var(--blue); text-decoration: underline; font-size: .9375rem; }
.x-embed iframe { max-width: 100% !important; }
.media-fallback { margin-top: 1rem; font-size: .875rem; }
.youtube-channel { padding: 2rem; border-radius: .75rem; background: linear-gradient(150deg, #fff4fa, #f0f9ff); border: 1px solid #eadce7; }
.youtube-channel .eyebrow { color: #946b84; }
.youtube-channel h3 { font: 500 clamp(1.5rem, 2.5vw, 2rem)/1.8 var(--serif); margin: 1.2rem 0; }
.youtube-channel > p:not(.eyebrow) { font-size: .875rem; color: var(--muted); }
.channel-letter { padding: 2rem 0; }
.channel-letter > span { display: inline-grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: 1rem; border: 1px solid #dcb5cf; border-radius: 50%; color: #9d6b8b; font-size: 1.5rem; }
.youtube-channel .button { font-size: .9375rem; gap: 1rem; }
.video-picks { margin-top: 2rem; }
.video-picks > h3 { font: 500 1.5rem/1.8 var(--serif); margin-bottom: 1.3rem; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1.5rem; }
.video-card { min-width: 0; }
.youtube-player { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; min-height: 200px; border: 0; border-radius: .5rem; background: #edf4f9; }
.video-card h4 { margin: .8rem 0 .3rem; font-size: 1.0625rem; line-height: 1.7; }
.video-card p { font-size: .9375rem; color: var(--muted); }
.native-voice { width: 100%; margin-top: 1rem; }
.watch-invitation { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .6rem 2rem; margin-top: 2rem; padding: 1rem; border-bottom: 1px solid var(--line); }
.watch-invitation p { font-family: var(--serif); font-size: 1.125rem; }
.social-window { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 3rem; margin-top: 4rem; padding-top: 3rem; border-top: 1px solid var(--line); }
.social-window h3 { margin: .9rem 0; font: 500 1.5rem/1.8 var(--serif); }
.social-window > div > p:not(.eyebrow) { color: var(--muted); }
.social-window .text-link { margin-top: 1rem; }
.x-timeline-frame { min-width: 0; padding: 1rem; border: 1px solid #dae6ee; border-radius: .6rem; }
.embed-note { margin-top: .85rem; color: var(--muted); font-size: .8125rem; }
.diary-section { border-top: 1px solid var(--line); }
.diary-layout { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 3rem; }
.diary-layout h2 { margin: .8rem 0; }
.diary-layout > div > p:last-child { color: var(--muted); }
.journal-entry { border-left: 2px solid #d9bfce; padding-left: 1.75rem; }
.journal-entry h3 { margin: .7rem 0 1.2rem; font: 500 1.4rem/1.8 var(--serif); }
.journal-entry p + p { margin-top: 1rem; }
.journal-entry + .journal-entry { margin-top: 2rem; }
.letter-invitation { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 3rem; align-items: center; padding-top: 2rem; }
.letter-invitation h2 { margin-top: 1rem; }
.letter-invitation p:not(.eyebrow) { margin-top: 1.3rem; }
.letter-invitation .button { margin-top: 1.75rem; }
.letter-keepsake { width: min(100%, 22rem); justify-self: center; }
.invitation-illustration { padding: .5rem; background: #fff; border: 1px solid var(--line); box-shadow: .55rem .65rem 0 #edf6fb; }
.invitation-illustration img, .message-portrait img { width: 100%; height: auto; }
.signature-preview { width: 100%; text-align: center; padding: 2rem 1rem; }
.letter-keepsake .signature-preview { max-width: 17rem; margin: auto; padding: 1.5rem .5rem 0; }
.art-credit { margin-top: .65rem; color: var(--muted); font-size: .875rem; line-height: 1.8; overflow-wrap: anywhere; }
.art-credit a { text-decoration: underline; text-underline-offset: .2em; }
.name-tag .hero-credit { flex-basis: 100%; margin-top: .2rem; }
.gallery-invitation-link { display: flex; width: fit-content; margin: 1.25rem auto 0; font-size: .875rem; }
.signature-art { display: block; position: relative; width: 100%; aspect-ratio: 2.6; overflow: hidden; }
.signature-art img { position: absolute; top: 50%; left: 50%; width: 180%; max-width: none; height: auto; transform: translate(-50%, -50%); }
.signature-preview figcaption { margin-top: 1rem; font: 500 1rem/1.8 var(--serif); }
.message-page { background: #f8fcff; }
.message-main { max-width: 76rem; margin: auto; padding: 1.5rem var(--gutter) 5rem; }
.breadcrumb { margin: 1rem 0 2.5rem; color: var(--muted); font-size: .875rem; }
.breadcrumb a { display: inline-flex; min-height: 2.75rem; align-items: center; text-decoration: underline; }
.message-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); align-items: center; gap: clamp(1.5rem, 4vw, 3rem); padding: 1rem 0 3.5rem; border-bottom: 1px solid var(--line); }
.message-hero-copy { min-width: 0; }
.message-hero .eyebrow { color: var(--blue); }
.message-hero h1 { margin: 1.2rem 0; font-size: clamp(1.75rem, 3.6vw, 3.2rem); line-height: 1.65; }
.message-intro { color: var(--muted); font-size: 1.125rem; }
.message-portrait { width: min(100%, 23rem); justify-self: end; padding: .65rem; background: #fff; border: 1px solid var(--line); box-shadow: .55rem .65rem 0 #e6f1f8; }
.message-columns { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); padding-top: 3rem; }
.letter-contents { align-self: start; position: sticky; top: 2rem; }
.letter-contents p { margin-bottom: 1rem; color: var(--blue); font-size: .75rem; letter-spacing: .13em; }
.letter-contents a { display: block; min-height: 2.75rem; padding: .5rem 0; font-size: .875rem; }
.letter-paper { min-width: 0; padding: clamp(1.5rem, 4vw, 3.5rem); background: #fff; border: 1px solid #e0e9ef; box-shadow: .6rem .7rem 0 #eaf3f9; }
.letter-section + .letter-section { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid #e2eaf0; }
.letter-section h2 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); margin-bottom: 1.3rem; }
.letter-section p { font-size: 1rem; line-height: 2.2; }
.letter-section p + p { margin-top: 1.1rem; }
.letter-signature { width: 100%; max-width: 18rem; margin: 2.5rem 0 0 auto; }
.letter-signature figcaption { text-align: right; margin-top: .65rem; font-size: .875rem; color: var(--muted); }
.letter-return { margin-top: 3rem; display: flex; justify-content: center; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
@media (max-width: 64rem) {
  .header nav { gap: .4rem 1rem; }
  .guide-section, .rules-section { gap: 2rem; }
  .calendar-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .calendar, .schedule-agenda { padding: 1.25rem; }
  .watch-grid { gap: 1.25rem; }
  .voice-card, .youtube-channel { padding: 1.25rem; }
  .message-columns { grid-template-columns: 1fr; }
  .letter-contents { position: static; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
  .letter-contents p { width: 100%; margin-bottom: 0; }
}
@media (max-width: 47.5rem) {
  .header nav { width: 100%; justify-content: flex-start; gap: .15rem 1.15rem; padding-bottom: .25rem; }
  .header nav a { font-size: .875rem; }
  .section-intro { display: block; }
  .section-intro > .text-link { margin-top: .75rem; }
  .timezone-note { display: block; margin: .3rem 0 0; }
  .topics-heading .text-link { margin-left: 0; }
  .topic-row { grid-template-columns: auto minmax(0, 1fr); gap: .45rem 1rem; }
  .topic-row > div { grid-column: 1 / -1; }
  .guide-section, .rules-section, .watch-grid, .social-window, .diary-layout, .letter-invitation { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .guide-section { padding-top: 0; }
  .fan-kit { padding: 1.25rem 1rem .8rem; }
  .copy-button { flex-basis: 100%; }
  .night { flex-direction: column; align-items: stretch; gap: 1.75rem; }
  .night-gift { flex: auto; align-self: center; width: min(100%, 20rem); }
  .moon-note-button img { width: 4.5rem; }
  .moon-message { min-height: 2.1rem; }
  .calendar-layout { display: block; }
  .calendar { padding: 1.1rem .55rem; }
  .calendar-toolbar { padding-inline: .25rem; }
  .calendar-month { font-size: 1.125rem; }
  .calendar-key { padding-inline: .3rem; }
  .schedule-agenda { border-left: 0; border-top: 1px solid #d7e6ef; }
  .voice-card { padding: 1.1rem .6rem; }
  .media-heading, .media-fallback { margin-inline: .5rem; }
  .social-window { margin-top: 2.5rem; padding-top: 2rem; }
  .x-timeline-frame { padding: .75rem .4rem; }
  .journal-entry { padding-left: 1.25rem; }
  .letter-invitation { padding-top: 1rem; }
  .letter-keepsake { width: min(100%, 18rem); }
  .signature-preview { max-width: 22rem; padding: 1.5rem 0; justify-self: center; }
  .message-main { padding-top: .75rem; }
  .breadcrumb { margin-bottom: 1.25rem; }
  .message-hero { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-bottom: 2rem; }
  .message-intro { font-size: 1rem; }
  .message-portrait { width: min(80%, 15.25rem); justify-self: center; padding: .45rem; }
  .message-columns { padding-top: 1.5rem; gap: 1.5rem; }
  .letter-paper { padding: 1.5rem 1.15rem; box-shadow: .35rem .4rem 0 #eaf3f9; }
  .letter-section + .letter-section { margin-top: 2rem; padding-top: 2rem; }
}
@media (prefers-reduced-motion: reduce) { .moon-note-button img { transition: none; } }
@media print {
  .header nav, .copy-actions, .copy-status, .moon-note-button, .calendar-controls, .event-actions, .x-embed, .video-picks, .letter-contents { display: none !important; }
  .message-page, .letter-paper { background: #fff; box-shadow: none; }
  .message-columns { display: block; }
  .letter-section { break-inside: avoid; }
}