/* Style collection pages (/styles and /styles/<slug>) + the /quiz page.
   Generated pages load this via an absolute path so it works from nested URLs.
   Reuses the landing design tokens: warm whites, ink, quiet rules. */

body.collections {
  /* Collections tweak panel. */
  /* note to piper: collections - page width - changes the readable column width */
  --collections-max-width: 1060px;
  /* note to piper: collections - intro measure - changes the intro paragraph line length */
  --collections-measure: 68ch;
  /* note to piper: collections - top gap - space between the fixed header and the content */
  --collections-top-gap: 140px;
  /* note to piper: collections - colors - same family as the landing page */
  --collections-surface: #faf9f7;
  --collections-surface-low: #f4f1ea;
  --collections-ink: #1a1c1c;
  --collections-muted: #4c4546;
  --collections-rule: #cfc4c5;
  /* note to piper: collections - heading size - the big serif page title */
  --collections-h1-size: clamp(34px, 4vw, 52px);

  margin: 0;
  background: var(--collections-surface);
  color: var(--collections-ink);
  font-family: Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.collections * {
  box-sizing: border-box;
}

body.collections a {
  color: inherit;
}

.collections-main {
  max-width: var(--collections-max-width);
  margin: 0 auto;
  padding: var(--collections-top-gap) 24px 48px;
}

/* Breadcrumbs */
.collections-breadcrumbs {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--collections-muted);
  margin: 0 0 28px;
}

.collections-breadcrumbs a {
  text-decoration: none;
  border-bottom: 1px solid var(--collections-rule);
}

.collections-breadcrumbs span[aria-hidden] {
  margin: 0 8px;
}

/* Heading + intro */
.collections-eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--collections-muted);
  margin: 0 0 10px;
}

.collections-title {
  font-family: "Noto Serif", Didot, "Bodoni MT", serif;
  font-weight: 400;
  font-size: var(--collections-h1-size);
  line-height: 1.12;
  margin: 0 0 22px;
}

.collections-intro {
  max-width: var(--collections-measure);
  font-size: 17px;
  line-height: 1.7;
  color: var(--collections-ink);
  margin: 0 0 34px;
}

/* Stats panel — the ruled band */
.collections-stats {
  border-top: 1px solid var(--collections-rule);
  border-bottom: 1px solid var(--collections-rule);
  padding: 18px 0;
  margin: 0 0 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 36px;
  font-size: 14.5px;
  color: var(--collections-muted);
}

.collections-stats strong {
  color: var(--collections-ink);
  font-weight: 600;
}

/* CTA row */
.collections-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0 0 44px;
}

/* body.collections prefix beats the `body.collections a { color: inherit }`
   rule above — without it the pill renders ink-on-ink (invisible text). */
body.collections .collections-cta {
  display: inline-block;
  /* note to piper: collections - button - matches the landing pill CTA feel */
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--collections-ink);
  color: var(--collections-surface);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

body.collections .collections-cta.collections-cta-quiet {
  background: transparent;
  color: var(--collections-ink);
  border: 1px solid var(--collections-ink);
}

.collections-cta-note {
  font-size: 13.5px;
  color: var(--collections-muted);
}

.collections-cta-note a {
  border-bottom: 1px solid var(--collections-rule);
  text-decoration: none;
}

/* Ring list */
.collections-section-title {
  font-family: "Noto Serif", Didot, "Bodoni MT", serif;
  font-weight: 400;
  font-size: 24px;
  margin: 0 0 6px;
}

.collections-section-sub {
  font-size: 14px;
  color: var(--collections-muted);
  margin: 0 0 22px;
}

.ring-index {
  list-style: none;
  margin: 0 0 46px;
  padding: 0;
  display: grid;
  /* note to piper: collections - ring grid - card minimum width before wrapping */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.ring-index-card {
  border: 1px solid var(--collections-rule);
  border-radius: 10px;
  background: var(--collections-surface-low);
  padding: 14px 16px;
}

.ring-index-card h3 {
  font-family: "Noto Serif", Didot, "Bodoni MT", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.35;
  margin: 0 0 10px;
}

.ring-index-card img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 0 0 10px;
  display: block;
}

.ring-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ring-chip {
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--collections-muted);
  border: 1px solid var(--collections-rule);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}

/* Related styles */
.related-styles {
  border-top: 1px solid var(--collections-rule);
  padding-top: 26px;
  margin-bottom: 40px;
}

.related-styles ul {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.related-styles a {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--collections-rule);
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
}

/* Hub page groups */
.styles-group {
  margin: 0 0 38px;
}

