/*
 * Hypnotitron — visual foundation.
 * Built fresh against docs/reference/homepage-approved-design.png
 * (restrained gothic-horror: near-black stone, parchment type, thin
 * crimson accents). Not a pixel-for-pixel recreation, and nothing here
 * is ported from the CybrVillain reference project's terminal.css
 * (see docs/CYBRVILLAIN-AUDIT.md) — self-hosted, no external fonts or
 * assets, matching the same-origin-only CSP in app/Security.php.
 */

:root {
    --bg-void:       #0a0908;
    --bg-stone:      #15120f;
    --bg-stone-alt:  #1c1712;
    --bg-card:       #191512;
    --border-hair:   rgba(139, 32, 44, 0.35);
    --border-hair-soft: rgba(232, 223, 200, 0.10);
    --text-parchment: #e9dfc7;
    --text-muted:     #a99c85;
    --text-faint:     #6f6455;
    --accent:         #8b202c;
    --accent-bright:  #b23244;
    --accent-dim:     #5a1720;
    --shadow-deep:    rgba(0, 0, 0, 0.6);
    --font-display: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', serif;
    --font-body:    Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', serif;
    --max-width: 1180px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background:
        repeating-linear-gradient(180deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 3px),
        radial-gradient(ellipse at 20% 0%, rgba(139,32,44,0.06), transparent 45%),
        var(--bg-void);
    color: var(--text-parchment);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 32px;
}

/* ---------------------------------------------------------------- */
/* Header */
/* ---------------------------------------------------------------- */

.site-header {
    background: linear-gradient(180deg, var(--bg-stone) 0%, var(--bg-stone-alt) 100%);
    border-bottom: 1px solid var(--border-hair);
    box-shadow: 0 1px 24px var(--shadow-deep);
    position: relative;
}

.site-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent) 80%, transparent);
    opacity: 0.5;
}

.site-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 28px;
    padding-bottom: 28px;
}

.site-branding {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* Same component as the footer's icon row (.social-links), just
   smaller here — "subtle and restrained" directly under the tagline,
   where the footer's full-size circles would compete with the
   wordmark for attention. */
.header-social-links a {
    width: 24px;
    height: 24px;
}

.header-social-links svg {
    width: 11px;
    height: 11px;
}

.wordmark {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-parchment);
    text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}

.wordmark span {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.72rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--accent-bright);
    margin-top: 6px;
}

.site-nav ul {
    list-style: none;
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
}

.site-nav a {
    font-size: 0.82rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid transparent;
    padding-bottom: 4px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
    color: var(--text-parchment);
    border-bottom-color: var(--accent);
}

.nav-toggle { display: none; }

/* ---------------------------------------------------------------- */
/* Draft preview banner (Part 3 of the CMS overhaul) — fixed bar above
   the normal header, only ever rendered when GalleryController::
   preview()/JournalArchiveController::preview() pass $previewBanner.
   Deliberately loud (solid accent fill, not the site's usual restraint)
   so it can never be mistaken for real, published content. */
/* ---------------------------------------------------------------- */

.preview-banner {
    background: var(--accent);
    border-bottom: 1px solid var(--accent-bright);
}

.preview-banner-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 32px;
}

.preview-banner-text {
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
}

.preview-banner-return {
    border-color: #fff;
    color: #fff;
    padding: 8px 20px;
}

.preview-banner-return:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: #fff;
    color: #fff;
}

/* ---------------------------------------------------------------- */
/* Eyebrow / section headings */
/* ---------------------------------------------------------------- */

.eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--accent-bright);
    margin: 0 0 14px;
}

.section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 34px;
}

.section-heading h2 {
    font-family: var(--font-display);
    font-size: 1.9rem;
    letter-spacing: 0.02em;
    margin: 0;
    color: var(--text-parchment);
}

.section-heading .view-all {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-bright);
    white-space: nowrap;
}

.section-heading .view-all:hover { color: var(--text-parchment); }

/* Homepage Recent Work / From the Journal bands: the eyebrow alone is
   the section title here (no repeated large <h2> underneath it) — a
   modifier, not a change to the shared .section-heading/.eyebrow
   rules above, so every other page still using a full eyebrow+h2
   .section-heading (Gallery, Journal, admin pages) is untouched.
   align-items switches from baseline (which was aligning against the
   h2's baseline) to center, since there's now only the eyebrow's own
   line to align "View All >" against; the eyebrow's bottom margin
   (sized for the space before a heading that's no longer there) is
   zeroed so the row doesn't carry leftover dead space that would read
   as "a heading was deleted" rather than an intentionally compact row. */
.section-heading-compact { align-items: center; }
.section-heading-compact .eyebrow { margin-bottom: 0; }

.section-rule {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-hair-soft) 20%, var(--border-hair-soft) 80%, transparent);
    margin: 64px 0;
}

/* ---------------------------------------------------------------- */
/* Buttons — ghost-outline only, no filled buttons anywhere */
/* ---------------------------------------------------------------- */

