/* =============================================================================
   Ginger's pages. Plum, gold and cream, Playfair Display and DM Sans, per the
   locked brand decision.

   Editorial, not a card deck. Each option is a full-width band with the price
   set large on the left and what it holds on the right, separated by a hairline.
   There is deliberately NO grid anywhere in here, which is also why there is no
   empty cell to worry about at any width.

   Type is set large on purpose. These get read on a tablet, held at arm's length,
   sometimes in a coffee shop.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&display=swap');

:root {
  --cream: #faf6ef;
  --cream-deep: #f3ecdf;
  --ink: #241a2b;
  --ink-soft: #4c3d55;
  --ink-faint: #7b6c84;
  --plum: #6d4396;
  --plum-deep: #3f2357;
  --gold: #a8801f;
  --gold-soft: #d9bd6a;
  --rule: #e2d7c6;
  --white: #fffdf9;

  --display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --measure: 34rem;
  --pad: clamp(1.25rem, 0.6rem + 3.2vw, 4rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--body);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  line-height: 1.62;
  color: var(--ink);
  background: var(--cream);
  /* A little warmth behind the page so it is not a flat wash. */
  background-image:
    radial-gradient(58rem 34rem at 88% -12%, rgba(109, 67, 150, 0.09), transparent 62%),
    radial-gradient(44rem 30rem at -8% 8%, rgba(168, 128, 31, 0.08), transparent 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* Orphans: balance the short blocks, pretty the prose. Site wide, per the rule. */
h1, h2, h3, .lede, .band__name, .item__what, .note, .stat__label { text-wrap: balance; }
p, li { text-wrap: pretty; }

.wrap {
  max-width: 60rem;
  margin: 0 auto;
  padding: clamp(2rem, 1.2rem + 3vw, 4rem) var(--pad) clamp(3rem, 2rem + 4vw, 5.5rem);
}

/* ---- masthead ---------------------------------------------------------- */

.masthead { padding-bottom: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); border-bottom: 2px solid var(--plum); }

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--gold);
}

.masthead h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.4rem, 1.6rem + 4.4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--plum-deep);
  margin-top: 0.35rem;
}

.masthead h1 em { font-style: italic; color: var(--plum); }

.masthead__for {
  margin-top: 0.9rem;
  font-size: 1.0625rem;
  color: var(--ink-faint);
}

/* Keep the date whole. On a phone it was breaking after the "1". */
.nb { white-space: nowrap; }

.lede {
  max-width: var(--measure);
  margin-top: clamp(1.4rem, 1rem + 1.4vw, 2.1rem);
  font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.4375rem);
  line-height: 1.52;
  color: var(--ink-soft);
}

/* ---- a standing note, used for the care explainer ---------------------- */

.note {
  margin-top: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  padding: clamp(1.1rem, 0.85rem + 1.1vw, 1.7rem) clamp(1.1rem, 0.8rem + 1.4vw, 1.9rem);
  background: var(--white);
  border-left: 3px solid var(--gold);
  max-width: 46rem;
}

.note strong { color: var(--plum-deep); font-weight: 700; }

.note__title {
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem);
  font-weight: 600;
  color: var(--plum-deep);
  margin-bottom: 0.4rem;
}

/* ---- section heading --------------------------------------------------- */

.section {
  margin-top: clamp(2.6rem, 1.8rem + 3vw, 4.4rem);
  /* The first band draws a 2px plum rule directly under this block. Without a
     gap that rule sits on the subtitle's baseline and reads as a strikethrough. */
  margin-bottom: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
}

.section__title {
  font-family: var(--display);
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.35rem);
  font-weight: 600;
  color: var(--plum-deep);
  line-height: 1.15;
}

.section__sub {
  margin-top: 0.45rem;
  max-width: var(--measure);
  color: var(--ink-faint);
}

/* ---- the bands. One per option. No cards, no grid. --------------------- */

