/* Coloring Keepsake
   Layout: a sheet of paper. Black line art on white, one crayon color
   (goldfish orange) used only where someone should look or tap, as if a
   kid colored those parts in and went a little outside the lines.
   Left-aligned, 1100px max, hard-offset shadows on printed pages only. */

:root {
  --paper: #ffffff;
  --ink: #000000;
  --pencil: #5f5a55;
  --goldfish: #f28c28;
  --goldfish-soft: #fbe3cd;
  --rule: #e6dfd6;
  --display: "Shantell Sans", "Comic Neue", "Trebuchet MS", sans-serif;
  --body: "Atkinson Hyperlegible", "Segoe UI", Helvetica, Arial, sans-serif;
  --measure: 36rem;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

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

img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--goldfish);
  outline-offset: 3px;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.9rem); font-weight: 800; letter-spacing: -0.01em; line-height: 1.32; /* room for the crayon underline between wrapped lines */ }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
h3 { font-size: 1.3rem; }
p { margin: 0; max-width: var(--measure); }
.muted { color: var(--pencil); }

.wrap {
  max-width: 1100px;
  margin-inline: auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
}

/* Header: sticky, solid paper, one row on wide screens; on narrow screens
   the brand and the Order button share the first row and the three text
   links wrap underneath. No menu toggle at any width. */
.site-head-wrap {
  position: sticky;
  top: 0;
  z-index: 50;             /* above the book leaves (z up to 8) and the hero pencil */
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}
.site-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.5rem;
  padding-block: 0.8rem;
}
.brand {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.35rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: auto;      /* pushes the nav and the Order button to the right */
}
.brand svg { width: 1.6em; height: 1.6em; flex: none; }
.site-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; font-family: var(--display); font-weight: 500; }
.site-nav a { text-decoration: none; }
.site-nav a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--goldfish); }
.btn-nav { font-size: 0.95rem; padding: 0.45em 1.1em; }
.btn-nav[aria-current="page"] {
  box-shadow: 3px 3px 0 var(--ink);
  transform: translate(-1px, -1px);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.15em;
}
@media (max-width: 899px) {
  .site-nav { order: 3; flex-basis: 100%; }  /* second row, full width */
}
@media (max-width: 560px) {
  .site-head { gap: 0.5rem 0.75rem; padding-block: 0.65rem; }
  .brand { font-size: 1.15rem; }
  .btn-nav { font-size: 0.9rem; padding: 0.4em 0.95em; }
  .site-nav { font-size: 0.95rem; gap: 0.2rem 0.9rem; }
}

/* Crayon underline under one headline word: a single hand-drawn orange
   stroke (plus a faint grain stroke), sitting below the "g" descender. */
.crayon-underline {
  position: relative;
  white-space: nowrap; /* the word and its underline wrap together */
  color: var(--ink);   /* text stays black, nothing behind it */
}
.crayon-underline svg {
  position: absolute;
  left: -3%;
  top: 1.12em;      /* fallback; site.js sets --ul-top from the measured text baseline */
  top: var(--ul-top, 1.12em);
  width: 106%;
  height: 0.18em;
  overflow: visible;
  pointer-events: none;
}
.crayon-underline svg path {
  fill: none;
  stroke: var(--goldfish);
  stroke-width: 0.09em;           /* ~5.5px at desktop headline size */
  vector-effect: non-scaling-stroke; /* the box stretches to the word; the stroke stays round and even */
  stroke-linecap: round;
  stroke-linejoin: round;
}
.crayon-underline svg .grain { stroke-width: 0.06em; opacity: 0.35; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  text-decoration: none;
  padding: 0.85em 1.4em;
  border: 3px solid var(--ink);
  border-radius: 1.2em 1em 1.3em 0.9em;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  position: relative;
  isolation: isolate;
  line-height: 1.1;
}
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  border-radius: inherit;
  background: repeating-linear-gradient(-14deg, var(--goldfish) 0 5px, rgba(242,140,40,0.6) 5px 7px);
  filter: url(#crayon-edge);
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: none; box-shadow: none; }
.btn-lg { font-size: 1.35rem; padding: 0.9em 1.5em; }
.btn svg { width: 1.2em; height: 1.2em; flex: none; }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* A printed page: hard black shadow, like a sheet lying on the next one */
.sheet {
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 7px 7px 0 var(--ink);
  overflow: hidden;
}
.sheet img { width: 100%; aspect-ratio: 7 / 9; object-fit: cover; }
.hero-art .sheet img { aspect-ratio: auto; }

