/* Fortress CMS — theme demo page.
   Loaded only by /demo/{theme}. Everything here exists to make a fake site look
   like a real one: photo-less covers, a ribbon that says the content is fake,
   and nothing that could be mistaken for the CMS chrome. */

.demo-page { background: var(--bg); }

/* Vertical breathing room without an inline style attribute: the CSP is strict
   and would drop it silently. */
.demo-band { padding-block: clamp(26px, 4vw, 48px); }

/* A quiet, always-visible reminder that the content is not real. */
.demo-ribbon {
    margin: 0;
    padding: .45rem var(--gutter);
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .8rem;
    background: var(--ink);
    color: var(--bg-soft);
    font-size: .74rem;
}
.demo-ribbon strong {
    color: var(--on-ink);
    font-family: var(--mono); font-size: .68rem; font-weight: 400;
    letter-spacing: .12em; text-transform: uppercase;
}
.demo-ribbon span { color: var(--dim); }

.demo-brand {
    display: inline-flex; align-items: center; gap: .45rem;
    font-family: var(--display); font-size: .95rem; font-weight: 600;
    letter-spacing: -.02em; color: var(--ink);
}
.demo-brand svg { color: var(--ink); }

.demo-foot-text { margin: .35rem 0 0; color: var(--dim); font-size: .87rem; max-width: 34ch; }

/* Covers are drawn, not photographed: gradients built from the ink and the
   accent only, so every theme stays black, white and one colour. */
.demo-cover { position: relative; background-color: var(--surface-2); }
.demo-cover::after {
    content: '';
    position: absolute; inset: 0;
    background-image:
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 8%, transparent) 0 1px, transparent 1px 22px),
        repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) 8%, transparent) 0 1px, transparent 1px 22px);
}
.demo-cover-1 { background-image: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); }
.demo-cover-2 { background-image: linear-gradient(150deg, var(--surface-2) 0%, var(--line) 100%); }
.demo-cover-3 { background-image: linear-gradient(160deg, var(--accent-soft) 0%, var(--accent-line) 100%); }
.demo-cover-4 { background-image: linear-gradient(120deg, var(--surface-2) 0%, var(--line) 60%, var(--accent-soft) 100%); }

/* The site.css grid is 3-up; a demo reads better 2-up at tablet width. */
@media (max-width: 900px) {
    .demo-page .post-grid { grid-template-columns: 1fr 1fr; }
    .demo-page .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
    .demo-page .post-grid { grid-template-columns: 1fr; }
    .demo-page .footer-grid { grid-template-columns: 1fr; }
    .demo-ribbon { font-size: .7rem; }
}