/*
  Quill & Star website: the "Classic Puzzle Book" design system for the web.
  Source of truth: docs/design-system.md and lib/design/tokens/*.

  Paper edition by default; the night edition follows the reader's system
  setting (prefers-color-scheme: dark). No JavaScript, no third-party
  requests: every font and image is served from this site.

  1. Fonts          5. Printed components     9. 404
  2. Tokens         6. Landing page          10. Motion, print
  3. Base           7. Illustrations
  4. Page frame     8. Document pages (privacy, terms, support, data)
*/

/* 1. Fonts: Latin subsets of the app's own fonts (SIL OFL, see /fonts). */

@font-face {
  font-family: "Libre Baskerville";
  src: url("/fonts/libre-baskerville-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Crimson Pro";
  src: url("/fonts/crimson-pro-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Crimson Pro";
  src: url("/fonts/crimson-pro-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Crimson Pro";
  src: url("/fonts/crimson-pro-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("/fonts/work-sans-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("/fonts/work-sans-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nothing You Could Do";
  src: url("/fonts/nothing-you-could-do-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 2. Tokens */

:root {
  color-scheme: light;

  /* Paper edition */
  --paper: #f2efe6;            /* Book paper */
  --paper-band: #ebe6da;       /* a shade deeper, for set-apart bands */
  --ink: #1e2733;              /* Quill ink */
  --graphite: #5d6169;         /* secondary text, crosses, cell lines */
  --proof: #b5382f;            /* Proof red: mistakes and conflicts */
  --gilt: #a8813a;             /* streak stars only (decorative) */
  --rule: rgb(30 39 51 / 0.18);
  --rule-firm: rgb(30 39 51 / 0.8);
  --pattern-ink: rgb(30 39 51 / 0.1);
  --wash: rgb(30 39 51 / 0.09);
  --link-line: rgb(30 39 51 / 0.55);
  --grain: url("/assets/grain-paper.png");

  /* Printer's tints, paper edition */
  --tint-sage: #bccfac;
  --tint-cornflower: #a9bed4;
  --tint-ochre: #e4c28c;
  --tint-rose: #e5b6ab;
  --tint-lavender: #c6badc;
  --tint-teal: #a2c8c2;
  --tint-wheat: #daccad;
  --tint-plum: #d2aec6;
  --tint-moss: #cad29c;
  --tint-mist: #c2d5e1;

  /* App icon, default look (plan 12.3) */
  --icon-paper: #f3ebdd;
  --icon-blue: #a9bed4;
  --icon-sage: #bccfac;
  --icon-ochre: #e4c28c;
  --icon-line: rgb(42 37 31 / 0.3);
  --icon-border: #2a251f;
  --icon-star: #26211b;

  /* Type */
  --font-wordmark: "Libre Baskerville", Baskerville, "Baskerville Old Face", Georgia, serif;
  --font-book: "Crimson Pro", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-ui: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-pencil: "Nothing You Could Do", "Bradley Hand", "Segoe Print", cursive;

  --step--1: 0.9375rem;                                   /* 15px interface small */
  --step-0: 1.1875rem;                                    /* 19px book text */
  --step-1: clamp(1.25rem, 1.1rem + 0.5vw, 1.4375rem);    /* 20-23px lede */
  --step-2: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);      /* 24-30px titles */
  --step-3: clamp(2rem, 1.45rem + 2.4vw, 3.125rem);       /* section titles */
  --step-wordmark: clamp(2.375rem, 0.95rem + 7.4vw, 5.75rem);

  /* Space and shape */
  --gutter: clamp(1rem, 4.6vw, 3rem);
  --page: 72rem;
  --measure: 34em;
  --radius: 2px;
  --tap: 2.75rem; /* 44px */
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    /* Night edition */
    --paper: #16191e;
    --paper-band: #1c2026;
    --ink: #ece6d8;
    --graphite: #a7abb2;
    --proof: #e27a6e;
    --gilt: #d2ae62;
    --rule: rgb(236 230 216 / 0.18);
    --rule-firm: rgb(236 230 216 / 0.8);
    --pattern-ink: rgb(236 230 216 / 0.12);
    --wash: rgb(236 230 216 / 0.09);
    --link-line: rgb(236 230 216 / 0.55);
    --grain: url("/assets/grain-night.png");

    --tint-sage: #3e4f39;
    --tint-cornflower: #34465a;
    --tint-ochre: #5a4729;
    --tint-rose: #5a3632;
    --tint-lavender: #433a58;
    --tint-teal: #2f4c48;
    --tint-wheat: #4d4434;
    --tint-plum: #4e3446;
    --tint-moss: #45492b;
    --tint-mist: #344753;

    /* App icon, dark look */
    --icon-paper: #2b2824;
    --icon-blue: #3e4c5d;
    --icon-sage: #465840;
    --icon-ochre: #5e4c31;
    --icon-line: rgb(237 229 214 / 0.28);
    --icon-border: #ede5d6;
    --icon-star: #f3ebdd;
  }
}

/* 3. Base */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-color: var(--paper);
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--paper);
  background-image: var(--grain);
  background-size: 144px 144px; /* about 1.5 device px per grain texel, as in the app */
  color: var(--ink);
  font-family: var(--font-book);
  font-size: var(--step-0);
  line-height: 1.55;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-book);
  font-weight: 700;
  line-height: 1.12;
  text-wrap: balance;
  font-variant-numeric: lining-nums;
}

p,
ul,
ol,
dl,
figure,
blockquote {
  margin: 0;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--link-line);
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--radius);
}

