/* Companion site for "Don't Worry, It's Just a Baby" (site/brief.md).
   Look follows the book (art/style.md, D-036): ivory paper, ink text, the
   cover's green, Source Serif 4 and Source Sans 3.
   Two presentations of one page:
   - the stacked page (.stack): what visitors see on screens too short for the
     book, with reduced motion, without script.js or if anything goes wrong,
     and what screen readers always read. Every section simply shows, in order.
   - the book (.stage): script.js builds it from copies of the stack and pins
     it while the reader pages through by scrolling (.inside.book-mode). */

@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 */
  --page: #fdfbf6;       /* the book's pages: near-white, like coated stock */
  --endpaper: #e4e6da;   /* inside the covers: a pale sage */
  --turn-in: #d9ccb6;    /* cover cloth folded over the board edges */
  --ink: #24251f;        /* body text */
  --caption-ink: #161714;/* captions, as approved for print */
  --green: #46513e;      /* sampled from the cover title */
  --muted: #6c6a60;      /* subtitles, attributions, footer */
  --spine: linear-gradient(to right, #d6cab5, #ece3d3 28%, #f2ebde 50%, #e2d8c5 82%, #d0c4ae);
  --page-lines: #f6f1e7;
  --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);
  --book-shadow: 0 28px 50px -24px rgba(45, 38, 26, .45), 0 4px 12px -6px rgba(45, 38, 26, .25);
  --print-shadow: 0 12px 28px -14px rgba(45, 38, 26, .22);
}

* { 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; }

::selection { background: rgba(70, 81, 62, .2); color: var(--ink); }

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

