/* ============================================================
   Brick Throw — dark theme, brick-red palette (#855555)
   Single theme. Palette lives in the variables below; change a
   hue here and it propagates everywhere.
   ============================================================ */
:root {
    --brick: #843636;        /* primary brick hue */
    --brick-dark: #522020;   /* deeper — header edge, footer, hovers */
    --brick-light: #855555;  /* lighter — links, accents */

    --bg: #161111;           /* page background */
    --surface: #221a1a;      /* content panel above the bricks */
    --card: #2a2020;         /* cards, inputs, editor, modals */
    --border: #3a2e2e;
    --text: #ece1dd;         /* primary text */
    --muted: #a89893;        /* secondary text */
    --shadow: rgba(0, 0, 0, 0.45);

    /* Fonts (the brick logo keeps Road Rage; these are used everywhere else) */
    --font-body: "Special Gothic", system-ui, sans-serif;
    --font-display: "Special Gothic Condensed One", sans-serif; /* big titles */
    --font-heading: "Special Gothic Expanded One", sans-serif;  /* subheads, nav */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--text);
    background-color: var(--bg);
    background-image: url('brick-pattern.svg');
    background-size: 64px 40px;
    background-attachment: fixed;
    /* Full-height layout: keep the page at least one screen tall and pin the
       footer to the bottom even when there is little content. The floating
       logo/menu, backdrop, and drawer are position:fixed, so they stay out of
       this flex flow. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container {
    max-width: 80%;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===== Header (site header only; scoped so content <header>s don't inherit it) ===== */
body > header {
    background: var(--brick);
    border-bottom: 3px solid var(--brick-dark);
    padding: 0.6rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 14px var(--shadow);
    transition: transform 0.3s ease;
}
/* Slide the header up out of view once the page is scrolled. */
body.scrolled > header {
    transform: translateY(-110%);
}

/* 3-zone header: brick logo left, "Brick Throw" centered, nav right.
   The equal 1fr side columns keep the centered wordmark page-centered. */