::selection {
  background: var(--tint-mist);
  color: var(--ink);
}

strong,
b {
  font-weight: 700;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Hidden holder of the shared SVG <pattern>s (must not be display:none,
   or some browsers stop painting the patterns). */
.qs-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* 4. Page frame: skip link, running head, footer */

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 0.75rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 1rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius);
  transform: translateY(-200%);
}

.skip-link:focus-visible,
.skip-link:focus {
  transform: none;
  outline-color: var(--ink);
}

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.masthead {
  border-bottom: 1px solid var(--rule);
}

.masthead .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 1.5rem;
  padding-block: 0.5rem;
}

.masthead-brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-family: var(--font-wordmark);
  font-size: 1.25rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.masthead-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.masthead-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 0.625rem;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  text-decoration: none;
  border-radius: var(--radius);
}

.masthead-nav li:last-child a {
  padding-right: 0;
}

.masthead-nav a:hover {
  text-decoration: underline;
  text-decoration-color: var(--link-line);
}

.masthead-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: currentColor;
}

@media (max-width: 26.5rem) {
  .masthead .wrap {
    justify-content: center;
    text-align: center;
  }
  .masthead-nav ul {
    justify-content: center;
  }
  .masthead-nav li:last-child a {
    padding-right: 0.625rem;
  }
}

/* The wordmark: Libre Baskerville with the ampersand in Crimson Pro Italic. */
.amp {
  font-family: var(--font-book);
  font-style: italic;
  font-weight: 400;
  font-size: 1.18em;
  line-height: 0;
}

.site-footer {
  margin-top: clamp(3rem, 8vw, 6rem);
  padding-block: clamp(2.5rem, 6vw, 4rem) 2.5rem;
  position: relative;
  font-size: 1.0625rem;
}

/* The book's closing double rule: 1px, 3px of paper, 1px. */
.site-footer::before {
  height: 5px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 2rem clamp(1.5rem, 4vw, 3rem);
}

.footer-brand .wordmark-small {
  margin: 0 0 0.25rem;
  color: var(--ink);
  font-style: normal;
  font-family: var(--font-wordmark);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
}

.footer-brand p {
  color: var(--graphite);
  font-style: italic;
}

.footer-heading {
  margin: 0 0 0.5rem;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 700;
  line-height: 1.3;
}

.footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-style: italic;
  overflow-wrap: anywhere;
}

