/* ==========================================================================
   Site theme — "Plum" (chosen 2026-09-29 from four design options)
   Loaded after styles.css on every page. styles.css holds the layout and the
   original cream look; this file sets the colors and fonts on top of it.

   Part 1: swaps the fixed cream and sage colors in styles.css for tokens.
   ========================================================================== */

:root {
  --accent: #000;
  --accent-hover: #333;
  --accent-text: #000;
  --on-accent: #fff;
  --card: #fff;
  --bar-solid-bg: var(--paper);
  --bar-button-bg: var(--accent);
  --bar-button-ink: var(--on-accent);
  --font-ui: var(--font-body);
}

html {
  scroll-padding-top: 4.1rem;
}

body {
  font-family: var(--font-body);
}

:focus-visible {
  outline-color: var(--accent);
}

/* ---- top bar ---- */
.site-bar.is-solid {
  background: var(--bar-solid-bg);
  box-shadow: 0 1px 0 var(--line-on-paper);
}

.site-bar-links a {
  font-family: var(--font-ui);
}

.site-bar-donate,
.site-bar.is-solid .site-bar-donate {
  font-family: var(--font-ui);
  color: var(--bar-button-ink) !important;
  background: var(--bar-button-bg);
}

.site-bar-donate:hover,
.site-bar-donate:focus-visible,
.site-bar.is-solid .site-bar-donate:hover,
.site-bar.is-solid .site-bar-donate:focus-visible {
  background: var(--accent-hover);
  color: var(--on-accent) !important;
}

@media (max-width: 74rem) {
  .site-bar-links {
    background: var(--bar-solid-bg);
  }
}

/* ---- hero ---- */
#hero-name-lead {
  color: var(--white-on-black-soft);
}

/* ---- shared pieces ---- */
.carousel-arrow:hover,
.carousel-arrow:focus-visible,
.photos .carousel-arrow:hover,
.photos .carousel-arrow:focus-visible {
  background: var(--accent);
  color: var(--on-accent);
}

.section-more-link:hover,
.section-more-link:focus-visible {
  color: var(--accent-text);
  border-color: var(--accent-text);
}

.button-primary {
  font-family: var(--font-ui);
}

.button-primary:hover,
.button-primary:focus-visible {
  background: var(--accent-hover);
  color: var(--on-accent);
}

.article-card {
  background: var(--card);
}

.article-source,
.article-title,
.article-link {
  color: var(--accent-text);
}

.message-card {
  background: var(--card);
}

.message-read-more {
  font-family: var(--font-ui);
}

/* ---- donate ---- */
.donate-button {
  font-family: var(--font-ui);
  color: var(--on-accent);
  background: var(--accent);
  animation-name: design-pulse;
}

.donate-button:hover,
.donate-button:focus-visible {
  background: var(--accent-hover);
}

@keyframes design-pulse {
  0% {
    box-shadow: 0 0 22px 2px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
  }
  70% {
    box-shadow: 0 0 34px 6px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 0 28px color-mix(in srgb, var(--accent) 0%, transparent);
  }
  100% {
    box-shadow: 0 0 22px 2px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 0 0 transparent;
  }
}

/* ---- footer ---- */
.footer-contact:hover,
.footer-contact:focus-visible {
  color: var(--accent-text);
}

/* ==========================================================================
   Part 2: the Plum look
   A deep plum takes the place of black, so the dark sections feel warm rather
   than somber; white pages in between; a soft pink for the support button.
   A warm, bookish serif for headlines and a friendly rounded sans for reading.
   Everything centered and rounded, gentle rather than formal.
   ========================================================================== */

:root {
  --plum: #2A1433;
  --plum-mid: #4A2657;
  --violet: #7A3E8F;
  --lilac: #F4EDF8;
  --pink: #F48FB6;
  --pink-light: #FFB8D2;

  --paper: #FFFFFF;
  --paper-soft: var(--lilac);
  --ink: #24122B;
  --ink-soft: #5F4E68;
  --black: var(--plum);
  --white-on-black: #FFF7FB;
  --white-on-black-soft: #D4C2DC;
  --line-on-paper: rgba(42, 20, 51, 0.14);
  --line-on-black: rgba(255, 247, 251, 0.2);

  --accent: var(--pink);
  --accent-hover: var(--pink-light);
  --accent-text: var(--violet);
  --on-accent: var(--plum);
  --card: #FFFFFF;
  --bar-button-bg: var(--pink);
  --bar-button-ink: var(--plum);

  --font-display: "Gloock", Georgia, serif;
  --font-body: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Figtree", "Helvetica Neue", Arial, sans-serif;
}