.header-content {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
}
.logo-mark { justify-self: start; line-height: 0; }
.nav-area {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Wordmark: "Brick Throw" stacked above the tagline, centered. */
.logo {
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Road Rage';
    font-size: 4rem;
    line-height: 0.85;
    color: var(--text);
    text-decoration: none;
    text-align: center;
    text-shadow: 2px 2px 0 var(--brick-dark);
}
.logo-image {
    height: 92px;
    width: auto;
    object-fit: contain;
    border-radius: 0;
}
.logo-text { white-space: nowrap; }
.logo-tagline {
    font-size: 0.5em;
    margin-top: 0.1em;
}

/* Inline nav buttons (hidden on mobile, where the hamburger takes over) */
.nav-inline {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    align-items: center;
}
nav a {
    color: var(--text);
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.85;
}
nav a:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Hamburger button */
.hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    width: 60px;
    height: 60px;
    padding: 13px;
    background: transparent;
    border: 2px solid var(--brick-light);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.hamburger span {
    display: block;
    height: 3px;
    background: var(--text);
}
/* Header hamburger: no border (the floating one keeps its border). */
.nav-area .hamburger { border: none; }
/* Hover/press feedback, matching the brick fill used on other buttons. */
.hamburger:hover { background: var(--brick-dark); }
.hamburger:active { background: var(--brick-dark); transform: scale(0.92); }

/* Off-canvas drawer (slides in from the right) + backdrop */
.nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 390;
}
body.menu-open .nav-backdrop {
    opacity: 1;
    visibility: visible;
}
.nav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(78vw, 300px);
    background: var(--card);
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 24px var(--shadow);
    padding: 4rem 0 1rem;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0.3s ease;
    z-index: 400;
}
body.menu-open .nav-drawer {
    transform: translateX(0);
    visibility: visible;
}
.nav-drawer ul { list-style: none; }
.nav-drawer a {
    display: block;
    padding: 0.85rem 1.5rem;
    opacity: 1;
}
.nav-drawer a:hover {
    background: var(--brick);
    text-decoration: none;
}
.drawer-close {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

/* Drawer user section (top of the menu) */
.drawer-user {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0 1.5rem 1.1rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.drawer-account {
    display: flex;
    align-items: center;
    justify-content: space-between;  /* name left, avatar right */
    gap: 0.75rem;
    width: 100%;
}
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--brick);
    color: var(--text);
    font-family: var(--font-display);
    font-size: 1.4rem;
    line-height: 1;
    overflow: hidden;       /* clip a photo to the circle */
}
img.avatar { object-fit: cover; }   /* photo avatars fill the circle */
.avatar-xs { width: 22px; height: 22px; font-size: 0.8rem; }
.avatar-lg { width: 120px; height: 120px; font-size: 3rem; flex: 0 0 auto; }
.drawer-username {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 1.05rem;
    word-break: break-word;
}
/* Log in pinned to the TOP of the drawer (prominent for guests). */
.drawer-login {
    padding: 0 1.5rem 1rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.drawer-login .nav-link {
    display: block;
    text-align: center;
}

/* Pinned to the bottom of the drawer (Log out, when signed in). */
.drawer-footer {
    margin-top: auto;
    padding: 1rem 1.5rem 0;
}

/* Floating brick logo — fades in as the header scrolls away. */
.floating-logo {
    position: fixed;
    top: 12px;
    left: 16px;
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.floating-logo img {
    height: 54px;
    width: auto;
    border-radius: 0;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}
body.scrolled .floating-logo {
    opacity: 1;
    pointer-events: auto;
}

/* Floating menu button — mirrors the floating logo on the right when scrolled. */
.floating-menu {
    position: fixed;
    top: 12px;
    right: 16px;
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    background: var(--brick);
    box-shadow: 0 2px 8px var(--shadow);
    transition: opacity 0.3s ease;
}
body.scrolled .floating-menu {
    opacity: 1;
    pointer-events: auto;
}

/* ===== Content surface — lifts articles off the brick background ===== */
main {
    padding: 2rem 0;
    flex: 1 0 auto;   /* grow to fill the viewport, pushing the footer down */
}
main .container > .surface {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 2rem;
    box-shadow: 0 6px 30px var(--shadow);
}

/* ===== Featured hero / carousel ===== */
.featured {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    margin-bottom: 1.5rem;
    /* Placeholder behind the (eagerly loaded) hero image. */
    background: linear-gradient(135deg, var(--card) 0%, var(--brick-dark) 100%);
}
.featured-track {
    display: flex;
    transition: transform 0.4s ease;
}
.featured-slide {
    position: relative;
    flex: 0 0 100%;
    display: block;
    text-decoration: none;
    line-height: 0;
}
.featured-img {
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    display: block;
}
.featured-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 3rem 1.6rem 1.3rem;
    line-height: 1.2;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0));
}
.featured-badge {
    display: inline-block;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    background: var(--brick);
    color: var(--text);
    padding: 0.2rem 0.6rem;
    margin-bottom: 0.6rem;
}
.featured-title {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.35rem;
    line-height: 1.05;
}
.featured-blurb {
    color: #ececec;
    font-size: 1rem;
    max-width: 62ch;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.featured-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 60px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    border: none;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    transition: background 0.15s ease;
}
.featured-arrow:hover { background: var(--brick); }
.featured-prev { left: 0; }
.featured-next { right: 0; }
.featured-dots {
    position: absolute;
    bottom: 0.7rem;
    right: 1rem;
    display: flex;
    gap: 0.4rem;
    z-index: 2;
}
.featured-dot {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.45);
    border: none;
    padding: 0;
    cursor: pointer;
}
.featured-dot.active { background: #fff; }

/* ===== Homepage cards — image-forward ===== */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
    gap: 1.5rem;
}
.post-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 10px var(--shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* The whole card is a link to the article. */
    text-decoration: none;
    color: inherit;
}
.post-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px var(--shadow);
}
.card-image {
    position: relative;
    display: block;
    line-height: 0;
    /* Placeholder shown while the lazy image loads. No layout shift: the img
       reserves its space via aspect-ratio below. */
    background: linear-gradient(135deg, var(--card) 0%, var(--brick-dark) 100%);
}
.card-image img {
    width: 100%;
    aspect-ratio: 4 / 3;     /* image stays the dominant element */
    object-fit: cover;
    display: block;
    transition: opacity 0.4s ease;
}
/* Fade-in: JS adds .fade before load then .loaded after; without JS the image
   stays visible (no .fade class is ever added). */
