1@use "../vars" as v;
2@use "../theme" as *;
3
4// overflow-x: clip - 100vw full-bleed elements (.home-hero) overshoot by the scrollbar width
5// flex column + min-height - lets .footer's margin-top: auto below pin it to the
6// viewport bottom on short pages instead of trailing off past a full-height .content
7body { overflow-x: clip; display: flex; flex-direction: column; min-height: 100dvh; }
8// width: 100% - body is a column flex container; without it, .shell's auto
9// margins cancel the flex-item stretch and <main> shrinks to fit-content.
10.shell { width: 100%; margin-inline: auto; box-sizing: border-box; padding: v.$padding-inline; }
11.shell--narrow { max-width: v.content-width(); }
12.inner { width: 100%; }
13.content { padding-block: 2rem; flex: 1 0 auto; scroll-margin-top: v.$header-height; }
14.page-title { text-align: left; margin-block-end: 0.2rem; }
15img, video, iframe { max-width: 100%; height: auto; display: block; }
16
17// Paper grain: a tiled SVG fractal-noise overlay at low opacity, so the
18// background reads as slightly worn paper instead of a flat fill. Static
19// image tile - no repaint cost. Sits above everything (dialogs render in the
20// browser top layer and stay crisp); pointer-events keeps it untouchable.
21body::after {
22 content: "";
23 position: fixed;
24 inset: 0;
25 z-index: 12000;
26 pointer-events: none;
27 opacity: theme(grain-opacity); // per-theme: see $themes in theme/_colors.scss
28 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/><feColorMatrix type="saturate" values="0"/></filter><rect width="100%25" height="100%25" filter="url(%23n)"/></svg>');
29}
30
31.footer { margin-top: auto; border-top: 1px solid var(--border-subtle); font-size: 0.75rem; color: theme(muted); }
32.footer .shell { padding-block: 1.25rem; }
33.footer__row { display: flex; justify-content: space-between; align-items: center; }
34.footer__row + .footer__row { margin-top: 0.75rem; }
35.footer__social { display: flex; align-items: center; flex-wrap: wrap; gap: 0.9rem; }
36.rss-link { display: inline-flex; align-items: center; gap: 0.2rem; vertical-align: middle; color: theme(muted); transition: color 0.15s ease; }
37.rss-link:hover { color: theme(text); }
38.rss-link svg { width: 1em; height: 1em; }