/* The Sewing Swede — public website. Colours, fonts and rules are explained in STYLE.md (section 5). */

/* Bubblegum Sans (SIL Open Font License, see ../fonts/bubblegum-sans-OFL.txt), served from this website. */
@font-face {
    font-family: "Bubblegum Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/bubblegum-sans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
        U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Bubblegum Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/bubblegum-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --bg: #eef6ec;              /* the light green tint of every page */
    --sidebar: #deedda;
    --surface: #fbfdfa;
    --text: #22312a;
    --muted: #55675b;
    --accent: #2e6a43;
    --accent-hover: #1f4f30;
    --accent-soft: #cfe5cc;
    --stitch: #8dbd96;          /* dashed "stitching" lines */
    --field-border: #b9d3bb;
    --focus: #e0a526;
    --star-on: #e0a526;         /* guestbook stars */
    --star-on-edge: #c48a12;
    --star-off: #dfe9dc;
    --star-off-edge: #b9d3bb;
    --danger: #a8322a;
    --danger-soft: #fbeceb;
    --danger-border: #f1cfcc;
    --success: #2e6b3a;
    --success-soft: #e3f2e5;
    --success-border: #b7dcbf;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(34, 49, 42, .06), 0 6px 20px rgba(34, 49, 42, .07);
    --font: "Bubblegum Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

/* The test website (dev.thesewingswede.com) wears a warm apricot instead of the green tint, so it can
   never be mistaken for the real website. Only the background changes — every other colour stays exactly
   as it is on the real site, so what she sees here is still what visitors will get. */
body.test-site {
    --bg: #fbefe0;
    --sidebar: #f7e1c6;
}

html { font-size: 112.5%; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 1.2rem;          /* Bubblegum Sans is small for its size */
    line-height: 1.5;
    letter-spacing: .01em;
    background: var(--bg);
    color: var(--text);
}

img { max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Bubblegum Sans has no bold: headings stand out by size and colour. */
h1, h2, h3 { font-weight: 400; line-height: 1.15; color: var(--accent-hover); }
h1 { font-size: 2.8rem; margin: 0 0 1.75rem; }
/* A row of stitches under every page title */
h1::after { content: ""; display: block; width: 5.5rem; margin-top: .6rem; border-bottom: 3px dashed var(--stitch); }
@media (max-width: 30rem) { h1 { font-size: 2.3rem; } }

.skip-link {
    position: absolute;
    top: -10rem;
    left: 1rem;
    z-index: 40;
    padding: .5rem 1rem;
    background: var(--surface);
    border-radius: 8px;
}
.skip-link:focus { top: 1rem; }

/* ── Layout: menu on the left, page on the right ──────────── */

.shell { min-height: 100vh; }

/* Phones and small tablets: the menu is a bar at the top, all pages always visible. */
.sidebar {
    position: relative;
    padding: 1rem 1rem 1.6rem;
    background: var(--sidebar);
}
/* The stitched seam along the edge of the menu */
.sidebar::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 8px;
    left: 0;
    border-bottom: 3px dashed var(--stitch);
    pointer-events: none;
}

/* The logo has a see-through background, so it always sits on the menu colour. */
.brand { display: block; width: min(15rem, 100%); margin-bottom: .9rem; border-radius: 6px; }
.brand-logo { display: block; width: 100%; height: auto; }

.menu { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.menu a {
    display: block;
    padding: .35rem 1rem;
    border: 2px solid transparent;
    border-radius: 999px;
    color: var(--text);
    font-size: 1.3rem;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color .15s, border-color .15s;
}
.menu a:hover { background: var(--accent-soft); color: var(--accent-hover); }
/* The page you are on: a white patch, stitched on */
.menu a[aria-current] { background: var(--surface); border-color: var(--stitch); border-style: dashed; color: var(--accent); }

.content { padding: 2.25rem 1rem 2.5rem; }
.content:focus { outline: none; }
.content-inner, .site-footer { max-width: 46rem; margin-inline: auto; }
.site-footer { margin-top: 4rem; color: var(--muted); font-size: 1rem; }

@media (min-width: 56rem) {
    .shell { display: grid; grid-template-columns: 17rem minmax(0, 1fr); }
    .sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
        padding: 2.25rem 1.75rem 2rem 1.5rem;
    }
    .sidebar::after { top: 0; right: 8px; bottom: 0; left: auto; border-bottom: 0; border-right: 3px dashed var(--stitch); }
    .brand { margin-bottom: 2rem; }
    .menu { display: grid; gap: .3rem; }
    .content { padding: 4rem clamp(1.5rem, 5vw, 4rem) 2.5rem; }
}

/* ── Text written in the editor ───────────────────────────── */

.prose > :first-child { margin-top: 0; }
/* The second text box: her text under the buttons, posts or reviews (AD-9). */
.prose-below { margin-top: 2.5rem; }

/* A price list: the thing on the left, dots, the price on the right (OR-5).
   Two columns when there is room, one on a phone. */
.prose .price-list {
    columns: 2 15rem;
    column-gap: 3rem;
    max-width: 46rem;
    margin: 0 0 1.1rem;
    padding-left: 0;
    list-style: none;
}
.prose .price-list li {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin: 0;
    padding: .3rem 0;
    break-inside: avoid;
}
.prose .price-list li::marker { content: none; }
.prose .price-list li::after {   /* the row of dots between the two */
    content: "";
    flex: 1 1 1.5rem;
    min-width: 1.5rem;
    margin-bottom: .25em;
    border-bottom: 2px dotted var(--accent-soft);
}
.prose .price-list strong { order: 1; font-weight: 400; color: var(--accent-hover); white-space: nowrap; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.1rem; }
.prose h2 { margin: 2.25rem 0 .6rem; font-size: 1.9rem; }
.prose h3 { margin: 1.75rem 0 .5rem; font-size: 1.5rem; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin: .3rem 0; }
.prose li::marker { color: var(--accent); }
.prose figure { margin: 2rem 0; }
/* Photos get a white mat around them, like a printed photo. Tall photos never fill more than the screen. */
.prose img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 80vh;
    margin-inline: auto;
    border: 8px solid #fff;
    border-radius: 6px;
    box-shadow: var(--shadow);
}