.footer-contact dt {
  margin-top: 0.25rem;
  color: var(--graphite);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.3;
}

.footer-contact dd {
  margin: 0;
}

.footer-contact a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-style: italic;
  overflow-wrap: anywhere;
  font-variant-numeric: lining-nums;
}

.footer-small {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  color: var(--graphite);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.footer-small p + p {
  margin-top: 0.375rem;
}

@media (max-width: 52rem) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 30rem) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 5. Printed components */

/* A printed box: a 1px ink rule, square corners, never a soft shadow. */
.printed {
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  padding: clamp(1rem, 3vw, 1.5rem);
}

/* The main call to action: a double rule (1px, 3px gap, 1px). */
.double-rule {
  position: relative;
  border: 1px solid var(--ink);
  border-radius: 1px;
  margin: 5px; /* room for the outer rule */
}

.double-rule::before {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  pointer-events: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem; /* 52px */
  padding: 0.5rem 1rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}

.btn:hover {
  background: color-mix(in srgb, var(--ink) 88%, var(--paper));
}

.btn--secondary {
  background: transparent;
  color: var(--ink);
}

.btn--secondary:hover {
  background: var(--wash);
}

/* Standalone text links: Crimson Pro Italic with an underline. */
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-style: italic;
}

/* Hairline section rule inside the page margins, like a book page. */
.section {
  position: relative;
  padding-block: clamp(3.5rem, 9vw, 7rem);
}

.section::before,
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: max(var(--gutter), calc((100% - var(--page)) / 2 + var(--gutter)));
  right: max(var(--gutter), calc((100% - var(--page)) / 2 + var(--gutter)));
}

.section::before {
  border-top: 1px solid var(--rule);
}

/* The glance band already closes the hero with its own rule. */
.glance + .section::before {
  display: none;
}

.section-head {
  max-width: 40rem;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

.section-title {
  font-size: var(--step-3);
  line-height: 1.06;
  letter-spacing: -0.005em;
}

.section-head p,
.copy > p {
  margin-top: 1rem;
  max-width: var(--measure);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.45;
}

.copy h3 {
  margin-top: 2rem;
  font-size: var(--step-2);
}

.copy h3 + p {
  margin-top: 0.5rem;
}

.copy > :first-child {
  margin-top: 0;
}

.section-subtitle {
  font-size: var(--step-2);
}

/* A screenshot printed as a plate: paper margin, hairline ink rule. */
.plate {
  width: 100%;
  max-width: 18.5rem;
  margin-inline: auto;
}

.plate-frame {
  padding: 0.4375rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
}

.plate img {
  width: 100%;
  aspect-ratio: 1320 / 2868;
  object-fit: cover;
  background: var(--paper-band);
  border-radius: 1px;
}

.plate figcaption {
  margin-top: 0.75rem;
  color: var(--graphite);
  font-size: 1rem;
  font-style: italic;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
}

/* Lists marked with small ink stars (clip-path: no images, no fonts). */
.star-list {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.star-list li {
  position: relative;
  padding-left: 1.5rem;
  max-width: var(--measure);
}

.star-list li + li {
  margin-top: 0.625rem;
}

.star-list li::before {
  content: "";
  position: absolute;
  left: 0.125rem;
  top: 0.42em;
  width: 0.72em;
  height: 0.72em;
  background: var(--ink);
  clip-path: polygon(50% 0%, 61.8% 35.3%, 98.6% 35.3%, 68.9% 57.1%, 80.2% 92.4%, 50% 70.6%, 19.8% 92.4%, 31.1% 57.1%, 1.4% 35.3%, 38.2% 35.3%);
  transform: rotate(-6deg);
}

/* Pencil notes: the app's tutorial and hint hand. Digits are set in
   Crimson Pro Italic, since the pencil hand draws "1" like "/". */
.pencil {
  color: var(--graphite);
  font-family: var(--font-pencil);
  font-size: 1.25rem;
  line-height: 1.45;
  font-variant-numeric: normal;
}

.pencil .num {
  font-family: var(--font-book);
  font-style: italic;
  font-size: 0.95em;
}

/* 6. Landing page */

/* Hero: a title page beside a printed plate. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(3.5rem, 8vw, 6rem);
}

.wordmark {
  font-family: var(--font-wordmark);
  font-weight: 400;
  font-size: var(--step-wordmark);
  line-height: 1.04;
  letter-spacing: -0.012em;
  white-space: nowrap;
  text-wrap: nowrap;
}

/* Like the app's wordmark, it scales to fit rather than wrap: sized from
   its own column ("Quill & Star" is about 6 ems wide). */
@supports (container-type: inline-size) {
  .hero-copy {
    container-type: inline-size;
  }
  .wordmark {
    font-size: clamp(2.25rem, 15.5cqi, 5.75rem);
  }
}

.hero-tagline {
  margin-top: 0.75rem;
  color: var(--graphite);
  font-size: var(--step-2);
  font-style: italic;
  line-height: 1.25;
}

.ornament {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 26rem;
  margin: clamp(1.5rem, 3vw, 2rem) 0;
}

.ornament::before,
.ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule-firm);
}