/* Hero */
.hero {
  overflow-x: clip; /* the tilted book's shadow poked a few px past the edge between 900 and 1030px */
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 2.5rem 4rem;
  align-items: center;
  padding-block: 2.5rem 4rem;
}
.hero-copy { display: grid; gap: 1.4rem; justify-items: start; }
.hero-copy p { font-size: 1.2rem; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; }
.hero-cta .muted { font-family: var(--display); font-weight: 500; }
.hero-art { justify-self: center; width: min(100%, 380px); transform: rotate(-2.5deg); margin-right: 1rem; }
.hero-art figcaption { margin-top: 1.2rem; font-size: 0.95rem; color: var(--pencil); transform: rotate(2.5deg); }

/* Hero flipbook. The static cover is the resting markup; site.js builds the
   leaves inside .book-frame. Each leaf turns about the spine (left edge)
   inside the same upright frame, never a two-page spread. */
.book-frame { position: relative; }
.book-frame.is-book { overflow: visible; cursor: pointer; perspective: 1400px; }
.book-frame.is-book > img { visibility: hidden; } /* keeps the frame's size; leaf 0 shows the cover */
.leaf {
  position: absolute;
  inset: 0;
  background: var(--paper);
  transform-origin: left center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 0.55s cubic-bezier(0.4, 0.05, 0.3, 1);
  will-change: transform;
}
.leaf img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.leaf.is-turned { transform: rotateY(-180deg); pointer-events: none; }
.leaf.is-peeking { transform: rotateY(-16deg); }
.leaf-end {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 1rem;
  padding: 1.5rem;
  border-left: 10px solid var(--goldfish);
}
.leaf-end h3 { font-size: clamp(1.4rem, 1rem + 1.6vw, 1.9rem); }
.leaf-end p { font-size: 0.95rem; color: var(--pencil); }
.book-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.1rem;
  transform: rotate(2.5deg);
  font-family: var(--display);
  font-weight: 500;
}
.book-nav button {
  font: 700 0.95rem var(--display);
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  border-radius: 0.9em 0.7em 1em 0.6em;
  padding: 0.35em 0.9em;
  cursor: pointer;
}
.book-nav button:hover:not(:disabled) { background: var(--goldfish-soft); }
.book-nav button:disabled { opacity: 0.35; cursor: default; }
.book-nav output { font-variant-numeric: tabular-nums; color: var(--pencil); font-size: 0.95rem; }
@media (prefers-reduced-motion: reduce) {
  .leaf { transition: none; }
}
.book-hint {
  margin-top: 0.6rem;
  font-size: 0.95rem;
  color: var(--pencil);
  text-align: center;
  transform: rotate(2.5deg);
}

/* Cover color-in. The line-art crop (.ink) sits over the colored cover inside
   the cover leaf; site.js moves --x from 0 to 100% once, and the mask hides
   the line art to the left of the moving edge with a soft 28px feather so the
   colored cover shows through behind the pencil. Both are removed when done. */
.ink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  --x: 0px;
  --feather: 28px;
  -webkit-mask-image: linear-gradient(to right, transparent calc(var(--x) - var(--feather)), #000 calc(var(--x) + var(--feather)));
  mask-image: linear-gradient(to right, transparent calc(var(--x) - var(--feather)), #000 calc(var(--x) + var(--feather)));
}
.leaf.is-coloring { overflow: visible; }
.pencil {
  position: absolute;
  left: 0;
  top: 0;
  width: 34%;
  aspect-ratio: 5 / 1;
  pointer-events: none;
  transform-origin: 0 50%;   /* the tip */
  filter: drop-shadow(2px 3px 0 rgba(0,0,0,0.18));
  transition: opacity 0.3s ease;
}
.book-frame.is-coloring { cursor: pointer; }

/* Sections */
.section { padding-block: 3.5rem; border-top: 2px dashed var(--rule); }
.section-head { display: grid; gap: 0.6rem; margin-bottom: 2rem; }

/* Gallery */
/* 6 tiles, all equal width at every size (6 / 3 / 2 across), captions pinned
   to a two-line box, so every row has a flat bottom edge. */
.gallery {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2rem 1.5rem;
  padding-right: 8px; /* room for the shadows */
}
.gallery figure { margin: 0; display: grid; gap: 0.8rem; align-content: start; }
.gallery figcaption { font-size: 0.95rem; line-height: 1.3; min-height: 2.6em; color: var(--pencil); }
@media (max-width: 899px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem 1.5rem; } }
@media (max-width: 560px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.25rem; } }

/* How it works */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem 2.5rem;
  counter-reset: step;
}
.step { display: grid; gap: 0.7rem; align-content: start; }
.step::before {
  counter-increment: step;
  content: counter(step);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.5rem;
  width: 2.4em; height: 2.4em;
  display: grid; place-items: center;
  border: 3px solid var(--ink);
  border-radius: 55% 45% 50% 50% / 50% 55% 45% 50%;
  background: repeating-linear-gradient(-14deg, var(--goldfish) 0 4px, rgba(242,140,40,0.55) 4px 6px);
  margin-bottom: 0.4rem;
}
.step:nth-child(2)::before { transform: rotate(6deg); border-radius: 48% 52% 45% 55% / 55% 45% 55% 45%; }
.step:nth-child(3)::before { transform: rotate(-5deg); border-radius: 52% 48% 55% 45% / 45% 55% 45% 55%; }

