/* Josie Ashton — Coming to Terms
   Design tokens and shared styles, translated 1:1 from the Paper file
   "josieashtonwriter.com" (page "03 Final draft"). Keep in sync by hand
   until a design-to-code pipeline exists.

   Every section below is capped at max-width:1440px (Paper's canvas
   width) and centered, so it renders identically regardless of how
   wide the browser window is — Paper never has more than 1440px to
   work with, and letting sections stretch further was what made
   things look sparse/mis-proportioned on a wide screen. Sections with
   a full-bleed background colour use the box-shadow/clip-path trick
   below so the colour still reaches the browser edge while the
   content inside stays capped and aligned with every other section. */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;1,400&family=Courier+Prime:wght@400&family=Source+Serif+4:opsz,wght@8..60,400&family=Caveat+Brush&display=swap');

:root {
  --color-paper: #FFFFFF;
  --color-foam: #E6F8FA;
  --color-slate: #4A5A63;
  --color-ink: #0E1F2A;
  --color-deep-sea: #06555F;
  --color-deep-sea-hover: #043F47;
  --color-aqua: #17B6C9;
  --color-sun: #F2B705;
  --color-lagoon: #A9ECF1;

  --font-display: 'Lora', Georgia, serif;
  --font-mono: 'Courier Prime', 'Courier New', monospace;
  --font-body: 'Source Serif 4', Georgia, serif;
  --font-wordmark: 'Caveat Brush', cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: 1440px; margin: 0 auto; }

/* Full-bleed background colour on a capped, centered box */
.bleed-foam, .bleed-ink, .bleed-lagoon {
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  clip-path: inset(0 -100vmax);
}
.bleed-foam { background: var(--color-foam); box-shadow: 0 0 0 100vmax var(--color-foam); }
.bleed-ink { background: var(--color-ink); box-shadow: 0 0 0 100vmax var(--color-ink); }
.bleed-lagoon { background: var(--color-lagoon); box-shadow: 0 0 0 100vmax var(--color-lagoon); }

/* ---------- Nav ---------- */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 64px;
}
.nav .wordmark {
  font-family: var(--font-wordmark);
  font-size: 32px;
  line-height: 40px;
  color: var(--color-ink);
}
.nav-links { display: flex; align-items: center; gap: 36px; }
.nav-links a {
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 22px;
  color: var(--color-ink);
}
.nav .btn-primary { padding: 12px 20px; }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--color-ink);
  cursor: pointer;
}

/* ---------- Buttons ---------- */
.btn-primary, .btn-secondary {
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 22px;
  display: inline-block;
  border-radius: 2px;
  cursor: pointer;
  border: none;
}
.btn-primary {
  background: var(--color-deep-sea);
  color: var(--color-paper);
  padding: 16px 28px;
}
.btn-primary:hover { background: var(--color-deep-sea-hover); }
.btn-primary.on-sun {
  background: var(--color-sun);
  color: var(--color-ink);
}
.btn-secondary {
  background: transparent;
  color: var(--color-deep-sea);
  text-decoration: underline;
  text-decoration-color: var(--color-aqua);
  padding: 16px 4px;
}
.btn-outline {
  background: transparent;
  border: 1px solid var(--color-ink);
  color: var(--color-ink);
  padding: 14px 24px;
}
.cta-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

/* ---------- Type ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 26px;
  line-height: 32px;
  color: var(--color-slate);
  margin: 0 0 16px 0;
}
.eyebrow.small { font-size: 17px; line-height: 24px; }
h1, h2, .headline {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin: 0;
}
h1 { font-size: 88px; line-height: 96px; }
h2 { font-size: 56px; line-height: 64px; }
h3 { font-family: var(--font-display); font-weight: 400; font-size: 36px; line-height: 46px; letter-spacing: -0.01em; color: var(--color-ink); margin: 0; }
p { font-size: 20px; line-height: 32px; margin: 0; }
p.lede { font-size: 24px; line-height: 36px; color: var(--color-slate); }
.caption { font-family: var(--font-mono); font-size: 14px; line-height: 20px; color: var(--color-slate); }
.placeholder-note { font-family: var(--font-mono); font-size: 14px; line-height: 20px; color: var(--color-slate); }

/* ---------- Sections ---------- */
section { width: 100%; }
.section-pad { padding: 96px 64px; }