.ornament::before {
  flex: 0 0 2.5rem;
}

.ornament svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

.hero .lede {
  max-width: 30em;
}

.store {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 29rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  padding: 1rem 1.25rem;
}

.store-icon {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 22.5%; /* how a phone shows the icon */
  box-shadow: 0 0 0 1px var(--rule);
}

.store-title {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.store-note {
  margin-top: 0.125rem;
  color: var(--graphite);
  font-size: 1.0625rem;
  font-style: italic;
  line-height: 1.35;
}

.hero-links {
  margin-top: 0.75rem;
}

/* The phone lies on a page of the puzzle: the icon's own artwork. */
.hero-art {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(1.75rem, 5vw, 3rem) clamp(1rem, 4vw, 2.5rem);
  isolation: isolate;
}

.hero-art .icon-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
}

.hero-art .plate {
  max-width: 17.5rem;
}

.hero-art .plate-frame {
  box-shadow: 0 0 0 1px var(--paper);
}

/* At a glance: four plain facts in a ruled band (no numbers, no badges). */
.glance {
  border-block: 1px solid var(--rule);
  background: var(--paper-band);
}

.glance ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-block: 0;
  list-style: none;
}

.glance li {
  padding: 1.125rem 1rem;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
}

.glance li + li {
  border-left: 1px solid var(--rule);
}

@media (max-width: 52rem) {
  .glance ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .glance li:nth-child(3) {
    border-left: 0;
  }
  .glance li:nth-child(n + 3) {
    border-top: 1px solid var(--rule);
  }
}

/* Spreads: copy on one page, a plate on the facing page. */
.spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
  align-items: center;
  gap: clamp(2.5rem, 7vw, 6.5rem);
}

.spread--flip {
  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
}

.spread--flip > :first-child {
  order: 2;
}

.spread--flip > :last-child {
  order: 1;
}

.spread--wide-art {
  grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
}

.plates-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.plates-pair .plate {
  max-width: 13rem;
}

.plates-pair .plate:last-child {
  margin-top: 2.5rem;
}

/* The week in puzzles: a printed table. */
.week-table {
  width: 100%;
  max-width: 30rem;
  margin-top: 2rem;
  border-collapse: collapse;
  font-variant-numeric: lining-nums;
}

.week-table caption {
  padding-bottom: 0.5rem;
  font-weight: 700;
  font-size: 1.25rem;
  text-align: left;
}

.week-table th,
.week-table td {
  padding: 0.5rem 0;
  border-top: 1px solid var(--rule);
  text-align: left;
  vertical-align: middle;
}

.week-table tr:last-child th,
.week-table tr:last-child td {
  border-bottom: 1px solid var(--rule);
}

.week-table th {
  width: 40%;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 400;
}

.week-table td:last-child {
  width: 2.75rem;
}

.mini-grid {
  width: 1.75rem;
  height: 1.75rem;
  margin-left: auto;
}

