/* Blog page styles (extracted from pages/blogs.html). */

.inkwell-wrapper {
    --ink: var(--text-primary);
    --paper: var(--surface-page);
    --muted: var(--text-muted);
    --border: var(--border-default);
    --accent: var(--highlight);
    --accent-light: var(--highlight-glow);
    --red: var(--danger-500);
    --green: #4caa6e;
    --serif: 'Playfair Display', Georgia, serif;
    --sans: 'DM Sans', sans-serif;

    font-family: var(--sans);
    background: var(--paper);
    color: var(--ink);
    font-size: 15px;
    line-height: 1.7;
    min-height: 100vh;
    border-radius: 12px;
    /* Note: not "hidden" — an overflow ancestor would break the detail page's
       position: sticky "On this page" TOC. The rounded background still clips. */
    overflow: visible;
}

.inkwell-wrapper *, .inkwell-wrapper *::before, .inkwell-wrapper *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── TAGS (Moved from nav to hero) ── */
.inkwell-tags { display: flex; gap: 6px; padding-top: 20px; }
.inkwell-tag {
    padding: 4px 14px; border-radius: 20px;
    font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
    border: 1px solid var(--border);
    background: transparent; color: var(--muted);
    cursor: pointer; transition: all 0.18s;
}
.inkwell-tag:hover, .inkwell-tag.active {
    background: var(--ink); color: var(--paper); border-color: var(--ink);
}

/* ── HERO ── */
.inkwell-hero {
    padding: 60px 2rem 40px;
    max-width: 680px;
}
.hero-eyebrow {
    font-size: 11px; font-weight: 500; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--accent);
    margin-bottom: 14px;
}
.hero-title {
    font-family: var(--serif);
    font-size: clamp(36px, 5vw, 52px);
    line-height: 1.15;
    color: var(--ink);
    margin-bottom: 16px;
}
.hero-title em { color: var(--accent); font-style: italic; }
.hero-sub {
    color: var(--muted); font-size: 15px; font-weight: 300;
}

/* ── GRID ── */
.posts-grid {
    display: flex;
    flex-direction: column;
    margin: 0;
}

/* Featured card — full width */
.card-featured {
    grid-column: span 12;
    background: var(--paper);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    display: grid;
    grid-template-columns: 1fr;
    min-height: auto;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
    color: inherit;
}
.card-featured:hover { background: var(--surface-overlay); color: inherit; }
.card-featured .card-img {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.card-featured .card-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s ease;
}
.card-featured:hover .card-img img { transform: scale(1.03); }
.card-featured .card-content {
    padding: 32px 24px;
    display: flex; flex-direction: column; justify-content: space-between;
}

/* Regular cards */
.card-regular {
    grid-column: span 12;
    background: var(--paper);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    display: flex; flex-direction: column;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
    color: inherit;
}
.card-regular:hover { background: var(--surface-overlay); color: inherit; }
.card-regular .card-img {
    aspect-ratio: 16 / 9; overflow: hidden;
}
.card-regular .card-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s ease;
}
.card-regular:hover .card-img img { transform: scale(1.04); }
.card-regular .card-content {
    padding: 24px;
    flex: 1; display: flex; flex-direction: column; justify-content: space-between;
}

/* Card internals */
.card-tag {
    display: inline-block;
    font-size: 10px; font-weight: 500; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--accent);
    margin-bottom: 12px;
}
.card-title {
    font-family: var(--serif);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 10px;
}
.card-featured .card-title { font-size: 28px; line-height: 1.2; }
.card-regular .card-title { font-size: 18px; line-height: 1.3; }
.card-excerpt {
    color: var(--muted); font-weight: 300;
    margin-bottom: 24px;
}
.card-featured .card-excerpt { font-size: 15px; }
.card-regular .card-excerpt { font-size: 13px; }
.card-meta {
    display: flex; align-items: center; gap: 10px;
    font-size: 12px; color: var(--muted);
}
.card-meta .avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--ink); color: var(--paper);
    font-size: 10px; font-weight: 500;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.card-meta .dot { color: var(--border); }