/* Hero — matches Paper's Hero frame (UI-0) exactly: the copy column is
   a normal 720px-wide flex item; the book cluster is pinned absolute
   from the right edge, not flexed, so it doesn't drift on wide screens. */
.hero {
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  height: 774px;
  position: relative;
}
.hero-copy { display: flex; flex-direction: column; width: 720px; flex-shrink: 0; padding-top: 40px; padding-left: 64px; gap: 28px; }
.hero-art { position: absolute; right: 72px; top: 40px; width: 600px; height: 680px; }

/* Book mock */
.book-mock {
  width: 372px;
  height: 566px;
  position: relative;
  border-radius: 0 5px 5px 0;
  box-shadow: rgba(14,31,42,.30) 0 2px 4px, rgba(14,31,42,.30) 0 18px 28px, rgba(14,31,42,.34) 0 48px 80px;
}
.book-mock .cover {
  width: 100%; height: 100%;
  background-size: cover; background-position: 50%;
  border-radius: 0 5px 5px 0;
}
.book-mock .page-block {
  position: absolute; right: -11px; top: 4px; width: 11px; height: 558px;
  background: var(--color-paper);
  box-shadow: rgba(0,0,0,.25) -2px 0 3px inset;
}
.book-mock .relief {
  position: absolute; inset: 0; border-radius: 0 5px 5px 0;
  background: linear-gradient(90deg, rgba(0,0,0,.38) 0%, rgba(255,255,255,.30) 1.4%, rgba(0,0,0,.22) 3%, rgba(255,255,255,.16) 4.6%, rgba(255,255,255,0) 9%, rgba(255,255,255,.06) 55%, rgba(0,0,0,0) 90%, rgba(0,0,0,.14) 100%);
}
.book-cluster { position: relative; width: 600px; height: 680px; }
.book-cluster .book-mock { position: absolute; left: 114px; top: 30px; }
.chapter-card {
  position: absolute;
  width: 280px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--color-paper);
  box-shadow: rgba(14,31,42,.18) 0 8px 24px;
}
.chapter-card img { width: 212px; height: 314px; object-fit: cover; }
.chapter-card .num { font-family: var(--font-mono); font-size: 14px; color: var(--color-slate); }
.chapter-card .name { font-family: var(--font-display); font-size: 18px; letter-spacing: -0.01em; }
.chapter-card.left { left: -30px; top: 110px; transform: rotate(-11deg); }
.chapter-card.right { left: 350px; top: 96px; transform: rotate(10deg); text-align: right; }
.chapter-card.right img { margin-left: 20px; }

/* Foam band / author strip — matches Author sentence (1BO-0). The
   flying Josie is a single absolutely-positioned image (matches
   Paper's V9-0 exactly); there is no second copy in the hero. */
.band-foam {
  background: var(--color-foam);
  box-shadow: 0 0 0 100vmax var(--color-foam);
  clip-path: inset(0 -100vmax);
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 56px;
  padding: 72px 64px 0 64px;
  overflow: hidden;
}
.band-foam .copy { width: 900px; flex-shrink: 0; display: flex; flex-direction: column; gap: 18px; margin-bottom: 72px; }
.band-foam .copy p { font-family: var(--font-display); font-size: 40px; line-height: 48px; letter-spacing: -0.01em; }
.band-foam .links { display: flex; gap: 28px; }
.band-foam .links a { font-family: var(--font-mono); font-size: 17px; color: var(--color-deep-sea); text-decoration: underline; text-decoration-color: var(--color-aqua); }
.band-foam .josie-flying-band { position: absolute; left: 820px; top: 48px; width: 600px; height: 343px; }

/* Quote with bleeding wash — matches Quote (1B2-0) and its wash (1B3-0) */
.quote-block { position: relative; overflow: hidden; max-width: 1440px; margin: 0 auto; padding: 200px 64px 160px 520px; display: flex; flex-direction: column; gap: 20px; }
.quote-block .wash { position: absolute; left: -58px; top: -131px; width: 500px; height: 742px; transform: rotate(-6deg); }
.quote-block blockquote { font-family: var(--font-display); font-style: italic; font-size: 64px; line-height: 72px; margin: 0; position: relative; }
.quote-block cite { font-family: var(--font-mono); font-size: 28px; line-height: 36px; color: var(--color-slate); font-style: normal; position: relative; }

