/* Type scale: 14 small (nav, fine print, footer), 16 body (cards, FAQ, inputs: 16+ keeps iOS from zooming), 18 section leads.
   Section headlines: 56 (40 on phones), the Silverfish band included.
   BookBrood waitlist site. Built 1:1 from Figma "Website · Home · Desktop 1440 · v2" (node 1040:104594).
   Desktop is drawn at 1440 px wide; between 900 and 1440 px main.js scales the whole page so it stays identical.
   Below 900 px the mobile rules at the end take over. */
/* Fonts served from this site (no Google Fonts request, so a visitor's address goes nowhere else).
   Variable files from the app (bookbrood-app/Bookbrood/Recursos/fontes), SIL Open Font License, see assets/fonts. */
@font-face { font-family: "DM Sans"; src: url("assets/fonts/DMSans-Variable.ttf") format("truetype"); font-weight: 100 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("assets/fonts/Lora-Variable.ttf") format("truetype"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("assets/fonts/Lora-Italic-Variable.ttf") format("truetype"); font-weight: 400 700; font-style: italic; font-display: swap; }

:root {
  --cream: #FFFBF1; --card: #FFF8EC; --white: #FFFFFF; --paper: #F5EBD8; --kraft: #E8DAC0;
  --ink: #161714; --ink-deep: #161714; /* both were warm browns (#2B2019, #16141F) until 13/11/2026 */ --cocoa: #6B645B; /* was #7A6656 */ --line-soft: #D9C6A5;
  --tomato: #EC5528; --tomato-ink: #C54721; --lamp: #FFD166; --lemon: #FFE88D;
  --lilac: #E3D3FF; --peach: #FFE0D1; --mint: #C7E7CF; --locked: #F0E5D1;
  --serif: "Lora", Georgia, serif; --sans: "DM Sans", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 97px; } /* anchors land under the sticky nav, its line over the section line */
/* iOS Safari may enlarge text it finds small; the layout is drawn to exact sizes, so it keeps the sizes we set. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--ink); font: 500 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; }
.pixel { image-rendering: pixelated; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; }

.page { width: 100%; min-width: 0; margin: 0 auto; padding: 5px; display: flex; flex-direction: column; gap: 5px; }
.page > main { display: flex; flex-direction: column; gap: 5px; }
.panel { position: relative; width: 100%; border-radius: 12px; }
.page.is-scaled { width: 1440px; } /* laid out at 1440; main.js scales its blocks down to the window */
.page.is-scaled > * { transform-origin: 0 0; }
html.page-scaled { overflow-x: clip; }
html.page-scaled body { overflow: clip; } /* the 1440 px layout boxes must not widen or lengthen the page */
/* Trial: no side margins and no gaps between sections. Remove the "flush" class on .page in index.html to undo. */
.page.flush, .page.flush > main { padding: 0; gap: 0; }
.page.flush .panel { border-radius: 0; }
/* A 3 px ink line where one section meets the next, the nav and the hero included. */
.page.flush .panel:not(.nav):not(.hero)::after { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--ink); z-index: 5; pointer-events: none; }
/* The nav carries the line under itself, so the line travels with it when it sticks to the top. */
.page.flush .nav::after { content: ""; position: absolute; inset: auto 0 -3px; height: 3px; background: var(--ink); pointer-events: none; }

.i { width: 24px; height: 24px; flex: none; fill: currentColor; shape-rendering: crispEdges; }
.i--tomato { color: var(--tomato); }
.i--cocoa { color: var(--cocoa); }
.eyebrow { font: 700 13px/1.3 var(--sans); letter-spacing: 1.6px; color: var(--tomato-ink); }

/* buttons (Web/Button) */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 22px 0 26px; border-radius: 14px; border: 2px solid var(--ink);
  font: 600 19px/1 var(--serif); text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: 4px 4px 0 var(--ink);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s cubic-bezier(.2,.8,.2,1), background-color .18s; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(4px, 4px); box-shadow: none; }
.btn:focus-visible { outline: 4px solid var(--lamp); outline-offset: 2px; }
.btn--primary { background: var(--tomato); color: var(--card); }
.btn--primary:active { background: var(--tomato-ink); }
.btn--secondary { background: var(--card); color: var(--ink); }
.btn--secondary:hover { background: var(--lamp); }
.btn--secondary:active { background: var(--locked); }
.btn--m { height: 46px; padding: 0 16px 0 20px; gap: 8px; border-radius: 12px; font-size: 15px; }
.btn--ondark { border-color: var(--card); box-shadow: 4px 4px 0 var(--card); }
.btn--ondark:hover { box-shadow: 6px 6px 0 var(--card); }

/* waitlist form (Web/Waitlist form) */
.waitlist { display: flex; gap: 12px; width: 560px; }
.field { flex: 1; display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 18px; border: 2px solid var(--ink); border-radius: 14px; background: var(--cream); cursor: text; }
.field:focus-within { box-shadow: 0 0 0 4px var(--lamp); }
.field input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 500 16px/1.3 var(--sans); color: var(--ink); }
.field input::placeholder { color: var(--cocoa); }
.waitlist--final .field { background: var(--card); }