.mini-grid-lines {
  fill: none;
  stroke: var(--graphite);
  stroke-width: 0.6;
}

.mini-grid-frame {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
}

/* How to play: three steps, each with a real example board. */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  counter-increment: step;
}

.steps .board {
  width: 100%;
  max-width: 15rem;
}

.step-title {
  display: flex;
  gap: 0.625rem;
  align-items: baseline;
  margin-top: 1.25rem;
  font-size: var(--step-2);
  line-height: 1.15;
}

.step-title::before {
  content: counter(step);
  flex: none;
  min-width: 1.1em;
  color: var(--graphite);
  font-style: italic;
  font-weight: 400;
  font-variant-numeric: oldstyle-nums;
  font-size: 1.15em;
}

.steps p {
  margin-top: 0.5rem;
  max-width: 28em;
}

.learn {
  max-width: 54rem;
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid var(--rule);
}

/* A hint as the app prints it: a board with its focus, a pencil note. */
.hint-figure {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
  max-width: 32rem;
  margin-top: 2rem;
  padding: 1.25rem;
}

.hint-figure .board {
  width: 100%;
}

.hint-figure figcaption {
  display: grid;
  gap: 0.5rem;
}

.hint-figure .hint-label {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 700;
}

/* The puzzle book's contents, with dot leaders. */
.contents {
  max-width: 30rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.contents-title {
  margin-top: 2rem;
  font-size: 1.25rem;
}

.contents + p {
  margin-top: 1rem;
}

.contents-title + .contents {
  margin-top: 0.5rem;
}

.contents li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding-block: 0.3125rem;
}

.contents .chapter {
  flex: 0 1 auto;
}

.contents .chapter i {
  color: var(--graphite);
}

.contents .leader {
  flex: 1 1 1rem;
  min-width: 1rem;
  border-bottom: 2px dotted var(--rule-firm);
  opacity: 0.45;
  transform: translateY(-0.3em);
}

.contents .pages {
  flex: none;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-variant-numeric: lining-nums tabular-nums;
}

/* This week's stars. */
.week-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  max-width: 30rem;
}

.week-strip-label {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 700;
}

.week {
  display: flex;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.week li {
  display: grid;
  justify-items: center;
  gap: 0.125rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  line-height: 1;
  color: var(--graphite);
}

.week svg {
  width: 1.375rem;
  height: 1.375rem;
}

.week-star {
  stroke-width: 1.4;
}

.week-star--solved {
  fill: var(--gilt);
  stroke: var(--gilt);
}

.week-star--today {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
}

.week-star--future {
  fill: none;
  stroke: var(--graphite);
  stroke-dasharray: 1.6 2.2;
}

.week-strip-count {
  font-family: var(--font-ui);
  font-size: var(--step--1);
}

/* The ten printer's tints, each with its pattern. */
.swatches {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 3.75rem));
  gap: 1rem 0.875rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.swatches li {
  display: grid;
  justify-items: center;
  gap: 0.375rem;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.2;
  color: var(--graphite);
}

.swatch {
  width: 3rem;
  height: 3rem;
}

.swatch-rule {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
}

/* The fine print: two printed boxes, side by side. */
.fine-print {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
}

.fine-print h3 {
  font-size: var(--step-2);
}

.fine-print .star-list {
  margin-top: 1rem;
}

.fine-print .printed > p {
  margin-top: 1rem;
}

/* FAQ */
.faq {
  max-width: 46rem;
  border-top: 1px solid var(--ink);
}

.faq details {
  border-bottom: 1px solid var(--rule);
}

.faq summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  padding: 0.75rem 3rem 0.75rem 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.3;
  border-radius: var(--radius);
}

.faq summary::-webkit-details-marker {
  display: none;
}

/* A pen-drawn plus that turns into a cross when the answer is open. */
.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  right: 0.875rem;
  top: 50%;
  width: 1rem;
  height: 2px;
  margin-top: -1px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform 160ms ease-out;
}

