/* Bilingual Storybook Land */

:root {
  --paper: #faf5ec;
  --paper-raised: #fdfaf3;
  --ink: #35464f;
  --ink-soft: #5a6c76;
  --sea: #4e7e96;
  --sea-deep: #3d6679;
  --sand: #e7d7bc;
  --sand-deep: #c9a87c;
  --line: rgba(201, 168, 124, 0.35);

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body: "Nunito Sans", "Avenir Next", "Segoe UI", sans-serif;
  --hand: "Caveat", cursive;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.7;
}

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

a { color: var(--sea-deep); }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Header */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
}

.site-header .wordmark {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
  color: #fdfaf3;
  text-decoration: none;
  text-shadow: 0 1px 8px rgba(38, 52, 61, 0.45);
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.site-header nav a {
  color: #fdfaf3;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  text-shadow: 0 1px 8px rgba(38, 52, 61, 0.45);
}

.site-header nav a:hover { text-decoration: underline; }

.site-header .wordmark,
.site-header nav a { white-space: nowrap; }

@media (max-width: 560px) {
  .site-header { justify-content: flex-end; padding: 0.9rem 1rem; }
  .site-header nav { gap: 0.9rem; flex-wrap: wrap; justify-content: flex-end; row-gap: 0.35rem; }
  .site-header .wordmark { display: none; }
  .site-header.on-paper { justify-content: space-between; flex-wrap: wrap; }
  .site-header.on-paper .wordmark { display: inline; font-size: 0.9rem; }
  .site-header.on-paper nav a { font-size: 0.88rem; }
}

/* Language toggle ships hidden; flipped by SHOW_LANGUAGE_TOGGLE in site.js */
.lang-toggle {
  display: none;
  border: 1px solid rgba(253, 250, 243, 0.7);
  border-radius: 8px;
  padding: 0.2rem 0.7rem;
  background: transparent;
}

.lang-toggle.is-visible { display: inline-block; }

/* Inner pages have a solid header */
.site-header.on-paper { position: static; background: var(--paper); }
.site-header.on-paper .wordmark,
.site-header.on-paper nav a { color: var(--ink); text-shadow: none; }
.site-header.on-paper .lang-toggle { border-color: var(--sea); color: var(--sea-deep); }

/* Hero */
.hero {
  position: relative;
  height: min(88vh, 860px);
  min-height: 480px;
  overflow: hidden;
}

.hero video,
.hero picture,
.hero picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
}

.hero video { display: none; }

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(38, 52, 61, 0.58), rgba(38, 52, 61, 0.08) 52%, transparent 70%);
}

.hero-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(2rem, 7vh, 4.5rem);
  z-index: 2;
  text-align: center;
  padding: 0 1.25rem;
}

.hero-text h1 {
  font-size: clamp(2.1rem, 5.5vw, 3.6rem);
  color: #fdfaf3;
  margin: 0 0 0.5rem;
  text-shadow: 0 2px 16px rgba(38, 52, 61, 0.5);
}

.hero-text p {
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  color: #f3ecdd;
  margin: 0 auto;
  max-width: 34ch;
  text-shadow: 0 1px 10px rgba(38, 52, 61, 0.55);
}

/* The hero video plays on all widths. While it loads (or while autoplay is
   blocked, e.g. iOS Low Power Mode) the video's own poster shows the same
   frame, so hiding the fallback picture is seamless. */
.hero video.is-active { display: block; }
.hero video.is-active + picture { display: none; }

/* Sections */
section { padding: clamp(3rem, 8vw, 5.5rem) 0; }

.section-heading {
  text-align: center;
  font-size: clamp(1.7rem, 3.5vw, 2.3rem);
  margin: 0 0 2.5rem;
}

/* Intro */
.intro { padding-bottom: clamp(2rem, 5vw, 3.5rem); }

.intro p {
  max-width: 36rem;
  margin: 0 auto;
  font-size: 1.18rem;
  text-align: center;
}