/* Blurb with bleeding wash — matches Blurb (1B7-0) and its wash (1HX-0) */
.blurb-block { position: relative; overflow: hidden; max-width: 1440px; margin: 0 auto; padding: 120px 520px 140px 64px; display: flex; flex-direction: column; gap: 24px; }
.blurb-block .wash { position: absolute; right: -80px; top: -60px; width: 498px; height: 767px; transform: rotate(6deg); }
.blurb-block .pull { font-family: var(--font-display); font-size: 36px; line-height: 46px; letter-spacing: -0.01em; }
.blurb-block .body { font-family: var(--font-body); font-size: 18px; line-height: 28px; }

/* Ink banner — matches Pre-order banner (W1-0) */
.banner-ink {
  background: var(--color-ink);
  box-shadow: 0 0 0 100vmax var(--color-ink);
  clip-path: inset(0 -100vmax);
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  color: var(--color-paper);
  display: flex;
  align-items: center;
  gap: 64px;
  flex-wrap: wrap;
  padding: 72px 64px;
}
.banner-ink > div:first-child { flex-grow: 1; flex-basis: 0%; }
.banner-ink h3 { color: var(--color-paper); }
.banner-ink p { color: rgba(255,255,255,.7); font-size: 17px; line-height: 26px; }

/* Letter with called-out quote — matches Letter (1BD-0): the text
   column (1H7-0) and the art-room portrait (1BM-0) are two separate
   flex children, not one nested inside the sign-off line. */
.letter { display: flex; gap: 96px; align-items: flex-start; max-width: 1440px; margin: 0 auto; padding: 112px 64px 112px 160px; }
.letter-copy { display: flex; flex-direction: column; gap: 32px; width: 680px; flex-shrink: 0; }
.letter-copy p { font-size: 18px; line-height: 28px; }
.letter-quote {
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--color-aqua);
  display: flex; flex-direction: column; gap: 16px;
}
.letter-quote blockquote { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 22px; line-height: 32px; }
.letter-quote cite { font-style: normal; }
.letter .josie-signoff { font-family: var(--font-display); font-style: italic; font-size: 40px; color: var(--color-deep-sea); }
.letter-art { width: 400px; height: 465px; margin-top: 120px; flex-shrink: 0; }

/* Launch — matches Launch (WL-0) */
.launch {
  background: var(--color-lagoon);
  box-shadow: 0 0 0 100vmax var(--color-lagoon);
  clip-path: inset(0 -100vmax);
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 64px;
  padding: 64px 64px 112px 64px;
  flex-wrap: wrap;
}
.launch-copy { flex-grow: 1; flex-basis: 0%; display: flex; flex-direction: column; gap: 20px; }
.launch img { width: 340px; height: 507px; flex-shrink: 0; transform: rotate(9deg); }

/* Signup — matches Signup (WX-0): the copy side grows to fill the row
   (flex-grow, not justify-content:space-between), so it never splits
   into two visually disconnected boxes on a wide screen. */
.signup {
  display: flex;
  align-items: center;
  max-width: 1440px;
  margin: 0 auto;
  gap: 96px;
  padding: 72px 64px 104px 64px;
  flex-wrap: wrap;
}
.signup-copy { flex-grow: 1; flex-basis: 280px; display: flex; flex-direction: column; gap: 16px; }
.signup-form { width: 520px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }
.signup-form .row { display: flex; gap: 0; }
.signup-form input {
  font-family: var(--font-mono);
  font-size: 15px;
  padding: 14px 16px;
  border: 1px solid var(--color-slate);
  border-right: none;
  width: 280px;
  flex: 1;
}
.signup-form button {
  font-family: var(--font-mono);
  font-size: 15px;
  padding: 14px 20px;
  background: var(--color-ink);
  color: var(--color-paper);
  border: none;
  cursor: pointer;
}
.signup-form .consent { font-family: var(--font-mono); font-size: 13px; color: var(--color-slate); max-width: 280px; }
.form-status { font-family: var(--font-mono); font-size: 14px; color: var(--color-deep-sea); min-height: 20px; }