body {
  font-size: 1.0625rem;
}

/* ---- top bar: solid plum over the videos; once you scroll it turns white with plum links and a
   plum line underneath (like option 3). The Support button stays light pink the whole time. ---- */
.site-bar {
  color: #fff;
  background: var(--plum);
  box-shadow: none;
}

.site-bar.is-solid {
  color: var(--plum);
  background: #fff;
  box-shadow: 0 2px 0 var(--plum);
}

.site-bar::before {
  display: none;
}

.site-bar:not(.is-solid) .site-bar-links a {
  text-shadow: none;
}

.site-bar:not(.is-solid) .site-bar-logo svg {
  filter: none;
}

.site-bar-links a {
  font-size: 1.02rem;
  font-weight: 500;
}

.site-bar-donate,
.site-bar.is-solid .site-bar-donate {
  height: 2.8rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  background: var(--pink-light);
  color: var(--plum) !important;
  border: 2px solid var(--pink-light);
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.site-bar.is-solid .site-bar-donate {
  box-shadow: 3px 3px 0 var(--plum);
}

/* over the videos (plum bar): plain white; it turns solid pink, as above, once the bar turns white.
   The border stays (in white) so the button doesn't shift when it changes */
.site-bar:not(.is-solid) .site-bar-donate {
  background: #fff;
  border-color: #fff;
  box-shadow: 0 0 14px 2px rgba(255, 184, 210, 0.45);
  animation: bar-button-glow 3s ease-in-out infinite;
}

/* a slow, soft pink glow that breathes in and out while the button is white; it stops once the bar
   turns white and the button turns pink */
@keyframes bar-button-glow {
  0%, 100% { box-shadow: 0 0 10px 1px rgba(255, 184, 210, 0.35); }
  50% { box-shadow: 0 0 22px 5px rgba(255, 184, 210, 0.7); }
}

@media (prefers-reduced-motion: reduce) {
  .site-bar:not(.is-solid) .site-bar-donate {
    animation: none;
  }
}

.site-bar:not(.is-solid) .site-bar-donate:hover,
.site-bar:not(.is-solid) .site-bar-donate:focus-visible {
  background: var(--pink-light);
  color: var(--plum) !important;
}

.site-bar.is-solid .site-bar-donate:hover,
.site-bar.is-solid .site-bar-donate:focus-visible {
  background: var(--plum);
  border-color: var(--plum);
  color: #fff !important;
}

@media (max-width: 74rem) {
  .site-bar-donate,
  .site-bar.is-solid .site-bar-donate {
    height: 2.4rem;
    font-size: 0.95rem;
  }

  /* the phone menu opens in white (the bar turns white while it's open) with plum links */
  .site-bar-links {
    background: #fff;
    box-shadow: 0 2px 0 var(--plum), 0 1rem 2rem rgba(42, 20, 51, 0.15);
  }

  .site-bar-links a {
    color: var(--plum);
  }
}

/* ---- hero ---- */
.hero-name {
  font-weight: 400;
  font-size: clamp(2.3rem, 6.6vw, 6rem);
  letter-spacing: -0.01em;
}

.hero-tagline {
  font-family: var(--font-body);
  font-style: normal;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
}

/* plum behind the videos, so scrolling through her name fades into plum, the same color as the
   sections that follow. The black shade sits on the videos themselves (instead of the separate
   scrim), so it fades out with them rather than leaving black behind. */
.hero-scrim {
  display: none;
}

.hero-video-pair::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.2) 42%, rgba(0, 0, 0, 0.35) 100%);
  pointer-events: none;
}

.flow-quote {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
}

.flow-intro {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
}

.flow-tile {
  border-radius: 0.5rem;
  overflow: hidden;
}

/* ---- headings ---- */
.section-heading {
  font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.1;
}

.photos,
.old-letters,
.articles,
.messages {
  padding-top: 4.5rem;
  padding-bottom: 5rem;
}