.intro .story-link {
  display: block;
  text-align: center;
  margin-top: 1.6rem;
  font-family: var(--hand);
  font-size: 1.75rem;
  color: var(--sea-deep);
  text-decoration: none;
  border: 0;
}

.intro .story-link:hover { text-decoration: underline; text-underline-offset: 6px; }

/* Books */
.books-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.2rem;
}

.book-card {
  width: 320px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.1rem 1.1rem 1.3rem;
  box-shadow: 0 10px 26px rgba(53, 70, 79, 0.07);
  display: flex;
  flex-direction: column;
}

.book-card img { border-radius: 8px; }

.book-card h3 {
  font-size: 1.28rem;
  margin: 1rem 0 0.4rem;
}

.book-card p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
}

.book-card p:last-of-type { flex: 1; }

.buy-row { display: flex; gap: 0.6rem; }

.buy-row a {
  flex: 1;
  text-align: center;
  background: var(--sea);
  color: #fdfaf3;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.62rem 0.4rem;
  border-radius: 8px;
}

.buy-row a:hover { background: var(--sea-deep); }

/* Real books */
.real-books { position: relative; }

.real-books::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/texture-watercolour.webp") center / cover no-repeat;
  opacity: 0.15;
}

.real-books .wrap { position: relative; }

.fan-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 880px;
  margin: 0 auto;
}

.fan-photos img { border-radius: 12px; }

.real-books p {
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
  max-width: 30ch;
  margin: 2rem auto 0;
}

@media (max-width: 620px) {
  .fan-photos { grid-template-columns: 1fr; }
}

/* Newsletter */
.newsletter { text-align: center; }

.newsletter h2 {
  font-size: clamp(1.3rem, 2.8vw, 1.7rem);
  max-width: 34ch;
  margin: 0 auto 1.8rem;
}

.newsletter-embed { max-width: 480px; margin: 0 auto; }

/* TikTok */
.tiktok { text-align: center; }

.tiktok .section-heading { margin-bottom: 1rem; }

.tiktok-intro {
  max-width: 36rem;
  margin: 0 auto 2.2rem;
}

blockquote.tiktok-embed {
  margin: 0 auto;
  max-width: 780px;
  min-width: 288px;
}

/* Neutralise the global section padding on TikTok's fallback markup. */
blockquote.tiktok-embed section { padding: 0; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 2rem 1.25rem 2.5rem;
  text-align: center;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* Our Story page */
.longform {
  max-width: 62ch;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) 1.25rem;
}

.longform h1 {
  font-size: clamp(2rem, 4.5vw, 2.8rem);
  text-align: center;
  margin-bottom: 2.2rem;
}

.longform p { font-size: 1.13rem; margin: 0 0 1.4rem; }

.longform figure { margin: 2.6rem 0; }

.longform figure img { border-radius: 12px; }

.longform h2 {
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--sea-deep);
  margin: 2.4rem 0 0.9rem;
}

/* Amazon store chooser */
.store-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  padding: 1.25rem;
  background: rgba(53, 70, 79, 0.45);
  overflow-y: auto;
}

.store-overlay[hidden] { display: none; }

body.store-open { overflow: hidden; }

.store-card {
  background: var(--paper-raised);
  border-radius: 16px;
  padding: 1.5rem 1.5rem 1.1rem;
  width: min(24rem, 100%);
  margin: auto;
  box-shadow: 0 18px 50px rgba(53, 70, 79, 0.3);
}

.store-heading {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--sea-deep);
  margin: 0 0 1.1rem;
  text-align: center;
}

.store-option {
  display: block;
  padding: 0.8rem 1rem;
  margin-bottom: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.store-option:hover,
.store-option:focus-visible {
  border-color: var(--sea);
  transform: translateY(-1px);
}

.store-name {
  display: block;
  font-weight: 700;
  color: var(--ink);
}

.store-note {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.store-close {
  display: block;
  margin: 0.5rem auto 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink-soft);
  text-decoration: underline;
  cursor: pointer;
}

/* Gentle fade-ins */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}