.faq summary::after {
  transform: rotate(90deg);
}

.faq details[open] summary::before {
  transform: rotate(45deg);
}

.faq details[open] summary::after {
  transform: rotate(135deg);
}

.faq summary:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--link-line);
  text-underline-offset: 0.18em;
}

.faq-answer {
  padding: 0 0 1.5rem;
  max-width: var(--measure);
}

.faq-answer p + p {
  margin-top: 0.75rem;
}

/* A note from the maker: a letter set in book text, with a drop cap. */
.note {
  max-width: 38rem;
  margin-inline: auto;
}

.note .section-title {
  text-align: center;
}

.note-body {
  margin-top: 2rem;
  font-size: var(--step-1);
  line-height: 1.55;
}

.note-body p + p {
  margin-top: 1rem;
}

.note-body > p:first-child::first-letter {
  float: left;
  margin: 0.08em 0.12em 0 0;
  font-family: var(--font-wordmark);
  font-size: 3.4em;
  line-height: 0.82;
}

.signature {
  margin-top: 1.5rem;
  text-align: right;
}

.signature .pencil {
  display: block;
  color: var(--ink);
  font-size: 1.75rem;
  line-height: 1.2;
}

.signature small {
  color: var(--graphite);
  font-size: 1rem;
  font-style: italic;
}

.closing {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  margin-top: clamp(3rem, 7vw, 4.5rem);
  text-align: center;
}

.closing .store {
  margin-inline: auto;
  text-align: left;
}

/* Landing page: one column below tablet width. */
@media (max-width: 52rem) {
  .hero,
  .spread,
  .spread--flip,
  .spread--wide-art,
  .fine-print {
    grid-template-columns: minmax(0, 1fr);
  }
  .spread--flip > :first-child,
  .spread--flip > :last-child {
    order: 0;
  }
  .hero-art {
    max-width: 26rem;
    width: 100%;
    margin-inline: auto;
  }
  .steps {
    grid-template-columns: minmax(0, 1fr);
    max-width: 34rem;
  }
  .steps li {
    display: grid;
    grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
    gap: 0 1.25rem;
    align-items: start;
  }
  .steps .board {
    grid-row: span 2;
  }
  .step-title {
    margin-top: 0;
  }
  .plates-pair {
    max-width: 28rem;
    margin-inline: auto;
  }
}