/* ── ACTION BAR (on cards) ── */
.card-actions {
    display: flex; gap: 6px; padding: 14px 24px;
    border-top: 1px solid var(--border);
}
.card-featured .card-actions {
    padding: 14px 24px;
    border-top: 1px solid var(--border);
}
.action-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 12px; border-radius: 10px;
    font-size: 12px; font-weight: 500; color: var(--muted);
    background: transparent; border: none;
    cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--sans);
}
.action-btn:hover { background-color: var(--surface-overlay); }
.action-btn.liked { color: var(--red); }
.action-btn.shared { color: var(--green); }
.action-btn svg { flex-shrink: 0; }

/* Detail-page byline action bar (like / share / watch): tighter than the
   card action bar so the three icons sit close together. */
.detail-action-bar { gap: 2px; }
.detail-action-bar .action-btn { padding: 6px 7px; }
.read-btn {
    margin-left: auto;
    font-size: 12px; font-weight: 500; color: var(--ink);
    background: transparent; border: none; cursor: pointer;
    display: flex; align-items: center; gap: 4px;
    font-family: var(--sans);
    transition: gap 0.2s;
}
.read-btn:hover { gap: 8px; }
.blog-row:hover { background: var(--surface-overlay) !important; }

/* ── SHARE DROPDOWN ── */
.share-wrap { position: relative; }
.share-menu {
    display: none; position: absolute; bottom: calc(100% + 8px); left: 0;
    background: var(--paper); border: 1px solid var(--border);
    border-radius: 10px; padding: 6px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.10);
    z-index: 50; min-width: 160px;
}
.share-menu.open { display: block; }
.share-item {
    display: block; width: 100%; text-align: left;
    padding: 7px 12px; border-radius: 6px; border: none;
    background: transparent; font-size: 13px; color: var(--ink);
    cursor: pointer; font-family: var(--sans);
    transition: background 0.12s;
}
.share-item:hover { background: var(--surface-overlay); }

/* ── DETAIL VIEW ── */
#detail-view { display: none; }
/* Breathing room between the breadcrumb and the article title on the detail
   page (the list keeps its tight breadcrumb gap). */
#detail-view { padding-top: 1rem; }

/* Detail layout: content column + sticky "On this page" TOC sidebar.
   Left-aligned (not centred) because the blog card is shifted right by 4rem;
   centring would push the TOC off the right edge on ~1000–1150px windows. */
.blog-detail-wrap {
    display: flex;
    gap: 70px;
    max-width: 1040px;
    margin: 0 auto;
    padding: 8px 24px 40px;
    align-items: flex-start;
}
.blog-detail-main {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 760px;
}

.blog-toc {
    flex: 0 0 190px;
    position: sticky;
    top: 90px;
    align-self: flex-start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    font-family: var(--sans);
    scrollbar-width: thin;
}
.blog-toc-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 14px;
}
.blog-toc-title i { font-size: 12px; color: var(--muted); }
.blog-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.blog-toc-list a {
    display: block;
    padding: 6px 0 6px 16px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--muted);
    text-decoration: none;
    border-left: 2px solid var(--border);
    transition: color 0.15s ease, border-color 0.15s ease;
}
.blog-toc-list a:hover { color: var(--ink); }
.blog-toc-list a.active {
    color: var(--ink);
    font-weight: 600;
    border-left-color: var(--accent);
}
.blog-toc-list .toc-h3 a {
    padding-left: 30px;
    font-size: 12.5px;
}
.blog-toc-list .toc-h4 a {
    padding-left: 44px;
    font-size: 12.5px;
}

/* Offset anchor jumps so headings clear the topbar. */
#blog-article h1,
#blog-article h2,
#blog-article h3,
#blog-article h4 {
    scroll-margin-top: 90px;
}