.styles-group ul {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.styles-group-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--collections-rule);
  border-radius: 10px;
  background: var(--collections-surface-low);
  padding: 14px 16px;
  text-decoration: none;
}

.styles-group-link .count {
  font-size: 12.5px;
  color: var(--collections-muted);
  white-space: nowrap;
}

/* Quiz page prose */
.quiz-prose h2 {
  font-family: "Noto Serif", Didot, "Bodoni MT", serif;
  font-weight: 400;
  font-size: 26px;
  margin: 40px 0 12px;
}

.quiz-prose p,
.quiz-prose li {
  max-width: var(--collections-measure);
  font-size: 16.5px;
  line-height: 1.7;
}

.quiz-prose ol {
  padding-left: 22px;
}

/* Footer */
.collections-footer {
  border-top: 1px solid var(--collections-rule);
  margin-top: 20px;
  padding: 26px 0 34px;
  font-size: 13.5px;
  color: var(--collections-muted);
}

.collections-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-bottom: 14px;
}

.collections-footer a {
  text-decoration: none;
  border-bottom: 1px solid var(--collections-rule);
}

/* ===========================================================================
   Guide articles (/guides/<slug>)
   ---------------------------------------------------------------------------
   Set as a magazine feature, not a document: a constrained display title, a
   standfirst, a drop cap opening, numbered section rules, and a sidebar
   contents list that occupies what was otherwise dead space on wide screens.

   Scoped to .guide-article on purpose — the /styles and /quiz pages share this
   stylesheet and must not shift.

   note to piper: guides - article width - the two-column article grid, sidebar
   then text; below 1080px it collapses to one column and the sidebar sits on top
   =========================================================================== */
body.collections .guide-article {
  /* note to piper: guides - text measure - line length of the article body */
  --guide-measure: 64ch;
  /* note to piper: guides - sidebar width - the contents rail on wide screens */
  --guide-rail: 200px;
  /* note to piper: guides - title width - how soon the big headline wraps */
  --guide-title-measure: 17ch;
  /* Sized to the composition (rail + gap + measure) rather than the generic
     1060px, so the masthead rule ends where the text column ends instead of
     overhanging it — the overhang was what made the page read unfinished. */
  max-width: 1010px;
}

/* --- Masthead ------------------------------------------------------------ */
.guide-masthead {
  border-bottom: 1px solid var(--collections-rule);
  padding-bottom: 30px;
  margin-bottom: 42px;
}

/* Wrapping the headline early is the whole composition: three short serif
   lines read as a magazine feature; one long line reads as a document title. */
body.collections .guide-title {
  max-width: var(--guide-title-measure);
  /* note to piper: guides - title size - the big serif headline */
  font-size: clamp(38px, 5.2vw, 66px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0 0 20px;
}

.guide-standfirst {
  max-width: 46ch;
  font-family: "Noto Serif", Didot, "Bodoni MT", serif;
  /* note to piper: guides - standfirst - the summary line under the headline */
  font-size: 19px;
  line-height: 1.55;
  color: var(--collections-muted);
  margin: 0;
}

/* --- Two-column article grid --------------------------------------------- */
.guide-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 44px;
}

@media (min-width: 1080px) {
  .guide-columns {
    grid-template-columns: var(--guide-rail) minmax(0, var(--guide-measure));
    gap: 64px;
    align-items: start;
  }

  /* A guide with no contents rail (no ## headings) keeps the reading measure
     rather than stretching the article to full container width. */
  .guide-columns-solo {
    grid-template-columns: minmax(0, var(--guide-measure));
  }

  .guide-rail {
    position: sticky;
    top: 132px;
  }
}

/* --- Contents rail -------------------------------------------------------- */
.guide-rail-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--collections-muted);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--collections-rule);
}