.btn-ghost {
    display: inline-block;
    padding: 13px 30px;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--text-parchment);
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-ghost:hover:not(:disabled) {
    background: rgba(139, 32, 44, 0.14);
    border-color: var(--accent-bright);
    color: #fff;
}

.btn-ghost:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn-ghost.btn-block { width: 100%; }

/* ---------------------------------------------------------------- */
/* Hero */
/* ---------------------------------------------------------------- */

.hero {
    padding: 72px 0 88px;
}

.hero .wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.hero-copy h1 {
    font-family: var(--font-display);
    font-size: 2.6rem;
    line-height: 1.15;
    margin: 0 0 18px;
    color: var(--text-parchment);
}

.hero-copy p {
    color: var(--text-muted);
    max-width: 40ch;
    margin: 0 0 30px;
}

.frame {
    position: relative;
    min-width: 0;
    border: 1px solid var(--border-hair-soft);
    background: radial-gradient(ellipse at 50% 30%, var(--bg-stone-alt), var(--bg-void) 75%);
    aspect-ratio: 4 / 5;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
}

.frame::before,
.frame::after,
.frame > .corner-tl,
.frame > .corner-br {
    content: "";
    position: absolute;
    width: 34px;
    height: 34px;
    border-color: var(--accent-bright);
    border-style: solid;
    opacity: 0.85;
}

.frame::before {
    top: -1px; left: -1px;
    border-width: 2px 0 0 2px;
}

.frame::after {
    bottom: -1px; right: -1px;
    border-width: 0 2px 2px 0;
}

.frame-note {
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.frame-has-image { padding: 0; }

/* contain, not cover: this is the homepage hero — the single most
   prominent artwork placement on the site — and the newest published
   piece must always show in full, regardless of its aspect ratio.
   .frame's own radial-gradient background (above) shows through as
   deliberate letterboxing wherever the image doesn't fill the 4:5 box;
   object-position is the object-fit default (50% 50%) made explicit,
   since "keep it centered" is a requirement here, not an accident. */
.frame img {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
    object-position: 50% 50%;
    display: block;
}

/* ---------------------------------------------------------------- */
/* Recent work grid */
/* ---------------------------------------------------------------- */

.work-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.work-card {
    border: 1px solid var(--border-hair-soft);
    background: var(--bg-card);
}

.work-card .thumb {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-faint);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-hair-soft);
    background: linear-gradient(160deg, var(--bg-stone-alt), var(--bg-void));
    overflow: hidden;
}

.work-card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.work-card { transition: border-color 0.2s ease; }
.work-card:hover { border-color: var(--border-hair); }

.work-card .meta { padding: 14px 16px 18px; }

.work-card .meta .name {
    display: block;
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--text-parchment);
    margin-bottom: 4px;
}

.work-card .meta .year {
    font-size: 0.78rem;
    color: var(--text-faint);
}

.empty-state {
    border: 1px dashed var(--border-hair-soft);
    padding: 48px 32px;
    text-align: center;
    color: var(--text-faint);
    font-size: 0.88rem;
    letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------- */
/* Journal list-row layout */
/* ---------------------------------------------------------------- */

.journal-list {
    display: flex;
    flex-direction: column;
}

.journal-row {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: 28px;
    align-items: center;
    padding: 26px 0;
    border-bottom: 1px solid var(--border-hair-soft);
}

.journal-row:last-child { border-bottom: none; }

.journal-row .thumb {
    aspect-ratio: 4 / 3;
    background: linear-gradient(160deg, var(--bg-stone-alt), var(--bg-void));
    border: 1px solid var(--border-hair-soft);
}

.journal-row .date {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-bright);
    margin-bottom: 8px;
}

.journal-row h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    margin: 0 0 8px;
    color: var(--text-parchment);
}

.journal-row p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.92rem;
    max-width: 60ch;
}

/* No images yet (see JournalArchiveController) — the archive list
   drops .journal-row's reserved thumbnail column rather than showing
   an empty one. */
.journal-archive .journal-row {
    grid-template-columns: 1fr auto;
    align-items: start;
}

/* ---------------------------------------------------------------- */
/* Journal post */
/* ---------------------------------------------------------------- */

.journal-post {
    padding: 30px 0 88px;
}

.journal-post h1 {
    font-family: var(--font-display);
    font-size: 2rem;
    line-height: 1.2;
    max-width: 46ch;
    margin: 14px 0 10px;
    color: var(--text-parchment);
}

.journal-publish-date {
    font-size: 0.8rem;
    color: var(--text-faint);
    margin: 0 0 34px;
}

.journal-body {
    color: var(--text-muted);
    line-height: 1.8;
    max-width: 68ch;
}

/* ---------------------------------------------------------------- */
/* About page */
/* ---------------------------------------------------------------- */

.about-page {
    padding: 30px 0 88px;
}