/* NAV */
.nav { position: sticky; top: 0; z-index: 50; height: 100px; padding: 27px max(120px, calc((100% - 1190px) / 2)); background: var(--cream); display: flex; align-items: center; justify-content: space-between; }
.nav__logo img { width: 174.1px; height: 32.8px; }
.nav__logo .nav__mark { display: none; } /* phones show only the B card (the favicon) instead of the wordmark */
.nav__links { display: flex; align-items: center; gap: 36px; font: 600 14px/1.3 var(--sans); }
.nav__links > a:not(.btn) { text-decoration: none; }
.nav__links > a:not(.btn):hover { text-decoration: underline; text-underline-offset: 4px; }
/* Language: a plain button in the nav's own colour (no shadow), the flag and code of the language on screen. i18n.js */
.lang { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px 0 12px; border: 2px solid var(--ink); border-radius: 12px;
  background: var(--cream); color: var(--ink); font: 600 14px/1 var(--sans); letter-spacing: .02em; cursor: pointer; }
.lang:hover { background: var(--card); }
.lang:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lang .flag { width: 22px; height: 15px; shape-rendering: crispEdges; }
.nav__links .lang { margin-right: -16px; } /* sits closer to the waitlist button than the text links do */
html[data-lang="pt"] .pile__line { width: min(362px, 100%); height: auto; } /* the Portuguese line is 22 px wider */
@media (min-width: 900px) {
  html[data-lang="pt"] .pile__line { left: 414px; } /* desktop: still centred over her */
}

/* HERO */
.hero { min-height: 743.2px; padding: 64px max(120px, calc((100% - 1190px) / 2)) 88px; background: var(--cream); display: flex; align-items: center; justify-content: space-between; }
.hero__copy { width: 560px; display: flex; flex-direction: column; gap: 26px; }
.pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border: 2px solid var(--ink); border-radius: 999px; background: var(--cream);
  font: 700 13px/1.3 var(--sans); letter-spacing: 1.4px; }
h1 { font-size: 80px; line-height: 1; letter-spacing: -2.5px; }
.hero__lead { font: 500 18px/1.5 var(--sans); }
.hero__notes { display: flex; flex-direction: column; gap: 11px; }
.fine { display: flex; align-items: center; gap: 8px; font: 600 14px/1.3 var(--sans); color: var(--cocoa); }
.proof { display: flex; align-items: center; gap: 12px; padding-top: 10px; font: 600 14px/1.4 var(--sans); color: var(--cocoa); }
.proof strong { font: 700 28px/1 var(--serif); letter-spacing: -.5px; color: var(--ink); }
.proof a { color: var(--ink); text-decoration: underline; }
.hero__art { position: relative; width: 505.1px; height: 589.2px; flex: none; }
.hero__phone { position: absolute; left: 188.9px; top: -.8px; width: 302.9px; height: 594.7px; }
.hero__cat { position: absolute; left: 34px; top: 397px; width: 192px; height: 192px; } /* 64×64 drawing at 3x, from brood/art/figma-2026-11-06/sampled.json, outline #161714 (was #1C1018) */
.review { position: absolute; display: flex; gap: 14px; align-items: center; padding: 14px 20px 16px 14px; background: var(--cream);
  border: 1.9px solid var(--ink); border-radius: 13.1px; box-shadow: 3px 3px 0 var(--ink-deep); }
.review--pp { left: .9px; top: 33.35px; width: 273.4px; height: 131.7px; transform: rotate(-2.2deg); }
.review--moby { left: -20.2px; top: 249.25px; width: 277.8px; height: 114.7px; transform: rotate(6.5deg); box-shadow: 2.8px 2.8px 0 var(--ink-deep); }
.review > div { width: 196px; display: flex; flex-direction: column; gap: 6px; }
.review h3 { font: 600 14.1px/1.2 var(--serif); }
.review p { font: italic 400 13.1px/1.3 var(--serif); }
/* Portuguese: the Pride and Prejudice line needs 20 px more to stay on three lines ("provavelmente." not alone);
   the card grows to the left, its edge in line with the Moby-Dick card under it */
html[data-lang="pt"] .review--pp { left: -19.1px; width: 293.4px; }
html[data-lang="pt"] .review--pp > div { width: 216px; }
.avatar { flex: none; width: 56px; height: 56px; border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; background-repeat: no-repeat; background-size: 128px 122px; image-rendering: pixelated; }
.avatar--silverfish { background-color: var(--lilac); background-image: url(assets/img/silverfish-adult-1x.png?v=2); background-position: -51px -31px; }
.avatar--cat { background-color: var(--peach); background-image: url(assets/img/cat-adult-1x.png?v=2); background-position: -47px -6px; }
.stars { display: flex; gap: 1px; height: 18px; }
.star { position: relative; width: 18px; height: 18px; }
.star svg { position: absolute; inset: 0; width: 18px; height: 18px; }
.star .f { color: var(--lemon); }
.star .o { color: var(--ink); }
.star.empty .o { color: var(--cocoa); }