/* Hide the TOC only where there truly isn't room; content column takes over. */
@media (max-width: 980px) {
    .blog-toc { display: none; }
    .blog-detail-wrap { max-width: 680px; margin: 0 auto; }
}
.detail-hero {
    width: 100%; height: 480px; overflow: hidden; position: relative;
}
.detail-hero img { width: 100%; height: 100%; object-fit: cover; }
.detail-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(17,17,16,0.7) 0%, transparent 60%);
}
.detail-hero-text {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 40px;
}
.detail-hero-text .card-tag { color: var(--accent); }
.detail-hero-text h1 {
    font-family: var(--serif);
    font-size: clamp(28px, 4vw, 42px);
    color: #fff; line-height: 1.15;
    margin-bottom: 14px;
}
.detail-hero-text .card-meta { color: rgba(255,255,255,0.7); }
.detail-hero-text .card-meta .avatar { background: rgba(255,255,255,0.15); }
.detail-body {
    max-width: 680px; margin: 0 auto;
    padding: 48px 24px 0;
}
.markdown-body {
    background-color: transparent;
    color: var(--text-primary);
    font-family: var(--sans);
    font-size: 16px;
}
.detail-actions-bar {
    max-width: 680px; margin: 0 auto;
    padding: 24px 24px;
    border-top: 1px solid var(--border);
}

.comments-section {
    /* Full content width so the discussion aligns with the blog article. */
    max-width: none; margin: 0;
    padding: 0 0 80px;
}
.comments-title {
    display: flex; align-items: center; gap: 10px;
    /* Same display face as the site logo / section headers. */
    font-family: "OdorMeanChey", var(--bs-font-sans-serif), system-ui, sans-serif;
    font-size: 20px; font-weight: 400;
    margin-bottom: 28px; padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}
.comment-node {
    position: relative;
    margin-bottom: 8px;
}
/* Threaded replies: gallery-style vertical guide line with curved branches.
   The line sits under the parent avatar's centre; each reply hangs off it via a
   rounded elbow, and the run continues down to the next sibling (past that
   reply's own sub-thread) — so nesting reads cleanly at every level. */
/* Connector that drops from a parent's avatar, down through its own card, into
   the reply thread — so the guide line reads as ONE run from the root avatar to
   the level-1 avatar, and level-1 to level-2. Only drawn when expanded. */
.comment-node.has-replies:not(.comment-collapsed) > .comment-row {
    position: relative;
}
.comment-node.has-replies:not(.comment-collapsed) > .comment-row::after {
    content: "";
    position: absolute;
    left: 20px;          /* parent avatar centre (40 / 2) */
    top: 42px;           /* just below the avatar */
    bottom: -10px;       /* bridge the gap down into the reply thread */
    width: 1.5px;
    background: var(--border);
    pointer-events: none;
}
.comment-node .comment-thread {
    position: relative;
    margin-left: 20px;   /* guide line stays under the parent avatar centre */
    padding-left: 32px;  /* reply avatar lands under the parent's content column */
    margin-top: 2px;
}
/* Curved elbow branching from the line into each reply's avatar. */
.comment-thread > .comment-node::before {
    content: "";
    position: absolute;
    left: -32px;         /* back to the parent avatar centre */
    top: -6px;
    width: 32px;         /* reaches across to the reply avatar */
    height: 28px;        /* curves down to the reply avatar centre */
    border-left: 1.5px solid var(--border);
    border-bottom: 1.5px solid var(--border);
    border-bottom-left-radius: 14px;
    pointer-events: none;
}
/* Vertical run down to the next sibling (dropped after the last reply, so the
   line terminates at the final elbow instead of dangling). */
.comment-thread > .comment-node:not(:last-child)::after {
    content: "";
    position: absolute;
    left: -32px;
    top: -6px;
    bottom: 0;
    width: 1.5px;
    background: var(--border);
    pointer-events: none;
}
/* Avatar sits OUTSIDE the card (same as the composer) so the composer box and
   the comment boxes share the same left edge and their avatars line up. */