/* Pricing */
.prices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 4rem;
}
.price { display: grid; gap: 0.6rem; align-content: start; }
.price .amount {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.price .amount small { font-size: 0.42em; font-weight: 700; color: var(--pencil); margin-left: 0.2em; }
.price ul { margin: 0.4rem 0 0; padding-left: 1.2em; display: grid; gap: 0.35rem; max-width: var(--measure); }
.fine { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 2px solid var(--ink); display: grid; gap: 0.6rem; }
.fine p { max-width: 44rem; }

/* Ink band */
.band {
  background: var(--ink);
  color: var(--paper);
  padding-block: 3.5rem;
}
.band .wrap { display: grid; gap: 1.25rem; justify-items: start; }
.band .btn { border-color: var(--paper); }
.band .btn:hover { box-shadow: 4px 4px 0 var(--goldfish); }
.band p { font-size: 1.15rem; }

/* Footer */
.site-foot { padding-block: 2.5rem 3rem; display: grid; gap: 1.5rem; }
.partners { display: grid; gap: 0.5rem; max-width: 44rem; }
.foot-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; color: var(--pencil); font-size: 0.95rem; }
.foot-row a { color: var(--ink); }

/* Toast Christmas section */
.sheet-contain img { aspect-ratio: 4 / 5; object-fit: contain; background: var(--paper); }
.toast-row figure { margin: 0; display: grid; gap: 0.7rem; align-content: start; min-width: 0; }
.toast-row figcaption { font-size: 0.95rem; color: var(--pencil); line-height: 1.3; min-height: 2.6em; }
.toast-row { max-width: 44rem; }
.toast-facts { display: grid; gap: 0.8rem; justify-items: start; margin-top: 2rem; }
.toast-facts p { max-width: 44rem; }
.toast-facts strong { font-family: var(--display); }

/* Order page */
.order { max-width: 44rem; display: grid; gap: 2.5rem; padding-block: 1.5rem 4rem; }
.order-head { display: grid; gap: 1.2rem; }
.order-head p { font-size: 1.2rem; }
.proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; padding-right: 8px; }
.proof .sheet img { aspect-ratio: 17 / 22; }
.order-path { display: grid; gap: 1.25rem; justify-items: start; }
.code-line {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.1rem;
}
.code-line code {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15em;
  letter-spacing: 0.02em;
}
.code-line .mini {
  font: 700 0.85rem var(--display);
  border: 2px solid var(--ink);
  background: var(--paper);
  border-radius: 0.8em 0.6em 0.9em 0.5em;
  padding: 0.25em 0.7em;
  cursor: pointer;
  color: var(--ink);
}
.code-line .mini:hover { background: var(--goldfish-soft); }
.alt { color: var(--pencil); display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; }
.alt a { color: var(--ink); }
.order-more { display: grid; gap: 2.5rem; padding-top: 2.5rem; border-top: 2px dashed var(--rule); }
.order-more section { display: grid; gap: 0.8rem; justify-items: start; }
.order-more h2 { font-size: 1.5rem; }
.pages-soon { display: grid; gap: 0.8rem; max-width: var(--measure); }

