/* ==========================================================================
   Clarida Foundation — landing-root text pages
   /privacy/ · /terms/ · /contact/ · /donate/ · /donate/thank-you/

   The site is LIGHT, and this is its only stylesheet — the token block below
   is lifted from the inline \3c style> in landing/index.html so the two never
   drift apart. landing/index.html stays self-contained (no stylesheet request)
   on purpose; this file exists because five text pages sharing one palette
   should share one file rather than five copies of it.

   Same constraints as the rest of the repo: no webfonts, no third-party CSS,
   no runtime dependencies. Spacing comes from sibling relationships, not
   utility classes.
   ========================================================================== */

:root {
  /* palette — identity light set, verbatim from landing/index.html */
  --bg: #f1f4f7;
  --bg-2: #e8edf2;
  --card: #fff;
  --text: #0c1622;
  --text-soft: #51616f;
  --line: #d4dde5;
  --accent: #bc6e12;
  --accent-fill: #e7a13c;
  --accent-ink: #0c1622;
  --accent-wash: rgb(231 161 60 / 10%);
  --accent-edge: rgb(188 110 18 / 35%);

  /* the dark footer band, matching landing/index.html */
  --foot-bg: #132435;
  --foot-text: #a7b6c2;
  --foot-bright: #edf2f6;
  --foot-link: #c6d2db;
  --foot-soft: #8fa1af;
  --foot-rule: rgb(255 255 255 / 14%);

  /* type */
  --serif:
    "Iowan Old Style", "Palatino Linotype", palatino, "Book Antiqua", georgia, "Times New Roman",
    serif;
  --sans:
    -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
  --mono: "SF Mono", ui-monospace, "Cascadia Code", menlo, consolas, monospace;

  /* scale */
  --maxw: 860px;
  --maxw-wide: 1080px;
  --radius: 3px;

  /* The give block's own measure. The gift rails and the notes explaining them
     are one unit and have to be one width, or three adjacent boxes at three
     widths read as an accident rather than a layout. */
  --rail-max: 44rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;

  /* Stops iOS inflating body text when a phone is turned to landscape. The
     prefix is not redundant: Safari still ships only the prefixed property. */
  text-size-adjust: 100%;

  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-text-size-adjust: 100%;
}

/* Anything reachable by fragment gets breathing room above it, so a deep link
   from another page does not land the heading flush against the viewport. */
[id] {
  scroll-margin-top: 1.5rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(26px, 4vw, 36px);
}

h2 {
  font-size: clamp(20px, 2.6vw, 25px);
}

h3 {
  font-size: 17px;
}

p,
ul,
ol,
dl {
  margin: 0;
}

a {
  color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

strong,
b {
  font-weight: 650;
}

em,
i {
  font-style: italic;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --------------------------------------------------------------- scaffolding */

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.wrap-wide {
  max-width: var(--maxw-wide);
}

.measure {
  max-width: 64ch;
}

.measure-rail {
  max-width: var(--rail-max);
}

.page {
  padding: 40px 0 72px;
}

/* A sectioned page — the donate page — rather than one column of prose. The
   rule between sections is the only separator; there are no boxes around them. */

.page-sectioned {
  padding: 40px 0 0;
}

.section {
  padding-block: clamp(34px, 6vw, 56px);
  border-top: 1px solid var(--line);
}

/* No rule above this section. Used either side of the gift rails on
   /donate/, where a hairline between the headline and the buttons reads as a
   boundary the donor has to cross. */

/* Tighter than .section default. /donate/ has one job above the fold — the
   headline, the rails, and enough of the next heading to show there is more
   below it. At 1180x800 the "Other ways to give" heading used to land at
   y=823, just under the fold, which made the page look like it ended at the
   monthly tiles. */
.section-open {
  border-top: 0;
  padding-block: clamp(20px, 2.6vw, 28px);
}

/* The rule between the headline and the gift rails used to do the separating.
   With it gone the two sat a whole section's padding apart and the headline
   read as orphaned, so the relationship carries the spacing instead. */
.section-first + .section-open {
  padding-top: clamp(8px, 1.4vw, 14px);
}

.section-first {
  padding-top: 0;
  padding-bottom: clamp(16px, 2.6vw, 26px);
  border-top: 0;
}

.section:last-child {
  padding-bottom: clamp(48px, 8vw, 80px);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  background: var(--accent-fill);
  color: var(--accent-ink);
  padding: 0.6rem 1rem;
  font-weight: 650;
  text-decoration: none;
}

.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* -------------------------------------------------------------- brand lockup */

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
}

.lockup svg {
  width: 34px;
  height: 34px;
  flex: none;
  color: currentcolor;
}

.lockup .lk-type {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.lockup .lk-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.03em;
}

.lockup .lk-name .dot {
  color: var(--accent-fill);
}

.lockup .lk-cat {
  font-size: 8.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-top: 4px;
  font-weight: 600;
}

/* --------------------------------------------------------------- page header */

.pagehead {
  padding-top: 36px;
}

.pagehead .backlink {
  margin-top: 28px;
}

.backlink {
  display: inline-block;
  color: var(--text-soft);
  text-decoration: none;
  font-weight: 600;
  font-size: 14.5px;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius);
  padding: 9px 16px;
}