/* Phones: one plate under the other, so the screenshots stay readable. */
@media (max-width: 30rem) {
  .plates-pair {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
  .plates-pair .plate {
    max-width: 15rem;
    margin-inline: auto;
  }
  .plates-pair .plate:last-child {
    margin-top: 0;
  }
}

@media (max-width: 30rem) {
  .steps li {
    grid-template-columns: minmax(0, 1fr);
  }
  .steps .board {
    grid-row: auto;
    max-width: 13rem;
  }
  .step-title {
    margin-top: 1rem;
  }
  .hint-figure {
    grid-template-columns: minmax(0, 1fr);
  }
  .hint-figure .board {
    max-width: 11rem;
  }
  .store {
    align-items: flex-start;
    padding: 0.875rem 1rem;
  }
  .store-icon {
    width: 3rem;
    height: 3rem;
  }
  .swatches {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.875rem 0.5rem;
  }
  .swatch {
    width: 2.5rem;
    height: 2.5rem;
  }
  .glance li {
    padding: 0.875rem 0.5rem;
  }
}

/* 7. Illustrations: boards and marks, inked by the edition's tokens */

.board {
  height: auto;
  overflow: visible;
}

.tint-sage { fill: var(--tint-sage); }
.tint-cornflower { fill: var(--tint-cornflower); }
.tint-ochre { fill: var(--tint-ochre); }
.tint-rose { fill: var(--tint-rose); }
.tint-lavender { fill: var(--tint-lavender); }
.tint-teal { fill: var(--tint-teal); }
.tint-wheat { fill: var(--tint-wheat); }
.tint-plum { fill: var(--tint-plum); }
.tint-moss { fill: var(--tint-moss); }
.tint-mist { fill: var(--tint-mist); }

.pat-f {
  fill: var(--pattern-ink);
}

.pat-s {
  fill: none;
  stroke: var(--pattern-ink);
}

.cell-lines {
  fill: none;
  stroke: var(--graphite);
}

.region-borders {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: square;
  stroke-linejoin: round;
}

.outer-rule {
  fill: none;
  stroke: var(--rule-firm);
}

.ink-star {
  fill: var(--ink);
  stroke: var(--ink);
}

.pen {
  fill: none;
  stroke: var(--graphite);
  stroke-width: 2.2;
  stroke-linecap: round;
}

.proof-ring {
  fill: none;
  stroke: var(--proof);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.focus-wash {
  fill: var(--wash);
}

.focus-outline {
  fill: none;
  stroke: var(--rule-firm);
}

.icon-paper { fill: var(--icon-paper); }
.icon-blue { fill: var(--icon-blue); }
.icon-sage { fill: var(--icon-sage); }
.icon-ochre { fill: var(--icon-ochre); }
.icon-lines { fill: none; stroke: var(--icon-line); }
.icon-borders { fill: none; stroke: var(--icon-border); }
.icon-star { fill: var(--icon-star); stroke: var(--icon-star); }

/* 8. Document pages: privacy, terms, support, your data */

.doc {
  max-width: 44rem;
  margin-inline: auto;
  padding-block: clamp(2.5rem, 7vw, 4.5rem) 0;
}

.doc-head {
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--ink);
}

.doc-head h1 {
  font-size: var(--step-3);
  line-height: 1.06;
}

.doc-head p {
  margin-top: 0.75rem;
  color: var(--graphite);
  font-style: italic;
}

.prose {
  font-size: 1.1875rem;
  line-height: 1.6;
}

.prose > * + * {
  margin-top: 1rem;
}

.prose h2 {
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
  font-size: var(--step-2);
  line-height: 1.15;
  scroll-margin-top: 1.5rem;
}

.prose h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.prose h3 {
  margin-top: 2rem;
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.35;
  scroll-margin-top: 1.5rem;
}

.prose h4 {
  margin-top: 1.5rem;
  font-size: 1.1875rem;
  font-style: italic;
  font-weight: 400;
}

.prose h2 + *,
.prose h3 + *,
.prose h4 + * {
  margin-top: 0.625rem;
}

.prose ul,
.prose ol {
  padding-left: 1.5rem;
}

.prose li + li {
  margin-top: 0.375rem;
}

.prose li > ul,
.prose li > ol {
  margin-top: 0.375rem;
}

.prose ul > li::marker {
  color: var(--graphite);
}

.prose ol > li::marker {
  font-variant-numeric: lining-nums;
  color: var(--graphite);
}

.prose a {
  overflow-wrap: anywhere;
}

.prose a[href^="tel:"] {
  white-space: nowrap;
}

.prose strong {
  font-weight: 700;
}

.prose hr {
  margin-block: 2.5rem;
  border: 0;
  border-top: 1px solid var(--rule);
}

.prose blockquote,
.prose .note-box,
.prose aside {
  padding: 1rem 1.25rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
}

.prose blockquote > * + *,
.prose .note-box > * + *,
.prose aside > * + * {
  margin-top: 0.75rem;
}

.prose code {
  padding: 0.05em 0.3em;
  background: var(--wash);
  border-radius: var(--radius);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85em;
  overflow-wrap: anywhere;
}

.prose dl dt {
  margin-top: 1rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
}

.prose dl dd {
  margin: 0.25rem 0 0;
}

.prose address {
  font-style: normal;
}

/* Tables scroll inside their own box, never the page. */
.prose .table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
}

/* The wrapper is a focusable region (build.py), so keyboards can scroll a
   table that is wider than the screen. */
.prose .table-wrap:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.0625rem;
  line-height: 1.45;
  font-variant-numeric: lining-nums;
}

/* Safety net for a table that isn't wrapped: it scrolls by itself. */
.prose > table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
}

