/* ==========================================================================
   The Jiffy — Friends-Raising Drive landing page
   Mobile-first. Brand fonts/colors pulled from thejiffy.xyz's other sites
   (see IG-link-in-bio/src/styles.css for the source of truth on tokens).
   ========================================================================== */

/* ---- Brand fonts ---- */
@font-face {
  font-family: "Borough Grotesk";
  src: url("/fonts/borough-grotesk.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif-4.woff2") format("woff2");
  font-weight: 200 900; /* variable font */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif-4-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Libre Franklin";
  src: url("/fonts/libre-franklin.woff2") format("woff2");
  font-weight: 100 900; /* variable font */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Libre Franklin";
  src: url("/fonts/libre-franklin-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "ITC Century Book Condensed";
  src: url("/fonts/century-book-condensed-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---- Brand tokens ----
   Requested for this drive: cyan page background, yellow wordmark, cream
   thermometer glass, magenta thermometer liquid — these are the same
   values already used as brand tokens across thejiffy.xyz's other sites. */
:root {
  --color-cream: #fdfcf8;
  --color-black: #000000;
  --color-yellow: #ffcf00;
  --color-magenta: #ff10f0;
  --color-cyan: #00e0ff;
  --color-blue: #0000ff;

  --font-logo: "Borough Grotesk", sans-serif;
  --font-headline: "Libre Franklin", Helvetica, Arial, sans-serif;
  --font-body: "Source Serif 4", Georgia, serif;
  --font-tagline: "ITC Century Book Condensed", Georgia, serif;
  --font-label: "Libre Franklin", Helvetica, Arial, sans-serif;

  --content-max-width: 640px;
  --gutter: 1.25rem;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--color-cyan);
  color: var(--color-black);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
}

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

a {
  color: inherit;
}

.page {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--gutter) 3rem;
}

.section {
  padding: 2.5rem 0;
}

/* ---- Header: Jiffy wordmark (smaller) + Friends-Raiser logo (large) ---- */
.site-header {
  padding: 3rem 0 1rem;
  text-align: center;
}

.wordmark {
  font-family: var(--font-logo);
  font-weight: 400; /* Borough Grotesk only ships one weight — avoid synthetic bold */
  letter-spacing: -0.03em; /* -30 tracking in design apps */
  font-size: 3rem;
  line-height: 1;
  margin: 0;
  color: var(--color-yellow);
}

.wordmark a {
  text-decoration: none;
  color: inherit;
}

.friends-raiser-logo-wrap {
  position: relative;
  width: min(100%, 620px);
  margin: 1.25rem auto 0;
}

.friends-raiser-logo {
  width: 100%;
  margin: 0;
}

/* "2026" starburst — sits over the tail of "Raiser," overlapping it
   slightly like a stamp, and spins slowly in place. */
.year-star {
  position: absolute;
  right: 0%;
  bottom: -20%;
  width: 20%;
  margin: 0;
  animation: spin-star 8s linear infinite;
}

@keyframes spin-star {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.tagline {
  font-family: var(--font-tagline);
  font-style: italic;
  font-size: 1.25rem;
  max-width: 38ch;
  margin: 1.5rem auto 0;
}

/* Keeps this phrase from breaking mid-line — the rest of the tagline
   wraps normally above it. */
.tagline__nowrap {
  white-space: nowrap;
}

/* ---- Hero copy above the thermometer ---- */
.hero-heading {
  font-family: var(--font-headline);
  font-weight: 800;
  text-align: center;
  font-size: 2rem;
  line-height: 1.15;
  margin: 0 0 0.75rem;
}

.hero-copy {
  font-family: var(--font-body);
  font-size: 1.05rem;
  text-align: left;
  max-width: 58ch; /* ~60-char measure — standard editorial line length for readability */
  margin: 0 auto;
}

/* Double-spaced gap between the two hero-copy paragraphs. */
.hero-copy + .hero-copy {
  margin-top: 1.5em;
}

/* ---- Thermometer ---- */
.thermo-section {
  text-align: center;
}

.thermo-wrap {
  width: min(100%, 320px);
  margin: 1.5rem auto 0;
}

.thermo-wrap svg {
  width: 100%;
  height: auto;
  display: block;
}

.thermo-tick {
  font-family: "Libre Franklin", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 26px;
  fill: var(--color-black);
}

.thermo-count {
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 1.5rem;
  margin: 1.25rem 0 0.25rem;
}

.thermo-remaining {
  font-family: var(--font-tagline);
  font-style: italic;
  font-size: 1.05rem;
  margin: 0 0 1.5rem;
}

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  font-family: var(--font-label);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.9rem;
  text-decoration: none;
  padding: 0.9rem 1.5rem;
  border: 2px solid var(--color-black);
  background: var(--color-cream);
  color: var(--color-black);
}

.btn--block {
  display: block;
  text-align: center;
}

.btn--magenta {
  background: var(--color-magenta);
  color: var(--color-cream);
}

/* ---- Newsletter subscribe (live beehiiv embed, same as the link-in-bio) ---- */
.newsletter-embed {
  border: 2px dashed var(--color-black);
  background: var(--color-cream);
  padding: 2rem 1rem;
  text-align: center;
}

.newsletter-note {
  font-family: var(--font-tagline);
  font-style: italic;
  font-size: 0.9rem;
  text-align: center;
  margin: 0.75rem 0 0;
}

.section-heading {
  font-family: var(--font-headline);
  font-weight: 800;
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.15;
  margin: 0 0 0.75rem;
}

/* ---- Divider (matches the coil-rule divider used elsewhere on the site) ---- */
.wave-divider {
  height: 8px;
  margin: 0 0 0.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 8' preserveAspectRatio='none'%3E%3Cpath d='M0,4 A4,2 0 0,1 8,4 A4,2 0 0,0 16,4 A4,2 0 0,1 24,4 A4,2 0 0,0 32,4 A4,2 0 0,1 40,4 A4,2 0 0,0 48,4 A4,2 0 0,1 56,4 A4,2 0 0,0 64,4 A4,2 0 0,1 72,4 A4,2 0 0,0 80,4 A4,2 0 0,1 88,4 A4,2 0 0,0 96,4 A4,2 0 0,1 104,4 A4,2 0 0,0 112,4 A4,2 0 0,1 120,4 A4,2 0 0,0 128,4 A4,2 0 0,1 136,4 A4,2 0 0,0 144,4 A4,2 0 0,1 152,4 A4,2 0 0,0 160,4 A4,2 0 0,1 168,4 A4,2 0 0,0 176,4 A4,2 0 0,1 184,4 A4,2 0 0,0 192,4 A4,2 0 0,1 200,4 A4,2 0 0,0 208,4 A4,2 0 0,1 216,4 A4,2 0 0,0 224,4 A4,2 0 0,1 232,4 A4,2 0 0,0 240,4 A4,2 0 0,1 248,4 A4,2 0 0,0 256,4 A4,2 0 0,1 264,4 A4,2 0 0,0 272,4 A4,2 0 0,1 280,4 A4,2 0 0,0 288,4 A4,2 0 0,1 296,4 A4,2 0 0,0 304,4 A4,2 0 0,1 312,4 A4,2 0 0,0 320,4 A4,2 0 0,1 328,4 A4,2 0 0,0 336,4 A4,2 0 0,1 344,4 A4,2 0 0,0 352,4 A4,2 0 0,1 360,4 A4,2 0 0,0 368,4 A4,2 0 0,1 376,4 A4,2 0 0,0 384,4 A4,2 0 0,1 392,4 A4,2 0 0,0 400,4 A4,2 0 0,1 408,4 A4,2 0 0,0 416,4 A4,2 0 0,1 424,4 A4,2 0 0,0 432,4 A4,2 0 0,1 440,4 A4,2 0 0,0 448,4 A4,2 0 0,1 456,4 A4,2 0 0,0 464,4 A4,2 0 0,1 472,4 A4,2 0 0,0 480,4' stroke='%23000000' stroke-width='1.5' fill='none' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 8px;
}

/* ---- Footer ---- */
.site-footer {
  padding: 2rem 0 0;
  text-align: center;
  font-family: var(--font-label);
  font-size: 0.85rem;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.site-footer__links a {
  text-decoration: none;
  border-bottom: 1px solid var(--color-black);
  white-space: nowrap;
}

/* ---- Larger screens: let the thermometer get properly big ---- */
@media (min-width: 640px) {
  .wordmark {
    font-size: 4rem;
  }

  .hero-heading {
    font-size: 2.75rem;
  }

  .thermo-wrap {
    width: min(100%, 420px);
  }
}