.guide-toc {
  list-style: none;
  counter-reset: guide-toc;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.guide-toc li {
  counter-increment: guide-toc;
  display: grid;
  grid-template-columns: 22px 1fr;
  font-size: 13.5px;
  line-height: 1.45;
}

.guide-toc li::before {
  content: counter(guide-toc, decimal-leading-zero);
  color: var(--collections-muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding-top: 2px;
}

.guide-toc a {
  text-decoration: none;
  color: var(--collections-muted);
  border-bottom: 1px solid transparent;
}

.guide-toc a:hover {
  color: var(--collections-ink);
  border-bottom-color: var(--collections-rule);
}

/* --- Article body --------------------------------------------------------- */
.guide-body {
  counter-reset: guide-section;
}

.guide-body p,
.guide-body li {
  font-size: 17px;
  line-height: 1.72;
}

.guide-body p {
  margin: 0 0 20px;
}

/* Standfirst handles the summary, so the opening paragraph carries the drop
   cap. A real initial is the difference between "typeset" and "output". */
.guide-body > p:first-of-type {
  font-size: 18.5px;
  line-height: 1.62;
}

.guide-body > p:first-of-type::first-letter {
  float: left;
  font-family: "Noto Serif", Didot, "Bodoni MT", serif;
  /* note to piper: guides - drop cap - the large first letter; set to inherit
     font-size to remove it entirely */
  font-size: 62px;
  line-height: 0.82;
  padding: 6px 10px 0 0;
  color: var(--collections-ink);
}

/* Numbered hairline section heads — the countable rhythm of a feature. */
.guide-body h2 {
  counter-increment: guide-section;
  font-family: "Noto Serif", Didot, "Bodoni MT", serif;
  font-weight: 400;
  /* note to piper: guides - section heading size */
  font-size: 27px;
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin: 46px 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--collections-rule);
  scroll-margin-top: 130px;
}

.guide-body h2::before {
  content: counter(guide-section, decimal-leading-zero);
  display: block;
  font-family: Manrope, sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--collections-muted);
  margin-bottom: 10px;
}

.guide-body h3 {
  font-family: "Noto Serif", Didot, "Bodoni MT", serif;
  font-weight: 400;
  font-size: 20px;
  margin: 30px 0 10px;
}

/* Definition-style lists: the bold term hangs, the gloss follows. This is how
   a printed glossary sets, and most of the guide copy is written that way. */
.guide-body ul {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.guide-body ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 11px;
}

.guide-body ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 13px;
  width: 9px;
  height: 1px;
  background: var(--collections-rule);
}

.guide-body ol {
  padding-left: 22px;
  margin: 0 0 24px;
}

.guide-body ol li {
  margin-bottom: 11px;
}

.guide-body li strong,
.guide-body p strong {
  font-weight: 600;
  color: var(--collections-ink);
}

.guide-body a {
  text-decoration: none;
  border-bottom: 1px solid var(--collections-rule);
}

.guide-body a:hover {
  border-bottom-color: var(--collections-ink);
}

/* The closing italic disclaimer reads as a standfirst-weight endnote. */
.guide-body > p:last-of-type em,
.guide-body > p em:only-child {
  color: var(--collections-muted);
}

.guide-endnote {
  border-top: 1px solid var(--collections-rule);
  padding-top: 26px;
  margin-top: 38px;
}

/* --- Guides hub: a contents page, not a card grid -------------------------
   Set as a numbered index — hairline rows, serif titles, muted summaries. The
   card grid it replaced boxed only the title and left each summary hanging
   outside its own border. */
.guide-index-intro {
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.72;
  color: var(--collections-muted);
  margin: 0 0 12px;
}

.guide-index-list {
  list-style: none;
  counter-reset: guide-index;
  margin: 0;
  padding: 0;
}

.guide-index-list li {
  counter-increment: guide-index;
  border-top: 1px solid var(--collections-rule);
}

.guide-index-list li:last-child {
  border-bottom: 1px solid var(--collections-rule);
}

body.collections .guide-index-list a {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 0 8px;
  padding: 26px 4px;
  text-decoration: none;
  transition: background-color 120ms ease;
}

/* The number sits in column 1; title and summary are both pinned to column 2.
   Without the explicit placement the summary flows into the next grid cell —
   the 46px number column — and renders one word per line. */
.guide-index-list a::before {
  content: counter(guide-index, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--collections-muted);
  padding-top: 9px;
}

body.collections .guide-index-list a:hover {
  background: var(--collections-surface-low);
}

.guide-index-list h2 {
  grid-column: 2;
  font-family: "Noto Serif", Didot, "Bodoni MT", serif;
  font-weight: 400;
  /* note to piper: guides hub - entry title size */
  font-size: 25px;
  line-height: 1.25;
  margin: 0 0 8px;
  max-width: 34ch;
}

.guide-index-list p {
  grid-column: 2;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--collections-muted);
  margin: 0;
  max-width: 60ch;
}

@media (max-width: 640px) {
  body.collections .guide-index-list a {
    grid-template-columns: 32px minmax(0, 1fr);
    padding: 20px 2px;
  }

  .guide-index-list h2 {
    font-size: 21px;
  }
}

@media (max-width: 640px) {
  .collections-main {
    padding-top: 118px;
  }

  .collections-stats {
    flex-direction: column;
    gap: 8px;
  }

  .guide-body > p:first-of-type::first-letter {
    font-size: 52px;
  }

  .guide-masthead {
    margin-bottom: 32px;
  }
}