.backlink:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ---------------------------------------------------------------- typography */

.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin: 0 0 12px;
}

.lede {
  font-size: clamp(16.5px, 1.9vw, 19px);
  line-height: 1.55;
  color: var(--text-soft);
}

.lede strong {
  color: var(--text);
}

.stamp {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-top: 10px;
}

/* Rhythm by relationship. There is no build step here, so the fewer
   per-element decisions the markup carries, the fewer places a page can drift
   out of the system. */

h1 + .lede,
h2 + .lede,
.eyebrow + h1 + .lede {
  margin-top: 14px;
}

.mt-lg {
  margin-top: 34px;
}

/* ---------------------------------------------------------- prose (policies)
   One wrapper, one spacing rule. Policy pages are long and mostly text; giving
   every paragraph its own class would be five hundred decisions to keep
   consistent by hand. */

.prose > * + * {
  margin-top: 18px;
}

.prose > h2 {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.prose > h2 + * {
  margin-top: 14px;
}

.prose > h3 {
  margin-top: 30px;
}

.prose > h3 + * {
  margin-top: 10px;
}

.prose ul,
.prose ol {
  padding-left: 24px;
}

.prose li {
  margin-bottom: 10px;
}

.prose li:last-child {
  margin-bottom: 0;
}

.prose .soft {
  color: var(--text-soft);
}

.post-addr {
  font-style: normal;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.8;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-fill);
  border-radius: var(--radius);
  padding: 14px 18px;
}

/* --------------------------------------------------------------- table of contents */

.toc {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 26px;
}

.toc a {
  display: inline-block;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-soft);
  text-decoration: none;
}

.toc a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* --------------------------------------------------------------------- cards */

.grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
}

.card h3 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.card p {
  color: var(--text-soft);
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.6;
}

.card-accent {
  border-left: 3px solid var(--accent-fill);
}

.pending {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
  font-weight: 600;
}

/* No align-items here on purpose. Grid stretches row items by default, which
   is what makes these three cards share a height however much text each one
   carries — the check card is always the tall one. */
.give {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.give dl {
  margin-top: 14px;
  display: grid;
  gap: 6px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.5;
}

.give dl div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
}

@media (width >= 520px) {
  .give dl div {
    grid-template-columns: 7rem 1fr;
    gap: 12px;
  }
}

.give dt {
  color: var(--text-soft);
}

.give dd {
  margin: 0;
}

/* ------------------------------------------------------------------- buttons */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 650;
  font-size: 14.5px;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition:
    filter 0.15s ease,
    border-color 0.15s ease;
}

.btn-primary {
  background: var(--accent-fill);
  color: var(--accent-ink);
}

.btn-primary:hover {
  filter: brightness(0.94);
}

.btn-ghost {
  border-color: var(--line);
  color: var(--text);
  background: var(--card);
}

.btn-ghost:hover {
  border-color: var(--text-soft);
}