/* THE PILE */
.pile { height: 963px; background: var(--white); overflow: hidden; }
.pile__copy { position: absolute; left: calc(50% - 346px); top: 68.8px; width: 692px; text-align: center; }
.pile__copy h2 { margin-top: 12px; font-size: 56px; line-height: 1.05; letter-spacing: -1.8px; }
.pile__lead { margin-top: 22px; font: 500 18px/1.55 var(--sans); color: var(--cocoa); }
.pile__scene { position: absolute; left: calc(50% - 600px); top: 368.8px; width: 1200px; height: 620px; }
.pile__books { position: absolute; left: 408px; top: 332px; width: 384px; height: 288px; }
.pile__her { position: absolute; left: 490px; top: 114px; width: 190px; height: 260px; } /* 38×52 drawing at 5x, from brood/art/figma-2026-11-06/sampled.json, outline #161714 (was #1C1018, the warm near-black of her app sprite) */
.pile__line { position: absolute; left: 425px; top: 23px; width: 340px; height: 68px; } /* her line is the bubble exported from Figma (Her line, 1139:14235): body, shadow, tail and text in one SVG */
.unfinished { position: absolute; height: 111px; display: flex; align-items: center; gap: 14px; padding: 14px 18px 16px 14px; background: var(--white);
  border: 2px solid var(--ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--ink-deep); }
.unfinished i { flex: none; width: 50.2px; height: 72.8px; border: 2.5px solid var(--ink); border-radius: 5px; background: var(--c); }
.unfinished > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.unfinished b { font: 600 16px/1.2 var(--serif); }
.unfinished small { font: 600 12px/1.3 var(--sans); color: var(--cocoa); }
.unfinished small.meta { font-weight: 500; }
.bar { display: block; width: 100%; height: 8px; border: 1.5px solid var(--ink); border-radius: 4px; background: var(--kraft); overflow: hidden; }
.bar em { display: block; min-width: 4px; height: 100%; background: var(--tomato); } /* width = pages read / pages, set inline */
/* one card size for all four (the longest title, Grande Sertão: Veredas, on one line); left cards keep their right edge */
.u-middlemarch { left: 120.9px; top: 161.1px; width: 284px; transform: rotate(5deg); }
.u-anna { left: 69.7px; top: 381.5px; width: 284px; transform: rotate(-4deg); }
.u-moby { left: 824.3px; top: 107.8px; width: 284px; transform: rotate(-5deg); }
.u-sertao { left: 826.5px; top: 344.4px; width: 284px; transform: rotate(4deg); }
/* Floating cards (hero reviews, unfinished books, traits). Each sits in a .float wrapper that covers its parent and
   does the drifting; the card inside keeps its tilt. An animated transform turns its element into a GPU layer, and a
   tilted layer is a flat picture of the text turned afterwards, which blurs it. With the tilt inside the wrapper, the
   text is drawn already tilted and the layer only slides. Each card has its own beat. */
.float { position: absolute; inset: 0; pointer-events: none; animation: drift 5.8s ease-in-out infinite; }
.float > * { pointer-events: auto; }
.float:has(> .review--moby) { animation-duration: 6.6s; animation-delay: -3s; }
.float:has(> .unfinished) { animation-duration: 5.6s; }
.float:has(> .u-anna) { animation-duration: 6.4s; animation-delay: -2.2s; }
.float:has(> .u-moby) { animation-duration: 6s; animation-delay: -4.1s; }
.float:has(> .u-sertao) { animation-duration: 5.2s; animation-delay: -1.3s; }
.float:has(> .trait) { animation-name: bob; animation-duration: 4.8s; }
.float:has(> .t-romantic) { animation-duration: 5.4s; animation-delay: -1.6s; }
.float:has(> .t-highbrow) { animation-duration: 5.1s; animation-delay: -3.3s; }
.float:has(> .t-family) { animation-duration: 6.2s; animation-delay: -2.4s; }
@keyframes drift { 50% { translate: 0 -7px; } }

/* SHE READS WITH YOU */
.reads { padding: 112px max(120px, calc((100% - 1190px) / 2)) 104px; background: var(--cream); display: flex; flex-direction: column; align-items: center; gap: 48px; }
.reads__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.reads__head h2 { font-size: 56px; line-height: 1.05; letter-spacing: -1.8px; }
.reads__lead { width: 640px; font: 500 18px/1.5 var(--sans); color: var(--cocoa); }
.stack { width: 1200px; height: 789px; display: flex; flex-direction: column; align-items: center; gap: 56px; padding-top: 40px; }
.stack__phones { position: relative; width: 309px; height: 662px; }
.stack__phone { position: absolute; inset: 0; width: 309px; height: 662px; transform-origin: 50% 50%;
  transition: transform .55s cubic-bezier(.15,.45,.2,1), opacity .55s cubic-bezier(.15,.45,.2,1); }
.stack__phone.slot-0 { z-index: 3; transform: none; opacity: 1; }
.stack__phone.slot-1 { z-index: 2; transform: translate(22px, -4px) rotate(7deg) scale(.96); opacity: .92; }
.stack__phone.slot-2 { z-index: 1; transform: translate(-22px, -6px) rotate(-9deg) scale(.92); opacity: .85; }
.stack__phone.leaving { z-index: 4; transform: translate(330px, 14px) rotate(8deg); opacity: 1; transition-duration: .32s; transition-timing-function: cubic-bezier(.45,0,.85,.55); }
.stack__phone.leaving-left { z-index: 4; transform: translate(-330px, 14px) rotate(-8deg); opacity: 1; transition-duration: .32s; transition-timing-function: cubic-bezier(.45,0,.85,.55); }
.stack__phones { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; } /* drag a phone sideways to change the book */
.stack__phones.dragging { cursor: grabbing; }
/* The screenshots are her room without her (home-*-room.png); she stands on each phone as her own drawing, the
   nymph's frames from art-drafts/aseprite/traca.aseprite (assets/img/phone-her), so the front one can blink,
   twitch an antenna and be petted. */
.stack__room { display: block; width: 100%; height: 100%; }
.stack__her { position: absolute; left: 119px; top: 278px; width: 66px; height: 84px; cursor: pointer; image-rendering: auto; } /* 2x file shown at 1x or smaller: smooth scaling keeps every pixel, "pixelated" drops some */
.bubble--pop { position: absolute; z-index: 5; left: 50%; top: 186px; transform: translateX(-50%); width: max-content; max-width: 386px; padding: 14px 20px;
  background: var(--card); border: 2px solid var(--ink); border-radius: 16px; box-shadow: 3px 3px 0 var(--ink); font: 400 19px/1.35 var(--serif);
  transition: opacity .2s ease, transform .3s cubic-bezier(.2,.9,.3,1.3); }
.bubble--pop::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 14px; height: 14px; background: var(--card); border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateX(-50%) rotate(45deg); }
.bubble--pop.out { opacity: 0; transform: translate(calc(-50% + 40px), 6px); }
.bubble--pop.in { opacity: 0; transform: translateX(-50%) scale(.92); }
.changes { position: relative; width: 872px; padding: 36px 32px; background: var(--card); border: 2px solid var(--ink); border-radius: 20px; text-align: center; }
.changes h3 { font-size: 28px; line-height: 1.15; letter-spacing: -.6px; }
.changes p { margin-top: 6px; font: 500 16px/1.5 var(--sans); color: var(--cocoa); }
.trait { position: absolute; height: 42.7px; display: flex; align-items: center; justify-content: center; padding: 7.2px 14.4px; border: 2.2px solid var(--ink); border-radius: 8.6px;
  font: 600 18.72px/1.3 var(--sans); white-space: nowrap; }
.t-romantic { left: 799.65px; top: -23.35px; width: 119.1px; background: var(--peach); transform: rotate(-5deg); }
.t-highbrow { left: -56.55px; top: 128.15px; width: 119.1px; background: var(--card); transform: rotate(6deg); }
.t-jumpy { left: 52.45px; top: -31.75px; width: 94.1px; background: var(--lamp); transform: rotate(-4deg); }
.t-family { left: 677.75px; top: 131.15px; width: 227.1px; background: var(--mint); transform: rotate(4deg); }
html[data-lang="pt"] .trait { width: auto !important; white-space: nowrap; } /* the Portuguese words have their own lengths */
/* The traits bob like the drifting cards, a little smaller (timings are with .float). No tilt in the bob: an
   animated rotation would blur the text again. */
@keyframes bob { 50% { translate: 0 -5px; } }
.steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 40px; }
.steps li { display: flex; align-items: center; gap: 12px; }
.tile { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid var(--ink); border-radius: 12px; background: var(--card); }
.tile--lamp { background: var(--lamp); }
.steps b { display: block; font: 700 18px/1.2 var(--serif); }
.steps small { display: block; font: 500 14px/1.3 var(--sans); color: var(--cocoa); }

/* THE BROOD */
.brood { padding: 112px max(120px, calc((100% - 1190px) / 2)); background: var(--white); }
.brood h2 { margin-top: 14px; font-size: 56px; line-height: 1.1; letter-spacing: -1.8px; }
.brood__lead { width: 720px; margin-top: 14px; font: 500 18px/1.5 var(--sans); color: var(--cocoa); }
.creatures { margin-top: 48px; display: flex; gap: 24px; }
.creature { width: 380.7px; height: 623px; display: flex; flex-direction: column; background: var(--white); border: 2px solid var(--ink); border-radius: 18px; box-shadow: 4px 4px 0 var(--ink-deep); overflow: hidden; }
.creature__art { flex: none; box-sizing: content-box; width: 376.7px; height: 300px; border-bottom: 2px solid var(--ink); }
.creature__text { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 23px; padding: 26px 28px 30px; }
/* The quote or the button sits on the card's bottom line, so the three cards end level (as in Figma). */
.creature__text > :last-child { margin-top: auto; }
.dots { display: none; }
.creature h3 { font: 700 26px/1.15 var(--serif); }
.creature p { font: 500 16px/1.5 var(--sans); color: var(--cocoa); }
.creature .btn--secondary { background: var(--white); }               /* white like the card base; */
.creature .btn--secondary:hover { background: var(--lamp); }          /* yellow only on hover */
.creature .btn--secondary:active { background: var(--locked); }
.says { width: 100%; display: flex; flex-direction: column; gap: 4px; padding: 12px 16px 14px; border: 1.5px solid var(--ink); border-radius: 12px 12px 12px 5px; }
.says--lilac { background: var(--lilac); }
.says--peach { background: var(--peach); }
.says small { font: 700 11px/1.3 var(--sans); letter-spacing: 1.2px; color: var(--cocoa); }
.says q { quotes: none; font: italic 500 16px/1.35 var(--serif); }