/* 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;
}

/* Small capitals label: "Coming soon", the About heading, attributions */
.status, .bio-page h2, .review figcaption {
  font-family: var(--sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .72em;
  line-height: 1.4;
}

section {
  padding: clamp(3rem, 7svh, 5.5rem) 7vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ---------- 1. Opening: the closed book at a slight angle ---------- */

.hero {
  min-height: 80svh;                     /* the description peeks in below */
  justify-content: center;
  padding-top: 5svh;
  padding-bottom: 3svh;
}

.hero-scene {
  --hw: min(76vw, 46svh, 460px);         /* sized by width and height */
  --ht: calc(var(--hw) * .06);           /* thickness of a ~136-page hardcover */
  position: relative;
  width: calc(var(--hw) * 1.1);
  height: var(--hw);
  perspective: 1600px;
  display: flex;
  justify-content: center;
}
.hero-book {
  position: relative;
  width: var(--hw);
  height: var(--hw);
  transform-style: preserve-3d;
  /* --px and --py: a slight lean toward the pointer on desktop (script.js) */
  transform: rotateX(calc(-7deg - var(--py, 0) * 3deg)) rotateY(calc(26deg + var(--px, 0) * 5deg));
  transition: transform .9s var(--ease);
}
.hero-front {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* The casewrap hinge: a soft groove a little in from the spine */
.hero-book::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateZ(.6px);
  background: linear-gradient(to right, rgba(40, 32, 20, .22), rgba(255, 255, 255, .1) 1.4%, rgba(40, 32, 20, .12) 3.4%, transparent 5%);
  pointer-events: none;
}
.hero-spine {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--ht);
  height: 100%;
  transform-origin: 0 50%;
  transform: rotateY(90deg);
  background: var(--spine);
}
.hero-top {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--ht);
  transform-origin: 50% 0;
  transform: rotateX(-90deg);
  background:
    linear-gradient(to bottom, #d8ccb7 0 7%, transparent 7% 93%, #d8ccb7 93%),
    repeating-linear-gradient(to bottom, var(--page-lines) 0 1.5px, #d9d0bf 1.5px 2.5px);
}
.hero-floor {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -14px;
  height: 30px;
  background: radial-gradient(closest-side, rgba(60, 48, 30, .30), transparent);
  filter: blur(5px);
  pointer-events: none;
}

.subtitle {
  margin: 1.7em 0 0;
  color: var(--muted);
  font-size: clamp(18px, 1rem + .3vw, 21px);
}
.status { color: var(--green); margin: .9em 0 0; }

/* ---------- 2. Description: two sizes ---------- */

.prose { padding-top: 4svh; }
.prose p {
  width: min(34rem, 100%);
  margin: 0 0 1.1em;
  line-height: 1.6;
  text-align: left;
}
.prose .punch {
  margin: .3em 0 .85em;
  font-size: 1.55em;
  line-height: 1.25;
  color: var(--green);
  text-wrap: balance;
}

/* ---------- 3. A look inside: the stacked page ---------- */

.inside { display: block; padding-top: 2svh; padding-bottom: 4svh; }
.inside:not(.book-mode) :is(.stage, .snaps) { display: none; }
/* While the book shows, the stack stays for screen readers only */
.inside.book-mode .stack {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.stack .cover-page,
.stack .title-page { display: none; }

.stack :is(article, .back-page) {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6svh 0;
}
/* A short rule with a diamond between sections: the line, then the diamond */
.stack :is(article, .back-page) + :is(article, .back-page)::before,
.stack :is(article, .back-page) + :is(article, .back-page)::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
}
.stack :is(article, .back-page) + :is(article, .back-page)::before {
  width: 72px;
  height: 1px;
  transform: translateX(-50%);
  background: rgba(70, 81, 62, .45);
}
.stack :is(article, .back-page) + :is(article, .back-page)::after {
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid rgba(70, 81, 62, .6);
  background: var(--paper);
}
.stack .caption {
  margin: 0 0 4.5svh;
  max-width: 22em;
  font-size: 1.14em;
  line-height: 1.55;
  text-align: left;
}
@media (min-width: 700px) { .stack .caption { font-size: 1.28em; } }
/* Interior art sits flat, like a printed page; only the book floats */
.stack .art {
  width: min(92vw, 520px);
  border: 1px solid rgba(70, 81, 62, .14);
  box-shadow: var(--print-shadow);
}
.stack .review { margin: 4.5svh 0 0; }
.stack .bio-page { max-width: 28em; margin-bottom: 4svh; }
.stack .bio-page h2 { margin: 0 0 1em; color: var(--green); }
.stack .bio-page p { margin: 0; text-align: left; line-height: 1.6; }
.stack .portrait { width: min(80vw, 420px); mix-blend-mode: multiply; }
.stack .back-cover { width: min(88vw, 520px); box-shadow: var(--book-shadow); }
.stack .closing { text-align: center; }

/* Reviews, in both presentations: the two Alderbridge quotes share one size,
   the author's own breaks the pattern */
.review { margin: 0; }
.review blockquote { margin: 0; }
.review blockquote p {
  margin: 0 auto;
  max-width: 18em;
  font-style: italic;
  font-size: clamp(1.25rem, 3.8vw, 1.75rem);
  line-height: 1.28;
  color: var(--green);
}
.review-author blockquote p {
  max-width: 15em;
  font-size: clamp(1.55rem, 5vw, 2.4rem);
  line-height: 1.2;
}
.review figcaption { margin-top: 1.1em; color: var(--muted); text-wrap: balance; }

.closing {
  margin: 1.4em auto 0;
  max-width: 17em;
  font-size: 1.15em;
  line-height: 1.4;
  color: var(--green);
  text-wrap: balance;
}

/* ---------- 3. A look inside: the book (.stage, while .inside.book-mode) ----------
   Geometry: the spine sits at x = 0 of .book. Each leaf is a page hinged at
   the spine: its front face is a right-hand page, its back face becomes a
   left-hand page once the leaf turns. script.js sets, from scroll position:
     on .stage   --cam (view position, in page widths), --turn, --tilt (degrees),
                 --fr / --fl (how much of the page block lies right / left),
                 --sx / --sw (where the shadow under the book sits)
     on a leaf   --a (0 = resting right, 1 = turned left), --z (stacking),
                 --shade (light falloff while turning), --dim (shadow cast on
                 a newly uncovered page)
     on a note   --o (opacity) */

.inside.book-mode {
  position: relative;
  height: calc(var(--steps, 8) * 100svh);
  padding: 0;
}
/* Reading positions: when a scroll ends near one, the page settles on it.
   "proximity" only snaps close by, so it never fights the reader. */
html.book-snap { scroll-snap-type: y proximity; }
.snaps { position: absolute; inset: 0; pointer-events: none; }
.snap { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; }
.stage {
  --w: min(86vw, 50svh);                 /* one page; phones see one page at a time */
  --t: calc(var(--w) * .06);             /* book thickness */
  --lip: calc(var(--w) * .016);          /* how far the boards stand past the pages */
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4svh;
}
@media (min-width: 760px) {
  .stage { --w: min(42vw, 58svh, 560px); }   /* the whole spread fits */
}
.stage .scene {
  position: relative;
  width: 100%;
  height: var(--w);
  perspective: 1800px;
}
.stage .book {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--w);
  height: var(--w);
  transform-style: preserve-3d;
  transform-origin: 0 50%;
  /* Turns happen around the middle of the closed book (--sx), so it stays
     centered at the start and the end. */
  transform:
    translateX(calc((var(--cam, -.5) + var(--sx, .5)) * var(--w)))
    rotateX(calc(var(--tilt, 0) * 1deg))
    rotateY(calc(var(--turn, 0) * 1deg))
    translateX(calc(var(--sx, .5) * var(--w) * -1));
}
.stage .floor {
  position: absolute;
  top: calc(var(--w) - 12px);
  left: calc(50% + (var(--sx, .5) + var(--cam, -.5)) * var(--w));
  width: calc(var(--sw, 1) * var(--w));
  height: 26px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(60, 48, 30, .28), transparent);
  filter: blur(6px);
  pointer-events: none;
}

