/* Kat Lindsey Coloring Book: the site for Every Day Is Halloween, the printed
   book and the app. Themed from the app itself: the all-over print behind
   everything, content on paper plates with the 1px plate hairline, titles in
   Fredericka the Great, and marigold (the cover's frame) only ever as a FILL
   with ink on it, never as text on paper (it fails contrast).
   One theme on purpose: the app prints on cream in every appearance. */

@font-face {
  font-family: "Fredericka the Great";
  src: url("/fonts/fredericka-the-great-latin.woff2") format("woff2");
  font-display: swap;
}

:root {
  /* Layout: a single column of paper plates floating on the all-over print. */
  --paper: #FCFAF5;        /* Palette.paper */
  --ink: #2B2B28;          /* Palette.ink */
  --marigold: #FDC057;     /* Palette.marigold, the cover's frame */
  --folio-ink: #5A574F;    /* captions and secondary text on paper */
  --hairline: rgba(0, 0, 0, 0.18); /* BookPlateMetrics.hairline */
  --shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
  --title: "Fredericka the Great", Georgia, "Times New Roman", serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --gutter: 20px;
  color-scheme: light;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  /* chrome.print: ONE exact period of the pattern, 438 pt square, as in the app. */
  background: var(--paper) url("/images/print.jpg") repeat;
  background-size: 438px 438px;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 0.9em; }
p:last-child { margin-bottom: 0; }

.page {
  max-width: 1040px;
  margin: 0 auto;
  padding-inline: var(--gutter);
  padding-block: 20px 40px;
  display: grid;
  /* minmax(0, 1fr), not auto: the column must never grow past the screen
     to fit a child's widest content (that clipped every plate on phones). */
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

/* --- Paper plates: what keeps type readable on the print --- */
.plate {
  background: var(--paper);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
  padding: clamp(22px, 4vw, 48px);
  min-width: 0;
}

.title-plate {
  max-width: 100%;
  background: var(--paper);
  border: 1px solid var(--hairline);
  padding: 12px 26px;
  justify-self: center;
  text-align: center;
}

h1, h2, h3 {
  font-family: var(--title);
  font-weight: 400;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.1rem, 6vw, 3.4rem); margin: 0; }
h2 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); }
h3 { font-size: 1.35rem; }

/* The folio caption: small caps on a paper slip with the hairline. */
.folio {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 500;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.12em;
  color: var(--folio-ink);
  background: var(--paper);
  border: 1px solid var(--hairline);
  padding: 3px 12px;
}

.lede { font-size: 1.12rem; color: var(--folio-ink); max-width: 60ch; }
.muted { color: var(--folio-ink); }

/* --- Buttons: marigold fill, ink type, hairline and one soft shadow --- */
.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 1rem/1 var(--body);
  color: var(--ink);
  background: var(--marigold);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 13px 22px;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.button:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); }
.button:focus-visible, a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.button--quiet { background: var(--paper); }
/* The Instagram glyph: Meta's official file (assets/ui/instagram_glyph/), inlined unmodified. */
.button .icon { width: 1.15em; height: 1.15em; flex: none; }
.button[aria-disabled="true"] { cursor: default; background: var(--paper); color: var(--folio-ink); box-shadow: none; }
.button[aria-disabled="true"]:hover { transform: none; }
.buttons { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Top bar --- */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  padding: 10px 18px;
}
.wordmark { font-family: var(--title); font-size: 1.25rem; text-decoration: none; }
.topbar nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.topbar nav a {
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.12em;
  color: var(--folio-ink);
}
.topbar nav a:hover, .topbar nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
/* One line needs about 640px (the wordmark, the links, the gutters). Below
   that, stack and center them, like everything else on a phone, instead of
   wrapping the links under a left-aligned title. */
@media (max-width: 680px) {
  .topbar { flex-direction: column; text-align: center; }
  .topbar nav { justify-content: center; }
}

/* --- Hero: the shelf, as on the app's main menu --- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 18px; padding-block: 18px 6px; text-align: center; }
.hero > * { max-width: 100%; }
.hero-cover {
  width: min(420px, 82vw);
  border: 1px solid var(--hairline);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
}
.hero .buttons { justify-content: center; }

/* --- Two-column content inside a plate --- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(22px, 4vw, 48px);
  align-items: center;
}
.split > * { min-width: 0; }
@media (max-width: 760px) { .split { grid-template-columns: minmax(0, 1fr); } }

.framed { border: 1px solid var(--hairline); box-shadow: var(--shadow); background: var(--paper); }

/* --- The artist's letter --- */
.letter {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
  line-height: 1.7;
  max-width: 62ch;
  margin: 0 auto;
}
.letter .signature { width: min(320px, 70%); margin: 18px 0 0 auto; }

/* --- Facts and features --- */
.facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; padding: 0; list-style: none; }
.facts li { margin: 0; }
.features { margin: 14px 0 18px; padding-left: 1.2em; }
.features li { margin-bottom: 6px; }
.features strong { font-weight: 600; }

/* --- Sample pages and screenshots --- */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 22px);
  margin-top: 26px;
}
@media (max-width: 560px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery > :nth-child(3) { display: none; } }
.gallery figure { margin: 0; text-align: center; }
.gallery img { width: 100%; border: 1px solid var(--hairline); background: var(--paper); }
.gallery figcaption { margin-top: 8px; }
.screens img { border-radius: 18px; }

/* --- The app preview in a phone-shaped frame --- */
.phone {
  width: min(300px, 78vw);
  margin: 0 auto;
  padding: 10px;
  background: var(--ink);
  border-radius: 46px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}
.phone video { border-radius: 36px; width: 100%; aspect-ratio: 886 / 1920; object-fit: cover; background: var(--paper); }

.offer {
  border: 1px dashed var(--hairline);
  padding: 14px 18px;
  margin: 18px 0;
  font-size: 0.97rem;
}

.app-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 0.5em; }
.app-heading img { width: 64px; border-radius: 15px; border: 1px solid var(--hairline); }
.app-heading h2 { margin: 0; }

/* --- Links to the artist --- */
.links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 16px; }

/* --- Footer --- */
.footer { text-align: center; font-size: 0.86rem; color: var(--folio-ink); }
.footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin-bottom: 10px; }
.footer nav a { color: var(--ink); }

/* --- Long-form pages (support, privacy) --- */
.doc { max-width: 760px; width: 100%; justify-self: center; }
.doc h2 { font-size: 1.45rem; margin-top: 1.6em; }
.doc .callout { border: 1px solid var(--hairline); background: #F6F1E6; padding: 14px 18px; margin: 18px 0; }
.doc ul { padding-left: 1.2em; }
.center { text-align: center; }