/* ============================================================
   Searching for Margie
   Static rebuild of the original Framer design.
   Measurements taken from the live site at a 1440px viewport.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Amulya";
  src: url("assets/fonts/amulya-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Amulya";
  src: url("assets/fonts/amulya-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Amulya";
  src: url("assets/fonts/amulya-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --ink:        #111111;
  --ink-2:      #383937;
  --muted:      #898e87;
  --light:      #b9bcb8;
  --red:        #d50524;
  --btn-dark:   #2f302f;
  --cream:      #eef3d6;
  --sand:       #bfb399;

  --container:  1140px;
  --gutter:     24px;
  --section-y:  128px;

  --body:       400 18px/1.55 "Amulya", system-ui, sans-serif;
  --small:      400 16px/1.55 "Amulya", system-ui, sans-serif;
  --tiny:       400 12px/1.55 "Amulya", system-ui, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* the tilted drawing bleeds past the container by design */
html, body { overflow-x: hidden; }
body {
  margin: 0;
  font: var(--body);
  color: var(--ink);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p, figure, ol, li { margin: 0; padding: 0; }
ol { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Shared type ---------- */
h1 {
  font: 700 58px/1.25 "Amulya", system-ui, sans-serif;
  letter-spacing: -0.01em;
}
h2 { font: 700 28px/1.25 "Amulya", system-ui, sans-serif; }
.eyebrow {
  font: 700 14px/1.2 "Amulya", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.small { font: var(--small); }
.tiny  { font: var(--tiny); color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  height: 56px;
  padding-inline: 24px;
  border-radius: 12px;
  font: 700 18px/1 "Amulya", system-ui, sans-serif;
  text-decoration: none;
  transition: transform .15s ease, filter .15s ease;
}
.btn:hover  { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn--red   { background: var(--red);      color: var(--cream); }
.btn--dark  { background: var(--btn-dark); color: var(--light); }

/* ============================ Hero ============================ */
.hero { background: var(--sand); padding: 24px 0 100px; }
.hero__inner {
  display: flex;
  align-items: flex-start;
  gap: 137px;
}
.hero__text { flex: 0 1 540px; min-width: 0; }
.hero__lede {
  font: 700 20px/1.5 "Amulya", system-ui, sans-serif;
  color: var(--ink-2);
}
.hero h1 + .hero__lede { margin-top: 16px; }
.hero__lede + .hero__lede { margin-top: 20px; }
.hero__lede + .btn { margin-top: 56px; }

.hero__figure { flex: 0 0 463px; }
.hero__figure img { width: 463px; height: 612px; object-fit: cover; }

/* ======================= About the author ======================= */
.about {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  padding: var(--section-y) 0;
}
/* Faint "margie" lettering bleeding across the section */
.about__watermark {
  position: absolute;
  top: -111px;
  left: 306px;
  width: 1134px;
  height: 1000px;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}
/* Grid so the portrait can sit beside the copy on desktop and slot
   between the eyebrow and the heading on mobile. */
.about__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 655px) auto;
  column-gap: 167px;
  align-items: start;
  grid-template-areas:
    "eyebrow  portrait"
    "heading  portrait"
    "body     portrait";
}
.about__eyebrow  { grid-area: eyebrow; }
.about__heading  { grid-area: heading; color: var(--light); margin-top: 65px; }
.about__body     { grid-area: body; margin-top: 4px; }
.about__portrait { grid-area: portrait; margin-top: 65px; }
.about__body p { color: var(--muted); }
.about__body p + p { margin-top: 20px; }

.about__portrait {
  width: 318px;
  height: 458px;
  border-radius: 999px;
  background-image: url("assets/img/author.png");
  background-size: cover;
  background-position: center;
}

/* ======================= What's in the book ======================= */
.book {
  padding: var(--section-y) 0;
  background:
    radial-gradient(50% 50% at 50% 50%,
      rgb(239, 237, 233)          0%,
      rgba(242, 221, 194, 0.85)   22%,
      rgba(242, 203, 126, 0.75)   47%,
      rgba(242, 179, 53,  0.57)   77%,
      rgba(250, 167, 0,   0.36)   100%),
    #fddfa3;
}
.book__cols {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.book__cols p { color: var(--ink-2); }
.book__toc-heading { margin-top: 95px; }

.toc {
  margin-top: 20px;
  padding: 32px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0.64) 100%);
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
}
.toc__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, auto);
  gap: 24px 40px;
}
.toc__list h3 { font: 500 18px/1.4 "Amulya", system-ui, sans-serif; color: var(--ink); }
.toc__list p  { font: var(--body); color: var(--ink); margin-top: 6px; }

/* ========================= Ready to read ========================= */
.ready { background: var(--ink); padding: var(--section-y) 0 131px; }
.ready__inner { position: relative; }
.ready__text { width: 741px; max-width: 100%; margin-top: 28px; }
.ready__text h2 { color: var(--light); }
.ready__text p  { color: var(--muted); margin-top: 12px; }
.ready__text p + p { margin-top: 20px; }
.ready__text .btn { margin-top: 18px; }
.ready__text .small { margin-top: 40px; }

/* Right edge sits on the container edge; the tilt lets the corners bleed out. */
.ready__figure {
  position: absolute;
  top: 0;
  right: var(--gutter);
  width: 326px;
  transform: rotate(-14deg);
}
.ready__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 326 / 424;
  object-fit: cover;
}

/* ---------- Signup ---------- */
.signup {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 40px;
  margin-top: 108px;
}
.signup__copy { max-width: 646px; }
.signup__title { font: 500 18px/1.4 "Amulya", system-ui, sans-serif; color: var(--light); }
.signup__copy .small { color: var(--muted); margin-top: 6px; }

