...actual page content...
Behavior:
• Default (no class, or mobile/tablet <1024px):
aside is display:none, main flows full-width. Nothing to
work around on mobile — it just doesn't exist there.
• With `html.layout-ads-right` + viewport ≥1024px:
.site-layout becomes a 2-col grid (fluid main + 300px rail),
aside is visible and scrolls NATURALLY alongside main content
(not sticky) so additional ad units can be stacked vertically.
• Flipping rightPanel.enabled off removes the class on ,
which immediately un-grids .site-layout and un-hides the
aside → main content auto-expands to fill.
Stacking more ads: drop additional `.site-ad-rail` elements inside
`.site-layout__aside`. The aside is a flex column with gap, so each
new rail stacks below the previous one with consistent spacing.
-------------------------------------------------------------------------- */
/* Site-wide left-panel bounds — every page's main column caps at the
same `--w-main` so panels (.cn-generator, .prose, .about-intro,
.support-card) all render at one consistent width regardless of
what wraps them. Centered via auto margins for pages that don't
have a right ad rail; in grid mode the cap still applies but the
grid cell governs final placement. */
.site-layout__main {
width: 100%;
max-width: var(--w-main);
margin-left: auto;
margin-right: auto;
}
.site-layout__aside { display: none; }
@media (min-width: 1024px) {
html.layout-ads-right .site-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 240px;
gap: 24px;
align-items: start;
}
html.layout-ads-right .site-layout__aside {
display: flex;
flex-direction: column;
gap: 24px;
/* Scrolls with the main content — no `position: sticky`. This lets
us stack multiple ad units in the rail without the viewport
clipping anything past the first screen. */
}
}
/* The actual ad unit container. Styled as a subtle parchment card so
the empty state (before AdSense fills) doesn't look broken.
Default is 300×250 (IAB Medium Rectangle). Use `.site-ad-rail--tall`
for 300×600 (IAB Half-Page). Stack as many rails as you like inside
`.site-layout__aside` — they scroll with the page. */
.site-ad-rail {
min-height: 200px;
padding: 16px;
background: var(--bg-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-tertiary);
font-family: var(--font-subheading);
font-size: 0.8rem;
letter-spacing: 1.5px;
text-transform: uppercase;
flex: 0 0 auto; /* don't let flex-col parent stretch/shrink us */
}
/* Half-page (300×600) — taller rail for higher-value placements. */
.site-ad-rail--tall { min-height: 480px; }
html.theme-dark .site-ad-rail {
background: #1a1411;
border-color: var(--border-secondary);
}
/* --------------------------------------------------------------------------
2c. Theme-toggle button (universal, lives in the nav right of Privacy)
-------------------------------------------------------------------------- */
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
font-size: 16px;
line-height: 1;
background: transparent;
color: var(--text-primary);
border: 1px solid var(--border-subtle);
border-radius: 999px;
cursor: pointer;
transition: border-color var(--t-fast),
color var(--t-fast),
background var(--t-fast),
transform var(--t-fast);
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
border-color: var(--accent-gold);
color: var(--accent-gold);
transform: rotate(-12deg);
outline: none;
}
/* --------------------------------------------------------------------------
3. Base / body
-------------------------------------------------------------------------- */
body {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.65;
color: var(--text-primary);
background-color: var(--bg-primary);
background-image:
radial-gradient(circle at 18% 8%, rgba(212, 175, 55, 0.10), transparent 45%),
radial-gradient(circle at 82% 92%, rgba(139, 38, 53, 0.06), transparent 45%);
min-height: 100vh;
/* overflow-x: hidden — moved to to avoid breaking
position: sticky on .site-header in mobile browsers. */
position: relative;
animation: fadeIn 0.5s ease-out;
}
/* Subtle paper grain overlay — inline SVG, zero extra requests */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.11 0 0 0 0 0 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: 0.5;
}
body > * { position: relative; z-index: 1; }
/* --------------------------------------------------------------------------
4. Typography
-------------------------------------------------------------------------- */
h1, h2, h3, h4 {
font-family: var(--font-heading);
font-weight: 700;
color: var(--text-primary);
line-height: 1.22;
letter-spacing: 0.5px;
}
h1 {
font-size: clamp(2rem, 5.5vw, var(--text-5xl));
color: var(--accent-primary);
text-shadow: 0 0 16px var(--halo-h1);
}
h2 {
font-size: clamp(1.5rem, 3.5vw, var(--text-4xl));
color: var(--accent-primary);
margin-bottom: 1rem;
}
h3 {
font-family: var(--font-subheading);
font-size: var(--text-xl);
margin-bottom: 0.5rem;
color: var(--text-primary);
}
p { color: var(--text-secondary); margin-bottom: 1rem; }
strong { color: var(--text-primary); }
em { color: var(--accent-primary); font-style: italic; }
a { color: var(--accent-primary); transition: color var(--t-fast); }
a:hover, a:focus-visible { color: var(--accent-secondary); text-decoration: underline; }
:focus-visible {
outline: 3px solid var(--accent-gold);
outline-offset: 3px;
border-radius: 3px;
}
/* --------------------------------------------------------------------------
5. Layout
Every page's outermost content wrapper is `.container`. It caps at
--w-page (1200px) and has responsive side padding that grows with
the viewport:
mobile (<768px): 20px
tablet (≥768px): 32px
desktop (≥1024px): 40px
For pages whose content wants a NARROWER inner cap (reading-heavy
pages, policy pages, intro panels), chain a modifier class: