@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/newsreader-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/newsreader-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/space-mono-latin-400-normal.woff2") format("woff2"); }

:root {
  --page: #191818;
  --cream: #efe4da;
  --cream-soft: #f7f2ed;
  --muted: #b3aaa2;
  --field: #2b2a2a;
  --field-line: #383836;
  --action: #657788;
  --action-hover: #77889a;
  --error: #f0a8a8;
  --serif: "Newsreader", ui-serif, Georgia, serif;
  --sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background: var(--page);
  color: var(--cream-soft);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

header { padding: 22px 24px 0; text-align: center; }
h1 { margin: 0; line-height: 0; }
h1 img { display: inline-block; width: 112px; height: auto; }

main {
  flex: 1;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 28px 24px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.headline {
  margin: 0 0 22px;
  color: var(--cream);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.1;
  text-wrap: balance;
}

.about, .cta {
  margin: 0;
  padding: 0 24px; /* narrower text column on phones */
  font-size: 13px;
  line-height: 1.5;
  text-wrap: pretty;
}
.cta { margin-top: 18px; }

form { margin: 28px auto 0; width: calc(100% - 48px); max-width: 384px; }

.row { display: flex; }
.field { flex: 1; min-width: 0; height: 40px; }

input[type="email"] {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-bottom: 1px solid var(--field-line);
  border-radius: 0;
  background: var(--field);
  color: var(--cream-soft);
  font-family: var(--mono);
  font-size: 12px;
  text-align: left;
  outline: none;
}
input[type="email"]::placeholder { color: var(--cream-soft); opacity: 1; text-transform: uppercase; }
input[type="email"]:focus-visible { box-shadow: inset 0 -2px 0 var(--cream); }
input[aria-invalid="true"] { box-shadow: inset 0 -2px 0 var(--error); }

button {
  flex: none;
  width: 112px;
  height: 40px;
  border: 0;
  border-radius: 0;
  background: var(--action);
  color: #fff;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
button:hover { background: var(--action-hover); }
button:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
button:disabled { opacity: 0.6; cursor: default; }

#status { margin: 0; font-size: 14px; line-height: 1.5; }
#status:not(:empty) { margin-top: 12px; }
#status.error { color: var(--error); }

/* After a successful sign-up the form gives way to the thank-you line. */
form.done .row, form.done .hp, form.done .fine { display: none; }
form.done #status { margin: 0; font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--cream); }

.fine { margin: 20px 0 0; color: var(--muted); font-family: var(--serif); font-style: italic; font-size: 13px; text-wrap: balance; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The shelf. The drawing is 1280 wide; only its bottom 374 units (the books) are shown. On narrow screens it is
   900px wide and centred, so the spines stay big enough to read and the edges are cropped (as in the Lovable version). */
.shelf-wrap { position: relative; width: 100%; overflow: hidden; }
.shelf {
  display: block;
  position: relative;
  left: 50%;
  width: max(100%, 900px);
  max-width: 1500px;
  aspect-ratio: 1280 / 374;
  height: auto;
  transform: translateX(-50%);
}
.book { transform-origin: 0 0; transition: transform 0.6s cubic-bezier(0.34, 1.4, 0.5, 1); } /* timing from the Lovable version */
.hit { fill: transparent; }

/* Phones: the field and the button stack, full width. */
@media (max-width: 639px) {
  .row { flex-direction: column; }
  .field { flex: none; width: 100%; }
  button { width: 100%; }
}

/* Phones and tablets: iPhones zoom the page when you tap a field whose text is under 16px. So the field is built at 16px
   (133% size) and shrunk to 75%, which looks like 12px, the same as the button, and does not trigger the zoom. */
@media (max-width: 767px) {
  input[type="email"] {
    width: 133.334%;
    height: 53.334px;
    padding: 0 16px;
    font-size: 16px;
    transform: scale(0.75);
    transform-origin: 0 0;
  }
}

@media (min-width: 768px) {
  header { padding-top: 24px; }
  main { padding: 24px 24px 32px; }
  .headline { font-size: 34px; margin-bottom: 20px; }
  .about, .cta { max-width: 440px; margin-inline: auto; padding: 0; font-size: 13px; }
  .cta { margin-top: 14px; }
  form { margin-top: 24px; }
  button { width: 128px; }
  /* Keep the whole page on one screen: the shelf never takes more than about 44% of the window height. */
  .shelf { width: 100%; max-width: min(1500px, 150vh); }
}

/* Short desktop windows (small laptops): tighter again so the page still fits without scrolling. */
@media (min-width: 768px) and (max-height: 740px) {
  header { padding-top: 16px; }
  main { padding: 12px 24px 16px; }
  .headline { font-size: 28px; margin-bottom: 14px; }
  .cta { margin-top: 10px; }
  form { margin-top: 16px; }
  .fine { margin-top: 12px; }
  .shelf { max-width: min(1500px, 135vh); }
}

@media (prefers-reduced-motion: no-preference) {
  main, header { animation: rise 0.7s ease-out both; }
  @keyframes rise { from { opacity: 0; transform: translateY(6px); } }
  /* The shelf slides up into place on load (timing from the Lovable version). */
  .shelf-wrap { animation: shelf-rise 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  @keyframes shelf-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
}
@media (prefers-reduced-motion: reduce) { .book { transition: none; } }