/* Typography and colours match the Webflow site (website/webflow-export/css/bookstore-ai.css):
   display = Right Grotesk Compact 500, text = Open Sauce Sans, accent = Libre Caslon Condensed italic,
   background #fffaf7 (.home-hero.u-section), hero text brand-600, body text #141b16 (swatch dark-900),
   brand #304135 (swatch brand-500). Fonts are the site's own files. */
@font-face { font-family: "Right Grotesk Compact"; src: url("/fonts/RightGrotesk-CompactMedium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sauce Sans"; src: url("/fonts/OpenSauceSans-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sauce Sans"; src: url("/fonts/OpenSauceSans-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Open Sauce Sans"; src: url("/fonts/OpenSauceSans-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sauce Sans"; src: url("/fonts/OpenSauceSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Caslon Condensed"; src: url("/fonts/LibreCaslonCondensed-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --bg: #fffaf7;
  --text: #141b16;
  --muted: color-mix(in srgb, #141b16 65%, transparent);
  --border: color-mix(in srgb, #141b16 20%, transparent);
  --brand: #304135;
  --brand-600: color-mix(in srgb, #304135, black 20%);
  --display: "Right Grotesk Compact", Arial, sans-serif;
  --sans: "Open Sauce Sans", Arial, sans-serif;
  --serif: "Libre Caslon Condensed", Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 400 clamp(1rem, 0.95rem + 0.25vw, 1.125rem)/1.5 var(--sans);
  min-height: 100vh; display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
::selection { background: color-mix(in srgb, #304135, white 40%); color: #fff; }
a { color: var(--text); text-decoration-color: var(--border); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--text); }
.logo { display: block; color: var(--text); width: 12rem; max-width: 60vw; }
.logo svg { display: block; width: 100%; height: auto; }

/* holding page */
.hero { color: var(--brand-600); flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
        text-align: center; padding: 64px 16px; }
.hero .logo { margin-bottom: 2.5rem; color: var(--brand-600); }
.hero a { color: var(--brand-600); }
.display { font-family: var(--display); font-weight: 500; line-height: 1; letter-spacing: -0.03em;
           font-size: clamp(3rem, 1.6rem + 5.2vw, 6.5rem); text-wrap: balance; max-width: 15ch; margin: 0 0 1.5rem; }
.display em { font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: -0.01em; }
.lede { font-size: clamp(1.375rem, 1.33rem + 0.2vw, 1.5rem); font-weight: 500; line-height: 1.3;
        max-width: 32rem; margin: 0 0 1rem; text-wrap: balance; }
.note { color: var(--muted); max-width: 32rem; margin: 0; }
footer.site { border-top: 1px solid var(--border); padding: 18px 16px; font-size: 0.875rem; color: var(--muted);
              display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
footer.site a { color: var(--muted); }

/* legal pages */
.legal { max-width: 44rem; width: 100%; margin: 0 auto; padding: 32px 16px 64px; flex: 1; }
.legal .logo { width: 8rem; margin-bottom: 2.5rem; }
.legal h1 { font-family: var(--display); font-weight: 500; line-height: 1; letter-spacing: -0.03em;
            font-size: clamp(2.5rem, 1.8rem + 2.6vw, 4rem); margin: 0 0 1.5rem; text-wrap: balance; }
.legal h2 { font-weight: 600; font-size: 1.25rem; line-height: 1.3; margin: 2.25rem 0 0.5rem; }
.legal ul { padding-left: 1.3em; }
.legal li + li { margin-top: 0.25rem; }