/* My420Love articles: small additions on top of the site's app.css (uses the site's own tokens) */
.art-head { padding-bottom: var(--space-6, 1.5rem); }
.art-crumbs { font-size: .9rem; color: var(--text-3); }
.art-crumbs a { color: var(--text-3); text-decoration: none; }
.art-crumbs a:hover { color: var(--text-1); }
.art-byline { color: var(--text-3); font-size: .95rem; margin: 0; }
.art-wrap { padding-bottom: var(--space-16, 4rem); overflow-wrap: anywhere; }
.art-cover { margin: 0 0 var(--space-8, 2rem); }
.art-cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius-xl, 20px); border: 1px solid var(--border-1); background: var(--surface-2); }
.art-body a { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; }
.art-body blockquote { margin-inline: 0; padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
  border-left: 3px solid var(--brand-strong, #3fc684); background: var(--surface-2);
  border-radius: 0 var(--radius-md, 10px) var(--radius-md, 10px) 0; color: var(--text-1); font-style: italic; }
.art-body table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: .95rem; }
.art-body th, .art-body td { padding: .6rem .75rem; border: 1px solid var(--border-1); text-align: left; vertical-align: top; min-width: 9rem; }
.art-body th { background: var(--surface-2); color: var(--text-1); }
.art-question { margin: var(--space-12, 3rem) 0 var(--space-6, 1.5rem); padding: var(--space-6, 1.5rem);
  border-radius: var(--radius-xl, 20px); background: var(--surface-brand, var(--surface-2));
  border: 1px solid var(--brand-strong, #3fc684); }
.art-question__label { margin: 0 0 .4rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-strong, #3fc684); font-weight: 600; }
.art-question__text { margin: 0; font-family: var(--font-display); font-size: clamp(1.25rem, 3.5vw, 1.6rem); line-height: 1.3; color: var(--text-1); }
.art-cta { margin: 0 0 var(--space-12, 3rem); }
.art-more { padding-top: var(--space-6, 1.5rem); border-top: 1px solid var(--border-1); }
.art-more h2 { font-size: var(--fs-xl, 1.4rem); color: var(--text-1); margin: 0 0 var(--space-3, .75rem); }
.art-more ul { margin: 0 0 var(--space-4, 1rem); padding-inline-start: 1.2rem; color: var(--text-2); }
.art-more li + li { margin-top: var(--space-2, .5rem); }
.art-more a, .art-network a, .art-list a { color: var(--text-link); }
.art-network { margin-top: var(--space-10, 2.5rem); font-size: .9rem; color: var(--text-3); }
.art-list { list-style: none; margin: 0; padding: 0; }
.art-list__item { padding: var(--space-6, 1.5rem) 0; border-bottom: 1px solid var(--border-1); }
.art-list__item:first-child { padding-top: 0; }
.art-list__title { font-size: var(--fs-2xl, 1.6rem); line-height: 1.2; margin: 0 0 .4rem; }
.art-list__title a { color: var(--text-1); text-decoration: none; }
.art-list__title a:hover { color: var(--text-link); }
.art-list__meta { margin: 0 0 .5rem; font-size: .9rem; color: var(--text-3); }
.art-list__desc { margin: 0 0 .5rem; color: var(--text-2); }