/* Read Them Well — shared page chrome
   The skip link, header and footer used by index.html, reader.html and
   privacy.html, so the intake and the policy sit inside the same frame as the
   marketing page. Loaded after rtw-tokens.css and before the page's own
   stylesheet, where it has one — privacy.html has no third stylesheet, which is
   the whole reason the skip link had to move down here.

   Note the one-way link: the reader intake links back to the homepage, but the
   homepage never links forward to it. The intake is entered from a gift flow,
   not browsed to. */

/* ---------- Skip link ----------
   Lived in rtw-home.css and rtw-intake.css as two identical copies, which meant
   a third page got no skip link at all and showed the unstyled anchor at the top
   left instead — which is how privacy.html found this. It is chrome: it belongs
   beside the header it skips over, in the stylesheet every page loads. */

.rtw-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--rtw-surface);
  color: var(--rtw-cherry);
  border-radius: var(--rtw-r-pill);
  padding: 12px 22px;
  font-size: 14.5px;
  font-weight: 600;
}
.rtw-skip:focus { left: var(--rtw-pad-x); top: 14px; }

/* ---------- Header ----------
   Sticky, so the Join Preview pill stays reachable down the whole page. The
   token layer leaves the header transparent, which a sticky bar cannot be —
   it needs the page field painted behind it. */

.rtw-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--rtw-page);
}

/* A sticky header covers whatever an anchor link jumps to, so every scroll
   target keeps the header's height clear above it. The value is measured at
   runtime by rtw-chrome.js — the header grows when the nav wraps — and the
   fallback here covers the unwrapped case if that script never runs. */
html {
  scroll-padding-top: calc(var(--rtw-header-h, 88px) + 16px);

  /* Stops the elastic overscroll at the ends of the page.

     The body carries the cream page background, and with nothing on the html
     element that colour propagates to the canvas — which is what gets painted
     in the rubber-band area when a trackpad is flicked past the bottom. The
     footer is cherry, so the bounce showed a band of cream underneath it and
     read as the page having run out early. Nothing was actually there: the
     document ends exactly at the footer, which is why it never showed up in a
     scrollHeight measurement.

     No single canvas colour fixes it, because the page starts cream and ends
     cherry. Removing the bounce does, and it buys something else on a phone:
     the same gesture is pull-to-refresh, which mid-conversation would reload
     the page and throw the whole intake away. */
  overscroll-behavior-y: none;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Pure white rather than cream ink on the cherry pill: higher contrast than
   the token default, so it stays above 4.5:1. The nav pill needs the extra
   specificity — the token file's `.rtw-header nav a` would otherwise paint it
   body brown. */
.rtw-btn,
.rtw-btn:hover,
.rtw-header nav a.rtw-btn,
.rtw-header nav a.rtw-btn:hover { color: #FFFFFF; }
.rtw-btn--on-cherry,
.rtw-btn--on-cherry:hover { color: var(--rtw-cherry); }
.rtw-btn--on-cherry:hover { color: var(--rtw-oxblood); }
.rtw-btn--secondary { color: var(--rtw-chocolate); }
.rtw-btn--secondary:hover { color: var(--rtw-cherry); }

/* ---------- Tap targets ----------
   rtw-brand-spec.md §8 asks for ≥44px on every target; the token file only
   guarantees it on the primary pill. These add the height without changing the
   ink, so the header and tabs still read as the approved design. */

.rtw-header__mark,
.rtw-header nav a:not(.rtw-btn) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.rtw-tab { min-height: 44px; }

/* ---------- Footer ----------

   Cherry field with a white wordmark. Only white (4.79:1) and cream ink (4.52:1)
   clear 4.5 on cherry — oxblood lands at 2.34:1 and the browns at 2.10–2.67:1,
   so the supporting lines could not stay as they were and had to move to cream.
   Flagged rather than silently kept: they would have been close to illegible.

   The callout overhangs the seam into this field, and the footer clears it
   itself — it is not the seam's DOM sibling, so `.rtw-seam + .rtw-field` misses. */

.site-footer {
  background: var(--rtw-cherry);
  color: var(--rtw-cream-ink);
  padding: clamp(56px, 6vw, 88px) var(--rtw-pad-x) clamp(44px, 5vw, 72px);
}
.site-footer__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.site-footer__mark { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.site-footer .site-footer__wordmark {
  margin: 0;
  font-family: var(--rtw-display);
  font-size: clamp(34px, 5vw, 52px);
  line-height: 0.95;
  color: #FFFFFF;
}

/* The chocolate scrawl disappears on cherry; the cream mark is the one that
   belongs on a dark field. */
.rtw-scrawl--choc { background-image: url("assets/fun/scrawl-choc.svg"); background-position: left center; }
.site-footer__scrawl {
  width: 210px;
  height: 16px;
  background-image: url("assets/fun/scrawl-cream.svg");
  background-position: left center;
  background-size: 100% 16px;
}
.site-footer__meta { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.site-footer__hand { font-family: var(--rtw-hand); font-size: 19px; color: var(--rtw-cream-ink); }
.site-footer .rtw-small { color: var(--rtw-cream-ink); }

/* The footer sits on the cherry field, where the global cherry link colour
   would be invisible. Blush is not the answer either — blush type on cherry is
   2.38:1 — so the link keeps the cream ink of the text around it (4.52:1) and
   takes its affordance from an underline instead of a colour. Hover thickens
   the rule rather than shifting the hue, for the same reason. */
.site-footer a {
  color: var(--rtw-cream-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.site-footer a:hover {
  color: var(--rtw-cream-ink);
  text-decoration-thickness: 2px;
}

/* The intake wears a shorter version so the conversation keeps its height. */
.site-footer--compact { padding: clamp(28px, 3vw, 40px) var(--rtw-pad-x); }
.site-footer--compact .site-footer__inner { align-items: center; }
.site-footer--compact .site-footer__wordmark { font-size: 24px; line-height: 1.1; }
.site-footer--compact .site-footer__meta { align-items: flex-end; gap: 4px; }
.site-footer--compact .site-footer__hand { font-size: 16px; }