/* global React */
// Vista Tranquila — "The site is the book."
// Paper-textured single object. Full-bleed watercolor heroes, type set INTO the
// art, bilingual treatment via printed serif + Homemade-Apple handwriting in
// the margins like a teacher pencilled it in. Books on a real shelf.
//
// Round 2 P0 fixes (2026-05-27):
//   1. Responsive media queries (375/768/1024), hamburger nav, reduced-motion.
//   2. Real CTAs (Squarespace product slugs, mailto, order-kit.html).
//   3. Audience router above the fold (families / schools / legado).
//   4. Real press quotes (no more "placeholder").
//   5. ISBNs + pages + pubDate + awards on shelf and featured.
//   6. Bilingual hierarchy fixed (Homemade Apple reserved for marginalia only).
//   7. Schools CTAs route to /order-kit.html.
//   8. Value stack + risk reversal on both kits.
//   9. (SEO lives in index.html.)
//  10. (React production build lives in index.html.)
//  11. A11y baseline: focus-visible, skip link, modal trap, lang attributes,
//      contrast fix (ACCENT for small text → #8E3F2A, 5.9:1 on cream).

const Tranquila = () => {
  const books = window.VT_BOOKS;
  const resources = window.VT_RESOURCES;
  const press = window.VT_PRESS;
  const art = window.VT_ART;
  const kits = window.VT_KITS || [];
  const awards = window.VT_AWARDS || [];
  const extras = window.VT_EXTRAS || [];
  const audience = window.VT_AUDIENCE || [];
  const scarcity = window.VT_SCARCITY || {};
  const donations = window.VT_DONATIONS || { count: 0, since: 2019 };
  const featured = books[0]; // Tikal

  const [gateOpen, setGateOpen] = React.useState(false);
  const [gateItem, setGateItem] = React.useState(null);
  const [gateSubmitted, setGateSubmitted] = React.useState(false);
  const [gateEmail, setGateEmail] = React.useState('');
  const [mobileNavOpen, setMobileNavOpen] = React.useState(false);

  const lastFocusRef = React.useRef(null);
  const modalRef = React.useRef(null);

  const openGate = (e, r) => {
    e.preventDefault();
    lastFocusRef.current = e.currentTarget;
    setGateItem(r);
    setGateSubmitted(false);
    setGateEmail('');
    setGateOpen(true);
  };
  const closeGate = React.useCallback(() => {
    setGateOpen(false);
    // return focus to the trigger
    setTimeout(() => { if (lastFocusRef.current && lastFocusRef.current.focus) lastFocusRef.current.focus(); }, 0);
  }, []);
  const submitGate = (e) => {
    e.preventDefault();
    if (!gateEmail.trim()) return;
    setGateSubmitted(true);
  };

  // Esc-to-close + focus trap for the email gate modal
  React.useEffect(() => {
    if (!gateOpen) return;
    const onKey = (e) => {
      if (e.key === 'Escape') { closeGate(); return; }
      if (e.key === 'Tab' && modalRef.current) {
        const focusables = modalRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
        if (focusables.length === 0) return;
        const first = focusables[0];
        const last = focusables[focusables.length - 1];
        if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
        else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
      }
    };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [gateOpen, closeGate]);

  // Sort books for shelf-list ordering: newest first
  const navLinks = [
    { href: '#shelf', label: 'Books' },
    { href: '#schools', label: 'For schools' },
    { href: '#teachers', label: 'For teachers' },
    { href: '#about', label: 'About' },
    { href: '#readalouds', label: 'Read-alouds' },
    { href: '#postcard', label: 'Contact' }
  ];

  const productUrl = (b) => `https://www.vistatranquila.com/marketplace/p/${b.slug}`;

  return (
    <div style={t.root}>
      <style>{tCSS}</style>
      <PaperTexture/>

      {/* ========================================================== */}
      {/*  COVER — the hero spread of the book                       */}
      {/* ========================================================== */}
      <header style={t.cover} id="home">
        <img src={art.jungle} alt="" style={t.coverArt} aria-hidden="true"/>
        <div style={t.coverWash} aria-hidden="true"/>

        {/* top utility row */}
        <div style={t.topRow} className="vt-toprow">
          <div style={t.wordmark}>
            <div style={t.wordmarkVista}>Vista Tranquila</div>
            <div style={t.wordmarkSub}>Bilingual children&apos;s books · since 2019</div>
          </div>
          <nav
            id="vt-primary-nav"
            style={t.nav}
            className={`vt-nav ${mobileNavOpen ? 'vt-nav-open' : ''}`}
            aria-label="Primary"
          >
            {navLinks.map(n => (
              <a key={n.href} href={n.href} style={t.navLink} className="vt-navlink"
                 onClick={() => setMobileNavOpen(false)}>{n.label}</a>
            ))}
          </nav>
          <div style={t.navRight}>
            <span style={t.lang} aria-label="Languages, English and Spanish">EN <span style={t.langSlash}>/</span> <span style={t.langEs} lang="es">ES</span></span>
            <button
              type="button"
              className="vt-burger"
              aria-expanded={mobileNavOpen}
              aria-controls="vt-primary-nav"
              aria-label={mobileNavOpen ? 'Close menu' : 'Open menu'}
              onClick={() => setMobileNavOpen(o => !o)}
              style={t.burger}
            >
              <span/><span/><span/>
            </button>
          </div>
        </div>

        {/* Donation ribbon — persistent, immediately under nav */}
        <div style={t.donationRibbon}>
          <span style={t.donationRibbonStar} aria-hidden="true">✿</span>
          <span style={t.donationRibbonEn}>
            <strong style={{fontStyle: 'italic'}}>{donations.count.toLocaleString()} books</strong> donated to Guatemalan children since {donations.since}. Buy one, give one.
          </span>
          <span style={t.donationRibbonEs} lang="es">
            Por cada libro de tapa dura que compras, donamos uno a un niño en Guatemala.
          </span>
        </div>

        {/* Audience router — three-card chooser above the fold */}
        <div style={t.audienceRouter} aria-label="Choose your path">
          {audience.map(a => {
            const isExternal = a.href.startsWith('http') || a.href.startsWith('/') || a.href.startsWith('../');
            return (
              <a
                key={a.id}
                href={a.href}
                style={t.audienceCard}
                className="vt-aud-card"
                target={isExternal ? '_self' : undefined}
              >
                <span style={t.audienceIcon} aria-hidden="true">
                  {a.icon === 'book' && <BookIcon/>}
                  {a.icon === 'school' && <SchoolIcon/>}
                  {a.icon === 'library' && <LibraryIcon/>}
                  {a.icon === 'heart' && <HeartIcon/>}
                </span>
                <span style={t.audienceLabel}>{a.label_en}</span>
                <span style={t.audienceArrow} aria-hidden="true">→</span>
              </a>
            );
          })}
        </div>

        {/* Headline set INTO the art's whitespace */}
        <div style={t.coverHeadline}>
          <div style={t.coverEyebrow}>· A bilingual children&apos;s press from Guatemala &amp; the Carolinas ·</div>
          <h1 style={t.coverH1} className="vt-coverh1">
            Bilingual children&apos;s books<br/>
            from <span style={t.coverH1Em}>Guatemala</span>, the Carolinas,<br/>
            and the page in between.
          </h1>
          <p style={t.coverHandLede} lang="es"><em>Libros bilingües para niños entre dos idiomas.</em></p>

          {/* ILBA medal trio — credentials under the headline */}
          <div style={t.medalCluster}>
            <div style={t.medalClusterLabel}>
              International Latino Book Awards · 2024 · 3 medals
            </div>
            <div style={t.medalRow}>
              {awards.map((a, i) => (
                <div key={i} style={{...t.medal, ...(a.medal === 'Silver' ? t.medalSilver : t.medalBronze)}}>
                  <div style={t.medalStars} aria-hidden="true">★ ★ ★</div>
                  <div style={t.medalMetal}>{a.medal}</div>
                  <div style={t.medalCategory}>{a.category}</div>
                  <div style={t.medalBook}><em>{a.book}</em></div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Cover credit — like a real book cover */}
        <div style={t.coverCredit}>
          <span style={t.coverCreditNum}>Pl. I</span>
          <span style={t.coverCreditText}>
            Watercolor by Désirée Iturbide, from <em>Tikal Animal Adventures</em>
            <span style={t.coverCreditHand} lang="es"> · acuarela original</span>
          </span>
        </div>

        {/* Featured book — like a foil sticker on the cover */}
        <a href="#featured" style={t.coverSticker} className="vt-coversticker">
          <img src={featured.cover} alt="" style={t.coverStickerImg} aria-hidden="true"/>
          <div style={t.coverStickerText}>
            <div style={t.coverStickerNew}>New · 2026</div>
            <div style={t.coverStickerTitle}>Tikal Animal Adventures</div>
            <div style={t.coverStickerEs} lang="es"><em>Aventuras con animales en Tikal</em></div>
            <div style={t.coverStickerCta}>Read the first chapter →</div>
          </div>
        </a>

        <div style={t.coverFoot}>
          <span>VISTA TRANQUILA PUBLISHERS</span>
          <span style={t.coverFootMid}>· Bilingual · Hand-illustrated · Made in NC &amp; GT ·</span>
          <span>26.05.2026</span>
        </div>
      </header>

      {/* main wrap for skip-link + semantic landmark */}
      <main id="main">

      {/* ========================================================== */}
      {/*  DEDICATION — the page after you open the book             */}
      {/* ========================================================== */}
      <section style={t.dedication}>
        <div style={t.dedicationRule}>
          <span style={t.dedicationRuleText}>— turn the page —</span>
        </div>
        <div style={t.dedicationBody}>
          <div style={t.dedicationLabel}>Dedication · Dedicatoria</div>
          <blockquote style={t.dedicationQuote}>
            For the children between two languages.
          </blockquote>
          {/* Genuine marginalia — Homemade Apple is appropriate here. */}
          <p style={t.dedicationHand} lang="es">
            Para los niños entre dos idiomas.
          </p>
          <div style={t.dedicationSig}>
            <span style={t.dedicationStar} aria-hidden="true">✿</span>
            <span>— Kim Pitts, Editor &amp; Founder · 2019</span>
          </div>
        </div>
      </section>

      {/* ========================================================== */}
      {/*  FEATURED BOOK — flagship spread                           */}
      {/* ========================================================== */}
      <section style={t.featured} id="featured">
        <div style={t.featuredLeft}>
          <div style={t.spec}>
            <span style={t.specNum}>I.</span>
            <span style={t.specLabel}>The newest title · just published</span>
          </div>
          <h2 style={t.featuredTitle} className="vt-featuredtitle">
            Tikal Animal<br/>
            <span style={t.featuredTitleEm}>Adventures</span>
          </h2>
          {/* Spanish parallel: same weight as the English (NOT handwriting) */}
          <p style={t.featuredTitleEs} lang="es"><em>Aventuras con animales en Tikal</em></p>
          <p style={t.featuredBody}>
            Three weeks in the jungle. Two illustrators with watercolor pads. One
            hardback you can almost hear, howler monkeys at dawn, the rasp of a
            toucan, the very quiet sound a coatimundi makes pretending not to
            steal your sandwich.
          </p>
          <p style={t.featuredBodyEs} lang="es">
            <em>Tres semanas en la selva. Dos ilustradoras con cuadernos de
            acuarela. Un libro de tapa dura que casi se oye.</em>
          </p>
          <div style={t.featuredSpecs}>
            <div style={t.specRow}><span style={t.specKey}>Author</span><span style={t.specVal}>{featured.author}</span></div>
            <div style={t.specRow}><span style={t.specKey}>Illustrator</span><span style={t.specVal}>{featured.illustrator}</span></div>
            <div style={t.specRow}><span style={t.specKey}>Format</span><span style={t.specVal}>Hardback, {featured.pages} pages</span></div>
            <div style={t.specRow}><span style={t.specKey}>Languages</span><span style={t.specVal}>English &amp; <span lang="es">Español</span>, side-by-side</span></div>
            <div style={t.specRow}><span style={t.specKey}>Reading age</span><span style={t.specVal}>{featured.age.replace('Ages ', '')}</span></div>
            <div style={t.specRow}><span style={t.specKey}>Spanish level</span><span style={t.specVal}>CEFR {featured.spanishCefr}</span></div>
            <div style={t.specRow}><span style={t.specKey}>Lexile</span><span style={t.specVal}>{featured.lexile}</span></div>
            <div style={t.specRow}><span style={t.specKey}>Published</span><span style={t.specVal}>{featured.pubDate}</span></div>
            <div style={t.specRow}><span style={t.specKey}>ISBN</span><span style={t.specVal}><code style={t.code}>{featured.isbn}</code></span></div>
          </div>
          <div style={t.featuredCtas}>
            <a href={productUrl(featured)} target="_blank" rel="noopener" style={t.btnPrimary}>Order the hardback — $25</a>
            {/* TODO: replace with /assets/previews/tikal-first-8.pdf once Kim provides */}
            <a href="mailto:kimpitts@vistatranquila.com?subject=First%208%20pages%20%E2%80%94%20Tikal%20Animal%20Adventures&body=Hi%20Kim%2C%20please%20send%20me%20the%20first%208%20pages%20of%20Tikal%20Animal%20Adventures." style={t.btnGhost}>Email Kim for the first 8 pages →</a>
          </div>
        </div>
        <div style={t.featuredRight}>
          <div style={t.featuredCover}>
            <img src={featured.cover} alt={`Cover of ${featured.en}`} style={t.featuredCoverImg}/>
            {/* No award badge on Tikal — Tikal has not won. Three other titles have ILBA medals; see medal trio in the cover headline. */}
          </div>
          {/* Genuine marginalia — Homemade Apple stays here */}
          <p style={t.featuredCoverHand}>
            <span style={t.featuredCoverArrow} aria-hidden="true">↖</span>
            actually printed in <em>Guatemala City</em>
          </p>
        </div>
      </section>

      {/* ========================================================== */}
      {/*  THE SHELF — all seven books standing up                   */}
      {/* ========================================================== */}
      <section style={t.shelf} id="shelf">
        <div style={t.shelfHead}>
          <div style={t.spec}>
            <span style={t.specNum}>II.</span>
            <span style={t.specLabel}>The catalog · 2019 — present</span>
          </div>
          <h2 style={t.h2} className="vt-h2">
            Seven books.<br/>
            Two countries.<br/>
            <span style={t.h2Em}>One</span> bookshelf.
          </h2>
          {/* Bilingual parallel: serif italic, not handwriting */}
          <p style={t.shelfSub} lang="es"><em>Siete libros. Dos países. Una estantería.</em></p>
        </div>

        <div style={t.shelfFilters}>
          <span style={t.filterActive}>All 7</span>
          <span style={t.filter}>Guatemala</span>
          <span style={t.filter}>El Salvador</span>
          <span style={t.filter}>Hardback</span>
          <span style={t.filter}>Coloring</span>
          <span style={t.filter}>E-Books</span>
        </div>

        {/* The actual shelf */}
        <div style={t.shelfStage}>
          <div style={t.shelfBooks} className="vt-shelfbooks">
            {books.map((b, i) => {
              const rot = [-1.4, 0.6, -1.0, 0.2, -0.6, 0.9, -0.4][i % 7];
              const lift = [4, 0, 6, 2, 8, 0, 3][i % 7];
              return (
                <article
                  key={b.id}
                  className="vt-shelfbook"
                  style={{
                    ...t.shelfBook,
                    transform: `rotate(${rot}deg) translateY(-${lift}px)`,
                    zIndex: 7 - i
                  }}
                >
                  <div style={t.shelfCoverWrap}>
                    <img src={b.cover} alt={`Cover of ${b.en}`} style={t.shelfCover}/>
                    <div className="vt-pages" aria-hidden="true"/>
                    <div className="vt-spine" aria-hidden="true"/>
                    {b.isNew && <span style={t.shelfNew}>New</span>}
                  </div>
                  <div className="vt-shadow" style={t.shelfShadow} aria-hidden="true"/>
                </article>
              );
            })}
          </div>
          {/* Wooden plank */}
          <div style={t.shelfPlank}>
            <div style={t.shelfPlankFace}/>
            <div style={t.shelfPlankEdge}/>
          </div>
        </div>

        {/* Listing below the shelf — uniform card grid with ISBN + awards */}
        <div style={t.shelfList} className="vt-shelflist">
          {books.map((b, i) => (
            <article key={b.id} style={t.listBook}>
              <div style={t.listRow}>
                <span style={t.listNum}>{String(i + 1).padStart(2, '0')}</span>
                <span style={t.listRule}/>
                <span style={t.listPlace}>{b.place}</span>
                <span style={t.listPrice}>{b.price}</span>
              </div>
              <h3 style={t.listTitle}>{b.en}</h3>
              <p style={t.listEs} lang="es"><em>{b.es}</em></p>
              {b.awards && b.awards.length > 0 && (
                <div style={t.listAward}>
                  <span style={t.listAwardStar} aria-hidden="true">★</span>
                  <span>{b.awards[0].year} {b.awards[0].org === 'International Latino Book Awards' ? 'ILBA' : b.awards[0].org} {b.awards[0].medal}</span>
                </div>
              )}
              <div style={t.listMeta}>
                <div><span style={t.listMetaKey}>Format</span><span style={t.listMetaVal}>{b.format}</span></div>
                <div><span style={t.listMetaKey}>Pages</span><span style={t.listMetaVal}>{b.pages}</span></div>
                <div><span style={t.listMetaKey}>Age</span><span style={t.listMetaVal}>{b.age.replace('Ages ','')}</span></div>
                <div><span style={t.listMetaKey}>Spanish</span><span style={t.listMetaVal}>CEFR {b.spanishCefr}</span></div>
                <div><span style={t.listMetaKey}>ISBN</span><span style={t.listMetaVal}><code style={t.code}>{b.isbn}</code></span></div>
              </div>
              <div style={t.listFoot}>
                <a href={productUrl(b)} target="_blank" rel="noopener" style={t.listCta}>Order ↗</a>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* ========================================================== */}
      {/*  INTERLUDE — a full-bleed watercolor "page turn"           */}
      {/* ========================================================== */}
      <section style={t.interlude} aria-label="Page turn">
        <img src={art.flowers} alt="" style={t.interludeImg} aria-hidden="true"/>
        <div style={t.interludeOverlay}>
          <div style={t.interludeText}>
            <div style={t.interludeLabel}>· An interlude · <span lang="es">Un interludio</span> ·</div>
            <p style={t.interludeQuote}>
              &ldquo;Every page leaves room<br/>for a child to draw back.&rdquo;
            </p>
            {/* Genuine marginalia */}
            <p style={t.interludeHand} lang="es">
              Cada página deja espacio para que un niño dibuje de vuelta.
            </p>
            <div style={t.interludeCredit}>
              <span style={t.interludeCreditNum}>Pl. III</span>
              <span>From <em>Antigua&apos;s Amazing Sawdust Carpets</em></span>
            </div>
          </div>
        </div>
      </section>

      {/* ========================================================== */}
      {/*  FOR TEACHERS — like a teacher's-edition tear-out          */}
      {/* ========================================================== */}
      <section style={t.teachers} id="teachers">
        <div style={t.teachersHead}>
          <div style={t.spec}>
            <span style={t.specNum}>III.</span>
            <span style={t.specLabel}>For educators · <span lang="es">Para educadores</span></span>
          </div>
          <h2 style={t.h2} className="vt-h2">
            64 free downloads.<br/>
            <span style={t.h2Em}>Pencils not included.</span>
          </h2>
          <p style={t.teachersSub} lang="es"><em>Hojas para colorear, listas de vocabulario, planes de clase.</em></p>
          <p style={t.teachersBody}>
            Every Vista Tranquila book ships with a free companion library of
            classroom-ready PDFs: coloring sheets, vocabulary lists, lesson
            plans, reading-comprehension guides, graphic organizers, geography
            activities. Take what you need. Print what you need. One quick
            email opt-in unlocks the whole shelf.
          </p>
        </div>

        {/* "Tear-out" stack of resource cards */}
        <div style={t.tearouts} className="vt-tearouts">
          {resources.map((r, i) => (
            <a key={i} href="#" onClick={(e) => openGate(e, r)} className="vt-tearout" style={t.tearout}>
              <div style={t.tearoutPunch} aria-hidden="true">
                <span/><span/><span/>
              </div>
              <div style={t.tearoutBody}>
                <div style={t.tearoutCount}>{r.count}</div>
                <div style={t.tearoutLabel}>{r.en}</div>
                <div style={t.tearoutEs} lang="es"><em>{r.es}</em></div>
                <div style={t.tearoutDl}>Get this free →</div>
              </div>
            </a>
          ))}
        </div>
      </section>

      {/* ========================================================== */}
      {/*  PRESS — back-cover blurbs                                 */}
      {/* ========================================================== */}
      <section style={t.press}>
        <div style={t.spec}>
          <span style={t.specNum}>IV.</span>
          <span style={t.specLabel}>From the back of the book</span>
        </div>
        <h2 style={{...t.h2, marginBottom: 60}} className="vt-h2">From the <span style={t.h2Em}>back of the book.</span></h2>
        <div style={t.pressGrid} className="vt-pressgrid">
          {press.map((p, i) => (
            <figure key={i} style={t.pressFig}>
              <div style={t.pressStars} aria-hidden="true">★ ★ ★ ★ ★</div>
              <blockquote style={t.pressQuote}>{p.quote_en}</blockquote>
              <p style={t.pressEs} lang="es"><em>{p.quote_es}</em></p>
              <figcaption style={t.pressSrc}>
                — {p.source}
                {p.verified === false && <span style={t.pressUnverified} title="Quote from a teacher / librarian, not independently verified by a press outlet">  · testimonial</span>}
              </figcaption>
            </figure>
          ))}
        </div>
      </section>

      {/* ========================================================== */}
      {/*  FOR SCHOOLS — Curriculum Kit + DLI Classroom Set          */}
      {/* ========================================================== */}
      <section style={t.schools} id="schools">
        <div style={t.schoolsHead}>
          <div style={t.spec}>
            <span style={t.specNum}>VIII.</span>
            <span style={t.specLabel}>For schools, libraries, and educators · <span lang="es">Para educadores</span></span>
          </div>
          <h2 style={t.h2} className="vt-h2">
            Built for the<br/>
            <span style={t.h2Em}>dual-language</span> immersion classroom.
          </h2>
          <p style={t.schoolsSub} lang="es"><em>El kit completo para tu aula bilingüe.</em></p>
        </div>

        <div style={t.kitGrid} className="vt-kitgrid">
          {kits.map((k, i) => (
            <article key={k.id} style={t.kitCard}>
              <div style={t.kitTopRow}>
                <span style={t.kitTier}>{i === 0 ? 'Tier I · Curriculum' : 'Tier II · Full DLI'}</span>
                <div style={t.kitPriceWrap}>
                  {k.listValue && <span style={t.kitListValue}>{k.listValue}</span>}
                  <span style={t.kitPrice}>{k.price}</span>
                </div>
              </div>
              <h3 style={t.kitTitle}>{k.name_en}</h3>
              <p style={t.kitTitleEs} lang="es"><em>{k.name_es}</em></p>
              <p style={t.kitSummary}>{k.summary}</p>

              {/* Value stack — Hormozi-style itemized stack with totals */}
              {k.valueStack && (
                <div style={t.kitStack}>
                  <div style={t.kitStackHead}>What you get · what it&apos;s worth</div>
                  <ul style={t.kitStackList}>
                    {k.valueStack.map((s, j) => (
                      <li key={j} style={t.kitStackRow}>
                        <span style={t.kitStackItem}>{s.item}</span>
                        <span style={t.kitStackVal}>{s.value}</span>
                      </li>
                    ))}
                  </ul>
                  <div style={t.kitStackTotal}>
                    <span>Total value</span>
                    <span style={t.kitStackTotalNum}>{k.listValue}</span>
                  </div>
                  <div style={t.kitStackPrice}>
                    <span>Institutional price</span>
                    <span style={t.kitStackPriceNum}>{k.price}</span>
                  </div>
                </div>
              )}

              <div style={t.kitStandards}>{k.standards}</div>
              <div style={t.kitGive}>
                <span style={t.kitGiveMark} aria-hidden="true">✿</span>
                <span>{k.give_back}</span>
              </div>
              {k.risk_reversal && (
                <div style={t.kitRisk}>
                  <span style={t.kitRiskLabel}>Risk reversal</span>
                  <em>{k.risk_reversal}</em>
                </div>
              )}
              <a href={k.cta_href} style={t.kitCta}>{k.cta}</a>
            </article>
          ))}
        </div>

        {scarcity.cohort && (
          <div style={t.scarcityBanner}>
            <span style={t.scarcityIcon} aria-hidden="true">◆</span>
            <span style={t.scarcityEn}>{scarcity.cohort}</span>
            <span style={t.scarcityEs} lang="es"><em>{scarcity.cohort_es}</em></span>
          </div>
        )}

        <div style={t.schoolsFoot}>
          <span style={t.schoolsFootMark} aria-hidden="true">·</span>
          Purchase orders, W-9, and net-30 invoices welcomed. Email{' '}
          <a href="mailto:kimpitts@vistatranquila.com" style={t.schoolsFootLink}>
            kimpitts@vistatranquila.com
          </a>{' '}
          for a quote or{' '}
          <a href="order-kit.html" style={t.schoolsFootLink}>
            use the intake form
          </a>{' '}
          to schedule a 30-minute demo.
          <span style={t.schoolsFootMark} aria-hidden="true">·</span>
        </div>
      </section>

      {/* ========================================================== */}
      {/*  ABOUT — about the author, with misty mountain art         */}
      {/* ========================================================== */}
      <section style={t.about} id="about">
        <div style={t.aboutArtWrap}>
          <img src={art.mountain} alt="Watercolor of misty mountains over La Palma" style={t.aboutArt}/>
          <div style={t.aboutArtCap}>
            <span style={t.aboutArtCapNum}>Pl. IV</span>
            <span style={t.aboutArtCapText}>La Palma, El Salvador · from <em>Fernando Llort Painting La Palma</em></span>
          </div>
        </div>
        <div style={t.aboutText}>
          <div style={t.spec}>
            <span style={t.specNum}>V.</span>
            <span style={t.specLabel}>About the publisher · 01</span>
          </div>
          <h2 style={t.h2} className="vt-h2">
            A small press<br/>
            from a <span style={t.h2Em}>quiet view.</span>
          </h2>
          <p style={t.aboutSub} lang="es"><em>Una pequeña editorial desde una vista tranquila.</em></p>
          <p style={t.aboutBody}>
            Vista Tranquila began in 2019 with one author, one illustrator, and
            a promise: every book would be bilingual, every page rooted in a
            real place, every margin big enough for a child to draw back.
          </p>
          <p style={t.aboutBody}>
            Seven years later we are seven titles deep, three of them carrying
            2024 International Latino Book Awards medals, sold in bookstores
            across Guatemala and shipped from a small office in the Carolinas
            to classrooms across the United States.
          </p>
          <p style={t.aboutBody}>
            <strong style={{fontStyle: 'normal'}}>Kim Pitts</strong>, Editor and Founder, holds a PhD in sociology
            and taught K through university for thirty years. She raised her sons
            between English and Spanish in North Carolina, spent two decades
            visiting Guatemala, and finally moved her press there in 2019.
            {/* TODO: Kim, add headshot to /assets/team/kim-pitts.jpg and uncomment below */}
            {/* <img src="assets/team/kim-pitts.jpg" alt="Kim Pitts, Editor and Founder" style={t.founderHeadshot}/> */}
          </p>
          <p style={t.aboutBody}>
            For every hardback we sell, we donate one to a child through one of
            four Guatemalan NGO partners: <em>Camino Seguro</em> in Guatemala
            City&apos;s garbage-dump community, <em>Fundación Sobrevivientes</em>{' '}
            serving survivors of violence, <em>El Refugio</em> for trafficking
            survivors, and <em>Los Gozosos</em> orphanage for disabled children
            in Chimaltenango.
          </p>
          <p style={t.aboutGiveEs} lang="es"><em>Por cada libro vendido, donamos uno.</em></p>
          <div style={t.aboutStats} className="vt-aboutstats">
            <div style={t.statCell}><div style={t.statNum}>2019</div><div style={t.statLabel}>Founded</div></div>
            <div style={t.statCell}><div style={t.statNum}>7</div><div style={t.statLabel}>Books in print</div></div>
            <div style={t.statCell}><div style={t.statNum}>2</div><div style={t.statLabel}>Countries</div></div>
            <div style={t.statCell}><div style={t.statNum}>64</div><div style={t.statLabel}>Free downloads</div></div>
          </div>
        </div>
      </section>

      {/* ========================================================== */}
      {/*  BEYOND THE BOOKS — Legado, Gift Box, Author Visits        */}
      {/* ========================================================== */}
      <section style={t.beyond} id="beyond">
        <div style={t.beyondHead}>
          <div style={t.spec}>
            <span style={t.specNum}>IX.</span>
            <span style={t.specLabel}>Beyond the bookshelf · <span lang="es">Más allá del estante</span></span>
          </div>
          <h2 style={t.h2} className="vt-h2">
            Three more ways to bring<br/>
            <span style={t.h2Em}>Vista Tranquila</span> into your world.
          </h2>
        </div>

        <div style={t.extrasGrid} className="vt-extrasgrid">
          {extras.map((x, i) => (
            <article key={x.id} style={t.extraCard}>
              <div style={t.extraNum}>{['i', 'ii', 'iii'][i]}.</div>
              <h3 style={t.extraTitle}>{x.label_en}</h3>
              <p style={t.extraEs} lang="es"><em>{x.label_es}</em></p>
              <p style={t.extraBody}>{x.desc}</p>
              {x.id === 'gift-box' && scarcity.founding && (
                <div style={t.extraScarcity}>
                  <span style={t.extraScarcityIcon} aria-hidden="true">◆</span>
                  <span>{scarcity.founding}</span>
                </div>
              )}
              <a href={x.cta_href || '#postcard'} style={t.extraCta}>{x.cta_en}</a>
            </article>
          ))}
        </div>
      </section>

      {/* ========================================================== */}
      {/*  READ-ALOUDS — audiobook cards                              */}
      {/* ========================================================== */}
      <section style={t.readalouds} id="readalouds">
        <div style={t.readHead}>
          <div style={{...t.spec, color: 'rgba(246,240,223,0.7)'}}>
            <span style={{...t.specNum, color: WARM}}>VI.</span>
            <span>Vídeos · read-alouds in two languages</span>
          </div>
          <h2 style={{...t.h2, color: PAPER}} className="vt-h2">
            Hear the books<br/>
            <span style={t.h2EmLight}>out loud.</span>
          </h2>
          <p style={t.readSub} lang="es"><em>Escucha los libros en voz alta.</em></p>
        </div>
        <div style={t.readGrid} className="vt-readgrid">
          {[0, 1, 2, 3].map(i => (
            <article key={i} style={t.readCard}>
              <div style={t.readThumb}>
                <img src={books[i].cover} alt="" style={t.readThumbImg} aria-hidden="true"/>
                <button type="button" style={t.readPlay} aria-label={`Play read-aloud for ${books[i].en}`}>
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
                </button>
                <span style={t.readLen} aria-hidden="true">{['08:12', '06:44', '11:03', '09:30'][i]}</span>
              </div>
              <div style={t.readTitle}>{books[i].en}</div>
              <div style={t.readEs} lang="es"><em>{books[i].es}</em></div>
              <div style={t.readMeta}>Read-aloud · EN + ES · subtitled</div>
            </article>
          ))}
        </div>
      </section>

      {/* ========================================================== */}
      {/*  POSTCARD — newsletter as a literal postcard               */}
      {/* ========================================================== */}
      <section style={t.postcardSection} id="postcard">
        <div style={t.postcardHead}>
          <div style={t.spec}>
            <span style={t.specNum}>VII.</span>
            <span style={t.specLabel}>The quarterly letter</span>
          </div>
          <h2 style={t.h2} className="vt-h2">
            We send <span style={t.h2Em}>one letter</span><br/>
            a season. That&apos;s it.
          </h2>
        </div>

        <div style={t.postcard} className="vt-postcard">
          <div style={t.postcardLeft}>
            {/* Genuine marginalia — postcard handwriting is appropriate */}
            <p style={t.postcardHand} lang="es">
              Querida lectora,
            </p>
            <p style={t.postcardBody}>
              Dear reader: we publish four times a year. New titles, free
              downloads, behind-the-illustrator interviews, occasionally a
              recipe. Quiet inbox; we never resell.
            </p>
            <div style={t.postcardLines} aria-hidden="true">
              <div style={t.postcardLine}/>
              <div style={t.postcardLine}/>
              <div style={t.postcardLine}/>
            </div>
            <p style={t.postcardSig}>
              <span lang="es">Con cariño, Kim</span><br/>
              <span style={t.postcardSigEn}>— With love, Kim Pitts</span>
            </p>
          </div>

          <div style={t.postcardRight}>
            <div style={t.stamp} aria-hidden="true">
              <div style={t.stampInner}>
                <div style={t.stampMark}>VT</div>
                <div style={t.stampLabel}>Vista<br/>Tranquila<br/>2026</div>
                <div style={t.stampValue}>FREE</div>
              </div>
            </div>
            <div style={t.postmark} aria-hidden="true">
              <svg width="120" height="60" viewBox="0 0 120 60">
                <ellipse cx="60" cy="30" rx="50" ry="22" fill="none" stroke="#7a2018" strokeWidth="1.2" opacity="0.55"/>
                <ellipse cx="60" cy="30" rx="42" ry="16" fill="none" stroke="#7a2018" strokeWidth="0.8" opacity="0.5"/>
                <text x="60" y="20" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="7" fill="#7a2018" opacity="0.7" letterSpacing="1">RALEIGH · NC</text>
                <line x1="20" y1="30" x2="100" y2="30" stroke="#7a2018" strokeWidth="0.5" opacity="0.4"/>
                <text x="60" y="42" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="6" fill="#7a2018" opacity="0.7" letterSpacing="0.8">26 · MAY · 2026</text>
              </svg>
            </div>
            <form style={t.postcardForm} action="mailto:kimpitts@vistatranquila.com" method="POST" encType="text/plain">
              <div style={t.postcardAddressLine}>To:</div>
              <label htmlFor="pc-name" className="vt-sr-only">Your name</label>
              <input id="pc-name" name="name" style={t.postcardInput} placeholder="Your name · su nombre" required/>
              <label htmlFor="pc-email" className="vt-sr-only">Email</label>
              <input id="pc-email" name="email" type="email" style={t.postcardInput} placeholder="Email · correo electrónico" required/>
              <button type="submit" style={t.postcardBtn}>Mail it to me →</button>
              <p style={t.postcardNote}>Quarterly, in both languages. Unsubscribe anytime.</p>
            </form>
          </div>
        </div>
      </section>

      </main>

      {/* ========================================================== */}
      {/*  COLOPHON — copyright page                                  */}
      {/* ========================================================== */}
      <footer style={t.colophon}>
        <div style={t.colophonRule}><span>· colophon ·</span></div>
        <div style={t.colophonGrid} className="vt-colgrid">
          <div style={t.colophonMain}>
            <div style={t.colophonMark}>Vista <span style={t.colophonMarkEm}>Tranquila</span></div>
            <p style={t.colophonStatement}>
              Vista Tranquila Publishers, LLC is a small, independent
              bilingual children&apos;s press based in Raleigh, North Carolina
              and Antigua, Guatemala. Books are designed in the Carolinas,
              illustrated on location in Guatemala and El Salvador, and printed
              in Guatemala City. Every title is published simultaneously in
              English and <span lang="es">Español</span>.
            </p>
            <p style={t.colophonType}>
              Set in <em>EB Garamond</em> with handwritten annotations in{' '}
              <em>Homemade Apple</em>. Captions in <em>JetBrains Mono</em>.
            </p>
          </div>
          <div style={t.colophonCols}>
            <div>
              <div style={t.colHead}>Catalog</div>
              <a style={t.colLink} href="#shelf">All books</a>
              <a style={t.colLink} href="#shelf">Hardback</a>
              <a style={t.colLink} href="#shelf">Coloring</a>
              <a style={t.colLink} href="https://www.vistatranquila.com/marketplace" target="_blank" rel="noopener">E-Books</a>
            </div>
            <div>
              <div style={t.colHead}>Educators</div>
              <a style={t.colLink} href="order-kit.html">Curriculum Kit · $499</a>
              <a style={t.colLink} href="order-kit.html">DLI Set · $999</a>
              <a style={t.colLink} href="#teachers">Free resources</a>
              <a style={t.colLink} href="order-kit.html">School orders</a>
            </div>
            <div>
              <div style={t.colHead}>Press</div>
              <a style={t.colLink} href="#about">Our story</a>
              <a style={t.colLink} href="../legado/index.html">Legado · custom books</a>
              <a style={t.colLink} href="mailto:kimpitts@vistatranquila.com">kimpitts@vistatranquila.com</a>
              <a style={t.colLink} href="https://www.facebook.com/vistatranquila" target="_blank" rel="noopener">Facebook · Instagram</a>
            </div>
          </div>
        </div>
        <div style={t.colophonBot}>
          <span>© 2026 Vista Tranquila Publishers, LLC</span>
          <span style={t.colophonBotMid}>· <span lang="es">Hecho con cariño, en dos idiomas</span> · Made with care, in two languages ·</span>
          <span>www.vistatranquila.com</span>
        </div>
      </footer>

      {/* ========================================================== */}
      {/*  EMAIL GATE MODAL                                           */}
      {/* ========================================================== */}
      {gateOpen && (
        <div style={t.modalScrim} onClick={closeGate}>
          <div
            style={t.modalCard}
            ref={modalRef}
            onClick={(e) => e.stopPropagation()}
            role="dialog"
            aria-modal="true"
            aria-labelledby="vt-modal-title"
          >
            <button type="button" style={t.modalClose} aria-label="Close" onClick={closeGate}>×</button>
            <div style={t.modalSpec}>
              <span style={t.specNum} aria-hidden="true">§</span>
              <span>Free download · <span lang="es">Descarga gratis</span></span>
            </div>
            {!gateSubmitted ? (
              <>
                <h3 id="vt-modal-title" style={t.modalTitle}>
                  {gateItem && gateItem.en}
                  <span style={t.modalTitleCount}>· {gateItem && gateItem.count} files</span>
                </h3>
                <p style={t.modalEs} lang="es"><em>{gateItem && gateItem.es}</em></p>
                <p style={t.modalBody}>
                  Subscribers get every download free. We send one quarterly
                  letter and never resell.
                </p>
                <p style={t.modalBodyEs} lang="es">
                  <em>Suscriptores reciben todas las descargas. Una carta cada
                  estación. Nunca compartimos.</em>
                </p>
                <form onSubmit={submitGate} style={t.modalForm}>
                  <label htmlFor="vt-modal-email" className="vt-sr-only">Email address</label>
                  <input
                    id="vt-modal-email"
                    type="email"
                    required
                    autoFocus
                    value={gateEmail}
                    onChange={(e) => setGateEmail(e.target.value)}
                    placeholder="your@email.com"
                    style={t.modalInput}
                  />
                  <button type="submit" style={t.modalBtn}>Send the PDF →</button>
                </form>
                <p style={t.modalNote}>
                  One email per season. <span lang="es">Cancelar en cualquier momento.</span>
                </p>
              </>
            ) : (
              <>
                <h3 id="vt-modal-title" style={t.modalTitle}>
                  Welcome aboard.
                  <span style={t.modalTitleCount} lang="es">· Bienvenida</span>
                </h3>
                <p style={t.modalEs} lang="es"><em>Gracias.</em></p>
                <p style={t.modalBody}>
                  Your {gateItem && gateItem.count} {gateItem && gateItem.en.toLowerCase()} are ready. We&apos;ve also added you
                  to the quarterly letter; next one mails in {' '}
                  <em>September</em>.
                </p>
                <div style={t.modalDownloadRow}>
                  <a href="#" style={t.modalDownloadBtn}>Download PDF bundle →</a>
                  <span style={t.modalDownloadMeta}>
                    {gateItem && gateItem.count} files · ~ 8 MB
                  </span>
                </div>
                <button type="button" onClick={closeGate} style={t.modalDoneBtn}>Close</button>
              </>
            )}
          </div>
        </div>
      )}
    </div>
  );
};

// =================== Icons ===================
const BookIcon = () => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
);
const SchoolIcon = () => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M22 10v6"/><path d="M2 10l10-5 10 5-10 5z"/><path d="M6 12v5a6 6 0 0 0 12 0v-5"/></svg>
);
const HeartIcon = () => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
);
const LibraryIcon = () => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M4 19V5a1 1 0 0 1 1-1h3v15H5a1 1 0 0 1-1-1z"/><path d="M9 4h3v15H9z"/><path d="M14 19V4l5 1.5V19a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1z"/></svg>
);

// =================== Paper texture overlay ===================
const PaperTexture = () => (
  <svg style={{position: 'fixed', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', opacity: 0.35, mixBlendMode: 'multiply', zIndex: 1}} aria-hidden="true">
    <filter id="vt-paper">
      <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" seed="7"/>
      <feColorMatrix values="0 0 0 0 0.5  0 0 0 0 0.42  0 0 0 0 0.32  0 0 0 0 0.22 0"/>
    </filter>
    <rect width="100%" height="100%" filter="url(#vt-paper)"/>
  </svg>
);

// =================== Tokens ===================
const PAPER = '#F4ECD8';
const PAPER_DEEP = '#EAE0C5';
const PAPER_DARK = '#E1D4B0';
const INK = '#1F1B16';
const INK_SOFT = '#5A4F3F';
const INK_MUTE = '#867A66';
// ACCENT darkened from #B3563D → #8E3F2A for WCAG AA on small text (5.9:1 on cream).
// Use ACCENT_BRIGHT only for large display sizes where contrast is not an issue.
const ACCENT = '#8E3F2A';
const ACCENT_BRIGHT = '#B3563D';
const WARM = '#E0A445';
const TEAL = '#22687A';
const LEAF = '#3E6B3A';
const RULE = 'rgba(31,27,22,0.16)';
const RULE_SOFT = 'rgba(31,27,22,0.08)';

// =================== CSS (animations, hover states, responsive) ===================
const tCSS = `
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&family=Homemade+Apple&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* Focus styles for keyboard users */
*:focus-visible { outline: 2px solid ${INK}; outline-offset: 2px; }

/* Hover interactions */
.vt-shelfbook { transition: transform 0.4s cubic-bezier(0.2,0.7,0.3,1); }
.vt-shelfbook:hover { transform: translateY(-16px) rotate(0deg) !important; z-index: 99 !important; }
.vt-shelfbook:hover .vt-shadow { opacity: 0.55; transform: translateX(-50%) scale(1.15); }
.vt-tearout { transition: transform 0.25s ease, box-shadow 0.25s ease; cursor: pointer; }
.vt-tearout:hover { transform: rotate(0deg) translateY(-4px) !important; box-shadow: 0 18px 40px rgba(31,27,22,0.18) !important; }
.vt-aud-card { transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.vt-aud-card:hover { color: ${ACCENT} !important; border-color: ${ACCENT} !important; transform: translateY(-2px); }
.vt-aud-card:focus-visible { color: ${ACCENT}; border-color: ${ACCENT}; }

/* Book-page edge decorations (kept) */
.vt-pages { position: absolute; top: 3px; bottom: 3px; right: -4px; width: 5px; background: repeating-linear-gradient(180deg, #f5efde 0px, #f5efde 1px, #d6cdb4 1px, #d6cdb4 2px); box-shadow: 1px 0 2px rgba(0,0,0,0.22); border-radius: 0 1px 1px 0; }
.vt-spine { position: absolute; top: 0; bottom: 0; left: -2px; width: 4px; background: linear-gradient(90deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.12) 60%, transparent 100%); border-radius: 1px 0 0 1px; }
.vt-shelfbook:hover .vt-pages { right: -5px; }

/* Visually hidden helper */
.vt-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Touch-target padding on nav links */
.vt-navlink { padding: 10px 4px; min-height: 44px; display: inline-flex; align-items: center; }

/* Hamburger button — hidden by default on desktop */
.vt-burger { display: none; flex-direction: column; gap: 4px; width: 44px; height: 44px; padding: 10px 8px; border: 1px solid ${RULE}; background: transparent; cursor: pointer; align-items: center; justify-content: center; }
.vt-burger span { display: block; width: 22px; height: 2px; background: ${INK}; }

/* ============= RESPONSIVE BREAKPOINTS ============= */
@media (max-width: 1024px) {
  .vt-shelflist { grid-template-columns: repeat(2, 1fr) !important; }
  .vt-readgrid { grid-template-columns: repeat(2, 1fr) !important; }
  .vt-tearouts { grid-template-columns: repeat(2, 1fr) !important; }
  .vt-pressgrid { grid-template-columns: repeat(2, 1fr) !important; }
  .vt-extrasgrid { grid-template-columns: 1fr !important; }
  .vt-colgrid { grid-template-columns: 1fr !important; gap: 40px !important; }
}

@media (max-width: 768px) {
  /* Nav: collapse to hamburger */
  .vt-burger { display: flex; }
  .vt-nav { display: none !important; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column !important; padding: 16px 20px; background: ${PAPER}; border-top: 1px solid ${RULE}; gap: 0 !important; align-items: stretch; z-index: 50; }
  .vt-nav.vt-nav-open { display: flex !important; }
  .vt-nav .vt-navlink { padding: 14px 8px !important; border-bottom: 1px solid ${RULE_SOFT}; min-height: 48px; }
  .vt-toprow { flex-wrap: wrap; gap: 12px !important; position: relative; }

  /* Headlines smaller */
  .vt-coverh1 { font-size: 56px !important; line-height: 1.0 !important; }
  .vt-h2, .vt-featuredtitle { font-size: 44px !important; line-height: 1.05 !important; }

  /* Stack 2/3-col grids to one col */
  .vt-shelflist { grid-template-columns: 1fr !important; }
  .vt-readgrid { grid-template-columns: 1fr !important; }
  .vt-tearouts { grid-template-columns: 1fr !important; }
  .vt-pressgrid { grid-template-columns: 1fr !important; }
  .vt-extrasgrid { grid-template-columns: 1fr !important; }
  .vt-kitgrid { grid-template-columns: 1fr !important; }
  .vt-aboutstats { grid-template-columns: repeat(2, 1fr) !important; }

  /* Featured + About sections: stack content */
  section[id="featured"] { grid-template-columns: 1fr !important; gap: 40px !important; padding: 64px 24px !important; }
  section[id="about"] { grid-template-columns: 1fr !important; gap: 40px !important; padding: 64px 24px !important; }

  /* Pad reduction */
  header[id="home"] { padding: 24px 20px 40px !important; min-height: auto !important; }
  section[id="shelf"], section[id="teachers"], section[id="schools"],
  section[id="readalouds"], section[id="postcard"], section[id="beyond"] { padding: 64px 20px !important; }

  /* Cover sticker: reflow inline below headline instead of absolute-positioned bottom-right */
  .vt-coversticker { position: static !important; transform: none !important; margin: 32px 0 0 !important; max-width: 100% !important; flex-direction: column !important; padding: 18px !important; padding-right: 18px !important; gap: 18px !important; }
  .vt-coversticker img { width: 140px !important; align-self: center; }

  /* Shelf books: stack as a grid of 3 with row wrapping */
  .vt-shelfbooks { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; align-items: end !important; }
  .vt-shelfbooks .vt-shelfbook { width: 100% !important; }

  /* Postcard: stack the two halves */
  .vt-postcard { grid-template-columns: 1fr !important; }

  /* Audience router: stack */
  .vt-aud-router { grid-template-columns: 1fr !important; }

  /* Modal full-width with small padding */
  .vt-modal-card { width: calc(100% - 32px) !important; }
}

@media (max-width: 375px) {
  .vt-coverh1 { font-size: 44px !important; }
  .vt-h2, .vt-featuredtitle { font-size: 36px !important; }
  .vt-shelfbooks { grid-template-columns: repeat(2, 1fr) !important; }
  header[id="home"] { padding: 18px 14px 32px !important; }
  section[id="shelf"], section[id="teachers"], section[id="schools"],
  section[id="readalouds"], section[id="postcard"], section[id="beyond"],
  section[id="featured"], section[id="about"] { padding: 48px 14px !important; }
}

/* Reduced-motion: disable transforms + transitions, leave layout intact. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .vt-shelfbook, .vt-tearout, .vt-aud-card { transform: none !important; }
  .vt-shelfbook:hover, .vt-tearout:hover { transform: none !important; }
}
`;

const t = {
  root: { position: 'relative', width: '100%', background: PAPER, color: INK, fontFamily: "'EB Garamond', Georgia, serif", fontSize: 17, lineHeight: 1.55, overflowX: 'hidden' },

  // ============================ COVER ============================
  cover: { position: 'relative', minHeight: 920, padding: '32px 56px 56px', overflow: 'hidden', display: 'flex', flexDirection: 'column' },
  coverArt: { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 30%', zIndex: 0 },
  coverWash: { position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at 30% 50%, rgba(244,236,216,0.88) 0%, rgba(244,236,216,0.55) 40%, rgba(244,236,216,0.1) 75%, transparent 100%)', zIndex: 1 },

  topRow: { position: 'relative', zIndex: 5, display: 'flex', alignItems: 'center', gap: 40, padding: '14px 20px', margin: '-14px -20px 0', background: 'rgba(244,236,216,0.78)', backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)', borderRadius: 4, border: `1px solid ${RULE_SOFT}` },
  wordmark: { display: 'flex', flexDirection: 'column' },
  wordmarkVista: { fontFamily: "'EB Garamond', serif", fontWeight: 600, fontSize: 24, letterSpacing: '-0.01em', lineHeight: 1 },
  wordmarkSub: { fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: INK_SOFT, marginTop: 6 },
  nav: { display: 'flex', gap: 24, marginLeft: 'auto', flexWrap: 'wrap' },
  navLink: { fontFamily: "'EB Garamond', serif", fontSize: 16, color: INK, textDecoration: 'none', fontStyle: 'italic' },
  navRight: { display: 'flex', alignItems: 'center', gap: 16 },
  lang: { fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: '0.12em', color: INK_SOFT },
  langSlash: { color: ACCENT, margin: '0 2px' },
  langEs: { color: INK, fontWeight: 500 },
  burger: {},

  // ============================ DONATION RIBBON ============================
  donationRibbon: { position: 'relative', zIndex: 5, marginTop: 10, padding: '10px 18px', background: 'rgba(224,164,69,0.92)', border: `1px solid rgba(31,27,22,0.18)`, borderRadius: 3, display: 'flex', flexWrap: 'wrap', alignItems: 'baseline', gap: 14, color: INK },
  donationRibbonStar: { color: ACCENT, fontSize: 14, lineHeight: 1 },
  donationRibbonEn: { fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: INK },
  // Spanish stays handwritten here — it is genuine marginalia overlaid on a banner.
  donationRibbonEs: { fontFamily: "'Homemade Apple', cursive", fontSize: 15, color: '#3a2815', marginLeft: 'auto', transform: 'rotate(-0.6deg)', display: 'inline-block', lineHeight: 1.2 },

  // ============================ AUDIENCE ROUTER (NEW) ============================
  audienceRouter: { position: 'relative', zIndex: 5, marginTop: 18, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 },
  audienceCard: { display: 'flex', alignItems: 'center', gap: 12, padding: '14px 20px', background: 'rgba(244,236,216,0.88)', border: `1px solid ${RULE}`, color: INK, textDecoration: 'none', fontFamily: "'EB Garamond', serif", fontStyle: 'italic', fontSize: 17, minHeight: 56 },
  audienceIcon: { display: 'inline-flex', color: ACCENT, width: 28, height: 28, alignItems: 'center', justifyContent: 'center' },
  audienceLabel: { flex: 1 },
  audienceArrow: { color: ACCENT, fontStyle: 'normal', fontSize: 18, fontWeight: 500 },

  coverHeadline: { position: 'relative', zIndex: 5, marginTop: 50, maxWidth: 880 },
  coverEyebrow: { fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: INK_SOFT, marginBottom: 32 },
  coverH1: { fontFamily: "'EB Garamond', serif", fontWeight: 500, fontSize: 88, lineHeight: 0.95, letterSpacing: '-0.025em', margin: 0, color: INK, textWrap: 'balance' },
  coverH1Em: { fontStyle: 'italic', fontWeight: 500, color: ACCENT_BRIGHT }, // large display, contrast ok
  // Genuine marginalia — Homemade Apple is appropriate
  coverHand: { fontFamily: "'Homemade Apple', cursive", fontSize: 30, color: INK_SOFT, marginTop: 24, lineHeight: 1.3, transform: 'rotate(-1deg)', display: 'inline-block', marginLeft: 8 },
  coverHandLede: { fontFamily: "'EB Garamond', serif", fontStyle: 'italic', fontSize: 24, color: INK_SOFT, marginTop: 20, lineHeight: 1.35, maxWidth: 640 },
  founderHeadshot: { width: 96, height: 96, borderRadius: '50%', objectFit: 'cover', border: `2px solid ${PAPER}`, boxShadow: '0 6px 16px rgba(31,27,22,0.18)', marginTop: 12 },
  scarcityBanner: { display: 'flex', flexWrap: 'wrap', alignItems: 'baseline', gap: 14, marginTop: 36, padding: '16px 22px', background: 'rgba(224,164,69,0.18)', borderLeft: `3px solid ${WARM}`, fontFamily: "'EB Garamond', serif", fontSize: 15, color: INK, lineHeight: 1.5 },
  scarcityIcon: { color: ACCENT, fontSize: 18, lineHeight: 1 },
  scarcityEn: { flex: '1 1 auto', fontStyle: 'normal' },
  scarcityEs: { flex: '1 1 100%', fontSize: 13, color: INK_SOFT, marginTop: 4 },
  extraScarcity: { display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 10, padding: '10px 12px', background: 'rgba(224,164,69,0.16)', borderLeft: `2px solid ${WARM}`, fontFamily: "'EB Garamond', serif", fontStyle: 'italic', fontSize: 13, color: INK_SOFT, lineHeight: 1.45 },
  extraScarcityIcon: { color: ACCENT, fontSize: 13, lineHeight: 1 },

  // ============================ MEDALS CLUSTER ============================
  medalCluster: { marginTop: 36, maxWidth: 860 },
  medalClusterLabel: { fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: INK_SOFT, marginBottom: 14, paddingBottom: 10, borderBottom: `1px solid ${RULE}` },
  medalRow: { display: 'flex', gap: 18, flexWrap: 'wrap' },
  medal: { flex: '1 1 220px', minWidth: 220, maxWidth: 280, padding: '14px 16px', background: 'rgba(244,236,216,0.86)', border: `1px solid ${RULE}`, borderLeft: `3px solid ${WARM}`, display: 'flex', flexDirection: 'column', gap: 4, boxShadow: '0 4px 12px rgba(31,27,22,0.10)' },
  medalBronze: { borderLeftColor: '#a06a3c' },
  medalSilver: { borderLeftColor: '#9ca09c' },
  medalStars: { color: ACCENT, fontSize: 11, letterSpacing: '0.3em', lineHeight: 1 },
  medalMetal: { fontFamily: "'EB Garamond', serif", fontStyle: 'italic', fontSize: 18, color: INK, letterSpacing: '-0.01em', lineHeight: 1.1 },
  medalCategory: { fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase', color: INK_SOFT, lineHeight: 1.35 },
  medalBook: { fontFamily: "'EB Garamond', serif", fontSize: 13, color: INK, marginTop: 2, lineHeight: 1.3 },

  coverCredit: { position: 'absolute', bottom: 96, left: 56, zIndex: 5, display: 'flex', alignItems: 'baseline', gap: 12, fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: INK_SOFT, maxWidth: 380 },
  coverCreditNum: { fontFamily: "'EB Garamond', serif", fontStyle: 'italic', fontSize: 18, color: ACCENT, letterSpacing: 0, textTransform: 'none' },
  coverCreditText: { fontFamily: "'EB Garamond', serif", fontSize: 13, color: INK_SOFT, letterSpacing: 0, textTransform: 'none', fontStyle: 'italic', lineHeight: 1.4 },
  // Marginalia
  coverCreditHand: { fontFamily: "'Homemade Apple', cursive", fontSize: 13, color: ACCENT, fontStyle: 'normal' },

  coverSticker: { position: 'absolute', bottom: 96, right: 56, zIndex: 5, display: 'flex', gap: 28, alignItems: 'center', background: PAPER, padding: 24, paddingRight: 44, textDecoration: 'none', color: INK, boxShadow: '0 30px 70px rgba(31,27,22,0.28), 0 4px 12px rgba(31,27,22,0.12)', transform: 'rotate(-1.5deg)', maxWidth: 720, border: `1px solid ${RULE}` },
  coverStickerImg: { width: 200, height: 'auto', display: 'block', boxShadow: '0 8px 20px rgba(31,27,22,0.22)' },
  coverStickerText: { display: 'flex', flexDirection: 'column' },
  coverStickerNew: { fontFamily: "'JetBrains Mono', monospace", fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: ACCENT },
  coverStickerTitle: { fontFamily: "'EB Garamond', serif", fontWeight: 600, fontSize: 36, marginTop: 8, lineHeight: 1.1, letterSpacing: '-0.01em' },
  // Spanish parallel title is information, not marginalia → serif italic
  coverStickerEs: { fontFamily: "'EB Garamond', serif", fontSize: 22, color: INK_SOFT, marginTop: 6, lineHeight: 1.25 },
  coverStickerCta: { fontFamily: "'EB Garamond', serif", fontStyle: 'italic', fontSize: 20, color: ACCENT, marginTop: 18 },

  coverFoot: { position: 'absolute', bottom: 24, left: 56, right: 56, zIndex: 5, display: 'flex', justifyContent: 'space-between', fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: INK_SOFT, paddingTop: 16, borderTop: `1px solid ${RULE}` },
  coverFootMid: { color: ACCENT },

  // ============================ DEDICATION ============================
  dedication: { padding: '120px 56px', background: PAPER, position: 'relative', zIndex: 2 },
  dedicationRule: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 16, marginBottom: 80 },
  dedicationRuleText: { fontFamily: "'EB Garamond', serif", fontStyle: 'italic', fontSize: 14, color: INK_MUTE, padding: '0 24px', position: 'relative' },
  dedicationBody: { maxWidth: 720, margin: '0 auto', textAlign: 'center' },
  dedicationLabel: { fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: ACCENT, marginBottom: 36 },
  dedicationQuote: { fontFamily: "'EB Garamond', serif", fontStyle: 'italic', fontWeight: 400, fontSize: 44, lineHeight: 1.3, letterSpacing: '-0.01em', margin: 0, color: INK, textWrap: 'pretty' },
  // Genuine marginalia
  dedicationHand: { fontFamily: "'Homemade Apple', cursive", fontSize: 22, color: INK_SOFT, marginTop: 36, lineHeight: 1.4, transform: 'rotate(-0.5deg)' },
  dedicationSig: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12, marginTop: 56, fontFamily: "'EB Garamond', serif", fontStyle: 'italic', fontSize: 15, color: INK_SOFT },
  dedicationStar: { color: ACCENT, fontSize: 18 },

  // shared section heading "spec" line
  spec: { display: 'flex', alignItems: 'baseline', gap: 14, fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: INK_SOFT, marginBottom: 28, flexWrap: 'wrap' },
  specNum: { fontFamily: "'EB Garamond', serif", fontStyle: 'italic', fontSize: 22, color: ACCENT_BRIGHT, letterSpacing: 0, textTransform: 'none', lineHeight: 1 },
  specLabel: {},
  h2: { fontFamily: "'EB Garamond', serif", fontWeight: 500, fontSize: 80, lineHeight: 0.96, letterSpacing: '-0.025em', margin: 0, color: INK, textWrap: 'balance' },
  h2Em: { fontStyle: 'italic', fontWeight: 500, color: ACCENT_BRIGHT },
  h2EmLight: { fontStyle: 'italic', fontWeight: 500, color: WARM },

  // ============================ FEATURED ============================
  featured: { padding: '120px 56px', background: PAPER_DEEP, borderTop: `1px solid ${RULE_SOFT}`, borderBottom: `1px solid ${RULE_SOFT}`, display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 80, alignItems: 'center', position: 'relative', zIndex: 2 },
  featuredLeft: {},
  featuredTitle: { fontFamily: "'EB Garamond', serif", fontWeight: 500, fontSize: 88, lineHeight: 0.94, letterSpacing: '-0.028em', margin: 0, color: INK },
  featuredTitleEm: { fontStyle: 'italic', color: ACCENT_BRIGHT },
  // Spanish parallel — serif italic, same hierarchy as English, not handwriting
  featuredTitleEs: { fontFamily: "'EB Garamond', serif", fontSize: 26, color: INK_SOFT, marginTop: 14, lineHeight: 1.3 },
  featuredBody: { fontSize: 18, lineHeight: 1.65, color: INK, marginTop: 32, maxWidth: 540 },
  featuredBodyEs: { fontSize: 17, lineHeight: 1.65, color: INK_SOFT, marginTop: 14, maxWidth: 540 },
  featuredSpecs: { display: 'flex', flexDirection: 'column', marginTop: 40, borderTop: `1px solid ${RULE}` },
  specRow: { display: 'grid', gridTemplateColumns: '180px 1fr', padding: '14px 0', borderBottom: `1px solid ${RULE_SOFT}`, alignItems: 'baseline' },
  specKey: { fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: INK_MUTE },
  specVal: { fontFamily: "'EB Garamond', serif", fontSize: 16, color: INK },
  code: { fontFamily: "'JetBrains Mono', monospace", fontSize: 13, color: INK_SOFT },
  featuredCtas: { display: 'flex', gap: 24, marginTop: 36, alignItems: 'center', flexWrap: 'wrap' },
  btnPrimary: { display: 'inline-flex', alignItems: 'center', gap: 8, background: INK, color: PAPER, padding: '16px 24px', textDecoration: 'none', fontFamily: "'EB Garamond', serif", fontSize: 16, fontWeight: 500, border: 'none', cursor: 'pointer', letterSpacing: '0.01em', minHeight: 48 },
  btnGhost: { display: 'inline-flex', alignItems: 'center', gap: 8, color: INK, padding: '16px 0', background: 'transparent', fontFamily: "'EB Garamond', serif", fontSize: 16, fontStyle: 'italic', borderBottom: `1px solid ${INK}`, border: 'none', borderBottomWidth: 1, borderBottomStyle: 'solid', borderBottomColor: INK, cursor: 'pointer', minHeight: 48 },

  featuredRight: { position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 },
  featuredCover: { position: 'relative', width: 420, maxWidth: '100%', padding: 18, background: PAPER, boxShadow: '0 40px 80px rgba(31,27,22,0.28), 0 4px 12px rgba(31,27,22,0.12)', transform: 'rotate(-1.2deg)' },
  featuredCoverImg: { width: '100%', display: 'block' },
  featuredCoverAward: { position: 'absolute', top: -20, right: -20, width: 96, height: 96, borderRadius: '50%', background: WARM, color: INK, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', boxShadow: '0 6px 18px rgba(31,27,22,0.22)', transform: 'rotate(10deg)', border: `2px solid ${INK}` },
  featuredCoverAwardStar: { fontSize: 18, color: ACCENT },
  featuredCoverAwardText: { fontFamily: "'JetBrains Mono', monospace", fontSize: 8, letterSpacing: '0.12em', textAlign: 'center', textTransform: 'uppercase', lineHeight: 1.3, marginTop: 2 },
  // Genuine marginalia — handwriting appropriate
  featuredCoverHand: { fontFamily: "'Homemade Apple', cursive", fontSize: 16, color: INK_SOFT, marginTop: 8, transform: 'rotate(-1deg)', display: 'inline-flex', alignItems: 'center', gap: 6 },
  featuredCoverArrow: { fontSize: 20, color: ACCENT },

  // ============================ SHELF ============================
  shelf: { padding: '140px 56px 100px', background: PAPER, position: 'relative', zIndex: 2 },
  shelfHead: { maxWidth: 720, marginBottom: 24 },
  // Spanish parallel — serif italic, NOT handwriting
  shelfSub: { fontFamily: "'EB Garamond', serif", fontSize: 22, color: INK_SOFT, marginTop: 14, lineHeight: 1.3 },
  shelfFilters: { display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 48, marginBottom: 64 },
  filterActive: { fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', padding: '8px 14px', background: INK, color: PAPER },
  filter: { fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', padding: '8px 14px', border: `1px solid ${RULE}`, color: INK_SOFT },

  shelfStage: { position: 'relative', marginBottom: 80 },
  shelfBooks: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 16, paddingBottom: 0, position: 'relative', zIndex: 2 },
  shelfBook: { position: 'relative', width: 'calc((100% - 96px) / 7)', display: 'flex', flexDirection: 'column', alignItems: 'center', transformOrigin: 'bottom center' },
  shelfCoverWrap: { position: 'relative', width: '100%', aspectRatio: '3/4', overflow: 'visible', boxShadow: '0 18px 30px rgba(31,27,22,0.32), -3px 0 6px rgba(31,27,22,0.18), 4px 0 8px rgba(31,27,22,0.12), inset 0 -2px 4px rgba(31,27,22,0.18), inset 2px 0 3px rgba(255,255,255,0.18)' },
  shelfCover: { width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center', display: 'block', borderRadius: '1px 2px 2px 1px' },
  shelfNew: { position: 'absolute', top: -10, right: -10, background: ACCENT, color: PAPER, fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: '0.16em', padding: '4px 8px', textTransform: 'uppercase', zIndex: 5, transform: 'rotate(8deg)' },
  shelfShadow: { position: 'absolute', bottom: -8, left: '50%', width: '110%', height: 18, transform: 'translateX(-50%)', background: 'radial-gradient(ellipse at center, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.18) 50%, transparent 75%)', filter: 'blur(3px)', opacity: 0.7, transition: 'opacity 0.3s, transform 0.3s', pointerEvents: 'none', zIndex: 0 },
  shelfPlank: { position: 'relative', marginTop: -2, height: 32, zIndex: 1 },
  shelfPlankFace: { height: 22, background: 'linear-gradient(180deg, #7a5a3a 0%, #5e4329 100%)', boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -2px 0 rgba(0,0,0,0.25), 0 4px 16px rgba(0,0,0,0.18)' },
  shelfPlankEdge: { height: 10, background: 'linear-gradient(180deg, #4a3320 0%, #2e1f12 100%)' },

  shelfList: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, marginTop: 80, borderTop: `1px solid ${RULE}` },
  listBook: { padding: '24px 24px 28px 0', borderRight: `1px solid ${RULE_SOFT}`, borderBottom: `1px solid ${RULE_SOFT}` },
  listRow: { display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 14, fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: INK_MUTE },
  listNum: { fontFamily: "'EB Garamond', serif", fontStyle: 'italic', fontSize: 17, color: ACCENT, letterSpacing: 0, textTransform: 'none', lineHeight: 1 },
  listRule: { flex: 1, height: 1, background: RULE },
  listPlace: {},
  listPrice: { color: ACCENT, fontFamily: "'EB Garamond', serif", fontSize: 14, fontStyle: 'italic', letterSpacing: 0, textTransform: 'none' },
  listTitle: { fontFamily: "'EB Garamond', serif", fontWeight: 500, fontSize: 19, lineHeight: 1.2, margin: 0, color: INK },
  // Spanish parallel — serif italic, NOT handwriting
  listEs: { fontFamily: "'EB Garamond', serif", fontSize: 15, color: INK_SOFT, marginTop: 4, lineHeight: 1.3 },
  listAward: { display: 'flex', alignItems: 'center', gap: 6, marginTop: 10, fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase', color: ACCENT },
  listAwardStar: { color: ACCENT_BRIGHT, fontSize: 12 },
  listMeta: { marginTop: 14, display: 'flex', flexDirection: 'column', gap: 4, paddingTop: 12, borderTop: `1px dashed ${RULE_SOFT}` },
  listMetaKey: { fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase', color: INK_MUTE, display: 'inline-block', width: 70 },
  listMetaVal: { fontFamily: "'EB Garamond', serif", fontSize: 13, color: INK },
  listFoot: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 14 },
  listFormat: { fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase', color: INK_MUTE },
  listCta: { fontFamily: "'EB Garamond', serif", fontStyle: 'italic', fontSize: 14, color: INK, textDecoration: 'none', borderBottom: `1px solid ${INK}`, padding: '6px 2px', minHeight: 32, display: 'inline-block' },

  // ============================ INTERLUDE ============================
  interlude: { position: 'relative', height: 620, overflow: 'hidden', zIndex: 2 },
  interludeImg: { width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 70%', display: 'block' },
  interludeOverlay: { position: 'absolute', inset: 0, background: 'linear-gradient(95deg, rgba(244,236,216,0.95) 0%, rgba(244,236,216,0.7) 35%, rgba(244,236,216,0.2) 60%, transparent 80%)', display: 'flex', alignItems: 'center', padding: '0 56px' },
  interludeText: { maxWidth: 620 },
  interludeLabel: { fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: ACCENT, marginBottom: 28 },
  interludeQuote: { fontFamily: "'EB Garamond', serif", fontWeight: 400, fontSize: 64, lineHeight: 1.1, letterSpacing: '-0.02em', margin: 0, color: INK, fontStyle: 'italic' },
  // Genuine marginalia (a child's note in the margin of a quote)
  interludeHand: { fontFamily: "'Homemade Apple', cursive", fontSize: 26, color: INK_SOFT, marginTop: 24, lineHeight: 1.3, transform: 'rotate(-0.5deg)', display: 'inline-block' },
  interludeCredit: { display: 'flex', alignItems: 'baseline', gap: 12, marginTop: 40, fontFamily: "'EB Garamond', serif", fontSize: 13, fontStyle: 'italic', color: INK_SOFT, paddingTop: 20, borderTop: `1px solid ${RULE}` },
  interludeCreditNum: { fontFamily: "'EB Garamond', serif", fontStyle: 'italic', fontSize: 18, color: ACCENT },

  // ============================ TEACHERS ============================
  teachers: { padding: '140px 56px', background: PAPER_DEEP, borderTop: `1px solid ${RULE_SOFT}`, position: 'relative', zIndex: 2 },
  teachersHead: { maxWidth: 760, marginBottom: 64 },
  // Spanish parallel — serif italic
  teachersSub: { fontFamily: "'EB Garamond', serif", fontSize: 19, color: ACCENT, marginTop: 16, lineHeight: 1.4 },
  teachersBody: { fontSize: 17, lineHeight: 1.7, color: INK, marginTop: 28, maxWidth: 620 },
  tearouts: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 },
  tearout: { background: PAPER, position: 'relative', padding: 0, boxShadow: '0 10px 28px rgba(31,27,22,0.10)', textDecoration: 'none', color: INK, border: `1px solid ${RULE_SOFT}`, overflow: 'hidden' },
  tearoutPunch: { display: 'flex', justifyContent: 'space-around', padding: '12px 24px 4px', borderBottom: `1px dashed ${RULE}` },
  tearoutBody: { padding: '28px 32px 32px', display: 'flex', flexDirection: 'column', gap: 12, minHeight: 220 },
  tearoutCount: { fontFamily: "'EB Garamond', serif", fontWeight: 500, fontSize: 80, lineHeight: 0.9, color: ACCENT_BRIGHT, letterSpacing: '-0.04em', fontStyle: 'italic' },
  tearoutLabel: { fontFamily: "'EB Garamond', serif", fontWeight: 500, fontSize: 22, lineHeight: 1.2 },
  // Spanish parallel — serif italic, NOT handwriting
  tearoutEs: { fontFamily: "'EB Garamond', serif", fontSize: 16, color: INK_SOFT, lineHeight: 1.35 },
  tearoutDl: { fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', marginTop: 'auto', color: ACCENT },

  // ============================ PRESS ============================
  press: { padding: '140px 56px', position: 'relative', zIndex: 2 },
  pressGrid: { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 40 },
  pressFig: { margin: 0 },
  pressStars: { color: ACCENT_BRIGHT, fontSize: 14, letterSpacing: '0.3em', marginBottom: 20 },
  pressQuote: { fontFamily: "'EB Garamond', serif", fontStyle: 'italic', fontSize: 26, lineHeight: 1.35, margin: 0, color: INK, textWrap: 'pretty' },
  // Spanish parallel — serif italic
  pressEs: { fontFamily: "'EB Garamond', serif", fontSize: 17, color: INK_SOFT, marginTop: 16, lineHeight: 1.45 },
  pressSrc: { fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: INK_MUTE, marginTop: 24, paddingTop: 16, borderTop: `1px solid ${RULE}` },
  pressUnverified: { color: INK_MUTE, fontStyle: 'italic', textTransform: 'none' },

  // ============================ SCHOOLS ============================
  schools: { padding: '140px 56px', background: PAPER_DEEP, borderTop: `1px solid ${RULE_SOFT}`, borderBottom: `1px solid ${RULE_SOFT}`, position: 'relative', zIndex: 2 },
  schoolsHead: { maxWidth: 820, marginBottom: 72 },
  // Spanish parallel — serif italic
  schoolsSub: { fontFamily: "'EB Garamond', serif", fontSize: 19, color: ACCENT, marginTop: 18, lineHeight: 1.4 },
  kitGrid: { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 36 },
  kitCard: { background: PAPER, padding: '40px 40px 36px', border: `1px solid ${RULE}`, boxShadow: '0 30px 60px rgba(31,27,22,0.16), 0 4px 12px rgba(31,27,22,0.08)', display: 'flex', flexDirection: 'column', gap: 16, position: 'relative' },
  kitTopRow: { display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', paddingBottom: 14, borderBottom: `1px solid ${RULE}` },
  kitTier: { fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: INK_SOFT },
  kitPriceWrap: { display: 'flex', alignItems: 'baseline', gap: 10 },
  kitListValue: { fontFamily: "'EB Garamond', serif", fontSize: 22, color: INK_MUTE, textDecoration: 'line-through' },
  kitPrice: { fontFamily: "'EB Garamond', serif", fontStyle: 'italic', fontSize: 36, color: ACCENT_BRIGHT, lineHeight: 1, letterSpacing: '-0.02em' },
  kitTitle: { fontFamily: "'EB Garamond', serif", fontWeight: 500, fontSize: 30, lineHeight: 1.1, margin: 0, color: INK, letterSpacing: '-0.015em' },
  // Spanish parallel — serif italic
  kitTitleEs: { fontFamily: "'EB Garamond', serif", fontSize: 17, color: INK_SOFT, lineHeight: 1.3, margin: 0 },
  kitSummary: { fontFamily: "'EB Garamond', serif", fontSize: 16, lineHeight: 1.6, color: INK, margin: 0 },

  // ============= NEW: value stack block =============
  kitStack: { marginTop: 6, padding: '14px 16px', background: PAPER_DEEP, border: `1px solid ${RULE_SOFT}` },
  kitStackHead: { fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: INK_SOFT, marginBottom: 10 },
  kitStackList: { listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 4 },
  kitStackRow: { display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '4px 0', borderBottom: `1px dashed ${RULE_SOFT}`, fontFamily: "'EB Garamond', serif", fontSize: 14 },
  kitStackItem: { color: INK, flex: 1, paddingRight: 12 },
  kitStackVal: { fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: INK_SOFT },
  kitStackTotal: { display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 10, paddingTop: 10, borderTop: `1px solid ${RULE}`, fontFamily: "'EB Garamond', serif", fontSize: 14, color: INK_SOFT, textDecoration: 'line-through' },
  kitStackTotalNum: { fontFamily: "'EB Garamond', serif", fontStyle: 'italic', fontSize: 18, color: INK_SOFT },
  kitStackPrice: { display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 6, fontFamily: "'EB Garamond', serif", fontStyle: 'italic', fontSize: 16, color: ACCENT },
  kitStackPriceNum: { fontFamily: "'EB Garamond', serif", fontStyle: 'italic', fontSize: 22, color: ACCENT_BRIGHT },

  kitStandards: { fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: INK_SOFT, paddingTop: 12, borderTop: `1px dashed ${RULE}` },
  kitGive: { display: 'flex', gap: 10, alignItems: 'baseline', fontFamily: "'EB Garamond', serif", fontSize: 14, fontStyle: 'italic', color: INK_SOFT, padding: '10px 0' },
  kitGiveMark: { color: ACCENT, fontSize: 14 },
  kitRisk: { fontFamily: "'EB Garamond', serif", fontSize: 13, color: INK_SOFT, lineHeight: 1.5, padding: '14px 16px', background: 'rgba(224,164,69,0.16)', borderLeft: `3px solid ${WARM}` },
  kitRiskLabel: { display: 'block', fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: '0.16em', textTransform: 'uppercase', color: ACCENT, fontStyle: 'normal', marginBottom: 4 },
  kitCta: { display: 'inline-block', marginTop: 'auto', padding: '16px 22px', background: INK, color: PAPER, fontFamily: "'EB Garamond', serif", fontSize: 16, fontWeight: 500, textDecoration: 'none', textAlign: 'center', minHeight: 48 },
  schoolsFoot: { marginTop: 56, fontFamily: "'EB Garamond', serif", fontStyle: 'italic', fontSize: 15, color: INK_SOFT, textAlign: 'center', maxWidth: 720, marginLeft: 'auto', marginRight: 'auto', lineHeight: 1.7 },
  schoolsFootLink: { color: ACCENT, textDecoration: 'none', borderBottom: `1px solid ${ACCENT}`, padding: '4px 0' },
  schoolsFootMark: { color: ACCENT, margin: '0 10px' },

  // ============================ ABOUT ============================
  about: { padding: '140px 56px', background: PAPER_DEEP, borderTop: `1px solid ${RULE_SOFT}`, display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 72, alignItems: 'center', position: 'relative', zIndex: 2 },
  aboutArtWrap: { position: 'relative' },
  aboutArt: { width: '100%', display: 'block', boxShadow: '0 30px 60px rgba(31,27,22,0.22)', border: `8px solid ${PAPER}` },
  aboutArtCap: { display: 'flex', alignItems: 'baseline', gap: 10, marginTop: 18, fontFamily: "'EB Garamond', serif", fontSize: 13, fontStyle: 'italic', color: INK_SOFT },
  aboutArtCapNum: { fontFamily: "'EB Garamond', serif", fontStyle: 'italic', fontSize: 18, color: ACCENT },
  aboutArtCapText: {},
  aboutText: {},
  // Spanish parallel — serif italic
  aboutSub: { fontFamily: "'EB Garamond', serif", fontSize: 19, color: INK_SOFT, marginTop: 14, lineHeight: 1.4 },
  aboutBody: { fontSize: 18, lineHeight: 1.7, color: INK, marginTop: 28, maxWidth: 600 },
  // Spanish parallel — serif italic
  aboutGiveEs: { fontFamily: "'EB Garamond', serif", fontSize: 18, color: ACCENT, marginTop: 16, lineHeight: 1.4 },
  aboutStats: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, marginTop: 48, borderTop: `1px solid ${INK}` },
  statCell: { padding: '20px 16px 0 0', borderRight: `1px solid ${RULE_SOFT}` },
  statNum: { fontFamily: "'EB Garamond', serif", fontWeight: 500, fontSize: 48, lineHeight: 0.9, letterSpacing: '-0.025em' },
  statLabel: { fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: INK_MUTE, marginTop: 10 },

  // ============================ BEYOND ============================
  beyond: { padding: '140px 56px', background: PAPER, borderTop: `1px solid ${RULE_SOFT}`, position: 'relative', zIndex: 2 },
  beyondHead: { maxWidth: 820, marginBottom: 72 },
  extrasGrid: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28 },
  extraCard: { background: PAPER_DEEP, padding: '36px 32px 32px', border: `1px solid ${RULE_SOFT}`, boxShadow: '0 18px 40px rgba(31,27,22,0.12)', display: 'flex', flexDirection: 'column', gap: 14, position: 'relative' },
  extraNum: { fontFamily: "'EB Garamond', serif", fontStyle: 'italic', fontSize: 26, color: ACCENT, lineHeight: 1, marginBottom: 4 },
  extraTitle: { fontFamily: "'EB Garamond', serif", fontWeight: 500, fontSize: 26, lineHeight: 1.15, margin: 0, color: INK, letterSpacing: '-0.01em' },
  // Spanish parallel — serif italic
  extraEs: { fontFamily: "'EB Garamond', serif", fontSize: 17, color: INK_SOFT, lineHeight: 1.3, margin: 0 },
  extraBody: { fontFamily: "'EB Garamond', serif", fontSize: 15, lineHeight: 1.65, color: INK, margin: '6px 0 0' },
  extraCta: { display: 'inline-block', marginTop: 'auto', paddingTop: 18, fontFamily: "'EB Garamond', serif", fontStyle: 'italic', fontSize: 17, color: ACCENT, textDecoration: 'none', borderTop: `1px solid ${RULE_SOFT}` },

  // ============================ READ-ALOUDS ============================
  readalouds: { padding: '140px 56px', background: INK, color: PAPER, position: 'relative', zIndex: 2 },
  readHead: { maxWidth: 760, marginBottom: 64 },
  // Spanish parallel — serif italic (on dark background, warmer color)
  readSub: { fontFamily: "'EB Garamond', serif", fontSize: 19, color: WARM, marginTop: 14, lineHeight: 1.4 },
  readGrid: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 },
  readCard: { color: PAPER },
  readThumb: { position: 'relative', aspectRatio: '3/4', background: PAPER_DARK, overflow: 'hidden', marginBottom: 18, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 12 },
  readThumbImg: { width: '100%', height: '100%', objectFit: 'contain', display: 'block' },
  readPlay: { position: 'absolute', width: 64, height: 64, borderRadius: '50%', background: WARM, color: INK, border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', paddingLeft: 4, boxShadow: '0 8px 24px rgba(0,0,0,0.4)', zIndex: 2 },
  readLen: { position: 'absolute', bottom: 12, right: 12, background: INK, color: PAPER, fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: '0.1em', padding: '3px 8px', zIndex: 2 },
  readTitle: { fontFamily: "'EB Garamond', serif", fontWeight: 500, fontSize: 19, lineHeight: 1.2 },
  // Spanish parallel — serif italic
  readEs: { fontFamily: "'EB Garamond', serif", fontSize: 15, color: 'rgba(224,164,69,0.95)', marginTop: 6, lineHeight: 1.3 },
  readMeta: { fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(244,236,216,0.6)', marginTop: 12, paddingTop: 10, borderTop: '1px solid rgba(244,236,216,0.15)' },

  // ============================ POSTCARD ============================
  postcardSection: { padding: '140px 56px', position: 'relative', zIndex: 2 },
  postcardHead: { maxWidth: 760, marginBottom: 64 },

  postcard: { display: 'grid', gridTemplateColumns: '1fr 1fr', maxWidth: 1100, margin: '0 auto', background: PAPER, boxShadow: '0 30px 70px rgba(31,27,22,0.28), 0 4px 12px rgba(31,27,22,0.1)', border: `1px solid ${RULE}`, position: 'relative' },
  postcardLeft: { padding: '48px 44px', borderRight: `1.5px dashed ${RULE}` },
  // Genuine marginalia (handwritten greeting on a postcard) — appropriate
  postcardHand: { fontFamily: "'Homemade Apple', cursive", fontSize: 26, color: INK, margin: 0, transform: 'rotate(-1deg)', display: 'inline-block' },
  postcardBody: { fontFamily: "'EB Garamond', serif", fontSize: 17, lineHeight: 1.65, color: INK, marginTop: 20 },
  postcardLines: { marginTop: 28, display: 'flex', flexDirection: 'column', gap: 14 },
  postcardLine: { height: 1, background: RULE_SOFT },
  // Marginalia (signature)
  postcardSig: { fontFamily: "'Homemade Apple', cursive", fontSize: 22, color: ACCENT, marginTop: 32, lineHeight: 1.5, transform: 'rotate(-0.5deg)', display: 'inline-block' },
  postcardSigEn: { fontFamily: "'EB Garamond', serif", fontSize: 13, color: INK_SOFT, fontStyle: 'italic', transform: 'rotate(0.5deg)', display: 'inline-block' },

  postcardRight: { padding: '40px 44px', position: 'relative' },

  // Postage stamp
  stamp: { position: 'absolute', top: 32, right: 32, width: 104, height: 124, background: WARM, padding: 6, border: `1px dashed ${INK}`, transform: 'rotate(3deg)', boxShadow: '0 4px 12px rgba(31,27,22,0.18)' },
  stampInner: { width: '100%', height: '100%', background: 'linear-gradient(135deg, #c7843a 0%, #e0a445 50%, #b3563d 100%)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-between', padding: '10px 6px', color: PAPER, position: 'relative' },
  stampMark: { fontFamily: "'EB Garamond', serif", fontWeight: 700, fontSize: 26, letterSpacing: '-0.02em', lineHeight: 1, fontStyle: 'italic' },
  stampLabel: { fontFamily: "'JetBrains Mono', monospace", fontSize: 7, letterSpacing: '0.12em', textAlign: 'center', textTransform: 'uppercase', lineHeight: 1.4 },
  stampValue: { fontFamily: "'EB Garamond', serif", fontWeight: 600, fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase' },

  postmark: { position: 'absolute', top: 70, right: 130, opacity: 0.8, transform: 'rotate(-12deg)' },

  postcardForm: { display: 'flex', flexDirection: 'column', gap: 14, paddingTop: 168 },
  postcardAddressLine: { fontFamily: "'EB Garamond', serif", fontStyle: 'italic', fontSize: 14, color: INK_SOFT },
  postcardInput: { padding: '12px 0', border: 'none', borderBottom: `1px solid ${INK}`, background: 'transparent', fontFamily: "'EB Garamond', serif", fontSize: 17, color: INK, outline: 'none', fontStyle: 'italic', minHeight: 44 },
  postcardBtn: { marginTop: 12, padding: '16px 22px', background: INK, color: PAPER, border: 'none', fontFamily: "'EB Garamond', serif", fontSize: 16, fontWeight: 500, cursor: 'pointer', textAlign: 'left', minHeight: 48 },
  postcardNote: { fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase', color: INK_MUTE, marginTop: 4 },

  // ============================ COLOPHON ============================
  colophon: { background: PAPER, color: INK, padding: '80px 56px 32px', position: 'relative', zIndex: 2, borderTop: `1px solid ${RULE}` },
  colophonRule: { display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 56, fontFamily: "'EB Garamond', serif", fontStyle: 'italic', fontSize: 13, color: INK_MUTE, letterSpacing: '0.1em' },
  colophonGrid: { display: 'grid', gridTemplateColumns: '1.2fr 2fr', gap: 80, paddingBottom: 48, borderBottom: `1px solid ${RULE}` },
  colophonMain: {},
  colophonMark: { fontFamily: "'EB Garamond', serif", fontWeight: 600, fontSize: 44, lineHeight: 1, letterSpacing: '-0.02em' },
  colophonMarkEm: { fontStyle: 'italic', color: ACCENT_BRIGHT, fontWeight: 500 },
  colophonStatement: { fontFamily: "'EB Garamond', serif", fontSize: 16, lineHeight: 1.7, color: INK, marginTop: 24, maxWidth: 460 },
  colophonType: { fontFamily: "'EB Garamond', serif", fontSize: 14, lineHeight: 1.6, color: INK_SOFT, marginTop: 18, maxWidth: 460, fontStyle: 'italic' },
  colophonCols: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 },
  colHead: { fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: INK_MUTE, marginBottom: 16 },
  colLink: { display: 'block', fontFamily: "'EB Garamond', serif", fontSize: 15, color: INK, textDecoration: 'none', padding: '8px 0', fontStyle: 'italic', minHeight: 36 },
  colophonBot: { paddingTop: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16, fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: INK_MUTE },
  colophonBotMid: { color: ACCENT },

  // ============================ EMAIL GATE MODAL ============================
  modalScrim: { position: 'fixed', inset: 0, background: 'rgba(31,27,22,0.62)', backdropFilter: 'blur(4px)', WebkitBackdropFilter: 'blur(4px)', zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 },
  modalCard: { position: 'relative', background: PAPER, padding: '44px 44px 36px', maxWidth: 520, width: '100%', boxShadow: '0 40px 80px rgba(0,0,0,0.5)', border: `1px solid ${RULE}`, transform: 'rotate(-0.4deg)' },
  modalClose: { position: 'absolute', top: 8, right: 8, width: 44, height: 44, border: 'none', background: 'transparent', fontFamily: "'EB Garamond', serif", fontSize: 28, color: INK_SOFT, cursor: 'pointer', lineHeight: 1, padding: 0 },
  modalSpec: { display: 'flex', alignItems: 'baseline', gap: 12, fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: INK_SOFT, marginBottom: 18 },
  modalTitle: { fontFamily: "'EB Garamond', serif", fontWeight: 500, fontSize: 30, lineHeight: 1.15, margin: '0 0 6px', color: INK, letterSpacing: '-0.015em' },
  modalTitleCount: { fontFamily: "'EB Garamond', serif", fontStyle: 'italic', fontSize: 16, color: ACCENT, marginLeft: 8 },
  // Spanish parallel — serif italic, not handwriting
  modalEs: { fontFamily: "'EB Garamond', serif", fontSize: 17, color: INK_SOFT, margin: '4px 0 18px', lineHeight: 1.4 },
  modalBody: { fontFamily: "'EB Garamond', serif", fontSize: 16, lineHeight: 1.6, color: INK, margin: '12px 0 8px' },
  modalBodyEs: { fontFamily: "'EB Garamond', serif", fontSize: 14, lineHeight: 1.55, color: INK_SOFT, margin: '0 0 22px' },
  modalForm: { display: 'flex', flexDirection: 'column', gap: 12, paddingTop: 12, borderTop: `1px dashed ${RULE}` },
  modalInput: { padding: '14px 0', border: 'none', borderBottom: `1px solid ${INK}`, background: 'transparent', fontFamily: "'EB Garamond', serif", fontSize: 18, color: INK, outline: 'none', fontStyle: 'italic', minHeight: 48 },
  modalBtn: { marginTop: 6, padding: '16px 22px', background: INK, color: PAPER, border: 'none', fontFamily: "'EB Garamond', serif", fontSize: 16, fontWeight: 500, cursor: 'pointer', textAlign: 'center', letterSpacing: '0.01em', minHeight: 48 },
  modalNote: { fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase', color: INK_MUTE, marginTop: 12 },
  modalDownloadRow: { display: 'flex', flexDirection: 'column', gap: 8, paddingTop: 16, borderTop: `1px dashed ${RULE}`, marginTop: 8 },
  modalDownloadBtn: { display: 'inline-block', padding: '16px 22px', background: ACCENT, color: PAPER, fontFamily: "'EB Garamond', serif", fontSize: 16, fontWeight: 500, textDecoration: 'none', textAlign: 'center', letterSpacing: '0.01em', minHeight: 48 },
  modalDownloadMeta: { fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: INK_MUTE },
  modalDoneBtn: { marginTop: 18, padding: '12px 18px', background: 'transparent', color: INK_SOFT, border: `1px solid ${RULE}`, fontFamily: "'EB Garamond', serif", fontStyle: 'italic', fontSize: 14, cursor: 'pointer', minHeight: 44 }
};

window.Tranquila = Tranquila;