/* Leaves and their two faces */
.stage .leaf {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: 0 50%;
  transform: translateZ(calc(var(--z, 0) * 1px)) rotateY(calc(var(--a, 0) * -180deg));
  will-change: transform;
}
.stage .face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--page);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  container-type: inline-size;           /* page text sizes follow the page */
  isolation: isolate;
}
.stage .face.back { transform: rotateY(180deg); }
/* The covers are boards: a little larger than the pages at the top, bottom
   and outer edge, with the cover cloth folded over their edges. */
.stage .leaf.board { inset: calc(var(--lip) * -1) calc(var(--lip) * -1) calc(var(--lip) * -1) 0; }
.stage .board .face { background: var(--turn-in); }
/* Shadow down the gutter */
.stage .face::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right, rgba(40, 32, 20, .2), rgba(40, 32, 20, .06) 5%, transparent 13%);
}
.stage .face.back::after {
  background: linear-gradient(to left, rgba(40, 32, 20, .2), rgba(40, 32, 20, .06) 5%, transparent 13%);
}
/* The shadow a turning page casts on the page beneath. It falls at once and,
   when the page has landed, lifts on its own after a short beat. */
.stage .face.front::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: rgb(28, 22, 14);
  opacity: 0;
  transition: opacity .55s ease .15s;
}
.stage .leaf.dimmed .face.front::before { opacity: .5; transition: none; }
/* Light falloff on a leaf while it turns */
.stage .shade {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: rgb(28, 22, 14);
  opacity: var(--shade, 0);
}
.stage .endpaper { position: absolute; inset: 0; background: var(--endpaper); }
.stage .board .endpaper { inset: var(--lip) 0 var(--lip) var(--lip); }
.stage .board .portrait-page { inset: var(--lip) var(--lip) var(--lip) 0; background: var(--page); }

/* The thickness of the book: spine, fore-edges and top edges, drawn behind
   the pages. The page block moves from right to left as the reader goes. */