.band {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.1rem, 0.5rem + 2.6vw, 3rem);
  padding: clamp(1.7rem, 1.2rem + 2vw, 2.8rem) 0;
  border-top: 1px solid var(--rule);
}

.band:first-of-type { border-top: 2px solid var(--plum); }

.band__money {
  flex: 1 1 13rem;
  min-width: 0;
}

.band__name {
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--plum-deep);
}

.band__when {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--gold);
}

.band__price {
  font-family: var(--display);
  font-size: clamp(2.9rem, 2.1rem + 3.4vw, 4.3rem);
  font-weight: 500;
  /* Playfair's dollar sign carries a tall ascender and a descender. At
     line-height 1 it crosses the hairline of the total underneath it. */
  line-height: 1.14;
  color: var(--plum);
  margin-top: 0.75rem;
  letter-spacing: -0.02em;
}

.band__price small {
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-faint);
  /* Otherwise "$350one time" runs together at the smaller widths. */
  margin-left: 0.4em;
  white-space: nowrap;
}

.band__total {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule);
  font-size: 1rem;
  color: var(--ink-soft);
  max-width: 15rem;
}

.band__total strong { color: var(--plum-deep); font-weight: 700; white-space: nowrap; }

.band__body { flex: 3 1 20rem; min-width: 0; }

.band__intro { color: var(--ink-soft); margin-bottom: 0.9rem; }

/* A gold hairline for a marker rather than a tick or a bullet dot. */
.holds { list-style: none; }

.holds li {
  position: relative;
  padding: 0.42rem 0 0.42rem 1.6rem;
  line-height: 1.5;
}

.holds li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 0.85rem;
  height: 1px;
  background: var(--gold-soft);
}

.holds li strong { color: var(--plum-deep); font-weight: 700; }

/* ---- a small run of facts --------------------------------------------- */

.need {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--rule);
  font-size: 1rem;
  color: var(--ink-soft);
}

.need b {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.3rem;
}

/* ---- closing ----------------------------------------------------------- */

.close {
  margin-top: clamp(2.6rem, 1.8rem + 3vw, 4.4rem);
  padding-top: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem);
  border-top: 2px solid var(--plum);
}

.close p { max-width: var(--measure); color: var(--ink-soft); }

.sign {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.6rem, 1.35rem + 1vw, 2.05rem);
  color: var(--plum);
  margin-top: 1.2rem;
}

.contact {
  margin-top: 1.4rem;
  font-size: 1rem;
  color: var(--ink-faint);
  line-height: 1.9;
}

.contact a { color: var(--plum); text-decoration: none; border-bottom: 1px solid var(--rule); }
.contact a:hover { border-bottom-color: var(--plum); }

/* An email behaves like nowrap and will push off a narrow phone. It carries a
   <wbr> after the @, so it prefers to break there. `anywhere` stays as the
   backstop for a width where even the domain half will not fit. */
.contact a, .contact span { overflow-wrap: anywhere; }
.contact a { line-height: 1.45; display: inline-block; }

.smallprint {
  margin-top: 1.6rem;
  font-size: 0.9375rem;
  color: var(--ink-faint);
  max-width: 40rem;
}

/* ---- entrance. One pass, staggered, and it respects a reduced setting. -- */

@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
  .rise:nth-of-type(1) { animation-delay: 0.04s; }
  .rise:nth-of-type(2) { animation-delay: 0.12s; }
  .rise:nth-of-type(3) { animation-delay: 0.2s; }
  .rise:nth-of-type(4) { animation-delay: 0.28s; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---- print ------------------------------------------------------------- */

@page { size: letter; margin: 0.55in; }

@media print {
  body {
    background: #fff;
    background-image: none;
    font-size: 10.5pt;
    color: #000;
  }
  .wrap { padding: 0; max-width: none; }
  .band, .note, .close { break-inside: avoid; page-break-inside: avoid; }
  .rise { animation: none; }
}