/* Footer */
.footer {
  background: var(--color-foam);
  box-shadow: 0 0 0 100vmax var(--color-foam);
  clip-path: inset(0 -100vmax);
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 40px 64px;
}
.footer .wordmark { font-family: var(--font-wordmark); font-size: 28px; }
.footer .copyright { font-family: var(--font-mono); font-size: 13px; color: var(--color-slate); }
.footer-links { display: flex; gap: 28px; }
.footer-links a { font-family: var(--font-mono); font-size: 13px; color: var(--color-slate); }

/* Painted edge */
.painted-edge { display: block; width: 100%; height: 70px; }

/* Generic page sections (about/shop/contact/legal), all capped to
   match the rest of the site on wide screens */
.bio { display: flex; flex-direction: column; gap: 20px; max-width: 640px; }
.bio img.cutout { width: 100%; }
.table-band { height: 230px; background: var(--color-foam); }
.about-hero { max-width: 1440px; margin: 0 auto; display: flex; gap: 64px; padding: 0 64px 0 64px; align-items: flex-start; }
.about-hero .art { flex-shrink: 0; }
.longer-bio { max-width: 1440px; margin: 0 auto; padding: 96px 64px; display: flex; gap: 64px; }
.longer-bio h4 { font-family: var(--font-display); font-size: 36px; font-weight: 400; margin: 0; width: 300px; flex-shrink: 0; }
.longer-bio .copy { display: flex; flex-direction: column; gap: 24px; max-width: 680px; }
.longer-bio p { font-size: 20px; line-height: 32px; }

.product { max-width: 1440px; margin: 0 auto; display: flex; gap: 64px; padding: 96px 64px; align-items: flex-start; }
.product-copy { display: flex; flex-direction: column; gap: 20px; max-width: 804px; }
.product-copy h2 { font-size: 56px; line-height: 64px; }
.price-row { display: flex; align-items: baseline; gap: 20px; }
.price-row .price { font-family: var(--font-display); font-size: 40px; }
.price-row .postage { font-family: var(--font-mono); font-size: 15px; color: var(--color-slate); }

.coming-later { max-width: 1440px; margin: 0 auto; display: flex; gap: 32px; padding: 0 64px 96px 64px; flex-wrap: wrap; }
.coming-later .card { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: 12px; }
.coming-later h3 { font-size: 24px; line-height: 32px; }
.coming-later .status { font-family: var(--font-mono); font-size: 15px; color: var(--color-slate); }

.contact-wrap { max-width: 1440px; margin: 0 auto; display: flex; gap: 64px; padding: 96px 64px; flex-wrap: wrap; }
.contact-copy { display: flex; flex-direction: column; gap: 20px; max-width: 640px; }
.contact-copy h2 { font-size: 40px; line-height: 48px; }
.contact-email { font-family: var(--font-display); font-size: 32px; color: var(--color-deep-sea); }
.contact-art { flex: 1; min-width: 280px; }

.legal-wrap { max-width: 1440px; margin: 0 auto; display: flex; gap: 64px; padding: 96px 64px; }
.legal-nav { display: flex; flex-direction: column; gap: 4px; width: 240px; flex-shrink: 0; }
.legal-nav a { font-family: var(--font-mono); font-size: 16px; padding: 10px 0; color: var(--color-slate); }
.legal-nav a.active { color: var(--color-ink); }
.legal-body { max-width: 680px; display: flex; flex-direction: column; gap: 20px; }
.legal-body h2 { font-size: 40px; line-height: 48px; }
.legal-body h4 { font-family: var(--font-display); font-weight: 400; font-size: 24px; margin: 24px 0 0 0; }
.legal-body p { font-size: 18px; line-height: 28px; }
.legal-meta { font-family: var(--font-mono); font-size: 15px; color: var(--color-slate); }
.seller-block { background: var(--color-foam); padding: 20px 24px; display: flex; flex-direction: column; gap: 8px; }

