/* Companion site for "Don't Worry, It's Just a Baby". Look follows the book
   (art/style.md, D-036): ivory paper, ink text, the cover's green for headings,
   Source Serif 4 and Source Sans 3. Motion only applies under html.motion
   (set in index.html); without it, everything is simply visible in order. */

@font-face { font-family: "Source Serif 4"; src: url("fonts/source-serif-4-regular.woff2") format("woff2"); font-weight: 400; 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: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("fonts/source-serif-4-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("fonts/source-sans-3-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("fonts/source-sans-3-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --paper: #f8f3ea;      /* page background, a lighter cut of the cover's wall */
  --ink: #24251f;        /* body text */
  --green: #46513e;      /* sampled from the cover title */
  --muted: #6c6a60;      /* attributions, footer */
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow: 0 28px 50px -24px rgba(45, 38, 26, .45), 0 4px 12px -6px rgba(45, 38, 26, .25);
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--serif);
  font-size: clamp(18px, 1rem + .45vw, 22px);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

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

.caption, blockquote p { text-wrap: balance; }
p { text-wrap: pretty; }

section {
  min-height: 72svh;
  padding: 9svh 7vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Small capitals label used for "Coming soon" and the About heading */
.status, .author h2, .source {
  font-family: var(--sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .72em;
}

/* Present for screen readers and search engines, not drawn on screen */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 1. Opening: the cover is the headline, shown at once (no scroll reveal) */
.hero { min-height: 100svh; padding: 6svh 6vw; }
.book {
  width: min(88vw, 520px);
  border-radius: 2px;
  box-shadow: var(--shadow);
}
.status { color: var(--green); margin: 2.2em 0 0; }

/* Longer passages read left-aligned in a narrow column, so they don't fill a
   phone screen as one centered block. Headings, quotes and labels stay centered. */
.prose p, .caption, .bio { text-align: left; }

/* 2. Description. The first paragraph is set large as a lead-in, the second at
   reading size, which gives the passage a top and a bottom. Words unchanged. */
.prose { gap: 0; }
.prose p { width: min(36rem, 100%); margin: 0 0 1.2em; line-height: 1.6; }  /* rem: both paragraphs share one column width */
.prose .lede {
  font-size: 1.38em;
  line-height: 1.35;
  color: var(--green);
  margin-bottom: .9em;
}
/* The back cover's third sentence, set apart as its own beat */
.prose .pull {
  font-style: italic;
  font-size: 1.15em;
  line-height: 1.4;
  margin-bottom: 1.4em;
}

/* Section dividers: a short rule with a small diamond, between the tips and
   before the author section. */
hr.rule {
  position: relative;
  width: 72px;
  height: 1px;
  margin: 1svh auto;
  border: 0;
  overflow: visible;
  background: rgba(70, 81, 62, .45);
}
hr.rule::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  background: var(--paper);
  border: 1px solid rgba(70, 81, 62, .6);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* 3, 5, 7. Tips: caption first, then the picture, as in the book's spread */
.tip { gap: 6svh; }
.caption {
  margin: 0;
  max-width: 22em;
  font-size: 1.14em;
  line-height: 1.55;
}
@media (min-width: 700px) { .caption { font-size: 1.28em; } }
.art {
  width: min(92vw, 520px);
  border-radius: 2px;
  box-shadow: var(--shadow);
}

@media (min-width: 960px) {
  .tip {
    flex-direction: row;
    justify-content: center;
    gap: 6vw;
    text-align: left;
  }
  .caption { flex: 0 1 22em; }
  .art { flex: 0 0 auto; width: min(44vw, 520px); }
}

/* 4, 6. Endorsements */
.endorsement { min-height: 50svh; }

/* A tip and the endorsement that answers it sit close together as one pair */
.pair .tip { min-height: 0; padding-bottom: 5svh; }
.pair .endorsement { min-height: 0; padding-top: 3svh; padding-bottom: 10svh; }
.endorsement blockquote { margin: 0; }
.endorsement blockquote p {
  margin: 0;
  max-width: 18em;
  font-style: italic;
  font-size: clamp(1.6rem, 4.6vw, 2.6rem);
  line-height: 1.25;
  color: var(--green);
}
.source { margin: 1.6em 0 0; color: var(--muted); }

/* 8. About the author. Multiply blends the portrait's white edges into the paper. */
.author { gap: 3svh; }
.portrait { width: min(80vw, 420px); mix-blend-mode: multiply; }
.bio { max-width: 28em; }
.author h2 { margin: 0 0 1em; color: var(--green); }
.bio p { margin: 0; line-height: 1.6; }

@media (min-width: 960px) {
  .author { flex-direction: row; gap: 5vw; text-align: left; }
}

/* 9. Closing. Static by default: just the back cover and the status line. */
.finale { padding: 0; display: block; }  /* block, so the sticky stage pins from the top */
.stage {
  min-height: 100svh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  perspective: 1600px;
}
.book3d { position: relative; width: min(70vw, 420px); aspect-ratio: 1; }
.face { width: 100%; border-radius: 2px; box-shadow: var(--shadow); }
.face.front { display: none; }
.closing {
  margin: 2em 0 0;
  max-width: 17em;
  font-size: 1.15em;
  line-height: 1.4;
  color: var(--green);
  text-align: center;
  text-wrap: balance;
}

/* 10. Footer */
footer {
  padding: 2svh 6vw 8svh;
  text-align: center;
  font-family: var(--sans);
  font-size: .78em;
  color: var(--muted);
}
footer p { max-width: 34em; margin: 0 auto .8em; }
footer em { font-style: italic; }

/* ---------- Motion (only with html.motion) ---------- */

.motion .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease), transform 1.1s var(--ease);
}
.motion .reveal.in { opacity: 1; transform: none; }

/* The picture arrives after its caption */
.motion .art.reveal { transform: translateY(48px) scale(.97); transition-delay: .35s; }
.motion .art.reveal.in { transform: none; }

/* The opening is visible from the first frame; the cover just settles into
   place on load. No fade, so there is never a blank screen. */
@keyframes settle {
  from { transform: translateY(14px) scale(.985); }
  to { transform: none; }
}
.motion .hero .book { animation: settle 1.4s var(--ease) both; }
.motion .source { transition-delay: .25s; }

/* Dividers draw outward from the diamond instead of rising */
.motion hr.rule.reveal { transform: scaleX(.15); }
.motion hr.rule.reveal.in { transform: none; }

/* The flip: a tall section with a pinned stage. script.js sets --flip (0 to 1),
   --lift and --done from scroll position. */
.motion .finale { height: 170svh; }
.motion .stage { position: sticky; top: 0; height: 100svh; min-height: 0; }
.motion .book3d {
  transform-style: preserve-3d;
  transform: translateY(calc(var(--lift, 0) * -18px))
             scale(calc(1 - var(--lift, 0) * .05))
             rotateY(calc(var(--flip, 0) * -180deg));
}
.motion .face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.motion .face.front { display: block; }
.motion .face.back { transform: rotateY(180deg); }
.motion .finale .closing {
  opacity: var(--done, 0);
  transform: translateY(calc((1 - var(--done, 0)) * 14px));
}