/* How big a photo is shown, chosen while writing (PH-13). Without a class it fills the width of the text.
   On a narrow phone the small sizes grow a little, so a photo never becomes a stamp. */
.prose img.size-medium { max-width: 60%; }
.prose img.size-small  { max-width: 35%; }
@media (max-width: 34rem) {
    .prose img.size-medium { max-width: 80%; }
    .prose img.size-small  { max-width: 55%; }
}

/* A row of photos: equal squares side by side, each opens bigger in a popup (site.js). */
.prose .gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 2rem 0; }
.prose .gallery-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prose .gallery-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 30rem) { .prose .gallery-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prose .gallery a { display: block; border-radius: 6px; cursor: zoom-in; }
.prose .gallery img {
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: 50% 15%;   /* crop a little towards the top, so faces in upright photos stay in view */
    border-width: 6px;
    transition: transform .15s, box-shadow .15s;
}
.prose .gallery a:hover img { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(34, 49, 42, .1), 0 10px 24px rgba(34, 49, 42, .16); }

/* The front page is a welcome, so everything on it is centered. Lists keep their bullets on the left. */
.page-front { text-align: center; }
.page-front h1::after { margin-inline: auto; }
.page-front .prose ul, .page-front .prose ol { display: inline-block; text-align: left; }

/* ── What you can order: a button per folder, and the items of one folder ── */

/* 4 per line in the 46rem column; 3 where the column is narrower (e.g. small laptop with the menu on the left) */
.folder-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 100%), 1fr)); gap: 1.25rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.folder-tile {
    display: block;
    padding: .65rem .65rem .45rem;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    outline: 2px dashed var(--stitch);   /* stitched edge, like the blog cards */
    outline-offset: -5px;
    color: var(--accent-hover);
    text-align: center;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s;
}
.folder-tile:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(34, 49, 42, .08), 0 10px 28px rgba(34, 49, 42, .14); color: var(--accent); }
.folder-tile:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.folder-tile img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 15%; border-radius: 8px; }
.folder-tile-name { display: block; padding: .4rem 0 .1rem; font-size: 1.9rem; line-height: 1.1; }