.about-page h1 {
    font-family: var(--font-display);
    font-size: 2rem;
    line-height: 1.2;
    max-width: 46ch;
    margin: 14px 0 24px;
    color: var(--text-parchment);
}

.about-body {
    color: var(--text-muted);
    line-height: 1.8;
    max-width: 68ch;
}

/* ---------------------------------------------------------------- */
/* Artwork detail */
/* ---------------------------------------------------------------- */

.artwork-back-link {
    display: inline-block;
    margin: 30px 0 6px;
}

.artwork-detail-layout {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 50px;
    align-items: start;
    padding: 30px 0 88px;
}

.artwork-detail-image img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--border-hair-soft);
}

.artwork-detail-copy h1 {
    font-family: var(--font-display);
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 10px;
    color: var(--text-parchment);
}

.artwork-year {
    color: var(--accent-bright);
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 22px;
}

.artwork-description {
    color: var(--text-muted);
    margin: 0 0 24px;
    line-height: 1.7;
}

.artwork-publish-date {
    font-size: 0.8rem;
    color: var(--text-faint);
    margin: 0;
}

/* ---------------------------------------------------------------- */
/* Newsletter band */
/* ---------------------------------------------------------------- */

.newsletter {
    padding: 60px 0;
    border-top: 1px solid var(--border-hair-soft);
}

.newsletter .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
}

.newsletter h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin: 0 0 6px;
}

.newsletter p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.newsletter-form {
    display: flex;
    gap: 12px;
}

.newsletter-form input[type="email"] {
    background: var(--bg-stone);
    border: 1px solid var(--border-hair-soft);
    color: var(--text-parchment);
    padding: 13px 16px;
    font-family: var(--font-body);
    min-width: 240px;
}

.newsletter-alert {
    margin-bottom: 12px;
    text-align: left;
}

/* ---------------------------------------------------------------- */
/* Footer */
/* ---------------------------------------------------------------- */

.site-footer {
    border-top: 1px solid var(--border-hair);
    padding: 30px 0;
    background: var(--bg-stone);
}

.site-footer .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

/* flex-wrap: with up to nine platforms now possible (was three), this
   is what keeps a fully-configured icon row from overflowing
   horizontally at narrow widths — it just wraps to a second line.
   min-width: 0 is required for that wrap to actually engage where this
   sits as a flex item itself (the header usage, inside .site-branding's
   column flex) — without it, a flex item's default min-width:auto lets
   its own children's combined intrinsic width force this row (and
   everything sharing its containing block) wider than the viewport
   instead of wrapping, which is exactly the header overflow this rule
   fixes at narrow phone widths. */
.social-links { display: flex; flex-wrap: wrap; gap: 14px; min-width: 0; }

.social-links a {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-hair-soft);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: border-color 0.2s ease, color 0.2s ease;
}

.social-links a:hover {
    border-color: var(--accent-bright);
    color: var(--text-parchment);
}

.social-links svg { width: 15px; height: 15px; fill: currentColor; }

.copyright {
    font-size: 0.78rem;
    color: var(--text-faint);
    letter-spacing: 0.03em;
}

/* ---------------------------------------------------------------- */
/* Error pages */
/* ---------------------------------------------------------------- */

.error-page {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 100px 32px;
}

.error-page .code {
    font-family: var(--font-display);
    font-size: 5rem;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 18px;
}

.error-page h1 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    margin: 0 0 12px;
}

.error-page p {
    color: var(--text-muted);
    max-width: 46ch;
    margin: 0 0 30px;
}

.error-page pre {
    text-align: left;
    max-width: 700px;
    overflow-x: auto;
    background: var(--bg-stone);
    border: 1px solid var(--border-hair-soft);
    padding: 18px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ---------------------------------------------------------------- */
/* Admin — guest (login) */
/* ---------------------------------------------------------------- */

.admin-guest-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.auth-card {
    width: 100%;
    max-width: 380px;
    background: var(--bg-card);
    border: 1px solid var(--border-hair-soft);
    padding: 40px 36px;
    box-shadow: 0 20px 60px var(--shadow-deep);
}

.auth-card .wordmark {
    font-size: 1.5rem;
    display: block;
    text-align: center;
    margin-bottom: 6px;
}

.auth-card .wordmark span { text-align: center; }

.auth-card h1 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    text-align: center;
    color: var(--text-muted);
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 30px;
}

/* ---------------------------------------------------------------- */
/* Forms (shared: admin login, account) */
/* ---------------------------------------------------------------- */

.field { margin-bottom: 20px; }