.comment-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
/* All comments (root and replies) stay boxless/threaded, matching the gallery
   so the vertical thread line runs cleanly through the whole discussion. */
.comment-card {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 0 2px 6px;
    transition: all 0.2s ease;
}
.comment-card:hover {
    background: transparent;
    border-color: transparent;
}
/* Expand/Collapse toggle caret flips when the node is open. */
.comment-toggle .toggle-caret {
    font-size: 10px;
    transition: transform 0.2s ease;
}
.comment-node:not(.comment-collapsed) > .comment-row > .comment-card .toggle-caret {
    transform: rotate(180deg);
}
.comment-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
/* Stacked identity: display name on top, then @handle · date.
   min-height + centering makes the two-line block sit vertically centred
   against the 40px avatar so they line up perfectly. */
.comment-user-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 40px;
}
.comment-name-line {
    display: flex;
    align-items: center;
    gap: 6px;
}
.comment-submeta {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.2;
}
.comment-handle {
    font-weight: 500;
}
.comment-edited {
    font-style: italic;
}
/* "↳ reply to @handle" note, shown under a reply's @handle · date line. */
.comment-replying-to {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 2px 0 6px;
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
}
.comment-replying-to .reply-target {
    font-weight: 600;
    color: var(--accent);
    overflow: hidden;
    text-overflow: ellipsis;
}
.comment-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--ink); color: var(--paper);
    font-size: 14px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.comment-author {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}
.comment-meta {
    font-size: 12px;
    color: var(--muted);
}
.badge-op {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--accent);
    color: #fff;
    text-transform: uppercase;
}
.comment-content {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary);
    margin-bottom: 12px;
}
.comment-footer {
    display: flex;
    align-items: center;
    gap: 12px;
}
/* "View n replies" / "Hide replies" sits on its own row below the action row
   (like the gallery), aligned under the comment content. */