.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 100%), 1fr)); gap: 1.5rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.item a { display: block; border-radius: 6px; cursor: zoom-in; }
.item img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: 50% 15%;
    border: 6px solid #fff;
    border-radius: 6px;
    box-shadow: var(--shadow);
    transition: transform .15s, box-shadow .15s;
}
.item a:hover img { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(34, 49, 42, .1), 0 10px 24px rgba(34, 49, 42, .16); }
.item-text { margin: .5rem .2rem 0; font-size: 1.05rem; line-height: 1.35; }

@media (max-width: 34rem) {
    .folder-tiles, .items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
    .folder-tile-name { font-size: 1.6rem; }
}

/* How to order: E-mail, WhatsApp and Facebook as spools of green thread lying on their side, with wooden ends.
   Between the page text and the folder buttons. The side padding keeps the wooden ends inside the column. */
/* The three spools stand in the middle of the page, also when they wrap on a phone (OR-5). */
.contact-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem 2.1rem; margin: 1.75rem 0 .5rem; padding-inline: 12px; }
.spool {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: .45rem 1.3rem;
    border-radius: 3px;
    background:
        repeating-linear-gradient(100deg, transparent 0 3px, rgba(255, 255, 255, .14) 3px 4px), /* wound thread */
        linear-gradient(180deg, #4f8e63 0%, var(--accent) 45%, #1f4f30 100%);                 /* round, like a roll */
    box-shadow: 0 3px 6px rgba(34, 49, 42, .18);
    color: #fff;
    font-size: 1.25rem;
    line-height: 1.1;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
    transition: transform .15s, box-shadow .15s, filter .15s;
}
/* the wooden ends, a little taller than the thread */
.spool::before, .spool::after {
    content: "";
    position: absolute;
    top: -6px;
    bottom: -6px;
    width: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg, #b98a5e, #e4c49c 45%, #c99a6a);
    box-shadow: 0 3px 6px rgba(34, 49, 42, .18);
}
.spool::before { left: -11px; }
.spool::after { right: -11px; }
.spool:hover { color: #fff; text-decoration: none; transform: translateY(-2px); filter: brightness(.93); box-shadow: 0 6px 12px rgba(34, 49, 42, .22); }
.spool:focus-visible { outline-offset: 9px; } /* around the whole spool, wooden ends included */

/* Text only for screen readers, e.g. "(opens in a new window)" */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.back-link .button { font-size: 1.15rem; }
.back-link .button:hover { text-decoration: none; }
.back-link.back-link-bottom { margin-top: 2.5rem; }   /* two classes: the general .back-link margin comes later in this file */

/* ── Blog overview ────────────────────────────────────────── */

.blog-intro { margin-bottom: 2.25rem; }

.post-list { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }

.post-card {
    position: relative;
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    align-items: start;
    gap: 1.25rem;
    padding: 1.4rem;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    outline: 2px dashed var(--stitch);   /* stitched edge */
    outline-offset: -8px;
    transition: transform .15s, box-shadow .15s;
}
.post-card.no-photo { grid-template-columns: minmax(0, 1fr); }
.post-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(34, 49, 42, .08), 0 10px 28px rgba(34, 49, 42, .12); }
.post-card:has(a:focus-visible) { box-shadow: 0 0 0 3px var(--focus); }
.post-card-photo { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.post-card h2 { margin: 0 0 .15rem; font-size: 1.75rem; }
.post-card h2 a { color: inherit; text-decoration: none; }
.post-card h2 a:focus-visible { outline: none; }
/* The whole card can be clicked */
.post-card h2 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.post-card p { margin: 0 0 .5rem; }
.post-card .read-more { color: var(--accent); }
.post-card:hover .read-more { text-decoration: underline; }
.post-date { color: var(--muted); font-size: 1.05rem; }

@media (max-width: 34rem) {
    .post-card { grid-template-columns: minmax(0, 1fr); }
    .post-card-photo { aspect-ratio: 4 / 3; }
}

.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; }
.pager-info { color: var(--muted); }

.empty { padding: 1.5rem; background: var(--surface); border-radius: var(--radius); color: var(--muted); text-align: center; }

/* ── One blog post and its comments ───────────────────────── */

.back-link { margin: 0 0 1rem; font-size: 1.1rem; }
.back-link a { text-decoration: none; }
.back-link a:hover { text-decoration: underline; }
.post-header h1 { margin-bottom: .75rem; }
.post-header .post-date { margin: 0 0 2rem; }

.comments { margin-top: 3.5rem; padding-top: 2rem; border-top: 3px dashed var(--stitch); }
.comments h2 { margin: 0 0 1.25rem; font-size: 2rem; }
.muted { color: var(--muted); }

.comment-list { display: grid; gap: 1rem; margin: 0 0 2.5rem; padding: 0; list-style: none; }
.comment { padding: 1rem 1.25rem; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
.comment-head { margin: 0 0 .3rem; }
.comment-name { color: var(--accent-hover); font-size: 1.3rem; }
.comment-date { margin-left: .4rem; color: var(--muted); font-size: 1rem; }
.comment-text p { margin: 0 0 .5rem; overflow-wrap: anywhere; }
.comment-text p:last-child { margin-bottom: 0; }

.comment-form-box {
    padding: 1.5rem;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    scroll-margin-top: 1rem;
}
.comment-form-box h3 { margin: 0 0 1rem; font-size: 1.6rem; }

/* ── Guestbook ────────────────────────────────────────────── */

/* Stars are drawn (SVG), so they look the same on every device. */
.stars { display: inline-flex; gap: .12em; vertical-align: middle; }
.star { width: 1.2em; height: 1.2em; fill: var(--star-off); stroke: var(--star-off-edge); stroke-width: 1.2; stroke-linejoin: round; }
.star.is-on { fill: var(--star-on); stroke: var(--star-on-edge); }

.review-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin: 1.5rem 0 1.75rem; }
.review-average { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: 0; font-size: 1.35rem; }
/* Room for the spool's wooden ends, which stick out 11px on each side (GB-6). */
.review-summary .spool { margin-inline: 12px; }
.review-average .stars { font-size: 1.4rem; }

.review-list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.review { padding: 1.1rem 1.35rem; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
.review-head { margin: 0 0 .2rem; }
.review-name { color: var(--accent-hover); font-size: 1.35rem; }
.review-date { margin-left: .4rem; color: var(--muted); font-size: 1rem; }
.review-rating { margin: 0 0 .45rem; line-height: 1; }

.review-form-box { margin-top: 2.5rem; }
.review-form-box h2 { margin: 0 0 1rem; font-size: 1.8rem; }

/* Star picker: 5 radio buttons drawn as stars. They light up to the chosen one, or to the one being pointed at. */
.rating-field { display: grid; gap: .3rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.rating-field legend { padding: 0; margin-bottom: .3rem; font-size: 1.15rem; }
.rating-input { display: flex; flex-wrap: wrap; align-items: center; }
.rating-star { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 10px; cursor: pointer; }
.rating-star .star { width: 38px; height: 38px; transition: transform .1s; }
.rating-star:hover .star { transform: scale(1.1); }
.rating-input:not(:hover) input:checked + .rating-star .star,
.rating-input:not(:hover) .rating-star:has(~ input:not([value="0"]):checked) .star,
.rating-star:hover .star,
.rating-star:has(~ .rating-star:hover) .star { fill: var(--star-on); stroke: var(--star-on-edge); }
.rating-input input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 0; }
.rating-clear { display: none; margin-left: .6rem; padding: .3rem .6rem; border-radius: 8px; color: var(--muted); font-size: 1.05rem; text-decoration: underline; cursor: pointer; }
.rating-clear:hover { color: var(--accent-hover); }
.rating-input:has(input:not([value="0"]):checked) .rating-clear,
.rating-input:has(#rating-0:focus-visible) .rating-clear { display: inline-block; }

/* ── Forms, buttons and messages ──────────────────────────── */

.form { display: grid; gap: 1rem; }
.field { display: grid; gap: .3rem; }
.field > span { font-size: 1.15rem; }

input[type="text"], textarea {
    width: 100%;
    min-height: 48px;
    padding: .55rem .8rem;
    border: 2px solid var(--field-border);
    border-radius: 10px;
    background: #fff;
    color: inherit;
    font: inherit;
    font-size: 1.15rem;
}
input[type="text"]:focus, textarea:focus { border-color: var(--accent); outline: 3px solid var(--focus); outline-offset: 0; }
textarea { min-height: 8rem; resize: vertical; }

.hint { margin: 0; color: var(--muted); font-size: 1rem; }

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    min-height: 48px;
    padding: .45rem 1.6rem;
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-size: 1.25rem;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.button:hover { background: var(--accent-hover); color: #fff; }
.button-light { background: var(--surface); border-color: var(--accent-soft); color: var(--accent); }
.button-light:hover { background: var(--accent-soft); color: var(--accent-hover); }

.notice { margin: 0 0 1rem; padding: .8rem 1rem; border: 2px solid transparent; border-radius: 10px; font-size: 1.1rem; }
.notice-success { background: var(--success-soft); border-color: var(--success-border); color: var(--success); }
.notice-error { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); }

/* Hidden from people; spam robots fill it in and give themselves away. */
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ── Photo popup (site.js) ────────────────────────────────── */

html.lightbox-open { overflow: hidden; }
.lightbox {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: #15231a;        /* solid, so the page behind doesn't show through the description */
    color: #fff;
}
.lightbox::backdrop { background: #15231a; }
.lightbox-inner {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: .75rem;
    height: 100%;
    padding: 1rem;
}
.lightbox-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lightbox-count { font-size: 1.1rem; }
/* Positioned inside the space between the top bar and the buttons, so the whole photo always fits in it
   (a percentage height on a photo in a grid cell is not reliable: tall photos pushed past the buttons). */
.lightbox-figure { position: relative; min-height: 0; margin: 0; }
.lightbox-figure img {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    border: 6px solid #fff;
    border-radius: 6px;
}
.lightbox-bottom { display: grid; justify-items: center; gap: .6rem; }
.lightbox-caption { max-width: 40rem; margin: 0; font-size: 1.15rem; text-align: center; }
.lightbox-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.lightbox-button {
    min-height: 48px;
    padding: .35rem 1.25rem;
    border: 2px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font: inherit;
    font-size: 1.15rem;
    cursor: pointer;
}
.lightbox-button:hover { background: rgba(255, 255, 255, .2); }

/* ── Preview (opened from the admin area) and error page ──── */

.preview-banner {
    position: sticky;
    top: 0;
    z-index: 30;
    padding: .6rem 1rem;
    background: #fff3cf;
    border-bottom: 2px dashed var(--focus);
    color: #5a4300;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: .95rem;
    line-height: 1.4;
    text-align: center;
}

.error-page { max-width: 34rem; margin: 0 auto; padding: 5rem 1rem; text-align: center; }
.error-page h1::after { margin-inline: auto; }
.error-brand { margin: 0 0 1.5rem; color: var(--accent); font-size: 1.6rem; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
    .post-card:hover, .spool:hover, .rating-star:hover .star { transform: none; }
}