@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500&display=swap');
/* Scoped to the homepage walkthrough; real page exports remain unchanged. */
.how-to { max-width: 1440px; margin: auto; padding: 100px 5% 72px; border-top: 1px solid var(--line); }
.walk-intro { max-width: 840px; margin-bottom: 70px; }
.walk-intro h2 { max-width: 820px; }
.walk-intro > p:last-child { max-width: 590px; color: var(--muted); font-size: 18px; }
.walk-steps { list-style: none; margin: 0; padding: 0; }
.walk-step { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 8%; padding: 60px 0; border-top: 1px solid #292929; }
.walk-step:nth-child(even) { grid-template-columns: 1.2fr .8fr; }
.walk-step:nth-child(even) .walk-copy { grid-column: 2; grid-row: 1; }
.walk-step:nth-child(even) .walk-visual { grid-column: 1; grid-row: 1; }
.walk-number { display: block; font-family: 'Michroma', sans-serif; font-size: 15px; letter-spacing: .12em; color: #929292; margin-bottom: 28px; }
.walk-copy h3 { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; font-size: clamp(32px, 3.5vw, 48px); font-weight: 600; line-height: 1.05; margin: 0 0 20px; }
.walk-copy p { color: var(--muted); max-width: 380px; font-size: 16px; line-height: 1.7; margin: 0; }
.walk-visual { margin: 0; min-width: 0; }
.walk-paper { padding: 8px; background: #e5e5e5; box-shadow: 0 16px 38px #0008, 0 2px 0 #aaa; border-radius: 2px; }
.walk-crop { display: block; width: 100%; border: 0; padding: 0; cursor: zoom-in; overflow: hidden; position: relative; background: #fff; }
.walk-crop img { display: block; width: 100%; height: auto; max-height: none; }
.walk-crop + .walk-crop { margin-top: 12px; }
.walk-highlight { position: absolute; border: 1px solid #1119; border-radius: 3px; box-shadow: 0 0 0 4px #ffffff60; pointer-events: none; }
.walk-log { aspect-ratio: 1409 / 545; }
.walk-log .walk-highlight { inset: 13% 6% 9% 4%; }
.walk-ratings { aspect-ratio: 1409 / 1050; }
.walk-ratings img { margin-top: -37.6%; }
.walk-ratings .walk-highlight { inset: 1% 8% .5% 4%; }
.walk-overall { aspect-ratio: 1409 / 270; }
.walk-overall img { margin-top: -97%; }
.walk-overall .walk-highlight { inset: 3% 3% 4% 53%; }
.walk-effects { aspect-ratio: 1409 / 745; }
.walk-effects .walk-highlight { inset: 4% 4% 3% 10%; }
.walk-terpenes { aspect-ratio: 1409 / 225; }
.walk-terpenes img { margin-top: -82%; }
.walk-terpenes .walk-highlight { inset: 7% 4% 4% 9%; }
.walk-notes { aspect-ratio: 1409 / 170; }
.walk-notes img { margin-top: -115%; }
.walk-notes .walk-highlight { inset: 4% 25% 3% 8%; }
.walk-reference { aspect-ratio: 1409 / 1820; }
.walk-reference img { margin-top: -3%; }
.walk-reference .walk-highlight { inset: 16% 5% 6% 11%; }
.walk-visual figcaption { margin-top: 18px; color: #999; font-size: 10px; letter-spacing: .13em; }
.walk-disclosure { border-top: 1px solid #292929; padding-top: 25px; margin: 0; font-size: 12px; color: #929292; }
@media (max-width: 800px) {
  .how-to { padding: 70px 7% 50px; }
  .walk-intro { margin-bottom: 36px; }
  .walk-intro > p:last-child { font-size: 16px; }
  .walk-step, .walk-step:nth-child(even) { grid-template-columns: 1fr; gap: 28px; padding: 38px 0; }
  .walk-step:nth-child(even) .walk-copy, .walk-step:nth-child(even) .walk-visual { grid-column: auto; grid-row: auto; }
  .walk-number { margin-bottom: 14px; font-size: 13px; }
  .walk-copy h3 { font-size: 34px; margin-bottom: 14px; }
  .walk-copy p { max-width: none; font-size: 15px; }
  .walk-paper { padding: 5px; }
  .walk-crop + .walk-crop { margin-top: 8px; }
  .walk-visual figcaption { font-size: 9px; letter-spacing: .1em; }
}

.walk-read-hint { display: block; font-size: 12px; color: #929292; }
.walk-crop:focus-visible { outline: 2px solid #999; outline-offset: 5px; z-index: 1; }

/* Fine-pen examples: vector ink is registered to the full exported page. */
.walk-ink { position: absolute; top: 0; left: 0; width: 100%; height: auto; aspect-ratio: 1409 / 2000; pointer-events: none; overflow: visible; color: #303234; }
.walk-ink text { font-family: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive; font-weight: 500; fill: currentColor; }
.walk-ink path { stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.walk-ratings .walk-ink { transform: translateY(-26.4892%); }
.walk-overall .walk-ink { transform: translateY(-68.3365%); }
.walk-terpenes .walk-ink { transform: translateY(-57.769%); }
.walk-notes .walk-ink { transform: translateY(-81.0175%); }
.walk-reference .walk-ink { transform: translateY(-2.1135%); }
.book-reader-sheet { position: relative; }
.book-reader-sheet > img { display: block; width: 100%; height: auto; }
.book-reader-sheet .walk-ink { transform: none; }