.card-image img.fade { opacity: 0; }
.card-image img.fade.loaded { opacity: 1; }
/* "Featured" badge on a card image (top-left corner). */
.card-badge {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    z-index: 1;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.64rem;
    background: var(--brick);
    color: var(--text);
    padding: 0.18rem 0.5rem;
    box-shadow: 0 2px 8px var(--shadow);
}

/* Title overlaid on the bottom of the image; clamped to 2 lines. */
.card-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0.8rem 0.9rem 0.6rem;
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.15;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.43), rgba(0, 0, 0, 0.22) 55%, rgba(0, 0, 0, 0));
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.post-card-body {
    padding: 0.6rem 0.8rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
/* Blurb: small, clamped to 2 lines. */
.card-blurb {
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Card byline: small author chip between the blurb and the tags. */
.card-byline {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.55rem 0 0.1rem;
    font-size: 0.8rem;
    color: var(--muted);
}
.card-byline span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Card tags: small and tight, near the bottom. */
.post-card-body .tag-list {
    gap: 0.3rem;
    margin: 0;
}
.post-card-body .tag-chip {
    font-size: 0.66rem;
    padding: 0.08rem 0.4rem;
}

.post-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--text);
    line-height: 1.3;
}
.post-card-body .post-title {
    font-size: 1.2rem;
}
.post-title a {
    color: inherit;
    text-decoration: none;
}
.post-title a:hover {
    color: var(--brick-light);
}

.post-meta {
    color: var(--muted);
    font-size: 0.85rem;
}
.post-excerpt {
    color: var(--muted);
    font-size: 0.95rem;
}

/* ===== Post page ===== */
.post-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}
.post-header .post-title {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    font-weight: normal;
    line-height: 1.2;
}
.post-header .post-meta {
    font-size: 0.9rem;
}

.post-hero {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 0;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 10px var(--shadow);
}

.post-content {
    background: var(--card);
    padding: 2rem;
    border-radius: 0;
    box-shadow: 0 2px 10px var(--shadow);
    margin-bottom: 1.5rem;
}
.post-content h2 {
    font-family: var(--font-heading);
    margin: 1.5rem 0 0.75rem;
    font-size: 1.45rem;
    font-weight: 600;
}
.post-content h3 {
    font-family: var(--font-heading);
    margin: 1.25rem 0 0.5rem;
    font-size: 1.2rem;
    font-weight: 600;
}
.post-content p {
    margin-bottom: 1.25rem;
    line-height: 1.7;
}
.post-content a {
    color: var(--brick-light);
}
.post-content ul,
.post-content ol {
    margin: 0 0 1.25rem 1.5rem;
}
.post-content blockquote {
    border-left: 4px solid var(--brick);
    padding-left: 1.25rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--muted);
}
.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0;
    margin: 1rem 0;
}
.post-content code {
    background: var(--bg);
    color: var(--brick-light);
    padding: 0.2rem 0.4rem;
    border-radius: 0;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
}
.post-content pre {
    background: var(--bg);
    padding: 1rem;
    border-radius: 0;
    overflow-x: auto;
    margin-bottom: 1.25rem;
}

/* ===== Tags ===== */
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.4rem 0;
}
.tag-chip {
    padding: 0.15rem 0.6rem;
    font-size: 0.78rem;
    border-radius: 0;
    background: var(--bg);
    color: var(--muted);
    border: 1px solid var(--border);
    text-decoration: none;
}
a.tag-chip:hover {
    background: var(--brick);
    color: var(--text);
}

