/* Read first. Four illustrated pauses, no information hidden behind a gesture. */
.blog-body { --read-violet: #5955ef; --read-ink: #242137; --read-lilac: #eee9ff; --read-peach: #ffe3cf; }
.blog-body > p { max-width: 68ch; margin-bottom: 1.15em; line-height: 1.85; }
.blog-body > h2 { font-size: clamp(25px, 2.4vw, 32px); letter-spacing: -.04em; margin-top: 2.1em; text-wrap: balance; }
.blog-body .read-summary { border: 0; background: #f1eeff; border-radius: 22px; padding: 25px 29px; margin-bottom: 30px; scroll-margin-top: 110px; }
.read-summary > b { font-size: 14px; color: #5147a4; }
.blog-body .read-summary p { margin: 8px 0 0; font-size: 18px; line-height: 1.6; color: #302853; }
.blog-body .read-summary strong { color: #4f43c0; }
.blog-body .read-list { margin: 12px 0 25px; }
.blog-body .read-list li { margin: 8px 0; line-height: 1.7; }
/* Whiteboard annotations. Figurative objects remain real cutout images. */
.read-figure { --wb-paper: #fefefd; --wb-ink: #39304f; --wb-marker: #6752b8; --wb-faint: #d8cdee; --wb-hand: 'Caveat', 'Segoe Print', cursive; margin: 36px 0 40px; scroll-margin-top: 110px; }
.read-figure * { box-sizing: border-box; }
.read-figure .read-art { position: relative; padding: 28px 30px 22px; background: var(--wb-paper); border: 1px solid #e3deea; border-radius: 23px 18px 25px 19px; overflow: hidden; box-shadow: 0 12px 35px #30234609, 0 2px 8px #30234605; }
.read-figure .read-art::before { content: ''; position: absolute; pointer-events: none; z-index: 0; width: 175px; height: 70px; top: 19px; left: 20px; border-radius: 50%; background: #e7dcfa4f; filter: blur(20px); transform: rotate(-12deg); }
.read-figure .read-art > * { position: relative; z-index: 1; }
.read-figure .wb-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0 0 16px; }
.read-figure h3 { font-family: 'Onest', sans-serif; color: var(--wb-ink); font-size: clamp(25px, 2.4vw, 31px); line-height: 1.2; letter-spacing: -.04em; font-weight: 600; margin: 0; max-width: 560px; text-wrap: balance; }
.read-figure img { object-fit: contain; display: block; }
.read-figure figcaption { margin: 13px 4px 0; color: #7f738d; font-size: 12px; line-height: 1.6; }
.read-figure .wb-drawing, .read-figure .wb-ring { max-width: none; max-height: none; overflow: visible; pointer-events: none; }
.read-figure .wb-drawing path, .read-figure .wb-ring path { fill: none; stroke: var(--wb-marker); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.read-figure .read-motion-toggle, .read-figure .read-engine-toggle { display: grid; place-items: center; flex: 0 0 35px; width: 35px; height: 35px; border: 1px solid #d9d0e6; border-radius: 50%; background: #ffffffad; padding: 0; color: #6a5782; cursor: pointer; font: 12px 'Onest', sans-serif; }
.read-figure button[hidden] { display: none; }
.read-figure button:focus-visible { outline: 3px solid #8970ca; outline-offset: 4px; }

/* Four short notes attached to the same car by drawn connectors. */
.read-identity__scene { position: relative; height: 336px; margin: 10px 0 0; }
.read-identity .read-identity__car { position: absolute; left: 50%; top: 63px; transform: translateX(-50%) rotate(-3deg); width: 64%; height: 207px; margin: 0; filter: drop-shadow(0 10px 10px #3425521e); z-index: 2; }
.read-identity__badge { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%) rotate(-3deg); white-space: nowrap; font: 500 20px/1.1 var(--wb-hand); color: #7b6b92; }
.read-identity__facts { position: absolute; inset: 0; z-index: 3; }
.read-identity .wb-fact { position: absolute; width: 158px; text-align: center; font: 12px/1.4 'Onest', sans-serif; color: #74647f; }
.read-identity .wb-fact b { display: block; width: max-content; max-width: 100%; margin: 0 auto 1px; color: #54436f; font: 600 28px/1.2 var(--wb-hand); }
.wb-fact--vin { top: 0; left: 0; transform: rotate(-5deg); }
.wb-fact--engine { top: 0; right: 0; transform: rotate(3deg); }
.wb-fact--gear { bottom: 13px; left: 0; transform: rotate(-4deg); }
.wb-fact--mods { bottom: 13px; right: 0; transform: rotate(3deg); }
.read-identity .wb-fact--vin b { background: linear-gradient(transparent 58%, #e5d8fa88 58%, #e5d8fa88 89%, transparent 89%); padding: 0 8px; }
.read-identity .wb-identity-arrows { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }

/* Each object is circled in turn, without turning the explanation into cards. */
.read-engine .read-art::before { background: #e5dafc55; width: 230px; }
.read-engine .read-engine__head h3 { max-width: 425px; }
.read-engine__items { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 24px; }
.read-engine__items > div { position: relative; text-align: center; padding: 18px 8px 4px; min-width: 0; }
.read-engine .read-engine__items img { position: relative; z-index: 1; width: 100%; height: 112px; margin: 0 auto 20px; filter: drop-shadow(0 8px 9px #38235e1b); transition: transform 500ms cubic-bezier(.2,.75,.25,1); }
.read-engine__items > div:nth-child(1) img { transform: rotate(-4deg); }
.read-engine__items > div:nth-child(2) img { transform: rotate(3deg); }
.read-engine__items > div:nth-child(3) img { transform: rotate(-2deg); }
.read-engine.is-guided .read-engine__items > .is-current img { transform: translateY(-3px) rotate(0); }
.read-engine__items b { display: block; color: #4f3e6c; font: 600 27px/1.2 var(--wb-hand); }
.read-engine__items span { display: block; margin-top: 5px; color: #74647f; font-size: 13px; line-height: 1.5; }
.read-engine .wb-ring { position: absolute; top: 0; left: 0; width: 100%; height: 149px; opacity: 0; z-index: 0; }
.read-engine .is-current .wb-ring { opacity: 1; }
.read-engine:not(.is-guided) .wb-ring { opacity: 1; }
.read-engine .wb-ring path { stroke: #9a7dca; stroke-width: 1.9; }
.read-engine .read-engine-pointer { position: absolute; left: 0; top: 0; width: 48px; height: 44px; max-width: none; max-height: none; color: #66508e; overflow: visible; pointer-events: none; z-index: 2; }
.read-engine-pointer path { fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.read-engine-pointer g { transform-origin: 24px 22px; }
.read-engine .read-engine__rule { color: #74647f; font-size: 12px; line-height: 1.5; border-top: 1px solid #eee8f3; margin: 23px 0 0; padding-top: 15px; }

/* Permanent data, with a drawn circle and explanatory note rather than flashing cells. */
.read-market .read-art::before { background: #dddcfa66; }
.read-market__chart { display: grid; grid-template-columns: 140px 1fr; gap: 28px; align-items: center; padding-top: 15px; }
.wb-gear-note { text-align: center; }
.read-market .wb-gear-note > img { width: 104px; height: 140px; margin: 0 auto; transform: rotate(-8deg); filter: drop-shadow(0 10px 12px #2b1d4c1c); }
.wb-gear-note > span { display: block; font: 500 23px/1.1 var(--wb-hand); color: #7b6397; transform: rotate(-6deg); margin-top: 16px; }
.wb-market-data { min-width: 0; }
.read-market__number { display: flex; align-items: center; gap: 25px; padding: 7px 0; }
.read-market__number b { position: relative; display: block; white-space: nowrap; color: #655098; font: 600 57px/1.15 'Onest',sans-serif; letter-spacing: -.065em; }
.read-market__number span { font-size: 13px; color: #74647f; line-height: 1.5; }
.read-market__number b > span { display: inline-block; margin-left: 5px; color: #9582b2; font-size: 24px; letter-spacing: -.025em; }
.read-market .wb-number-ring { position: absolute; left: -13%; top: -17%; width: 128%; height: 134%; transform: rotate(-6deg); }
.read-market .wb-number-ring path { stroke: #aa8cc7; stroke-width: 1.7; }
.read-market__units { display: grid; grid-template-columns: repeat(10,minmax(0,1fr)); gap: 7px; margin-top: 27px; }
.read-market__units i { height: 27px; background: transparent; border: 1.2px solid #c1b8cd; border-radius: 5px 7px 4px 6px; transform: rotate(-2deg); }
.read-market__units i:nth-child(3n) { border-radius: 6px 3px 6px 4px; transform: rotate(3deg); }
.read-market__units i.is-auto { border-color: #9675c0; background: repeating-linear-gradient(102deg,#b295d99c 0 4px,#a988d085 5px 8px); }
.read-market__legend { display: flex; gap: 15px; flex-wrap: wrap; margin-top: 13px; font-size: 11px; color: #74647f; }
.read-market__legend span::before { content: ''; display: inline-block; width: 8px; height: 8px; background: #b295d9; border: 1px solid #ac95c9; border-radius: 2px; margin-right: 5px; }
.read-market__legend span + span::before { background: transparent; border-color: #bab0c8; }
.wb-unit-note { display: flex; justify-content: flex-end; align-items: center; gap: 5px; margin-top: 0; color: #7a639a; }
.wb-unit-note > span { font: 500 23px/1.2 var(--wb-hand); transform: rotate(-2deg); }
.read-market .wb-unit-arrow { width: 57px; height: 43px; flex-shrink: 0; }
.read-market .wb-unit-arrow path { stroke-width: 1.8; }
.read-market .read-market__lesson { color: #6d5c82; font-size: 14px; line-height: 1.5; margin: 20px 0 0; padding-top: 17px; border-top: 1px solid #eae3f1; }
.read-market__source { margin-top: 10px; font-size: 12px; color: #736581; }
.read-market__source summary { cursor: pointer; padding: 8px 3px; }
.read-market__source > div { padding: 12px 15px; background: #f8f6fc; border-radius: 12px; }
.blog-body .read-market__source p, .blog-body .read-market__source table { font-size: 13px; }
.read-market__source dl > div { display: flex; justify-content: space-between; padding: 4px 0; }
.read-market__source caption { text-align: left; }

/* Hand-traced links connect the steps; no simulated paperwork and no hidden text. */
.read-history .read-art::before { background: #f6e1da55; }
.read-history__timeline { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; position: relative; padding: 16px 0 0; margin: 0; }
.read-history__timeline > div { position: relative; text-align: center; min-width: 0; }
.read-history .read-history__timeline img { width: 104px; max-width: 100%; height: 91px; margin: 0 auto 27px; transform: rotate(-5deg); filter: drop-shadow(0 8px 9px #43255315); }
.read-history__timeline > div:nth-of-type(2) img { transform: rotate(4deg); }
.read-history__timeline > div:nth-of-type(3) img { transform: rotate(-3deg); }
.read-history__timeline b { display: block; font: 600 26px/1.2 var(--wb-hand); color: #725174; margin: 0; }
.read-history__timeline span { display: block; font-size: 12px; color: #74647f; margin-top: 4px; }
.read-history .wb-history-arrows { position: absolute; z-index: 2; left: 13%; width: 74%; height: 42px; top: 100px; }
.read-history .wb-history-arrows path { stroke: #ae86a7; stroke-width: 1.8; }
.read-history .read-history__lesson { position: relative; width: fit-content; max-width: 100%; margin: 29px auto 6px; padding-bottom: 9px; text-align: center; font: 500 22px/1.2 var(--wb-hand); color: #795e7b; }
.read-history .wb-history-underline { position: absolute; bottom: 0; left: 0; width: 100%; height: 10px; }
.read-history .wb-history-underline path { stroke: #d1accc; stroke-width: 1.2; }
.blog-body .read-safety { display: flex; gap: 17px; align-items: center; border-left: 3px solid #d29074; background: #fff3eb; border-radius: 0 15px 15px 0; padding: 18px; margin: 24px 0; }
.read-safety img { width: 45px; height: 54px; object-fit: contain; flex-shrink: 0; }
.blog-body .read-safety p { margin: 0; font-size: 14px; color: #784b38; line-height: 1.65; }
.read-finish { scroll-margin-top: 110px; border-top: 1px solid #e3ddef; padding-top: 20px; margin-top: 30px; }
.blog-body .read-finish > p { font-size: 16px; color: #665584; margin: 0; }
.blog-body .source-note { font-size: 12px; line-height: 1.8; color: #7d728c; }
.blog-body .blog-inline-cta { padding: 21px 24px; gap: 20px; margin: 32px 0; }
.blog-body .blog-inline-cta h3 { font-size: 20px; }
.blog-body .blog-inline-cta p { font-size: 13px; }

/* Retain the small inline objects, without collection buttons or extra UI. */
.blog-inline-sticker { display: inline-block; width: 42px; height: 24px; margin: 0 3px; vertical-align: -.38em; position: relative; z-index: 1; }
.blog-inline-sticker img { width: 100%; height: 100%; object-fit: contain; margin: 0; display: block; transform: rotate(-3deg); transition: transform 500ms cubic-bezier(.16,1,.3,1), filter 500ms ease; }
.blog-vehicle-sticker { width: 34px; height: 20px; margin: 0 2px; vertical-align: -.24em; }
.blog-vehicle-mention { white-space: nowrap; }
#inline-golf-gti { scroll-margin-top: 130px; }
@media (hover: hover) and (pointer: fine) {
  .blog-inline-sticker:hover { z-index: 8; }
  .blog-inline-sticker:hover img { transform: translateY(-7px) rotate(3deg) scale(2.1); filter: drop-shadow(0 9px 9px #33226833); }
}

@media (max-width:600px) {
  .read-figure .read-art { padding: 24px 20px 20px; }
  .read-figure .wb-heading { gap: 10px; }
  .read-figure h3 { font-size: 26px; }
  .read-identity__scene { height: 310px; }
  .read-identity .read-identity__car { width: 92%; height: 180px; top: 70px; }
  .read-identity .wb-fact { width: 125px; font-size: 11px; }
  .read-identity .wb-fact b { font-size: 24px; }
  .read-identity__badge { bottom: 67px; font-size: 17px; }
  .wb-fact--gear, .wb-fact--mods { bottom: 0; }
  .read-engine__items { gap: 4px; padding-top: 23px; }
  .read-engine__items > div { padding: 17px 2px 2px; }
  .read-engine .read-engine__items img { height: 78px; margin-bottom: 18px; }
  .read-engine__items b { font-size: 21px; }
  .read-engine__items > div:last-of-type b { font-size: 18px; letter-spacing: -.04em; }
  .read-engine__items span { font-size: 12px; }
  .read-engine .wb-ring { height: 112px; left: -2%; width: 104%; }
  .read-market__chart { grid-template-columns: 67px 1fr; gap: 16px; padding-top: 12px; }
  .read-market .wb-gear-note > img { width: 63px; height: 99px; }
  .wb-gear-note > span { font-size: 18px; margin-top: 10px; }
  .read-market__number { gap: 14px; }
  .read-market__number b { font-size: 44px; }
  .read-market__number b > span { font-size: 19px; margin-left: 3px; }
  .read-market__number span { font-size: 11px; }
  .read-market__units { gap: 5px; }
  .read-market__units i { height: 21px; border-radius: 3px 4px 3px 2px; }
  .read-market__legend { gap: 6px 12px; font-size: 10px; }
  .wb-unit-note { margin-top: 5px; gap: 0; }
  .wb-unit-note > span { font-size: 20px; white-space: nowrap; }
  .read-market .wb-unit-arrow { width: 39px; height: 36px; }
  .read-history__timeline { gap: 4px; }
  .read-history .read-history__timeline img { height: 77px; margin-bottom: 23px; }
  .read-history .wb-history-arrows { top: 87px; height: 33px; }
  .read-history__timeline b { font-size: 22px; }
  .read-history__timeline span { font-size: 11px; }
  .read-history .read-history__lesson { font-size: 21px; margin-top: 24px; }
}
@media (max-width:350px) {
  .read-figure .read-art { padding-left: 17px; padding-right: 17px; }
  .read-identity__badge { bottom: 54px; }
  .read-identity .wb-fact { width: 112px; }
  .read-identity .wb-fact b { font-size: 23px; }
  .read-engine__items { grid-template-columns: 1fr; gap: 14px; padding-top: 8px; }
  .read-engine__items > div { display: grid; grid-template-columns: 80px 1fr; column-gap: 12px; text-align: left; padding: 8px 0 8px 23px; }
  .read-engine .read-engine__items img { grid-row: span 2; width: 80px; height: 75px; margin: 0; }
  .read-engine__items b { align-self: end; font-size: 25px; }
  .read-engine__items > div:last-of-type b { font-size: 23px; letter-spacing: -.025em; }
  .read-engine__items span { margin-top: 3px; }
  .read-engine .wb-ring { width: 106px; height: 94px; left: 9px; top: 0; }
  .read-engine-pointer g { transform: rotate(-90deg); }
  .read-market__chart { grid-template-columns: 1fr; position: relative; }
  .wb-gear-note { position: absolute; right: 4px; top: 6px; width: 48px; }
  .read-market .wb-gear-note > img { width: 46px; height: 64px; }
  .wb-gear-note > span { display: none; }
  .read-market__number { gap: 15px; padding-right: 52px; }
  .read-market__number b { font-size: 43px; }
  .read-market__number span { font-size: 10px; }
  .read-market__number b > span { font-size: 18px; }
}
@media (prefers-reduced-motion:reduce) {
  .blog-inline-sticker img, .read-engine .read-engine__items img { transition: none; }
  .read-engine .read-engine-pointer { display: none; }
  .read-engine .wb-ring { opacity: 1; }
}