.stage .edge { position: absolute; left: 0; top: 0; }
.stage .spine {
  width: var(--t);
  height: var(--w);
  transform-origin: 0 50%;
  transform: rotateY(90deg);
  background: var(--spine);
}
.stage :is(.fore-r, .fore-l) {
  height: var(--w);
  transform-origin: 0 50%;
  transform: rotateY(90deg);
  background:
    linear-gradient(to right, #d8ccb7 0 7%, transparent 7% 93%, #d8ccb7 93%),
    repeating-linear-gradient(to right, var(--page-lines) 0 1.5px, #d9d0bf 1.5px 2.5px);
}
.stage .fore-r { left: var(--w); width: calc(var(--t) * var(--fr, 1)); }
.stage .fore-l { left: calc(-1 * var(--w)); width: calc(var(--t) * var(--fl, 0)); }
.stage :is(.top-r, .top-l) {
  width: var(--w);
  transform-origin: 50% 0;
  transform: rotateX(-90deg);
  background:
    linear-gradient(to bottom, #d8ccb7 0 7%, transparent 7% 93%, #d8ccb7 93%),
    repeating-linear-gradient(to bottom, var(--page-lines) 0 1.5px, #d9d0bf 1.5px 2.5px);
}
.stage .top-r { height: calc(var(--t) * var(--fr, 1)); }
.stage .top-l { left: calc(-1 * var(--w)); height: calc(var(--t) * var(--fl, 0)); }

/* What is printed on the pages */
.stage :is(.cover-page, .back-cover, .art, .portrait) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.stage :is(.art-page, .portrait-page, .back-page) { position: absolute; inset: 0; }
.stage .portrait { mix-blend-mode: multiply; }

/* Captions follow the approved print layout (layout/scribus-lulu-test.md):
   22 pt on 29 pt on an 8.5-inch page, a 62% measure 17.6% in from the left,
   slightly above center. On phone-sized pages the type is held at 17 px and
   the measure widened, since true scale would be about 12 px. */
.stage .caption-page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 7cqw;
}
.stage .caption {
  width: 62cqw;
  margin: 0 0 0 17.6cqw;
  font-size: max(17px, 3.6cqw);
  line-height: 1.32;
  color: var(--caption-ink);
  text-align: left;
}
@container (max-width: 440px) {
  .stage .caption { width: 80cqw; margin-left: 10cqw; }
}
.stage .title-page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 10cqw 6cqw;
  text-align: center;
}
.stage .title-page p { margin: 0; }
.stage .title-page-title {
  font-weight: 600;
  font-size: max(26px, 7.4cqw);
  line-height: 1.08;
  color: var(--green);
  text-wrap: balance;
}
.stage .title-page .title-page-subtitle { margin-top: .9em; font-size: max(14px, 3.4cqw); color: var(--muted); }
.stage .title-page .title-page-author { margin-top: 3.2em; font-size: max(13px, 3cqw); }
.stage .bio-page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 12cqw 6cqw;
  text-align: left;
}
.stage .bio-page h2 { margin: 0 0 1.2em; font-size: max(11px, 2.3cqw); color: var(--green); }
.stage .bio-page p { margin: 0; font-size: max(16px, 3.3cqw); line-height: 1.45; }
@container (max-width: 440px) {
  .stage .bio-page { padding: 0 8cqw 2cqw; }
  .stage .bio-page h2 { margin-bottom: .9em; }
  .stage .bio-page p { font-size: 16px; line-height: 1.45; }
}

/* Notes under the book: the reviews, then the closing line */
.stage .notes {
  position: relative;
  width: min(90vw, 38rem);
  height: 10.5rem;
}
.stage .notes > * {
  position: absolute;
  inset: 0;
  margin: 0;
  text-align: center;
  opacity: var(--o, 0);
  transform: translateY(calc((1 - var(--o, 0)) * 8px));
}
.stage .notes .closing { margin: 0 auto; }

/* ---------- 4. 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 ----------
   html.motion (set in the page head) only lets the opening book settle on load.
   Everything that hides content waits for html.motion-ready, set by script.js
   once it is running. */

@keyframes settle {
  from { transform: translateY(14px) scale(.985); }
  to { transform: none; }
}
.motion .hero-scene { animation: settle 1.4s var(--ease) both; }

/* Text appears almost at once; pictures get a short entrance. */
.motion-ready .reveal { opacity: 0; transition: opacity .2s ease-out; }
.motion-ready .reveal.in { opacity: 1; }
.motion-ready :is(.art, .portrait, .back-cover).reveal {
  transform: translateY(16px);
  transition: opacity .3s ease-out, transform .3s var(--ease);
}
.motion-ready :is(.art, .portrait, .back-cover).reveal.in { transform: none; }