/* ---- letter: rounded photos on a soft lilac field ---- */
.letter {
  padding: 5rem 1.75rem 5.5rem;
}

.letter-portrait-wrap {
  padding: 0;
  border: none;
  border-radius: 1.25rem;
  overflow: hidden;
  background: none;
  box-shadow: 0 1.5rem 3rem rgba(42, 20, 51, 0.18);
}

.letter-portrait-wrap--family {
  border: 0.4rem solid #fff;
}

.letter-salutation {
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  line-height: 1.25;
  color: var(--plum);
}

.letter-body {
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.8;
}

.letter-sign-off {
  font-family: var(--font-body);
}

.letter-signature {
  color: var(--violet);
}

/* ---- carousels ---- */
.photo-carousel-tile {
  border-radius: 1rem;
}

.photos .carousel-arrow {
  background: var(--white-on-black);
  color: var(--plum);
}

.old-letters {
  background: var(--lilac);
}

/* each note shows at its own shape, with no white card around it: the tile itself is invisible and
   the shadow follows the edges of the paper (drop-shadow traces the image, not the box) */
.photo-carousel-tile--letter {
  background: none;
  border: none;
  box-shadow: none;
  overflow: visible;
}

.photo-carousel-tile--letter img {
  filter: drop-shadow(0 0.75rem 1.25rem rgba(42, 20, 51, 0.22));
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.45s ease;
}

/* a scattered pile: every note sits at its own slight angle (the carousel moves the tile, so the
   tilt goes on the note inside it), and the one in the middle straightens up, as if picked up */
.photo-carousel-tile--letter:nth-child(5n + 1) { --tilt: -3deg; }
.photo-carousel-tile--letter:nth-child(5n + 2) { --tilt: 2.5deg; }
.photo-carousel-tile--letter:nth-child(5n + 3) { --tilt: -1.5deg; }
.photo-carousel-tile--letter:nth-child(5n + 4) { --tilt: 3.5deg; }
.photo-carousel-tile--letter:nth-child(5n + 5) { --tilt: -2.5deg; }

.photo-carousel-tile--letter.is-center img {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .photo-carousel-tile--letter img {
    transition: none;
  }
}

.carousel-arrow {
  background: var(--plum);
  color: #fff;
}

/* ---- articles: laid out like option 1 — a big left-aligned heading on a wide column and an outlined
   card that lifts onto a plum shadow on hover — in plum colors and this option's fonts ---- */
.articles {
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid var(--line-on-paper);
}

.articles .section-heading {
  max-width: 72rem;
  margin: 0 auto 2.5rem;
  padding: 0 1.75rem;
  text-align: left;
  font-size: clamp(2.2rem, 5vw, 3.75rem);
  line-height: 1.05;
  color: var(--ink);
}

.article-list {
  justify-content: flex-start;
  padding: 0 1.75rem;
}

.article-card {
  flex-basis: 30rem;
  padding: 2rem;
  border: 1px solid var(--plum);
}

.article-card:hover,
.article-card:focus-visible {
  transform: none;
  box-shadow: 0.5rem 0.5rem 0 var(--plum);
}

.article-source {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 0.9rem;
}

.article-title {
  font-size: 1.7rem;
  line-height: 1.2;
  color: var(--plum);
}

.article-link {
  font-family: var(--font-body);
  font-weight: 600;
}

@media (max-width: 42rem) {
  .articles .section-heading,
  .article-list {
    padding: 0 1.25rem;
  }
}

/* ---- messages: lilac ---- */
.messages {
  background: var(--lilac);
}

.button-primary {
  background: var(--plum);
  color: #fff;
  font-weight: 600;
  font-size: 1.02rem;
}

.button-primary:hover,
.button-primary:focus-visible {
  background: var(--violet);
  color: #fff;
}

.message-card {
  border: none;
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1.5rem rgba(42, 20, 51, 0.08);
}

.message-name {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--plum);
}

.message-text {
  font-family: var(--font-body);
  font-size: 1rem;
}

.message-read-more {
  border-color: var(--plum);
  color: var(--plum);
}

.message-read-more:hover,
.message-read-more:focus-visible {
  background: var(--plum);
  color: #fff;
}

.section-more-link {
  font-family: var(--font-body);
  font-weight: 600;
}