/* ===== Buttons & inline links ===== */
.nav-link {
    display: inline-block;
    color: var(--brick-light);
    border: 1px solid var(--brick-light);
    border-radius: 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
}
.nav-link:hover {
    background: var(--brick);
    border-color: var(--brick);
    color: var(--text);
}
.nav-link.disabled {
    opacity: 0.4;
    pointer-events: none;
}
button.nav-link {
    background: var(--brick);
    border-color: var(--brick);
    color: var(--text);
}

.link-button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--brick-light);
    cursor: pointer;
    text-decoration: underline;
}
.link-button:hover {
    color: var(--text);
}
.link-button.danger {
    color: #e0715f;
    margin-top: 1rem;
}

/* ===== Pagination ===== */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
}
.pagination .nav-link {
    font-family: var(--font-heading);
}
.pagination .page-indicator {
    color: var(--muted);
    font-size: 0.85rem;
}

/* ===== Flash messages ===== */
.flash {
    padding: 0.75rem 1rem;
    border-radius: 0;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    border: 1px solid;
}
.flash-success { background: rgba(70, 160, 90, 0.15); color: #8fe0a8; border-color: rgba(70, 160, 90, 0.4); }
.flash-error   { background: rgba(210, 80, 60, 0.15); color: #f0a08f; border-color: rgba(210, 80, 60, 0.4); }
.flash-info    { background: rgba(150, 140, 200, 0.15); color: #c0b6e8; border-color: rgba(150, 140, 200, 0.4); }
.flash-warning { background: rgba(200, 160, 74, 0.15); color: #e6c375; border-color: rgba(200, 160, 74, 0.45); }

/* ===== Forms (admin + login) ===== */
.post-content input[type="text"],
.post-content input[type="password"],
.post-content input[type="datetime-local"],
.post-content textarea {
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
}
/* Render the native date/time picker widget in dark mode. */
.post-content input[type="datetime-local"] { color-scheme: dark; }
.featured-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Existing-tag picker (editor) */
.tag-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}
.tag-pick {
    font: inherit;
    font-size: 0.78rem;
    padding: 0.15rem 0.6rem;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--muted);
    cursor: pointer;
}
.tag-pick:hover {
    border-color: var(--brick-light);
    color: var(--text);
}
.tag-pick.active {
    background: var(--brick);
    border-color: var(--brick);
    color: var(--text);
}
#featured-preview {
    max-width: 220px;
    max-height: 140px;
    object-fit: cover;
    border-radius: 0;
    margin-top: 0.5rem;
    border: 1px solid var(--border);
}

/* ===== Media library ===== */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}
.media-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 0.5rem;
    box-shadow: 0 2px 10px var(--shadow);
}
.media-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 0;
    display: block;
}
.media-item .media-name {
    font-size: 0.8rem;
    color: var(--muted);
    margin: 0.4rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.media-item .url-row {
    display: flex;
    gap: 0.3rem;
    align-items: center;
}
.media-item .url-row input {
    flex: 1;
    min-width: 0;
    font-size: 0.72rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--bg);
    color: var(--text);
}

/* ===== Image picker modal ===== */
.picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.picker-modal {
    background: var(--card);
    color: var(--text);
    border-radius: 0;
    padding: 1.25rem;
    width: min(720px, 92vw);
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
.picker-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.picker-head strong { margin-right: auto; }
.picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.6rem;
}
.picker-thumb {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 0;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s ease;
}
.picker-thumb:hover { border-color: var(--brick-light); }

/* ===== Quill editor (admin) ===== */
#editor {
    background: var(--card);
    min-height: 320px;
}
.ql-editor {
    min-height: 320px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text);
}
.ql-toolbar.ql-snow { background: var(--card); }
.ql-toolbar.ql-snow,
.ql-container.ql-snow { border-color: var(--border); }
.ql-snow .ql-stroke { stroke: var(--text); }
.ql-snow .ql-fill { fill: var(--text); }
.ql-snow .ql-picker { color: var(--text); }
.ql-snow .ql-picker-options { background: var(--card); }
/* Horizontal rule, in the editor and the rendered post. */
.ql-editor hr,
.post-content hr {
    border: none;
    border-top: 2px solid var(--border);
    margin: 1.8rem 0;
}
/* Text-align fallbacks for class-based alignment (align is saved as an inline
   style, so these only matter if a class ever slips through). */