/* Order form */
.order-form { display: grid; gap: 2.25rem; }
.f-section { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 1rem; }
.f-section legend { font-family: var(--display); font-weight: 700; font-size: 1.35rem; padding: 0; margin-bottom: 0.4rem; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.choice {
  display: grid;
  gap: 0.3rem;
  align-content: start;
  padding: 1rem 1.1rem 1rem 2.6rem;
  border: 2px solid var(--ink);
  border-radius: 1.1em 0.9em 1.2em 0.8em;
  position: relative;
  cursor: pointer;
  background: var(--paper);
}
.choice input { position: absolute; left: 1rem; top: 1.15rem; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--goldfish); }
.choice:has(input:checked) { box-shadow: 4px 4px 0 var(--ink); background: var(--goldfish-soft); }
.choice:has(input:focus-visible) { outline: 3px solid var(--goldfish); outline-offset: 3px; }
.choice-title { font-family: var(--display); font-weight: 700; font-size: 1.1rem; }
.choice-sub { color: var(--pencil); font-size: 0.95rem; }
.choice-price { font-size: 0.95rem; }
.choice.compact { padding-block: 0.8rem; }
.choice.is-static { cursor: default; padding-left: 1.1rem; margin: 0; max-width: 24rem; }
.toast-note {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 0.9rem 1rem;
  border-left: 6px solid var(--goldfish);
  background: var(--goldfish-soft);
  font-size: 0.95rem;
  max-width: 100%;
}
.toast-note .sheet { box-shadow: 4px 4px 0 var(--ink); }
.toast-note .sheet img { aspect-ratio: 4 / 5; }
.field-row.extras { grid-template-columns: repeat(2, max-content); gap: 1rem 2rem; }
.toast-note strong { font-family: var(--display); }
.field { display: grid; gap: 0.35rem; min-width: 0; }
.field label { font-family: var(--display); font-weight: 700; }
.field .optional { font-weight: 500; color: var(--pencil); }
.field input, .field textarea {
  font: inherit;
  padding: 0.6em 0.75em;
  border: 2px solid var(--ink);
  border-radius: 0.6em 0.5em 0.7em 0.45em;
  background: var(--paper);
  color: var(--ink);
  width: 100%;
  min-width: 0;
}
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--goldfish); outline-offset: 2px; }
.field input:user-invalid { border-color: #b13d3f; }
.field-short input { max-width: 8rem; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.field-row.three { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.hint { color: var(--pencil); font-size: 0.95rem; }
.price-panel {
  display: grid;
  gap: 0.5rem;
  padding: 1.1rem 1.25rem;
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  background: var(--paper);
  font-variant-numeric: tabular-nums;
}
.price-row { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.price-row strong { font-family: var(--display); font-size: 1.15rem; }
.price-row.big strong { font-size: 1.7rem; }
.price-row.big span { font-family: var(--display); font-weight: 700; }
.terms { font-size: 0.95rem; color: var(--pencil); margin-top: 0.4rem; }
.dropzone {
  display: grid;
  gap: 0.3rem;
  justify-items: center;
  text-align: center;
  padding: 1.75rem 1rem;
  border: 3px dashed var(--ink);
  border-radius: 1.2em 1em 1.3em 0.9em;
  cursor: pointer;
  background: var(--paper);
}
.dropzone:hover, .dropzone.is-over { background: var(--goldfish-soft); }
.dropzone:focus-visible { outline: 3px solid var(--goldfish); outline-offset: 3px; }
.dropzone .link { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--goldfish); }
.upload-status { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-family: var(--display); font-weight: 700; }
.warn {
  padding: 0.7rem 0.9rem;
  border-left: 6px solid var(--goldfish);
  background: var(--goldfish-soft);
  font-size: 0.95rem;
  max-width: 100%;
}
.thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 0.6rem; }
.thumbs li { position: relative; aspect-ratio: 1; border: 2px solid var(--ink); background: var(--paper); overflow: hidden; }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.thumbs button {
  position: absolute; top: 2px; right: 2px;
  width: 1.6rem; height: 1.6rem;
  border: 2px solid var(--ink); border-radius: 50%;
  background: var(--paper); color: var(--ink);
  font: 700 0.9rem var(--display); line-height: 1; cursor: pointer;
}
.thumbs button:hover { background: var(--goldfish-soft); }
.submit-row { display: grid; gap: 0.8rem; justify-items: start; }
.form-error { color: #b13d3f; font-weight: 700; }
.setup-notice {
  padding: 0.9rem 1rem;
  border: 2px solid var(--ink);
  border-left-width: 6px;
  background: var(--goldfish-soft);
  max-width: 100%;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.order-done { display: grid; gap: 1.5rem; justify-items: start; }
.summary { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.35rem 1.25rem; font-variant-numeric: tabular-nums; }
.summary dt { font-family: var(--display); font-weight: 700; }
.summary dd { margin: 0; }
.deposit { display: grid; gap: 0.8rem; padding: 1.1rem 1.25rem; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); max-width: 100%; }
.pay-buttons { display: flex; flex-wrap: wrap; gap: 0.8rem 1rem; }
.next-steps { margin: 0; padding-left: 1.3em; display: grid; gap: 0.4rem; max-width: var(--measure); }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.3rem 1.5rem; }
.fallback { padding-top: 0.5rem; }
@media (max-width: 560px) {
  .choice-grid, .field-row, .field-row.three { grid-template-columns: 1fr; }
  .toast-note { grid-template-columns: 4.5rem minmax(0, 1fr); }
}

/* Narrow screens */
@media (max-width: 800px) {
  .hero { grid-template-columns: 1fr; gap: 2.5rem; padding-block: 1.5rem 3rem; }
  .hero-art { justify-self: start; width: min(100%, 300px); margin-left: 0.5rem; }
  .steps, .prices { grid-template-columns: 1fr; }
  .proof { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
}
@media (max-width: 480px) {
  .btn-lg { font-size: 1.15rem; }
  .proof { gap: 0.8rem; }
}