/* Curveball's illustrated notes. Native vector art, never fabricated product data. */
.editorial-thumb, .editorial-figure, .area-scene, .studio-notes { --ev-rule: #d9d3df; --ev-paper: #fffcf5; color: var(--ink); }
.editorial-thumb svg, .editorial-figure svg, .area-scene svg, .studio-notes svg { width: 100%; height: auto; overflow: visible; }
.ev-paper { fill: var(--ev-paper); stroke: var(--ev-rule); stroke-width: 1.4; }
.ev-ink { fill: var(--ink); }
.ev-lilac { fill: #e2d8fb; }
.ev-violet { fill: var(--violet); }
.ev-coral { fill: var(--coral); }
.ev-lime { fill: var(--lime); }
.ev-warm { fill: #eae5dc; }
.ev-sky { fill: #d9eeea; }
.ev-muted { fill: #736187; }
.ev-hills { fill: #d4ddcd; }
.ev-label { fill: var(--ink); font: 500 14px var(--font-body); }
.ev-bold { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.ev-small { font-size: 11px; }
.ev-micro { font: 500 9px var(--font-mono); letter-spacing: .6px; }
.ev-title { font: 600 23px var(--font-display); letter-spacing: -.5px; }
.ev-heading { font: 650 43px var(--font-display); letter-spacing: -1.4px; }
.ev-white { fill: var(--ev-paper); }
.ev-lime-text { fill: var(--lime); }
.ev-violet-text { fill: var(--violet); }
.ev-line, .ev-white-line, .ev-wire, .ev-grid, .ev-placeholder, .ev-envelope, .ev-notebook-line, .ev-editorial-stroke, .ev-tree { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ev-white-line { stroke: var(--ev-paper); }
.ev-wire { stroke: var(--violet); stroke-width: 2.5; stroke-dasharray: 4 7; }
.ev-grid { stroke: var(--ev-rule); stroke-width: 1.3; }
.ev-placeholder { stroke: #b2a8ba; stroke-width: 4; }
.ev-envelope { stroke: #c4b3e8; stroke-width: 1.5; }
.ev-map-road { fill: none; stroke: #fffcf5; stroke-width: 13; }
.ev-map-river { fill: none; stroke: #99c5d5; stroke-width: 12; stroke-linecap: round; }
.ev-notebook-line { stroke: #706689; stroke-width: 2; }
.ev-editorial-stroke { stroke: var(--coral); stroke-width: 5; }
.ev-tree { stroke: #536b57; stroke-width: 6; }

/* Every reading card gets its own visual idea, with a shared editorial treatment. */
.editorial-thumb { position: relative; display: flex; flex-direction: column; overflow: hidden; margin: -26px -24px 4px; padding: 10px 12px 15px; border-radius: 21px 21px 0 0; background: #eeebe6; border-bottom: 1px solid var(--line); }
.editorial-thumb svg { aspect-ratio: 500 / 335; }
.editorial-thumb__tag { position: relative; max-width: 28ch; padding-inline: 12px; font: italic 400 20px/1.15 var(--font-aside); }
.editorial-thumb--maps, .editorial-thumb--languages { background: #e8eee6; }
.editorial-thumb--reviews, .editorial-thumb--subscriptions, .editorial-thumb--ai { background: #eee9f8; }
.editorial-thumb--ads, .editorial-thumb--quote { background: #f7e9de; }
.editorial-thumb .ev-small, .editorial-thumb .ev-micro { display: none; }
.post-card--lead { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 16px clamp(28px, 5vw, 72px); }
.post-card--lead .editorial-thumb { grid-column: 1; grid-row: 1 / 4; margin: 0; padding: 14px 16px 24px; border: 0; border-radius: 16px; transform: rotate(-2deg); }
.post-card--lead .editorial-thumb__tag { max-width: none; font-size: clamp(22px, 2.3vw, 32px); padding-inline: 16px; }
.post-card--lead .post-card__meta { grid-column: 2; align-self: end; }
.post-card--lead h3, .post-card--lead > p { grid-column: 2; }
.post-card--lead > p { align-self: start; }

/* The article illustration is a small, self-contained explanation. */
.post-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(30px, 5vw, 76px); align-items: center; padding-bottom: clamp(40px, 6vw, 80px); }
.post-intro .post-head { padding-bottom: 0; }
.post-intro .post-head h1 { font-size: clamp(40px, 4.6vw, 70px); }
.post-intro .editorial-figure { margin-top: 36px; }
.editorial-figure { padding: 22px; border: 1px solid var(--ev-rule); border-radius: 20px; background: #f0ebe5; box-shadow: 8px 9px 0 #e8def2; }
.editorial-figure__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 17px; border-bottom: 1px solid var(--ev-rule); font: 500 10px/1.4 var(--font-mono); letter-spacing: .08em; }
.editorial-figure__top > span:last-child { font: 500 23px/1 var(--font-body); color: var(--violet); }
.editorial-figure figcaption { padding: 2px 3px 0; }
.editorial-figure figcaption > strong { display: block; font: 600 24px/1.12 var(--font-display); letter-spacing: -.035em; }
.editorial-figure__summary { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.editorial-figure.is-interactive .editorial-figure__summary { display: none; }
.editorial-controls { display: flex; gap: 7px; margin-top: 20px; }
.editorial-controls button { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 10px 8px; border: 1px solid #c8c0ce; border-radius: 10px; background: #fffcf5; font: 600 12px/1.3 var(--font-body); transition: background var(--hover), color var(--hover), border-color var(--hover); }
.editorial-controls button span { display: block; margin-bottom: 3px; font: 500 9px/1.4 var(--font-mono); }
.editorial-controls button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.editorial-controls button:hover { border-color: var(--violet); }
.editorial-controls button:focus-visible { outline: 3px solid var(--electric); outline-offset: 3px; }
.editorial-explanation { min-height: 5em; margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.editorial-figure__note { margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--ev-rule); font: 500 9px/1.6 var(--font-mono); color: var(--muted); }
.editorial-figure [data-ev-part] { transition: opacity 300ms var(--settle); }
.editorial-figure.is-interactive [data-ev-part] { opacity: .65; }
.editorial-figure[data-step="0"] [data-ev-part="0"], .editorial-figure[data-step="1"] [data-ev-part="1"], .editorial-figure[data-step="2"] [data-ev-part="2"] { opacity: 1; }

/* Two original landscapes, deliberately schematic rather than a coverage map. */
.area-scene { padding: 22px 19px 20px; border-radius: 18px 18px 110px 18px; border: 1px solid #d6cedc; background: #faf7ef; box-shadow: -12px 14px 0 #e6def3; transform: rotate(1deg); }
.area-scene--valley { background: #f7f5e9; box-shadow: -12px 14px 0 #dfe7d8; transform: rotate(-1deg); }
.area-scene__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 500 9px/1.5 var(--font-mono); letter-spacing: .06em; }
.area-scene__top span:last-child { font: 500 24px/1 var(--font-body); color: var(--violet); }
.area-scene svg { margin-top: 20px; }
.area-scene__river { stroke-width: 15; }
.area-scene__route { stroke-width: 2.7; }
.area-scene__caption { padding-left: 13px; font: 700 clamp(25px, 2.8vw, 37px)/1.06 var(--font-display); letter-spacing: -.035em; }
.area-scene__caption em { display: block; margin-top: 4px; color: var(--violet); font: italic 400 1.1em/1.08 var(--font-aside); letter-spacing: -.02em; }
.area-scene__note { margin: 20px 58px 0 13px; max-width: 36ch; font: 500 9px/1.55 var(--font-mono); color: var(--muted); }
.area-scene .ev-bold { font-size: 17px; }

/* A notebook rather than another stock photo of someone typing. */
.studio-notes { position: relative; padding: 24px 4px 22px; }
.studio-notes__label { display: flex; justify-content: space-between; gap: 12px; margin-inline: 22px; font: 500 10px/1.4 var(--font-mono); letter-spacing: .07em; }
.studio-notes__label span { color: var(--violet); }
.studio-notes__aside { margin: 12px 0 0 60px; font: 600 27px/1.1 var(--font-display); letter-spacing: -.035em; }
.studio-notes__aside em { font: italic 400 35px/1.1 var(--font-aside); color: var(--violet); }

/* Only visible scenes move, and only when the visitor has allowed motion. */
[data-editorial-scene].is-playing .ev-wire { animation: editorial-connection 18s linear infinite; }
@keyframes editorial-connection { to { stroke-dashoffset: -110; } }
.reduce-motion [data-editorial-scene] .ev-wire { animation: none; }
.reduce-motion .editorial-figure [data-ev-part], .reduce-motion .editorial-controls button { transition: none; }
@media (max-width: 1050px) {
  .post-intro { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .post-intro .post-head { max-width: 800px; }
  .post-intro .editorial-figure { margin-top: 0; max-width: 620px; width: 100%; }
}
@media (max-width: 900px) {
  .post-card--lead { grid-template-columns: minmax(0, 1fr); }
  .post-card--lead .editorial-thumb { grid-column: 1; grid-row: auto; max-width: 600px; }
  .post-card--lead .post-card__meta, .post-card--lead h3, .post-card--lead > p { grid-column: 1; }
  .post-card--lead .post-card__meta { margin-top: 15px; }
  .area-scene, .studio-notes { max-width: 570px; margin-inline: auto; }
}
@media (max-width: 620px) {
  .editorial-figure { padding: 16px; box-shadow: 5px 6px 0 #e8def2; }
  .editorial-figure figcaption > strong { font-size: 23px; }
  /* The selected stage fills the drawing on a phone. Keep its text legible. */
  .editorial-figure > svg { aspect-ratio: 500 / 335; overflow: hidden; }
  .editorial-figure.is-interactive [data-ev-part] { visibility: hidden; }
  .editorial-figure.is-interactive[data-step="0"] [data-ev-part="0"],
  .editorial-figure.is-interactive[data-step="1"] [data-ev-part="1"],
  .editorial-figure.is-interactive[data-step="2"] [data-ev-part="2"] { visibility: visible; }
  .editorial-figure.is-interactive > svg > .ev-wire { visibility: hidden; }
  .editorial-explanation { min-height: 6em; }
  .editorial-controls { gap: 5px; }
  .editorial-controls button { font-size: 14px; }
  .area-scene { padding: 17px 12px 20px; border-bottom-right-radius: 76px; }
  .area-scene__top { font-size: 8px; }
  .area-scene__note { margin-right: 33px; }
  .area-scene .ev-bold { font-size: 18px; }
  .studio-notes__aside { margin-left: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-editorial-scene].is-playing .ev-wire { animation: none; }
  .editorial-figure [data-ev-part], .editorial-controls button { transition: none; }
}