.field label {
    display: block;
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.field-optional {
    text-transform: none;
    letter-spacing: normal;
    color: var(--text-faint);
}

.field input[type="text"],
.field input[type="password"],
.field input[type="email"],
.field input[type="date"],
.field input[type="url"] {
    width: 100%;
    background: var(--bg-stone);
    border: 1px solid var(--border-hair-soft);
    color: var(--text-parchment);
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: 0.95rem;
}

.field input:focus {
    outline: none;
    border-color: var(--accent-bright);
}

.alert {
    padding: 13px 16px;
    margin-bottom: 22px;
    font-size: 0.88rem;
    border: 1px solid;
}

.alert-error {
    background: rgba(139, 32, 44, 0.12);
    border-color: var(--accent);
    color: #e8b7bd;
}

.alert-success {
    background: rgba(60, 110, 70, 0.12);
    border-color: #3c6e46;
    color: #b9dcc0;
}

/* ---------------------------------------------------------------- */
/* Admin — authenticated shell */
/* ---------------------------------------------------------------- */

.admin-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 220px 1fr;
}

.admin-sidebar {
    background: var(--bg-stone);
    border-right: 1px solid var(--border-hair-soft);
    padding: 30px 24px;
    display: flex;
    flex-direction: column;
    /* Pinned to the viewport while .admin-main scrolls beside it, like
       a desktop app's nav panel — not position:fixed (which would take
       it out of flow and require manually matching widths/overlaying
       content) and not an overlay. If the sidebar's own contents ever
       exceed the viewport height, it scrolls independently rather than
       growing past it or pushing .admin-main's column out of sync. */
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.admin-sidebar .wordmark {
    font-size: 1.15rem;
    margin-bottom: 40px;
}

.admin-sidebar .wordmark span { font-size: 0.6rem; }

.admin-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

.admin-nav li { margin-bottom: 4px; }

.admin-nav a {
    display: block;
    padding: 10px 12px;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    border-left: 2px solid transparent;
}

.admin-nav a:hover,
.admin-nav a[aria-current="page"] {
    color: var(--text-parchment);
    border-left-color: var(--accent);
    background: rgba(139, 32, 44, 0.08);
}

.admin-user {
    border-top: 1px solid var(--border-hair-soft);
    padding-top: 18px;
    font-size: 0.8rem;
    color: var(--text-faint);
}

.admin-user form { margin-top: 10px; }

.admin-user-identity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.admin-user-name {
    color: var(--text-muted);
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-main {
    padding: 44px 48px;
    min-width: 0;
}

.admin-main h1 {
    font-family: var(--font-display);
    font-size: 1.7rem;
    margin: 0 0 30px;
}

.admin-card {
    background: var(--bg-card);
    border: 1px solid var(--border-hair-soft);
    padding: 30px 34px;
    max-width: 480px;
}

.admin-card + .admin-card {
    margin-top: 30px;
}

.text-meta {
    margin: 4px 0 0;
    color: var(--text-faint);
    font-size: 0.82rem;
}

.text-meta:first-child {
    margin-top: 0;
}

.admin-card-heading {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--text-parchment);
}

.dashboard-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin: 20px 0 32px;
}

.stat-row {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.stat-tile {
    background: var(--bg-card);
    border: 1px solid var(--border-hair-soft);
    padding: 20px 24px;
    min-width: 160px;
}

.stat-tile .num {
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--text-parchment);
}

.stat-tile .label {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-top: 4px;
}

/* ---------------------------------------------------------------- */
/* Admin — artwork CRUD */
/* ---------------------------------------------------------------- */

.field textarea,
.field select {
    width: 100%;
    background: var(--bg-stone);
    border: 1px solid var(--border-hair-soft);
    color: var(--text-parchment);
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: 0.95rem;
}

.field textarea:focus,
.field select:focus {
    outline: none;
    border-color: var(--accent-bright);
}

.field-error {
    color: #e8b7bd;
    font-size: 0.78rem;
    margin: 6px 0 0;
}

.admin-card-flush {
    padding: 0;
    max-width: none;
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    text-align: left;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-hair-soft);
    font-size: 0.9rem;
}

.admin-table th {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.admin-table tr:last-child td { border-bottom: none; }

.admin-table-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.status-pill {
    display: inline-block;
    padding: 3px 10px;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid var(--border-hair-soft);
    color: var(--text-muted);
}

.status-pill.status-published { border-color: var(--accent); color: var(--accent-bright); }
.status-pill.status-draft { color: var(--text-faint); }
.status-pill.status-archived { color: var(--text-faint); opacity: 0.7; }

.status-pill.status-active { border-color: var(--accent); color: var(--accent-bright); }
.status-pill.status-pending { color: var(--text-faint); }
.status-pill.status-unsubscribed { color: var(--text-faint); opacity: 0.7; }

.filter-tabs {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.filter-tabs a {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-bottom: 4px;
    border-bottom: 1px solid transparent;
}

.filter-tabs a.active {
    color: var(--text-parchment);
    border-bottom-color: var(--accent);
}

.filter-tabs a:hover { color: var(--text-parchment); }

.link-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--accent-bright);
    font-size: 0.85rem;
    cursor: pointer;
    font-family: var(--font-body);
}

.link-button:hover { color: var(--text-parchment); }