.comment-replies-toggle {
    margin-top: 8px;
}
.vote-group {
    display: flex;
    align-items: center;
    background: var(--surface-overlay);
    border-radius: 20px;
    padding: 2px;
}
.vote-btn {
    background: none;
    border: none;
    color: var(--muted);
    padding: 4px 10px;
    cursor: pointer;
    border-radius: 20px;
    transition: all 0.2s;
    font-size: 12px;
}
.vote-btn:hover {
    background: var(--border);
}
.vote-btn.active-up { color: #ff4500; }
.vote-btn.active-down { color: #7193ff; }

.vote-score {
    font-size: 12px;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
    color: var(--ink);
}
.action-link {
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s;
}
.action-link:hover {
    background: var(--surface-overlay);
}
/* Collapsed node hides ONLY its own immediate replies (progressive expand). */
.comment-node.comment-collapsed > .comment-thread {
    display: none;
}
.reply-form {
    display: none;
    padding-top: 12px;
}
.reply-form.open {
    display: block;
}
.comment-textarea {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-primary);
    resize: none;
    font-family: var(--sans);
}
.small-submit {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    border: none;
    cursor: pointer;
}
.edit-form {
    display: none;
    margin-top: 10px;
}
.edit-form.open {
    display: block;
}
.comment-node.editing .comment-content,
.comment-node.editing .comment-footer {
    display: none;
}

.action-btn.shared {
    color: var(--green);
}
.shared-indicator {
    color: var(--green) !important;
}

/* ── SHARE & UTILITY BAR ── */
  .share-utility-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 24px 0;
    padding: 16px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    width: 100%;
    flex-wrap: wrap;
  }

  .share-icon-btn {
    flex: 1;
    min-width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s;
    font-size: 18px;
    cursor: pointer;
    border: none;
    color: #fff !important;
  }

  /* Mobile: lay the 10 share buttons out as a 2×5 grid, like the gallery
     page's share modal (5 per row). */
  @media (max-width: 600px) {
    .share-utility-bar {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
    }
    .share-icon-btn {
      min-width: 0;
    }
  }

  .share-icon-btn.facebook { background: #1877F2; }
  .share-icon-btn.twitter { background: #000000; }
  .share-icon-btn.linkedin { background: #0A66C2; }
  .share-icon-btn.reddit { background: #FF4500; }
  .share-icon-btn.mail { background: #EA4335; }
  .share-icon-btn.whatsapp { background: #25D366; }
  .share-icon-btn.messenger { background: #0084FF; }
  .share-icon-btn.viber { background: #7360F2; }
  .share-icon-btn.copy { background: #6c757d; }
  .share-icon-btn.qr { background: var(--accent); }

  .share-icon-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    filter: brightness(1.1);
  }

  .qr-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    z-index: 10001;
    text-align: center;
  }
  .qr-modal.show { display: block; }
  .qr-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    z-index: 10000;
  }
  .qr-overlay.show { display: block; }

/* ── BACK BTN ── */
.back-btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--muted);
    background: none; border: none; cursor: pointer;
    font-family: var(--sans); padding: 20px 24px 0;
    transition: color 0.15s;
}
.back-btn:hover { color: var(--ink); }

/* ── TOAST ── */
/* Uses global theme vars (not the .inkwell-wrapper-scoped --ink/--paper, which
   are undefined here) so the toast has a real background bubble. */
/* Toasts now use the shared global toast (static/js/toast.js). */

/* ── LIGHTBOX ── */
#image-lightbox {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.92); display: none; align-items: center; justify-content: center;
    z-index: 10000; cursor: zoom-out; backdrop-filter: blur(12px);
}
#lightbox-img {
    max-width: 95%; max-height: 95%; border-radius: 4px; object-fit: contain;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6); transform: scale(0.9); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
#image-lightbox.open { display: flex; }
#image-lightbox.open #lightbox-img { transform: scale(1); }

/* Breadcrumb wrapper — mirrors the gallery's .gallery-container so the
   breadcrumb sits in the same place (same width, top gap and left offset). */
.blogs-header-wrap {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 16px 0;
    box-sizing: border-box;
}

/* The gallery breadcrumb row is taller because it also holds the sort button,
   which vertically centers the breadcrumb text. The blog has no sort button,
   so give its row the same min-height (matching that ~31px button) so the
   breadcrumb lines up identically. */
.blogs-header-wrap .section-header-line {
    min-height: 31px;
}

/* Blog content column: full card width so the card grid has room to spread,
   with the accidental top spacings stripped so it sits close to the breadcrumb. */
#blogs .inkwell-wrapper > .container {
    padding-top: 0 !important;   /* cancel global .container's inherited 2rem */
}

#blogs .inkwell-wrapper .container > .mx-auto {
    max-width: none !important;  /* let the grid use the full card width */
    padding-top: 0 !important;   /* cancel inline 40px top */
}

/* ── Blog card grid (vertical cards like the home Achievements section:
      image on top, then date / title / author below), grouped by year ── */
#posts-grid {
    padding: 8px 24px 24px;
}

/* Year label (e.g. "2026") above each group. */
.blog-year-header {
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 700;
    color: var(--ink);
    padding-bottom: 16px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
}
.blog-year-header:not(:first-child) {
    margin-top: 40px;
}

.blog-year-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Bigger cards on smaller widths: 2-up, then 1-up. */
@media (max-width: 1023px) {
    .blog-year-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .blog-year-grid { grid-template-columns: 1fr; }
}

/* No card box — just the image and the text below it. */
.blog-grid-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.blog-grid-card-img {
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
    background: var(--surface-inset);
}
.blog-grid-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-grid-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 2px 0;
}