/* Blog */
.blog-header { max-width: 1440px; margin: 0 auto; padding: 72px 64px 56px 64px; display: flex; flex-direction: column; gap: 20px; }
.blog-header p { max-width: 680px; color: var(--color-slate); }
.post-row { display: flex; gap: 48px; padding: 40px 0; border-top: 1px solid var(--color-lagoon); }
.post-row:last-child { border-bottom: 1px solid var(--color-lagoon); }
.post-row img { width: 260px; height: 180px; object-fit: cover; flex-shrink: 0; }
.post-row .meta { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.post-row h2 { font-size: 36px; line-height: 46px; }
.post-row p { max-width: 760px; color: var(--color-slate); }
.post-list { max-width: 1440px; margin: 0 auto; padding: 0 64px 96px 64px; }
.post-header { max-width: 1440px; margin: 0 auto; padding: 72px 64px 48px 64px; display: flex; flex-direction: column; gap: 24px; }
.post-header h1 { font-size: 56px; line-height: 64px; }
.post-header p { max-width: 760px; color: var(--color-slate); }
.post-image { max-width: 1440px; margin: 0 auto; padding: 0 64px 56px 64px; display: flex; flex-direction: column; gap: 12px; }
.post-image img { width: 900px; max-width: 100%; height: auto; }
.post-body { max-width: 1440px; margin: 0 auto; padding: 0 64px 64px 64px; }
.post-body > * { max-width: 680px; }
.post-body { display: flex; flex-direction: column; gap: 28px; }
.post-body p { font-size: 20px; line-height: 34px; }
.post-nav { max-width: 1440px; margin: 0 auto; display: flex; justify-content: space-between; padding: 24px 64px 96px 64px; border-top: 1px solid var(--color-lagoon); flex-wrap: wrap; gap: 24px; }
.post-nav .side { display: flex; flex-direction: column; gap: 8px; }
.post-nav .label { font-family: var(--font-mono); font-size: 14px; color: var(--color-slate); }
.post-nav .title { font-family: var(--font-display); font-size: 24px; color: var(--color-deep-sea); }
.post-nav .next { text-align: right; align-items: flex-end; }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .nav { padding: 16px 20px; }
  .nav-links { display: none; }
  .nav-links.open { display: flex; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0; background: var(--color-paper); padding: 20px; gap: 20px; z-index: 10; box-shadow: 0 8px 24px rgba(14,31,42,.12); }
  .nav-toggle { display: block; }

  .hero, .about-hero, .longer-bio, .product, .contact-wrap, .legal-wrap, .letter, .launch, .signup, .band-foam, .footer, .doors { flex-direction: column; padding-left: 20px; padding-right: 20px; }
  .hero { height: auto; padding-bottom: 32px; }
  .hero-copy { width: 100%; padding-left: 0; padding-top: 24px; }
  .hero-art { position: static; width: 100%; height: 340px; margin-top: 24px; }
  .book-cluster { transform: scale(.62); transform-origin: top left; margin-bottom: -240px; }
  .band-foam .josie-flying-band { position: static; width: 180px; height: auto; margin-top: 16px; }
  .band-foam .copy { width: 100%; margin-bottom: 32px; }
  .quote-block, .blurb-block { padding: 240px 20px 64px 20px !important; }
  .quote-block .wash, .blurb-block .wash { width: 220px !important; height: auto !important; left: -50px !important; right: auto !important; top: -100px !important; }
  .quote-block blockquote { font-size: 32px; line-height: 40px; }
  h1 { font-size: 44px; line-height: 52px; }
  h2 { font-size: 36px; line-height: 44px; }
  .banner-ink { flex-direction: column; align-items: flex-start; padding: 48px 20px; }
  .letter-copy { width: 100%; }
  .letter-art { width: 100%; max-width: 240px; height: auto; margin-top: 0; }
  .launch img { width: 180px; height: auto; }
  .signup-copy, .signup-form { width: 100%; }
  .footer { gap: 24px; }
  .footer-links { flex-wrap: wrap; }
  .legal-body, .about-hero .bio { max-width: 100%; }
  .post-row { flex-direction: column; }
  .post-row img { width: 100%; height: auto; }
  .post-image img { width: 100%; }
  .post-body > * { max-width: 100%; }
}