/* FoundersOnCall, the site (Oct 4 2026): one page, the Build Call.
   Modelled on the pages his studied creators send bio traffic to: one page, one ask, a huge
   headline, his face in a video under it, one button, the price and the refund beside it.
   The look is his own reels: the title in boxes over the top of the frame, the yellow caption
   word, the red f(), the rings of his end card. Under the first screen it is a short letter. */

@font-face {
  font-family: "Archivo Black";
  src: url("fonts/archivo-black-400.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ink: #111111;
  --line: #34312d;
  --paper: #f5f2ea;
  --soft: #cfcbc1;
  --red: #d93a40;
  --red-edge: #9c242a;
  --yellow: #ffe500;
  --display: "Archivo Black", "Arial Black", Impact, sans-serif;
  --body: "Archivo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  /* the width of his video: the headline and its overlap are sized from it */
  --w: min(64vw, 300px);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ink) url("grain.svg");
  color: var(--paper);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

main { overflow: hidden; }

/* top bar */
.top {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1080px;
  margin: 0 auto;
  padding: 12px 20px 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.brand img { display: block; }
.top-cta {
  font-weight: 700;
  font-size: 0.82rem;
  text-decoration: none;
  white-space: nowrap;
  padding: 8px 14px;
  border: 2px solid var(--paper);
  border-radius: 999px;
}
.top-cta:hover { background: var(--paper); color: var(--ink); }

/* first screen */
.hero {
  position: relative;
  z-index: 0;
  padding: 22px 20px 0;
  text-align: center;
}
/* a soft wash of his own reel frame behind the top of the page */
.hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: 50%;
  top: calc(var(--w) * -0.2);
  width: calc(var(--w) * 3.4);
  height: calc(var(--w) * 3);
  transform: translateX(-50%);
  background: url("media/backdrop.jpg") center / cover no-repeat;
  opacity: 0.34;
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 100%);
  pointer-events: none;
}

h1, h2 { margin: 0; font-weight: 400; }

h1 {
  position: relative;
  z-index: 2;
  font-family: var(--display);
  font-size: calc(var(--w) * 0.153);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
h1 .l { display: block; white-space: nowrap; }

/* the title style of his reels: heavy type sitting in a box, one box per line */
.box {
  background: var(--paper);
  color: var(--ink);
  padding: 0.04em 0.22em 0.08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.box.red { background: var(--red); color: #fff; }

/* his video. It is pulled up under the two red lines of the headline, so they sit over the top
   of the frame the way the title does in the reel (and cover the title burned into it). */
.stage {
  position: relative;
  z-index: 1;
  width: var(--w);
  margin: calc(var(--w) * -0.398) auto 0;
}
/* the rings of his end card */
.stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 56%;
  width: 250%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: url("rings.svg") center / contain no-repeat;
  pointer-events: none;
}
.stage video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: #000;
  border-radius: calc(var(--w) * 0.07);
}

.say {
  margin: 14px 0 0;
  font-weight: 800;
  font-size: clamp(1.05rem, 4.9vw, 1.45rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
/* the word being said, in the yellow of his captions */
.say b { font-weight: 800; color: var(--yellow); }

.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 100%;
  max-width: 400px;
  min-height: 68px;
  margin: 14px auto 0;
  padding: 11px 20px 12px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 4px 0 var(--red-edge);
}
.cta strong { font-weight: 800; font-size: 1.32rem; letter-spacing: -0.01em; }
.cta small { font-size: 0.9rem; font-weight: 500; }
.cta:hover { filter: brightness(1.08); }
.cta:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--red-edge); }

.price {
  margin: 18px 0 0;
  font-size: clamp(0.84rem, 3.85vw, 1rem);
  font-weight: 700;
}
.back {
  max-width: 22em;
  margin: 4px auto 0;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--soft);
}

/* under the first screen: a short letter, set left */
.letter {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 20px;
}
.letter section {
  margin-top: 44px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.letter h2 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 8vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.letter p { margin: 16px 0 0; }
/* the club's heading is long: a little smaller, so "The FoundersOnCall" stays on one line on a phone */
.club h2 { font-size: clamp(1.6rem, 7.1vw, 2.5rem); }
.letter p a { text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* who he is: his face, his name, his own Instagram bio line for line */
.id { display: flex; align-items: center; gap: 14px; }
.id img {
  display: block;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 2px solid var(--paper);
  object-fit: cover;
}
.bio {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  font-size: clamp(0.86rem, 3.95vw, 1.1rem);
  font-weight: 700;
  line-height: 1.55;
}
.bio li { position: relative; padding-left: 1.1em; }
.bio li::before { content: ""; position: absolute; left: 0.1em; top: 0.56em; width: 0.42em; height: 0.42em; border-radius: 50%; background: var(--red); }

/* his videos, as a list: a red play mark, the title of the reel */
.reels { list-style: none; margin: 22px 0 0; padding: 0; }
.reels li { border-top: 1px solid var(--line); }
.reels li:last-child { border-bottom: 1px solid var(--line); }
.reels a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}
.reels a::before {
  content: "";
  flex: none;
  width: 0;
  height: 0;
  border-left: 13px solid var(--red);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.reels a:hover { color: #fff; }
.more a {
  font-weight: 800;
  text-decoration-color: var(--red);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

/* the last ask: the red box runs in from the left edge of the screen */
.last h2 { font-size: calc(var(--w) * 0.142); line-height: 1.3; white-space: nowrap; }
.last .box { position: relative; display: inline-block; }
.last .box::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 0;
  bottom: 0;
  width: 100vw;
  background: var(--red);
}
.last .cta { margin: 26px 0 0; }
.last .price, .last .back { margin-left: 0; }

/* the page for a wrong address */
.lost { padding: 64px 20px 96px; text-align: center; }
.lost p { margin: 28px 0 0; }
.lost p a { font-weight: 800; text-decoration-color: var(--red); text-decoration-thickness: 3px; text-underline-offset: 6px; }

footer { max-width: 600px; margin: 0 auto; padding: 56px 20px 40px; }
footer p {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--soft);
}

/* very narrow phones: the mark alone, so the top bar never runs off the screen */
@media (max-width: 374px) {
  .brand span { display: none; }
}

/* wide screens: the same cover, with the ask beside it */
@media (min-width: 900px) {
  :root { --w: 300px; }
  .top { padding: 20px 32px 0; }
  .hero {
    display: grid;
    grid-template-columns: auto minmax(0, 400px);
    column-gap: 72px;
    justify-content: center;
    align-items: center;
    padding-top: 36px;
  }
  .hero::before { left: 34%; }
  .stage::before { width: 180%; }
  .ask { text-align: left; }
  .say { margin-top: 0; font-size: 2rem; line-height: 1.15; }
  .say b { display: block; }
  .ask .cta { margin: 26px 0 0; }
  .ask .back { margin-left: 0; }
  .letter section { margin-top: 56px; padding-top: 52px; }
  .letter p, .reels a { font-size: 1.15rem; }
  .bio { font-size: 1.15rem; }
}