.blog-grid-card-date {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.blog-grid-card-title {
    font-family: var(--sans);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}
.blog-grid-card:hover .blog-grid-card-title { color: var(--accent); }

.blog-grid-card-author {
    font-size: 0.82rem;
    color: var(--muted);
    margin-top: auto;
}
.blog-grid-card-author span {
    color: var(--ink);
    font-weight: 600;
}

/* Pull the card up so only the breadcrumb's own gap sits above it, instead of
   stacking the card's my-4 top margin on top. */
#blogs .inkwell-wrapper {
    margin-top: 0 !important;
}

/* Tighten the breadcrumb's own bottom gap so the list sits right under it. */
.blogs-header-wrap .section-header-line {
    margin-bottom: 0.25rem !important;
}

/* ── RESPONSIVE ── */

/* Desktop: align with the logo like the gallery/about pages.
   The global .container reserves 10rem on the right for the logo; the blog's
   own inner .container adds it again, pushing content left under the logo.
   Cancel both, cap the width and nudge the column right by 4rem to match. */
@media (min-width: 1024px) {
    .container:has(#blogs) {
        padding-right: 0 !important;
    }

    #blogs .container {
        padding-right: 0 !important;
    }

    #blogs .inkwell-wrapper,
    #blogs .blogs-header-wrap {
        position: relative;
        left: 4rem;
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   DISCUSSION / COMMENTS (rich composer, sort tabs, badges)
   ══════════════════════════════════════════════════════════════════════ */
.comments-title i { color: var(--text-primary); }
.v-count-badge {
    /* Plain "(n)" — force a normal sans face (OdorMeanChey mangles digits),
       sized to sit level with the title text. */
    font-family: var(--sans);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-muted);
}

/* ── Composer ── */
/* Divider line under the composer (below the Post button) to separate it from
   the discussion below. */
.v-composer { display: flex; gap: 12px; padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid var(--border); }
.v-composer-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    background: var(--surface-inset); color: var(--text-primary);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; overflow: hidden;
}
.v-composer-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Outer holds the bordered editor box PLUS the counter and action buttons that
   now sit outside/below the box. */
.v-editor-outer {
    flex: 1; min-width: 0;
}
.v-editor-wrap {
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface-inset);
    /* Not hidden — it would clip the emoji/GIF dropdown popups. */
    position: relative;
}
.v-toolbar { border-top-left-radius: 12px; border-top-right-radius: 12px; }
.v-toolbar {
    display: flex; align-items: center; gap: 2px; position: relative;
    padding: 6px 8px; border-bottom: 1px solid var(--border);
    flex-wrap: nowrap;  /* single row on every screen size */
}
.v-tool {
    background: none; border: none; color: var(--text-secondary);
    width: 30px; height: 30px; border-radius: 6px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; transition: background 0.15s, color 0.15s;
}
.v-tool:hover { background: var(--surface-overlay); color: var(--text-primary); }
.v-tool-text { width: auto; padding: 0 8px; font-weight: 800; font-size: 12px; letter-spacing: 0.5px; }
.v-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
.v-sep-flex { flex: 1; background: none; }
.v-editor {
    min-height: 70px; max-height: 260px; overflow-y: auto;
    padding: 12px 14px; font-size: 14px; line-height: 1.6;
    color: var(--text-primary); outline: none;
}
.v-editor:empty::before { content: attr(data-ph); color: var(--text-muted); }
.v-editor a { color: var(--accent); }
.v-gif-preview { padding: 0 14px 8px; position: relative; }
.v-gif-preview img { max-width: 200px; border-radius: 8px; display: block; }
.v-gif-remove {
    position: absolute; top: 4px; left: 178px;
    background: rgba(0,0,0,0.6); color: #fff; border: none;
    width: 22px; height: 22px; border-radius: 50%; cursor: pointer; font-size: 14px;
    line-height: 1;
}
/* Counter + actions sit inside the box, aligned to its right edge. */
.v-composer-footer { text-align: right; padding: 6px 14px 0; }
.v-counter { font-size: 12px; color: var(--text-muted); }
.v-composer-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 8px 12px 12px; }
/* Secondary "ghost" button (Clear / Cancel) — bordered, subtle fill on hover,
   sized to sit level with the filled Post button. */