.post-content .ql-align-center { text-align: center; }
.post-content .ql-align-right { text-align: right; }
.post-content .ql-align-justify { text-align: justify; }
/* Pin the formatting toolbar to the top of the viewport while any part of the
   editor is on screen, so the controls stay reachable no matter how far down the
   body you scroll. The sticky context is .editor-shell (toolbar + editor only),
   so the bar releases once you scroll past the body into the fields below. The
   site header has already slid away by the time you reach this far down. */
.editor-shell { position: relative; }
.editor-shell .ql-toolbar.ql-snow {
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: 0 3px 10px var(--shadow);
}

/* ===== Admin dashboard ===== */
.admin-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 0.6rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.admin-bar h1,
.admin-bar h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
}
.admin-bar-actions {
    display: flex;
    gap: 0.6rem;
}

.admin-rows {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.admin-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    padding: 0.6rem;
}
.admin-row.trashed { opacity: 0.7; }
.admin-thumb {
    flex: 0 0 auto;
    width: 88px;
    height: 62px;
    display: block;
    line-height: 0;
}
.admin-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.admin-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.admin-titleline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.admin-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--text);
    text-decoration: none;
}
a.admin-title:hover { color: var(--brick-light); }
.admin-badge {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.6rem;
    background: var(--brick);
    color: var(--text);
    padding: 0.12rem 0.4rem;
}
.admin-badge.muted {
    background: var(--border);
    color: var(--muted);
}
.admin-badge.needs-slug {
    background: #c6a04a;
    color: #1a1410;
}
.admin-sub {
    color: var(--muted);
    font-size: 0.8rem;
}
.admin-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8rem;
    margin-top: 0.35rem;
}
/* View / Edit read as real buttons: bordered, padded, clear tap targets. */
.admin-actions a {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.95rem;
    border: 1px solid var(--brick-light);
    color: var(--brick-light);
    font-family: var(--font-heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.72rem;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.admin-actions a:hover {
    background: var(--brick);
    border-color: var(--brick);
    color: var(--text);
}
/* Delete stays a quiet text link so it never competes with View/Edit. */
.admin-actions form { display: inline; margin-left: 0.15rem; }

.admin-stats {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 0.3rem 1.3rem;
}
.admin-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.admin-stat-num {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--text);
    line-height: 1.1;
}
.admin-stat-label {
    font-size: 0.62rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ===== Article / post page ===== */
/* Draft preview: a quick jump back to Manage Posts, shown only on unpublished
   posts (to an admin, or in auth-off local dev). Matched to the article's 860px
   column so the button lines up with the article's left edge. */
.draft-bar {
    max-width: 860px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.article {
    max-width: 860px;
    margin: 0 auto;
}

.article-hero {
    position: relative;
    border: 1px solid var(--border);
    background: linear-gradient(var(--bg), var(--card));
    padding: 2.5rem 2rem 2rem;
    margin-bottom: 1.5rem;
}
.article-hero.has-image {
    border: none;
    min-height: 380px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    padding: 2.5rem 2rem 2rem;
}
.article-hero-inner {
    position: relative;
    z-index: 1;
}
.article-eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.72rem;
    color: var(--brick-light);
    text-decoration: none;
    margin-bottom: 0.6rem;
}
.has-image .article-eyebrow { color: #e9b84e; }
.article-eyebrow:hover { text-decoration: underline; }
.article-title {
    font-family: var(--font-display);
    font-size: 2.7rem;
    line-height: 1.04;
    color: var(--text);
    margin: 0 0 0.6rem;
}
.has-image .article-title {
    color: #fff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}
.article-standfirst {
    font-size: 1.12rem;
    line-height: 1.5;
    color: var(--muted);
    max-width: 62ch;
    margin: 0 0 1.1rem;
}
.has-image .article-standfirst { color: #e9e9e9; }
.article-byline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--muted);
}
.has-image .article-byline { color: #d2d6dd; }
.byline-name { color: var(--text); font-weight: 600; }
.has-image .byline-name { color: #fff; }
.byline-dot { opacity: 0.45; }
.avatar-sm {
    width: 30px;
    height: 30px;
    font-size: 0.95rem;
}

/* Score box */
.score-box {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 2;
    background: var(--brick);
    color: #fff;
    border: 2px solid var(--brick-dark);
    padding: 0.6rem 1.1rem 0.7rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
}
.score-num {
    font-family: var(--font-display);
    font-size: 2.9rem;
    font-weight: 700;
}
.score-out {
    font-size: 0.78rem;
    opacity: 0.85;
    margin-top: 0.15rem;
}
.score-verdict {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.68rem;
    margin-top: 0.4rem;
}

/* Long-form body */
.article-body.post-content {
    padding: 2.25rem 2.6rem;
    font-size: 1.04rem;
}
.article-body.post-content p {
    font-size: 1.04rem;
    line-height: 1.75;
}
.article-body > p:first-of-type::first-letter {
    float: left;
    font-family: var(--font-display);
    font-size: 3.6rem;
    line-height: 0.78;
    margin: 0.1rem 0.55rem 0 0;
    color: var(--brick-light);
}
.article-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

/* Wide screens: hero and body stay stacked full-width, just a roomier poster. */
@media (min-width: 1000px) {
    .article-hero.has-image { min-height: 460px; }
}

/* ===== About: writer bios (side-by-side cards) ===== */
.writers {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin: 1rem 0 1.5rem;
}
.writer-card {
    background: var(--card);
    border: 1px solid var(--border);
    padding: 1.3rem 1.4rem;
    box-shadow: 0 2px 10px var(--shadow);
}
.writer-card h3 { margin-top: 0; }
.writer-card p:last-child { margin-bottom: 0; }
.writer-head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
}
.writer-head h3 { margin: 0; font-family: var(--font-display); }
.writer-head h3 a { color: var(--text); text-decoration: none; }
.writer-head h3 a:hover { color: var(--brick-light); }
.writer-bio { white-space: pre-line; }
.writer-card .social-links { margin-top: 0.9rem; }

/* ===== About page: full-width hero above the content (no 2-column split) ===== */
.about {
    max-width: 860px;
    margin: 0 auto;
}
.about-hero {
    border: 1px solid var(--border);
    background: linear-gradient(var(--bg), var(--card));
    padding: 2rem 2rem 1.75rem;
    margin-bottom: 1.5rem;
}
.about-title {
    font-family: var(--font-display);
    font-size: 2.4rem;
    line-height: 1.05;
    color: var(--text);
    margin: 0 0 0.5rem;
}
.about-standfirst {
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--muted);
    margin: 0;
    max-width: 60ch;
}
/* Prose sits on the surface (not a nested card) so the writer cards stand out. */
.about .post-content {
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin-bottom: 0;
}

/* ===== Post editor: autosave status + version history ===== */
.editor-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.autosave-status { font-size: 0.85rem; color: var(--muted); }
.autosave-status.saving { color: var(--brick-light); }
.autosave-status.saved { color: #8fe0a8; }
.autosave-status.error { color: #f0a08f; }
.editor-bar-actions { display: flex; gap: 0.9rem; }
.history-list { display: flex; flex-direction: column; gap: 0.6rem; }
.version-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0.7rem;
    background: var(--bg);
    border: 1px solid var(--border);
}
.version-meta { min-width: 0; }
.version-preview {
    margin-top: 0.15rem;
    color: var(--muted);
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 44ch;
}

/* ===== Footer ===== */
footer {
    background: var(--brick-dark);
    color: var(--text);
    text-align: center;
    padding: 1rem 0;
    margin-top: 3rem;
    font-size: 0.9rem;
    flex-shrink: 0;   /* full-width band that never collapses, always at the bottom */
}
footer a { color: var(--text); }

/* Bucci floats in the bottom-right and fades in only when you reach the end of
   the page, echoing the floating-logo behavior. */
.footer-dog {
    position: fixed;
    right: 16px;
    bottom: 4rem;          /* hovers just above the footer band */
    width: 80px;
    height: auto;
    z-index: 150;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
body.at-bottom .footer-dog { opacity: 1; }
@media (max-width: 768px) {
    .footer-dog { width: 27px; bottom: 3.5rem; }
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    /* Single inline row on mobile: logo · wordmark · hamburger.
       Flexible center column (minmax 0) keeps the wordmark from overflowing. */
    .header-content {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 0.5rem;
    }
    .nav-inline { display: none; }   /* buttons move into the drawer on mobile */
    .logo { font-size: 2.66rem; }   /* name + tagline 40% larger on mobile (tagline is 0.5em of this) */
    .logo-image { height: 50px; }

    /* Featured hero: taller crop + smaller text on phones */
    .featured-img { aspect-ratio: 4 / 3; }
    .featured-title { font-size: 1.5rem; }
    .featured-overlay { padding: 2rem 1rem 1rem; }
    .featured-blurb { font-size: 0.9rem; }

    /* Article page on phones */
    .article-title { font-size: 1.85rem; }
    .article-hero.has-image { min-height: 300px; }
    .article-body.post-content { padding: 1.3rem; font-size: 1rem; }
    .score-box { top: 0.8rem; right: 0.8rem; padding: 0.45rem 0.8rem 0.55rem; }
    .score-num { font-size: 2rem; }
    .article-body > p:first-of-type::first-letter { font-size: 2.8rem; }

    /* Admin rows wrap: thumb + details on top, stats below */
    .admin-row { flex-wrap: wrap; }
    .admin-stats {
        flex-basis: 100%;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.3rem 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border);
    }
    .admin-stat { align-items: flex-start; }
    nav ul { gap: 1rem; }
    .post-header .post-title { font-size: 1.6rem; }
    .post-content { padding: 1.5rem; }
    main { padding: 1.5rem 0; }
    /* Use the full screen width on phones: header was too cramped at 80%
       and the body grid was overflowing. */
    .container { max-width: 100%; padding: 0 14px; }
    main .container > .surface { padding: 1.1rem; }

    /* Writer bios stack on phones. */
    .writers { grid-template-columns: 1fr; }
}

/* ===== Account / profile page ===== */
.account-form { max-width: 640px; }
.avatar-preview {
    margin-top: 0.6rem;
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--card);
}
.social-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
}
/* Each field is its own bubble, so the label + input read as one unit. */
.social-field {
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 0.55rem 0.7rem;
}
.social-field:focus-within { border-color: var(--brick-light); }
.social-field label { display: block; }
.social-field input { width: 100%; }
.social-field-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.35rem;
    font-size: 0.85rem;
}
.social-field-label .social-icon { width: 18px; height: 18px; }
@media (max-width: 768px) {
    .social-fields { grid-template-columns: 1fr; }
}

/* ===== Author page ===== */
.author-page { max-width: 860px; margin: 0 auto; }
.author-hero {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}
.author-hero-main { min-width: 0; }
.author-name {
    font-family: var(--font-display);
    font-size: 2.2rem;
    line-height: 1.1;
    margin: 0 0 0.5rem;
}
.author-bio {
    color: var(--muted);
    line-height: 1.6;
    white-space: pre-line;
    margin-bottom: 0.9rem;
}
.author-posts-heading {
    font-family: var(--font-display);
    font-size: 1.4rem;
    margin: 0 0 1rem;
}

/* Social links: brand-colour icon buttons. Each icon is an SVG file bounded to
   a consistent size via object-fit, so different source sizes look even. */
.social-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.social-icon { display: block; width: 22px; height: 22px; object-fit: contain; }
.social-link:hover {
    border-color: var(--brick-light);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .author-hero { flex-direction: column; align-items: center; text-align: center; }
    .author-hero-main { text-align: center; }
    .social-links { justify-content: center; }
    .avatar-lg { width: 96px; height: 96px; font-size: 2.4rem; }
}