/* ---------------------------------------------------------------- */
/* Admin — artwork form (wide upload workspace) */
/* ---------------------------------------------------------------- */

.admin-card-wide {
    max-width: none;
}

.artwork-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 44px;
    align-items: start;
}

.artwork-image-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.artwork-image-panel {
    position: relative;
    width: 100%;
    min-width: 0;
    aspect-ratio: 3 / 2;
    background: var(--bg-stone);
    border: 1px dashed var(--border-hair-soft);
    overflow: hidden;
}

.artwork-image-panel:focus-within {
    outline: 2px solid var(--accent-bright);
    outline-offset: 2px;
}

.artwork-image-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.artwork-image-preview {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
}

/* Author display:block above would otherwise override the browser's
   native [hidden]{display:none} — restore it explicitly so the empty
   preview img never paints a broken-image icon before a file is chosen. */
.artwork-image-preview[hidden] {
    display: none;
}

.artwork-image-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    pointer-events: none;
    color: var(--text-faint);
    font-size: 0.85rem;
}

/* Same reasoning as .artwork-image-preview[hidden] above. */
.artwork-image-placeholder[hidden] {
    display: none;
}

.artwork-image-hint {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.7;
}

.artwork-image-note {
    font-size: 0.78rem;
    color: var(--text-faint);
    margin: 0;
}

.artwork-fields-column {
    min-width: 0;
}

.artwork-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
}

.artwork-form-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

@media (max-width: 900px) {
    .artwork-form-layout { grid-template-columns: 1fr; }
    .artwork-field-row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- */
/* Admin — journal form (wide writing workspace) */
/* ---------------------------------------------------------------- */

.journal-body-editor {
    width: 100%;
    min-height: 420px;
    resize: vertical;
}

.journal-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
}

.journal-form-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

@media (max-width: 900px) {
    .journal-field-row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- */
/* Admin — social links form (wide row-per-platform workspace) */
/* ---------------------------------------------------------------- */

.social-links-form-row {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-hair-soft);
}

.social-links-form-row:last-of-type {
    border-bottom: none;
}

.social-links-form-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
    min-width: 0;
}

.social-links-form-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: var(--text-faint);
}

.social-links-form-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.social-links-form-label {
    font-size: 0.9rem;
    color: var(--text-parchment);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.social-links-form-field {
    min-width: 0;
    margin-bottom: 0;
}

.social-links-form-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

@media (max-width: 900px) {
    .social-links-form-row { grid-template-columns: 1fr; gap: 8px; }
    .social-links-form-heading { padding-top: 0; }
}

/* ---------------------------------------------------------------- */
/* Admin — account page (wide summary + two-column layout) */
/* ---------------------------------------------------------------- */

.account-summary-value {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--text-parchment);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 30px;
}

.account-column {
    min-width: 0;
}

/* Overrides .admin-card + .admin-card's 30px stacking margin (needs
   the extra .account-columns ancestor for higher specificity, since
   that rule and a same-specificity override would otherwise tie) —
   it assumes adjacent cards are stacked vertically (true almost
   everywhere else), but these two sit side by side in a grid, so the
   second card must not be pushed down. */
.account-columns .admin-card + .admin-card {
    margin-top: 0;
}

