/* Page styles for article-backpack-snacks.html — extracted from an inline <style> block so the
   site satisfies CSP style-src-elem 'self' (no inline <style> elements). */
.article-head { padding-block: clamp(2.2rem,5vw,3.5rem) clamp(1.6rem,3vw,2.4rem); }
.article-head h1 { font-size: clamp(2.2rem, 1.2rem + 4vw, 3.8rem); max-width: 22ch; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 1.2rem; color: var(--muted); font-weight: 600; font-size: .95rem; }
.article-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong); }
.article-body { max-width: 70ch; }
.article-body h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); margin-top: clamp(2rem,4vw,2.8rem); margin-bottom: .8rem; }
.article-body p { color: var(--ink-2); font-size: 1.08rem; line-height: 1.7; margin-top: .9rem; }
.article-body p strong { color: var(--ink); }
.article-callout { border-radius: var(--radius-lg); padding: clamp(1.2rem,3vw,1.7rem);
background: color-mix(in srgb, var(--lime) 14%, var(--surface));
border: 1px solid color-mix(in srgb, var(--lime) 30%, var(--line)); margin-top: 1.4rem; }
.article-callout p { margin-top: .4rem; }
.backlink { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; color: var(--accent-deep); margin-bottom: 1.2rem; }
.backlink svg { width: 17px; height: 17px; }
.backlink:hover { text-decoration: underline; }
.snackrank { counter-reset: sn; display: grid; gap: 1rem; margin-top: 1.4rem; padding: 0; list-style: none; }
.snackrank li { counter-increment: sn; position: relative; padding: 1.1rem 1.2rem 1.1rem 4rem;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.snackrank li::before { content: counter(sn, decimal-leading-zero); position: absolute; left: 1.1rem; top: 1.15rem;
font-family:'Archivo'; font-stretch:125%; font-weight:900; font-size:1.3rem; color: var(--lime-deep); }
.snackrank h3 { font-size: 1.15rem; text-transform: none; font-stretch: 110%; margin-bottom: .3rem; }
.snackrank p { margin-top: 0 !important; font-size: 1rem !important; }
.snackrank .why { display: inline-block; margin-top: .5rem; font-size: .75rem; font-weight: 800; text-transform: uppercase;
letter-spacing: .05em; padding: .25rem .6rem; border-radius: 999px; background: color-mix(in srgb, var(--lime) 22%, #fff); color: var(--lime-ink); }