/* Read Them Well — homepage
   Supplements rtw-tokens.css. Only what the token layer does not already give us.
   Reference: rtw-design-handoff/design/RTW Homepage - App Vibe.dc.html
              rtw-brand-spec.md §7 (homepage anatomy)

   Elevation budget for this page: two floating callouts (signup, closing CTA)
   plus the hero parcel object. Nothing else lifts off the field. */

/* ---------- Hero ---------- */

/* The header already sits on the cream field, so the hero opens tighter than a
   standard field and closes at full height. */
.home-hero { padding: clamp(28px, 4vw, 56px) var(--rtw-pad-x) clamp(48px, 6vw, 80px); }

.home-hero__statement { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.home-hero__kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rtw-oxblood);
}
.home-hero__title { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; width: 100%; }
.home-hero__title .rtw-scrawl { width: min(340px, 78%); }
.home-hero__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 4px; }
.home-hero__price { font-family: var(--rtw-hand); font-size: 17px; color: var(--rtw-oxblood); }

.home-hero__object { display: flex; flex-direction: column; align-items: center; }
.rtw-parcel__hand { margin: 0; }

/* The striped placeholder shows through until art loads, and stays if none ever
   does. Covers are square — no radius here, per rule 4 of the brand spec.

   `contain`, not `cover`: a jacket is a printed object and cropping it cuts the
   title off. Real covers run about 0.65 against this 2:3 slot, so the letterbox
   is a hairline — painted as paper so it reads as the sheet, not as a gap. */
.rtw-cover { position: relative; overflow: hidden; }
.rtw-cover__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0;
  transition: opacity 180ms linear;
}
.rtw-cover--filled { background: var(--rtw-surface); }
.rtw-cover--filled .rtw-cover__art { opacity: 1; }
.rtw-cover--filled .rtw-cover__slot { display: none; }

/* The token file sizes the parcel cover 190x250 (0.76), which would crop a 2:3
   jacket top and bottom. Match the slot to the object instead. */
.rtw-parcel__cover { width: 190px; height: auto; aspect-ratio: 2 / 3; }

/* The parcel is an object, not a panel. The token layer's `width: 100%` let it
   stretch with the hero column, so on a wide screen a 190px jacket floated in
   the middle of an ever-growing sheet of kraft and the seal drifted out to the
   margin with it. It gets a fixed size instead and centres in whatever column
   it lands in; `max-width` keeps it inside narrow columns. */
.home-hero__object .rtw-parcel { width: 420px; max-width: 100%; }

/* ---------- Parcel seal ----------
   Stamped on the kraft rather than on the jacket. Sitting on the cover's corner
   it landed on whatever the title happened to be — and a jacket is a printed
   object, so covering it reads as damage rather than as branding. Here it is
   what it should be: a stamp on the paper, off-centre and running off the
   corner, with the parcel's own overflow doing the trimming.

   It sits under the cover so the two never fight, and the whole thing scales
   with the card so the crop stays put at any width. */
.rtw-parcel { position: relative; isolation: isolate; }

.rtw-parcel__seal {
  position: absolute;
  top: -9%;
  left: -11%;
  width: min(260px, 48%);
  aspect-ratio: 1;
  transform: rotate(-12deg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  pointer-events: none;
}

/* The scallop is a separate layer so it can sink into the paper without taking
   the monogram with it. Multiplied against the kraft it behaves like stamped
   ink — the grain and the fold read straight through it — instead of sitting on
   top as a flat red blotch competing with the jacket. `isolation` on the parcel
   keeps the blend from reaching past the card. */
.rtw-parcel__seal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/fun/scallop-red.svg") center / contain no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.72;
}
.rtw-parcel__seal .rtw-seal__mono { position: relative; z-index: 1; }
/* A percentage font-size would resolve against the inherited size rather than
   the seal, which is how this ended up tiny the first time. */
.rtw-parcel__seal .rtw-seal__mono {
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: var(--rtw-cream-ink);
}

/* Everything else on the parcel stacks above the stamp. */
.rtw-parcel__cover,
.rtw-parcel .rtw-scrawl,
.rtw-parcel__hand { position: relative; z-index: 1; }

/* ---------- Sign-up callout ---------- */

.alpha-head { display: flex; flex-direction: column; gap: 12px; }
.alpha-head h2 { font-size: clamp(24px, 2.8vw, 32px); line-height: 1.1; color: var(--rtw-chocolate); }
.alpha-head p { margin: 0; font-size: 15.5px; line-height: 1.7; }
.alpha-brand { font-family: var(--rtw-display); color: var(--rtw-cherry); }

.alpha-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.alpha-status { margin: 0; font-size: 14px; line-height: 1.6; color: var(--rtw-taupe); }
.alpha-status[data-tone="ok"] { color: var(--rtw-cherry); font-weight: 600; }
.alpha-status[data-tone="error"] { color: var(--rtw-oxblood); font-weight: 600; }

/* ---------- How it works (cherry field) ---------- */

.how-step { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.how-step h3 { font-size: 24px; }
.how-step p { font-size: 15.5px; line-height: 1.7; }
.how-closing { margin: 0; font-size: 17px; line-height: 1.55; }

.rtw-field--cherry { padding-bottom: clamp(56px, 7vw, 96px); }

/* ---------- Shelf examples (toned field) ---------- */

.profile-brief { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.profile-brief__copy { min-width: 0; display: flex; flex-direction: column; gap: 10px; max-width: 52ch; }
.profile-brief__copy h3 { font-size: 27px; line-height: 1.15; color: var(--rtw-cherry); }
.profile-brief__copy p { margin: 0; font-size: 15.5px; line-height: 1.7; }
.profile-brief__traits { display: flex; flex-wrap: wrap; gap: 8px; }

.shelf-examples { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(20px, 3vw, 32px); }
.shelf-month { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.shelf-month__caption { display: flex; flex-direction: column; gap: 5px; }
.shelf-month__label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rtw-taupe);
}
.shelf-month__label--first { color: var(--rtw-cherry); }
.shelf-month__note { font-size: 14px; line-height: 1.6; color: var(--rtw-body); }

/* ---------- Closing CTA ---------- */

/* Blush surface, oxblood type and action.

   It straddles a toned-cream -> cherry seam, so its lower half sits against the
   cherry footer — the blush-next-to-cherry pairing the brand guide warns off,
   kept deliberately for the contrast. Everything on the card clears easily:
   oxblood on blush is 5.56:1, and the oxblood pill's white label 11.21:1. The
   card's own edge against the cherry half is a soft 2.38:1, which is the point
   of the effect rather than a miss. */
.closing-cta {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  background: var(--rtw-blush);
  color: var(--rtw-oxblood);
  box-shadow: 0 28px 60px -28px rgba(74, 42, 28, 0.5);
}
.closing-cta__copy { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.closing-cta h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.08;
  max-width: 24ch;
  color: var(--rtw-oxblood);
}
.closing-cta p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--rtw-oxblood); }


/* The token file has no toned-cream -> cherry seam. */
.rtw-seam--toned-cherry {
  background: linear-gradient(var(--rtw-field-toned) 0 50%, var(--rtw-cherry) 50% 100%);
}