.signup__social { display: flex; gap: 16px; align-self: start; }
.signup__social a { color: var(--muted); display: block; }
.signup__social a:hover { color: var(--light); }
.signup__social svg { width: 24px; height: 24px; display: block; }

.signup__form {
  grid-column: 1 / -1;
  width: 270px;
  padding: 20px;
  margin-top: 49px;
}
.field { display: block; }
.field + .field { margin-top: 20px; }
.field__label {
  display: block;
  font: 500 12px/1.2 "Inter", system-ui, sans-serif;
  color: #888;
  margin-bottom: 10px;
}
.field__box {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 10px;
  background: rgba(187, 187, 187, 0.15);
}
.field__box input {
  display: block;
  width: 100%;
  height: 16px;
  border: 0;
  padding: 0;
  background: none;
  font: 400 14px/16px "Inter", system-ui, sans-serif;
  color: #ddd;
}
.field__box input::placeholder { color: #999; }
.field__box input:focus { outline: none; }
.field__box:focus-within { outline: 2px solid #555; outline-offset: 1px; }
.field__box.is-invalid { outline: 2px solid var(--red); outline-offset: 1px; }

/* honeypot — visually gone, still focusable by scripts */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.signup__submit {
  display: block;
  width: 100%;
  height: 40px;
  margin-top: 20px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #333;
  color: var(--light);
  font: 600 14px/1.2 "Inter", system-ui, sans-serif;
  cursor: pointer;
  transition: background .15s ease;
}
.signup__submit:hover:not(:disabled) { background: #3d3d3d; }
.signup__submit:disabled { opacity: .6; cursor: default; }

.signup__status:empty { display: none; }
.signup__status {
  margin-top: 12px;
  font: 400 13px/1.4 "Inter", system-ui, sans-serif;
  color: var(--muted);
}
.signup__status.is-ok    { color: var(--cream); }
.signup__status.is-error { color: #ff6b7f; }

/* ---------- Footer ---------- */
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  margin-top: 48px;
}
.footer__left p + p { margin-top: 6px; }
.footer__right { max-width: 495px; text-align: right; }

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

/* Tablet: keep the two-column shape, just tighten it. */
@media (max-width: 1199px) {
  :root { --section-y: 96px; }
  .hero__inner  { gap: 56px; }
  .hero__figure { flex: 0 1 400px; }
  .hero__figure img { width: 100%; height: auto; aspect-ratio: 463 / 612; }
  .about__inner { column-gap: 56px; }
  .about__portrait { width: 260px; height: 375px; }
  /* inset so the tilted corners stay inside the viewport */
  .ready__figure { width: 233px; right: calc(var(--gutter) + 36px); }
  .ready__text { width: calc(100% - 290px); }
}

/* Phone / small tablet — mirrors the stacked layout of the original.
   Measured against the live site at a 390px viewport. */
@media (max-width: 809px) {
  :root { --section-y: 72px; }

  h1 { font-size: 36px; line-height: 1.25; text-align: center; }
  h2 { font-size: 28px; }

  /* ---- Hero: cover image on top, then the copy ---- */
  .hero { padding: 24px 0 48px; }
  .hero__inner { flex-direction: column-reverse; gap: 0; }
  .hero__text, .hero__figure { flex: 1 1 auto; width: 100%; }
  .hero__figure img { width: 100%; height: auto; aspect-ratio: 342 / 447; }
  .hero__text { margin-top: 10px; }
  .hero h1 + .hero__lede { margin-top: 16px; }
  .hero__lede + .btn { margin-top: 56px; }
  .btn { width: 100%; justify-content: center; }

  /* ---- About: eyebrow, portrait, heading, copy ---- */
  .about__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "eyebrow" "portrait" "heading" "body";
  }
  .about__portrait {
    width: min(100%, 315px);
    height: 300px;
    margin-top: 32px;
  }
  .about__heading { margin-top: 48px; }
  .about__body    { margin-top: 12px; }
  .about__body p + p { margin-top: 14px; }
  .about__watermark { top: 0; left: -10%; width: 150%; height: auto; }

  /* ---- Book: single column, 16px body ---- */
  .book__cols { grid-template-columns: 1fr; gap: 24px; margin-top: 24px; }
  .book__cols p { font: var(--small); }
  .book__toc-heading { margin-top: 63px; }
  .toc { margin-top: 28px; padding: 24px; }
  .toc__list {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    grid-template-rows: none;
    gap: 25px;
  }
  .toc__list h3 { font-size: 16px; }
  .toc__list p  { font: var(--small); }

  /* ---- Ready: drawing on top, left-bleeding and tilted ---- */
  .ready__inner  { display: flex; flex-direction: column-reverse; }
  .ready__text   { width: 100%; max-width: none; margin-top: 48px; }
  .ready__figure {
    position: static;
    align-self: flex-start;
    width: min(calc((100vw - 48px) * 0.7339), 280px);
  }
  .ready__figure img { border-radius: 20px; }
  .ready { padding-bottom: 105px; }
  .ready__text p { margin-top: 12px; }
  .ready__text p + p  { margin-top: 14px; }
  .ready__text .btn   { margin-top: 23px; }
  .ready__text .small { margin-top: 40px; }

  /* ---- Signup ---- */
  .signup { grid-template-columns: 1fr; row-gap: 0; margin-top: 48px; }
  .signup__social { order: 2; justify-content: center; margin-top: 24px; }
  .signup__form   { order: 3; width: 270px; padding: 20px; margin-top: 48px; }

  .footer { flex-direction: column; align-items: flex-start; gap: 33px; margin-top: 48px; }
  .footer__right { text-align: left; max-width: none; }
}

/* Very narrow phones — let the fixed-width form breathe. */
@media (max-width: 359px) {
  .signup__form { width: 100%; padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}