/* ===========================================================================
   JUST CREATE — the pages that are mostly words
   ========================================================================= */

.page {
  padding-block: clamp(2rem, 5vw, 3.5rem) var(--rhythm);
  /* A comfortable measure. Full-width body copy on a 1340px page is
     unreadable, and a shop's delivery terms are exactly the text a customer
     is already reluctant to read. */
  max-width: 68ch;
}
.page h1 { margin-bottom: .4em; }
.page h2 {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  margin-top: 2.4rem;
  margin-bottom: .6em;
}
.page h3 { font-size: 1.02rem; margin-top: 1.8rem; }
.page p, .page li { color: var(--ink-body); }
.page > .lede { margin-bottom: 2rem; }

.page ul, .page ol { padding-left: 1.2rem; margin: 0 0 1.1em; }
.page li { margin-bottom: .5rem; }

.page a:not(.btn) {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--hairline-2);
}
.page a:not(.btn):hover { text-decoration-color: var(--ocean); color: var(--ocean); }

.page .notice { margin-block: 1.6rem; }

.address { margin-top: 2rem; }
.address p { white-space: pre-line; }

/* ---- the size guide ------------------------------------------------------ */
.guide-block { margin-top: 2.4rem; }
.guide-block h2 { margin-top: 0; }

/* ---- the thank-you page --------------------------------------------------- */
.thanks { max-width: 42rem; padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--rhythm); }
.thanks-ref {
  font-family: var(--display);
  font-size: 1.1rem;
  letter-spacing: var(--track-mid);
  color: var(--ink);
  background: var(--paper-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: .8rem 1rem;
  display: inline-block;
  margin-bottom: 1.5rem;
  word-break: break-all;
}
.order-lines {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0;
  border-top: 1px solid var(--hairline);
}
.order-lines li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--hairline);
  margin: 0;
}

/* ---- 404 ------------------------------------------------------------------ */
.oops { text-align: center; padding-block: clamp(3rem, 10vw, 7rem); }
.oops img { height: 120px; width: auto; margin-inline: auto; opacity: .55; }
.oops h1 { margin-top: 1.5rem; }
.oops .btn { margin-top: 1rem; }

/* ---- the kit videos ------------------------------------------------------
   Added 18 Sep 2026 for the Glass Painting kit, whose printed booklet carries
   a QR code pointing at /glass-painting.

   ⚠ THE FOOTAGE IS PORTRAIT — 480x854, filmed on a phone. A 16:9 player would
     letterbox it into two black bars and waste most of the screen, so the
     frame is given the real aspect ratio and capped by HEIGHT rather than
     width. Capping by width is what puts a 3:4 video off the bottom of a
     laptop screen.

   ⚠ NO INLINE <style> ANYWHERE ON THIS SITE. The CSP is style-src 'self',
     so an inline block is dropped silently and the page renders unstyled
     with no error in the console to explain it. */
.kit-video {
  margin-block: 2.2rem;
}
.kit-video__frame {
  /* The video's own shape. max-width keeps it honest on a phone, where the
     viewport is narrower than 70vh is tall. */
  aspect-ratio: 480 / 854;
  max-height: min(70vh, 620px);
  max-width: 100%;
  margin-inline: auto;
  background: var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.kit-video__frame video {
  display: block;
  width: 100%;
  height: 100%;
  /* The poster is the same 480x854 as the footage, so nothing is cropped —
     `contain` rather than `cover` so a future clip of another shape is
     letterboxed instead of having its edges cut off. */
  object-fit: contain;
  background: var(--ink);
}
.kit-video__meta {
  margin-top: .8rem;
  text-align: center;
  color: var(--ink-muted);
  font-size: .92rem;
}

/* ---- the kit QR, beside the video ---------------------------------------
   Side by side where there is room, stacked on a phone. The code must keep
   its white quiet zone, so it sits on white regardless of the page ground —
   a QR printed straight onto the warm paper colour loses the margin the
   spec requires and readers start to struggle. */
.kit-qr {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.2rem;
}
/* ⚠ 180px, NOT SMALLER. Decoded at a range of rendered sizes: this 33-module
   code reads reliably at 150px and FAILS at 120px on a standard-density
   screen. 180 leaves margin for a phone camera at an angle, in bad light,
   held by someone who has never scanned anything before. */
.kit-qr__code {
  width: 180px;
  height: 180px;
  flex: none;
  background: #fff;
  padding: 6px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
}
.kit-qr__label {
  margin: 0;
  max-width: 20rem;
  color: var(--ink-body);
  font-size: .92rem;
  line-height: 1.45;
}
.kit-qr__note { color: var(--ink-muted); font-size: .85rem; }