/* Guides: a calm reading column inside the club's frame. */

body[data-page="guides"] .intro-read h1 { font-size: clamp(36px, 3.4vw + 16px, 64px); max-width: 16ch; }
body[data-page="guides"] .intro .lead { max-width: 30em; }
/* The index is two entries; a shorter band lets both sit near the top. */
body[data-page="guides"] .intro-read:not(:has(.back-link)) .intro-inner { padding-block: clamp(28px, 3.5vw, 48px) clamp(32px, 4vw, 56px); }

/* Index: each guide leads with its real artwork. */
.guide-index { padding-top: clamp(32px, 4vw, 56px); }
.guide-entries { display: grid; max-width: 1040px; border-top: 1px solid var(--line); }
.guide-entry { position: relative; display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr); gap: 20px clamp(20px, 4vw, 56px); align-items: center; padding-block: clamp(28px, 4vw, 48px); border-bottom: 1px solid var(--line); }
.guide-entry-art img { border-radius: var(--radius-s); box-shadow: var(--shadow-card); }
/* The color guide pairs the free carousel cover with the same cover in example colors. */
.guide-entry-art-pair { display: grid; }
.guide-entry-art-pair { padding-bottom: 24%; }
.guide-entry-art-pair img { grid-area: 1 / 1; width: 70%; }
.guide-entry-art-pair img:first-child { transform: rotate(-5deg); }
.guide-entry-art-pair img:last-child { justify-self: end; transform: translateY(34%) rotate(4deg); }
/* The page title is the one display moment; guide names are links in the body face. */
.guide-entry h2 { font: 600 clamp(22px, 1.4vw + 12px, 30px)/1.2 var(--body); letter-spacing: -.01em; }
/* The title is the link cue: underlined like other text links, heavier on hover. */
.guide-entry h2 a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.guide-entry h2 a::after { content: ""; position: absolute; inset: 0; }
.guide-entry p { max-width: 34em; margin-top: 12px; }
.guide-entry .guide-entry-start { margin-top: 8px; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .guide-entry-art img { transition: translate .2s ease; }
  .guide-entry:hover .guide-entry-art img { translate: 0 -4px; }
  .guide-entry:hover h2 a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
}
@media (min-width: 720px) { .guide-entry { grid-template-columns: 200px minmax(0, 1fr); } }

