/* Generated by tools/build_site.py from the free guide prototype.
   Do not edit by hand - rebuild instead. */

body { margin: 0; background: oklch(0.972 0.008 85); }
  a { color: oklch(0.45 0.09 235); }
  a:hover { color: oklch(0.55 0.12 65); }

.d1{font-family: "Instrument Sans", system-ui, sans-serif; color: oklch(0.26 0.028 250); background: oklch(0.972 0.008 85); min-height: 100vh;}
.d2{display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 22px 40px; border-bottom: 1px solid oklch(0.26 0.028 250 / 0.12);}
.d3{display: flex; align-items: center; gap: 12px; font-family: Newsreader, Georgia, serif; font-size: 21px; color: oklch(0.26 0.028 250); text-decoration: none;}
.d4{flex: 0 0 auto; height: 24px; width: auto; display: block;}
.d5{display: flex; align-items: center; gap: 20px; font-size: 14px;}
.d6{color: oklch(0.26 0.028 250 / 0.75); text-decoration: none;}
.d7{padding: 10px 18px; border-radius: 999px; background: oklch(0.26 0.028 250); color: oklch(0.972 0.008 85); font-size: 13.5px; text-decoration: none;}
.d8{max-width: 760px; margin: 0px auto; padding: 72px 40px 40px;}
.d9{margin: 0px 0px 18px; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: oklch(0.62 0.11 65);}
.d10{margin: 0px 0px 20px; font-family: Newsreader, Georgia, serif; font-weight: 400; font-size: 52px; line-height: 1.04; letter-spacing: -0.028em; text-wrap: balance;}
.d11{margin: 0px 0px 32px; font-family: Newsreader, Georgia, serif; font-size: 22px; line-height: 1.36; color: oklch(0.26 0.028 250 / 0.72); text-wrap: pretty;}
.d12{margin: 0px 0px 16px; font-size: 18px; line-height: 1.68;}
.d13{margin: 0px 0px 32px; font-size: 18px; line-height: 1.68;}
.d14{border: 1px solid oklch(0.26 0.028 250 / 0.2); border-radius: 14px; padding: 26px 30px; margin: 0px 0px 40px; background: oklch(0.985 0.006 85);}
.d15{margin: 0px 0px 10px; font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: oklch(0.26 0.028 250 / 0.55);}
.d16{margin: 0px; font-size: 17px; line-height: 1.6;}
.d17{margin: 0px 0px 20px; font-family: Newsreader, Georgia, serif; font-weight: 400; font-size: 32px; line-height: 1.12; letter-spacing: -0.02em;}
.d18{margin: 0px 0px 8px; font-family: Newsreader, Georgia, serif; font-weight: 400; font-size: 22px;}
.d19{margin: 0px 0px 22px; font-size: 17.5px; line-height: 1.65;}
.d20{margin: 0px 0px 34px; font-size: 17.5px; line-height: 1.65;}
.d21{margin: 0px 0px 32px; font-size: 17.5px; line-height: 1.65;}
.d22{border-left: 3px solid oklch(0.62 0.11 65); padding: 6px 0px 6px 22px; margin: 0px 0px 40px;}
.d23{margin: 0px 0px 8px; font-size: 18px; line-height: 1.6;}
.d24{font-weight: 500;}
.d25{margin: 0px; font-size: 17px; line-height: 1.6; color: oklch(0.26 0.028 250 / 0.75);}
.d26{border-radius: 22px; background: oklch(0.26 0.028 250); color: oklch(0.96 0.008 85); padding: 44px 46px; margin: 0px 0px 32px;}
.d27{margin: 0px 0px 12px; font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: oklch(0.72 0.1 65);}
.d28{margin: 0px 0px 14px; font-family: Newsreader, Georgia, serif; font-weight: 400; font-size: 32px; line-height: 1.12;}
.d29{margin: 0px 0px 24px; font-size: 17px; line-height: 1.62; color: oklch(0.96 0.008 85 / 0.8);}
.d30{display: inline-block; padding: 14px 28px; border-radius: 999px; background: oklch(0.72 0.1 65); color: oklch(0.24 0.028 250); font-size: 15px; text-decoration: none;}
.d31{margin: 0px 0px 10px; font-size: 15px; line-height: 1.6; color: oklch(0.26 0.028 250 / 0.7);}
.d32{margin: 0px 0px 40px; font-size: 14px; line-height: 1.6; color: oklch(0.26 0.028 250 / 0.65);}
.d33{border-top: 1px solid oklch(0.26 0.028 250 / 0.12); padding: 32px 40px 56px;}
.d34{max-width: 760px; margin: 0px auto; display: flex; gap: 20px; flex-wrap: wrap; align-items: baseline; justify-content: space-between; font-size: 14px; color: oklch(0.26 0.028 250 / 0.7);}
.d35{text-decoration: none;}
.d36{margin: 0px; padding: 28px 22px 34px; text-align: center; font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.1em; line-height: 1.6; color: color-mix(in oklch, var(--fg, oklch(0.26 0.028 250)) 72%, transparent);}