@media (max-width: 900px) {
    .account-columns { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- */
/* Admin — analytics charts */
/* ---------------------------------------------------------------- */

.admin-card svg {
    display: block;
    width: 100%;
    max-width: 100%;
}

/* Flexbox, not CSS grid — same reasoning as .analytics-overview-grid
   above: a single card (the common case while the site is new) would
   otherwise sit in a grid track sized for many, leaving a large dead
   gap beside it on a wide screen instead of using that space. */
.analytics-card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.analytics-content-card {
    display: flex;
    flex: 1 1 260px;
    gap: 14px;
    align-items: flex-start;
    background: var(--bg-card);
    border: 1px solid var(--border-hair-soft);
    padding: 16px;
    min-width: 0;
}

/* Descendant selector (not a standalone override) so this reliably
   beats .admin-table-thumb's 48px regardless of stylesheet order —
   both classes are applied together on the same element. */
.analytics-content-card .analytics-content-thumb {
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
}

.analytics-content-body {
    min-width: 0;
}

.analytics-content-title {
    margin: 0 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analytics-content-body > .text-meta {
    margin: 0 0 10px;
}

.admin-table-thumb {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: cover;
    border: 1px solid var(--border-hair-soft);
    background: var(--bg-stone);
}

.admin-table-thumb-empty {
    background: linear-gradient(160deg, var(--bg-stone-alt), var(--bg-void));
}

/* ---------------------------------------------------------------- */
/* Analytics page — typography/density polish (.analytics-page only,
   so every other admin page keeps its existing .section-heading/
   .admin-card-heading/.stat-tile sizes and spacing untouched). */
/* ---------------------------------------------------------------- */

/* Page title (h1) stays the largest element on the page; section
   titles sit clearly below it; card titles sit clearly below those —
   the three-tier scale a "flat"-feeling page was missing. Nothing
   here changes color/decoration, only size, spacing, and letter
   spacing, per the hierarchy coming from typography alone. */
.analytics-page .section-heading {
    margin-top: 26px;
    margin-bottom: 14px;
}

.analytics-page .section-heading:first-child {
    margin-top: 0;
}

/* Unifies the two ways a top-level section heading appears in this
   template — a bare <h2 class="section-heading"> ("At a Glance",
   "Top Content") and an <h3 class="analytics-section-title"> inside a
   plain .section-heading wrapper div (every other section) — into one
   consistent size. Previously these rendered at inconsistent sizes
   (an ambient ~1.5em h2 default vs. 1.05rem via .admin-card-heading),
   which was a real source of the page's flat, inconsistent hierarchy. */
.analytics-page h2.section-heading,
.analytics-page .analytics-section-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: 0.02em;
    color: var(--text-parchment);
    margin: 0;
}

/* Card-title tier: the four At-a-Glance card headings (Today/Range/
   Lifetime/Audience) and the three Referrer Details group labels —
   one step below section titles, one step above body/table text. */
.analytics-card-title {
    font-family: var(--font-display);
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    color: var(--text-parchment);
    margin: 0 0 8px;
}

.analytics-referrer-group-label {
    margin-top: 16px;
}

.analytics-filter-tabs {
    margin-top: 16px;
}

/* At-a-glance overview: four grouped cards (Today/Range/Lifetime/
   Audience) instead of one stat-tile per metric permutation. Reuses
   .admin-card/.stat-row/.stat-tile, tightened for use inside a grid
   cell rather than stacked full-width. */
/* Flexbox, not CSS grid — a grid's auto-fit column tracks stay
   reserved even when the last card wraps onto its own row alone,
   leaving a large dead gap beside it. flex-grow lets a wrapped card
   stretch to fill that row instead. */
.analytics-overview-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 8px;
}

.analytics-overview-grid .admin-card {
    max-width: none;
    flex: 1 1 300px;
    padding: 18px 20px;
}

.analytics-overview-grid .stat-row {
    margin-bottom: 0;
    gap: 8px;
    row-gap: 6px;
}

/* Each tile is a horizontal number+label pair instead of the taller
   stacked (number over label) layout used elsewhere in admin — this
   is what actually shrinks card height, not just tighter padding.
   flex-basis is wide enough that the longest label ("Est. Unique
   Visitors") fits on one line at the reduced label size below, so
   nothing gets truncated. */
.analytics-overview-grid .stat-tile {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    flex: 1 1 190px;
    padding: 8px 12px;
}

.analytics-overview-grid .stat-tile .num {
    font-size: 1.3rem;
    line-height: 1.15;
    white-space: nowrap;
}

.analytics-overview-grid .stat-tile .label {
    font-size: 0.64rem;
    letter-spacing: 0.14em;
    margin-top: 0;
    line-height: 1.3;
}

/* Traffic Sources + Page Types, and Subscriber/Notification Health +
   RSS/Atom Feeds — each pair shares one row on wide screens instead
   of each claiming a full-width row for a short chart/table. Plain
   block (stacked) below the breakpoint, so mobile/tablet are
   unaffected — see the matching rule under Responsive. */
.analytics-columns {
    display: block;
}

.analytics-columns .analytics-column + .analytics-column {
    margin-top: 26px;
}

@media (min-width: 1200px) {
    .analytics-columns {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 32px;
        align-items: start;
    }

    .analytics-columns .analytics-column + .analytics-column {
        margin-top: 0;
    }
}

/* Compact inline empty state — for a section that genuinely has
   nothing to show yet (no views, no referrers, no feed requests). The
   standard .empty-state's generous padding is meant to anchor an
   otherwise-empty full section; this is for a one-line note inside an
   already-present section so it doesn't read as a broken layout. */
.empty-state-compact {
    border: 1px dashed var(--border-hair-soft);
    padding: 14px 18px;
    color: var(--text-faint);
    font-size: 0.85rem;
}

/* Secondary/expandable methodology text — collapsed by default so the
   page header stays a short plain-English summary, not a wall of
   disclaimers. Native <details>/<summary>, no JS. */
.analytics-methodology {
    margin: 10px 0 0;
}

.analytics-methodology summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}

.analytics-methodology summary:hover {
    color: var(--text-parchment);
}

.analytics-methodology[open] summary {
    color: var(--text-parchment);
    margin-bottom: 10px;
}

.analytics-methodology p {
    margin: 0 0 10px;
}

.analytics-methodology p:last-child {
    margin-bottom: 0;
}

/* Referrer Details — host/url pair for one scope (page/artwork/
   journal) side by side rather than each stacked full-width. */
.analytics-referrer-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.analytics-referrer-group + .analytics-referrer-group {
    margin-top: 24px;
}