/* Guide pages */
.guide-jump { margin-bottom: clamp(40px, 5vw, 64px); padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.guide-jump ol { display: flex; flex-wrap: wrap; gap: 0 24px; counter-reset: jump; }
.guide-jump li { counter-increment: jump; }
.guide-jump a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; }
.guide-jump a span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.guide-jump a::before { content: counter(jump) ". "; display: inline-block; white-space: pre; color: var(--muted); }
/* The step being read: no underline, cobalt, and a bar on the rail at wide widths. */
.guide-jump a[aria-current], .guide-jump a[aria-current] span { color: var(--cobalt); text-decoration: none; }
.guide-jump a[aria-current]::before { color: var(--cobalt); }
.guide { font-size: 18px; line-height: 1.6; }
.guide-steps, .guide-end { max-width: 1040px; }
@media (min-width: 720px) { .guide { font-size: 19px; } }
.guide-steps { display: grid; gap: clamp(48px, 6vw, 80px); counter-reset: step; }
.guide-steps > li { counter-increment: step; display: grid; gap: 24px 48px; scroll-margin-top: 112px; }
.guide-step h2 { font-size: clamp(26px, 2.6vw, 36px); margin-bottom: 14px; }
/* Ordered steps carry their number inside the heading, not as a label above it. */
.guide-step h2::before { content: counter(step) ". "; color: var(--muted); }
.guide-step p { max-width: 31em; }
.guide-step p + p { margin-top: 1em; }
.guide-swaps { display: grid; gap: 10px; margin-top: 16px; max-width: 31em; }
.guide-swaps li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.guide-dot { width: 18px; height: 18px; border-radius: 50%; translate: 0 3px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 20%, transparent); }
.guide-swaps strong { color: var(--cobalt); }
.guide-actions { display: grid; gap: 10px; margin-top: 12px; max-width: 31em; padding-left: 1.4em; list-style: decimal; }
.guide-actions li::marker { font-weight: 700; color: var(--cobalt); }
.guide-step ul + p, .guide-step ol + p { margin-top: 1em; }
.guide-swaps + p { margin-top: 1.2em; }
.guide-figure { display: grid; gap: 10px; align-content: start; max-width: 280px; }
.guide-figure-set { max-width: 340px; }
.guide-figure-slides { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.guide-figure img { border-radius: var(--radius-s); box-shadow: var(--shadow-card); }
.guide-figure figcaption { font-size: var(--fs-meta); color: var(--muted); }
@media (max-width: 719px) { .guide-figure:not(.guide-figure-set) { max-width: 240px; } }
.guide-figure-text { max-width: 31em; }
.caption-sample { display: grid; gap: 4px; padding: 20px 22px; border-radius: var(--radius); background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line); font-size: var(--fs-small); }
.caption-sample p { white-space: nowrap; overflow-wrap: anywhere; }
@media (max-width: 420px) { .caption-sample p { white-space: normal; } }
.guide-end { display: grid; gap: 8px; margin-top: clamp(56px, 7vw, 88px); padding-top: 32px; border-top: 1px solid var(--line); font-size: var(--fs-body); }
.guide-end .actions { margin-top: 0; }
.guide-end p { font-weight: 600; }
@media (min-width: 900px) {
  .guide-steps > li:has(figure):not(:has(.guide-figure-text, .swap-before-after)) { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
  .guide-steps > li:has(.guide-figure-set) { grid-template-columns: minmax(0, 1fr) 340px; }
}

/* The color step's before-and-after example. */
.swap-before-after { display: grid; gap: 10px; align-content: start; }
.swap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.swap-label { font-size: var(--fs-meta); font-weight: 700; color: var(--cobalt); }
.swap-grid img { border-radius: var(--radius-s); box-shadow: var(--shadow-card); }
.swap-before-after figcaption { font-size: var(--fs-meta); color: var(--muted); }
/* The four mappings sit beside the before-and-after example they describe. */
.guide-swap-pair { display: grid; gap: 24px 48px; margin-top: 16px; align-items: start; }
.guide-swap-pair .guide-swaps { margin-top: 0; }
.guide-swap-pair .swap-before-after { max-width: 340px; }
@media (min-width: 900px) { .guide-swap-pair { grid-template-columns: minmax(0, 31em) 320px; } }
.guide-swap-pair + p { margin-top: 1.4em; }
/* Wide screens: the two guides sit side by side across the full measure. */
@media (min-width: 1024px) {
  .guide-entries { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(40px, 4vw, 64px); max-width: none; }
  .guide-entry { grid-template-columns: 170px minmax(0, 1fr); align-items: start; }
}

/* A real Canva capture beside the three actions; its numbered markers match the list. */
.guide-canva-pair { display: grid; gap: 24px 48px; margin-top: 12px; align-items: start; }
.guide-canva-pair .guide-actions { margin-top: 0; }
.guide-canva { display: grid; gap: 10px; justify-items: start; max-width: 340px; }
.guide-canva img { border: 1px solid var(--line); border-radius: var(--radius-s); box-shadow: var(--shadow-card); }
/* Both crops share one scale: the lower one is 360 of the upper's 476 source pixels. */
.guide-canva img + img { width: 75.6%; }
.guide-canva figcaption { font-size: var(--fs-meta); color: var(--muted); }
@media (min-width: 900px) { .guide-canva-pair { grid-template-columns: minmax(0, 31em) 320px; } }
@media (min-width: 1200px) { .guide-canva-pair { grid-template-columns: minmax(0, 31em) 380px; } .guide-canva { max-width: 380px; } }
.guide-canva-pair + p { margin-top: 1.4em; }

/* Each task inside a step gets a plain subheading. */
.guide-task { margin-top: 28px; font-size: var(--fs-h3); color: var(--cobalt); }
.guide-step h2 + .guide-task { margin-top: 4px; }
.guide-task + p { margin-top: 8px; }

/* Wide screens: the step list becomes a sticky index beside the guide. */
@media (min-width: 1200px) {
  .guide { display: grid; grid-template-columns: minmax(0, 1fr) 220px; column-gap: 64px; align-items: start; }
  .guide-jump { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 112px; margin: 0; padding: 0 0 0 24px; border: 0; border-left: 1px solid var(--line); }
  .guide-jump ol { display: grid; gap: 0; }
  .guide-jump a { display: grid; grid-template-columns: 1.4em minmax(0, 1fr); align-items: baseline; padding-block: 6px; }
  .guide-jump a { position: relative; }
  .guide-jump a::before { white-space: normal; }
  .guide-jump a[aria-current]::after { content: ""; position: absolute; inset-block: 8px; left: -26px; width: 3px; border-radius: 2px; background: var(--cobalt); }
  .guide-steps, .guide-end { grid-column: 1; }
}
/* The index ends with the two guides; no empty band before the footer. */
.guide-index { padding-bottom: clamp(40px, 5vw, 72px); }