.v-cancel-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; color: var(--text-secondary);
    border: 1px solid var(--border); border-radius: 10px;
    padding: 9px 18px; font-weight: 600; font-size: 14px;
    cursor: pointer; font-family: var(--sans);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.v-cancel-btn:hover {
    background: var(--surface-overlay);
    color: var(--text-primary);
    border-color: var(--border-strong, var(--border));
}
.v-cancel-btn:active { transform: translateY(0.5px); }
.v-post-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--danger-500, #b23b3b); color: #fff;
    border: none; border-radius: 10px; padding: 10px 20px;
    font-weight: 700; font-size: 14px; cursor: pointer; font-family: var(--sans);
    transition: filter 0.15s;
}
.v-post-btn:hover:not(:disabled) { filter: brightness(1.1); }
.v-post-btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }
/* Counter turns red once the comment exceeds the character limit. */
.v-counter-over { color: var(--danger-500, #ef4444); font-weight: 700; }

/* Mobile: shrink toolbar controls so all buttons stay on one row (no wrap). */
@media (max-width: 560px) {
    .v-toolbar { gap: 0; padding: 5px 6px; }
    .v-tool { width: 26px; height: 26px; font-size: 13px; }
    .v-tool-text { width: auto; padding: 0 6px; font-size: 11px; }
    .v-sep { margin: 0 1px; }
    .v-composer { gap: 8px; }
    .v-composer-avatar { width: 34px; height: 34px; }
    .comment-row { gap: 8px; }
    .comment-avatar { width: 34px; height: 34px; font-size: 12px; }
    .comment-user-info { min-height: 34px; }
}
@media (max-width: 380px) {
    .v-tool { width: 23px; height: 23px; font-size: 12px; }
    .v-tool-text { padding: 0 5px; }
}

/* Pickers open upward by default; JS flips them down (.v-open-down) when
   there isn't room above. */
.v-emoji-panel, .v-gif-panel { bottom: calc(100% + 6px); top: auto; }
.v-emoji-panel.v-open-down, .v-gif-panel.v-open-down { bottom: auto; top: calc(100% + 6px); }

/* ── Emoji picker (emoji-picker-element web component) ── */
.v-emoji-panel {
    position: absolute; right: 8px; z-index: 60;
    border-radius: 12px; overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.v-emoji-panel emoji-picker {
    width: 340px;
    height: 360px;
    --background: var(--surface-raised);
    --border-color: var(--border);
    --input-border-color: var(--border);
    --input-background: var(--surface-inset);
    --indicator-color: var(--accent);
    --button-hover-background: var(--surface-overlay);
    --category-emoji-size: 1.15rem;
}

/* ── GIF picker ── */
.v-gif-panel {
    position: absolute; right: 8px; z-index: 60;
    background: var(--surface-raised); border: 1px solid var(--border);
    border-radius: 12px; padding: 10px; width: 360px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.v-gif-search {
    width: 100%; padding: 11px 14px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--surface-inset);
    color: var(--text-primary); font-size: 13px; margin-bottom: 8px; outline: none;
}
.v-gif-heading {
    background: var(--surface-inset); border: 1px solid var(--border);
    border-radius: 10px; padding: 9px; text-align: center;
    font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px;
}
.v-gif-results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; max-height: 320px; overflow-y: auto; }
.v-gif-results img { width: 100%; border-radius: 8px; cursor: pointer; display: block; }
.v-gif-nokey { font-size: 12px; color: var(--text-secondary); padding: 12px; line-height: 1.5; }
.v-gif-nokey code { color: var(--accent); }

/* ── GIF in comments ── */
.v-comment-gif { max-width: 260px; border-radius: 10px; margin-top: 6px; display: block; }