/* ---------------------------------------------------------------- */
/* Hero actions (multiple buttons — Read Journal appears alongside
   View Piece when the featured/hero artwork has a related, published
   journal entry) */
/* ---------------------------------------------------------------- */

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* ---------------------------------------------------------------- */
/* Screen-reader-only text (the filter badge's "Clear filter" label —
   the visible "x" plus the badge's own text already convey this
   sighted, but a screen reader needs the verb spelled out). */
/* ---------------------------------------------------------------- */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------- */
/* Gallery filter bar + badges (tag/series pills, reused on the
   artwork detail page too) */
/* ---------------------------------------------------------------- */

.gallery-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.filter-badge,
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--accent);
    color: var(--accent-bright);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background 0.2s ease, color 0.2s ease;
}

.filter-badge:hover,
.badge:hover {
    background: rgba(139, 32, 44, 0.14);
    color: var(--text-parchment);
}

.artwork-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0 0;
}

.badge-series {
    border-color: var(--border-hair-soft);
    color: var(--text-parchment);
}

/* ---------------------------------------------------------------- */
/* Gallery cards — image-first: at most one small muted subline plus a
   tiny journal-availability mark, never card-height growth. */
/* ---------------------------------------------------------------- */

.work-card-subline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.journal-indicator {
    color: var(--accent-bright);
    font-size: 0.85rem;
    line-height: 1;
}

/* ---------------------------------------------------------------- */
/* Artwork detail — technical meta row, Markdown-rendered Details */
/* ---------------------------------------------------------------- */

.artwork-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    margin: 40px 0 0;
}

.artwork-meta-row dt {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin: 0 0 4px;
}

.artwork-meta-row dd {
    margin: 0;
    color: var(--text-parchment);
    font-size: 0.92rem;
}

.artwork-details-section {
    padding-bottom: 8px;
}

/* Shared Markdown typography — artwork Details and journal body both
   wrap their rendered HTML in this class, so process notes and
   journal entries read with the same restrained gothic voice as the
   rest of the site rather than default browser styling. */
.markdown-content {
    color: var(--text-muted);
    line-height: 1.8;
}

.markdown-content > *:first-child { margin-top: 0; }
.markdown-content > *:last-child { margin-bottom: 0; }

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4 {
    font-family: var(--font-display);
    color: var(--text-parchment);
    line-height: 1.3;
    margin: 1.4em 0 0.6em;
}

.markdown-content h1 { font-size: 1.4rem; }
.markdown-content h2 { font-size: 1.25rem; }
.markdown-content h3,
.markdown-content h4 { font-size: 1.1rem; }

.markdown-content p { margin: 0 0 1.1em; }

.markdown-content ul,
.markdown-content ol {
    margin: 0 0 1.1em;
    padding-left: 1.4em;
}

.markdown-content li { margin-bottom: 0.4em; }

.markdown-content blockquote {
    margin: 0 0 1.1em;
    padding: 4px 0 4px 20px;
    border-left: 2px solid var(--accent);
    color: var(--text-parchment);
    font-style: italic;
}

.markdown-content a {
    color: var(--accent-bright);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.markdown-content a:hover { color: var(--text-parchment); }

.markdown-content strong { color: var(--text-parchment); }

.markdown-content code {
    background: var(--bg-stone);
    border: 1px solid var(--border-hair-soft);
    padding: 1px 6px;
    font-size: 0.88em;
}

/* Same treatment for the small inline <code> hints in admin form
   field descriptions (Markdown cheat-sheet under Artwork Details /
   journal body). */
.field-hint code {
    background: var(--bg-stone);
    border: 1px solid var(--border-hair-soft);
    padding: 1px 5px;
    font-size: 0.88em;
}

/* ---------------------------------------------------------------- */
/* Previous/Next nav row (artwork detail + journal detail) */
/* ---------------------------------------------------------------- */

.piece-nav-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 8px 0 40px;
}

.piece-nav-link {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    border: 1px solid var(--border-hair-soft);
    transition: border-color 0.2s ease;
}

.piece-nav-link:hover { border-color: var(--accent); }

.piece-nav-next { text-align: right; align-items: flex-end; }

.piece-nav-label {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-bright);
}

.piece-nav-title {
    font-family: var(--font-display);
    color: var(--text-parchment);
}

/* ---------------------------------------------------------------- */
/* Journal detail — two-column editorial layout with related artwork
   (Part 6). Single column by default (source order: related artwork,
   then article — correct for mobile with zero JS); upgraded to a
   two-column grid at wider viewports, where `order` puts the article
   first visually without changing that source order. */
/* ---------------------------------------------------------------- */

.journal-related-artwork {
    margin-bottom: 44px;
}

.journal-related-artwork-card {
    display: block;
    border: 1px solid var(--border-hair-soft);
    margin-bottom: 14px;
}

.journal-related-artwork-card img {
    width: 100%;
    height: auto;
    display: block;
}

