/* =====================================================================
   Sunny and Grumpy Cloud — static reproduction of sunnyandgrumpy.com
   Values measured from the original Squarespace site:
     headings  -> Shrikhand   (intro, BUY THE BOOKS, author name, FOLLOW, contact)
     body text -> Bitter
   Sky-blue background, animated hero videos, responsive phone/tablet/desktop.
   ===================================================================== */

/* Self-hosted fonts (latin), pulled from the original site's Google Fonts. */
@font-face {
  font-family: "Shrikhand"; font-style: normal; font-weight: 400;
  font-display: swap; src: url(assets/fonts/shrikhand.woff2) format("woff2");
}
@font-face {
  font-family: "Bitter"; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url(assets/fonts/bitter.woff2) format("woff2");
}
@font-face {
  font-family: "Bitter"; font-style: italic; font-weight: 400 700;
  font-display: swap; src: url(assets/fonts/bitter-italic.woff2) format("woff2");
}

:root {
  --sky:   #00bbff;   /* brand sky blue — whole page background */
  --ink:   #000000;   /* black text */
  --white: #ffffff;

  --head: "Shrikhand", "Trebuchet MS", system-ui, cursive;  /* headings */
  --body: "Bitter", Georgia, "Times New Roman", serif;       /* body text */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sky);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }

/* =============================== HERO =============================== */
.hero { padding: clamp(1.25rem, 3.5vw, 2.4rem) 1rem; }

/* Three 16:9 video panels tile into one scene: title across the top,
   cloud (left) + sun (right) below. ~66% of content width, like the original. */
.hero-scene {
  max-width: 640px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.panel {
  width: 100%; height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--sky);
}
.panel--title { grid-column: 1 / 3; }
.panel--cloud { grid-column: 1 / 2; }
.panel--sun   { grid-column: 2 / 3; }

/* ============================= INTRO ============================= */
.intro {
  max-width: 450px;                 /* narrow column -> wraps like the original */
  margin: clamp(1.5rem, 5vw, 2.5rem) auto;
  padding: 0 1rem;
  text-align: center;
}
.intro p {
  margin: 0;
  font-family: var(--head);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  line-height: 1.17;
  letter-spacing: -.02em;
  color: var(--ink);
}
.intro a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ====================== SECTION TITLE (BUY) ===================== */
.section-title {
  text-align: center;
  margin: clamp(1.25rem, 4vw, 2.25rem) auto clamp(1.5rem, 5vw, 2.5rem);
  font-family: var(--head);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.8vw, 1.7rem);
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--white);
}

/* ============================= BOOKS ============================= */
.books {
  margin: 0 auto;
  padding: 0 1.25rem clamp(1.5rem, 5vw, 2.5rem);
}
.book-grid {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;                 /* phone: 1 column */
  gap: clamp(2rem, 5vw, 3rem) 12px;
}
@media (min-width: 600px) {                    /* tablet & up: 2 columns */
  .book-grid { grid-template-columns: repeat(2, 1fr); }
}

.book { text-align: center; }

.cover {
  width: 100%;
  max-width: 374px;
  height: auto;
  margin: 0 auto;
  border-radius: 0 5% 5% 0;     /* round the RIGHT corners only; spine side square */
}

.book-title {
  margin: 1.1rem 0 .3rem;
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(1.15rem, 2.2vw, 1.3rem);
  line-height: 1.05;
  color: var(--ink);
}
.book-author {
  margin: 0 0 1.2rem;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
}

/* original Squarespace "primary" button: black, white text, 45px/0 corners */
.buy-button { display: inline-block; text-decoration: none; }
.buy-button span {
  display: inline-block;
  background: var(--ink);
  color: var(--white);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1;
  padding: 2rem 3rem;
  border-radius: 45px 0;
  transition: opacity .15s ease;
}
.buy-button:hover span { opacity: .85; }

/* ========================== AUTHORS ============================= */
.authors {
  margin: clamp(2.5rem, 8vw, 4.5rem) auto 0;
  padding: 0 1.25rem;
}
.authors-inner {
  max-width: 840px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;                 /* phone: stacked */
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
}
@media (min-width: 760px) {                    /* tablet & up: photo | text */
  .authors-inner { grid-template-columns: 400px 1fr; gap: 40px; }
}

.author-photo { width: 100%; height: auto; }

.kicker {                /* ABOUT THE AUTHORS — Bitter, centered over the text */
  margin: 0 0 clamp(.9rem, 2.5vw, 1.4rem);
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(1.05rem, 2.16vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink);
  text-align: center;
}
.author-name {
  margin: 0 0 clamp(1rem, 3vw, 1.5rem);
  font-family: var(--head);
  font-weight: 400;
  font-size: clamp(2rem, 5.3vw, 3.15rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ink);
  text-align: left;
}
.bio {
  margin: 0;
  font-family: var(--body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  text-align: left;
}
.bio em { font-style: italic; }

/* =========================== FOLLOW ============================ */
.follow {
  margin: clamp(2.5rem, 8vw, 4.5rem) auto;
  padding: 0 1.25rem;
  text-align: center;
}
.follow-link {
  display: block;
  font-family: var(--head);
  font-weight: 400;
  font-size: clamp(1.45rem, 3.85vw, 2.3rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 4px;
  margin-bottom: clamp(1.25rem, 4vw, 2rem);
}
.yt-icon {
  display: inline-block;
  width: 52px;
  transition: transform .15s ease;
}
.yt-icon:hover { transform: translateY(-2px); }
.yt-icon svg { width: 100%; height: auto; }

/* =========================== FOOTER ============================ */
.footer {
  text-align: center;
  padding: clamp(2rem, 6vw, 3rem) 1.25rem clamp(3rem, 8vw, 5rem);
}
.contact {
  margin: 0 0 clamp(1.25rem, 4vw, 2rem);
  font-family: var(--head);
  font-weight: 400;
  font-size: clamp(1.2rem, 2.4vw, 1.45rem);
  letter-spacing: -.02em;
  color: var(--ink);
}
.contact-label { display: block; margin-bottom: .25rem; }
.contact a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-word;
}
.copyright {
  margin: 0;
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(.85rem, 1.6vw, .95rem);
  color: var(--ink);
}