/* ---- donate: laid out like option 1 — left-aligned, a very large heading, the first paragraph
   bigger and brighter, the rest in a narrower reading column — on plum with the pink button ---- */
.donate {
  padding: 6rem 1.75rem 6.5rem;
  text-align: left;
}

.donate-inner {
  max-width: 64rem;
}

.donate-heading {
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.01em;
}

.donate-text,
.donate-note {
  max-width: 46rem;
  font-size: 1.1rem;
  line-height: 1.7;
}

.donate-text:first-of-type {
  margin-top: 2rem;
  font-size: 1.3rem;
  color: var(--white-on-black);
}

/* the button floats at the bottom of the screen while you read this section, and settles into its
   place at the end of the section when you get there (it never leaves the section) */
.donate-button {
  position: sticky;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: 2;
  margin-top: 2.5rem;
  border-radius: 999px;
  padding: 1.3rem 3rem;
  font-size: 1.15rem;
  font-weight: 700;
}

/* ---- footer: plum ---- */
.site-footer {
  background: var(--plum);
  border-top: 1px solid var(--line-on-black);
}

.site-footer p,
.site-footer .footer-copyright {
  font-family: var(--font-body);
  color: var(--white-on-black-soft);
}

.footer-logo,
.footer-contact {
  color: var(--white-on-black);
}

.footer-contact {
  font-family: var(--font-body);
  text-decoration-color: var(--line-on-black);
}

.footer-contact:hover,
.footer-contact:focus-visible {
  color: var(--pink);
}

/* ==========================================================================
   Part 3: the other pages (share form, all messages, a single message, contact)
   ========================================================================== */

/* keyboard focus: violet on white pages, pink on the dark plum sections */
:focus-visible {
  outline-color: var(--violet);
}

.letters-flow :focus-visible,
.photos :focus-visible,
.donate :focus-visible,
.site-footer :focus-visible,
.site-bar:not(.is-solid) :focus-visible {
  outline-color: var(--pink);
}

/* share form */
.share-label {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--plum);
}

.share-input,
.share-editor {
  background: #fff;
}

.share-input {
  border-color: rgba(42, 20, 51, 0.22);
  border-radius: 0.6rem;
}

.share-input:focus {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(122, 62, 143, 0.15);
}

.share-photo-pick {
  border-color: rgba(42, 20, 51, 0.25);
  border-radius: 0.6rem;
}

.share-photo-pick:hover,
.share-photo-pick:has(+ .share-photo-input:focus-visible) {
  border-color: var(--violet);
  color: var(--plum);
}

.share-link-button {
  color: var(--violet);
  font-weight: 600;
}

.share-link-button:hover,
.share-link-button:focus-visible {
  color: var(--plum);
}

.share-editor {
  border-radius: 1rem;
}

.share-editor-stage {
  background: var(--plum);
}

.share-editor-zoom input {
  accent-color: var(--violet);
}

.share-editor-tool[aria-pressed="true"] {
  background: var(--plum);
  border-color: var(--plum);
  color: #fff;
}

.share-help a {
  color: var(--violet);
}

/* all-messages page: the month label pill */
.timeline-marker {
  background: var(--plum);
  box-shadow: 0 0.35rem 1rem rgba(42, 20, 51, 0.2);
}

.timeline-label {
  font-family: var(--font-body);
  font-weight: 600;
  color: #fff;
}

/* contact page */
.contact-card {
  background: var(--lilac);
  border: none;
  border-radius: 1.25rem;
}

.contact-label {
  color: var(--violet);
}

.contact-email {
  color: var(--plum);
}

.contact-email:hover,
.contact-email:focus-visible {
  color: var(--violet);
}

/* "Read all messages" on the main page: an outlined plum button rather than a small text link, so
   it's easy to find, while "Share a story or message" (solid plum) stays the main action */
.messages .section-more-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2.75rem;
  padding: 0.9rem 2rem;
  border: 2px solid var(--plum);
  border-radius: 999px;
  font-size: 1.05rem;
  color: var(--plum);
  background: #fff;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.messages .section-more-link:hover,
.messages .section-more-link:focus-visible {
  color: #fff;
  background: var(--plum);
  border-color: var(--plum);
  transform: translateY(-1px);
}

/* "page not found" page */
.not-found-actions {
  margin-top: 2rem;
}