.journal-related-artwork-title {
    display: block;
    font-family: var(--font-display);
    color: var(--text-parchment);
    padding: 14px 16px 2px;
}

.journal-related-artwork-year {
    display: block;
    color: var(--text-faint);
    font-size: 0.78rem;
    padding: 0 16px 14px;
}

.journal-related-hint {
    display: inline-block;
    font-size: 0.78rem;
    color: var(--accent-bright);
    margin: -4px 0 8px;
}

.journal-related-hint:hover { color: var(--text-parchment); }

@media (min-width: 901px) {
    .journal-layout-with-artwork {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 60px;
        align-items: start;
    }

    .journal-layout-with-artwork .journal-post { order: 1; }

    .journal-layout-with-artwork .journal-related-artwork {
        order: 2;
        position: sticky;
        top: 30px;
        margin-bottom: 0;
    }
}

/* ---------------------------------------------------------------- */
/* Admin — artwork form additions (section labels, field hints,
   checkbox field, sticky image preview now that the form is much
   taller, Lore & Journal Entries relations panel) */
/* ---------------------------------------------------------------- */

.section-heading-page {
    margin: 0 0 30px;
}

.section-heading-page h1 { margin: 0; }

.artwork-section-label {
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-bright);
    margin: 30px 0 18px;
    padding-top: 4px;
    border-top: 1px solid var(--border-hair-soft);
}

.field-hint {
    margin: 6px 0 0;
    font-size: 0.78rem;
    color: var(--text-faint);
    line-height: 1.5;
}

.field-checkbox label {
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.92rem;
    color: var(--text-parchment);
}

.field-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

.featured-badge {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-bright);
}

@media (min-width: 901px) {
    .artwork-image-column {
        position: sticky;
        top: 24px;
        align-self: start;
    }
}

.admin-relations-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

.admin-relations-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-hair-soft);
}

.admin-relations-list li:last-child { border-bottom: none; }

.admin-relations-detach { margin-left: auto; }

.admin-relations-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.admin-relations-attach {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-relations-attach select {
    background: var(--bg-stone);
    border: 1px solid var(--border-hair-soft);
    color: var(--text-parchment);
    padding: 10px 12px;
    font-family: var(--font-body);
    font-size: 0.88rem;
}

/* ---------------------------------------------------------------- */
/* Responsive */
/* ---------------------------------------------------------------- */

@media (max-width: 900px) {
    .hero .wrap { grid-template-columns: 1fr; }
    .work-grid { grid-template-columns: repeat(2, 1fr); }
    .artwork-detail-layout { grid-template-columns: 1fr; gap: 30px; }
    .admin-shell { grid-template-columns: 1fr; }
    .admin-sidebar {
        border-right: none;
        border-bottom: 1px solid var(--border-hair-soft);
        /* Stacked mobile layout keeps its existing behavior — the
           sidebar scrolls away with the page like any other block,
           it does not pin itself above the content. */
        position: static;
        height: auto;
        overflow-y: visible;
    }
}

@media (max-width: 640px) {
    .work-grid { grid-template-columns: 1fr; }
    .journal-row { grid-template-columns: 1fr; }
    .journal-row .thumb { display: none; }
    .site-nav ul { gap: 18px; flex-wrap: wrap; }
    .newsletter .wrap { flex-direction: column; align-items: flex-start; }
    .newsletter-signup { width: 100%; }
    .newsletter-form { flex-direction: column; align-items: stretch; width: 100%; }
    .newsletter-form input[type="email"] { width: 100%; min-width: 0; }
    .newsletter-form .btn-ghost { width: 100%; }
    .admin-main { padding: 32px 20px; }
    .analytics-referrer-group { grid-template-columns: 1fr; }
    .piece-nav-row { grid-template-columns: 1fr; }
    .piece-nav-next { text-align: left; align-items: flex-start; }
    .artwork-meta-row { gap: 20px; }
    /* Same reasoning as .newsletter-form .btn-ghost above — two ghost
       buttons side by side (View Piece + Read Journal) don't reliably
       fit a narrow phone width; full-width stacking is the same
       pattern this file already uses for that exact situation. */
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .btn-ghost { text-align: center; }
}

/* Header icon row hardening at phone widths (~390-430px): the
   min-width: 0 fix above lets .header-social-links wrap when it needs
   to, but nine full-size (24px + 14px gap) icons plus the wordmark
   still leave very little margin at this width. Tightening the row
   itself removes the need to rely on wrapping at all in the common
   case — smaller icons, smaller gap, same visual language (still
   round, still the same colors/border), just more of them fit per
   row. No change at 640px+ (.header-social-links a/svg above still
   apply there), nothing here touches desktop layout. */
@media (max-width: 480px) {
    .header-social-links { gap: 8px; }
    .header-social-links a { width: 20px; height: 20px; }
    .header-social-links svg { width: 9px; height: 9px; }
}