/* SILVERFISH */
.silverfish { height: 678.2px; padding: 96px max(120px, calc((100% - 1190px) / 2)); background: var(--cream); display: flex; align-items: center; }
.silverfish__copy { width: 607px; display: flex; flex-direction: column; gap: 41px; }
.silverfish h2 { font-size: 56px; line-height: 1.1; letter-spacing: -1.8px; }
.silverfish__copy p { font: 500 18px/1.5 var(--sans); }
.row { display: flex; align-items: center; gap: 22px; }
.oss { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1.3 var(--sans); }
.ereader { position: absolute; left: calc(50% + 202.2px); top: 104.1px; width: 344px; height: 468px; padding: 22px 22px 46px; background: var(--ink); border-radius: 28px; transform: rotate(2.8deg); }
.ereader__screen { position: relative; width: 300px; height: 400px; background: #ECEBE6; border: 1px solid var(--ink); border-radius: 4px; }
.ereader__screen .pixel { position: absolute; left: 22px; top: 128px; width: 256px; height: 244px; } /* silverfish-eink-1x.png: greys made ahead, outline kept #161714 */
.psst { position: absolute; left: 25px; top: 28px; width: 250px; height: 71px; z-index: 2; transform: rotate(-2.757deg); } /* inside the e-reader screen; psst.svg is drawn tilted 2.757°, undone here so it lines up with the device */

/* FAQ */
.faq { padding: 112px max(120px, calc((100% - 1190px) / 2)); background: var(--white); display: flex; gap: 40px; }
.faq__left { width: 440px; flex: none; align-self: flex-start; display: flex; flex-direction: column; gap: 56px; } /* fixed gap, not stretched: opening answers doesn't move the cat */
.faq__left h2 { margin-top: 14px; font-size: 56px; line-height: 1.05; letter-spacing: -1.8px; }
.faq__ask { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.faq__ask img { width: 174px; height: 165.8px; margin-bottom: 12px; }
.faq__ask h3 { font-size: 24px; line-height: 1.2; letter-spacing: -.4px; }
.faq__ask p { font: 500 16px/1.5 var(--sans); color: var(--cocoa); }
.faq__ask .btn { margin-top: 22px; }
.accordion { width: 710px; display: flex; flex-direction: column; gap: 10px; }
.accordion details { padding: 14px 20px 14px 14px; background: #FAF3E6; border: 1.5px solid var(--cream); /* closed: light paper, border in the cream so it barely shows (Figma v3) */ border-radius: 14px; transition: background-color .24s cubic-bezier(.4,0,.2,1), border-color .24s cubic-bezier(.4,0,.2,1); }
.accordion details[open]:not(.closing) { padding: 14px 20px 18px 14px; background: var(--cream); border: 2px solid var(--ink); }
.accordion summary { list-style: none; display: flex; align-items: center; gap: 18px; cursor: pointer; }
.accordion summary::-webkit-details-marker { display: none; }
.qtile { flex: none; display: grid; place-items: center; width: 40px; height: 40px; background: var(--cream); border: 1.5px solid var(--ink); border-radius: 10px; transition: background-color .24s cubic-bezier(.4,0,.2,1); }
details[open]:not(.closing) .qtile { background: var(--lemon); border-width: 2px; }
.q { flex: 1; font: 600 19px/1.25 var(--serif); }
.tog { flex: none; width: 24px; height: 24px; background: no-repeat center / 24px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' shape-rendering='crispEdges'%3E%3Cpath fill='%23161714' d='M13 11h7v2h-7v7h-2v-7H4v-2h7V4h2v7z'/%3E%3C/svg%3E"); }
details[open]:not(.closing) .tog { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' shape-rendering='crispEdges'%3E%3Cpath fill='%23161714' d='M4 11h16v2H4z'/%3E%3C/svg%3E"); }
.accordion details p { margin-top: 10px; padding: 0 40px 0 58px; font: 500 16px/1.55 var(--sans); color: var(--cocoa); }

/* FINAL CALL */
.final { padding: 88px 120px 112px; background: var(--lamp); display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.final__egg { width: 360px; height: 326.5px; margin: -125.5px 0 0; } /* the 2x render has 35.5 px more air on top */
.final__text { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.final h2 { font-size: 56px; line-height: 1.08; letter-spacing: -1.8px; }
.final__text p { font: 500 18px/1.5 var(--sans); }
.final__fine { font: 600 14px/1.3 var(--sans); }

/* FOOTER */
.footer { height: 112px; padding: 36px max(120px, calc((100% - 1190px) / 2)); background: var(--ink); display: flex; align-items: center; justify-content: space-between; color: var(--line-soft); }
.footer__brand { display: flex; align-items: center; gap: 20px; }
.footer__brand img { width: 132px; height: 24.9px; } /* the header wordmark; its ink outline melts into the band, so it reads as the white word */
.footer__brand small { font: 500 14px/1.3 var(--sans); }
.footer__links { display: flex; align-items: center; gap: 28px; font: 600 14px/1.3 var(--sans); }
.footer__links a { text-decoration: none; }
.socials { display: flex; gap: 10px; }
.socials a { display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--cocoa); border-radius: 10px; color: var(--card); }
.socials a:hover { border-color: var(--lamp); color: var(--lamp); }

/* after joining */
.joined { width: 560px; display: flex; flex-direction: column; gap: 22px; padding: 28px; text-align: left; background: var(--card); border: 2px solid var(--ink); border-radius: 20px; }
.joined__top { display: flex; align-items: center; gap: 16px; }
.joined h3 { font-size: 24px; letter-spacing: -.4px; }
.joined__top p { color: var(--cocoa); font-size: 15px; }
.joined fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.joined legend { width: 100%; margin-bottom: 10px; font: 700 12px/1.3 var(--sans); letter-spacing: 1.4px; color: var(--cocoa); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 12px; border: 1.5px solid var(--line-soft); border-radius: 12px; background: var(--card); cursor: pointer; font: 600 15px/1 var(--sans); }
.choice input:checked + span { background: var(--lamp); border: 2px solid var(--ink); }
.joined .btn { align-self: flex-start; }

/* MOBILE (below 900 px): the same content, stacked */
@media (max-width: 899px) {
  .page { width: 100%; }
  .panel { width: 100%; height: auto !important; }
  .nav { height: auto; padding: 16px 20px 22px; }
  .nav__links > a:not(.btn) { display: none; }
  .nav__links { gap: 10px; } .nav__links .lang { margin-right: 0; }
  .nav__logo img { width: 132px; height: auto; }
  .nav__logo .nav__word { display: none; }
  .nav__logo .nav__mark { display: block; width: 46px; height: 46px; border: 2px solid var(--ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink-deep); }
  .hero, .reads, .brood, .silverfish, .faq, .final { padding: 64px 20px; }
  .hero { flex-direction: column; gap: 32px; }
  .hero__copy, .waitlist, .joined { width: 100%; }
  h1 { font-size: 52px; letter-spacing: -1.6px; }
  html[data-lang="pt"] h1 { font-size: 50px; letter-spacing: -1.5px; } /* "Crie um amigo." is a touch wider than "Hatch a friend." */
  .waitlist { flex-direction: column; }
  .waitlist .field { flex: none; }
  .waitlist .btn { justify-content: center; }
  .proof br { display: none; }
  .hero__art { width: 330px; height: 560px; margin: 0 auto; }
  .review { display: none; }
  .hero__phone { left: 40px; top: 0; width: 260px; height: auto; }
  .hero__cat { left: 54px; top: 380px; width: 168px; height: 168px; } /* curled up against the phone's foot */
  .pile { padding: 64px 20px 0; overflow: hidden; } /* phones: the pile rises from the bottom line, its last books cut off */
  .pile__copy, .pile__scene { position: relative; left: auto; top: auto; width: 100%; }
  .pile__copy h2 { font-size: 40px; }
  .pile__scene { height: auto; margin-top: 50px; margin-bottom: -30px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
  .pile__line, .pile__her, .pile__books { position: relative; left: auto; top: auto; }
  .pile__line { order: 1; }
  .pile__her { order: 2; width: 152px; height: 208px; margin-bottom: -52px; } /* she stands on the pile, as in Figma Mobile 390 */
  .pile__books { order: 3; width: 288px; height: 216px; }
  /* On phones the books stack in a column and are not tilted: the wrapper steps aside and they drift themselves. */
  .pile .float { display: contents; }
  .unfinished { animation: drift 5.6s ease-in-out infinite; }
  .u-anna { animation-duration: 6.4s; animation-delay: -2.2s; }
  .unfinished { position: relative; left: auto !important; top: auto !important; transform: none !important; order: 4; width: 100% !important; max-width: 320px; }
  .pile .unfinished { display: none; } /* phones: just her on the pile */
  .reads__head h2, .brood h2, .final h2 { font-size: 40px; }
  /* phones: section headlines and the 'it changes' title without tight tracking (Figma Mobile 390); the hero h1 keeps -1.6 */
  .pile__copy h2, .reads__head h2, .brood h2, .silverfish h2, .faq__left h2, .final h2, .changes h3 { letter-spacing: -0.02em; } /* a touch tighter: -0.8px on 40px */
  .wide-only { display: none; } /* e.g. "today" in the Silverfish headline: two lines on phones */
  .reads__lead, .brood__lead { width: 100%; }
  .stack { width: 100%; height: auto; padding-top: 0; margin-top: 34px; gap: 68px; }
  .reads { padding-bottom: 78px; }
  .stack__phones { transform: scale(.88); transform-origin: top center; margin-bottom: -70px; }
  .bubble--pop { max-width: 86vw; font-size: 17px; }
  .changes { width: 100%; padding: 36px 32px; margin-top: 56px; }
  .t-romantic { left: 218.6px; right: auto; top: -41.7px; }
  .t-highbrow { left: -3.3px; top: 223px; bottom: auto; transform: rotate(-17deg); } /* clear of the text, on the card's bottom edge */
  .t-jumpy { left: 12.4px; top: -33.9px; }
  .t-family { left: 128.2px; right: auto; top: 225.7px; bottom: auto; width: 227.1px; }
  .steps { flex-direction: column; gap: 16px; align-self: flex-start; }
  /* phones: the brood is a swipe carousel, one card at a time with the next one peeking in */
  .creatures { margin: 40px -20px 0; padding: 0 20px 10px; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px;
    overscroll-behavior-x: contain; scrollbar-width: none; align-items: stretch; }
  .creatures::-webkit-scrollbar { display: none; }
  .creature { flex: 0 0 min(300px, calc(100vw - 72px)); width: auto; max-width: none; height: auto; scroll-snap-align: start; }
  .dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
  .dots i { width: 8px; height: 8px; border: 1.5px solid var(--ink); border-radius: 50%; background: transparent; transition: background-color .2s, width .2s; }
  .dots i.on { width: 22px; border-radius: 6px; background: var(--ink); }
  .creature__art { width: 100%; height: auto; }
  /* phones: headline, copy, the Kindle, then the button (the picture shows what the button gets you) */
  .silverfish { flex-direction: column; gap: 32px; }
  .silverfish__copy { display: contents; }
  .silverfish h2, .silverfish__copy p, .silverfish .row { align-self: stretch; }
  .silverfish h2 { order: 1; } .silverfish__copy p { order: 2; } .silverfish .ereader { order: 3; margin-block: 8px 12px; } .silverfish .row { order: 4; }
  .proof--hero { display: none; } /* no download count on phones */
  .silverfish h2 { font-size: 40px; }
  .row { flex-wrap: wrap; }
  .ereader { position: relative; left: auto; top: auto; }
  .ereader { zoom: .85; }
  .faq { flex-direction: column; gap: 40px; }
  .faq__left { display: contents; } /* phones: title, the questions, then the Discord block */
  .faq__left > div:first-child { order: 1; } .accordion { order: 2; } .faq__ask { order: 3; margin-top: 8px; align-items: center; text-align: center; } /* the closing Discord block, centred */
  .faq__left h2 { margin-top: 0; font-size: 40px; }
  .accordion { width: 100%; }
  .accordion details p { padding: 0 0 0 58px; }
  .final__egg { width: 280px; height: auto; margin: -130px 0 -23px; pointer-events: none; } /* the drawn egg sits 79-165 px into the section; title 20 px under it */
  .footer { flex-direction: column; justify-content: center; gap: 20px; padding: 32px 20px; }
  .footer__links { flex-wrap: wrap; justify-content: center; }
}
/* Tablets (600-899, e.g. an iPad held upright): the phone layout in one centred column of at most 600 px,
   headlines a step bigger (48, hero 64) and centred. The brood carousel still runs edge to edge. Figma: Tablet 768. */
@media (min-width: 600px) and (max-width: 899px) {
  .nav { padding: 20px 40px 24px; }
  .hero, .reads, .brood, .silverfish, .faq, .final { padding: 88px max(40px, calc((100% - 600px) / 2)); }
  .pile { padding: 88px max(40px, calc((100% - 600px) / 2)) 0; }
  .reads { padding-bottom: 96px; }
  h1, html[data-lang="pt"] h1 { font-size: 64px; letter-spacing: -2px; }
  .pile__copy h2, .reads__head h2, .brood h2, .silverfish h2, .faq__left h2, .final h2 { font-size: 48px; }
  .hero { gap: 48px; }
  .hero__copy { align-items: center; text-align: center; }
  .waitlist { flex-direction: row; }
  .waitlist .field { flex: 1; }
  .hero__notes { align-items: center; }
  .hero__art { transform: scale(1.1); transform-origin: top center; margin-bottom: 56px; }
  .bubble--pop { max-width: 386px; } /* the desktop width: two lines, not one line wider than the phone */
  .brood { text-align: center; }
  .brood__lead { max-width: 520px; margin-inline: auto; }
  h1, h2 { text-wrap: balance; } /* no lone word on the last line ("time.") */
  .hero__lead, .pile__lead, .reads__lead, .brood__lead, .silverfish__copy p, .final__text p { text-wrap: balance; } /* centred leads: even lines */
  /* the card is 600 wide here: the traits sit on its corners, as on desktop */
  .changes { padding: 44px 40px 48px; }
  .t-jumpy { left: 28px; top: -22px; }
  .t-romantic { left: auto; right: 36px; top: -20px; }
  .t-highbrow { left: -24px; top: auto; bottom: -22px; }
  .t-family { left: auto; right: -26px; top: auto; bottom: -20px; width: auto; }
  /* the carousel bleeds to the screen edges but its first card lines up with the column */
  .creatures { --gutter: max(40px, calc((100vw - 600px) / 2)); margin: 48px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 10px;
    scroll-padding-inline: var(--gutter); text-align: left; }
  .silverfish { align-items: center; text-align: center; }
  .silverfish .row { justify-content: center; }
  .silverfish .ereader { zoom: 1; }
  .faq__left > div:first-child { text-align: center; }
  .final__egg { width: 340px; margin: -158px 0 -28px; } /* the phone egg x 1.21, same overlap with the line */
  .footer { padding: 40px; }
}

/* Tablets from 740 px (iPad mini and up): the four unfinished books come back around her, two on each side, as on
   desktop (smaller, same tilts), placed from the centre of the pile. Narrower, they would touch the screen edge.
   main.js gaze() uses the same 740 px for her glances at them. */
@media (min-width: 740px) and (max-width: 899px) {
  .pile .float { display: block; }
  .pile .unfinished { display: flex; animation: none; height: 126px; max-width: none; gap: 12px; padding: 12px 14px 14px 12px; } /* one size: room for Grande Sertão: Veredas on two lines */
  .pile .unfinished i { width: 40px; height: 58px; }
  .pile .u-middlemarch { left: calc(50% - 344px) !important; top: 96px !important; width: 226px !important; transform: rotate(5deg) !important; }
  .pile .u-anna { left: calc(50% - 354px) !important; top: 268px !important; width: 226px !important; transform: rotate(-4deg) !important; }
  .pile .u-moby { left: calc(50% + 114px) !important; top: 72px !important; width: 226px !important; transform: rotate(-5deg) !important; }
  .pile .u-sertao { left: calc(50% + 116px) !important; top: 252px !important; width: 226px !important; transform: rotate(4deg) !important; }
}

/* Trial (13/11/2026): "She reads with you" in two columns. Text and the traits card on the left,
   the phone stack on the right. Delete this block to go back to the single centred column. */
@media (min-width: 900px) {
  .reads { display: grid; grid-template-columns: 540px 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "head stack" "changes stack";
    column-gap: 60px; row-gap: 56px; align-items: center; padding-block: 104px 96px; overflow-x: clip; }
  .reads__head { grid-area: head; align-self: end; align-items: flex-start; text-align: left; }
  .reads__lead { width: 100%; }
  .stack { grid-area: stack; width: 100%; height: auto; gap: 44px; padding-top: 0; }
  .stack__phone.leaving { transform: translate(260px, 14px) rotate(8deg); }
  .stack__phone.leaving-left { transform: translate(-260px, 14px) rotate(-8deg); }
  .changes { grid-area: changes; align-self: start; width: 100%; padding: 40px 32px 44px; text-align: left; }
  .changes h3 { text-wrap: balance; } /* narrow desktops (an iPad on its side): no lone "read" on the second line */
  .t-jumpy { left: 28px; top: -22px; }
  .t-romantic { left: auto; right: 36px; top: -20px; }
  .t-highbrow { left: -28px; top: auto; bottom: -22px; }
  .t-family { left: auto; right: -30px; top: auto; bottom: -20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .stack__phone, .bubble--pop { transition: none !important; }
  .float, .unfinished { animation: none; }
}

/* Privacy page (privacy.html): full width from the logo; each language has its own article, shown by the language in use */
html[data-lang="pt"] [data-only="en"], html:not([data-lang="pt"]) [data-only="pt"] { display: none; }
.legal { background: var(--cream); padding: 96px max(120px, calc((100% - 1190px) / 2)) 120px; } /* left edge = the logo's */
.legal__date { font: 600 14px/1.3 var(--sans); color: var(--cocoa); }
.legal h1 { margin-top: 14px; font-size: 56px; line-height: 1.05; letter-spacing: -1.8px; }
.legal__lead { font: 500 18px/1.6 var(--sans); color: var(--ink); }
/* desktop: two columns, the topic (icon and title) on the left, its text on the right; a kraft rule between topics */
.legal__intro, .legal__topic { display: grid; grid-template-columns: 380px minmax(0, 1fr); column-gap: 64px; }
.legal__intro { align-items: end; }
.legal__topic { margin-top: 44px; padding-top: 44px; border-top: 1.5px solid var(--kraft); }
.legal h2 { margin: 0; align-self: start; font: 700 24px/1.25 var(--serif); display: flex; align-items: center; gap: 14px; }
.legal__text { padding-top: 7px; } /* first line level with the title */
.legal__text p, .legal__text li { font: 500 16px/1.65 var(--sans); color: var(--cocoa); }
.legal__text > * + * { margin-top: 12px; }
.legal ul { margin: 0; padding-left: 22px; }
.legal li + li { margin-top: 8px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--ink); text-underline-offset: 3px; }
.fine a, .final__fine a { color: inherit; text-underline-offset: 3px; }
/* waitlist: the bot trap is off screen (people never see or reach it); a failed request shows a line under the form */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.waitlist[aria-busy="true"] .btn { opacity: .7; cursor: progress; }
.form-error { margin-top: 10px; font: 600 14px/1.4 var(--sans); color: var(--tomato-ink); }
.fine span, .final__fine { text-wrap: balance; } /* when the note wraps (Portuguese), no lone "Privacidade" */
@media (max-width: 899px) {
  .legal { padding: 64px 20px 88px; }
  html .legal h1 { font-size: 40px; letter-spacing: -0.02em; } /* beats the Portuguese hero h1 sizes */
  .legal__intro, .legal__topic { display: block; }
  .legal__lead { margin-top: 24px; }
  .legal__topic { margin-top: 36px; padding-top: 32px; }
  .legal h2 { font-size: 22px; }
  .legal__text { padding-top: 14px; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .legal { padding-inline: 40px; } /* tablets: the nav's 40 px */
}

/* Lora Bold sets the r and y of "Every" a touch too close at headline size */
.kern-y { margin-left: 0.03em; }