/* ============ Fonts (self-hosted, subset from Google Fonts) ============ */

@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/courier-prime-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/courier-prime-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/courier-prime-700-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/courier-prime-700-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/hanken-grotesk-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/hanken-grotesk-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("assets/fonts/newsreader-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("assets/fonts/newsreader-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url("assets/fonts/newsreader-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url("assets/fonts/newsreader-italic-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============ Tokens & base ============ */

:root {
  --paper: #FFFDF2;
  --ink: #3a2c10;
  --muted: #6e6042;
  --orange: #FF7A1A;
  --coral: #FF5A36;
  --green: #7CB518;
  --rust: #C2520A;
  --rust-bright: #C96A00;
  --serif: 'Newsreader', Georgia, serif;
  --sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'Courier Prime', ui-monospace, monospace;
  --pad-x: clamp(20px, 4.7vw, 56px);
}

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

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  background-image: radial-gradient(rgba(232, 176, 80, 0.13) 1.4px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-font-smoothing: antialiased;
}

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

.svg-defs { position: absolute; pointer-events: none; }

.page { max-width: 1180px; margin: 0 auto; }

em { font-style: italic; }
h1 em, h2 em { color: var(--coral); }

.eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
}
.eyebrow--hero { letter-spacing: 0.16em; color: var(--rust-bright); }

.btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  border-radius: 999px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary {
  background: var(--orange);
  color: #fff;
  font-size: 19px;
  padding: 21px 46px;
}
.btn--primary:hover { box-shadow: 0 14px 30px rgba(255, 122, 26, 0.34); }
.btn--light {
  background: #fff;
  color: #FF6A1A;
  font-size: 16px;
  padding: 18px 38px;
}

/* Torn-paper panels: the ::before layer carries the ragged white background */
.torn { position: relative; }
.torn::before { content: ""; position: absolute; inset: -4px; background: #fff; }
.torn--1::before { filter: url(#torn1); }
.torn--2::before { filter: url(#torn2); }
.torn--3::before { filter: url(#torn3); }
.torn--sunset::before { background: linear-gradient(180deg, #FFB200, #FF6A1A); filter: url(#torn1); }
.torn > * { position: relative; }

/* Polaroid frames with washi-tape strips */
.polaroid {
  position: absolute;
  background: #fff;
  border-radius: 3px;
}
.polaroid img { width: 100%; object-fit: cover; }
.polaroid figcaption {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font-family: var(--mono);
  color: var(--muted);
}
.tape { position: absolute; display: block; }
.tape--red { background: rgba(255, 90, 54, 0.42); }
.tape--green { background: rgba(124, 181, 24, 0.45); }

/* ============ Header ============ */

.site-header { padding: 32px var(--pad-x); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--orange); }
.brand-name { font-family: var(--serif); font-size: 22px; font-weight: 500; }

/* ============ Hero ============ */

.hero {
  padding: 48px var(--pad-x) 84px;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 40px;
  align-items: center;
}
.hero-copy .eyebrow { margin-bottom: 22px; }
.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(46px, 6.9vw, 82px);
  line-height: 0.94;
  letter-spacing: -0.02em;
}
.hero-sub {
  max-width: 430px;
  margin: 24px 0 0;
  font-size: 19px;
  line-height: 1.55;
  color: var(--muted);
}
.hero-copy .btn { margin-top: 34px; }

/* Collage scales with its own width via container queries */
.hero-collage {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 555 / 480;
}
.polaroid--call {
  left: 3.5cqw; top: 3.7cqw;
  width: 77.5cqw;
  padding: 2.3cqw 2.3cqw 8.3cqw;
  transform: rotate(-3deg);
  box-shadow: 0 10px 22px rgba(58, 40, 26, 0.14);
}
.polaroid--call img { aspect-ratio: 1179 / 861; }
.polaroid--call figcaption { bottom: 2.7cqw; font-size: clamp(10px, 2.5cqw, 14px); }
.polaroid--call .tape {
  top: -2.7cqw; left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 23.4cqw; height: 5.8cqw;
}
.polaroid--hosts {
  right: 0.7cqw; bottom: 0;
  width: 37.8cqw;
  padding: 2cqw 2cqw 7.2cqw;
  transform: rotate(4deg);
  box-shadow: 0 8px 18px rgba(58, 40, 26, 0.13);
}
.polaroid--hosts img { aspect-ratio: 1 / 1; object-position: center 30%; }
.polaroid--hosts figcaption { bottom: 2.3cqw; font-size: clamp(10px, 2.3cqw, 13px); }
.polaroid--hosts .tape {
  top: -2.3cqw; right: 4.3cqw;
  transform: rotate(6deg);
  width: 16.2cqw; height: 4.7cqw;
}
.note-card {
  position: absolute;
  left: 0; bottom: 2.5cqw;
  transform: rotate(-2deg);
  background: #fff;
  color: var(--ink);
  padding: 2.9cqw 4cqw;
  border-radius: 4px;
  box-shadow: 0 6px 14px rgba(58, 40, 26, 0.11);
  max-width: 37.8cqw;
}
.note-card p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(14px, 3.8cqw, 21px);
  line-height: 1.22;
}

/* ============ Quote banner ============ */

.quote-banner {
  margin: 0 var(--pad-x) 70px;
  padding: 54px clamp(24px, 5vw, 60px);
  text-align: center;
}
.quote-banner h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3.9vw, 46px);
  line-height: 1.1;
  max-width: 760px;
  margin: 0 auto;
}

/* ============ What to know ============ */

.know { padding: 0 var(--pad-x) 84px; }
.know > .eyebrow { margin-bottom: 28px; }
.know-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 26px;
}
.know-card { transform: rotate(var(--tilt, 0deg)); }
.know-card .card-body { padding: 38px 32px; text-align: center; }
.dot { display: block; width: 38px; height: 38px; border-radius: 50%; margin: 0 auto 18px; }
.dot--orange { background: var(--orange); }
.dot--red { background: var(--coral); }
.dot--green { background: var(--green); }
.know-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.12;
  margin-bottom: 10px;
}
.know-card p { font-size: 16px; line-height: 1.55; color: var(--muted); }

/* ============ Why it exists ============ */

.why {
  padding: 30px var(--pad-x) 88px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
}
.why .eyebrow { margin-bottom: 16px; }
.why h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3.7vw, 44px);
  line-height: 1.08;
  margin-bottom: 20px;
}
.why-collage {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 508 / 520;
}
.why-collage .polaroid { padding: 2.2cqw; border-radius: 4px; box-shadow: 0 8px 18px rgba(58, 40, 26, 0.13); }
.why-collage .polaroid img { border-radius: 2px; object-fit: contain; }
.polaroid--text-heart {
  left: 2cqw; top: 0;
  width: 63cqw;
  transform: rotate(-3deg);
}
.polaroid--text-heart .tape {
  top: -2.6cqw; left: 7.9cqw;
  transform: rotate(-6deg);
  width: 19.7cqw; height: 5.5cqw;
}
.polaroid--text-fun {
  right: 0; bottom: 4.7cqw;
  width: 71cqw;
  transform: rotate(2.5deg);
}
.polaroid--text-fun .tape {
  top: -2.6cqw; right: 7.9cqw;
  transform: rotate(5deg);
  width: 19.7cqw; height: 5.5cqw;
}

/* ============ The story ============ */

.story {
  margin: 0 var(--pad-x) 80px;
  padding: 60px clamp(24px, 5vw, 60px);
}
.story-grid {
  display: grid;
  grid-template-columns: 0.7fr 1fr;
  gap: 48px;
  align-items: center;
}
.polaroid--leaf {
  position: relative;
  justify-self: center;
  transform: rotate(-3deg);
  padding: 13px;
  box-shadow: 0 8px 18px rgba(58, 40, 26, 0.13);
}
.polaroid--leaf img { width: 230px; aspect-ratio: 3 / 3.4; }
.story .eyebrow { margin-bottom: 16px; }
.story-quote {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(23px, 2.5vw, 29px);
  line-height: 1.3;
  margin-bottom: 18px;
}
.story-body { font-size: 18px; line-height: 1.62; color: var(--muted); }

/* ============ Join CTA ============ */

.join {
  margin: 0 var(--pad-x) 64px;
  padding: 80px clamp(24px, 5vw, 60px) 88px;
}
.join-body { text-align: center; color: #fff; }
.join-avatar {
  width: 104px; height: 104px;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
  margin: 0 auto 20px;
}
.join-hosts {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.06em;
  opacity: 0.95;
  margin-bottom: 14px;
}
.join h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 5.3vw, 62px);
  line-height: 1;
}
.join .btn { margin-top: 28px; }

/* ============ Responsive ============ */

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 56px; padding-bottom: 64px; }
  .hero-collage { max-width: 560px; width: 100%; justify-self: center; }
  .know-grid { grid-template-columns: 1fr; gap: 34px; max-width: 480px; margin: 0 auto; }
  .why { grid-template-columns: 1fr; gap: 56px; }
  .why-collage { max-width: 520px; width: 100%; justify-self: center; }
  .story-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 480px) {
  .site-header { padding-top: 24px; padding-bottom: 12px; }
  .hero { padding-top: 28px; }
  .btn--primary { font-size: 17px; padding: 18px 38px; }
  .quote-banner { padding-top: 44px; padding-bottom: 44px; margin-bottom: 56px; }
  .polaroid--leaf img { width: 190px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover { transform: none; }
}