/* --- reading and focus ------------------------------------------------- */
/* No smooth scrolling. The page is over 25,000px tall, and animating a jump
   that far was unreliable - long scrolls were interrupted and dumped the reader
   back at the top - as well as being a poor idea for a readership with sensory
   sensitivity. Anchor links jump. */

/* The header is sticky, so a section scrolled to by an anchor link would sit
   underneath it. --header-h is measured at runtime by site.js, because the nav
   wraps to several rows on a phone and the header is much taller there. */
:root { --header-h: 112px; }
section[id] { scroll-margin-top: var(--header-h); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
img, svg, video { max-width: 100%; }
video { height: auto; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 12px 18px; background: var(--btn); color: var(--on-btn);
  border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

/* With JavaScript blocked the first product panel still reads, but the tabs
   cannot switch, so they are not offered. */
.no-js [data-shot-tab] { display: none; }

/* Decorative circles and a leftover annotation in the design sit outside their
   section on purpose. Clipping the page wrapper contains them without creating
   a scroll container, which would break the sticky header. */
body > div { overflow-x: clip; }

/* --- the persistent buy bar --------------------------------------------
   On a phone the header is 207px, because nine nav items wrap to four rows.
   Sticky, that is a quarter of the screen gone for the whole page. So on
   phones the header scrolls away with the rest of the page - the nav is still
   there in full at the top, nothing is hidden behind a menu - and this bar
   keeps the one control that has to stay reachable. */
/* --- buying for more than one person ----------------------------------- */
/* Sits under the price card. Quiet on purpose: the one-copy path is the common
   one and must not gain a decision, so this reads as a separate offer rather
   than as a control attached to the main button. */
.copies {
  max-width: 1240px;
  margin: 8px auto 0;
  padding: 24px 40px 0;
}
.copies-title {
  font-family: Newsreader, Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 8px;
}
.copies-note,
.copies-foot {
  font-size: 15px;
  line-height: 1.55;
  max-width: 62ch;
  margin: 0 0 16px;
  color: color-mix(in oklch, var(--fg) 72%, transparent);
}
.copies-foot { margin: 12px 0 0; font-size: 14px; }
.copies-foot a, .copies-note a { color: inherit; text-decoration: underline; }
.copies-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.copies-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--fg) 60%, transparent);
}
.copies-input {
  font: inherit;
  font-size: 18px;
  width: 5.5ch;
  padding: 10px 8px;
  text-align: center;
  color: var(--fg);
  background: color-mix(in oklch, var(--fg) 4%, transparent);
  border: 1px solid color-mix(in oklch, var(--fg) 22%, transparent);
  border-radius: 10px;
}
.copies-buy {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 999px;
  /* --btn and --on-btn, never --accent. In dark mode the accent is a pale
     purple that cannot carry light text, so the dark theme uses a gold button
     with ink on it. Conflating the two has broken contrast twice. */
  background: var(--btn);
  color: var(--on-btn);
  font-weight: 600;
  text-decoration: none;
}
.copies-buy:hover { filter: brightness(1.06); }

/* The line under the Buy button that points at the block. Quiet: it is for the
   minority who need it and must not compete with the button above it. */
.copies-signpost {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  color: color-mix(in oklch, var(--fg) 66%, transparent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.copies-signpost:hover { color: var(--fg); }

@media (max-width: 720px) {
  .copies { padding: 20px 20px 0; }
  .copies-buy { flex: 1 1 100%; text-align: center; }
}

.buy-bar { display: none; }

@media (max-width: 760px) {
  header[data-site-header] { position: static; padding: 12px 16px; }
  header[data-site-header] nav { gap: 8px 12px; font-size: 13px; }

  /* The header no longer covers anything, so anchors need almost no offset. */
  section[id] { scroll-margin-top: 16px; }

  .buy-bar {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in oklch, var(--bg) 92%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid color-mix(in oklch, var(--fg) 12%, transparent);
  }

  .buy-bar-link {
    display: block;
    padding: 14px 20px;
    border-radius: 999px;
    background: var(--btn);
    color: var(--on-btn);
    font-size: 16px;
    text-align: center;
  }

  /* Room for the bar, so it never covers the last thing on the page. */
  body > div { padding-bottom: 84px; }
}

/* --- motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- print -------------------------------------------------------------- */
@media print {
  header, video, [data-shot-tab] { display: none !important; }
  body { background: #fff; color: #000; }
}