/* Approved Cherry Blossom palette and painted stationery accents. */
:root {
  --paper: #fff;
  --white: #fff;
  --ink: #4b0714;
  --body: #51443d;
  --muted: #71615a;
  --line: #d7c6be;
  --blue: #ece2d9;
  --rose: #deb4b5;
  --newsletter: #deb4b5;
  --footer: #fcfaf3;
  --button: #4b0714;
  --hover: #680f20;
  --form-border: #907575;
  --essay: #bac9ce;
  --accent: #5a522b;
}

a:hover,
.editorial-hero .hero-menu a:hover,
.editorial-hero .hero-wordmark:hover { color: var(--button); }
.button-link {
  background: var(--button);
  border-color: var(--button);
  color: var(--white);
}
.button-link:hover { background: var(--hover); border-color: var(--hover); }
:is(.card-meta a, .intro-section > .eyebrow, .sidebar-reading a > span, .essay-number) {
  color: var(--accent);
}
.notebook-number { color: var(--muted); }
.footer-bottom { border-color: var(--line); }

/* Keep compact inner-page headers readable against the burgundy masthead. */
.inner-page .site-header.photo-hero { background: var(--ink); color: var(--white); }
.inner-page .photo-hero a:hover { color: #fffbea; }
.inner-page .photo-hero a:focus-visible { outline-color: var(--white); }

/* Narrow ribbons sit outside the header and footer so they span the page. */
.stripe-band {
  display: block;
  width: 100%;
  height: 30px;
  background-color: #fcfaf3;
  background-image: url("cherry-blossom-wavy-stripe.png");
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
}

/* The sidebar retains its quiet ivory sheet with a solid sky-blue mat. */
.interest-signup {
  width: calc(100% + 18px);
  margin-left: -9px;
  border: 10px solid transparent;
  background-color: #fffdf9;
  background-image: linear-gradient(#fffdf9, #fffdf9),
    linear-gradient(#bac9ce, #bac9ce);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  background-size: 100% 100%, cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Each no-cover post can use tulips or the painted wavy ribbon. */
.essay-art {
  --text-card-pattern: url("cherry-blossom-tulip-trellis.png");
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(3, max-content);
  align-content: space-between;
  border: 16px solid transparent;
  padding: clamp(12px, 1.8vw, 22px);
  gap: 12px;
  aspect-ratio: auto;
  min-height: 270px;
  background-color: #f6e7e3;
  background-image: linear-gradient(#f6e7e3, #f6e7e3),
    var(--text-card-pattern);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  background-size: 100% 100%, cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--ink);
  box-shadow: 0 2px 6px rgb(75 7 20 / 7%);
}
.essay-art:hover { color: var(--ink); }
.essay-art[data-card-pattern="stripe"] {
  --text-card-pattern: url("cherry-blossom-wavy-stripe.png");
}

/* Blossom-colored newsletter paper continues beneath the white torn footer. */
.sunday-edit {
  color: var(--ink);
  background-color: var(--newsletter);
  background-image: url("paper-fibers.svg");
  background-size: 1024px 1024px;
  padding-bottom: 112px;
}
.sunday-copy > p:not(.eyebrow) { color: var(--ink); }
.sunday-main, .sunday-small { border-color: var(--white); }
.newsletter-provider.in-full-newsletter-sidebar,
.newsletter-provider.in-full-newsletter-sunday {
  --in-full-form-text: var(--ink);
  --in-full-form-border: var(--form-border);
  --in-full-form-background: var(--white);
  --in-full-form-error: #8a3d3a;
  --in-full-form-button: var(--button);
  --in-full-form-button-text: var(--white);
  --in-full-form-button-hover: var(--hover);
}
.in-full-newsletter-sidebar .wpforms-container.in-full-wpforms .in-full-interests ul li {
  border-color: var(--line) !important;
}
body:not(.inner-page) .site-footer { margin-top: -72px; }
body:not(.inner-page) .site-footer::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: var(--newsletter);
  pointer-events: none;
}

@media (max-width: 680px) {
  .essay-art { border-width: 14px; padding: 20px; }
}