.prose caption {
  padding: 0.75rem 1rem;
  font-weight: 700;
  text-align: left;
}

.prose th,
.prose td {
  padding: 0.625rem 1rem;
  border-top: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.prose thead th {
  border-top: 0;
  border-bottom: 1px solid var(--ink);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 700;
}

/* A contents box at the top of a long document. */
.prose .toc {
  padding: 1rem 1.25rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
}

.prose .toc h2 {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--font-ui);
  font-size: 1rem;
}

.prose .toc ol,
.prose .toc ul {
  margin-top: 0.5rem;
  padding-left: 1.25rem;
}

.prose .toc li + li {
  margin-top: 0.125rem;
}

/* Long contents lists set in two columns where the measure allows. */
@media (min-width: 40rem) {
  .prose .toc ol,
  .prose .toc ul {
    columns: 2;
    column-gap: 2.5rem;
  }

  .prose .toc li {
    break-inside: avoid;
  }
}

/* Block links keep the number beside the first line when an entry wraps. */
.prose .toc a {
  display: block;
  width: fit-content;
  padding-block: 0.3rem;
}

/* A quiet section mark after each heading, linking to that heading; shown on
   hover, so a reader can copy a link to any section (e.g. /privacy#california). */
.heading-anchor {
  display: inline-block; /* keeps the target heading's underline off the mark */
  margin-left: 0.3em;
  color: var(--graphite);
  font-family: var(--font-book);
  font-style: normal;
  font-weight: 400;
  text-decoration: none;
  opacity: 0;
}

.heading-anchor::before {
  content: "§";
}

.prose h2:hover .heading-anchor,
.prose h3:hover .heading-anchor,
.prose :target > .heading-anchor {
  opacity: 1;
}

.prose h2:target,
.prose h3:target {
  text-decoration: underline 2px var(--gilt);
  text-underline-offset: 0.2em;
}

/* The effective date line under a policy's title. */
.prose .effective,
.prose .meta {
  color: var(--graphite);
  font-style: italic;
}

/* Support FAQ on a document page reuses the landing page's .faq. */
.prose .faq {
  margin-top: 1.5rem;
}

.prose .faq summary {
  font-size: 1.25rem;
}

.doc-back {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

/* 9. 404 */

.lost {
  display: grid;
  justify-items: center;
  gap: 1rem;
  max-width: 34rem;
  margin-inline: auto;
  padding-block: clamp(3.5rem, 10vw, 7rem) 0;
  text-align: center;
}

.wrong-star {
  width: 7rem;
  height: 7rem;
  margin-bottom: 0.5rem;
}

.wrong-star-outline {
  fill: none;
  stroke: var(--proof);
  stroke-width: 3.5;
}

.wrong-star-strike {
  fill: none;
  stroke: var(--proof);
  stroke-width: 3.5;
  stroke-linecap: round;
}

.lost h1 {
  font-size: var(--step-3);
}

.lost p {
  max-width: 28em;
}

.lost .btn {
  margin-top: 1rem;
}

/* 10. Motion and print */

/* The hero's star is pressed in like a rubber stamp, once. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
  .stamp {
    animation: stamp 260ms cubic-bezier(0.2, 0.9, 0.3, 1.2) 300ms both;
    transform-box: fill-box;
    transform-origin: center;
  }
  @keyframes stamp {
    from {
      transform: scale(1.25) rotate(4deg);
      opacity: 0;
    }
    to {
      transform: none;
      opacity: 1;
    }
  }
}

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

@media (forced-colors: active) {
  .double-rule::before,
  .site-footer::before {
    border-color: CanvasText;
  }
  .star-list li::before {
    background: CanvasText;
  }
  .faq summary::before,
  .faq summary::after {
    background: CanvasText;
  }
}

@media print {
  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }
  .skip-link,
  .masthead-nav,
  .hero-art .icon-art,
  .heading-anchor {
    display: none;
  }
  .section {
    break-inside: avoid-page;
  }
}