/* The simple page (Kevin, 2026-11-10, "work on a template for pages like this that are maybe a little more stylized but still a
   departure from standard pages like show and shop. simple, one button upper right Back. button in our style and a simpler header
   but it includes logo and page name. still use color scheme, but not radical."). Claude's design, proposed.
   Used by /props/. A new page starts from templates/simple-page.html. Colours come from the live palette (colors.css): the page
   is colour 4, words colour 1, the accent colour 2; cards are the paper lightened toward white, so no palette paints them loud. */

@font-face { font-family: 'SP Display'; font-weight: 900; font-display: swap; src: url(/assets/fonts/inter-tight-900.woff2?v=2026-11-04-1) format('woff2'); }
@font-face { font-family: 'SP Text'; font-weight: 500; font-display: swap; src: url(/assets/fonts/inter-500.woff2?v=2026-11-04-1) format('woff2'); }
@font-face { font-family: 'SP Text'; font-weight: 800; font-display: swap; src: url(/assets/fonts/inter-800.woff2?v=2026-11-04-1) format('woff2'); }
@font-face { font-family: 'SP Mono'; font-weight: 700; font-display: swap; src: url(/assets/fonts/space-mono-700.woff2?v=2026-11-04-1) format('woff2'); }

.sp {
  --sp-paper: var(--palette-paper, #F6F4EE);
  --sp-ink: var(--palette-ink, #111);
  --sp-accent: var(--palette-accent, #FF3A3A);
  --sp-card: color-mix(in srgb, var(--sp-paper) 45%, #fff);
  --sp-col: 60rem;
  margin: 0; background: var(--sp-paper); color: var(--sp-ink);
  font: 500 17px/1.6 'SP Text', Inter, system-ui, sans-serif;
  min-height: 100svh; display: flex; flex-direction: column;
}
.sp * { box-sizing: border-box; }
.sp main { width: 100%; max-width: var(--sp-col); margin: 0 auto; padding: 28px 20px 56px; flex: 1; }
.sp a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.sp a:hover { text-decoration-color: var(--sp-accent); }

/* The header: the stamp and the page's name at the left, Back. at the right, a 3px rule under it. */
.sp-head { border-bottom: 3px solid var(--sp-ink); }
.sp-head-in { max-width: var(--sp-col); margin: 0 auto; padding: 16px 20px; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; }
.sp-logo { width: 64px; height: 64px; background: var(--palette-logo-page, url(/assets/images/logo_red_adjusted.png?v=2026-10-09-2)) center / contain no-repeat; flex: none; }
.sp-head h1 { margin: 0; font: 900 clamp(1.6rem, 4.2vw, 2.6rem)/1.02 'SP Display', 'Inter Tight', sans-serif; letter-spacing: -.03em; text-wrap: balance; }

/* Back. in our style: outlined, the word alone, no arrow (Kevin, 2026-11-10, "no arrow on back. button"); the .sp-arw rules stay if one comes back. */
.sp-back { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 2px solid var(--sp-ink); background: var(--sp-card);
  color: var(--sp-ink); text-decoration: none; font: 900 1.05rem/1 'SP Display', 'Inter Tight', sans-serif; letter-spacing: -.02em; white-space: nowrap; }
.sp-back .sp-arw { display: inline-block; font: 800 1.15em/1 'SP Text', Inter, sans-serif; color: var(--sp-accent); transform: rotate(90deg); transition: translate .15s; }
.sp-back:hover .sp-arw, .sp-back:focus-visible .sp-arw { translate: -4px 0; }
.sp-back:focus-visible { outline: 2px solid var(--sp-ink); outline-offset: 2px; }

/* The opening: the video at the left, the paragraph beside it; the video over the paragraph on a phone. */
.sp-intro { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 28px; align-items: center; margin-bottom: 8px; }
.sp-intro video { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #fff; border: 2px solid var(--sp-ink); box-shadow: 5px 5px 0 var(--sp-ink); }
.sp-lede { margin: 0; font-size: 1.15rem; line-height: 1.55; }
.sp-lede + .sp-lede { margin-top: 12px; }

/* Sections: a heading over its words; a small mono kicker can sit over a heading. */
.sp h2 { margin: 44px 0 10px; font: 900 1.7rem/1.1 'SP Display', 'Inter Tight', sans-serif; letter-spacing: -.025em; }
.sp h3 { margin: 0 0 6px; font: 800 1rem/1.3 'SP Text', Inter, sans-serif; }
.sp p { margin: 0 0 12px; }
.sp-kicker { margin: 44px 0 -6px; font: 700 .72rem/1 'SP Mono', 'Space Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--sp-accent); }

/* Lists: small accent squares for bullets. */
.sp ul { list-style: none; margin: 0 0 8px; padding: 0; }
.sp li { position: relative; padding-left: 1.2em; margin: 4px 0; }
.sp li::before { content: ''; position: absolute; left: 0; top: .62em; width: .42em; height: .42em; background: var(--sp-accent); }

/* Good and bad lists (Kevin, 2026-11-10, "make good bullets a first color color scheme check, and bad bullets a second color, color scheme X"):
   inside .sp-good a check in the palette's colour 1, inside .sp-bad an X in its colour 2, in place of the accent square. */
.sp-good li::before, .sp-bad li::before { width: auto; height: auto; top: 0; background: none; font: 800 1em/1.6 'SP Text', Inter, sans-serif; }
.sp-good li::before { content: '\2713'; color: var(--palette-swatch-1, #111); }
.sp-bad li::before { content: '\2715'; color: var(--palette-swatch-2, #FF3A3A); }

/* Cards: a group of short blocks, two or three across on a computer. */
.sp-cards { columns: 3 260px; column-gap: 16px; margin: 14px 0 8px; }   /* packed into columns, each card its own height (Kevin, 2026-11-10, "let each box fit its own content", then "pack them into columns"); they read down each column */
.sp-card { break-inside: avoid; margin: 0 4px 18px 0; background: var(--sp-card); border: 2px solid var(--sp-ink); box-shadow: 4px 4px 0 var(--sp-ink); padding: 14px 16px 10px; }
.sp-card p:last-child, .sp-card ul:last-child { margin-bottom: 0; }
/* A card on its own, outside .sp-cards (Kevin, 2026-11-10, "... and Not sure? stuff should each go in a container too"). */
.sp-card.sp-solo { margin: 14px 4px 8px 0; padding: 14px 16px; }

/* A plain-boxed note (e.g. "it moved"). */
.sp-note { border: 2px solid var(--sp-ink); background: var(--sp-card); padding: 10px 14px; font-weight: 800; margin: 0 0 20px; }

@media (max-width: 720px) {
  .sp main { padding: 20px 16px 44px; }
  .sp-head-in { padding: 12px 16px; gap: 12px; }
  .sp-logo { width: 46px; height: 46px; }
  .sp-intro { grid-template-columns: 1fr; gap: 16px; }
  .sp-intro video { max-width: 360px; justify-self: center; }
  .sp-lede { font-size: 1.05rem; }
  .sp h2 { margin-top: 36px; font-size: 1.45rem; }
}
@media (max-width: 400px) {
  .sp-back { padding: 8px 11px; gap: 7px; font-size: .95rem; }
  .sp-logo { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .sp-back .sp-arw { transition: none; } }