@media (width < 420px) {
  .actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---------------------------------------------------------------- gift rails
   The amount ladder. Every tile is a plain <a> to a Stripe-hosted page — there
   is no embedded payment form anywhere on this site and no payment script, so
   nothing here needs JavaScript to work. */

.rail {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;

  /* Capped rather than full-width: a ladder of three tiles across 1080px reads
     as table rows. At this width they read as buttons, and the give section
     lines up with the notes beneath it, which are measure-width. */
  max-width: 44rem;
}

.rail + .rail {
  margin-top: 14px;
}

.rail-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.rail-head h2,
.rail-head h3 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rail-note {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-soft);
}

.amounts {
  display: grid;
  gap: 8px;

  /* 84px, not 96px: three tiles plus two gaps have to fit inside the rail's
     padding on a 390px phone, or the ladder wraps two-then-one. */
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  margin-top: 14px;
}

.amount {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  color: var(--text);
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.amount:hover {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent-ink);
}

/* The two donor-chosen-amount links carry a sentence rather than a number, and
   a 96px track would break every one of them over four lines. */
.amounts-wide {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* The one primary action on the page. Accent fill rather than the quiet
   surface the preset tiles use, because "give any amount" is the path most
   donors take and it should not look like a sixth option. */
.amount-cta {
  background: var(--accent-fill);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.amount-cta:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.amount-other {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
  text-align: center;
  padding: 10px 14px;
}

/* --------------------------------------------------------------- rhythm ties
   Same principle as the site stylesheet: spacing lives in the relationship
   between siblings, not in a utility class sprinkled through the markup. */

h2 + .lede,
h1 + .lede {
  margin-top: 14px;
}

.lede + .grid,
.lede + .give,
.lede + .rail,
.lede + .note,
.lede + .actions,
h2 + .grid,
h2 + .give,
h2 + .rail {
  margin-top: 30px;
}

.grid + .note,
.give + .note,
.rail + .note,
.actions + .note {
  margin-top: 22px;
}

/* --------------------------------------------------------------------- note */

.note {
  background: var(--bg-2);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: 14.5px;
  color: var(--text-soft);
  line-height: 1.65;
}

.note b {
  color: var(--text);
}

.note + .note {
  margin-top: 12px;
}

.note-accent {
  background: var(--accent-wash);
  border-style: solid;
  border-color: var(--accent-edge);
}

/* ---------------------------------------------------------------- legal band */

.band {
  background: var(--bg-2);
  border-block: 1px solid var(--line);
  margin-top: 48px;
}

/* The band matches the page's own measure, not the narrower default. Every
   section on /donate/ is .wrap-wide, so a --maxw inner here would indent the
   legal copy relative to the cards above it and read as a stray column.
   .legal keeps its own 72ch measure, so the text does not get too long. */
.band .inner {
  max-width: var(--maxw-wide);
  margin: 0 auto;
  padding: 30px 24px;
}

.band .kicker {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 10px;
}

.legal {
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.7;
  max-width: 72ch;
}

.legal b {
  color: var(--text);
}

.legal + .legal {
  margin-top: 16px;
}

/* -------------------------------------------------------------------- footer
   Duplicated as static HTML on each page rather than injected by a script:
   the address and the corporate identity are the two things Stripe's website
   review looks for, and neither should depend on JavaScript running. */

.pagefoot {
  padding: 44px 0 52px;
  background: var(--foot-bg);
  color: var(--foot-text);
  font-size: 13.5px;
  line-height: 1.6;
}

.pagefoot .lockup {
  color: var(--foot-bright);
  margin-bottom: 14px;
}

.pagefoot .lk-cat {
  color: var(--foot-soft);
}

.pagefoot p {
  max-width: 74ch;
}

.pagefoot p + p {
  margin-top: 12px;
}

.pagefoot a {
  color: var(--foot-link);
}

.pagefoot a:hover {
  color: var(--accent-fill);
}

.foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0 0 18px;
}

.foot-nav a {
  color: var(--foot-link);
  text-decoration: none;
  font-weight: 600;
}

.foot-nav a:hover {
  color: var(--accent-fill);
}

.foot-fine {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--foot-rule);
  font-size: 12.5px;
}

.foot-addr {
  font-style: normal;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .btn,
  .amount {
    transition: none;
  }
}